@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
535 lines • 19.9 kB
JavaScript
import { __extends } from "tslib";
import { DBaseState, DButtonAmbient, DButtonCheckRight, DDropdown, DInputText, DLayoutHorizontal, DLayoutVertical, DList, DListItem, DText, DThemes, EShapeActionValueChangeColor } from "@wcardinal/wcardinal-ui";
import { EDialogAction } from "./e-dialog-action";
var EEditorAction = /** @class */ (function (_super) {
__extends(EEditorAction, _super);
function EEditorAction(options) {
var _this = _super.call(this, options) || this;
_this._icons = options.icons;
var selection = options.selection;
_this._selection = selection;
_this._diagram = options.diagram;
_this.addChild(new DLayoutHorizontal({
width: "padding",
height: "auto",
children: [
_this.newTextLabel(),
_this.buttonNew,
_this.buttonDelete,
_this.buttonBringForward,
_this.buttonSendBackward
]
}));
_this.addChild(_this.actionList);
_this.addChild(_this.checkInteractive);
_this.addChild(_this.checkFocusable);
_this.addChild(_this.labelTitle);
_this.addChild(_this.inputTitle);
_this.addChild(_this.labelShortcut);
_this.addChild(_this.inputShortcut);
_this.addChild(_this.labelCursor);
_this.addChild(_this.dropdownCursor);
selection.on("change", function () {
_this.onSelectionChange(selection);
});
var actionList = _this.actionList;
actionList.data.selection.on("change", function () {
_this.onListSelectionChange(actionList);
});
_this.onSelectionChange(selection);
return _this;
}
EEditorAction.prototype.newTextLabel = function () {
return new DText({
weight: 1,
text: {
value: this.theme.getLabel()
}
});
};
Object.defineProperty(EEditorAction.prototype, "buttonNew", {
get: function () {
var _a;
return ((_a = this._buttonNew) !== null && _a !== void 0 ? _a : (this._buttonNew = this.newButtonNew()));
},
enumerable: false,
configurable: true
});
EEditorAction.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);
}
}
});
};
EEditorAction.prototype.onButtonNewActive = function (opener) {
var _this = this;
this.actionDialog
.reset()
.open(opener)
.then(function (value) {
if (value != null) {
_this._selection.addActionValue(value);
}
});
};
Object.defineProperty(EEditorAction.prototype, "buttonDelete", {
get: function () {
var _a;
return ((_a = this._buttonDelete) !== null && _a !== void 0 ? _a : (this._buttonDelete = this.newButtonDelete()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newButtonDelete = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.delete
},
title: this.theme.getButtonDeleteTitle(),
state: DBaseState.DISABLED,
on: {
active: function () {
var first = _this.actionList.data.selection.first;
if (first != null) {
_this._selection.removeActionValue(first);
}
}
}
});
};
EEditorAction.prototype.onListSelectionChangeButtonDelete = function (actionList) {
this.buttonDelete.state.isDisabled = actionList.data.selection.isEmpty();
};
Object.defineProperty(EEditorAction.prototype, "buttonBringForward", {
get: function () {
var _a;
return ((_a = this._buttonBringForward) !== null && _a !== void 0 ? _a : (this._buttonBringForward = this.newButtonBringForward()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newButtonBringForward = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.arrow_up
},
title: this.theme.getButtonBringForwardTitle(),
state: DBaseState.DISABLED,
on: {
active: function () {
var actionList = _this.actionList;
var first = actionList.data.selection.first;
var items = actionList.data.items;
if (first != null && items[0] !== first) {
_this._selection.bringActionValueForward(first);
}
}
}
});
};
EEditorAction.prototype.onListSelectionChangeButtonBringForward = function (actionList) {
var first = actionList.data.selection.first;
var items = actionList.data.items;
this.buttonBringForward.state.isDisabled = first == null || items[0] === first;
};
Object.defineProperty(EEditorAction.prototype, "buttonSendBackward", {
get: function () {
var _a;
return ((_a = this._buttonSendBackward) !== null && _a !== void 0 ? _a : (this._buttonSendBackward = this.newButtonSendBackward()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newButtonSendBackward = function () {
var _this = this;
return new DButtonAmbient({
width: 30,
image: {
source: this._icons.arrow_down
},
title: this.theme.getButtonSendBackwardTitle(),
state: DBaseState.DISABLED,
on: {
active: function () {
var actionList = _this.actionList;
var first = actionList.data.selection.first;
var items = actionList.data.items;
if (first != null && items[items.length - 1] !== first) {
_this._selection.sendActionValueBackward(first);
}
}
}
});
};
EEditorAction.prototype.onListSelectionChangeButtonSendBackward = function (actionList) {
var first = actionList.data.selection.first;
var items = actionList.data.items;
this.buttonSendBackward.state.isDisabled =
first == null || items[items.length - 1] === first;
};
Object.defineProperty(EEditorAction.prototype, "actionDialog", {
get: function () {
var _a;
return ((_a = this._actionDialog) !== null && _a !== void 0 ? _a : (this._actionDialog = this.newActionDialog()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newActionDialog = function () {
return new EDialogAction({
icons: this._icons,
diagram: this._diagram
});
};
Object.defineProperty(EEditorAction.prototype, "actionList", {
get: function () {
var _a;
return ((_a = this._actionList) !== null && _a !== void 0 ? _a : (this._actionList = this.newActionList()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newActionList = function () {
var _this = this;
var result = new DList({
width: "padding",
weight: 1,
data: {
toLabel: function (item) {
return item.toLabel();
}
},
updater: {
newItem: function (data) {
return new DListItem(data, {
image: {
tint: {
color: null
}
},
on: {
dblclick: function (e, _, item) {
_this.onActionListDblClick(e, _, item, result);
},
set: function (value, index, item) {
_this.onActionListSet(item, value);
},
unset: function (item) {
_this.onActionListUnset(item);
}
}
});
}
}
});
return result;
};
EEditorAction.prototype.onActionListDblClick = function (e, _, item, list) {
var _this = this;
var oldActionValue = item.value;
if (oldActionValue != null) {
var actionDialog_1 = this.actionDialog;
actionDialog_1.reset();
actionDialog_1.value = oldActionValue;
actionDialog_1.open(item).then(function () {
var newActionValue = actionDialog_1.value;
if (newActionValue != null) {
_this._selection.replaceActionValue(oldActionValue, newActionValue, list);
}
});
}
};
EEditorAction.prototype.onActionListSet = function (item, value) {
if (value instanceof EShapeActionValueChangeColor) {
var image = item.image.get(0);
if (image != null) {
var theme = DThemes.get("DButtonColor");
image.source = theme.getImageSource(item.state);
image.tint.color = value.color;
}
}
else {
item.image = null;
}
};
EEditorAction.prototype.onActionListUnset = function (item) {
item.image = null;
};
EEditorAction.prototype.onSelectionChangeActionList = function (selection) {
var last = selection.last();
var actionList = this.actionList;
actionList.data.items = last != null ? last.action.values : [];
this.onListSelectionChange(actionList);
};
Object.defineProperty(EEditorAction.prototype, "checkInteractive", {
get: function () {
var _a;
return ((_a = this._checkInteractive) !== null && _a !== void 0 ? _a : (this._checkInteractive = this.newCheckInteractive()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newCheckInteractive = function () {
var _this = this;
return new DButtonCheckRight({
width: "padding",
text: {
value: this.theme.getCheckInteractiveLabel()
},
padding: 0,
background: {
color: null
},
on: {
active: function () {
_this._selection.setInteractive(true);
},
inactive: function () {
_this._selection.setInteractive(false);
}
}
});
};
EEditorAction.prototype.onSelectionChangeCheckInteractive = function (selection) {
var last = selection.last();
var checkInteractive = this.checkInteractive;
if (last != null) {
checkInteractive.state.isActive = last.interactive;
checkInteractive.state.isDisabled = false;
}
else {
checkInteractive.state.isDisabled = true;
}
};
Object.defineProperty(EEditorAction.prototype, "checkFocusable", {
get: function () {
var _a;
return ((_a = this._checkFocusable) !== null && _a !== void 0 ? _a : (this._checkFocusable = this.newCheckFocusable()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newCheckFocusable = function () {
var _this = this;
return new DButtonCheckRight({
width: "padding",
text: {
value: this.theme.getCheckFocusableLabel()
},
padding: 0,
background: {
color: null
},
on: {
active: function () {
_this._selection.setFocusable(true);
},
inactive: function () {
_this._selection.setFocusable(false);
}
}
});
};
EEditorAction.prototype.onSelectionChangeCheckFocusable = function (selection) {
var last = selection.last();
var checkFocusable = this.checkFocusable;
if (last != null) {
checkFocusable.state.isActive = last.state.isFocusable;
checkFocusable.state.isDisabled = false;
}
else {
checkFocusable.state.isDisabled = true;
}
};
Object.defineProperty(EEditorAction.prototype, "labelShortcut", {
get: function () {
var _a;
return ((_a = this._labelShortcut) !== null && _a !== void 0 ? _a : (this._labelShortcut = this.newLabelShortcut()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newLabelShortcut = function () {
return new DText({
width: "padding",
text: {
value: this.theme.getInputShortcutLabel()
}
});
};
Object.defineProperty(EEditorAction.prototype, "inputShortcut", {
get: function () {
var _a;
return ((_a = this._inputShortcut) !== null && _a !== void 0 ? _a : (this._inputShortcut = this.newInputShortcut()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newInputShortcut = function () {
var _this = this;
return new DInputText({
width: "padding",
on: {
change: function (value) {
_this._selection.setShortcut(_this.toNormalizedShortcut(value));
}
}
});
};
EEditorAction.prototype.toNormalizedShortcut = function (value) {
var trimmed = value.trim();
if (0 < trimmed.length) {
return trimmed;
}
};
EEditorAction.prototype.onSelectionChangeInputShortcut = function (selection) {
var _a;
this.inputShortcut.value = ((_a = selection.last()) === null || _a === void 0 ? void 0 : _a.shortcut) || "";
};
Object.defineProperty(EEditorAction.prototype, "labelTitle", {
get: function () {
var _a;
return ((_a = this._labelTitle) !== null && _a !== void 0 ? _a : (this._labelTitle = this.newLabelTitle()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newLabelTitle = function () {
return new DText({
width: "padding",
text: {
value: this.theme.getInputTitleLabel()
}
});
};
Object.defineProperty(EEditorAction.prototype, "inputTitle", {
get: function () {
var _a;
return ((_a = this._inputTitle) !== null && _a !== void 0 ? _a : (this._inputTitle = this.newInputTitle()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newInputTitle = function () {
var _this = this;
return new DInputText({
width: "padding",
on: {
change: function (value) {
_this._selection.setTitle(_this.toNormalizedTitle(value));
}
}
});
};
EEditorAction.prototype.toNormalizedTitle = function (value) {
if (0 < value.trim().length) {
return value;
}
};
EEditorAction.prototype.onSelectionChangeInputTitle = function (selection) {
var _a;
this.inputTitle.value = ((_a = selection.last()) === null || _a === void 0 ? void 0 : _a.title) || "";
};
Object.defineProperty(EEditorAction.prototype, "labelCursor", {
get: function () {
var _a;
return ((_a = this._labelCursor) !== null && _a !== void 0 ? _a : (this._labelCursor = this.newLabelCursor()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newLabelCursor = function () {
return new DText({
width: "padding",
text: {
value: this.theme.getDropdownCursorLabel()
}
});
};
Object.defineProperty(EEditorAction.prototype, "dropdownCursor", {
get: function () {
var _a;
return ((_a = this._dropdownCursor) !== null && _a !== void 0 ? _a : (this._dropdownCursor = this.newDropdownCursor()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.newDropdownCursor = function () {
var _this = this;
return new DDropdown({
width: "padding",
menu: {
width: "auto",
column: 3,
fit: false,
items: this.newDropdownCursorMenuItems()
},
on: {
select: function (value) {
var _a;
_this.dropdownCursor.text = (_a = _this.cursors.get(value)) !== null && _a !== void 0 ? _a : value;
_this._selection.setCursor(value);
}
}
});
};
EEditorAction.prototype.newDropdownCursorMenuItems = function () {
var result = [];
this.cursors.forEach(function (label, cursor) {
result.push({
width: 200,
value: cursor,
text: {
value: label
}
});
});
return result;
};
Object.defineProperty(EEditorAction.prototype, "cursors", {
get: function () {
var _a;
return ((_a = this._cursors) !== null && _a !== void 0 ? _a : (this._cursors = this.theme.getCursors()));
},
enumerable: false,
configurable: true
});
EEditorAction.prototype.onSelectionChangeDropdownCursor = function (selection) {
var _a, _b, _c;
var cursor = (_b = (_a = selection.last()) === null || _a === void 0 ? void 0 : _a.cursor) !== null && _b !== void 0 ? _b : "";
this.dropdownCursor.text = (_c = this.cursors.get(cursor)) !== null && _c !== void 0 ? _c : cursor;
};
EEditorAction.prototype.onSelectionChange = function (selection) {
this.state.isDisabled = selection.isEmpty();
this.onSelectionChangeActionList(selection);
this.onSelectionChangeCheckInteractive(selection);
this.onSelectionChangeCheckFocusable(selection);
this.onSelectionChangeInputShortcut(selection);
this.onSelectionChangeInputTitle(selection);
this.onSelectionChangeDropdownCursor(selection);
};
EEditorAction.prototype.onListSelectionChange = function (actionList) {
this.onListSelectionChangeButtonDelete(actionList);
this.onListSelectionChangeButtonBringForward(actionList);
this.onListSelectionChangeButtonSendBackward(actionList);
};
EEditorAction.prototype.getType = function () {
return "EEditorAction";
};
return EEditorAction;
}(DLayoutVertical));
export { EEditorAction };
//# sourceMappingURL=e-editor-action.js.map