split dasgboard card dnd management

Author: softmarshmallow

editor-packages/editor-dashboard/components/dashboard-item-card-scene.tsx

@@ -8,12 +8,21 @@ import {
   DashboardItemCardProps,
 } from "./dashboard-item-card";
 
+type SceneMeta = {
+  id: string;
+  filekey: string;
+  name: string;
+  width: number;
+  height: number;
+  type: any;
+};
+
 function SceneCardPreview({
   maxWidth,
   scene,
 }: {
   maxWidth: number;
-  scene: ReflectSceneNode;
+  scene: SceneMeta;
 }) {
   const visibilityRef = useRef();
 
@@ -57,7 +66,7 @@ function SceneCardPreview({
 
 export interface SceneCardProps
   extends Omit<DashboardItemCardProps, "icon" | "preview" | "label"> {
-  scene: ReflectSceneNode;
+  scene: SceneMeta;
 }
 
 export const SceneCard = React.forwardRef(function (

editor-packages/editor-dashboard/core/initial.ts

@@ -58,6 +58,7 @@ export function initialHierarchy(
       type: "COMPONENT",
       path: "components" + "/" + c.id,
       $type: "component" as const,
+      scene: c as any,
     }));
 
   return {

editor-packages/editor-dashboard/core/state.ts

@@ -1,4 +1,5 @@
 import type { ReflectSceneNode } from "@design-sdk/figma-node";
+import type { ComponentNode } from "@design-sdk/figma";
 
 export interface DashboardState {
   selection: Array<string>;
@@ -51,7 +52,8 @@ export type GroupedSceneItem = {
   path: string;
   name: string;
   type: "FRAME";
-  scenes: Array<FrameSceneItem>;
+  scene: ReflectSceneNode;
+  alias: Array<FrameSceneItem>;
 };
 
 export type ComponentItem = {
@@ -60,6 +62,7 @@ export type ComponentItem = {
   name: string;
   path: string;
   type: "COMPONENT";
+  scene: ComponentNode & { filekey: string };
   width: number;
   height: number;
 };

editor-packages/editor-dashboard/scaffold/editor-dashboard.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from "react";
 import styled from "@emotion/styled";
 import {
-  FolderCard,
-  SceneCard,
+  FolderCard as _FolderCard,
+  SceneCard as _SceneCard,
   SectionHeaderAction,
   SectionHeader,
   DashboardItemCardProps,
@@ -15,7 +15,12 @@ import {
   MenuItem,
 } from "@editor-ui/context-menu";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { useDashboard, DashboardItem } from "../core";
+import {
+  useDashboard,
+  DashboardItem,
+  DashboardFolderItem,
+  SceneItem,
+} from "../core";
 
 export function Dashboard() {
   const {
@@ -107,12 +112,6 @@ export function Dashboard() {
   );
 }
 
-interface SceneCardMeta {
-  id: string;
-  name: string;
-  $type: unknown;
-}
-
 function RootDirectory({
   label,
   contents,
@@ -222,16 +221,31 @@ type DndMetaItem<T = object> = T & {
 function DashboardItemCard(
   props: DashboardItem &
     Omit<DashboardItemCardProps, "label" | "preview" | "icon">
+) {
+  switch (props.$type) {
+    case "frame-scene":
+    case "component": {
+      return <SceneCard {...props} />;
+    }
+    case "folder": {
+      return <FolderCard {...props} />;
+    }
+    default: {
+      throw new Error(`Unknown item type ${props.$type}`);
+    }
+  }
+}
+
+function SceneCard(
+  props: SceneItem & Omit<DashboardItemCardProps, "label" | "preview" | "icon">
 ) {
   const [{ isActive }, drop] = useDrop(() => ({
-    accept: "frame-scene", // todo
+    accept: "scene",
     collect: (monitor) => ({
       isActive: monitor.canDrop() && monitor.isOver(),
     }),
     canDrop(item: DndMetaItem, monitor) {
-      if (item.$type === props.$type) {
-        return item.id !== props.id;
-      }
+      return item.id !== props.id;
     },
     drop(item, monitor) {
       console.log("drop", item, monitor);
@@ -240,22 +254,58 @@ function DashboardItemCard(
   }));
 
   const [{ opacity }, drag] = useDrag(() => {
-    let item: unknown = props;
-    switch (props.$type) {
-      case "frame-scene": {
-        item = props.scene;
-        Object.assign(item, { $type: props.$type });
-        break;
-      }
-      case "folder": {
-        item = props;
-        break;
-      }
-    }
+    return {
+      type: "scene",
+      item: props.scene,
+      collect: (monitor) => ({
+        opacity: monitor.isDragging() ? 0.5 : 1,
+      }),
+    };
+  }, []);
+
+  function attachRef(el) {
+    drag(el);
+    drop(el);
+  }
+
+  const defaultprops = {
+    isOver: isActive,
+    style: { opacity },
+  };
+
+  return (
+    <_SceneCard
+      // @ts-ignore
+      scene={props.scene as any}
+      ref={attachRef}
+      {...defaultprops}
+      {...props}
+    />
+  );
+}
 
+function FolderCard(
+  props: DashboardFolderItem &
+    Omit<DashboardItemCardProps, "label" | "preview" | "icon">
+) {
+  const [{ isActive }, drop] = useDrop(() => ({
+    accept: ["scene", "folder"],
+    collect: (monitor) => ({
+      isActive: monitor.canDrop() && monitor.isOver(),
+    }),
+    canDrop(item: DndMetaItem, monitor) {
+      return item.id !== props.id;
+    },
+    drop(item, monitor) {
+      console.log("drop", item, monitor);
+      // todo:
+    },
+  }));
+
+  const [{ opacity }, drag] = useDrag(() => {
     return {
       type: props.$type,
-      item: item,
+      item: props,
       collect: (monitor) => ({
         opacity: monitor.isDragging() ? 0.5 : 1,
       }),
@@ -272,44 +322,17 @@ function DashboardItemCard(
     style: { opacity },
   };
 
-  switch (props.$type) {
-    case "frame-scene": {
-      return (
-        <SceneCard
-          scene={props.scene}
-          ref={attachRef}
-          {...defaultprops}
-          {...props}
-        />
-      );
-    }
-    case "component": {
-      return (
-        <SceneCard
-          scene={props as any} // todo
-          ref={attachRef}
-          {...defaultprops}
-          {...props}
-        />
-      );
-    }
-    case "folder": {
-      return (
-        <FolderCard
-          ref={attachRef}
-          id={props.id}
-          path={props.path}
-          name={props.name}
-          contents={props.contents}
-          {...defaultprops}
-          {...props}
-        />
-      );
-    }
-    default: {
-      throw new Error(`Unknown item type ${props.$type}`);
-    }
-  }
+  return (
+    <_FolderCard
+      ref={attachRef}
+      id={props.id}
+      path={props.path}
+      name={props.name}
+      contents={props.contents}
+      {...defaultprops}
+      {...props}
+    />
+  );
 }
 
 const SceneGrid = styled.div`