@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
336 lines • 13.6 kB
JavaScript
import { __extends } from "tslib";
import { DButtonAmbient, DControllers, DInputRealAndLabel, DLayoutHorizontal, DLayoutVertical, DList, DListItem, DPane, DText, DThemes } from "@wcardinal/wcardinal-ui";
import { ECommandShapeButtonLayerValueAdd } from "./e-command-shape-button-layer-value-add";
import { ECommandShapeButtonLayerValueBringForward } from "./e-command-shape-button-layer-value-bring-forward";
import { ECommandShapeButtonLayerValueMargin } from "./e-command-shape-button-layer-value-margin";
import { ECommandShapeButtonLayerValueRemove } from "./e-command-shape-button-layer-value-remove";
import { ECommandShapeButtonLayerValueReplace } from "./e-command-shape-button-layer-value-replace";
import { ECommandShapeButtonLayerValueSendBackward } from "./e-command-shape-button-layer-value-send-backward";
import { EDialogShapeButtonLayerValue } from "./e-dialog-shape-button-layer-value";
import { EShapeButtonLayer } from "./e-shape-button-layer";
var EEditorShapeButtonLayer = /** @class */ (function (_super) {
__extends(EEditorShapeButtonLayer, _super);
function EEditorShapeButtonLayer(options) {
var _this = _super.call(this, options) || this;
_this._icons = options.icons;
var selection = options.selection;
_this._selection = selection;
_this._diagram = options.diagram;
// Layout
_this.initLayout();
return _this;
}
EEditorShapeButtonLayer.prototype.initLayout = function () {
var _this = this;
// Content height
this.content.setHeight("padding");
// Layout
new DLayoutVertical({
parent: this.content,
x: "padding",
y: "padding",
width: "padding",
height: "padding",
children: [
new DLayoutHorizontal({
width: "100%",
height: "auto",
children: [
this.newTextLabel(),
this.buttonNew,
this.buttonDelete,
this.buttonBringForward,
this.buttonSendBackward
]
}),
this.columnList,
this.inputMargin
]
});
// Selection
var selection = this._selection;
this.state.isDisabled = selection.isEmpty();
selection.on("change", function () {
_this.state.isDisabled = selection.isEmpty();
_this.onSelectionChange(selection);
});
var columnList = this.columnList;
columnList.data.selection.on("change", function () {
_this.onListSelectionChange(columnList);
});
this.onSelectionChange(selection);
};
EEditorShapeButtonLayer.prototype.newTextLabel = function () {
return new DText({
weight: 1,
text: {
value: this.subtheme.getLabel()
}
});
};
Object.defineProperty(EEditorShapeButtonLayer.prototype, "buttonNew", {
get: function () {
var _a;
return ((_a = this._buttonNew) !== null && _a !== void 0 ? _a : (this._buttonNew = this.newButtonNew()));
},
enumerable: false,
configurable: true
});
EEditorShapeButtonLayer.prototype.newButtonNew = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.new
},
title: this.subtheme.getButtonNewTitle(),
on: {
active: function (emitter) {
_this.onButtonNewActive(emitter);
}
}
});
};
EEditorShapeButtonLayer.prototype.onButtonNewActive = function (opener) {
var _this = this;
this.dialogButton
.reset()
.open(opener)
.then(function (value) {
if (value != null) {
DControllers.getCommandController().push(new ECommandShapeButtonLayerValueAdd(value, _this._selection));
}
});
};
EEditorShapeButtonLayer.prototype.onSelectionChangeButtonNew = function (selection) {
var buttonNew = this.buttonNew;
if (selection.last() instanceof EShapeButtonLayer) {
buttonNew.state.isDisabled = false;
}
else {
buttonNew.state.isDisabled = true;
}
};
Object.defineProperty(EEditorShapeButtonLayer.prototype, "buttonDelete", {
get: function () {
var _a;
return ((_a = this._buttonDelete) !== null && _a !== void 0 ? _a : (this._buttonDelete = this.newButtonDelete()));
},
enumerable: false,
configurable: true
});
EEditorShapeButtonLayer.prototype.newButtonDelete = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.delete
},
title: this.subtheme.getButtonDeleteTitle(),
on: {
active: function () {
var columnList = _this.columnList;
var first = columnList.data.selection.first;
if (first != null && 1 < columnList.data.size()) {
DControllers.getCommandController().push(new ECommandShapeButtonLayerValueRemove(first, _this._selection));
}
}
}
});
};
EEditorShapeButtonLayer.prototype.onListSelectionChangeButtonDelete = function (columnList) {
this.buttonDelete.state.isDisabled =
columnList.data.size() <= 1 || columnList.data.selection.isEmpty();
};
Object.defineProperty(EEditorShapeButtonLayer.prototype, "buttonBringForward", {
get: function () {
var _a;
return ((_a = this._buttonBringForward) !== null && _a !== void 0 ? _a : (this._buttonBringForward = this.newButtonBringForward()));
},
enumerable: false,
configurable: true
});
EEditorShapeButtonLayer.prototype.newButtonBringForward = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.arrow_up
},
title: this.subtheme.getButtonBringForwardTitle(),
on: {
active: function () {
var columnList = _this.columnList;
var first = columnList.selection.first;
if (first != null && columnList.data.items[0] !== first) {
DControllers.getCommandController().push(new ECommandShapeButtonLayerValueBringForward(first, _this._selection));
}
}
}
});
};
EEditorShapeButtonLayer.prototype.onListSelectionChangeButtonBringForward = function (columnList) {
var first = columnList.data.selection.first;
var items = columnList.data.items;
this.buttonBringForward.state.isDisabled = first == null || items[0] === first;
};
Object.defineProperty(EEditorShapeButtonLayer.prototype, "buttonSendBackward", {
get: function () {
var _a;
return ((_a = this._buttonSendBackward) !== null && _a !== void 0 ? _a : (this._buttonSendBackward = this.newButtonSendBackward()));
},
enumerable: false,
configurable: true
});
EEditorShapeButtonLayer.prototype.newButtonSendBackward = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.arrow_down
},
title: this.subtheme.getButtonSendBackwardTitle(),
on: {
active: function () {
var columnList = _this.columnList;
var first = columnList.selection.first;
var items = columnList.data.items;
if (first != null && items[items.length - 1] !== first) {
DControllers.getCommandController().push(new ECommandShapeButtonLayerValueSendBackward(first, _this._selection));
}
}
}
});
};
EEditorShapeButtonLayer.prototype.onListSelectionChangeButtonSendBackward = function (columnList) {
var first = columnList.selection.first;
var items = columnList.data.items;
this.buttonSendBackward.state.isDisabled =
first == null || items[items.length - 1] === first;
};
Object.defineProperty(EEditorShapeButtonLayer.prototype, "dialogButton", {
get: function () {
var _a;
return ((_a = this._dialogButton) !== null && _a !== void 0 ? _a : (this._dialogButton = this.newDialogButton()));
},
enumerable: false,
configurable: true
});
EEditorShapeButtonLayer.prototype.newDialogButton = function () {
return new EDialogShapeButtonLayerValue({
diagram: this._diagram
});
};
Object.defineProperty(EEditorShapeButtonLayer.prototype, "columnList", {
get: function () {
var _a;
return ((_a = this._columnList) !== null && _a !== void 0 ? _a : (this._columnList = this.newColumnList()));
},
enumerable: false,
configurable: true
});
EEditorShapeButtonLayer.prototype.newColumnList = function () {
var _this = this;
var result = new DList({
width: "100%",
weight: 1,
data: {
toLabel: function (value) {
return value.label;
}
},
updater: {
newItem: function (data) {
return new DListItem(data, {
on: {
dblclick: function (e, _, item) {
_this.onColumnListDblClick(e, _, item, result);
}
}
});
}
}
});
return result;
};
EEditorShapeButtonLayer.prototype.onColumnListDblClick = function (e, _, item, list) {
var _this = this;
var oldValue = item.value;
if (oldValue != null) {
var columnDialog = this.dialogButton;
columnDialog.value = oldValue;
columnDialog.open(item).then(function (newValue) {
if (newValue != null) {
DControllers.getCommandController().push(new ECommandShapeButtonLayerValueReplace(oldValue, newValue, _this._selection, list));
}
});
}
};
EEditorShapeButtonLayer.prototype.onSelectionChangeColumnList = function (selection) {
var last = selection.last();
var columnList = this.columnList;
columnList.data.items = last instanceof EShapeButtonLayer ? last.button.values : [];
this.onListSelectionChange(columnList);
};
Object.defineProperty(EEditorShapeButtonLayer.prototype, "inputMargin", {
get: function () {
var _a;
return ((_a = this._inputMargin) !== null && _a !== void 0 ? _a : (this._inputMargin = this.newInputMargin()));
},
enumerable: false,
configurable: true
});
EEditorShapeButtonLayer.prototype.newInputMargin = function () {
var _this = this;
return new DInputRealAndLabel({
width: "100%",
label: {
text: {
value: this.subtheme.getInputMarginLabel()
}
},
input: {
weight: 1,
on: {
change: function (value) {
DControllers.getCommandController().push(new ECommandShapeButtonLayerValueMargin(value, _this._selection));
}
}
}
});
};
EEditorShapeButtonLayer.prototype.onSelectionChangeInputRowHeight = function (selection) {
var last = selection.last();
var input = this.inputMargin;
if (last instanceof EShapeButtonLayer) {
input.input.value = last.button.margin;
input.state.isDisabled = false;
}
else {
input.state.isDisabled = true;
}
};
EEditorShapeButtonLayer.prototype.onSelectionChange = function (selection) {
this.onSelectionChangeButtonNew(selection);
this.onSelectionChangeColumnList(selection);
};
EEditorShapeButtonLayer.prototype.onListSelectionChange = function (columnList) {
this.onListSelectionChangeButtonDelete(columnList);
this.onListSelectionChangeButtonBringForward(columnList);
this.onListSelectionChangeButtonSendBackward(columnList);
};
Object.defineProperty(EEditorShapeButtonLayer.prototype, "subtheme", {
get: function () {
var _a;
return ((_a = this._subtheme) !== null && _a !== void 0 ? _a : (this._subtheme = this.newSubtheme()));
},
enumerable: false,
configurable: true
});
EEditorShapeButtonLayer.prototype.newSubtheme = function () {
return DThemes.get("EEditorShapeButtonLayer");
};
return EEditorShapeButtonLayer;
}(DPane));
export { EEditorShapeButtonLayer };
//# sourceMappingURL=e-editor-shape-button-layer.js.map