@griddle/vue 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griddle/vue",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Vue 3 bindings for Griddle — a headless, zero-dependency grid/canvas engine.",
   "keywords": [
     "grid",
@@ -53,11 +53,11 @@
   },
   "peerDependencies": {
     "vue": "^3.3.0",
-    "@griddle/core": "^0.1.6"
+    "@griddle/core": "^0.1.8"
   },
   "devDependencies": {
     "vue": "^3.4.0",
-    "@griddle/core": "^0.1.6",
+    "@griddle/core": "^0.1.8",
     "vite": "^5.4.0",
     "@vitejs/plugin-vue": "^5.2.0",
     "vue-tsc": "^2.2.0"

package/src/GriddleGrid.vue

@@ -112,6 +112,13 @@ import {
 import type { TileLayout } from '@griddle/core';
 import type { GriddleApi } from './useGriddle.js';
 import { animateReposition, liftTransition } from './animation.js';
+import {
+  measureInteractionScale,
+  clampInteractionCell,
+  resolveResizePreview,
+  toLocalInteractionDelta,
+  type InteractionScale,
+} from './interaction.js';
 
 const props = defineProps<{
   api: GriddleApi;
@@ -208,6 +215,7 @@ interface DragVisual {
 const drag = ref<DragVisual | null>(null);
 let dragStartPointerX = 0;
 let dragStartPointerY = 0;
+let interactionScale: InteractionScale = { x: 1, y: 1 };
 
 interface GroupDragVisual {
   tileIds: string[];
@@ -277,6 +285,7 @@ function beginPendingDrag(pending: PendingDragState): boolean {
 
   dragStartPointerX = pending.startPointerX;
   dragStartPointerY = pending.startPointerY;
+  interactionScale = measureInteractionScale(scrollEl.value);
 
   if (pending.mode === 'pin') {
     const layout = computeTileLayout({
@@ -399,11 +408,20 @@ function onBackgroundPointerDown(e: PointerEvent) {
 
   const el = scrollEl.value;
   if (!el) return;
+  interactionScale = measureInteractionScale(el);
   const rect = el.getBoundingClientRect();
-  const x = e.clientX - rect.left + el.scrollLeft;
-  const y = e.clientY - rect.top + el.scrollTop;
-  const col = Math.floor(x / colSize.value);
-  const row = Math.floor(y / rowSize.value);
+  const x = (e.clientX - rect.left) / interactionScale.x + el.scrollLeft;
+  const y = (e.clientY - rect.top) / interactionScale.y + el.scrollTop;
+  const col = clampInteractionCell(
+    Math.floor(x / colSize.value),
+    config.value.cols,
+    config.value.infiniteX ?? config.value.cols === Infinity,
+  );
+  const row = clampInteractionCell(
+    Math.floor(y / rowSize.value),
+    config.value.rows,
+    config.value.infiniteY ?? config.value.rows === Infinity,
+  );
   drawState.value = { anchorCol: col, anchorRow: row, currentCol: col, currentRow: row };
   (el as HTMLDivElement).setPointerCapture(e.pointerId);
 }
@@ -411,6 +429,7 @@ function onBackgroundPointerDown(e: PointerEvent) {
 function onResizeHandleDown(e: PointerEvent, tile: Tile, c: Corner) {
   if (tile.resizable === false) return;
   (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
+  interactionScale = measureInteractionScale(scrollEl.value);
   resize.value = {
     tileId: tile.id,
     corner: c,
@@ -434,10 +453,18 @@ function onPointerMove(e: PointerEvent) {
     const el = scrollEl.value;
     if (el) {
       const rect = el.getBoundingClientRect();
-      const x = e.clientX - rect.left + el.scrollLeft;
-      const y = e.clientY - rect.top + el.scrollTop;
-      const col = Math.max(0, Math.floor(x / colSize.value));
-      const row = Math.max(0, Math.floor(y / rowSize.value));
+      const x = (e.clientX - rect.left) / interactionScale.x + el.scrollLeft;
+      const y = (e.clientY - rect.top) / interactionScale.y + el.scrollTop;
+      const col = clampInteractionCell(
+        Math.floor(x / colSize.value),
+        config.value.cols,
+        config.value.infiniteX ?? config.value.cols === Infinity,
+      );
+      const row = clampInteractionCell(
+        Math.floor(y / rowSize.value),
+        config.value.rows,
+        config.value.infiniteY ?? config.value.rows === Infinity,
+      );
       drawState.value = { ...drawState.value, currentCol: col, currentRow: row };
     }
     return;
@@ -461,15 +488,21 @@ function onPointerMove(e: PointerEvent) {
   const d = drag.value;
   const r = resize.value;
   if (pd) {
-    const dx = e.clientX - pd.startPointerX;
-    const dy = e.clientY - pd.startPointerY;
+    const { dx, dy } = toLocalInteractionDelta(
+      e.clientX - pd.startPointerX,
+      e.clientY - pd.startPointerY,
+      interactionScale,
+    );
     const newPinPx = { x: pd.startPinPx.x + dx, y: pd.startPinPx.y + dy };
     const newPin = pixelsToPin(newPinPx, config.value);
     props.api.grid.setTilePinned(pd.tileId, newPin);
   }
   if (gd) {
-    const dx = e.clientX - dragStartPointerX;
-    const dy = e.clientY - dragStartPointerY;
+    const { dx, dy } = toLocalInteractionDelta(
+      e.clientX - dragStartPointerX,
+      e.clientY - dragStartPointerY,
+      interactionScale,
+    );
     const dcol = Math.round(dx / colSize.value);
     const drow = Math.round(dy / rowSize.value);
     const result = groupDragController.update({ dcol, drow });
@@ -483,8 +516,11 @@ function onPointerMove(e: PointerEvent) {
     if (result.changed) syncTiles();
   }
   if (d) {
-    const dx = e.clientX - dragStartPointerX;
-    const dy = e.clientY - dragStartPointerY;
+    const { dx, dy } = toLocalInteractionDelta(
+      e.clientX - dragStartPointerX,
+      e.clientY - dragStartPointerY,
+      interactionScale,
+    );
     const candidateCol = d.pickupCol + Math.round(dx / colSize.value);
     const candidateRow = d.pickupRow + Math.round(dy / rowSize.value);
     const result = dragController.update({ col: candidateCol, row: candidateRow });
@@ -501,24 +537,35 @@ function onPointerMove(e: PointerEvent) {
     if (result.changed) syncTiles();
   }
   if (r) {
-    const dx = e.clientX - r.startPointerX;
-    const dy = e.clientY - r.startPointerY;
-    let dw = 0, dh = 0, dcol = 0, drow = 0;
+    const { dx, dy } = toLocalInteractionDelta(
+      e.clientX - r.startPointerX,
+      e.clientY - r.startPointerY,
+      interactionScale,
+    );
     const stepsX = Math.round(dx / colSize.value);
     const stepsY = Math.round(dy / rowSize.value);
-    if (r.corner === 'se' || r.corner === 'ne') dw = stepsX;
-    if (r.corner === 'se' || r.corner === 'sw') dh = stepsY;
-    if (r.corner === 'sw' || r.corner === 'nw') { dw = -stepsX; dcol = stepsX; }
-    if (r.corner === 'ne' || r.corner === 'nw') { dh = -stepsY; drow = stepsY; }
     const tile = props.api.grid.getTile(r.tileId);
-    const minW = tile?.minW ?? 1;
-    const minH = tile?.minH ?? 1;
-    const maxW = tile?.maxW ?? Infinity;
-    const maxH = tile?.maxH ?? Infinity;
-    const nW = Math.min(maxW, Math.max(minW, r.startW + dw));
-    const nH = Math.min(maxH, Math.max(minH, r.startH + dh));
-    const nC = r.startCol + dcol;
-    const nR = r.startRow + drow;
+    const preview = resolveResizePreview({
+      corner: r.corner,
+      startCol: r.startCol,
+      startRow: r.startRow,
+      startW: r.startW,
+      startH: r.startH,
+      stepsX,
+      stepsY,
+      minW: tile?.minW ?? 1,
+      minH: tile?.minH ?? 1,
+      maxW: tile?.maxW ?? Infinity,
+      maxH: tile?.maxH ?? Infinity,
+      cols: config.value.cols,
+      rows: config.value.rows,
+      infiniteX: config.value.infiniteX ?? config.value.cols === Infinity,
+      infiniteY: config.value.infiniteY ?? config.value.rows === Infinity,
+    });
+    const nW = preview.w;
+    const nH = preview.h;
+    const nC = preview.col;
+    const nR = preview.row;
     if (nW !== r.previewW || nH !== r.previewH || nC !== r.previewCol || nR !== r.previewRow) {
       resize.value = { ...r, previewW: nW, previewH: nH, previewCol: nC, previewRow: nR };
     }

package/src/LoopGrid.vue

@@ -80,6 +80,7 @@ import {
 import type { LoopTileInstance } from '@griddle/core';
 import type { GriddleApi } from './useGriddle.js';
 import { animateReposition } from './animation.js';
+import { resolveResizePreview } from './interaction.js';
 
 const props = defineProps<{
   api: GriddleApi;
@@ -359,22 +360,30 @@ function onPointerMove(e: PointerEvent) {
   if (r) {
     const dx = e.clientX - r.startPointerX;
     const dy = e.clientY - r.startPointerY;
-    let dw = 0, dh = 0, dcol = 0, drow = 0;
     const stepsX = Math.round(dx / colSize.value);
     const stepsY = Math.round(dy / rowSize.value);
-    if (r.corner === 'se' || r.corner === 'ne') dw = stepsX;
-    if (r.corner === 'se' || r.corner === 'sw') dh = stepsY;
-    if (r.corner === 'sw' || r.corner === 'nw') { dw = -stepsX; dcol = stepsX; }
-    if (r.corner === 'ne' || r.corner === 'nw') { dh = -stepsY; drow = stepsY; }
     const tile = props.api.grid.getTile(r.tileId);
-    const minW = tile?.minW ?? 1;
-    const minH = tile?.minH ?? 1;
-    const maxW = Math.min(tile?.maxW ?? Infinity, config.value.cols);
-    const maxH = Math.min(tile?.maxH ?? Infinity, config.value.rows);
-    const nW = Math.min(maxW, Math.max(minW, r.startW + dw));
-    const nH = Math.min(maxH, Math.max(minH, r.startH + dh));
-    const nC = r.startCol + dcol;
-    const nR = r.startRow + drow;
+    const preview = resolveResizePreview({
+      corner: r.corner,
+      startCol: r.startCol,
+      startRow: r.startRow,
+      startW: r.startW,
+      startH: r.startH,
+      stepsX,
+      stepsY,
+      minW: tile?.minW ?? 1,
+      minH: tile?.minH ?? 1,
+      maxW: tile?.maxW ?? Infinity,
+      maxH: tile?.maxH ?? Infinity,
+      cols: config.value.cols,
+      rows: config.value.rows,
+      infiniteX: config.value.infiniteX ?? config.value.cols === Infinity,
+      infiniteY: config.value.infiniteY ?? config.value.rows === Infinity,
+    });
+    const nW = preview.w;
+    const nH = preview.h;
+    const nC = preview.col;
+    const nR = preview.row;
     if (nW !== r.previewW || nH !== r.previewH || nC !== r.previewCol || nR !== r.previewRow) {
       resize.value = { ...r, previewW: nW, previewH: nH, previewCol: nC, previewRow: nR };
     }

package/src/interaction.ts

@@ -0,0 +1,153 @@
+export interface InteractionScale {
+  x: number;
+  y: number;
+}
+
+export interface ResizePreviewInput {
+  corner: 'nw' | 'ne' | 'sw' | 'se';
+  startCol: number;
+  startRow: number;
+  startW: number;
+  startH: number;
+  stepsX: number;
+  stepsY: number;
+  minW: number;
+  minH: number;
+  maxW: number;
+  maxH: number;
+  cols: number;
+  rows: number;
+  infiniteX: boolean;
+  infiniteY: boolean;
+}
+
+export interface ResizePreview {
+  col: number;
+  row: number;
+  w: number;
+  h: number;
+}
+
+type MeasurableElement = Pick<
+  HTMLElement,
+  'getBoundingClientRect' | 'offsetWidth' | 'offsetHeight'
+>;
+
+function validScale(value: number): number | null {
+  return Number.isFinite(value) && value > 0 ? value : null;
+}
+
+/**
+ * Measure how CSS transforms map an element's local coordinate space into
+ * viewport pixels. PointerEvent.clientX/clientY are viewport coordinates,
+ * while Griddle's cells and inline transforms use the element's local CSS
+ * pixels, so drag math must cross this boundary explicitly.
+ */
+export function measureInteractionScale(
+  element: MeasurableElement | null,
+): InteractionScale {
+  if (!element) return { x: 1, y: 1 };
+
+  const rect = element.getBoundingClientRect();
+  const measuredX = validScale(
+    element.offsetWidth > 0 ? rect.width / element.offsetWidth : NaN,
+  );
+  const measuredY = validScale(
+    element.offsetHeight > 0 ? rect.height / element.offsetHeight : NaN,
+  );
+
+  // A content-sized grid can temporarily report a zero height while mounting.
+  // Prefer the other measured axis before falling back to an unscaled value;
+  // this also handles the common uniform transform: scale(...) host.
+  return {
+    x: measuredX ?? measuredY ?? 1,
+    y: measuredY ?? measuredX ?? 1,
+  };
+}
+
+/** Convert a viewport-space pointer delta into the grid's local CSS pixels. */
+export function toLocalInteractionDelta(
+  dx: number,
+  dy: number,
+  scale: InteractionScale,
+): { dx: number; dy: number } {
+  return {
+    dx: dx / scale.x,
+    dy: dy / scale.y,
+  };
+}
+
+function clamp(value: number, lower: number, upper: number): number {
+  if (upper < lower) return upper;
+  return Math.min(upper, Math.max(lower, value));
+}
+
+/**
+ * Resolve a corner resize while preserving the opposite edges and trimming
+ * the dragged edges at finite grid bounds.
+ */
+export function resolveResizePreview({
+  corner,
+  startCol,
+  startRow,
+  startW,
+  startH,
+  stepsX,
+  stepsY,
+  minW,
+  minH,
+  maxW,
+  maxH,
+  cols,
+  rows,
+  infiniteX,
+  infiniteY,
+}: ResizePreviewInput): ResizePreview {
+  const startRight = startCol + startW;
+  const startBottom = startRow + startH;
+  const east = corner === 'ne' || corner === 'se';
+  const south = corner === 'se' || corner === 'sw';
+
+  let col = startCol;
+  let right = startRight;
+  if (east) {
+    const maxRight = Math.min(
+      startCol + maxW,
+      infiniteX ? Infinity : cols,
+    );
+    right = clamp(startRight + stepsX, startCol + minW, maxRight);
+  } else {
+    const minLeft = Math.max(startRight - maxW, 0);
+    col = clamp(startCol + stepsX, minLeft, startRight - minW);
+  }
+
+  let row = startRow;
+  let bottom = startBottom;
+  if (south) {
+    const maxBottom = Math.min(
+      startRow + maxH,
+      infiniteY ? Infinity : rows,
+    );
+    bottom = clamp(startBottom + stepsY, startRow + minH, maxBottom);
+  } else {
+    const minTop = Math.max(startBottom - maxH, 0);
+    row = clamp(startRow + stepsY, minTop, startBottom - minH);
+  }
+
+  return {
+    col,
+    row,
+    w: right - col,
+    h: bottom - row,
+  };
+}
+
+/** Clamp a pointer-derived cell index to the cells addressable by the grid. */
+export function clampInteractionCell(
+  cell: number,
+  extent: number,
+  infinite: boolean,
+): number {
+  const nonNegative = Math.max(0, cell);
+  return infinite ? nonNegative : Math.min(extent - 1, nonNegative);
+}