@griddle/vue 0.1.7 → 0.1.9

package/dist/interaction.js.map

@@ -1 +1 @@
-{"version":3,"file":"interaction.js","sources":["../src/interaction.ts"],"sourcesContent":["export interface InteractionScale {\n  x: number;\n  y: number;\n}\n\ntype MeasurableElement = Pick<\n  HTMLElement,\n  'getBoundingClientRect' | 'offsetWidth' | 'offsetHeight'\n>;\n\nfunction validScale(value: number): number | null {\n  return Number.isFinite(value) && value > 0 ? value : null;\n}\n\n/**\n * Measure how CSS transforms map an element's local coordinate space into\n * viewport pixels. PointerEvent.clientX/clientY are viewport coordinates,\n * while Griddle's cells and inline transforms use the element's local CSS\n * pixels, so drag math must cross this boundary explicitly.\n */\nexport function measureInteractionScale(\n  element: MeasurableElement | null,\n): InteractionScale {\n  if (!element) return { x: 1, y: 1 };\n\n  const rect = element.getBoundingClientRect();\n  const measuredX = validScale(\n    element.offsetWidth > 0 ? rect.width / element.offsetWidth : NaN,\n  );\n  const measuredY = validScale(\n    element.offsetHeight > 0 ? rect.height / element.offsetHeight : NaN,\n  );\n\n  // A content-sized grid can temporarily report a zero height while mounting.\n  // Prefer the other measured axis before falling back to an unscaled value;\n  // this also handles the common uniform transform: scale(...) host.\n  return {\n    x: measuredX ?? measuredY ?? 1,\n    y: measuredY ?? measuredX ?? 1,\n  };\n}\n\n/** Convert a viewport-space pointer delta into the grid's local CSS pixels. */\nexport function toLocalInteractionDelta(\n  dx: number,\n  dy: number,\n  scale: InteractionScale,\n): { dx: number; dy: number } {\n  return {\n    dx: dx / scale.x,\n    dy: dy / scale.y,\n  };\n}\n"],"names":["validScale","value","measureInteractionScale","element","rect","measuredX","measuredY","toLocalInteractionDelta","dx","dy","scale"],"mappings":"AAUA,SAASA,EAAWC,GAA8B;AAChD,SAAO,OAAO,SAASA,CAAK,KAAKA,IAAQ,IAAIA,IAAQ;AACvD;AAQO,SAASC,EACdC,GACkB;AAClB,MAAI,CAACA,EAAS,QAAO,EAAE,GAAG,GAAG,GAAG,EAAA;AAEhC,QAAMC,IAAOD,EAAQ,sBAAA,GACfE,IAAYL;AAAA,IAChBG,EAAQ,cAAc,IAAIC,EAAK,QAAQD,EAAQ,cAAc;AAAA,EAAA,GAEzDG,IAAYN;AAAA,IAChBG,EAAQ,eAAe,IAAIC,EAAK,SAASD,EAAQ,eAAe;AAAA,EAAA;AAMlE,SAAO;AAAA,IACL,GAAGE,KAAaC,KAAa;AAAA,IAC7B,GAAGA,KAAaD,KAAa;AAAA,EAAA;AAEjC;AAGO,SAASE,EACdC,GACAC,GACAC,GAC4B;AAC5B,SAAO;AAAA,IACL,IAAIF,IAAKE,EAAM;AAAA,IACf,IAAID,IAAKC,EAAM;AAAA,EAAA;AAEnB;"}
+{"version":3,"file":"interaction.js","sources":["../src/interaction.ts"],"sourcesContent":["export interface InteractionScale {\n  x: number;\n  y: number;\n}\n\nexport interface ResizePreviewInput {\n  corner: 'nw' | 'ne' | 'sw' | 'se';\n  startCol: number;\n  startRow: number;\n  startW: number;\n  startH: number;\n  stepsX: number;\n  stepsY: number;\n  minW: number;\n  minH: number;\n  maxW: number;\n  maxH: number;\n  cols: number;\n  rows: number;\n  infiniteX: boolean;\n  infiniteY: boolean;\n}\n\nexport interface ResizePreview {\n  col: number;\n  row: number;\n  w: number;\n  h: number;\n}\n\ntype MeasurableElement = Pick<\n  HTMLElement,\n  'getBoundingClientRect' | 'offsetWidth' | 'offsetHeight'\n>;\n\nfunction validScale(value: number): number | null {\n  return Number.isFinite(value) && value > 0 ? value : null;\n}\n\n/**\n * Measure how CSS transforms map an element's local coordinate space into\n * viewport pixels. PointerEvent.clientX/clientY are viewport coordinates,\n * while Griddle's cells and inline transforms use the element's local CSS\n * pixels, so drag math must cross this boundary explicitly.\n */\nexport function measureInteractionScale(\n  element: MeasurableElement | null,\n): InteractionScale {\n  if (!element) return { x: 1, y: 1 };\n\n  const rect = element.getBoundingClientRect();\n  const measuredX = validScale(\n    element.offsetWidth > 0 ? rect.width / element.offsetWidth : NaN,\n  );\n  const measuredY = validScale(\n    element.offsetHeight > 0 ? rect.height / element.offsetHeight : NaN,\n  );\n\n  // A content-sized grid can temporarily report a zero height while mounting.\n  // Prefer the other measured axis before falling back to an unscaled value;\n  // this also handles the common uniform transform: scale(...) host.\n  return {\n    x: measuredX ?? measuredY ?? 1,\n    y: measuredY ?? measuredX ?? 1,\n  };\n}\n\n/** Convert a viewport-space pointer delta into the grid's local CSS pixels. */\nexport function toLocalInteractionDelta(\n  dx: number,\n  dy: number,\n  scale: InteractionScale,\n): { dx: number; dy: number } {\n  return {\n    dx: dx / scale.x,\n    dy: dy / scale.y,\n  };\n}\n\nfunction clamp(value: number, lower: number, upper: number): number {\n  if (upper < lower) return upper;\n  return Math.min(upper, Math.max(lower, value));\n}\n\n/**\n * Resolve a corner resize while preserving the opposite edges and trimming\n * the dragged edges at finite grid bounds.\n */\nexport function resolveResizePreview({\n  corner,\n  startCol,\n  startRow,\n  startW,\n  startH,\n  stepsX,\n  stepsY,\n  minW,\n  minH,\n  maxW,\n  maxH,\n  cols,\n  rows,\n  infiniteX,\n  infiniteY,\n}: ResizePreviewInput): ResizePreview {\n  const startRight = startCol + startW;\n  const startBottom = startRow + startH;\n  const east = corner === 'ne' || corner === 'se';\n  const south = corner === 'se' || corner === 'sw';\n\n  let col = startCol;\n  let right = startRight;\n  if (east) {\n    const maxRight = Math.min(\n      startCol + maxW,\n      infiniteX ? Infinity : cols,\n    );\n    right = clamp(startRight + stepsX, startCol + minW, maxRight);\n  } else {\n    const minLeft = Math.max(startRight - maxW, 0);\n    col = clamp(startCol + stepsX, minLeft, startRight - minW);\n  }\n\n  let row = startRow;\n  let bottom = startBottom;\n  if (south) {\n    const maxBottom = Math.min(\n      startRow + maxH,\n      infiniteY ? Infinity : rows,\n    );\n    bottom = clamp(startBottom + stepsY, startRow + minH, maxBottom);\n  } else {\n    const minTop = Math.max(startBottom - maxH, 0);\n    row = clamp(startRow + stepsY, minTop, startBottom - minH);\n  }\n\n  return {\n    col,\n    row,\n    w: right - col,\n    h: bottom - row,\n  };\n}\n\n/** Clamp a pointer-derived cell index to the cells addressable by the grid. */\nexport function clampInteractionCell(\n  cell: number,\n  extent: number,\n  infinite: boolean,\n): number {\n  const nonNegative = Math.max(0, cell);\n  return infinite ? nonNegative : Math.min(extent - 1, nonNegative);\n}\n"],"names":["validScale","value","measureInteractionScale","element","rect","measuredX","measuredY","toLocalInteractionDelta","dx","dy","scale","clamp","lower","upper","resolveResizePreview","corner","startCol","startRow","startW","startH","stepsX","stepsY","minW","minH","maxW","maxH","cols","rows","infiniteX","infiniteY","startRight","startBottom","east","south","col","right","maxRight","minLeft","row","bottom","maxBottom","minTop","clampInteractionCell","cell","extent","infinite","nonNegative"],"mappings":"AAmCA,SAASA,EAAWC,GAA8B;AAChD,SAAO,OAAO,SAASA,CAAK,KAAKA,IAAQ,IAAIA,IAAQ;AACvD;AAQO,SAASC,EACdC,GACkB;AAClB,MAAI,CAACA,EAAS,QAAO,EAAE,GAAG,GAAG,GAAG,EAAA;AAEhC,QAAMC,IAAOD,EAAQ,sBAAA,GACfE,IAAYL;AAAA,IAChBG,EAAQ,cAAc,IAAIC,EAAK,QAAQD,EAAQ,cAAc;AAAA,EAAA,GAEzDG,IAAYN;AAAA,IAChBG,EAAQ,eAAe,IAAIC,EAAK,SAASD,EAAQ,eAAe;AAAA,EAAA;AAMlE,SAAO;AAAA,IACL,GAAGE,KAAaC,KAAa;AAAA,IAC7B,GAAGA,KAAaD,KAAa;AAAA,EAAA;AAEjC;AAGO,SAASE,EACdC,GACAC,GACAC,GAC4B;AAC5B,SAAO;AAAA,IACL,IAAIF,IAAKE,EAAM;AAAA,IACf,IAAID,IAAKC,EAAM;AAAA,EAAA;AAEnB;AAEA,SAASC,EAAMV,GAAeW,GAAeC,GAAuB;AAClE,SAAIA,IAAQD,IAAcC,IACnB,KAAK,IAAIA,GAAO,KAAK,IAAID,GAAOX,CAAK,CAAC;AAC/C;AAMO,SAASa,EAAqB;AAAA,EACnC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AACF,GAAsC;AACpC,QAAMC,IAAad,IAAWE,GACxBa,IAAcd,IAAWE,GACzBa,IAAOjB,MAAW,QAAQA,MAAW,MACrCkB,IAAQlB,MAAW,QAAQA,MAAW;AAE5C,MAAImB,IAAMlB,GACNmB,IAAQL;AACZ,MAAIE,GAAM;AACR,UAAMI,IAAW,KAAK;AAAA,MACpBpB,IAAWQ;AAAA,MACXI,IAAY,QAAWF;AAAA,IAAA;AAEzB,IAAAS,IAAQxB,EAAMmB,IAAaV,GAAQJ,IAAWM,GAAMc,CAAQ;AAAA,EAC9D,OAAO;AACL,UAAMC,IAAU,KAAK,IAAIP,IAAaN,GAAM,CAAC;AAC7C,IAAAU,IAAMvB,EAAMK,IAAWI,GAAQiB,GAASP,IAAaR,CAAI;AAAA,EAC3D;AAEA,MAAIgB,IAAMrB,GACNsB,IAASR;AACb,MAAIE,GAAO;AACT,UAAMO,IAAY,KAAK;AAAA,MACrBvB,IAAWQ;AAAA,MACXI,IAAY,QAAWF;AAAA,IAAA;AAEzB,IAAAY,IAAS5B,EAAMoB,IAAcV,GAAQJ,IAAWM,GAAMiB,CAAS;AAAA,EACjE,OAAO;AACL,UAAMC,IAAS,KAAK,IAAIV,IAAcN,GAAM,CAAC;AAC7C,IAAAa,IAAM3B,EAAMM,IAAWI,GAAQoB,GAAQV,IAAcR,CAAI;AAAA,EAC3D;AAEA,SAAO;AAAA,IACL,KAAAW;AAAA,IACA,KAAAI;AAAA,IACA,GAAGH,IAAQD;AAAA,IACX,GAAGK,IAASD;AAAA,EAAA;AAEhB;AAGO,SAASI,EACdC,GACAC,GACAC,GACQ;AACR,QAAMC,IAAc,KAAK,IAAI,GAAGH,CAAI;AACpC,SAAOE,IAAWC,IAAc,KAAK,IAAIF,IAAS,GAAGE,CAAW;AAClE;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griddle/vue",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "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.7"
+    "@griddle/core": "^0.1.9"
   },
   "devDependencies": {
     "vue": "^3.4.0",
-    "@griddle/core": "^0.1.7",
+    "@griddle/core": "^0.1.9",
     "vite": "^5.4.0",
     "@vitejs/plugin-vue": "^5.2.0",
     "vue-tsc": "^2.2.0"

package/src/GriddleGrid.vue

@@ -114,6 +114,8 @@ import type { GriddleApi } from './useGriddle.js';
 import { animateReposition, liftTransition } from './animation.js';
 import {
   measureInteractionScale,
+  clampInteractionCell,
+  resolveResizePreview,
   toLocalInteractionDelta,
   type InteractionScale,
 } from './interaction.js';
@@ -406,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);
 }
@@ -442,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;
@@ -523,22 +542,30 @@ function onPointerMove(e: PointerEvent) {
       e.clientY - r.startPointerY,
       interactionScale,
     );
-    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 = 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

@@ -3,6 +3,31 @@ export interface InteractionScale {
   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'
@@ -51,3 +76,78 @@ export function toLocalInteractionDelta(
     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);
+}