Allow dragging tabs on empty panel

ticlo · Oct 13, 2023 · 723b62d · 723b62d
1 parent a954353
commit 723b62d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 20 deletions.
diff --git a/lib/DockPanel.js b/lib/DockPanel.js
@@ -256,23 +256,30 @@ class DockPanel extends React.PureComponent {
             const lastTab = thisPanelData.tabs[thisPanelData.tabs.length - 1];
             const direction = 'after-tab';
             const dockTabElements = this._ref.querySelectorAll('.dock-tab');
-            const dockTabLastElement = dockTabElements[dockTabElements.length - 1];
-            const dockTabLastRect = dockTabLastElement.querySelector('.dock-tab-hit-area');
-            if (e.clientX - this._ref.offsetLeft < 30) {
+            let rectElement = this._ref.querySelector('.dock-nav-list');
+            if (dockTabElements.length) {
+                const dockTabLastElement = dockTabElements[dockTabElements.length - 1];
+                rectElement = dockTabLastElement.querySelector('.dock-tab-hit-area');
+            }
+            if (!lastTab) {
+                e.accept();
+                this.context.setDropRect(rectElement, direction, this);
+            }
+            else if (e.clientX - this._ref.offsetLeft < 30) {
                 // do not allow drop on the left side of the tab
             }
-            else if (group !== lastTab.group) {
+            else if (group !== (lastTab === null || lastTab === void 0 ? void 0 : lastTab.group)) {
                 e.reject();
             }
             else if ((tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.floatable) === 'singleTab' && ((_b = (_a = lastTab.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.mode) === 'float') {
                 e.reject();
             }
             else if (tab && tab !== lastTab) {
-                this.context.setDropRect(dockTabLastRect, direction, this);
+                this.context.setDropRect(rectElement, direction, this);
                 e.accept('');
             }
-            else if (panel && panel !== lastTab.parent) {
-                this.context.setDropRect(dockTabLastRect, direction, this);
+            else if (panel && panel !== (lastTab === null || lastTab === void 0 ? void 0 : lastTab.parent)) {
+                this.context.setDropRect(rectElement, direction, this);
                 e.accept('');
             }
         };
@@ -289,11 +296,12 @@ class DockPanel extends React.PureComponent {
             const direction = 'after-tab';
             const thisPanelData = this.props.panelData;
             const lastTab = thisPanelData.tabs[thisPanelData.tabs.length - 1];
+            const target = lastTab ? lastTab : thisPanelData;
             if (tab && tab !== lastTab) {
-                this.context.dockMove(tab, lastTab, direction);
+                this.context.dockMove(tab, target, direction);
             }
-            else if (panel && panel !== lastTab.parent) {
-                this.context.dockMove(panel, lastTab, direction);
+            else if (panel && panel !== (lastTab === null || lastTab === void 0 ? void 0 : lastTab.parent)) {
+                this.context.dockMove(panel, target, direction);
             }
         };
         this._unmounted = false;

diff --git a/src/DockPanel.tsx b/src/DockPanel.tsx
@@ -286,20 +286,28 @@ export class DockPanel extends React.PureComponent<Props, State> {
     const direction = 'after-tab';
 
     const dockTabElements = this._ref.querySelectorAll('.dock-tab');
-    const dockTabLastElement = dockTabElements[dockTabElements.length - 1];
-    const dockTabLastRect:HTMLElement = dockTabLastElement.querySelector('.dock-tab-hit-area');
 
-    if(e.clientX - this._ref.offsetLeft < 30) {
+    let rectElement:HTMLElement = this._ref.querySelector('.dock-nav-list');
+
+    if (dockTabElements.length) {
+      const dockTabLastElement = dockTabElements[dockTabElements.length - 1];
+      rectElement = dockTabLastElement.querySelector('.dock-tab-hit-area');
+    }
+
+    if(!lastTab){
+      e.accept();
+      this.context.setDropRect(rectElement, direction, this);
+    }else if(e.clientX - this._ref.offsetLeft < 30) {
       // do not allow drop on the left side of the tab
-    } else if (group !== lastTab.group) {
+    }else if (group !== lastTab?.group) {
       e.reject();
     } else if (tabGroup?.floatable === 'singleTab' && lastTab.parent?.parent?.mode === 'float') {
       e.reject();
     } else if (tab && tab !== lastTab) {
-      this.context.setDropRect(dockTabLastRect, direction, this);
+      this.context.setDropRect(rectElement, direction, this);
       e.accept('');
-    } else if (panel && panel !== lastTab.parent) {
-      this.context.setDropRect(dockTabLastRect, direction, this);
+    } else if (panel && panel !== lastTab?.parent) {
+      this.context.setDropRect(rectElement, direction, this);
       e.accept('');
     }
   }
@@ -319,10 +327,12 @@ export class DockPanel extends React.PureComponent<Props, State> {
     const thisPanelData = this.props.panelData;
     const lastTab = thisPanelData.tabs[thisPanelData.tabs.length - 1];
 
+    const target = lastTab ? lastTab : thisPanelData;
+
     if (tab && tab !== lastTab) {
-      this.context.dockMove(tab, lastTab, direction);
-    } else if (panel && panel !== lastTab.parent) {
-      this.context.dockMove(panel, lastTab, direction);
+      this.context.dockMove(tab, target, direction);
+    } else if (panel && panel !== lastTab?.parent) {
+      this.context.dockMove(panel, target, direction);
     }
   }