Fixed panel to empty panel docking

ticlo · Oct 14, 2023 · 4bfdafd · 4bfdafd
1 parent 1e975ec
commit 4bfdafd
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 4 deletions.
diff --git a/es/DockLayout.js b/es/DockLayout.js
@@ -200,8 +200,10 @@ export class DockLayout extends DockPortalManager {
                 // panel target
                 if (direction === 'middle') {
                     layout = Algorithm.addTabToPanel(layout, source, target);
+                    console.log("Panel A");
                 }
                 else {
+                    console.log("Panel B");
                     let newPanel = Algorithm.converToPanel(source);
                     layout = Algorithm.dockPanelToPanel(layout, newPanel, target, direction);
                 }

diff --git a/es/DockPanel.js b/es/DockPanel.js
@@ -271,14 +271,18 @@ export class DockPanel extends React.PureComponent {
             else {
                 panel = DragManager.DragState.getData('panel', dockId);
             }
-            const direction = 'after-tab';
+            let direction = 'after-tab';
             const thisPanelData = this.props.panelData;
             const lastTab = thisPanelData.tabs[thisPanelData.tabs.length - 1];
             const target = lastTab ? lastTab : thisPanelData;
+            if (!lastTab) {
+                direction = 'middle';
+            }
             if (tab && tab !== lastTab) {
                 this.context.dockMove(tab, target, direction);
             }
             else if (panel && panel !== (lastTab === null || lastTab === void 0 ? void 0 : lastTab.parent)) {
+                console.log("dock move panel", panel, target, direction);
                 this.context.dockMove(panel, target, direction);
             }
         };

diff --git a/lib/DockLayout.js b/lib/DockLayout.js
@@ -225,8 +225,10 @@ class DockLayout extends DockPortalManager {
                 // panel target
                 if (direction === 'middle') {
                     layout = Algorithm.addTabToPanel(layout, source, target);
+                    console.log("Panel A");
                 }
                 else {
+                    console.log("Panel B");
                     let newPanel = Algorithm.converToPanel(source);
                     layout = Algorithm.dockPanelToPanel(layout, newPanel, target, direction);
                 }

diff --git a/lib/DockPanel.js b/lib/DockPanel.js
@@ -296,14 +296,18 @@ class DockPanel extends React.PureComponent {
             else {
                 panel = DragManager.DragState.getData('panel', dockId);
             }
-            const direction = 'after-tab';
+            let direction = 'after-tab';
             const thisPanelData = this.props.panelData;
             const lastTab = thisPanelData.tabs[thisPanelData.tabs.length - 1];
             const target = lastTab ? lastTab : thisPanelData;
+            if (!lastTab) {
+                direction = 'middle';
+            }
             if (tab && tab !== lastTab) {
                 this.context.dockMove(tab, target, direction);
             }
             else if (panel && panel !== (lastTab === null || lastTab === void 0 ? void 0 : lastTab.parent)) {
+                console.log("dock move panel", panel, target, direction);
                 this.context.dockMove(panel, target, direction);
             }
         };

diff --git a/src/DockLayout.tsx b/src/DockLayout.tsx
@@ -254,7 +254,9 @@ export class DockLayout extends DockPortalManager implements DockContext {
         // panel target
         if (direction === 'middle') {
           layout = Algorithm.addTabToPanel(layout, source, target as PanelData);
+          console.log("Panel A");
         } else {
+          console.log("Panel B");
           let newPanel = Algorithm.converToPanel(source);
           layout = Algorithm.dockPanelToPanel(layout, newPanel, target as PanelData, direction);
         }

diff --git a/src/DockPanel.tsx b/src/DockPanel.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import {DockContext, DockContextType, PanelData, TabData} from "./DockData";
+import {DockContext, DockContextType, DropDirection, PanelData, TabData} from "./DockData";
 import {DockTabs} from "./DockTabs";
 import {DragDropDiv} from "./dragdrop/DragDropDiv";
 import {DragState} from "./dragdrop/DragManager";
@@ -325,16 +325,20 @@ export class DockPanel extends React.PureComponent<Props, State> {
       panel = DragManager.DragState.getData('panel', dockId);
     }
 
-    const direction = 'after-tab';
+    let direction:DropDirection = 'after-tab';
 
     const thisPanelData = this.props.panelData;
     const lastTab = thisPanelData.tabs[thisPanelData.tabs.length - 1];
 
     const target = lastTab ? lastTab : thisPanelData;
 
+    if(!lastTab){
+      direction = 'middle';
+    }
     if (tab && tab !== lastTab) {
       this.context.dockMove(tab, target, direction);
     } else if (panel && panel !== lastTab?.parent) {
+      console.log("dock move panel", panel, target, direction);
       this.context.dockMove(panel, target, direction);
     }
   }