devextreme/cjs/ui/diagram/ui.diagram.context_toolbox.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/ui/diagram/ui.diagram.context_toolbox.js)
 * Version: 23.2.6
 * Build date: Wed May 01 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */

"use strict";
exports.default = void 0;
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _ui = _interopRequireDefault(require("../widget/ui.widget"));
var _ui2 = _interopRequireDefault(require("../popover/ui.popover"));
var _diagram = require("./diagram.importer");
var _window = require("../../core/utils/window");

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 ? Object.setPrototypeOf.bind() : function(o, p) {
        o.__proto__ = p;
        return o
    };
    return _setPrototypeOf(o, p)
}
const DIAGRAM_CONTEXT_TOOLBOX_TARGET_CLASS = "dx-diagram-context-toolbox-target";
const DIAGRAM_CONTEXT_TOOLBOX_CLASS = "dx-diagram-context-toolbox";
const DIAGRAM_TOUCH_CONTEXT_TOOLBOX_CLASS = "dx-diagram-touch-context-toolbox";
const DIAGRAM_CONTEXT_TOOLBOX_CONTENT_CLASS = "dx-diagram-context-toolbox-content";
const DIAGRAM_CONTEXT_TOOLBOX_MINHEIGHT = 150;
let DiagramContextToolbox = function(_Widget) {
    _inheritsLoose(DiagramContextToolbox, _Widget);

    function DiagramContextToolbox() {
        return _Widget.apply(this, arguments) || this
    }
    var _proto = DiagramContextToolbox.prototype;
    _proto._init = function() {
        _Widget.prototype._init.call(this);
        this._onShownAction = this._createActionByOption("onShown");
        const window = (0, _window.getWindow)();
        this._popoverPositionData = [{
            my: {
                x: "center",
                y: "top"
            },
            at: {
                x: "center",
                y: "bottom"
            },
            offset: {
                x: 0,
                y: 5
            },
            calcMaxHeight: rect => Math.max(150, window.innerHeight - rect.bottom - 6)
        }, {
            my: {
                x: "right",
                y: "center"
            },
            at: {
                x: "left",
                y: "center"
            },
            offset: {
                x: -5,
                y: 0
            },
            calcMaxHeight: rect => Math.max(150, 2 * Math.min(rect.top, window.innerHeight - rect.bottom) - 2)
        }, {
            my: {
                x: "center",
                y: "bottom"
            },
            at: {
                x: "center",
                y: "top"
            },
            offset: {
                x: 0,
                y: -5
            },
            calcMaxHeight: rect => Math.max(150, rect.top - 6)
        }, {
            my: {
                x: "left",
                y: "center"
            },
            at: {
                x: "right",
                y: "center"
            },
            offset: {
                x: 5,
                y: 0
            },
            calcMaxHeight: rect => Math.max(150, 2 * Math.min(rect.top, window.innerHeight - rect.bottom) - 2)
        }]
    };
    _proto._initMarkup = function() {
        _Widget.prototype._initMarkup.call(this);
        this._$popoverTargetElement = (0, _renderer.default)("<div>").addClass("dx-diagram-context-toolbox-target").appendTo(this.$element());
        const $popoverElement = (0, _renderer.default)("<div>").addClass("dx-diagram-context-toolbox").appendTo(this.$element());
        if (this._isTouchMode()) {
            $popoverElement.addClass("dx-diagram-touch-context-toolbox")
        }
        this._popoverInstance = this._createComponent($popoverElement, _ui2.default, {
            hideOnOutsideClick: false,
            container: this.$element()
        })
    };
    _proto._isTouchMode = function() {
        const {
            Browser: Browser
        } = (0, _diagram.getDiagram)();
        return Browser.TouchUI
    };
    _proto._show = function(x, y, side, category, callback) {
        this._popoverInstance.hide();
        this._$popoverTargetElement.css({
            left: x + this._popoverPositionData[side].offset.x,
            top: y + this._popoverPositionData[side].offset.y
        }).show();
        const window = (0, _window.getWindow)();
        const targetDiv = this._$popoverTargetElement.get(0);
        this._$popoverTargetElement.css({
            left: targetDiv.offsetLeft - (targetDiv.getBoundingClientRect().left + window.scrollX - targetDiv.offsetLeft),
            top: targetDiv.offsetTop - (targetDiv.getBoundingClientRect().top + window.scrollY - targetDiv.offsetTop)
        });
        const posRect = targetDiv.getBoundingClientRect();
        this._popoverInstance.option({
            maxHeight: this._popoverPositionData[side].calcMaxHeight(posRect),
            width: void 0 !== this.option("toolboxWidth") ? this.option("toolboxWidth") : void 0,
            position: {
                my: this._popoverPositionData[side].my,
                at: this._popoverPositionData[side].at,
                of: this._$popoverTargetElement
            },
            contentTemplate: () => (0, _renderer.default)("<div>").append((0, _renderer.default)("<div>").addClass("dx-diagram-context-toolbox-content")).dxScrollView({
                width: "100%",
                height: "100%"
            }),
            onContentReady: () => {
                const $element = this.$element().find(".dx-diagram-context-toolbox-content");
                this._onShownAction({
                    category: category,
                    callback: callback,
                    $element: $element,
                    hide: () => this._popoverInstance.hide()
                })
            }
        });
        this._popoverInstance.show()
    };
    _proto._hide = function() {
        this._$popoverTargetElement.hide();
        this._popoverInstance.hide()
    };
    return DiagramContextToolbox
}(_ui.default);
var _default = DiagramContextToolbox;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;