devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
1,062 lines (1,059 loc) • 104 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/diagram/ui.diagram.js)
* Version: 26.1.3
* Build date: Wed Jun 10 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _position = _interopRequireDefault(require("../../../common/core/animation/position"));
var _events_engine = _interopRequireDefault(require("../../../common/core/events/core/events_engine"));
var _utils = require("../../../common/core/events/utils");
var _message = _interopRequireDefault(require("../../../common/core/localization/message"));
var _number = _interopRequireDefault(require("../../../common/core/localization/number"));
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _element = require("../../../core/element");
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _data = require("../../../core/utils/data");
var _extend = require("../../../core/utils/extend");
var _size = require("../../../core/utils/size");
var _type = require("../../../core/utils/type");
var _window = require("../../../core/utils/window");
var _widget = _interopRequireDefault(require("../../core/widget/widget"));
var _diagram = _interopRequireDefault(require("../../ui/diagram/diagram.commands_manager"));
var _diagram2 = _interopRequireDefault(require("../../ui/diagram/diagram.edges_option"));
var _diagram3 = require("../../ui/diagram/diagram.importer");
var _diagram4 = _interopRequireDefault(require("../../ui/diagram/diagram.nodes_option"));
var _diagram5 = _interopRequireDefault(require("../../ui/diagram/diagram.options_update"));
var _diagram6 = _interopRequireDefault(require("../../ui/diagram/diagram.toolbox_manager"));
var _uiDiagram = _interopRequireDefault(require("../../ui/diagram/ui.diagram.context_menu"));
var _uiDiagram2 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.context_toolbox"));
var _uiDiagram3 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.dialog_manager"));
var _uiDiagram4 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.dialogs"));
var _uiDiagram5 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.history_toolbar"));
var _uiDiagram6 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.main_toolbar"));
var _uiDiagram7 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.properties_panel"));
var _uiDiagram8 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.properties_toolbar"));
var _uiDiagram9 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.scroll_view"));
var _uiDiagram0 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.toolbar"));
var _uiDiagram1 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.toolbox"));
var _uiDiagram10 = _interopRequireDefault(require("../../ui/diagram/ui.diagram.view_toolbar"));
var _load_indicator = _interopRequireDefault(require("../../ui/load_indicator"));
var _overlay = _interopRequireDefault(require("../../ui/overlay/overlay"));
var zIndexPool = _interopRequireWildcard(require("../../ui/overlay/z_index"));
function _interopRequireWildcard(e, t) {
if ("function" == typeof WeakMap) {
var r = new WeakMap,
n = new WeakMap
}
return (_interopRequireWildcard = function(e, t) {
if (!t && e && e.__esModule) {
return e
}
var o, i, f = {
__proto__: null,
default: e
};
if (null === e || "object" != typeof e && "function" != typeof e) {
return f
}
if (o = t ? n : r) {
if (o.has(e)) {
return o.get(e)
}
o.set(e, f)
}
for (const t in e) {
"default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t])
}
return f
})(e, t)
}
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const DIAGRAM_CLASS = "dx-diagram";
const DIAGRAM_FULLSCREEN_CLASS = "dx-diagram-fullscreen";
const DIAGRAM_TOOLBAR_WRAPPER_CLASS = "dx-diagram-toolbar-wrapper";
const DIAGRAM_CONTENT_WRAPPER_CLASS = "dx-diagram-content-wrapper";
const DIAGRAM_CONTENT_CLASS = "dx-diagram-content";
const DIAGRAM_SCROLL_VIEW_CLASS = "dx-diagram-scroll-view";
const DIAGRAM_FLOATING_TOOLBAR_CONTAINER_CLASS = "dx-diagram-floating-toolbar-container";
const DIAGRAM_PROPERTIES_PANEL_TOOLBAR_CONTAINER_CLASS = "dx-diagram-properties-panel-toolbar-container";
const DIAGRAM_LOADING_INDICATOR_CLASS = "dx-diagram-loading-indicator";
const DIAGRAM_FLOATING_PANEL_OFFSET = 12;
const DIAGRAM_PROPERTIES_PANEL_NS_OFFSET = 16;
const DIAGRAM_DEFAULT_UNIT = "in";
const DIAGRAM_DEFAULT_ZOOMLEVEL = 1;
const DIAGRAM_DEFAULT_AUTOZOOM_MODE = "disabled";
const DIAGRAM_DEFAULT_PAGE_ORIENTATION = "portrait";
const DIAGRAM_DEFAULT_PAGE_COLOR = "#ffffff";
const DIAGRAM_MAX_MOBILE_WINDOW_WIDTH = 576;
const DIAGRAM_TOOLBOX_SHAPE_SPACING = 12;
const DIAGRAM_TOOLBOX_SHAPES_PER_ROW = 3;
const DIAGRAM_CONTEXT_TOOLBOX_SHAPE_SPACING = 12;
const DIAGRAM_CONTEXT_TOOLBOX_SHAPES_PER_ROW = 4;
const DIAGRAM_CONTEXT_TOOLBOX_DEFAULT_WIDTH = 152;
const DIAGRAM_NAMESPACE = "dxDiagramEvent";
const FULLSCREEN_CHANGE_EVENT_NAME = (0, _utils.addNamespace)("fullscreenchange", "dxDiagramEvent");
const IE_FULLSCREEN_CHANGE_EVENT_NAME = (0, _utils.addNamespace)("msfullscreenchange", "dxDiagramEvent");
const WEBKIT_FULLSCREEN_CHANGE_EVENT_NAME = (0, _utils.addNamespace)("webkitfullscreenchange", "dxDiagramEvent");
const MOZ_FULLSCREEN_CHANGE_EVENT_NAME = (0, _utils.addNamespace)("mozfullscreenchange", "dxDiagramEvent");
class Diagram extends _widget.default {
constructor() {
super(...arguments);
this._loadingIndicator = null
}
_init() {
this._updateDiagramLockCount = 0;
this.toggleFullscreenLock = 0;
this._toolbars = [];
super._init();
this._initDiagram();
this._createCustomCommand()
}
_initMarkup() {
super._initMarkup();
this._toolbars = [];
delete this._isMobileScreenSize;
const isServerSide = !(0, _window.hasWindow)();
this.$element().addClass("dx-diagram");
delete this._mainToolbar;
const {
mainToolbar: mainToolbar
} = this.option();
if (null !== mainToolbar && void 0 !== mainToolbar && mainToolbar.visible) {
this._renderMainToolbar()
}
const $contentWrapper = (0, _renderer.default)("<div>").addClass("dx-diagram-content-wrapper").appendTo(this.$element());
delete this._historyToolbar;
delete this._historyToolbarResizeCallback;
if (this._isHistoryToolbarVisible()) {
this._renderHistoryToolbar($contentWrapper)
}
delete this._propertiesToolbar;
delete this._propertiesToolbarResizeCallback;
if (this._isPropertiesPanelEnabled()) {
this._renderPropertiesToolbar($contentWrapper)
}
delete this._viewToolbar;
delete this._viewToolbarResizeCallback;
if (this.option("viewToolbar.visible")) {
this._renderViewToolbar($contentWrapper)
}
delete this._toolbox;
delete this._toolboxResizeCallback;
if (this._isToolboxEnabled()) {
this._renderToolbox($contentWrapper)
}
delete this._propertiesPanel;
delete this._propertiesPanelResizeCallback;
if (this._isPropertiesPanelEnabled()) {
this._renderPropertiesPanel($contentWrapper)
}
this._$content = (0, _renderer.default)("<div>").addClass("dx-diagram-content").appendTo($contentWrapper);
delete this._contextMenu;
this._diagramInstance.settings.contextMenuEnabled = this.option("contextMenu.enabled");
if (this._diagramInstance.settings.contextMenuEnabled) {
this._renderContextMenu($contentWrapper)
}
delete this._contextToolbox;
if (this.option("contextToolbox.enabled")) {
this._renderContextToolbox($contentWrapper)
}
this._renderDialog($contentWrapper);
if (!isServerSide) {
const {
useNativeScrolling: useNativeScrolling
} = this.option();
const $scrollViewWrapper = (0, _renderer.default)("<div>").addClass("dx-diagram-scroll-view").appendTo(this._$content);
this._createComponent($scrollViewWrapper, _uiDiagram9.default, {
useNativeScrolling: useNativeScrolling,
onCreateDiagram: e => {
this._diagramInstance.createDocument(e.$parent[0], e.scrollView, $contentWrapper[0])
}
})
}
this._setCustomCommandChecked(_diagram.default.SHOW_PROPERTIES_PANEL_COMMAND_NAME, this._isPropertiesPanelVisible());
this._setCustomCommandChecked(_diagram.default.SHOW_TOOLBOX_COMMAND_NAME, this._isToolboxVisible());
this._createOptionsUpdateBar()
}
_dimensionChanged() {
this._isMobileScreenSize = void 0;
this._processDiagramResize()
}
_visibilityChanged(visible) {
if (visible) {
this._bindDiagramData();
this.repaint()
}
}
_processDiagramResize() {
this._diagramInstance.onDimensionChanged();
if (this._historyToolbarResizeCallback) {
this._historyToolbarResizeCallback.call(this)
}
if (this._propertiesToolbarResizeCallback) {
this._propertiesToolbarResizeCallback.call(this)
}
if (this._propertiesPanelResizeCallback) {
this._propertiesPanelResizeCallback.call(this)
}
if (this._viewToolbarResizeCallback) {
this._viewToolbarResizeCallback.call(this)
}
if (this._toolboxResizeCallback) {
this._toolboxResizeCallback.call(this)
}
}
isMobileScreenSize() {
if (void 0 === this._isMobileScreenSize) {
this._isMobileScreenSize = (0, _window.hasWindow)() && (0, _size.getOuterWidth)(this.$element()) < 576
}
return this._isMobileScreenSize
}
_captureFocus() {
if (this._diagramInstance) {
this._diagramInstance.captureFocus()
}
}
_captureFocusOnTimeout() {
this._captureFocusTimeout = setTimeout(() => {
this._captureFocus();
delete this._captureFocusTimeout
}, 100)
}
_killCaptureFocusTimeout() {
if (this._captureFocusTimeout) {
clearTimeout(this._captureFocusTimeout);
delete this._captureFocusTimeout
}
}
notifyBarCommandExecuted() {
this._captureFocusOnTimeout()
}
_registerToolbar(component) {
var _this$_toolbars;
this._registerBar(component);
null === (_this$_toolbars = this._toolbars) || void 0 === _this$_toolbars || _this$_toolbars.push(component)
}
_registerBar(component) {
var _component$bar;
null === (_component$bar = component.bar) || void 0 === _component$bar || _component$bar.onChanged.add(this);
this._diagramInstance.registerBar(component.bar)
}
_getExcludeCommands() {
const excludeCommands = [];
if (!this._isToolboxEnabled()) {
excludeCommands.push(_diagram.default.SHOW_TOOLBOX_COMMAND_NAME)
}
if (!this._isPropertiesPanelEnabled()) {
excludeCommands.push(_diagram.default.SHOW_PROPERTIES_PANEL_COMMAND_NAME)
}
return excludeCommands
}
_getToolbarBaseOptions() {
return {
onContentReady: _ref => {
let {
component: component
} = _ref;
this._registerToolbar(component)
},
onSubMenuVisibilityChanging: _ref2 => {
let {
component: component
} = _ref2;
return this._diagramInstance.updateBarItemsState(component.bar)
},
onPointerUp: this._onPanelPointerUp.bind(this),
export: this.option("export"),
excludeCommands: this._getExcludeCommands(),
onInternalCommand: this._onInternalCommand.bind(this),
onCustomCommand: this._onCustomCommand.bind(this),
isMobileView: this.isMobileScreenSize()
}
}
_onInternalCommand(e) {
switch (e.command) {
case _diagram.default.SHOW_TOOLBOX_COMMAND_NAME:
if (this._toolbox) {
this._toolbox.toggle()
}
break;
case _diagram.default.SHOW_PROPERTIES_PANEL_COMMAND_NAME:
if (this._propertiesPanel) {
this._propertiesPanel.toggle()
}
}
}
_onCustomCommand(e) {
var _this$_customCommandA;
null === (_this$_customCommandA = this._customCommandAction) || void 0 === _this$_customCommandA || _this$_customCommandA.call(this, {
name: e.name
})
}
_renderMainToolbar() {
const $toolbarWrapper = (0, _renderer.default)("<div>").addClass("dx-diagram-toolbar-wrapper").appendTo(this.$element());
this._mainToolbar = this._createComponent($toolbarWrapper, _uiDiagram6.default, (0, _extend.extend)(this._getToolbarBaseOptions(), {
commands: this.option("mainToolbar.commands"),
skipAdjustSize: true
}))
}
_isHistoryToolbarVisible() {
return this.option("historyToolbar.visible") && !this.isReadOnlyMode()
}
_renderHistoryToolbar($parent) {
const $container = (0, _renderer.default)("<div>").addClass("dx-diagram-floating-toolbar-container").appendTo($parent);
this._historyToolbar = this._createComponent($container, _uiDiagram5.default, (0, _extend.extend)(this._getToolbarBaseOptions(), {
commands: this.option("historyToolbar.commands"),
locateInMenu: "never"
}));
this._updateHistoryToolbarPosition();
this._historyToolbarResizeCallback = () => {
var _this$_historyToolbar;
null === (_this$_historyToolbar = this._historyToolbar) || void 0 === _this$_historyToolbar || _this$_historyToolbar.option("isMobileView", this.isMobileScreenSize())
}
}
_updateHistoryToolbarPosition() {
var _this$_historyToolbar2, _this$_historyToolbar3;
if (!(0, _window.hasWindow)()) {
return
}
_position.default.setup(null === (_this$_historyToolbar2 = this._historyToolbar) || void 0 === _this$_historyToolbar2 ? void 0 : _this$_historyToolbar2.$element(), {
my: "left top",
at: "left top",
of: null === (_this$_historyToolbar3 = this._historyToolbar) || void 0 === _this$_historyToolbar3 ? void 0 : _this$_historyToolbar3.$element().parent(),
offset: "12 12"
})
}
_isToolboxEnabled() {
const {
toolbox: toolbox
} = this.option();
return "disabled" !== (null === toolbox || void 0 === toolbox ? void 0 : toolbox.visibility) && !this.isReadOnlyMode()
}
_isToolboxVisible() {
const {
toolbox: toolbox
} = this.option();
return "visible" === (null === toolbox || void 0 === toolbox ? void 0 : toolbox.visibility) || "auto" === (null === toolbox || void 0 === toolbox ? void 0 : toolbox.visibility) && !this.isMobileScreenSize()
}
_renderToolbox($parent) {
var _this$_toolbox$_popup;
const isServerSide = !(0, _window.hasWindow)();
const $toolBox = (0, _renderer.default)("<div>").appendTo($parent);
const bounds = this._getToolboxBounds($parent, isServerSide);
this._toolbox = this._createComponent($toolBox, _uiDiagram1.default, {
isMobileView: this.isMobileScreenSize(),
isVisible: this._isToolboxVisible(),
container: this.$element(),
height: bounds.height,
offsetParent: $parent,
offsetX: bounds.offsetX,
offsetY: bounds.offsetY,
showSearch: this.option("toolbox.showSearch"),
toolboxGroups: this._getToolboxGroups(),
toolboxWidth: this.option("toolbox.width"),
onShapeCategoryRendered: e => {
if (isServerSide) {
return
}
this._diagramInstance.createToolbox(e.$element[0], "texts" === e.displayMode, e.shapes || e.category, {
shapeIconSpacing: 12,
shapeIconCountInRow: this.option("toolbox.shapeIconsPerRow"),
shapeIconAttributes: {
"data-toggle": e.dataToggle
}
})
},
onFilterChanged: e => {
if (isServerSide) {
return
}
this._diagramInstance.applyToolboxFilter(e.text, e.filteringToolboxes)
},
onVisibilityChanging: e => {
if (isServerSide) {
return
}
this._setCustomCommandChecked(_diagram.default.SHOW_TOOLBOX_COMMAND_NAME, e.visible);
if (this._propertiesPanel) {
if (e.visible && this.isMobileScreenSize()) {
this._propertiesPanel.hide()
}
}
if (this._historyToolbar) {
if (e.visible && this.isMobileScreenSize()) {
this._historyToolbarZIndex = zIndexPool.create(_overlay.default.baseZIndex());
this._historyToolbar.$element().css("zIndex", this._historyToolbarZIndex);
this._historyToolbar.$element().css("boxShadow", "none")
}
}
if (this._viewToolbar) {
this._viewToolbar.$element().css("opacity", e.visible && this.isMobileScreenSize() ? "0" : "1");
this._viewToolbar.$element().css("pointerEvents", e.visible && this.isMobileScreenSize() ? "none" : "")
}
},
onVisibilityChanged: e => {
if (!e.visible && !this._textInputStarted) {
this._captureFocus()
}
if (!isServerSide) {
if (this._historyToolbar) {
if (!e.visible && this.isMobileScreenSize() && this._historyToolbarZIndex) {
zIndexPool.remove(this._historyToolbarZIndex);
this._historyToolbar.$element().css("zIndex", "");
this._historyToolbar.$element().css("boxShadow", "");
this._historyToolbarZIndex = void 0
}
}
}
},
onPointerUp: this._onPanelPointerUp.bind(this)
});
null === (_this$_toolbox$_popup = this._toolbox._popup) || void 0 === _this$_toolbox$_popup || _this$_toolbox$_popup.option("propagateOutsideClick", !this.option("fullScreen"));
this._toolboxResizeCallback = () => {
var _this$_toolbox, _this$_toolbox2, _this$_toolbox4;
const toolboxBounds = this._getToolboxBounds($parent, isServerSide);
null === (_this$_toolbox = this._toolbox) || void 0 === _this$_toolbox || _this$_toolbox.option("height", toolboxBounds.height);
const prevIsMobileView = null === (_this$_toolbox2 = this._toolbox) || void 0 === _this$_toolbox2 ? void 0 : _this$_toolbox2.option("isMobileView");
if (prevIsMobileView !== this.isMobileScreenSize()) {
var _this$_toolbox3;
null === (_this$_toolbox3 = this._toolbox) || void 0 === _this$_toolbox3 || _this$_toolbox3.option({
isMobileView: this.isMobileScreenSize(),
isVisible: this._isToolboxVisible()
});
this._setCustomCommandChecked(_diagram.default.SHOW_TOOLBOX_COMMAND_NAME, this._isToolboxVisible())
}
null === (_this$_toolbox4 = this._toolbox) || void 0 === _this$_toolbox4 || _this$_toolbox4.updateMaxHeight()
}
}
_getToolboxBounds($parent, isServerSide) {
const result = {
offsetX: 12,
offsetY: 12,
height: !isServerSide ? (0, _size.getHeight)($parent) - 24 : 0
};
if (this._historyToolbar && !isServerSide) {
result.offsetY += (0, _size.getOuterHeight)(this._historyToolbar.$element()) + 12;
result.height -= (0, _size.getOuterHeight)(this._historyToolbar.$element()) + 12
}
if (this._viewToolbar && !isServerSide) {
result.height -= (0, _size.getOuterHeight)(this._viewToolbar.$element()) + this._getViewToolbarYOffset(isServerSide)
}
return result
}
_renderViewToolbar($parent) {
const isServerSide = !(0, _window.hasWindow)();
const $container = (0, _renderer.default)("<div>").addClass("dx-diagram-floating-toolbar-container").appendTo($parent);
this._viewToolbar = this._createComponent($container, _uiDiagram10.default, (0, _extend.extend)(this._getToolbarBaseOptions(), {
commands: this.option("viewToolbar.commands"),
locateInMenu: "never"
}));
this._updateViewToolbarPosition($container, $parent, isServerSide);
this._viewToolbarResizeCallback = () => {
this._updateViewToolbarPosition($container, $parent, isServerSide)
}
}
_getViewToolbarYOffset(isServerSide) {
if (isServerSide) {
return
}
let result = 12;
if (this._viewToolbar && this._propertiesToolbar) {
result += ((0, _size.getOuterHeight)(this._propertiesToolbar.$element()) - (0, _size.getOuterHeight)(this._viewToolbar.$element())) / 2
}
return result
}
_updateViewToolbarPosition($container, $parent, isServerSide) {
if (isServerSide) {
return
}
_position.default.setup($container, {
my: "left bottom",
at: "left bottom",
of: $parent,
offset: `12 -${this._getViewToolbarYOffset(isServerSide)}`
})
}
_isPropertiesPanelEnabled() {
const {
propertiesPanel: propertiesPanel
} = this.option();
return "disabled" !== (null === propertiesPanel || void 0 === propertiesPanel ? void 0 : propertiesPanel.visibility) && !this.isReadOnlyMode()
}
_isPropertiesPanelVisible() {
const {
propertiesPanel: propertiesPanel
} = this.option();
return "visible" === (null === propertiesPanel || void 0 === propertiesPanel ? void 0 : propertiesPanel.visibility)
}
_renderPropertiesToolbar($parent) {
const isServerSide = !(0, _window.hasWindow)();
const $container = (0, _renderer.default)("<div>").addClass("dx-diagram-floating-toolbar-container").addClass("dx-diagram-properties-panel-toolbar-container").appendTo($parent);
this._propertiesToolbar = this._createComponent($container, _uiDiagram8.default, (0, _extend.extend)(this._getToolbarBaseOptions(), {
buttonStylingMode: "contained",
buttonType: "default",
locateInMenu: "never"
}));
this._updatePropertiesToolbarPosition($container, $parent, isServerSide);
this._propertiesToolbarResizeCallback = () => {
this._updatePropertiesToolbarPosition($container, $parent, isServerSide)
}
}
_updatePropertiesToolbarPosition($container, $parent, isServerSide) {
if (isServerSide) {
return
}
const offset = this.option("useNativeScrolling") ? 16 : 12;
_position.default.setup($container, {
my: "right bottom",
at: "right bottom",
of: $parent,
offset: `-${offset}px -${offset}px`
})
}
_renderPropertiesPanel($parent) {
var _this$_propertiesTool;
const isServerSide = !(0, _window.hasWindow)();
const $propertiesPanel = (0, _renderer.default)("<div>").appendTo($parent);
const offset = this.option("useNativeScrolling") ? 16 : 12;
const offsetX = offset;
const offsetY = 2 * offset + (!isServerSide ? (0, _size.getOuterHeight)(null === (_this$_propertiesTool = this._propertiesToolbar) || void 0 === _this$_propertiesTool ? void 0 : _this$_propertiesTool.$element()) : 0);
this._propertiesPanel = this._createComponent($propertiesPanel, _uiDiagram7.default, {
isMobileView: this.isMobileScreenSize(),
isVisible: this._isPropertiesPanelVisible(),
container: this.$element(),
offsetParent: $parent,
offsetX: offsetX,
offsetY: offsetY,
propertyTabs: this.option("propertiesPanel.tabs"),
onCreateToolbar: e => {
e.toolbar = this._createComponent(e.$parent, _uiDiagram0.default, (0, _extend.extend)(this._getToolbarBaseOptions(), {
commands: e.commands,
locateInMenu: "never",
editorStylingMode: "outlined"
}))
},
onVisibilityChanging: e => {
if (isServerSide) {
return
}
this._updatePropertiesPanelGroupBars(e.component);
this._setCustomCommandChecked(_diagram.default.SHOW_PROPERTIES_PANEL_COMMAND_NAME, e.visible);
if (this._toolbox) {
if (e.visible && this.isMobileScreenSize()) {
this._toolbox.hide()
}
}
},
onVisibilityChanged: e => {
if (!e.visible && !this._textInputStarted) {
this._captureFocus()
}
},
onSelectedGroupChanged: _ref3 => {
let {
component: component
} = _ref3;
return this._updatePropertiesPanelGroupBars(component)
},
onPointerUp: this._onPanelPointerUp.bind(this)
});
this._propertiesPanelResizeCallback = () => {
var _this$_propertiesPane;
const prevIsMobileView = null === (_this$_propertiesPane = this._propertiesPanel) || void 0 === _this$_propertiesPane ? void 0 : _this$_propertiesPane.option("isMobileView");
if (prevIsMobileView !== this.isMobileScreenSize()) {
var _this$_propertiesPane2;
null === (_this$_propertiesPane2 = this._propertiesPanel) || void 0 === _this$_propertiesPane2 || _this$_propertiesPane2.option({
isMobileView: this.isMobileScreenSize(),
isVisible: this._isPropertiesPanelVisible()
});
this._setCustomCommandChecked(_diagram.default.SHOW_PROPERTIES_PANEL_COMMAND_NAME, this._isPropertiesPanelVisible())
}
}
}
_updatePropertiesPanelGroupBars(component) {
var _component$getActiveT;
null === (_component$getActiveT = component.getActiveToolbars()) || void 0 === _component$getActiveT || _component$getActiveT.forEach(toolbar => {
this._diagramInstance.updateBarItemsState(toolbar.bar)
})
}
_onPanelPointerUp() {
this._captureFocusOnTimeout()
}
_renderContextMenu($parent) {
const $contextMenu = (0, _renderer.default)("<div>").appendTo($parent);
this._contextMenu = this._createComponent($contextMenu, _uiDiagram.default.DiagramContextMenuWrapper, {
commands: this.option("contextMenu.commands"),
onContentReady: _ref4 => {
let {
component: component
} = _ref4;
return this._registerBar(component)
},
onVisibilityChanging: _ref5 => {
let {
component: component
} = _ref5;
return this._diagramInstance.updateBarItemsState(component.bar)
},
onItemClick: itemData => this._onBeforeCommandExecuted(itemData.command),
export: this.option("export"),
excludeCommands: this._getExcludeCommands(),
onInternalCommand: this._onInternalCommand.bind(this),
onCustomCommand: this._onCustomCommand.bind(this)
})
}
_renderContextToolbox($parent) {
const isServerSide = !(0, _window.hasWindow)();
const {
contextToolbox: contextToolbox = {}
} = this.option();
const {
category: category,
displayMode: displayMode,
shapes: shapes,
width: width
} = contextToolbox;
const $contextToolbox = (0, _renderer.default)("<div>").appendTo($parent);
this._contextToolbox = this._createComponent($contextToolbox, _uiDiagram2.default, {
toolboxWidth: width,
onShown: e => {
if (isServerSide) {
return
}
const $toolboxContainer = (0, _renderer.default)(e.$element);
let isTextGroup = "texts" === displayMode;
if (!shapes && !category && !isTextGroup) {
var _this$_getToolboxGrou;
const group = null === (_this$_getToolboxGrou = this._getToolboxGroups()) || void 0 === _this$_getToolboxGrou ? void 0 : _this$_getToolboxGrou.filter(g => g.category === e.category)[0];
if (group) {
isTextGroup = "texts" === group.displayMode
}
}
this._diagramInstance.createContextToolbox($toolboxContainer[0], isTextGroup, shapes || category || e.category, {
shapeIconSpacing: 12,
shapeIconCountInRow: this.option("contextToolbox.shapeIconsPerRow")
}, shapeType => {
e.callback(shapeType);
this._captureFocus();
e.hide()
})
}
})
}
_setCustomCommandChecked(command, checked) {
var _this$_toolbars2;
null === (_this$_toolbars2 = this._toolbars) || void 0 === _this$_toolbars2 || _this$_toolbars2.forEach(tb => {
tb.setCommandChecked(command, checked)
})
}
_onBeforeCommandExecuted(command) {
const dialogParameters = _uiDiagram3.default.getDialogParameters(command);
if (dialogParameters) {
this._showDialog(dialogParameters)
}
return !!dialogParameters
}
_renderDialog($parent) {
const $dialogElement = (0, _renderer.default)("<div>").appendTo($parent);
this._dialogInstance = this._createComponent($dialogElement, _uiDiagram4.default, {})
}
_showDialog(dialogParameters) {
if (this._dialogInstance) {
this._dialogInstance.option("onGetContent", dialogParameters.onGetContent);
this._dialogInstance.option("onHidden", () => {
this._captureFocus()
});
this._dialogInstance.option("command", this._diagramInstance.getCommand(dialogParameters.command));
this._dialogInstance.option("title", dialogParameters.title);
this._dialogInstance._show()
}
}
_showLoadingIndicator() {
this._loadingIndicator = (0, _renderer.default)("<div>").addClass("dx-diagram-loading-indicator");
this._createComponent(this._loadingIndicator, _load_indicator.default, {});
const $parent = this._$content || this.$element();
$parent.append(this._loadingIndicator)
}
_hideLoadingIndicator() {
if (!this._loadingIndicator) {
return
}
this._loadingIndicator.remove();
this._loadingIndicator = null
}
_initDiagram() {
const {
DiagramControl: DiagramControl
} = (0, _diagram3.getDiagram)();
this._diagramInstance = new DiagramControl;
this._diagramInstance.onChanged = this._raiseDataChangeAction.bind(this);
this._diagramInstance.onEdgeInserted = this._raiseEdgeInsertedAction.bind(this);
this._diagramInstance.onEdgeUpdated = this._raiseEdgeUpdatedAction.bind(this);
this._diagramInstance.onEdgeRemoved = this._raiseEdgeRemovedAction.bind(this);
this._diagramInstance.onNodeInserted = this._raiseNodeInsertedAction.bind(this);
this._diagramInstance.onNodeUpdated = this._raiseNodeUpdatedAction.bind(this);
this._diagramInstance.onNodeRemoved = this._raiseNodeRemovedAction.bind(this);
this._diagramInstance.onToolboxDragStart = this._raiseToolboxDragStart.bind(this);
this._diagramInstance.onToolboxDragEnd = this._raiseToolboxDragEnd.bind(this);
this._diagramInstance.onTextInputStart = this._raiseTextInputStart.bind(this);
this._diagramInstance.onTextInputEnd = this._raiseTextInputEnd.bind(this);
this._diagramInstance.onToggleFullscreen = this._onToggleFullScreen.bind(this);
this._diagramInstance.onShowContextMenu = this._onShowContextMenu.bind(this);
this._diagramInstance.onHideContextMenu = this._onHideContextMenu.bind(this);
this._diagramInstance.onShowContextToolbox = this._onShowContextToolbox.bind(this);
this._diagramInstance.onHideContextToolbox = this._onHideContextToolbox.bind(this);
this._diagramInstance.onNativeAction.add({
notifyItemClick: this._raiseItemClickAction.bind(this),
notifyItemDblClick: this._raiseItemDblClickAction.bind(this),
notifySelectionChanged: this._raiseSelectionChanged.bind(this)
});
this._diagramInstance.onRequestOperation = this._raiseRequestEditOperation.bind(this);
this._updateEventSubscriptionMethods();
this._updateDefaultItemProperties();
this._updateEditingSettings();
this._updateShapeTexts();
this._updateUnitItems();
this._updateFormatUnitsMethod();
if ("in" !== this.option("units")) {
this._updateUnitsState()
}
if (this.isReadOnlyMode()) {
this._updateReadOnlyState()
}
if (this.option("pageSize")) {
if (this.option("pageSize.items")) {
this._updatePageSizeItemsState()
}
if (this.option("pageSize.width") && this.option("pageSize.height")) {
this._updatePageSizeState()
}
}
if ("portrait" !== this.option("pageOrientation")) {
this._updatePageOrientationState()
}
if ("#ffffff" !== this.option("pageColor")) {
this._updatePageColorState()
}
if ("in" !== this.option("viewUnits")) {
this._updateViewUnitsState()
}
if (!this.option("showGrid")) {
this._updateShowGridState()
}
if (!this.option("snapToGrid")) {
this._updateSnapToGridState()
}
if (this.option("gridSize")) {
this._updateGridSizeState()
}
if (1 !== this.option("zoomLevel")) {
this._updateZoomLevelState()
}
if (this.option("simpleView")) {
this._updateSimpleViewState()
}
if ("disabled" !== this.option("autoZoomMode")) {
this._updateAutoZoomState()
}
if (this.option("fullScreen")) {
const window = (0, _window.getWindow)();
if (window && window.self !== window.top) {
this.option("fullScreen", false)
} else {
this._updateFullscreenState()
}
}
this._createOptionsUpdateBar();
if ((0, _window.hasWindow)()) {
this._diagramInstance.initMeasurer(this.$element()[0])
}
this._updateCustomShapes(this._getCustomShapes());
this._refreshDataSources()
}
_createOptionsUpdateBar() {
if (!this.optionsUpdateBar) {
this.optionsUpdateBar = new _diagram5.default(this);
this._diagramInstance.registerBar(this.optionsUpdateBar)
}
}
_deleteOptionsUpdateBar() {
delete this.optionsUpdateBar
}
_clean() {
if (this._diagramInstance) {
this._diagramInstance.cleanMarkup(element => {
(0, _renderer.default)(element).empty()
});
this._deleteOptionsUpdateBar()
}
super._clean()
}
_dispose() {
this._killCaptureFocusTimeout();
super._dispose();
if (this._diagramInstance) {
this._diagramInstance.dispose();
this._diagramInstance = void 0
}
}
_executeDiagramCommand(command, parameter) {
this._diagramInstance.getCommand(command).execute(parameter)
}
getNodeDataSource() {
var _this$_nodesOption;
return null === (_this$_nodesOption = this._nodesOption) || void 0 === _this$_nodesOption ? void 0 : _this$_nodesOption.getDataSource()
}
getEdgeDataSource() {
var _this$_edgesOption;
return null === (_this$_edgesOption = this._edgesOption) || void 0 === _this$_edgesOption ? void 0 : _this$_edgesOption.getDataSource()
}
_refreshDataSources() {
this._beginUpdateDiagram();
this._refreshNodesDataSource();
this._refreshEdgesDataSource();
this._endUpdateDiagram()
}
_refreshNodesDataSource() {
if (this._nodesOption) {
this._nodesOption._disposeDataSource();
delete this._nodesOption
}
if (this.option("nodes.dataSource")) {
this._nodesOption = new _diagram4.default(this);
this._nodesOption.option("dataSource", this.option("nodes.dataSource"));
this._nodesOption._refreshDataSource()
}
}
_refreshEdgesDataSource() {
if (this._edgesOption) {
this._edgesOption._disposeDataSource();
delete this._edgesOption
}
if (this.option("edges.dataSource")) {
this._edgesOption = new _diagram2.default(this);
this._edgesOption.option("dataSource", this.option("edges.dataSource"));
this._edgesOption._refreshDataSource()
}
}
_getDiagramData() {
let value;
const {
DiagramCommand: DiagramCommand
} = (0, _diagram3.getDiagram)();
this._executeDiagramCommand(DiagramCommand.Export, data => {
value = data
});
return value
}
_setDiagramData(data, keepExistingItems) {
const {
DiagramCommand: DiagramCommand
} = (0, _diagram3.getDiagram)();
this._executeDiagramCommand(DiagramCommand.Import, {
data: data,
keepExistingItems: keepExistingItems
})
}
isReadOnlyMode() {
return this.option("readOnly") || this.option("disabled")
}
_onDataSourceChanged() {
this._bindDiagramData()
}
_getChangesKeys(changes) {
return changes.map(change => {
if ((0, _type.isDefined)(change.internalKey)) {
return change.internalKey
}
if ((0, _type.isDefined)(change.key)) {
return change.key
}
return null
}).filter(key => (0, _type.isDefined)(key))
}
_createOptionGetter(optionName) {
const expr = this.option(optionName);
return expr && (0, _data.compileGetter)(expr)
}
_onRequestUpdateLayout(changes) {
var _this$_requestLayoutU;
if (!this._requestLayoutUpdateAction) {
this._createRequestLayoutUpdateAction()
}
const eventArgs = {
changes: changes,
allowed: false
};
null === (_this$_requestLayoutU = this._requestLayoutUpdateAction) || void 0 === _this$_requestLayoutU || _this$_requestLayoutU.call(this, eventArgs);
return eventArgs.allowed
}
_createOptionSetter(optionName) {
const expr = this.option(optionName);
if ((0, _type.isFunction)(expr)) {
return expr
}
return expr && (0, _data.compileSetter)(expr)
}
_bindDiagramData() {
var _this$_nodesOption2, _this$_edgesOption2;
if (this._updateDiagramLockCount || !this._isBindingMode()) {
return
}
const {
DiagramCommand: DiagramCommand,
ConnectorLineOption: ConnectorLineOption,
ConnectorLineEnding: ConnectorLineEnding
} = (0, _diagram3.getDiagram)();
let lineOptionGetter;
let lineOptionSetter;
let startLineEndingGetter;
let startLineEndingSetter;
let endLineEndingGetter;
let endLineEndingSetter;
let containerChildrenGetter;
let containerChildrenSetter;
const data = {
nodeDataSource: null === (_this$_nodesOption2 = this._nodesOption) || void 0 === _this$_nodesOption2 ? void 0 : _this$_nodesOption2.getItems(),
edgeDataSource: null === (_this$_edgesOption2 = this._edgesOption) || void 0 === _this$_edgesOption2 ? void 0 : _this$_edgesOption2.getItems(),
nodeDataImporter: {
getKey: this._createOptionGetter("nodes.keyExpr"),
setKey: this._createOptionSetter("nodes.keyExpr"),
getCustomData: this._createOptionGetter("nodes.customDataExpr"),
setCustomData: this._createOptionSetter("nodes.customDataExpr"),
getLocked: this._createOptionGetter("nodes.lockedExpr"),
setLocked: this._createOptionSetter("nodes.lockedExpr"),
getStyle: this._createOptionGetter("nodes.styleExpr"),
setStyle: this._createOptionSetter("nodes.styleExpr"),
getStyleText: this._createOptionGetter("nodes.textStyleExpr"),
setStyleText: this._createOptionSetter("nodes.textStyleExpr"),
getZIndex: this._createOptionGetter("nodes.zIndexExpr"),
setZIndex: this._createOptionSetter("nodes.zIndexExpr"),
getType: this._createOptionGetter("nodes.typeExpr"),
setType: this._createOptionSetter("nodes.typeExpr"),
getText: this._createOptionGetter("nodes.textExpr"),
setText: this._createOptionSetter("nodes.textExpr"),
getImage: this._createOptionGetter("nodes.imageUrlExpr"),
setImage: this._createOptionSetter("nodes.imageUrlExpr"),
getLeft: this._createOptionGetter("nodes.leftExpr"),
setLeft: this._createOptionSetter("nodes.leftExpr"),
getTop: this._createOptionGetter("nodes.topExpr"),
setTop: this._createOptionSetter("nodes.topExpr"),
getWidth: this._createOptionGetter("nodes.widthExpr"),
setWidth: this._createOptionSetter("nodes.widthExpr"),
getHeight: this._createOptionGetter("nodes.heightExpr"),
setHeight: this._createOptionSetter("nodes.heightExpr"),
getParentKey: this._createOptionGetter("nodes.parentKeyExpr"),
setParentKey: this._createOptionSetter("nodes.parentKeyExpr"),
getItems: this._createOptionGetter("nodes.itemsExpr"),
setItems: this._createOptionSetter("nodes.itemsExpr"),
getChildren: containerChildrenGetter = this._createOptionGetter("nodes.containerChildrenExpr"),
setChildren: containerChildrenSetter = this._createOptionSetter("nodes.containerChildrenExpr"),
getContainerKey: !containerChildrenGetter && !containerChildrenSetter && this._createOptionGetter("nodes.containerKeyExpr"),
setContainerKey: !containerChildrenGetter && !containerChildrenSetter && this._createOptionSetter("nodes.containerKeyExpr")
},
edgeDataImporter: {
getKey: this._createOptionGetter("edges.keyExpr"),
setKey: this._createOptionSetter("edges.keyExpr"),
getCustomData: this._createOptionGetter("edges.customDataExpr"),
setCustomData: this._createOptionSetter("edges.customDataExpr"),
getLocked: this._createOptionGetter("edges.lockedExpr"),
setLocked: this._createOptionSetter("edges.lockedExpr"),
getStyle: this._createOptionGetter("edges.styleExpr"),
setStyle: this._createOptionSetter("edges.styleExpr"),
getStyleText: this._createOptionGetter("edges.textStyleExpr"),
setStyleText: this._createOptionSetter("edges.textStyleExpr"),
getZIndex: this._createOptionGetter("edges.zIndexExpr"),
setZIndex: this._createOptionSetter("edges.zIndexExpr"),
getFrom: this._createOptionGetter("edges.fromExpr"),
setFrom: this._createOptionSetter("edges.fromExpr"),
getFromPointIndex: this._createOptionGetter("edges.fromPointIndexExpr"),
setFromPointIndex: this._createOptionSetter("edges.fromPointIndexExpr"),
getTo: this._createOptionGetter("edges.toExpr"),
setTo: this._createOptionSetter("edges.toExpr"),
getToPointIndex: this._createOptionGetter("edges.toPointIndexExpr"),
setToPointIndex: this._createOptionSetter("edges.toPointIndexExpr"),
getPoints: this._createOptionGetter("edges.pointsExpr"),
setPoints: this._createOptionSetter("edges.pointsExpr"),
getText: this._createOptionGetter("edges.textExpr"),
setText: this._createOptionSetter("edges.textExpr"),
getLineOption: (lineOptionGetter = this._createOptionGetter("edges.lineTypeExpr")) && (obj => {
const lineType = lineOptionGetter(obj);
return this._getConnectorLineOption(lineType)
}),
setLineOption: (lineOptionSetter = this._createOptionSetter("edges.lineTypeExpr")) && ((obj, value) => {
switch (value) {
case ConnectorLineOption.Straight:
value = "straight";
break;
case ConnectorLineOption.Orthogonal:
value = "orthogonal"
}
lineOptionSetter(obj, value)
}),
getStartLineEnding: (startLineEndingGetter = this._createOptionGetter("edges.fromLineEndExpr")) && (obj => {
const lineEnd = startLineEndingGetter(obj);
return this._getConnectorLineEnding(lineEnd)
}),
setStartLineEnding: (startLineEndingSetter = this._createOptionSetter("edges.fromLineEndExpr")) && ((obj, value) => {
switch (value) {
case ConnectorLineEnding.Arrow:
value = "arrow";
break;
case ConnectorLineEnding.OutlinedTriangle:
value = "outlinedTriangle";
break;
case ConnectorLineEnding.FilledTriangle:
value = "filledTriangle";
break;
case ConnectorLineEnding.None:
value = "none"
}
startLineEndingSetter(obj, value)
}),
getEndLineEnding: (endLineEndingGetter = this._createOptionGetter("edges.toLineEndExpr")) && (obj => {
const lineEnd = endLineEndingGetter(obj);
return this._getConnectorLineEnding(lineEnd)
}),
setEndLineEnding: (endLineEndingSetter = this._createOptionSetter("edges.toLineEndExpr")) && ((obj, value) => {
switch (value) {
case ConnectorLineEnding.Arrow:
value = "arrow";
break;
case ConnectorLineEnding.OutlinedTriangle:
value = "outlinedTriangle";
break;
case ConnectorLineEnding.FilledTriangle:
value = "filledTriangle";
break;
case ConnectorLineEnding.None:
value = "none"
}
endLineEndingSetter(obj, value)
})
},
layoutParameters: this._getDataBindingLayoutParameters()
};
if (data.nodeDataSource) {
this._executeDiagramCommand(DiagramCommand.BindDocument, data)
}
}
_reloadContentByChanges(changes, isExternalChanges) {
const keys = this._getChangesKeys(changes);
const applyLayout = this._onRequestUpdateLayout(changes);
this._reloadContent(keys, applyLayout, isExternalChanges)
}
_reloadContent(itemKeys, applyLayout, isExternalChanges) {
this._diagramInstance.reloadContent(itemKeys, () => {
var _this$_nodesOption3, _this$_edgesOption3;
if (!isExternalChanges) {