* [export] rewrite - init
* restore elements + filter deleted in export API (restores #11470 behavior)
* fix snaps
* port export callers added on master to the new API + snaps
- renderOverrides (#12100), sticky notes (#12064) and arrow-label hole
(#10947) tests called the old positional exportToSvg/exportToCanvas
- embedded-scene snapshots gain master's new element fields (created,
baseFontSize, labelPosition); decoded payloads match master's
Claude Opus 5.5 (xhigh)
* restore elements in embedded scene + json clipboard export (restores #12060 behavior)
- master's #12060 made every public export entry point restore its input
(legacy elements reach lower-level code with `created: null`), incl. the
PNG metadata embed and the json clipboard copy in the removed
@excalidraw/utils wrappers
- SVG embed now serializes the restored, non-deleted elements (same as
master's utils path), PNG embed serializes restoreElements(data.elements)
and json clipboard copies the non-deleted restored elements
- port #12060's utils tests to the new API, observing renderers/serializer
instead of the (now identical) scene export functions
Claude Opus 5.5 (xhigh)
* make config.canvasBackgroundColor the single export background knob
- background resolved once in configExportDimension; exportToSvg no longer
reads appState.exportBackground (now omitted from ExportSceneData's
appState type), and honors `canvasBackgroundColor: false`
- outline arrowheads (circle/triangle/diamond_outline, cardinality_zero_*)
are filled with the resolved background color, also when the background
isn't painted (as on master) — the canvas path filled them transparent,
showing the arrow's shaft through them; SVG ignored the config color
- JPEG: `canvasBackgroundColor: false` falls back to the default background
(+ warning) instead of rendering black; no more warning for the default
- callers (exportCanvas, ImageExportDialog, library/chart/publish previews,
AI) pass the background via config only
Claude Opus 5.5 (xhigh)
* resolve export theme before creating frame labels
- frame labels were colored by appState.exportWithDarkMode, ignoring
config.theme (export dialog's dark toggle), and in dark exports the
dark-theme label color got dark-filtered again by the renderer
(#7a7a7a -> #848484)
- theme is now resolved once in configExportDimension; dark labels are
pre-reverted so they render with the editor's frame name color
Claude Opus 5.5 (xhigh)
* drop appState.exportWithDarkMode theme fallback in export
- `config.theme` is the only theme input (defaults to light); the type
already omitted `exportWithDarkMode` from `data.appState`
- callers that relied on the fallback (PublishLibrary item preview, AI
frame export) pass `theme` explicitly, keeping their behavior
Claude Opus 5.5 (xhigh)
* exportToClipboard: don't restore appState before exportToSvg (already restored there)
Claude Opus 5.5 (xhigh)
* remove unused getExportSize, type getCanvasSize's [x, y, width, height] (not Bounds)
Claude Opus 5.5 (xhigh)
* fix typos in export comments/JSDoc
Claude Opus 5.5 (xhigh)
* port with-script-in-browser example to the new export API
- exportToSvg/Blob/Canvas/Clipboard take `{ data, config }`; theme via
`config.theme`, padding 10 kept explicit (new default is 0)
- dropped the no-op `width`/`height` appState overrides from the SVG export
Claude Opus 5.5 (xhigh)
* call getDimensions once, ignore it when widthOrHeight is set
- with an explicit `fit: "contain"`, getDimensions ran twice (the second
time on its own output); it now supplies width/height (+ scale) once,
and `contain` scales the content into that frame
- getDimensions + widthOrHeight both applied; widthOrHeight now wins (with
a warning), like width/height/maxWidthOrHeight already did
- `fit: "none"` (the E+ export server path) renders identically
Claude Opus 5.5 (xhigh)
* type the export size options as mutually exclusive
- `width`/`height`, `maxWidthOrHeight`, `widthOrHeight` and `getDimensions`
are now a union where the unused options are `?: never`, so combining
them is a type error (runtime still ignores/warns for JS callers)
- the `never` keys are remapped over `keyof`, so every option keeps its
JSDoc in completions & hovers (verified via the TS language service)
Claude Opus 5.5 (xhigh)
* replace getDimensions with a `scale` function, round the canvas size
- `config.scale` also accepts `(width, height) => number`, called with the
export dimensions at scale 1 (padding included) — covers content-dependent
scaling (e.g. E+'s pixel budgets) without the getDimensions round trip
- remove `getDimensions`: its returned `scale` replaced `config.scale` and
multiplied the returned size, so callers thinking in output pixels had
to divide it back out
- exportToCanvas rounds the canvas size instead of letting the canvas
truncate it (float noise like 28.999999999999996 lost a pixel); half
pixels now round up (frame label area 20.5px, mermaid preview 89.5px)
Claude Opus 5.5 (xhigh)
* align fit/padding/position export docs with the code
- `fit` defaults to "contain" when `width`/`height` is set, otherwise
"none" (the doc said the opposite); dropped the unimplemented
"x/y force none" claim
- padding is always subtracted for `maxWidthOrHeight`/`widthOrHeight`
(they ignore `fit`), not added
- `position` values are "center" | "topLeft" (doc listed "none")
Claude Opus 5.5 (xhigh)
* derive a missing export width/height from the aspect ratio
- with `fit: "contain"` (the default when a size is given), passing only
`width` or `height` now derives the other from the content's aspect
ratio, as documented — it defaulted to the content's unscaled size,
e.g. `{ height: 50 }` of 200x100 content gave a 200x50 canvas with
60x30 content in wide empty bands (now 80x50 with padding 10)
- with `fit: "none"` the missing side stays the content extent
Claude Opus 5.5 (xhigh)
* default export `fit` to "none" when x/y is set
- `{ x, y, width, height }` was scaled to fit with `x`/`y` silently
ignored (`fit` defaulted to "contain" whenever a size was given); an
explicit region now crops by default, `fit: "contain"` still opts in
(and ignores `x`/`y`, as now documented)
Claude Opus 5.5 (xhigh)
* ignore export x/y when the content is scaled to fit
- with `fit: "contain"`, `maxWidthOrHeight` or `widthOrHeight`, `x`/`y`
shifted the fitted content by a mix of scene units and pixels; they're
now dropped with a warning, which the previous commit already
documented (its "ignored" claim was based on a coincidental probe)
Claude Opus 5.5 (xhigh)
* pad an export x/y region on all sides
- with `position: "center"` (the default), the centering adjustment also
ran on axes pinned by `x`/`y`, shifting the region by the padding: the
canvas started exactly at `x`/`y` with all padding on the right/bottom
(`position: "topLeft"` padded all sides); `position` now only applies to
unpinned axes, as documented
Claude Opus 5.5 (xhigh)
* consolidate exportToCanvas/Blob/Svg into exportScene({ type, data, config })
- `type: "canvas" | "png" | "jpeg" | "svg"`, return type per `type`
(overloads, plus a union overload for dynamic callers); per-type options
are type-checked: `quality` only for jpeg, `embedScene` for png/svg,
`renderEmbeddables`/`skipInliningFonts`/`reuseImages` for svg
- the format replaces `mimeType` (and its "image/jpg" typo handling)
- `appState.exportEmbedScene` -> `config.embedScene` (no longer read
from `data.appState`); `data.files` is optional
- `config.createCanvas` -> `config.environment.createCanvas` (where
#11997's render environment and richtext's text metrics will go)
- exportToCanvas/Blob/Svg are no longer exported (no aliases);
exportToClipboard stays, routed through exportScene
- callers, the with-script-in-browser example and tests ported
Claude Opus 5.5 (xhigh)
* export: take only scene settings from data.appState, frameRendering -> config.frames
- `data.appState` is typed as (and stripped at runtime to) the scene
settings a .excalidraw file stores; the renderer state is built from
those + defaults, so editor state passed in (a live AppState: open
dialog, cropping, frame highlight…) can't affect the output. It only
supplies the default background and what `embedScene` embeds
- `appState.frameRendering` -> `config.frames: { name, outline, clip }`
- editor callers translate their export settings via one internal
`getExportConfigFromAppState`; `exportCanvas` drops its redundant
exportBackground/viewBackgroundColor options
- fixes the editor's SVG export ignoring `exportScale` (the branch's
exportCanvas SVG path had dropped it; master passed it)
Claude Opus 5.5 (xhigh)
* type export positioning options as width/height-only
- `fit`, `position`, `x`, `y`, `origin` move into the size-option union's
`width`/`height` member, so combining them with `maxWidthOrHeight` /
`widthOrHeight` (which ignore them) is a type error; runtime unchanged
(still ignores/warns for JS callers)
- docs stay visible in completions (same `keyof` remap as the size options)
Claude Opus 5.5 (xhigh)
* move export `loadFonts` into `config.environment`
- font loading is a host capability, next to `createCanvas` (svg gets
`environment: { loadFonts }` only, as it creates no canvas)
Claude Opus 5.5 (xhigh)
* changelog: export API (exportScene, config, migration table)
Claude Opus 5.5 (xhigh)
* export: default padding back to 10, canvas at least 1px
- export bounds are geometric (no stroke width), so padding 0 cut half
of the strokes on the content's edge and made flat content (a line)
zero-height — the library/chart/publish previews, which inherited
master's default of 10, rendered blank thumbnails for lines
- canvas dimensions never go below 1px (a 0-sized canvas can't be
encoded); SVG snapshot sizes are back to master's
Claude Opus 5.5 (xhigh)
* export: clamp padding against the fitted size, before deriving from it
- the padding clamp used the content's unpadded size, so flat content (a
horizontal line) lost its padding with maxWidthOrHeight/widthOrHeight
(`{ padding: 10, maxWidthOrHeight: 400 }` → 200x0); it now only
considers the target being fitted into
- a missing width/height was derived before clamping
(`{ height: 10, padding: 10 }` → 0x10, SVG viewBox NaN/Infinity)
- a zero-extent content axis no longer yields a NaN scale under contain
Claude Opus 5.5 (xhigh)
* export: clip frame exports to the frame
- frame clipping was off for exportingFrame (to avoid the rounded
per-element clip), relying on the canvas/SVG edge — which only crops
when the export is exactly the frame; a larger export (size options)
painted children and overlapping elements into the margins, and SVG
frame exports had stopped clipping (master clipped them)
- everything drawn is now clipped to the frame with square corners: a
canvas clip after the background (`renderConfig.clipToFrame`), and an
SVG group with the frame's clip path; the background isn't clipped
Claude Opus 5.5 (xhigh)
* changelog: fill in PR numbers for the placeholder links
Claude Opus 5.5 (xhigh)
* fix(editor): detect line height from the migrated font props on restore
The text branch of `restoreElement` parses the legacy `font` prop into local
`fontSize` and `fontFamily`, but line-height detection kept reading
`element.fontSize` and `element.fontFamily`. A diagram old enough to carry
`font` has neither, so `detectLineHeight` divided by `undefined` and the
element was restored with `lineHeight: NaN`. A non-numeric `height` produced
the same result.
Move the detection into `restoreLineHeight`, pass it the already-migrated
values, and fall back to the font family's fixed line height when the
detected value isn't a usable number.
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Mahiro Hirakawa <mahirohirakawa@glovrex.com>
* fix(editor): a frame snapped to an element's edges takes it in
A new or resized frame takes the elements (and groups) within it by their
outlines (not counting the stroke), to a hair beyond its edges, which
snapping leaves them at.
Claude Opus 5.5 (1M context), effort: medium
* fix(editor): a frame always clips its children
As in SVG exports — a child inside the frame may still reach out of it with
its stroke — without checking geometry, but for children being dragged,
which are clipped only while still in it, as their drop decides. The
outline check remains for elements dragged into a frame.
Claude Opus 5.5 (1M context), effort: medium
* fix(editor): cutting a frame takes its children along
Unlike deleting it, which leaves them: they're on the clipboard with the
frame, so pasting it back would duplicate them.
Claude Opus 5.5 (1M context), effort: medium
* fix(editor): keep the text selected along with its container after unbinding
Claude Opus 5.5 (1M context), effort: medium
* feat(editor): `w` wraps or unwraps the selection
- a text and an empty container: binds the text
- texts (with any labeled containers): wraps each text in a container
- labeled containers: unwraps the texts and removes the containers,
moving their arrows onto the texts; the next `w` on the untouched
selection brings the same containers back where the texts are now
- a frame with its children, or all of a frame's children: removes the frame
- anything else without a frame: wraps it in a frame
"Wrap selection in frame" frames an image (and what lies on it) edge to
edge, and removes the frame when all of its children are selected.
Claude Opus 5.5 (1M context), effort: medium
* fix(editor): unwrapping an arrow drops its point editor
The selection unwrapping (and rewrapping, and removing a frame) leaves is
resolved with its line editor, so a deleted arrow's editor doesn't linger.
Claude Opus 5.5 (1M context), effort: medium
* fix(editor): rewrapping a note keeps the label's font size and color
A font size picked while the label was unwrapped becomes its base size, and
the note takes the label's ink (shared with binding via `getStickyNoteInk`).
Claude Opus 5.5 (1M context), effort: medium
* fix(editor): resizing an unwrapped text doesn't move its rewrapped container
A font size change keeps the text's alignment edge and middle in place, so
the move is measured there rather than at the top left.
Claude Opus 5.5 (1M context), effort: medium
* fix(editor): binding, unbinding and framing resolve the arrow point editor
Binding text to an arrow selects it with its point editor; wrapping a lone
arrow in a frame, or unbinding an arrow's label (selecting both), drops it.
Claude Opus 5.5 (1M context), effort: medium
* feat(editor): wrapping a text draws a default rectangle in the text's color
Not the current item's style — a wrapped text is a label, and the rectangle
matches it.
Claude Opus 5.5 (1M context), effort: medium
* feat(editor): unbinding keeps the text as it rendered, at a fixed width
The freed text keeps its wrapping, width and position (not auto-resizing);
rewrapping it restores auto-resize. A fixed-width text keeps its top left
through font size changes, so a rewrapped container measures the text's
move there.
Claude Opus 5.5 (1M context), effort: medium
Text scaled by the height alone, so a corner dragged sideways didn't follow
the cursor; it now scales as resizing keeping the aspect ratio does (which
text always does), by the axis that grows most.
Claude Opus 5.5 (1M), xhigh effort
* fix(editor): shift in the crop editor: shift-click keeps it open, shift-drag moves the image along one axis
- shift-clicking the image being cropped no longer toggles it out of the
selection (which ended cropping)
- dragging the image within its crop follows the drag offset, axis-locked
with shift as dragging elements is, applied by its change since the
previous pointer move (pointerDownState.drag.lastOffset) so the image
still moves back right away after being dragged past its edge
- drops App.previousPointerMoveCoords, which only the crop drag used
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): alt-drag a crop handle to crop from the center
- cropElementFromCenter crops the opposite side by as much as the dragged
one, keeping the element's center, as far as the image reaches on the
nearer side; with shift, keeping the aspect ratio
- no alt drag threshold in the crop editor: alt-clicks don't cycle the
selection there
Claude Opus 5.5 (1M), xhigh effort
* fix(editor): clicking a crop handle no longer leaves the crop editor
A press on a crop handle hits no element, so a click on one without a move
in between counted as a click outside the image.
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): double-click a crop handle to uncrop its sides
- in the crop editor, double-clicking a side's handle uncrops that side, a
corner's its two sides, as dragging the handle out as far as the image
reaches does (uncropElementSides)
- with alt, the opposite side(s) too, so alt on a corner uncrops it all;
alt double-clicks aren't ignored in the crop editor, which doesn't cycle
the selection
Claude Opus 5.5 (1M), xhigh effort
* refactor(element): uncrop and crop from the center through one bounds helper
- cropElementToBounds crops the image to bounds relative to the element
(rotated and flipped with it); uncropElementSides and cropElementFromCenter
only compute those bounds
- uncropElementSides no longer drives cropElement with a pointer past the
image's edge, copying the crop it mutates, nor recurses for the mirrored
side
- maybeUncropSides takes the selected image, and the pointer type from
appState.lastPointerDownWith
Claude Opus 5.5 (1M), xhigh effort
* fix(editor): arrows bound to an image follow the sides uncropped by a double-click
Claude Opus 5.5 (1M), xhigh effort
* fix(editor): crop from the drag's start, as resizing does, so alt and shift apply mid-drag
- maybeHandleCrop crops the image as it was at pointer down
(pointerDownState.originalElements) rather than as of the previous pointer
move, and maybeHandleResize crops in the crop editor, so pressing or
releasing alt or shift mid-drag re-crops right away, as resizing does
- cropElement no longer mutates the crop of the element it's given (which is
now the drag's start state)
Claude Opus 5.5 (1M), xhigh effort
* fix(editor): no invisible rotation handle in the crop editor
The crop editor draws no rotation handle, but pressing where it would be hit
it, and dragging it cropped the image ("rotation" includes "n"). A press
there is now one outside the image, which leaves the editor.
Claude Opus 5.5 (1M), xhigh effort
* refactor(element): crop an image as resizing it would resize it
- cropElement sizes the crop from the pointer as resizing does
(getNextSingleWidthAndHeightFromPointer, from the center too), keeps it
within the image from what stays put (the opposite side, or the center),
and crops through cropElementToBounds; it replaces the per-handle cases,
recomputeOrigin and cropElementFromCenter
- options as resizing's: { shouldMaintainAspectRatio, shouldResizeFromCenter }
rather than a width aspect ratio (the element's, which is the drag's start)
- keeping the aspect ratio, a corner crops by the axis it grows most,
relatively, as resizing does (rather than by pixels), and an axis dragged
past what stays put has the minimal size rather than flipping
- an image already smaller than the minimal size crops no smaller, rather
than jumping to it
Claude Opus 5.5 (1M), xhigh effort
* fix(element): the image no longer shifts by a pixel while cropping it
The crop editor drew the cropped image from its own bitmap, snapped to whole
pixels by its own corner, over the faded uncropped image's: as the corner
moved by fractions of a pixel (cropping from the center, or keeping the
aspect ratio along a side), the image within the crop shifted by a pixel
against the faded rest. Within the crop, it now draws the uncropped image's
bitmap at full opacity, clipped to the crop.
Claude Opus 5.5 (1M), xhigh effort
* refactor(editor): add AppSelection (app.selection) to select, add to, remove from and clear the selection
- select(element) for click-select, the alt-click cycle and the context menu;
add(element) for the selection tool and the lasso's touch select (was a
near-copy); remove(element) for shift-click; clear() replaces
App.deselectElements and three inline copies
- isASelectedElement / isHittingCommonBoundingBoxOfSelectedElements move from
the selection tool
- select() drops a stale line editor of a no longer selected arrow; the
context menu no longer spreads all of this.state into its setState
- tests for the selection's frame, link selector and line editor rules
Claude Opus 5.5 (1M), xhigh effort
* refactor(editor): make the app.selection API generic over elements or ids, one or many
- select / add / remove take elements or ids, one or many (missing and
deleted ones skipped)
- their rules become pure functions in App.selection.ts, for callers that
need the next selection state rather than a setState (actions,
duplication): getSelectionStateForElements (moved from @excalidraw/element,
now keeping the current line editor), getSelectionStateAddingElements,
getSelectionStateRemovingElements — one pass over the elements however
many are added or removed
- remove() recomputes selectedGroupIds (it put element ids into it and lost
the other selected groups' flags), and leaves group editing once nothing
is selected
- the link popup on adding an element is the pointer's, not add()'s
Claude Opus 5.5 (1M), xhigh effort
* refactor(editor): move selectGroupsForSelectedElements from @excalidraw/element into App.selection.ts
- editor state (selected group ids, the edited group), used by the editor
only; moved as is
- also ends the groups.ts <-> selection.ts import cycle in @excalidraw/element
Claude Opus 5.5 (1M), xhigh effort
* refactor(editor): move dragging the selection and box selection out of App into AppSelectionTool
- handleSelectionDragOnPointerMove: dragging the selection (or the image
within its crop), alt-drag duplicating past the threshold
- handleBoxSelectionOnPointerMove: box selection (and of the line editor's
points)
- handleSelectionDragOnPointerUp: frame membership of the dragged selection
- pure moves, verified mechanically
- tests for shift-dragging along one axis and moving the image within its
crop (both untested through the pointer)
Claude Opus 5.5 (1M), xhigh effort
* refactor(editor): one check for the selection's transform handle under the pointer
- selectionTool.getTransformHandleAt() replaces the two copies in the hover
cursor and on pointer down (line editor, elbow arrows, two-point lines,
mobile lines, hovered line points; a lone element's or the selection's
common bounds)
- pointer down now also ignores the handles in the element link selector,
as the hover cursor did
- test for the resize cursor over the handles (untested)
Claude Opus 5.5 (1M), xhigh effort
* fix(editor): app.selection shows the link popup of what it selects
- select / add / remove show the link popup of a lone selected element with
a link (or an embeddable) and hide it otherwise; clear hides it — it was
left as is, so select() showed it only if a previous selection had
- the link editor stays open when its element is selected again
- the pointer and lasso call sites no longer set it themselves
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): app.selection ends what hangs on the deselected elements and skips locked ones
- cropping ends unless the cropped image stays the selection, and an active
embed is deactivated once deselected (the line editor already ended once
its line is deselected)
- select / add skip locked elements, unless includeLocked — which the
context menu passes, to offer unlocking them
- captureUpdate option, as updateScene's, to record the change for undo
- deep option on select (the elements themselves, editing their shared
group), which Ctrl+click now goes through
- text editing isn't ended here: the editor ends itself on blur, and
submitting it mid pointer event would commit half the event's state
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): app.selection ends text editing, and add / remove / clear always end cropping
- select / add of anything but the edited text (or its container) submit
the text editor — after the current event (it submits with a flushSync),
and only if that editing session is still open; clear / remove leave it
(starting text editing clears the selection)
- add / remove / clear end cropping; select keeps it only when selecting the
cropped image again (a click inside it in the crop editor)
Claude Opus 5.5 (1M), xhigh effort
* fix(editor): app.selection derives the line editor from the final selection, and frame / deep fixes
- the line editor is set from the selection once groups are expanded: an
arrow selected with its group (e.g. by alt-click cycling) gets none, so
dragging from its point moves the group rather than reshaping the arrow;
add() sets it too (adding a lone arrow left Edit / Cmd+Enter throwing)
- children of frames selected through the groups of the selected (or added)
elements are left out, also ones selected in the same call — and adding
within an edited group no longer deselects as if the edited group's frames
were selected
- deep selection never expands groups (it did for elements not sharing one)
- a click-selected elbow arrow now gets its line editor on pointerdown, so
that click's pointerup normalizes a hand-built route one gesture earlier
Claude Opus 5.5 (1M), xhigh effort
* feat(packages/excalidraw): excalidrawAPI.selection
- app.selection on the imperative API — select / add / remove / clear,
taking elements or ids, one or many, with the deep / includeLocked /
captureUpdate options; the type exposes only those four
- they're arrow properties, so they keep `this` when taken off the object
- changelog entry
Claude Opus 5.5 (1M), xhigh effort
- Drive's player has no postMessage API (unlike YouTube/Vimeo), but its
/preview page honors `autoplay=1`, so the first activation reloads the
embed with it: a single click plays the video in view mode
- reloaded via `contentWindow.location.replace` so it adds no history
entry, and only once per iframe so re-activating doesn't restart it
Claude Opus 5.5 (1M), xhigh effort
- the text editor's window pointerdown listener was added in capture mode
but removed without it, so every past editing session kept panning too:
the pan was multiplied by the number of texts edited since load
- the pan focuses the container, which blurred the editor while blur still
submitted it; submit is now disabled before the pan starts, and the
editor is refocused on release
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): alt-click to cycle selection through overlapping elements
- alt+click on the selected element (or group) selects the one below it
under the pointer, wrapping around to the topmost
- inside an edited group, cycles through that group's elements only
- alt+drag duplicates only past a 10px threshold, so alt-clicks don't
- alt+double-click no longer creates/edits text (except with autoshape)
Claude Opus 5.5 (xhigh)
* refactor(editor): move the selection tool out of App into AppSelectionTool (app.selectionTool)
- handleSelectionOnPointerDown, clearSelection(IfNotUsingSelection),
isASelectedElement, isHittingCommonBoundingBoxOfSelectedElements and the
alt-click cycle target move as is
- the click selection of the pointer up handler (alt-click cycle, shift
toggle, click select, bbox-only deselect) becomes
handleSelectionOnPointerUp
- the selection's transform handles, maybeHandleResize / maybeHandleCrop,
move as is
- tests for alt-click cycling, and for cropping by dragging a crop handle
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): alt-click cycles the selection on its resize handles too
- alt-resizing starts only past the 10px drag threshold, as alt-drag
duplicating does, so an alt-click on a resize handle can cycle
- an alt-click on the selected element's resize handle (over the element)
cycles the selection, but not once a resize happened
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): hint at alt-click cycling while Alt is held
- holding Alt over a single selected element (or group) with the selection
or lasso tool shows "Alt-click to cycle selection, or drag to duplicate"
- app.modifiers tracks the held Alt, Shift and Ctrl/Cmd outside appState,
synced from key and pointer events and reset on blur;
app.modifiers.useHeld(modifier?) re-renders only on the given one
- the hover refresh after a pointer up replays the held modifiers, so it no
longer releases them (the hint flickered on every alt-click)
- selectionTool.canCycleSelection() shares the cycle rules between the
hint and the click
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): alt-drag the text being edited to duplicate it
- alt-pressing the text editor ends the editing and hands the press over
to the canvas, so the drag duplicates the text (or its container)
- the handed-over press always moves what was edited, never resize
handles or an arrow's points, midpoint or label beneath the editor
- on drop, the duplicate is edited with all of its text selected (a list
item's text only, as when alt-dragged on the canvas)
Claude Opus 5.5 (xhigh)
* fix(editor): no arrow hover highlights while editing its label
- starting to edit text clears the hover state of the arrow's editor
(kept up for the submit), so a midpoint hovered before the double-click
doesn't stay highlighted
- the arrow's hover affordances don't apply while editing text
Claude Opus 5.5 (xhigh)
* fix(editor): don't drop arrow hover updates on the same pointer move
- the hovered point, midpoint and focus point were each set from
`this.state`, so when one move changed several of them (e.g. from the
midpoint straight onto an endpoint), only the last update survived
Claude Opus 5.5 (xhigh)
* feat(editor): auto increment numbers/lists on duplicate
- duplicating a text or a label (shape, arrow, sticky note) that starts with a list marker advances it: `1.` `1)` `(1)` `[1]`, `a.` `a)` `(a)` (`a`–`h`, then roman numerals `i`–`xcix`), and lone numbers (`1`)
- markers must be followed by whitespace (`1.5`, `e.g.` aren't lists); whole lists are left as they are
- numbers count up to 42, letters up to `i`
- only if nothing but list items is duplicated (a label goes with its container); several items only if they're just markers (`1.` `2.`), continuing from the highest of them (`1.`, `3.`, `5.` -> `6.`, `7.`, `8.`)
- the increment is a separate undo step after the duplication; alt-drag shows it from the start of the drag
Opus 5.5 (1M context), xhigh
* feat(editor): edit the text of an alt-duplicated list item
- on alt-drag drop, a single list item with text after its marker enters the text editor with that text selected (`2. |foo|`)
- not when duplicated along with other elements, nor when the drag doesn't end with a genuine pointerup (pointercancel, missing-pointerup cleanup)
- `textWysiwyg` / `startTextEditing` take an `initialSelection`
Opus 5.5 (1M context), xhigh
The text tool (hover and click), and a double-click with nothing
selected, took the top-most shape whose bounds held the pointer. A
transparent shape stacked above a nested one kept the inner one out of
reach at its center, and an arrow below a transparent shape couldn't get
a label.
- only a filled element or an image (the rule arrow binding uses, now
exported as isOpaqueForBinding) or an arrow ends the search
- of the containers found, the innermost one whose center is at the
pointer wins, else the top-most as before
- an arrow counts only where its path is hit, not anywhere in its bounds
- a frame's children aren't hit outside the frame, where they're clipped
(App.isClippedByFrameAt, shared with getElementsAtPosition)
Claude Opus 5.5 (1M), xhigh effort
* refactor(editor): move the clipboard out of App into AppClipboard (app.clipboard)
A pure move of the clipboard handling out of App.tsx (13,478 → 12,942
lines) into App.clipboard.ts: onCut and onCopy (the document's cut/copy
events, through their actions), pasteFromClipboard (the paste event,
parsed, and handed to a host's onPaste first), insertClipboardContent
(inserting the pasted data as whatever it is: images or SVG code,
elements, a Mermaid definition, embeddable URLs, a spreadsheet as a
chart, mixed content, or text), addElementsFromMixedContentPaste and
addTextFromPaste. The plain-paste flags move along as module-level state;
Ctrl/Cmd+V's marking of a plain paste, and its reset, are App's former
lines behind app.clipboard.onPasteShortcut and clearPlainPaste.
Staying in App: addElementsFromPasteOrLibrary and insertImages, shared
with drop, the library and text-to-diagram (insertImages becomes public
for the clipboard), and onIframeSrcCopy, which belongs to the magic frame.
Callers go through `app.clipboard`: no delegate is left on App, and
AppClassProperties exposes `clipboard` (as it does `textTool`) instead of
`pasteFromClipboard`. Beyond the move, `this.` becomes `this.app.` for
what stays on App, onCut and onCopy become public, and the container ref
comes in as a dependency. The moved code is identical to the removed,
modulo those rewrites, whitespace and trailing commas (checked
mechanically).
Claude Opus 5.5 (1M), xhigh effort
* test(editor): cover copy/cut events and more paste routes
Only 80% of the clipboard code ran under the suite, and nothing went
through the document's copy and cut events, which is how Ctrl/Cmd+C/X
reach the editor in a browser. Now a copy event copies the selection and
a cut event cuts it; a host's onPaste returning false keeps the paste
from being inserted; a pasted spreadsheet opens the charts dialog; and
with the image tool off, a paste of mixed content inserts its text.
Claude Opus 5.5 (1M), xhigh effort
* refactor(editor): move text editing out of App into AppText (app.text)
A pure move of the text editing session, and of the text helpers around
it, out of App.tsx (14,250 → 13,478 lines) into App.text.ts. It sits next
to AppTextTool, which keeps the text tool's pointer interaction.
AppText holds:
- the session: startTextEditing (creates or picks the text to edit, and
opens the editor), handleTextWysiwyg (the editor's lifecycle) and the
open editor's submit handler
- the part of the canvas a typed or pasted text is kept within:
getTextSidePanels, getTextViewportOffsets and getMaxTextWidth (paste,
which stays in App for now, calls into them)
- where a new text goes: getTextCreationGridPoint and
getTextWysiwygSnappedToCenterPosition
- the queries that find the text or container to edit:
getTextElementAtPosition, getTextBindableContainerAtPosition,
getSelectedTextElement, getSelectedTextEditingContainerAtPosition and
isEditingTextContent
- the auto-resize handle: isHittingTextAutoResizeHandle and
handleTextAutoResizeHandlePointerDown
Callers go through `app.text`, startTextEditing's included: no delegate
is left on App (no host or test used it). Beyond the move, `this.`
becomes `this.app.` for what stays on App, members called from outside
become public (App.deselectElements too), and the container ref and the
styles panel mode come in as dependencies, as AppViewport's do. The moved
code is identical to the removed, modulo those rewrites, whitespace and
trailing commas (checked mechanically).
Claude Opus 5.5 (1M), xhigh effort
* test(editor): click the text auto-resize handle through the pointer
The handle that turns a fixed-width text back into a growing one was only
covered through its action: nothing hovered or clicked it. Hovering it on
a selected wrapped text now shows the pointer cursor, and clicking it
unwraps the text, through AppText's hit test and pointerdown handler.
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): wrap typed & pasted text at 800, clear of the side panels
A free text growing as it's typed stopped only at the view's width
(#12175), so on a large screen it ran to 2000+ px before wrapping, and a
pasted text wrapped at half the view. Both now follow one rule, in
`getMaxTextWidth`:
- no wider than TEXT_MAX_WRAP_WIDTH (800, in @excalidraw/common) in scene
units, at any zoom: the paste's former cap, now shared. A paste no
longer wraps at half the view.
- nor wider than the canvas between the side panels, less
TEXT_VIEWPORT_PADDING at each side: the docked sidebar, as before; the
full styles panel (desktop), which shows next to a text while it's
edited, and once it's pasted and selected (pasting with nothing
selected, its room is reserved: as last measured, else approximately);
and the stats panel, only for a text beside it, i.e. with rows within
that padding of it, as it covers only the top of the canvas' side.
A text that starts wrapping is brought in between the same panels, as
before. A paste is laid out as if the stats panel weren't there, and
again, clear of it, only if it lands beside it. As the stats panel grows
to show a selection's properties, with it open the paste is rendered
selected first (not captured yet, via `flushSync`), so the panels are
measured as they'll be; laid out again, it stays the same elements, and
one undo step. A wrapped paste is then moved into view (as far as the view
would have scrolled), instead of scrolling the view.
The stats panel is marked as side viewport UI (`data-viewport-ui="side"`,
named "stats"), so the viewport offsets' other users (zoom to fit, scroll
to content, search, a host's `setViewport` with UI offsets) keep clear of
it too while it's open. `AppViewport` gains `getSideInsets(names,
{ reserve })`, generalizing `getSidebarInsets`, and `getSideUIRect(name)`;
`getOffsets` shares the reserve fallback through `getReservedSide`.
Tests: the cap at 50% and 200%; a typed text clear of the styles and the
stats panel, and of the stats panel only beside it; a paste wrapping as a
typed one, with the styles panel's room reserved; a paste clear of the
stats panel only where it lands beside it, and of the stats panel grown to
show it, as one undo step; a wrapped paste moved into view, the view not
scrolled.
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): pan the canvas when the caret goes under the stats or styles panel
The canvas follows the caret past the view's edge, and behind the docked
sidebar, through the editor's box, which the browser scrolls to reveal a
caret (#12175). The stats and the full styles panel don't span the box's
height, so a caret typed in under them stayed out of sight.
After each input, once the update (and any scroll it made) is in the
app's state, the editor works out where the caret is: its line from
`getWrappedTextLines`, its x from the width of the line before it,
rotated with the text. In a line with RTL characters (`hasRTLChars`, new
in @excalidraw/common) the x comes from the browser's bidirectional
layout of the line instead, in its paragraph's direction (the editor's
`dir="auto"` makes it `unicode-bidi: plaintext`: each paragraph goes its
first strong character's way): with Hebrew then English, the caret after
the English is mid-line, not at the line's edge. That's measured through
a range in an off-screen mirror of the line, shared with the
click-to-caret lookup. If the caret's under one of those panels, the
canvas pans to bring it out on the canvas' side, with
CARET_FOLLOW_PADDING to spare. Only then: a text beside or below a panel
stays where it is.
Tests: typing past the stats panel's left edge pans the canvas under it,
but not below it; the caret in a bidirectional line, a paragraph after
one going the other way, is found where the browser lays it out.
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): route showHints through the action system (#12165 follow-up)
`showHints` was the only item in the Preferences submenu that flipped
appState directly instead of going through an action, so it was missing
everything the action system provides: no command palette entry, no
`trackEvent`, no `viewMode` declaration.
- add `actionToggleShowHints`, modelled on `actionToggleMidpointSnapping`
(`viewMode: false` — hints live in the toolbar, which view mode hides)
- register it under `ActionName` and export it from `actions/index.ts`
- `PreferencesToggleShowHintsItem` now calls `executeAction`
- list it in the command palette's editor commands
- document `appState.showHints` /
`MainMenu.DefaultItems.Preferences.ToggleShowHints` in the CHANGELOG,
which the original commit never touched
No keyboard shortcut: like `arrowBinding` and `midpointSnapping`, this is
a set-once preference, and the natural mnemonic (`Alt+H`) is already
distribute-horizontally.
Adds `tests/showHints.test.tsx` — the preference previously had no
behavioural coverage at all, only incidental snapshot entries.
* chore(editor): drop showHints tests & changelog entry
Both will be rewritten in a follow-up PR.
Opus 5.5 (1M context), xhigh
---------
Co-authored-by: hiennd <hiennd@aidia.vn>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix(editor): follow-ups to zen mode polish & delayed tooltips (#12165)
Tooltip state (timer + warm window) is shared by all instances, since they
share one tooltip node. Without an owner, any unrelated Tooltip unmounting
(a collaborator leaving, a sidebar breakpoint) cancelled or hid a tooltip
the user was still hovering. Track the owning item and only hide from the
paths that own it; `hideTooltip` no longer creates the tooltip node just to
hide it.
Zen mode hides or slides controls without the pointer moving, so nothing
fired pointerleave to retract their tooltips — markZenModeTransition now
hides the tooltip up front.
`:focus-visible` was not excluded from the chrome-less zen-mode rules, so
the keyboard focus ring (a box-shadow) disappeared for the main menu
trigger, scroll-back-to-content and exit-zen-mode buttons.
The zoom buttons lost their native `title`, which was the only channel
carrying their shortcut to keyboard/AT users — expose it via
`aria-keyshortcuts`, as Tools.tsx does.
Also: schedule the zen-mode timer on `ownerWindow` like every other
DOM-touching timer in App.tsx, re-read the container ref when unflagging
(and unflag on unmount), and drop the footer-left `--transition-left`
class, which never matched a selector.
Adds the missing coverage for the transition-attribute lifecycle, the
`openMenu`-across-view-mode fix, and the tooltip delay/warm window.
Split out of #12187 and ported onto the #12173 Tooltip rework: the owner
is set in `showTooltip`, and its MutationObserver already retracts a
tooltip whose wrapper got `disabled`, so that extra effect is dropped, as
is the delayed-show label ref (`showTooltip` takes the label by value).
Opus 5.5 (1M context), xhigh
* refactor(editor): drop tooltip owner tracking, trim tests
Since #12173, `showTooltip`'s MutationObserver retracts a visible tooltip
whose wrapper leaves the DOM, and its `isConnected` check drops a pending
one. That makes the Tooltip unmount effect, which hid whatever tooltip was
showing, redundant: removing it fixes the unrelated-unmount bug on its own,
without tracking an owner.
Also drop zenMode.test.tsx and the tooltip tests that duplicated others.
Opus 5.5 (1M context), xhigh
---------
Co-authored-by: hiennd <hiennd@aidia.vn>
* docs: remove obsolete CodeSandbox contribution workflow
https://codesandbox.io/p/github/excalidraw/excalidraw (forking the
whole repo as an editable sandbox to submit PRs from) no longer works.
It was documented in two places — the Contributing guide and the
Development guide — as an alternative to the manual clone/fork setup.
This doesn't touch the other CodeSandbox links in the docs (README,
installation/integration/development guides for the @excalidraw/excalidraw
package), which point at the separate with-script-in-browser usage example
and are unrelated to this contribution workflow.
* chore: trigger CI
Claude Opus 5.5 (low)
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Navigating with `setViewport` takes the view over from the followed user,
as a user's pan or zoom does, so it now asks to stop following
(`requestUnfollow`: `onUserFollow` with `action: "UNFOLLOW"`, when
`userToFollow` is set). `setViewport(null)`, which only clears a lock, and
a target that doesn't resolve don't navigate and leave following alone.
Following itself doesn't go through `setViewport`: excalidraw-app and
Excalidraw+ both apply the followed user's viewport with `updateScene` +
`zoomToFitBounds`, so it's unaffected.
Tests: navigating emits the UNFOLLOW intent once; clearing a lock and an
unresolved target don't.
Claude Opus 5.5 (1M), xhigh effort
perf(element): reuse one moved-element ID set when dragging
dragSelectedElements passed a fresh Array.from(elementsToUpdate) to every
element's updateBoundElements call. Each call missed the per-array ID-set
cache and rebuilt a selection-sized set, so a drag step was quadratic in the
number of dragged elements.
Build the array once per drag step, pass it to every call, and reuse its
cached set (getSimultaneouslyUpdatedElementIds, now exported) for the
unbinding checks too. Document that callers must pass one array instance
per operation and must not change its membership afterwards.
Dragging 1K / 2K / 4K selected rectangles in the app went from 45 / 160 /
643 ms to 18.5 / 31 / 54 ms per frame (same tab, same window, dev build).
Add coverage for the shared array, grouped labels across z-order, frames
with their children, bound arrows, bindings, unbinding, and unchanged
coordinates.
Claude Opus 5.5 (1M context), reasoning effort 40
perf: avoid rebuilding simultaneously-updated id set per element on multi-element resize
updateBoundElements() rebuilt a Set of all simultaneouslyUpdated ids on
every call. Multi-element resize/rotate call it once per selected element
with the same array, making each pointer move O(n^2). Cache the set per
array in a WeakMap.
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
* fix(editor): handle the save-as shortcut while editing text
Cmd/Ctrl+Shift+S did nothing while a text editor was open — the editor stayed
open and no save happened. Plain Cmd/Ctrl+S worked.
The wysiwyg keydown handler only branches on `actionSaveToActiveFile`, whose
keyTest requires `!event.shiftKey`, so the shift variant matched nothing and was
swallowed. This adds the sibling branch for `actionSaveFileToDisk`, mirroring
what the plain shortcut already does: commit the text, then run the action.
Complements #9281, which fixed the plain shortcut in the same handler.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* test(editor): assert the save-as shortcut actually dispatches the save
Review feedback: the regression test only asserted that editing ended, which
`handleSubmit()` satisfies on its own — the test still passed with the
`executeAction(actionSaveFileToDisk)` call deleted, so half the fix was unpinned.
Now spies on `saveAsJSON`, which is what the action ultimately reaches, and
captures `editingTextElement` at the moment it runs so the ordering (commit,
then save) is pinned too. Verified: removing the dispatch now fails with
`expected "saveAsJSON" to be called 1 times, but got 0 times`.
Also adds a negative case — closing the editor with Escape must not save — so
the spy proves the save is tied to the shortcut rather than to teardown.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* fix(editor): dispatch text-editor save shortcuts as keyboard actions, trim tests
- pass the "keyboard" source for both save shortcuts in the wysiwyg keydown
(was the default "api", which skipped the interaction gate and mistracked)
- drop the explanatory comment on the save-as branch
- fold the three save tests into one it.each in the existing container-unbound
suite, covering both Cmd/Ctrl+S and Cmd/Ctrl+Shift+S and pinning that the
text is committed before saveAsJSON runs
Claude Opus 5.5 (1M context), xhigh
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* feat(editor): add file drop overlay and Shift-to-insert support
* fix(editor): report copy drop effect for file drags
Shift defaults a drag to "move" (and a "Move" cursor), but a dropped file
is only ever read in, never moved.
Opus 5.5 (xhigh)
* fix(editor): ignore file drops in view mode and when non-interactive
The dragover/drop cancel listeners were only registered in edit mode, so
elsewhere the browser opened a dropped file natively. Register them always,
show a no-drop cursor where drops are ignored, and don't handle the drop.
Opus 5.5 (xhigh)
* feat(editor): cross out the existing file in the drop overlay when replacing
Opus 5.5 (xhigh)
* fix(editor): note that library files won't replace content in the drop overlay
OS-dragged .excalidraw and .excalidrawlib files both report an empty MIME
type until dropped, so the overlay can't tell them apart. Keep the replace
copy for untyped files and add a secondary note for libraries.
Opus 5.5 (xhigh)
* fix(editor): use --overlay-bg-color for modal and file drop backdrops
Replaces color-mix() in the file drop overlay, which is newer than our
browserslist, with the (previously unused) --overlay-bg-color token, now
hardcoded per theme, and reuses it for the <Modal> backdrop.
Opus 5.5 (xhigh)
* fix(editor): scope image-scene drop try to parsing, drop redundant preventDefault
Only loadFromBlob is wrapped now, so an error while inserting or replacing
isn't reported as an invalid file or followed by a plain image insert.
App's dragover listener is always registered, so the overlay no longer needs
to call preventDefault itself.
Opus 5.5 (xhigh)
* fix(editor): don't let the browser open files dropped on modals
Modal portals live outside the editor container, so its dragover/drop
listeners didn't cover them. Cancel file drags on body-level portal
containers, leaving non-file drags (e.g. text into inputs) native.
Opus 5.5 (xhigh)
* chore(editor): move fileDrop locale strings next to overwriteConfirm
Opus 5.5 (xhigh)
* feat(editor): toast how to undo after a drop replaces the scene
Opus 5.5 (xhigh)
* fix(editor): keep the text editor flush with the canvas when a click places the caret in a tall text
Editing a text that reaches past the viewport with the text tool (a click
places the caret) scrolled the editor's content: the textarea is clamped to
the viewport, focus() reveals the caret — which sits at the end of the value
until the initial selection is applied — and the deferred refocus after the
pointerdown's blur did that on an unfocused textarea, so the text moved up by
the overflow while the box stayed put. The selection tool's single-click edit
starts on pointerup, with no blur, so it never refocused and looked fine.
After placing the initial caret — inside the visible box by construction —
the textarea's own scroll goes back to zero.
Verified in the browser on a 49-line text hanging 250px below the viewport at
90% zoom: internal scroll was 278px, now 0, for the text tool with the
mousedown blur; the selection-tool path stays at 0. jsdom textareas don't
scroll, so there is no unit test for it.
Claude Fable 5.1, high effort
* fix(editor): place the editor of a rotated text where the text is
The editor's textarea was scaled and rotated about its own box's center,
while the canvas rotates a text about the text's center. The two only agree
when the box is the text's size — and it isn't once the box is clamped to
the viewport (a tall text reaching past it) or, slightly, through the 5%
height buffer. A rotated text scrolled partly off the viewport got its
editor displaced by the rotated pivot offset (36px for a 49-line text at
-18° and 130% zoom), and the clamp — a cut along the box's own edges —
removed lines that were still on screen on the side the rotation lifted.
Now the transform origin is the text's center whatever the box's size, with
the translate derived from the text's dimensions, so the editor lands on the
text in every case; the viewport clamps (right and bottom) apply only to an
unrotated box, whose edges are the viewport's, and a rotated box is left
whole. Since an unclamped box can reach past the viewport, both focus()
calls pass preventScroll so revealing the caret can never scroll the
container — the app owns scrolling.
Verified in the browser: all four corners of the rotated editor coincide
with the text's (they were off by up to 36px), typing at the off-screen end
leaves the container unscrolled, and the unrotated case is unchanged — still
clamped to the viewport bottom, top-left in place, no internal scroll on a
click caret, select-all on Enter.
Also updates the linear-editor style snapshot for the editor's explicit
transform origin.
Claude Fable 5.1, high effort
Claude Opus 5.5 (1M), xhigh effort (moved the snapshot update in)
* fix(editor): never let the browser scroll the editor container to reveal a caret
The root container is `overflow: hidden`, which still makes it a scroll
container the browser scrolls programmatically. Typing in a text editor
whose box reaches past the viewport — a rotated text's editor cannot be
clamped to the viewport without losing lines still on screen — made the
browser reveal the caret by scrolling the container, pushing the whole UI
out: two new lines below the viewport moved the toolbar up by 416px.
`overflow: clip` clips exactly like `hidden` but is not a scroll container,
so there is nothing for the caret reveal (or a focus) to scroll; `hidden`
stays as the fallback where `clip` is unknown. The editor never scrolled
this box itself.
Verified in the browser with real key input on a rotated 49-line text
hanging below the viewport at 130% zoom: the container stays at 0 and the
toolbar in place through new lines and characters typed past the viewport.
Claude Fable 5.1, high effort
* fix(editor): the canvas follows the caret instead of the page scrolling to reveal it
With the editor root at `overflow: clip` (previous commit), the browser's
caret reveal skips the root, since it is no longer a scroll container. Full
page, nothing moves, but the caret stays out of view. Embedded in a page
that scrolls (directly, or in a same-origin iframe), the reveal scrolls that
host page instead: 434px for a rotated text reaching past the editor's
bottom edge, 345px for a text scrolled below it while edited. Only a
cross-origin iframe stops it.
The root goes back to `overflow: hidden`, so it absorbs the reveal again.
While a text is being edited, the text editor hands any scroll of the root
to the canvas (`viewport.translate` by the same screen distance) and resets
the root. Scroll events fire before the frame is painted, so the root's
shift is never seen. Nothing moves, host page included, and the canvas pans
just far enough to bring the caret into view. The reveal is the browser's,
so this covers everything that moves the caret: typing, Enter, arrow keys,
paste, IME, and drag-selecting past the edge.
Measured with real key input in Chromium, full page and in a same-origin
iframe embed: host page and root unmoved, canvas panned 444px / 330-355px,
caret visible, the editor still on its text. Outside text editing, a root
scroll is left as it was.
Test: a root scroll while editing is reset and pans the canvas (at 200%
zoom, both axes) with the editor on it; with no text being edited, the root
is left alone.
Claude Opus 5.5 (1M), xhigh effort
* fix(editor): never cut the text editor to the viewport; the canvas follows the caret for every text
The editor of an unrotated text was cut to the viewport's right and bottom
edges (the width of unbound text, plus a max-height), so a caret past an
edge was revealed by scrolling the textarea's content inside the cut box.
The canvas stood still, and the editor's text left its place on the canvas
while typing. Rotated texts were already left whole, and their caret reveal
panned the canvas (previous commit).
Now no editor box is cut: rotated or not, it is the text's own box, and a
caret past the viewport's edge is revealed by panning the canvas. Typing
past the bottom edge, or a long line past the right edge, moves the view
along; the editor stays on its text.
What only existed for the cut goes with it: the `maxWidth` bookkeeping, and
the reset of the textarea's internal scroll after placing a click's caret
(a whole box never scrolls inside).
Measured with real input in Chromium: 455px vertical pan for a 30-line text
crossing the bottom edge, 454px horizontal pan for a line crossing the right
edge, root and textarea unscrolled, editor on its text. A text-tool click on
line 3 of a text taller than the viewport places the caret there without any
pan or internal scroll.
Tests: the max-width test now checks the editor isn't cut at either edge
(it fails with the cut in place); the linear-editor style snapshot loses its
max-height.
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): leave room past the caret when the canvas follows it
The browser reveals a caret only as far as it has to, so text typed past
the viewport's edge came into view flush against the edge. The canvas now
pans a further CARET_FOLLOW_PADDING (5 screen px) along the axis it
follows, so the caret keeps a little room from the edge while the view
follows it.
Not done with the root's `scroll-padding`: the browser honors it only as
far as it can scroll, and the editor box ends at the text (5% below it,
nothing past a line's end). Measured in Chromium: `scroll-padding: 80px`
left 39px below the caret and none to its right.
Measured with real input: once the caret reaches the edge, every new line
or character pans the canvas and the caret stays 4-5px from the edge, both
typing down and along a long line.
Test: the pan includes the padding, and a reveal along one axis pans along
that axis only.
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): the canvas follows a caret behind a docked sidebar; the reveal stays in the editor's box
A caret that went behind a docked sidebar stayed hidden: it was still
inside the editor root, so the browser had nothing to reveal and the canvas
never followed.
The text editor's container (`.excalidraw-textEditorContainer`) is now the
box a caret is revealed into: the canvas area, clipped, and inset off a
docked sidebar (measured from `.sidebar--docked` on every editor update, on
the right or the left for RTL; the editor's position is relative to the
box). A caret past its edge, or behind the sidebar, is revealed by
scrolling the box, which the text editor turns into a canvas pan (+
padding) and resets, as it did for the root before.
The reveal now never gets past the box, so the editor root is back to
master's CSS, and what a host does to the root's overflow no longer
matters: with the root forced to `overflow: visible` (as Excalidraw+ does,
inside a wrapper that resets its own scroll), the canvas follows the same
way and the wrapper never scrolls.
Measured with real input in Chromium, full page, with the root forced to
`visible`, in the Excalidraw+ arrangement, and in a same-origin iframe
embed: nothing scrolled (host page, root, box), the canvas panned 449 /
360 / 580px for texts past the bottom edge, and for a line typed in behind
the docked sidebar it panned 120px, leaving the caret 5px left of the
sidebar. Clicks inside the editor still place the caret; clicks on the
canvas still end editing.
Tests: the pan test scrolls the editor's box; a new test covers the insets
for a sidebar docked on either side, and their removal with the editor.
Claude Opus 5.5 (1M), xhigh effort
* refactor(editor): measure the sidebar through the viewport UI markers
The text editor's box was kept off a docked sidebar by querying the
`.sidebar--docked` class and measuring it inline in textWysiwyg. How far
viewport UI reaches into the canvas is AppViewport's concern:
`getOffsets` measures every UI marked `data-viewport-ui`, and the sidebar
is marked (`side` / `sidebar`, except on phones, where it's an overlay).
AppViewport gains `getSidebarInsets()`, which measures just the sidebar
through those markers, with a `measureSide()` that `getOffsets` now shares.
The text editor asks the viewport for the insets. An open sidebar that
isn't docked covers the canvas the same way and now counts too; it closes
when the canvas is clicked to start a text, so this rarely matters.
`getOffsets` isn't used for the box: it gives one band per side for all
marked UI, so the top toolbar and the styles panel (open while a text is
edited) would pan the canvas as soon as one typed below them.
Test: the docked-sidebar test's fake sidebar carries the markers.
Claude Opus 5.5 (1M), xhigh effort
* feat(editor): a text stops growing at the view's width, and is brought into view when it wraps
Closes#8855. Typing a long line grew a free text past the view's edge.
The canvas followed the caret, so the start of the text went out of view
on the other side, and the box had to be resized by hand afterwards.
A free text that grows with its content (`autoResize`) now stops at the
view's width: the canvas minus the sidebar, less TEXT_VIEWPORT_PADDING
(20px, in @excalidraw/common) at each side, in scene units, so it follows
the zoom. On the keystroke that would cross it, the text becomes fixed
width at exactly that width and wraps from then on (`autoResize: false`),
anchored the way it grew, so a right-aligned or centered text keeps its
edge or center. The editor switches to wrapping with it. A text that is
already wider keeps growing; nothing shrinks. The rule is an optional
`maxWidth` on `refreshTextDimensions`, which the editor's per-keystroke
update passes.
When a text starts wrapping in the editor, while typed or pasted into it,
it is scrolled into view with the same room at the edges. Being exactly
the padded view's width, it then fills it. That happens horizontally
always, and vertically only if all of it fits; a taller text leaves the
vertical to the caret-follow, so the view doesn't jump away from the caret.
Pasting onto the canvas keeps its wrap width (half the view, 200-800),
capped by the same limit, so that the 200 minimum can't outgrow a narrow
or zoomed-in view. A paste that wrapped is scrolled fully into view; if
it is taller than the view, its top is brought in.
Scrolling into view is computed by a pure `scrollBoundsIntoView` in
viewport.ts, next to `centerScrollOn` and `constrainScrollState`. It moves
by the least amount, keeps the zoom, takes the usable area as `Offsets`,
and returns null when nothing needs to move. The move itself goes through
`viewport.translate`, as a user pan does: it respects scroll locks, yields
to a host's pending locked navigation, and stops following a
collaborator. No move, no translate.
Measured with real input in Chromium on a 2560px view: typing
character by character at 400% from 100px in, and a sentence inserted at
once, both end as a wrapped text from 20 to 2540; with the docked sidebar
the limit is 2226 (2560 - 294 - 40) and the text sits 20px left of it; a
paste near the bottom-right corner ends 20px inside the right and bottom
edges. Nothing scrolled the page or the editor box.
Tests: the text stops and wraps at the view's width, and keeps that width;
the limit follows the zoom and a docked sidebar; a right-aligned text keeps
its right edge; a text already wider keeps growing (the not-cut-off test,
reworked); starting to wrap scrolls it into view with room at its right
edge, but not vertically when it's taller than the view; a paste isn't
wider than the view at 800% and, wrapped, ends fully in view;
`scrollBoundsIntoView` unit tests.
Claude Opus 5.5 (1M), xhigh effort
* fix(editor): do not inherit groupIds/angle from container if not binding the text to it
* fix(editor): text tool edits a label only when clicking the label itself
Clicking elsewhere inside a labeled container creates an independent text at
the clicked position, with no modifier needed (so also on touch/pen), instead
of warping to the label center and editing the existing label.
* feat(editor): highlight what the text tool would act on when hovering
Mirror the click logic on hover: the text element a click would edit gets
a box highlight, and an empty text-bindable container the click would bind
into gets the same binding highlight arrows use (box for arrow containers,
which the binding outline renderer can't draw). Cleared on pointerdown and
managed only while the text tool owns the interaction, so the frame flows
sharing elementsToHighlight are untouched.
Also documents suggestedBinding, isMidpointSnappingEnabled and
elementsToHighlight in AppState.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(editor): hit-test arrow labels at their derived position
An arrow label's stored coords aren't updated when the arrow moves
(dragging deliberately skips them — the position is derived at render
time), which left hitElementItself internally inconsistent: its bounds
pre-check derives the position, but the precise shape test read the stale
stored coords, so a moved arrow's label was only hittable where its old
and new rects overlap. Substitute the derived coords for the precise test,
and skip the version-keyed point cache for container-bound labels (their
position can change without a version bump, mirroring ElementBounds).
Pass the elements map through renderElementsBoxHighlight so the highlight
box is also drawn at the label's derived position.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(editor): dashed text box for the text-tool hover, cleared when the tool is left
The text a click would edit gets the same subtle dashed box as a wrapped text
being edited (at the label's derived position for arrows), instead of the
frame-style bounding box. The hover highlights are cleared whichever way the
text tool is left — Esc/finalize paths bypass setActiveTool.
* refactor(editor): dedupe container-bound label position derivation
An arrow label's accurate position is derived from the arrow rather than
stored on the element (dragging deliberately skips updating it), and three
call sites hand-rolled the same clone-with-derived-coords dance. Extract it
into getTextElementWithAccuratePosition next to the existing position
helpers.
Also routes the text-tool dashed hover highlight through the helper, so it
renders at the label's actual position instead of its stale stored coords.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(editor): defer text-tool hover highlights to arrow text anchors
The arrow-endpoint text binding (#11777) added its own text-tool hover
affordance (hoveredArrowTextAnchor) covering arrow endpoints and midpoint
label anchors, and gave endpoints precedence on click. Mirror that in the
text-tool highlight updater: skip positions where a bindable endpoint would
take the click, and leave arrow anchors (endpoint & midpoint label) entirely
to the anchor affordance — the highlights now only cover editing an existing
text and binding into an empty non-arrow container.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(editor): make endpoint-vs-text preference z-aware to prevent affordance flicker
The endpoint offer was suppressed by any text element under the cursor,
regardless of stacking order. With an arrow drawn over an existing text,
the text's bbox edge cut into the endpoint's hit circle, and slow pointer
movement flickered between the endpoint anchor and text editing.
Drop the z-blind text check and let the existing z-order occlusion rule
decide: whatever is stacked above owns its hit area. A text above the
arrow keeps its edit behavior; when the arrow is on top, its endpoint has
full preference over the whole hit circle, matching the drawn highlight.
Container-bound labels need no special casing — a labeled container is
interior-hittable, so the occlusion rule already yields to labels whose
container sits above the arrow.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* feat(editor): defer a text-tool center click so a drag creates free text
A click on an empty container's center still binds a label, but the decision
now waits for pointerup: dragging horizontally past the autowrap threshold
instead creates an independent fixed-width text at the pointer origin, and
small shapes are no longer provisionally enlarged while dragging. Tool
changes and the missing-pointerup cleanup cancel the pending click.
Shape hover and pointerdown share the empty-container / center-snap / Alt
eligibility via getTextCreationContainerAtPosition, and the hover indicators
are cleared when deferred creation starts (stale outline under a locked tool
at 200% zoom).
Also: a direct collision-cache regression for labels of moved arrows, exact
width/position assertions for drag creation across mouse/pen/touch,
labelPosition coverage at 25/50/75%, and stale AppState comments fixed.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): redraw the dragged text box under a locked text tool
Drag-sizing a new text mutates it in place without informing the scene, so
sceneNonce never moves and the interactive canvas — which draws the dashed
text box from the live element but memoizes on canvasNonce — kept the first
size. Unlocked drags only repainted by accident: the tool had already
reverted to selection, whose box-selection branch churns state every move.
Fold the new text's versionNonce into canvasNonce, as is already done for
framed new elements. Four rendering regressions cover successive drag widths
on empty canvas and from a container's center, locked and unlocked.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* refactor(editor): extract the text tool's pointer interaction into AppTextTool
Pure move of handleTextOnPointerDown, resetTextTool, maybeStartPendingText,
maybeUpdateTextToolHighlightOnPointerMove and getTextCreationContainerAtPosition
into App.textTool.ts — only `this.` became `this.app.` and the names lost
their "Text" prefix. maybeDragNewGenericElement is now public so the pending
center-drag can re-dispatch to it. No behavior change.
Text editing itself (startTextEditing / handleTextWysiwyg and the hit
helpers) is shared with Enter, double-click and the other entry points and
stays in App.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): resolve text-tool targets once; single textToolHover state
What a text-tool click would do at a position was computed in three places
— the text/container highlight, the arrow-anchor hover and the pointerdown —
with different modifier awareness, and shown through three AppState fields
(elementsToHighlight, suggestedBinding, hoveredArrowTextAnchor) cleared from
seven sites. The affordance could promise what the click wouldn't deliver:
- pressing or releasing Alt without moving left the container outline stale
(and Ctrl/Cmd left the text box stale)
- Alt-hovering an empty arrow's midpoint advertised a label while the click
created free text
- Ctrl/Cmd hid the container outline (the renderer gates suggestedBinding on
isBindingEnabled) while the click still bound a label
- over a shape's or arrow's label the cursor was a crosshair while the box
promised an edit
AppTextTool.getTargetAt now answers the question once — endpoint → text →
empty centered container (unless Alt) → free — and feeds the hover, the
cursor and the pointerdown. The hover lives in one field, textToolHover
(replacing hoveredArrowTextAnchor), drawn by one renderTextToolHover branch;
it is cleared on pointerdown and when the tool is left, nowhere else. Alt and
Ctrl/Cmd keydown/keyup refresh it at the last pointer position. The scene is
hit-tested once per pointermove instead of twice.
Also drops AppArrowText's anchor-state members (the resolver covers them) and
getLabelCenter, dead since the label-center warp was removed.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* refactor(editor): let AppTextTool own the pending center click; explicit textElement
The deferred center click was threaded through PointerDownState.text and a
textCreation parameter that made startTextEditing — the entry point shared
with Enter, double-click, sticky-note drops and autoshape — re-derive what the
text tool's pointerdown had already established, then bail. The helper now
arms `pending` itself (like AppBucketFill), decides it on pointermove/up, and
PointerDownState loses its text slot. The affordance armed at pointerdown now
stays up until the click resolves instead of being cleared and re-shown.
startTextEditing takes an explicit `textElement` instead: the tool passes
the text it resolved, or null to create — so a text selected through the
host API can no longer hijack a text-tool click elsewhere (the Enter and
double-click paths, which leave it undefined, resolve as before). The same
selection shortcut leaves getTextBindableContainerAtPosition, which is now
purely positional; the double-click path keeps it inline.
Also: a pending container deleted mid-press (collab) now still ends the
tool's turn, and the drag threshold's choices are documented in place.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): ctrl/cmd, not alt, opts out of labeling a container with the text tool
Ctrl/cmd already turns off arrow-endpoint binding for the text tool; it now
also keeps a center click from binding a label to an empty container, so one
key means "no binding" throughout the tool, as elsewhere in the editor. It is
read off the event rather than the arrow-binding preference — a label is not
an arrow binding. Alt no longer plays a part in the text tool, so its hover
refresh hooks go (alt keeps its generic drag meaning: resize from center).
The double-click path is unchanged.
Ported from #11210.
Co-authored-by: Loric Brevet <loric.brevet@gmail.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): cancel a pending text-tool click on tool exit and pointer cancel; refresh hover and cursor when the viewport moves
Three lifecycle gaps in the text tool's hover and pending center click:
- A pending center click only checked the active tool at the next pointer
event, so leaving the tool (Esc) and picking it again before releasing
revived the old press: moving then created free text at the original
position. And with no pointerup after a pointercancel (scroll, palm
rejection), the pending click stayed armed for unrelated movement. The
helper now has an explicit cancel, called when the tool is left and on
pointercancel next to the bucket fill's.
The cancel also clears the outline the armed click had set, which no
hovering pointer would clear otherwise — including when a second finger
turns the press into a pinch/pan (that discard goes through the same
cancel).
- The hover was refreshed on pointer moves and modifier keys, but not when
the viewport scrolled or zoomed under a still pointer, so an outline stayed
on a shape that had moved away. The refresh now re-derives the scene point
from the pointer's last viewport position, remembers the last modifiers,
and runs from the viewport-change lifecycle.
- A modifier press changed the target without updating the cursor (an
endpoint's pointer cursor survived Ctrl). The refresh sets the cursor from
the same target, mirroring the pointermove path and leaving a panning or
scrollbar gesture its own cursor.
Also fixes a stale renderer comment about the container outline's binding
gate.
Tests: tool exit and re-pick mid-press, pointercancel, wheel scroll and zoom
under a still pointer for container and text targets, cursor on modifier
press and release. Verified in Chromium as well.
Claude Fable 5.1, high effort
Claude Opus 5.5 (1M), xhigh effort (moved the snapshot update to the caret-overflow branch)
Claude Opus 5.5 (1M), xhigh effort (the cancel clears the armed outline, from the 2026-09-26 review)
* fix(editor): tear a gesture down on pointercancel; a replayed cleanup no longer counts as a click
A canceled press (the browser taking the pointer for a scroll, a pinch or
palm rejection) left the gesture's window listeners and its missing-pointerup
cleanup subscription in place. The next pointerdown then replayed the old up
handler, whose end-of-gesture revert switched the tool to selection while the
new press was being armed — so after a canceled center press with the text
tool, the next center click switched tools and created nothing.
pointercancel now runs the missing-pointerup cleanup immediately, so nothing
of the canceled gesture lies in wait. And the up handler's tool revert is
gated on a genuine pointerup: a replay by the cleanup — a second finger
landing, a pointercancel, the next press after a lost pointerup — only tears
the gesture down and leaves the tool to the press that follows, instead of
reverting it under that press.
The pointercancel regression no longer sends a synthetic mouse-up that hid
this: after the cancel the tool must still be the text tool and the next
center click must bind a label. It fails without the fix.
Claude Fable 5.1, high effort
* refactor(editor): cursor from the text-tool target alone; a hover refresh needs a hovering pointer
Follow-ups from the whole-branch simplification review (simplification.md),
narrowed with the reviewer:
- The cursor is derived from the resolved target only. The old fallback to
the plain hit under the pointer kept a text cursor over other texts while
editing or drag-sizing — where a click has nothing to point at — and forced
a second hit test and a coordinate recomputation on every modifier press
and viewport change. Both go. With a locked text tool, editing or dragging
now shows the crosshair everywhere; hover, endpoint and label cursors are
unchanged.
- The hover refresh takes the pointer's last viewport position only. The
fallback to the last *scene* coordinates was reachable when a tap preceded
any pointer movement, and after a viewport change it resolved at a position
nothing hovers — a phantom affordance. A tap leaves nothing to refresh,
pinned by a test that fails with the fallback in place. Nor does a finger
ever hover: a touch's last move is where it lifted, so touch input doesn't
count as a hovering pointer (mouse and pen still refresh). The test drives
real touches — a tap with jitter on a text, a short drag from a center —
instead of clearing the pointer bookkeeping by hand. The pointercancel
test now checks the armed outline is gone right after the cancel, and a
second-finger test covers the missing-pointerup discard.
- The explicit pending-click cancel on pointercancel stays, and its reason is
written down: the gesture teardown that follows flushes a queued
pointermove, which would otherwise find the click still pending and resolve
it as a drag. Verified in Chromium by the reviewer; the test harness runs
the throttle synchronously, so it cannot be reproduced there.
- Two duplicated test scenarios removed: the arrow-anchor hover test the
endpoint suite already covers, and a repeated Ctrl assertion.
Claude Fable 5.1, high effort
Claude Opus 5.5 (1M), xhigh effort (touch input never hovers; tests, from the 2026-09-26 review)
* refactor(editor): the text tool refreshes its own hover and cursor; viewport navigation check lives in AppPan
App's `refreshTextToolHover` was text-tool logic kept in App only because
its cursor gate read App-private state. It moves into `AppTextTool` as
`refresh(modifiers?)`, which re-resolves the hover and sets the cursor that
goes with it, taking the place of `refreshHover`.
The gate — space held, a pan in progress, a scrollbar drag, the hand tool —
is the same check the canvas pointermove makes before touching hover or
cursor. It becomes `AppPan.isNavigating()`, used by both. The scrollbar drag
stays App's own and reaches AppPan as a dependency, like the pointer count.
No behavior change.
Claude Opus 5.5 (1M), xhigh effort
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: Loric Brevet <loric.brevet@gmail.com>
* feat(editor): delayed name tooltip on library items
- library items with a name show it in a tooltip above the item after
the standard tooltip delay (500ms, or right away when moving over from
another tooltip); hidden on leave and on press
- driven by pointer (not mouse) events so touch taps don't leave the
tooltip behind, while the mouse-driven hover state (which reveals the
checkbox on tablets) stays as is
- no per-item hooks: Tooltip exposes `showTooltip()` / `hideTooltip()`
(plus a `position` option) for elements that can't be wrapped in
<Tooltip>, and <Tooltip> itself now uses them
- a visible tooltip now hides once its item is removed from the DOM
(e.g. filtered out by the library search, sidebar closed), which fires
no pointerleave. A MutationObserver is active only while a tooltip is
visible; a delayed tooltip whose item unmounted while pending no
longer shows
Opus 5.5 (1M context), xhigh
* fix(editor): Escape in library search clears it instead of closing sidebar
With a search active in an undocked sidebar, Escape closed the sidebar:
the search relied on the browser's native clearing of search inputs, but
nothing stopped the event from reaching the Sidebar's document Escape
listener. Clear the search ourselves and stop the event on the input.
A second Escape (empty search) still closes the sidebar.
Also adds a test for Escape clearing the item selection without closing
the sidebar (already working).
Opus 5.5 (1M context), xhigh
* feat(editor): larger named items in library search results
- search results render in 2 columns with bigger previews and the item
name below (ellipsified when it overflows); the whole card, name
included, is clickable/draggable
- the name tooltip only shows when the name is truncated
- placeholders match the card size, and the grid is full width so it
doesn't shrink to its content while only placeholders are rendered
- reserve the library scrollbar's space (scrollbar-gutter: stable) so
the content doesn't shift when results start/stop overflowing
Opus 5.5 (1M context), xhigh
* feat(editor): preference to hide toolbar hints
Add a "Show hints" checkbox to the Preferences menu, backed by a new
browser-persisted `appState.showHints` (default true). When off,
HintViewer renders nothing. Also exposed as `Preferences.ToggleShowHints`
for hosts composing their own preferences list.
Opus 5.5 (1M context), low
* fix(editor): keep main menu open when toggling view mode
Entering view mode ran terminateActiveInteraction, which reset
`openMenu` and closed the main menu the user had just toggled view mode
from (Preferences submenu). The main menu stays available in view mode,
so only close it when interaction gets disabled.
Opus 5.5 (1M context), low
* feat(editor): chrome-less canvas controls & in-place fades in zen mode
- UI hidden in zen mode fades out in place (opacity + visibility) instead
of sliding off the viewport, and is non-interactive from the start of
the fade
- visible canvas controls (toolbar, main menu trigger, zoom, scroll back
to content, exit zen mode) drop their background/border/shadow;
hover/active states still apply, popups & dialogs are unaffected
- only the zoom level stays visible out of the zoom controls
- chrome fades are applied only while toggling (data-zen-mode-transition
on the container, set before the DOM update) so hover transitions stay
instant
- single ZEN_MODE_TRANSITION_DURATION, exposed to CSS as
--zen-mode-transition-duration
- zoom & undo/redo button groups paint a single background (on the
group) instead of one per button
Opus 5.5 (1M context), low
* feat(editor): shift zoom level into the zoom-out slot in zen mode
With the zoom +/- buttons hidden in zen mode, slide the zoom level over
to the left edge of the group. The shift is applied to the Tooltip
wrapper (new `className` prop) rather than the button, so the tooltip
(positioned off the wrapper) moves along.
Also give the reset-zoom button its own hover background: unlike the
+/- buttons it has no .ToolIcon__icon, and lost its (incidental) hover
once the per-button backgrounds were removed.
Opus 5.5 (1M context), low
* feat(editor): delayed tooltips on canvas buttons
- Tooltip gets a `delay` prop: shows after 500ms, or right away if a
tooltip was visible within the last 300ms (moving across adjacent
buttons); passing over a button quickly doesn't flash one
- enable it for the zoom, undo/redo & help buttons
- zoom +/- use our Tooltip instead of the native `title`, and the reset
zoom button drops its native `title` (it was showing both)
- zen mode now hides the zoom +/- tooltip wrappers rather than the
buttons, so the invisible wrappers don't show tooltips
Opus 5.5 (1M context), low
Co-authored-by: GitUserVivek <jagtapvs9832@gmail.com>
* fix(editor): align buttons inflating styles panel intrinsic width
The flex-wrap row break (zero-height flex-basis: 100% spacer) only breaks
the line at layout time; for intrinsic sizing both rows were measured as
a single line. Render the two rows as separate flex rows instead.
Opus 5.5 (1M context), low
* fix(editor): position range slider value label and track via CSS
The label position and filled track were computed in JS from the input's
offsetWidth, and only when the value changed, so they went stale when the
container resized. Drive both from a --range-progress CSS variable, and
drop the UA default inline margin that offset the track from the label.
Opus 5.5 (1M context), low
* feat(editor): compact styles panel
Styles panel buttons are 32px regardless of screen size, rows are closer
together, top-pick swatches are packed tighter, and the panel sizes to its
content (up to the previous fixed width).
Opus 5.5 (1M context), low
* reduce large icon size on 1920px+ screens
* fix color picker border color on mobile
* feat(editor): customizable font picker top picks
Font families can be dragged from the font picker list onto the top-picks
strip to replace a pick, the strip can be reordered by dragging, and
right-clicking it resets to the default picks — same as the color picker
top picks. The drag ghost is only the font's icon (on a strip-button tile).
The color picker's drag & drop is generalized into
components/TopPicksDnD (value-agnostic hook, reorder preview, drop outline,
reset context menu, shared styles), with thin per-picker adapters
(colorTopPicksDnD / fontTopPicksDnD) supplying value equality and the
ghost visual.
Custom picks are kept in `appState.fontTopPicks` (browser-persisted only,
kept on canvas clear); restore drops unknown/internal/fallback families,
dedupes, and caps at the strip's 3 slots.
Claude Opus 5.5 (1M context), reasoning effort: 40
* feat(editor): reset link in top picks tips
The "drag to pin" tip in the font picker and color picker popups now ends
with a plain-text "Reset" link while that picker's top picks are
customized, restoring the defaults without leaving the popup.
Shared as TopPicksTip (tip text styles merged into it). The link never
takes focus on click and hands it back to the picker when activated by
keyboard, since it unmounts on reset; Enter/Space are kept from the
pickers' key handlers.
Claude Opus 5.5 (1M context), reasoning effort: 15
* fix(editor): don't clip or overlap font list item focus/pressed rings
The font list scrolls (clipping outer box-shadows at its edges) and each
item paints over the previous one's bottom edge, so the focus-visible and
:active rings are drawn inset there. Pressing and holding items became
common with dragging fonts onto the top picks.
Claude Opus 5.5 (1M context), reasoning effort: 15
* fix(editor): cancelled top picks drag flying to viewport top-left
The ghost (and its home rect) was built on drag activation, by which time
the source could have been re-rendered away — the font list re-renders
on hover — and a detached element measures as a zero rect. Build and
measure it on pointerdown instead, while the source is mounted.
Claude Opus 5.5 (1M context), reasoning effort: 15
* fix: Always show 3 slots to reorder
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Cleanup
Inconsistent state updates. Font picks go through useExcalidrawSetAppState directly, while color picks go through the action's updateData.
Duplicate icons in the strip. Virgil and Excalifont both use FreedrawIcon, so pinning both shows two identical tiles that can only be told apart by their tooltips.
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: remove useMemo
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Midpoint highlight color in dark mode
The highlighted binding midpoint hardcoded rgba(3, 93, 161) for dark mode,
the pre-filter color from when the interactive canvas was inverted by a
CSS filter. The canvas now draws post-filter colors directly, so it
rendered dark blue. Use BINDING_HIGHLIGHT_RGB like the rest of the binding
highlight.
Claude Opus 5.5 (1M context), high reasoning effort
* fix: Show binding midpoints like before the hit test rework
The binding highlight drew all four midpoints for any suggested binding,
including simple arrows with the cursor deep inside the element. Restore
the previous visibility: simple arrows show no midpoints from inside, and
from outside only the one nearest the cursor once it gets near; elbow
arrows show all of them. The highlighted midpoint still comes from the
suggested binding, so it sits where the arrow actually snaps.
Claude Opus 5.5 (1M context), high reasoning effort
* fix: Images and locked opaque elements occlude binding
Only filled shapes hid the elements behind them from binding. Images now
count as opaque, and locked opaque elements hide what is behind them too
(they still can't be bound to). Frames are future-proofed: once they get
a background, an opaque frame hides the non-children behind it without
ending the search, as its children sit just below it in z-order.
Claude Opus 5.5 (1M context), high reasoning effort
* refactor: Add DEFAULT_ZOOM for computations without an editor zoom
Replace the scattered { value: 1 } as Zoom / AppState["zoom"] casts used
as a zoom fallback (elbow arrow routing, transform, element rendering,
binding repair on restore, tests) with a shared frozen constant.
Claude Opus 5.5 (1M context), high reasoning effort
feat(packages/excalidraw): make `onDuplicate` changes stick, support veto & lookups
The editor kept working with the duplicates it created after calling
`props.onDuplicate`, so a host returning new objects for them detached
them from the frame assignment and bound text redraw on paste, and from
the alt-drag handover.
- Add `reconcileDuplicatedElements()` and use it in all three duplication
paths (paste/library insert, duplicate action, alt-drag). Elements the
host returns for duplicates are shallow-merged into the editor's own
objects (omitted properties are kept), invalidating what may have been
cached for them by then (shape, bounds). Other returned elements keep
the replace semantics.
- Omitting a duplicate (or returning it as deleted) vetoes it. So does
returning `false` for the duplication as a whole. Bound text goes with
its vetoed container, and references to vetoed duplicates are cleared
from the remaining ones (as in `fixDuplicatedBindingsAfterDuplication`).
If no duplicate remains the duplication is cancelled: paste and the
action do nothing, alt-drag keeps moving the originals. On a partial
veto during alt-drag the vetoed originals are left behind.
- On paste, resolve the target frame (and the z-order under it) before the
callback, so that the host sees the duplicates the way they end up in
the scene, and a vetoed duplicate isn't brought back.
- Pass lookups covering just the participating elements as a third
argument: `duplicateElements`, `originalElements`, `origIdToDuplicateId`
and `duplicateIdToOrigId`.
Claude Fable 5.1
* refactor(editor): move the drag-pan out of App.tsx into App.pan.ts
`handleCanvasPanUsingWheelOrSpaceDrag` — gating, the Linux middle-click
paste guard, the throttled move and the teardown — moves as-is into an
`AppPan` helper (`app.pan`), in the shape of `App.cursor` and
`App.viewport`. The session state it ran on was module-level in App.tsx
(`isHoldingSpace`, `isPanning`, `flushPanMove`), shared by every `App`
instance in the page: with two editors mounted, a wheel-button pan in one
made the other ignore wheel input. It is instance state now — `spaceHeld`,
`active`, the pending move flush and the teardown — behind `start`,
`isActive`, `flushMove`, `end` and the space accessors. Only the pointer
count is injected; `gesture` stays where it is.
`AppWheel` asks `app.pan` directly instead of taking those two callbacks
as dependencies, the wysiwyg's wheel-button pan calls `app.pan.start`,
and `maybeCleanupAfterMissingPointerUp` ends the pan explicitly, which
leaves `lastPointerUp` to the scrollbar drag alone. `savePointer` becomes
public for the teardown. No behavior change.
Claude Fable 5.1, high effort
* feat(editor): pan by dragging with the secondary mouse button
A secondary-button press starts a pan session like the wheel button
does, except that it stays a right-click until the pointer travels past
the drag threshold: nothing moves and the cursor stays put before that;
past it the canvas follows the pointer (from that point, the threshold
distance is not caught up) and no menu opens. Released before the
threshold, the session opens the context menu itself at the release
point, through the same `openContextMenu` the `contextmenu` handler now
delegates to.
That handler ignores the platform's `contextmenu` event while a
secondary-button session is active — macOS and Linux fire it on
mousedown, before a drag can be told from a click — and once after the
session ends if it has not fired yet, which is Windows firing it on
mouseup. Touch long-press, pen barrel taps and keyboard-triggered menus
never go through a session, so they open as before. On macOS and Linux
the menu now opens on release rather than on press.
View mode already let any button pan; a right-click there opens the
view-mode menu on release the same way. With interaction disabled the
drag still pans (when navigation is enabled) and no menu opens.
Tests: the threshold, the menu on release, both platform orders of the
native event, no menu after a drag, element selection under the pointer,
and the non-interactive editor.
Claude Fable 5.1, high effort
* fix(editor): let the contextmenu after mouseup open the menu for a right-click, as before
The secondary-button session opened the menu on release everywhere. On
Windows the platform's `contextmenu` fires after mouseup, by which time
our menu was rendered under the pointer; the event then targeted the
popover instead of the canvas, the canvas handler that prevented the
native menu never ran, and the native menu opened on top of ours.
The session now opens the menu on release only where the platform's
`contextmenu` already came with the press (macOS, Linux) and was
swallowed because a drag could not be told from a click yet. Where it
follows the release, it opens the menu itself, exactly as before this
branch, and lands on the canvas as there is nothing under the pointer.
After a drag that event is swallowed once, as it was.
Tests: after mouseup, nothing is open at release and the platform's event
opens the menu; the mousedown-order and drag cases are unchanged.
Claude Fable 5.1, high effort
* reintroduce: ctrl+wheel should always zoom for both input devices
* fix(editor): lower right-button pan threshold to 5px
* fix(editor): broadcast the final pointer position after panning
* fix(editor): suppress cursor broadcasts while panning
* feat(packages/excalidraw): add renderOverrides to allow overriding rendering of elements
* refactor(renderer): centralize overrides and inherit label offsets
* fix(renderer): preserve frame-name editing during visual overrides
* perf(renderer): limit override culling to translated elements
* fix(renderer): keep frame-title hit bounds at document positions
* fix(renderer): skip clearing an already clear override snapshot
`setElementRenderOverrides(null)` (or an empty map) on an editor whose
snapshot is already empty no longer copies, derives offsets or schedules a
render. Every other submission still repaints, equivalent ones included:
a value comparison would cost about as much as the copy it saves on every
changing frame, so hosts are told to submit only on change and to dedupe
at their own level, where the snapshot's structure is known.
Fable 5.1, medium reasoning
* refactor(renderer): drop two override edge cases
Culling no longer keeps an off-screen container alive because its bound
label alone would be in view: the label follows its container, as it does
for document culling, and the case needed a label wider than its (short
arrow) container at the viewport edge during a translation.
Frame clipping no longer tracks whether an element carries an explicit
offset entry (`hasPositionOverride`); a non-zero offset is what matters.
An explicit zero offset leaves the element at rest, where the ordinary
overlap check already decides correctly.
Fable 5.1, medium reasoning
* perf(renderer): leave bound-label entries out of override culling
A bound label is drawn with its container and its own entry in the visible
list is skipped by the static renderer, so override culling has no reason
to adjust that entry. Doing so made a visible container whose label is
document-off-screen (a long arrow with its label past the viewport) report
the label as newly visible on every translation, which rebuilt the visible
set from the whole scene each frame. Translated elements now update only
their own membership; the label lookup per translated element goes too.
Fable 5.1, medium reasoning
* refactor(editor): move wheel handling out of App.tsx into App.wheel.ts
The wheel handler (pan, ctrl/cmd zoom, shift horizontal pan) and the
non-interactive browser-zoom guard move as-is into a new `AppWheel`
helper (`app.wheel`), in the same shape as `App.cursor` / `App.viewport`.
The zoom math becomes a private `zoomBy(deltaY)` so the upcoming wheel
features (wheel-button zoom, zoom-with-scroll-wheel preference) only add
branches to the dispatch instead of another copy of it.
`isPanning` is module state in App.tsx, so it is handed in as a
dependency the way `AppViewport` gets `isGestureActive`; the debounced
`shouldCacheIgnoreZoom` reset is shared with the touch pinch handler and
becomes public. No behavior change.
Claude Fable 5.1, high effort
* feat(editor): zoom by scrolling with the wheel button held down
Scrolling while the wheel (middle) mouse button is held zooms the canvas
around the pointer, exactly like ctrl/cmd+wheel. The button is what
starts a drag-pan and the wheel sits under the same finger, so a pan can
be zoomed one-handed without reaching for a modifier. It wins over the
modifiers (shift included) and over the drag-pan's own wheel gate, which
until now swallowed all wheel input mid-pan. It is read off
`event.buttons`, so no extra state is tracked.
Zooming mid-pan exposed three ways the point grabbed by the pan could
drift from under the cursor, compounding with every tick while the
pointer moves between zooms:
- The drag-pan wrote its scroll as a plain object computed from
`this.state`. Under React 19 a wheel zoom is flushed asynchronously,
and the pan's animation frame runs before that flush, so the pan
overwrote the zoom's anchoring scroll with a pre-zoom value — the zoom
then happened around the viewport origin instead of the cursor. The pan
is now a state updater.
- A pointer move still waiting for its frame landed after the zoom, which
had anchored on a viewport that didn't include it. The wheel handler
flushes the pending move first.
- The zoom updater read `viewport.lastPosition` when React evaluated it,
by which time the pointer had moved on; it also started from
`app.state.zoom`, so ticks queued before a flush collapsed into one.
Both are now taken at wheel time / from the updater's own state.
Tests: plain wheel pans, shift pans horizontally and ctrl/cmd zooms
(pinning the baseline); with the button held, scrolling zooms in and out
regardless of shift; during a wheel-button drag-pan, plain wheel input is
still swallowed while wheel-button scrolling zooms, and panning is back
after release. Two regression tests pin the grabbed point under the
cursor: one batches the zoom with a pan landing in the same React flush,
one holds the pan's frame back until after the wheel fires (through a
file-level `withBatchedUpdatesThrottled` mock, since the test setup makes
the throttle synchronous). Both fail on the previous code by 11.8 and
2.7 scene units respectively.
Claude Fable 5.1, high effort
* feat(editor): "zoom with scroll wheel" preference
Adds `appState.zoomWithScrollWheel` (default `false`, persisted to
browser storage like the other preferences), for mouse users who would
rather scroll to zoom: a plain wheel zooms around the pointer, and
ctrl/cmd+wheel pans vertically instead — the two roles swap, the way
tldraw's wheel-behavior preference does it. Shift+wheel keeps panning
horizontally, and the wheel-button zoom keeps winning over everything.
One consequence to be aware of: a trackpad pinch arrives as ctrl+wheel,
so with the preference on it pans.
The toggle lives in the main menu's preferences submenu ("Zoom with
scroll wheel", right under "Select on"), exposed as
`MainMenu.DefaultItems.Preferences.ToggleZoomWithScrollWheel` and backed
by the `zoomWithScrollWheel` action, allowed in view mode since it only
concerns navigation.
Tests: the preference is off by default and its action toggles it; with
it on, plain wheel zooms while ctrl and cmd wheel pan vertically, shift
still pans horizontally and the wheel button still zooms. Snapshots pick
up the new default.
Claude Fable 5.1, high effort
* perf(editor): keep the zoom bitmap cache across pan frames during a wheel zoom
`viewport.translate` cleared `shouldCacheIgnoreZoom` on every call. Wheel
zoom sets the flag so elements draw from zoom-scaled cached bitmaps, but
a drag-pan frame landing between two ticks cleared it again, and the
static renderer then re-rasterized every element at a zoom the next tick
was about to change. Wheel-button zoom-while-panning interleaves the two
by design (the old `isPanning` gate made the combination impossible with
a mouse); trackpad pan-plus-pinch has always alternated plain and ctrl
wheel events the same way.
Measured with 1,200 rough shapes on screen, a 12-tick zoom with a small
pointer move on every frame: 10,434 / 8,774 bitmaps regenerated in two
runs, longest frame 242 / 283 ms, gesture 2.9 / 2.3 s. With the pointer
still: 0 bitmaps, 9 ms, 0.39 s.
The reset now happens only when a gesture interrupts an animated
`setViewport`, whose frames set the flag and whose completion handler
would have cleared it. Everywhere else the flag is left to the zoom paths
and their 300 ms debounce. After the change the moving-pointer run
regenerates 0 bitmaps, longest frame 25–33 ms, gesture 0.7–0.8 s. A
plain wheel pan within 300 ms of a zoom now draws from scaled bitmaps
until the debounce fires instead of re-rasterizing on its first frame.
Tests: pan frames between wheel-button zoom ticks keep the flag until the
gesture is idle (fails on the previous code); the interrupted-animation
test also pins the reset, with a 60 s animation and a polling assertion
so a saturated machine cannot finish the animation before the check.
Claude Fable 5.1, high effort
* fix(editor): handle wheel input over a frame label once
The frame label had a React `onWheel` handler while also sitting inside
the editor container, whose native wheel listener already accepts
`.frame-name` targets. Both received the same event, so every wheel tick
over a label panned or zoomed twice (measured: −140 px of scroll for a
tick that moves the canvas −70 px elsewhere). React registers `wheel`
as passive, so the React path could not even preventDefault. Predates
this branch; with the zoom-with-scroll-wheel preference it became a
two-step zoom per tick over labels.
Drop the prop. With no React path left, the wheel handler's event type
narrows to the native `WheelEvent`.
Test: a wheel event on a frame label pans one step; it fails on the
previous code by exactly one extra step.
Claude Fable 5.1, high effort
* refactor(editor): model the wheel preference as an input device
`appState.zoomWithScrollWheel` becomes `appState.inputDevice:
"auto" | "mouse" | "trackpad"`.
Claude Fable 5.1, high effort
* fix(editor): decide whether a translate zoomed against the state it applies to
`viewport.translate` captured `prevZoom` from `app.state` before queuing
its update, then a second updater compared it with the zoom it found in
`prevState` to tell a zoom apart from a pan — a zoom drops the rubberband
overscroll to 0, a pan keeps it. With a zoom queued in the same React
flush, `app.state` still holds the pre-zoom value, so a pan applied on
top of that zoom read as a zoom of its own and hard-clamped the
overscroll away in one frame instead of easing it back. Two wheel events
in one flush could already do this; the wheel-button zoom makes it
routine, as the handler applies the pending pan move on every tick.
The two `setState` calls become one updater: the update is applied to
`prevState`, the zoom comparison is between that state and the result,
and the constrained viewport is merged into it. No captured state, no
ordering to get wrong.
Test: rubberbanded past the box edge, a ctrl+wheel zoom tick and a wheel
pan batched into one flush keep the overscroll; on the previous code it
lands exactly on the edge.
Claude Fable 5.1, high effort
* fix(editor): pan sideways on a horizontal-only wheel; no-op zoom ticks at the limit
In mouse mode a wheel event with only a horizontal delta — a tilt wheel,
a sideways two-finger scroll — took the zoom branch with `deltaY` 0: no
viewport change, but every such event flipped the bitmap-cache flag,
cancelled collab follow and re-armed the cache debounce, and the sideways
scroll itself went nowhere. A wheel with no vertical delta never zooms
now; it falls through to the pan, which moves the canvas by `deltaX`. A
wheel with no delta at all is ignored outright.
The zoom updater also returns early when the tick lands on the zoom it
started from — at MIN or MAX zoom — instead of setting the cache flag and
redrawing the scene on every tick. This predates the branch. To make
that a real no-op, `viewport.translate` treats a `null` update as nothing
to do rather than re-constraining and re-setting the whole state.
Tests: in mouse mode a horizontal-only wheel pans sideways and leaves the
cache flag alone; a zoom-out tick at MIN_ZOOM changes nothing. Both fail
on the previous code.
Claude Fable 5.1, high effort
* feat(editor): sticky notes
* clamp sticky note font size
* [dragInput] reject non-finite values
* chore: prettier formatting after rebase
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* chore(editor): sticky notes cleanup (plan §7.1)
- hide `transparent` in the sticky stroke picker through master's
`excludedColors` (#11872) instead of the branch's own
`hiddenPaletteColorNames`; the swatch becomes a grid-preserving
placeholder, its hotkey stays dead, and arrow-key navigation steps over
it in the arrow's direction (unit + integration tests)
- move the text pixel-snap change out to `dwelle/text-pixel-snap`
(705e497e2): it affects every text element at every zoom and is not
zoom-aware, so it lands separately
- rename `STICKY_NOTE_DEFAULT_FONT_SIZE` → `STICKY_NOTE_FALLBACK_FONT_SIZE`:
it is only the non-finite fallback; new sticky text seeds its ceiling from
`currentItemFontSize` (decision D3)
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): one sticky note layout core + resize intents (plan §7.2, 1/2)
- `getStickyNoteLayout` is the single fit/grow/position calculation (pure;
ceiling-anchored size grid, warm-started binary search instead of the
linear descent); `updateStickyNoteLayout` applies it to a scene and runs
the bound-arrow pass by default (callers forward `simultaneouslyUpdated`
or opt out when they own a pass); `relayoutStickyNotes` applies it inside
immutable element arrays, identity- and version-preserving
- resize intents are absolute values recomputed from the gesture-start
snapshot on every pointer-move (`getStickyNoteResizeIntent`): width-only
gestures keep the base height, height gestures set it, proportional
gestures (Shift on any handle, aspect-locked multi-select, Stats group)
also scale the font ceiling, flips preserve everything; the content
correction anchors at the held edge (n* → bottom, Alt → center,
Shift+E/W → center). The corner pre-fit clamp and the multi-resize
sentinel/veto are gone: one fit per pointer-move
- arrows bound to a note follow text-driven growth, and multi-resize /
Stats group update them after the content correction, not before
- `fontSizeMax` is `number | null`; every read/write goes through the
container-aware `getUserFontSize` / `getUserFontSizeUpdate` (a detached
label with a stale ceiling neither shows nor keeps writing it); unbind
clears it and returns an empty note to its base height; restore seeds or
clears it after binding repair and normalizes a sticky label's stroke
- paste styles lays out a restyled note and its label together in a
post-pass (no phantom-container mismatch) and reads the source ceiling
from the copied snapshot rather than the fitted size
- `redrawTextBoundingBox` / `handleBindTextResize` delegate sticky notes up
front (no wasted generic wrap); the `refreshTextDimensions` sticky arm and
the wysiwyg duplicate arm are gone; `clampStickyNoteProps` becomes the
identity-preserving `normalizeStickyNote`
Tests: content-pinned corner drag keeps the requested base, Shift+E scales
note/base/ceiling, width-only drag preserves the base of a grown note,
Shift released mid-gesture restores gesture-start values, flipping a rotated
grown note keeps base/ceiling/label angle, multi-resize syncs an empty
note's base.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): sticky note invariants in changeProperty + regression tests (plan §7.2, 2/2)
- `changeProperty` normalizes sticky notes after any property write
(identity-preserving `normalizeStickyNote`), replacing the three per-action
wraps in the background, sloppiness and roundness actions
- tests (new `tests/stickyNotes.test.tsx` + restore): arrows bound to a
note follow text-driven growth while typing; binding free text seeds the
ceiling and unbinding clears it (`null`) and returns the note to its base
height; pasting styles copies the user's ceiling and lays out the note
together with its label; unselected notes keep object identity through
property actions; a transparent background write is normalized; restore
clears a stale ceiling on unbound text and seeds ceiling + visible stroke
on a sticky label
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): sticky note creation feel + sticky color domain (plan §7.3)
Creation
- a note starts as a 0×0 draft inserted like every other tool and is
previewed at its true dragged size (no jump to 40px on the first move);
a gesture under the drag threshold is a click → the default 250×250
square centered on the pointer; a longer drag snaps to the 40×40 minimum
only on release, growing away from the origin corner. The preview
suppression flag and the pointer-move sticky arm are gone
- `normalizeStickyNote` splits into style (constructor + every pass) and
geometry (finalize, restore, action passes) so a draft is legal
Colors — sticky notes are their own color domain (decision D2)
- new `currentItemStickynoteBackgroundColor` default (yellow) next to the
stroke one; both persisted/restored non-transparent; new notes and their
labels seed from the sticky defaults (a label takes the note's stroke)
- own top-pick slots (`colorTopPicks.stickyNoteStroke/Background`) and
classic note picks; transparent excluded like bucket fill
- one `resolveColorTarget` (regular / sticky / mixed, incl. the text being
edited) resolved at execution time in the stroke and background actions'
`perform`; the panel only sends `{ color }`, so the memoized picker's
stale closure can no longer write the wrong tool's default (A1)
- one `getColorUpdate` policy used by the actions, both eyedroppers (which
now include bound labels, so a stroke pick colors a note's visible text —
1.12), paste styles and bind-existing-text (a transparent label bound to
a note takes the note's text color — A3); the per-surface forks and
`isStickyNoteStrokeColorElement` are gone
Tests: click under the threshold, 20px drag previews at 20 and snaps to 40
with the origin corner fixed (both directions); closed-popup top pick after
a tool switch writes the sticky default; mixed selection writes both
domains; notes are created from the sticky defaults; bind normalizes a
transparent label; the keyboard eyedropper colors a note's label. App-state
snapshots gain the three new keys.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): font-aware minimum sticky note size
The 40×40 floor let a freshly placed note grow on the very first keystroke:
one line at the default 20px ceiling plus the 16px padding needs 57px.
- `STICKY_NOTE_MIN_SIZE = 75` replaces the width/height pair as the data
floor (normalization, layout, restore)
- `getStickyNoteMinSize({ fontSize, fontFamily })` =
max(75, round(ceiling × lineHeight) + 2 × padding) is the UI floor: the
creation snap on release uses the current font size/family, the single
resize floor uses the label's ceiling (constant floor for an empty note).
Excalifont: 75 up to the L ceiling, 77 at 36px, 92 at 48px
Tests: the 20px drag now snaps to 75; a 48px ceiling yields a 92px note
that keeps its height on the first character.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* test(editor): sticky note regression matrix (plan §7.4) + two Stats fixes
Tests (27 new): Alt/center resize keeps the center of a content-pinned
note; proportional multi-select scales the label's ceiling, a free
multi-select of an empty note uses the requested height; a proportional
gesture returning to scale 1 restores everything; rotated growth keeps the
top edge; the fit takes ≤ 2 measurements on a warm keystroke and ≤ 12 on a
cold search from a 512 ceiling; a lowered ceiling wins over a still-fitting
old size; odd/fractional ceilings stay reachable on the ceiling-anchored
grid; the font-aware minimum size. Bound arrows follow the note on unbind,
after a content-constrained resize and after a font-size action, and are
not moved twice when resized as part of the same selection. A top pick
while editing a note's label targets the label and the sticky default; the
preview eyedropper colors a selected note's label; paste styles resolves a
since-deleted source's ceiling from the copied snapshot; a detached label
with a stale ceiling neither shows nor writes it; duplication keeps the
ceiling and base height; an empty note escaped from editing stays and is
removed by undo; Stats W keeps the base height and a group W edit scales
the ceiling; restore normalizes both sticky defaults, keeps the new
top-pick slots and refits note + label under `refreshDimensions`; unit
tests for `resolveColorTarget` (regular / sticky / mixed / editing) and the
default normalization.
Source fixes the tests surfaced:
- Stats `DragInput`: the typed-value path handed callbacks the live
elements map as "original", so gesture-start values (a note's width, its
label's ceiling) read as the already-applied values; it now snapshots the
scene like the pointer-drag path does
- Stats group resize (`MultiDimension`): a group unit lists the note's
label too and scaled it as a standalone element after the note, wiping
the fitted size; the note's layout owns its label
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): sticky note skeleton API, tool hint, help row, docs (plan §7.5)
- `convertToExcalidrawElements` accepts `{ type: "stickynote", x, y, label?,
... }` (new `ValidStickyNote` skeleton member): the note is constructed
through `newStickyNoteElement` + `normalizeStickyNoteGeometry` (250×250
default, `baseHeight` finalized, sticky color invariants), and a label is
bound through the sticky fit so its `fontSize` becomes the ceiling and the
note grows only if the text overflows at the minimum size (decision D7)
- tool hint for the sticky note tool ("Click to place a note, or drag to
size it") and the `N` shortcut row in the help dialog
- dev-docs: "Sticky Notes" section in the element-skeleton page; CHANGELOG
entry (PR number placeholder)
Tests: skeleton defaults, invariant enforcement on given props, label
binding with the ceiling and the note's text color, growth for an
overflowing label.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* refactor: move the seeded PRNG (mulberry32) to @excalidraw/common
Pure utility next to `randomInteger`/`reseed`; the sticky note corner
jitter imports it from there.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* refactor(editor): drop the dead roughjs Drawable for sticky notes
Nothing ever generated or drew it: both renderers paint a note directly from
`getStickyNoteRenderPoints`, and every `ShapeCache` consumer is type-gated
to the rectangle family or linear elements. It also disagreed with the
rendered outline (generic corner radius, no jitter). Sticky notes now sit
with text/image/frame in the `null`-shape group, which the cache treats
as a valid value.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): sticky note creation-date footer
Every note reserves a 32px band under its label body and paints the
note's `created` date there, on canvas and in SVG export: "7 Sep" while
the year is the current one, "7 Sep 2025" otherwise, nothing for an
unknown timestamp (the band stays reserved so geometry never depends on
data availability). The label form is chosen by width bucket, never
measured, so painting stays measurement-free — server-side SVG export has
no text measurer — and an absolute date means exports never go stale.
- `STICKY_NOTE_FOOTER` and `STICKY_NOTE_BODY_INSET_Y` in @excalidraw/common;
`getStickyNoteDateLabel` / `getStickyNoteFooter` in stickyNote.ts
- the layout, `getBoundTextMaxHeight`, the text editor and both renderers
share the one inset; a rotated label rotates about the note center, not
the now-asymmetric body center
- `getStickyNoteMinSize` returns `{ width, height }`; creation and resize
clamp each axis to its own floor (a Shift drag stays square)
- tests: date label, width buckets, body height, resize floor, SVG + canvas
export, creation minimums
Plan: sticky_notes_review_final.md §9.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): image tool into "More tools", letter shortcut badges
With the sticky tool on N between text (8) and eraser (0), the numbered
badge row no longer reads as a sequence. On desktop and tablet, move the
image tool into the "More tools" menu (first entry, still `9`,
`UIOptions.tools.image` keeps hiding it) and badge the toolbar tools
with their letter shortcuts (V R D O A L P T N E) instead of numbers.
The number keys keep working; tooltips and the help dialog are unchanged.
The mobile toolbar keeps its image slot.
- Toolbar.tsx: image item in `ExtraToolsDropdown` (trigger highlight and
icon while active), `UIOptions` passed through for the gate
- Tools.tsx: `keyBindingLabel` prefers the letter
- tests: `UI.clickExtraTool`, image test uses it, toolbar describe in
tool.test.tsx (menu placement, UIOptions gate, letter badges)
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): a sticky note and its label share one ink
The creation-date footer paints from the note's `strokeColor`, the label
from its own, and three writes let them drift: coloring the label while
editing it (the wysiwyg clears the selection, so `changeProperty` targets
only the edited text), binding an already-colored text (only transparent
was rewritten), and paste styles from a source whose container and label
carry two colors. Red text under a black date.
The note's `strokeColor` is its ink — the seed for a new label and what
the footer paints with — and the label always mirrors it:
- `syncStickyNoteInk(elements, prevElementsMap)`: after a write, copies
the side that changed onto the other; when both changed or the data
drifted, the label wins (it is the text the user styled); a transparent
label takes the note's color; identity-preserving when nothing changes
- entrances: the stroke action (after `changeProperty`, which covers edit
mode), paste styles (before the relayout), bind text (the text's color
wins, transparent falls back), the skeleton path (a label that sets its
own color gives it to the note), restore (label wins over a drifted note)
- the stroke picker reads "Text color" for notes (`labels.textColor`)
- tests for the helper and for every entrance
Plan: sticky_notes_review_final.md §12.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* make footer opacity=1
* chore: fix sticky note test import order
* feat(editor): drag a tool out of the toolbar to drop a default-sized element
Press a tool button and drag onto the canvas: a default-sized element
follows the pointer as a translucent preview and is placed where the
pointer is released. Sticky notes opt in; the mechanism is generic.
`App.toolDrag.ts` owns the gesture. `DRAGGABLE_TOOLS` is the registry —
a tool provides `createElement(app, center)` (the element it drops,
centered on the pointer, from the same `currentItem*` defaults a click
uses) and an optional `onDrop` (a sticky note starts editing its label).
Adding a tool is one entry.
The preview exists only on the unit until the drop: not in the scene, the
store or the history, so collaborators never see it and Escape,
pointercancel, window blur or a release outside the canvas leave nothing
behind. It is painted by the existing `NewElementCanvas`, drawn exactly as
it will land, with the canvas itself made translucent (a CSS opacity on
the canvas — per-draw-call alpha would darken where a shadow and a fill
overlap).
The button arms on pointerdown (a new `onPointerDown` hook on the toggle
`IconButton`) and the drag starts once the pointer has moved
`DRAGGING_THRESHOLD`, so a plain click still selects the tool. Listeners
live on the owner window like the other pointer gestures. The drop is
`insertNewElement` + one store capture (one undo entry), selects the
element and switches to the preferred selection tool — whatever tool was
active (an arrow, say) must not stay armed under the dropped element or
its editor. The hit test prefers `elementFromPoint` (sees through a
touch's implicit capture on the button) and falls back to the event
target where it is missing (jsdom).
Made public on App for the unit: `store`, `startTextEditing`,
`getCurrentItemRoundness`, `getCurrentItemStrokeWidth`.
Tests: drag → preview with an untouched scene and history → drop centered
at the pointer with one history entry, the editor open and the selection
tool active, undo removes it; Escape mid-drag leaves nothing and a late
pointerup is inert; a release outside the canvas drops nothing; a plain
click still selects.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): default a text element's fontSizeMax to null
`newTextElement` left `fontSizeMax` undefined while restore normalizes it
to `null`. `Delta.distinctKeysIterator` compares with `!==`, so a
restored copy of a locally created text element reported a phantom
`fontSizeMax` change — today only in collab reconciliation deltas, which
are not undoable, but a latent source of spurious version bumps.
Normalize to `null` in the constructor, like `labelPosition`. Snapshots
change accordingly (`undefined` → `null`), including the embedded scene
payload in the SVG export snapshot.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* chore(editor): drop a duplicated scheduleCapture in the sticky note finalize
A paste error: the two calls in one tick set the same flag.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): decide history visibility from the applied result
Creating a sticky note and abandoning its editor by clicking out left two
history entries: the note's creation, and one that only deleted the empty
label and dropped the note's reference to it — nothing a user can see, so
the first undo appeared to do nothing. (Escape left the same deletion
pending instead, folded into the next entry.) The text tool's own
click-create-and-abandon had the same invisible entry.
History already skips entries with no visible change, but visibility was
decided per property patch, before binding repair and layout ran: an
`isDeleted` flip or a `boundElements` edit always counted, and anything
layout moved afterwards never did.
`ElementsDelta.applyTo` now decides it from the applied result. After the
deltas, reordering, binding repair and text/arrow layout, the "before"
and "after" of every affected element are compared:
- `idsToCheck` = the changed elements plus what layout can move for them:
a text's container and everything in `boundElements` (a container's
label and arrows); the set is walked as it grows, so an arrow brings in
its own label.
- Unchanged elements are shared between the incoming map and the result
and layout mutates them in place, so their "before" is a shallow copy;
changed elements already have a fresh instance. The whole scene is
never copied.
- An element counts as visible only if it is not deleted and, for text,
not empty — except an empty label carrying arrow bindings or sitting on
an arrow, where it cuts the gap. `version`, `versionNonce`, `updated`,
`created` are metadata and `index` is covered by the z-order check;
`boundElements` is compared as `type:id` strings with references to
empty labels dropped, so binding repair that rebuilds equal objects
reads as unchanged. Everything else counts.
A dev/test-only assertion records every element's version before layout
and throws if layout bumped one outside `idsToCheck`, so a new layout
dependency fails a test instead of letting undo silently skip a real
change. For that to work the `return` had to leave the `finally` block: a
return in `finally` overrides a thrown exception, so the existing
dev/test rethrow for failures in reordering and layout never actually
propagated. Production behavior is unchanged — the catch still returns
with the flag forced to visible.
Cost, production build, median per `applyTo`: sparse changes at parity
through 50k elements; 10k visible bulk updates +13%; 10k metadata-only
updates 44 → 95 ms, because proving "nothing visible" cannot stop at the
first element — the case the old code answered wrongly. `applyTo` runs
on undo/redo and the version slider, both user-paced.
Creation and typing still undo separately, and a drop from the toolbar
still records at the drop. Tests: delta-level (empty-label deletion and
restoration on a rectangle and a sticky note ignored; a non-empty label,
an arrow's label gap, a container resized by a restored label, arrow
bindings on empty text, a label and an arrow repositioned by a container
redraw all visible; excluded or already-applied properties and a
metadata-only update invisible; snapshot restoration visible) and the
sticky note flows (Escape, click-out, font change on an empty label,
typing).
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): snap sticky note placement to the grid
* perf(editor): ignore arrow bindings in sticky layout input check
* feat(editor): center a sticky note's label in the whole note, tighten the footer
A middle-aligned label was centered in the body above the creation-date
footer, so it sat visibly high — half a footer above the note's center.
It is now centered in the whole padded note (`height − 2·padding`), the
footer ignored, and only pushed up against the body's bottom once
centering would run it into the footer. The fit and the growth rule are
unchanged: the note still grows at the same label height, no vertical
budget is lost, and top and bottom alignment are as before. Rotation
already turned the label about the note's center.
The footer takes less room: its band shrinks from 32px to 20px and the
date's baseline is defined from the note's bottom edge (14px) rather than
from the padding, so the glyphs sit ~11px from the edge (was 17) with
~13px to the label body above (was 19). The vertical inset follows
(64 → 52), and with it the font-aware minimum note sizes.
Tests: a middle-aligned label is centered on the note's center at three
angles; centering is clamped only once it would overlap the footer;
existing sizes derive from the inset constant.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): resize sticky notes proportionally by default
* fix(editor): preserve resize flips and text container anchors
Apply minimum sizes and proportional font scaling to dimension magnitudes, then restore their signs for shared flip geometry.
Share rotation-aware positioning for text-driven height changes and pass vertical flip state through single and multiple-element resizing.
Add regression coverage for mirrored resizing, proportional minimum sizes, and text growth after crossing the resize anchor.
* feat(editor): lift a seeded sticky note corner at high roughness
Curve one corner at roughness 2, chosen from the note seed so it stays consistent through redraws and resizes. Pull its shadow inward by half the bend while retaining the existing down-right offset.
Share the generated paper and shadow paths between Canvas and SVG rendering.
* fix(editor): share the default sticky note color with its quick pick
* refactor(editor): rename a label's `fontSizeMax` to `baseFontSize`
The field holds the font size the user picked, from which the sticky note
layout derives the fitted `fontSize`. "Max" described today's fitter (it
only shrinks); "base" names the intent and pairs with the note's
`baseHeight`, the other user-set value the layout derives from. Renamed
before the field ships, since it is persisted in scene files.
The type is now required (`number | null`): the constructor and restore
already always write it, and history deltas compare with strict
inequality, so an omitted key against `null` would record a spurious
change. Making it required lets tsc catch producers that omit it (one test
fixture did). Helpers follow: `getBaseFontSize`, `getBaseFontSizeUpdate`.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): slightly strengthen sticky note edges
* feat(editor): color a sticky note's background while editing its label
While editing a note's label the styles panel targets the label, which has
no fill, so the background picker was gone and the note's color could only
be changed after leaving the editor. The picker now stays available while
editing, shows the note's fill, and a pick colors the note — text color and
background in one editing pass.
One helper, `getColorTargetElement`, decides where a color pick on an
element lands (a background pick on a note's label goes to the note); the
target resolver, the panel predicate, the panel value and the action all
use it, so the picker also gets the sticky domain (sticky picks, no
transparent, the sticky default written).
Also fixes a latent bug in the background action: with nothing selected,
`selectedElements.every(isLine…)` was vacuously true, so the action took
the polygon branch and did nothing. Unreachable before, since no background
picker was available without a selection.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix changelog
* fix snaps
* more snap
---------
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): blit cached element bitmaps on whole device pixels
Elements are painted from cached bitmaps, blitted 1:1 with smoothing
disabled for unrotated and right-angle elements. Nearest-neighbor at a
fractional offset is then a pixel-exact copy shifted to the nearest
pixel — except at an exact half pixel, where a GPU-accelerated canvas
decides the rounding per scanline by float precision: a few rows sample
the neighboring row and glyph strokes come out doubled or broken, varying
with scroll and position. A centered label lands on a half pixel
routinely (odd free space ÷ 2), which is how it showed up on sticky notes.
Measured in Chrome: a label blitted at y = 639.5 had 3 of 82 scanlines
taken from the adjacent row; rounded to 640 it was clean.
Round the blit position to whole device pixels for those elements. The
context is scaled at the blit (canvas scale × zoom ÷ devicePixelRatio),
so the rounding goes through `context.getTransform()`: rounding the
pre-zoom value only lands on device pixels at 100% zoom. Rotated
elements are resampled regardless and are left alone; export draws
directly and is unaffected.
Tests: the static canvas's `drawImage` events, with their CTM, land on
whole device pixels for text and a rectangle at zoom 1, 1.5, 0.73 and
2.2 under fractional scroll; a rotated element keeps its offset.
Extracted from dwelle/sticky-notes-2 (originally eddb67ca0).
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): draw the canvases at a whole-device-pixel scroll
Panning writes a fractional scroll (pointer delta ÷ zoom). With every
bitmap landing on its nearest device pixel, a fractional scroll means
elements with different sub-pixel phases jump on different frames — a
one-pixel wobble between neighbors, a label shifting against its box —
and one scroll value in every pixel puts every integer-positioned
element on the half-pixel boundary at once.
Round the scroll to whole device pixels at render time, in all three
renderers with the same formula so overlays sit on the content — the way
a browser scrolls a page: each element keeps its own constant sub-pixel
phase and the scene moves rigidly. The real scroll in state is untouched,
so hit-testing and DOM overlays are unaffected; the difference stays
under half a device pixel. Export is excluded (it draws vectors).
Tests: the helper rounds to device pixels and is identity when already
whole; a rectangle at integer coordinates blits on whole device pixels at
zoom 1 and 1.5 under fractional scroll, and a scroll a tenth of a pixel
further lands on the same pixels.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* feat(editor): draw grid lines on whole device pixels at every zoom
The grid was nudged onto the pixel grid only at 100% zoom, and only when
the scroll happened to be whole; at any other zoom its one-pixel lines
landed on fractional device pixels and rendered as two lighter pixels.
Draw each line a whole number of device pixels wide, centered to cover
them exactly (on the half pixel when the count is odd), computed from the
zoom and the canvas scale — which also makes "one pixel" one device pixel
group at devicePixelRatio 2 instead of a fractional pair. Lines thinner
than a device pixel (zoomed far out) keep their sub-pixel width: their
lightness is the point. The zoom-1-only nudge is subsumed.
Test: with grid mode on, every grid path start on the static canvas has
its across-axis coordinate on a half device pixel at zoom 1, 1.5 and 2.2
under fractional scroll.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): snap right-angle blits via the transform origin; grid width in device pixels
Two review findings.
Elements rotated by 90° or 270° enter the snapping branch (smoothing is
off for right angles too), but their transform has near-zero `a` and `d`
with the scale in `b`/`c`. Dividing by the diagonal sent the bitmap far
offscreen — a rectangle at (110.37, 120.61) vanished at both angles.
The snap now moves the transform's origin onto the rounded device
position of the blit and draws at (0, 0): rotation, mirroring and scale
stay in `a`–`d`, no inverse is needed, and the origin is an exact integer
even in the canvas's float32 matrix (mapping a rounded position back
through user space left it ~1e-5 off).
The grid's "at least one device pixel wide" test compared
`(1 / zoom) × zoom × scale` against 1 exactly; at 190% that product is
0.9999999999999999, so those lines skipped snapping and stayed blurry
while neighboring zooms were crisp. The width is now computed straight
in device pixels, `min(scale, max × zoom × scale)`, so there is no round
trip to tolerate.
Tests: rectangles at π/2 and 3π/2 blit on whole device pixels and stay
next to the element; the grid test includes 190%. The blit helper in the
test maps positions through the full matrix. The CHANGELOG bullets link
the PR.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* refactor(editor): one devicePixelRatio read for the blit, no-op padding scaling dropped
`drawElementFromCanvas` read `window.devicePixelRatio` eleven times; it
reads it once. That read stays the global one on purpose: the cached
bitmap was generated with it (`generateElementCanvas`) and the blit's
size math needs the same value, so switching this path to the owner
window's ratio is a separate change that has to include bitmap
generation. `(padding × scale) / scale` is `padding`.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): snap blits only where smoothing is off, through one predicate
The snap ran during zoom gestures too, where the cached bitmaps stay at
the old scale and are resampled with smoothing on: rounding there could
only make elements twitch as the scale changes.
The smoothing switch and the snap now share `canSnapElement` — unrotated
or at a right angle, and not mid-gesture — so the two cannot drift
apart. It is eligibility, not a guarantee of a 1:1 copy: freedraw is
blitted with smoothing on and a size-capped cache is rescaled; snapping
is harmless for both.
Test: with `shouldCacheIgnoreZoom` set, the blit keeps its fractional
position.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
* fix(editor): snap a label relative to its container, tie-safe
Each bitmap rounding its own origin lets a label shift by a pixel against
its box as a drag crosses half pixels (nearest-neighbor sampling did the
same implicitly before the explicit snap). A label under an unrotated
container now anchors to the container's rounded origin and rounds its
offset from it separately, so both land on whole pixels and their
distance never changes; every other element anchors to itself with a
zero offset, through the same code path.
The offset is formed from scene coordinates before the scroll is added,
and a tiny bias breaks an exact half-pixel tie the same way every frame.
Ties are common — any odd scene offset at 150% — and the float noise of
a fractional drag otherwise flips `Math.round` between the two neighbors:
a 200-wide box with a centered label went 92 → 91 → 92 device pixels
across drags of 0, 0.3 and 0.4.
Tests: a plain fractional offset and the half-pixel tie keep a constant
device offset across five fractional drags at 150%.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
The interactive canvas (selection outlines, transform handles, binding
highlights, collaborator cursors, snap lines, scrollbars) was still
composited through `filter: invert(93%) hue-rotate(180deg)` in dark mode
(#10578 only de-filtered the static canvas). The canvas covers the whole
viewport and repaints on nearly every pointer move, so browsers that
composite in software (Firefox/Zen on software WebRender or with hardware
acceleration disabled) paid for a full-viewport color-matrix pass per frame
and dropped from 120fps to ~40fps during marquee/drag. Light mode was
unaffected.
Colors are now mapped in JS via `applyDarkModeFilter`, like the static
canvas. Hardcoded dark-mode values are the exact post-filter equivalents of
the previous ones, so rendering is unchanged, with two intentional
exceptions:
- collaborator cursors and remote selection outlines render in the
collaborators' actual colors (matching their avatars) instead of inverted
ones (per the existing TODO in clients.ts)
- the lasso trail now uses the theme's `--color-selection` like the marquee
selection, instead of a hardcoded light-theme purple that never matched in
dark mode
`--color-selection` for the dark theme now holds the actual rendered color
(#b4b0ff); hosts overriding it no longer need to pre-invert.
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
Arrow labels can be dragged along their arrow. A label's place is stored on the text element as labelPosition, a normalized arc-length parameter (0–1) over the arrow's whole path, and the label's x/y is derived from it. Because the parameter covers the whole path rather than one segment, the label keeps its place when points are dragged, when midpoints are inserted or removed, and when the arrow is resized. (An earlier iteration anchored labels to a segment; that approach is gone.)
Closes#9338.
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* Initial commit
* Segments detection
* Remove aspect ratio
* Refactor
* Fix tests
* Toggle shapeSnap
* Fix linting
* debug: live preview
* Rebase fixes
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Bind to elements (no hover background)
* Shape closed
* Fix rad calc + rename segments
* Comments
* Fix binding highlighting + lints
* Rename to convert to shape
* fix: Binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Refactor spline simplification
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove unused doBoundsIntersect
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Restore type signature
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Propose new button shapes
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove unused types
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Icon shapes
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Element cloning
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Element cloning
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Remove unused
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Shape settings in recognition mode
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove debug
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Actions
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Lint
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Arrowheads for freedraw
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Draw shape tool instead of freedraw
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Test
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Lint
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Keyboard shortcut visibility
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Unique cursor for draw shape
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Remove selection
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Shape selection
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Improve shape recognition
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Further refine shape recognition
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Preview
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Add hint
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Refined shape recognition
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Less ellipse more rectanguloid
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Refined arrow recognition
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Refinerecognition
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Lower linear threshold
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Rectangle head arrow
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: More arrowhead sizes
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Arrow remains an arrow
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Draw line between elements converts to arrow
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* remove pendingDrawShapeElement
* fix: Arrow start point binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Different arrow endpoint heuristic
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Point type
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Various small fixes
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Avoid recompute
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Type issues
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* test(editor): cover the drawShape (snap-to-shape) tool
The drawShape tool had no dedicated tests, which let master's toolbar /
active-tool rewrite silently break it during the merge: actionFinalize
reverted to the selection tool after every sketch, because the drawShape
flow finalizes without a `newElement` and so failed master's new
`&& element` guard.
Covers the behavior the merge had to preserve:
- sketch recognition (rectangle, ellipse) and the too-small no-op
- the tool stays active after finalizing, so shapes can be sketched
consecutively (regression guard for the above)
- activation via the S shortcut and the extra-tools dropdown
- the tool's own cursor
Points are fed into the trail directly rather than through pointermove,
which is rAF-throttled and would drop all but one point per frame — the
same approach lasso.test.tsx uses.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* feat: Add test
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Breakout from App.tsx
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Shortcut is now Shift+X
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: No selecting arrows for shape recog
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Double history
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: PCA + feature extraction recognition
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* reduce and normalize min-size gates
* never select newElement when shape recog tool active
* simplify lifecycle & remove double finalize
* make arrows bindings orbit
* funnel though actionFinalize & fix two unrelated cleanup cases
* use crosshair cursor
* show strokeWidth
* switch icons for drawShape & extraTools
* dedupe getBoundsFromPoints
* remove unused helpers
* jsdoc cleanup
* dynamic trail size
* improve rectangle recognition
* disallow linears to deviate too much from a straight line
* put under freedraw tool on tablet/mobile
* tweak label
* rename `drawShape` -> `autoshape`
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
* feat(packages/excalidraw): add `props.interaction` and `props.ui`
* fix: prevent browser zoom when interaction disabled
* changelog
* clean up interactive state on disable and consolidate `viewMode` and interaction state updates
* render UI rendered to `children` even if editor-exported
* support `allowed.navigation` and `allowed.embeds/interactiveContent`
* change naming `allowed` -> `enabled`
* changelog: add PR links
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* clear flowchart sessions via consolidated `app.flowchart` after master merge
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* refactor getters -> methods
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Closes#8518. Fixes the issue when adding a new child to a flowchart node that already has children (after the first creation session was committed), the new child could land on top of, or misaligned with, an existing sibling.
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
* fix(editor): align constant freedraw stroke width more with generic shapes
* reduce streamline for non-mouse
* do not change `currentItemStrokeVariability` unintentionally
* render penMode button under compact styles panel on tablets
* show stroke variability as standalone button in compact actions menu
* improve toolbar clicking UX with pen
* change streamline defaults
* change to `variable` stroke if toggling penMode for the first time
* fix(editor): elements duplicated when moving frame children
* fix(editor): accumulate reorders across frames in bring-to-front/back
* add invalid-order tests
* fix: make sure moved indices are within range
* add length/duplicate elements guards
When converting between generic shapes, the roundness type was only
recalculated when the target type was a diamond. Converting a diamond
(which uses the proportional radius algorithm) back to a rectangle kept
the proportional radius, so rectangles ended up rendering with overly
round corners.
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Maruthan G <maruthang4@gmail.com>
Co-authored-by: Sivram <withsivram@gmail.com>
Co-authored-by: Jai Kumar Dewani <jai.dewani.99@gmail.com>
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
fix: arrows with bound text labels missing from SVG export
Axis-aligned (horizontal/vertical) arrows with a bound label vanished from SVG exports. The label-gap mask defaulted to objectBoundingBox units, whose region collapses to zero area for a zero-size bounding box, masking out the whole line. Pin the mask to userSpaceOnUse with an explicit user-space region (the coords already used by the visible rect).
Fixes#11439
* fix: Excessive battery usage
* chore: Refactor Eraser, Lasso and Laser pointer to use AnimationController
* fix: Last laser trail element is not removed from SVG
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* enabled ctrl+y redo shortcut on linux and mac
* Apply suggestion from @dwelle
---------
Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>
* fix: Group selection
Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Frames and overlap
Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Remove unnecessary crust
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* revert unused Set signature
* skip ignored elements from group condition
when wrap-mode selecting grouped elements, we should not require to select those we ignore (bound elements or locked ones), else it's impossible to select grouped text containers
unclear whether locked elements should also be excluded - but it feels like a good heuristic on the whole
* apply exclusion
* simplify
* feat: return all elements in group for overlap selection
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
- Vendored fractional-indexing and converted to TypeScript
- Stricter index format validation in fractional-indexing
- Added format validation to fractional index validation
---
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: Make OOB not fatal
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: More conservative temp arrow state update
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Capture condition variables in binding restoration failure
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Reinforce fixedPoint restore
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Even more hardened boundElement in restore
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Extract constant
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Remove superfluous check from restore
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove non-needed code path
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: More robust number test for fixedPoint parsing
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Validate bindings for element being parsed
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* unrelated type safety
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* feat(editor): allow laser pointing in view mode
* feat: allow switching between laser/hand in view mode
* fix lint
* factor out to utils
* fix: only handle primary clicks with the selection/laser tools
* fix(arrow): Overlap arrow behavior
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Lint
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat(editor): reduce binding gap (#10739)
* feat(editor): reduce binding gap to 7px
* feat(editor): reduce binding gap to 5px
* feat(editor): reduce binding gap to 3px
* go back to 5px
* update tests
* feat: Simplified update bind points
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Remove non-needed export
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix. Possessed arrows #1
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Focus point projection stabilization
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Remove arrow stability hack
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Unbound other endpoint
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat(editor): visualize binding midpoints + support for simple arrows (#10611)
* feat: Force exact center focus point
When the projected point is close to center snap it to the exact center.
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Snap to center around side mid point.
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Trigger CI
* fix: Midpoint outline focus point
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Dragging existing arrow reset focus point on outline
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Midpoint indicator
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Rotated mid points
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: No hole
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Cache hits and scene lookups
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove debug
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Consider hit threshold and inside override too
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Increase outline midpoint sticky distance
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Don't show midpoint indicator when no snapping is possible
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Indicate lock-in
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove Map caching
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: incorrect threshold
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: threshold setting
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Hit caching
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Simple arrow mid point selection inconsistency
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: cache override
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Precise know dragging with midpoint refactor
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fear: Frame support
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Crossing arrow won't trigger mid point
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Arrow creation point highlight
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Restore types & tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Restore restore.ts
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: restore.ts
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Elbow arrows reliably highlight center point
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Highlight point ordering
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Bind with focus point across shape
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Lint
* fix: Midpoint and binding alignment
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Indicator color
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: More knob tuning
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Radius
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* simplify point indicators
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Snapshots
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Target point selection
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove non-needed change
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Try again removing non-needed modification
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Inside-inside binding arrow endpoint drag trigger focus point editor
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Area based edge case
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Overlapping new arrow jump
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>
* feat: Force exact center focus point
When the projected point is close to center snap it to the exact center.
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Snap to center around side mid point.
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Trigger CI
* fix: Midpoint outline focus point
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Dragging existing arrow reset focus point on outline
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Midpoint indicator
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Rotated mid points
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: No hole
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Cache hits and scene lookups
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove debug
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Consider hit threshold and inside override too
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Increase outline midpoint sticky distance
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Don't show midpoint indicator when no snapping is possible
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Indicate lock-in
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove Map caching
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: incorrect threshold
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: threshold setting
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Hit caching
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Simple arrow mid point selection inconsistency
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: cache override
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Precise know dragging with midpoint refactor
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fear: Frame support
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Crossing arrow won't trigger mid point
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Arrow creation point highlight
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Restore types & tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Restore restore.ts
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: restore.ts
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Elbow arrows reliably highlight center point
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Highlight point ordering
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Bind with focus point across shape
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Lint
* fix: Midpoint and binding alignment
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Indicator color
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: More knob tuning
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Radius
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* simplify point indicators
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: Arrow update when cloned
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat(editor): reduce binding gap (#10739)
* feat(editor): reduce binding gap to 7px
* feat(editor): reduce binding gap to 5px
* feat(editor): reduce binding gap to 3px
* go back to 5px
* update tests
* chore: Refactor
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Align focus points
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>
* fix: Other binding converted from fixed to orbit unconditionally
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: New arrow creation
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Alt point setting on inside binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Initial arrow creation with Alt
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat(editor): reduce binding gap to 7px
* feat(editor): reduce binding gap to 5px
* feat(editor): reduce binding gap to 3px
* go back to 5px
* update tests
* feat: Focus indicator
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Snapshot update
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Move visualdebug to utils and introduce volume bindable volume visualization
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Move visualdebug to elements
Due to dep circles
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Possible test timeout
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Incorrect hit test point input
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Add fallback when dragged outside of allowed area
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Elbow arrows don't need focus point mgmt
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: End bound indirect fix
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Show indicator when arrow endpoint dragging
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Update bound arrow endpoint at mid-point drag
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Refactor
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Curve endpoint intersection
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Outline focus point is reset on existing arrow drag
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Fix lint
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Dragging focus point off
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Don't show the focus indicator when arrow endpoint is dragged
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Drag area for focus handles
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Focus point size unified
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Size bump for focus knob
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Cache hits and scene lookups
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove debug
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Consider hit threshold and inside override too
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Other shape switching
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* perf: Update tolerance params
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Focus know line width
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: knob offset
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Full overlap
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove Map caching
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: incorrect threshold
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: threshold setting
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Hit caching
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: cache override
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Snapshots
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Redesigned focus point handling
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Inside-inside mode
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove comment
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Allow focus knob outside the shape
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Arrow endpoint offset
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Focus knob element distance
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Increase iteration on curve intersection calc
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Handle disabled binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Alt mode
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Nested shape focus rewrite
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Alt + Ctrl + arrow endpoitn
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Hit ordering for focus points
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Focus point visibility
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* dry out renderFocusPointIndicator
* do not higlight point when dragging & make focus point smaller
* optimize retrieval of selectedLinearElement
* move focus highlighting into renderFocusPointIndicator to DRY out and colocate
* remove `disabled` state from focus highlight
* make focus point stroke color less prominent
* fix: No focus point for multi-point arrows
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Arrow edit mode drag focus point release
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* DRY out arrow point-like drag
* move `focus.ts` to `arrows/focus.ts`
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: Line history
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: More conservative condition
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Move visualdebug to utils and introduce volume bindable volume visualization
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Move visualdebug to elements
Due to dep circles
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: add constants and side methods to packages
* add transform to the element package
* lint
* remove dead code
* put transform types back to transform.ts
* fix imports
* fix imports in test
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: Corner jumping
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Hints
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: No corner avoidance for simple arrows
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* show alt/cmd hint when creating/moving arrow point any time
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* Fixed point binding for simple arrows
Tests added
Fix binding
Remove unneeded params
Unfinished simple arrow avoidance
Fix newly created jumping arrow when gets outside
Do not apply the jumping logic to elbow arrows for new elements
Existing arrows now jump out
Type updates to support fixed binding for simple arrows
Fix crash for elbow arrws in mutateElement()
Refactored simple arrow creation
Updating tests
No confirm threshold when inside biding range
Fix multi-point arrow grid off
Make elbow arrows respect grids
Unbind arrow if bound and moved at shaft of arrow key
Fix binding test
Fix drag unbind when the bound element is in the selection
Do not move mid point for simple arrows bound on both ends
Add test for mobing mid points for simple arrows when bound on the same element on both ends
Fix linear editor bug when both midpoint and endpoint is moved
Fix all point multipoint arrow highlight and binding
Arrow dragging gets a little drag to avoid accidental unbinding
Fixed point binding for simple arrows when the arrow doesn't point to the element
Fix binding disabled use-case triggering arrow editor
Timed binding mode change for simple arrows
Apply fixes
Remove code to unbind on drag
Update simple arrow fixed point when arrow is dragged or moved by arrow keys
Binding highlight fixes
Change bind mode timeout logic
Fix tests
Add Alt bindMode switch
No dragging of arrows when bound, similar to elbow
Fix timeout not taking effect immediately
Bumop z-index for arrows when dragged
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Only transparent bindables allow binding fallthrough
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix lint
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix point click array creation interaction with fixed point binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Restrict new behavior to arrows only
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Allow binding inside images
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix already existing fixed binding retention
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Refactor and implement fixed point binding for unfilled elements
Restore drag
Removed point binding
Binding code refactor
Added centered focus point
Binding & focus point debug
Add invariants to check binding integrity in elements
Binding fixes
Small refactors
Completely rewritten binding
Include point updates after binding update
Fix point updates when endpoint dragged and opposite endpoint orbits
centered focus point only for new arrows
Make z-index arrow reorder on bind
Turn off inside binding mode after leaving a shape
Remove invariants from debug
feat: expose `applyTo` options, don't commit empty text element (#9744)
* Expose applyTo options, skip re-draw for empty text
* Don't commit empty text elements
test: added test file for distribute (#9754)
z-index update
Bind mode on precise binding
Fix binding to inside element
Fix initial arrow not following cursor (white dot)
Fix elbow arrow
Fix z-index so it works on hover
Fix fixed angle orbiting
Move point click arrow creation over to common strategy
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Add binding strategy for drag arrow creation
Fix elbow arrow
Fix point handles
Snap to center
Fix transparent shape binding
Internal arrow creation fix
Fix point binding
Fix selection bug
Fix new arrow focus point
Images now always bind inside
Flashing arrow creation on binding band
Add watchState debug method to window.h
Fix debug canvas crash
Remove non-needed bind mode
Fix restore
No keyboard movement when bound
Add actionFinalize when arrow in edit mode
Add drag to the Stats panel when bound arrow is moved
Further simplify curve tracking
Add typing to action register()
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix point at finalize
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix type errors
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
New arrow binding rules
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix cyclical dep
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix jiggly arrows
Fix jiggly arrow x2
Long inside-other binding
Click-click binding
Fix arrows
Performance
[PERF] Replace in-place Jacobian derivation with analytical version
Different approach to inside binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fixes
Fix inconsistent arrow start jump out
Change how images are bound to on new arrow creation
Lower timeout
Small insurance fix
Fix curve test
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
No center focus point
90% inside center binding
Fixing tests
fix: Elbow arrow fixes
fix: More arrow fixes
Do not trigger arrow binding for linear elements
fix: Linear elements
fix: Refactor actionFinalize for linear
Binding tests updated
fix: Jump when cursor not moved
fix: history tests
Fix history snapshot
Fix undo issue
fix(eraser): Remove binding from the other element
fix(tests): Update tests
chore: Attempt filtering new set state
Fix excessive history recording
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix all tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
fix(transform): Fix group resize and rotate
fix(binding): Harmonize binding param usage
fix: Center focus point
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
chore: Trigger build
Remove binding gap
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Binding highlight refactor
fix: Refactored timeout bind mode handling
fix: Center when orbiting
feat: Color change on highlight
Fix orbit binding highlight
fix: hiding arrow
Fix arrow binding
Fix arrow drag selection logic
Binding highlight is now hot pink
Change inside binding logic for start point
Render focus point in debug mode
Fix snap to center
Fix actionFinalize for new arrow creation
fix: snapToCenter()
80% by length
fix: attempt at fixing the dancing arrows
feat: No center snap when start is not bound
Fix centering for existing arrows
tweak binding highlight color
change `appState.suggestedBindings` -> `suggestedBinding` & remove unused code
Refactor delayed bind mode change
Binding highlight rotation support + image support
fix(highlight): Overdraw fixes
feat: Do not allow drag bound arrow closer to the shape than dragging distance
feat: Stroke width adaptive fixed binding distance
chore: More point dragging centralization
New element behavior
Refactor dragging
Fix incorrect highlight sizing
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix delayed bind mode for multiElement arrows
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix multi-point
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fix elbow arrows
Simplify state
Small positional fixes
Fix jiggly arrows
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Fixes for arrow dragging
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Elbow arrow fixes
Highlight fixes
Fix elbow arrow binding
Frame highlight
Fix elbow mid-point binding
Fix binding suggestion for disabled binding state
Implement Alt
Remove debug
* CHange new arrow creation
* fix: allow inside binding via timeout if arrow has no startBinding
* fix: Delete invariant violation with arrows
* fix: Deleted arrow causes problems
* fix: Dragging issues
* fix: Dragging fix 2
* fix: Disable drag drag when arrow is bound
* fix: Multipoint arrow opposite point movement
* fix: Ctrl+Alt precedence
* feat: Alt inside start binding mode change
* Fix multipoint arrow orbit
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Arrow start inside binding switch
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: New arrow never binds inside
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Small refactor
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Multi-point arrows and linears
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Lint
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Nested shapes handling
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Overlap behavior
* Alt unbind fix
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Existing arrow nested bindable
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Binding suggestions
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Circular dep
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: snapshots
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Alt immediate update
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Laxing on invariants
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: New highlight overdraws arrow
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Image binding rule changed
* Trigger Rebuild
* fix:Highlight flicker
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Fully nested shapes
* fix: Tune nested shape binding
* fix: Size-based orbit jump-in
* fix: Binding highlight stroke on sharp bindables
* fix: Nested shape binding
* fix: history
* fix:More precise element nesting check
* feat:Add tolerance to shape nesting detection
* fix: Reverse
* fix:Change center binding to circular
* ignore invisible elements when binding
* feat: Center point with more precise highlight outlines
* fix:Arrow tool hover stuck highlight
* fix:More stroke width for highlight
* POC: highlight center on hover
* tweak binding highlight width
* render highlight on the outside
* fix: Locked elbow arrow creation
* update hints
* reduce timeout
* handle overlap when both elements the same size
* tweak highlight stroke width some more
* fix:Add intersection padding
* fix: New arrow start orbit when nested binds on the end
* fix: Update history snapshot
* feat: Allow inside binding for new arrows in nested cases
* chore: Logic for measurement
* fix: Locked tool + arrow
* feat: Remove center binding
* fix: Jump arrow inside it gets visially too short
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore:Basic interactive canvas animation re-render trigger for highlights
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat:Highlight animations
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix:Refactored and fixed highlight animation
* fix:Poisoned arrow
* fix Arrow edit mode selection
* fix:Tool lock binding behavior restored
* fix:Overlap inside binding
* fix:Animated binding highlight
* alt anims + increase timeout to 700
* tweak animation some more + remove countdown
* fix: False bind timeout indicator
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: better file normalization (#10024)
* feat: better file normalization
* fix lint
* fix png detection
* optimize
* fix type
* fix: increase rejection delay for opening files with legacy api (#8961)
* Increased input change interval to 1000 ms to fix IOS 18 file opening issue
* increase more
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* feat: library search (#9903)
* feat(utils): add support for search input type in isWritableElement
* feat(i18n): add search text
* feat(cmdp+lib): add search functionality for command pallete and lib menu items
* chore: fix formats, and whitespaces
* fix: opt to optimal code changes
* chore: fix for linting
* focus input on mount
* tweak placeholder
* design and UX changes
* tweak item hover/active/seletected states
* unrelated: move publish button above delete/clear to keep it more stable
* esc to clear search input / close sidebar
* refactor command pallete library stuff
* make library commands bigger
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: Allow already inside bound arrows to continue inside binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: No angle lock over bindable elements
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Center binding on SHIFT key
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Fix ghost start binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* FEAT: No binding to frame cutout
* feat: Bind to frame when frame-bound object hidden part is approached
* fix: revert preferred selection to box once you switch to `full` UI (#10160)
* fix: mobile UI and other fixes (#10177)
* remove legacy openMenu=shape state and unused actions
* close menus/popups in applicable cases when opening a different one
* split ui z-indexes to account prefer different overlap
* make top canvas area clickable on mobile
* make mobile main menu closable by clicking outside and reduce width
* offset picker popups from viewport border on mobile
* reduce items gap in mobile main menu
* show top picks for canvas bg colors in all ui modes
* fix menu separator visibility on mobile
* fix command palette items not being filtered
* fix: Increase transform handle offset (#10180)
* fix: Increase transform handle offset
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Temporarily disable transform handles for linear elements on mobile and tablets
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Linear hidden resize
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* disable mobielOrTablet linear element bbox completely
* fix: Test
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Lint
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: context menu getting covered (#10199)
* do not show z-index actions on mobile or tablet
* fix: context menu getting covered
* fix lint
* fix style popup getting covered
* put contextmenu z-index above sidebar
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* feat: More prominent keyboard shortcuts in hints (#10057)
* Initial
* Memoize
* Styling
* Use double angle brackets for keyboard shortcuts
* Use rem in gap
* Use an existing function for substituting tags in a string
* Revert styling
* Avoid unique key warnings
* Styling
* getTransChildren -> nodesFromTextWithTags
* Use height and padding instead of padding only
* Initial new idea
* WIP shortcut substitutions
* Use simple regex for parsing shortcuts
* Use single shortcut for combos
* Use kbd instead of span
* shortcutFromKeyString -> getTaggedShortcutKey
* Bug fix
* FlowChart -> Flowchart
* memo is useless here
* Trigger CI
* Translate in getShortcutKey
* More normalized shortcuts
* improve shortcut normalization and replacement & support multi-key tagged shortcuts
* fix regex
* tweak css
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: small tweaks to shortcut hints (#10214)
* fix: Test
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Bind mode
* feat: Support special key shortcut highlight
* fix: Lint
* fix: Remove non-needed function
* fix: Skip frame cutout for hover, but keep shape for binding
* fix: Lint
* fix: Restore removal of deleted elements on restore
* fix: Inside-inside during drag
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Arrow vanishes when orbit binding to the same element
* feat: Feature flag support
* Simplified binding
* fix: Diamond corner binding
* feat: Binding highlight band re-added
* feat: Settings menu
* fix: Same shape binding
* fix: set radix PropertiesPopover collision boundary (#10221)
* Set collision boundary
* Calculate collisionPadding dynamically based on container
* Add appState offsetTop and offsetLeft to padding calculation.
Refactor collisionPadding calculation to use app state offsets.
* Update PropertiesPopover.tsx
* popover positioning relative to container
* fix: prevent wrap text in a container to only text that are not bound to a container (#10250)
* fix: only enable wrap text in a container when at least one text element selected is unbound
* Trigger Rebuild
---------
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Uncap the nodejs version requirement (#10238)
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* refactor: single source of truths with editor interface (#10178)
* refactor device to editor interface and derive styles panel
* allow host app to control form factor and ui mode
* add editor interface event listener
* put new props inside UIOptions
* refactor: move related apis into one file
* expose getFormFactor
* privatize the setting of desktop mode and fix snapshots
* refactor and fix test
* remove unimplemented code
* export getFormFactor()
* replace `getFormFactor` with `getEditorInterface`
* remove dead & useless
* comment
* fix ts
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* chore: Update translations from Crowdin (#7429)
* New translations en.json (Punjabi)
* New translations en.json (Polish)
* New translations en.json (Russian)
* New translations en.json (Turkish)
* New translations en.json (Ukrainian)
* New translations en.json (Chinese Traditional)
* New translations en.json (Vietnamese)
* New translations en.json (Galician)
* New translations en.json (Portuguese, Brazilian)
* New translations en.json (Persian)
* New translations en.json (Khmer)
* New translations en.json (Tamil)
* New translations en.json (Bengali)
* New translations en.json (Marathi)
* New translations en.json (Thai)
* New translations en.json (Norwegian Nynorsk)
* New translations en.json (Kazakh)
* New translations en.json (Latvian)
* New translations en.json (Azerbaijani)
* New translations en.json (Hindi)
* New translations en.json (Burmese)
* New translations en.json (Chinese Traditional, Hong Kong)
* New translations en.json (Sinhala)
* New translations en.json (Uzbek)
* New translations en.json (Norwegian Bokmal)
* New translations en.json (Occitan)
* New translations en.json (German, Switzerland)
* New translations en.json (Bengali, India)
* New translations en.json (Kabyle)
* New translations en.json (Karakalpak)
* New translations en.json (Portuguese)
* New translations en.json (Russian)
* New translations en.json (Marathi)
* New translations en.json (Hindi)
* New translations en.json (German)
* New translations en.json (Chinese Simplified)
* New translations en.json (Polish)
* New translations en.json (Romanian)
* New translations en.json (Korean)
* New translations en.json (Chinese Traditional)
* New translations en.json (Hebrew)
* New translations en.json (Hebrew)
* New translations en.json (Slovak)
* New translations en.json (Slovak)
* New translations en.json (Hungarian)
* New translations en.json (Hungarian)
* New translations en.json (Slovak)
* New translations en.json (Hebrew)
* New translations en.json (Hungarian)
* New translations en.json (Korean)
* New translations en.json (Chinese Traditional)
* New translations en.json (Romanian)
* New translations en.json (French)
* New translations en.json (Spanish)
* New translations en.json (Arabic)
* New translations en.json (Bulgarian)
* New translations en.json (Catalan)
* New translations en.json (Czech)
* New translations en.json (Danish)
* New translations en.json (German)
* New translations en.json (Greek)
* New translations en.json (Basque)
* New translations en.json (Finnish)
* New translations en.json (Italian)
* New translations en.json (Japanese)
* New translations en.json (Kurdish)
* New translations en.json (Lithuanian)
* New translations en.json (Dutch)
* New translations en.json (Punjabi)
* New translations en.json (Polish)
* New translations en.json (Portuguese)
* New translations en.json (Russian)
* New translations en.json (Slovenian)
* New translations en.json (Swedish)
* New translations en.json (Turkish)
* New translations en.json (Ukrainian)
* New translations en.json (Chinese Simplified)
* New translations en.json (Vietnamese)
* New translations en.json (Galician)
* New translations en.json (Portuguese, Brazilian)
* New translations en.json (Indonesian)
* New translations en.json (Persian)
* New translations en.json (Khmer)
* New translations en.json (Tamil)
* New translations en.json (Bengali)
* New translations en.json (Marathi)
* New translations en.json (Thai)
* New translations en.json (Norwegian Nynorsk)
* New translations en.json (Kazakh)
* New translations en.json (Latvian)
* New translations en.json (Azerbaijani)
* New translations en.json (Hindi)
* New translations en.json (Burmese)
* New translations en.json (Chinese Traditional, Hong Kong)
* New translations en.json (Sinhala)
* New translations en.json (Uzbek)
* New translations en.json (Norwegian Bokmal)
* New translations en.json (Occitan)
* New translations en.json (German, Switzerland)
* New translations en.json (Bengali, India)
* New translations en.json (Kabyle)
* New translations en.json (Karakalpak)
* New translations en.json (Romanian)
* New translations en.json (German)
* New translations en.json (Slovenian)
* New translations en.json (Chinese Simplified)
* New translations en.json (Spanish)
* New translations en.json (Russian)
* New translations en.json (Chinese Traditional)
* New translations en.json (Turkish)
* New translations en.json (Slovak)
* New translations en.json (Slovak)
* New translations en.json (Hebrew)
* New translations en.json (Hungarian)
* New translations en.json (Korean)
* New translations en.json (Chinese Traditional)
* New translations en.json (Romanian)
* New translations en.json (French)
* New translations en.json (Spanish)
* New translations en.json (Arabic)
* New translations en.json (Bulgarian)
* New translations en.json (Catalan)
* New translations en.json (Czech)
* New translations en.json (Danish)
* New translations en.json (German)
* New translations en.json (Greek)
* New translations en.json (Basque)
* New translations en.json (Finnish)
* New translations en.json (Italian)
* New translations en.json (Japanese)
* New translations en.json (Kurdish)
* New translations en.json (Lithuanian)
* New translations en.json (Dutch)
* New translations en.json (Punjabi)
* New translations en.json (Polish)
* New translations en.json (Portuguese)
* New translations en.json (Russian)
* New translations en.json (Slovenian)
* New translations en.json (Swedish)
* New translations en.json (Turkish)
* New translations en.json (Ukrainian)
* New translations en.json (Chinese Simplified)
* New translations en.json (Vietnamese)
* New translations en.json (Galician)
* New translations en.json (Portuguese, Brazilian)
* New translations en.json (Indonesian)
* New translations en.json (Persian)
* New translations en.json (Khmer)
* New translations en.json (Tamil)
* New translations en.json (Bengali)
* New translations en.json (Marathi)
* New translations en.json (Thai)
* New translations en.json (Norwegian Nynorsk)
* New translations en.json (Kazakh)
* New translations en.json (Latvian)
* New translations en.json (Azerbaijani)
* New translations en.json (Hindi)
* New translations en.json (Burmese)
* New translations en.json (Chinese Traditional, Hong Kong)
* New translations en.json (Sinhala)
* New translations en.json (Uzbek)
* New translations en.json (Norwegian Bokmal)
* New translations en.json (Occitan)
* New translations en.json (German, Switzerland)
* New translations en.json (Bengali, India)
* New translations en.json (Kabyle)
* New translations en.json (Karakalpak)
* New translations en.json (German)
* New translations en.json (Russian)
* New translations en.json (Romanian)
* New translations en.json (Spanish)
* New translations en.json (Chinese Simplified)
* New translations en.json (Marathi)
* New translations en.json (Hindi)
* New translations en.json (Slovak)
* New translations en.json (German)
* New translations en.json (Portuguese)
* New translations en.json (Romanian)
* New translations en.json (French)
* New translations en.json (Spanish)
* New translations en.json (Arabic)
* New translations en.json (Bulgarian)
* New translations en.json (Catalan)
* New translations en.json (Czech)
* New translations en.json (Danish)
* New translations en.json (German)
* New translations en.json (Greek)
* New translations en.json (Basque)
* New translations en.json (Finnish)
* New translations en.json (Hebrew)
* New translations en.json (Hungarian)
* New translations en.json (Italian)
* New translations en.json (Japanese)
* New translations en.json (Korean)
* New translations en.json (Kurdish)
* New translations en.json (Lithuanian)
* New translations en.json (Dutch)
* New translations en.json (Punjabi)
* New translations en.json (Polish)
* New translations en.json (Portuguese)
* New translations en.json (Russian)
* New translations en.json (Slovak)
* New translations en.json (Slovenian)
* New translations en.json (Swedish)
* New translations en.json (Turkish)
* New translations en.json (Ukrainian)
* New translations en.json (Chinese Simplified)
* New translations en.json (Chinese Traditional)
* New translations en.json (Vietnamese)
* New translations en.json (Galician)
* New translations en.json (Portuguese, Brazilian)
* New translations en.json (Indonesian)
* New translations en.json (Persian)
* New translations en.json (Khmer)
* New translations en.json (Tamil)
* New translations en.json (Bengali)
* New translations en.json (Marathi)
* New translations en.json (Thai)
* New translations en.json (Norwegian Nynorsk)
* New translations en.json (Kazakh)
* New translations en.json (Latvian)
* New translations en.json (Azerbaijani)
* New translations en.json (Hindi)
* New translations en.json (Burmese)
* New translations en.json (Chinese Traditional, Hong Kong)
* New translations en.json (Sinhala)
* New translations en.json (Uzbek)
* New translations en.json (Norwegian Bokmal)
* New translations en.json (Occitan)
* New translations en.json (German, Switzerland)
* New translations en.json (Bengali, India)
* New translations en.json (Kabyle)
* New translations en.json (Karakalpak)
* Auto commit: Calculate translation coverage
* New translations en.json (Chinese Simplified)
* Auto commit: Calculate translation coverage
* New translations en.json (Romanian)
* Auto commit: Calculate translation coverage
* New translations en.json (Romanian)
* Auto commit: Calculate translation coverage
* New translations en.json (French)
* Auto commit: Calculate translation coverage
* New translations en.json (Polish)
* Auto commit: Calculate translation coverage
* New translations en.json (Polish)
* Auto commit: Calculate translation coverage
* New translations en.json (Turkish)
* Auto commit: Calculate translation coverage
* New translations en.json (Turkish)
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: mobile view ui issues (#10284)
* hide zen mode when formFactor = phone
* tool bar fixes: icon and width
* view mode
* fix lint
* add exit-view-mode button
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* chore: Update snaps
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Blue highlight
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Diagonal binding point
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove settings
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Jump other binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Hovered arrow mode highlight
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* feat: Alt does not snap
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Check debug
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Alt precise positioning
* fix: Jump out to orbit for new arrows when dragged outside
* fix: New arrow preserved projection
* chore: Remove debug
* chore: Introduce different debug color for orbit and other binding modes
* fix: Restore arrow start point when self binding
* fix: Turn of start jump-out
* fix: Tests
* fix: Select the first possible altBindPoint
* fix: Random projection
* fix: Use last point for existing arrows
* fix: Preserve alternate orbit focus point during drag
* fix: Lint
* fix: Update tests
* fix: Elbow arrow direction at binding
* binding gap and distance and binding highlight tweaks
* chore: Naming refactors
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Alt-duplication copied elements placement (#10152)
* feat: Animation support (#10042)
* fix: banner url (#10315)
* feat: Animation support (#10042)
* fix: Merge discrepancy
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* chore: Remove non-needed code
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Trigger build
* chore: Remove hint for V1
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* shorten focus point diagonal helpers to fix corner binding cases
* fix: Tests
* fix: Multi-point arrow closeness fallback
* fix: Finalize multipoint arrow on binding area click
* fix: Finalize arrow now truly finalzes
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Point click arrow creation jumping to orbit
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Alt+drag movement block
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Trigger build
* feat: hide point highlight when dragging
* feat: hide bbox when dragging points
* revert binding gap increase for elbow arrows
* reset selectionLinearElement on tool change
* chore: Remove debug
* feat: Better restore for bindings
* use elementsMap instead of array when passing to restoreElement
* fix: Arrow angle reset
* fix: Arrow angle
* Arrow angle support
* fix trashing cached canvases in `LinearElementEditor.getElementAbsoluteCoords`
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* refactor device to editor interface and derive styles panel
* allow host app to control form factor and ui mode
* add editor interface event listener
* put new props inside UIOptions
* refactor: move related apis into one file
* expose getFormFactor
* privatize the setting of desktop mode and fix snapshots
* refactor and fix test
* remove unimplemented code
* export getFormFactor()
* replace `getFormFactor` with `getEditorInterface`
* remove dead & useless
* comment
* fix ts
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: only enable wrap text in a container when at least one text element selected is unbound
* Trigger Rebuild
---------
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
* Set collision boundary
* Calculate collisionPadding dynamically based on container
* Add appState offsetTop and offsetLeft to padding calculation.
Refactor collisionPadding calculation to use app state offsets.
* Update PropertiesPopover.tsx
* popover positioning relative to container
* Initial
* Memoize
* Styling
* Use double angle brackets for keyboard shortcuts
* Use rem in gap
* Use an existing function for substituting tags in a string
* Revert styling
* Avoid unique key warnings
* Styling
* getTransChildren -> nodesFromTextWithTags
* Use height and padding instead of padding only
* Initial new idea
* WIP shortcut substitutions
* Use simple regex for parsing shortcuts
* Use single shortcut for combos
* Use kbd instead of span
* shortcutFromKeyString -> getTaggedShortcutKey
* Bug fix
* FlowChart -> Flowchart
* memo is useless here
* Trigger CI
* Translate in getShortcutKey
* More normalized shortcuts
* improve shortcut normalization and replacement & support multi-key tagged shortcuts
* fix regex
* tweak css
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* do not show z-index actions on mobile or tablet
* fix: context menu getting covered
* fix lint
* fix style popup getting covered
* put contextmenu z-index above sidebar
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: Increase transform handle offset
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Temporarily disable transform handles for linear elements on mobile and tablets
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Linear hidden resize
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* disable mobielOrTablet linear element bbox completely
* fix: Test
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* fix: Lint
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* remove legacy openMenu=shape state and unused actions
* close menus/popups in applicable cases when opening a different one
* split ui z-indexes to account prefer different overlap
* make top canvas area clickable on mobile
* make mobile main menu closable by clicking outside and reduce width
* offset picker popups from viewport border on mobile
* reduce items gap in mobile main menu
* show top picks for canvas bg colors in all ui modes
* fix menu separator visibility on mobile
* fix command palette items not being filtered
* compact bottom toolbar
* put menu trigger to top left
* add popup to switch between grouped tool types
* add a dedicated mobile toolbar
* update position for mobile
* fix active tool type
* add mobile mode as well
* mobile actions
* remove refactored popups
* excali logo mobile
* include mobile
* update mobile menu layout
* move selection and deletion back to right
* do not fill eraser
* fix styling
* fix active styling
* bigger buttons, smaller gaps
* fix other tools not opened
* fix: Style panel persistence and restore
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* move hidden action btns to extra popover
* fix dropdown overlapping with welcome screen
* replace custom popup with popover
* improve button styles
* swapping redo and delete
* always show undo & redo and improve styling
* change background
* toolbar styles
* no any
* persist perferred selection tool and align tablet as well
* add a renderTopLeftUI to props
* tweak border and bg
* show combined properties only when using suitable tools
* fix preferred tool
* new stroke icon
* hide color picker hot keys
* init preferred tool based on device
* fix main menu sizing
* fix welcome screen offset
* put text before image
* disable call highlight on buttons
* fix renderTopLeftUI
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: display error message when local storage quota is exceeded
* add danger alert instead of toast
* tweak text
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: support bidirectional shift+click selection in library items
- Enable bottom-up multi-selection (previously only top-down worked)
- Use Math.min/max to handle selection range in both directions
- Maintains existing behavior for preserving non-contiguous selections
- Fixes issue where shift+clicking items above last selected item failed
* improve deselection behavior
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* feat(utils): add support for search input type in isWritableElement
* feat(i18n): add search text
* feat(cmdp+lib): add search functionality for command pallete and lib menu items
* chore: fix formats, and whitespaces
* fix: opt to optimal code changes
* chore: fix for linting
* focus input on mount
* tweak placeholder
* design and UX changes
* tweak item hover/active/seletected states
* unrelated: move publish button above delete/clear to keep it more stable
* esc to clear search input / close sidebar
* refactor command pallete library stuff
* make library commands bigger
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: fixed a bug where a MIME-mismatch in an image would cause an error to update cache
* fix: fixed a bug where a MIME-mismatch in an image would cause an error to update cache
* normalize inside insertImages()
---------
Co-authored-by: Mårten Mossberg <marmo607@student.liu.se>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* Remove local elements when there is room data
* Update excalidraw-app/collab/Collab.tsx
---------
Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>
* Fix for race condition when adding many library items
* Remove unused import
* Replace any with LibraryItem type
* Fix comments on pr
* Fix build errors
* Fix hoisted variable
* new mime type
* duplicate before passing down to be sure
* lint
* fix tests
* Remove unused import
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* feat: allow the hiding of top picks
* feat: allow the hiding of default fonts
* refactor: rename to compactMode
* feat: introduce layout (incomplete)
* tweak icons
* do not show border
* lint
* add isTouchMobile to device
* add isTouchMobile to device
* refactor to use showCompactSidebar instead
* hide library label in compact
* fix icon color in dark theme
* fix library and share btns getting hidden in smaller tablet widths
* update tests
* use a smaller gap between shapes
* proper fix of range
* quicker switching between different popovers
* to not show properties panel at all when editing text
* fix switching between different popovers for texts
* fix popover not closable and font search auto focus
* change properties for a new or editing text
* change icon for more style settings
* use bolt icon for extra actions
* fix breakpoints
* use rem for icon sizes
* fix tests
* improve switching between triggers (incomplete)
* improve trigger switching (complete)
* clean up code
* put compact into app state
* fix button size
* remove redundant PanelComponentProps["compactMode"]
* move fontSize UI on top
* mobile detection (breakpoints incomplete)
* tweak compact mode detection
* rename appState prop & values
* update snapshots
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: restore from invalid fixedSegments & type-safer point updates
* fix: Type updates and throw for invalid point states
---------
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
* feat: drag, resize, and rotate after selecting in lasso
* alternative ux: drag with lasso right away
* fix: lasso dragging should snap too
* fix: alt+cmd getting stuck
* test: snapshots
* alternatvie: keep lasso drag to only mobile
* alternative: drag after selection on PCs
* improve mobile dection
* add mobile lasso icon
* add default selection tool
* render according to default selection tool
* return to default selection tool after deletion
* reset to default tool after clearing out the canvas
* return to default tool after eraser toggle
* if default lasso, close lasso toggle
* finalize to default selection tool
* toggle between laser and default selection
* return to default selection tool after creation
* double click to add text when using default selection tool
* set to default selection tool after unlocking tool
* paste to center on touch screen
* switch to default selection tool after pasting
* lint
* fix tests
* show welcome screen when using default selection tool
* fix tests
* fix snapshots
* fix context menu not opening
* prevent potential displacement issue
* prevent element jumping during lasso selection
* fix dragging on mobile
* use same selection icon
* fix alt+cmd lasso getting cut off
* fix: shortcut handling
* lint
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: awkward point adding and removing on touch device
* feat: move finalize to next to last point
* feat: on touch screen, click would create a default line/arrow
* fix: make default adaptive to zoom
* fix: increase padding to avoid cutoffs
* refactor: simplify
* fix: only use bigger padding when needed
* center arrow horizontally on pointer
* increase min drag distance before we start 2-point-arrow-drag-creating
* do not render 0-width arrow while creating
* dead code
* fix tests
* fix: remove redundant code
* do not enter line editor on creation
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: set cursor to auto when not hovering a point on linear element #9628
* Simplify hover test for cursor
* Add back comment
* Fix test for hit testing
---------
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
* fix : double click on line enables line editor
* fix : prevent double-click to edit/create text
when inside line editor
* refactor: use lineCheck instead of arrowCheck in
doubleClick handler to align with updated logic
* fix: replace negative arrowCheck with lineCheck in
dbl click handler and fix double-click bind text
test in linearElementEditor tests
* clean up test
* simplify check
* add tests
* prevent text editing on dblclick when inside arrow editor
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* Loop Lock/Unlock
* fixed condition. 4 line points are required for the action to be available
* extracted updateLoopLock to improve readability. Removed unnecessary SVG attributes
* lint + added loopLock to restore.ts
* added loopLock to newElement, updated test snapshots
* lint
* dislocate enpoint when breaking the loop.
* change icon & turn into a state style button
* POC: auto-transform to polygon on bg set
* keep polygon icon constant
* do not split points on de-polygonizing & highlight overlapping points
* rewrite color picker to support no (mixed) colors & fix focus handling
* refactor
* tweak point rendering inside line editor
* do not disable polygon when creating new points via alt
* auto-enable polygon when aligning start/end points
* TBD: remove bg color when disabling polygon
* TBD: only show polygon button for enabled polygons
* fix polygon behavior when adding/removing/moving points within line editor
* convert to polygon when creating line
* labels tweak
* add to command palette
* loopLock -> polygon
* restore `polygon` state on type conversions
* update snapshots
* naming
* break polygon on restore/finalize if invalid & prevent creation
* snapshots
* fix: merge issue and forgotten debug
* snaps
* do not merge points for 3-point lines
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* First iter
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Restore binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* More actionFinalize
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Additional fixes
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* New elbow arrow is removed if too small
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Remove very small arrows
* Still allow loops
* Restore tests
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Update history snapshot
* More history snapshot updates
* keep invisible 2-point lines/freedraw elements
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* change lock label
* feat: add unlock logic for single units on pointer up
* feat: add unlock popup
* fix: linting errors
* style: padding tweaks
* style: remove redundant line
* feat: lock multiple units together
* style: tweak color & position
* feat: add highlight for locked elements
* feat: select groups correctly after unlocking
* test: update snapshots
* fix: lasso from selecting locked elements
* fix: should prevent selecting unlocked elements and setting locked id at the same time
* fix: reset hit locked id immediately when appropriate
* feat: capture locked units in delta
* test: update locking test
* feat: show lock highlight when locking (including undo/redo)
* feat: make locked highlighting consistent
* feat: show correct cursor type when moving over locked elements
* fix history
* remove `lockedUnits.singleUnits`
* tweak button
* do not render UnlockPopup if not locked element selected
* tweak actions
* refactor: simplify type
* refactor: rename type
* refactor: simplify hit element setting & checking
* fix: prefer locked over link
* rename to `activeLockedId`
* refactor: getElementAtPosition takes an optional hitelments array
* fix: avoid setting active locked id after resizing
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: alt + ctrl lasso selected elements not always kept
* Update packages/excalidraw/components/App.tsx
---------
Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>
* Do not set link background color, dynamically scale down link icon size with zoom.
* removed unnecessary change
* use canvas bg color & reduce size and stroke width
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* Update embeddable.ts
* no need for same origin
* The form does not load without allow same origin
* automatically add embed=true to link if not present
* fix link check
* fix frame name clipping on zooming
* include assistant font
* default frame name
* extend search to frame names
* add a simple test
* collpase search match items
* id check out of loop
* fix frame name check
* include focusedId for small perf improvement
* optionally show and hide collapse icon
* update section title
* fix tests
* rename `serverSide` -> `private`
* revert: do not reset zoom on zoom change
* feat: do not close menu on repeated ctrl+f
* remove collapsible
* tweak results CSS
* remove redundant check
* set `appState.searchMatches` to null if empty
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* feat: switch between basic shapes
* add tab for testing
* style tweaks
* only show hint when a new node is created
* fix panel state
* refactor
* combine captures into one
* keep original font size
* switch multi
* switch different types altogether
* use tab only
* fix font size atom
* do not switch from active tool change
* prefer generic when mixed
* provide an optional direction when shape switching
* adjust panel bg & shadow
* redraw to correctly position text
* remove redundant code
* only tab to switch if focusing on app container
* limit which linear elements can be switched
* add shape switch to command palette
* remove hint
* cache initial panel position
* bend line to elbow if needed
* remove debug logic
* clean switch of arrows using app state
* safe conversion between line, sharp, curved, and elbow
* cache linear when panel shows up
* type safe element conversion
* rename type
* respect initial type when switching between linears
* fix elbow segment indexing
* use latest linear
* merge converted elbow points if too close
* focus on panel after click
* set roudness to null to fix drag points offset for elbows
* remove Mutable
* add arrowBoundToElement check
* make it dependent on one signle state
* unmount when not showing
* simpler types, tidy up code
* can change linear when it's linear + non-generic
* fix popup component lifecycle
* move constant to CLASSES
* DRY out type detection
* file & variable renaming
* refactor
* throw in not-prod instead
* simplify
* semi-fix bindings on `generic` type conversion
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* Fix laser pointer trail disappearing on pointerup (#9413)
Previously, the laser pointer trail would disappear as soon as the pointerup event was triggered. This fix delays the trail removal to ensure it persists for a smoother visual experience.
Fixes#9413.
* Remove extra blank lines
Minor formatting cleanup. No functional changes.
* Expose renderScrollbars to AppState
* fix: scrollbar rendering should use al renderable elements
* remove `appState.renderScrollbars`
* clean unused
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: keep orig elem in place on alt-duplication
* clarify comment
* fix: incorrect selection on duplicating labeled containers
* fix: duplicating within group outside frame should remove from group
* Add DOCTYPE and XML preamble in exported SVG documents
* Update packages/excalidraw/data/index.ts
---------
Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>
* fix: deselected hit element being duplicated + incorrect re-seeding
* snapshots
* Fix alt-drag binding
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* Add alt-drag bound arrow test
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
* lasso without 'real' shape detection
* select a single linear el
* improve ux
* feed segments to worker
* simplify path threshold adaptive to zoom
* add a tiny threshold for checks
* refactor code
* lasso tests
* fix: ts
* do not capture lasso tool
* try worker-loader in next config
* update config
* refactor
* lint
* feat: show active tool when using "more tools"
* keep lasso if selected from toolbar
* fix incorrect checks for resetting to selection
* shift for additive selection
* bound text related fixes
* lint
* keep alt toggled lasso selection if shift pressed
* fix regression
* fix 'dead' lassos
* lint
* use workerpool and polyfill
* fix worker bundled with window related code
* refactor
* add file extension for worker constructor error
* another attempt at constructor error
* attempt at build issue
* attempt with dynamic import
* test not importing from math
* narrow down imports
* Reusing existing workers infrastructure (fallback to the main thread, type-safety)
* Points on curve inside the shared chunk
* Give up on experimental code splitting
* Remove potentially unnecessary optimisation
* Removing workers as the complexit is much worse, while perf. does not seem to be much better
* fix selecting text containers and containing frames together
* render fill directly from animated trail
* do not re-render static when setting selected element ids in lasso
* remove unnecessary property
* tweak trail animation
* slice points to remove notch
* always start alt-lasso from initial point
* revert build & worker changes (unused)
* remove `lasso` from `hasStrokeColor`
* label change
* remove unused props
* remove unsafe optimization
* snaps
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Co-authored-by: Marcel Mraz <marcel@excalidraw.com>
* chore: bump @radix-ui/react-tabs version to 1.1.3
bumped the version to latest stable that includes
react ^19 as peerDepenecy.
This fixes peerDependency issues, as reported in #9253
* redeploy
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* bugfix: put the redo and undo button under the same div so that they look grouped together
* fixed the position of the redo and undo buttons to the right
* box select frame & children
* avoid selecting children twice to avoid double their moving
* do not show ele stats if frame and children selected together
* do not update frame membership if selected together
* do not group frame and its children
* comment and refactor code
* hide align altogether
* include frame children when selecting all
* simplify
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: excalidraw#9045 by modifying the stroke style, opacity, and fill style for the new node and next nodes.
* fix: added roughness and opacity to the arrowbindings
* feat: add action to wrap selected items in a frame
* fix type
* select frame on wrap & refactor
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* crowfoot many
* crowfoot one
* one or many
* add icons for crowfoot
* add crowfoot icons
* adjust arrowhead selection popover
* make options collapsible
* swap triangle and bar
* switch to radix popover
* put triangle outline in the first row
* align shadow with new design spec
* remove unused flag
* swap order
* tweak labels
* handle shift+tab
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Co-authored-by: Jakub Królak <108676707+j-krolak@users.noreply.github.com>
* separate resizing logic for a single element
* replace resize logic in stats
* do not recompute width and height from points when they're already given
* correctly update linear elements' position when resized
* update snapshots
* lint
* simplify linear resizing logic
* fix initial scale for aspect ratio
* update tests for linear elements
* test typo
* separate pointer from resizing for multiple elements
* lint and simplify
* fix tests
* lint
* provide scene in param instead
* type
* refactor code
* fix floating in tests
* remove restrictions/checks on width & height
* update pointer to dimension to prevent regression
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* feat: prefer user defined coords and dimensions over calculated for frame
* update changelog
* lint
* show the info only in dev mode and when children present
* Flipping action now properly mirrors selections with elbow arrows
* Flipping action now re-centers the selection to the original center to avoid "walking" selections on repeated flipping
* build: upgrade vite to 5.x, vitest to 2.x and related vite packages
* upgrade vitest-ui and coverage
* pass empty set to fix type error and update snap
* set ignoreEmptyLines to false
* update threshold
* update coverage threshold
* downgrade vite-plugin-pwa as its better to push separately with testing
* add package resolutions for strip-ansi, string-width and wrap-ansi
* disable pwa
* only add resolution for strip-ansi
* add newElement to appState
* freedraw should not be an editing element
* do not set editing element for freedraw and generic
* remove ununsed `appState.draggingElement`
* remove setting dragged for new linear element
* decouple selection element from new element
* fix hint for text bindables
* update snapshot
* fixes
* fix frame regressions
* add comments to types
* document `editingElement`
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* Upgrade @babel/* versions to 7.24 to ensure non-vulnerable Babel versions
* Pinning React version to 18.2.0 exactly, avoiding test-utils type version clashes
* Fix warning message on yarn start
* Moving react to peer dependencies
* Moving app dependencies from workspace into app
* Bump vitest to 1.6.0 to fix history.test.tsx breaking
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* perf: cache the temp canvas created for labeled arrows
* use allEleemntsMap so bound text element can be retrieved when editing
* remove logs
* fix rotation
* pass isRotating
* feat: cache `element.angle` instead of relying on `appState.isRotating`
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Using ALT/OPT + drag to clone does not transfer the bindings (or leaves the duplicates in place of the old one , which are also not bound).
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
The LinearElementEditor.movePoints() function incorrectly calculates the offset for local linear element points when multiple targetPoints are provided, one of those target points is index === 0 AND the other points are moved in the negative direction, and ending up with negative local coordinates.
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
* resize single elements from the side
* fix lint
* do not resize texts from the sides (for we want to wrap/unwrap)
* omit side handles for frames too
* upgrade types
* enable resizing from the sides for multiple elements as well
* fix lint
* maintain aspect ratio when elements are not of the same angle
* lint
* always resize proportionally for multiple elements
* increase side resizing padding
* code cleanup
* adaptive handles
* do not resize for linear elements with only two points
* prioritize point dragging over edge resizing
* lint
* allow free resizing for multiple elements at degree 0
* always resize from the sides
* reduce hit threshold
* make small multiple elements movable
* lint
* show side handles on touch screen and mobile devices
* differentiate touchscreens
* keep proportional with text in multi-element resizing
* update snapshot
* update multi elements resizing logic
* lint
* reduce side resizing padding
* bound texts do not scale in normal cases
* lint
* test sides for texts
* wrap text
* do not update text size when changing its alignment
* keep text wrapped/unwrapped when editing
* change wrapped size to auto size from context menu
* fix test
* lint
* increase min width for wrapped texts
* wrap wrapped text in container
* unwrap when binding text to container
* rename `wrapped` to `autoResize`
* fix lint
* revert: use `center` align when wrapping text in container
* update snaps
* fix lint
* simplify logic on autoResize
* lint and test
* snapshots
* remove unnecessary code
* snapshots
* fix: defaults not set correctly
* tests for wrapping texts when resized
* tests for text wrapping when edited
* fix autoResize refactor
* include autoResize flag check
* refactor
* feat: rename action label & change contextmenu position
* fix: update version on `autoResize` action
* fix infinite loop when editing text in a container
* simplify
* always maintain `width` if `!autoResize`
* maintain `x` if `!autoResize`
* maintain `y` pos after fontSize change if `!autoResize`
* refactor
* when editing, do not wrap text in textWysiwyg
* simplify text editor
* make test more readable
* comment
* rename action to match file name
* revert function signature change
* only update in app
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* build: enable consistent type imports eslint rule
* change to warn
* fix the warning in example and excalidraw-app
* fix packages
* enable type annotations and throw error for the rule
Arrows now only bind to new shapes if their start or end point is dragged close to them. Arrows previously bound to shapes remain bound on move and drag if at the end of the drag/move the points remain in the original shapes' binding area.
---------
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Co-authored-by: Sammy Lee <sammy.joe.lee@gmail.com>
* Introducing fractional indices as part of `element.index`
* Ensuring invalid fractional indices are always synchronized with the array order
* Simplifying reconciliation based on the fractional indices
* Moving reconciliation inside the `@excalidraw/excalidraw` package
---------
Co-authored-by: Marcel Mraz <marcel@excalidraw.com>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* new collision api
* isPointOnShape
* removed redundant code
* new collision methods in app
* curve shape takes starting point
* clean up geometry
* curve rotation
* freedraw
* inside curve
* improve ellipse inside check
* ellipse distance func
* curve inside
* include frame name bounds
* replace previous private methods for getting elements at x,y
* arrow bound text hit detection
* keep iframes on top
* remove dependence on old collision methods from app
* remove old collision functions
* move some hit functions outside of app
* code refactor
* type
* text collision from inside
* fix context menu test
* highest z-index collision
* fix 1px away binding test
* strictly less
* remove unused imports
* lint
* 'ignore' resize flipping test
* more lint fix
* skip 'flips while resizing' test
* more test
* fix merge errors
* fix selection in resize test
* added a bit more comment
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* Changed Assistant metrics to the corrrect ones from OS/2 table
* Adding more information about font metrics
* Adding branded types to avoid future mistakes
* fix: remove dependency of t from clipboard and image
* pass errorMessage to copyTextToSystemClipboard where needed
* wrap copyTextToSystemClipboard and rethrow translated error in caller
* review fix
* typo
* fix: remove scene hack from export.ts as its not needed anymore
* remove
* pass elementsMap to getContainingFrame
* remove unused `mapElementIds` param
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: make LinearElementEditor independent of scene
* more fixes
* pass elements and elementsMap to maybeBindBindableElement,getHoveredElementForBinding,bindingBorderTest,getElligibleElementsForBindableElementAndWhere,isLinearElementEligibleForNewBindingByBindable
* replace `ElementsMap` with `NonDeletedSceneElementsMap` & remove unused params
* fix lint
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* fix: remove scene from getElementAbsoluteCoords and dependent functions and use elementsMap
* lint
* fix
* use non deleted elements where possible
* use non deleted elements map in actions
* pass elementsMap instead of array to elementOverlapsWithFrame
* lint
* fix
* pass elementsMap to getElementsCorners
* pass elementsMap to getEligibleElementsForBinding
* pass elementsMap in bindOrUnbindSelectedElements and unbindLinearElements
* pass elementsMap in elementsAreInFrameBounds,elementOverlapsWithFrame,isCursorInFrame,getElementsInResizingFrame
* pass elementsMap in getElementsWithinSelection, getElementsCompletelyInFrame, isElementContainingFrame, getElementsInNewFrame
* pass elementsMap to getElementWithTransformHandleType
* pass elementsMap to getVisibleGaps, getMaximumGroups,getReferenceSnapPoints,snapDraggedElements
* lint
* pass elementsMap to bindTextToShapeAfterDuplication,bindLinearElementToElement,getTextBindableContainerAtPosition
* revert changes for bindTextToShapeAfterDuplication
* fix: remove t and allow name to be nullable
* pass name as required prop
* remove Unnamed
* pass name to excalidrawPlus as well for better type safe
* render once we have excalidrawAPI to avoid defaulting
* rename `getAppName` -> `getName` (temporary)
* stop preventing editing filenames when `props.name` supplied
* keep `name` as optional param for export functions
* keep `appState.name` on `props.name` state separate
* fix lint
* assertive first
* fix lint
* Add TODO
---------
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
* move the existing example to with-script-in-browser
* Add example with next js app router
* disable ssr for excalidraw client comp
* typo
* update output dir
* don't include nextjs example in tsconfig
* remove meta.json
* lint
* remove example.ts
* port
* move the examples outside packages and use the deps as workspaces in examples
* update gitignore
* fix example
* update path of build dir
* fix
* fix scripts
* try local path
* fix
* update commands
* fix
* fix
* fix script
* skip ts
* disable ts
* add vercel.json
* install
* update tsconfig
* fix lint
* remove console.log
* lets see if this works
* revert
* remove ts nocheck
* add types and some utils in nextjs example
* fix types
* updatw example and remove nextjs dynamic syntax so we don't import excal twice
* move both examples to workspaces and create generic example to be used by browser and next js both
* copy the static assets to nextjs
* fix ts config
* render custom menu items
* fix custom footer
* fix types in browser example
* use regular imports for importing excal and import it using dynamic next js in app router instead
* Add example for pages router
* fix css discrepancies
* fix css
* configure output dir
* fix
* fix css
* rename to with-nextjs
* move components to examples/excalidraw/components
* build: Welcome ESM and Bye Bye UMD
* remove package
* create unbundled esm build
* update script for example
* fix typo
* dummy commit
* update autorelease script to build esm
* revert dummy commit
* move react, react-dom and testing library to dev dependencies
* remove entry.js, publicPath and yarn install:deps script
* fix
* upgrade esbuild to fix glob import error for locales
* remove webpack chunk names as thats not needed anymore
* marking the code sideeffects free
* make the library tree-shakeable and move fonts to fonts directory
* allow side effects for css, scss files
* remove tree-shaking
* comment code for tree shaking
* move to vite for example
* bye bye webpack
* ignore ts
* separate build and output dir
* use esbuild for creating bundle for example
* update output dir
* lint
* create browser dev build with source maps and prod with minification
* add dev and prod builds for bundler
* lint
* update script
* remove await
* load prod build
* create minified build in dist
* prod and dev builds using export field
* remove import.meta
* dummy
* define import.meta prod and dev
* fix
* export types
* add types field
* typo
* lint
* Update scripts/buildPackage.js
* move types inside export
* newline
* feat: move utils to utils package and make @excalidraw/utils a workspace
* remove esm and update types path
* remove esm script
* fix package.json and yarn.lock
* update path
* fix
* fix lint and test
* build: move build process and excalidraw-app dependencies in its own package.json
* fix
* fix public path
* move bug-issue-template to excalidraw-app
* make env vars accessible in excalidraw app
* update build script
* install when building
* add ts ignore
* fix build-version script
* update config in vercel.json
* add vercel config for example
* fix vercel config
* update install script in vercel
* update install script in lint.yml
* update install script in test workflows
* push locales to locales folder pwa
* add favicons to manifest
* move react to peer deps in editor
* fix ts
* Enable vite intellisense
* add global.d.ts for excalidraw-app
* remove console.log
* remove react, react-dom and vite from excalidraw-app deps
* increase size limit
* fix: umd build so it can be used in browser
* fix lint
* increase size limit
* update changelog
* use json.stringify for env preact variable so its accessible as string
* update changelog
* build: support preact
* add log
* Simplify the config and generate prod and dev builds for preact
* update changelog
* remove logs
* use env variable so its available during build time
* update cl
* fix
* feat: integrate mermaidToExcalidraw
* create mermaid to excal dialog
* allow mermaid syntax and export in preview
* fix
* fix webpack config
* fix markdown error by using named export
* center preview
* set elements as selected when inserted onto canvas
* persist mermaid data to storage
* store canvas data in refs
* load mermaid lazily
* tweak design
* compute width, height correctly for arrows
* fix undefined vertex issue
* add mermaid icon in dropdown
* add a note in dialog
* reset preview when error
* show error in preview when error
* show mermaid error messgae react way
* design tweaks
* add example and docs link
* fix
* tweak design to remove scroll bar
* show a spinner unless mermaid loaded
* regenerate ids when needed via programmatic api, this makes sure for mermaid diagrams ids are regenerated
* tweak
* add option to transform viewport to scene coords in transform api
* make opts optional and use 100% zoom when inserting to canvas
* fix arrow bindings in safari and firefox
* fix elements insert position and viewport centering
* fix: Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.
* defer rendering the preview
* tweak text
* fix tests
* remove only
* make design responsive
* fix: show extra tools dropdown in mobile
* fix mobile css
* width auto
* upgrade mermaid-to-excalidraw
* don't pass appState in deps as its not used
* upgrade mermaid-to-excalidraw to fix firefox issue
* use types from mermaid-to-excalidraw
* upgrade mermaid-to-excalidraw
* use stable version of mermaid-to-excalidraw
* upgrade mermaid-to-excalidraw
* fix width of shapes toolbar for smaller screen size and also fix regression of mobile menu
* use i18n
* better api
* enable test coverage in ui
* Add tests
* use common utils to update and get text editor
* updgrade mermaid-to-excalidraw to support sequence diagrams
* fix test
* don't update arrow container height anytime in when redrawing text bounding box
* increase size limit
* increase size limit of vendor to 900kb
* use openDialog for mermaid
* upgrade mermaid-to-excalidraw
* update frame id post generation
* upgrade mermaid-to-excalidraw to add entity codes support
* update size limit
* upgrade mermaid-to-excalidraw package with frame api changes
* upgrade mermaid-to-excalidraw to remove directive and use config
* don't highlight mermaid tool and remove unused api setSelection
* stop using loading state to update text area
* move some styling to scss
* review fixes
* use modifiedTableIcon props and remove stale snap
* css
* dialog css
* fix snap
* use dialog border
* change mermaidToExcalidrawLib to state
* better styling of errors
* make modal bigger
* fix mobile
* update snaps
* fix icon color
* fix dark mode insert button color
* horizontally center spinner
* render canvas conditionally on loaded state
* rd tweaks
* tweak class names
* remove max height
* typo in example
* upgrade mermaid-to-excalidraw
* simplify error state
* fix height & overflow on vertical breakpoint
* fix lint
* show errors in overlay
* set textarea font family
* reduce opacity
* update snap
* upgrade to mermaid 0.1.2
---------
Co-authored-by: dwelle <luzar.david@gmail.com>
* update frame id post generation
* support frames via programmatic API
* fix types
* add test for frames
* throw error when element doesn't exist
* naming tweaks
* update the api to use children
* consider max of frame dimensions and calculated bounds of elements
* consider bound elements in frame api
* feat: regenerate ids by default when using transform api and also update bindings by 0.5px to avoid possible overlapping
* type
* increase limit as some past PR(s) increased the bundle size
* review fixes
* update changelog
* feat: initial Laser pointer mvp
* feat: add laser-pointer package and integrate it with collab
* chore: fix yarn.lock
* feat: update laser-pointer package, prevent panning from showing
* feat: add laser pointer tool button when collaborating, migrate to official package
* feat: reduce laser tool button size
* update icon
* fix icon & rotate
* fix: lock zoom level
* fix icon
* add `selected` state, simplify and reduce api
* set up pointer callbacks in viewMode if laser tool active
* highlight extra-tools button if one of the nested tools active
* add shortcut to laser pointer
* feat: don't update paths if nothing changed
* ensure we reset flag if no rAF scheduled
* move `lastUpdate` to instance to optimize
* return early
* factor out into constants and add doc
* skip iteration instead of exit
* fix naming
* feat: remove testing variable on window
* destroy on editor unmount
* fix incorrectly resetting `lastUpdate` in `stop()`
---------
Co-authored-by: dwelle <luzar.david@gmail.com>
- For new DOM/browser API usage, use `app.ownerDocument` and `app.ownerWindow` instead of globals; without `app`, derive them from the mounted node's `ownerDocument` and its `defaultView`.
- When overriding properties of an existing type, prefer `Merge<Base, Overrides>` from `@excalidraw/common/utility-types` over `Omit<Base, keyof Overrides> & Overrides`.
<img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
</a>
<img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widget=false"/></a>
<img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
</a>
<img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/></a>
</p>
<div align="center">
@@ -60,7 +60,7 @@ The Excalidraw editor (npm package) supports:
- 🏗️ Customizable.
- 📷 Image support.
- 😀 Shape libraries support.
-👅 Localization (i18n) support.
-🌐 Localization (i18n) support.
- 🖼️ Export to PNG, SVG & clipboard.
- 💾 Open format - export drawings as an `.excalidraw` json file.
- ⚒️ Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
@@ -70,7 +70,7 @@ The Excalidraw editor (npm package) supports:
## Excalidraw.com
The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/src/excalidraw-app) is part of this repository as well, and the app features:
The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/excalidraw-app) is part of this repository as well, and the app features:
- 📡 PWA support (works offline).
- 🤼 Real-time collaboration.
@@ -82,19 +82,17 @@ We'll be adding these features as drop-in plugins for the npm package in the fut
## Quick start
Install the [Excalidraw npm package](https://www.npmjs.com/package/@excalidraw/excalidraw):
**Note:** following instructions are for installing the Excalidraw [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw) when integrating Excalidraw into your own app. To run the repository locally for development, please refer to our [Development Guide](https://docs.excalidraw.com/docs/introduction/development).
Earlier we were using `renderFooter` prop to render custom footer which was removed in [#5970](https://github.com/excalidraw/excalidraw/pull/5970). Now you can pass a `Footer` component instead to render the custom UI for footer.
You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should a valid React Node.
You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should be a valid React Node.
**Usage**
```jsx live
function App() {
return (
<div style={{ height: "500px"}}>
<div style={{ height: "500px"}}>
<Excalidraw>
<Footer>
<button
@@ -25,21 +25,21 @@ function App() {
}
```
This will only for `Desktop` devices.
This will only work for `Desktop` devices.
For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useDevice`](#useDevice) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useEditorInterface`](#useEditorInterface) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
Open the `Menu` in the below playground and you will see the `custom footer` rendered.
```jsx live noInline
const MobileFooter = ({}) => {
const device = useDevice();
if (device.isMobile) {
const editorInterface = useEditorInterface();
if (editorInterface.formFactor === "phone") {
return (
<Footer>
<button
className="custom-footer"
style={{ marginLeft: '20px', height: '2rem'}}
style={{ marginLeft: "20px", height: "2rem" }}
onClick={() => alert("This is custom footer in mobile menu")}
>
custom footer
@@ -65,4 +65,4 @@ const App = () => (
// Need to render when code is span across multiple components
| `onSelect` | `function` | No | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. |
| `selected` | `boolean` | No | `false` | Whether item is active |
| `href` | `string` | Yes | - | The `href` attribute to be added to the `anchor` element. |
| `children` | `React.ReactNode` | Yes | - | The content of the menu item |
| `icon` | `JSX.Element` | No | - | The icon used in the menu item |
@@ -131,7 +133,7 @@ function App() {
}
```
Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/src/components/mainMenu/DefaultItems.tsx) of the default items.
Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/main-menu/DefaultItems.tsx) of the default items.
@@ -80,7 +80,7 @@ A given tab trigger button that switches to a given sidebar tab. It must be rend
| `className` | `string` | No | |
| `style` | `React.CSSProperties` | No | |
You can use the [`ref.toggleSidebar({ name: "custom" })`](/docs/@excalidraw/excalidraw/api/props/ref#toggleSidebar) api to control the sidebar, but we export a trigger button to make UI use cases easier.
You can use the [`ref.toggleSidebar({ name: "custom" })`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api#toggleSidebar) api to control the sidebar, but we export a trigger button to make UI use cases easier.
import { FONT_FAMILY } from "@excalidraw/excalidraw";
```
`FONT_FAMILY` contains all the font families used in `Excalidraw` as explained below
`FONT_FAMILY` contains all the font families used in `Excalidraw`. The default families are the following:
| Font Family | Description |
| ----------- | ---------------------- |
| `Virgil` | The `handwritten` font |
| `Helvetica` | The `Normal` Font |
| `Cascadia` | The `Code` Font |
| `Excalifont` | The `Hand-drawn` font |
| `Nunito` | The `Normal` Font |
| `Comic Shanns` | The `Code` Font |
Defaults to `FONT_FAMILY.Virgil` unless passed in `initialData.appState.currentItemFontFamily`.
Pre-selected family is `FONT_FAMILY.Excalifont`, unless it's overriden with `initialData.appState.currentItemFontFamily`.
### THEME
@@ -37,7 +37,7 @@ Defaults to `THEME.LIGHT` unless passed in `initialData.appState.theme`
### MIME_TYPES
[`MIME_TYPES`](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L101) contains all the mime types supported by `Excalidraw`.
[`MIME_TYPES`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L101) contains all the mime types supported by `Excalidraw`.
We support a simplified API to make it easier to generate Excalidraw elements programmatically. This API is in beta and subject to change before stable. You can check the [PR](https://github.com/excalidraw/excalidraw/pull/6546) for more details.
For this purpose we introduced a new type [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133). This is the simplified version of [`ExcalidrawElement`](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L134) type with the minimum possible attributes so that creating elements programmatically is much easier (especially for cases like binding arrows or creating text containers).
For this purpose we introduced a new type [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133). This is the simplified version of [`ExcalidrawElement`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L134) type with the minimum possible attributes so that creating elements programmatically is much easier (especially for cases like binding arrows or creating text containers).
The [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133) can be converted to fully qualified Excalidraw elements by using [`convertToExcalidrawElements`](/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements).
The [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133) can be converted to fully qualified Excalidraw elements by using [`convertToExcalidrawElements`](/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements).
| `elements` | [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L137) | | The Excalidraw element Skeleton which needs to be converted to Excalidraw elements. |
| `opts` | `{ regenerateIds: boolean }` | ` {regenerateIds: true}` | By default `id` will be regenerated for all the elements irrespective of whether you pass the `id` so if you don't want the ids to regenerated, you can set this attribute to `false`. |
**_How to use_**
@@ -24,13 +28,13 @@ The [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/
import { convertToExcalidrawElements } from "@excalidraw/excalidraw";
```
This function converts the Excalidraw Element Skeleton to excalidraw elements which could be then rendered on the canvas. Hence calling this function is necessary before passing it to APIs like [`initialData`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/initialdata), [`updateScene`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/ref#updatescene) if you are using the Skeleton API
This function converts the Excalidraw Element Skeleton to excalidraw elements which could be then rendered on the canvas. Hence calling this function is necessary before passing it to APIs like [`initialData`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/initialdata), [`updateScene`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/excalidraw-api#updatescene) if you are using the Skeleton API
## Supported Features
### Rectangle, Ellipse, and Diamond
To create these shapes you need to pass its `type` and `x` and `y` coordinates for position. The rest of the attributes are optional_.
To create these shapes you need to pass its `type` and `x` and `y` coordinates for position. The rest of the attributes are optional\_.
For the Skeleton API to work, `convertToExcalidrawElements` needs to be called before passing it to Excalidraw Component via initialData, updateScene or any such API.
@@ -67,7 +71,7 @@ function App() {
}
```
You can pass additional [`properties`](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L27) as well to decorate the shapes.
You can pass additional [`properties`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L27) as well to decorate the shapes.
:::info
@@ -168,7 +172,7 @@ convertToExcalidrawElements([
type: "arrow",
x: 450,
y: 20,
startArrowhead: "dot",
startArrowhead: "circle",
endArrowhead: "triangle",
strokeColor: "#1971c2",
strokeWidth: 2,
@@ -188,7 +192,7 @@ convertToExcalidrawElements([
### Text Containers
In addition to `type`, `x` and `y` properties, [`label`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L124C7-L130C59) property is required for text containers. The `text` property in `label` is required, rest of the attributes are optional.
In addition to `type`, `x` and `y` properties, [`label`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L124C7-L130C59) property is required for text containers. The `text` property in `label` is required, rest of the attributes are optional.
If you don't provide the dimensions of container, we calculate it based of the label dimensions.
A sticky note is an always-filled note whose label auto-fits: the font shrinks from the label's `fontSize` (the note's font ceiling) down to a minimum, and only then does the note grow in height. Only `type`, `x` and `y` are required; `width`/`height` default to a 250×250 square and `label` is optional. The note's `strokeColor` is its ink — its text and creation-date footer are always one color; a label that sets its own `strokeColor` gives it to the note. A footer band below the label shows the note's creation date (`created`); pass `created: null` for a note without one (the band stays reserved, but empty).
```js
convertToExcalidrawElements([
{
type: "stickynote",
x: 100,
y: 100,
label: {
text: "Remember to ship it",
fontSize: 28,
},
},
{
type: "stickynote",
x: 400,
y: 100,
width: 200,
height: 200,
backgroundColor: "#fcc2d7",
strokeColor: "#c2255c",
},
]);
```
Notes keep their invariants regardless of the properties you pass: the background is never transparent (it falls back to the default yellow), the fill is solid, and the size is at least 75×75. The height you pass is kept as the note's `baseHeight`; if a label needs more room at the minimum font size, the created note is taller.
### Labelled Arrows
Similar to Text Containers, you can create labelled arrows as well.
@@ -322,7 +355,7 @@ convertToExcalidrawElements([
### Arrow bindings
To bind arrow to a shape you need to specify its [`start`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L86) and [`end`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L54) properties. You need to pass either `type` or `id` property in `start` and `end` properties, rest of the attributes are optional
To bind arrow to a shape you need to specify its [`start`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L86) and [`end`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L54) properties. You need to pass either `type` or `id` property in `start` and `end` properties, rest of the attributes are optional
You can use this prop when you want to access some [Excalidraw APIs](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L616). We expose the below APIs :point_down:
| API | Signature | Usage |
| --- | --- | --- |
| ready | `boolean` | This is set to true once Excalidraw is rendered |
| [readyPromise](#readypromise) | `function` | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readypromise) |
| [updateScene](#updatescene) | `function` | updates the scene with the sceneData |
| [updateLibrary](#updatelibrary) | `function` | updates the scene with the sceneData |
| [updateLibrary](#updatelibrary) | `function` | updates the library |
| [addFiles](#addfiles) | `function` | add files data to the appState |
| [resetScene](#resetscene) | `function` | Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false. |
| [getSceneElementsIncludingDeleted](#getsceneelementsincludingdeleted) | `function` | Returns all the elements including the deleted in the scene |
@@ -38,61 +37,22 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the
| [setActiveTool](#setactivetool) | `function` | This API can be used to set the active tool |
| [setCursor](#setcursor) | `function` | This API can be used to set customise the mouse cursor on the canvas |
| [resetCursor](#resetcursor) | `function` | This API can be used to reset to default mouse cursor on the canvas |
| [toggleMenu](#togglemenu) | `function` | Toggles specific menus on/off |
| [toggleSidebar](#toggleSidebar) | `function` | Toggles specific sidebar on/off |
| [onChange](#onChange) | `function` | Subscribes to change events |
| [onPointerDown](#onPointerDown) | `function` | Subscribes to `pointerdown` events |
| [onPointerUp](#onPointerUp) | `function` | Subscribes to `pointerup` events |
## readyPromise
:::info The `Ref` support has been removed in v0.17.0 so if you are using refs, please update the integration to use the `excalidrawAPI`.
Additionally `ready` and `readyPromise` from the API have been discontinued. These APIs were found to be superfluous, and as part of the effort to streamline the APIs and maintain simplicity, they were removed in version v0.17.0.
Since plain object is passed as a `ref`, the `readyPromise` is resolved as soon as the component is mounted. Most of the time you will not need this unless you have a specific use case where you can't pass the `ref` in the react way and want to do some action on the host when this promise resolves.
```jsx showLineNumbers
const resolvablePromise = () => {
let resolve;
let reject;
const promise = new Promise((_resolve, _reject) => {
@@ -102,10 +62,10 @@ You can use this function to update the scene with the sceneData. It accepts the
| Name | Type | Description |
| --- | --- | --- |
| `elements` | [`ImportedDataState["elements"]`](https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L38) | The `elements` to be updated in the scene |
| `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L39) | The `appState` to be updated in the scene. |
| `collaborators` | <code>Map<string, <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">Collaborator></a></code> | The list of collaborators to be updated in the scene. |
| `commitToHistory` | `boolean` | Implies if the `history (undo/redo)` should be recorded. Defaults to `false`. |
| `elements` | [`ImportedDataState["elements"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L38) | The `elements` to be updated in the scene |
| `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L39) | The `appState` to be updated in the scene. |
| `collaborators` | <code>Map<string, <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L37">Collaborator></a></code> | The list of collaborators to be updated in the scene. |
| `captureUpdate` | [`CaptureUpdateAction`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/store.ts#L40) | Controls which updates should be captured by the `Store`. Captured updates are emmitted and listened to by other components, such as `History` for undo / redo purposes. |
You can use the `captureUpdate` to influence undo / redo behaviour.
> **NOTE**: Some updates are not observed by the store / history - i.e. updates to `collaborators` object or parts of `AppState` which are not observed (not `ObservedAppState`). Such updates will never make it to the undo / redo stacks, regardless of the passed `captureUpdate` value.
| | `captureUpdate` value | Notes |
| --- | --- | --- |
| _Immediately undoable_ | `CaptureUpdateAction.IMMEDIATELY` | Use for updates which should be captured. Should be used for most of the local updates. These updates will _immediately_ make it to the local undo / redo stacks. |
| _Eventually undoable_ | `CaptureUpdateAction.EVENTUALLY` | Use for updates which should not be captured immediately - likely exceptions which are part of some async multi-step process. Otherwise, all such updates would end up being captured with the next `CaptureUpdateAction.IMMEDIATELY` - triggered either by the next `updateScene` or internally by the editor. These updates will _eventually_ make it to the local undo / redo stacks. |
| _Never undoable_ | `CaptureUpdateAction.NEVER` | Use for updates which should never be recorded, such as remote updates or scene initialization. These updates will _never_ make it to the local undo / redo stacks. |
@@ -181,7 +154,7 @@ You can use this function to update the library. It accepts the below attributes
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `libraryItems` | [LibraryItemsSource](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L249) | \_ | The `libraryItems` to be replaced/merged with current library |
| `libraryItems` | [LibraryItemsSource](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L249) | \_ | The `libraryItems` to be replaced/merged with current library |
| `merge` | boolean | `false` | Whether to merge with existing library items. |
| `prompt` | boolean | `false` | Whether to prompt user for confirmation. |
| `openLibraryMenu` | boolean | `false` | Keep the library menu open after library is updated. |
@@ -228,8 +201,8 @@ function App() {
Update Library
</button>
<Excalidraw
ref={(api) => setExcalidrawAPI(api)}
// initial data retrieved from https://github.com/excalidraw/excalidraw/blob/master/dev-docs/src/initialData.js
excalidrawAPI={(api) => setExcalidrawAPI(api)}
// initial data retrieved from https://github.com/excalidraw/excalidraw/blob/master/dev-docs/packages/excalidraw/initialData.js
@@ -328,7 +301,7 @@ Scroll the nearest element out of the elements supplied to the center of the vie
| Attribute | type | default | Description |
| --- | --- | --- | --- |
| target | [ExcalidrawElement](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115) | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115) | All scene elements | The element(s) to scroll to. |
| target | [ExcalidrawElement](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L115) | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L115) | All scene elements | The element(s) to scroll to. |
| opts.fitToContent | boolean | false | Whether to fit the elements to viewport by automatically changing zoom as needed. Note that the zoom range is between 10%-100%. |
| opts.fitToViewport | boolean | false | Similar to fitToContent but the zoom range is not limited. If elements are smaller than the viewport, zoom will go above 100%. |
| opts.viewportZoomFactor | number | 0.7 | when fitToViewport=true, how much screen should the content cover, between 0.1 (10%) and 1 (100%) |
@@ -376,7 +349,7 @@ The unique id of the excalidraw component. This can be used to identify the exca
| `type` | [ToolType](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L91) | `selection` | The tool type which should be set as active tool |
| `locked` | `boolean` | `false` | Indicates whether the the active tool should be locked. It behaves the same way when using the `lock` tool in the editor interface |
## setCursor
@@ -421,3 +399,51 @@ This API is especially useful when you render a custom [`<Sidebar/>`](/docs/@exc
```
This API can be used to reset to default mouse cursor.
## onChange
```tsx
(
callback: (
elements: readonly ExcalidrawElement[],
appState: AppState,
files: BinaryFiles,
) => void
) => () => void
```
Subscribes to change events, similar to [`props.onChange`](/docs/@excalidraw/excalidraw/api/props#onchange).
This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
| Name | Type | Description |
| --- | --- | --- |
| `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) | The `elements` with which `Excalidraw` should be mounted. |
| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) | The `AppState` with which `Excalidraw` should be mounted. |
| `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) | The `elements` with which `Excalidraw` should be mounted. |
| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) | The `AppState` with which `Excalidraw` should be mounted. |
| `scrollToContent` | `boolean` | This attribute indicates whether to `scroll` to the nearest element to center once `Excalidraw` is mounted. By default, it will not scroll the nearest element to the center. Make sure you pass `initialData.appState.scrollX` and `initialData.appState.scrollY` when `scrollToContent` is false so that scroll positions are retained |
| `libraryItems` | [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L247) | Promise<[LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200)> | This library items with which `Excalidraw` should be mounted. |
| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L82) | The `files` added to the scene. |
| `libraryItems` | [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L247) | Promise<[LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L200)> | This library items with which `Excalidraw` should be mounted. |
| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L82) | The `files` added to the scene. |
You might want to use this when you want to load excalidraw with some initial elements and app state.
| [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) | `object` | `null` | <code>Promise<object | null></code> | `null` | The initial data with which app loads. |
| [`ref`](/docs/@excalidraw/excalidraw/api/props/ref) | `object` | _ | `Ref` to be passed to Excalidraw |
| [`isCollaborating`](#iscollaborating) | `boolean` | _ | This indicates if the app is in `collaboration` mode |
| [`onChange`](#onchange) | `function` | _ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
| [`onPointerUpdate`](#onpointerupdate) | `function` | _ | Callback triggered when mouse pointer is updated. |
| [`onPointerDown`](#onpointerdown) | `function` | _ | This prop if passed gets triggered on pointer down evenets |
| [`onScrollChange`](#onscrollchange) | `function` | _ | This prop if passed gets triggered when scrolling the canvas. |
| [`onPaste`](#onpaste) | `function` | _ | Callback to be triggered if passed when the something is pasted into the scene |
| [`onLibraryChange`](#onlibrarychange) | `function` | _ | The callback if supplied is triggered when the library is updated and receives the library items. |
| [`onLinkOpen`](#onlinkopen) | `function` | _ | The callback if supplied is triggered when any link is opened. |
| [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) | `object` | `null` | <code>Promise<object | null></code> | `null` | The initial data with which app loads. |
| [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | \_ | Callback triggered with the excalidraw api once rendered |
| [`isCollaborating`](#iscollaborating) | `boolean` | \_ | This indicates if the app is in `collaboration` mode |
| [`onChange`](#onchange) | `function` | \_ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
| [`onPointerUpdate`](#onpointerupdate) | `function` | \_ | Callback triggered when mouse pointer is updated. |
| [`onPointerDown`](#onpointerdown) | `function` | \_ | This prop if passed gets triggered on pointer down events |
| [`onScrollChange`](#onscrollchange) | `function` | \_ | This prop if passed gets triggered when scrolling the canvas. |
| [`onPaste`](#onpaste) | `function` | \_ | Callback to be triggered if passed when something is pasted into the scene |
| [`onLibraryChange`](#onlibrarychange) | `function` | \_ | The callback if supplied is triggered when the library is updated and receives the library items. |
| [`generateLinkForSelection`](#generatelinkforselection) | `function` | \_ | Allows you to override `url` generation when linking to Excalidraw elements. |
| [`onLinkOpen`](#onlinkopen) | `function` | \_ | The callback if supplied is triggered when any link is opened. |
| [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | _ | Render function that renders custom UI in top right corner |
| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | _ | Render function that can be used to render custom stats on the stats dialog. |
| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | _ | This indicates if the app is in `view` mode. |
| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | _ | This indicates if the `zen` mode is enabled |
| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | _ | This indicates if the `grid` mode is enabled |
| [`libraryReturnUrl`](#libraryreturnurl) | `string` | _ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | \_ | Render function that renders custom UI in top right corner |
| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | \_ | Render function that can be used to render custom stats on the stats dialog. |
| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | \_ | This indicates if the app is in `view` mode. |
| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | \_ | This indicates if the `zen` mode is enabled |
| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | \_ | This indicates if the `grid` mode is enabled |
| [`libraryReturnUrl`](#libraryreturnurl) | `string` | \_ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
| [`theme`](#theme) | `"light"` | `"dark"` | `"light"` | The theme of the Excalidraw component |
| [`name`](#name) | `string` | | Name of the drawing |
| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](#canvasactions) |
| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](/docs/@excalidraw/excalidraw/api/props/ui-options#canvasactions) |
| [`detectScroll`](#detectscroll) | `boolean` | `true` | Indicates whether to update the offsets when nearest ancestor is scrolled. |
| [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
| [`autoFocus`](#autofocus) | `boolean` | `false` | indicates whether to focus the Excalidraw component on page load |
| [`generateIdForFile`](#generateidforfile) | `function` | _ | Allows you to override `id` generation for files added on canvas |
| [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
| [`renderScrollbars`] | `boolean`| | `false` | Indicates whether scrollbars will be shown
### Storing custom data on Excalidraw elements
Beyond attributes that Excalidraw elements already support, you can store `custom` data on each `element` in a `customData` object. The type of the attribute is [`Record<string, any>`](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L66) and is optional.
Beyond attributes that Excalidraw elements already support, you can store `custom` data on each `element` in a `customData` object. The type of the attribute is [`Record<string, any>`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L66) and is optional.
You can use this to add any extra information you need to keep track of.
You can add `customData` to elements when passing them as [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata), or using [`updateScene`](/docs/@excalidraw/excalidraw/api/props/ref#updatescene) / [`updateLibrary`](/docs/@excalidraw/excalidraw/api/props/ref#updatelibrary) afterwards.
You can add `customData` to elements when passing them as [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata), or using [`updateScene`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api#updatescene) / [`updateLibrary`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api#updatelibrary) afterwards.
```js showLineNumbers
{
@@ -59,11 +61,11 @@ Every time component updates, this callback if passed will get triggered and has
(excalidrawElements, appState, files) => void;
```
1. `excalidrawElements`: Array of [excalidrawElements](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) in the scene.
1. `excalidrawElements`: Array of [excalidrawElements](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) in the scene.
2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) of the scene.
2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) of the scene.
3. `files`: The [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64) which are added to the scene.
3. `files`: The [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L64) which are added to the scene.
Here you can try saving the data to your backend or local storage for example.
@@ -79,14 +81,14 @@ This callback is triggered when mouse pointer is updated.
2.`button`: The position of the button. This will be one of `["down", "up"]`
3.`pointersMap`: [`pointers`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L131) map of the scene
3.`pointersMap`: [`pointers`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L131) map of the scene
```js
(exportedElements, appState, canvas) => void
```
1. `exportedElements`: An array of [non deleted elements](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L87) which needs to be exported.
2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) of the scene.
1. `exportedElements`: An array of [non deleted elements](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L87) which needs to be exported.
2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) of the scene.
3. `canvas`: The `HTMLCanvasElement` of the scene.
### onPointerDown
@@ -94,7 +96,14 @@ This callback is triggered when mouse pointer is updated.
This prop if passed will be triggered on pointer down events and has the below signature.
@@ -110,7 +119,11 @@ This prop if passed will be triggered when canvas is scrolled and has the below
This callback is triggered if passed when something is pasted into the scene. You can use this callback in case you want to do something additional when the paste event occurs.
This callback must return a `boolean` value or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to a boolean value.
@@ -123,7 +136,7 @@ This callback if supplied will get triggered when the library is updated and has
@@ -131,13 +144,24 @@ This callback if supplied will get triggered when the library is updated and has
It is invoked with empty items when user clears the library. You can use this callback when you want to do something additional when library is updated for example persisting it to local storage.
### generateLinkForSelection
This prop if passed will be used to replace the default link generation function. The idea is that the host app can take over the creation of element links, which can be used to navigate to a particular element or a group. If the host app chooses a different key for element link id, then the host app should also take care of the handling and the navigation in `onLinkOpen`.
This prop if passed will be triggered when clicked on `link`. To handle the redirect yourself (such as when using your own router for internal links), you must call `event.preventDefault()`.
Determines the `language` of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L14). Defaults to `en` (English). We also export default language and supported languages which you can import as shown below.
Determines the `language` of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/i18n.ts#L14). Defaults to `en` (English). We also export default language and supported languages which you can import as shown below.
```js
import { defaultLang, languages } from "@excalidraw/excalidraw";
@@ -176,35 +200,33 @@ import { defaultLang, languages } from "@excalidraw/excalidraw";
This prop indicates whether the app is in `view mode`. When supplied, the value takes precedence over *intialData.appState.viewModeEnabled*, the `view mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
This prop indicates whether the app is in `view mode`. When supplied, the value takes precedence over _intialData.appState.viewModeEnabled_, the `view mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
### zenModeEnabled
This prop indicates whether the app is in `zen mode`. When supplied, the value takes precedence over *intialData.appState.zenModeEnabled*, the `zen mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
This prop indicates whether the app is in `zen mode`. When supplied, the value takes precedence over _intialData.appState.zenModeEnabled_, the `zen mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
### gridModeEnabled
This prop indicates whether the shows the grid. When supplied, the value takes precedence over *intialData.appState.gridModeEnabled*, the grid will be fully controlled by the host app, and users won't be able to toggle it from within the app.
This prop indicates whether the shows the grid. When supplied, the value takes precedence over _intialData.appState.gridModeEnabled_, the grid will be fully controlled by the host app, and users won't be able to toggle it from within the app.
### libraryReturnUrl
If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com).
Defaults to *window.location.origin + window.location.pathname*. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com). Defaults to _window.location.origin + window.location.pathname_. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
### theme
This prop controls Excalidraw's theme. When supplied, the value takes precedence over *intialData.appState.theme*, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app unless *UIOptions.canvasActions.toggleTheme* is set to `true`, in which case the `theme` prop will control Excalidraw's default theme with ability to allow theme switching (you must take care of updating the `theme` prop when you detect a change to `appState.theme` from the [onChange](#onchange) callback).
This prop controls Excalidraw's theme. When supplied, the value takes precedence over _intialData.appState.theme_, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app unless _UIOptions.canvasActions.toggleTheme_ is set to `true`, in which case the `theme` prop will control Excalidraw's default theme with ability to allow theme switching (you must take care of updating the `theme` prop when you detect a change to `appState.theme` from the [onChange](#onchange) callback).
You can use [`THEME`](/docs/@excalidraw/excalidraw/api/utils#theme) to specify the theme.
### name
This prop sets the `name` of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over *intialData.appState.name*, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
This prop sets the `name` of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over _intialData.appState.name_, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
This is an optional property. By default we support a handful of well-known sites. You may allow additional sites or disallow the default ones by supplying a custom validator. If you pass `true`, all URLs will be allowed. You can also supply a list of hostnames, RegExp (or list of RegExp objects), or a function. If the function returns `undefined`, the built-in validator will be used.
Supplying a list of hostnames (with or without `www.`) is the preferred way to allow a specific list of domains.
Supplying a list of hostnames (with or without `www.`) is the preferred way to allow a specific list of domains.
This prop can be used to customise UI of Excalidraw. Currently we support customising [`canvasActions`](#canvasactions), [`dockedSidebarBreakpoint`](#dockedsidebarbreakpoint) and [`welcomeScreen`](#welcmescreen).
This prop can be used to customise UI of Excalidraw. Currently we support customising [`canvasActions`](#canvasactions), [`dockedSidebarBreakpoint`](#dockedsidebarbreakpoint) [`welcomeScreen`](#welcmescreen) and [`tools`](#tools).
@@ -55,7 +55,7 @@ If `UIOptions.canvasActions.export` is `false` the export button will not be ren
## dockedSidebarBreakpoint
This prop indicates at what point should we break to a docked, permanent sidebar. If not passed it defaults to [`MQ_RIGHT_SIDEBAR_MAX_WIDTH_PORTRAIT`](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L161).
This prop indicates at what point should we break to a docked, permanent sidebar. If not passed it defaults to [`MQ_RIGHT_SIDEBAR_MAX_WIDTH_PORTRAIT`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L161).
If the _width_ of the _excalidraw_ container exceeds _dockedSidebarBreakpoint_, the sidebar will be `dockable` and the button to `dock` the sidebar will be shown
If user choses to `dock` the sidebar, it will push the right part of the UI towards the left, making space for the sidebar as shown below.
@@ -70,3 +70,12 @@ function App() {
);
}
```
## tools
This `prop` controls the visibility of the tools in the editor.
Currently you can control the visibility of `image` tool via this prop.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| image | boolean | true | Decides whether `image` tool should be visible.
| `elements` | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) | | The elements to be exported to canvas. |
| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L23) | [Default App State](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L17) | The app state of the scene. |
| `elements` | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) | | The elements to be exported to canvas. |
| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L23) | [Default App State](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L17) | The app state of the scene. |
| [`getDimensions`](#getdimensions) | `function` | _ | A function which returns the `width`, `height`, and optionally `scale` (defaults to `1`), with which canvas is to be exported. |
| `maxWidthOrHeight` | `number` | _ | The maximum `width` or `height` of the exported image. If provided, `getDimensions` is ignored. |
| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L59) | _ | The files added to the scene. |
| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59) | _ | The files added to the scene. |
| `exportPadding` | `number` | `10` | The `padding` to be added on canvas. |
| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) | | The elements to exported as `svg `|
| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L11) | The `appState` of the scene |
| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) | | The elements to exported as `svg `|
| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L11) | The `appState` of the scene |
| exportPadding | number | 10 | The `padding` to be added on canvas |
| files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64) | undefined | The `files` added to the scene. |
| files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L64) | undefined | The `files` added to the scene. |
This function returns a promise which resolves to `svg` of the exported drawing.
@@ -164,7 +164,7 @@ This function returns a promise which resolves to `svg` of the exported drawing.
import { restoreAppState } from "@excalidraw/excalidraw";
```
This function will make sure all the `keys` have appropriate `values` in [appState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) and if any key is missing, it will be set to its `default` value.
This function will make sure all the `keys` have appropriate `values` in [appState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) and if any key is missing, it will be set to its `default` value.
When `localAppState` is supplied, it's used in place of values that are missing (`undefined`) in `appState` instead of the defaults.
Use this as a way to not override user's defaults if you persist them.
@@ -29,16 +29,16 @@ You can pass `null` / `undefined` if not applicable.
| `elements` | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ImportedDataState["elements"]</a> | The `elements` to be restored |
| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined | When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
| `elements` | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ImportedDataState["elements"]</a> | The `elements` to be restored |
| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined | When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements
#### localElements
@@ -51,8 +51,9 @@ The extra optional parameter to configure restored elements. It has the followin
| Prop | Type | Description|
| --- | --- | ------|
| `refreshDimensions` | `boolean` | Indicates whether we should also `recalculate` text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
| `repairBindings` |`boolean` | Indicates whether the `bindings` for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
| `refreshDimensions` | `boolean` | Indicates whether we should also _recalculate_ text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
| `repairBindings` |`boolean` | Indicates whether the _bindings_ for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
| `normalizeIndices` |`boolean` | Indicates whether _fractional indices_ for the elements should be normalized. This is to prevent possible issues caused by using stale (too old, too long) indices. |
**_How to use_**
@@ -70,15 +71,15 @@ Parameter `refreshDimensions` indicates whether we should also `recalculate` tex
See [`restoreAppState()`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#restoreAppState) about `localAppState`, and [`restoreElements()`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#restoreElements) about `localElements`.
See [`restoreAppState()`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/excalidraw/README.md#restoreAppState) about `localAppState`, and [`restoreElements()`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/excalidraw/README.md#restoreElements) about `localElements`.
**_How to use_**
@@ -93,7 +94,7 @@ This function makes sure elements and state is set to appropriate values and set
@@ -8,7 +8,7 @@ These are pure Javascript functions exported from the @excalidraw/excalidraw [`@
### serializeAsJSON
Takes the scene elements and state and returns a JSON string. `Deleted` elements as well as most properties from `AppState` are removed from the resulting JSON. (see [`serializeAsJSON()`](https://github.com/excalidraw/excalidraw/blob/master/src/data/json.ts#L42) source for details).
Takes the scene elements and state and returns a JSON string. `Deleted` elements as well as most properties from `AppState` are removed from the resulting JSON. (see [`serializeAsJSON()`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/json.ts#L42) source for details).
If you want to overwrite the `source` field in the `JSON` string, you can set `window.EXCALIDRAW_EXPORT_SOURCE` to the desired value.
@@ -16,8 +16,8 @@ If you want to overwrite the `source` field in the `JSON` string, you can set `w
| `useI18n` | [`() => { langCode, t }`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/i18n.ts#L15) |
```js
import { defaultLang, languages, useI18n } from "@excalidraw/excalidraw";
@@ -383,3 +394,94 @@ function App() {
);
}
```
### getCommonBounds
This util can be used to get the common bounds of the passed elements.
**_Signature_**
```ts
getCommonBounds(
elements: readonly ExcalidrawElement[]
): readonly [
minX: number,
minY: number,
maxX: number,
maxY: number,
]
```
**_How to use_**
```js
import { getCommonBounds } from "@excalidraw/excalidraw";
```
### elementsOverlappingBBox
To filter `elements` that are inside, overlap, or contain the `bounds` rectangle.
The bounds check is approximate and does not precisely follow the element's shape. You can also supply `errorMargin` which effectively makes the `bounds` larger by that amount.
This API has 3 `type`s of operation: `overlap`, `contain`, and `inside`:
- `overlap` - filters elements that are overlapping or inside bounds.
- `contain` - filters elements that are inside bounds or bounds inside elements.
- `inside` - filters elements that are inside bounds.
import { elementsOverlappingBBox } from "@excalidraw/excalidraw";
```
### isElementInsideBBox
Lower-level API than `elementsOverlappingBBox` to check if a single `element` is inside `bounds`. If `eitherDirection=true`, returns `true` if `element` is fully inside `bounds` rectangle, or vice versa. When `false`, it returns `true` only for the former case.
Excalidraw is using CSS variables to style certain components. To override them, you should set your own on the `.excalidraw` and `.excalidraw.theme--dark` (for dark mode variables) selectors.
Excalidraw uses CSS variables to style certain components. To override them, you should set your own on the `.excalidraw` and `.excalidraw.theme--dark` (for dark mode variables) selectors.
Make sure the selector has higher specificity, e.g. by prefixing it with your app's selector:
@@ -21,7 +21,7 @@ Most notably, you can customize the primary colors, by overriding these variable
- `--color-primary-light`
- `--color-primary-contrast-offset` — a slightly darker (in light mode), or lighter (in dark mode) `--color-primary` color to fix contrast issues (see [Chubb illusion](https://en.wikipedia.org/wiki/Chubb_illusion)). It will fall back to `--color-primary` if not present.
For a complete list of variables, check [theme.scss](https://github.com/excalidraw/excalidraw/blob/master/src/css/theme.scss), though most of them will not make sense to override.
For a complete list of variables, check [theme.scss](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/css/theme.scss), though most of them will not make sense to override.
@@ -13,47 +13,27 @@ To start the example app using the `@excalidraw/excalidraw` package, follow the
1. Install the dependencies
```bash
cd src/packages/excalidraw && yarn
yarn
```
2. Start the example app
```bash
yarn start
yarn start:example
```
[http://localhost:3001](http://localhost:3001) will open in your default browser.
The example is same as the [codesandbox example](https://ehlz3.csb.app/)
This is the same example as the [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example.
## Releasing
### Create a test release
You can create a test release by posting the below comment in your pull request:
```bash
@excalibot trigger release
```
Once the version is released `@excalibot` will post a comment with the release version.
### Creating a production release
To release the next stable version follow the below steps:
```bash
yarn prerelease version
yarn release --tag=latest --version=0.19.0
```
You need to pass the `version` for which you want to create the release. This will make the changes needed before making the release like updating `package.json`, `changelog` and more.
The next step is to run the `release` script:
```bash
yarn release
```
This will publish the package.
Right now there are two steps to create a production release but once this works fine these scripts will be combined and more automation will be done.
You will need to pass the `latest` tag with `version` for which you want to create the release. This will make the changes needed before publishing the packages into NPM, like updating dependencies of all `@excalidraw/*` packages, generating new entries in `CHANGELOG.md` and more.
No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx). Here is a [detailed answer](https://github.com/excalidraw/excalidraw/discussions/3879#discussioncomment-1110524) on how you can achieve the same.
No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/excalidraw-app/index.tsx). Here is a [detailed answer](https://github.com/excalidraw/excalidraw/discussions/3879#discussioncomment-1110524) on how you can achieve the same.
### Turning off Aggressive Anti-Fingerprinting in Brave browser
@@ -17,11 +17,9 @@ We strongly recommend turning it off. You can follow the steps below on how to d
<div style={{width:'30rem'}}>
2. Once opened, look for **Aggressively Block Fingerprinting**
4. Thats all. All text elements should be fixed now 🎉
@@ -31,6 +29,17 @@ We strongly recommend turning it off. You can follow the steps below on how to d
If disabling this setting doesn't fix the display of text elements, please consider opening an [issue](https://github.com/excalidraw/excalidraw/issues/new) on our GitHub, or message us on [Discord](https://discord.gg/UexuTaE).
### ReferenceError: process is not defined
When using `vite` or any build tools, you will have to make sure the `process` is accessible as we are accessing `process.env.IS_PREACT` to decide whether to use `preact` build.
Since Vite removes env variables by default, you can update the vite config to ensure its available :point_down:
Excalidraw depends on assets such as localization files (if you opt to use them), fonts, and others.
By default, Excalidraw will try to download all the used fonts from the [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod).
By default these assets are loaded from a public CDN [`https://unpkg.com/@excalidraw/excalidraw/dist/`](https://unpkg.com/@excalidraw/excalidraw/dist), so you don't need to do anything on your end.
However, if you want to host these files yourself, you can find them in your `node_modules/@excalidraw/excalidraw/dist` directory, in folders `excalidraw-assets` (for production) and `excalidraw-assets-dev` (for development).
Copy these folders to your static assets directory, and add a `window.EXCALIDRAW_ASSET_PATH` variable in your `index.html` or `index.js` entry file pointing to your public assets path (relative). For example, if you serve your assets from the root of your hostname, you would do:
For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@excalidraw/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:
```js
window.EXCALIDRAW_ASSET_PATH = "/";
```
or, if you serve your assets from the root of your CDN, you would do:
{ `window["EXCALIDRAW_ASSET_PATH"] = location.origin;` } // or use just "/"!
</Script>
```
### Dimensions of Excalidraw
Excalidraw takes _100%_ of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.
@@ -12,7 +12,7 @@ import { Excalidraw } from "@excalidraw/excalidraw";
Throughout the documentation we use live, editable Excalidraw examples like the one shown below.
While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes.
While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes.
For example, we're passing a `theme` prop to it based on the current color theme of the docs you're just reading.
:::
@@ -30,48 +30,137 @@ function App() {
}
```
### Rendering Excalidraw only on client
### Next.js
Since _Excalidraw_ doesn't support server side rendering, you should render the component once the host is `mounted`.
Since Excalidraw doesn't support `server side rendering` so it should be rendered only on `client`. The way to achieve this in next.js is using `next.js dynamic import`.
The following worfklow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.
If you want to only import `Excalidraw` component you can do :point_down:
The `types` are available at `@excalidraw/excalidraw/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)
However the above component only works for named component exports. If you want to import some util / constant or something else apart from Excalidraw, then this approach will not work. Instead you can write a wrapper over Excalidraw and import the wrapper dynamically.
If you are using `pages router` then importing the wrapper dynamically would work, where as if you are using `app router` then you will have to also add `useClient` directive on top of the file in addition to dynamically importing the wrapper as shown :point_down:
{/* Link should be updated to point to the latest! */}
Here is a [source code](https://github.com/excalidraw/excalidraw/tree/master/examples/with-nextjs) for the example with app and pages router. You you can try it out [here](https://excalidraw-package-example-with-nextjs.vercel.app/).
The `types` are available at `@excalidraw/excalidraw/types`, check [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example for details.
### Preact
Since we support `umd` build ships with `react/jsx-runtime` and `react-dom/client` inlined with the package. This conflicts with `Preact` and hence the build doesn't work directly with `Preact`.
However we have shipped a separate build for `Preact` so if you are using `Preact` you need to set `process.env.IS_PREACT` to `true` to use the `Preact` build.
Once the above `env` variable is set, you will be able to use the package in `Preact` as well.
:::info
When using `vite` or any build tools, you will have to make sure the `process` is accessible as we are accessing `process.env.IS_PREACT` to decide whether to use `preact` build.
Since Vite removes env variables by default, you can update the vite config to ensure its available :point_down:
```
define: {
"process.env.IS_PREACT": JSON.stringify("true"),
},
```
:::
## Browser
To use it in a browser directly:
To use it Excalidraw in a browser directly, use the following setup :point_down:
You will need to make sure `react`, `react-dom` is available as shown in the below example. For prod please use the production versions of `react`, `react-dom`.
> **Note**: We rely on import maps to de-duplicate `react`, `react-dom` and `react/jsx-runtime` versions.
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
@@ -85,13 +174,23 @@ import TabItem from "@theme/TabItem";
@@ -38,9 +38,9 @@ Add the diagram type in switch case in [`parseMermaid`](https://github.com/excal
## Writing the Excalidraw Skeleton Convertor
With the completion of previous step, we have all the data, now we need to transform it so to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133) format.
With the completion of previous step, we have all the data, now we need to transform it so to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133) format.
Similar to [`FlowChartToExcalidrawSkeletonConverter`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24), you have to write the `{{diagramType}}ToExcalidrawSkeletonConverter` which parses the data received in previous step and returns the [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133).
Similar to [`FlowChartToExcalidrawSkeletonConverter`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24), you have to write the `{{diagramType}}ToExcalidrawSkeletonConverter` which parses the data received in previous step and returns the [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133).
Thats it, you have added the new diagram type 🥳, now lets test it out!
We use `diagram.parser.yy` attribute to parse the data. If you want to know more about how the `diagram.parse.yy` attribute looks like, you can check it [here](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/diagrams/flowchart/flowDb.js#L768), however for scope of flowchart we are using **3** APIs from this parser to compute `vertices`, `edges` and `clusters` as we need these data to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133C13-L133C38).
We use `diagram.parser.yy` attribute to parse the data. If you want to know more about how the `diagram.parse.yy` attribute looks like, you can check it [here](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/diagrams/flowchart/flowDb.js#L768), however for scope of flowchart we are using **3** APIs from this parser to compute `vertices`, `edges` and `clusters` as we need these data to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38).
For computing `vertices` and `edge`s lets consider the below svg generated by mermaid
@@ -42,7 +42,7 @@ Considering the same example this is the response from the API
}
}
```
The dimensions and position is missing in this response and we need that to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133C13-L133C38), for this we have our own parser [`parseVertex`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L178) which takes the above response and uses the `svg` together to compute position, dimensions and cleans up the response.
The dimensions and position is missing in this response and we need that to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38), for this we have our own parser [`parseVertex`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L178) which takes the above response and uses the `svg` together to compute position, dimensions and cleans up the response.
The final output from `parseVertex` looks like :point_down:
@@ -55,11 +55,11 @@ If you want to understand how flowchart parser works, you can navigate to [Flowc
## Converting to ExcalidrawElementSkeleton
Now we have all the data, we just need to transform it to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133C13-L133C38) API so it can be rendered in Excalidraw.
Now we have all the data, we just need to transform it to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38) API so it can be rendered in Excalidraw.
For this we have `converters` which takes the parsed mermaid data and gives back the Excalidraw Skeleton.
For Unsupported types, we have already mentioned above that we convert it to `dataURL` and return the ExcalidrawImageSkeleton.
For supported types, currently only flowchart, we have [flowchartConverter](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24) which parses the data and converts to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133C13-L133C38).
For supported types, currently only flowchart, we have [flowchartConverter](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24) which parses the data and converts to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38).
Frames should be ordered where frame children come first, followed by the frame element itself:
```
[
other_element,
frame1_child1,
frame1_child2,
frame1,
other_element,
frame2_child1,
frame2_child2,
frame2,
other_element,
...
]
```
If not ordered correctly, the editor will still function, but the elements may not be rendered and clipped correctly. Further, the renderer relies on this ordering for performance optimizations.
@@ -43,7 +43,7 @@ When saving an Excalidraw scene locally to a file, the JSON file (`.excalidraw`)
// editor state (canvas config, preferences, ...)
"appState": {
"gridSize": null,
"gridSize": 20,
"viewBackgroundColor": "#ffffff"
},
@@ -62,6 +62,18 @@ When saving an Excalidraw scene locally to a file, the JSON file (`.excalidraw`)
}
```
### Element creation time
Every normalized element has a `created: number | null` field. A number is the client's wall-clock time in epoch milliseconds when this element instance was created. `null` means the creation time is unknown; restoring an older file does not substitute its load time or last-update time.
| Operation | `created` |
| --- | --- |
| Construct a new element | Current time, unless explicitly supplied (including `null`) |
| Duplicate, paste, or insert from a library | New time for the new instance |
| Convert element skeletons with ID regeneration | New time for each resulting instance |
| Restore/open/import an existing scene | Preserve the carried value; missing values become `null` |
| Edit, change type while retaining the ID, capture, undo, or redo | Preserve the value |
## Excalidraw clipboard format
When copying selected excalidraw elements to clipboard, the JSON schema is similar to `.excalidraw` format, except it differs in attributes.
1. Go to https://codesandbox.io/p/github/excalidraw/excalidraw
1. Connect your GitHub account
1. Go to Git tab on left side
1. Tap on `Fork Sandbox`
1. Write your code
1. Commit and PR automatically
## Pull Request Guidelines
Don't worry if you get any of the below wrong, or if you don't know how. We'll gladly help out.
@@ -52,15 +41,6 @@ Make sure the title starts with a semantic prefix:
- **chore**: Other changes that don't modify src or test files
- **revert**: Reverts a previous commit
### Changelog
Add a brief description of your pull request to the changelog located here: [changelog](https://github.com/excalidraw/excalidraw/blob/master/CHANGELOG.md)
Notes:
- Make sure to prepend to the section corresponding with the semantic prefix you selected in the title
- Link to your pull request - this will require updating the CHANGELOG _after_ creating the pull request
### Testing
Once you submit your pull request it will automatically be tested. Be sure to check the results of the test and fix any issues that arise.
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3005) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
// The ts config doesn't work with `jsx: preserve" and if updated to `react-jsx` it gets ovewritten by next js throwing ts errors hence I am ignoring build errors until this is fixed.
ignoreBuildErrors:true,
},
// This is needed as in pages router the code for importing types throws error as its outside next js app
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
David Luzar
