dockview-react 4.2.4 → 4.3.0

package/dist/dockview-react.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 4.2.4
+ * @version 4.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -675,9 +675,7 @@
   function shiftAbsoluteElementIntoView(element, root, options = { buffer: 10 }) {
       const buffer = options.buffer;
       const rect = element.getBoundingClientRect();
-      const rootRect = element.getBoundingClientRect();
-      const viewportWidth = root.clientWidth;
-      const viewportHeight = root.clientHeight;
+      const rootRect = root.getBoundingClientRect();
       let translateX = 0;
       let translateY = 0;
       const left = rect.left - rootRect.left;
@@ -688,15 +686,15 @@
       if (left < buffer) {
           translateX = buffer - left;
       }
-      else if (right > viewportWidth - buffer) {
-          translateX = viewportWidth - right - buffer;
+      else if (right > buffer) {
+          translateX = -buffer - right;
       }
       // Check vertical overflow
       if (top < buffer) {
           translateY = buffer - top;
       }
-      else if (bottom > viewportHeight - buffer) {
-          translateY = viewportHeight - bottom - buffer;
+      else if (bottom > buffer) {
+          translateY = -bottom - buffer;
       }
       // Apply the translation if needed
       if (translateX !== 0 || translateY !== 0) {
@@ -3989,9 +3987,9 @@
               onDragOver: (e) => {
                   var _a, _b, _c, _d, _e, _f, _g;
                   Droptarget.ACTUAL_TARGET = this;
-                  const overrideTraget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+                  const overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
                   if (this._acceptedTargetZonesSet.size === 0) {
-                      if (overrideTraget) {
+                      if (overrideTarget) {
                           return;
                       }
                       this.removeDropTarget();
@@ -4018,7 +4016,7 @@
                       return;
                   }
                   if (!this.options.canDisplayOverlay(e, quadrant)) {
-                      if (overrideTraget) {
+                      if (overrideTarget) {
                           return;
                       }
                       this.removeDropTarget();
@@ -4038,7 +4036,7 @@
                       return;
                   }
                   this.markAsUsed(e);
-                  if (overrideTraget) ;
+                  if (overrideTarget) ;
                   else if (!this.targetElement) {
                       this.targetElement = document.createElement('div');
                       this.targetElement.className = 'dv-drop-target-dropzone';
@@ -4977,6 +4975,8 @@
       var _a, _b;
       // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
       addClasses(ghostElement, 'dv-dragged');
+      // move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
+      ghostElement.style.top = '-9999px';
       document.body.appendChild(ghostElement);
       dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
       setTimeout(() => {
@@ -5145,7 +5145,7 @@
               this.accessor.doSetGroupActive(this.group);
           }));
           const handler = new GroupDragHandler(this._element, accessor, group);
-          this.dropTraget = new Droptarget(this._element, {
+          this.dropTarget = new Droptarget(this._element, {
               acceptedTargetZones: ['center'],
               canDisplayOverlay: (event, position) => {
                   const data = getPanelData();
@@ -5156,12 +5156,12 @@
               },
               getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
           });
-          this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
+          this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
           this.addDisposables(handler, handler.onDragStart((event) => {
               this._onDragStart.fire(event);
-          }), this.dropTraget.onDrop((event) => {
+          }), this.dropTarget.onDrop((event) => {
               this._onDrop.fire(event);
-          }), this.dropTraget);
+          }), this.dropTarget);
       }
   }
 
@@ -8449,9 +8449,11 @@
               const gready = document.createElement('div');
               gready.className = 'dv-overlay-render-container';
               const overlayRenderContainer = new OverlayRenderContainer(gready, this);
-              const referenceGroup = itemToPopout instanceof DockviewPanel
-                  ? itemToPopout.group
-                  : itemToPopout;
+              const referenceGroup = (options === null || options === void 0 ? void 0 : options.referenceGroup)
+                  ? options.referenceGroup
+                  : itemToPopout instanceof DockviewPanel
+                      ? itemToPopout.group
+                      : itemToPopout;
               const referenceLocation = itemToPopout.api.location.type;
               /**
                * The group that is being added doesn't already exist within the DOM, the most likely occurance
@@ -8939,7 +8941,7 @@
           return result;
       }
       fromJSON(data) {
-          var _a, _b, _c;
+          var _a, _b;
           this.clear();
           if (typeof data !== 'object' || data === null) {
               throw new Error('serialized layout must be a non-null object');
@@ -9011,12 +9013,11 @@
               for (const serializedPopoutGroup of serializedPopoutGroups) {
                   const { data, position, gridReferenceGroup, url } = serializedPopoutGroup;
                   const group = createGroupFromSerializedState(data);
-                  this.addPopoutGroup((_c = (gridReferenceGroup
-                      ? this.getPanel(gridReferenceGroup)
-                      : undefined)) !== null && _c !== void 0 ? _c : group, {
+                  this.addPopoutGroup(group, {
                       position: position !== null && position !== void 0 ? position : undefined,
-                      overridePopoutGroup: gridReferenceGroup
-                          ? group
+                      overridePopoutGroup: gridReferenceGroup ? group : undefined,
+                      referenceGroup: gridReferenceGroup
+                          ? this.getPanel(gridReferenceGroup)
                           : undefined,
                       popoutUrl: url,
                   });