State orchestration bugs resolved (#706)

* The state machine will transition from selected to pressed only if it has a comp id

* Passed parent to removeHintOverlays because on selectEnd it did not get the parent reference

* If a user clicks outside a dropped component the state transitions to Ready.Idle

* Log statements used for debugging removed

* Used canvasZoneMapIds instead of an optional field to reduce exposure

---------

Co-authored-by: Jonathan Alvares <alvaresjonathan599@gmail.com>

Author: jonathanalvares9009

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

@@ -275,6 +275,13 @@ function insideComponent(
   return false;
 }
 
+function notInsideComponent(
+  context: CanvasMachineContext,
+  event: MOUSE_DOWN_EVENT
+) {
+  return !insideComponent(context, event);
+}
+
 function hoveringOverDifferentComponent(
   context: CanvasMachineContext,
   event: MOUSE_MOVE_EVENT
@@ -615,10 +622,17 @@ export function createCanvasMachine(id: string) {
                 context.selected = null;
               },
               on: {
-                [MOUSE_DOWN]: {
-                  target: pressed,
-                  actions: ["setMousePosition"],
-                },
+                [MOUSE_DOWN]: [
+                  {
+                    target: pressed,
+                    cond: insideComponent,
+                    actions: ["setMousePosition"],
+                  },
+                  {
+                    target: `#${id}.${ready}.${idle}`,
+                    cond: notInsideComponent,
+                  },
+                ],
               },
               type: "parallel",
               states: {

packages/atri-app-core/src/editor-components/CanvasOverlay/hooks/useSelectHints.tsx

@@ -127,7 +127,7 @@ export function useSelectHints() {
   }, []);
 
   useEffect(() => {
-    return subscribeCanvasMachine("selectEnd", (context, event) => {
+    return subscribeCanvasMachine("selectEnd", (context, event: any) => {
       clearOverlay();
       compId.current = null;
     });

packages/atri-app-core/src/editor-components/VisualHints/hintOverlays.ts

@@ -34,8 +34,11 @@ export function removeHintOverlays(overlayIds: string[]) {
       return;
     }
     const overlay = hintOverlays[overlayId]!;
-    const canvasZoneId = componentStoreApi.getComponent(overlay.compId)!.parent
-      .canvasZoneId;
+    let canvasZoneId = "";
+    for (const property in overlayCanvasZoneMap) {
+      if (overlayCanvasZoneMap[property].includes(overlay.overlayId))
+        canvasZoneId = property;
+    }
     affectedCanvasZones.add(canvasZoneId);
     if (hintOverlays[overlayId]) {
       delete hintOverlays[overlayId];