@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
267 lines • 9.74 kB
JavaScript
import { __extends } from "tslib";
import { DButtonAmbient, DControllers, DLayoutHorizontal, DLayoutVertical, DTable, DTableDataTree, DText, EShapeCapabilities, EShapeCapability, UtilKeyboardEvent } from "@wcardinal/wcardinal-ui";
import { ECommandShapePropertyId } from "../command/e-command-shape-property-id";
import { EEditorTreeSelection } from "./e-editor-tree-selection";
import { EToolSelectSelectionUpdatedPart } from "../tool/e-tool-select-selection-updated-part";
import { toShapeLabel } from "./to-shape-label";
var EEditorTree = /** @class */ (function (_super) {
__extends(EEditorTree, _super);
function EEditorTree(options) {
var _this = _super.call(this, options) || this;
_this._icons = options.icons;
var diagram = options.diagram;
_this._diagram = diagram;
_this._selection = options.selection;
_this._isInitialized = false;
_this._updatedParts = EToolSelectSelectionUpdatedPart.NONE;
return _this;
}
EEditorTree.prototype.show = function () {
_super.prototype.show.call(this);
this.onShow();
return this;
};
EEditorTree.prototype.onShow = function () {
if (!this._isInitialized) {
this._isInitialized = true;
this.initLayout();
}
this.onSelectionChange(EToolSelectSelectionUpdatedPart.NONE);
};
EEditorTree.prototype.initLayout = function () {
var _this = this;
this.addChild(this.layoutOrder);
this.addChild(this.table);
// Selection change event handling
this._selection.on("change", function (parts) {
_this.onSelectionChange(parts);
});
// Layer change even handling
var onLayerChangeBound = function () {
_this.onLayerChange();
};
var diagram = this._diagram;
var canvas = diagram.canvas;
if (canvas) {
this.state.isDisabled = false;
canvas.layer.on("change", onLayerChangeBound);
}
else {
this.state.isDisabled = true;
}
diagram.on("set", function (newCanvas) {
_this.state.isDisabled = false;
newCanvas.layer.on("change", onLayerChangeBound);
});
diagram.on("ready", function () {
_this.onLayerChange();
});
diagram.on("unset", function (oldCanvas) {
_this.state.isDisabled = true;
_this.onLayerChange();
oldCanvas.layer.off("change", onLayerChangeBound);
});
this.onLayerChange();
};
Object.defineProperty(EEditorTree.prototype, "layoutOrder", {
get: function () {
var _a;
return ((_a = this._layerOrder) !== null && _a !== void 0 ? _a : (this._layerOrder = this.newLayoutOrder()));
},
enumerable: false,
configurable: true
});
EEditorTree.prototype.newLayoutOrder = function () {
return new DLayoutHorizontal({
width: "padding",
height: "auto",
children: [
this.newTextLabel(),
this.buttonBringToFront,
this.buttonBringForward,
this.buttonSendBackward,
this.buttonSendToBack
]
});
};
EEditorTree.prototype.newTextLabel = function () {
return new DText({
weight: 1,
text: {
value: this.theme.getLabel()
}
});
};
Object.defineProperty(EEditorTree.prototype, "buttonBringToFront", {
get: function () {
var _a;
return ((_a = this._buttonBringToFront) !== null && _a !== void 0 ? _a : (this._buttonBringToFront = this.newButtonBringToFront()));
},
enumerable: false,
configurable: true
});
EEditorTree.prototype.newButtonBringToFront = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.arrow_to_top
},
title: this.theme.getButtonBringToFrontTitle(),
on: {
active: function () {
_this._selection.bringToFront();
}
}
});
};
Object.defineProperty(EEditorTree.prototype, "buttonBringForward", {
get: function () {
var _a;
return ((_a = this._buttonBringForward) !== null && _a !== void 0 ? _a : (this._buttonBringForward = this.newButtonBringForward()));
},
enumerable: false,
configurable: true
});
EEditorTree.prototype.newButtonBringForward = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.arrow_up
},
title: this.theme.getButtonBringForwardTitle(),
on: {
active: function () {
_this._selection.bringForward();
}
}
});
};
Object.defineProperty(EEditorTree.prototype, "buttonSendBackward", {
get: function () {
var _a;
return ((_a = this._buttonSendBackward) !== null && _a !== void 0 ? _a : (this._buttonSendBackward = this.newButtonSendBackward()));
},
enumerable: false,
configurable: true
});
EEditorTree.prototype.newButtonSendBackward = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.arrow_down
},
title: this.theme.getButtonSendBackwardTitle(),
on: {
active: function () {
_this._selection.sendBackward();
}
}
});
};
Object.defineProperty(EEditorTree.prototype, "buttonSendToBack", {
get: function () {
var _a;
return ((_a = this._buttonSendToBack) !== null && _a !== void 0 ? _a : (this._buttonSendToBack = this.newButtonSendToBack()));
},
enumerable: false,
configurable: true
});
EEditorTree.prototype.newButtonSendToBack = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.arrow_to_bottom
},
title: this.theme.getButtonSendToBackTitle(),
on: {
active: function () {
_this._selection.sendToBack();
}
}
});
};
EEditorTree.prototype.onSelectionChange = function (parts) {
var _a;
if (this.isShown()) {
parts |= this._updatedParts;
this._updatedParts = EToolSelectSelectionUpdatedPart.NONE;
if (parts & EToolSelectSelectionUpdatedPart.TREE) {
this.table.data.nodes = (_a = this._diagram.layer) === null || _a === void 0 ? void 0 : _a.children;
}
else if (parts & EToolSelectSelectionUpdatedPart.SELECTION) {
this.table.data.update();
}
else if (parts & EToolSelectSelectionUpdatedPart.PROPERTY_ID) {
this.table.data.update(true);
}
this.layoutOrder.state.isEnabled = EShapeCapabilities.contains(this._selection.last(), EShapeCapability.ORDER_IN_LAYER);
}
else {
this._updatedParts |= parts;
}
};
EEditorTree.prototype.onLayerChange = function () {
var _a;
this.table.data.nodes = (_a = this._diagram.layer) === null || _a === void 0 ? void 0 : _a.children;
};
Object.defineProperty(EEditorTree.prototype, "table", {
get: function () {
var _a;
return ((_a = this._table) !== null && _a !== void 0 ? _a : (this._table = this.newTable()));
},
enumerable: false,
configurable: true
});
EEditorTree.prototype.newTable = function () {
var _this = this;
return new DTable({
x: "padding",
width: "padding",
weight: 1,
columns: [
{
type: "TREE",
editable: true,
getter: function (row) {
return toShapeLabel(row);
},
setter: function (row, columnIndex, cell) {
if (row.id !== cell) {
DControllers.getCommandController().push(new ECommandShapePropertyId(_this._selection, cell, [row]));
}
}
}
],
data: new DTableDataTree({
reverse: true,
toChildren: function (shape) {
if (EShapeCapabilities.contains(shape, EShapeCapability.CHILDREN)) {
return shape.children;
}
return null;
},
selection: function (parent) {
return new EEditorTreeSelection(parent, _this._selection);
}
}),
on: {
keydown: function (e) {
if (UtilKeyboardEvent.isDeleteKey(e)) {
_this._selection.delete();
e.preventDefault();
}
}
}
});
};
EEditorTree.prototype.getType = function () {
return "EEditorTree";
};
return EEditorTree;
}(DLayoutVertical));
export { EEditorTree };
//# sourceMappingURL=e-editor-tree.js.map