dockview-react 4.2.4 → 4.3.0

package/dist/dockview-react.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 4.2.4
+ * @version 4.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -645,9 +645,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;
@@ -658,15 +656,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) {
@@ -3959,9 +3957,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();
@@ -3988,7 +3986,7 @@
                         return;
                     }
                     if (!this.options.canDisplayOverlay(e, quadrant)) {
-                        if (overrideTraget) {
+                        if (overrideTarget) {
                             return;
                         }
                         this.removeDropTarget();
@@ -4008,7 +4006,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';
@@ -4947,6 +4945,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(() => {
@@ -5115,7 +5115,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();
@@ -5126,12 +5126,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);
         }
     }
 
@@ -8419,9 +8419,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
@@ -8909,7 +8911,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');
@@ -8981,12 +8983,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,
                     });