dockview 1.9.0 → 1.9.2

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.9.0
+ * @version 1.9.2
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -3109,9 +3109,6 @@ class DragAndDropObserver extends CompositeDisposable {
     }
 }
 
-function numberOrFallback(maybeNumber, fallback) {
-    return typeof maybeNumber === 'number' ? maybeNumber : fallback;
-}
 function directionToPosition(direction) {
     switch (direction) {
         case 'above':
@@ -3144,6 +3141,16 @@ function positionToDirection(position) {
             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;
@@ -3204,7 +3211,7 @@ class Droptarget extends CompositeDisposable {
                     this.element.append(this.targetElement);
                 }
                 this.toggleClasses(quadrant, width, height);
-                this.setState(quadrant);
+                this._state = quadrant;
             },
             onDragLeave: () => {
                 this.removeDropTarget();
@@ -3229,6 +3236,9 @@ class Droptarget extends CompositeDisposable {
     setTargetZones(acceptedTargetZones) {
         this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
     }
+    setOverlayModel(model) {
+        this.options.overlayModel = model;
+    }
     dispose() {
         this.removeDropTarget();
         super.dispose();
@@ -3240,19 +3250,19 @@ class Droptarget extends CompositeDisposable {
         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';
@@ -3261,20 +3271,17 @@ class Droptarget extends CompositeDisposable {
         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;
@@ -3296,39 +3303,22 @@ class Droptarget extends CompositeDisposable {
             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) {
@@ -3502,11 +3492,11 @@ class ContentContainer extends CompositeDisposable {
     }
     closePanel() {
         if (this.panel) {
-            if (this.accessor.options.defaultRenderer === 'onlyWhenVisibile') {
+            if (this.panel.api.renderer === 'onlyWhenVisibile') {
                 this._element.removeChild(this.panel.view.content.element);
             }
-            this.panel = undefined;
         }
+        this.panel = undefined;
     }
     dispose() {
         this.disposable.dispose();
@@ -4257,6 +4247,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             if (!skipSetGroupActive) {
                 this.accessor.doSetGroupActive(this.groupPanel);
             }
+            this.contentContainer.renderPanel(panel, { asActive: true });
             return;
         }
         this.doAddPanel(panel, options.index, skipSetPanelActive);
@@ -4520,6 +4511,21 @@ class Resizable extends CompositeDisposable {
             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
@@ -6528,6 +6534,10 @@ class OverlayRenderContainer extends CompositeDisposable {
     }
 }
 
+const DEFAULT_ROOT_OVERLAY_MODEL = {
+    activationSize: { type: 'pixels', value: 10 },
+    size: { type: 'pixels', value: 20 },
+};
 function getTheme(element) {
     function toClassList(element) {
         const list = [];
@@ -6572,7 +6582,7 @@ class DockviewComponent extends BaseGrid {
         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 : Orientation.HORIZONTAL,
@@ -6636,7 +6646,7 @@ class DockviewComponent extends BaseGrid {
             !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) {
@@ -6669,12 +6679,9 @@ class DockviewComponent extends BaseGrid {
                 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) {
@@ -6683,7 +6690,7 @@ class DockviewComponent extends BaseGrid {
             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();
     }
@@ -6846,15 +6853,17 @@ class DockviewComponent extends BaseGrid {
     }
     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':
@@ -6876,6 +6885,9 @@ class DockviewComponent extends BaseGrid {
                 group.overlay.setBounds({});
             }
         }
+        if (changed_rootOverlayOptions) {
+            this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     }
     layout(width, height, forceResize) {
@@ -7257,7 +7269,7 @@ class DockviewComponent extends BaseGrid {
     }
     addGroup(options) {
         var _a;
-        const group = this.createGroup();
+        const group = this.createGroup(options);
         if (options) {
             let referenceGroup;
             if (isGroupOptionsWithPanel(options)) {
@@ -8851,6 +8863,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
             floatingGroupBounds: props.floatingGroupBounds,
             defaultRenderer: props.defaultRenderer,
             debug: props.debug,
+            rootOverlayModel: props.rootOverlayModel,
         });
         const { clientWidth, clientHeight } = domRef.current;
         dockview.layout(clientWidth, clientHeight);
@@ -8958,6 +8971,14 @@ const DockviewReact = React.forwardRef((props, ref) => {
             createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
         });
     }, [props.leftHeaderActionsComponent]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            rootOverlayModel: props.rootOverlayModel,
+        });
+    }, [props.rootOverlayModel]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;