fix: update drag event handling to ensure optional chaining for dataTransfer and rename snapping option for clarity

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');
           }
 

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;
 }
 
 /**

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 }),

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