Skip to content

Add Edit Board mode for drag/resize of boards with explicit width/height#719

Open
mendarb wants to merge 1 commit intotscircuit:mainfrom
mendarb:fix-issue-106-edit-board
Open

Add Edit Board mode for drag/resize of boards with explicit width/height#719
mendarb wants to merge 1 commit intotscircuit:mainfrom
mendarb:fix-issue-106-edit-board

Conversation

@mendarb
Copy link
Copy Markdown

@mendarb mendarb commented Mar 20, 2026

/claim #106

Summary

  • Added in_edit_board_mode state to the global store with "edit_board" as a new edit mode
  • Created EditBoardOverlay component that renders a dashed green border and 8 resize handles around the board when in edit mode
  • Dragging the board body offsets its center position; dragging any edge/corner handle resizes width/height while keeping the opposite edge fixed
  • Added "Edit Board" button to ToolbarOverlay (only shown when the board has explicit width/height, not an outline polygon)
  • Board edits are tracked locally in PCBViewer state and exposed through a new onBoardChanged callback prop
  • Added edit-board.fixture.tsx demo fixture

How it works

  1. Board with explicit width/height (no outline polygon) -> "Edit Board" button appears in toolbar
  2. Click "Edit Board" -> green dashed overlay with 8 handles drawn around the board
  3. Drag center area -> offsets board center (move)
  4. Drag any handle -> resizes width/height while keeping opposite edge fixed
  5. Dimensions label (e.g. "40 x 30 mm") shown below the board during editing

Files changed

  • src/lib/board-editing.ts - Board editing utilities (getEditableBoard, resizeEditableBoard, applyEditableBoard)
  • src/components/EditBoardOverlay.tsx - Overlay component for drag/resize interaction
  • src/global-store.ts - Added in_edit_board_mode state and "edit_board" mode
  • src/components/ToolbarOverlay.tsx - Added "Edit Board" toolbar button
  • src/components/CanvasElementsRenderer.tsx - Wired EditBoardOverlay into the component tree
  • src/PCBViewer.tsx - Added board override state and onBoardChanged prop

Test

  • npx tsc --noEmit - clean
  • npm run build - clean
  • npm run format:check - clean

Generated with Claude Code

…height

When a board has explicit width/height (not an outline polygon), an "Edit Board"
button appears in the toolbar. Clicking it enables a mode where the board can be
dragged to offset its center and resized via 8 edge/corner handles. Board edits
are tracked in local viewer state and exposed through an onBoardChanged callback.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 20, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pcb-viewer Ready Ready Preview, Comment Mar 20, 2026 1:30pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant