ui-layout-manager-dev 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "A react component to manage layout and themes in single page applications.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -56,7 +56,8 @@
     "storybook": "^8.6.8",
     "style-loader": "^4.0.0",
     "vitest": "^4.0.18",
-    "sample-ui-component-library": "^0.0.16-dev"
+    "sample-ui-component-library": "^0.0.25-dev",
+    "leaflet": "^1.9.4"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -64,6 +65,5 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "leaflet": "^1.9.4"
   }
 }

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

@@ -115,7 +115,7 @@ export const Container = ({node}) => {
                 }
             }
             
-            setChildElements(hasChildren?processContainer(node):<LazyLoader content={node} />);
+            setChildElements(hasChildren?processContainer(node):<LazyLoader node={node} />);
             
             controller.registerContainer(node.id, containerAPI, containerRef.current);
             return () => {

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

@@ -129,24 +129,14 @@ export const HandleBar = ({orientation, parent, sibling1, sibling2}) => {
             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";
+        // If either of the containers are less than 50px, then don't update size.
+        if (newSibling1Size < MIN_PANEL_SIZE || newSibling2Size < MIN_PANEL_SIZE) {
+            return;
         }
+        
+        controller.containerRefs[sibling1].style[startInfo.propKey] = newSibling1Size + "px";
+        controller.containerRefs[sibling2].style[startInfo.propKey] = newSibling2Size + "px";
     }
 
     /**

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

@@ -1,6 +1,8 @@
-import React, { lazy, useMemo, Suspense, useContext } from "react";
+import React, { lazy, useMemo, Suspense, useContext, useEffect, useState } from "react";
 import PropTypes from 'prop-types';
 import ComponentRegistryContext from "../../Providers/ComponentRegistryContext";
+import { MenuBar } from "./MenuBar/MenuBar";
+import { Tabs } from "./Tabs/Tabs";
 
 import "./LazyLoader.scss"
 
@@ -10,20 +12,83 @@ import "./LazyLoader.scss"
  * 
  * @param {Object} content
  */
-export const LazyLoader = ({content}) => {
+export const LazyLoader = ({node}) => {
     const registry = useContext(ComponentRegistryContext);
+    const [showTitle, setShowTitle] = useState(false);
+    const [showTab, setShowTab] = useState(false);
 
+    const [lazyContainerTop, setLazyContainerTop] = useState(0);
+    const [tabsTop, setTabsTop] = useState(0);
+    const [selectedComponent, setSelectedComponent] = useState("");
+
+    // Lazy load the component when the selected component changes.
     const LazyComponent = useMemo(() => {
-        if (registry && content && "component" in content && content["component"] in registry) {
-            return lazy(registry[content["component"]]);
+        if (registry && selectedComponent in registry) {
+            return lazy(registry[selectedComponent]);
+        }
+    }, [registry, selectedComponent]);
+
+    /**
+     * Note: I am setting the top of the absolute position
+     * of the containers based on if the title and tabs are
+     * shown. This is a temporary implementation, I will be
+     * revisiting this and formally implementing it after.
+     */
+    useEffect(() => {
+        let _lazyContainerTop = 0;
+        let _tabsTop = 0;
+        if ("menuBar" in node) {
+            setShowTitle(true);
+            _tabsTop += 35;
+            _lazyContainerTop += 35;
         }
-    }, [registry, content]);
+        if ("tabsBar" in node) {
+            setShowTab(true);
+            _lazyContainerTop += 35;
+            selectTab(node.tabsBar.tabs[0]);
+        } else {
+            setSelectedComponent(node.component);
+        }
+        setLazyContainerTop(_lazyContainerTop)
+        setTabsTop(_tabsTop);
+    }, [node]);
+
+    /**
+     * Selects the provided tab.
+     * @param {Object} selectedTab 
+     */
+    const selectTab = (selectedTab) => {
+        node.tabsBar.tabs.forEach((tab) => {
+            if (tab === selectedTab) {
+                tab.selected = true;
+                setSelectedComponent(tab.component);
+            } else {
+                tab.selected = false;
+            }
+        });
+    }
 
     return (
-        <div className="lazyContainer">
-            <Suspense fallback={<div>Loading...</div>}>
-                {LazyComponent && <LazyComponent />}
-            </Suspense>
+        <div className="absoluteContainer">
+            <div className="contentContainer">
+                {
+                    showTitle && 
+                        <div className="menuContainer">
+                            <MenuBar node={node}/>
+                        </div>
+                }
+                {
+                    showTab && 
+                        <div className="tabsContainer" style={{ top: `${tabsTop}px`}}>
+                            <Tabs node={node} onTabClick={selectTab}/>
+                        </div>
+                }
+                <div className="lazycontainer" style={{ top: `${lazyContainerTop}px`}}>
+                    <Suspense fallback={<div>Loading...</div>}>
+                        {LazyComponent && <LazyComponent />}
+                    </Suspense>
+                </div>
+            </div>
         </div>
     );
 }

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

@@ -1,4 +1,41 @@
-.lazyContainer {
+/** 
+TODO: I agree that it is convoluted to use absolute, then relative and then absolute.
+However, the reason I am doing it is, it makes the layout of the monaco editor trivial
+and avoids resize observer loops when the container sizes change. I haven't thought
+about this enough and I will revisit it later.
+*/
+
+.absoluteContainer {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+}
+
+.contentContainer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.menuContainer {
+    position: absolute;
+    top: 0px;
+    height: 35px;
+    left: 0px;
+    right: 0px;
+}
+
+.tabsContainer {
+    position: absolute;
+    top: 0px;
+    height: 35px;
+    left: 0px;
+    right: 0px;
+}
+
+.lazycontainer {
     position: absolute;
     top: 0px;
     bottom: 0px;

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

@@ -0,0 +1,40 @@
+import PropTypes from "prop-types";
+
+import "./MenuBar.scss";
+
+import { XLg } from "react-bootstrap-icons";
+
+import { useLayoutController } from "../../../Providers/LayoutProvider";
+
+/**
+ * MenuBar component for the containers.
+ *
+ * @param {Object} node
+ */
+export const MenuBar = ({ node }) => {
+    const controller = useLayoutController();
+
+    const closeContainer = () => {
+        controller.invokeAction({
+            id: node?.menuBar?.closeContainerId,
+            action: "close",
+            args: {},
+        });
+    };
+
+    return (
+        <div className="titleContainer">
+            <div className="title">{node?.menuBar?.title}</div>
+            {
+                node?.menuBar?.showClose &&
+                <div onClick={closeContainer} className="close">
+                    <XLg />
+                </div>
+            }
+        </div>
+    );
+};
+
+MenuBar.propTypes = {
+    node : PropTypes.object,
+};

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

@@ -0,0 +1,22 @@
+.titleContainer {
+    position:absolute;
+    width:100%;
+    top:0;
+    bottom:1px;
+    display: flex;
+    align-items: center;
+    color:#bbbbbb;
+    justify-content: space-between;
+    background: #222425;
+}
+
+.titleContainer > .title {
+    padding-left: 30px;
+    font-size: 11px;
+}
+
+.titleContainer > .close {
+    padding-right: 15px;
+    font-size: 11px;
+    cursor: pointer;
+}

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

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+
+import {XLg} from "react-bootstrap-icons";
+import "./Tabs.scss"
+
+import { useLayoutController } from "../../../Providers/LayoutProvider";
+
+/**
+ * Tabs component for the containers.
+ * 
+ * @param {Object} node
+ */
+export const Tabs = ({node, onTabClick}) => {
+    const controller = useLayoutController();
+
+    const closeContainer = () => {
+        controller.invokeAction({
+            id: node?.tabsBar?.closeContainerId,
+            action: "close",
+            args: {},
+        });
+    };
+
+    return (
+        <div className="container-tabs-row">
+            <div className="container-tabs">
+            {node?.tabsBar?.tabs?.map((tab, index) => (
+                <div 
+                    key= {tab.name + String(index)}
+                    style={{ borderBottom: tab.selected ? "solid 1px white" : "none" }}
+                    onClick={(e) => onTabClick(tab)} 
+                    className="container-tab">
+                    {tab.name}
+                </div>
+            ))}
+            </div>
+
+            {
+                node?.tabsBar?.showClose && 
+                <div className="container-close">
+                    <XLg onClick={closeContainer}/>
+                </div>
+            }
+        </div>
+    );
+}
+
+Tabs.propTypes = {
+    node: PropTypes.array,
+    onTabsClick: PropTypes.func
+}

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

@@ -0,0 +1,34 @@
+.container-tabs-row{
+    position:relative;
+    width:100%;
+    height:100%;
+    background: #222425;
+    display:flex;
+    justify-content: space-between;
+}
+
+.container-tabs-row > .container-tabs {
+    display:flex;
+    flex-direction: row;
+    gap: 5px;
+    margin-left:20px;
+}
+
+.container-tabs-row > .container-tabs > .container-tab {
+    display:flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0 10px;
+    height: 28px;
+    font-size: 13px;
+    color:#bbbbbb;
+}
+
+.container-tabs-row > .container-close {
+    display:flex;
+    align-items: center;
+    cursor: pointer;
+    color:white;
+    font-size: 11px;
+    margin-right:10px;
+}

package/src/components/LayoutManager/Components/RootContainer/DragController.js

@@ -0,0 +1,79 @@
+import { useMemo } from "react";
+
+import { useLayoutEventPublisher } from "../../Providers/LayoutEventProvider";
+
+/**
+ * Drag controller exposed through the hook. It exposes
+ * callback functions which are connected to the dnd context. 
+ * 
+ * The controller is also initialized with the publish function
+ * exposed by the useLayoutEventPublisher so it can notify
+ * subscribers of any relevant events.
+ */
+class DragController {
+    constructor({publish}) {
+        this.publish = publish;
+        this.resetDragState();
+    }
+
+    resetDragState = () => {
+        this.dragState = {
+            activeId: null,
+            activeData: null,
+            overId: null,
+            overData: null,
+            isDragging: false
+        }
+    }
+
+    onDragStart = (event) => {
+        this.dragState = {
+            activeId: event.active?.id ?? null,
+            activeData: event.active?.data?.current ?? null,
+            overId: null,
+            overData: null,
+            isDragging: true
+        };
+    }
+
+    onDragOver = (event) => {
+        this.dragState.overId = event.over?.id ?? null;
+        this.dragState.overData = event.over?.data?.current ?? null;
+    }
+
+    onDragEnd = (event) => {
+        this.publish({
+          type: "drag:drop",
+          payload: {
+                activeId: event.active?.id ?? null,
+                activeData: event.active?.data?.current ?? null,
+                overId: event.over?.id ?? null,
+                overData: event.over?.data?.current ?? null,
+            },
+          source: "drag-provider",
+        })
+        this.resetDragState();
+    }
+
+    onDragCancel = (event) => {
+        this.resetDragState();
+    }
+
+    isDragging = () => {
+        return this.dragState.isDragging;
+    }
+
+    getDragPreview = () => {
+        return this.dragState?.activeData?.preview;
+    }
+}
+
+const useDragEventController = function() {
+  const publish  = useLayoutEventPublisher();
+
+  return useMemo(() => {
+    return new DragController({publish});
+  }, [publish]);
+}
+
+export default useDragEventController;

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

@@ -5,13 +5,13 @@ import { HandleBar } from "../HandleBar/HandleBar";
 import { useLayoutController } from "../../Providers/LayoutProvider";
 import {
     DndContext,
+    closestCenter,
     PointerSensor,
     useSensor,
     useSensors
 } from "@dnd-kit/core";
 
-import { useDragState } from "../../Providers/DragProvider";
-
+import useDragEventController from "./DragController";
 import "./RootContainer.scss"
 
 
@@ -23,9 +23,8 @@ import "./RootContainer.scss"
  * @return {React.ReactElement}
  */
 export const RootContainer = () => {
-    const controller = useLayoutController();
-
-    const { dragState, handleDragStart, handleDragOver, clearDrag } = useDragState();
+    const layoutController = useLayoutController();
+    const dragController = useDragEventController();
 
     const rootRef = useRef(null);
     const timerRef = useRef(null);
@@ -46,7 +45,7 @@ export const RootContainer = () => {
             const childNode = node.children[index];
 
             if (childNode.type === "container") {
-                const child = controller.ldf.containers[node.children[index].containerId];
+                const child = layoutController.ldf.containers[node.children[index].containerId];
                 child.parent = node;
                 childElements.push(
                     <Container key={index} meta={node.children[index]} id={child.id} node={child} />
@@ -76,14 +75,14 @@ export const RootContainer = () => {
             }
         };
         return childElements;
-    }, [controller]);
+    }, [layoutController]);
 
 
     useLayoutEffect(() => {
-        if (controller) {
-            const rootNode = controller.ldf.containers[controller.ldf.layoutRoot];
+        if (layoutController) {
+            const rootNode = layoutController.ldf.containers[layoutController.ldf.layoutRoot];
             const hasChildren = rootNode.children && rootNode.children.length > 0
-            controller.registerContainer(rootNode.id, rootContainerAPI, rootRef.current);
+            layoutController.registerContainer(rootNode.id, rootContainerAPI, rootRef.current);
 
             if (hasChildren) {
                 if (rootNode.orientation === "horizontal") {
@@ -107,7 +106,7 @@ export const RootContainer = () => {
 
                     timerRef.current = setTimeout(() => {
                         resizingRef.current = false;
-                        controller.handleRootResize(width, height);
+                        layoutController.handleRootResize(width, height);
                     }, 1);
                 }
             });
@@ -115,11 +114,11 @@ export const RootContainer = () => {
             observer.observe(rootRef.current);
 
             return () => {
-                controller.unregisterContainer(controller.ldf.layoutRoot);
+                layoutController.unregisterContainer(layoutController.ldf.layoutRoot);
                 observer.disconnect();
             }
         }
-    }, [controller]);
+    }, [layoutController]);
 
     const sensors = useSensors(
         useSensor(PointerSensor, {
@@ -132,20 +131,21 @@ export const RootContainer = () => {
     // Manually track the drag position for smooth overlay
     const [dragPos, setDragPos] = useState({ left: 0, top: 0 });
     useEffect(() => {
-        if (!dragState.isDragging) return;
+        if (!dragController.isDragging()) return;
         const handleMove = (e) => {setDragPos({ left: e.clientX, top: e.clientY })};
         window.addEventListener("pointermove", handleMove);
         return () => {
             window.removeEventListener("pointermove", handleMove);
         };
-    }, [dragState.isDragging]);
+    }, [dragController.isDragging()]);
 
     return (
         <DndContext sensors={sensors}
-            onDragStart={handleDragStart}
-            onDragOver={handleDragOver}
-            onDragEnd={clearDrag}
-            onDragCancel={clearDrag}>
+            collisionDetection={closestCenter}
+            onDragStart={dragController.onDragStart}
+            onDragOver={dragController.onDragOver}
+            onDragEnd={dragController.onDragEnd}
+            onDragCancel={dragController.onDragCancel}>
             
             <div className="root-container">
                 <div ref={rootRef} className="relative-container">
@@ -153,9 +153,9 @@ export const RootContainer = () => {
                 </div>
             </div>
 
-            {dragState.isDragging && (
+            {dragController.isDragging() && (
                 <div className="drag-overlay" style={dragPos}>
-                    {dragState?.activeData?.preview}
+                    {dragController.getDragPreview()}
                 </div>
             )}
         </DndContext>

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

@@ -2,6 +2,7 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 .relative-container {

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

@@ -4,7 +4,8 @@ let LAYOUT_WORKER_PROTOCOL = {
     APPLY_SIZES: 3,
     ERROR: 4,
     TRANSFORMATIONS: 5,
-    MOVE_HANDLE_BAR: 6
+    MOVE_HANDLE_BAR: 6,
+    INVOKE_ACTION: 7,
 };
 LAYOUT_WORKER_PROTOCOL = Object.freeze(LAYOUT_WORKER_PROTOCOL);
 

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

@@ -198,6 +198,20 @@ export class LayoutController {
         }
     }
 
+    /**
+     * Invoke a specific action on a container given the id.
+     */
+    invokeAction({id, action, args}) {
+        this.sendToWorker(
+            LAYOUT_WORKER_PROTOCOL.INVOKE_ACTION, 
+            { 
+                id: id,
+                action: action,
+                args: args
+            }
+        );
+    }
+
     /**
      * Performs cleanup when the controller is destroyed.
      */

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

@@ -0,0 +1,55 @@
+/**
+ * Layout Event Controller used to subscribe to events
+ * and publish events.
+ */
+class LayoutEventController {
+
+    constructor() {
+        this.subscribers = new Map();
+    }
+
+    /**
+     * Subscribe to event type and provide handler
+     * @param {String} type 
+     * @param {Function} handler 
+     * @returns 
+     */
+    subscribe(type, handler) {
+        // Create set for type if it doesn't exist
+        if (!this.subscribers.has(type)) {
+            this.subscribers.set(type, new Set());
+        }
+
+        // Add handler to type set
+        const handlers = this.subscribers.get(type);
+        handlers.add(handler);
+
+        // Return unsubscribe function 
+        const unsubscribe = () => {
+            handlers.delete(handler);
+            if (handlers.size === 0) {
+                this.subscribers.delete(type);
+            }
+        }
+
+        return unsubscribe;
+    }
+
+    /**
+     * Publishes the event to the subscribers.
+     * @param {Object} event 
+     * @returns 
+     */
+    publish(event) {
+        const handlers = this.subscribers.get(event.type);
+        if (!handlers) return;
+
+        for (const handler of handlers) {
+            handler(event);
+        }
+    }
+
+}
+
+export default LayoutEventController;
+