Adjust selected tab after popout

caplin · Jun 1, 2021 · bb74567 · bb74567
1 parent cc156d5
commit bb74567
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 1 deletion.
diff --git a/ChangeLog.txt b/ChangeLog.txt
@@ -1,3 +1,6 @@
+0.5.10
+Adjust selected tab when tabs popped out to an external window
+
 0.5.9
 TitleFactory can now return object with titleContent and name (name is used for tab overflow menu).
 Corrected position of rootOrientationVertical in typescript json model

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.5.9",
+    "version": "0.5.10",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",

diff --git a/src/model/Model.ts b/src/model/Model.ts
@@ -15,6 +15,7 @@ import Node from "./Node";
 import RowNode from "./RowNode";
 import TabNode from "./TabNode";
 import TabSetNode from "./TabSetNode";
+import { adjustSelectedIndexAfterDock, adjustSelectedIndexAfterFloat } from "./Utils";
 
 /** @hidden @internal */
 export interface ILayoutMetrics {
@@ -260,13 +261,15 @@ class Model {
                 const node = this._idMap[action.data.node];
                 if (node instanceof TabNode) {
                     node._setFloating(true);
+                    adjustSelectedIndexAfterFloat(node);
                 }
                 break;
             }
             case Actions.UNFLOAT_TAB: {
                 const node = this._idMap[action.data.node];
                 if (node instanceof TabNode) {
                     node._setFloating(false);
+                    adjustSelectedIndexAfterDock(node);
                 }
                 break;
             }

diff --git a/src/model/Utils.ts b/src/model/Utils.ts
@@ -1,6 +1,48 @@
 import TabSetNode from "./TabSetNode";
 import BorderNode from "./BorderNode";
 import RowNode from "./RowNode";
+import TabNode from "./TabNode";
+
+/** @hidden @internal */
+export function adjustSelectedIndexAfterFloat(node: TabNode) {
+    const parent = node.getParent();
+    if (parent !== null) {
+        if (parent instanceof TabSetNode) {
+            let found = false;
+            let newSelected = 0;
+            const children = parent.getChildren();
+            for (let i = 0; i < children.length; i++) {
+                const child = children[i] as TabNode;
+                if (child === node) {
+                    found = true;
+                } else {
+                    if (!child.isFloating()) {
+                        newSelected = i;
+                        if (found) break;
+                    }
+                }
+            }
+            parent._setSelected(newSelected);
+        } else if (parent instanceof BorderNode) {
+            parent._setSelected(-1);
+        }
+    }
+}
+
+/** @hidden @internal */
+export function adjustSelectedIndexAfterDock(node: TabNode) {
+    const parent = node.getParent();
+    if (parent !== null && (parent instanceof TabSetNode || parent instanceof BorderNode)) {
+        const children = parent.getChildren();
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i] as TabNode;
+            if (child === node) {
+                parent._setSelected(i);
+                return;
+            }
+        }
+    }
+}
 
 /** @hidden @internal */
 export function adjustSelectedIndex(parent: TabSetNode | BorderNode | RowNode, removedIndex: number) {