From b6fd5c1512712d304bcce755fdfda5cde65a78ad Mon Sep 17 00:00:00 2001
From: Bowen Tan <bowen.tan@smartx.com>
Date: Wed, 16 Feb 2022 11:25:05 +0800
Subject: [PATCH] fix the bug that cannot drag component to a selected
 component

---
 .../EditorMaskWrapper/DropSlotMask.tsx        |  3 ++-
 .../EditorMaskWrapper/EditorMask.tsx          | 22 +++++--------------
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/packages/editor/src/components/EditorMaskWrapper/DropSlotMask.tsx b/packages/editor/src/components/EditorMaskWrapper/DropSlotMask.tsx
index 7720dafb..7a2a69dc 100644
--- a/packages/editor/src/components/EditorMaskWrapper/DropSlotMask.tsx
+++ b/packages/editor/src/components/EditorMaskWrapper/DropSlotMask.tsx
@@ -26,7 +26,7 @@ export const DropSlotMask: React.FC<Props> = observer((props: Props) => {
     return registry.getComponentByType(hoverComponentType).spec.slots || [];
   }, [hoverComponentType, registry]);
 
-  // caculate the slot which is being dragged over
+  // calculate the slot which is being dragged over
   useEffect(() => {
     if (!maskRef.current) return;
     const maskRect = maskRef.current?.getBoundingClientRect();
@@ -58,6 +58,7 @@ export const DropSlotMask: React.FC<Props> = observer((props: Props) => {
       display="flex"
       flexDirection={vertical ? 'column' : 'row'}
       ref={maskRef}
+      border='1px solid orange'
     >
       {slots.map(slot => {
         return (
diff --git a/packages/editor/src/components/EditorMaskWrapper/EditorMask.tsx b/packages/editor/src/components/EditorMaskWrapper/EditorMask.tsx
index c8ef9230..bef1cc23 100644
--- a/packages/editor/src/components/EditorMaskWrapper/EditorMask.tsx
+++ b/packages/editor/src/components/EditorMaskWrapper/EditorMask.tsx
@@ -18,7 +18,7 @@ const outlineMaskTextStyle = css`
 
 const outlineMaskStyle = css`
   position: absolute;
-  border: 1px solid;
+  border: 1px solid transparent;
   /* create a bfc */
   transform: translate3d(0, 0, 0);
   z-index: 10;
@@ -115,16 +115,12 @@ export const EditorMask: React.FC<Props> = observer((props: Props) => {
   );
 
   const hoverMaskPosition = useMemo(() => {
-    if (
-      !wrapperRect.current ||
-      !hoverComponentId ||
-      hoverComponentId === selectedComponentId
-    ) {
+    if (!wrapperRect.current || !hoverComponentId) {
       return undefined;
     }
 
     return getMaskPosition(hoverComponentId);
-  }, [hoverComponentId, selectedComponentId, getMaskPosition]);
+  }, [hoverComponentId, getMaskPosition]);
 
   const selectedMaskPosition = useMemo(() => {
     if (!wrapperRect.current || !selectedComponentId) return undefined;
@@ -133,11 +129,7 @@ export const EditorMask: React.FC<Props> = observer((props: Props) => {
   }, [selectedComponentId, getMaskPosition]);
 
   const hoverMask = hoverMaskPosition ? (
-    <Box
-      className={outlineMaskStyle}
-      borderColor="black"
-      style={hoverMaskPosition.style}
-    >
+    <Box className={outlineMaskStyle} borderColor="black" style={hoverMaskPosition.style}>
       <Text className={outlineMaskTextStyle} background="black">
         {hoverMaskPosition.id}
       </Text>
@@ -145,11 +137,7 @@ export const EditorMask: React.FC<Props> = observer((props: Props) => {
   ) : undefined;
 
   const dragMask = hoverMaskPosition ? (
-    <Box
-      className={outlineMaskStyle}
-      borderColor="orange"
-      style={hoverMaskPosition.style}
-    >
+    <Box className={outlineMaskStyle} style={hoverMaskPosition.style}>
       <DropSlotMask
         services={services}
         hoverId={hoverComponentId}