@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
1,211 lines (1,210 loc) • 106 kB
JavaScript
import { createImage, DApplication, DBase, DBaseState, DButton, DButtonFile, DButtonFileAs, DButtonGroup, DButtonRedo, DButtonUndo, DCommandSave, DControllers, DDiagramEditor, DDiagrams, DDialogConfirmDelete, DDialogConfirmDiscard, DDialogSaveAs, DDialogSelect, DLayoutHorizontal, DLayoutSpace, DLayoutVertical, DThemes, EShapeCircle, EShapeConnectorLine, EShapeEmbeddeds, EShapeLine, EShapeRectangle, EShapeRectangleRounded, EShapeResourceManagerDeserializationMode, EShapeSemicircle, EShapeTriangle, EShapeTriangleRounded, isArray, isFunction, isString, UtilClipboard, UtilFileDownloader, UtilGestureModifier, UtilGestureModifiers, UtilKeyboardEvent } from "@wcardinal/wcardinal-ui";
import { Rectangle } from "pixi.js";
import { ECommandShapeCreate } from "./command/e-command-shape-create";
import { EDialogProcessing } from "./editor/e-dialog-processing";
import { getDialogSelectThumbnailSize, newDialogSelectWithThumbnails } from "./editor/e-dialog-select-with-thumbnails";
import { EEditorAction } from "./editor/e-editor-action";
import { EEditorCanvas } from "./editor/e-editor-canvas";
import { EEditorCanvasLegacy } from "./editor/e-editor-canvas-legacy";
import { EEditorCoordinate } from "./editor/e-editor-coordinate";
import { EEditorLayer } from "./editor/e-editor-layer";
import { EEditorShape } from "./editor/e-editor-shape";
import { EEditorSnap } from "./editor/e-editor-snap";
import { EEditorData } from "./editor/e-editor-data";
import { EEditorText } from "./editor/e-editor-text";
import { EEditorTree } from "./editor/e-editor-tree";
import { EShapeExtensionFactories } from "./extension/e-shape-extension-factories";
import { EShapeExtensions } from "./extension/e-shape-extensions";
import { EToolGroupImpl } from "./tool/e-tool-group-impl";
import { EToolSelect } from "./tool/e-tool-select";
import { EToolShapeCreate } from "./tool/e-tool-shape-create";
import { EToolShapeCreateLine } from "./tool/e-tool-shape-create-line";
import { EToolShapeEditLine } from "./tool/e-tool-shape-edit-line";
import { EToolShapeCreateLineConnector } from "./tool/e-tool-shape-create-line-connector";
import { EToolShapeEditLineConnector } from "./tool/e-tool-shape-edit-line-connector";
import { EEditorDataMapping } from "./editor/e-editor-data-mapping";
import { EToolShapeCreateElbowConnector } from "./tool/e-tool-shape-create-elbow-connector";
import { EEditorValidation } from "./editor/e-editor-validation";
import { EEditorSearch } from "./editor/e-editor-search";
import { ECommandDocumentCreate } from "./command/e-command-document-create";
import { ECommandDocumentOpen } from "./command/e-command-document-open";
import { EDialogCanvas } from "./editor/e-dialog-canvas";
import { UtilCanvas } from "./util/util-canvas";
var FGraphicEditor = /** @class */ (function () {
function FGraphicEditor(options) {
var _a, _b, _c;
// Options
this._options = options;
var theme = this.toTheme(options);
this._theme = theme;
this._margin = (_a = options.margin) !== null && _a !== void 0 ? _a : theme.getMargin();
var piece = options.piece;
this._isPieceEnabled = (_b = piece === null || piece === void 0 ? void 0 : piece.enable) !== null && _b !== void 0 ? _b : true;
this._toPieceId = (_c = piece === null || piece === void 0 ? void 0 : piece.toId) !== null && _c !== void 0 ? _c : (function () { return null; });
this._isEditable = options.editable !== false;
this._icons = this.toIcons(theme);
this._validation = this.toValidation(options);
this._search = this.toSearch(options);
this._controller = options.controller;
this._canvas = new UtilCanvas(options.canvas);
// Application
this._application = new DApplication(options.application);
// Others
this._editorButtonGroup = null;
this.init();
}
Object.defineProperty(FGraphicEditor.prototype, "application", {
get: function () {
return this._application;
},
enumerable: false,
configurable: true
});
Object.defineProperty(FGraphicEditor.prototype, "controller", {
get: function () {
return this._controller;
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.toIcons = function (theme) {
var iconBuilder = theme.getIconBuilder();
EShapeExtensions.merge(iconBuilder);
EShapeExtensionFactories.merge(iconBuilder);
var result = iconBuilder.build();
EShapeExtensions.build(result);
EShapeExtensionFactories.build(result);
return result;
};
FGraphicEditor.prototype.toValidation = function (options) {
var validation = options.validation;
if (validation != null) {
return {
validator: validation.validator,
force: validation.force === true
};
}
return {
validator: undefined,
force: false
};
};
FGraphicEditor.prototype.toSearch = function (options) {
var search = options.search;
if (search != null) {
return {
finder: search.finder
};
}
return {
finder: undefined
};
};
FGraphicEditor.prototype.init = function () {
this.initDiagram();
this.initHeader();
this.initTools();
this.initEditors();
this.initCopyAndPaste();
this.initShortcut();
};
FGraphicEditor.prototype.initDiagram = function () {
var diagram = this.diagram;
this.getDiagramContainer().addChild(diagram);
DControllers.setDocumentController(diagram);
};
FGraphicEditor.prototype.initHeader = function () {
var header = this.newHeader(this._options);
if (header) {
this.getHeaderContainer().addChild(header);
this._header = header;
}
};
FGraphicEditor.prototype.initTools = function () {
this.getToolButtonLayoutContainer().addChild(this.newToolButtonLayout());
// Activates the select tool and then disables all the tools.
// Otherwise, toolShapeButtonSelect.activate() won't work
// because toolShapeButtonSelect.state.isActionable is not true.
this.toolShapeButtonSelect.activate();
this.toolShapeButtonGroup.disable();
};
FGraphicEditor.prototype.initEditors = function () {
this.getEditorLayoutContainer().addChild(this.newEditorLayout());
if (!this.isEditorCanvasCompatible()) {
this.diagram.addChild(this.editorCanvas);
}
// Activate the coordinate editor
this.editorButtonCoordinate.activate();
};
FGraphicEditor.prototype.initCopyAndPaste = function () {
var _this = this;
new UtilClipboard(this._application.getLayerBase().view)
.on("copy", function (clipboardData) {
var serialized = _this.toolShapeSelect.selection.serialize();
if (serialized != null) {
clipboardData.setData("text", serialized);
}
})
.on("cut", function (clipboardData) {
var serialized = _this.toolShapeSelect.selection.serialize();
if (serialized != null) {
clipboardData.setData("text", serialized);
_this.toolShapeSelect.selection.delete();
}
})
.on("paste", function (clipboardData) {
var serialized = clipboardData.getData("text");
_this.toolShapeSelect.selection.deserialize(serialized);
});
};
FGraphicEditor.prototype.initShortcut = function () {
this.initShortcutShape();
this.initShortcutTree();
};
FGraphicEditor.prototype.initShortcutShape = function () {
var _this = this;
var theme = DThemes.get("EEditorShape");
var groupShortcut = theme.getButtonGroupShortcut();
if (groupShortcut != null) {
UtilKeyboardEvent.on(this.diagram, groupShortcut, function (e) {
_this.toolShapeSelect.selection.group();
});
}
var ungroupShortcut = theme.getButtonUngroupShortcut();
if (ungroupShortcut != null) {
UtilKeyboardEvent.on(this.diagram, ungroupShortcut, function (e) {
_this.toolShapeSelect.selection.ungroup();
});
}
};
FGraphicEditor.prototype.initShortcutTree = function () {
var _this = this;
var theme = DThemes.get("EEditorTree");
var bringToFrontShortcut = theme.getButtonBringToFrontShortcut();
if (bringToFrontShortcut != null) {
UtilKeyboardEvent.on(this.diagram, bringToFrontShortcut, function (e) {
_this.toolShapeSelect.selection.bringToFront();
});
}
var bringToForwardShortcut = theme.getButtonBringForwardShortcut();
if (bringToForwardShortcut != null) {
UtilKeyboardEvent.on(this.diagram, bringToForwardShortcut, function (e) {
_this.toolShapeSelect.selection.bringForward();
});
}
var sendBackwardShortcut = theme.getButtonSendBackwardShortcut();
if (sendBackwardShortcut != null) {
UtilKeyboardEvent.on(this.diagram, sendBackwardShortcut, function (e) {
_this.toolShapeSelect.selection.sendBackward();
});
}
var sendToBackShortcut = theme.getButtonSendToBackShortcut();
if (sendToBackShortcut != null) {
UtilKeyboardEvent.on(this.diagram, sendToBackShortcut, function (e) {
_this.toolShapeSelect.selection.sendToBack();
});
}
};
FGraphicEditor.prototype.newHeader = function (options) {
var header = options.header;
if (header != null) {
var result = header(this.newToolFileButtons());
if (result) {
var margin_1 = this._margin;
result.x = margin_1;
result.y = margin_1;
result.setWidth(function (p) { return p - 2 * margin_1; });
return result;
}
}
return null;
};
FGraphicEditor.prototype.getHeaderContainer = function () {
return this._application.stage;
};
Object.defineProperty(FGraphicEditor.prototype, "toolFileButtonCreate", {
get: function () {
var _a;
return ((_a = this._toolFileButtonCreate) !== null && _a !== void 0 ? _a : (this._toolFileButtonCreate = this.newToolFileButtonCreate()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolFileButtonCreate = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this._icons.new
},
title: theme.getToolFileButtonCreateTitle(),
shortcut: theme.getToolFileButtonCreateShortcut(),
theme: theme.getToolFileButtonTheme(),
state: this._isEditable ? undefined : DBaseState.DISABLED,
on: {
active: function (emitter) {
_this.onToolFileButtonCreateActive(emitter);
}
}
});
};
FGraphicEditor.prototype.onToolFileButtonCreateActive = function (opener) {
var _this = this;
if (this.diagram.isChanged()) {
this.dialogDiscard.open(opener).then(function () {
_this.dialogCreate.then(function (dialogCreate) {
dialogCreate.reset().open(opener);
});
});
}
else {
this.dialogCreate.then(function (dialogCreate) {
dialogCreate.reset().open(opener);
});
}
};
Object.defineProperty(FGraphicEditor.prototype, "toolFileButtonOpen", {
get: function () {
var _a;
return ((_a = this._toolFileButtonOpen) !== null && _a !== void 0 ? _a : (this._toolFileButtonOpen = this.newToolFileButtonOpen()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolFileButtonOpen = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this._icons.open
},
title: theme.getToolFileButtonOpenTitle(),
shortcut: theme.getToolFileButtonOpenShortcut(),
theme: theme.getToolFileButtonTheme(),
on: {
active: function (emitter) {
_this.onToolFileButtonOpenActive(emitter);
}
}
});
};
FGraphicEditor.prototype.onToolFileButtonOpenActive = function (opener) {
var _this = this;
if (this.diagram.isChanged()) {
this.dialogDiscard.open(opener).then(function () {
_this.dialogSelect.then(function (dialogSelect) {
dialogSelect.open(opener);
});
});
}
else {
this.dialogSelect.then(function (dialogSelect) {
dialogSelect.open(opener);
});
}
};
Object.defineProperty(FGraphicEditor.prototype, "toolFileButtonSave", {
get: function () {
var _a;
return ((_a = this._toolFileButtonSave) !== null && _a !== void 0 ? _a : (this._toolFileButtonSave = this.newToolFileButtonSave()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolFileButtonSave = function () {
var _this = this;
var theme = this._theme;
var result = new DButton({
image: {
source: this._icons.save
},
title: theme.getToolFileButtonSaveTitle(),
shortcut: theme.getToolFileButtonSaveShortcut(),
theme: theme.getToolFileButtonTheme(),
state: DBaseState.DISABLED,
on: {
active: function () {
_this.onToolFileButtonSaveActive();
}
}
});
if (this._isEditable) {
var diagram_1 = this.diagram;
diagram_1.on("change", function () {
result.state.isDisabled = !diagram_1.isChanged();
});
}
return result;
};
FGraphicEditor.prototype.onToolFileButtonSaveActive = function () {
this.validate().then(function () {
DControllers.getCommandController().push(new DCommandSave());
});
};
FGraphicEditor.prototype.validate = function () {
var _this = this;
var validation = this._validation;
var validator = validation.validator;
if (validator != null && validation.force) {
var canvas = this.diagram.canvas;
if (canvas) {
try {
var result = validator(canvas);
if (result != null) {
var dialogSaveProcessing_1 = this.dialogSaveProcessing;
dialogSaveProcessing_1.open(this.toolFileButtonSave);
if (isArray(result)) {
if (0 < result.length) {
var editorValidation = this.editorValidation;
editorValidation.list.data.clearAndAddAll(result);
var editorButtonValidation = this.editorButtonValidation;
if (!editorButtonValidation.state.isActive) {
editorButtonValidation.activate();
}
dialogSaveProcessing_1.reject("validation");
return Promise.reject();
}
else {
return Promise.resolve();
}
}
else {
return result.then(function (results) {
if (0 < results.length) {
var editorValidation = _this.editorValidation;
editorValidation.list.data.clearAndAddAll(results);
var editorButtonValidation = _this.editorButtonValidation;
if (!editorButtonValidation.state.isActive) {
editorButtonValidation.activate();
}
dialogSaveProcessing_1.reject("validation");
return Promise.reject();
}
else {
return Promise.resolve();
}
}, function () {
dialogSaveProcessing_1.reject("validation-fail");
return Promise.reject();
});
}
}
}
catch (_a) {
var dialogSaveProcessing = this.dialogSaveProcessing;
dialogSaveProcessing.open(this.toolFileButtonSave);
dialogSaveProcessing.reject("validation-fail");
return Promise.reject();
}
}
}
return Promise.resolve();
};
Object.defineProperty(FGraphicEditor.prototype, "toolFileButtonSaveAs", {
get: function () {
var _a;
return ((_a = this._toolFileButtonSaveAs) !== null && _a !== void 0 ? _a : (this._toolFileButtonSaveAs = this.newToolFileButtonSaveAs()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolFileButtonSaveAs = function () {
var _this = this;
var theme = this._theme;
var result = new DButton({
image: {
source: this._icons.save_as
},
title: theme.getToolFileButtonSaveAsTitle(),
shortcut: theme.getToolFileButtonSaveAsShortcut(),
theme: theme.getToolFileButtonTheme(),
state: DBaseState.DISABLED,
on: {
active: function () {
_this.onToolFileButtonSaveAsActive();
}
}
});
if (this._isEditable) {
var diagram = this.diagram;
diagram.on("set", function () {
result.state.isDisabled = false;
});
diagram.on("unset", function () {
result.state.isDisabled = true;
});
}
return result;
};
FGraphicEditor.prototype.onToolFileButtonSaveAsActive = function () {
var _this = this;
this.validate().then(function () {
_this.dialogSaveAs.open(_this.toolFileButtonSaveAs);
});
};
Object.defineProperty(FGraphicEditor.prototype, "toolFileButtonUpload", {
get: function () {
var _a;
return ((_a = this._toolFileButtonUpload) !== null && _a !== void 0 ? _a : (this._toolFileButtonUpload = this.newToolFileButtonUpload()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolFileButtonUpload = function () {
var _this = this;
var theme = this._theme;
var result = new DButtonFile({
image: {
source: this._icons.upload
},
title: theme.getToolFileButtonUploadTitle(),
shortcut: theme.getToolFileButtonUploadShortcut(),
theme: theme.getToolFileButtonTheme(),
as: DButtonFileAs.TEXT,
checker: function () {
if (_this.diagram.isChanged()) {
return _this.dialogDiscard.open(result);
}
else {
return true;
}
},
on: {
open: function (data) {
_this.onToolFileButtonUploadOpen(data);
}
}
});
return result;
};
FGraphicEditor.prototype.onToolFileButtonUploadOpen = function (data) {
var parsed = DDiagrams.parse(data);
if (parsed != null) {
parsed.id = undefined;
this.diagram.set(parsed);
}
};
Object.defineProperty(FGraphicEditor.prototype, "toolFileButtonDownload", {
get: function () {
var _a;
return ((_a = this._toolFileButtonDownload) !== null && _a !== void 0 ? _a : (this._toolFileButtonDownload = this.newToolFileButtonDownload()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolFileButtonDownload = function () {
var _this = this;
var theme = this._theme;
var result = new DButton({
image: {
source: this._icons.download
},
title: theme.getToolFileButtonDownloadTitle(),
shortcut: theme.getToolFileButtonDownloadShortcut(),
theme: theme.getToolFileButtonTheme(),
state: DBaseState.DISABLED,
on: {
active: function () {
_this.onToolFileButtonDownloadActive();
}
}
});
var diagram = this.diagram;
diagram.on("set", function () {
result.state.isDisabled = false;
});
diagram.on("unset", function () {
result.state.isDisabled = true;
});
return result;
};
FGraphicEditor.prototype.onToolFileButtonDownloadActive = function () {
var serialized = this.diagram.serialize();
if (serialized != null) {
UtilFileDownloader.download("".concat(serialized.name, ".json"), JSON.stringify(serialized));
}
};
Object.defineProperty(FGraphicEditor.prototype, "toolFileButtonUndo", {
get: function () {
var _a;
return ((_a = this._toolFileButtonUndo) !== null && _a !== void 0 ? _a : (this._toolFileButtonUndo = this.newToolFileButtonUndo()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolFileButtonUndo = function () {
var theme = this._theme;
return new DButtonUndo({
title: theme.getToolFileButtonUndoTitle(),
shortcut: theme.getToolFileButtonUndoShortcut(),
theme: theme.getToolFileButtonTheme(),
image: {
source: this._icons.undo
}
});
};
Object.defineProperty(FGraphicEditor.prototype, "toolFileButtonRedo", {
get: function () {
var _a;
return ((_a = this._toolFileButtonRedo) !== null && _a !== void 0 ? _a : (this._toolFileButtonRedo = this.newToolFileButtonRedo()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolFileButtonRedo = function () {
var theme = this._theme;
return new DButtonRedo({
title: theme.getToolFileButtonRedoTitle(),
shortcut: theme.getToolFileButtonRedoShortcut(),
theme: theme.getToolFileButtonTheme(),
image: {
source: this._icons.redo
}
});
};
Object.defineProperty(FGraphicEditor.prototype, "toolFileButtonDelete", {
get: function () {
var _a;
return ((_a = this._toolFileButtonDelete) !== null && _a !== void 0 ? _a : (this._toolFileButtonDelete = this.newToolFileButtonDelete()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolFileButtonDelete = function () {
var _this = this;
var theme = this._theme;
var result = new DButton({
image: {
source: this._icons.delete
},
title: theme.getToolFileButtonDeleteTitle(),
shortcut: theme.getToolFileButtonDeleteShortcut(),
theme: theme.getToolFileButtonTheme(),
state: DBaseState.DISABLED,
on: {
active: function (emitter) {
_this.onToolFileButtonDelete(emitter);
}
}
});
if (this._isEditable) {
var diagram = this.diagram;
diagram.on("set", function () {
result.state.isDisabled = false;
});
diagram.on("unset", function () {
result.state.isDisabled = true;
});
}
return result;
};
FGraphicEditor.prototype.onToolFileButtonDelete = function (opener) {
this.dialogDelete.open(opener);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonGroup", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonGroup) !== null && _a !== void 0 ? _a : (this._toolShapeButtonGroup = this.newToolShapeButtonGroup()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonGroup = function () {
var result = new DButtonGroup();
var diagram = this.diagram;
diagram.on("set", function () {
result.enable();
});
diagram.on("unset", function () {
result.disable();
});
return result;
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonSelect", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonSelect) !== null && _a !== void 0 ? _a : (this._toolShapeButtonSelect = this.newToolShapeButtonSelect()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonSelect = function () {
var _this = this;
var theme = this._theme;
var result = new DButton({
group: this.toolShapeButtonGroup,
toggle: true,
title: theme.getToolShapeButtonSelectTitle(),
theme: theme.getToolShapeButtonTheme(),
image: {
source: this._icons.select
},
on: {
active: function () {
_this.onToolShapeButtonSelectActive();
},
inactive: function () {
_this.onToolShapeButtonSelectInactive();
}
}
});
return result;
};
FGraphicEditor.prototype.onToolShapeButtonSelectActive = function () {
this.toolGroup.activate(this.toolShapeSelect);
};
FGraphicEditor.prototype.onToolShapeButtonSelectInactive = function () {
this.toolGroup.deactivate(this.toolShapeSelect);
};
FGraphicEditor.prototype.newToolShapeButtonCreate = function (title, icon, constructor) {
var _this = this;
return new DButton({
group: this.toolShapeButtonGroup,
toggle: true,
title: title,
theme: this._theme.getToolShapeButtonTheme(),
image: {
source: this._icons[icon]
},
on: {
active: function () {
_this.onToolShapeButtonCreateActive(constructor);
},
inactive: function () {
_this.onToolShapeButtonCreateInactive();
}
}
});
};
FGraphicEditor.prototype.onToolShapeButtonCreateActive = function (constructor) {
var toolShapeCreate = this.toolShapeCreate;
toolShapeCreate.shape = function () { return new constructor(); };
this.toolGroup.activate(toolShapeCreate, constructor);
};
FGraphicEditor.prototype.onToolShapeButtonCreateInactive = function () {
this.toolGroup.deactivate(this.toolShapeCreate);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonCircle", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonCircle) !== null && _a !== void 0 ? _a : (this._toolShapeButtonCircle = this.newToolShapeButtonCircle()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonCircle = function () {
var theme = this._theme;
return this.newToolShapeButtonCreate(theme.getToolShapeButtonCircleTitle(), "shape_circle", EShapeCircle);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonSemicircle", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonSemicircle) !== null && _a !== void 0 ? _a : (this._toolShapeButtonSemicircle = this.newToolShapeButtonSemicircle()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonSemicircle = function () {
var theme = this._theme;
return this.newToolShapeButtonCreate(theme.getToolShapeButtonSemicircleTitle(), "shape_semicircle", EShapeSemicircle);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonRectangle", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonRectangle) !== null && _a !== void 0 ? _a : (this._toolShapeButtonRectangle = this.newToolShapeButtonRectangle()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonRectangle = function () {
var theme = this._theme;
return this.newToolShapeButtonCreate(theme.getToolShapeButtonRectangleTitle(), "shape_rectangle", EShapeRectangle);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonRectangleRounded", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonRectangleRounded) !== null && _a !== void 0 ? _a : (this._toolShapeButtonRectangleRounded = this.newToolShapeButtonRectangleRounded()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonRectangleRounded = function () {
var theme = this._theme;
return this.newToolShapeButtonCreate(theme.getToolShapeButtonRectangleRoundedTitle(), "shape_rectangle_rounded", EShapeRectangleRounded);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonTriangle", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonTriangle) !== null && _a !== void 0 ? _a : (this._toolShapeButtonTriangle = this.newToolShapeButtonTriangle()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonTriangle = function () {
var theme = this._theme;
return this.newToolShapeButtonCreate(theme.getToolShapeButtonTriangleTitle(), "shape_triangle", EShapeTriangle);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonTriangleRounded", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonTriangleRounded) !== null && _a !== void 0 ? _a : (this._toolShapeButtonTriangleRounded = this.newToolShapeButtonTriangleRounded()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonTriangleRounded = function () {
var theme = this._theme;
return this.newToolShapeButtonCreate(theme.getToolShapeButtonTriangleRoundedTitle(), "shape_triangle_rounded", EShapeTriangleRounded);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonLine", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonLine) !== null && _a !== void 0 ? _a : (this._toolShapeButtonLine = this.newToolShapeButtonLine()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonLine = function () {
var _this = this;
var theme = this._theme;
var result = new DButton({
group: this.toolShapeButtonGroup,
toggle: true,
title: theme.getToolShapeButtonLineTitle(),
theme: theme.getToolShapeButtonTheme(),
image: {
source: this._icons.shape_line
},
on: {
active: function () {
_this.onToolShapeButtonLineActive();
},
inactive: function () {
_this.onToolShapeButtonLineInactive();
}
}
});
this.toolShapeSelect.on("edit", function (shape) {
if (shape instanceof EShapeLine) {
var toolShapeEditLine = _this.toolShapeEditLine;
toolShapeEditLine.shape = shape;
_this.toolGroup.activate(toolShapeEditLine);
}
});
return result;
};
FGraphicEditor.prototype.onToolShapeButtonLineActive = function () {
this.toolGroup.activate(this.toolShapeCreateLine);
};
FGraphicEditor.prototype.onToolShapeButtonLineInactive = function () {
this.toolGroup.deactivate(this.toolShapeCreateLine);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonLineConnector", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonLineConnector) !== null && _a !== void 0 ? _a : (this._toolShapeButtonLineConnector = this.newToolShapeButtonLineConnector()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonLineConnector = function () {
var _this = this;
var theme = this._theme;
var result = new DButton({
group: this.toolShapeButtonGroup,
toggle: true,
title: theme.getToolShapeButtonLineConnectorTitle(),
theme: theme.getToolShapeButtonTheme(),
image: {
source: this._icons.shape_line_connector
},
on: {
active: function () {
_this.onToolShapeButtonLineConnectorActive();
},
inactive: function () {
_this.onToolShapeButtonLineConnectorInactive();
}
}
});
this.toolShapeSelect.on("edit", function (shape) {
if (shape instanceof EShapeConnectorLine) {
var toolShapeEditLineConnector = _this.toolShapeEditLineConnector;
toolShapeEditLineConnector.shape = shape;
_this.toolGroup.activate(toolShapeEditLineConnector);
}
});
return result;
};
FGraphicEditor.prototype.onToolShapeButtonLineConnectorActive = function () {
this.toolGroup.activate(this.toolShapeCreateLineConnector);
};
FGraphicEditor.prototype.onToolShapeButtonLineConnectorInactive = function () {
this.toolGroup.deactivate(this.toolShapeCreateLineConnector);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonElbowConnector", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonElbowConnector) !== null && _a !== void 0 ? _a : (this._toolShapeButtonElbowConnector = this.newToolShapeButtonElbowConnector()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonElbowConnector = function () {
var _this = this;
var theme = this._theme;
var result = new DButton({
group: this.toolShapeButtonGroup,
toggle: true,
title: theme.getToolShapeButtonElbowConnectorTitle(),
theme: theme.getToolShapeButtonTheme(),
image: {
source: this._icons.shape_elbow_connector
},
on: {
active: function () {
_this.onToolShapeButtonElbowConnectorActive();
},
inactive: function () {
_this.onToolShapeButtonElbowConnectorInactive();
}
}
});
this.toolShapeSelect.on("edit", function (shape) {
if (shape instanceof EShapeConnectorLine) {
var toolShapeEditLineConnector = _this.toolShapeEditLineConnector;
toolShapeEditLineConnector.shape = shape;
_this.toolGroup.activate(toolShapeEditLineConnector);
}
});
return result;
};
FGraphicEditor.prototype.onToolShapeButtonElbowConnectorActive = function () {
this.toolGroup.activate(this.toolShapeCreateElbowConnector);
};
FGraphicEditor.prototype.onToolShapeButtonElbowConnectorInactive = function () {
this.toolGroup.deactivate(this.toolShapeCreateElbowConnector);
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonImage", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonImage) !== null && _a !== void 0 ? _a : (this._toolShapeButtonImage = this.newToolShapeButtonImage()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonImage = function () {
var _this = this;
var theme = this._theme;
return new DButtonFile({
group: this.toolShapeButtonGroup,
title: theme.getToolShapeButtonImageTitle(),
theme: theme.getToolShapeButtonTheme(),
as: DButtonFileAs.DATA_URL,
image: {
source: this._icons.editor_image
},
on: {
open: function (dataUrl) {
_this.onToolShapeButtonImageOpen(dataUrl);
}
}
});
};
FGraphicEditor.prototype.onToolShapeButtonImageOpen = function (dataUrl) {
var _this = this;
var diagram = this.diagram;
var layer = diagram.layer;
var canvas = diagram.canvas;
if (canvas != null && layer != null) {
createImage(dataUrl).then(function (shape) {
shape.transform.position.set(canvas.width * 0.5, canvas.height * 0.5);
shape.attach(layer);
DControllers.getCommandController().push(new ECommandShapeCreate([shape], layer, _this.toolShapeSelect.selection, true));
});
}
};
Object.defineProperty(FGraphicEditor.prototype, "toolShapeButtonGraphicPiece", {
get: function () {
var _a;
return ((_a = this._toolShapeButtonGraphicPiece) !== null && _a !== void 0 ? _a : (this._toolShapeButtonGraphicPiece = this.newToolShapeButtonGraphicPiece()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newToolShapeButtonGraphicPiece = function () {
var _this = this;
var theme = this._theme;
return new DButton({
group: this.toolShapeButtonGroup,
title: theme.getToolShapeButtonGraphicPieceTitle(),
theme: theme.getToolShapeButtonTheme(),
image: {
source: this._icons.graphic_piece
},
on: {
active: function (emitter) {
_this.onToolShapeButtonGraphicPieceActive(emitter);
}
}
});
};
FGraphicEditor.prototype.onToolShapeButtonGraphicPieceActive = function (opener) {
this.dialogSelectPiece.then(function (dialogSelectPiece) {
dialogSelectPiece.open(opener);
});
};
FGraphicEditor.prototype.newToolShapeButtonExtensionFactory = function (factory) {
var _this = this;
var dialogSelect = null;
return new DButton({
group: this.toolShapeButtonGroup,
title: this.toExtensionTitle(factory),
theme: this._theme.getToolShapeButtonTheme(),
image: {
source: factory.icon.texture
},
on: {
active: function (emitter) {
(dialogSelect !== null && dialogSelect !== void 0 ? dialogSelect : (dialogSelect = _this.newDialogSelectExtensionFactory(factory))).open(emitter);
}
}
});
};
FGraphicEditor.prototype.newToolShapeButtonExtension = function (extension) {
var _this = this;
var creatorOrTool = null;
var result = new DButton({
group: this.toolShapeButtonGroup,
title: this.toExtensionTitle(extension),
theme: this._theme.getToolShapeButtonTheme(),
toggle: true,
image: {
source: extension.icon.texture
},
on: {
active: function () {
if (creatorOrTool == null) {
creatorOrTool = _this.toExtensionCreatorOrTool(extension);
}
_this.onToolShapeButtonExtensionActive(creatorOrTool);
},
inactive: function () {
if (creatorOrTool == null) {
creatorOrTool = _this.toExtensionCreatorOrTool(extension);
}
_this.onToolShapeButtonExtensionInactive(creatorOrTool);
}
}
});
if ("type" in extension) {
var updaterCreatorOrOptions_1 = extension.updater;
if (updaterCreatorOrOptions_1 != null) {
var type_1 = extension.type;
var updater_1 = null;
this.toolShapeSelect.on("edit", function (shape) {
if (shape.type === type_1) {
if (updater_1 == null) {
updater_1 = _this.toExtensionUpdater(updaterCreatorOrOptions_1);
}
updater_1.shape = shape;
_this.toolGroup.activate(updater_1);
}
});
}
}
return result;
};
FGraphicEditor.prototype.toExtensionUpdater = function (updaterCreatorOrOptions) {
var _this = this;
var updaterCreator = isFunction(updaterCreatorOrOptions)
? updaterCreatorOrOptions
: updaterCreatorOrOptions.tool;
var result = updaterCreator(this.toolShapeSelect.selection, this.diagram);
result.on("done", function () {
_this.toolGroup.activate(_this.toolShapeSelect);
});
result.on("cancel", function () {
_this.toolGroup.activate(_this.toolShapeSelect);
});
return result;
};
FGraphicEditor.prototype.toExtensionCreatorOrTool = function (extension) {
var _this = this;
var creator = extension.creator;
if (isFunction(creator)) {
return creator;
}
else {
var result = creator.tool(this.toolShapeSelect.selection, this.diagram);
result.on("done", function () {
_this.toolShapeButtonSelect.activate();
});
result.on("cancel", function () {
_this.toolShapeButtonSelect.activate();
});
return result;
}
};
FGraphicEditor.prototype.onToolShapeButtonExtensionActive = function (creatorOrTool) {
var toolGroup = this.toolGroup;
if (isFunction(creatorOrTool)) {
var toolShapeCreate = this.toolShapeCreate;
toolShapeCreate.shape = creatorOrTool;
toolGroup.activate(toolShapeCreate, creatorOrTool);
}
else {
toolGroup.activate(creatorOrTool);
}
};
FGraphicEditor.prototype.onToolShapeButtonExtensionInactive = function (creatorOrTool) {
var toolGroup = this.toolGroup;
if (isFunction(creatorOrTool)) {
toolGroup.deactivate(this.toolShapeCreate, creatorOrTool);
}
else {
toolGroup.deactivate(creatorOrTool);
}
};
FGraphicEditor.prototype.toExtensionTitle = function (extension) {
var title = extension.title;
if (isString(title)) {
return title;
}
return title.create;
};
FGraphicEditor.prototype.newDialogSelectExtensionFactory = function (factory) {
var _this = this;
return new DDialogSelect({
controller: factory,
list: {
data: {
toLabel: factory.item.toLabel
}
},
on: {
select: function (value) {
_this.onDialogSelectExtensionFactorySelect(value, factory);
}
}
});
};
FGraphicEditor.prototype.onDialogSelectExtensionFactorySelect = function (value, factory) {
var _this = this;
var diagram = this.diagram;
var layer = diagram.layer;
var canvas = diagram.canvas;
if (canvas && layer) {
factory.item.toCreator(value).then(function (creator) {
var shape = creator();
shape.transform.position.set(canvas.width * 0.5, canvas.height * 0.5);
shape.attach(layer);
DControllers.getCommandController().push(new ECommandShapeCreate([shape], layer, _this.toolShapeSelect.selection, true));
});
}
};
FGraphicEditor.prototype.newToolFileButtons = function () {
return [
this.toolFileButtonCreate,
this.toolFileButtonOpen,
this.toolFileButtonSave,
this.toolFileButtonSaveAs,
this.toolFileButtonUpload,
this.toolFileButtonDownload,
this.toolFileButtonUndo,
this.toolFileButtonRedo,
this.toolFileButtonDelete
];
};
FGraphicEditor.prototype.newToolShapeButtons = function () {
var result = [
this.toolShapeButtonSelect,
this.toolShapeButtonLine,
this.toolShapeButtonCircle,
this.toolShapeButtonSemicircle,
this.toolShapeButtonRectangle,
this.toolShapeButtonRectangleRounded,
this.toolShapeButtonTriangle,
this.toolShapeButtonTriangleRounded,
this.toolShapeButtonLineConnector,
this.toolShapeButtonElbowConnector,
this.toolShapeButtonImage
];
if (this._isPieceEnabled) {
result.push(this.toolShapeButtonGraphicPiece);
}
return result;
};
FGraphicEditor.prototype.newToolShapeButtonsExtension = function () {
var _this = this;
var result = [];
EShapeExtensions.each(function (extension) {
if ("icon" in extension) {
result.push(_this.newToolShapeButtonExtension(extension));
}
});
EShapeExtensionFactories.each(function (factory) {
result.push(_this.newToolShapeButtonExtensionFactory(factory));
});
return result;
};
FGraphicEditor.prototype.getToolButtonLayoutContainer = function () {
return this._application.stage;
};
FGraphicEditor.prototype.newToolButtonLayout = function () {
var margin = this._margin;
return new DLayoutVertical({
x: margin,
y: this.getToolButtonLayoutY(margin),
theme: "EButtonToolLayout",
children: this.newToolButtons()
});
};
FGraphicEditor.prototype.getToolButtonLayoutY = function (margin) {
var header = this._header;
if (header != null) {
return margin + header.height + margin;
}
return margin;
};
FGraphicEditor.prototype.newToolButtons = function () {
var toolFileButtonCreate = this._toolFileButtonCreate;
if (toolFileButtonCreate == null || toolFileButtonCreate.parent == null) {
return this.newToolFileButtons()
.concat(new DLayoutSpace({ height: 10 }))
.concat(this.newToolShapeButtons())
.concat(this.newToolShapeButtonsExtension());
}
else {
return this.newToolShapeButtons().concat(this.newToolShapeButtonsExtension());
}
};
Object.defineProperty(FGraphicEditor.prototype, "editorButtonGroup", {
get: function () {
var _a;
return ((_a = this._editorButtonGroup) !== null && _a !== void 0 ? _a : (this._editorButtonGroup = this.newEditorButtonGroup()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newEditorButtonGroup = function () {
return undefined;
};
Object.defineProperty(FGraphicEditor.prototype, "editorButtonCoordinate", {
get: function () {
var _a;
return ((_a = this._editorButtonCoordinate) !== null && _a !== void 0 ? _a : (this._editorButtonCoordinate = this.newEditorButtonCoordinate()));
},
enumerable: false,
configurable: true
});
FGraphicEditor.prototype.newEditorButtonCoordinate = function () {
var _this = this;
var theme = this._theme;
return new DButton({
group: this.editorButtonGroup,
toggle: true,
image: {
source: this._icons.editor_coordinate
},
title: theme.getEditorButtonCoordinateTitle(),