@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
1,325 lines • 96.9 kB
JavaScript
import { __extends } from "tslib";
import { createLine, createPolygon, DButton, DButtonAmbient, DButtonCheck, DButtonCheckRight, DButtonColor, DButtonColorGradient, DButtonFile, DButtonFileAs, DButtonGroup, DDialogSelect, DInputReal, DInputRealAndLabel, DLayoutHorizontal, DLayoutSpace, DLayoutVertical, DPane, DSelect, DText, EShapeAcceptorEdgeSide, EShapeCapabilities, EShapeCapability, EShapeCircle, EShapeConnectorElbow, EShapeConnectorLine, EShapeCopyPart, EShapeCorner, EShapeDefaults, EShapeEmbeddeds, EShapeFillDirection, EShapeGroup, EShapeImage, EShapeLine, EShapeLockPart, EShapePointsFormatters, EShapePointsMarkerType, EShapePointsStyle, EShapePolygon, 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 _a, _b;
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;
_this._isDanglingConnectorAllowed = (_b = (_a = options === null || options === void 0 ? void 0 : options.connector) === null || _a === void 0 ? void 0 : _a.dangling) !== null && _b !== void 0 ? _b : false;
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.inputFillPercent,
this.layoutFillDirection,
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.buttonPolygon,
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) {
var points = existing.points;
if (points != null) {
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;
};
Object.defineProperty(EEditorShape.prototype, "buttonPolygon", {
get: function () {
var _a;
return ((_a = this._buttonPolygon) !== null && _a !== void 0 ? _a : (this._buttonPolygon = this.newButtonPolygon()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonPolygon = function () {
var _this = this;
return new DButtonAmbient({
image: {
source: this._icons.shape_polygon
},
title: this.theme.getButtonPolygonTitle(),
theme: "EButtonEditor",
on: {
active: function () {
_this._selection.replace(function (existing) {
return _this.replacePolygon(existing);
});
}
}
});
};
EEditorShape.prototype.replacePolygon = function (existing) {
if (existing.type !== EShapeType.POLYGON) {
var points = existing.points;
if (points != null && 3 <= points.length) {
var result = new EShapePolygon().copy(existing);
result.points.style |= EShapePointsStyle.CLOSED;
return result;
}
else {
var size = existing.size;
var sxh = size.x * 0.5;
var syh = size.y * 0.5;
return createPolygon([-sxh, -syh, sxh, -syh, sxh, +syh, -sxh, +syh]).copy(existing, EShapeCopyPart.ALL & ~(EShapeCopyPart.SIZE | EShapeCopyPart.POINTS));
}
}
return null;
};
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 () {
_this._selection.replace(function (existing) {
return _this.replaceLineConnector(existing);
});
}
}
});
};
EEditorShape.prototype.replaceLineConnector = function (existing) {
if (existing.type !== EShapeType.CONNECTOR_LINE) {
if (existing instanceof EShapeConnectorLine) {
return new EShapeConnectorLine().copy(existing);
}
else if (this._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 () {
_this._selection.replace(function (existing) {
return _this.replaceElbowConnector(existing);
});
}
}
});
};
EEditorShape.prototype.replaceElbowConnector = function (existing) {
if (existing.type !== EShapeType.CONNECTOR_ELBOW) {
if (existing instanceof EShapeConnectorLine) {
return new EShapeConnectorElbow().copy(existing);
}
else if (this._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%",
title: this.theme.getButtonFillColorTitle(),
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, "inputFillPercent", {
get: function () {
var _a;
return ((_a = this._inputFillPercent) !== null && _a !== void 0 ? _a : (this._inputFillPercent = this.newInputFillPercent()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newInputFillPercent = function () {
var _this = this;
return new DInputReal({
width: "100%",
min: 0,
step: 1,
max: 100,
title: this.theme.getInputFillPercentTitle(),
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.setFillPercent(value);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "layoutFillDirection", {
get: function () {
var _a;
return ((_a = this._layoutFillDirection) !== null && _a !== void 0 ? _a : (this._layoutFillDirection = this.newLayoutFillDirection()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newLayoutFillDirection = function () {
return new DLayoutHorizontal({
width: "100%",
height: "auto",
children: [
new DLayoutSpace({ weight: 1 }),
this.buttonFillDirectionTop,
this.buttonFillDirectionRight,
this.buttonFillDirectionBottom,
this.buttonFillDirectionLeft,
new DLayoutSpace({ weight: 1 })
]
});
};
Object.defineProperty(EEditorShape.prototype, "buttonFillDirectionGroup", {
get: function () {
var _a;
return ((_a = this._buttonFillDirectionGroup) !== null && _a !== void 0 ? _a : (this._buttonFillDirectionGroup = new DButtonGroup()));
},
enumerable: false,
configurable: true
});
Object.defineProperty(EEditorShape.prototype, "buttonFillDirectionTop", {
get: function () {
var _a;
return ((_a = this._buttonFillDirectionTop) !== null && _a !== void 0 ? _a : (this._buttonFillDirectionTop = this.newButtonFillDirectionTop()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonFillDirectionTop = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.fill_direction_top
},
title: this.theme.getButtonFillDirectionTopTitle(),
group: this.buttonFillDirectionGroup,
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setFillDirection(EShapeFillDirection.TOP);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonFillDirectionRight", {
get: function () {
var _a;
return ((_a = this._buttonFillDirectionRight) !== null && _a !== void 0 ? _a : (this._buttonFillDirectionRight = this.newButtonFillDirectionRight()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonFillDirectionRight = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.fill_direction_right
},
title: this.theme.getButtonFillDirectionRightTitle(),
group: this.buttonFillDirectionGroup,
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setFillDirection(EShapeFillDirection.RIGHT);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonFillDirectionBottom", {
get: function () {
var _a;
return ((_a = this._buttonFillDirectionBottom) !== null && _a !== void 0 ? _a : (this._buttonFillDirectionBottom = this.newButtonFillDirectionBottom()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonFillDirectionBottom = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.fill_direction_bottom
},
title: this.theme.getButtonFillDirectionBottomTitle(),
group: this.buttonFillDirectionGroup,
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setFillDirection(EShapeFillDirection.BOTTOM);
}
}
});
};
Object.defineProperty(EEditorShape.prototype, "buttonFillDirectionLeft", {
get: function () {
var _a;
return ((_a = this._buttonFillDirectionLeft) !== null && _a !== void 0 ? _a : (this._buttonFillDirectionLeft = this.newButtonFillDirectionLeft()));
},
enumerable: false,
configurable: true
});
EEditorShape.prototype.newButtonFillDirectionLeft = function () {
var selection = this._selection;
return new DButtonCheck({
image: {
source: this._icons.fill_direction_left
},
title: this.theme.getButtonFillDirectionLeftTitle(),
group: this.buttonFillDirectionGroup,
theme: "EButtonEditorCheck",
on: {
active: function () {
selection.setFillDirection(EShapeFillDirection.LEFT);
}
}
});
};
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