ui-layout-manager-dev 0.0.18 → 0.0.20

package/src/components/LayoutManager/Controller/Worker/HandleRulesEnforcer.js

@@ -83,6 +83,7 @@ export class HandleRulesEnforcer {
             const sibling = this.getSiblingProps(this.sibling1.id);
             if ("min" in sibling.size) {
                 this.args.style["min-width"] = sibling.size.min.value + sibling.size.min.unit;
+                this.args.style["width"] = sibling.size.min.value + sibling.size.min.unit;
             }
             this.sibling1.hidden = false;
             this.activeSibling = this.sibling1.id;
@@ -99,6 +100,7 @@ export class HandleRulesEnforcer {
             const sibling = this.getSiblingProps(this.sibling2.id);
             if ("min" in sibling.size) {
                 this.args.style["min-width"] = sibling.size.min.value + sibling.size.min.unit;
+                this.args.style["width"] = sibling.size.min.value + sibling.size.min.unit;
             }
             this.sibling2.hidden = false;
             this.activeSibling = this.sibling2.id;
@@ -131,6 +133,7 @@ export class HandleRulesEnforcer {
             const sibling = this.getSiblingProps(this.sibling1.id);
             if ("min" in sibling.size) {
                 this.args.style["min-height"] = sibling.size.min.value + sibling.size.min.unit;
+                this.args.style["height"] = sibling.size.min.value + sibling.size.min.unit;
             }
             this.sibling1.hidden = false;
             this.activeSibling = this.sibling1.id;
@@ -148,6 +151,7 @@ export class HandleRulesEnforcer {
             const sibling = this.getSiblingProps(this.sibling2.id);
             if ("min" in sibling.size) {
                 this.args.style["min-height"] = sibling.size.min.value + sibling.size.min.unit;
+                this.args.style["height"] = sibling.size.min.value + sibling.size.min.unit;
             }
             this.sibling2.hidden = false;
             this.activeSibling = this.sibling2.id;

package/src/components/LayoutManager/Controller/Worker/LayoutEditor.js

@@ -180,4 +180,33 @@ export class LayoutEditor {
             }
         }
     }
+
+    /**
+     * Invoke a specific action on the given id.
+     * @param {Object} args 
+     */
+    invokeAction({id, action, args}) {
+        const props = this.getProps(this.ldf.containers[id].parent);
+
+        const style = {};
+        if (action === "close") {
+            style["min-" + props["dynamic"]] = 0;
+            style["display"] = "none";
+        } else if (action === "open") {
+            style["display"] = "flex";
+        }
+
+        this.transformations.push(
+            {
+                id: id, 
+                type: TRANSFORMATION_TYPES.UPDATE_SIZE,
+                args: {style: style}
+            }
+        );
+        postMessage({
+            type: LAYOUT_WORKER_PROTOCOL.TRANSFORMATIONS,
+            data: this.transformations
+        });
+        this.transformations = [];
+    }
 };

package/src/components/LayoutManager/Controller/Worker/LayoutWorker.js

@@ -25,6 +25,9 @@ self.onmessage = function (e) {
             case LAYOUT_WORKER_PROTOCOL.MOVE_HANDLE_BAR:
                 editor.moveHandleBar(args.metadata);
                 break;
+            case LAYOUT_WORKER_PROTOCOL.INVOKE_ACTION:
+                editor.invokeAction(args);
+                break;
             default:
                 break;
         }

package/src/components/LayoutManager/LayoutManager.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { RootContainer } from "./Components/RootContainer/RootContainer";
 import ComponentRegistryContext from "./Providers/ComponentRegistryContext";
 import { LayoutControllerProvider } from "./Providers/LayoutProvider";
-import { DragProvider } from "./Providers/DragProvider";
+import { LayoutEventProvider } from "./Providers/LayoutEventProvider";
 
 import "./LayoutManager.scss";
 
@@ -19,13 +19,13 @@ export const LayoutManager = ({ldf, registry}) => {
     
 
     return (
-        <DragProvider>
-            <LayoutControllerProvider layout={ldf}>
+        <LayoutControllerProvider layout={ldf}>
+            <LayoutEventProvider>
                 <ComponentRegistryContext.Provider value={registry}>
                     <RootContainer/>
                 </ComponentRegistryContext.Provider>
-            </LayoutControllerProvider> 
-        </DragProvider>
+            </LayoutEventProvider>
+        </LayoutControllerProvider> 
     );
 }
 

package/src/components/LayoutManager/Providers/LayoutEventProvider.js

@@ -0,0 +1,55 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import LayoutEventController from "../Controller/LayoutEventController";
+
+const LayoutEventContext = createContext(null);
+
+export function LayoutEventProvider({ children }) {
+    const controller = useMemo(() => new LayoutEventController(), []);
+
+    return (
+        <LayoutEventContext.Provider value={controller}>
+            {children}
+        </LayoutEventContext.Provider>
+    );
+}
+
+/**
+ * Hook to publish an event.
+ * @returns 
+ */
+export function useLayoutEventPublisher() {
+    const controller = useContext(LayoutEventContext);
+
+    if (!controller) {
+        throw new Error("useLayoutPublisher must be used within LayoutEventProvider");
+    }
+
+    // Return publish that is bound to the controller
+    return controller.publish.bind(controller);
+}
+
+/**
+ * Hook to subscribe to event.
+ * @param {String} type 
+ * @param {Function} handler 
+ */
+export function useLayoutEventSubscription(type, handler) {
+    const controller = useContext(LayoutEventContext);
+    const handlerRef = useRef(handler);
+
+    // Handler is saved in ref and passed into the subscription, this causes
+    // the publisher to invoke the handler and notify the subscriber
+    handlerRef.current = handler;
+
+    useEffect(() => {
+        if (!controller) {
+            throw new Error("useLayoutSubscription must be used within LayoutEventProvider");
+        }
+
+        // controller.subscribe returns unsubscribe function, so it is called automatically
+        // when the component is unmounted
+        return controller.subscribe(type, (event) => {
+            handlerRef.current(event);
+        });
+    }, [controller, type]);
+}

package/src/components/LayoutManager/index.js

@@ -1,2 +1 @@
-export * from "./LayoutManager.jsx"
-export {useDragState} from "./Providers/DragProvider.js"
+export * from "./LayoutManager.jsx"

package/src/stories/LayoutManager.stories.js

@@ -4,6 +4,8 @@ import { LayoutManager } from "../components/LayoutManager";
 import defaultLayoutJSON from "./layouts/vsCode/default.json";
 import sample1JSON from "./layouts/vsCode/sample1.json";
 import workbenchJSON from "./layouts/vsCode/workbench.json";
+import workbench2JSON from "./layouts/vsCode/workbench2.json";
+import workbench3JSON from "./layouts/vsCode/workbench3.json";
 
 import "./LayoutManager.stories.scss";
 
@@ -74,3 +76,18 @@ workbench.args = {
     ldf: workbenchJSON
 }
 
+
+export const workbench2 = Template.bind({})
+
+workbench2.args = {
+    ldf: workbench2JSON
+}
+
+
+export const workbench3 = Template.bind({})
+
+workbench3.args = {
+    ldf: workbench3JSON
+}
+
+

package/src/stories/layouts/vsCode/workbench.json

@@ -39,8 +39,7 @@
                     "containerId": "sidebar",
                     "type": "container",
                     "size": { "initial": { "value": 50, "unit": "px", "type": "fixed" }},
-                    "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" },
-                    "showHandlebar": true
+                    "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
                 },
                 {
                     "containerId": "contentContainer",
@@ -78,7 +77,20 @@
         },
         "terminal": {
             "id": "terminal",
-            "component": "Flow",
+            "tabsBar": {
+                "tabs": [
+                    {
+                        "name": "Flow",
+                        "component": "Flow"
+                    },
+                    {
+                        "name": "FileTree",
+                        "component": "FileTree"
+                    }
+                ],
+                "showClose": true,
+                "closeContainerId": "terminal"
+            },
             "background": "#252526"
         },
         "content": {
@@ -91,9 +103,9 @@
                     "containerId": "menuContainer",
                     "type": "container",
                     "size": { 
-                        "initial": { "value": 400, "unit": "px", "type": "fixed" },
+                        "initial": { "value": 250, "unit": "px", "type": "fixed" },
                         "min": { "value": 200, "unit": "px"},
-                        "max": { "value": 500, "unit": "px"}
+                        "max": { "value": 400, "unit": "px"}
                     },
                     "collapse": { "value": 700, "condition": "lessThan", "relative": "parent" }
                 },
@@ -133,6 +145,11 @@
         "fileTabsContainer": {
             "id": "fileTabsContainer",
             "component": "FileTree",
+            "menuBar": {
+                "showClose": true,
+                "closeContainerId": "menuContainer",
+                "title": "EXPLORER"
+            },
             "background": "#1e1e1e"
         },
         "editorContainer": {

package/src/stories/layouts/vsCode/workbench2.json

@@ -0,0 +1,176 @@
+{
+    "title": "Workbench Layout Configuration A",
+    "layoutRoot": "root",
+    "containers": {
+        "root": {
+            "id": "root",
+            "type": "split",
+            "orientation": "vertical",
+            "children": [
+                {
+                    "containerId": "header",
+                    "type": "container",
+                    "size": { "initial": { "value": 25, "unit": "px", "type": "fixed" }}
+                },
+                {
+                    "containerId": "mainBody",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                },
+                {
+                    "containerId": "footer",
+                    "type": "container",
+                    "size": { "initial": { "value": 25, "unit": "px", "type": "fixed" }},
+                    "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
+                }
+            ]
+        },
+        "header": {
+            "id": "header",
+            "background": "#3c3c3c"
+        },
+        "mainBody": {
+            "id": "mainBody",
+            "background": "#3c3c3c",
+            "type": "split",
+            "orientation": "horizontal",
+            "children": [
+                {
+                    "containerId": "sidebar",
+                    "type": "container",
+                    "size": { "initial": { "value": 50, "unit": "px", "type": "fixed" }},
+                    "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
+                },
+                {
+                    "containerId": "contentContainer",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                }
+            ]
+        },
+        "contentContainer": {
+            "id": "contentContainer",
+            "background": "#3c3c3c",
+            "type": "split",
+            "orientation": "vertical",
+            "children": [
+                {
+                    "containerId": "content",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                },
+                {
+                    "type": "handleBar",
+                    "sibling1": "content",
+                    "sibling2": "terminal"
+                },
+                {
+                    "containerId": "terminal",
+                    "type": "container",
+                    "size": { 
+                        "initial": { "value": 200, "unit": "px", "type": "fixed" },
+                        "min": { "value": 100, "unit": "px"}
+                    },
+                    "collapse": { "value": 500, "condition": "lessThan", "relative": "parent" }
+                }
+            ]
+        },
+        "terminal": {
+            "id": "terminal",
+            "tabsBar": {
+                "tabs": [
+                    {
+                        "name": "Flow",
+                        "component": "Flow"
+                    },
+                    {
+                        "name": "FileTree",
+                        "component": "FileTree"
+                    }
+                ],
+                "showClose": true,
+                "closeContainerId": "terminal"
+            },
+            "background": "#252526"
+        },
+        "content": {
+            "id": "content",
+            "background": "#007acc",
+            "type": "split",
+            "orientation": "horizontal",
+            "children": [
+                {
+                    "containerId": "menuContainer",
+                    "type": "container",
+                    "size": { 
+                        "initial": { "value": 250, "unit": "px", "type": "fixed" },
+                        "min": { "value": 200, "unit": "px"},
+                        "max": { "value": 400, "unit": "px"}
+                    },
+                    "collapse": { "value": 700, "condition": "lessThan", "relative": "parent" }
+                },
+                {
+                    "type": "handleBar",
+                    "sibling1": "menuContainer",
+                    "sibling2": "editorContainer"
+                },
+                {
+                    "containerId": "editorContainer",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                },
+                {
+                    "type": "handleBar",
+                    "sibling1": "editorContainer",
+                    "sibling2": "editorContainer2"
+                },
+                {
+                    "containerId": "editorContainer2",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                }
+            ]
+        },
+        "footer": {
+            "id": "footer",
+            "background": "#007acc"
+        },
+        "sidebar": {
+            "id": "sidebar",
+            "background": "#333"
+        },
+        "menuContainer": {
+            "id": "menuContainer",
+            "background": "#252526",
+            "type": "split",
+            "orientation": "vertical",
+            "children": [
+                {
+                    "containerId": "fileTabsContainer",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                }
+            ]
+        },
+        "fileTabsContainer": {
+            "id": "fileTabsContainer",
+            "component": "FileTree",
+            "menuBar": {
+                "showClose": true,
+                "closeContainerId": "menuContainer",
+                "title": "EXPLORER"
+            },
+            "background": "#1e1e1e"
+        },
+        "editorContainer": {
+            "id": "editorContainer",
+            "component": "FileEditor",
+            "background": "#1e1e1e"
+        },
+        "editorContainer2": {
+            "id": "editorContainer2",
+            "component": "FileEditor",
+            "background": "#1e1e1e"
+        }
+    }
+}

package/src/stories/layouts/vsCode/workbench3.json

@@ -0,0 +1,176 @@
+{
+    "title": "Workbench Layout Configuration A",
+    "layoutRoot": "root",
+    "containers": {
+        "root": {
+            "id": "root",
+            "type": "split",
+            "orientation": "vertical",
+            "children": [
+                {
+                    "containerId": "header",
+                    "type": "container",
+                    "size": { "initial": { "value": 25, "unit": "px", "type": "fixed" }}
+                },
+                {
+                    "containerId": "mainBody",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                },
+                {
+                    "containerId": "footer",
+                    "type": "container",
+                    "size": { "initial": { "value": 25, "unit": "px", "type": "fixed" }},
+                    "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
+                }
+            ]
+        },
+        "header": {
+            "id": "header",
+            "background": "#3c3c3c"
+        },
+        "mainBody": {
+            "id": "mainBody",
+            "background": "#3c3c3c",
+            "type": "split",
+            "orientation": "horizontal",
+            "children": [
+                {
+                    "containerId": "sidebar",
+                    "type": "container",
+                    "size": { "initial": { "value": 50, "unit": "px", "type": "fixed" }},
+                    "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
+                },
+                {
+                    "containerId": "contentContainer",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                }
+            ]
+        },
+        "contentContainer": {
+            "id": "contentContainer",
+            "background": "#3c3c3c",
+            "type": "split",
+            "orientation": "vertical",
+            "children": [
+                {
+                    "containerId": "content",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                },
+                {
+                    "type": "handleBar",
+                    "sibling1": "content",
+                    "sibling2": "terminal"
+                },
+                {
+                    "containerId": "terminal",
+                    "type": "container",
+                    "size": { 
+                        "initial": { "value": 300, "unit": "px", "type": "fixed" },
+                        "min": { "value": 100, "unit": "px"}
+                    },
+                    "collapse": { "value": 500, "condition": "lessThan", "relative": "parent" }
+                }
+            ]
+        },
+        "terminal": {
+            "id": "terminal",
+            "tabsBar": {
+                "tabs": [
+                    {
+                        "name": "Flow",
+                        "component": "Flow"
+                    },
+                    {
+                        "name": "FileTree",
+                        "component": "FileTree"
+                    }
+                ],
+                "showClose": true,
+                "closeContainerId": "terminal"
+            },
+            "background": "#252526"
+        },
+        "content": {
+            "id": "content",
+            "background": "#007acc",
+            "type": "split",
+            "orientation": "horizontal",
+            "children": [
+                {
+                    "containerId": "menuContainer",
+                    "type": "container",
+                    "size": { 
+                        "initial": { "value": 250, "unit": "px", "type": "fixed" },
+                        "min": { "value": 200, "unit": "px"},
+                        "max": { "value": 400, "unit": "px"}
+                    },
+                    "collapse": { "value": 700, "condition": "lessThan", "relative": "parent" }
+                },
+                {
+                    "type": "handleBar",
+                    "sibling1": "menuContainer",
+                    "sibling2": "editorContainer"
+                },
+                {
+                    "containerId": "editorContainer",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                },
+                {
+                    "type": "handleBar",
+                    "sibling1": "editorContainer",
+                    "sibling2": "editorContainer2"
+                },
+                {
+                    "containerId": "editorContainer2",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                }
+            ]
+        },
+        "footer": {
+            "id": "footer",
+            "background": "#007acc"
+        },
+        "sidebar": {
+            "id": "sidebar",
+            "background": "#333"
+        },
+        "menuContainer": {
+            "id": "menuContainer",
+            "background": "#252526",
+            "type": "split",
+            "orientation": "vertical",
+            "children": [
+                {
+                    "containerId": "fileTabsContainer",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                }
+            ]
+        },
+        "fileTabsContainer": {
+            "id": "fileTabsContainer",
+            "component": "FileTree",
+            "menuBar": {
+                "showClose": true,
+                "closeContainerId": "menuContainer",
+                "title": "EXPLORER"
+            },
+            "background": "#1e1e1e"
+        },
+        "editorContainer": {
+            "id": "editorContainer",
+            "component": "FileEditor",
+            "background": "#1e1e1e"
+        },
+        "editorContainer2": {
+            "id": "editorContainer2",
+            "component": "FileEditor",
+            "background": "#1e1e1e"
+        }
+    }
+}