Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor has no 'snap to grid' or 'snap to angle' feedback — user drawing a path wants a faint grid overlay or angle snap to 15/30/45 degrees, no visual reference for precise drawing #288

New issue

Closed

opened 2026-10-04 03:43:38 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:43:38 +00:00

Owner

Finding

src/components/editor/types.ts defines SnapSettings (per the snippet earlier):

export interface SnapSettings {
  snapToNodes: boolean;
  snapToGrid: boolean;
  gridSize: number;
  snapToHoop: boolean;
}

snapToGrid is in the type. grep -n 'gridSize\|snapToGrid' src/components/editor/canvasRenderer.ts — let me check if the grid is rendered.

grep -n 'drawGrid' src/components/editor/canvasRenderer.ts returns 0. The grid is in the settings but may not be rendered.

A user with snapToGrid: true, gridSize: 5:

Tries to draw a path
Has no visual reference for where the grid lines are
Has to guess the spacing

The fix is a faint grid overlay that the user can toggle on/off, with line spacing matching the gridSize.

Where

SnapSettings: src/components/editor/types.ts (the type)
canvasRenderer: src/components/editor/canvasRenderer.ts (where the grid would be drawn)
No grid render: grep -n 'drawGrid' src/components/editor/canvasRenderer.ts returns 0

Suggested fix shape

State: add showGrid: boolean to SnapSettings (or as a separate UI state).
Render: in canvasRenderer.ts, when showGrid is true (or snapToGrid is true), draw faint grid lines:

if (snapToGrid) {
  const step = gridSize * scale;
  ctx.strokeStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.lineWidth = 1;
  for (let x = 0; x < canvas.width; x += step) {
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, canvas.height);
    ctx.stroke();
  }
  for (let y = 0; y < canvas.height; y += step) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.stroke();
  }
}

UI toggle: in the editor's toolbar (or settings), a "Show grid" toggle that overrides the snap setting.
Major lines: every 5th grid line is darker for the user's reference.

Severity

Low. The user can use the snap behavior. The visual reference is a polish improvement.

Discovered by

Gap analysis (2026-10-02) of editor snap affordances.

The SnapSettings type is in place; the rendering is missing.
#170 (open) — Editor snap toggles. The settings UI is in place; the grid render is the visual.
Figma/Illustrator have grid overlays; this is a standard editor affordance.

## Finding `src/components/editor/types.ts` defines `SnapSettings` (per the snippet earlier): ```ts export interface SnapSettings { snapToNodes: boolean; snapToGrid: boolean; gridSize: number; snapToHoop: boolean; } ``` `snapToGrid` is in the type. `grep -n 'gridSize\|snapToGrid' src/components/editor/canvasRenderer.ts` — let me check if the grid is rendered. `grep -n 'drawGrid' src/components/editor/canvasRenderer.ts` returns 0. The grid is in the settings but may not be rendered. A user with `snapToGrid: true, gridSize: 5`: - Tries to draw a path - Has no visual reference for where the grid lines are - Has to guess the spacing The fix is a faint grid overlay that the user can toggle on/off, with line spacing matching the `gridSize`. ## Where - SnapSettings: `src/components/editor/types.ts` (the type) - canvasRenderer: `src/components/editor/canvasRenderer.ts` (where the grid would be drawn) - No grid render: `grep -n 'drawGrid' src/components/editor/canvasRenderer.ts` returns 0 ## Suggested fix shape 1. **State**: add `showGrid: boolean` to SnapSettings (or as a separate UI state). 2. **Render**: in `canvasRenderer.ts`, when `showGrid` is true (or `snapToGrid` is true), draw faint grid lines: ```ts if (snapToGrid) { const step = gridSize * scale; ctx.strokeStyle = 'rgba(0, 0, 0, 0.05)'; ctx.lineWidth = 1; for (let x = 0; x < canvas.width; x += step) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); } for (let y = 0; y < canvas.height; y += step) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); } } ``` 3. **UI toggle**: in the editor's toolbar (or settings), a "Show grid" toggle that overrides the snap setting. 4. **Major lines**: every 5th grid line is darker for the user's reference. ## Severity Low. The user can use the snap behavior. The visual reference is a polish improvement. ## Discovered by Gap analysis (2026-10-02) of editor snap affordances. ## Related - The SnapSettings type is in place; the rendering is missing. - #170 (open) — Editor snap toggles. The settings UI is in place; the grid render is the visual. - Figma/Illustrator have grid overlays; this is a standard editor affordance.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:43:38 +00:00

Mark referenced this issue

2026-10-04 03:47:23 +00:00

Editor has no 'snap to angle' for line drawing — user drawing a straight line at exactly 45° or 90° has to estimate the angle, no Shift+drag to constrain to common angles #294

Mark referenced this issue

2026-10-04 03:48:48 +00:00

Editor has no 'snap to path' or 'snap to other path's nodes' — user trying to align a new path to an existing path's node has to estimate, no automatic snap-to-other-path #303

Mark referenced this issue

2026-10-04 03:49:06 +00:00

Editor has no 'show node coordinates' overlay — user wanting to see all node positions at once has to click each one, no at-a-glance coordinate display #305

Mark referenced this issue

2026-10-04 03:52:16 +00:00

Editor has no 'handle size' preference — small handles for fine work, large handles for fast interaction; the editor's node handles are a fixed size #323

Mark referenced this issue

2026-10-04 03:53:22 +00:00

Editor's right panel has no 'wireframe' / 'outline only' preview mode — user wanting to focus on the path geometry (vs the thread color rendering) has no toggle, the canvas always shows the thread color #331

Mark referenced this issue

2026-10-04 03:53:41 +00:00

Editor has no 'smart guides' / 'measurement annotations' during drag — user dragging a path sees no live distance to other paths, no 'this is 2mm from the hoop edge' annotation #334

Mark referenced this issue from a commit

2026-10-04 17:45:05 +00:00

fix(#288): visible snap-grid lines + angle snap (15/45/90°) in editor

Mark closed this issue

2026-10-04 17:45:35 +00:00

Mark commented

2026-10-04 17:45:45 +00:00

Author

Owner

Shipped fix(#288) at 2359263 on origin/main.

Editor now renders the snap grid as faint lines at the user's gridSize (major every 5th line, rgba(0,0,0,0.14) for major / rgba(0,0,0,0.06) for minor), independent of whether snap-to-grid is on. New showGrid toggle in SnapSettings + right panel lets the user see the grid without snapping, or snap with no visual clutter.

Bonus angle snap: angleSnapSteps in SnapSettings + a new rule in applySnap (5th arg fromPoint for the anchor). Three preset chips in the right panel — 15° / 45° / 90° — toggle inclusion in the step list. Distance from anchor is preserved; result rounded to 1/1000mm so the position bar stays readable.

Tests: 5 new drawSnapGrid cases + 7 new applySnap angle-snap cases (no-op when empty / no anchor / nearest step / distance preserved / indicator / wraparound). 7 test fixtures migrated from inline SnapSettings literals to DEFAULT_SNAP_SETTINGS so future interface changes don't cascade.

Shipped fix(#288) at 2359263 on origin/main. Editor now renders the snap grid as faint lines at the user's `gridSize` (major every 5th line, rgba(0,0,0,0.14) for major / rgba(0,0,0,0.06) for minor), independent of whether snap-to-grid is on. New `showGrid` toggle in SnapSettings + right panel lets the user see the grid without snapping, or snap with no visual clutter. Bonus angle snap: `angleSnapSteps` in SnapSettings + a new rule in `applySnap` (5th arg `fromPoint` for the anchor). Three preset chips in the right panel — 15° / 45° / 90° — toggle inclusion in the step list. Distance from anchor is preserved; result rounded to 1/1000mm so the position bar stays readable. Tests: 5 new drawSnapGrid cases + 7 new applySnap angle-snap cases (no-op when empty / no anchor / nearest step / distance preserved / indicator / wraparound). 7 test fixtures migrated from inline SnapSettings literals to DEFAULT_SNAP_SETTINGS so future interface changes don't cascade.

Mark referenced this issue from a commit

2026-10-04 19:07:17 +00:00

fix(#294): draw-path angle snap — wire applySnap into handleCanvasClick + Shift-to-constrain

Mark referenced this issue from a commit

2026-10-04 21:42:50 +00:00

fix(#305): right-panel 'Show Coordinates' toggle draws (x, y) next to each node

Mark referenced this issue

2026-10-04 21:43:01 +00:00

Editor has no 'show node coordinates' overlay — user wanting to see all node positions at once has to click each one, no at-a-glance coordinate display #305