progress

Author: Templarian

src/components/pg/node/node.ts

@@ -32,8 +32,8 @@ export default class PgNode extends HTMLElement {
     forEach({
       container: this.$items,
       items: this.fields,
-      type: (item) => PgNodeEditorText,
-      create: ($item: PgNodeEditorText, item) => {
+      type: (_item) => PgNodeEditorText,
+      create: ($item: PgNodeEditorText, _item) => {
         this.height += $item.height;
       },
     });
@@ -67,16 +67,16 @@ export default class PgNode extends HTMLElement {
     }
   }
 
-  #handleSelect(e: any) {
+  #handleSelect(_e: any) {
     this.dispatchEvent(new CustomEvent('select', {
       detail: {
         nodeId: `${this.node}`,
       }
     }));
   }
 
-  #resizeElement;
-  #handlePointerOver(e: any) {
+  #resizeElement: PgNodeResize | null = null;
+  #handlePointerOver(_e: any) {
     if (this.#resizeElement) {
       this.#resizeElement.style.visibility = 'visible';
       return;
@@ -93,7 +93,6 @@ export default class PgNode extends HTMLElement {
     ele.minHeight = this.getMinHeight();
     ele.addEventListener('change', (e: any) => {
       const { x, y, width, height } = e.detail;
-      console.log(x, y, width, height);
       this.x = x;
       this.y = y;
       this.width = width;
@@ -102,15 +101,18 @@ export default class PgNode extends HTMLElement {
       ele.y = y;
       ele.width = width;
       ele.height = height;
+      this.dispatchEvent(new CustomEvent('change', { detail: { x, y, width, height } }));
     });
     this.shadowRoot?.appendChild(ele);
     this.#resizeElement = ele;
     this.$node.classList.toggle('resize', true);
   }
 
-  #handlePointerOut(e: any) {
+  #handlePointerOut(_e: any) {
     this.$node.classList.toggle('resize', false);
-    this.#resizeElement.style.visibility = 'hidden';
+    if (this.#resizeElement) {
+      this.#resizeElement.style.visibility = 'hidden';
+    }
   }
 
   select() {

src/components/pg/nodeResize/THINKING.md

@@ -0,0 +1,71 @@
+# Preview Sub-Grid Offset Bug
+
+## The Problem
+
+When `snap` fires it updates the node's x/y/width/height via `emit`. That moves the CSS
+anchor. The preview CSS vars must then represent the **remaining sub-grid offset** so the
+overlay tracks the cursor smoothly. If the formula is wrong, the overlay jumps by ~gridSize
+pixels at each snap boundary.
+
+## dragUtil snap algorithm (asymmetric)
+
+```
+snapDx = (lastDx + half < 0)
+  ? Math.ceil((lastDx + half) / gridSize)   // negative direction: ceil
+  : Math.floor((lastDx + half) / gridSize)  // positive direction: floor
+```
+
+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)
+
+## Correct sub-grid formula
+
+The correct sub-grid residual (pixels past the last snap) must mirror the same algorithm:
+
+```ts
+subGrid(delta) = delta - (
+  delta + half < 0
+    ? Math.ceil((delta + half) / gridSize) * gridSize
+    : Math.floor((delta + half) / gridSize) * gridSize
+)
+```
+
+## Why the existing formulas fail
+
+`delta % gridSize` (used by previewX/Y/Width):
+- delta = -20 → -20 % 16 = -4  (JS truncated modulo)
+- correct: no snap at -20 (threshold is -24), so sub-grid = -20
+- WRONG by 16 px
+
+`((delta + half) % gridSize) - half` (used by previewHeight):
+- delta = 9 → ((17) % 16) - 8 = -7  ✓ (correct, snap fired at +8)
+- delta = -20 → ((-12) % 16) - 8 = -12 - 8 = -20  ✓ (correct, no snap yet)
+- delta = -9 → ((-1) % 16) - 8 = -1 - 8 = -9  
+  - correct: snap fires at -24, so sub-grid = -9  ✓ happens to be right
+
+## Why the west/north handles jump but south mostly does not
+
+For south (hDir=1), dy is positive when the height grows (normal use). The previewHeight
+formula is correct for positive dy. Negative dy (shrinking the south edge) rarely reaches
+the problematic range.
+
+For north (hDir=-1), the previewY/previewWidth/previewX use `% gridSize` which is
+wrong in the range (-24, -16) for dx/dy values.
+
+## Critical insight about width/x coupling
+
+For a west handle (wDir=-1), dx is the raw pointer delta:
+- x sub-grid  = subGrid(dx)
+- width sub-grid = -subGrid(dx)  ← NOT subGrid(-dx)
+
+`subGrid` is NOT an odd function (asymmetric snap means subGrid(-dx) ≠ -subGrid(dx)).
+So calling previewWidth(-dx) with an internal formula on -dx is wrong.
+
+## Fix
+
+Compute `sgX = subGrid(dx)` and `sgY = subGrid(dy)` once per `move` event, then:
+- delta-x   = sgX          (when wDir == -1)
+- delta-width = wDir * sgX  (when wDir != 0)
+- delta-y   = sgY          (when hDir == -1)
+- delta-height = hDir * sgY (when hDir != 0)

src/components/pg/nodeResize/nodeResize.css

@@ -177,6 +177,6 @@
 [part=east].stop::before,
 [part=southWest].stop::before,
 [part=south].stop::before,
-[part=southWest].stop::before {
+[part=southEast].stop::before {
   border-color: red;
 }

src/components/pg/nodeResize/nodeResize.ts

@@ -1,4 +1,4 @@
-import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+import { Component, Prop, Part } from '@pictogrammers/element';
 
 import template from './nodeResize.html';
 import style from './nodeResize.css';
@@ -29,121 +29,96 @@ export default class PgNodeResize extends HTMLElement {
   @Part() $southEast: HTMLDivElement;
 
   connectedCallback() {
-    let startX = 0,
-      startY = 0,
-      startWidth = 12,
-      startHeight = 3;
+    let startX = 0, startY = 0, startWidth = 0, startHeight = 0;
+
     const start = () => {
       startX = this.x;
       startY = this.y;
       startWidth = this.width;
       startHeight = this.height;
       this.classList.toggle('preview', true);
     };
-    drag({
-      source: this.$northWest,
-      gridSize: this.gridSize,
-      start,
-      move: (dx, dy) => {
-        this.previewX(dx);
-        this.previewY(dy);
-        this.previewWidth(dx * -1);
-        this.previewHeight(dy * -1);
-      },
-      snap: (dx, dy) => {
-        this.emit(
-          startX + dx,
-          startY + dy,
-          startWidth + dx * -1,
-          startHeight + dy * -1
-        );
-      },
-      end: (dx, dy, complete) => {
-        if (complete) {
-          this.emit(
-            startX + dx,
-            startY + dy,
-            startWidth + dx * -1,
-            startHeight + dy * -1
-          );
-        } else {
-          this.emit(startX, startY, startWidth, startHeight);
-        }
-        this.classList.toggle('preview', false);
-      },
-    });
-    drag({
-      source: this.$south,
-      gridSize: this.gridSize,
-      start,
-      move: (dx, dy) => {
-        console.log('dy', dy);
-        if (startHeight === this.minHeight) {
-          this.$south.classList.toggle('stop', dy < 0);
-        }
-        this.previewHeight(dy);
-      },
-      snap: (dx, dy) => {
-        if (startHeight + dy > this.minHeight) {
-          this.emit(startX, startY, startWidth, startHeight + dy);
-        } else {
-          this.emit(startX, startY, startWidth, this.minHeight);
-
-        }
-      },
-      end: (dx, dy, complete) => {
-        if (complete) {
-          this.emit(
-            startX,
-            startY,
-            startWidth,
-            startHeight + dy
-          );
-        } else {
-          this.emit(startX, startY, startWidth, startHeight);
-        }
-        this.$south.classList.toggle('stop', false);
-        this.classList.toggle('preview', false);
-        this.previewHeight(0);
-      },
-    });
-  }
 
-  render(changes: any) {
+    // wDir: -1 = west edge (x + width change), 0 = no width, 1 = east edge (width only)
+    // hDir: -1 = north edge (y + height change), 0 = no height, 1 = south edge (height only)
+    const addHandle = (source: HTMLElement, wDir: -1 | 0 | 1, hDir: -1 | 0 | 1) => {
+      drag({
+        source,
+        gridSize: this.gridSize,
+        start,
+        move: (dx, dy) => {
+          // Sub-grid residual must mirror dragUtil's asymmetric floor/ceil snap algorithm.
+          // For positive deltas: floor; for negative: ceil. This avoids a ~gridSize jump
+          // each time snap fires and the anchor moves.
+          const sgX = this.#subGrid(dx);
+          const sgY = this.#subGrid(dy);
+          this.style.setProperty('--node-resize-delta-x',      `${wDir === -1 ? sgX : 0}px`);
+          this.style.setProperty('--node-resize-delta-width',  `${wDir !== 0 ? wDir * sgX : 0}px`);
+          this.style.setProperty('--node-resize-delta-y',      `${hDir === -1 ? sgY : 0}px`);
+          this.style.setProperty('--node-resize-delta-height', `${hDir !== 0 ? hDir * sgY : 0}px`);
+          const atMinW = wDir !== 0 && startWidth + wDir * dx < this.minWidth;
+          const atMinH = hDir !== 0 && startHeight + hDir * dy < this.minHeight;
+          source.classList.toggle('stop', atMinW || atMinH);
+        },
+        snap: (dx, dy) => {
+          this.emit(...this.#compute(startX, startY, startWidth, startHeight, dx, dy, wDir, hDir));
+        },
+        end: (dx, dy, complete) => {
+          if (complete) {
+            this.emit(...this.#compute(startX, startY, startWidth, startHeight, dx, dy, wDir, hDir));
+          } else {
+            this.emit(startX, startY, startWidth, startHeight);
+          }
+          source.classList.toggle('stop', false);
+          this.classList.toggle('preview', false);
+          this.style.setProperty('--node-resize-delta-x', '0px');
+          this.style.setProperty('--node-resize-delta-y', '0px');
+          this.style.setProperty('--node-resize-delta-width', '0px');
+          this.style.setProperty('--node-resize-delta-height', '0px');
+        },
+      });
+    };
 
+    addHandle(this.$northWest, -1, -1);
+    addHandle(this.$north,      0, -1);
+    addHandle(this.$northEast,  1, -1);
+    addHandle(this.$west,      -1,  0);
+    addHandle(this.$east,       1,  0);
+    addHandle(this.$southWest, -1,  1);
+    addHandle(this.$south,      0,  1);
+    addHandle(this.$southEast,  1,  1);
   }
 
-  /**
-   * Emits delta size changes or 0 for no change.
-   * @param x Delta
-   * @param y Delta
-   * @param width Delta
-   * @param height Delta
-   */
-  emit(x: number, y: number, width: number, height: number) {
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: {
-        x,
-        y,
-        width,
-        height,
-      }
-    }));
-  }
-
-  previewX(x: number) {
-    this.style.setProperty('--node-resize-delta-x', `${x % this.gridSize}px`);
-  }
+  render(_changes: any) {}
 
-  previewY(y: number) {
-    this.style.setProperty('--node-resize-delta-y', `${y % this.gridSize}px`);
+  // Mirrors dragUtil's snap: floor for positive deltas, ceil for negative.
+  // Returns pixel residual past the last snap boundary so CSS preview tracks smoothly.
+  #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;
   }
 
-  previewWidth(width: number) {
-    this.style.setProperty('--node-resize-delta-width', `${width % this.gridSize}px`);
+  #compute(
+    startX: number, startY: number,
+    startWidth: number, startHeight: number,
+    dx: number, dy: number,
+    wDir: -1 | 0 | 1, hDir: -1 | 0 | 1
+  ): [number, number, number, number] {
+    const newWidth  = wDir !== 0 ? Math.max(startWidth  + wDir * dx, this.minWidth)  : startWidth;
+    const newHeight = hDir !== 0 ? Math.max(startHeight + hDir * dy, this.minHeight) : startHeight;
+    // West/north edges: shift x/y to keep the opposite edge stationary
+    const newX = wDir === -1 ? startX + (startWidth  - newWidth)  : startX;
+    const newY = hDir === -1 ? startY + (startHeight - newHeight) : startY;
+    return [newX, newY, newWidth, newHeight];
   }
 
-  previewHeight(height: number) {
-    this.style.setProperty('--node-resize-delta-height', `${((height + (this.gridSize / 2)) % this.gridSize) - (this.gridSize / 2)}px`);
+  emit(x: number, y: number, width: number, height: number) {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { x, y, width, height },
+    }));
   }
 }

src/components/pg/nodes/nodes.ts

@@ -172,6 +172,7 @@ export default class PgNodes extends HTMLElement {
         connector.setOutputPin(`${item.node}`, 'nodes', 16);
         $item.addEventListener('registernode', this.#registerNode.bind(this));
         $item.addEventListener('select', this.#handleSelect.bind(this));
+        $item.addEventListener('change', this.#handleChange.bind(this));
       },
     });
   }
@@ -213,6 +214,10 @@ export default class PgNodes extends HTMLElement {
     console.log('select', nodeId);
   }
 
+  #handleChange(e: any) {
+    this.#updatePins(String((e.target as any).node));
+  }
+
   #deleteNode(nodeId: string) {
     const index = this.items.findIndex(x => String(x.node) === nodeId);
     if (index > 0) {