Repository navigation
showcase: a preview of the drawing with a frame for the view (#150) - #205
Merged
Merged
Conversation
tbolis
force-pushed
the
feat/showcase-preview
branch
from
November 2, 2026 07:45
831811d to
156a339
Compare
The Preview section has a small copy of the whole drawing, drawn again after
each change, undo, redo, zoom and clear with toDataURL({ multiplier }). When
the view is zoomed or panned, a frame shows the part which the canvas shows,
from onViewChange. The README has the recipe in "A preview of the drawing".
tbolis
force-pushed
the
feat/showcase-preview
branch
from
November 2, 2026 10:20
156a339 to
fc2459f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Answers #150, a preview or minimap of the canvas, with a recipe and a live example. The library is not changed:
toDataURL()already draws the whole drawing, whatever the zoom and pan of the view.toDataURL({ multiplier })after each change, undo, redo, zoom and clear. When the view is zoomed or panned, a frame on it shows the part which the canvas shows, fromonViewChange.onChange,onObjectAddedandonObjectRemoved(the last two tell of the objects which code adds or removes), and after the zoom, reset and clear buttons, which tell nothing. A canvas which cannot be exported (an image of another site without CORS) has no preview.Checks
yarn format:check,yarn lint,yarn typecheckandyarn buildpass.yarn test: 423 passing and 1 todo (the library is not changed).The showcase, built and served, in headless Chrome with a real mouse and a real two-finger gesture through the DevTools protocol, at a device pixel ratio of 1 and of 2: the preview is empty until the first change; each stroke changes it (the image is the size of the canvas times 0.25); undo goes back to the earlier image; the zoom button changes it and reset brings back the earlier image; clear blanks it. After a pinch to 4.00, the frame is at the position and the size which the view gives (left and top 0.375, width and height 0.25 of the preview), and it is gone after the reset.
Not checked: a physical touch device.
Notes for review
Fixesline of the release PR (Release v1.1.0 #196), as closing keywords do not act on a merge intorelease/1.1.0. It is an answer and an example, not a change of the library, so the issue could also be closed with a pointer to the README section.