ability to drop nodes into files

paperclip-ui · Sep 12, 2023 · cd47a2c · cd47a2c
1 parent 675fb5c
commit cd47a2c
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 17 deletions.
diff --git a/libs/designer/src/components/Editor/EditorPanels/LeftSidebar/FileNavigator/index.tsx b/libs/designer/src/components/Editor/EditorPanels/LeftSidebar/FileNavigator/index.tsx
@@ -161,7 +161,7 @@ const FSItem = ({ depth, item }: FSItemProps) => {
 
   const [{ opacity }, dragRef] = useDrag(
     () => ({
-      type: DNDKind.Node,
+      type: DNDKind.File,
       item,
       collect: (monitor) => ({
         opacity: monitor.isDragging() ? 0.5 : 1,
@@ -173,7 +173,7 @@ const FSItem = ({ depth, item }: FSItemProps) => {
 
   const [{ isDraggingOver }, dropRef] = useDrop(
     {
-      accept: DNDKind.Node,
+      accept: [DNDKind.File, DNDKind.Node],
       // hover: (_, monitor) => {
       //   const offset = monitor.getClientOffset();
       //   const rect = headerRef.current?.getBoundingClientRect();
@@ -184,17 +184,32 @@ const FSItem = ({ depth, item }: FSItemProps) => {
       //     setIsOver(false);
       //   }
       // },
-      drop(droppedItem: FSItem) {
-        dispatch({
-          type: "ui/FileNavigatorDroppedFile",
-          payload: {
-            directory: item.path,
-            item: droppedItem,
-          },
-        });
+      drop(droppedItem: any, monitor) {
+        if (monitor.getItemType() === DNDKind.File) {
+          dispatch({
+            type: "ui/FileNavigatorDroppedFile",
+            payload: {
+              directory: item.path,
+              item: droppedItem,
+            },
+          });
+        } else if (monitor.getItemType() === DNDKind.Node) {
+          dispatch({
+            type: "ui/FileNavigatorDroppedNode",
+            payload: {
+              filePath: item.path,
+              droppedExprId: droppedItem.id,
+            },
+          });
+        }
       },
-      canDrop() {
-        return item.kind === FSItemKind.Directory;
+      canDrop(_droppedItem: FSItem, monitor) {
+        return (
+          (monitor.getItemType() === DNDKind.File &&
+            item.kind === FSItemKind.Directory) ||
+          (monitor.getItemType() === DNDKind.Node &&
+            item.kind === FSItemKind.File)
+        );
       },
       collect(monitor) {
         return {

diff --git a/libs/designer/src/domains/api/engine.ts b/libs/designer/src/domains/api/engine.ts
@@ -10,18 +10,16 @@ import { DesignerEvent } from "../../events";
 import {
   AddLayerMenuItemClicked,
   AtomValueChangeCompleted,
-  AtomValueChanged,
   AttributeChanged,
   ConfirmClosed,
-  // DesignerEvent,
   ElementTagChanged,
   ExprNavigatorDroppedNode,
+  FileNavigatorDroppedNode,
   FileFilterChanged,
   FileNavigatorDroppedFile,
   InstanceVariantToggled,
   PromptClosed,
   StyleDeclarationsChangeCompleted,
-  StyleDeclarationsChanged,
   StyleMixinsSet,
   TextValueChanged,
   ToolsLayerDrop,
@@ -638,6 +636,19 @@ const createEventHandler = (actions: Actions) => {
     ]);
   };
 
+  const handleFileNavigatorDroppedNode = ({
+    payload: { filePath, droppedExprId },
+  }: FileNavigatorDroppedNode) => {
+    actions.applyChanges([
+      {
+        moveExpressionToFile: {
+          newFilePath: filePath,
+          expressionId: droppedExprId,
+        },
+      },
+    ]);
+  };
+
   const handleDeleteExpression = (
     expressionId: string,
     state: DesignerState
@@ -1000,6 +1011,9 @@ const createEventHandler = (actions: Actions) => {
       case "designer/styleMixinsSet": {
         return handleStyleMixinsSet(event, newState);
       }
+      case "ui/FileNavigatorDroppedNode": {
+        return handleFileNavigatorDroppedNode(event);
+      }
       case "ui/removeVariantButtonClicked": {
         return handleDeleteExpression(event.payload.variantId, newState);
       }

diff --git a/libs/designer/src/domains/ui/events.ts b/libs/designer/src/domains/ui/events.ts
@@ -162,6 +162,13 @@ export type FileNavigatorDroppedFile = BaseEvent<
     item: FSItem;
   }
 >;
+export type FileNavigatorDroppedNode = BaseEvent<
+  "ui/FileNavigatorDroppedNode",
+  {
+    filePath: string;
+    droppedExprId: string;
+  }
+>;
 
 export type PromptClosed = BaseEvent<
   "ui/promptClosed",
@@ -255,6 +262,7 @@ export type UIEvent =
   | ToolsLayerDrop
   | PromptClosed
   | FileNavigatorItemClicked
+  | FileNavigatorDroppedNode
   | ResizerPathMoved
   | ResizerPathStoppedMoving
   | FileNavigatorDroppedFile

diff --git a/libs/designer/src/state/pc.ts b/libs/designer/src/state/pc.ts
@@ -24,9 +24,9 @@ import {
 import {
   Component,
   Element,
-  Reference,
   Variant,
 } from "@paperclip-ui/proto/lib/generated/ast/pc";
+import { Reference } from "@paperclip-ui/proto/lib/generated/ast/shared";
 import produce from "immer";
 import {
   Box,
@@ -721,7 +721,7 @@ const getExprVirtId = (
 
 /*
 
-1. 
+1.
 */
 
 const findVirtBoxNodeInfo = (