sample-ui-component-library 0.0.10-dev → 0.0.11-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.10-dev",
+  "version": "0.0.11-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Editor/Tabs/Tab/Tab.jsx

@@ -30,7 +30,8 @@ export const Tab = ({ id, parentId, node }) => {
         data: {
             type: "EditorTab",
             parentId: parentId,
-            node: node
+            node: node,
+            preview: <TabPreview node={node} />
         },
     });
 
@@ -80,10 +81,12 @@ Tab.propTypes = {
 }
 
 
-export const TabPreview = ({info}) => {
+export const TabPreview = ({node}) => {
     return (
         <div className="tab" style={{ backgroundColor: ACTIVE_TAB_BG_COLOR, color: ACTIVE_TAB_FG_COLOR, opacity:0.5 }}>
-            <FileEarmark className="icon" />{info.label}<XLg className="close-icon"/>
+            <FileEarmark className="icon" />
+            <span className="tab-name">{node.name}</span>
+            <XLg className="close-icon"/>
         </div>
     );
 }

package/src/components/FileBrowser/TreeNode/TreeNode.jsx

@@ -23,7 +23,8 @@ export const TreeNode = ({ id, node }) => {
             id,
             data: {
                 type: "FileTreeNode",
-                node: node
+                node: node,
+                preview: <TreeNodePreview node={node}/ >
             }
          }
     );
@@ -95,7 +96,7 @@ export const TreeNode = ({ id, node }) => {
 
 export const TreeNodePreview = ({node}) => {
     return (
-         <div className="file-node-row">
+         <div className="file-node-row" >
             <span className="file-name">{node.name}</span>
          </div>
     );

package/src/stories/Editor.stories.js

@@ -63,29 +63,53 @@ const Template = (args) => {
         editorRef.current.addTab(node,2);
     }, []);
 
-    const onDragStart = (event) => {
-        console.log("");
-        console.log("Drag Started");
-        const dragPreview = editorRef.current.getPreviewElement(event.active.data.current.node.uid);
-        setDragPreviewLabel(dragPreview);
-    }
-
+const [dragging, setDragging] = useState(false);
+  
+    /**
+     * Callback for when drag ends.
+     */
     const handleDragEnd = (event) =>{
         const { active, over } = event;
+        console.log("Drag Ended");
+        const rect = event.activatorEvent;
+
+        console.log(active, over);
 
         if (over) {
-            console.log("Dragged item:", active);
-            console.log("Dropped on:", over);
+            console.log("Dragged item:", active.id);
+            console.log("Dropped on:", over.id);
         } else {
             console.log("Dropped outside any droppable");
-            return;
         }
+        setDragging(false);
+    }
 
-        if (active.data.current.type === "EditorTab" && over.data.current.type === "EditorTabGutter") {
-            editorRef.current.moveTab(active.data.current.node.uid, over.data.current.index);
-        }
+    /**
+     * Callback for when drag is started.
+     */
+    const onDragStart = (event) => {
+        console.log("Drag Started");
+        console.log(event.active.data);
+        setDragPreviewLabel(event.active.data.current.preview);
+        setDragging(true);
     }
 
+    // Manually track the drag position.
+    const [pos, setPos] = useState({ x: 0, y: 0 });
+    useEffect(() => {
+        if (!dragging) return;
+
+        const handleMove = (e) => {
+            setPos({ x: e.clientX, y: e.clientY });
+        };
+
+        window.addEventListener("pointermove", handleMove);
+
+        return () => {
+            window.removeEventListener("pointermove", handleMove);
+        };
+    }, [dragging]);
+
     const sensors = useSensors(
         useSensor(PointerSensor, {
             activationConstraint: {
@@ -99,9 +123,18 @@ const Template = (args) => {
             <div className="editorStoryWrapper">
                 <Editor ref={editorRef}{...args} />
             </div>
-            <DragOverlay modifiers={[offsetOverlay]} dropAnimation={null}>
-                {dragPreviewLabel}
-            </DragOverlay>
+            {dragging && (
+                <div
+                    style={{
+                        position: "fixed",
+                        left: pos.x,
+                        top: pos.y,
+                        pointerEvents: "none",
+                        zIndex: 9999,
+                    }}>
+                    {dragPreviewLabel}
+                </div>
+            )}  
         </DndContext>
     )
 }

package/src/stories/FileBrowser.stories.js

@@ -54,6 +54,9 @@ const Template = (args) => {
         }, 3000);
     }, []);
 
+
+    const [dragging, setDragging] = useState(false);
+  
     /**
      * Callback for when drag ends.
      */
@@ -62,7 +65,7 @@ const Template = (args) => {
         console.log("Drag Ended");
         const rect = event.activatorEvent;
 
-        console.log(over );
+        console.log(active, over);
 
         if (over) {
             console.log("Dragged item:", active.id);
@@ -70,6 +73,7 @@ const Template = (args) => {
         } else {
             console.log("Dropped outside any droppable");
         }
+        setDragging(false);
     }
 
     /**
@@ -77,10 +81,28 @@ const Template = (args) => {
      */
     const onDragStart = (event) => {
         console.log("Drag Started");
+        console.log(event.active.data);
         const dragPreview = fileBrowserRef.current.getPreviewElement(event.active.data.current.node.uid);
-        setDragPreviewLabel(dragPreview);
+        setDragPreviewLabel(event.active.data.current.preview);
+        setDragging(true);
     }
 
+    // Manually track the drag position.
+    const [pos, setPos] = useState({ x: 0, y: 0 });
+    useEffect(() => {
+        if (!dragging) return;
+
+        const handleMove = (e) => {
+            setPos({ x: e.clientX, y: e.clientY });
+        };
+
+        window.addEventListener("pointermove", handleMove);
+
+        return () => {
+            window.removeEventListener("pointermove", handleMove);
+        };
+    }, [dragging]);
+
     const sensors = useSensors(
         useSensor(PointerSensor, {
             activationConstraint: {
@@ -96,9 +118,18 @@ const Template = (args) => {
                     <FileBrowser ref={fileBrowserRef} {...args} />
                 </div>
             </div>
-            <DragOverlay modifiers={[offsetOverlay]} dropAnimation={null}>
-                {dragPreviewLabel}
-            </DragOverlay>
+            {dragging && (
+                <div
+                    style={{
+                        position: "fixed",
+                        left: pos.x,
+                        top: pos.y,
+                        pointerEvents: "none",
+                        zIndex: 9999,
+                    }}>
+                    {dragPreviewLabel}
+                </div>
+            )}  
         </DndContext>
     )
 }