add drag componentItem event

packages/editor/src/components/StructureTree/ComponentItemView.tsx

@@ -9,6 +9,7 @@ import { Box, HStack, IconButton, Text } from '@chakra-ui/react';
 import { useState } from 'react';
 
 type Props = {
+  id: string;
   title: string;
   isSelected: boolean;
   onClick: () => void;
@@ -24,6 +25,7 @@ type Props = {
 
 export const ComponentItemView: React.FC<Props> = props => {
   const {
+    id,
     title,
     isSelected,
     noChevron,
@@ -59,13 +61,22 @@ export const ComponentItemView: React.FC<Props> = props => {
       setIsDragOver(true);
     }
   };
+
+  const onDragStart = (e: React.DragEvent) => {
+    console.log('开始拖拽', id)
+    e.dataTransfer.setData('moveComponent', id);
+  }
+
   return (
     <Box
       width="full"
+      onDragStart={onDragStart}
+      // onDragEnd={onDragEnd}
       onDragOver={onDragOver}
       onDragLeave={() => setIsDragOver(false)}
       onDrop={() => setIsDragOver(false)}
       background={isDragOver ? 'gray.100' : undefined}
+      draggable
     >
       {noChevron ? null : expandIcon}
       <HStack width="full" justify="space-between">

packages/editor/src/components/StructureTree/ComponentTree.tsx

@@ -60,8 +60,20 @@ export const ComponentTree: React.FC<Props> = props => {
           })
         );
       };
+
+      const onMoveComponent = (movingComponent: string) => {
+        // eventBus.send(
+        //   'operation',
+        //   genOperation('moveComponent', {
+        //     fromId: component.id,
+        //     toId: movingComponent,
+        //     slot,
+        //   })
+        // );
+      };
+
       const slotName = (
-        <DropComponentWrapper onDrop={onDrop}>
+        <DropComponentWrapper onDrop={onDrop} onMoveComponent={onMoveComponent}>
           <Text color="gray.500" fontWeight="medium">
             Slot: {slot}
           </Text>
@@ -122,6 +134,16 @@ export const ComponentTree: React.FC<Props> = props => {
     );
   };
 
+  const onMoveComponent = (movingComponent: string) => {
+    // eventBus.send(
+    //   'operation',
+    //   genOperation('moveComponent', {
+    //     fromId: component.id,
+    //     toId: movingComponent,
+    //     slot,
+    //   })
+    // );
+  };
   return (
     <VStack
       key={component.id}
@@ -130,8 +152,9 @@ export const ComponentTree: React.FC<Props> = props => {
       width="full"
       alignItems="start"
     >
-      <DropComponentWrapper onDrop={onDrop}>
+      <DropComponentWrapper onDrop={onDrop} onMoveComponent={onMoveComponent}>
         <ComponentItemView
+          id={component.id}
           title={component.id}
           isSelected={component.id === selectedComponentId}
           onClick={() => {

packages/editor/src/components/StructureTree/DropComponentWrapper.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 
 type Props = {
   onDrop: (componentType: string) => void;
+  onMoveComponent: (from: string) => void;
 };
 
 export const DropComponentWrapper: React.FC<Props> = props => {
@@ -14,8 +15,16 @@ export const DropComponentWrapper: React.FC<Props> = props => {
     e.stopPropagation();
     e.preventDefault();
     const creatingComponent = e.dataTransfer?.getData('component') || '';
+    const movingComponent = e.dataTransfer?.getData('moveComponent') || '';
 
-    props.onDrop(creatingComponent);
+    if (movingComponent) {
+      console.log('把', movingComponent, '移动到');
+      props.onMoveComponent(movingComponent)
+    }
+
+    if (creatingComponent) {
+      props.onDrop(creatingComponent);
+    }
   };
   return (
     <Box width="full" onDrop={onDrop} onDragOver={onDragOver}>

packages/editor/src/components/StructureTree/StructureTree.tsx

@@ -23,7 +23,7 @@ export const StructureTree: React.FC<Props> = props => {
   const { components, selectedComponentId, onSelectComponent, registry } = props;
 
   const componentEles = useMemo(() => {
-    const { topLevelComponents, childrenMap } = resolveApplicationComponents(components)
+    const { topLevelComponents, childrenMap } = resolveApplicationComponents(components);
 
     return topLevelComponents.map(c => (
       <ComponentTree
@@ -50,6 +50,7 @@ export const StructureTree: React.FC<Props> = props => {
       };
       return (
         <ComponentItemView
+          id={dummy.id}
           key={dummy.id}
           title={dummy.id}
           isSelected={dummy.id === selectedComponentId}
@@ -87,10 +88,22 @@ function RootItem() {
       })
     );
   };
+  const onMoveComponent = (movingComponent: string) => {
+    // eventBus.send(
+    //   'operation',
+    //   genOperation('moveComponent', {
+    //     fromId: component.id,
+    //     toId: movingComponent,
+    //     slot,
+    //   })
+    // );
+  };
+
   return (
     <Box width="full">
-      <DropComponentWrapper onDrop={onDrop}>
+      <DropComponentWrapper onDrop={onDrop} onMoveComponent={onMoveComponent}>
         <ComponentItemView
+          id={'root'}
           title="Root"
           isSelected={false}
           onClick={() => undefined}