@griddle/vue 0.1.1 → 0.1.3

package/src/GriddleGrid.vue

@@ -111,6 +111,7 @@ import {
 } from '@griddle/core';
 import type { TileLayout } from '@griddle/core';
 import type { GriddleApi } from './useGriddle.js';
+import { animateReposition, liftTransition } from './animation.js';
 
 const props = defineProps<{
   api: GriddleApi;
@@ -190,6 +191,7 @@ function setSelection(next: Set<string>) {
 }
 
 const DEFAULT_DRAG_IGNORE = 'a, button, input, textarea, select, [contenteditable]';
+const DRAG_START_THRESHOLD_PX = 12;
 
 const dragController = new DragController(props.api.grid);
 const groupDragController = new GroupDragController(props.api.grid);
@@ -248,18 +250,35 @@ interface DrawState {
 }
 const drawState = ref<DrawState | null>(null);
 
-function onTilePointerDown(e: PointerEvent, tile: Tile) {
-  if (tile.draggable === false) return;
-  if ((e.target as HTMLElement).dataset.griddleHandle) return;
+interface PendingDragState {
+  pointerId: number;
+  tileId: string;
+  tileElement: HTMLDivElement;
+  startPointerX: number;
+  startPointerY: number;
+  mode: 'pin' | 'group' | 'single';
+  groupTileIds: string[];
+}
+let pendingDrag: PendingDragState | null = null;
+
+function beginPendingDrag(pending: PendingDragState): boolean {
+  const tile = props.api.grid.getTile(pending.tileId);
+  if (!tile) return false;
+
+  // Capture only once movement proves this is a drag. Capturing on
+  // pointer-down retargets pointer-up away from editable descendants and turns
+  // ordinary clicks into drag start/end cycles.
+  try {
+    pending.tileElement.setPointerCapture(pending.pointerId);
+  } catch {
+    // The pointer may already have ended or the tile may have unmounted.
+    return false;
+  }
 
-  const ignoreSelector = config.value.dragIgnoreFrom ?? DEFAULT_DRAG_IGNORE;
-  if (ignoreSelector && (e.target as HTMLElement).closest(ignoreSelector)) return;
+  dragStartPointerX = pending.startPointerX;
+  dragStartPointerY = pending.startPointerY;
 
-  const metaKey = e.metaKey || e.ctrlKey;
-
-  // Out-of-flow tiles get free-pixel drag (no selection).
-  if (config.value.enablePositioning && isOutOfFlow(tile)) {
-    (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
+  if (pending.mode === 'pin') {
     const layout = computeTileLayout({
       tile,
       config: config.value,
@@ -275,10 +294,61 @@ function onTilePointerDown(e: PointerEvent, tile: Tile) {
     pinDrag.value = {
       tileId: tile.id,
       startPinPx,
+      startPointerX: pending.startPointerX,
+      startPointerY: pending.startPointerY,
+    };
+    emit('dragStart', tile.id);
+    return true;
+  }
+
+  if (pending.mode === 'group') {
+    if (!groupDragController.start(pending.groupTileIds)) return false;
+    groupDrag.value = {
+      tileIds: pending.groupTileIds,
+      deltaX: 0,
+      deltaY: 0,
+      committedDcol: 0,
+      committedDrow: 0,
+    };
+    emit('dragStart', tile.id);
+    return true;
+  }
+
+  if (!dragController.start(tile.id)) return false;
+  drag.value = {
+    tileId: tile.id,
+    pickupCol: tile.col,
+    pickupRow: tile.row,
+    deltaX: 0,
+    deltaY: 0,
+    indicatorCol: tile.col,
+    indicatorRow: tile.row,
+  };
+  emit('dragStart', tile.id);
+  return true;
+}
+
+function onTilePointerDown(e: PointerEvent, tile: Tile) {
+  if (e.button !== 0) return;
+  if (tile.draggable === false) return;
+  if ((e.target as HTMLElement).dataset.griddleHandle) return;
+
+  const ignoreSelector = config.value.dragIgnoreFrom ?? DEFAULT_DRAG_IGNORE;
+  if (ignoreSelector && (e.target as HTMLElement).closest(ignoreSelector)) return;
+
+  const metaKey = e.metaKey || e.ctrlKey;
+
+  // Out-of-flow tiles get free-pixel drag (no selection).
+  if (config.value.enablePositioning && isOutOfFlow(tile)) {
+    pendingDrag = {
+      pointerId: e.pointerId,
+      tileId: tile.id,
+      tileElement: e.currentTarget as HTMLDivElement,
       startPointerX: e.clientX,
       startPointerY: e.clientY,
+      mode: 'pin',
+      groupTileIds: [],
     };
-    emit('dragStart', tile.id);
     e.stopPropagation();
     return;
   }
@@ -303,42 +373,20 @@ function onTilePointerDown(e: PointerEvent, tile: Tile) {
     setSelection(new Set([tile.id]));
   }
 
-  // Capture pointer only when starting a drag.
-  (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
-
-  // Group drag if 2+ tiles selected including this one.
+  // Defer capture and drag state until the pointer crosses the movement
+  // threshold. A stationary pointer-down/up remains a normal click, including
+  // when it starts inside contenteditable tile content.
   const effectiveSelection = tileIsSelected ? selection.value : new Set([tile.id]);
-  if (effectiveSelection.size > 1) {
-    const ids = Array.from(effectiveSelection);
-    if (!groupDragController.start(ids)) return;
-    dragStartPointerX = e.clientX;
-    dragStartPointerY = e.clientY;
-    groupDrag.value = {
-      tileIds: ids,
-      deltaX: 0,
-      deltaY: 0,
-      committedDcol: 0,
-      committedDrow: 0,
-    };
-    emit('dragStart', tile.id);
-    e.stopPropagation();
-    return;
-  }
-
-  // Single tile drag.
-  if (!dragController.start(tile.id)) return;
-  dragStartPointerX = e.clientX;
-  dragStartPointerY = e.clientY;
-  drag.value = {
+  const groupTileIds = Array.from(effectiveSelection);
+  pendingDrag = {
+    pointerId: e.pointerId,
     tileId: tile.id,
-    pickupCol: tile.col,
-    pickupRow: tile.row,
-    deltaX: 0,
-    deltaY: 0,
-    indicatorCol: tile.col,
-    indicatorRow: tile.row,
+    tileElement: e.currentTarget as HTMLDivElement,
+    startPointerX: e.clientX,
+    startPointerY: e.clientY,
+    mode: groupTileIds.length > 1 ? 'group' : 'single',
+    groupTileIds,
   };
-  emit('dragStart', tile.id);
   e.stopPropagation();
 }
 
@@ -394,6 +442,20 @@ function onPointerMove(e: PointerEvent) {
     }
     return;
   }
+
+  const pending = pendingDrag;
+  if (pending && e.pointerId === pending.pointerId) {
+    const distance = Math.hypot(
+      e.clientX - pending.startPointerX,
+      e.clientY - pending.startPointerY,
+    );
+    if (distance <= DRAG_START_THRESHOLD_PX) return;
+
+    pendingDrag = null;
+    if (!beginPendingDrag(pending)) return;
+    e.preventDefault();
+  }
+
   const pd = pinDrag.value;
   const gd = groupDrag.value;
   const d = drag.value;
@@ -471,7 +533,11 @@ function syncTiles() {
   props.api.version.value++;
 }
 
-function onPointerUp() {
+function onPointerUp(e: PointerEvent) {
+  if (pendingDrag?.pointerId === e.pointerId) {
+    pendingDrag = null;
+    return;
+  }
   if (drawState.value) {
     const ds = drawState.value;
     const col = Math.min(ds.anchorCol, ds.currentCol);
@@ -553,6 +619,7 @@ onMounted(() => {
   window.addEventListener('keydown', onKeyDown);
 });
 onBeforeUnmount(() => {
+  pendingDrag = null;
   const el = scrollEl.value;
   if (el) el.removeEventListener('scroll', updateViewport);
   ro?.disconnect();
@@ -586,12 +653,7 @@ watch(() => props.api.version.value, async () => {
       const dx = p.x - x;
       const dy = p.y - y;
       if (dx !== 0 || dy !== 0) {
-        node.style.transition = 'none';
-        node.style.transform = `translate(${dx}px, ${dy}px)`;
-        requestAnimationFrame(() => {
-          node.style.transition = 'transform 220ms cubic-bezier(.2,.7,.2,1)';
-          node.style.transform = 'translate(0,0)';
-        });
+        animateReposition(node, dx, dy, config.value.animation);
       }
     }
     prevRects.set(t.id, { x, y });
@@ -683,10 +745,10 @@ function tileStyle(tile: Tile) {
     userSelect: 'none' as const,
     zIndex: layout.zIndex,
     opacity: lifted || isResizing ? 0.85 : 1,
-    willChange: 'transform',
+    willChange: 'transform, translate',
     transform: layout.transform ?? '',
     filter: lifted ? 'drop-shadow(0 8px 16px rgba(0,0,0,0.18))' : '',
-    transition: lifted ? 'filter 120ms ease-out, opacity 120ms ease-out' : '',
+    transition: lifted ? liftTransition(config.value.animation) : '',
     boxShadow: isSelected
       ? '0 0 0 3px rgba(59, 91, 219, 0.85), inset 0 0 0 1px rgba(59, 91, 219, 0.3)'
       : '',

package/src/LoopGrid.vue

@@ -79,6 +79,7 @@ import {
 } from '@griddle/core';
 import type { LoopTileInstance } from '@griddle/core';
 import type { GriddleApi } from './useGriddle.js';
+import { animateReposition } from './animation.js';
 
 const props = defineProps<{
   api: GriddleApi;
@@ -480,12 +481,7 @@ watch(() => props.api.version.value, async () => {
           Math.abs(dx) < period.value.width / 2 &&
           Math.abs(dy) < period.value.height / 2
         ) {
-          node.style.transition = 'none';
-          node.style.transform = `translate(${dx}px, ${dy}px)`;
-          requestAnimationFrame(() => {
-            node.style.transition = 'transform 220ms cubic-bezier(.2,.7,.2,1)';
-            node.style.transform = 'translate(0,0)';
-          });
+          animateReposition(node, dx, dy, config.value.animation);
         }
       }
     }
@@ -512,6 +508,7 @@ const viewportStyle = computed(() => {
     height: typeof props.height === 'number' ? props.height + 'px' : (props.height ?? '100%'),
     touchAction: 'none' as const,
     userSelect: 'none' as const,
+    willChange: 'translate',
     cursor: !editable.value && loop.value?.dragPan ? 'grab' : undefined,
     ['--griddle-tile-radius' as string]: (config.value.tileRadius ?? 4) + 'px',
     ...bg,

package/src/animation.ts

@@ -0,0 +1,62 @@
+import {
+  resolveAnimationConfig,
+  type GridAnimationConfig,
+} from '@griddle/core';
+
+const pendingFrames = new WeakMap<HTMLElement, number>();
+
+function reducedMotionRequested(config: GridAnimationConfig | undefined): boolean {
+  const animation = resolveAnimationConfig(config);
+  return animation.respectReducedMotion &&
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function currentTranslation(node: HTMLElement): { x: number; y: number } {
+  if (typeof window === 'undefined') return { x: 0, y: 0 };
+  const translate = window.getComputedStyle(node).translate;
+  if (!translate || translate === 'none') return { x: 0, y: 0 };
+  const [x = '0', y = '0'] = translate.split(/\s+/);
+  return { x: Number.parseFloat(x) || 0, y: Number.parseFloat(y) || 0 };
+}
+
+/** Continue rapid repacks from the tile's current visual position. */
+export function animateReposition(
+  node: HTMLElement,
+  deltaX: number,
+  deltaY: number,
+  config?: GridAnimationConfig,
+): void {
+  const pending = pendingFrames.get(node);
+  if (pending !== undefined) cancelAnimationFrame(pending);
+
+  const animation = resolveAnimationConfig(config);
+  if (!animation.enabled || animation.repositionDurationMs === 0 || reducedMotionRequested(config)) {
+    node.style.transition = 'none';
+    node.style.translate = '0px 0px';
+    pendingFrames.delete(node);
+    return;
+  }
+
+  const current = currentTranslation(node);
+  node.style.transition = 'none';
+  node.style.translate = `${deltaX + current.x}px ${deltaY + current.y}px`;
+  void node.offsetWidth;
+
+  const frame = requestAnimationFrame(() => {
+    pendingFrames.delete(node);
+    node.style.transition =
+      `translate ${animation.repositionDurationMs}ms ${animation.repositionEasing}`;
+    node.style.translate = '0px 0px';
+  });
+  pendingFrames.set(node, frame);
+}
+
+export function liftTransition(config?: GridAnimationConfig): string {
+  const animation = resolveAnimationConfig(config);
+  const duration = !animation.enabled || reducedMotionRequested(config)
+    ? 0
+    : animation.liftDurationMs;
+  return `filter ${duration}ms ${animation.liftEasing}, opacity ${duration}ms ${animation.liftEasing}`;
+}