devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
269 lines (267 loc) • 9.65 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/diagram/ui.diagram.floating_panel.js)
* Version: 25.2.3
* Build date: Fri Dec 12 2025
*
* Copyright (c) 2012 - 2025 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 _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _extend = require("../../../core/utils/extend");
var _size = require("../../../core/utils/size");
var _window = require("../../../core/utils/window");
var _uiDiagram = _interopRequireDefault(require("../../ui/diagram/ui.diagram.panel"));
var _m_popup = _interopRequireDefault(require("../../ui/popup/m_popup"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const DIAGRAM_MOBILE_POPUP_CLASS = "dx-diagram-mobile-popup";
class DiagramFloatingPanel extends _uiDiagram.default {
_init() {
super._init();
this._createOnVisibilityChangingAction();
this._createOnVisibilityChangedAction()
}
isVisible() {
const {
isVisible: isVisible
} = this.option();
return isVisible
}
isMobileView() {
const {
isMobileView: isMobileView
} = this.option();
return isMobileView
}
_initMarkup() {
super._initMarkup();
const $parent = this.$element();
const $popupElement = (0, _renderer.default)("<div>").addClass(this._getPopupClass()).addClass(this.isMobileView() && "dx-diagram-mobile-popup").appendTo($parent);
this._popup = this._createComponent($popupElement, _m_popup.default, this._getPopupOptions());
this._updatePopupVisible()
}
show() {
this.option("isVisible", true)
}
hide() {
this.option("isVisible", false)
}
toggle() {
this.option("isVisible", !this.isVisible())
}
repaint() {
var _this$_popup;
null === (_this$_popup = this._popup) || void 0 === _this$_popup || _this$_popup.repaint()
}
_getPopupContent() {
var _this$_popup2;
return null === (_this$_popup2 = this._popup) || void 0 === _this$_popup2 ? void 0 : _this$_popup2.content()
}
_getPopupTitle() {
const $content = (0, _renderer.default)(this._getPopupContent());
return $content.parent().find(".dx-popup-title")
}
_getPointerUpElements() {
return [this._getPopupContent(), this._getPopupTitle()]
}
_getVerticalPaddingsAndBorders() {
const $content = (0, _renderer.default)(this._getPopupContent());
return (0, _size.getOuterHeight)($content) - (0, _size.getHeight)($content)
}
_getHorizontalPaddingsAndBorders() {
const $content = (0, _renderer.default)(this._getPopupContent());
return (0, _size.getOuterWidth)($content) - (0, _size.getWidth)($content)
}
_getPopupClass() {
return ""
}
_getPopupWidth() {
const {
width: width
} = this.option();
return width ?? "auto"
}
_getPopupMaxWidth() {
const {
maxWidth: maxWidth
} = this.option();
return maxWidth
}
_getPopupMinWidth() {
const {
minWidth: minWidth
} = this.option();
return minWidth
}
_getPopupHeight() {
const {
height: height
} = this.option();
return height || "auto"
}
_getPopupMaxHeight() {
const {
maxHeight: maxHeight
} = this.option();
return maxHeight
}
_getPopupMinHeight() {
const {
minHeight: minHeight
} = this.option();
return minHeight
}
_getPopupPosition() {
return {}
}
_getPopupContainer() {
const {
container: container
} = this.option();
return container
}
_getPopupSlideAnimationObject(properties) {
return (0, _extend.extend)({
type: "slide",
start: () => {
(0, _renderer.default)("body").css("overflow", "hidden")
},
complete: () => {
(0, _renderer.default)("body").css("overflow", "")
}
}, properties)
}
_getPopupAnimation() {
return {
hide: {
type: "fadeOut"
},
show: {
type: "fadeIn"
}
}
}
_getPopupOptions() {
const that = this;
let wrapperClass = this._getPopupClass();
if (this.isMobileView()) {
wrapperClass += " dx-diagram-mobile-popup"
}
return {
animation: (0, _window.hasWindow)() ? this._getPopupAnimation() : null,
shading: false,
showTitle: false,
focusStateEnabled: false,
container: this._getPopupContainer(),
width: this._getPopupWidth(),
height: this._getPopupHeight(),
maxWidth: this._getPopupMaxWidth(),
maxHeight: this._getPopupMaxHeight(),
minWidth: this._getPopupMinWidth(),
minHeight: this._getPopupMinHeight(),
position: this._getPopupPosition(),
showCloseButton: true,
wrapperAttr: {
class: wrapperClass
},
onContentReady() {
var _that$_popup;
that._renderPopupContent(null === (_that$_popup = that._popup) || void 0 === _that$_popup ? void 0 : _that$_popup.content())
},
onShowing: () => {
this._onVisibilityChangingAction({
visible: true,
component: this
})
},
onShown: () => {
this.option("isVisible", true);
this._onVisibilityChangedAction({
visible: true,
component: this
})
},
onHiding: () => {
this._onVisibilityChangingAction({
visible: false,
component: this
})
},
onHidden: () => {
this.option("isVisible", false);
this._onVisibilityChangedAction({
visible: false,
component: this
})
}
}
}
_renderPopupContent($parent) {}
_updatePopupVisible() {
var _this$_popup3;
null === (_this$_popup3 = this._popup) || void 0 === _this$_popup3 || _this$_popup3.option("visible", this.isVisible())
}
_createOnVisibilityChangingAction() {
this._onVisibilityChangingAction = this._createActionByOption("onVisibilityChanging")
}
_createOnVisibilityChangedAction() {
this._onVisibilityChangedAction = this._createActionByOption("onVisibilityChanged")
}
_optionChanged(args) {
var _this$_popup4, _this$_popup5, _this$_popup6, _this$_popup7, _this$_popup8, _this$_popup9, _this$_popup10;
switch (args.name) {
case "onVisibilityChanging":
this._createOnVisibilityChangingAction();
break;
case "onVisibilityChanged":
this._createOnVisibilityChangedAction();
break;
case "container":
null === (_this$_popup4 = this._popup) || void 0 === _this$_popup4 || _this$_popup4.option("container", this._getPopupContainer());
break;
case "width":
null === (_this$_popup5 = this._popup) || void 0 === _this$_popup5 || _this$_popup5.option("width", this._getPopupWidth());
break;
case "height":
null === (_this$_popup6 = this._popup) || void 0 === _this$_popup6 || _this$_popup6.option("height", this._getPopupHeight());
break;
case "maxWidth":
null === (_this$_popup7 = this._popup) || void 0 === _this$_popup7 || _this$_popup7.option("maxWidth", this._getPopupMaxWidth());
break;
case "maxHeight":
null === (_this$_popup8 = this._popup) || void 0 === _this$_popup8 || _this$_popup8.option("maxHeight", this._getPopupMaxHeight());
break;
case "minWidth":
null === (_this$_popup9 = this._popup) || void 0 === _this$_popup9 || _this$_popup9.option("minWidth", this._getPopupMinWidth());
break;
case "minHeight":
null === (_this$_popup10 = this._popup) || void 0 === _this$_popup10 || _this$_popup10.option("minHeight", this._getPopupMinHeight());
break;
case "isMobileView":
this._invalidate();
break;
case "isVisible":
this._updatePopupVisible();
break;
default:
super._optionChanged(args)
}
}
_getDefaultOptions() {
return (0, _extend.extend)(super._getDefaultOptions(), {
isVisible: true,
isMobileView: false,
offsetX: 0,
offsetY: 0
})
}
}
var _default = exports.default = DiagramFloatingPanel;