dockview 1.9.0 → 1.9.1

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.9.0
+ * @version 1.9.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -3132,9 +3132,6 @@
       }
   }
 
-  function numberOrFallback(maybeNumber, fallback) {
-      return typeof maybeNumber === 'number' ? maybeNumber : fallback;
-  }
   function directionToPosition(direction) {
       switch (direction) {
           case 'above':
@@ -3167,6 +3164,16 @@
               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;
@@ -3227,7 +3234,7 @@
                       this.element.append(this.targetElement);
                   }
                   this.toggleClasses(quadrant, width, height);
-                  this.setState(quadrant);
+                  this._state = quadrant;
               },
               onDragLeave: () => {
                   this.removeDropTarget();
@@ -3252,6 +3259,9 @@
       setTargetZones(acceptedTargetZones) {
           this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
       }
+      setOverlayModel(model) {
+          this.options.overlayModel = model;
+      }
       dispose() {
           this.removeDropTarget();
           super.dispose();
@@ -3263,19 +3273,19 @@
           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';
@@ -3284,20 +3294,17 @@
           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;
@@ -3319,39 +3326,22 @@
               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) {
@@ -4543,6 +4533,21 @@
               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
@@ -6551,6 +6556,10 @@
       }
   }
 
+  const DEFAULT_ROOT_OVERLAY_MODEL = {
+      activationSize: { type: 'pixels', value: 10 },
+      size: { type: 'pixels', value: 20 },
+  };
   function getTheme(element) {
       function toClassList(element) {
           const list = [];
@@ -6595,7 +6604,7 @@
           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,
@@ -6659,7 +6668,7 @@
               !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) {
@@ -6692,12 +6701,9 @@
                   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) {
@@ -6706,7 +6712,7 @@
               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();
       }
@@ -6869,15 +6875,17 @@
       }
       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':
@@ -6899,6 +6907,9 @@
                   group.overlay.setBounds({});
               }
           }
+          if (changed_rootOverlayOptions) {
+              this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
+          }
           this.layout(this.gridview.width, this.gridview.height, true);
       }
       layout(width, height, forceResize) {
@@ -8874,6 +8885,7 @@
               floatingGroupBounds: props.floatingGroupBounds,
               defaultRenderer: props.defaultRenderer,
               debug: props.debug,
+              rootOverlayModel: props.rootOverlayModel,
           });
           const { clientWidth, clientHeight } = domRef.current;
           dockview.layout(clientWidth, clientHeight);
@@ -8981,6 +8993,14 @@
               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;