Skip to content

Magic pen: Option-drag over a board quotes that region in the chat - #198

Draft
Jing-yilin wants to merge 5 commits into
jump-tofrom
magic-pen
Draft

Jing-yilin wants to merge 5 commits into
jump-tofrom
magic-pen

Conversation

@Jing-yilin

@Jing-yilin Jing-yilin commented Sep 27, 2026 •

Copy link
Copy Markdown
Contributor

Stacked on #197 (jump-to).

Tap Option (press and release, nothing else between) and the pointer becomes a pen. Drag across a board to mark a region; that part of the board goes to the chat as a quote, and the pointer is itself again. Escape, a second tap, or a click off a board puts the pen down without one. Option-drag still copies a board and Option with another key is still that shortcut, since only a lone tap counts.

  • Picture: the region cut from the server's drawing of the board (/__sp/shoot). The crop is sent as fractions of the board, because the drawing is at the display's pixel ratio.
  • Caption: the one the agent gets, e.g. paint-tasks-flow/04f-note-templates.html at 927,665 130x43: span "取消", span "保存". It names the board, the region in board pixels, and the outermost elements wholly inside it (or else the element that holds it). These are found by laying the board's HTML out offscreen at its own size, since the canvas's frame is sandboxed. Capped at the server's 200 characters.

While the pen is up, a layer over the canvas takes the drag, so tldraw never sees it. The drag is held to the board it started on.

Only on a local canvas (local()), as the other chat controls are.

Tested on an isolated dev server in a browser: the cursor, the dashed region, the tile in the chat, and the crop content (2× crop of the 取消/保存 buttons). tsc -b, oxlint and bun run test (189 passed) are clean.

Also here, at the user's request: a second double-click on the board a double-click zoomed to now zooms out to the whole page (zoomToFit), instead of putting back the view from before the first.

And a Colour submenu in the canvas's right-click menu, beside Background: tldraw's palette, each with its dot as the current theme draws it, for any selected shape that takes a colour and is not locked (an arrow, a line, a note). It goes through setStyleForSelectedShapes, which leaves a locked board in the same selection alone, and is saved to canvas.json like any other edit.

🤖 Generated with Claude Code

Jing-yilin and others added 2 commits September 27, 2026 06:33
…n the chat

Held over the canvas, Option makes the pointer a pen. A drag across a board
marks a region, and that part of the board goes to the chat as a picture,
captioned with the board, where on it, and the elements there.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 27, 2026 •

Copy link
Copy Markdown

Deploying super-prototyping with  Cloudflare Pages  Cloudflare Pages

Latest commit: b712489
Status: ✅  Deploy successful!
Preview URL: https://7eb303f2.super-prototyping.pages.dev
Branch Preview URL: https://magic-pen.super-prototyping.pages.dev

View logs

Jing-yilin and others added 3 commits September 27, 2026 06:41
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… not the last view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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