ui-layout-manager-dev 0.0.18 → 0.0.20

package/src/stories/sample_components/fileeditor/FileEditor.jsx

@@ -3,45 +3,69 @@ import { useRef, useLayoutEffect, useEffect } from "react";
 import { Editor } from 'sample-ui-component-library';
 import fileTree from "./workspace_sample.json";
 
-import { useDragState } from "../../../components/LayoutManager/Providers/DragProvider";
+import { flattenTree } from "./helper";
 
-const flattenTree = (tree, level = 0) =>
-  tree.flatMap(node => [
-    { ...node, level },
-    ...(node.children ? flattenTree(node.children, level + 1) : [])
-]);
+import { useLayoutEventSubscription } from "../../../components/LayoutManager/Providers/LayoutEventProvider";
 
 
 const FileEditor = () => {
     const editorRef = useRef(null);
-
-    const { drop } = useDragState();
-
-    useEffect(() => {
+    const parentIdRef = useRef(null);
+    
+    useLayoutEventSubscription("file:selected", (event) => {
+        editorRef.current.addTab(event.payload);
+    });
+    
+    useLayoutEventSubscription("drag:drop", (event) => {
+        const drop = event.payload;
         if (!drop?.overId) {
             return;
         }
         
         const activeType = drop.activeData.type;
         const overType = drop.overData.type;
+        const activeParent = drop.activeData.parentId;
+        const overParent = drop.overData.parentId;
+
+        // Only drop files, not folders.
+        if (drop.activeData.node.type !== "file") {
+            return;
+        }
+
+        // TODO: This is a temporary solution while I switch to event based arch.
         if (activeType === "EditorTab" && overType === "EditorTabGutter") {
-            editorRef.current.moveTab(drop.activeData.node.uid, drop.overData.index);
-        } else if (activeType === "FileTreeNode" && overType === "EditorTabGutter") {
+            if (activeParent === overParent) {
+                // Moving within same editor
+                if (overParent === parentIdRef.current) {
+                    editorRef.current.moveTab(drop.activeData.node.uid, drop.overData.index);
+                }
+            } else  {
+                // Moving between editors, need to remove the tab that was moved
+                if (overParent === parentIdRef.current) {
+                    editorRef.current.addTab(drop.activeData.node, drop.overData.index);
+                } else if (activeParent === parentIdRef.current) {
+                    editorRef.current.closeTab(drop.activeData.node.uid);
+                }
+            }
+        } else if (activeType === "FileTreeNode" && overType === "EditorTabGutter" && overParent === parentIdRef.current) {
+            // Moving from fileTree to editor
             editorRef.current.addTab(drop.activeData.node, drop.overData.index);
         }
-    }, [drop]);
+    });
 
-    useLayoutEffect(() => {
-        editorRef.current.setTabGroupId("tab-group-1");
-        flattenTree(fileTree.tree).forEach((node) => {
-            if (node.type === "file") {
-                editorRef.current.addTab(node);
-            }
-        });
+    useEffect(() => {
+        parentIdRef.current = crypto.randomUUID();
+        editorRef.current.setTabGroupId(parentIdRef.current);
+
+        // This is only for demo purposes, I am randomly loading 2 files.
+        const files = flattenTree(fileTree.tree).filter((node) => node.type === "file");
+        for (let i = 0; i < 4; i++) {
+            editorRef.current.addTab(files[Math.floor(Math.random() * 2) + 1]);
+        }
     }, []);
 
     return (
-        <Editor  ref={editorRef} />  
+        <Editor ref={editorRef} />  
     );
 };
 

package/src/stories/sample_components/fileeditor/helper.js

@@ -0,0 +1,22 @@
+/**
+ * Given a file tree, it flattens the tree into a list of nodes with the level of each node in the tree.
+ * 
+ * @param {Array} tree - The file tree to flatten.
+ * @param {number} level - The current level of the tree (used for indentation).
+ * @return {Array} - The flattened tree with level information.
+ */
+export const flattenTree = (tree, level = 0) => {
+    if (!level) {
+        level = 0;
+    }
+    let rows = [];
+    for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+        node.level = level;
+        rows.push(node);
+        if (node?.children) {
+            rows = rows.concat(flattenTree(node.children, level + 1));
+        }
+    }
+    return rows;
+}

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

@@ -3,19 +3,25 @@ import { useRef, useLayoutEffect } from "react";
 import { FileBrowser } from 'sample-ui-component-library';
 import tree from "./workspace_sample.json"
 
+import { useLayoutEventPublisher } from "../../../components/LayoutManager/Providers/LayoutEventProvider";
+
 const FileTree = () => {
     const fileBrowserRef = useRef(null);
+    const publish = useLayoutEventPublisher();
 
     useLayoutEffect(() => {
         fileBrowserRef.current.addFileTree(tree.tree);
-
-        setTimeout(() => {
-            fileBrowserRef.current.selectNode("dir-f6459410-1634-4dbc-8d76-35896822158d");
-        }, 3000);
+        // setTimeout(() => {
+        //     fileBrowserRef.current.selectNode("dir-f6459410-1634-4dbc-8d76-35896822158d");
+        // }, 3000);
     }, []);
 
     const onSelectFile = (node) => {
-        console.log("Selected Node:", node);
+        publish({
+          type: "file:selected",
+          payload: node,
+          source: "file-tree",
+        })
     }
 
     return (

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

@@ -1,87 +0,0 @@
-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;
-}