ui-layout-manager-dev 0.0.1

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

@@ -0,0 +1,183 @@
+// @ts-nocheck
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import PropTypes from 'prop-types';
+import { useLayoutController } from "../../Providers/LayoutProvider";
+
+import "./HandleBar.scss";
+
+/**
+ * 
+ */
+export const HandleBar = ({orientation, parent, sibling1, sibling2}) => {
+
+    const controller = useLayoutController();
+    const dragStartInfo = useRef(null)
+    const handleRef = useRef(null);
+    const timerRef = useRef(null);
+    
+    const MIN_PANEL_SIZE = 50;
+
+    /**
+     * This function saves the relevant info on mouse down.
+     * It does the following:
+     * - Determines the dynamic prop being modified (width or height)
+     * - Determines the mouse down property to track (clientY or clientX)
+     * @param {MouseEvent} e 
+     */
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+
+        let downKey, propKey, hoverClass;
+        if (orientation === "horizontal") {
+            downKey = "clientY";
+            propKey = "height";
+            hoverClass = "handleBarHorizontalHover";
+        } else if (orientation === "vertical"){
+            downKey = "clientX";
+            propKey = "width";
+            hoverClass = "handleBarVerticalHover";
+        }
+
+        const parentRef = controller.containerRefs[parent];
+        const sibling1Ref = controller.containerRefs[sibling1];
+        const sibling2Ref = controller.containerRefs[sibling2];
+
+        // Get the min, max sizes of siblings 1 and 2
+        let sibling1LayoutConfig, sibling2LayoutConfig;
+        const parentContainer = controller.ldf.containers[parent];
+        for (let i = 0; i < parentContainer.children.length; i++) {
+            if (parentContainer.children[i].containerId === sibling1) {
+                sibling1LayoutConfig = parentContainer.children[i].size;
+            } else if (parentContainer.children[i].containerId === sibling2) {
+                sibling2LayoutConfig = parentContainer.children[i].size;
+            }
+        }
+
+        dragStartInfo.current = {
+            "downValueY": e[downKey],
+            "hoverClass": hoverClass,
+            "downKey": downKey,
+            "propKey": propKey,
+            "parentSize": parentRef.getBoundingClientRect()[propKey],
+            "parentRef": parentRef,
+            "sibling1Ref": sibling1Ref,
+            "sibling2Ref": sibling2Ref,
+            "sibling1LayoutConfig": sibling1LayoutConfig,
+            "sibling2LayoutConfig": sibling2LayoutConfig,
+            "sibling1Size": sibling1Ref.getBoundingClientRect()[propKey],
+            "sibling2Size": sibling2Ref.getBoundingClientRect()[propKey],
+        }
+        
+        handleRef.current.classList.add(hoverClass);
+    }
+
+    function getRelativeMousePosition(event, parentContainer) {
+        const parentBounds = parentContainer.getBoundingClientRect();
+        const relativeX = event.clientX - parentBounds.left;
+        const relativeY = event.clientY - parentBounds.top;
+        return { x: relativeX, y: relativeY };
+    }
+
+    /**
+     * This function is called when the mouse is being dragged and 
+     * it uses the delta from the starting down point to calculate
+     * the new sizes (width or height). 
+     * @param {Event} e 
+     * @returns 
+     */
+    const handleMouseMove = (e) => {
+        if (!dragStartInfo.current) return;
+        e.preventDefault();
+        e.stopPropagation();
+
+        const startInfo = dragStartInfo.current;
+
+        // Use delta from starting down point to calculate new heights
+        const delta = e[startInfo.downKey] - startInfo.downValueY;
+        const newSibling1Size = startInfo.sibling1Size + delta;
+        const newSibling2Size = startInfo.sibling2Size - delta;
+
+        clearTimeout(timerRef.current);
+
+        timerRef.current = setTimeout(() => {
+            // Resize here
+            controller.moveHandleBar({
+                handle: getRelativeMousePosition(e, startInfo.parentRef),
+                parent: parent,
+                sibling1: sibling1,
+                sibling2: sibling2
+            });
+        }, 0.1);
+        
+        // Don't update container sizes we are past min or max values.
+        const sibling1SizeKeys = Object.keys(startInfo.sibling1LayoutConfig);
+        if (sibling1SizeKeys.includes("min") && newSibling1Size <= startInfo.sibling1LayoutConfig.min.value ||
+            sibling1SizeKeys.includes("max") && newSibling1Size >= startInfo.sibling1LayoutConfig.max.value) {
+            return;
+        }
+        
+        // Don't update container sizes we are past min or max values.
+        const sibling2SizeKeys = Object.keys(startInfo.sibling2LayoutConfig);
+        if (sibling2SizeKeys.includes("min") && newSibling2Size <= startInfo.sibling2LayoutConfig.min.value ||
+            sibling2SizeKeys.includes("max") && newSibling2Size >= startInfo.sibling2LayoutConfig.max.value) {
+            return;
+        }
+        
+        // If both siblings are type fill, then set sizes. Set min size of sibling sizes to 50px;
+        // TODO: Make into constants and I think this should be evaluated inside the controller.
+        const sibling1Type = startInfo.sibling1LayoutConfig.initial.type;
+        const sibling2Type = startInfo.sibling2LayoutConfig.initial.type;
+        if (sibling1Type === "fill" && sibling2Type === "fill" && newSibling1Size > 50 && newSibling2Size > 50) {
+            controller.containerRefs[sibling1].style[startInfo.propKey] = newSibling1Size + "px";
+            controller.containerRefs[sibling2].style[startInfo.propKey] = newSibling2Size + "px";
+            return;
+        }
+
+        // Don't update fill types, flex box will take care of that
+        if (!(sibling1Type === "fill")) {
+            controller.containerRefs[sibling1].style[startInfo.propKey] = newSibling1Size + "px";
+        }
+        if (!(sibling2Type === "fill")) {
+            controller.containerRefs[sibling2].style[startInfo.propKey] = newSibling2Size + "px";
+        }
+    }
+
+    /**
+     * Perform cleanup after drag event has finished.
+     * @param {Event} e 
+     */
+    const handleMouseUp = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        handleRef.current.classList.remove(dragStartInfo.current.hoverClass);  
+        dragStartInfo.current = null;           
+    }
+
+    return (
+        <React.Fragment > 
+            {
+                orientation === "horizontal"?
+                <div onMouseDown={(e) => handleMouseDown(e)} className="handleBarHorizontalContainer">
+                    <div ref={handleRef} className="handleBarHorizontal"></div>
+                </div>:
+                orientation === "vertical"?
+                <div onMouseDown={(e) => handleMouseDown(e)} className="handleBarVerticalContainer">
+                    <div ref={handleRef} className="handleBarVertical"></div>
+                </div>:
+                null
+            }
+        </React.Fragment>
+    );
+};
+
+HandleBar.propTypes = {
+    orientation: PropTypes.string,
+    sibling1: PropTypes.string,
+    sibling2: PropTypes.string,
+    parent: PropTypes.string
+}

package/src/components/LayoutManager/Components/HandleBar/HandleBar.scss

@@ -0,0 +1,74 @@
+$handle-bar-color: #414141;
+$handle-bar-size: 1px;
+$handle-bar-size-expanded: 5px;
+$handle-bar-hover-color: #007acc;
+
+// Creates the container which will hold the handle bar
+.handleBarHorizontalContainer {
+    position:relative;
+    width:100%;
+    height: $handle-bar-size;
+    background-color: $handle-bar-color;
+}
+
+// Create handle bar and center it 
+.handleBarHorizontal{
+    position:absolute;
+    top: 50%;
+    height: $handle-bar-size;
+    left:0;
+    right:0;
+    transform: translateY(-50%);
+    transition: all 0.2s ease;
+}
+
+// Update the height and let it animate
+.handleBarHorizontal:hover {
+    background-color: $handle-bar-hover-color;
+    cursor: ns-resize; 
+    height: $handle-bar-size-expanded;
+    z-index: 10;
+}
+
+// Set by the component so hover is active even
+// when mouse isn't over handle during drag
+.handleBarHorizontalHover {
+    background-color: $handle-bar-hover-color;
+    cursor: ns-resize; 
+    height: $handle-bar-size-expanded;
+    z-index: 10;
+}
+
+
+// See horizontal style comments, they are the same for vertical
+.handleBarVerticalContainer {
+    position:relative;
+    height:100%;
+    width: $handle-bar-size;
+    background-color: $handle-bar-color;
+    z-index: 1;
+}
+
+.handleBarVertical{
+    position: absolute;
+    top: 0;
+    width: $handle-bar-size;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    transition: all 0.3s ease;
+}
+
+.handleBarVertical:hover {
+    background-color: $handle-bar-hover-color;
+    cursor: ew-resize; 
+    width: $handle-bar-size-expanded;
+    z-index: 10;
+}
+
+.handleBarVerticalHover {
+    background-color: $handle-bar-hover-color;
+    cursor: ew-resize; 
+    width: $handle-bar-size-expanded;
+    z-index: 10;
+}

package/src/components/LayoutManager/Components/LazyLoader/LazyLoader.js

@@ -0,0 +1,33 @@
+import React, { lazy, useMemo, Suspense, useContext } from "react";
+import PropTypes from 'prop-types';
+import ComponentRegistryContext from "../../Providers/ComponentRegistryContext";
+
+import "./LazyLoader.scss"
+
+/**
+ * LazyLoader component that renders a component
+ * specified in the ldf file.
+ * 
+ * @param {Object} content
+ */
+export const LazyLoader = ({content}) => {
+    const registry = useContext(ComponentRegistryContext);
+
+    const LazyComponent = useMemo(() => {
+        if (registry && content && "component" in content && content["component"] in registry) {
+            return lazy(registry[content["component"]]);
+        }
+    }, [registry, content]);
+
+    return (
+        <div className="lazyContainer">
+            <Suspense fallback={<div>Loading...</div>}>
+                {LazyComponent && <LazyComponent />}
+            </Suspense>
+        </div>
+    );
+}
+
+LazyLoader.propTypes = {
+    content: PropTypes.object,
+}

package/src/components/LayoutManager/Components/LazyLoader/LazyLoader.scss

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

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

@@ -0,0 +1,106 @@
+import React, { useEffect, useLayoutEffect, useState, useRef, useCallback, useContext } from "react";
+import PropTypes from 'prop-types';
+import { Container } from "../Container/Container";
+import { useLayoutController } from "../../Providers/LayoutProvider";
+
+import "./RootContainer.scss"
+/**
+ * Root node for the layout tree. This component will start 
+ * rendering the tree and it will also watch for changes in the
+ * root container sizes to process layout changes.
+ * 
+ * @return {React.ReactElement}
+ */
+export const RootContainer = () => {
+    const controller = useLayoutController();
+
+    const rootRef = useRef(null);
+    const timerRef = useRef(null);
+    const resizingRef = useRef(false);
+    
+    // Create the container API that will be used by the controller.
+    const rootContainerAPI = useRef({});
+    rootContainerAPI.current = {};
+
+    const [childElements, setChildElements] = useState(null);
+    
+    /**
+     * Renders child containers recursively.
+     */
+    const processContainer = useCallback((node) => {
+        const childElements = [];      
+        for (let index = 0; index < node.children.length; index++) {
+            const childNode = node.children[index];
+
+            if (childNode.type === "container") {
+                const child = controller.ldf.containers[node.children[index].containerId];
+                child.parent = node;
+                childElements.push(
+                    <Container key={index} meta={node.children[index]} id={child.id} node={child}/>
+                );
+            } else if (childNode.type === "handleBar") {
+                if (node.orientation === "horizontal") {
+                    childElements.push(
+                        <div className="verticalLine"></div>
+                    );
+                } else if (node.orientation === "vertical") {
+                    childElements.push(
+                        <div className="horizontalLine"></div>
+                    );
+                }
+            }
+        };
+        return childElements;
+    },[controller]);
+
+
+    useLayoutEffect(() => {
+        if (controller) {            
+            const rootNode = controller.ldf.containers[controller.ldf.layoutRoot];
+            const hasChildren = rootNode.children && rootNode.children.length > 0
+            controller.registerContainer(rootNode.id, rootContainerAPI, rootRef.current);
+
+            if (hasChildren) {                          
+                if (rootNode.orientation === "horizontal") {
+                    rootRef.current.style.flexDirection = "row";
+                } else if (rootNode.orientation === "vertical") {
+                    rootRef.current.style.flexDirection = "column";
+                }
+            }
+
+            setChildElements(hasChildren?processContainer(rootNode):null);
+
+            // Create resize observer to monitor changes in the root container size.
+            const observer = new ResizeObserver((entries) => {
+
+                if (!resizingRef.current) resizingRef.current = true;
+
+                for (let entry of entries) {
+                    const { width, height } = entry.contentRect;
+
+                    clearTimeout(timerRef.current);
+
+                    timerRef.current = setTimeout(() => {
+                        resizingRef.current = false;
+                        controller.handleRootResize(width, height);
+                    }, 1);
+                }
+            });
+
+            observer.observe(rootRef.current);
+
+            return () => {
+                controller.unregisterContainer(controller.ldf.layoutRoot);
+                observer.disconnect();
+            }
+        }
+    }, [controller]);
+
+    return (
+        <div className="root-container">
+            <div ref={rootRef} className="relative-container">
+                {childElements}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,13 @@
+.root-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.relative-container {
+    position: relative;
+    display:flex;
+    width:100%;
+    height: 100%;
+    overflow: hidden;
+}

package/src/components/LayoutManager/Controller/LAYOUT_WORKER_PROTOCOL.js

@@ -0,0 +1,11 @@
+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);
+
+export default LAYOUT_WORKER_PROTOCOL;

package/src/components/LayoutManager/Controller/LayoutController.js

@@ -0,0 +1,201 @@
+import LAYOUT_WORKER_PROTOCOL from "./LAYOUT_WORKER_PROTOCOL";
+import TRANSFORMATION_TYPES from "./TRANSFORMATION_TYPES";
+
+/**
+ * This controller is responsible for managing the layout of the application.
+ * - It will handle the registration and unregistration of containers.
+ * - It will handle the layout changes and notify the worker to process the layout changes.
+ * - It will update the container sizes with the updated values calculated by the worker.
+ * 
+ * @class LayoutController
+ */
+export class LayoutController {
+
+    /** 
+     * Constructor
+     * 
+     * @param {Object} ldf - Layout Definition JSON object
+     */
+    constructor(ldf) {
+        this.containers = {};
+        this.containerRefs = {};
+        this.ldf = ldf;
+        this.numberOfContainers = 0;
+        this.registeredContainers = 0;
+        this.layoutLoaded = false;
+
+        this.numberOfContainers = this.ldf.containers ? Object.keys(this.ldf.containers).length: 0;
+
+        try {
+            this.worker = new Worker(
+                new URL('./Worker/LayoutWorker.js', import.meta.url),
+                { type: 'module' }
+            );
+            this.worker.onmessage = this.handleWorkerMessage.bind(this);
+            this.worker.onerror = (error) => console.error('Worker error:', error);
+            this.sendToWorker(LAYOUT_WORKER_PROTOCOL.INITIALIZE, {ldf: ldf})
+            
+        } catch (error) {
+            console.error('Failed to create worker:', error);
+        }
+    }
+
+    /**
+     * Sends message to worker with the provided arguments.
+     * @param {Number} code 
+     * @param {Object} args 
+     */
+    sendToWorker(code, args) {
+        this.worker.postMessage({
+            code:code,
+            args: args
+        });
+    }
+
+    /**
+     * Allows containers to register themselves with the controller.
+     * @param {String} id 
+     * @param {Object} containerApi 
+     * @param {HTMLElement} containerRef 
+     */
+    registerContainer(id, containerApi, containerRef) {     
+        if (!(id in this.containers)) {
+            this.registeredContainers += 1
+        }
+ 
+        this.containers[id] = containerApi;
+        this.containerRefs[id] = containerRef;
+
+        console.log(`Registered container with id: ${id} `);
+
+        if (this.registeredContainers === this.numberOfContainers && !this.layoutLoaded) {
+            console.log("All containers registered, layout is ready.");
+            this.sendToWorker(LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX);
+        }
+    }
+    
+    /**
+     * Allows containers to unregister themselves with the controller.
+     * @param {String} id 
+     */
+    unregisterContainer(id) {
+        delete this.containers[id];
+    }
+
+    /**
+     * This function is called when the root container is resized.
+     * It will notify the worker to process the layout changes.
+     */
+    handleRootResize() { 
+        if (!this.layoutLoaded) return;
+        // console.log("Root container resized to:", width, height);
+        const sizes = {};
+        for (const id in this.containerRefs) {
+            if (this.containerRefs.hasOwnProperty(id)) {
+                const boundingRect = this.containerRefs[id].getBoundingClientRect();
+                sizes[id] = {
+                    width: boundingRect.width, 
+                    height: boundingRect.height
+                };
+            }
+        }        
+        this.sendToWorker(
+            LAYOUT_WORKER_PROTOCOL.APPLY_SIZES, 
+            { sizes: sizes }
+        );    
+    }
+
+
+    /**
+     * Move handle bar is called by the handle bar component with the
+     * metadata about its parent and the siblings being resized. This
+     * information is parsed and passed to the layout editor to enforce
+     * the layout rules.
+     * @param {Object} metadata 
+     */
+    moveHandleBar(metadata) {
+        let sizes = {};
+        const containerIds = [metadata.parent, metadata.sibling1, metadata.sibling2];
+        for (const containerId of containerIds) {
+            let boundingRect = this.containerRefs[containerId].getBoundingClientRect();
+            sizes[containerId] = {
+                width: boundingRect.width, 
+                height: boundingRect.height
+            };
+        }
+
+        metadata.sizes = sizes;  
+        this.sendToWorker(
+            LAYOUT_WORKER_PROTOCOL.MOVE_HANDLE_BAR, 
+            { 
+                metadata: metadata
+            }
+        );
+
+        // TODO: This is temporary, after handle bar move, the layout rules are
+        // applied to react to new container sizes. This can be done more efficiently
+        // because we only need to react the containers that were changed. This calculates
+        // the entire layout.
+        this.handleRootResize();
+    }
+
+    /**
+     * Apply the given transformations
+     * @param {Object} transformations 
+     * @param {Object} isInitial 
+     */
+    applyTransformations (transformations, isInitial) {
+        requestAnimationFrame(() => {
+            for (const transformation of transformations) {
+                switch (transformation.type) {
+                    case TRANSFORMATION_TYPES.UPDATE_SIZE:
+                        this.containers[transformation.id].current.updateStyles(
+                            transformation.args.style
+                        );
+                        break;
+                    case TRANSFORMATION_TYPES.REMOVE_NODE:
+                        break;
+                    default:
+                        console.warn("Unknown transformation was requested.");
+                        break;
+                }
+            };
+            if (isInitial) {
+                this.layoutLoaded = true;
+            }
+        });
+    };
+
+    /**
+     * Handles messages from worker
+     * @param {Object} event 
+     */
+    handleWorkerMessage(event) {
+        let transformations;
+        switch(event.data.type) {
+            case LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX:
+                transformations = event.data.data;
+                this.applyTransformations(transformations, true);
+                break;
+            case LAYOUT_WORKER_PROTOCOL.TRANSFORMATIONS:
+                transformations = event.data.data;
+                this.applyTransformations(transformations, false);
+                break;
+            case LAYOUT_WORKER_PROTOCOL.ERROR:
+                console.error("Error from worker:", event.data);
+                break;
+            default:
+                break;
+        }
+    }
+
+    /**
+     * Performs cleanup when the controller is destroyed.
+     */
+    destroy() {
+        if (this.worker) {
+            this.worker.terminate();
+            this.worker = null;
+        }
+    }
+}

package/src/components/LayoutManager/Controller/TRANSFORMATION_TYPES.js

@@ -0,0 +1,6 @@
+let TRANSFORMATION_TYPES = {
+    UPDATE_SIZE: 1
+};
+TRANSFORMATION_TYPES = Object.freeze(TRANSFORMATION_TYPES);
+
+export default TRANSFORMATION_TYPES;