Skip to content

Resize whiteboard shapes, and add system design shapes - #82

Open
naman0r wants to merge 1 commit into
mainfrom
whiteboard-resize-and-shapes
Open

naman0r wants to merge 1 commit into
mainfrom
whiteboard-resize-and-shapes

Conversation

@naman0r

@naman0r naman0r commented Oct 13, 2026

Copy link
Copy Markdown
Owner

What and why

Feedback on the board: a shape could not be resized after it was drawn, and there were too few shapes for a system design diagram.

  • Resize: a selected box shape gets eight handles (corners and sides) on its selection outline. A selected line or arrow gets one handle at each end. A pen stroke stretches its points into the new box. Dragging past the opposite side flips the box. Text keeps its size and has no handles. A resize is one change, so it syncs, records and undoes like a move.
  • Shapes: hexagon, triangle, database (cylinder), cloud and person, all drawn with the same wobble. A person's label sits under the figure. These have no keyboard shortcuts, since the obvious letters are taken.

Replay draws the new shapes through the same renderer.

How this was verified

  • npx eslint src and npx tsc -b in apps/web.
  • Manually against the real API and relay, with Clerk stubbed locally. I drew every new shape, labelled each one, resized a rectangle from the corner (100x60 to 240x100) and from the left side (to 280 wide), dragged an arrow's end, and scaled a pen stroke (120x29 to 140x78).
  • Not checked: touch input, and resizing while a peer moves the same shape (the last write wins, as with moves).

Docs

None needed. docs/architecture.md does not list the tools.

A selected box gets eight handles and a selected line or arrow gets one
at each end; a pen stroke stretches its points into the new box. Text
keeps its size. New shapes: hexagon, triangle, database, cloud and
person, whose label sits under the figure.
@vercel

vercel Bot commented Oct 13, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
tandemcode Ready Ready Preview Oct 13, 2026 3:42am UTC

@coderabbitai

coderabbitai Bot commented Oct 13, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 29 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: ce3ede5c-c35c-4bcf-b5fd-7a5645252210
📥 Commits

Reviewing files that changed from the base of the PR and between ead72aa and 118f3ad.

📒 Files selected for processing (1)
  • apps/web/src/components/Whiteboard.tsx
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

This branch was successfully deployed

1 active deployment
Preview — 118f3ad3 Deployed Oct 13, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant