test(spatial): add 5px drag threshold to DisplayNote pointer events

- Add clientX/clientY coordinates to pointerdown test event
- Add pointermove trigger with 10px offset to exceed 5px threshold
- Update comment to reference legacy listenPointerEvents behavior
- Defer isDragging flag and dragstart emission until 5px movement detected
- Move cursor change to grabbing inside threshold check
- Only emit dragend and reset cursor if isDragging was true
- Remove hasDragged flag reset (still used for click

Author: gustavotoyota

new-deepnotes/apps/web/src/features/spatial/DisplayNote.test.ts

@@ -215,7 +215,9 @@ describe("DisplayNote", () => {
 
     const el = wrapper.find('[data-testid="display-note"]');
     mockPointerCapture(el);
-    await el.trigger('pointerdown', { button: 0 });
+    await el.trigger('pointerdown', { button: 0, clientX: 0, clientY: 0 });
+    // Dragging only starts after 5px threshold (like legacy listenPointerEvents)
+    await el.trigger('pointermove', { clientX: 10, clientY: 0 });
     expect(wrapper.emitted('dragstart')).toHaveLength(1);
   });
 

new-deepnotes/apps/web/src/features/spatial/DisplayNote.vue

@@ -233,20 +233,28 @@ function onPointerDown(e: PointerEvent) {
   noteStartX = props.model.pos.value.x;
   noteStartY = props.model.pos.value.y;
   hasDragged = false;
-  isDragging.value = true;
-  emit("dragstart", props.id);
+  // Don't start dragging yet; wait for 5px threshold (like legacy listenPointerEvents)
   const el = e.currentTarget as HTMLElement;
   el.setPointerCapture(e.pointerId);
-  el.style.cursor = "grabbing";
 }
 
 function onPointerMove(e: PointerEvent) {
   if (dragPointerId !== e.pointerId) return;
+
   const dxScreen = e.clientX - startX;
   const dyScreen = e.clientY - startY;
-  if (dxScreen !== 0 || dyScreen !== 0) {
+
+  if (!isDragging.value) {
+    if (Math.sqrt(dxScreen * dxScreen + dyScreen * dyScreen) <= 5) {
+      return;
+    }
+    isDragging.value = true;
     hasDragged = true;
+    emit("dragstart", props.id);
+    const el = e.currentTarget as HTMLElement;
+    el.style.cursor = "grabbing";
   }
+
   const z = props.zoom || 1;
   const noteMap = props.model.rawMap;
   const posMap = noteMap.get("pos") as import("yjs").Map<number>;
@@ -265,10 +273,9 @@ function onPointerUp(e: PointerEvent) {
       /* ignore */
     }
   }
-  el.style.cursor = props.model.movable.value ? "grab" : "";
-  isDragging.value = false;
-  if (hasDragged) {
-    hasDragged = false;
+  if (isDragging.value) {
+    el.style.cursor = props.model.movable.value ? "grab" : "";
+    isDragging.value = false;
     emit("dragend", props.id);
   }
 }