more fixes

Author: Templarian

src/components/pg/nodeResize/THINKING.md

@@ -7,7 +7,7 @@ anchor. The preview CSS vars must then represent the **remaining sub-grid offset
 overlay tracks the cursor smoothly. If the formula is wrong, the overlay jumps by ~gridSize
 pixels at each snap boundary.
 
-## dragUtil snap algorithm (asymmetric)
+## dragUtil snap algorithm (asymmetric — the root bug)
 
 ```
 snapDx = (lastDx + half < 0)
@@ -16,8 +16,18 @@ snapDx = (lastDx + half < 0)
 ```
 
 Because of ceil vs floor the first snap threshold is **asymmetric**:
-- Positive drag: first snap at +8 px (half a grid unit)
-- Negative drag: first snap at -24 px (1.5 grid units)
+- Positive drag: first snap at +8 px  (half grid unit) ← works correctly (south)
+- Negative drag: first snap at -24 px (1.5 grid units) ← broken (north)
+
+Negative example step-by-step with gridSize=16, half=8:
+  dy=-8:  (-8+8)/16 = 0/16 = 0,    ceil(0) = 0   → no snap yet
+  dy=-16: (-16+8)/16 = -8/16 = -0.5, ceil(-0.5) = 0 → still no snap
+  dy=-24: (-24+8)/16 = -16/16 = -1,  ceil(-1)  = -1 → FIRST snap (at 1.5 grid units!)
+
+**Fix: use Math.floor for ALL values** — this rounds toward −∞ symmetrically:
+  dy=+8:  floor((8+8)/16)  = floor(1)      = 1   → snap ✓
+  dy=-8:  floor((-8+8)/16) = floor(0)      = 0   → no snap yet
+  dy=-9:  floor((-9+8)/16) = floor(-0.0625)= -1  → snap (≈half grid unit) ✓
 
 ## Correct sub-grid formula
 

src/components/pg/nodeResize/dragUtil.ts

@@ -7,6 +7,10 @@ interface DragConfig {
   end?: (dx: number, dy: number, complete: boolean) => void;
 }
 
+function snapUnits(delta: number, gridSize: number): number {
+  return Math.floor((delta + gridSize / 2) / gridSize);
+}
+
 export function drag({ source, gridSize, start, move, snap, end }: DragConfig): () => void {
   let startX = 0;
   let startY = 0;
@@ -15,7 +19,6 @@ export function drag({ source, gridSize, start, move, snap, end }: DragConfig):
   let lastSnapDx = 0;
   let lastSnapDy = 0;
   let activePointerId: number | null = null;
-  const halfGridSize = gridSize / 2;
 
   const onPointerDown = (e: PointerEvent) => {
     e.preventDefault();
@@ -38,12 +41,8 @@ export function drag({ source, gridSize, start, move, snap, end }: DragConfig):
     lastDx = e.clientX - startX;
     lastDy = e.clientY - startY;
     move?.(lastDx, lastDy);
-    const snapDx = lastDx + halfGridSize < 0
-      ? Math.ceil((lastDx + halfGridSize) / gridSize)
-      : Math.floor((lastDx + halfGridSize) / gridSize);
-    const snapDy = lastDy + halfGridSize < 0
-      ? Math.ceil((lastDy + halfGridSize) / gridSize)
-      : Math.floor((lastDy + halfGridSize) / gridSize);
+    const snapDx = snapUnits(lastDx, gridSize);
+    const snapDy = snapUnits(lastDy, gridSize);
     if (snapDx !== lastSnapDx || snapDy !== lastSnapDy) {
       lastSnapDx = snapDx;
       lastSnapDy = snapDy;
@@ -52,40 +51,24 @@ export function drag({ source, gridSize, start, move, snap, end }: DragConfig):
   };
 
   const onPointerUp = (e: PointerEvent) => {
-    const dx = e.clientX + halfGridSize - startX < 0
-      ? Math.ceil((e.clientX + halfGridSize - startX) / gridSize)
-      : Math.floor((e.clientX + halfGridSize - startX) / gridSize);
-    const dy = e.clientY + halfGridSize - startY < 0
-      ? Math.ceil((e.clientY + halfGridSize - startY) / gridSize)
-      : Math.floor((e.clientY + halfGridSize - startY) / gridSize);
+    const dx = snapUnits(e.clientX - startX, gridSize);
+    const dy = snapUnits(e.clientY - startY, gridSize);
     stopDrag();
     end?.(dx, dy, true);
   };
 
   const onPointerCancel = () => {
-    const dx = lastDx < 0
-      ? Math.ceil((lastDx + halfGridSize) / gridSize)
-      : Math.floor((lastDx + halfGridSize) / gridSize);
-    const dy = lastDy < 0
-      ? Math.ceil((lastDy + halfGridSize) / gridSize)
-      : Math.floor((lastDy + halfGridSize) / gridSize);
     stopDrag();
-    end?.(dx, dy, false);
+    end?.(snapUnits(lastDx, gridSize), snapUnits(lastDy, gridSize), false);
   };
 
   const onKeyDown = (e: KeyboardEvent) => {
     if (e.key !== 'Escape') { return; }
-    const dx = lastDx < 0
-      ? Math.ceil((lastDx + halfGridSize) / gridSize)
-      : Math.floor((lastDx + halfGridSize) / gridSize);
-    const dy = lastDy < 0
-      ? Math.ceil((lastDy + halfGridSize) / gridSize)
-      : Math.floor((lastDy + halfGridSize) / gridSize);
     if (activePointerId !== null) {
       source.releasePointerCapture(activePointerId);
     }
     stopDrag();
-    end?.(dx, dy, false);
+    end?.(snapUnits(lastDx, gridSize), snapUnits(lastDy, gridSize), false);
   };
 
   const stopDrag = () => {

src/components/pg/nodeResize/nodeResize.ts

@@ -91,15 +91,10 @@ export default class PgNodeResize extends HTMLElement {
 
   render(_changes: any) {}
 
-  // Mirrors dragUtil's snap: floor for positive deltas, ceil for negative.
-  // Returns pixel residual past the last snap boundary so CSS preview tracks smoothly.
+  // Returns the pixel residual past the last snap boundary (mirrors dragUtil's snapUnits).
   #subGrid(delta: number): number {
     const { gridSize } = this;
-    const half = gridSize / 2;
-    const snapped = delta + half < 0
-      ? Math.ceil((delta + half) / gridSize) * gridSize
-      : Math.floor((delta + half) / gridSize) * gridSize;
-    return delta - snapped;
+    return delta - Math.floor((delta + gridSize / 2) / gridSize) * gridSize;
   }
 
   #compute(