ui-layout-manager-dev 0.0.1

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

@@ -0,0 +1,179 @@
+import TRANSFORMATION_TYPES from "../TRANSFORMATION_TYPES";
+/**
+ * This class generates transformations based on the handle
+ * bars movements. It sets up thresholds at which it collapses
+ * and expands the containers. This isn't the width of the container,
+ * it is the position of the handle bar in the parent container. So
+ * even if a container has a min width of 200px, when the handle bar
+ * reaches 50px from the left, it will collapse it.
+ * 
+ * This will be expanded in the future to have different collapsed states.
+ * So rather than fully collapsing the container, it sets up a 
+ * minimum size, this willl be useful for accordians and other containers.
+ */
+export class HandleRulesEnforcer {
+    /**
+     * Initialize the child rule enforcer.
+     * @param {Object} parent
+     * @param {Object} sibling1
+     * @param {Object} sibling2
+     * @param {Object} handleMetadata
+     */
+    constructor (parent, sibling1, sibling2, handleMetadata) {
+        this.parent = parent;
+        this.type = null;
+        this.args = {};
+        this.sibling1 = sibling1;
+        this.sibling2 = sibling2;
+        this.handleMetadata = handleMetadata;
+    }
+
+    /**
+     * Get props given node orientation.
+     * @param {Object} node 
+     */
+    getProps(node) {
+        // Identify the dynamic property based on orientation.
+        if (node.orientation === "horizontal") {
+            return {"dynamic": "width", "fixed": "height"};
+        } else if (node.orientation === "vertical") {
+            return {"dynamic": "height", "fixed": "width"};
+        } else {
+            throw new Error(`Unknown orientation "${node.orientation}" in LDF configuration`);
+        }  
+    }
+    
+    /**
+     * Evaluate the rules based on childs 
+     */
+    evaluate() {
+        this.activeSibling = null;
+        const props = this.getProps(this.parent);
+        if (props.dynamic === "width") {
+            this.processVerticalContainers();
+        } else if (props.dynamic === "height") {
+            this.processHorizontalContainers();
+        }
+    }
+
+    /**
+     * Process the vertical containers.
+     */
+    processVerticalContainers () {
+        const totalWidth = this.handleMetadata.sizes[this.parent.id].width;
+        this.type = TRANSFORMATION_TYPES.UPDATE_SIZE;
+
+        // Currently only collapse the edge containers
+        // TODO: In the future add logic for middle containers (accordian style)
+        if (!this.checkIfEdgeContainer()) {
+            return;
+        }
+        
+        if (this.handleMetadata.handle.x < 100) {
+            this.args = {style: {"display":"none", "min-width":0}}
+            this.sibling1.hidden = true;
+            this.activeSibling = this.sibling1.id;
+        } else if (this.handleMetadata.handle.x > 100 && this.sibling1.hidden) {
+            this.args = {style: {"display":"flex"}}
+            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.sibling1.hidden = false;
+            this.activeSibling = this.sibling1.id;
+        } 
+        
+        
+        if (this.handleMetadata.handle.x > totalWidth - 100) {
+            this.args = {style: {"display":"none", "min-width":0}}
+            this.sibling2.hidden = true;
+            this.activeSibling = this.sibling2.id;
+        } else if (this.handleMetadata.handle.x < totalWidth - 100 && this.sibling2.hidden) {
+            this.args = {style: {"display":"flex"}}
+            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.sibling2.hidden = false;
+            this.activeSibling = this.sibling2.id;
+        }
+    }
+
+
+     /**
+     * Process the vertical containers.
+     */
+    processHorizontalContainers () {
+        const totalHeight = this.handleMetadata.sizes[this.parent.id].height;
+        this.type = TRANSFORMATION_TYPES.UPDATE_SIZE;
+
+        // Currently only collapse the edge containers
+        // TODO: In the future add logic for middle containers (accordian style)
+        if (!this.checkIfEdgeContainer()) {
+            return;
+        }
+        
+        if (this.handleMetadata.handle.y < 100) {
+            this.args = {style: {"display":"none", "min-height":0}}
+            this.sibling1.hidden = true;
+            this.activeSibling = this.sibling1.id;
+        } else if (this.handleMetadata.handle.y > 100 && this.sibling1.hidden) {
+            this.args = {style: {"display":"flex"}}
+            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.sibling1.hidden = false;
+            this.activeSibling = this.sibling1.id;
+        } 
+        
+        
+        if (this.handleMetadata.handle.y > totalHeight - 100) {
+            this.args = {style: {"display":"none", "min-height":0}}
+            this.sibling2.hidden = true;
+            this.activeSibling = this.sibling2.id;
+        } else if (this.handleMetadata.handle.y < totalHeight - 100 && this.sibling2.hidden) {
+            this.args = {style: {"display":"flex"}}
+            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.sibling2.hidden = false;
+            this.activeSibling = this.sibling2.id;
+        }
+    }
+
+    /**
+     * Given the sibling ID, it returns the child properties from the parent.
+     * This includes the min-size and max-size. This is done because the actual
+     * min and max sizes are saved in the children of the parent, not in the actual
+     * container itself in the LDF file. 
+     * @param {String} siblingId 
+     */
+    getSiblingProps (siblingId) {
+        for (let i = 0; i < this.parent.children.length; i++) {
+            const child = this.parent.children[i];
+            if (child.containerId ===  siblingId) {
+                return child;
+            }
+        }
+    }
+
+
+    /**
+     * Check if the handle bar is attached to the edge of the parent container.
+     * i.e. Is sibling1 on the very left or is sibling2 on the very right.
+     */
+    checkIfEdgeContainer () {
+        const firstSibling = this.parent.children[0];
+        const lastSibling = this.parent.children[this.parent.children.length -1];
+
+        if (firstSibling.containerId === this.sibling1.id) {
+            return true;
+        } else if (lastSibling.containerId === this.sibling2.id) {
+            return true;
+        }
+
+        return false;
+    }
+}

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

@@ -0,0 +1,183 @@
+import LAYOUT_WORKER_PROTOCOL from "../LAYOUT_WORKER_PROTOCOL";
+import TRANSFORMATION_TYPES from "../TRANSFORMATION_TYPES";
+import { ParentRuleEnforcer } from "./ParentRuleEnforcer";
+import { HandleRulesEnforcer } from "./HandleRulesEnforcer";
+
+export class LayoutEditor {
+
+    /**
+     * Initializes the editor with the given ldf file.
+     * @param {Object} ldf 
+     */
+    constructor (ldf) {
+        this.ldf = ldf;
+        console.log("Created modifier with ", this.ldf);
+        this.transformations = [];
+    }
+
+    /**
+     * Initializes flexbox layout by processing LDF file.
+     */
+    initializeFlexBox() {
+        this.initializeNode(this.ldf.containers[this.ldf.layoutRoot]);        
+        postMessage({
+            type: LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX,
+            data: this.transformations
+        });
+        this.transformations = []
+    }
+
+    /**
+     * Get props given node orientation.
+     * @param {Object} node 
+     */
+    getProps(node) {
+        // Identify the dynamic property based on orientation.
+        if (node.orientation === "horizontal") {
+            return {"dynamic": "width", "fixed": "height"};
+        } else if (node.orientation === "vertical") {
+            return {"dynamic": "height", "fixed": "width"};
+        } else {
+            throw new Error(`Unknown orientation "${node.orientation}" in LDF configuration`);
+        }  
+    }
+
+    /**
+     * Processes the node and applies the initial flex box styles. It recursively
+     * calls the initialization function on the nodes children until the entire
+     * layout is initialized.
+     * 
+     * After initialization, the layout is recalculated when the handle bar moves
+     * or when the window is resized. In the future, I will add programatic control
+     * to modify the layout. This means that the API will ask to divide a container
+     * in two or to delete container.
+     * 
+     * TODO: Implement the programmatic control of layout containers (see above).
+     * 
+     * @param {Object} node Node to process.
+     */
+    initializeNode (node) {
+        const isSplit = node.type ? node.type === "split": false;
+
+        // If node is not split, then it has no children and is a leaf node, so we return.
+        if (!isSplit) {
+            return;
+        }
+
+        const props = this.getProps(node);
+        
+        for (const child of node.children) {
+            if (child.type === "container") {
+                let childStyle = {};
+                switch(child.size.initial.type) {
+                    case "fixed":
+                        childStyle[props["dynamic"]] = child.size.initial.value + "px" ;                    
+                        childStyle["flex"] = "0 0 auto";
+                        break;
+                    case "fill":
+                        childStyle["flexGrow"] = 1;
+                        break;
+                    default:
+                        throw new Error(`Unknown size type "${child.size.initial.type}" in LDF configuration`);
+                }
+
+                if ("min" in child.size) {
+                    childStyle["min-" + props["dynamic"]] = child.size.min.value + "px"  ;
+                }
+
+                if ("max" in child.size) {
+                    childStyle["max-" + props["dynamic"]] = child.size.max.value + "px" ;
+                }
+
+                const childContainer = this.ldf.containers[child.containerId];
+                childContainer.collapsed = false;
+                this.transformations.push(
+                    {
+                        id: childContainer.id, 
+                        type: TRANSFORMATION_TYPES.UPDATE_SIZE,
+                        args: {style: childStyle}
+                    }
+                );
+                this.initializeNode(childContainer);
+            }
+        }
+    }
+
+    /**
+     * Use the given sizes to perform layout calculations and generate
+     * transformations.
+     * @param {Object} sizes 
+     */
+    applySizes(sizes) {        
+        this.sizes = sizes; 
+        this.applyLayoutToNode(this.ldf.layoutRoot);        
+        postMessage({
+            type: LAYOUT_WORKER_PROTOCOL.TRANSFORMATIONS,
+            data: this.transformations
+        });
+        this.transformations = []
+    }
+
+    /**
+     * This function moves the handlebar.
+     * @param {Object} metadata 
+     */
+    moveHandleBar(metadata) {
+        const parent = this.ldf.containers[metadata.parent];
+        const sibling1 = this.ldf.containers[metadata.sibling1];
+        const sibling2 = this.ldf.containers[metadata.sibling2];
+        const enforcer = new HandleRulesEnforcer(parent, sibling1, sibling2, metadata);
+        enforcer.evaluate();
+
+        if (enforcer.activeSibling !== null) {
+            this.transformations.push(
+                {
+                    id: enforcer.activeSibling, 
+                    type: TRANSFORMATION_TYPES.UPDATE_SIZE,
+                    args: enforcer.args
+                }
+            );   
+            postMessage({
+                type: LAYOUT_WORKER_PROTOCOL.TRANSFORMATIONS,
+                data: this.transformations
+            });
+            this.transformations = []
+        }
+    }
+
+    /**
+     * Applys the layout logic to the node with the given container id. 
+     * @param {String} containerId 
+     * @returns 
+     */
+    applyLayoutToNode(containerId) {
+        const parent = this.ldf.containers[containerId];        
+
+        // If node is not split, then it has no children and is a leaf node, so we return.
+        if ((!parent.type ? parent.type === "split": false) || (!("children" in parent))) {
+            return;
+        }
+
+        if (!this.sizes[containerId]) {
+            console.warn(`Parent size not found for node ${parent.id}. Skipping collapse checks.`);
+            return;
+        }
+
+        for (const child of parent.children) {
+            if (child.type === "container") {
+                const enforcer = new ParentRuleEnforcer(this.sizes, parent, child);
+                enforcer.evaluate();
+                if (enforcer.type) {
+                    this.transformations.push(
+                        {
+                            id: this.ldf.containers[child.containerId].id,
+                            type: enforcer.type,
+                            args: enforcer.args,
+                        }
+                    );
+                }
+                this.applyLayoutToNode(child.containerId);
+            }
+        }
+    }
+};

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

@@ -0,0 +1,41 @@
+import { LayoutEditor } from "./LayoutEditor";
+import LAYOUT_WORKER_PROTOCOL from "../LAYOUT_WORKER_PROTOCOL";
+
+/**
+ * This function receives messages from the main thread and executes
+ * the layout manipulation logic.
+ * @param {Object} e 
+ */
+let editor;
+self.onmessage = function (e) {
+
+    try {
+        const args = e.data.args;
+        switch (e.data.code) {
+            case LAYOUT_WORKER_PROTOCOL.INITIALIZE:
+                /** @type {LayoutEditor} */
+                editor = new LayoutEditor(args.ldf);
+                break;
+            case LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX:
+                editor.initializeFlexBox();
+                break;
+            case LAYOUT_WORKER_PROTOCOL.APPLY_SIZES:
+                editor.applySizes(args.sizes);
+                break;
+            case LAYOUT_WORKER_PROTOCOL.MOVE_HANDLE_BAR:
+                editor.moveHandleBar(args.metadata);
+                break;
+            default:
+                break;
+        }
+
+    } catch (e) {
+        postMessage({
+            type: LAYOUT_WORKER_PROTOCOL.ERROR,
+            error: {
+                message: e.message,
+                stack: e.stack
+            }
+        });
+    }
+}

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

@@ -0,0 +1,79 @@
+import TRANSFORMATION_TYPES from "../TRANSFORMATION_TYPES";
+/**
+ * This class generates transformations based on the
+ * parents layout configuration. For example, it collapses
+ * a container if the parent size reaches a threshold
+ * or expands it if the is above a threshold.
+ */
+export class ParentRuleEnforcer {
+    /**
+     * Initialize the rule enforcer.
+     * @param {Object} sizes 
+     * @param {Object} parent 
+     * @param {Object} child 
+     */
+    constructor (sizes, parent, child) {
+        this.sizes = sizes;
+        this.parent = parent;
+        this.child = child;
+        this.type = null;
+        this.args = {};
+    }
+
+    /**
+     * Get props given node orientation.
+     * @param {Object} node 
+     */
+    getProps(node) {
+        // Identify the dynamic property based on orientation.
+        if (node.orientation === "horizontal") {
+            return {"dynamic": "width", "fixed": "height"};
+        } else if (node.orientation === "vertical") {
+            return {"dynamic": "height", "fixed": "width"};
+        } else {
+            throw new Error(`Unknown orientation "${node.orientation}" in LDF configuration`);
+        }  
+    }
+
+    /**
+     * Evaluate the rules based on parent and child sizes and
+     * the specified layout configuration.
+     */
+    evaluate() {
+        if (this.child.hasOwnProperty("collapse") && this.child["collapse"]["relative"] === "parent") { 
+            this.evaluateCollapseByParent();
+        }
+    }
+
+    /**
+     * Evaluate the collapse by parent property.
+     */
+    evaluateCollapseByParent() {
+        const props = this.getProps(this.parent);
+        const parentSize = this.sizes[this.parent.id];
+
+        let args = {};
+        if (parentSize[props["dynamic"]] <= this.child.collapse.value && this.child.collapse.condition === "lessThan") { 
+            // Collapse below threshold
+            if (!this.child.hidden) {
+                this.type = TRANSFORMATION_TYPES.UPDATE_SIZE;
+                args = {style: {"display":"none"}}
+                const prop = "min-" + props["dynamic"];
+                args.style[prop] = 0;
+                this.child.hidden = true;
+            }
+        } else {          
+            // Expand above threshold
+            if (this.child.hidden) {
+                this.type = TRANSFORMATION_TYPES.UPDATE_SIZE;
+                args = {style: {"display":"flex"}}
+                if ("min" in this.child.size) {
+                    const prop = "min-" + props["dynamic"];
+                    args.style[prop] = this.child.size.min.value + this.child.size.min.unit;
+                }
+                this.child.hidden = false;
+            }
+        }
+        Object.assign(this.args, args);
+    }
+}

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

@@ -0,0 +1,29 @@
+export class Size {
+
+    /**
+     * Initializes the size object with the given width and height.
+     * @param {Number} width 
+     * @param {Number} height 
+     */
+    constructor (width, height) {
+        this.width = width;
+        this.height = height;
+    }
+
+    /**
+     * 
+     * @returns {Number} Width of the size.
+     */
+    getWidth() {
+        return this.width;
+    }
+
+    /**
+     * 
+     * @returns {Number} Height of the size.
+     */
+    getHeight() {
+        return this.height;
+    }
+
+}

package/src/components/LayoutManager/LayoutManager.jsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState, useContext } from "react";
+import PropTypes from 'prop-types';
+import { RootContainer } from "./Components/RootContainer/RootContainer";
+import ComponentRegistryContext from "./Providers/ComponentRegistryContext";
+import { LayoutControllerProvider } from "./Providers/LayoutProvider";
+
+import "./LayoutManager.scss";
+
+/**
+ * Renders the layout specified in the LDF file.
+ * @param {Object} props
+ * @param {Object} props.ldf - JSON object containing the Layout Definition File (LDF)
+ * @param {React.ReactNode} props.registry - An object containing the registered components that will be
+ * lazy loaded into the containers.
+ * @return {React.ReactElement}
+ */
+export const LayoutManager = ({ldf, registry}) => {
+
+    return (
+        <LayoutControllerProvider layout={ldf}>
+            <ComponentRegistryContext.Provider value={registry}>
+                <RootContainer/>
+            </ComponentRegistryContext.Provider>
+        </LayoutControllerProvider> 
+    );
+}
+
+LayoutManager.propTypes = {
+    ldf: PropTypes.object,
+    registry: PropTypes.object,
+}

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

@@ -0,0 +1,7 @@
+import {createContext} from "react";
+
+// This context stores the registry for the components.
+const ComponentRegistryContext = createContext({});
+ComponentRegistryContext.displayName = 'ComponentRegistryContext';
+
+export default ComponentRegistryContext;

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

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import { LayoutController } from "../Controller/LayoutController";
+import PropTypes from 'prop-types';
+
+const LayoutContext = createContext(null);
+
+/**
+ * A provider to expose the controller to all the children.
+ * @param {Object} props
+ * @param {Object} props.layout - Layout definition JSON object
+ * @param {React.ReactNode} props.children - React children to render
+ * @returns {React.ReactElement}
+ */
+export function LayoutControllerProvider({ layout, children }) {
+    
+    const controller = useMemo( () => {
+        return new LayoutController(layout);
+    }, [layout]);
+
+    useEffect(() => {
+        return () => {
+            controller.destroy();
+        }
+    }, [controller]);
+
+    return (
+        <LayoutContext.Provider value={controller}>
+            {children}
+        </LayoutContext.Provider>
+    )
+}
+
+LayoutControllerProvider.propTypes = {
+    layout: PropTypes.object.isRequired,
+    children: PropTypes.node.isRequired
+}
+
+/**
+ * A hook to access the controller within containers.
+ * @returns {Object}
+ */
+export function useLayoutController() {
+    const context = useContext(LayoutContext);
+    if (!context) {
+        throw new Error("useLayoutController must be used within a LayoutControllerProvider")
+    }
+    return context;
+}

package/src/components/LayoutManager/index.js

@@ -0,0 +1 @@
+export * from "./LayoutManager.jsx"

package/src/index.js

@@ -0,0 +1 @@
+export * from "./components/LayoutManager";

package/src/stories/LayoutManager.stories.js

@@ -0,0 +1,64 @@
+import { useEffect, useMemo, useCallback } from "react";
+import { useArgs } from "@storybook/preview-api";
+import { LayoutManager } from "../components/LayoutManager";
+import defaultLayoutJSON from "./layouts/vsCode/default.json";
+import sample1JSON from "./layouts/vsCode/sample1.json";
+
+import "./LayoutManager.stories.scss";
+
+export default {
+    title: 'Editors', 
+    component: LayoutManager,
+    argTypes: {
+        ldf: {
+            type: 'object'
+        }
+    }
+};
+
+const Template = (args) => {
+    const [, updateArgs] = useArgs();
+    
+    const registry = useMemo(() => ({
+        EditorVSCode: () =>
+            import('./sample_components/editor/EditorVSCode').then((m) => ({
+            default: m.default,
+        })),
+        Stack: () =>
+            import('./sample_components/stack/Stack').then((m) => ({
+            default: m.default,
+        })),
+        Flow: () =>
+            import('./sample_components/flow/Flow').then((m) => ({
+            default: m.default,
+        })),
+        MapSample: () =>
+            import('./sample_components/map/MapSample').then((m) => ({
+            default: m.default,
+        })),
+    }), []);
+
+    useEffect(() => {
+        updateArgs({registry : registry});
+    }, [updateArgs, registry]);
+
+    return (
+        <div className="rootContainer">
+            <LayoutManager  {...args}/> 
+        </div>
+    )
+}
+
+export const defaultLayout = Template.bind({})
+
+defaultLayout.args = {
+    ldf: defaultLayoutJSON
+}
+
+
+export const sample1 = Template.bind({})
+
+sample1.args = {
+    ldf: sample1JSON
+}
+

package/src/stories/LayoutManager.stories.scss

@@ -0,0 +1,7 @@
+.rootContainer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}