devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
261 lines (260 loc) • 11.1 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/diagram/ui.diagram.context_menu.js)
* Version: 25.2.8
* Build date: Mon Jun 08 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import $ from "../../../core/renderer";
import ContextMenu from "../../../ui/context_menu";
import Widget from "../../core/widget/widget";
import DiagramBar from "../../ui/diagram/diagram.bar";
import DiagramCommandsManager from "../../ui/diagram/diagram.commands_manager";
import {
getDiagram
} from "../../ui/diagram/diagram.importer";
import DiagramMenuHelper from "../../ui/diagram/ui.diagram.menu_helper";
const DIAGRAM_TOUCHBAR_CLASS = "dx-diagram-touchbar";
const DIAGRAM_TOUCHBAR_OVERLAY_CLASS = "dx-diagram-touchbar-overlay";
const DIAGRAM_TOUCHBAR_TARGET_CLASS = "dx-diagram-touchbar-target";
const DIAGRAM_TOUCHBAR_MIN_UNWRAPPED_WIDTH = 800;
const DIAGRAM_TOUCHBAR_Y_OFFSET = 32;
class DiagramContextMenu extends ContextMenu {
_renderContextMenuOverlay() {
super._renderContextMenuOverlay();
if (this._overlay && this.option("isTouchBarMode")) {
this._overlay.option("onShown", () => {
var _this$_overlay;
const $content = $(null === (_this$_overlay = this._overlay) || void 0 === _this$_overlay ? void 0 : _this$_overlay.$content());
$content.parent().addClass("dx-diagram-touchbar-overlay")
})
}
}
}
class DiagramContextMenuBar extends DiagramBar {
getCommandKeys() {
return this._getKeys(this._owner._commands)
}
setItemValue(key, value) {
this._owner._setItemValue(key, value)
}
setItemEnabled(key, enabled) {
this._owner._setItemEnabled(key, enabled)
}
setItemVisible(key, visible) {
this._owner._setItemVisible(key, visible)
}
setItemSubItems(key, items) {
this._owner._setItemSubItems(key, items)
}
setEnabled(enabled) {
this._owner._setEnabled(enabled)
}
isVisible() {
return this._owner.isVisible()
}
}
class DiagramContextMenuWrapper extends Widget {
_init() {
super._init();
this._createOnVisibilityChangingAction();
this._createOnInternalCommand();
this._createOnCustomCommand();
this._createOnItemClickAction();
this._tempState = void 0;
this._commands = [];
this._commandToIndexMap = {};
this.bar = new DiagramContextMenuBar(this)
}
_initMarkup() {
super._initMarkup();
this._commands = this._getCommands();
this._commandToIndexMap = {};
this._fillCommandToIndexMap(this._commands, []);
this._$contextMenuTargetElement = $("<div>").addClass("dx-diagram-touchbar-target").appendTo(this.$element());
const $contextMenu = $("<div>").appendTo(this.$element());
this._contextMenuInstance = this._createComponent($contextMenu, DiagramContextMenu, {
isTouchBarMode: this._isTouchBarMode(),
cssClass: this._isTouchBarMode() ? "dx-diagram-touchbar" : DiagramMenuHelper.getContextMenuCssClass(),
hideOnOutsideClick: false,
showEvent: "",
focusStateEnabled: false,
items: this._commands,
position: this._isTouchBarMode() ? {
my: {
x: "center",
y: "bottom"
},
at: {
x: "center",
y: "top"
},
of: this._$contextMenuTargetElement
} : {},
itemTemplate(itemData, itemIndex, itemElement) {
DiagramMenuHelper.getContextMenuItemTemplate(this, itemData, itemIndex, itemElement)
},
onItemClick: _ref => {
let {
itemData: itemData
} = _ref;
return this._onItemClick(itemData)
},
onShowing: e => {
if (true === this._inOnShowing) {
return
}
this._inOnShowing = true;
this._onVisibilityChangingAction({
visible: true,
component: this
});
e.component.option("items", e.component.option("items"));
delete this._inOnShowing
}
})
}
_show(x, y, selection) {
var _this$_contextMenuIns;
null === (_this$_contextMenuIns = this._contextMenuInstance) || void 0 === _this$_contextMenuIns || _this$_contextMenuIns.hide();
if (this._isTouchBarMode()) {
var _this$_$contextMenuTa, _this$_$contextMenuTa2, _this$_contextMenuIns2;
null === (_this$_$contextMenuTa = this._$contextMenuTargetElement) || void 0 === _this$_$contextMenuTa || _this$_$contextMenuTa.show();
if (!selection) {
selection = {
x: x,
y: y,
width: 0,
height: 0
}
}
const widthCorrection = selection.width > 800 ? 0 : (800 - selection.width) / 2;
null === (_this$_$contextMenuTa2 = this._$contextMenuTargetElement) || void 0 === _this$_$contextMenuTa2 || _this$_$contextMenuTa2.css({
left: selection.x - widthCorrection,
top: selection.y - 32,
width: selection.width + 2 * widthCorrection,
height: selection.height + 64
});
null === (_this$_contextMenuIns2 = this._contextMenuInstance) || void 0 === _this$_contextMenuIns2 || _this$_contextMenuIns2.show()
} else {
var _this$_contextMenuIns3, _this$_contextMenuIns4;
null === (_this$_contextMenuIns3 = this._contextMenuInstance) || void 0 === _this$_contextMenuIns3 || _this$_contextMenuIns3.option("position", {
offset: `${x} ${y}`
});
null === (_this$_contextMenuIns4 = this._contextMenuInstance) || void 0 === _this$_contextMenuIns4 || _this$_contextMenuIns4.show()
}
}
_hide() {
var _this$_$contextMenuTa3, _this$_contextMenuIns5;
null === (_this$_$contextMenuTa3 = this._$contextMenuTargetElement) || void 0 === _this$_$contextMenuTa3 || _this$_$contextMenuTa3.hide();
null === (_this$_contextMenuIns5 = this._contextMenuInstance) || void 0 === _this$_contextMenuIns5 || _this$_contextMenuIns5.hide()
}
_isTouchBarMode() {
const {
Browser: Browser
} = getDiagram();
return Browser.TouchUI
}
_onItemClick(itemData) {
let processed = false;
if (this._onItemClickAction) {
processed = this._onItemClickAction(itemData)
}
if (!processed) {
var _this$_contextMenuIns6;
DiagramMenuHelper.onContextMenuItemClick(this, itemData, this._executeCommand.bind(this));
null === (_this$_contextMenuIns6 = this._contextMenuInstance) || void 0 === _this$_contextMenuIns6 || _this$_contextMenuIns6.hide()
}
}
_executeCommand(command, name, value) {
if ("number" === typeof command) {
var _this$bar;
null === (_this$bar = this.bar) || void 0 === _this$bar || _this$bar.raiseBarCommandExecuted(command, value)
} else if ("string" === typeof command) {
this._onInternalCommandAction({
command: command
})
}
if (void 0 !== name) {
this._onCustomCommandAction({
name: name
})
}
}
_createOnInternalCommand() {
this._onInternalCommandAction = this._createActionByOption("onInternalCommand")
}
_createOnCustomCommand() {
this._onCustomCommandAction = this._createActionByOption("onCustomCommand")
}
_getCommands() {
return DiagramCommandsManager.getContextMenuCommands(this.option("commands"))
}
_fillCommandToIndexMap(commands, indexPath) {
commands.forEach((command, index) => {
const commandIndexPath = indexPath.concat([index]);
if (void 0 !== command.command) {
this._commandToIndexMap[command.command] = commandIndexPath
}
if (Array.isArray(command.items)) {
this._fillCommandToIndexMap(command.items, commandIndexPath)
}
})
}
_setItemEnabled(key, enabled) {
this._setItemVisible(key, enabled)
}
_setItemVisible(key, visible) {
const itemOptionText = DiagramMenuHelper.getItemOptionText(this._contextMenuInstance, this._commandToIndexMap[key]);
DiagramMenuHelper.updateContextMenuItemVisible(this._contextMenuInstance, itemOptionText, visible)
}
_setItemValue(key, value) {
const itemOptionText = DiagramMenuHelper.getItemOptionText(this._contextMenuInstance, this._commandToIndexMap[key]);
DiagramMenuHelper.updateContextMenuItemValue(this._contextMenuInstance, itemOptionText, key, value)
}
_setItemSubItems(key, items) {
const itemOptionText = DiagramMenuHelper.getItemOptionText(this._contextMenuInstance, this._commandToIndexMap[key]);
DiagramMenuHelper.updateContextMenuItems(this._contextMenuInstance, itemOptionText, key, items)
}
_setEnabled(enabled) {
var _this$_contextMenuIns7;
null === (_this$_contextMenuIns7 = this._contextMenuInstance) || void 0 === _this$_contextMenuIns7 || _this$_contextMenuIns7.option("disabled", !enabled)
}
isVisible() {
return this._inOnShowing
}
_createOnVisibilityChangingAction() {
this._onVisibilityChangingAction = this._createActionByOption("onVisibilityChanging")
}
_createOnItemClickAction() {
this._onItemClickAction = this._createActionByOption("onItemClick")
}
_optionChanged(args) {
switch (args.name) {
case "onVisibilityChanging":
this._createOnVisibilityChangingAction();
break;
case "onInternalCommand":
this._createOnInternalCommand();
break;
case "onCustomCommand":
this._createOnCustomCommand();
break;
case "onItemClick":
this._createOnItemClickAction();
break;
case "commands":
this._invalidate();
break;
case "export":
break;
default:
super._optionChanged(args)
}
}
}
export default {
DiagramContextMenuWrapper: DiagramContextMenuWrapper,
DiagramContextMenu: DiagramContextMenu
};