devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
267 lines (266 loc) • 9.18 kB
JavaScript
/**
* DevExtreme (esm/__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/
*/
import $ from "../../../core/renderer";
import {
extend
} from "../../../core/utils/extend";
import {
getHeight,
getOuterHeight,
getOuterWidth,
getWidth
} from "../../../core/utils/size";
import {
hasWindow
} from "../../../core/utils/window";
import DiagramPanel from "../../ui/diagram/ui.diagram.panel";
import Popup from "../../ui/popup/m_popup";
const DIAGRAM_MOBILE_POPUP_CLASS = "dx-diagram-mobile-popup";
class DiagramFloatingPanel extends DiagramPanel {
_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 = $("<div>").addClass(this._getPopupClass()).addClass(this.isMobileView() && "dx-diagram-mobile-popup").appendTo($parent);
this._popup = this._createComponent($popupElement, Popup, 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 = $(this._getPopupContent());
return $content.parent().find(".dx-popup-title")
}
_getPointerUpElements() {
return [this._getPopupContent(), this._getPopupTitle()]
}
_getVerticalPaddingsAndBorders() {
const $content = $(this._getPopupContent());
return getOuterHeight($content) - getHeight($content)
}
_getHorizontalPaddingsAndBorders() {
const $content = $(this._getPopupContent());
return getOuterWidth($content) - 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 extend({
type: "slide",
start: () => {
$("body").css("overflow", "hidden")
},
complete: () => {
$("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: 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 extend(super._getDefaultOptions(), {
isVisible: true,
isMobileView: false,
offsetX: 0,
offsetY: 0
})
}
}
export default DiagramFloatingPanel;