UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

216 lines (215 loc) • 8.08 kB
/** * DevExtreme (esm/ui/diagram/ui.diagram.properties_panel.js) * Version: 24.2.6 * Build date: Mon Mar 17 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import { getHeight, getOuterHeight } from "../../core/utils/size"; import $ from "../../core/renderer"; import { extend } from "../../core/utils/extend"; import ScrollView from "../scroll_view"; import TabPanel from "../tab_panel"; import DiagramFloatingPanel from "./ui.diagram.floating_panel"; import DiagramCommandsManager from "./diagram.commands_manager"; const DIAGRAM_PROPERTIES_POPUP_WIDTH = 420; const DIAGRAM_PROPERTIES_POPUP_HEIGHT = 340; const DIAGRAM_PROPERTIES_POPUP_CLASS = "dx-diagram-properties-popup"; const DIAGRAM_PROPERTIES_POPUP_NOTABS_CLASS = "dx-diagram-properties-popup-notabs"; const DIAGRAM_PROPERTIES_PANEL_CLASS = "dx-diagram-properties-panel"; const DIAGRAM_PROPERTIES_PANEL_GROUP_TITLE_CLASS = "dx-diagram-properties-panel-group-title"; const DIAGRAM_PROPERTIES_PANEL_GROUP_TOOLBAR_CLASS = "dx-diagram-properties-panel-group-toolbar"; class DiagramPropertiesPanel extends DiagramFloatingPanel { _init() { super._init(); this._commandTabs = DiagramCommandsManager.getPropertyPanelCommandTabs(this.option("propertyTabs")); this._createOnCreateToolbar(); this._createOnSelectedGroupChanged() } _initMarkup() { this._toolbars = []; this._selectedToolbar = void 0; super._initMarkup() } _getPopupClass() { let className = "dx-diagram-properties-popup"; if (!this._hasTabPanel()) { className += " dx-diagram-properties-popup-notabs" } return className } _getPopupWidth() { return this.isMobileView() ? "100%" : 420 } _getPopupHeight() { return 340 } _getPopupPosition() { const $parent = this.option("offsetParent"); if (this.isMobileView()) { return { my: "left bottom", at: "left bottom", of: $parent } } return { my: "right bottom", at: "right bottom", of: $parent, offset: "-" + this.option("offsetX") + " -" + this.option("offsetY") } } _getPopupAnimation() { const $parent = this.option("offsetParent"); if (this.isMobileView()) { return { hide: this._getPopupSlideAnimationObject({ direction: "bottom", from: { position: { my: "left bottom", at: "left bottom", of: $parent } }, to: { position: { my: "left top", at: "left bottom", of: $parent } } }), show: this._getPopupSlideAnimationObject({ direction: "top", from: { position: { my: "left top", at: "left bottom", of: $parent } }, to: { position: { my: "left bottom", at: "left bottom", of: $parent } } }) } } return super._getPopupAnimation() } _getPopupOptions() { return extend(super._getPopupOptions(), { showTitle: this.isMobileView(), showCloseButton: this.isMobileView() }) } _renderPopupContent($parent) { if (!this._commandTabs.length) { return } const $panel = $("<div>").addClass("dx-diagram-properties-panel").appendTo($parent); if (this._hasTabPanel()) { this._renderTabPanel($panel) } else { this._renderTabContent($panel, this._commandTabs[0], 0, true) } } _hasTabPanel() { return this._commandTabs.length > 1 } _renderTabPanel($parent) { const $tabPanel = $("<div>").appendTo($parent); this._tabPanel = this._createComponent($tabPanel, TabPanel, { focusStateEnabled: false, dataSource: this._commandTabs, itemTemplate: (data, index, $element) => { this._renderTabContent($element, data, index) }, onSelectionChanged: e => { this._onSelectedGroupChangedAction(); this._onPointerUpAction() }, onContentReady: e => { this._popup.option("height", getHeight(e.component.$element()) + this._getVerticalPaddingsAndBorders()); if (this._firstScrollView) { this._scrollViewHeight = getOuterHeight(this._firstScrollView.$element()); this._firstScrollView.option("height", this._scrollViewHeight) } } }) } _renderTabContent($parent, tab, index, isSingleTab) { const $scrollViewWrapper = $("<div>").appendTo($parent); const scrollView = this._createComponent($scrollViewWrapper, ScrollView, { height: this._scrollViewHeight }); this._renderTabInnerContent(scrollView.content(), tab, index); if (isSingleTab) { this._popup.option("height", getHeight(scrollView.$element()) + this._getVerticalPaddingsAndBorders()) } else { this._firstScrollView = this._firstScrollView || scrollView } } _renderTabInnerContent($parent, group, index) { if (group.groups) { group.groups.forEach(((sg, si) => { this._renderTabGroupContent($parent, index, sg.title, sg.commands) })) } else if (group.commands) { this._renderTabGroupContent($parent, index, void 0, group.commands) } } _renderTabGroupContent($parent, index, title, commands) { if (title) { $("<div>").addClass("dx-diagram-properties-panel-group-title").appendTo($parent).text(title) } const $toolbar = $("<div>").addClass("dx-diagram-properties-panel-group-toolbar").appendTo($parent); const args = { $parent: $toolbar, commands: commands }; this._onCreateToolbarAction(args); if (!this._toolbars[index]) { this._toolbars[index] = [] } this._toolbars[index].push(args.toolbar); this._selectedToolbar = args.toolbar } getActiveToolbars() { const index = this._tabPanel ? this._tabPanel.option("selectedIndex") : 0; return this._toolbars[index] } _createOnCreateToolbar() { this._onCreateToolbarAction = this._createActionByOption("onCreateToolbar") } _createOnSelectedGroupChanged() { this._onSelectedGroupChangedAction = this._createActionByOption("onSelectedGroupChanged") } _optionChanged(args) { switch (args.name) { case "onCreateToolbar": this._createOnCreateToolbar(); break; case "onSelectedGroupChanged": this._createOnSelectedGroupChanged(); break; case "propertyTabs": this._invalidate(); break; default: super._optionChanged(args) } } } export default DiagramPropertiesPanel;