ui-layout-manager-dev 0.0.24-dev → 0.0.26-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.24-dev",
+  "version": "0.0.26-dev",
   "description": "A react component to manage layout and themes in single page applications.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/LayoutManager/Components/RootContainer/RootContainer.jsx

@@ -147,7 +147,7 @@ export const RootContainer = () => {
             onDragEnd={dragController.onDragEnd}
             onDragCancel={dragController.onDragCancel}>
             
-            <div id="layout-root" className="root-container">
+            <div className="root-container">
                 <div ref={rootRef} className="relative-container">
                     {childElements}
                 </div>

package/src/components/LayoutManager/LayoutManager.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { RootContainer } from "./Components/RootContainer/RootContainer";
 import ComponentRegistryContext from "./Providers/ComponentRegistryContext";
 import { LayoutControllerProvider } from "./Providers/LayoutProvider";
-import { LayoutEventProvider } from "./Providers/LayoutEventProvider";
 import { ModalProvider } from "./Providers/ModalProvider";
 
 import "./LayoutManager.scss";
@@ -17,17 +16,14 @@ import "./LayoutManager.scss";
  * @return {React.ReactElement}
  */
 export const LayoutManager = ({ldf, registry}) => {
-    
 
     return (
         <LayoutControllerProvider layout={ldf}>
-            <LayoutEventProvider>
-                <ComponentRegistryContext.Provider value={registry}>
-                    <ModalProvider>
-                        <RootContainer/>
-                    </ModalProvider>
-                </ComponentRegistryContext.Provider>
-            </LayoutEventProvider>
+            <ComponentRegistryContext.Provider value={registry}>
+                <ModalProvider>
+                    <RootContainer/>
+                </ModalProvider>
+            </ComponentRegistryContext.Provider>
         </LayoutControllerProvider> 
     );
 }

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

@@ -30,6 +30,7 @@ export function ModalProvider({ children }) {
         setModal({
             id: id,
             title: args.title,
+            args: args.args,
             render: args.render,
             close: close,
         });
@@ -56,7 +57,7 @@ export function ModalProvider({ children }) {
                                     <XLg className="close-button" onClick={modal.close} />
                                 </div>
                                 <div className="modal-body">
-                                    {modal.render({ close: modal.close })}
+                                    {modal.render({ close: modal.close , args: modal.args })}
                                 </div>
                             </div>
                         </div>

package/src/index.js

@@ -1,4 +1,5 @@
 export * from "./components/LayoutManager";
 export { useLayoutEventPublisher } from "./components/LayoutManager/Providers/LayoutEventProvider";
 export { useLayoutEventSubscription } from "./components/LayoutManager/Providers/LayoutEventProvider";
-export { useModalManager } from "./components/LayoutManager/Providers/ModalProvider";
+export { useModalManager } from "./components/LayoutManager/Providers/ModalProvider";
+export { LayoutEventProvider } from "./components/LayoutManager/Providers/LayoutEventProvider";

package/src/stories/LayoutManager.stories.js

@@ -7,6 +7,8 @@ import workbenchJSON from "./layouts/vsCode/workbench.json";
 import workbench2JSON from "./layouts/vsCode/workbench2.json";
 import workbench3JSON from "./layouts/vsCode/workbench3.json";
 
+import { LayoutEventProvider } from "../components/LayoutManager/Providers/LayoutEventProvider";
+
 import "./LayoutManager.stories.scss";
 
 export default {
@@ -50,9 +52,11 @@ const Template = (args) => {
     }, [updateArgs, registry]);
 
     return (
-        <div className="rootContainer">
-            <LayoutManager  {...args}/> 
-        </div>
+        <LayoutEventProvider>
+            <div className="rootContainer">
+                <LayoutManager  {...args}/> 
+            </div>
+        </LayoutEventProvider>
     )
 }
 

package/src/stories/sample_components/filetree/FileTree.jsx

@@ -31,11 +31,11 @@ const FileTree = () => {
         if (node.name === "readme") {
             const {id, close} = openModal({
                 title:"Readme",
-                render: ({ close }) => {
-                    return <>
-                        <Stack />
-                        <Stack />
-                    </>;
+                args: {
+                    sample: "sample arg"
+                },
+                render: ({ close, args }) => {
+                    return <Stack close={close} args={args} />
                 }
             });
 

package/src/stories/sample_components/stack/Stack.jsx

@@ -1,8 +1,10 @@
 import { StackList } from 'sample-ui-component-library';
 
-const Stack = () => {
+const Stack = ({close, args}) => {
 
-    const args = [
+    console.log(args);
+
+    const args2 = [
         {functionName:"visit_arg", fileName: "helper.py", lineNumber: 3},
         {functionName:"__init__", fileName: "helper.py", lineNumber: 65},
         {functionName:"injectLogTypesA", fileName: "LogInjector.py", lineNumber: 3, selected: true},
@@ -14,7 +16,7 @@ const Stack = () => {
     ]
 
     return (
-        <StackList traces={args} />  
+        <StackList traces={args2} />  
     );
 };
 

package/dist/esm/LayoutWorker.js

@@ -1,494 +0,0 @@
-let LAYOUT_WORKER_PROTOCOL = {
-    INITIALIZE: 1,
-    INITIALIZE_FLEXBOX: 2,
-    APPLY_SIZES: 3,
-    ERROR: 4,
-    TRANSFORMATIONS: 5,
-    MOVE_HANDLE_BAR: 6
-};
-LAYOUT_WORKER_PROTOCOL = Object.freeze(LAYOUT_WORKER_PROTOCOL);
-
-var LAYOUT_WORKER_PROTOCOL$1 = LAYOUT_WORKER_PROTOCOL;
-
-let TRANSFORMATION_TYPES = {
-    UPDATE_SIZE: 1
-};
-TRANSFORMATION_TYPES = Object.freeze(TRANSFORMATION_TYPES);
-
-var TRANSFORMATION_TYPES$1 = 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.
- */
-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$1.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$1.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);
-    }
-}
-
-/**
- * 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.
- */
-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$1.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$1.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;
-    }
-}
-
-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$1.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$1.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$1.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$1.UPDATE_SIZE,
-                    args: enforcer.args
-                }
-            );   
-            postMessage({
-                type: LAYOUT_WORKER_PROTOCOL$1.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);
-            }
-        }
-    }
-}
-
-/**
- * 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$1.INITIALIZE:
-                /** @type {LayoutEditor} */
-                editor = new LayoutEditor(args.ldf);
-                break;
-            case LAYOUT_WORKER_PROTOCOL$1.INITIALIZE_FLEXBOX:
-                editor.initializeFlexBox();
-                break;
-            case LAYOUT_WORKER_PROTOCOL$1.APPLY_SIZES:
-                editor.applySizes(args.sizes);
-                break;
-            case LAYOUT_WORKER_PROTOCOL$1.MOVE_HANDLE_BAR:
-                editor.moveHandleBar(args.metadata);
-                break;
-            default:
-                break;
-        }
-
-    } catch (e) {
-        postMessage({
-            type: LAYOUT_WORKER_PROTOCOL$1.ERROR,
-            error: {
-                message: e.message,
-                stack: e.stack
-            }
-        });
-    }
-};