@griddle/svelte 0.1.0 → 0.1.2

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;
@@ -16,6 +17,10 @@ $: tilesAll = $tilesStore;
 $: ver = $versionStore;
 // Loop mode delegates rendering to LoopGrid.
 $: loopOn = cfg.loop?.enabled === true;
+// 'none' scroll mode: the grid sizes to content and lets the host page own
+// scrolling/panning — no internal scroll box, no touch-action lock.
+$: contained = cfg.scroll !== 'none';
+$: heightCss = typeof height === 'number' ? height + 'px' : height;
 $: colSize = cfg.unitWidth + (cfg.gap ?? 0);
 $: rowSize = cfg.unitHeight + (cfg.gap ?? 0);
 $: halfGap = (cfg.gap ?? 0) / 2;
@@ -259,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 });
@@ -363,7 +363,9 @@ $: indicatorRect = (() => {
 <div
   bind:this={scrollEl}
   class="griddle-scroll"
-  style:height={typeof height === 'number' ? height + 'px' : height}
+  style:overflow={contained ? 'auto' : 'visible'}
+  style:touch-action={contained ? 'none' : 'auto'}
+  style:height={contained ? heightCss : 'auto'}
 >
   <div
     class="griddle-content"
@@ -402,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} />
@@ -422,9 +425,8 @@ $: indicatorRect = (() => {
 
 <style>
   .griddle-scroll {
+    /* overflow / touch-action / height are set inline, driven by cfg.scroll. */
     position: relative;
-    overflow: auto;
-    touch-action: none;
   }
   .griddle-content {
     position: relative;
@@ -442,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 {
@@ -458,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.0",
+  "version": "0.1.2",
   "description": "Svelte bindings for Griddle — a headless, zero-dependency grid/canvas engine.",
   "keywords": [
     "grid",
@@ -26,7 +26,10 @@
   "license": "MIT",
   "author": "Trustybits",
   "type": "module",
-  "sideEffects": ["**/*.svelte", "**/*.css"],
+  "sideEffects": [
+    "**/*.svelte",
+    "**/*.css"
+  ],
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -35,7 +38,9 @@
       "svelte": "./dist/index.js"
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "engines": {
     "node": ">=18"
   },
@@ -44,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.2",
     "svelte": "^4.0.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@griddle/core": "^0.1.0",
+    "@griddle/core": "^0.1.2",
     "@sveltejs/package": "^2.5.8",
     "svelte": "^4.2.0",
     "svelte-check": "^4.7.2",