@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
362 lines • 12.5 kB
JavaScript
import { DApplication, DButton, DDiagram, DDiagrams, DDialogSelect, DLayoutHorizontal, isString, DThemes } from "@wcardinal/wcardinal-ui";
import { newDialogSelectWithThumbnails } from "./editor/e-dialog-select-with-thumbnails";
import { UtilCanvasCategory } from "./util/util-canvas-category";
var FGraphicViewer = /** @class */ (function () {
function FGraphicViewer(options) {
var _a, _b;
// Options
this._options = options;
var theme = this.toTheme(options);
this._theme = theme;
var margin = (_a = options.margin) !== null && _a !== void 0 ? _a : theme.getMargin();
this._margin = margin;
var icons = theme.getIconBuilder().build();
this._icons = icons;
this._category = new UtilCanvasCategory((_b = options.canvas) === null || _b === void 0 ? void 0 : _b.category);
// Application
var application = new DApplication(options.application);
this._application = application;
var stage = application.stage;
// Diagram
var diagram = this.diagram;
stage.addChild(diagram);
// Header
var header = this.header;
if (header != null) {
stage.addChild(header);
}
// View operations
var button = options.button;
if (button == null || button.view !== false) {
stage.addChild(this.layoutViewButton);
}
}
Object.defineProperty(FGraphicViewer.prototype, "application", {
get: function () {
return this._application;
},
enumerable: false,
configurable: true
});
Object.defineProperty(FGraphicViewer.prototype, "diagram", {
get: function () {
var result = this._diagram;
if (result == null) {
result = this.newDiagram();
this._diagram = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicViewer.prototype.newDiagram = function () {
var controller = this._options.controller;
return new DDiagram({
x: 0,
y: 0,
width: "100%",
height: "100%",
outline: {
color: null
},
controller: controller.graphic,
data: {
mapper: this.newDataMapper(),
remote: {
controller: controller.remote
}
}
});
};
Object.defineProperty(FGraphicViewer.prototype, "header", {
get: function () {
var result = this._header;
if (result === undefined) {
result = this.newHeader();
this._header = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicViewer.prototype.newHeader = function () {
var header = this._options.header;
if (header != null) {
var result = header(this.newToolFileButtons());
if (result != null) {
var margin_1 = this._margin;
result.x = margin_1;
result.y = margin_1;
result.setWidth(function (p) { return p - 2 * margin_1; });
return result;
}
}
return null;
};
FGraphicViewer.prototype.newToolFileButtons = function () {
var result = [];
var button = this._options.button;
if (button == null || button.open !== false) {
result.push(this.toolFileButtonGraphicOpen);
}
return result;
};
Object.defineProperty(FGraphicViewer.prototype, "toolFileButtonGraphicOpen", {
get: function () {
var result = this._toolFileButtonGraphicOpen;
if (result == null) {
result = this.newToolFileButtonGraphicOpen();
this._toolFileButtonGraphicOpen = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicViewer.prototype.newToolFileButtonGraphicOpen = function () {
var _this = this;
var theme = this._theme;
return new DButton({
image: {
source: this._icons.open
},
title: theme.getToolFileButtonGraphicOpenTitle(),
shortcut: theme.getToolFileButtonGraphicOpenShortcut(),
theme: theme.getToolFileButtonGraphicTheme(),
on: {
active: function (emitter) {
_this.onToolFileButtonGraphicOpenActive(emitter);
}
}
});
};
FGraphicViewer.prototype.onToolFileButtonGraphicOpenActive = function (opener) {
this.dialogSelect.then(function (dialogSelect) {
dialogSelect.open(opener);
});
};
Object.defineProperty(FGraphicViewer.prototype, "layoutViewButton", {
get: function () {
var result = this._layoutViewButton;
if (result == null) {
result = this.newLayoutViewButton();
this._layoutViewButton = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicViewer.prototype.newLayoutViewButton = function () {
var margin = this._margin;
var position = function (p, s) { return p - s - margin; };
return new DLayoutHorizontal({
x: position,
y: position,
width: "auto",
height: "auto",
margin: 0,
children: this.newViewButtons()
});
};
FGraphicViewer.prototype.newViewButtons = function () {
return [
this.viewButtonZoomOut,
this.viewButtonZoomIn,
this.viewButtonReset,
this.viewButtonFit
];
};
Object.defineProperty(FGraphicViewer.prototype, "viewButtonZoomOut", {
get: function () {
var result = this._viewButtonZoomOut;
if (result == null) {
result = this.newViewButtonZoomOut();
this._viewButtonZoomOut = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicViewer.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(FGraphicViewer.prototype, "viewButtonZoomIn", {
get: function () {
var result = this._viewButtonZoomIn;
if (result == null) {
result = this.newViewButtonZoomIn();
this._viewButtonZoomIn = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicViewer.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(FGraphicViewer.prototype, "viewButtonReset", {
get: function () {
var result = this._viewButtonReset;
if (result == null) {
result = this.newViewButtonReset();
this._viewButtonReset = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicViewer.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(FGraphicViewer.prototype, "viewButtonFit", {
get: function () {
var result = this._viewButtonFit;
if (result == null) {
result = this.newViewButtonFit();
this._viewButtonFit = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicViewer.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(FGraphicViewer.prototype, "dialogSelect", {
get: function () {
var result = this._dialogSelect;
if (result == null) {
result = this.newDialogSelect();
this._dialogSelect = result;
}
return result;
},
enumerable: false,
configurable: true
});
FGraphicViewer.prototype.newDialogSelect = function () {
var _this = this;
return this._category.get().then(function (category) {
if (_this._options.controller.toThumbnail != null) {
var result = _this.newDialogSelectImage();
result.categories = category.items;
return result;
}
else {
var result = _this.newDialogSelectNoImage();
result.categories = category.items;
return result;
}
});
};
FGraphicViewer.prototype.newDialogSelectNoImage = function () {
var _this = this;
return new DDialogSelect({
controller: this._options.controller.graphic,
on: {
select: function (value) {
_this.onDialogSelectSelect(value);
}
}
});
};
FGraphicViewer.prototype.newDialogSelectImage = function () {
var _this = this;
var controller = this._options.controller;
return newDialogSelectWithThumbnails(controller.graphic, controller.toThumbnail, function (value) {
_this.onDialogSelectSelect(value);
});
};
FGraphicViewer.prototype.onDialogSelectSelect = function (value) {
var _this = this;
this._options.controller.graphic.get(value.id).then(function (serialized) {
_this.diagram.set(DDiagrams.toSerialized(serialized));
});
};
FGraphicViewer.prototype.newDataMapper = function () {
return undefined;
};
FGraphicViewer.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();
};
FGraphicViewer.prototype.getThemeDefault = function () {
return DThemes.getInstance().get(this.getType());
};
FGraphicViewer.prototype.getType = function () {
return "FGraphicViewer";
};
return FGraphicViewer;
}());
export { FGraphicViewer };
//# sourceMappingURL=f-graphic-viewer.js.map