From b0eaf4dc104327ed135de6874ff7c6ee5ec0b9b9 Mon Sep 17 00:00:00 2001 From: mikael-lovqvists-claude-agent Date: Fri, 3 Apr 2026 03:23:53 +0000 Subject: [PATCH] Constrain edge midpoint drag to edge normal direction Instead of applying raw 2D delta, project cursor movement onto the outward normal of each edge so the edge can only be pushed/pulled perpendicular to itself. Prevents shearing when dragging a side handle. Co-Authored-By: Claude Sonnet 4.6 --- public/views/grid-setup.mjs | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/public/views/grid-setup.mjs b/public/views/grid-setup.mjs index c120fe1..9c39817 100644 --- a/public/views/grid-setup.mjs +++ b/public/views/grid-setup.mjs @@ -183,8 +183,18 @@ export class Grid_Setup { this.#corners[i] = { x: this.#corners[i].x + dx, y: this.#corners[i].y + dy }; } else { const [a, b] = Grid_Setup.#MIDPOINT_EDGES[this.#drag_idx - 4]; - this.#corners[a] = { x: this.#corners[a].x + dx, y: this.#corners[a].y + dy }; - this.#corners[b] = { x: this.#corners[b].x + dx, y: this.#corners[b].y + dy }; + // Project delta onto the edge's outward normal so the edge can + // only be pushed/pulled perpendicular to itself — never sheared. + const ex = this.#corners[b].x - this.#corners[a].x; + const ey = this.#corners[b].y - this.#corners[a].y; + const len = Math.sqrt(ex*ex + ey*ey); + if (len > 0) { + const nx = -ey / len; + const ny = ex / len; + const proj = dx * nx + dy * ny; + this.#corners[a] = { x: this.#corners[a].x + nx * proj, y: this.#corners[a].y + ny * proj }; + this.#corners[b] = { x: this.#corners[b].x + nx * proj, y: this.#corners[b].y + ny * proj }; + } } this.#drag_prev_img = img_pos; this.#draw();