Fix dynamic behavior for flex-layout

MetaCell · Jan 9, 2025 · cbbd226 · cbbd226
1 parent 4ce2dc1
commit cbbd226
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 23 deletions.
diff --git a/examples/layout-manager-playground/src/pages/HomePage.tsx b/examples/layout-manager-playground/src/pages/HomePage.tsx
@@ -18,11 +18,19 @@ import VisibilityOnIcon from '@mui/icons-material/Visibility';
 import Select, { type SelectChangeEvent } from '@mui/material/Select';
 import { getLayoutManagerInstance } from "@metacell/geppetto-meta-client/common/layout/LayoutManager";
 import { addWidget, updateWidget } from '@metacell/geppetto-meta-client/common/layout/actions';
-import { type Widget, WidgetStatus } from "@metacell/geppetto-meta-client/common/layout/model";
+import { TabsetPosition, type Widget, WidgetStatus } from "@metacell/geppetto-meta-client/common/layout/model";
+import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src/index';
 import '@metacell/geppetto-meta-ui/flex-layout/style/dark.scss'
 
 import { componentWidget } from "../widgets";
 
+const Positions = {
+  [TabsetPosition.BOTTOM]: TabsetPosition.BOTTOM,
+  [TabsetPosition.LEFT]: TabsetPosition.LEFT,
+  [TabsetPosition.RIGHT]: TabsetPosition.RIGHT,
+  [TabsetPosition.TOP]: TabsetPosition.TOP
+};
+
 const HomePage = () => {
   const store = useStore();
   const dispatch = useDispatch();
@@ -31,28 +39,30 @@ const HomePage = () => {
   // eslint-disable-next-line  @typescript-eslint/no-explicit-any
   const [LayoutComponent, setLayoutComponent] = useState<any | undefined>(undefined);
   const [panel, setPanel] = useState("topLeft");
+  const [location, setLocation] = useState(TabsetPosition.RIGHT)
   const [name, setName] = useState("Component 1");
   const [color, setColor] = useState("red");
 
   useEffect(() => {
     if (LayoutComponent === undefined) {
       const myManager = getLayoutManagerInstance();
       if (myManager) {
-      // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line  @typescript-eslint/no-explicit-any
         setLayoutComponent(myManager.getComponent() as React.ComponentType<any>);
       }
     }
   }, [store, LayoutComponent])
 
   const addComponent = () => {
-    dispatch(addWidget(componentWidget(name, color, panel)));
+    dispatch(addWidget(componentWidget(name, color, panel, location)));
   };
 
 
   const activateWidget = (widget: Widget) => {
     const updatedWidget = { ...widget };
     updatedWidget.status = WidgetStatus.ACTIVE;
     updatedWidget.panelName = panel;
+    updatedWidget.defaultPosition = Positions[location];
     dispatch(updateWidget(updatedWidget));
   };
 
@@ -66,7 +76,7 @@ const HomePage = () => {
       }}>
         <TextField id="outlined-basic" label="Name" variant="outlined" value={name} onChange={(event) =>
           setName(event.target.value as string)
-        }/>
+        } />
         <FormControl>
           <InputLabel id="name">Panel</InputLabel>
           <Select
@@ -98,14 +108,30 @@ const HomePage = () => {
             <MenuItem value={"orange"}>Orange</MenuItem>
           </Select>
         </FormControl>
+        <FormControl>
+          <InputLabel id="name">Position</InputLabel>
+          <Select
+            labelId="position"
+            value={location}
+            label="Position"
+            onChange={(event: SelectChangeEvent) =>
+              setLocation(Positions[event.target.value as string])
+            }
+          >
+            <MenuItem value={TabsetPosition.RIGHT}>Right</MenuItem>
+            <MenuItem value={TabsetPosition.LEFT}>Left</MenuItem>
+            <MenuItem value={TabsetPosition.TOP}>Top</MenuItem>
+            <MenuItem value={TabsetPosition.BOTTOM}>Bottom</MenuItem>
+          </Select>
+        </FormControl>
         <Button variant="contained" onClick={addComponent}>
-                    Add Component
+          Add Component
         </Button>
 
         {Object.values(widgets).map((widget: Widget, index: number) => (
           <Tooltip key={index} title={widget.name}>
             <IconButton onClick={() => activateWidget(widget)} disabled={widget.status === WidgetStatus.ACTIVE}>
-              {widget.status == WidgetStatus.ACTIVE ? <VisibilityOffIcon/> : <VisibilityOnIcon/>}
+              {widget.status == WidgetStatus.ACTIVE ? <VisibilityOffIcon /> : <VisibilityOnIcon />}
             </IconButton>
           </Tooltip>
         ))}
@@ -117,7 +143,7 @@ const HomePage = () => {
         width: '100%',
         height: '90vh',
       }}>
-        {LayoutComponent === undefined ? <CircularProgress/> : <LayoutComponent/>}
+        {LayoutComponent === undefined ? <CircularProgress /> : <LayoutComponent />}
       </Box>
     </Box>
   );

diff --git a/examples/layout-manager-playground/src/widgets.ts b/examples/layout-manager-playground/src/widgets.ts
@@ -2,7 +2,7 @@ import { WidgetStatus, type Widget } from "@metacell/geppetto-meta-client/common
 
 
 
-export const componentWidget = (name: string, color: string, panelName="panel1") : Widget => ({
+export const componentWidget = (name: string, color: string, panelName="panel1", defaultPosition?) : Widget => ({
   id: name + Math.random(),
   name: name,
   component: "MyComponent",
@@ -14,5 +14,6 @@ export const componentWidget = (name: string, color: string, panelName="panel1")
     color
   },
   session: undefined,
-  config: undefined
+  config: undefined,
+  defaultPosition: defaultPosition
 });
diff --git a/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx b/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx
@@ -396,7 +396,6 @@ export class LayoutManager {
       }
     }
     return false;
-
   }
 
   /**

diff --git a/geppetto.js/geppetto-client/src/common/layout/helpers/FlexLayoutHelper.ts b/geppetto.js/geppetto-client/src/common/layout/helpers/FlexLayoutHelper.ts
@@ -14,7 +14,7 @@ import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src/index';
  * @private
  */
 export function createTabSet(model, tabsetID, position = TabsetPosition.RIGHT, weight = 50) {
-    const rootNode = model.getNodeById("root");
+    const rootNode = model.getRoot();
 
     const tabset = new FlexLayout.TabSetNode(model, { id: tabsetID });
     switch (position) {
@@ -28,27 +28,26 @@ export function createTabSet(model, tabsetID, position = TabsetPosition.RIGHT, w
             break;
         case TabsetPosition.BOTTOM:
         case TabsetPosition.TOP: {
-
-            model.doAction(FlexLayout.Actions.updateNodeAttributes(tabset.getId(), {weight: 80}))
-
             const hrow = new FlexLayout.RowNode(model, rootNode.windowId, {});
-            model.doAction(FlexLayout.Actions.updateNodeAttributes(hrow.getId(), {weight: 100}))
+
+            if (position === TabsetPosition.BOTTOM) {
+                (hrow as any).addChild(tabset)
+            } else {
+                (hrow as any).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))
+                    (hrow as any).addChild(child, 0)
                 }
             });
-            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);
+            rootNode.removeAll();
+            rootNode.addChild(hrow);
+            (tabset as any).setWeight(80);
+            (hrow as any).setWeight(100);
         }
     }
     return tabset
-Original file line number
+Diff line change
@@ Expand Up / @@ -396,7 +396,6 @@ export class LayoutManager { @@
           }
         }
         return false;
       }
       /**
@@ Expand Down @@