@griddle/svelte 0.1.1 → 0.1.3

package/README.md

@@ -38,6 +38,31 @@ shown above). `svelte` (^4 or ^5) is expected to already be in your app.
 </GriddleGrid>
 ```
 
+## Animation configuration
+
+Tile repositioning and lift animations share `config.animation` with the other
+Griddle adapters. Repositioning defaults to a smooth 320 ms ease-out and rapid
+repacks continue from each tile's current visual position.
+
+```js
+const api = createGriddle({
+  config: {
+    cols: 12, rows: 12, unitWidth: 75, unitHeight: 75,
+    animation: {
+      repositionDurationMs: 320,
+      repositionEasing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+      liftDurationMs: 160,
+      liftEasing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+      respectReducedMotion: true,
+    },
+  },
+  tiles,
+});
+```
+
+Use `animation.enabled: false` to disable all adapter animations. A duration of
+`0` disables only that transition.
+
 ## Loop mode (infinite gallery)
 
 Enable `loop` in the config and the content repeats endlessly with drag-to-pan

package/dist/GriddleGrid.svelte

@@ -1,6 +1,7 @@
 <script>import { onMount, onDestroy, tick, createEventDispatcher } from 'svelte';
 import { visibleRange, visibleTiles, gridContentSize, DragController, computeTileLayout, resolveStickyStacking, isOutOfFlow, pixelsToPin, } from '@griddle/core';
 import LoopGrid from './LoopGrid.svelte';
+import { animateReposition, liftTransition } from './animation.js';
 export let api;
 export let height = '100%';
 export let showGrid = true;
@@ -263,12 +264,7 @@ async function runFlip(_v) {
             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, cfg.animation);
             }
         }
         prevRects.set(t.id, { x, y });
@@ -408,6 +404,7 @@ $: indicatorRect = (() => {
         style:width={layout.width + 'px'}
         style:height={layout.height + 'px'}
         style:transform={layout.transform ?? ''}
+        style:transition={isDragging(tile.id) ? liftTransition(cfg.animation) : ''}
         style:z-index={layout.zIndex}
       >
         <slot name="tile" {tile} />
@@ -447,7 +444,7 @@ $: indicatorRect = (() => {
     box-sizing: border-box;
     cursor: grab;
     user-select: none;
-    will-change: transform;
+    will-change: transform, translate;
     z-index: 1;
   }
   .griddle-tile.griddle-resizing {
@@ -463,7 +460,6 @@ $: indicatorRect = (() => {
        is set inline (cursor delta), so the scale is folded into a CSS filter
        to avoid clobbering it. */
     filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
-    transition: filter 120ms ease-out, opacity 120ms ease-out;
   }
   .griddle-drop-indicator {
     position: absolute;

package/dist/LoopGrid.svelte

@@ -4,6 +4,7 @@
 // NO native scrolling (wheel deltas feed the camera directly).
 import { onMount, onDestroy, tick, createEventDispatcher } from 'svelte';
 import { DragController, PanController, loopInstances, loopPeriod, resolveLoop, } from '@griddle/core';
+import { animateReposition } from './animation.js';
 export let api;
 export let height = '100%';
 export let showGrid = true;
@@ -329,12 +330,7 @@ async function runFlip(_v) {
                 if ((dx !== 0 || dy !== 0) &&
                     Math.abs(dx) < period.width / 2 &&
                     Math.abs(dy) < period.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, cfg.animation);
                 }
             }
         }
@@ -472,6 +468,7 @@ function instanceLayout(inst, r) {
     position: absolute;
     box-sizing: border-box;
     user-select: none;
+    will-change: translate;
     z-index: 1;
     border-radius: var(--griddle-tile-radius, 4px);
   }

package/dist/animation.d.ts

@@ -0,0 +1,4 @@
+import { type GridAnimationConfig } from '@griddle/core';
+/** Continue rapid repacks from the tile's current visual position. */
+export declare function animateReposition(node: HTMLElement, deltaX: number, deltaY: number, config?: GridAnimationConfig): void;
+export declare function liftTransition(config?: GridAnimationConfig): string;

package/dist/animation.js

@@ -0,0 +1,49 @@
+import { resolveAnimationConfig, } from '@griddle/core';
+const pendingFrames = new WeakMap();
+function reducedMotionRequested(config) {
+    const animation = resolveAnimationConfig(config);
+    return animation.respectReducedMotion &&
+        typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function currentTranslation(node) {
+    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, deltaX, deltaY, config) {
+    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) {
+    const animation = resolveAnimationConfig(config);
+    const duration = !animation.enabled || reducedMotionRequested(config)
+        ? 0
+        : animation.liftDurationMs;
+    return `filter ${duration}ms ${animation.liftEasing}, opacity ${duration}ms ${animation.liftEasing}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griddle/svelte",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Svelte bindings for Griddle — a headless, zero-dependency grid/canvas engine.",
   "keywords": [
     "grid",
@@ -49,14 +49,15 @@
   },
   "scripts": {
     "build": "svelte-package -i src -o dist",
-    "prepublishOnly": "npm run build"
+    "test": "node --test test/animation.test.mjs",
+    "prepublishOnly": "npm run build && npm test"
   },
   "peerDependencies": {
-    "@griddle/core": "^0.1.0",
+    "@griddle/core": "^0.1.3",
     "svelte": "^4.0.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@griddle/core": "^0.1.0",
+    "@griddle/core": "^0.1.3",
     "@sveltejs/package": "^2.5.8",
     "svelte": "^4.2.0",
     "svelte-check": "^4.7.2",