@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
1,552 lines • 58.7 kB
JavaScript
import { DApplication, DApplications, DBoard, DButton, DButtonFile, DButtonFileAs, DDiagram, DDiagrams, DDialogConfirmDelete, DDialogConfirmDiscard, DDialogInputText, DDialogSelect, DInputTextAndLabel, DLayoutHorizontal, DLayoutSpace, DLayoutVertical, DTable, EShapeBase, EShapeCapabilities, EShapeCapability, UtilFileDownloader, UtilGestureModifier, UtilGestureModifiers, UtilKeyboardEvent, UtilPointerEvent, DInputSearch, EShapeEmbedded, DThemes, isString } from "@wcardinal/wcardinal-ui";
import { Point, Rectangle } from "pixi.js";
import { newGraphicTester } from "./data/new-graphic-tester";
import { toGraphicTesterObject } from "./data/to-graphic-tester-object";
import { toGraphicTesterSerialized } from "./data/to-graphic-tester-serialized";
import { toGraphicTesterSimple } from "./data/to-graphic-tester-simple";
import { EDialogProcessing } from "./editor/e-dialog-processing";
import { newDialogSelectWithThumbnails } from "./editor/e-dialog-select-with-thumbnails";
import { EToolSelectArea } from "./tool/e-tool-select-area";
import { EToolSelectSelection } from "./tool/e-tool-select-selection";
import { UtilCsv } from "./util/util-csv";
import { UtilDate } from "./util/util-date";
import { UtilShapeAreaSelect } from "./util/util-shape-area-select";
import { UtilHitTest } from "./util/util-hit-test";
import { UtilCanvasCategory } from "./util/util-canvas-category";
import { UtilShapeSearch } from "./util/util-shape-search";
var FGraphicTester = /** @class */ (function () {
function FGraphicTester(options) {
var _this = this;
var _a, _b;
this._options = options;
var theme = this.toTheme(options);
this._theme = theme;
this._controller = options.controller;
this._category = new UtilCanvasCategory((_a = options.canvas) === null || _a === void 0 ? void 0 : _a.category);
this._icons = theme.getIconBuilder().build();
var margin = (_b = options.margin) !== null && _b !== void 0 ? _b : theme.getMargin();
this._margin = margin;
this._isEditable = options.editable !== false;
this._isChanged = false;
this._onDiagramMoveBound = function (e) {
_this.onDiagramMove(e);
};
this._onDiagramUpBound = function (e) {
_this.onDiagramUp(e);
};
this._onDiagramDownPoint = new Point();
this._onDiagramMovePoint = new Point();
this._selectAreaRect = new Rectangle();
this._selectMode = 0 /* EToolSelectMode.NONE */;
this._childSelectTime = 0;
this._childSelectChild = null;
this._isSelectSuspended = false;
this._expressionMap = new Map();
this._appliedValues = new Map();
this._isMappingsDirty = false;
// Application
var application = new DApplication(options.application);
this._application = application;
// Panes
application.stage.addChild(this.newPanes(options));
this.onChange();
var onMappingsChangeBound = function () {
if (_this._isMappingsDirty) {
_this._isMappingsDirty = false;
_this.onMappingsChange();
}
setTimeout(onMappingsChangeBound, 100);
};
onMappingsChangeBound();
}
Object.defineProperty(FGraphicTester.prototype, "application", {
get: function () {
return this._application;
},
enumerable: false,
configurable: true
});
Object.defineProperty(FGraphicTester.prototype, "controller", {
get: function () {
return this._controller;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newHeader = function (options) {
var header = options.header;
if (header) {
var result = header();
if (result) {
var margin = this._margin;
result.x = margin;
result.y = margin;
result.setWidth(function (p) { return p; });
return result;
}
}
return null;
};
FGraphicTester.prototype.newPanes = function (options) {
var margin = this._margin;
return new DLayoutVertical({
x: margin,
y: margin,
width: function (p) { return p - 2 * margin; },
height: function (p) { return p - 2 * margin; },
margin: margin,
children: [
this.newHeader(options),
new DLayoutHorizontal({
weight: 1,
width: "padding",
margin: this._margin * 0.5,
children: [this.leftPane, this.rightPane]
})
]
});
};
Object.defineProperty(FGraphicTester.prototype, "leftPane", {
get: function () {
var result = this._paneLeft;
if (result == null) {
result = this.newLeftPane();
this._paneLeft = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newLeftPane = function () {
return new DBoard({
weight: 1,
height: "padding",
shadow: "WEAK",
children: [this.diagram, this.toolFileButtonGraphicOpen, this.layoutViewButton]
});
};
Object.defineProperty(FGraphicTester.prototype, "toolFileButtonGraphicOpen", {
get: function () {
var result = this._toolFileButtonGraphicOpen;
if (result == null) {
result = this.newToolFileButtonGraphicOpen();
this._toolFileButtonGraphicOpen = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newToolFileButtonGraphicOpen = function () {
var _this = this;
var theme = this._theme;
var margin = this._margin * 0.5;
return new DButton({
x: margin,
y: margin,
image: {
source: this._icons.open
},
title: theme.getToolFileButtonGraphicOpenTitle(),
shortcut: theme.getToolFileButtonGraphicOpenShortcut(),
theme: theme.getToolFileButtonGraphicTheme(),
on: {
active: function (emitter) {
_this.onToolFileButtonGraphicOpenActive(emitter);
}
}
});
};
FGraphicTester.prototype.onToolFileButtonGraphicOpenActive = function (opener) {
var _this = this;
if (this.isChanged) {
this.dialogDiscard.open(opener).then(function () {
_this.dialogSelectGraphic.then(function (dialogSelectGraphic) {
dialogSelectGraphic.open(opener);
});
});
}
else {
this.dialogSelectGraphic.then(function (dialogSelectGraphic) {
dialogSelectGraphic.open(opener);
});
}
};
Object.defineProperty(FGraphicTester.prototype, "layoutViewButton", {
get: function () {
var result = this._layoutViewButton;
if (result == null) {
result = this.newLayoutViewButton();
this._layoutViewButton = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newLayoutViewButton = function () {
var margin = this._margin * 0.5;
var position = function (p, s) { return p - s - margin; };
return new DLayoutHorizontal({
x: position,
y: position,
width: "auto",
height: "auto",
margin: 0,
padding: 0,
children: this.newViewButtons()
});
};
FGraphicTester.prototype.newViewButtons = function () {
return [
this.viewButtonZoomOut,
this.viewButtonZoomIn,
this.viewButtonDragAndPinch,
this.viewButtonReset,
this.viewButtonFit
];
};
Object.defineProperty(FGraphicTester.prototype, "viewButtonZoomOut", {
get: function () {
var result = this._viewButtonZoomOut;
if (result == null) {
result = this.newViewButtonZoomOut();
this._viewButtonZoomOut = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newViewButtonZoomOut = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this._icons.view_zoom_out
},
title: theme.getViewButtonZoomOutTitle(),
shortcut: theme.getViewButtonZoomOutShortcut(),
theme: theme.getViewButtonTheme(),
on: {
active: function () {
_this.diagram.view.zoomOut();
}
}
});
};
Object.defineProperty(FGraphicTester.prototype, "viewButtonZoomIn", {
get: function () {
var result = this._viewButtonZoomIn;
if (result == null) {
result = this.newViewButtonZoomIn();
this._viewButtonZoomIn = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newViewButtonZoomIn = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this._icons.view_zoom_in
},
title: theme.getViewButtonZoomInTitle(),
shortcut: theme.getViewButtonZoomInShortcut(),
shortcuts: theme.getViewButtonZoomInShortcuts(),
theme: theme.getViewButtonTheme(),
on: {
active: function () {
_this.diagram.view.zoomIn();
}
}
});
};
Object.defineProperty(FGraphicTester.prototype, "viewButtonReset", {
get: function () {
var result = this._viewButtonReset;
if (result == null) {
result = this.newViewButtonReset();
this._viewButtonReset = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newViewButtonReset = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this._icons.view_reset
},
title: theme.getViewButtonResetTitle(),
shortcut: theme.getViewButtonResetShortcut(),
theme: theme.getViewButtonTheme(),
on: {
active: function () {
_this.diagram.view.reset();
}
}
});
};
Object.defineProperty(FGraphicTester.prototype, "viewButtonDragAndPinch", {
get: function () {
var result = this._viewButtonDragAndPinch;
if (result == null) {
result = this.newViewButtonDragAndPinch();
this._viewButtonDragAndPinch = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newViewButtonDragAndPinch = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this._icons.camera
},
toggle: true,
title: theme.getViewButtonDragAndPinchTitle(),
shortcut: theme.getViewButtonDragAndPinchShortcut(),
theme: theme.getViewButtonTheme(),
on: {
active: function () {
_this._isSelectSuspended = true;
},
inactive: function () {
_this._isSelectSuspended = false;
}
}
});
};
Object.defineProperty(FGraphicTester.prototype, "viewButtonFit", {
get: function () {
var result = this._viewButtonFit;
if (result == null) {
result = this.newViewButtonFit();
this._viewButtonFit = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newViewButtonFit = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this._icons.view_fit
},
title: theme.getViewButtonFitTitle(),
shortcut: theme.getViewButtonFitShortcut(),
theme: theme.getViewButtonTheme(),
on: {
active: function () {
_this.diagram.view.fit();
}
}
});
};
Object.defineProperty(FGraphicTester.prototype, "rightPane", {
get: function () {
var result = this._paneRight;
if (result == null) {
result = this.newRightPane();
this._paneRight = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newRightPane = function () {
return new DLayoutVertical({
width: 400,
height: "padding",
margin: this._margin * 0.5,
children: [
new DLayoutHorizontal({
width: "padding",
height: "auto",
children: [
new DLayoutSpace({
weight: 1
}),
this.toolFileButtonCreate,
this.toolFileButtonOpen,
this.toolFileButtonSave,
this.toolFileButtonDelete
]
}),
this.inputName,
new DLayoutHorizontal({
width: "padding",
height: "auto",
children: [
this.tableFilterInput,
this.toolFileButtonUpload,
this.toolFileButtonDownload
]
}),
this.table
]
});
};
Object.defineProperty(FGraphicTester.prototype, "dialogProcessing", {
get: function () {
var result = this._dialogProcessing;
if (result == null) {
result = this.newDialogProcessing();
this._dialogProcessing = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newDialogProcessing = function () {
return new EDialogProcessing();
};
Object.defineProperty(FGraphicTester.prototype, "dialogDelete", {
get: function () {
var result = this._dialogConfirmDelete;
if (result == null) {
result = this.newDialogDelete();
this._dialogConfirmDelete = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newDialogDelete = function () {
var _this = this;
return new DDialogConfirmDelete({
on: {
ok: function () {
var tester = _this._tester;
if (tester) {
if (tester.id != null) {
_this._controller.graphicTester.delete(tester.id);
}
_this.tester = undefined;
}
}
}
});
};
Object.defineProperty(FGraphicTester.prototype, "tableFilterInput", {
get: function () {
var result = this._tableFilterInput;
if (result == null) {
result = this.newTableFilterInput();
this._tableFilterInput = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newTableFilterInput = function () {
var _this = this;
return new DInputSearch({
weight: 1,
on: {
input: function (value) {
var word = value.trim();
_this.tableFilter.word = word;
var filter = _this.table.data.filter;
if (0 < word.length) {
filter.apply();
}
else {
filter.unapply();
}
}
}
});
};
Object.defineProperty(FGraphicTester.prototype, "toolFileButtonCreate", {
get: function () {
var result = this._toolFileButtonCreate;
if (result == null) {
result = this.newToolFileButtonCreate();
this._toolFileButtonCreate = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newToolFileButtonCreate = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this.icons.new
},
title: theme.getToolFileButtonCreateTitle(),
shortcut: theme.getToolFileButtonCreateShortcut(),
theme: theme.getToolFileButtonTheme(),
on: {
active: function (emitter) {
_this.onToolFileButtonCreateActive(emitter);
}
}
});
};
FGraphicTester.prototype.onToolFileButtonCreateActive = function (opener) {
var _this = this;
if (this.isChanged) {
this.dialogDiscard.open(opener).then(function () {
_this.dialogCreate.open(opener);
});
}
else {
this.dialogCreate.open(opener);
}
};
Object.defineProperty(FGraphicTester.prototype, "toolFileButtonOpen", {
get: function () {
var result = this._toolFileButtonOpen;
if (result == null) {
result = this.newToolFileButtonOpen();
this._toolFileButtonOpen = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newToolFileButtonOpen = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this.icons.open
},
title: theme.getToolFileButtonOpenTitle(),
shortcut: theme.getToolFileButtonOpenShortcut(),
theme: theme.getToolFileButtonTheme(),
on: {
active: function (emitter) {
_this.onToolFileButtonOpenActive(emitter);
}
}
});
};
FGraphicTester.prototype.onToolFileButtonOpenActive = function (opener) {
var _this = this;
if (this.isChanged) {
this.dialogDiscard.open(opener).then(function () {
_this.dialogSelectMapping.open(opener);
});
}
else {
this.dialogSelectMapping.open(opener);
}
};
Object.defineProperty(FGraphicTester.prototype, "toolFileButtonUpload", {
get: function () {
var result = this._toolFileButtonUpload;
if (result == null) {
result = this.newToolFileButtonUpload();
this._toolFileButtonUpload = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newToolFileButtonUpload = function () {
var _this = this;
var theme = this._theme;
return new DButtonFile({
image: {
source: this.icons.upload
},
title: theme.getToolFileButtonUploadTitle(),
shortcut: theme.getToolFileButtonUploadShortcut(),
theme: theme.getToolFileButtonTheme(),
as: DButtonFileAs.TEXT,
on: {
open: function (data, file) {
_this.onToolFileButtonUploadOpen(data, file);
}
}
});
};
FGraphicTester.prototype.onToolFileButtonUploadOpen = function (data, file) {
var tester = this._tester;
if (tester) {
tester.mappings = toGraphicTesterObject(data);
this.onDiagramSelectionChange();
this.toDirty();
this.toMappingsDirty();
}
};
Object.defineProperty(FGraphicTester.prototype, "toolFileButtonDownload", {
get: function () {
var result = this._toolFileButtonDownload;
if (result == null) {
result = this.newToolFileButtonDownload();
this._toolFileButtonDownload = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newToolFileButtonDownload = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this.icons.download
},
title: theme.getToolFileButtonDownloadTitle(),
shortcut: theme.getToolFileButtonDownloadShortcut(),
theme: theme.getToolFileButtonTheme(),
on: {
active: function () {
_this.onToolFileButtonDownloadActive();
}
}
});
};
FGraphicTester.prototype.onToolFileButtonDownloadActive = function () {
var graphic = this._graphic;
var tester = this._tester;
if (graphic && tester) {
var diagram = this.diagram;
var canvas = diagram.canvas;
if (canvas) {
var layers = canvas.layer.children;
var uuidToDataValueIds = new Map();
var rows = [];
for (var i = 0, imax = layers.length; i < imax; ++i) {
this.toCsvRows(layers[i].children, tester.mappings, null, uuidToDataValueIds, rows);
}
rows.sort(function (a, b) {
return a[0] - b[0];
});
UtilFileDownloader.download(this.getFilename(), UtilCsv.stringify(rows));
}
}
};
FGraphicTester.prototype.toCsvRows = function (shapes, mappings, dataShape, uuidToDataValueIds, result) {
for (var i = 0, imax = shapes.length; i < imax; ++i) {
var shape = shapes[i];
var uuid = (dataShape || shape).uuid;
var object = mappings.get(uuid);
var data = shape.data;
var dataValueIds = uuidToDataValueIds.get(uuid);
if (dataValueIds == null) {
dataValueIds = new Set();
uuidToDataValueIds.set(uuid, dataValueIds);
}
for (var j = 0, jmax = data.size(); j < jmax; ++j) {
var dataValue = data.get(j);
if (dataValue) {
var dataValueId = dataValue.id;
if (!dataValueIds.has(dataValueId)) {
dataValueIds.add(dataValueId);
var value = (object && object[dataValueId]) || "";
result.push([uuid, dataValueId, value]);
}
}
}
this.toCsvRows(shape.children, mappings, this.toDataShape(dataShape, shape), uuidToDataValueIds, result);
}
return result;
};
Object.defineProperty(FGraphicTester.prototype, "toolFileButtonSave", {
get: function () {
var result = this._toolFileButtonSave;
if (result == null) {
result = this.newToolFileButtonSave();
this._toolFileButtonSave = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newToolFileButtonSave = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this.icons.save
},
title: theme.getToolFileButtonSaveTitle(),
shortcut: theme.getToolFileButtonSaveShortcut(),
theme: theme.getToolFileButtonTheme(),
on: {
active: function (emitter) {
_this.onToolFileButtonSaveActive(emitter);
}
}
});
};
FGraphicTester.prototype.onToolFileButtonSaveActive = function (opener) {
var _this = this;
var graphic = this._graphic;
var tester = this._tester;
if (graphic && tester) {
tester.name = this.inputName.input.value;
var simple_1 = toGraphicTesterSimple(tester);
var dialogProcessing_1 = this.dialogProcessing;
dialogProcessing_1.open(opener);
this._controller.graphicTester.save(simple_1).then(function (id) {
simple_1.id = id;
_this.tester = toGraphicTesterSerialized(simple_1);
dialogProcessing_1.resolve();
}, function (reason) {
dialogProcessing_1.reject(reason);
});
}
};
Object.defineProperty(FGraphicTester.prototype, "toolFileButtonDelete", {
get: function () {
var result = this._toolFileButtonDelete;
if (result == null) {
result = this.newToolFileButtonDelete();
this._toolFileButtonDelete = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newToolFileButtonDelete = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this.icons.delete
},
title: theme.getToolFileButtonDeleteTitle(),
shortcut: theme.getToolFileButtonDeleteShortcut(),
theme: theme.getToolFileButtonTheme(),
on: {
active: function (emitter) {
_this.onToolFileButtonDeleteActive(emitter);
}
}
});
};
FGraphicTester.prototype.onToolFileButtonDeleteActive = function (opener) {
this.dialogDelete.open(opener);
};
Object.defineProperty(FGraphicTester.prototype, "inputName", {
get: function () {
var result = this._inputName;
if (result == null) {
result = this.newInputName();
this._inputName = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newInputName = function () {
var _this = this;
return new DInputTextAndLabel({
width: "100%",
label: {
text: {
value: this._theme.getInputNameLabel()
}
},
input: {
weight: 1,
on: {
change: function () {
_this.toDirty();
}
}
}
});
};
Object.defineProperty(FGraphicTester.prototype, "icons", {
get: function () {
return this._icons;
},
enumerable: false,
configurable: true
});
Object.defineProperty(FGraphicTester.prototype, "diagram", {
get: function () {
var result = this._diagram;
if (result == null) {
result = this.newDiagram();
this._diagram = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newDiagram = function () {
var _this = this;
var result = new DDiagram(this.toDiagramOptions(this._options));
result.on("down", function (e, diagram) {
_this.onDiagramDown(e, diagram);
});
result.on("keydown", function (e) {
_this.onDiagramKeydown(e);
});
return result;
};
FGraphicTester.prototype.toDiagramOptions = function (options) {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
var result = options.diagram || {};
(_a = result.controller) !== null && _a !== void 0 ? _a : (result.controller = this._controller.graphic);
(_b = result.width) !== null && _b !== void 0 ? _b : (result.width = "100%");
(_c = result.height) !== null && _c !== void 0 ? _c : (result.height = "100%");
(_d = result.mask) !== null && _d !== void 0 ? _d : (result.mask = true);
(_e = result.ambient) !== null && _e !== void 0 ? _e : (result.ambient = true);
var view = ((_f = result.view) !== null && _f !== void 0 ? _f : (result.view = {}));
var gesture = ((_g = view.gesture) !== null && _g !== void 0 ? _g : (view.gesture = {}));
(_h = gesture.modifier) !== null && _h !== void 0 ? _h : (gesture.modifier = UtilGestureModifier.ALT);
var checker = ((_j = gesture.checker) !== null && _j !== void 0 ? _j : (gesture.checker = {}));
(_k = checker.start) !== null && _k !== void 0 ? _k : (checker.start = function (e, modifier) {
return UtilGestureModifiers.match(e, modifier) || _this._isSelectSuspended;
});
(_l = checker.move) !== null && _l !== void 0 ? _l : (checker.move = function (e, modifier) {
var diagram = _this._diagram;
return (UtilGestureModifiers.match(e, modifier) || !!(diagram && diagram.state.isGesturing));
});
var zoom = ((_m = view.zoom) !== null && _m !== void 0 ? _m : (view.zoom = {}));
var dblclick = ((_o = zoom.dblclick) !== null && _o !== void 0 ? _o : (zoom.dblclick = {}));
(_p = dblclick.checker) !== null && _p !== void 0 ? _p : (dblclick.checker = function (e, modifier) {
return _this._isSelectSuspended;
});
return result;
};
Object.defineProperty(FGraphicTester.prototype, "selection", {
get: function () {
var _this = this;
var result = this._selection;
if (result == null) {
result = new EToolSelectSelection({
diagram: this.diagram,
modifier: {
editable: false
}
});
result.on("change", function () {
_this.onDiagramSelectionChange();
});
this._selection = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.toDataMappingRows = function (shapes, mappings, dataShape, dataValueIdToRow, result) {
for (var i = 0, imax = shapes.length; i < imax; ++i) {
var shape = shapes[i];
var uuid = (dataShape || shape).uuid;
var object = mappings.get(uuid);
var data = shape.data;
for (var j = 0, jmax = data.size(); j < jmax; ++j) {
var dataValue = data.get(j);
if (dataValue != null) {
var dataValueId = dataValue.id;
var value = (object && object[dataValueId]) || "";
var row = dataValueIdToRow.get(dataValueId);
if (row == null) {
row = {
uuids: [uuid],
id: dataValueId,
value: value
};
dataValueIdToRow.set(dataValueId, row);
result.push(row);
}
else {
row.uuids.push(uuid);
row.value = value;
}
}
}
this.toDataMappingRows(shape.children, mappings, this.toDataShape(dataShape, shape), dataValueIdToRow, result);
}
return result;
};
FGraphicTester.prototype.toDataShape = function (dataShape, shape) {
if (dataShape) {
return dataShape;
}
if (shape instanceof EShapeEmbedded) {
return shape;
}
return null;
};
FGraphicTester.prototype.onDiagramSelectionChange = function () {
var selection = this._selection;
var tester = this._tester;
var table = this.table;
if (selection && tester) {
var shapes = selection.get();
if (0 < shapes.length) {
var rows = [];
this.toDataMappingRows(shapes, tester.mappings, null, new Map(), rows);
table.data.clearAndAddAll(rows);
}
else {
table.data.clear();
}
}
else {
table.data.clear();
}
};
FGraphicTester.prototype.onDiagramDown = function (e, diagram) {
if (this._isSelectSuspended) {
return;
}
var originalEvent = e.data.originalEvent;
if (originalEvent.altKey) {
return;
}
var diagramCanvas = diagram.canvas;
if (diagramCanvas) {
var isAddMode = originalEvent.ctrlKey || originalEvent.shiftKey;
if (this._selectMode === 1 /* EToolSelectMode.SELECT */) {
this._selectMode = 0 /* EToolSelectMode.NONE */;
this.onDiagramSelectEnd(diagramCanvas, isAddMode);
return;
}
var global_1 = e.data.global;
var onDownPoint = this._onDiagramDownPoint;
onDownPoint.copyFrom(global_1);
var selection = this.selection;
var hitObject = this.hitTest(global_1, diagramCanvas);
if (hitObject instanceof EShapeBase) {
if (isAddMode) {
selection.toggle(hitObject);
}
else if (!selection.contains(hitObject)) {
var first = selection.first();
if (first == null) {
selection.set(hitObject.root);
}
else {
var selected = UtilShapeSearch.toSelected(hitObject);
if (selected != null) {
if (EShapeCapabilities.contains(selected, EShapeCapability.CHILDREN)) {
this._childSelectTime = Date.now();
this._childSelectChild = UtilShapeSearch.toOfParent(hitObject, selected);
}
}
else {
var sharedParent = UtilShapeSearch.toSharedParent(first, hitObject);
selection.set(UtilShapeSearch.toOfParent(hitObject, sharedParent));
}
}
}
this._selectMode = 2 /* EToolSelectMode.TRANSLATE */;
}
else {
// Select area
var area = this.selectArea;
diagramCanvas.toLocal(global_1, undefined, onDownPoint);
area.x = onDownPoint.x;
area.y = onDownPoint.y;
area.size.set(0, 0);
area.update();
diagramCanvas.addChild(area);
DApplications.update(diagram);
// Select mode
this._selectMode = 1 /* EToolSelectMode.SELECT */;
}
var oldInteractionManager = this._interactionManager;
if (oldInteractionManager) {
this._interactionManager = null;
oldInteractionManager.off(UtilPointerEvent.move, this._onDiagramMoveBound);
var onDiagramUpBound = this._onDiagramUpBound;
oldInteractionManager.off(UtilPointerEvent.up, onDiagramUpBound);
oldInteractionManager.off(UtilPointerEvent.upoutside, onDiagramUpBound);
oldInteractionManager.off(UtilPointerEvent.cancel, onDiagramUpBound);
}
var applicationLayer = DApplications.getLayer(diagram);
if (applicationLayer) {
var newInteractionManager = applicationLayer.renderer.plugins.interaction;
this._interactionManager = newInteractionManager;
newInteractionManager.on(UtilPointerEvent.move, this._onDiagramMoveBound);
var onDiagramUpBound = this._onDiagramUpBound;
newInteractionManager.on(UtilPointerEvent.up, onDiagramUpBound);
newInteractionManager.on(UtilPointerEvent.upoutside, onDiagramUpBound);
newInteractionManager.on(UtilPointerEvent.cancel, onDiagramUpBound);
}
}
};
Object.defineProperty(FGraphicTester.prototype, "selectArea", {
get: function () {
var result = this._selectArea;
if (result == null) {
result = new EToolSelectArea();
this._selectArea = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.onDiagramMove = function (e) {
var originalEvent = e.data.originalEvent;
if (originalEvent.altKey) {
return;
}
var diagram = this.diagram;
var diagramCanvas = diagram.canvas;
var diagramLayer = diagram.layer;
var mode = this._selectMode;
if (diagramCanvas && diagramLayer && mode !== 0 /* EToolSelectMode.NONE */) {
var global_2 = e.data.global;
var onDownPoint = this._onDiagramDownPoint;
if (mode === 1 /* EToolSelectMode.SELECT */) {
var area = this.selectArea;
var onMovePoint = diagramCanvas.toLocal(global_2, undefined, this._onDiagramMovePoint);
area.x = Math.min(onDownPoint.x, onMovePoint.x);
area.y = Math.min(onDownPoint.y, onMovePoint.y);
area.size.set(Math.max(onDownPoint.x, onMovePoint.x) - area.x, Math.max(onDownPoint.y, onMovePoint.y) - area.y);
area.update();
DApplications.update(diagram);
}
else {
var dx = global_2.x - onDownPoint.x;
var dy = global_2.y - onDownPoint.y;
if (1 <= Math.abs(dx) || 1 <= Math.abs(dy)) {
this._childSelectChild = null;
}
}
}
};
FGraphicTester.prototype.onDiagramUp = function (e) {
var diagram = this.diagram;
var diagramCanvas = diagram.canvas;
var diagramLayer = diagram.layer;
var mode = this._selectMode;
var interactionManager = this._interactionManager;
if (interactionManager) {
this._interactionManager = null;
interactionManager.off(UtilPointerEvent.move, this._onDiagramMoveBound);
var onDiagramUpBound = this._onDiagramUpBound;
interactionManager.off(UtilPointerEvent.up, onDiagramUpBound);
interactionManager.off(UtilPointerEvent.upoutside, onDiagramUpBound);
interactionManager.off(UtilPointerEvent.cancel, onDiagramUpBound);
}
if (diagramCanvas && diagramLayer && mode !== 0 /* EToolSelectMode.NONE */) {
this._selectMode = 0 /* EToolSelectMode.NONE */;
if (mode === 1 /* EToolSelectMode.SELECT */) {
var originalEvent = e.data.originalEvent;
var isAddMode = originalEvent.ctrlKey || originalEvent.shiftKey;
this.onDiagramSelectEnd(diagramCanvas, isAddMode);
}
else {
// Select the child
var selection = this.selection;
var childSelectChild = this._childSelectChild;
if (childSelectChild != null) {
this._childSelectChild = null;
var elapsedTime = Date.now() - this._childSelectTime;
if (elapsedTime < 333) {
selection.set(childSelectChild);
}
}
DApplications.update(diagram);
}
}
};
FGraphicTester.prototype.onDiagramSelectEnd = function (canvas, isAddMode) {
var area = this.selectArea;
var selection = this.selection;
if (0 < area.size.x && 0 < area.size.y) {
var areaRect = area.getBounds(false, this._selectAreaRect);
var foundShapes = [];
var layers = canvas.layer.children;
for (var i = layers.length - 1; 0 <= i; --i) {
UtilShapeAreaSelect.findShapes(layers[i], areaRect, foundShapes);
}
if (isAddMode) {
if (0 < foundShapes.length) {
selection.addAll(foundShapes);
}
}
else {
if (0 < foundShapes.length || !selection.isEmpty()) {
selection.clearAndAddAll(foundShapes);
}
}
}
else if (!isAddMode) {
if (!selection.isEmpty()) {
selection.clear();
}
}
canvas.removeChild(area);
DApplications.update(canvas);
};
FGraphicTester.prototype.hitTest = function (global, canvas) {
var layers = canvas.layer.children;
for (var i = layers.length - 1; 0 <= i; --i) {
var result = UtilHitTest.execute(global, layers[i]);
if (result != null) {
return result;
}
}
return null;
};
FGraphicTester.prototype.onDiagramKeydown = function (e) {
if (UtilKeyboardEvent.isSelectAllKey(e)) {
var canvas = this.diagram.canvas;
if (canvas != null) {
var selection = this.selection;
selection.clear();
var layers = canvas.layer.children;
for (var i = 0, imax = layers.length; i < imax; ++i) {
var children = layers[i].children;
if (0 < children.length) {
selection.addAll(children);
}
}
}
}
};
Object.defineProperty(FGraphicTester.prototype, "table", {
get: function () {
var result = this._table;
if (result == null) {
result = this.newTable();
this._table = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newTable = function () {
return new DTable({
weight: 1,
width: "padding",
columns: this.newColumnOptions(),
data: {
filter: this.tableFilter
}
});
};
Object.defineProperty(FGraphicTester.prototype, "tableFilter", {
get: function () {
var result = this._tableFilter;
if (result == null) {
result = this.newTableFilter();
this._tableFilter = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newTableFilter = function () {
return {
word: "",
test: function (row) {
var word = this.word;
return (word.length <= 0 ||
0 <= row.id.indexOf(word) ||
0 <= row.value[0].indexOf(word) ||
0 <= row.value[1].indexOf(word));
}
};
};
Object.defineProperty(FGraphicTester.prototype, "dialogSelectGraphic", {
get: function () {
var result = this._dialogSelectGraphic;
if (result == null) {
result = this.newDialogSelectGraphic();
this._dialogSelectGraphic = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newDialogSelectGraphic = function () {
var _this = this;
return this._category.get().then(function (category) {
if (_this._options.controller.toThumbnail != null) {
var result = _this.newDialogSelectGraphicImage();
result.categories = category.items;
return result;
}
else {
var result = _this.newDialogSelectGraphicNoImage();
result.categories = category.items;
return result;
}
});
};
FGraphicTester.prototype.newDialogSelectGraphicNoImage = function () {
var _this = this;
return new DDialogSelect({
controller: this._controller.graphic,
on: {
select: function (value) {
_this.onDialogSelectGraphicSelect(value);
}
}
});
};
FGraphicTester.prototype.newDialogSelectGraphicImage = function () {
var _this = this;
return newDialogSelectWithThumbnails(this._options.controller.graphic, this._controller.toThumbnail, function (value) {
_this.onDialogSelectGraphicSelect(value);
});
};
FGraphicTester.prototype.onDialogSelectGraphicSelect = function (value) {
var _this = this;
this._controller.graphic.get(value.id).then(function (serialized) {
_this.graphic = DDiagrams.toSerialized(serialized);
});
};
Object.defineProperty(FGraphicTester.prototype, "graphic", {
get: function () {
return this._graphic;
},
set: function (graphic) {
this._graphic = graphic;
var diagram = this.diagram;
if (graphic != null) {
diagram.set(graphic);
}
else {
diagram.set(null);
}
this._appliedValues.clear();
this.tester = undefined;
},
enumerable: false,
configurable: true
});
Object.defineProperty(FGraphicTester.prototype, "dialogSelectMapping", {
get: function () {
var result = this._dialogSelectTester;
if (result == null) {
result = this.newDialogSelectMapping();
this._dialogSelectTester = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newDialogSelectMapping = function () {
var _this = this;
var controller = this._controller;
return new DDialogSelect({
controller: {
search: function (word) {
var graphic = _this._graphic;
if (graphic) {
return controller.graphicTester.search(graphic.name, word);
}
return Promise.resolve([]);
}
},
on: {
select: function (selected) {
controller.graphicTester.get(selected.id).then(function (serialized) {
var graphic = _this._graphic;
if (graphic) {
_this.tester = toGraphicTesterSerialized(serialized);
}
});
}
}
});
};
Object.defineProperty(FGraphicTester.prototype, "dialogDiscard", {
get: function () {
var result = this._dialogDiscard;
if (result == null) {
result = new DDialogConfirmDiscard();
this._dialogDiscard = result;
}
return result;
},
enumerable: false,
configurable: true
});
Object.defineProperty(FGraphicTester.prototype, "dialogCreate", {
get: function () {
var result = this._dialogCreate;
if (result == null) {
result = this.newDialogCreate();
this._dialogCreate = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.newDialogCreate = function () {
var _this = this;
var result = new DDialogInputText({
on: {
open: function () {
result.value = _this._theme.newDialogCreateTextValue();
},
ok: function (value) {
var graphic = _this._graphic;
if (graphic) {
_this.tester = newGraphicTester(value, graphic);
}
}
}
});
return result;
};
Object.defineProperty(FGraphicTester.prototype, "tester", {
get: function () {
return this._tester;
},
set: function (tester) {
this._isChanged = false;
var inputName = this.inputName.input;
this._tester = tester;
inputName.value = tester ? tester.name : "";
this.onDiagramSelectionChange();
this.onChange();
this.toMappingsDirty();
},
enumerable: false,
configurable: true
});
Object.defineProperty(FGraphicTester.prototype, "isNew", {
get: function () {
var tester = this._tester;
return tester != null && tester.id == null;
},
enumerable: false,
configurable: true
});
Object.defineProperty(FGraphicTester.prototype, "isChanged", {
get: function () {
return this._isChanged || this.isNew;
},
enumerable: false,
configurable: true
});
FGraphicTester.prototype.onChange = function () {
var hasNoGraphc = this._graphic == null;
var hasNoMapping = this._tester == null;
var hasNoChanges = !this.isChanged;
var isNotEditable = !this._isEditable;
this.table.state.isDisabled = hasNoMapping;
this.tableFilterInput.state.isDisabled = hasNoMapping;
this.inputName.state.isDisabled = hasNoMapping || isNotEditable;
this.toolFileButtonCreate.state.isDisabled = hasNoGraphc || isNotEditable;
this.toolFileButtonOpen.state.isDisabled = hasNoGraphc;
this.toolFileButtonUpload.state.isDisabled = hasNoMapping || isNotEditable;
this.toolFileButtonDownload.state.isDisabled = hasNoMapping;
this.toolFileButtonSave.state.isDisabled = hasNoMapping || hasNoChanges || isNotEditable;
this.toolFileButtonDelete.state.isDisabled = hasNoMapping || isNotEditable;
};
FGraphicTester.prototype.evaluate = function (expression) {
return Function("try { return (".concat(expression, "); } catch( e ) { return 0; }"))();
};
FGraphicTester.prototype.onMappingsChange = function () {
var tester = this._tester;
if (tester) {
var mappings = tester.mappings;
var diagram = this.diagram;
var canvas = diagram.canvas;
if (canvas) {
var isChanged = false;
var layers = canvas.layer.children;
for (var i = 0, imax = layers.length; i < imax; ++i) {
if (this.applyMappings(layers[i].children, mappings, null)) {
isChanged = true;
}
}
if (isChanged) {
DApplications.update(diagram);
}
}
}
};
FGraphicTester.prototype.applyMappings = function (shapes, mappings, dataShape) {
var isChanged = false;
for (var i = 0, imax = shapes.length; i < imax; ++i) {
var shape = shapes[i];
// Apply the mappings
var uuid = (dataShape || shape).uuid;
var mapping = mappings.get(uuid);
if (mapping) {
var data = shape.data;
for (var j = 0, jmax = data.size(); j < jmax; ++j) {
var dataValue = data.get(j);
if (dataValue != null && this.applyMapping(dataValue, mapping[dataValue.id])) {
isChanged = true;
}
}
}
// Children
if (this.applyMappings(shape.children, mappings, this.toDataShape(dataShape, shape))) {
isChanged = true;
}
}
// Done
return isChanged;
};
FGraphicTester.prototype.applyMapping = function (dataValue, expression) {
if (expression != null) {
var expressionMap = this._expressionMap;
if (expressionMap.has(expression)) {
return this.applyMappingIfChanged(dataValue, expressionMap.get(expression));
}
else if (0 < expression.length) {
try {
var evaluated = this.evaluate(expression);
expressionMap.set(expression, evaluated);
return this.applyMappingIfChanged(dataValue, evaluated);
}
catch (_a) {
// DO NOTHING
}
}
}
return false;
};
FGraphicTester.prototype.applyMappingIfChanged = function (dataValue, value) {
var appliedValues = this._appliedValues;
if (appliedValues.has(dataValue)) {
var appliedValue = appliedValues.get(dataValue);
if (appliedValue !== value) {
appliedValues.set(dataValue, value);
dataValue.value = value;
return true;
}
}
else {
appliedValues.set(dataValue, value);
dataValue.value = value;
return true;
}
return false;
};
FGraphicTester.prototype.toDirty = function () {
if (!this._isChanged) {
this._isChanged = true;
this.onChange();
}
};
FGraphicTester.prototype.toMappingsDirty = function () {
this._isMappingsDirty = true;
};
FGraphicTester.prototype.getFilename = function () {
var name = this.inputName.input.value.toLowerCase();
var date = UtilDate.format(Date.now());
return "graphic-tester-".concat(name, "-").concat(date, ".csv");
};
FGraphicTester.prototype.newColumnOptions = function () {
var _this = this;
var isEditable = this._isEditable;
var theme = this._theme;
return [
{
type: "TEXT",
label: theme.getTableColumnDataLabel(),
editable: false,
sortable: true,
getter: function (row) {
return row.id;
},
setter: function (row, index, value) {
row.id = value;
_this.toDirty();
}
},
{
type: "TEXT",
label: theme.getTableColumnValueLabel(),
align: "LEFT",
editable: isEditable,
sortable: true,
formatter: function (value) {
return value || "";
},
getter: function (row) {
return row.value;
},
setter: function (row, index, value) {
var tester = _this._tester;
if (tester) {
var uuids = row.uuids;
var mappings = tester.mappings;
var id = row.id;
if (0 < value.length) {
for (var i = 0, imax = uuids.length; i < imax; ++i) {
var uuid = uuids[i];
var object = mappings.get(uuid);
if (object == null) {
object = {};
mappings.set(uuid, object);
}
object[id] = value;
}
}
else {
for (var i = 0, imax = uuids.length; i < imax; ++i) {
var uuid = uuids[i];
var object = mappings.get(uuid);
if (object != null) {
delete object[id];
}
}
}
}
row.value = value;
_this.toDirty();
_this.toMappingsDirty();
}
}
];
};
FGraphicTester.prototype.toTheme = function (options) {
var theme = options === null || options === void 0 ? void 0 : options.theme;
if (theme) {
if (isString(theme)) {
return DThemes.getInstance().get(theme);
}
return theme;
}
return this.getThemeDefault();
};
FGraphicTester.prototype.getThemeDefault = function () {
return DThemes.getInstance().get(this.getType());
};
FGraphicTester.prototype.getType = function () {
return "FGraphicTester";
};
return FGraphicTester;
}());
export { FGraphicTester };
//# sourceMappingURL=f-graphic-tester.js.map