@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
458 lines • 16.5 kB
JavaScript
import { __extends } from "tslib";
import { DButtonAmbient, DControllers, DLayoutHorizontal, DLayoutVertical, DList, DText, UtilKeyboardEvent } from "@wcardinal/wcardinal-ui";
import { Point } from "pixi.js";
import { ECommandLayerBringForward } from "../command/e-command-layer-bring-forward";
import { ECommandLayerCreate } from "../command/e-command-layer-create";
import { ECommandLayerDelete } from "../command/e-command-layer-delete";
import { ECommandLayerChange } from "../command/e-command-layer-change";
import { ECommandLayerSendBackward } from "../command/e-command-layer-send-backward";
import { ECommandShapeSelect } from "../command/e-command-shape-select";
import { EDialogLayer } from "./e-dialog-layer";
import { EDialogLayerValue } from "./e-dialog-layer-value";
import { EEditorLayerItem } from "./e-editor-layer-item";
var EEditorLayer = /** @class */ (function (_super) {
__extends(EEditorLayer, _super);
function EEditorLayer(options) {
var _this = _super.call(this, options) || this;
_this._icons = options.icons;
_this._diagram = options.diagram;
_this._selection = options.selection;
_this._isInitialized = false;
_this._canvas = null;
return _this;
}
EEditorLayer.prototype.show = function () {
_super.prototype.show.call(this);
this.onShow();
return this;
};
EEditorLayer.prototype.onShow = function () {
if (!this._isInitialized) {
this._isInitialized = true;
this.initLayout();
}
this.onCanvasChange(this._diagram.canvas, true);
};
EEditorLayer.prototype.initLayout = function () {
var _this = this;
this.addChild(new DLayoutHorizontal({
x: "padding",
width: "padding",
height: "auto",
children: [
this.newTextLabel(),
this.buttonNew,
this.buttonDelete,
this.buttonBringForward,
this.buttonSendBackward
]
}));
this.addChild(this.list);
// Layer change even handling
var diagram = this._diagram;
diagram.on("set", function (newCanvas) {
if (_this.isShown()) {
_this.onCanvasChange(newCanvas, false);
}
});
diagram.on("ready", function () {
if (_this.isShown()) {
_this.onLayerChange();
}
});
diagram.on("unset", function () {
if (_this.isShown()) {
_this.onCanvasChange(null, false);
}
});
};
EEditorLayer.prototype.newTextLabel = function () {
return new DText({
weight: 1,
text: {
value: this.theme.getLabel()
}
});
};
Object.defineProperty(EEditorLayer.prototype, "onLayerChangeBound", {
get: function () {
var _this = this;
var result = this._onLayerChangeBound;
if (result == null) {
result = function () {
_this.onLayerChange();
};
this._onLayerChangeBound = result;
}
return result;
},
enumerable: false,
configurable: true
});
Object.defineProperty(EEditorLayer.prototype, "dialog", {
get: function () {
var result = this._dialog;
if (result == null) {
result = this.newDialog();
this._dialog = result;
}
return result;
},
enumerable: false,
configurable: true
});
EEditorLayer.prototype.newDialog = function () {
return new EDialogLayer();
};
Object.defineProperty(EEditorLayer.prototype, "buttonNew", {
get: function () {
var result = this._buttonNew;
if (result == null) {
result = this.newButtonNew();
this._buttonNew = result;
}
return result;
},
enumerable: false,
configurable: true
});
EEditorLayer.prototype.newButtonNew = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.new
},
title: this.theme.getButtonNewTitle(),
on: {
active: function (emitter) {
_this.onButtonNewActive(emitter);
}
}
});
};
EEditorLayer.prototype.onButtonNewActive = function (opener) {
var _this = this;
var canvas = this._canvas;
if (canvas) {
var dialogLayer = this.dialog;
dialogLayer
.reset(canvas.width, canvas.height)
.open(opener)
.then(function (value) {
if (value) {
DControllers.getCommandController().push(new ECommandLayerCreate(value, canvas.layer, _this._selection));
}
});
}
};
Object.defineProperty(EEditorLayer.prototype, "buttonDelete", {
get: function () {
var result = this._buttonDelete;
if (result == null) {
result = this.newButtonDelete();
this._buttonDelete = result;
}
return result;
},
enumerable: false,
configurable: true
});
EEditorLayer.prototype.newButtonDelete = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.delete
},
title: this.theme.getButtonDeleteTitle(),
on: {
active: function () {
var canvas = _this._canvas;
if (canvas) {
var layer = canvas.layer;
var size = layer.size();
var active = layer.active;
if (1 < size && active) {
DControllers.getCommandController().push(new ECommandLayerDelete(active, canvas.layer, _this._selection));
}
}
}
}
});
};
Object.defineProperty(EEditorLayer.prototype, "buttonBringForward", {
get: function () {
var result = this._buttonBringForward;
if (result == null) {
result = this.newButtonBringForward();
this._buttonBringForward = result;
}
return result;
},
enumerable: false,
configurable: true
});
EEditorLayer.prototype.newButtonBringForward = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.arrow_up
},
title: this.theme.getButtonBringForwardTitle(),
on: {
active: function () {
var canvas = _this._canvas;
if (canvas) {
var layer = canvas.layer;
var active = layer.active;
if (active) {
var index = layer.children.indexOf(active);
DControllers.getCommandController().push(new ECommandLayerBringForward(index, layer));
}
}
}
}
});
};
Object.defineProperty(EEditorLayer.prototype, "buttonSendBackward", {
get: function () {
var result = this._buttonSendBackward;
if (result == null) {
result = this.newButtonSendBackward();
this._buttonSendBackward = result;
}
return result;
},
enumerable: false,
configurable: true
});
EEditorLayer.prototype.newButtonSendBackward = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.arrow_down
},
title: this.theme.getButtonSendBackwardTitle(),
on: {
active: function () {
var canvas = _this._canvas;
if (canvas) {
var layer = canvas.layer;
var active = layer.active;
if (active) {
var index = layer.children.indexOf(active);
DControllers.getCommandController().push(new ECommandLayerSendBackward(index, layer));
}
}
}
}
});
};
Object.defineProperty(EEditorLayer.prototype, "list", {
get: function () {
var result = this._list;
if (result == null) {
result = this.newList();
this._list = result;
}
return result;
},
enumerable: false,
configurable: true
});
EEditorLayer.prototype.newList = function () {
var _this = this;
var icons = this._icons;
var iconsEye = icons.eye;
var iconsEyeSlash = icons.eye_slash;
var work = new Point();
var result = new DList({
x: "padding",
width: "padding",
weight: 1,
data: {
selection: {
on: {
change: function () {
_this.onListSelectionChange();
}
}
},
toImage: function (layer) {
return layer.visible ? iconsEye : iconsEyeSlash;
}
},
updater: {
newItem: function (data) {
return new EEditorLayerItem(iconsEye, iconsEyeSlash, work, data, {
on: {
eyeclick: function (e, value, item) {
if (value) {
if (value.visible) {
value.visible = false;
item.image = iconsEyeSlash;
}
else {
value.visible = true;
item.image = iconsEye;
}
}
},
dblclick: function (e, _, item) {
_this.onListDblClick(e, _, item, result);
}
}
});
}
},
on: {
keydown: function (e) {
if (UtilKeyboardEvent.isDeleteKey(e)) {
var canvas = _this._canvas;
if (canvas) {
var layer = canvas.layer;
var size = layer.size();
var active = layer.active;
if (1 < size && active) {
DControllers.getCommandController().push(new ECommandLayerDelete(active, layer, _this._selection));
}
}
}
}
}
});
return result;
};
EEditorLayer.prototype.onListDblClick = function (e, _, item, list) {
var canvas = this._canvas;
if (canvas) {
var layerActive_1 = canvas.layer.active;
if (layerActive_1) {
var oldValue_1 = EDialogLayerValue.from(layerActive_1);
var dialogLayer = this.dialog;
dialogLayer.value = oldValue_1;
dialogLayer.open(item).then(function (newValue) {
if (newValue && !newValue.isEqual(oldValue_1)) {
DControllers.getCommandController().push(new ECommandLayerChange(layerActive_1, newValue, canvas.layer));
}
});
}
}
};
EEditorLayer.prototype.onListLayerChange = function () {
var listLayer = this.list;
var canvas = this._canvas;
if (canvas) {
var layerContainer = canvas.layer;
var layers = layerContainer.children;
var layerActive = layerContainer.active;
var items = listLayer.data.items;
for (var i = 0, imax = layers.length; i < imax; ++i) {
items[i] = layers[imax - 1 - i];
}
items.length = layers.length;
listLayer.update(true);
if (layerActive != null) {
listLayer.data.selection.clearAndAdd(layerActive);
}
else {
listLayer.data.selection.clear();
}
}
else {
listLayer.data.items = [];
}
};
EEditorLayer.prototype.onListSelectionChange = function () {
var first = this.list.data.selection.first;
if (first) {
var canvas = this._canvas;
if (canvas) {
var layerActive = canvas.layer.active;
if (layerActive !== first) {
// Unselect
var selection = this._selection;
if (!selection.isEmpty()) {
var before = selection.store();
if (selection.clear()) {
var after = selection.store();
DControllers.getCommandController().push(new ECommandShapeSelect(before, after, selection));
}
}
// Change the active layer
canvas.layer.active = first;
}
}
}
};
EEditorLayer.prototype.onCanvasChange = function (newCanvas, forcibly) {
var oldCanvas = this._canvas;
if (newCanvas !== this._canvas) {
var onLayerChangeBound = this.onLayerChangeBound;
if (oldCanvas != null) {
oldCanvas.layer.off("change", onLayerChangeBound);
}
this._canvas = newCanvas;
if (newCanvas != null) {
this.state.isDisabled = false;
newCanvas.layer.on("change", onLayerChangeBound);
}
else {
this.state.isDisabled = true;
}
this.onLayerChange();
}
else if (forcibly) {
this.onLayerChange();
}
};
EEditorLayer.prototype.isActiveDeletable = function (canvas) {
if (canvas) {
return 1 < canvas.layer.size();
}
return false;
};
EEditorLayer.prototype.isActiveNotLast = function (canvas) {
if (canvas) {
var layer = canvas.layer;
var layers = layer.children;
var active = layer.active;
if (active) {
return active !== layers[layers.length - 1];
}
}
return false;
};
EEditorLayer.prototype.isActiveNotFirst = function (canvas) {
if (canvas) {
var layer = canvas.layer;
var layers = layer.children;
var active = layer.active;
if (active) {
return active !== layers[0];
}
}
return false;
};
EEditorLayer.prototype.onLayerChange = function () {
// Update buttons
var canvas = this._canvas;
this.state.isEnabled = canvas != null;
this.buttonDelete.state.isEnabled = this.isActiveDeletable(canvas);
this.buttonSendBackward.state.isEnabled = this.isActiveNotFirst(canvas);
this.buttonBringForward.state.isEnabled = this.isActiveNotLast(canvas);
// Update the list
this.onListLayerChange();
// Update the modifier
this._selection.updateModifier();
};
EEditorLayer.prototype.getType = function () {
return "EEditorLayer";
};
return EEditorLayer;
}(DLayoutVertical));
export { EEditorLayer };
//# sourceMappingURL=e-editor-layer.js.map