dockview 1.9.0 → 1.9.1

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.9.0
+ * @version 1.9.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -3098,9 +3098,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    function numberOrFallback(maybeNumber, fallback) {
-        return typeof maybeNumber === 'number' ? maybeNumber : fallback;
-    }
     function directionToPosition(direction) {
         switch (direction) {
             case 'above':
@@ -3133,6 +3130,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 throw new Error(`invalid position '${position}'`);
         }
     }
+    const DEFAULT_ACTIVATION_SIZE = {
+        value: 20,
+        type: 'percentage',
+    };
+    const DEFAULT_SIZE = {
+        value: 50,
+        type: 'percentage',
+    };
+    const SMALL_WIDTH_BOUNDARY = 100;
+    const SMALL_HEIGHT_BOUNDARY = 100;
     class Droptarget extends CompositeDisposable {
         get state() {
             return this._state;
@@ -3193,7 +3200,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         this.element.append(this.targetElement);
                     }
                     this.toggleClasses(quadrant, width, height);
-                    this.setState(quadrant);
+                    this._state = quadrant;
                 },
                 onDragLeave: () => {
                     this.removeDropTarget();
@@ -3218,6 +3225,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         setTargetZones(acceptedTargetZones) {
             this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
         }
+        setOverlayModel(model) {
+            this.options.overlayModel = model;
+        }
         dispose() {
             this.removeDropTarget();
             super.dispose();
@@ -3229,19 +3239,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             event[Droptarget.USED_EVENT_ID] = true;
         }
         /**
-         * Check is the event has already been used by another instance od DropTarget
+         * Check is the event has already been used by another instance of DropTarget
          */
         isAlreadyUsed(event) {
             const value = event[Droptarget.USED_EVENT_ID];
             return typeof value === 'boolean' && value;
         }
         toggleClasses(quadrant, width, height) {
-            var _a, _b, _c, _d;
+            var _a, _b;
             if (!this.overlayElement) {
                 return;
             }
-            const isSmallX = width < 100;
-            const isSmallY = height < 100;
+            const isSmallX = width < SMALL_WIDTH_BOUNDARY;
+            const isSmallY = height < SMALL_HEIGHT_BOUNDARY;
             const isLeft = quadrant === 'left';
             const isRight = quadrant === 'right';
             const isTop = quadrant === 'top';
@@ -3250,20 +3260,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const leftClass = !isSmallX && isLeft;
             const topClass = !isSmallY && isTop;
             const bottomClass = !isSmallY && isBottom;
-            let size = 0.5;
-            if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') {
-                size = clamp(this.options.overlayModel.size.value, 0, 100) / 100;
+            let size = 1;
+            const sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE;
+            if (sizeOptions.type === 'percentage') {
+                size = clamp(sizeOptions.value, 0, 100) / 100;
             }
-            if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') {
+            else {
                 if (rightClass || leftClass) {
-                    size =
-                        clamp(0, this.options.overlayModel.size.value, width) /
-                            width;
+                    size = clamp(0, sizeOptions.value, width) / width;
                 }
                 if (topClass || bottomClass) {
-                    size =
-                        clamp(0, this.options.overlayModel.size.value, height) /
-                            height;
+                    size = clamp(0, sizeOptions.value, height) / height;
                 }
             }
             const translate = (1 - size) / 2;
@@ -3285,39 +3292,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 transform = '';
             }
             this.overlayElement.style.transform = transform;
-            toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
-            toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
-            toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
-            toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom);
-        }
-        setState(quadrant) {
-            switch (quadrant) {
-                case 'top':
-                    this._state = 'top';
-                    break;
-                case 'left':
-                    this._state = 'left';
-                    break;
-                case 'bottom':
-                    this._state = 'bottom';
-                    break;
-                case 'right':
-                    this._state = 'right';
-                    break;
-                case 'center':
-                    this._state = 'center';
-                    break;
-            }
+            toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
+            toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
+            toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
+            toggleClass(this.overlayElement, 'dv-drop-target-right', isRight);
+            toggleClass(this.overlayElement, 'dv-drop-target-top', isTop);
+            toggleClass(this.overlayElement, 'dv-drop-target-bottom', isBottom);
+            toggleClass(this.overlayElement, 'dv-drop-target-center', quadrant === 'center');
         }
         calculateQuadrant(overlayType, x, y, width, height) {
-            var _a, _b, _c, _d, _e, _f;
-            const isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined ||
-                ((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage';
-            const value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20);
+            var _a, _b;
+            const activationSizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE;
+            const isPercentage = activationSizeOptions.type === 'percentage';
             if (isPercentage) {
-                return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value);
+                return calculateQuadrantAsPercentage(overlayType, x, y, width, height, activationSizeOptions.value);
             }
-            return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
+            return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value);
         }
         removeDropTarget() {
             if (this.targetElement) {
@@ -4509,6 +4499,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 if (this.disableResizing) {
                     return;
                 }
+                if (!this._element.offsetParent) {
+                    /**
+                     * offsetParent === null is equivalent to display: none being set on the element or one
+                     * of it's parents. In the display: none case the size will become (0, 0) which we do
+                     * not want to propagate.
+                     *
+                     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+                     *
+                     * You could use checkVisibility() but at the time of writing it's not supported across
+                     * all Browsers
+                     *
+                     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility
+                     */
+                    return;
+                }
                 if (!isInDocument(this._element)) {
                     /**
                      * since the event is dispatched through requestAnimationFrame there is a small chance
@@ -6517,6 +6522,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    const DEFAULT_ROOT_OVERLAY_MODEL = {
+        activationSize: { type: 'pixels', value: 10 },
+        size: { type: 'pixels', value: 20 },
+    };
     function getTheme(element) {
         function toClassList(element) {
             const list = [];
@@ -6561,7 +6570,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
         }
         constructor(options) {
-            var _a;
+            var _a, _b;
             super({
                 proportionalLayout: true,
                 orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.HORIZONTAL,
@@ -6625,7 +6634,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 !this.options.watermarkFrameworkComponent) {
                 this.options.watermarkComponent = Watermark;
             }
-            const dropTarget = new Droptarget(this.element, {
+            this._rootDropTarget = new Droptarget(this.element, {
                 canDisplayOverlay: (event, position) => {
                     const data = getPanelData();
                     if (data) {
@@ -6658,12 +6667,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     return false;
                 },
                 acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-                overlayModel: {
-                    activationSize: { type: 'pixels', value: 10 },
-                    size: { type: 'pixels', value: 20 },
-                },
+                overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
             });
-            this.addDisposables(dropTarget.onDrop((event) => {
+            this.addDisposables(this._rootDropTarget.onDrop((event) => {
                 var _a;
                 const data = getPanelData();
                 if (data) {
@@ -6672,7 +6678,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 else {
                     this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
                 }
-            }), dropTarget);
+            }), this._rootDropTarget);
             this._api = new DockviewApi(this);
             this.updateWatermark();
         }
@@ -6835,15 +6841,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         updateOptions(options) {
             var _a, _b;
-            const hasOrientationChanged = typeof options.orientation === 'string' &&
+            const changed_orientation = typeof options.orientation === 'string' &&
                 this.gridview.orientation !== options.orientation;
-            const hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+            const changed_floatingGroupBounds = options.floatingGroupBounds !== undefined &&
                 options.floatingGroupBounds !== this.options.floatingGroupBounds;
+            const changed_rootOverlayOptions = options.rootOverlayModel !== undefined &&
+                options.rootOverlayModel !== this.options.rootOverlayModel;
             this._options = Object.assign(Object.assign({}, this.options), options);
-            if (hasOrientationChanged) {
+            if (changed_orientation) {
                 this.gridview.orientation = options.orientation;
             }
-            if (hasFloatingGroupOptionsChanged) {
+            if (changed_floatingGroupBounds) {
                 for (const group of this._floatingGroups) {
                     switch (this.options.floatingGroupBounds) {
                         case 'boundedWithinViewport':
@@ -6865,6 +6873,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     group.overlay.setBounds({});
                 }
             }
+            if (changed_rootOverlayOptions) {
+                this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
+            }
             this.layout(this.gridview.width, this.gridview.height, true);
         }
         layout(width, height, forceResize) {
@@ -8840,6 +8851,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 floatingGroupBounds: props.floatingGroupBounds,
                 defaultRenderer: props.defaultRenderer,
                 debug: props.debug,
+                rootOverlayModel: props.rootOverlayModel,
             });
             const { clientWidth, clientHeight } = domRef.current;
             dockview.layout(clientWidth, clientHeight);
@@ -8947,6 +8959,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
             });
         }, [props.leftHeaderActionsComponent]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                rootOverlayModel: props.rootOverlayModel,
+            });
+        }, [props.rootOverlayModel]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;