@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
527 lines • 19.7 kB
JavaScript
import { __extends } from "tslib";
import { DButtonPrimary, DControllers, DDialogMessage, DDialogProcessing, DIndicatorProcessing, DInputLabel, DInputSearch, DInputText, DLayoutHorizontal, DLayoutVertical, DList, DListItem, DSelect, DText, EShapeConnectorLine, EShapeType, isArray } from "@wcardinal/wcardinal-ui";
import { ECommandShapeSelect } from "../command/e-command-shape-select";
import { toShapeLabel } from "./to-shape-label";
import { EEditorSearchConditionState } from "./e-editor-search-condition-state";
import { EShapeExtensions } from "../extension/e-shape-extensions";
import { EEditorSearchConditionType } from "./e-editor-search-condition-type";
import { toShapeTypeLabel } from "./to-shape-type-label";
var EEditorSearch = /** @class */ (function (_super) {
__extends(EEditorSearch, _super);
function EEditorSearch(options) {
var _a;
var _this = _super.call(this, options) || this;
// Selection
var selection = options.selection;
_this._selection = selection;
// Icons
_this._icons = options.icons;
// Finder
_this._finder = options.finder;
// Interval
_this._interval = (_a = options.interval) !== null && _a !== void 0 ? _a : 333;
// Diagram
var diagram = options.diagram;
_this._diagram = diagram;
_this.state.isDisabled = diagram.canvas == null;
diagram.on("unset", function () {
_this.list.data.clear();
_this.state.isDisabled = true;
});
diagram.on("set", function () {
_this.state.isDisabled = false;
});
// Layout
_this.addChild(_this.newTextLabel());
if (_this._finder != null) {
_this.addChild(_this.inputSearch);
}
else {
_this.addChild(new DLayoutHorizontal({
width: "padding",
height: "auto",
children: [
new DInputLabel({
width: 60,
text: {
value: _this.theme.getInputIdLabel()
}
}),
_this.inputId
]
}));
_this.addChild(new DLayoutHorizontal({
width: "padding",
height: "auto",
children: [
new DInputLabel({
width: 60,
text: {
value: _this.theme.getSelectTypeLabel()
}
}),
_this.selectType
]
}));
_this.addChild(new DLayoutHorizontal({
width: "padding",
height: "auto",
children: [
new DInputLabel({
width: 60,
text: {
value: _this.theme.getSelectStateLabel()
}
}),
_this.selectState
]
}));
_this.addChild(_this.buttonExecute);
}
_this.addChild(_this.list);
return _this;
}
EEditorSearch.prototype.newTextLabel = function () {
return new DText({
x: "padding",
width: "padding",
text: {
value: this.theme.getLabel()
}
});
};
Object.defineProperty(EEditorSearch.prototype, "inputSearch", {
get: function () {
var _a;
return ((_a = this._inputSearch) !== null && _a !== void 0 ? _a : (this._inputSearch = this.newInputSearch()));
},
enumerable: false,
configurable: true
});
EEditorSearch.prototype.newInputSearch = function () {
var _this = this;
return new DInputSearch({
x: "padding",
width: "padding",
on: {
input: function (newValue) {
_this.search(newValue);
},
enter: function (emitter) {
_this.search(emitter.value);
}
}
});
};
Object.defineProperty(EEditorSearch.prototype, "inputId", {
get: function () {
var _a;
return ((_a = this._inputId) !== null && _a !== void 0 ? _a : (this._inputId = this.newInputId()));
},
enumerable: false,
configurable: true
});
EEditorSearch.prototype.newInputId = function () {
var _this = this;
return new DInputText({
weight: 1,
on: {
enter: function () {
_this.buttonExecute.activate();
}
}
});
};
Object.defineProperty(EEditorSearch.prototype, "selectType", {
get: function () {
var _a;
return ((_a = this._selectType) !== null && _a !== void 0 ? _a : (this._selectType = this.newSelectType()));
},
enumerable: false,
configurable: true
});
EEditorSearch.prototype.newSelectType = function () {
return new DSelect({
weight: 1,
value: EEditorSearchConditionType.NONE,
menu: {
width: "auto",
column: 3,
fit: false,
items: this.newSelectTypeMenuItems()
}
});
};
EEditorSearch.prototype.newSelectTypeMenuItems = function () {
var _this = this;
var result = [
this.newSelectTypeMenuItem(EEditorSearchConditionType.NONE, this.theme.toTypeLabel(EEditorSearchConditionType.NONE)),
this.newSelectTypeMenuItemShape(EShapeType.CIRCLE),
this.newSelectTypeMenuItemShape(EShapeType.SEMICIRCLE),
this.newSelectTypeMenuItemShape(EShapeType.RECTANGLE),
this.newSelectTypeMenuItemShape(EShapeType.RECTANGLE_ROUNDED),
this.newSelectTypeMenuItemShape(EShapeType.TRIANGLE),
this.newSelectTypeMenuItemShape(EShapeType.TRIANGLE_ROUNDED),
this.newSelectTypeMenuItemShape(EShapeType.LINE),
this.newSelectTypeMenuItemShape(EShapeType.CONNECTOR_LINE),
this.newSelectTypeMenuItemShape(EShapeType.CONNECTOR_ELBOW),
this.newSelectTypeMenuItemShape(EShapeType.IMAGE),
this.newSelectTypeMenuItemShape(EShapeType.GROUP),
this.newSelectTypeMenuItemShape(EShapeType.BAR),
this.newSelectTypeMenuItemShape(EShapeType.BUTTON),
this.newSelectTypeMenuItemShape(EShapeType.EMBEDDED),
this.newSelectTypeMenuItemShape(EShapeType.EMBEDDED_LAYER),
this.newSelectTypeMenuItemShape(EShapeType.EMBEDDED_ACCEPTOR_EDGE)
];
EShapeExtensions.each(function (extension) {
if ("type" in extension) {
result.push(_this.newSelectTypeMenuItemShape(extension.type));
}
});
return result;
};
EEditorSearch.prototype.newSelectTypeMenuItem = function (type, label) {
return {
width: 200,
value: type,
text: {
value: label
}
};
};
EEditorSearch.prototype.newSelectTypeMenuItemShape = function (type) {
return this.newSelectTypeMenuItem(type, toShapeTypeLabel(type));
};
EEditorSearch.prototype.getSelectTypeValue = function () {
var selectType = this._selectType;
if (selectType != null) {
var value = selectType.value;
if (value != null && 0 <= value) {
return value;
}
}
return null;
};
Object.defineProperty(EEditorSearch.prototype, "selectState", {
get: function () {
var _a;
return ((_a = this._selectState) !== null && _a !== void 0 ? _a : (this._selectState = this.newSelectState()));
},
enumerable: false,
configurable: true
});
EEditorSearch.prototype.newSelectState = function () {
var theme = this.theme;
return new DSelect({
weight: 1,
value: EEditorSearchConditionState.NONE,
menu: {
items: [
this.newSelectStateMenuItem(EEditorSearchConditionState.NONE, theme),
this.newSelectStateMenuItem(EEditorSearchConditionState.CONNECTED_FULLY, theme),
this.newSelectStateMenuItem(EEditorSearchConditionState.CONNECTED_PARTIALLY, theme),
this.newSelectStateMenuItem(EEditorSearchConditionState.UNCONNECTED, theme)
]
}
});
};
EEditorSearch.prototype.newSelectStateMenuItem = function (state, theme) {
return {
value: state,
text: {
value: theme.toStateLabel(state)
}
};
};
EEditorSearch.prototype.getSelectStateValue = function () {
var result = this.selectState.value;
if (result != null && 0 <= result) {
return result;
}
return null;
};
Object.defineProperty(EEditorSearch.prototype, "buttonExecute", {
get: function () {
var _a;
return ((_a = this._buttonExecute) !== null && _a !== void 0 ? _a : (this._buttonExecute = this.newButtonExecute()));
},
enumerable: false,
configurable: true
});
EEditorSearch.prototype.newButtonExecute = function () {
var _this = this;
return new DButtonPrimary({
width: "padding",
text: {
value: this.theme.getButtonExecuteTitle()
},
image: {
source: this._icons.editor_search
},
on: {
active: function (emitter) {
_this.onButtonExecuteActive(emitter);
}
}
});
};
EEditorSearch.prototype.onButtonExecuteActive = function (opener) {
var _a, _b;
var indicator = this.indicatorExecute;
indicator.start();
var shapes = [];
var canvas = this._diagram.canvas;
if (canvas != null) {
var id_1 = this.inputId.value.trim();
var type_1 = (_a = this.selectType.value) !== null && _a !== void 0 ? _a : EEditorSearchConditionType.NONE;
var state_1 = (_b = this.selectState.value) !== null && _b !== void 0 ? _b : EEditorSearchConditionState.NONE;
canvas.shape.each(function (shape) {
if (0 < id_1.length && shape.id.indexOf(id_1) < 0) {
return true;
}
if (type_1 !== EEditorSearchConditionType.NONE && type_1 !== shape.type) {
return true;
}
switch (state_1) {
case EEditorSearchConditionState.CONNECTED_FULLY:
if (shape instanceof EShapeConnectorLine) {
var edge = shape.edge;
var tail = edge.tail.acceptor.shape;
var head = edge.head.acceptor.shape;
if (tail == null || head == null) {
return true;
}
}
else {
if (shape.connector.size() <= 0) {
return true;
}
}
break;
case EEditorSearchConditionState.CONNECTED_PARTIALLY:
if (shape instanceof EShapeConnectorLine) {
var edge = shape.edge;
var tail = edge.tail.acceptor.shape;
var head = edge.head.acceptor.shape;
if ((tail == null && head == null) || (tail != null && head != null)) {
return true;
}
}
else {
return true;
}
break;
case EEditorSearchConditionState.UNCONNECTED:
if (shape instanceof EShapeConnectorLine) {
var edge = shape.edge;
var tail = edge.tail.acceptor.shape;
var head = edge.head.acceptor.shape;
if (tail != null || head != null) {
return true;
}
}
else {
if (0 < shape.connector.size()) {
return true;
}
}
break;
}
shapes.push(shape);
return true;
});
}
this.list.data.clearAndAddAll(shapes);
indicator.resolve();
};
Object.defineProperty(EEditorSearch.prototype, "indicatorExecute", {
get: function () {
var _a;
return ((_a = this._indicatorExecute) !== null && _a !== void 0 ? _a : (this._indicatorExecute = this.newIndicatorExecute()));
},
enumerable: false,
configurable: true
});
EEditorSearch.prototype.newIndicatorExecute = function () {
return new DIndicatorProcessing(this.buttonExecute);
};
EEditorSearch.prototype.search = function (word) {
var _this = this;
var threshold = 500;
var searching = this._searching;
var searched = this._searched;
var searchedAt = this._searchedAt;
if (searching !== searched || (searchedAt != null && Date.now() - searchedAt < threshold)) {
this._requested = word;
if (this._timeoutId == null) {
this._timeoutId = window.setTimeout(function () {
_this._timeoutId = null;
var newWord = _this._requested;
if (newWord != null) {
_this._requested = undefined;
_this.search(newWord);
}
}, threshold);
}
}
else {
var timeoutId = this._timeoutId;
if (timeoutId != null) {
this._timeoutId = null;
window.clearTimeout(timeoutId);
}
this._searching = word;
this.doSearch(word).then(function (result) {
_this.list.data.clearAndAddAll(result.shapes);
_this._searched = result.word;
_this._searchedAt = Date.now();
});
}
};
EEditorSearch.prototype.doSearch = function (word) {
var finder = this._finder;
if (finder == null) {
return Promise.resolve({
word: word,
shapes: []
});
}
var canvas = this._diagram.canvas;
if (canvas == null) {
return Promise.resolve({
word: word,
shapes: []
});
}
var trimmed = word.trim();
if (trimmed.length <= 0) {
return Promise.resolve({
word: word,
shapes: []
});
}
try {
var found = finder(canvas, trimmed);
if (isArray(found)) {
return Promise.resolve({
word: word,
shapes: found
});
}
else {
return found.then(function (shapes) {
return {
word: word,
shapes: shapes
};
}, function () {
return {
word: word,
shapes: []
};
});
}
}
catch (_a) {
return Promise.resolve({
word: word,
shapes: []
});
}
};
Object.defineProperty(EEditorSearch.prototype, "list", {
get: function () {
var _a;
return ((_a = this._list) !== null && _a !== void 0 ? _a : (this._list = this.newList()));
},
enumerable: false,
configurable: true
});
EEditorSearch.prototype.newList = function () {
var _this = this;
return new DList({
width: "padding",
weight: 1,
data: {
toLabel: function (value) {
return toShapeLabel(value);
},
toTitle: function (value) {
return undefined;
},
toImage: function (value) {
return null;
}
},
updater: {
newItem: function (data) {
return new DListItem(data, {
on: {
select: function (value, item) {
_this.onListItemDown(value, item);
}
}
});
}
}
});
};
EEditorSearch.prototype.onListItemDown = function (value, item) {
var shape = value;
if (shape != null) {
var canvas = this._diagram.canvas;
var layer = shape.root.parent;
if (canvas != null && layer != null) {
// Selection
var selection = this._selection;
var before = selection.store();
if (selection.set(shape)) {
selection.focus();
var after = selection.store();
DControllers.getCommandController().push(new ECommandShapeSelect(before, after, selection));
}
else {
selection.focus();
}
// Change the active layer
var layerActive = canvas.layer.active;
if (layerActive !== layer) {
canvas.layer.active = layer;
}
}
else {
this.dialogError.open(item);
}
}
};
Object.defineProperty(EEditorSearch.prototype, "dialogError", {
get: function () {
var _a;
return ((_a = this._dialogError) !== null && _a !== void 0 ? _a : (this._dialogError = this.newDialogError()));
},
enumerable: false,
configurable: true
});
EEditorSearch.prototype.newDialogError = function () {
return new DDialogMessage({
message: this.theme.getDialogErrorLabel()
});
};
Object.defineProperty(EEditorSearch.prototype, "dialogProcessing", {
get: function () {
var _a;
return ((_a = this._dialogProcessing) !== null && _a !== void 0 ? _a : (this._dialogProcessing = this.newDialogProcessing()));
},
enumerable: false,
configurable: true
});
EEditorSearch.prototype.newDialogProcessing = function () {
return new DDialogProcessing();
};
EEditorSearch.prototype.getType = function () {
return "EEditorSearch";
};
return EEditorSearch;
}(DLayoutVertical));
export { EEditorSearch };
//# sourceMappingURL=e-editor-search.js.map