Atri-Labs
diff --git a/‎packages/atri-app-core/src/api/canvasApi.ts‎
Lines changed: 0 additions & 3 deletions b/‎packages/atri-app-core/src/api/canvasApi.ts‎
Lines changed: 0 additions & 3 deletions
diff --git a/‎packages/atri-app-core/src/canvasMachine.ts‎
Lines changed: 111 additions & 6 deletions b/‎packages/atri-app-core/src/canvasMachine.ts‎
Lines changed: 111 additions & 6 deletions
diff --git a/‎packages/atri-app-core/src/editor-components/CanvasOverlay/CanvasOverlay.tsx‎
Lines changed: 2 additions & 0 deletions b/‎packages/atri-app-core/src/editor-components/CanvasOverlay/CanvasOverlay.tsx‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎packages/atri-app-core/src/editor-components/CanvasOverlay/hooks/index.ts‎
Lines changed: 1 addition & 0 deletions b/‎packages/atri-app-core/src/editor-components/CanvasOverlay/hooks/index.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎packages/atri-app-core/src/editor-components/CanvasOverlay/hooks/useDropzoneHints.tsx‎
Lines changed: 139 additions & 0 deletions b/‎packages/atri-app-core/src/editor-components/CanvasOverlay/hooks/useDropzoneHints.tsx‎
Lines changed: 139 additions & 0 deletions
@@ -56,9 +56,6 @@ subscribeCanvasMachine("OUTSIDE_CANVAS", (_context, event) => {
     "*"
   );
 });
-subscribeCanvasMachine("moveWhileDrag", () => {
-  // TODO: detect catcher & call canvas overlay api
-});
 subscribeCanvasMachine("upWhileDrag", (context) => {
   const canvasZone = (context.mousePosition!.target as HTMLElement).closest(
     "[data-atri-canvas-id]"
 
@@ -28,6 +28,8 @@ const KEY_UP = "KEY_UP" as const;
 const KEY_DOWN = "KEY_DOWN" as const;
 const PROGRAMTIC_HOVER = "PROGRAMTIC_HOVER" as const;
 const PROGRAMTIC_SELECT = "PROGRAMTIC_SELECT" as const;
+const DROP_ZONE_CREATED = "DROP_ZONE_CREATED" as const;
+const DROP_ZONE_DESTROYED = "DROP_ZONE_DESTROYED" as const;
 
 type IFRAME_DETECTED_EVENT = { type: typeof IFRAME_DETECTED };
 type TOP_WINDOW_DETECTED_EVENT = { type: typeof TOP_WINDOW_DETECTED };
@@ -174,6 +176,7 @@ type CanvasMachineContext = {
   } | null;
   repositionComponent: string | null;
   lastRewiredComponent: string | null;
+  probableParent: string | null;
 };
 
 // actions
@@ -272,6 +275,10 @@ function setEverythingToNull(context: CanvasMachineContext) {
   context.lastDropped = null;
 }
 
+function setProbableParentToNull(context: CanvasMachineContext) {
+  context.probableParent = null;
+}
+
 // conds
 
 function insideComponent(
@@ -427,7 +434,9 @@ type SubscribeStates =
   | typeof KEY_UP
   | typeof KEY_DOWN
   | "hoverWhileSelected"
-  | "hoverWhileSelectedEnd";
+  | "hoverWhileSelectedEnd"
+  | typeof DROP_ZONE_CREATED
+  | typeof DROP_ZONE_DESTROYED;
 
 export function createCanvasMachine(id: string) {
   const subscribers: { [key in SubscribeStates]: Callback[] } = {
@@ -456,6 +465,8 @@ export function createCanvasMachine(id: string) {
     [KEY_DOWN]: [],
     hoverWhileSelected: [],
     hoverWhileSelectedEnd: [],
+    [DROP_ZONE_CREATED]: [],
+    [DROP_ZONE_DESTROYED]: [],
   };
   function subscribeCanvasMachine(state: SubscribeStates, cb: Callback) {
     subscribers[state].push(cb);
@@ -508,6 +519,7 @@ export function createCanvasMachine(id: string) {
         repositionTarget: null,
         repositionComponent: null,
         lastRewiredComponent: null,
+        probableParent: null,
       },
       states: {
         [initial]: {
@@ -610,18 +622,77 @@ export function createCanvasMachine(id: string) {
                       {
                         target: repositionIdle,
                         cond: isInTheSameParent,
-                        actions: ["emitRepositionIdle"],
+                        actions: [
+                          "emitRepositionIdle",
+                          "setProbableParentToNull",
+                          "emitDropZoneDestroyed",
+                        ],
                       },
                       {
                         actions: [
                           "setRepositionTarget",
                           "emitRepositionActive",
+                          (context, event) => {
+                            const { target } = event.event;
+                            if (target !== null && "closest" in target) {
+                              const parentEl = (target as HTMLElement).closest(
+                                "[data-atri-parent]"
+                              );
+                              let parentElId: string | null = null;
+                              if (parentEl) {
+                                parentElId =
+                                  parentEl.getAttribute("data-atri-comp-id")!;
+                              }
+                              if (
+                                parentElId !== null &&
+                                parentElId !== context.probableParent
+                              ) {
+                                // Destroy a dropzone when the current and
+                                // previous parents do not match
+                                context.probableParent = null;
+                                callSubscribers(
+                                  "DROP_ZONE_DESTROYED",
+                                  context,
+                                  event
+                                );
+                                // Create a dropzone after the previous dropzone
+                                // is destroyed
+                                context.probableParent = parentElId;
+                                callSubscribers(
+                                  "DROP_ZONE_CREATED",
+                                  context,
+                                  event
+                                );
+                              }
+                            }
+                          },
+                          (context, event) => {
+                            const { target } = event.event;
+                            const currentEl = (target as HTMLElement).closest(
+                              "[data-atri-comp-id]"
+                            );
+                            if (
+                              context.repositionComponent ===
+                              currentEl?.getAttribute("data-atri-comp-id")!
+                            ) {
+                              setProbableParentToNull(context);
+                              callSubscribers(
+                                "DROP_ZONE_DESTROYED",
+                                context,
+                                event
+                              );
+                            }
+                          },
                         ],
                       },
                     ],
                     [MOUSE_UP]: {
                       target: `#${id}.${ready}.${selected}`,
-                      actions: ["emitRepositionSuccess"],
+                      actions: [
+                        "emitRepositionSuccess",
+                        "setProbableParentToNull",
+                        "emitDropZoneDestroyed",
+                      ],
                     },
                   },
                 },
@@ -806,15 +877,47 @@ export function createCanvasMachine(id: string) {
             [drag_in_progress_active]: {
               on: {
                 [MOUSE_MOVE]: {
-                  actions: ["setMousePosition", "emitMoveWhileDrag"],
+                  actions: [
+                    "setMousePosition",
+                    "emitMoveWhileDrag",
+                    (context, event) => {
+                      const { target } = event.event;
+                      if (target !== null && "closest" in target) {
+                        const parentEl = (target as HTMLElement).closest(
+                          "[data-atri-parent]"
+                        );
+                        let parentElId: string | null = null;
+                        if (parentEl) {
+                          parentElId =
+                            parentEl.getAttribute("data-atri-comp-id")!;
+                        }
+                        if (
+                          parentElId !== null &&
+                          parentElId !== context.probableParent
+                        ) {
+                          context.probableParent = parentElId;
+                          callSubscribers("DROP_ZONE_CREATED", context, event);
+                        }
+                      }
+                    },
+                  ],
                 },
                 [MOUSE_UP]: {
                   target: `#${id}.${ready}`,
-                  actions: ["setMousePosition", "emitUpWhileDrag"],
+                  actions: [
+                    "setMousePosition",
+                    "emitUpWhileDrag",
+                    "setProbableParentToNull",
+                    "emitDropZoneDestroyed",
+                  ],
                 },
                 [OUTSIDE_CANVAS]: {
                   target: drag_in_progress_idle,
-                  actions: ["emitOutsideCanvas"],
+                  actions: [
+                    "emitOutsideCanvas",
+                    "setProbableParentToNull",
+                    "emitDropZoneDestroyed",
+                  ],
                 },
               },
             },
@@ -827,6 +930,7 @@ export function createCanvasMachine(id: string) {
       actions: {
         setDragData,
         setMousePosition,
+        setProbableParentToNull,
         emitUpWhileDrag: callSubscribersFromAction("upWhileDrag"),
         emitMoveWhileDrag: callSubscribersFromAction("moveWhileDrag"),
         emitOutsideCanvas: callSubscribersFromAction("OUTSIDE_CANVAS"),
@@ -850,6 +954,7 @@ export function createCanvasMachine(id: string) {
         emitKeyUp: callSubscribersFromAction(KEY_UP),
         emitKeyDown: callSubscribersFromAction(KEY_DOWN),
         setEverythingToNull,
+        emitDropZoneDestroyed: callSubscribersFromAction(DROP_ZONE_DESTROYED),
       },
     }
   );
 
@@ -3,13 +3,15 @@ import {
   useSelectHints,
   useHoverHints,
   useDraggedOverlay,
+  useDropzoneHints,
 } from "./hooks";
 
 export function CanvasOverlay() {
   const { dragFC, dragOverlayStyle } = useDragDrop();
   useSelectHints();
   useHoverHints();
   useDraggedOverlay();
+  useDropzoneHints();
   return (
     <>
       {dragFC?.Comp && dragOverlayStyle ? (
 
@@ -2,3 +2,4 @@ export * from "./useDragDrop";
 export * from "./useSelectHints";
 export * from "./useHoverHints";
 export * from "./useDraggedOverlay";
+export * from "./useDropzoneHints";
@@ -0,0 +1,139 @@
+import { orange600 } from "@atrilabs/design-system";
+import { useEffect, useRef, useCallback } from "react";
+import { subscribeCanvasMachine } from "../../../api";
+import { getId } from "../../../utils/getId";
+import {
+  removeHintOverlays,
+  addOrModifyHintOverlays,
+} from "../../VisualHints/hintOverlays";
+import { FilledLine } from "../components/FilledLine";
+
+const thickness = 2;
+
+export function useDropzoneHints() {
+  const topLineHoverId = useRef<string | null>(null);
+  const rightLineHoverId = useRef<string | null>(null);
+  const bottomLineHoverId = useRef<string | null>(null);
+  const leftLineHoverId = useRef<string | null>(null);
+  const compId = useRef<string | null>(null);
+
+  const clearOverlay = useCallback(() => {
+    if (topLineHoverId.current) {
+      removeHintOverlays([topLineHoverId.current]);
+      topLineHoverId.current = null;
+    }
+    if (rightLineHoverId.current) {
+      removeHintOverlays([rightLineHoverId.current]);
+      rightLineHoverId.current = null;
+    }
+    if (bottomLineHoverId.current) {
+      removeHintOverlays([bottomLineHoverId.current]);
+      bottomLineHoverId.current = null;
+    }
+    if (leftLineHoverId.current) {
+      removeHintOverlays([leftLineHoverId.current]);
+      leftLineHoverId.current = null;
+    }
+  }, []);
+
+  const renderFn = useCallback(() => {
+    if (
+      topLineHoverId.current &&
+      rightLineHoverId.current &&
+      bottomLineHoverId.current &&
+      leftLineHoverId.current &&
+      compId.current
+    ) {
+      // top line
+      addOrModifyHintOverlays({
+        [topLineHoverId.current]: {
+          compId: compId.current,
+          comp: <FilledLine fill={orange600} />,
+          overlayId: topLineHoverId.current,
+          box: (dim) => {
+            return {
+              dimension: {
+                width: dim.dimension.width,
+                height: thickness,
+              },
+              position: { top: -thickness, left: 0 },
+            };
+          },
+        },
+      });
+      // right line
+      addOrModifyHintOverlays({
+        [rightLineHoverId.current]: {
+          compId: compId.current,
+          comp: <FilledLine fill={orange600} />,
+          overlayId: rightLineHoverId.current,
+          box: (dim) => {
+            return {
+              dimension: {
+                width: thickness,
+                height: dim.dimension.height + 2 * thickness,
+              },
+              position: { top: -thickness, left: dim.dimension.width },
+            };
+          },
+        },
+      });
+      // bottom line
+      addOrModifyHintOverlays({
+        [bottomLineHoverId.current]: {
+          compId: compId.current,
+          comp: <FilledLine fill={orange600} />,
+          overlayId: bottomLineHoverId.current,
+          box: (dim) => {
+            return {
+              dimension: {
+                width: dim.dimension.width,
+                height: thickness,
+              },
+              position: { top: dim.dimension.height, left: 0 },
+            };
+          },
+        },
+      });
+      // left line
+      addOrModifyHintOverlays({
+        [leftLineHoverId.current]: {
+          compId: compId.current,
+          comp: <FilledLine fill={orange600} />,
+          overlayId: leftLineHoverId.current,
+          box: (dim) => {
+            return {
+              dimension: {
+                width: thickness,
+                height: dim.dimension.height + 2 * thickness,
+              },
+              position: { top: -thickness, left: -thickness },
+            };
+          },
+        },
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    return subscribeCanvasMachine("DROP_ZONE_CREATED", (context, event) => {
+      if (compId.current === null && context.probableParent !== null) {
+        topLineHoverId.current = getId();
+        rightLineHoverId.current = getId();
+        bottomLineHoverId.current = getId();
+        leftLineHoverId.current = getId();
+        compId.current = context.probableParent;
+        renderFn();
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    return subscribeCanvasMachine("DROP_ZONE_DESTROYED", (context, event) => {
+      if (compId.current !== null) {
+        clearOverlay();
+        compId.current = null;
+      }
+    });
+  }, []);
+}