From ee99e224c27a338853c8b0e5bb07efbc73f1cb29 Mon Sep 17 00:00:00 2001
From: Carlos <info@itscarlosrufo.com>
Date: Wed, 9 Apr 2025 19:08:09 +0800
Subject: [PATCH] fix: update drag event handling to ensure optional chaining
 for dataTransfer and rename snapping option for clarity

---
 packages/core/src/commands/index.ts                 |  2 +-
 packages/core/src/commands/view/ComponentDrag.ts    |  6 ++++++
 packages/core/src/dom_components/model/Component.ts |  1 +
 packages/core/src/utils/Dragger.ts                  | 13 +++++++------
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/commands/index.ts b/packages/core/src/commands/index.ts
index f3639be6c..43895f656 100644
--- a/packages/core/src/commands/index.ts
+++ b/packages/core/src/commands/index.ts
@@ -176,7 +176,7 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
           });
         } else {
           if (nativeDrag) {
-            event.dataTransfer.setDragImage(target.view?.el, 0, 0);
+            event?.dataTransfer?.setDragImage(target.view?.el, 0, 0);
             //sel.set('status', 'freezed');
           }
 
diff --git a/packages/core/src/commands/view/ComponentDrag.ts b/packages/core/src/commands/view/ComponentDrag.ts
index 92c5fc141..562648379 100644
--- a/packages/core/src/commands/view/ComponentDrag.ts
+++ b/packages/core/src/commands/view/ComponentDrag.ts
@@ -71,6 +71,7 @@ export default {
       guidesTarget: this.guidesTarget,
       guidesStatic: this.guidesStatic,
       guidesMatched: this.getGuidesMatched(guidesActive),
+      opts: this.opts,
     };
   },
 
@@ -654,6 +655,11 @@ export interface ComponentDragEventProps {
    * The guides that are being matched.
    */
   guidesMatched: ComponentDragGuideMatched[];
+
+  /**
+   * The options used for the drag event.
+   */
+  opts: ComponentDragOpts;
 }
 
 /**
diff --git a/packages/core/src/dom_components/model/Component.ts b/packages/core/src/dom_components/model/Component.ts
index ae311f22b..a38981d42 100644
--- a/packages/core/src/dom_components/model/Component.ts
+++ b/packages/core/src/dom_components/model/Component.ts
@@ -1153,6 +1153,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
             const clientX = rect ? rect.left + rect.width / 2 : 0;
             const clientY = rect ? rect.top + rect.height / 2 : 0;
 
+            // TODO: support multiple selection
             ed.runCommand('tlb-move', {
               target,
               event: new DragEvent('dragstart', { clientX, clientY }),
diff --git a/packages/core/src/utils/Dragger.ts b/packages/core/src/utils/Dragger.ts
index b9a9523ff..626f95457 100644
--- a/packages/core/src/utils/Dragger.ts
+++ b/packages/core/src/utils/Dragger.ts
@@ -84,9 +84,9 @@ export interface DraggerOptions {
 
   /**
    * Snapping value for the x-y axis. If you pass a value of 0, the snapping will be disabled for that axis.
-   * @example { snap: { x: 10, y: 5 } }
+   * @example { snapGuides: { x: 10, y: 5 } }
    */
-  snap?: { x?: number; y?: number };
+  snapGuides?: { x?: number; y?: number };
 
   /**
    * Document on which listen to pointer events.
@@ -128,7 +128,8 @@ export default class Dragger {
    */
   constructor(opts: DraggerOptions = {}) {
     this.opts = {
-      snap: { x: 5, y: 5 },
+      // TODO: move per pixel in the Studio (by event)
+      snapGuides: { x: 20, y: 0 },
       snapOffset: 5,
       scale: 1,
     };
@@ -319,10 +320,10 @@ export default class Dragger {
   }
 
   isPointIn(src: number, trg: number, { offset, axis }: { offset?: number; axis?: PositionXY } = {}) {
-    const { snap = {}, snapOffset = 0 } = this.opts;
-    const axisOffset = axis === 'x' ? snap.x : axis === 'y' ? snap.y : undefined;
+    const { snapGuides = {}, snapOffset = 0 } = this.opts;
+    const axisOffset = axis === 'x' ? snapGuides.x : axis === 'y' ? snapGuides.y : undefined;
 
-    // If snap.x or snap.y is explicitly 0, disable snapping for that axis
+    // If snapGuides.x or snapGuides.y is explicitly 0, disable snapping for that axis
     const effectiveOffset = axisOffset === 0 ? 0 : (offset ?? axisOffset ?? snapOffset);
 
     // If effectiveOffset is 0, snapping is disabled for this axis