devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
1,042 lines (1,035 loc) • 108 kB
JavaScript
/**
* DevExtreme (cjs/ui/diagram/ui.diagram.js)
* Version: 21.2.4
* Build date: Mon Dec 06 2021
*
* Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
function _typeof(obj) {
if ("function" === typeof Symbol && "symbol" === typeof Symbol.iterator) {
_typeof = function(obj) {
return typeof obj
}
} else {
_typeof = function(obj) {
return obj && "function" === typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj
}
}
return _typeof(obj)
}
exports.default = void 0;
var _size = require("../../core/utils/size");
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _ui = _interopRequireDefault(require("../widget/ui.widget"));
var _load_indicator = _interopRequireDefault(require("../load_indicator"));
var _component_registrator = _interopRequireDefault(require("../../core/component_registrator"));
var _extend = require("../../core/utils/extend");
var _type = require("../../core/utils/type");
var _data = require("../../core/utils/data");
var _position = _interopRequireDefault(require("../../animation/position"));
var _diagram = require("./diagram.importer");
var _window = require("../../core/utils/window");
var _element = require("../../core/element");
var _events_engine = _interopRequireDefault(require("../../events/core/events_engine"));
var _index = require("../../events/utils/index");
var _message = _interopRequireDefault(require("../../localization/message"));
var _number = _interopRequireDefault(require("../../localization/number"));
var zIndexPool = _interopRequireWildcard(require("../overlay/z_index"));
var _ui2 = _interopRequireDefault(require("../overlay/ui.overlay"));
var _uiDiagram = _interopRequireDefault(require("./ui.diagram.toolbar"));
var _uiDiagram2 = _interopRequireDefault(require("./ui.diagram.main_toolbar"));
var _uiDiagram3 = _interopRequireDefault(require("./ui.diagram.history_toolbar"));
var _uiDiagram4 = _interopRequireDefault(require("./ui.diagram.view_toolbar"));
var _uiDiagram5 = _interopRequireDefault(require("./ui.diagram.properties_toolbar"));
var _uiDiagram6 = _interopRequireDefault(require("./ui.diagram.context_menu"));
var _uiDiagram7 = _interopRequireDefault(require("./ui.diagram.context_toolbox"));
var _uiDiagram8 = _interopRequireDefault(require("./ui.diagram.dialogs"));
var _uiDiagram9 = _interopRequireDefault(require("./ui.diagram.scroll_view"));
var _diagram2 = _interopRequireDefault(require("./diagram.toolbox_manager"));
var _uiDiagram10 = _interopRequireDefault(require("./ui.diagram.toolbox"));
var _uiDiagram11 = _interopRequireDefault(require("./ui.diagram.properties_panel"));
var _diagram3 = _interopRequireDefault(require("./diagram.options_update"));
var _uiDiagram12 = _interopRequireDefault(require("./ui.diagram.dialog_manager"));
var _diagram4 = _interopRequireDefault(require("./diagram.commands_manager"));
var _diagram5 = _interopRequireDefault(require("./diagram.nodes_option"));
var _diagram6 = _interopRequireDefault(require("./diagram.edges_option"));
function _getRequireWildcardCache(nodeInterop) {
if ("function" !== typeof WeakMap) {
return null
}
var cacheBabelInterop = new WeakMap;
var cacheNodeInterop = new WeakMap;
return (_getRequireWildcardCache = function(nodeInterop) {
return nodeInterop ? cacheNodeInterop : cacheBabelInterop
})(nodeInterop)
}
function _interopRequireWildcard(obj, nodeInterop) {
if (!nodeInterop && obj && obj.__esModule) {
return obj
}
if (null === obj || "object" !== _typeof(obj) && "function" !== typeof obj) {
return {
default: obj
}
}
var cache = _getRequireWildcardCache(nodeInterop);
if (cache && cache.has(obj)) {
return cache.get(obj)
}
var newObj = {};
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var key in obj) {
if ("default" !== key && Object.prototype.hasOwnProperty.call(obj, key)) {
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
if (desc && (desc.get || desc.set)) {
Object.defineProperty(newObj, key, desc)
} else {
newObj[key] = obj[key]
}
}
}
newObj.default = obj;
if (cache) {
cache.set(obj, newObj)
}
return newObj
}
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass)
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function(o, p) {
o.__proto__ = p;
return o
};
return _setPrototypeOf(o, p)
}
var DIAGRAM_CLASS = "dx-diagram";
var DIAGRAM_FULLSCREEN_CLASS = "dx-diagram-fullscreen";
var DIAGRAM_TOOLBAR_WRAPPER_CLASS = DIAGRAM_CLASS + "-toolbar-wrapper";
var DIAGRAM_CONTENT_WRAPPER_CLASS = DIAGRAM_CLASS + "-content-wrapper";
var DIAGRAM_CONTENT_CLASS = DIAGRAM_CLASS + "-content";
var DIAGRAM_SCROLL_VIEW_CLASS = DIAGRAM_CLASS + "-scroll-view";
var DIAGRAM_FLOATING_TOOLBAR_CONTAINER_CLASS = DIAGRAM_CLASS + "-floating-toolbar-container";
var DIAGRAM_PROPERTIES_PANEL_TOOLBAR_CONTAINER_CLASS = DIAGRAM_CLASS + "-properties-panel-toolbar-container";
var DIAGRAM_LOADING_INDICATOR_CLASS = DIAGRAM_CLASS + "-loading-indicator";
var DIAGRAM_FLOATING_PANEL_OFFSET = 12;
var DIAGRAM_DEFAULT_UNIT = "in";
var DIAGRAM_DEFAULT_ZOOMLEVEL = 1;
var DIAGRAM_DEFAULT_AUTOZOOM_MODE = "disabled";
var DIAGRAM_DEFAULT_PAGE_ORIENTATION = "portrait";
var DIAGRAM_DEFAULT_PAGE_COLOR = "#ffffff";
var DIAGRAM_MAX_MOBILE_WINDOW_WIDTH = 576;
var DIAGRAM_TOOLBOX_SHAPE_SPACING = 12;
var DIAGRAM_TOOLBOX_SHAPES_PER_ROW = 3;
var DIAGRAM_CONTEXT_TOOLBOX_SHAPE_SPACING = 12;
var DIAGRAM_CONTEXT_TOOLBOX_SHAPES_PER_ROW = 4;
var DIAGRAM_CONTEXT_TOOLBOX_DEFAULT_WIDTH = 152;
var DIAGRAM_NAMESPACE = "dxDiagramEvent";
var FULLSCREEN_CHANGE_EVENT_NAME = (0, _index.addNamespace)("fullscreenchange", DIAGRAM_NAMESPACE);
var IE_FULLSCREEN_CHANGE_EVENT_NAME = (0, _index.addNamespace)("msfullscreenchange", DIAGRAM_NAMESPACE);
var WEBKIT_FULLSCREEN_CHANGE_EVENT_NAME = (0, _index.addNamespace)("webkitfullscreenchange", DIAGRAM_NAMESPACE);
var MOZ_FULLSCREEN_CHANGE_EVENT_NAME = (0, _index.addNamespace)("mozfullscreenchange", DIAGRAM_NAMESPACE);
var Diagram = function(_Widget) {
_inheritsLoose(Diagram, _Widget);
function Diagram() {
return _Widget.apply(this, arguments) || this
}
var _proto = Diagram.prototype;
_proto._init = function() {
this._updateDiagramLockCount = 0;
this.toggleFullscreenLock = 0;
this._toolbars = [];
_Widget.prototype._init.call(this);
this._initDiagram();
this._createCustomCommand()
};
_proto._initMarkup = function() {
var _this = this;
_Widget.prototype._initMarkup.call(this);
this._toolbars = [];
delete this._isMobileScreenSize;
var isServerSide = !(0, _window.hasWindow)();
this.$element().addClass(DIAGRAM_CLASS);
delete this._mainToolbar;
if (this.option("mainToolbar.visible")) {
this._renderMainToolbar()
}
var $contentWrapper = (0, _renderer.default)("<div>").addClass(DIAGRAM_CONTENT_WRAPPER_CLASS).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(DIAGRAM_CONTENT_CLASS).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) {
var $scrollViewWrapper = (0, _renderer.default)("<div>").addClass(DIAGRAM_SCROLL_VIEW_CLASS).appendTo(this._$content);
this._createComponent($scrollViewWrapper, _uiDiagram9.default, {
useNativeScrolling: this.option("useNativeScrolling"),
onCreateDiagram: function(e) {
_this._diagramInstance.createDocument(e.$parent[0], e.scrollView, $contentWrapper[0])
}
})
}
this._setCustomCommandChecked(_diagram4.default.SHOW_PROPERTIES_PANEL_COMMAND_NAME, this._isPropertiesPanelVisible());
this._setCustomCommandChecked(_diagram4.default.SHOW_TOOLBOX_COMMAND_NAME, this._isToolboxVisible());
this._createOptionsUpdateBar()
};
_proto._dimensionChanged = function() {
this._isMobileScreenSize = void 0;
this._processDiagramResize()
};
_proto._visibilityChanged = function(visible) {
if (visible) {
this._bindDiagramData();
this.repaint()
}
};
_proto._processDiagramResize = function() {
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)
}
};
_proto.isMobileScreenSize = function() {
if (void 0 === this._isMobileScreenSize) {
this._isMobileScreenSize = (0, _window.hasWindow)() && (0, _size.getOuterWidth)(this.$element()) < DIAGRAM_MAX_MOBILE_WINDOW_WIDTH
}
return this._isMobileScreenSize
};
_proto._captureFocus = function() {
if (this._diagramInstance) {
this._diagramInstance.captureFocus()
}
};
_proto._captureFocusOnTimeout = function() {
var _this2 = this;
this._captureFocusTimeout = setTimeout((function() {
_this2._captureFocus();
delete _this2._captureFocusTimeout
}), 100)
};
_proto._killCaptureFocusTimeout = function() {
if (this._captureFocusTimeout) {
clearTimeout(this._captureFocusTimeout);
delete this._captureFocusTimeout
}
};
_proto.notifyBarCommandExecuted = function() {
this._captureFocusOnTimeout()
};
_proto._registerToolbar = function(component) {
this._registerBar(component);
this._toolbars.push(component)
};
_proto._registerBar = function(component) {
component.bar.onChanged.add(this);
this._diagramInstance.registerBar(component.bar)
};
_proto._getExcludeCommands = function() {
var excludeCommands = [];
if (!this._isToolboxEnabled()) {
excludeCommands.push(_diagram4.default.SHOW_TOOLBOX_COMMAND_NAME)
}
if (!this._isPropertiesPanelEnabled()) {
excludeCommands.push(_diagram4.default.SHOW_PROPERTIES_PANEL_COMMAND_NAME)
}
return excludeCommands
};
_proto._getToolbarBaseOptions = function() {
var _this3 = this;
return {
onContentReady: function(_ref) {
var component = _ref.component;
return _this3._registerToolbar(component)
},
onSubMenuVisibilityChanging: function(_ref2) {
var component = _ref2.component;
return _this3._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()
}
};
_proto._onInternalCommand = function(e) {
switch (e.command) {
case _diagram4.default.SHOW_TOOLBOX_COMMAND_NAME:
if (this._toolbox) {
this._toolbox.toggle()
}
break;
case _diagram4.default.SHOW_PROPERTIES_PANEL_COMMAND_NAME:
if (this._propertiesPanel) {
this._propertiesPanel.toggle()
}
}
};
_proto._onCustomCommand = function(e) {
this._customCommandAction({
name: e.name
})
};
_proto._renderMainToolbar = function() {
var $toolbarWrapper = (0, _renderer.default)("<div>").addClass(DIAGRAM_TOOLBAR_WRAPPER_CLASS).appendTo(this.$element());
this._mainToolbar = this._createComponent($toolbarWrapper, _uiDiagram2.default, (0, _extend.extend)(this._getToolbarBaseOptions(), {
commands: this.option("mainToolbar.commands"),
skipAdjustSize: true
}))
};
_proto._isHistoryToolbarVisible = function() {
return this.option("historyToolbar.visible") && !this.isReadOnlyMode()
};
_proto._renderHistoryToolbar = function($parent) {
var _this4 = this;
var $container = (0, _renderer.default)("<div>").addClass(DIAGRAM_FLOATING_TOOLBAR_CONTAINER_CLASS).appendTo($parent);
this._historyToolbar = this._createComponent($container, _uiDiagram3.default, (0, _extend.extend)(this._getToolbarBaseOptions(), {
commands: this.option("historyToolbar.commands"),
locateInMenu: "never"
}));
this._updateHistoryToolbarPosition();
this._historyToolbarResizeCallback = function() {
_this4._historyToolbar.option("isMobileView", _this4.isMobileScreenSize())
}
};
_proto._updateHistoryToolbarPosition = function() {
if (!(0, _window.hasWindow)()) {
return
}
_position.default.setup(this._historyToolbar.$element(), {
my: "left top",
at: "left top",
of: this._historyToolbar.$element().parent(),
offset: DIAGRAM_FLOATING_PANEL_OFFSET + " " + DIAGRAM_FLOATING_PANEL_OFFSET
})
};
_proto._isToolboxEnabled = function() {
return "disabled" !== this.option("toolbox.visibility") && !this.isReadOnlyMode()
};
_proto._isToolboxVisible = function() {
return "visible" === this.option("toolbox.visibility") || "auto" === this.option("toolbox.visibility") && !this.isMobileScreenSize()
};
_proto._renderToolbox = function($parent) {
var _this5 = this;
var isServerSide = !(0, _window.hasWindow)();
var $toolBox = (0, _renderer.default)("<div>").appendTo($parent);
var bounds = this._getToolboxBounds($parent, isServerSide);
this._toolbox = this._createComponent($toolBox, _uiDiagram10.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: function(e) {
if (isServerSide) {
return
}
_this5._diagramInstance.createToolbox(e.$element[0], "texts" === e.displayMode, e.shapes || e.category, {
shapeIconSpacing: DIAGRAM_TOOLBOX_SHAPE_SPACING,
shapeIconCountInRow: _this5.option("toolbox.shapeIconsPerRow"),
shapeIconAttributes: {
"data-toggle": e.dataToggle
}
})
},
onFilterChanged: function(e) {
if (isServerSide) {
return
}
_this5._diagramInstance.applyToolboxFilter(e.text, e.filteringToolboxes)
},
onVisibilityChanging: function(e) {
if (isServerSide) {
return
}
_this5._setCustomCommandChecked(_diagram4.default.SHOW_TOOLBOX_COMMAND_NAME, e.visible);
if (_this5._propertiesPanel) {
if (e.visible && _this5.isMobileScreenSize()) {
_this5._propertiesPanel.hide()
}
}
if (_this5._historyToolbar) {
if (e.visible && _this5.isMobileScreenSize()) {
_this5._historyToolbarZIndex = zIndexPool.create(_ui2.default.baseZIndex());
_this5._historyToolbar.$element().css("zIndex", _this5._historyToolbarZIndex);
_this5._historyToolbar.$element().css("boxShadow", "none")
}
}
if (_this5._viewToolbar) {
_this5._viewToolbar.$element().css("opacity", e.visible && _this5.isMobileScreenSize() ? "0" : "1");
_this5._viewToolbar.$element().css("pointerEvents", e.visible && _this5.isMobileScreenSize() ? "none" : "")
}
},
onVisibilityChanged: function(e) {
if (!e.visible && !_this5._textInputStarted) {
_this5._captureFocus()
}
if (!isServerSide) {
if (_this5._historyToolbar) {
if (!e.visible && _this5.isMobileScreenSize() && _this5._historyToolbarZIndex) {
zIndexPool.remove(_this5._historyToolbarZIndex);
_this5._historyToolbar.$element().css("zIndex", "");
_this5._historyToolbar.$element().css("boxShadow", "");
_this5._historyToolbarZIndex = void 0
}
}
}
},
onPointerUp: this._onPanelPointerUp.bind(this)
});
this._toolbox._popup.option("propagateOutsideClick", !this.option("fullScreen"));
this._toolboxResizeCallback = function() {
var bounds = _this5._getToolboxBounds($parent, isServerSide);
_this5._toolbox.option("height", bounds.height);
var prevIsMobileView = _this5._toolbox.option("isMobileView");
if (prevIsMobileView !== _this5.isMobileScreenSize()) {
_this5._toolbox.option({
isMobileView: _this5.isMobileScreenSize(),
isVisible: _this5._isToolboxVisible()
});
_this5._setCustomCommandChecked(_diagram4.default.SHOW_TOOLBOX_COMMAND_NAME, _this5._isToolboxVisible())
}
_this5._toolbox.updateMaxHeight()
}
};
_proto._getToolboxBounds = function($parent, isServerSide) {
var result = {
offsetX: DIAGRAM_FLOATING_PANEL_OFFSET,
offsetY: DIAGRAM_FLOATING_PANEL_OFFSET,
height: !isServerSide ? (0, _size.getHeight)($parent) - 2 * DIAGRAM_FLOATING_PANEL_OFFSET : 0
};
if (this._historyToolbar && !isServerSide) {
result.offsetY += (0, _size.getOuterHeight)(this._historyToolbar.$element()) + DIAGRAM_FLOATING_PANEL_OFFSET;
result.height -= (0, _size.getOuterHeight)(this._historyToolbar.$element()) + DIAGRAM_FLOATING_PANEL_OFFSET
}
if (this._viewToolbar && !isServerSide) {
result.height -= (0, _size.getOuterHeight)(this._viewToolbar.$element()) + this._getViewToolbarYOffset(isServerSide)
}
return result
};
_proto._renderViewToolbar = function($parent) {
var _this6 = this;
var isServerSide = !(0, _window.hasWindow)();
var $container = (0, _renderer.default)("<div>").addClass(DIAGRAM_FLOATING_TOOLBAR_CONTAINER_CLASS).appendTo($parent);
this._viewToolbar = this._createComponent($container, _uiDiagram4.default, (0, _extend.extend)(this._getToolbarBaseOptions(), {
commands: this.option("viewToolbar.commands"),
locateInMenu: "never"
}));
this._updateViewToolbarPosition($container, $parent, isServerSide);
this._viewToolbarResizeCallback = function() {
_this6._updateViewToolbarPosition($container, $parent, isServerSide)
}
};
_proto._getViewToolbarYOffset = function(isServerSide) {
if (isServerSide) {
return
}
var result = DIAGRAM_FLOATING_PANEL_OFFSET;
if (this._viewToolbar && this._propertiesToolbar) {
result += ((0, _size.getOuterHeight)(this._propertiesToolbar.$element()) - (0, _size.getOuterHeight)(this._viewToolbar.$element())) / 2
}
return result
};
_proto._updateViewToolbarPosition = function($container, $parent, isServerSide) {
if (isServerSide) {
return
}
_position.default.setup($container, {
my: "left bottom",
at: "left bottom",
of: $parent,
offset: DIAGRAM_FLOATING_PANEL_OFFSET + " -" + this._getViewToolbarYOffset(isServerSide)
})
};
_proto._isPropertiesPanelEnabled = function() {
return "disabled" !== this.option("propertiesPanel.visibility") && !this.isReadOnlyMode()
};
_proto._isPropertiesPanelVisible = function() {
return "visible" === this.option("propertiesPanel.visibility")
};
_proto._renderPropertiesToolbar = function($parent) {
var _this7 = this;
var isServerSide = !(0, _window.hasWindow)();
var $container = (0, _renderer.default)("<div>").addClass(DIAGRAM_FLOATING_TOOLBAR_CONTAINER_CLASS).addClass(DIAGRAM_PROPERTIES_PANEL_TOOLBAR_CONTAINER_CLASS).appendTo($parent);
this._propertiesToolbar = this._createComponent($container, _uiDiagram5.default, (0, _extend.extend)(this._getToolbarBaseOptions(), {
buttonStylingMode: "contained",
buttonType: "default",
locateInMenu: "never"
}));
this._updatePropertiesToolbarPosition($container, $parent, isServerSide);
this._propertiesToolbarResizeCallback = function() {
_this7._updatePropertiesToolbarPosition($container, $parent, isServerSide)
}
};
_proto._updatePropertiesToolbarPosition = function($container, $parent, isServerSide) {
if (isServerSide) {
return
}
_position.default.setup($container, {
my: "right bottom",
at: "right bottom",
of: $parent,
offset: "-" + DIAGRAM_FLOATING_PANEL_OFFSET + " -" + DIAGRAM_FLOATING_PANEL_OFFSET
})
};
_proto._renderPropertiesPanel = function($parent) {
var _this8 = this;
var isServerSide = !(0, _window.hasWindow)();
var $propertiesPanel = (0, _renderer.default)("<div>").appendTo($parent);
var offsetX = DIAGRAM_FLOATING_PANEL_OFFSET;
var offsetY = 2 * DIAGRAM_FLOATING_PANEL_OFFSET + (!isServerSide ? (0, _size.getOuterHeight)(this._propertiesToolbar.$element()) : 0);
this._propertiesPanel = this._createComponent($propertiesPanel, _uiDiagram11.default, {
isMobileView: this.isMobileScreenSize(),
isVisible: this._isPropertiesPanelVisible(),
container: this.$element(),
offsetParent: $parent,
offsetX: offsetX,
offsetY: offsetY,
propertyTabs: this.option("propertiesPanel.tabs"),
onCreateToolbar: function(e) {
e.toolbar = _this8._createComponent(e.$parent, _uiDiagram.default, (0, _extend.extend)(_this8._getToolbarBaseOptions(), {
commands: e.commands,
locateInMenu: "never",
editorStylingMode: "outlined"
}))
},
onVisibilityChanging: function(e) {
if (isServerSide) {
return
}
_this8._updatePropertiesPanelGroupBars(e.component);
_this8._setCustomCommandChecked(_diagram4.default.SHOW_PROPERTIES_PANEL_COMMAND_NAME, e.visible);
if (_this8._toolbox) {
if (e.visible && _this8.isMobileScreenSize()) {
_this8._toolbox.hide()
}
}
},
onVisibilityChanged: function(e) {
if (!e.visible && !_this8._textInputStarted) {
_this8._captureFocus()
}
},
onSelectedGroupChanged: function(_ref3) {
var component = _ref3.component;
return _this8._updatePropertiesPanelGroupBars(component)
},
onPointerUp: this._onPanelPointerUp.bind(this)
});
this._propertiesPanelResizeCallback = function() {
var prevIsMobileView = _this8._propertiesPanel.option("isMobileView");
if (prevIsMobileView !== _this8.isMobileScreenSize()) {
_this8._propertiesPanel.option({
isMobileView: _this8.isMobileScreenSize(),
isVisible: _this8._isPropertiesPanelVisible()
});
_this8._setCustomCommandChecked(_diagram4.default.SHOW_PROPERTIES_PANEL_COMMAND_NAME, _this8._isPropertiesPanelVisible())
}
}
};
_proto._updatePropertiesPanelGroupBars = function(component) {
var _this9 = this;
component.getActiveToolbars().forEach((function(toolbar) {
_this9._diagramInstance.updateBarItemsState(toolbar.bar)
}))
};
_proto._onPanelPointerUp = function() {
this._captureFocusOnTimeout()
};
_proto._renderContextMenu = function($parent) {
var _this10 = this;
var $contextMenu = (0, _renderer.default)("<div>").appendTo($parent);
this._contextMenu = this._createComponent($contextMenu, _uiDiagram6.default.DiagramContextMenuWrapper, {
commands: this.option("contextMenu.commands"),
onContentReady: function(_ref4) {
var component = _ref4.component;
return _this10._registerBar(component)
},
onVisibilityChanging: function(_ref5) {
var component = _ref5.component;
return _this10._diagramInstance.updateBarItemsState(component.bar)
},
onItemClick: function(itemData) {
return _this10._onBeforeCommandExecuted(itemData.command)
},
export: this.option("export"),
excludeCommands: this._getExcludeCommands(),
onInternalCommand: this._onInternalCommand.bind(this),
onCustomCommand: this._onCustomCommand.bind(this)
})
};
_proto._renderContextToolbox = function($parent) {
var _this11 = this;
var isServerSide = !(0, _window.hasWindow)();
var category = this.option("contextToolbox.category");
var displayMode = this.option("contextToolbox.displayMode");
var shapes = this.option("contextToolbox.shapes");
var $contextToolbox = (0, _renderer.default)("<div>").appendTo($parent);
this._contextToolbox = this._createComponent($contextToolbox, _uiDiagram7.default, {
toolboxWidth: this.option("contextToolbox.width"),
onShown: function(e) {
if (isServerSide) {
return
}
var $toolboxContainer = (0, _renderer.default)(e.$element);
var isTextGroup = "texts" === displayMode;
if (!shapes && !category && !isTextGroup) {
var group = _this11._getToolboxGroups().filter((function(g) {
return g.category === e.category
}))[0];
if (group) {
isTextGroup = "texts" === group.displayMode
}
}
_this11._diagramInstance.createContextToolbox($toolboxContainer[0], isTextGroup, shapes || category || e.category, {
shapeIconSpacing: DIAGRAM_CONTEXT_TOOLBOX_SHAPE_SPACING,
shapeIconCountInRow: _this11.option("contextToolbox.shapeIconsPerRow")
}, (function(shapeType) {
e.callback(shapeType);
_this11._captureFocus();
e.hide()
}))
}
})
};
_proto._setCustomCommandChecked = function(command, checked) {
this._toolbars.forEach((function(tb) {
tb.setCommandChecked(command, checked)
}))
};
_proto._onBeforeCommandExecuted = function(command) {
var dialogParameters = _uiDiagram12.default.getDialogParameters(command);
if (dialogParameters) {
this._showDialog(dialogParameters)
}
return !!dialogParameters
};
_proto._renderDialog = function($parent) {
var $dialogElement = (0, _renderer.default)("<div>").appendTo($parent);
this._dialogInstance = this._createComponent($dialogElement, _uiDiagram8.default, {})
};
_proto._showDialog = function(dialogParameters) {
if (this._dialogInstance) {
this._dialogInstance.option("onGetContent", dialogParameters.onGetContent);
this._dialogInstance.option("onHidden", function() {
this._captureFocus()
}.bind(this));
this._dialogInstance.option("command", this._diagramInstance.getCommand(dialogParameters.command));
this._dialogInstance.option("title", dialogParameters.title);
this._dialogInstance._show()
}
};
_proto._showLoadingIndicator = function() {
this._loadingIndicator = (0, _renderer.default)("<div>").addClass(DIAGRAM_LOADING_INDICATOR_CLASS);
this._createComponent(this._loadingIndicator, _load_indicator.default, {});
var $parent = this._$content || this.$element();
$parent.append(this._loadingIndicator)
};
_proto._hideLoadingIndicator = function() {
if (!this._loadingIndicator) {
return
}
this._loadingIndicator.remove();
this._loadingIndicator = null
};
_proto._initDiagram = function() {
var _getDiagram = (0, _diagram.getDiagram)(),
DiagramControl = _getDiagram.DiagramControl;
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 (this.option("units") !== DIAGRAM_DEFAULT_UNIT) {
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 (this.option("pageOrientation") !== DIAGRAM_DEFAULT_PAGE_ORIENTATION) {
this._updatePageOrientationState()
}
if (this.option("pageColor") !== DIAGRAM_DEFAULT_PAGE_COLOR) {
this._updatePageColorState()
}
if (this.option("viewUnits") !== DIAGRAM_DEFAULT_UNIT) {
this._updateViewUnitsState()
}
if (!this.option("showGrid")) {
this._updateShowGridState()
}
if (!this.option("snapToGrid")) {
this._updateSnapToGridState()
}
if (this.option("gridSize")) {
this._updateGridSizeState()
}
if (this.option("zoomLevel") !== DIAGRAM_DEFAULT_ZOOMLEVEL) {
this._updateZoomLevelState()
}
if (this.option("simpleView")) {
this._updateSimpleViewState()
}
if (this.option("autoZoomMode") !== DIAGRAM_DEFAULT_AUTOZOOM_MODE) {
this._updateAutoZoomState()
}
if (this.option("fullScreen")) {
var 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()
};
_proto._createOptionsUpdateBar = function() {
if (!this.optionsUpdateBar) {
this.optionsUpdateBar = new _diagram3.default(this);
this._diagramInstance.registerBar(this.optionsUpdateBar)
}
};
_proto._deleteOptionsUpdateBar = function() {
delete this.optionsUpdateBar
};
_proto._clean = function() {
if (this._diagramInstance) {
this._diagramInstance.cleanMarkup((function(element) {
(0, _renderer.default)(element).empty()
}));
this._deleteOptionsUpdateBar()
}
_Widget.prototype._clean.call(this)
};
_proto._dispose = function() {
this._killCaptureFocusTimeout();
_Widget.prototype._dispose.call(this);
this._diagramInstance = void 0
};
_proto._executeDiagramCommand = function(command, parameter) {
this._diagramInstance.getCommand(command).execute(parameter)
};
_proto.getNodeDataSource = function() {
return this._nodesOption && this._nodesOption.getDataSource()
};
_proto.getEdgeDataSource = function() {
return this._edgesOption && this._edgesOption.getDataSource()
};
_proto._refreshDataSources = function() {
this._beginUpdateDiagram();
this._refreshNodesDataSource();
this._refreshEdgesDataSource();
this._endUpdateDiagram()
};
_proto._refreshNodesDataSource = function() {
if (this._nodesOption) {
this._nodesOption._disposeDataSource();
delete this._nodesOption
}
if (this.option("nodes.dataSource")) {
this._nodesOption = new _diagram5.default(this);
this._nodesOption.option("dataSource", this.option("nodes.dataSource"));
this._nodesOption._refreshDataSource()
}
};
_proto._refreshEdgesDataSource = function() {
if (this._edgesOption) {
this._edgesOption._disposeDataSource();
delete this._edgesOption
}
if (this.option("edges.dataSource")) {
this._edgesOption = new _diagram6.default(this);
this._edgesOption.option("dataSource", this.option("edges.dataSource"));
this._edgesOption._refreshDataSource()
}
};
_proto._getDiagramData = function() {
var value;
var _getDiagram2 = (0, _diagram.getDiagram)(),
DiagramCommand = _getDiagram2.DiagramCommand;
this._executeDiagramCommand(DiagramCommand.Export, (function(data) {
value = data
}));
return value
};
_proto._setDiagramData = function(data, keepExistingItems) {
var _getDiagram3 = (0, _diagram.getDiagram)(),
DiagramCommand = _getDiagram3.DiagramCommand;
this._executeDiagramCommand(DiagramCommand.Import, {
data: data,
keepExistingItems: keepExistingItems
})
};
_proto.isReadOnlyMode = function() {
return this.option("readOnly") || this.option("disabled")
};
_proto._onDataSourceChanged = function() {
this._bindDiagramData()
};
_proto._getChangesKeys = function(changes) {
return changes.map((function(change) {
if ((0, _type.isDefined)(change.internalKey)) {
return change.internalKey
} else if ((0, _type.isDefined)(change.key)) {
return change.key
} else {
return null
}
})).filter((function(key) {
return (0, _type.isDefined)(key)
}))
};
_proto._createOptionGetter = function(optionName) {
var expr = this.option(optionName);
return expr && (0, _data.compileGetter)(expr)
};
_proto._onRequestUpdateLayout = function(changes) {
if (!this._requestLayoutUpdateAction) {
this._createRequestLayoutUpdateAction()
}
var eventArgs = {
changes: changes,
allowed: false
};
this._requestLayoutUpdateAction(eventArgs);
return eventArgs.allowed
};
_proto._createOptionSetter = function(optionName) {
var expr = this.option(optionName);
if ((0, _type.isFunction)(expr)) {
return expr
}
return expr && (0, _data.compileSetter)(expr)
};
_proto._bindDiagramData = function() {
if (this._updateDiagramLockCount || !this._isBindingMode()) {
return
}
var _getDiagram4 = (0, _diagram.getDiagram)(),
DiagramCommand = _getDiagram4.DiagramCommand,
ConnectorLineOption = _getDiagram4.ConnectorLineOption,
ConnectorLineEnding = _getDiagram4.ConnectorLineEnding;
var lineOptionGetter;
var lineOptionSetter;
var startLineEndingGetter;
var startLineEndingSetter;
var endLineEndingGetter;
var endLineEndingSetter;
var containerKeyGetter;
var containerKeySetter;
var data = {
nodeDataSource: this._nodesOption && this._nodesOption.getItems(),
edgeDataSource: this._edgesOption && this._edgesOption.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"),
getContainerKey: containerKeyGetter = this._createOptionGetter("nodes.containerKeyExpr"),
setContainerKey: containerKeySetter = this._createOptionSetter("nodes.containerKeyExpr"),
getChildren: !containerKeyGetter && !containerKeySetter && this._createOptionGetter("nodes.containerChildrenExpr"),
setChildren: !containerKeyGetter && !containerKeySetter && this._createOptionSetter("nodes.containerChildrenExpr")
},
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")) && function(obj) {
var lineType = lineOptionGetter(obj);
return this._getConnectorLineOption(lineType)
}.bind(this),
setLineOption: (lineOptionSetter = this._createOptionSetter("edges.lineTypeExpr")) && function(obj, value) {
switch (value) {
case ConnectorLineOption.Straight:
value = "straight";
break;
case ConnectorLineOption.Orthogonal:
value = "orthogonal"
}
lineOptionSetter(obj, value)
}.bind(this),
getStartLineEnding: (startLineEndingGetter = this._createOptionGetter("edges.fromLineEndExpr")) && function(obj) {
var lineEnd = startLineEndingGetter(obj);
return this._getConnectorLineEnding(lineEnd)
}.bind(this),
setStartLineEnding: (startLineEndingSetter = this._createOptionSetter("edges.fromLineEndExpr")) && function(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)
}.bind(this),
getEndLineEnding: (endLineEndingGetter = this._createOptionGetter("edges.toLineEndExpr")) && function(obj) {
var lineEnd = endLineEndingGetter(obj);
return this._getConnectorLineEnding(lineEnd)
}.bind(this),
setEndLineEnding: (endLineEndingSetter = this._createOptionSetter("edges.toLineEndExpr")) && function(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)
}.bind(this)
},
layoutParameters