ui-layout-manager-dev 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "A react component to manage layout and themes in single page applications.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -62,7 +62,8 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
     "leaflet": "^1.9.4",
-    "sample-ui-component-library": "^0.0.0-beta"
+    "sample-ui-component-library": "^0.0.16-dev"
   }
 }

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

@@ -22,6 +22,10 @@ export const HandleBar = ({orientation, parent, sibling1, sibling2}) => {
      * It does the following:
      * - Determines the dynamic prop being modified (width or height)
      * - Determines the mouse down property to track (clientY or clientX)
+     * - Gets the references to the sibling elements
+     * - Gets the sibling sizes from the layout
+     * - Gets the sibling sizes from the layout reference
+     * - Saves the information in drag start info ref for access
      * @param {MouseEvent} e 
      */
     const handleMouseDown = (e) => {
@@ -110,7 +114,7 @@ export const HandleBar = ({orientation, parent, sibling1, sibling2}) => {
                 sibling1: sibling1,
                 sibling2: sibling2
             });
-        }, 0.1);
+        }, 4);
         
         // Don't update container sizes we are past min or max values.
         const sibling1SizeKeys = Object.keys(startInfo.sibling1LayoutConfig);
@@ -154,10 +158,25 @@ export const HandleBar = ({orientation, parent, sibling1, sibling2}) => {
         e.stopPropagation();
         document.removeEventListener("mousemove", handleMouseMove);
         document.removeEventListener("mouseup", handleMouseUp);
-        handleRef.current.classList.remove(dragStartInfo.current.hoverClass);  
-        dragStartInfo.current = null;           
+        clearTimeout(timerRef.current);  
+        if (handleRef.current && dragStartInfo.current) {
+            handleRef.current.classList.remove(dragStartInfo.current.hoverClass);
+        }
+        dragStartInfo.current = null;
     }
 
+
+    useEffect(() => {
+        return () => {        
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        }
+    }, []);
+
     return (
         <React.Fragment > 
             {

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

@@ -1,9 +1,20 @@
 import React, { useEffect, useLayoutEffect, useState, useRef, useCallback, useContext } from "react";
 import PropTypes from 'prop-types';
 import { Container } from "../Container/Container";
+import { HandleBar } from "../HandleBar/HandleBar";
 import { useLayoutController } from "../../Providers/LayoutProvider";
+import {
+    DndContext,
+    PointerSensor,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
+
+import { useDragState } from "../../Providers/DragProvider";
 
 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
@@ -14,21 +25,23 @@ import "./RootContainer.scss"
 export const RootContainer = () => {
     const controller = useLayoutController();
 
+    const { dragState, handleDragStart, handleDragOver, clearDrag } = useDragState();
+
     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 = [];      
+        const childElements = [];
         for (let index = 0; index < node.children.length; index++) {
             const childNode = node.children[index];
 
@@ -36,31 +49,43 @@ export const RootContainer = () => {
                 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}/>
+                    <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>
+                        <HandleBar
+                            key={index}
+                            orientation="vertical"
+                            parent={node.id}
+                            sibling1={childNode.sibling1}
+                            sibling2={childNode.sibling2}
+                        />
                     );
                 } else if (node.orientation === "vertical") {
                     childElements.push(
-                        <div className="horizontalLine"></div>
+                        <HandleBar
+                            key={index}
+                            orientation="horizontal"
+                            parent={node.id}
+                            sibling1={childNode.sibling1}
+                            sibling2={childNode.sibling2}
+                        />
                     );
                 }
             }
         };
         return childElements;
-    },[controller]);
+    }, [controller]);
 
 
     useLayoutEffect(() => {
-        if (controller) {            
+        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 (hasChildren) {
                 if (rootNode.orientation === "horizontal") {
                     rootRef.current.style.flexDirection = "row";
                 } else if (rootNode.orientation === "vertical") {
@@ -68,7 +93,7 @@ export const RootContainer = () => {
                 }
             }
 
-            setChildElements(hasChildren?processContainer(rootNode):null);
+            setChildElements(hasChildren ? processContainer(rootNode) : null);
 
             // Create resize observer to monitor changes in the root container size.
             const observer = new ResizeObserver((entries) => {
@@ -96,11 +121,43 @@ export const RootContainer = () => {
         }
     }, [controller]);
 
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 8
+            }
+        })
+    );
+
+    // Manually track the drag position for smooth overlay
+    const [dragPos, setDragPos] = useState({ left: 0, top: 0 });
+    useEffect(() => {
+        if (!dragState.isDragging) return;
+        const handleMove = (e) => {setDragPos({ left: e.clientX, top: e.clientY })};
+        window.addEventListener("pointermove", handleMove);
+        return () => {
+            window.removeEventListener("pointermove", handleMove);
+        };
+    }, [dragState.isDragging]);
+
     return (
-        <div className="root-container">
-            <div ref={rootRef} className="relative-container">
-                {childElements}
+        <DndContext sensors={sensors}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragEnd={clearDrag}
+            onDragCancel={clearDrag}>
+            
+            <div className="root-container">
+                <div ref={rootRef} className="relative-container">
+                    {childElements}
+                </div>
             </div>
-        </div>
+
+            {dragState.isDragging && (
+                <div className="drag-overlay" style={dragPos}>
+                    {dragState?.activeData?.preview}
+                </div>
+            )}
+        </DndContext>
     );
 }

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

@@ -11,3 +11,9 @@
     height: 100%;
     overflow: hidden;
 }
+
+.drag-overlay {
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+}

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

@@ -11,6 +11,9 @@ import TRANSFORMATION_TYPES from "../TRANSFORMATION_TYPES";
  * So rather than fully collapsing the container, it sets up a 
  * minimum size, this willl be useful for accordians and other containers.
  */
+
+const COLLAPSE_THRESHOLD_PX = 50
+
 export class HandleRulesEnforcer {
     /**
      * Initialize the child rule enforcer.
@@ -69,11 +72,13 @@ export class HandleRulesEnforcer {
             return;
         }
         
-        if (this.handleMetadata.handle.x < 100) {
+        // Hide and unhide containers from left of container.
+        if (this.handleMetadata.handle.x < COLLAPSE_THRESHOLD_PX) {
+            // Handle is less than collapse threshold from the left
             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) {
+        } else if (this.handleMetadata.handle.x > COLLAPSE_THRESHOLD_PX && this.sibling1.hidden) {
             this.args = {style: {"display":"flex"}}
             const sibling = this.getSiblingProps(this.sibling1.id);
             if ("min" in sibling.size) {
@@ -81,14 +86,15 @@ export class HandleRulesEnforcer {
             }
             this.sibling1.hidden = false;
             this.activeSibling = this.sibling1.id;
-        } 
-        
+        }
         
-        if (this.handleMetadata.handle.x > totalWidth - 100) {
+        // Hide and unhide containrs from right of container.
+        if (this.handleMetadata.handle.x > totalWidth - COLLAPSE_THRESHOLD_PX) {
+            // Handle is greater than collapse threshold from right, so unhide container if it is hidden.
             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) {
+        } else if (this.handleMetadata.handle.x < totalWidth - COLLAPSE_THRESHOLD_PX && this.sibling2.hidden) {
             this.args = {style: {"display":"flex"}}
             const sibling = this.getSiblingProps(this.sibling2.id);
             if ("min" in sibling.size) {
@@ -101,7 +107,7 @@ export class HandleRulesEnforcer {
 
 
      /**
-     * Process the vertical containers.
+     * Process the horizontal containers.
      */
     processHorizontalContainers () {
         const totalHeight = this.handleMetadata.sizes[this.parent.id].height;
@@ -113,11 +119,14 @@ export class HandleRulesEnforcer {
             return;
         }
         
-        if (this.handleMetadata.handle.y < 100) {
+        // Hide and unhide containers from top of container.
+        if (this.handleMetadata.handle.y < COLLAPSE_THRESHOLD_PX) {
+            // Handle is less than collapse threshold from the top
             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) {
+        } else if (this.handleMetadata.handle.y > COLLAPSE_THRESHOLD_PX && this.sibling1.hidden) {
+            // Handle is greater than collapse threshold from top, so unhide container if it is hidden.
             this.args = {style: {"display":"flex"}}
             const sibling = this.getSiblingProps(this.sibling1.id);
             if ("min" in sibling.size) {
@@ -127,12 +136,14 @@ export class HandleRulesEnforcer {
             this.activeSibling = this.sibling1.id;
         } 
         
-        
-        if (this.handleMetadata.handle.y > totalHeight - 100) {
+        // Hide and unhide containrs from bottom of container.
+        if (this.handleMetadata.handle.y > totalHeight - COLLAPSE_THRESHOLD_PX) {
+            // Handle is less than collapse threshold from the bottom
             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) {
+        } else if (this.handleMetadata.handle.y < totalHeight - COLLAPSE_THRESHOLD_PX && this.sibling2.hidden) {
+            // Handle is greater than collapse threshold from bottom, so unhide container if it is hidden.
             this.args = {style: {"display":"flex"}}
             const sibling = this.getSiblingProps(this.sibling2.id);
             if ("min" in sibling.size) {

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

@@ -75,7 +75,7 @@ export class LayoutEditor {
                         childStyle["flex"] = "0 0 auto";
                         break;
                     case "fill":
-                        childStyle["flexGrow"] = 1;
+                        childStyle["flex-grow"] = 1;
                         break;
                     default:
                         throw new Error(`Unknown size type "${child.size.initial.type}" in LDF configuration`);
@@ -154,7 +154,7 @@ export class LayoutEditor {
         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))) {
+        if (parent.type !== "split" || !("children" in parent)) {
             return;
         }
 

package/src/components/LayoutManager/LayoutManager.jsx

@@ -3,6 +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 "./LayoutManager.scss";
 
@@ -15,13 +16,16 @@ import "./LayoutManager.scss";
  * @return {React.ReactElement}
  */
 export const LayoutManager = ({ldf, registry}) => {
+    
 
     return (
-        <LayoutControllerProvider layout={ldf}>
-            <ComponentRegistryContext.Provider value={registry}>
-                <RootContainer/>
-            </ComponentRegistryContext.Provider>
-        </LayoutControllerProvider> 
+        <DragProvider>
+            <LayoutControllerProvider layout={ldf}>
+                <ComponentRegistryContext.Provider value={registry}>
+                    <RootContainer/>
+                </ComponentRegistryContext.Provider>
+            </LayoutControllerProvider> 
+        </DragProvider>
     );
 }
 

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

@@ -0,0 +1,87 @@
+import React, { createContext, useState, useCallback, useMemo } from "react";
+
+const DragContext = createContext(null);
+
+
+/**
+ * Exposes the drag state through a hook. The state is updated
+ * by linking the drage events to dnd kit. The consuming appplication
+ * uses the hook and access the latest state. This will enable the 
+ * consumer to react to drag start and over to preview interactions.
+ * 
+ * TODO:
+ * In the initial implementation, the child components will use the
+ * useDrag hook and react to the state change on drop. However, 
+ * eventually, I will modify it so that I only trigger the drop
+ * on the component in which it was dropped. For now, all the components
+ * will check to see if the drop was for them and ignore it if it isn't.
+ */
+export const DragProvider = ({ children }) => {
+
+    const [dragState, setDragState] = useState({
+        activeId: null,
+        activeData: null,
+        overId: null,
+        overData: null,
+        isDragging: false
+    });
+
+
+    const [drop, setDrop] = useState(null);
+
+    const handleDragStart = useCallback((event) => {
+        setDragState({
+            activeId: event.active?.id ?? null,
+            activeData: event.active?.data?.current ?? null,
+            overId: null,
+            overData: null,
+            isDragging: true
+        });
+    }, []);
+
+    const handleDragOver = useCallback((event) => {
+        setDragState((prev) => ({
+            ...prev,
+            overId: event.over?.id ?? null,
+            overData: event.over?.data?.current ?? null,
+        }));
+    }, []);
+
+    const clearDrag = useCallback((event) => {
+        setDrop({
+            activeId: event.active?.id ?? null,
+            activeData: event.active?.data?.current ?? null,
+            overId: event.over?.id ?? null,
+            overData: event.over?.data?.current ?? null,
+        });
+        setDragState({
+            activeId: null,
+            activeData: null,
+            overId: null,
+            overData: null,
+            isDragging: false,
+        });
+    }, []);
+
+    const value = useMemo(() => ({
+        dragState,
+        drop,
+        handleDragStart,
+        handleDragOver,
+        clearDrag,
+    }), [dragState, drop, handleDragStart, handleDragOver, clearDrag]);
+
+    return (
+        <DragContext.Provider value={value}>
+            {children}
+        </DragContext.Provider>
+    );
+}
+
+export const useDragState = () => {
+    const ctx = React.useContext(DragContext);
+    if (!ctx) {
+        throw new Error("useDragState must be used inside DragProvider");
+    }
+    return ctx;
+}

package/src/stories/LayoutManager.stories.js

@@ -3,6 +3,7 @@ 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 workbenchJSON from "./layouts/vsCode/workbench.json";
 
 import "./LayoutManager.stories.scss";
 
@@ -20,8 +21,8 @@ const Template = (args) => {
     const [, updateArgs] = useArgs();
     
     const registry = useMemo(() => ({
-        EditorVSCode: () =>
-            import('./sample_components/editor/EditorVSCode').then((m) => ({
+        FileEditor: () =>
+            import('./sample_components/fileeditor/FileEditor').then((m) => ({
             default: m.default,
         })),
         Stack: () =>
@@ -36,6 +37,10 @@ const Template = (args) => {
             import('./sample_components/map/MapSample').then((m) => ({
             default: m.default,
         })),
+        FileTree: () =>
+            import('./sample_components/filetree/FileTree').then((m) => ({
+            default: m.default,
+        })),
     }), []);
 
     useEffect(() => {
@@ -62,3 +67,10 @@ sample1.args = {
     ldf: sample1JSON
 }
 
+
+export const workbench = Template.bind({})
+
+workbench.args = {
+    ldf: workbenchJSON
+}
+

package/src/stories/layouts/vsCode/default.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",
@@ -165,24 +164,12 @@
                     "containerId": "stackContainer",
                     "type": "container",
                     "size": { "initial": { "type": "fill" }}
-                },
-                {
-                    "type": "handleBar",
-                    "sibling1": "stackContainer",
-                    "sibling2": "stackContainer2"
-                },
-                {
-                    "containerId": "stackContainer2",
-                    "type": "container",
-                    "size": { 
-                        "initial": { "value": 200, "unit": "px", "type": "fixed" }
-                    },
-                    "collapse": { "value": 500, "condition": "lessThan", "relative": "parent" }
                 }
             ]
         },
         "fileTabsContainer": {
             "id": "fileTabsContainer",
+            "component": "FileBrowser",
             "background": "#1e1e1e"
         },
         "stackContainer": {
@@ -190,11 +177,6 @@
             "component": "Stack",
             "background": "#1e1e1e"
         },
-        "stackContainer2": {
-            "id": "stackContainer2",
-            "component": "Stack",
-            "background": "#1e1e1e"
-        },
         "editorContainer": {
             "id": "editorContainer",
             "component": "EditorVSCode",

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

@@ -145,12 +145,16 @@
                 {
                     "containerId": "stackContainer2",
                     "type": "container",
-                    "size": { "initial": { "type": "fill" }}
+                    "size": { 
+                        "initial": { "value": 200, "unit": "px", "type": "fixed" }
+                    },
+                    "collapse": { "value": 500, "condition": "lessThan", "relative": "parent" }
                 }
             ]
         },
         "fileTabsContainer": {
             "id": "fileTabsContainer",
+            "component": "FileBrowser",
             "background": "#1e1e1e"
         },
         "stackContainer": {