@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
1,322 lines • 87.4 kB
JavaScript
import { __extends } from "tslib";
import { createLine, DButton, DButtonAmbient, DButtonCheck, DButtonCheckRight, DButtonColor, DButtonColorGradient, DButtonFile, DButtonFileAs, DDialogSelect, DInputReal, DInputRealAndLabel, DLayoutHorizontal, DLayoutSpace, DLayoutVertical, DPane, DSelect, DText, EShapeAcceptorEdgeSide, EShapeCapabilities, EShapeCapability, EShapeCircle, EShapeConnectorElbow, EShapeConnectorLine, EShapeCopyPart, EShapeCorner, EShapeDefaults, EShapeEmbeddeds, EShapeGroup, EShapeImage, EShapeLine, EShapeLockPart, EShapePointsFormatters, EShapePointsMarkerType, EShapePointsStyle, EShapeRectangle, EShapeRectangleRounded, EShapeResourceManagerDeserializationMode, EShapeSemicircle, EShapeStrokeSide, EShapeStrokeStyle, EShapeTriangle, EShapeTriangleRounded, EShapeType, isFunction, isString, toGradientImageUrl, toImageElement } from "@wcardinal/wcardinal-ui";
import { EShapeExtensionFactories } from "../extension/e-shape-extension-factories";
import { EShapeExtensions } from "../extension/e-shape-extensions";
import { newDialogSelectWithThumbnails } from "./e-dialog-select-with-thumbnails";
import { EEDITOR_BUTTON_COUNT } from "./e-editors";
var EEditorShape = /** @class */ (function (_super) {
__extends(EEditorShape, _super);
function EEditorShape(options) {
var _this = _super.call(this, options) || this;
_this._icons = options.icons;
_this._canvas = options.canvas;
_this._selection = options.selection;
_this._isInitialized = false;
var piece = options.piece;
if (piece) {
_this._isPieceEnabled = piece.enable;
_this._pieceExcluder = piece.exclude;
_this._controller = piece.controller;
}
else {
_this._isPieceEnabled = false;
}
_this._isChangeable = options.changeable;
return _this;
}
EEditorShape.prototype.show = function () {
_super.prototype.show.call(this);
this.onShow();
return this;
};
EEditorShape.prototype.onShow = function () {
if (!this._isInitialized) {
this._isInitialized = true;
this.initLayout();
}
this.onSelectionChange();
};
EEditorShape.prototype.initLayout = function () {
var _this = this;
new DLayoutVertical({
parent: this.content,
x: "padding",
y: "padding",
width: "padding",
height: "auto",
children: [
this.layoutChangeTo,
this.buttonFill,
this.buttonFillColor,
this.layoutTexture,
this.buttonStroke,
this.buttonStrokeColor,
this.inputStrokeWidth,
this.inputStrokeAlign,
this.layoutStrokeSide,
this.textCorner,
this.inputCornerRadius,
this.layoutCorner,
this.layoutLine,
this.selectLineStyle,
this.selectLineType,
this.layoutLineTail,
this.selectLineTailType,
this.layoutLineTailSize,
this.buttonLineTailColor,
this.inputLineTailMargin,
this.layoutLineHead,
this.selectLineHeadType,
this.layoutLineHeadSize,
this.buttonLineHeadColor,
this.inputLineHeadMargin
]
});
// Selection change handling
this._selection.on("change", function () {
if (_this.isShown()) {
_this.onSelectionChange();
}
});
};
Object.defineProperty(EEditorShape.prototype, "layoutChangeTo", {
get: function () {
var result = this._layoutChangeTo;
if (result === undefined) {
result = this._isChangeable !== false ? this.newLayoutChangeTo() : null;
this._layoutChangeTo = result;
}
return result;
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newLayoutChangeTo = function () {
var _this = this;
var children = [
this.newTextChangeToLabel(),
this.buttonCircle,
this.buttonSemicircle,
this.buttonRectangle,
this.buttonRectangleRounded,
this.buttonTriangle,
this.buttonTriangleRounded,
this.buttonLine,
this.buttonLineConnector,
this.buttonElbowConnector,
this.buttonImage,
this.buttonGraphicPiece
];
EShapeExtensionFactories.each(function (factory) {
children.push(_this.newButtonExtensionFactory(factory));
});
EShapeExtensions.each(function (extension) {
if (_this.isExtensionReplacable(extension)) {
var creator = extension.creator;
if (isFunction(creator)) {
children.push(_this.newButtonExtension(extension, creator));
}
}
});
children.push(this.buttonGroup, this.buttonUngroup);
return new DLayoutVertical({
width: "100%",
height: "auto",
column: EEDITOR_BUTTON_COUNT,
children: children
});
};
EEditorShape.prototype.isExtensionReplacable = function (extension) {
if ("icon" in extension) {
if ("type" in extension) {
var capability = EShapeCapabilities.get(extension.type);
if (capability != null) {
if (capability & EShapeCapability.REPLACING) {
return true;
}
else {
return false;
}
}
}
return true;
}
return false;
};
EEditorShape.prototype.newTextChangeToLabel = function () {
return new DText({
width: "100%",
text: {
value: this.theme.getTextChangeToLabel()
},
clear: "AFTER"
});
};
EEditorShape.prototype.newButtonExtensionFactory = function (factory) {
var _this = this;
var selectDialog = null;
return new DButtonAmbient({
image: {
source: factory.icon.texture
},
title: this.toExtensionTitle(factory),
theme: "EButtonEditor",
on: {
active: function (emitter) {
selectDialog = selectDialog || _this.newDialogSelectExtensionFactory(factory);
selectDialog.open(emitter);
}
}
});
};
EEditorShape.prototype.newDialogSelectExtensionFactory = function (factory) {
var _this = this;
return new DDialogSelect({
controller: factory,
list: {
data: {
toLabel: factory.item.toLabel
}
},
on: {
select: function (value) {
factory.item.toCreator(value).then(function (creator) {
_this._selection.replace(creator);
});
}
}
});
};
EEditorShape.prototype.newButtonExtension = function (extension, creator) {
var _this = this;
return new DButtonAmbient({
image: {
source: extension.icon.texture
},
title: this.toExtensionTitle(extension),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.replace(creator);
}
}
});
};
EEditorShape.prototype.toExtensionTitle = function (extension) {
var title = extension.title;
if (isString(title)) {
return title;
}
return title.change;
};
Object.defineProperty(EEditorShape.prototype, "buttonCircle", {
get: function () {
var _a;
return ((_a = this._buttonCircle) !== null && _a !== void 0 ? _a : (this._buttonCircle = this.newButtonCircle()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonCircle = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_circle
},
title: this.theme.getButtonCircleTitle(),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.replace(function (existing) {
if (existing.type !== EShapeType.CIRCLE) {
return new EShapeCircle().copy(existing);
}
return null;
});
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonSemicircle", {
get: function () {
var _a;
return ((_a = this._buttonSemicircle) !== null && _a !== void 0 ? _a : (this._buttonSemicircle = this.newButtonSemicircle()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonSemicircle = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_semicircle
},
title: this.theme.getButtonSemicircleTitle(),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.replace(function (existing) {
if (existing.type !== EShapeType.SEMICIRCLE) {
return new EShapeSemicircle().copy(existing);
}
return null;
});
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonRectangle", {
get: function () {
var _a;
return ((_a = this._buttonRectangle) !== null && _a !== void 0 ? _a : (this._buttonRectangle = this.newButtonRectangle()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonRectangle = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_rectangle
},
title: this.theme.getButtonRectangleTitle(),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.replace(function (existing) {
if (existing.type !== EShapeType.RECTANGLE) {
return new EShapeRectangle().copy(existing);
}
return null;
});
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonRectangleRounded", {
get: function () {
var _a;
return ((_a = this._buttonRectangleRounded) !== null && _a !== void 0 ? _a : (this._buttonRectangleRounded = this.newButtonRectangleRounded()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonRectangleRounded = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_rectangle_rounded
},
title: this.theme.getButtonRectangleRoundedTitle(),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.replace(function (existing) {
if (existing.type !== EShapeType.RECTANGLE_ROUNDED) {
return new EShapeRectangleRounded().copy(existing);
}
return null;
});
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonTriangle", {
get: function () {
var _a;
return ((_a = this._buttonTriangle) !== null && _a !== void 0 ? _a : (this._buttonTriangle = this.newButtonTriangle()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonTriangle = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_triangle
},
title: this.theme.getButtonTriangleTitle(),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.replace(function (existing) {
if (existing.type !== EShapeType.TRIANGLE) {
return new EShapeTriangle().copy(existing);
}
return null;
});
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonTriangleRounded", {
get: function () {
var _a;
return ((_a = this._buttonTriangleRounded) !== null && _a !== void 0 ? _a : (this._buttonTriangleRounded = this.newButtonTriangleRounded()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonTriangleRounded = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_triangle_rounded
},
title: this.theme.getButtonTriangleRoundedTitle(),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.replace(function (existing) {
if (existing.type !== EShapeType.TRIANGLE_ROUNDED) {
return new EShapeTriangleRounded().copy(existing);
}
return null;
});
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonLine", {
get: function () {
var _a;
return ((_a = this._buttonLine) !== null && _a !== void 0 ? _a : (this._buttonLine = this.newButtonLine()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonLine = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_line
},
title: this.theme.getButtonLineTitle(),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.replace(function (existing) {
return _this.replaceLine(existing);
});
}
}
});
};
EEditorShape.prototype.replaceLine = function (existing) {
if (existing.type !== EShapeType.LINE) {
if (existing instanceof EShapeConnectorLine) {
return new EShapeLine().copy(existing);
}
else {
var size = existing.size;
var sxh = size.x * 0.5;
var syh = size.y * 0.5;
return createLine([-sxh, -syh, +sxh, +syh], [], EShapeDefaults.STROKE_WIDTH, EShapePointsStyle.NONE).copy(existing, EShapeCopyPart.ALL & ~(EShapeCopyPart.SIZE | EShapeCopyPart.POINTS));
}
}
return null;
};
EEditorShape.prototype.isDanglingConnectorAllowed = function () {
var _a, _b, _c;
return (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.connector) === null || _b === void 0 ? void 0 : _b.dangling) !== null && _c !== void 0 ? _c : false;
};
Object.defineProperty(EEditorShape.prototype, "buttonLineConnector", {
get: function () {
var _a;
return ((_a = this._buttonLineConnector) !== null && _a !== void 0 ? _a : (this._buttonLineConnector = this.newButtonLineConnector()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonLineConnector = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_line_connector
},
title: this.theme.getButtonLineConnectorTitle(),
theme: "EButtonEditor",
on: {
active: function () {
var isDanglingConnectorAllowed = _this.isDanglingConnectorAllowed();
_this._selection.replace(function (existing) {
return _this.replaceLineConnector(existing, isDanglingConnectorAllowed);
});
}
}
});
};
EEditorShape.prototype.replaceLineConnector = function (existing, isDanglingConnectorAllowed) {
if (existing.type !== EShapeType.CONNECTOR_LINE) {
if (existing instanceof EShapeConnectorLine) {
return new EShapeConnectorLine().copy(existing);
}
else if (isDanglingConnectorAllowed) {
return this.replaceConnector(existing, new EShapeConnectorLine());
}
}
return null;
};
Object.defineProperty(EEditorShape.prototype, "buttonElbowConnector", {
get: function () {
var _a;
return ((_a = this._buttonElbowConnector) !== null && _a !== void 0 ? _a : (this._buttonElbowConnector = this.newButtonElbowConnector()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonElbowConnector = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_elbow_connector
},
title: this.theme.getButtonElbowConnectorTitle(),
theme: "EButtonEditor",
on: {
active: function () {
var isDanglingConnectorAllowed = _this.isDanglingConnectorAllowed();
_this._selection.replace(function (existing) {
return _this.replaceElbowConnector(existing, isDanglingConnectorAllowed);
});
}
}
});
};
EEditorShape.prototype.replaceElbowConnector = function (existing, isDanglingConnectorAllowed) {
if (existing.type !== EShapeType.CONNECTOR_ELBOW) {
if (existing instanceof EShapeConnectorLine) {
return new EShapeConnectorElbow().copy(existing);
}
else if (isDanglingConnectorAllowed) {
return this.replaceConnector(existing, new EShapeConnectorElbow());
}
}
return null;
};
EEditorShape.prototype.replaceConnector = function (existing, result) {
result.lock(EShapeLockPart.ALL);
result.fill.alpha = 1;
var marker = result.points.marker;
marker.tail.type = EShapePointsMarkerType.CIRCLE;
marker.head.type = EShapePointsMarkerType.TRIANGLE;
result.copy(existing, EShapeCopyPart.ALL &
~(EShapeCopyPart.SIZE | EShapeCopyPart.POINTS | EShapeCopyPart.TRANSFORM));
var size = existing.size;
var sxh = size.x * 0.5;
var syh = size.y * 0.5;
var localTransform = existing.transform.localTransform;
var rx = localTransform.a * sxh + localTransform.c * syh;
var ry = localTransform.b * sxh + localTransform.d * syh;
var tx = localTransform.tx;
var ty = localTransform.ty;
var edge = result.edge;
edge.lock();
edge.tail.set(null, null, null, null, 0, -rx + tx, -ry + ty, undefined, undefined, EShapeAcceptorEdgeSide.TOP);
edge.head.set(null, null, null, null, 0, +rx + tx, +ry + ty, undefined, undefined, EShapeAcceptorEdgeSide.TOP);
edge.unlock();
result.unlock(EShapeLockPart.ALL, true);
return result;
};
Object.defineProperty(EEditorShape.prototype, "buttonImage", {
get: function () {
var _a;
return ((_a = this._buttonImage) !== null && _a !== void 0 ? _a : (this._buttonImage = this.newButtonImage()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonImage = function () {
var _this = this;
return new DButtonFile({
image: {
source: this._icons.editor_image
},
as: DButtonFileAs.DATA_URL,
title: this.theme.getButtonImageTitle(),
theme: "EButtonEditor",
on: {
open: function (dataUrl) {
toImageElement(dataUrl).then(function (item) {
_this._selection.replace(function (existing) {
return new EShapeImage(item).copy(existing, EShapeCopyPart.ALL & ~EShapeCopyPart.IMAGE);
});
});
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonGraphicPiece", {
get: function () {
var result = this._buttonGraphicPiece;
if (result === undefined) {
result = this._isPieceEnabled ? this.newButtonGraphicPiece() : null;
this._buttonGraphicPiece = result;
}
return result;
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonGraphicPiece = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.graphic_piece
},
title: this.theme.getButtonGraphicPieceTitle(),
theme: "EButtonEditor",
on: {
active: function (emitter) {
_this.onButtonGraphicPieceActive(emitter);
}
}
});
};
EEditorShape.prototype.onButtonGraphicPieceActive = function (opener) {
this.dialogSelectGraphicPiece.then(function (dialogSelectGraphicPiece) {
dialogSelectGraphicPiece.open(opener);
});
};
Object.defineProperty(EEditorShape.prototype, "dialogSelectGraphicPiece", {
get: function () {
var _a;
return ((_a = this._dialogSelectGraphicPiece) !== null && _a !== void 0 ? _a : (this._dialogSelectGraphicPiece = this.newDialogSelectGraphicPiece()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newDialogSelectGraphicPiece = function () {
var _this = this;
return this._canvas.get().then(function (canvas) {
var controller = _this._controller;
if (controller) {
if (controller.toPieceThumbnail) {
var result = _this.newDialogSelectGraphicPieceImage(controller);
result.categories = canvas.category.items;
return result;
}
else {
var result = _this.newDialogSelectGraphicPieceNoImage(controller);
result.categories = canvas.category.items;
return result;
}
}
else {
var result = _this.newDialogSelectGraphicPieceNoController();
result.categories = canvas.category.items;
return result;
}
});
};
EEditorShape.prototype.newDialogSelectGraphicPieceNoImage = function (controller) {
var _this = this;
return new DDialogSelect({
controller: this.newDialogSelectGraphicPieceController(controller),
on: {
select: function (value) {
_this.onDialogSelectGraphicPieceSelect(value, controller);
}
}
});
};
EEditorShape.prototype.newDialogSelectGraphicPieceImage = function (controller) {
var _this = this;
return newDialogSelectWithThumbnails(this.newDialogSelectGraphicPieceController(controller), controller.toPieceThumbnail, function (value) {
_this.onDialogSelectGraphicPieceSelect(value, controller);
});
};
EEditorShape.prototype.newDialogSelectGraphicPieceNoController = function () {
return new DDialogSelect({
controller: {
search: function () {
return Promise.resolve([]);
}
}
});
};
EEditorShape.prototype.newDialogSelectGraphicPieceController = function (controller) {
var _this = this;
var graphicPiece = controller.graphic.piece;
return {
search: function (word, categoryId) {
return graphicPiece.search(word, categoryId).then(function (pieces) {
return _this.toDialogSelectGraphicPieceResult(pieces);
});
}
};
};
EEditorShape.prototype.toDialogSelectGraphicPieceResult = function (targets) {
var _a;
var pieceId = (_a = this._pieceExcluder) === null || _a === void 0 ? void 0 : _a.call(this);
if (pieceId == null) {
return targets;
}
var result = [];
for (var i = 0, imax = targets.length; i < imax; ++i) {
var target = targets[i];
if (target.id !== pieceId) {
result.push(target);
}
}
return result;
};
EEditorShape.prototype.onDialogSelectGraphicPieceSelect = function (value, controller) {
var _this = this;
controller.graphic.piece.get(value.id).then(function (serialized) {
EShapeEmbeddeds.from(serialized, controller.graphic, EShapeResourceManagerDeserializationMode.EDITOR).then(function (shape) {
_this._selection.replace(function (existing) {
return shape.clone().copy(existing);
});
});
});
};
Object.defineProperty(EEditorShape.prototype, "buttonGroup", {
get: function () {
var _a;
return ((_a = this._buttonGroup) !== null && _a !== void 0 ? _a : (this._buttonGroup = this.newButtonGroup()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonGroup = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_group
},
title: this.theme.getButtonGroupTitle(),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.group();
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonUngroup", {
get: function () {
var _a;
return ((_a = this._buttonUngroup) !== null && _a !== void 0 ? _a : (this._buttonUngroup = this.newButtonUngroup()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonUngroup = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_ungroup
},
title: this.theme.getButtonUngroupTitle(),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.ungroup();
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonFill", {
get: function () {
var _a;
return ((_a = this._buttonFill) !== null && _a !== void 0 ? _a : (this._buttonFill = this.newButtonFill()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonFill = function () {
var selection = this._selection;
return new DButtonCheckRight({
width: "100%",
text: {
value: this.theme.getButtonFillLabel()
},
padding: 0,
background: {
color: null
},
on: {
active: function () {
selection.setFillEnabled(true);
},
inactive: function () {
selection.setFillEnabled(false);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonFillColor", {
get: function () {
var _a;
return ((_a = this._buttonFillColor) !== null && _a !== void 0 ? _a : (this._buttonFillColor = this.newButtonFillColor()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonFillColor = function () {
var _this = this;
var result = new DButtonColor({
width: "100%",
on: {
change: function (value) {
_this._selection.setFill(value.color, value.alpha);
}
}
});
result.dialog.on("open", function () {
var dialog = result.dialog;
var dialogNew = dialog.new;
var dialogCurrent = dialog.current;
dialogNew.color = dialogCurrent.color;
dialogNew.alpha = dialogCurrent.alpha;
});
return result;
};
Object.defineProperty(EEditorShape.prototype, "buttonStroke", {
get: function () {
var _a;
return ((_a = this._buttonStroke) !== null && _a !== void 0 ? _a : (this._buttonStroke = this.newButtonStroke()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonStroke = function () {
var selection = this._selection;
return new DButtonCheckRight({
width: "100%",
text: {
value: this.theme.getButtonStrokeLabel()
},
padding: 0,
background: {
color: null
},
on: {
active: function () {
selection.setStrokeEnabled(true);
},
inactive: function () {
selection.setStrokeEnabled(false);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonStrokeColor", {
get: function () {
var _a;
return ((_a = this._buttonStrokeColor) !== null && _a !== void 0 ? _a : (this._buttonStrokeColor = this.newButtonStrokeColor()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonStrokeColor = function () {
var _this = this;
var result = new DButtonColor({
width: "100%",
on: {
change: function (value) {
_this._selection.setStroke(value.color, value.alpha);
}
}
});
result.dialog.on("open", function () {
var dialog = result.dialog;
var dialogNew = dialog.new;
var dialogCurrent = dialog.current;
dialogNew.color = dialogCurrent.color;
dialogNew.alpha = dialogCurrent.alpha;
});
return result;
};
Object.defineProperty(EEditorShape.prototype, "inputStrokeWidth", {
get: function () {
var _a;
return ((_a = this._inputStrokeWidth) !== null && _a !== void 0 ? _a : (this._inputStrokeWidth = this.newInputStrokeWidth()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newInputStrokeWidth = function () {
var _this = this;
return new DInputRealAndLabel({
width: "100%",
label: {
text: {
value: this.theme.getInputStrokeWidthLabel()
}
},
input: {
weight: 1,
min: 0,
on: {
change: function (value) {
_this._selection.setStrokeWidth(value);
}
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "inputStrokeAlign", {
get: function () {
var _a;
return ((_a = this._inputStrokeAlign) !== null && _a !== void 0 ? _a : (this._inputStrokeAlign = this.newInputStrokeAlign()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newInputStrokeAlign = function () {
var _this = this;
return new DInputRealAndLabel({
width: "100%",
label: {
text: {
value: this.theme.getInputStrokeAlignLabel()
}
},
input: {
weight: 1,
min: 0,
max: 1,
on: {
change: function (value) {
_this._selection.setStrokeAlign(value);
}
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "layoutStrokeSide", {
get: function () {
var _a;
return ((_a = this._layoutStrokeSide) !== null && _a !== void 0 ? _a : (this._layoutStrokeSide = this.newLayoutStrokeSide()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newLayoutStrokeSide = function () {
return new DLayoutHorizontal({
width: "100%",
height: "auto",
children: [
new DLayoutSpace({ weight: 1 }),
this.buttonStrokeSideTop,
this.buttonStrokeSideRight,
this.buttonStrokeSideBottom,
this.buttonStrokeSideLeft,
this.buttonStrokeExpandable,
this.buttonStrokeShrinkable,
this.buttonStrokeScalableDotDash,
new DLayoutSpace({ weight: 1 })
]
});
};
Object.defineProperty(EEditorShape.prototype, "buttonStrokeSideTop", {
get: function () {
var _a;
return ((_a = this._buttonStrokeSideTop) !== null && _a !== void 0 ? _a : (this._buttonStrokeSideTop = this.newButtonStrokeSideTop()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonStrokeSideTop = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.stroke_side_top
},
title: this.theme.getButtonStrokeSideTopTitle(),
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setStrokeSide(EShapeStrokeSide.TOP, true);
},
inactive: function () {
selection.setStrokeSide(EShapeStrokeSide.TOP, false);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonStrokeSideRight", {
get: function () {
var _a;
return ((_a = this._buttonStrokeSideRight) !== null && _a !== void 0 ? _a : (this._buttonStrokeSideRight = this.newButtonStrokeSideRight()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonStrokeSideRight = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.stroke_side_right
},
title: this.theme.getButtonStrokeSideRightTitle(),
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setStrokeSide(EShapeStrokeSide.RIGHT, true);
},
inactive: function () {
selection.setStrokeSide(EShapeStrokeSide.RIGHT, false);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonStrokeSideBottom", {
get: function () {
var _a;
return ((_a = this._buttonStrokeSideBottom) !== null && _a !== void 0 ? _a : (this._buttonStrokeSideBottom = this.newButtonStrokeSideBottom()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonStrokeSideBottom = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.stroke_side_bottom
},
title: this.theme.getButtonStrokeSideBottomTitle(),
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setStrokeSide(EShapeStrokeSide.BOTTOM, true);
},
inactive: function () {
selection.setStrokeSide(EShapeStrokeSide.BOTTOM, false);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonStrokeSideLeft", {
get: function () {
var _a;
return ((_a = this._buttonStrokeSideLeft) !== null && _a !== void 0 ? _a : (this._buttonStrokeSideLeft = this.newButtonStrokeSideLeft()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonStrokeSideLeft = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.stroke_side_left
},
title: this.theme.getButtonStrokeSideLeftTitle(),
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setStrokeSide(EShapeStrokeSide.LEFT, true);
},
inactive: function () {
selection.setStrokeSide(EShapeStrokeSide.LEFT, false);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "textCorner", {
get: function () {
var _a;
return ((_a = this._textCorner) !== null && _a !== void 0 ? _a : (this._textCorner = this.newTextCorner()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newTextCorner = function () {
return new DText({
width: "100%",
text: {
value: this.theme.getTextCornerLabel()
}
});
};
Object.defineProperty(EEditorShape.prototype, "inputCornerRadius", {
get: function () {
var _a;
return ((_a = this._inputCornerRadius) !== null && _a !== void 0 ? _a : (this._inputCornerRadius = this.newInputCornerRadius()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newInputCornerRadius = function () {
var _this = this;
return new DInputReal({
width: "100%",
min: 0,
step: 1,
max: 100,
text: {
formatter: function (value) {
return "".concat(+(value * 100).toFixed(2), " %");
}
},
editing: {
formatter: function (value) {
return "".concat(+(value * 100).toFixed(2));
},
unformatter: function (text) {
return parseFloat(text) * 0.01;
}
},
on: {
change: function (value) {
_this._selection.setRadius(value);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "layoutCorner", {
get: function () {
var _a;
return ((_a = this._layoutCorner) !== null && _a !== void 0 ? _a : (this._layoutCorner = this.newLayoutCorner()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newLayoutCorner = function () {
return new DLayoutHorizontal({
width: "100%",
height: "auto",
children: [
new DLayoutSpace({ weight: 1 }),
this.buttonCornerTopLeft,
this.buttonCornerTopRight,
this.buttonCornerBottomRight,
this.buttonCornerBottomLeft,
new DLayoutSpace({ weight: 1 })
]
});
};
Object.defineProperty(EEditorShape.prototype, "buttonCornerTopLeft", {
get: function () {
var _a;
return ((_a = this._buttonCornerTopLeft) !== null && _a !== void 0 ? _a : (this._buttonCornerTopLeft = this.newButtonCornerTopLeft()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonCornerTopLeft = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.corner_top_left
},
title: this.theme.getButtonCornerTopLeftTitle(),
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setCorner(EShapeCorner.TOP_LEFT, true);
},
inactive: function () {
selection.setCorner(EShapeCorner.TOP_LEFT, false);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonCornerTopRight", {
get: function () {
var _a;
return ((_a = this._buttonCornerTopRight) !== null && _a !== void 0 ? _a : (this._buttonCornerTopRight = this.newButtonCornerTopRight()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonCornerTopRight = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.corner_top_right
},
title: this.theme.getButtonCornerTopRightTitle(),
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setCorner(EShapeCorner.TOP_RIGHT, true);
},
inactive: function () {
selection.setCorner(EShapeCorner.TOP_RIGHT, false);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonCornerBottomRight", {
get: function () {
var _a;
return ((_a = this._buttonCornerBottomRight) !== null && _a !== void 0 ? _a : (this._buttonCornerBottomRight = this.newButtonCornerBottomRight()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonCornerBottomRight = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.corner_bottom_right
},
title: this.theme.getButtonCornerBottomRightTitle(),
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setCorner(EShapeCorner.BOTTOM_RIGHT, true);
},
inactive: function () {
selection.setCorner(EShapeCorner.BOTTOM_RIGHT, false);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonCornerBottomLeft", {
get: function () {
var _a;
return ((_a = this._buttonCornerBottomLeft) !== null && _a !== void 0 ? _a : (this._buttonCornerBottomLeft = this.newButtonCornerBottomLeft()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonCornerBottomLeft = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.corner_bottom_left
},
title: this.theme.getButtonCornerBottomLeftTitle(),
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setCorner(EShapeCorner.BOTTOM_LEFT, true);
},
inactive: function () {
selection.setCorner(EShapeCorner.BOTTOM_LEFT, false);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "layoutLine", {
get: function () {
var _a;
return ((_a = this._layoutLine) !== null && _a !== void 0 ? _a : (this._layoutLine = this.newLayoutLine()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newLayoutLine = function () {
return new DLayoutHorizontal({
width: "100%",
children: [this.textLine, this.buttonLineClosed, this.buttonLineLock]
});
};
Object.defineProperty(EEditorShape.prototype, "textLine", {
get: function () {
var _a;
return ((_a = this._textLine) !== null && _a !== void 0 ? _a : (this._textLine = this.newTextLine()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newTextLine = function () {
return new DText({
weight: 1,
text: {
value: this.theme.getTextLineLabel()
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonLineLock", {
get: function () {
var _a;
return ((_a = this._buttonLineLock) !== null && _a !== void 0 ? _a : (this._buttonLineLock = this.newButtonLineLock()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonLineLock = function () {
var _this = this;
return new DButtonCheck({
theme: "EButtonEditorLock",
on: {
active: function () {
_this._selection.lockCapability(EShapeCapability.LINE);
},
inactive: function () {
_this._selection.unlockCapability(EShapeCapability.LINE);
}
}
});
};
EEditorShape.prototype.isLocked = function (last, target) {
if (last == null) {
return false;
}
var capability = last.getCapability();
if (capability == null) {
return false;
}
if (capability.locked & target) {
return true;
}
return false;
};
Object.defineProperty(EEditorShape.prototype, "selectLineStyle", {
get: function () {
var _a;
return ((_a = this._selectLineStyle) !== null && _a !== void 0 ? _a : (this._selectLineStyle = this.newSelectLineStyle()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newSelectLineStyle = function () {
var _this = this;
var theme = this.theme;
return new DSelect({
width: "100%",
value: EShapeStrokeStyle.NONE,
menu: {
items: [
{
value: EShapeStrokeStyle.NONE,
text: {
value: theme.getSelectLineStyleLabel(EShapeStrokeStyle.NONE)
}
},
{
value: EShapeStrokeStyle.DOTTED,
text: {
value: theme.getSelectLineStyleLabel(EShapeStrokeStyle.DOTTED)
}
},
{
value: EShapeStrokeStyle.DOTTED_DENSELY,
text: {
value: theme.getSelectLineStyleLabel(EShapeStrokeStyle.DOTTED_DENSELY)
}
},
{
value: EShapeStrokeStyle.DOTTED_LOOSELY,
text: {
value: theme.getSelectLineStyleLabel(EShapeStrokeStyle.DOTTED_LOOSELY)
}
},
{
value: EShapeStrokeStyle.DASHED,
text: {
value: theme.getSelectLineStyleLabel(EShapeStrokeStyle.DASHED)
}
},
{
value: EShapeStrokeStyle.DASHED_DENSELY,
text: {
value: theme.getSelectLineStyleLabel(EShapeStrokeStyle.DASHED_DENSELY)
}
},
{
value: EShapeStrokeStyle.DASHED_LOOSELY,
text: {
value: theme.getSelectLineStyleLabel(EShapeStrokeStyle.DASHED_LOOSELY)
}
}
]
},
on: {
change: function (value) {
_this._selection.setLineStyle(value !== null && value !== void 0 ? value : EShapeStrokeStyle.NONE, EShapeStrokeStyle.DOTTED_MASK | ES