Add new way of dealing with non-existing tabset

MetaCell · Jan 7, 2025 · 4ce2dc1 · 4ce2dc1
1 parent 2344787
commit 4ce2dc1
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 37 deletions.
diff --git a/examples/layout-manager-playground/src/layout/defaultLayout.js b/examples/layout-manager-playground/src/layout/defaultLayout.js
@@ -21,7 +21,34 @@ export default {
     id: "root",
     weight: 100,
     children: [
+      {
+        type: "row",
+        enableDeleteWhenEmpty: true,
+        weight:60,
+        children:[
+          { type: "row",
+            id: "top",
 
+            children: [{ type: "tabset",
+              id: "topLeft",
+              enableDeleteWhenEmpty: false,
+              children: [] ,
+              weight: 30,
+            },{ type: "tabset",
+              id: "topRight",
+              enableDeleteWhenEmpty: false,
+              children: [] ,
+              weight: 70,
+            }] ,
+            weight: 30,
+          },
+          { type: "tabset",
+            id: "bottom",
+            enableDeleteWhenEmpty: false,
+            weight: 70,
+            children: [] }
+        ]
+      },
 
     ]
   }

diff --git a/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx b/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx
@@ -383,7 +383,7 @@ export class LayoutManager {
 
 
         let empty = true;
-        for (let child of node.getChildren()) {
+        for (const child of node.getChildren()) {
           empty = this.fixRowRecursive(child) && empty;
         }
 

diff --git a/geppetto.js/geppetto-client/src/common/layout/helpers/FlexLayoutHelper.ts b/geppetto.js/geppetto-client/src/common/layout/helpers/FlexLayoutHelper.ts
@@ -1,5 +1,5 @@
 
-import {TabsetPosition} from "../model";
+import {BaseNode, TabsetPosition} from "../model";
 // @ts-ignore
 import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src/index';
 
@@ -16,43 +16,42 @@ import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src/index';
 export function createTabSet(model, tabsetID, position = TabsetPosition.RIGHT, weight = 50) {
     const rootNode = model.getNodeById("root");
 
-    // const tabset = new FlexLayout.TabSetNode(model, { id: tabsetID });
+    const tabset = new FlexLayout.TabSetNode(model, { id: tabsetID });
+    switch (position) {
+        case TabsetPosition.RIGHT:
+            rootNode.getChildren().forEach(node => node.setWeight(100 - weight));
+            rootNode.addChild(tabset);
+            break;
+        case TabsetPosition.LEFT:
+            rootNode.getChildren().forEach(node => node.setWeight(100 - weight));
+            rootNode.addChild(tabset, 0);
+            break;
+        case TabsetPosition.BOTTOM:
+        case TabsetPosition.TOP: {
 
-    // switch (position) {
-    //     case TabsetPosition.RIGHT:
-    //         rootNode.getChildren().forEach(node => node.setWeight(100 - weight));
-    //         rootNode.addChild(tabset);
-    //         break;
-    //     case TabsetPosition.LEFT:
-    //         rootNode.getChildren().forEach(node => node.setWeight(100 - weight));
-    //         rootNode.addChild(tabset, 0);
-    //         break;
-    //     case TabsetPosition.BOTTOM:
-    //     case TabsetPosition.TOP: {
+            model.doAction(FlexLayout.Actions.updateNodeAttributes(tabset.getId(), {weight: 80}))
 
-    //         tabset.setWeight(80);
-    //         const hrow = new FlexLayout.RowNode(model, rootNode.windowId, {});
-    //         hrow.setWeight(100);
+            const hrow = new FlexLayout.RowNode(model, rootNode.windowId, {});
+            model.doAction(FlexLayout.Actions.updateNodeAttributes(hrow.getId(), {weight: 100}))
 
-    //         rootNode.getChildren().forEach(child => {
-    //             if (child['getWeight']) {
-    //                 const newWeight = (child as FlexLayout.TabSetNode).getWeight() / 2;
-    //                 child.setWeight(newWeight);
-    //                 hrow.addChild(child);
-    //             }
-    //         });
-    //         if (position === TabsetPosition.BOTTOM) {
-    //             hrow.addChild(tabset)
-    //         } else {
-    //             hrow.addChild(tabset, 0);
-    //         }
+            rootNode.getChildren().forEach(child => {
+                if (child.getWeight) {
+                    const newWeight = (child as FlexLayout.TabSetNode).getWeight() / 2;
+                    child.setWeight(newWeight);
+                    model.doAction(FlexLayout.Actions.moveNode((child as BaseNode).getId(), hrow.getId(), FlexLayout.DockLocation.CENTER, -1))
+                }
+            });
+            if (position === TabsetPosition.BOTTOM) {
+                model.doAction(FlexLayout.Actions.moveNode(tabset.getId(), hrow.getId(), FlexLayout.DockLocation.CENTER, -1))
+            } else {
+                model.doAction(FlexLayout.Actions.moveNode(tabset.getId(), hrow.getId(), FlexLayout.DockLocation.CENTER, 0))
+            }
 
-    //         rootNode._removeAll();
-    //         rootNode.addChild(hrow, 0);
-    //     }
-    // }
-    // return tabset
-    return undefined
+            rootNode._removeAll();
+            rootNode.addChild(hrow, 0);
+        }
+    }
+    return tabset
 }
 
 export function moveWidget(model, widget) {

diff --git a/geppetto.js/geppetto-ui/src/flex-layout/src/model/RowNode.ts b/geppetto.js/geppetto-ui/src/flex-layout/src/model/RowNode.ts
@@ -51,7 +51,6 @@ export class RowNode extends Node implements IDropTarget {
     /** @internal */
     private maxWidth: number;
 
-    /** @internal */
     constructor(model: Model, windowId: string, json: any) {
         super(model);
 

diff --git a/geppetto.js/geppetto-ui/src/flex-layout/src/model/TabSetNode.ts b/geppetto.js/geppetto-ui/src/flex-layout/src/model/TabSetNode.ts
@@ -60,7 +60,6 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
     /** @internal */
     private calculatedMaxWidth: number;
 
-    /** @internal */
     constructor(model: Model, json: any) {
         super(model);
         this.calculatedMinHeight = 0;