Changes reposition target in real time

Author: jonathanalvares9009

packages/atri-app-core/src/api/canvasApi.ts

@@ -82,10 +82,11 @@ subscribeCanvasMachine("upWhileDrag", (context) => {
 });
 
 subscribeCanvasMachine("reposition", (context) => {
-  const canvasZone = (context.mousePosition!.target as HTMLElement).closest(
+  console.log("Reposition atri-app-core: ", context.repositionTarget);
+  const canvasZone = (context.repositionTarget!.target as HTMLElement).closest(
     "[data-atri-canvas-id]"
   );
-  const parentEl = (context.mousePosition!.target as HTMLElement).closest(
+  const parentEl = (context.repositionTarget!.target as HTMLElement).closest(
     "[data-atri-parent]"
   );
   if (canvasZone) {
@@ -102,11 +103,11 @@ subscribeCanvasMachine("reposition", (context) => {
             id === CANVAS_ZONE_ROOT_ID
               ? getComponentIndexInsideCanvasZone(
                   canvasZone.getAttribute("data-atri-canvas-id")!,
-                  context.mousePosition!
+                  context.repositionTarget!
                 )
               : getComponentIndexInsideParentComponent(
                   id,
-                  context.mousePosition!
+                  context.repositionTarget!
                 ),
           canvasZoneId: canvasZone.getAttribute("data-atri-canvas-id"),
         },

packages/atri-app-core/src/canvasMachine.ts

@@ -128,6 +128,11 @@ type CanvasMachineContext = {
   hovered: string | null;
   selected: string | null;
   lastDropped: string | null; // string until COMPONENT_RENDERED received, otherwise null
+  repositionTarget: {
+    pageX: number;
+    pageY: number;
+    target: MouseEvent["target"];
+  } | null;
 };
 
 // actions
@@ -179,16 +184,7 @@ function changeComponentLoc(
   context: CanvasMachineContext,
   event: MOUSE_MOVE_EVENT
 ) {
-  const { target } = event.event;
-  if (target !== null && "closest" in target) {
-    const parentComp = (target as HTMLElement).closest("[data-atri-parent]");
-    const canvasZone = (target as HTMLElement).closest("[data-atri-canvas-id]");
-    if (parentComp !== null) {
-      const parentCompId = parentComp.getAttribute("data-atri-comp-id");
-      const canvasZoneId = canvasZone?.getAttribute("data-atri-canvas-id");
-      context.mousePosition = event.event;
-    }
-  }
+  context.repositionTarget = event.event;
 }
 
 function setRepositionDataToNull(context: CanvasMachineContext) {
@@ -407,6 +403,7 @@ export function createCanvasMachine(id: string) {
         hovered: null,
         selected: null,
         lastDropped: null,
+        repositionTarget: null,
       },
       states: {
         [initial]: {
@@ -509,7 +506,8 @@ export function createCanvasMachine(id: string) {
               },
               states: {
                 [repositionIdle]: {
-                  entry: () => {
+                  entry: (context) => {
+                    context.repositionTarget = null;
                     console.log("Entered Reposition Idle State");
                   },
                   exit: () => {
@@ -519,7 +517,7 @@ export function createCanvasMachine(id: string) {
                     [MOUSE_MOVE]: {
                       target: repositionActive,
                       cond: isNotInTheSameParent,
-                      actions: ["emitRepositionStarted"],
+                      actions: ["emitRepositionStarted", "changeComponentLoc"],
                     },
                   },
                 },
@@ -536,6 +534,11 @@ export function createCanvasMachine(id: string) {
                       cond: isInTheSameParent,
                       actions: ["emitRepositionEnded"],
                     },
+                    [MOUSE_MOVE]: {
+                      target: repositionActive,
+                      cond: isNotInTheSameParent,
+                      actions: ["emitRepositionStarted", "changeComponentLoc"],
+                    },
                   },
                 },
               },