refactor drag over id

packages/editor/src/EditorStore.ts

@@ -16,7 +16,7 @@ class EditorStore {
   // currentEditingComponents, it could be app's or module's components
   selectedComponentId = '';
   hoverComponentId = '';
-  dragIdStack: string[] = [];
+  dragOverId: string = '';
   // current editor editing target(app or module)
   currentEditingTarget: EditingTarget = {
     kind: 'app',
@@ -24,8 +24,8 @@ class EditorStore {
     name: '',
   };
   // when componentsChange event is triggered, currentComponentsVersion++
-  currentComponentsVersion = 0
-  lastSavedComponentsVersion = 0
+  currentComponentsVersion = 0;
+  lastSavedComponentsVersion = 0;
 
   appStorage = new AppStorage();
   schemaValidator = new SchemaValidator(registry);
@@ -43,23 +43,22 @@ class EditorStore {
   }
 
   get dragOverComponentId() {
-    return this.dragIdStack[this.dragIdStack.length - 1];
+    return this.dragOverId;
   }
 
   get validateResult() {
     return this.schemaValidator.validate(this.components);
   }
 
-  get isSaved () {
-    return this.currentComponentsVersion === this.lastSavedComponentsVersion
+  get isSaved() {
+    return this.currentComponentsVersion === this.lastSavedComponentsVersion;
   }
 
   constructor() {
     makeAutoObservable(this, {
       components: observable.shallow,
-      dragIdStack: observable.shallow,
       setComponents: action,
-      setDragIdStack: action,
+      setDragId: action,
     });
 
     eventBus.on('selectComponent', id => {
@@ -68,10 +67,10 @@ class EditorStore {
     // listen the change by operations, and save newComponents
     eventBus.on('componentsChange', components => {
       this.setComponents(components);
-      this.setCurrentComponentsVersion(this.currentComponentsVersion + 1)
+      this.setCurrentComponentsVersion(this.currentComponentsVersion + 1);
 
       if (this.validateResult.length === 0) {
-        this.saveCurrentComponents()
+        this.saveCurrentComponents();
       }
     });
 
@@ -80,8 +79,8 @@ class EditorStore {
       () => this.currentEditingTarget,
       target => {
         if (target.name) {
-          this.setCurrentComponentsVersion(0)
-          this.setLastSavedComponentsVersion(0)
+          this.setCurrentComponentsVersion(0);
+          this.setLastSavedComponentsVersion(0);
           this.clearSunmaoGlobalState();
           eventBus.send('componentsRefresh', this.originComponents);
           this.setComponents(this.originComponents);
@@ -119,9 +118,9 @@ class EditorStore {
       this.currentEditingTarget.kind,
       this.currentEditingTarget.version,
       this.currentEditingTarget.name,
-      toJS(this.components),
+      toJS(this.components)
     );
-    this.setLastSavedComponentsVersion(this.currentComponentsVersion)
+    this.setLastSavedComponentsVersion(this.currentComponentsVersion);
   }
 
   updateCurrentEditingTarget = (
@@ -144,24 +143,15 @@ class EditorStore {
   setComponents = (val: ApplicationComponent[]) => {
     this.components = val;
   };
-  pushDragIdStack = (val: string) => {
-    this.setDragIdStack([...this.dragIdStack, val]);
-  };
-  popDragIdStack = () => {
-    this.setDragIdStack(this.dragIdStack.slice(0, this.dragIdStack.length - 1));
-  };
-  clearIdStack = () => {
-    this.setDragIdStack([]);
-  };
-  setDragIdStack = (ids: string[]) => {
-    this.dragIdStack = ids;
+  setDragId = (val: string) => {
+    this.dragOverId = val;
   };
   setCurrentComponentsVersion = (val: number) => {
     this.currentComponentsVersion = val;
-  }
+  };
   setLastSavedComponentsVersion = (val: number) => {
     this.lastSavedComponentsVersion = val;
-  }
+  };
 }
 
 export const editorStore = new EditorStore();

packages/editor/src/components/ComponentWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { css } from '@emotion/css';
 import { ComponentWrapperType } from '@sunmao-ui/runtime';
 import { observer } from 'mobx-react-lite';
@@ -20,16 +20,23 @@ export const ComponentWrapper: ComponentWrapperType = observer(props => {
     hoverComponentId,
     setHoverComponentId,
     dragOverComponentId,
-    pushDragIdStack,
-    popDragIdStack,
-    clearIdStack,
+    setDragId,
   } = editorStore;
 
-  const slots = useMemo(() => {
-    return registry.getComponentByType(component.type).spec.slots;
+  const [slots, isDroppable] = useMemo(() => {
+    const slots = registry.getComponentByType(component.type).spec.slots;
+    return [slots, slots.length > 0];
   }, [component.type]);
 
-  const isDroppable = slots.length > 0;
+  useEffect(() => {
+    if (isDroppable) {
+      const listener = (e: Event) => e.preventDefault();
+      document.addEventListener('dragover', listener);
+      return () => {
+        document.removeEventListener('dragover', listener);
+      };
+    }
+  }, [isDroppable]);
 
   const borderColor = useMemo(() => {
     if (dragOverComponentId === component.id) {
@@ -64,9 +71,10 @@ export const ComponentWrapper: ComponentWrapperType = observer(props => {
     setHoverComponentId('');
   };
 
-  const onDragEnter = () => {
+  const onDragEnter = (e: React.DragEvent) => {
+    e.stopPropagation();
     if (isDroppable) {
-      pushDragIdStack(component.id);
+      setDragId(component.id);
     }
   };
 
@@ -74,7 +82,7 @@ export const ComponentWrapper: ComponentWrapperType = observer(props => {
     e.stopPropagation();
     e.preventDefault();
     if (!isDroppable) return;
-    clearIdStack();
+    setDragId('');
     const creatingComponent = e.dataTransfer?.getData('component') || '';
     eventBus.send(
       'operation',
@@ -86,9 +94,10 @@ export const ComponentWrapper: ComponentWrapperType = observer(props => {
     );
   };
 
-  const onDragLeave = () => {
-    if (isDroppable) {
-      popDragIdStack();
+  const onDragLeave = (e: React.DragEvent) => {
+    e.stopPropagation();
+    if (isDroppable && component.id === dragOverComponentId) {
+      setDragId('');
     }
   };