@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
414 lines • 15 kB
JavaScript
import { __extends } from "tslib";
import { DButtonColor, DControllers, DInputIntegerAndLabel, DInputLabel, DInputTextAndLabel, DInputTextArea, DLayoutHorizontal, DLayoutVertical, DMenu, DPane, DSelect, DText, isNumber } from "@wcardinal/wcardinal-ui";
import { ECommandDocumentBackground } from "../command/e-command-document-background";
import { ECommandDocumentName } from "../command/e-command-document-name";
import { ECommandDocumentHeight } from "../command/e-command-document-height";
import { ECommandDocumentWidth } from "../command/e-command-document-width";
import { ECommandDocumentLabel } from "../command/e-command-document-label";
import { ECommandDocumentSummary } from "../command/e-command-document-summary";
import { ECommandDocumentDescription } from "../command/e-command-document-description";
import { ECommandDocumentCategory } from "../command/e-command-document-category";
var EEditorCanvasLegacy = /** @class */ (function (_super) {
__extends(EEditorCanvasLegacy, _super);
function EEditorCanvasLegacy(options) {
var _this = _super.call(this, options) || this;
var diagram = options.diagram;
_this._diagram = diagram;
_this.state.isDisabled = diagram.canvas == null;
diagram.on("unset", function () {
_this.state.isDisabled = true;
});
diagram.on("set", function () {
_this.state.isDisabled = false;
});
_this._canvas = options.canvas;
_this.content.addChild(_this.newLayout());
return _this;
}
EEditorCanvasLegacy.prototype.newLayout = function () {
return new DLayoutVertical({
x: "padding",
y: "padding",
width: "padding",
height: "auto",
children: this.newLayoutItems()
});
};
EEditorCanvasLegacy.prototype.newLayoutItems = function () {
return [
this.newTextLabel(),
this.newLayoutName(),
this.newLayoutLabel(),
this.newLayoutWidth(),
this.newLayoutHeight(),
this.newLayoutCategory(),
this.newLayoutSummary(),
this.newLayoutDescription(),
this.newLayoutBackground()
];
};
EEditorCanvasLegacy.prototype.newTextLabel = function () {
return new DText({
width: "100%",
text: {
value: this.theme.getLabel()
}
});
};
EEditorCanvasLegacy.prototype.newLayoutName = function () {
var diagram = this._diagram;
var result = new DInputTextAndLabel({
width: "100%",
label: {
text: {
value: this.theme.getInputNameLabel()
}
},
input: {
weight: 1,
on: {
change: function (value) {
var canvas = diagram.canvas;
if (canvas != null && canvas.name !== value) {
DControllers.getCommandController().push(new ECommandDocumentName(diagram, canvas, value));
}
}
}
}
});
var update = function () {
var canvas = diagram.canvas;
if (canvas != null) {
result.input.value = canvas.name;
}
};
update();
diagram.on("change", update);
diagram.on("set", function (canvas) {
result.input.value = canvas.name;
});
return result;
};
EEditorCanvasLegacy.prototype.newLayoutLabel = function () {
var diagram = this._diagram;
var result = new DInputTextAndLabel({
width: "100%",
label: {
text: {
value: this.theme.getInputLabelLabel()
}
},
input: {
weight: 1,
on: {
change: function (value) {
var canvas = diagram.canvas;
if (canvas != null && canvas.label !== value) {
DControllers.getCommandController().push(new ECommandDocumentLabel(diagram, canvas, value));
}
}
}
}
});
var update = function () {
var canvas = diagram.canvas;
if (canvas != null) {
result.input.value = canvas.label;
}
};
update();
diagram.on("change", update);
diagram.on("set", function (canvas) {
result.input.value = canvas.label;
});
return result;
};
EEditorCanvasLegacy.prototype.newLayoutWidth = function () {
var diagram = this._diagram;
var result = new DInputIntegerAndLabel({
width: "100%",
label: {
text: {
value: this.theme.getInputWidthLabel()
}
},
input: {
weight: 1,
min: 1,
on: {
change: function (value) {
var canvas = diagram.canvas;
if (canvas != null && canvas.width !== value) {
DControllers.getCommandController().push(new ECommandDocumentWidth(diagram, canvas, value));
}
}
}
}
});
var update = function () {
var canvas = diagram.canvas;
if (canvas != null) {
result.input.value = canvas.width;
}
};
update();
diagram.on("change", update);
diagram.on("set", function (canvas) {
result.input.value = canvas.width;
});
return result;
};
EEditorCanvasLegacy.prototype.newLayoutHeight = function () {
var diagram = this._diagram;
var result = new DInputIntegerAndLabel({
width: "100%",
label: {
text: {
value: this.theme.getInputHeightLabel()
}
},
input: {
weight: 1,
min: 1,
on: {
change: function (value) {
var canvas = diagram.canvas;
if (canvas != null && canvas.height !== value) {
DControllers.getCommandController().push(new ECommandDocumentHeight(diagram, canvas, value));
}
}
}
}
});
var update = function () {
var canvas = diagram.canvas;
if (canvas != null) {
result.input.value = canvas.height;
}
};
update();
diagram.on("change", update);
diagram.on("set", function (canvas) {
result.input.value = canvas.height;
});
return result;
};
EEditorCanvasLegacy.prototype.newLayoutBackground = function () {
return new DLayoutHorizontal({
width: "padding",
height: "auto",
children: [this.newLabelBackground(), this.newInputBackground()]
});
};
EEditorCanvasLegacy.prototype.newLabelBackground = function () {
return new DInputLabel({
width: 60,
text: {
value: this.theme.getInputBackgroundLabel()
}
});
};
EEditorCanvasLegacy.prototype.newInputBackground = function () {
var diagram = this._diagram;
var result = new DButtonColor({
weight: 1,
on: {
change: function (value) {
DControllers.getCommandController().push(new ECommandDocumentBackground(diagram, 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;
});
var update = function () {
var value = result.value;
var canvas = diagram.canvas;
if (canvas != null) {
var background = canvas.background;
var backgroundColor = background.color;
var backgroundAlpha = background.alpha;
value.color = isNumber(backgroundColor) ? backgroundColor : 0xffffff;
value.alpha = isNumber(backgroundAlpha) ? backgroundAlpha : 1;
}
};
update();
diagram.on("change", update);
diagram.on("set", update);
return result;
};
EEditorCanvasLegacy.prototype.newLayoutCategory = function () {
var _this = this;
var label = this.newLabelCategory();
var select = this.newSelectCategory();
var result = new DLayoutHorizontal({
width: "padding",
height: "auto",
visible: false,
children: [label, select]
});
this._canvas.get().then(function (canvas) {
_this.onCanvasValueFetched(canvas, result, select);
});
return result;
};
EEditorCanvasLegacy.prototype.onCanvasValueFetched = function (canvas, layout, select) {
var category = canvas.category;
var categoryDefault = category.default;
var categoryItems = category.items;
if (categoryDefault != null && 0 < categoryItems.length) {
var items = [];
for (var i = 0, imax = categoryItems.length; i < imax; ++i) {
var categoryItem = categoryItems[i];
items.push({
value: categoryItem.id,
text: {
value: categoryItem.label
}
});
}
select.menu = new DMenu({
fit: true,
items: items
});
select.value = categoryDefault;
var diagram_1 = this._diagram;
var update = function () {
var _a;
var diagramCanvas = diagram_1.canvas;
if (diagramCanvas != null) {
select.value = (_a = diagramCanvas.category) !== null && _a !== void 0 ? _a : canvas.category.default;
}
};
update();
diagram_1.on("change", update);
diagram_1.on("set", function (diagramCanvas) {
var _a;
select.value = (_a = diagramCanvas.category) !== null && _a !== void 0 ? _a : canvas.category.default;
});
layout.state.isEnabled = category.writable;
layout.show();
}
else {
select.value = null;
layout.hide();
}
};
EEditorCanvasLegacy.prototype.newLabelCategory = function () {
return new DInputLabel({
width: 60,
text: {
value: this.theme.getSelectCategoryLabel()
}
});
};
EEditorCanvasLegacy.prototype.newSelectCategory = function () {
var _this = this;
return new DSelect({
weight: 1,
on: {
change: function (value) {
var diagram = _this._diagram;
var canvas = diagram.canvas;
if (canvas != null && canvas.category !== value) {
DControllers.getCommandController().push(new ECommandDocumentCategory(diagram, canvas, value));
}
}
}
});
};
EEditorCanvasLegacy.prototype.newLayoutSummary = function () {
return new DLayoutHorizontal({
width: "padding",
height: "auto",
children: [this.newLabelSummary(), this.newInputSummary()]
});
};
EEditorCanvasLegacy.prototype.newLabelSummary = function () {
return new DInputLabel({
width: 60,
text: {
value: this.theme.getInputSummaryLabel()
}
});
};
EEditorCanvasLegacy.prototype.newInputSummary = function () {
var diagram = this._diagram;
var result = new DInputTextArea({
weight: 1,
height: 60,
on: {
change: function (value) {
var canvas = diagram.canvas;
if (canvas != null && canvas.summary !== value) {
DControllers.getCommandController().push(new ECommandDocumentSummary(diagram, canvas, value));
}
}
}
});
var update = function () {
var canvas = diagram.canvas;
if (canvas != null) {
result.value = canvas.summary;
}
};
update();
diagram.on("change", update);
diagram.on("set", function (canvas) {
result.value = canvas.summary;
});
return result;
};
EEditorCanvasLegacy.prototype.newLayoutDescription = function () {
return new DLayoutHorizontal({
width: "padding",
height: "auto",
children: [this.newLabelDescription(), this.newInputDescription()]
});
};
EEditorCanvasLegacy.prototype.newLabelDescription = function () {
return new DInputLabel({
width: 60,
text: {
value: this.theme.getInputDescriptionLabel()
}
});
};
EEditorCanvasLegacy.prototype.newInputDescription = function () {
var diagram = this._diagram;
var result = new DInputTextArea({
weight: 1,
height: 100,
on: {
change: function (value) {
var canvas = diagram.canvas;
if (canvas != null && canvas.description !== value) {
DControllers.getCommandController().push(new ECommandDocumentDescription(diagram, canvas, value));
}
}
}
});
var update = function () {
var canvas = diagram.canvas;
if (canvas != null) {
result.value = canvas.description;
}
};
update();
diagram.on("change", update);
diagram.on("set", function (canvas) {
result.value = canvas.description;
});
return result;
};
EEditorCanvasLegacy.prototype.getType = function () {
return "EEditorCanvasLegacy";
};
return EEditorCanvasLegacy;
}(DPane));
export { EEditorCanvasLegacy };
//# sourceMappingURL=e-editor-canvas-legacy.js.map