From 89a9badc27d30947882be7f2d6230d95141dd18b Mon Sep 17 00:00:00 2001 From: Christopher Tangonan <161169629+cTangonan123@users.noreply.github.com> Date: Fri, 13 Feb 2026 13:33:52 -0800 Subject: [PATCH 01/62] fix: update arrowhead property defaultValue handling (#10778) --- packages/excalidraw/actions/actionProperties.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index 2d6b040a34..d15f9de166 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -1683,7 +1683,8 @@ export const actionChangeArrowhead = register<{ ? element.startArrowhead : appState.currentItemStartArrowhead, true, - appState.currentItemStartArrowhead, + (hasSelection) => + hasSelection ? null : appState.currentItemStartArrowhead, )} onChange={(value) => updateData({ position: "start", type: value })} numberOfOptionsToAlwaysShow={4} @@ -1700,7 +1701,8 @@ export const actionChangeArrowhead = register<{ ? element.endArrowhead : appState.currentItemEndArrowhead, true, - appState.currentItemEndArrowhead, + (hasSelection) => + hasSelection ? null : appState.currentItemEndArrowhead, )} onChange={(value) => updateData({ position: "end", type: value })} numberOfOptionsToAlwaysShow={4} From 46ddd60948b82f804c36b7c6325b6144187185cf Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Mon, 16 Feb 2026 22:19:11 +0100 Subject: [PATCH 02/62] feat(editor): support embedding google drive videos (#10788) --- packages/element/src/embeddable.ts | 81 +++++++++++++++++++++- packages/element/tests/embeddable.test.ts | 82 ++++++++++++++++++++++- 2 files changed, 160 insertions(+), 3 deletions(-) diff --git a/packages/element/src/embeddable.ts b/packages/element/src/embeddable.ts index 71c75cc23a..917ca0a7af 100644 --- a/packages/element/src/embeddable.ts +++ b/packages/element/src/embeddable.ts @@ -56,7 +56,7 @@ const RE_REDDIT = const RE_REDDIT_EMBED = /^ { +const parseYouTubeLikeTimestamp = (url: string): number => { let timeParam: string | null | undefined; try { @@ -85,11 +85,57 @@ const parseYouTubeTimestamp = (url: string): number => { return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds); }; +const parseGoogleDriveVideoLink = ( + url: string, +): { fileId: string; resourceKey?: string; timestamp?: number } | null => { + try { + const urlObj = new URL(url.startsWith("http") ? url : `https://${url}`); + const hostname = urlObj.hostname.replace(/^www\./, ""); + if (hostname !== "drive.google.com") { + return null; + } + + let fileId: string | null = null; + const pathMatch = urlObj.pathname.match(/^\/file\/d\/([^/]+)(?:\/|$)/); + if (pathMatch?.[1]) { + fileId = pathMatch[1]; + } else if (urlObj.pathname === "/open" || urlObj.pathname === "/uc") { + // Shared Drive links can be emitted as: + // - /open?id= (common "open in Drive" format) + // - /uc?...&id= (download/export endpoint often seen in copied links) + fileId = urlObj.searchParams.get("id"); + } + + if (!fileId || !/^[a-zA-Z0-9_-]+$/.test(fileId)) { + return null; + } + + // Some Drive share links include `resourcekey` for access to link-shared + // files; preserve it in the preview URL so embeds keep working. + const resourceKey = urlObj.searchParams.get("resourcekey"); + const timestamp = parseYouTubeLikeTimestamp(urlObj.toString()); + + return { + fileId, + resourceKey: + resourceKey && /^[a-zA-Z0-9_-]+$/.test(resourceKey) + ? resourceKey + : undefined, + // Drive accepts YouTube-like `t` formats (e.g. `t=90`, `t=1m30s`); + // normalize to seconds for a stable preview URL. + timestamp: timestamp > 0 ? timestamp : undefined, + }; + } catch (error) { + return null; + } +}; + const ALLOWED_DOMAINS = new Set([ "youtube.com", "youtu.be", "vimeo.com", "player.vimeo.com", + "drive.google.com", "figma.com", "link.excalidraw.com", "gist.github.com", @@ -108,6 +154,7 @@ const ALLOW_SAME_ORIGIN = new Set([ "youtu.be", "vimeo.com", "player.vimeo.com", + "drive.google.com", "figma.com", "twitter.com", "x.com", @@ -142,7 +189,7 @@ export const getEmbedLink = ( let aspectRatio = { w: 560, h: 840 }; const ytLink = link.match(RE_YOUTUBE); if (ytLink?.[2]) { - const startTime = parseYouTubeTimestamp(originalLink); + const startTime = parseYouTubeLikeTimestamp(originalLink); const time = startTime > 0 ? `&start=${startTime}` : ``; const isPortrait = link.includes("shorts"); type = "video"; @@ -201,6 +248,36 @@ export const getEmbedLink = ( }; } + const googleDriveVideo = parseGoogleDriveVideoLink(link); + if (googleDriveVideo) { + type = "video"; + const searchParams = new URLSearchParams(); + if (googleDriveVideo.resourceKey) { + searchParams.set("resourcekey", googleDriveVideo.resourceKey); + } + if (googleDriveVideo.timestamp) { + searchParams.set("t", `${googleDriveVideo.timestamp}`); + } + + const search = searchParams.toString(); + link = `https://drive.google.com/file/d/${googleDriveVideo.fileId}/preview${ + search ? `?${search}` : "" + }`; + aspectRatio = { w: 560, h: 315 }; + embeddedLinkCache.set(originalLink, { + link, + intrinsicSize: aspectRatio, + type, + sandbox: { allowSameOrigin }, + }); + return { + link, + intrinsicSize: aspectRatio, + type, + sandbox: { allowSameOrigin }, + }; + } + const figmaLink = link.match(RE_FIGMA); if (figmaLink) { type = "generic"; diff --git a/packages/element/tests/embeddable.test.ts b/packages/element/tests/embeddable.test.ts index 7f585e866f..35870a86f2 100644 --- a/packages/element/tests/embeddable.test.ts +++ b/packages/element/tests/embeddable.test.ts @@ -1,4 +1,4 @@ -import { getEmbedLink } from "../src/embeddable"; +import { embeddableURLValidator, getEmbedLink } from "../src/embeddable"; describe("YouTube timestamp parsing", () => { it("should parse YouTube URLs with timestamp in seconds", () => { @@ -151,3 +151,83 @@ describe("YouTube timestamp parsing", () => { } }); }); + +describe("Google Drive video embedding", () => { + it.each([ + { + url: "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?usp=sharing", + expectedLink: + "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview", + }, + { + url: "https://drive.google.com/open?id=1AbCdEfGhIjKlMnOpQrStUvWxYz123456", + expectedLink: + "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview", + }, + { + url: "https://drive.google.com/uc?export=download&id=1AbCdEfGhIjKlMnOpQrStUvWxYz123456", + expectedLink: + "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview", + }, + ])("should normalize Google Drive link: $url", ({ url, expectedLink }) => { + const result = getEmbedLink(url); + + expect(result).toBeTruthy(); + expect(result?.type).toBe("video"); + if (result?.type === "video" || result?.type === "generic") { + expect(result.link).toBe(expectedLink); + } + expect(result?.intrinsicSize).toEqual({ w: 560, h: 315 }); + }); + + it("should preserve resourcekey when available", () => { + const url = + "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?resourcekey=0-abcdef123456"; + const result = getEmbedLink(url); + + expect(result).toBeTruthy(); + expect(result?.type).toBe("video"); + if (result?.type === "video" || result?.type === "generic") { + expect(result.link).toBe( + "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?resourcekey=0-abcdef123456", + ); + } + }); + + it("should preserve timestamp when available", () => { + const url = + "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?t=9"; + const result = getEmbedLink(url); + + expect(result).toBeTruthy(); + expect(result?.type).toBe("video"); + if (result?.type === "video" || result?.type === "generic") { + expect(result.link).toBe( + "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?t=9", + ); + } + }); + + it("should preserve resourcekey and timestamp together", () => { + const url = + "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?resourcekey=0-abcdef123456&t=9"; + const result = getEmbedLink(url); + + expect(result).toBeTruthy(); + expect(result?.type).toBe("video"); + if (result?.type === "video" || result?.type === "generic") { + expect(result.link).toBe( + "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?resourcekey=0-abcdef123456&t=9", + ); + } + }); + + it("should validate Google Drive domain by default", () => { + expect( + embeddableURLValidator( + "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view", + undefined, + ), + ).toBe(true); + }); +}); From ffcb67b21f3693821b0202bf54707bcee21a8ba7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= Date: Mon, 16 Feb 2026 22:25:28 +0100 Subject: [PATCH 03/62] fix: Inside-inside bound arrow endpoint drag trigger focus point editor (#10771) fix: Inside-inside binding arrow endpoint drag trigger focus point editor Signed-off-by: Mark Tolmacs --- packages/element/src/arrows/focus.ts | 30 ++++++++++++++----- .../excalidraw/renderer/interactiveScene.ts | 1 + 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/element/src/arrows/focus.ts b/packages/element/src/arrows/focus.ts index ae02793f72..e0abd75f66 100644 --- a/packages/element/src/arrows/focus.ts +++ b/packages/element/src/arrows/focus.ts @@ -42,6 +42,7 @@ export const isFocusPointVisible = ( isBindingEnabled: AppState["isBindingEnabled"]; zoom: AppState["zoom"]; }, + startOrEnd: "start" | "end", ignoreOverlap = false, ): boolean => { // No focus point management for elbow arrows, because elbow arrows @@ -76,14 +77,25 @@ export const isFocusPointVisible = ( } } - // Check if the focus point is within the element's shape bounds - return hitElementItself({ - element: bindableElement, + const arrowPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates( + arrow, + startOrEnd === "end" ? arrow.points.length - 1 : 0, elementsMap, - point: focusPoint, - threshold: getBindingGap(bindableElement, arrow), - overrideShouldTestInside: true, - }); + ); + + // Check if the focus point is within the element's shape bounds + // Endpoint dragging takes precedence + return ( + pointDistance(focusPoint, arrowPoint) >= + (FOCUS_POINT_SIZE * 1.5) / appState.zoom.value && + hitElementItself({ + element: bindableElement, + elementsMap, + point: focusPoint, + threshold: getBindingGap(bindableElement, arrow), + overrideShouldTestInside: true, + }) + ); }; // Updates the arrow endpoints in "orbit" configuration @@ -353,6 +365,7 @@ export const handleFocusPointPointerDown = ( bindableElement, elementsMap, appState, + "start", ) && pointDistance(pointerPos, focusPoint) <= hitThreshold ) { @@ -387,6 +400,7 @@ export const handleFocusPointPointerDown = ( bindableElement, elementsMap, appState, + "end", ) && pointDistance(pointerPos, focusPoint) <= hitThreshold ) { @@ -501,6 +515,7 @@ export const handleFocusPointHover = ( bindableElement, elementsMap, appState, + "start", ) && pointDistance(pointerPos, focusPoint) <= hitThreshold ) { @@ -529,6 +544,7 @@ export const handleFocusPointHover = ( bindableElement, elementsMap, appState, + "end", ) && pointDistance(pointerPos, focusPoint) <= hitThreshold ) { diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts index 85b4a9a369..fd243eee3b 100644 --- a/packages/excalidraw/renderer/interactiveScene.ts +++ b/packages/excalidraw/renderer/interactiveScene.ts @@ -1269,6 +1269,7 @@ const renderFocusPointIndicator = ({ bindableElement, elementsMap, appState, + type, ) ) { return; From c1e00c44f57841b18ea14bde30b8d1f5aff95c7e Mon Sep 17 00:00:00 2001 From: Christopher Tangonan <161169629+cTangonan123@users.noreply.github.com> Date: Mon, 16 Feb 2026 22:57:09 -0800 Subject: [PATCH 04/62] fix: convert ArrowheadNoneIcon to component matching arrowhead icon pattern (#10789) --- .../excalidraw/actions/actionProperties.tsx | 2 +- packages/excalidraw/components/icons.tsx | 22 +++++++++++++------ 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index d15f9de166..7fb9ed0e86 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -1555,7 +1555,7 @@ const getArrowheadOptions = (flip: boolean) => { value: null, text: t("labels.arrowhead_none"), keyBinding: "q", - icon: ArrowheadNoneIcon, + icon: , }, { value: "arrow", diff --git a/packages/excalidraw/components/icons.tsx b/packages/excalidraw/components/icons.tsx index 6a7a934083..4a1691863f 100644 --- a/packages/excalidraw/components/icons.tsx +++ b/packages/excalidraw/components/icons.tsx @@ -1287,13 +1287,21 @@ export const EdgeRoundIcon = createIcon( tablerIconProps, ); -export const ArrowheadNoneIcon = createIcon( - - - - - , - tablerIconProps, +export const ArrowheadNoneIcon = React.memo( + ({ flip = false }: { flip?: boolean }) => + createIcon( + + + + + , + tablerIconProps, + ), ); export const ArrowheadArrowIcon = React.memo( From 5852d0d41005e67ca00124079b9eee91e4ab716d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= Date: Tue, 17 Feb 2026 14:10:05 +0100 Subject: [PATCH 05/62] fix: Arrow overlap arrow behavior (#10732) * fix(arrow): Overlap arrow behavior Signed-off-by: Mark Tolmacs * fix: Lint Signed-off-by: Mark Tolmacs * 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 * fix: Remove non-needed export Signed-off-by: Mark Tolmacs * fix. Possessed arrows #1 Signed-off-by: Mark Tolmacs * fix: Focus point projection stabilization Signed-off-by: Mark Tolmacs * fix: Remove arrow stability hack Signed-off-by: Mark Tolmacs * fix: Unbound other endpoint Signed-off-by: Mark Tolmacs * 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 * fix: Tests Signed-off-by: Mark Tolmacs * fix: Snap to center around side mid point. Signed-off-by: Mark Tolmacs * Trigger CI * fix: Midpoint outline focus point Signed-off-by: Mark Tolmacs * fix: Tests Signed-off-by: Mark Tolmacs * fix: Dragging existing arrow reset focus point on outline Signed-off-by: Mark Tolmacs * fix: Tests Signed-off-by: Mark Tolmacs * feat: Midpoint indicator Signed-off-by: Mark Tolmacs * fix: Rotated mid points Signed-off-by: Mark Tolmacs * fix: No hole Signed-off-by: Mark Tolmacs * feat: Cache hits and scene lookups Signed-off-by: Mark Tolmacs * chore: Remove debug Signed-off-by: Mark Tolmacs * fix: Consider hit threshold and inside override too Signed-off-by: Mark Tolmacs * fix: Increase outline midpoint sticky distance Signed-off-by: Mark Tolmacs * fix: Don't show midpoint indicator when no snapping is possible Signed-off-by: Mark Tolmacs * feat: Indicate lock-in Signed-off-by: Mark Tolmacs * chore: Remove Map caching Signed-off-by: Mark Tolmacs * fix: incorrect threshold Signed-off-by: Mark Tolmacs * fix: threshold setting Signed-off-by: Mark Tolmacs * fix: Hit caching Signed-off-by: Mark Tolmacs * fix: Simple arrow mid point selection inconsistency Signed-off-by: Mark Tolmacs * fix: cache override Signed-off-by: Mark Tolmacs * fix: Precise know dragging with midpoint refactor Signed-off-by: Mark Tolmacs * fear: Frame support Signed-off-by: Mark Tolmacs * fix: Crossing arrow won't trigger mid point Signed-off-by: Mark Tolmacs * fix: Arrow creation point highlight Signed-off-by: Mark Tolmacs * fix: Restore types & tests Signed-off-by: Mark Tolmacs * chore: Restore restore.ts Signed-off-by: Mark Tolmacs * fix: restore.ts Signed-off-by: Mark Tolmacs * fix: Elbow arrows reliably highlight center point Signed-off-by: Mark Tolmacs * fix: Highlight point ordering Signed-off-by: Mark Tolmacs * feat: Bind with focus point across shape Signed-off-by: Mark Tolmacs * fix: Lint * fix: Midpoint and binding alignment Signed-off-by: Mark Tolmacs * chore: Indicator color Signed-off-by: Mark Tolmacs * chore: More knob tuning Signed-off-by: Mark Tolmacs * fix: Radius Signed-off-by: Mark Tolmacs * fix: Tests Signed-off-by: Mark Tolmacs * simplify point indicators --------- Signed-off-by: Mark Tolmacs Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com> * fix: Tests Signed-off-by: Mark Tolmacs * fix: Snapshots Signed-off-by: Mark Tolmacs * fix: Target point selection Signed-off-by: Mark Tolmacs * chore: Remove non-needed change Signed-off-by: Mark Tolmacs * chore: Try again removing non-needed modification Signed-off-by: Mark Tolmacs * fix: Inside-inside binding arrow endpoint drag trigger focus point editor Signed-off-by: Mark Tolmacs * fix: Area based edge case Signed-off-by: Mark Tolmacs * fix: Overlapping new arrow jump Signed-off-by: Mark Tolmacs --------- Signed-off-by: Mark Tolmacs Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com> --- packages/element/src/align.ts | 1 - packages/element/src/arrows/focus.ts | 1 + packages/element/src/binding.ts | 314 +++++++++--------- packages/element/src/linearElementEditor.ts | 20 +- packages/element/src/utils.ts | 31 +- packages/excalidraw/components/App.tsx | 4 +- .../tests/__snapshots__/history.test.tsx.snap | 236 ++++++------- .../tests/__snapshots__/move.test.tsx.snap | 10 +- 8 files changed, 322 insertions(+), 295 deletions(-) diff --git a/packages/element/src/align.ts b/packages/element/src/align.ts index 17ebc3a97c..3068aee8d1 100644 --- a/packages/element/src/align.ts +++ b/packages/element/src/align.ts @@ -43,7 +43,6 @@ export const alignElements = ( // update bound elements updateBoundElements(element, scene, { simultaneouslyUpdated: group, - indirectArrowUpdate: true, }); return updatedEle; }); diff --git a/packages/element/src/arrows/focus.ts b/packages/element/src/arrows/focus.ts index e0abd75f66..fa8018adbe 100644 --- a/packages/element/src/arrows/focus.ts +++ b/packages/element/src/arrows/focus.ts @@ -141,6 +141,7 @@ const focusPointUpdate = ( currentBinding, bindableElement, elementsMap, + true, ); if (newPoint) { diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index e7bc98c04f..86041b4aba 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -27,11 +27,7 @@ import type { AppState } from "@excalidraw/excalidraw/types"; import type { MapEntry, Mutable } from "@excalidraw/common/utility-types"; import type { Bounds } from "@excalidraw/common"; -import { - doBoundsIntersect, - getCenterForBounds, - getElementBounds, -} from "./bounds"; +import { getCenterForBounds } from "./bounds"; import { getAllHoveredElementAtPoint, getHoveredElementForBinding, @@ -116,6 +112,7 @@ export type BindingStrategy = */ export const BASE_BINDING_GAP = 5; export const BASE_BINDING_GAP_ELBOW = 5; +export const BASE_ARROW_MIN_LENGTH = 10; export const FOCUS_POINT_SIZE = 10 / 1.5; export const getBindingGap = ( @@ -810,13 +807,23 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = ( startDragged ? -1 : 0, elementsMap, ); - + const pointIsCloseToOtherElement = + otherFocusPoint && + otherBindableElement && + hitElementItself({ + point: globalPoint, + element: otherBindableElement, + elementsMap, + threshold: maxBindingDistance_simple(appState.zoom), + overrideShouldTestInside: true, + }); const otherNeverOverride = opts?.newArrow ? appState.selectedLinearElement?.initialState.arrowStartIsInside : otherBinding?.mode === "inside"; const other: BindingStrategy = !otherNeverOverride ? otherBindableElement && !otherFocusPointIsInElement && + !pointIsCloseToOtherElement && appState.selectedLinearElement?.initialState.altFocusPoint ? { mode: "orbit", @@ -1083,7 +1090,6 @@ export const updateBoundElements = ( options?: { simultaneouslyUpdated?: readonly ExcalidrawElement[]; changedElements?: Map; - indirectArrowUpdate?: boolean; }, ) => { if (!isBindableElement(changedElement)) { @@ -1178,11 +1184,6 @@ export const updateBoundElements = ( }; boundElementsVisitor(elementsMap, changedElement, visitor); - - if (options?.indirectArrowUpdate) { - boundElementsVisitor(elementsMap, changedElement, visitor); - boundElementsVisitor(elementsMap, changedElement, visitor); - } }; const updateArrowBindings = ( @@ -1692,10 +1693,41 @@ export const snapToMid = ( return undefined; }; -const compareElementArea = ( - a: ExcalidrawBindableElement, - b: ExcalidrawBindableElement, -) => b.width ** 2 + b.height ** 2 - (a.width ** 2 + a.height ** 2); +const extractBinding = ( + arrow: ExcalidrawArrowElement, + startOrEnd: "startBinding" | "endBinding", + elementsMap: ElementsMap, +) => { + const binding = arrow[startOrEnd]; + if (!binding) { + return { + element: null, + fixedPoint: null, + focusPoint: null, + binding, + mode: null, + }; + } + + const element = elementsMap.get( + binding.elementId, + ) as ExcalidrawBindableElement; + + return { + element, + fixedPoint: binding.fixedPoint, + focusPoint: getGlobalFixedPointForBindableElement( + normalizeFixedPoint(binding.fixedPoint), + element, + elementsMap, + ), + binding, + mode: binding.mode, + }; +}; + +const elementArea = (element: ExcalidrawBindableElement) => + element.width * element.height; export const updateBoundPoint = ( arrow: NonDeleted, @@ -1703,9 +1735,7 @@ export const updateBoundPoint = ( binding: FixedPointBinding | null | undefined, bindableElement: ExcalidrawBindableElement, elementsMap: ElementsMap, - opts?: { - customIntersector?: LineSegment; - }, + dragging?: boolean, ): LocalPoint | null => { if ( binding == null || @@ -1720,150 +1750,136 @@ export const updateBoundPoint = ( return null; } - const global = getGlobalFixedPointForBindableElement( + const focusPoint = getGlobalFixedPointForBindableElement( normalizeFixedPoint(binding.fixedPoint), bindableElement, elementsMap, ); - const pointIndex = - startOrEnd === "startBinding" ? 0 : arrow.points.length - 1; - const elbowed = isElbowArrow(arrow); - const otherBinding = - startOrEnd === "startBinding" ? arrow.endBinding : arrow.startBinding; - const otherBindableElement = - otherBinding && - (elementsMap.get(otherBinding.elementId)! as ExcalidrawBindableElement); - const bounds = getElementBounds(bindableElement, elementsMap); - const otherBounds = - otherBindableElement && getElementBounds(otherBindableElement, elementsMap); - const isLargerThanOther = - otherBindableElement && - compareElementArea(bindableElement, otherBindableElement) < - // if both shapes the same size, pretend the other is larger - (startOrEnd === "endBinding" ? 1 : 0); - const isOverlapping = otherBounds && doBoundsIntersect(bounds, otherBounds); - // GOAL: If the arrow becomes too short, we want to jump the arrow endpoints - // to the exact focus points on the elements. - // INTUITION: We're not interested in the exacts length of the arrow (which - // will change if we change where we route it), we want to know the length of - // the part which lies outside of both shapes and consider that as a trigger - // to change where we point the arrow. Avoids jumping the arrow in and out - // at every frame. - let arrowTooShort = false; - if ( - !isOverlapping && - !elbowed && - arrow.startBinding && - arrow.endBinding && - otherBindableElement && - arrow.points.length === 2 - ) { - const startFocusPoint = getGlobalFixedPointForBindableElement( - arrow.startBinding.fixedPoint, - startOrEnd === "startBinding" ? bindableElement : otherBindableElement, - elementsMap, - ); - const endFocusPoint = getGlobalFixedPointForBindableElement( - arrow.endBinding.fixedPoint, - startOrEnd === "endBinding" ? bindableElement : otherBindableElement, - elementsMap, - ); - const segment = lineSegment(startFocusPoint, endFocusPoint); - const startIntersection = intersectElementWithLineSegment( - startOrEnd === "endBinding" ? bindableElement : otherBindableElement, - elementsMap, - segment, - 0, - true, - ); - const endIntersection = intersectElementWithLineSegment( - startOrEnd === "startBinding" ? bindableElement : otherBindableElement, - elementsMap, - segment, - 0, - true, - ); - if (startIntersection.length > 0 && endIntersection.length > 0) { - const len = pointDistance(startIntersection[0], endIntersection[0]); - arrowTooShort = len < 40; - } - } - - const isNested = (arrowTooShort || isOverlapping) && isLargerThanOther; - - let _customIntersector = opts?.customIntersector; - if (!elbowed && !_customIntersector) { - const [x1, y1, x2, y2] = LinearElementEditor.getElementAbsoluteCoords( + // 0. Short-circuit for inside binding as it doesn't require any + // calculations and is not affected by other bindings + if (binding.mode === "inside") { + return LinearElementEditor.createPointAt( arrow, elementsMap, - ); - const center = pointFrom((x1 + x2) / 2, (y1 + y2) / 2); - const edgePoint = global; - const adjacentPoint = pointRotateRads( - pointFrom( - arrow.x + - arrow.points[pointIndex === 0 ? 1 : arrow.points.length - 2][0], - arrow.y + - arrow.points[pointIndex === 0 ? 1 : arrow.points.length - 2][1], - ), - center, - arrow.angle as Radians, - ); - const bindingGap = getBindingGap(bindableElement, arrow); - const halfVector = vectorScale( - vectorNormalize(vectorFromPoint(edgePoint, adjacentPoint)), - pointDistance(edgePoint, adjacentPoint) + - Math.max(bindableElement.width, bindableElement.height) + - bindingGap * 2, - ); - _customIntersector = lineSegment( - pointFromVector(halfVector, adjacentPoint), - pointFromVector(vectorScale(halfVector, -1), adjacentPoint), + focusPoint[0], + focusPoint[1], + null, ); } - const maybeOutlineGlobal = - binding.mode === "orbit" && bindableElement - ? isNested - ? global - : bindPointToSnapToElementOutline( - { - ...arrow, - points: [ - pointIndex === 0 - ? LinearElementEditor.createPointAt( - arrow, - elementsMap, - global[0], - global[1], - null, - ) - : arrow.points[0], - ...arrow.points.slice(1, -1), - pointIndex === arrow.points.length - 1 - ? LinearElementEditor.createPointAt( - arrow, - elementsMap, - global[0], - global[1], - null, - ) - : arrow.points[arrow.points.length - 1], - ], - }, - bindableElement, - pointIndex === 0 ? "start" : "end", - elementsMap, - _customIntersector, - ) - : global; + const { element: otherBindable, focusPoint: otherFocusPoint } = + extractBinding( + arrow, + startOrEnd === "startBinding" ? "endBinding" : "startBinding", + elementsMap, + ); + const otherArrowPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates( + arrow, + startOrEnd === "startBinding" ? -1 : 0, + elementsMap, + ); + const otherFocusPointOrArrowPoint = otherFocusPoint || otherArrowPoint; + const intersector = + otherFocusPointOrArrowPoint && + lineSegment(focusPoint, otherFocusPointOrArrowPoint); + const otherOutlinePoint = + otherBindable && + intersector && + intersectElementWithLineSegment( + otherBindable, + elementsMap, + intersector, + getBindingGap(otherBindable, arrow), + ).sort( + (a, b) => pointDistanceSq(a, focusPoint) - pointDistanceSq(b, focusPoint), + )[0]; + const outlinePoint = + intersector && + intersectElementWithLineSegment( + bindableElement, + elementsMap, + intersector, + getBindingGap(bindableElement, arrow), + ).sort( + (a, b) => + pointDistanceSq(a, otherFocusPointOrArrowPoint) - + pointDistanceSq(b, otherFocusPointOrArrowPoint), + )[0]; + const startHasArrowhead = arrow.startArrowhead !== null; + const endHasArrowhead = arrow.endArrowhead !== null; + const resolvedTarget = + (!startHasArrowhead && !endHasArrowhead) || + (startOrEnd === "startBinding" && startHasArrowhead) || + (startOrEnd === "endBinding" && endHasArrowhead) + ? focusPoint + : outlinePoint || focusPoint; + // 1. Handle case when the outline point (or focus point) is inside + // the other shape by short-circuiting to the focus point, otherwise + // the arrow would invert + if ( + otherBindable && + outlinePoint && + !dragging && + // Arbitrary threshold to handle wireframing use cases + elementArea(otherBindable) < elementArea(bindableElement) * 2 && + hitElementItself({ + element: otherBindable, + point: outlinePoint, + elementsMap, + threshold: getBindingGap(otherBindable, arrow), + overrideShouldTestInside: true, + }) + ) { + return LinearElementEditor.createPointAt( + arrow, + elementsMap, + resolvedTarget[0], + resolvedTarget[1], + null, + ); + } + + const otherTargetPoint = otherBindable + ? otherOutlinePoint || otherFocusPoint || otherArrowPoint + : otherArrowPoint; + const arrowTooShort = + pointDistance(otherTargetPoint, outlinePoint || focusPoint) <= + BASE_ARROW_MIN_LENGTH; + + // 2. If the arrow is unconnected at the other end, just check arrow size + // and short-circuit to the focus point if the arrow is too short to + // avoid inversion + if (!otherBindable) { + return LinearElementEditor.createPointAt( + arrow, + elementsMap, + arrowTooShort ? focusPoint[0] : outlinePoint?.[0] ?? focusPoint[0], + arrowTooShort ? focusPoint[1] : outlinePoint?.[1] ?? focusPoint[1], + null, + ); + } + + // 3. If the arrow is too short while connected on both ends and + // the other arrow endpoint will not be inside the bindable, just + // check the arrow size and make a decision based on that + if (arrowTooShort) { + return LinearElementEditor.createPointAt( + arrow, + elementsMap, + resolvedTarget?.[0] || focusPoint[0], + resolvedTarget?.[1] || focusPoint[1], + null, + ); + } + + // 4. In the general case, snap to the outline if possible return LinearElementEditor.createPointAt( arrow, elementsMap, - maybeOutlineGlobal[0], - maybeOutlineGlobal[1], + outlinePoint?.[0] || focusPoint[0], + outlinePoint?.[1] || focusPoint[1], null, ); }; diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts index 1664a578e2..e3d3f2e510 100644 --- a/packages/element/src/linearElementEditor.ts +++ b/packages/element/src/linearElementEditor.ts @@ -9,7 +9,6 @@ import { vectorFromPoint, curveLength, curvePointAtLength, - lineSegment, } from "@excalidraw/math"; import { getCurvePathOps } from "@excalidraw/utils/shape"; @@ -2339,19 +2338,6 @@ const pointDraggingUpdates = ( : updates.endBinding, }; - // We need to use a custom intersector to ensure that if there is a big "jump" - // in the arrow's position, we can position it with outline avoidance - // pixel-perfectly and avoid "dancing" arrows. - // NOTE: Direction matters here, so we create two intersectors - const startCustomIntersector = - start.focusPoint && end.focusPoint - ? lineSegment(start.focusPoint, end.focusPoint) - : undefined; - const endCustomIntersector = - start.focusPoint && end.focusPoint - ? lineSegment(end.focusPoint, start.focusPoint) - : undefined; - // Needed to handle a special case where an existing arrow is dragged over // the same element it is bound to on the other side const startIsDraggingOverEndElement = @@ -2387,9 +2373,7 @@ const pointDraggingUpdates = ( nextArrow.endBinding, endBindable, elementsMap, - { - customIntersector: endCustomIntersector, - }, + endIsDragged, ) || nextArrow.points[nextArrow.points.length - 1] : nextArrow.points[nextArrow.points.length - 1]; @@ -2420,7 +2404,7 @@ const pointDraggingUpdates = ( nextArrow.startBinding, startBindable, elementsMap, - { customIntersector: startCustomIntersector }, + startIsDragged, ) || nextArrow.points[0] : nextArrow.points[0]; diff --git a/packages/element/src/utils.ts b/packages/element/src/utils.ts index ee341b310a..7013acf2f1 100644 --- a/packages/element/src/utils.ts +++ b/packages/element/src/utils.ts @@ -43,6 +43,11 @@ import { LinearElementEditor } from "./linearElementEditor"; import { isRectangularElement } from "./typeChecks"; import { maxBindingDistance_simple } from "./binding"; +import { + getGlobalFixedPointForBindableElement, + normalizeFixedPoint, +} from "./binding"; + import type { ElementsMap, ExcalidrawArrowElement, @@ -677,11 +682,35 @@ export const projectFixedPointOntoDiagonal = ( elementsMap, ); - const a = LinearElementEditor.getPointAtIndexGlobalCoordinates( + // To avoid working with stale arrow state, we use the opposite focus point + // of the current endpoint, which will always be unchanged during moving of + // the endpoint. This is only needed when the arrow has only two points. + let a = LinearElementEditor.getPointAtIndexGlobalCoordinates( arrow, startOrEnd === "start" ? 1 : arrow.points.length - 2, elementsMap, ); + if (arrow.points.length === 2) { + const otherBinding = + startOrEnd === "start" ? arrow.endBinding : arrow.startBinding; + const otherBindable = + otherBinding && + (elementsMap.get(otherBinding.elementId) as + | ExcalidrawBindableElement + | undefined); + const otherFocusPoint = + otherBinding && + otherBindable && + getGlobalFixedPointForBindableElement( + normalizeFixedPoint(otherBinding.fixedPoint), + otherBindable, + elementsMap, + ); + if (otherFocusPoint) { + a = otherFocusPoint; + } + } + const b = pointFromVector( vectorScale( vectorFromPoint(point, a), diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index fc8a400055..32bac77e1e 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -9623,9 +9623,7 @@ class App extends React.Component { isBindableElement(element) && element.boundElements?.some((other) => other.type === "arrow") ) { - updateBoundElements(element, this.scene, { - indirectArrowUpdate: true, - }); + updateBoundElements(element, this.scene); } }); diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap index 1dd0f92cea..c8c427e6ae 100644 --- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap @@ -227,7 +227,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 33, + "version": 29, "width": "94.00000", "x": 0, "y": 0, @@ -334,15 +334,15 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "height": "105.58873", + "height": "105.58874", "points": [ [ 0, 0, ], [ - 88, - "105.58873", + "88.00000", + "105.58874", ], ], "startBinding": { @@ -353,8 +353,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 32, - "width": 88, + "version": 28, + "width": "88.00000", }, "inserted": { "endBinding": { @@ -365,7 +365,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "height": "0.00000", + "height": 0, "points": [ [ 0, @@ -373,7 +373,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], [ "88.00000", - "0.00000", + 0, ], ], "startBinding": { @@ -384,7 +384,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 29, + "version": 25, "width": "88.00000", }, }, @@ -440,21 +440,21 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], ], "startBinding": null, - "version": 33, + "version": 29, "width": "94.00000", "x": 0, "y": 0, }, "inserted": { - "height": "105.58873", + "height": "105.58874", "points": [ [ 0, 0, ], [ - 88, - "105.58873", + "88.00000", + "105.58874", ], ], "startBinding": { @@ -465,10 +465,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 32, - "width": 88, + "version": 28, + "width": "88.00000", "x": 6, - "y": "7.09000", + "y": "7.20923", }, }, }, @@ -854,7 +854,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 30, + "version": 25, "width": 100, "x": 150, "y": 0, @@ -904,15 +904,15 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "id4": { "deleted": { "endBinding": null, - "height": "0.00293", + "height": "0.01000", "points": [ [ 0, 0, ], [ - "-44.00000", - "-0.00293", + -44, + "-0.01000", ], ], "startBinding": { @@ -923,9 +923,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 29, - "width": "44.00000", - "y": "0.00293", + "version": 24, + "width": 44, + "y": "0.01000", }, "inserted": { "endBinding": { @@ -943,7 +943,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl 0, ], [ - "6.00000", + -100, 0, ], ], @@ -955,8 +955,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 27, - "width": "6.00000", + "version": 23, + "width": 100, "y": "0.01000", }, }, @@ -1004,21 +1004,21 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], ], "startBinding": null, - "version": 30, + "version": 25, "width": 100, "x": 150, "y": 0, }, "inserted": { - "height": "0.00293", + "height": "0.01000", "points": [ [ 0, 0, ], [ - "-44.00000", - "-0.00293", + -44, + "-0.01000", ], ], "startBinding": { @@ -1029,10 +1029,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 29, - "width": "44.00000", - "x": 144, - "y": "0.00293", + "version": 24, + "width": 44, + "x": 250, + "y": "0.01000", }, }, }, @@ -1335,7 +1335,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "29.36414", + "height": "29.32551", "id": "id4", "index": "Zz", "isDeleted": false, @@ -1350,7 +1350,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], [ 88, - "29.36414", + "29.32551", ], ], "roughness": 1, @@ -1369,10 +1369,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 10, + "version": 8, "width": 88, "x": 6, - "y": "2.00946", + "y": "2.00947", } `; @@ -1546,7 +1546,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 10, + "version": 8, }, "inserted": { "endBinding": null, @@ -1698,7 +1698,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "14.91372", + "height": "17.59718", "id": "id5", "index": "a0", "isDeleted": false, @@ -1712,8 +1712,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl 0, ], [ - "88.00000", - "-14.91372", + 88, + "-17.59718", ], ], "roughness": 1, @@ -1732,10 +1732,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 11, - "width": "88.00000", + "version": 8, + "width": 88, "x": 6, - "y": "37.05219", + "y": "38.80379", } `; @@ -1846,7 +1846,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "14.91372", + "height": "17.59718", "index": "a0", "isDeleted": false, "link": null, @@ -1858,8 +1858,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl 0, ], [ - "88.00000", - "-14.91372", + 88, + "-17.59718", ], ], "roughness": 1, @@ -1877,14 +1877,14 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 11, - "width": "88.00000", + "version": 8, + "width": 88, "x": 6, - "y": "37.05219", + "y": "38.80379", }, "inserted": { "isDeleted": true, - "version": 8, + "version": 7, }, }, }, @@ -2398,7 +2398,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "439.13521", + "height": "439.20000", "id": "id4", "index": "a2", "isDeleted": false, @@ -2413,7 +2413,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], [ 488, - "-439.13521", + "-439.20000", ], ], "roughness": 1, @@ -2434,10 +2434,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 13, + "version": 12, "width": 488, "x": 6, - "y": "-5.38920", + "y": "-5.39000", } `; @@ -2566,7 +2566,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "439.13521", + "height": "439.20000", "index": "a2", "isDeleted": false, "link": null, @@ -2579,7 +2579,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], [ 488, - "-439.13521", + "-439.20000", ], ], "roughness": 1, @@ -2599,14 +2599,14 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 13, + "version": 12, "width": 488, "x": 6, - "y": "-5.38920", + "y": "-5.39000", }, "inserted": { "isDeleted": true, - "version": 10, + "version": 9, }, }, }, @@ -16383,7 +16383,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00004", + "height": 0, "id": "id13", "index": "a3", "isDeleted": false, @@ -16398,7 +16398,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], [ "88.00000", - "0.00004", + 0, ], ], "roughness": 1, @@ -16419,10 +16419,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 12, + "version": 10, "width": "88.00000", "x": 6, - "y": "0.00996", + "y": "0.01000", } `; @@ -16472,7 +16472,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 12, + "version": 10, }, "inserted": { "endBinding": { @@ -16492,7 +16492,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 9, + "version": 8, }, }, }, @@ -16801,7 +16801,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00936", + "height": "0.00120", "index": "a3", "isDeleted": false, "link": null, @@ -16813,8 +16813,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding 0, ], [ - 88, - "0.00936", + "88.00000", + "0.00120", ], ], "roughness": 1, @@ -16834,14 +16834,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 8, - "width": 88, + "version": 7, + "width": "88.00000", "x": 6, - "y": 0, + "y": "0.00880", }, "inserted": { "isDeleted": true, - "version": 7, + "version": 6, }, }, }, @@ -17134,7 +17134,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00004", + "height": 0, "id": "id13", "index": "a3", "isDeleted": false, @@ -17149,7 +17149,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], [ "88.00000", - "0.00004", + 0, ], ], "roughness": 1, @@ -17170,10 +17170,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 12, + "version": 10, "width": "88.00000", "x": 6, - "y": "0.00996", + "y": "0.01000", } `; @@ -17442,7 +17442,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00004", + "height": 0, "index": "a3", "isDeleted": false, "link": null, @@ -17455,7 +17455,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], [ "88.00000", - "0.00004", + 0, ], ], "roughness": 1, @@ -17475,14 +17475,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 12, + "version": 10, "width": "88.00000", "x": 6, - "y": "0.00996", + "y": "0.01000", }, "inserted": { "isDeleted": true, - "version": 9, + "version": 8, }, }, }, @@ -17783,7 +17783,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00004", + "height": 0, "id": "id13", "index": "a3", "isDeleted": false, @@ -17798,7 +17798,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], [ "88.00000", - "0.00004", + 0, ], ], "roughness": 1, @@ -17819,10 +17819,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 12, + "version": 10, "width": "88.00000", "x": 6, - "y": "0.00996", + "y": "0.01000", } `; @@ -18091,7 +18091,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00004", + "height": 0, "index": "a3", "isDeleted": false, "link": null, @@ -18104,7 +18104,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], [ "88.00000", - "0.00004", + 0, ], ], "roughness": 1, @@ -18124,14 +18124,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 12, + "version": 10, "width": "88.00000", "x": 6, - "y": "0.00996", + "y": "0.01000", }, "inserted": { "isDeleted": true, - "version": 9, + "version": 8, }, }, }, @@ -18430,7 +18430,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00004", + "height": 0, "id": "id13", "index": "a3", "isDeleted": false, @@ -18445,7 +18445,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], [ "88.00000", - "0.00004", + 0, ], ], "roughness": 1, @@ -18466,10 +18466,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 12, + "version": 10, "width": "88.00000", "x": 6, - "y": "0.00996", + "y": "0.01000", } `; @@ -18535,7 +18535,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 12, + "version": 10, }, "inserted": { "endBinding": { @@ -18547,7 +18547,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "mode": "orbit", }, "startBinding": null, - "version": 9, + "version": 8, }, }, "id2": { @@ -18824,7 +18824,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00936", + "height": "0.00120", "index": "a3", "isDeleted": false, "link": null, @@ -18836,8 +18836,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding 0, ], [ - 88, - "0.00936", + "88.00000", + "0.00120", ], ], "roughness": 1, @@ -18857,14 +18857,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 8, - "width": 88, + "version": 7, + "width": "88.00000", "x": 6, - "y": 0, + "y": "0.00880", }, "inserted": { "isDeleted": true, - "version": 7, + "version": 6, }, }, }, @@ -19185,7 +19185,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00004", + "height": 0, "id": "id13", "index": "a3", "isDeleted": false, @@ -19200,7 +19200,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], [ "88.00000", - "0.00004", + 0, ], ], "roughness": 1, @@ -19221,10 +19221,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 13, + "version": 11, "width": "88.00000", "x": 6, - "y": "0.00996", + "y": "0.01000", } `; @@ -19301,12 +19301,12 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 13, + "version": 11, }, "inserted": { "endBinding": null, "startBinding": null, - "version": 10, + "version": 9, }, }, }, @@ -19575,7 +19575,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00936", + "height": "0.00120", "index": "a3", "isDeleted": false, "link": null, @@ -19587,8 +19587,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding 0, ], [ - 88, - "0.00936", + "88.00000", + "0.00120", ], ], "roughness": 1, @@ -19608,14 +19608,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 8, - "width": 88, + "version": 7, + "width": "88.00000", "x": 6, - "y": 0, + "y": "0.00880", }, "inserted": { "isDeleted": true, - "version": 7, + "version": 6, }, }, }, diff --git a/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap index 5432a2d249..5857132962 100644 --- a/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap @@ -182,14 +182,14 @@ exports[`move element > rectangles with binding arrow 7`] = ` "elementId": "id3", "fixedPoint": [ "-0.02000", - "0.47904", + "0.48010", ], "mode": "orbit", }, "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "90.02554", + "height": "90.01760", "id": "id6", "index": "a2", "isDeleted": false, @@ -204,7 +204,7 @@ exports[`move element > rectangles with binding arrow 7`] = ` ], [ 89, - "90.02554", + "90.01760", ], ], "roughness": 1, @@ -217,7 +217,7 @@ exports[`move element > rectangles with binding arrow 7`] = ` "elementId": "id0", "fixedPoint": [ "1.06000", - "0.55687", + "0.56011", ], "mode": "orbit", }, @@ -230,6 +230,6 @@ exports[`move element > rectangles with binding arrow 7`] = ` "versionNonce": 271613161, "width": 89, "x": 106, - "y": "55.68677", + "y": "56.01120", } `; From 4c3d037f9cddcec92472cb2f61c0840097649cc1 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Thu, 19 Feb 2026 11:45:01 +0100 Subject: [PATCH 06/62] feat(editor): allow clicking on links and embeds with laser tool (#10797) Co-authored-by: Anvi Co-authored-by: Chris Tangonan --- packages/excalidraw/components/App.tsx | 222 +++++++++++++---------- packages/excalidraw/tests/laser.test.tsx | 109 +++++++++++ 2 files changed, 240 insertions(+), 91 deletions(-) create mode 100644 packages/excalidraw/tests/laser.test.tsx diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 32bac77e1e..14ebca6bce 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -442,10 +442,7 @@ import { searchItemInFocusAtom } from "./SearchMenu"; import { isSidebarDockedAtom } from "./Sidebar/Sidebar"; import { StaticCanvas, InteractiveCanvas } from "./canvases"; import NewElementCanvas from "./canvases/NewElementCanvas"; -import { - isPointHittingLink, - isPointHittingLinkIcon, -} from "./hyperlink/helpers"; +import { isPointHittingLink } from "./hyperlink/helpers"; import { MagicIcon, copyIcon, fullscreenIcon } from "./icons"; import { Toast } from "./Toast"; @@ -1210,12 +1207,99 @@ class App extends React.Component { return this.iFrameRefs.get(element.id); } - private handleEmbeddableCenterClick(element: ExcalidrawIframeLikeElement) { + private handleIframeLikeElementHover = ({ + hitElement, + scenePointer, + moveEvent, + }: { + hitElement: NonDeleted | null; + scenePointer: { x: number; y: number }; + moveEvent: React.PointerEvent; + }): boolean => { if ( - this.state.activeEmbeddable?.element === element && + hitElement && + isIframeLikeElement(hitElement) && + this.isIframeLikeElementCenter( + hitElement, + moveEvent, + scenePointer.x, + scenePointer.y, + ) + ) { + setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER); + this.setState({ + activeEmbeddable: { element: hitElement, state: "hover" }, + }); + return true; + } else if (this.state.activeEmbeddable?.state === "hover") { + this.setState({ activeEmbeddable: null }); + } + return false; + }; + + /** @returns true if iframe-like element click handled */ + private handleIframeLikeCenterClick(): boolean { + if (!this.lastPointerDownEvent || !this.lastPointerUpEvent) { + return false; + } + + const scenePointerStart = viewportCoordsToSceneCoords( + { + clientX: this.lastPointerDownEvent.clientX, + clientY: this.lastPointerDownEvent.clientY, + }, + this.state, + ); + const scenePointerEnd = viewportCoordsToSceneCoords( + { + clientX: this.lastPointerUpEvent.clientX, + clientY: this.lastPointerUpEvent.clientY, + }, + this.state, + ); + + const hitElementStart = this.getElementAtPosition( + scenePointerStart.x, + scenePointerStart.y, + ); + + const hitElementEnd = this.getElementAtPosition( + scenePointerEnd.x, + scenePointerEnd.y, + ); + + if ( + !hitElementStart || + !hitElementEnd || + hitElementStart !== hitElementEnd || + this.lastPointerUpEvent.timeStamp - this.lastPointerDownEvent.timeStamp > + 300 || + gesture.pointers.size > 1 || + !isIframeLikeElement(hitElementStart) || + !isIframeLikeElement(hitElementEnd) || + !this.isIframeLikeElementCenter( + hitElementStart, + this.lastPointerUpEvent, + scenePointerStart.x, + scenePointerStart.y, + ) || + !this.isIframeLikeElementCenter( + hitElementEnd, + this.lastPointerUpEvent, + scenePointerEnd.x, + scenePointerEnd.y, + ) + ) { + return false; + } + + const iframeLikeElement = hitElementEnd; + + if ( + this.state.activeEmbeddable?.element === iframeLikeElement && this.state.activeEmbeddable?.state === "active" ) { - return; + return true; } // The delay serves two purposes @@ -1226,31 +1310,34 @@ class App extends React.Component { // in fullscreen mode setTimeout(() => { this.setState({ - activeEmbeddable: { element, state: "active" }, - selectedElementIds: { [element.id]: true }, + activeEmbeddable: { element: iframeLikeElement, state: "active" }, + selectedElementIds: { [iframeLikeElement.id]: true }, newElement: null, selectionElement: null, }); }, 100); - if (isIframeElement(element)) { - return; + if (isIframeElement(iframeLikeElement)) { + return true; } - const iframe = this.getHTMLIFrameElement(element); + const iframe = this.getHTMLIFrameElement(iframeLikeElement); if (!iframe?.contentWindow) { - return; + return true; } if (iframe.src.includes("youtube")) { - const state = YOUTUBE_VIDEO_STATES.get(element.id); + const state = YOUTUBE_VIDEO_STATES.get(iframeLikeElement.id); if (!state) { - YOUTUBE_VIDEO_STATES.set(element.id, YOUTUBE_STATES.UNSTARTED); + YOUTUBE_VIDEO_STATES.set( + iframeLikeElement.id, + YOUTUBE_STATES.UNSTARTED, + ); iframe.contentWindow.postMessage( JSON.stringify({ event: "listening", - id: element.id, + id: iframeLikeElement.id, }), "*", ); @@ -1287,6 +1374,8 @@ class App extends React.Component { "*", ); } + + return true; } private isIframeLikeElementCenter( @@ -6622,10 +6711,14 @@ class App extends React.Component { } } - const hasDeselectedButton = Boolean(event.buttons); + const isPressingAnyButton = Boolean(event.buttons); + const isLaserTool = this.state.activeTool.type === "laser"; if ( - hasDeselectedButton || - (this.state.activeTool.type !== "selection" && + isPressingAnyButton || + // checking against laser so that if you mouseover with a laser tool + // over a link/embeddable, we change the cursor + (!isLaserTool && + this.state.activeTool.type !== "selection" && this.state.activeTool.type !== "lasso" && this.state.activeTool.type !== "text" && this.state.activeTool.type !== "eraser") @@ -6745,6 +6838,14 @@ class App extends React.Component { ); } else { hideHyperlinkToolip(); + if (isLaserTool) { + this.handleIframeLikeElementHover({ + hitElement, + scenePointer, + moveEvent: event, + }); + return; + } if ( hitElement && (hitElement.link || isEmbeddableElement(hitElement)) && @@ -6777,24 +6878,15 @@ class App extends React.Component { !hitElement?.locked ) { if ( - hitElement && - isIframeLikeElement(hitElement) && - this.isIframeLikeElementCenter( + !this.handleIframeLikeElementHover({ hitElement, - event, - scenePointerX, - scenePointerY, - ) - ) { - setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER); - this.setState({ - activeEmbeddable: { element: hitElement, state: "hover" }, - }); - } else if ( - !hitElement || - // Elbow arrows can only be moved when unconnected - !isElbowArrow(hitElement) || - !(hitElement.startBinding || hitElement.endBinding) + scenePointer, + moveEvent: event, + }) && + (!hitElement || + // Elbow arrows can only be moved when unconnected + !isElbowArrow(hitElement) || + !(hitElement.startBinding || hitElement.endBinding)) ) { if ( this.state.activeTool.type !== "lasso" || @@ -6802,9 +6894,6 @@ class App extends React.Component { ) { setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE); } - if (this.state.activeEmbeddable?.state === "hover") { - this.setState({ activeEmbeddable: null }); - } } } } else { @@ -7456,26 +7545,9 @@ class App extends React.Component { x: scenePointerX, y: scenePointerY, }; - const clicklength = - event.timeStamp - (this.lastPointerDownEvent?.timeStamp ?? 0); - if (this.editorInterface.formFactor === "phone" && clicklength < 300) { - const hitElement = this.getElementAtPosition( - scenePointer.x, - scenePointer.y, - ); - if ( - isIframeLikeElement(hitElement) && - this.isIframeLikeElementCenter( - hitElement, - event, - scenePointer.x, - scenePointer.y, - ) - ) { - this.handleEmbeddableCenterClick(hitElement); - return; - } + if (this.handleIframeLikeCenterClick()) { + return; } if (this.editorInterface.isTouchScreen) { @@ -7496,20 +7568,7 @@ class App extends React.Component { this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id] ) { - if ( - clicklength < 300 && - isIframeLikeElement(this.hitLinkElement) && - !isPointHittingLinkIcon( - this.hitLinkElement, - this.scene.getNonDeletedElementsMap(), - this.state, - pointFrom(scenePointer.x, scenePointer.y), - ) - ) { - this.handleEmbeddableCenterClick(this.hitLinkElement); - } else { - this.redirectToLink(event, this.editorInterface.isTouchScreen); - } + this.redirectToLink(event, this.editorInterface.isTouchScreen); } else if (this.state.viewModeEnabled) { this.setState({ activeEmbeddable: null, @@ -10852,25 +10911,6 @@ class App extends React.Component { suggestedBinding: null, }); } - - if ( - hitElement && - this.lastPointerUpEvent && - this.lastPointerDownEvent && - this.lastPointerUpEvent.timeStamp - - this.lastPointerDownEvent.timeStamp < - 300 && - gesture.pointers.size <= 1 && - isIframeLikeElement(hitElement) && - this.isIframeLikeElementCenter( - hitElement, - this.lastPointerUpEvent, - pointerDownState.origin.x, - pointerDownState.origin.y, - ) - ) { - this.handleEmbeddableCenterClick(hitElement); - } }); } diff --git a/packages/excalidraw/tests/laser.test.tsx b/packages/excalidraw/tests/laser.test.tsx new file mode 100644 index 0000000000..b8b6510259 --- /dev/null +++ b/packages/excalidraw/tests/laser.test.tsx @@ -0,0 +1,109 @@ +import { vi } from "vitest"; + +import { CURSOR_TYPE } from "@excalidraw/common"; +import { getElementAbsoluteCoords } from "@excalidraw/element"; + +import { Excalidraw } from "../index"; +import { getLinkHandleFromCoords } from "../components/hyperlink/helpers"; + +import { API } from "./helpers/api"; +import { Pointer } from "./helpers/ui"; +import { act, GlobalTestState, render, waitFor } from "./test-utils"; + +import type { ExcalidrawProps } from "../types"; + +describe("laser tool interactions", () => { + const h = window.h; + const mouse = new Pointer("mouse"); + + it("opens links while using the laser tool", async () => { + const onLinkOpenSpy = vi.fn(); + const onLinkOpen: NonNullable = ( + ...args + ) => { + onLinkOpenSpy(...args); + args[1].preventDefault(); + }; + await render(); + + const linkedRect = API.createElement({ + type: "rectangle", + x: 20, + y: 20, + width: 120, + height: 90, + }); + API.setElements([linkedRect]); + API.updateElement(linkedRect, { + link: "https://example.com", + }); + + act(() => { + h.app.setActiveTool({ type: "laser" }); + }); + + const elementsMap = h.app.scene.getNonDeletedElementsMap(); + const currentRect = API.getElement(linkedRect); + const [x1, y1, x2, y2] = getElementAbsoluteCoords(currentRect, elementsMap); + const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords( + [x1, y1, x2, y2], + currentRect.angle, + h.state, + ); + const iconCenterX = linkX + linkWidth / 2; + const iconCenterY = linkY + linkHeight / 2; + + mouse.moveTo(iconCenterX, iconCenterY); + expect(GlobalTestState.interactiveCanvas.style.cursor).toBe( + CURSOR_TYPE.POINTER, + ); + + mouse.clickAt(iconCenterX, iconCenterY); + expect(onLinkOpenSpy).toHaveBeenCalledTimes(1); + }); + + it("activates embeddables on center click while using the laser tool", async () => { + await render(); + + const embeddable = API.createElement({ + type: "embeddable", + x: 40, + y: 40, + width: 300, + height: 180, + }); + API.setElements([embeddable]); + API.updateElement(embeddable, { + link: "https://www.youtube.com/watch?v=gkGMXY0wekg", + }); + + act(() => { + h.app.setActiveTool({ type: "laser" }); + }); + + const handleIframeLikeCenterClickSpy = vi.spyOn( + h.app as unknown as { + handleIframeLikeCenterClick: () => void; + }, + "handleIframeLikeCenterClick", + ); + + const centerX = embeddable.x + embeddable.width / 2; + const centerY = embeddable.y + embeddable.height / 2; + + mouse.moveTo(centerX, centerY); + expect(GlobalTestState.interactiveCanvas.style.cursor).toBe( + CURSOR_TYPE.POINTER, + ); + mouse.clickAt(centerX, centerY); + + expect(handleIframeLikeCenterClickSpy).toHaveBeenCalled(); + + await waitFor(() => { + expect(h.state.activeEmbeddable?.element.id).toBe(embeddable.id); + expect(h.state.activeEmbeddable?.state).toBe("active"); + }); + + handleIframeLikeCenterClickSpy.mockRestore(); + }); +}); From eb959128ac1543e7f6ea1c4f1935b9899a3e1b9b Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Fri, 20 Feb 2026 22:49:46 +0100 Subject: [PATCH 07/62] feat(editor): allow laser-pointing in view mode (#10802) * 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 --- packages/common/src/utils.ts | 11 +- packages/excalidraw/components/Actions.tsx | 8 +- packages/excalidraw/components/App.tsx | 298 ++++++++++-------- .../components/CommandPalette/types.ts | 2 +- packages/excalidraw/components/LayerUI.tsx | 9 - .../components/canvases/InteractiveCanvas.tsx | 9 +- packages/excalidraw/components/shapes.tsx | 29 ++ packages/excalidraw/tests/laser.test.tsx | 22 ++ packages/excalidraw/tests/selection.test.tsx | 4 +- packages/excalidraw/types.ts | 1 + packages/math/src/point.ts | 19 +- packages/math/src/types.ts | 22 +- 12 files changed, 287 insertions(+), 147 deletions(-) diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts index 3727e562d3..5bafa41813 100644 --- a/packages/common/src/utils.ts +++ b/packages/common/src/utils.ts @@ -1,5 +1,7 @@ import { average } from "@excalidraw/math"; +import type { GlobalCoord } from "@excalidraw/math"; + import type { FontFamilyValues, FontString } from "@excalidraw/element/types"; import type { @@ -441,7 +443,7 @@ export const viewportCoordsToSceneCoords = ( const x = (clientX - offsetLeft) / zoom.value - scrollX; const y = (clientY - offsetTop) / zoom.value - scrollY; - return { x, y }; + return { x, y } as GlobalCoord; }; export const sceneCoordsToViewportCoords = ( @@ -1330,3 +1332,10 @@ export const setFeatureFlag = ( console.error("unable to set feature flag", e); } }; + +export const oneOf = ( + needle: N, + haystack: readonly H[], +): needle is H => { + return haystack.includes(needle as any); +}; diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx index d9f3415d64..9372e2b243 100644 --- a/packages/excalidraw/components/Actions.tsx +++ b/packages/excalidraw/components/Actions.tsx @@ -1081,8 +1081,9 @@ export const ShapesSwitcher = ({ return ( <> {getToolbarTools(app).map( - ({ value, icon, key, numericKey, fillable }, index) => { + ({ value, icon, key, numericKey, fillable, toolbar }) => { if ( + toolbar === false || UIOptions.tools?.[ value as Extract< typeof value, @@ -1099,6 +1100,9 @@ export const ShapesSwitcher = ({ const shortcut = letter ? `${letter} ${t("helpDialog.or")} ${numericKey}` : `${numericKey}`; + const keybindingLabel = + value === "hand" ? undefined : numericKey || letter; + // when in compact styles panel mode (tablet) // use a ToolPopover for selection/lasso toggle as well if ( @@ -1143,7 +1147,7 @@ export const ShapesSwitcher = ({ checked={activeTool.type === value} name="editor-current-shape" title={`${capitalizeString(label)} — ${shortcut}`} - keyBindingLabel={numericKey || letter} + keyBindingLabel={keybindingLabel} aria-label={capitalizeString(label)} aria-keyshortcuts={shortcut} data-testid={`toolbar-${value}`} diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 14ebca6bce..59a11f804c 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -108,6 +108,7 @@ import { loadDesktopUIModePreference, setDesktopUIMode, isSelectionLikeTool, + oneOf, } from "@excalidraw/common"; import { @@ -1219,12 +1220,14 @@ class App extends React.Component { if ( hitElement && isIframeLikeElement(hitElement) && - this.isIframeLikeElementCenter( - hitElement, - moveEvent, - scenePointer.x, - scenePointer.y, - ) + (this.state.viewModeEnabled || + this.state.activeTool.type === "laser" || + this.isIframeLikeElementCenter( + hitElement, + moveEvent, + scenePointer.x, + scenePointer.y, + )) ) { setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER); this.setState({ @@ -1239,61 +1242,72 @@ class App extends React.Component { /** @returns true if iframe-like element click handled */ private handleIframeLikeCenterClick(): boolean { - if (!this.lastPointerDownEvent || !this.lastPointerUpEvent) { - return false; - } - - const scenePointerStart = viewportCoordsToSceneCoords( - { - clientX: this.lastPointerDownEvent.clientX, - clientY: this.lastPointerDownEvent.clientY, - }, - this.state, - ); - const scenePointerEnd = viewportCoordsToSceneCoords( - { - clientX: this.lastPointerUpEvent.clientX, - clientY: this.lastPointerUpEvent.clientY, - }, - this.state, - ); - - const hitElementStart = this.getElementAtPosition( - scenePointerStart.x, - scenePointerStart.y, - ); - - const hitElementEnd = this.getElementAtPosition( - scenePointerEnd.x, - scenePointerEnd.y, - ); - if ( - !hitElementStart || - !hitElementEnd || - hitElementStart !== hitElementEnd || - this.lastPointerUpEvent.timeStamp - this.lastPointerDownEvent.timeStamp > - 300 || - gesture.pointers.size > 1 || - !isIframeLikeElement(hitElementStart) || - !isIframeLikeElement(hitElementEnd) || - !this.isIframeLikeElementCenter( - hitElementStart, - this.lastPointerUpEvent, - scenePointerStart.x, - scenePointerStart.y, - ) || - !this.isIframeLikeElementCenter( - hitElementEnd, - this.lastPointerUpEvent, - scenePointerEnd.x, - scenePointerEnd.y, - ) + !this.lastPointerDownEvent || + !this.lastPointerUpEvent || + // middle-click or something other than primary + this.lastPointerDownEvent.button !== POINTER_BUTTON.MAIN || + // panning + isHoldingSpace || + // wrong tool + !oneOf(this.state.activeTool.type, ["laser", "selection", "lasso"]) ) { return false; } - const iframeLikeElement = hitElementEnd; + const viewportClickStart_scenePoint = pointFrom( + viewportCoordsToSceneCoords( + { + clientX: this.lastPointerDownEvent.clientX, + clientY: this.lastPointerDownEvent.clientY, + }, + this.state, + ), + ); + const viewportClickEnd_scenePoint = pointFrom( + viewportCoordsToSceneCoords( + { + clientX: this.lastPointerUpEvent.clientX, + clientY: this.lastPointerUpEvent.clientY, + }, + this.state, + ), + ); + + const draggedDistance = pointDistance( + viewportClickStart_scenePoint, + viewportClickEnd_scenePoint, + ); + + if (draggedDistance > DRAGGING_THRESHOLD) { + return false; + } + + const hitElement = this.getElementAtPosition( + viewportClickStart_scenePoint[0], + viewportClickStart_scenePoint[1], + ); + + const shouldActivate = + hitElement && + this.lastPointerUpEvent.timeStamp - this.lastPointerDownEvent.timeStamp <= + 300 && + gesture.pointers.size < 2 && + isIframeLikeElement(hitElement) && + (this.state.viewModeEnabled || + this.state.activeTool.type === "laser" || + this.isIframeLikeElementCenter( + hitElement, + this.lastPointerUpEvent, + viewportClickEnd_scenePoint[0], + viewportClickEnd_scenePoint[1], + )); + + if (!shouldActivate) { + return false; + } + + const iframeLikeElement = hitElement; if ( this.state.activeEmbeddable?.element === iframeLikeElement && @@ -4844,6 +4858,74 @@ class App extends React.Component { return; } + // view mode hardcoded from upstream -> disable tool switching for now + const shouldPreventToolSwitching = this.props.viewModeEnabled === true; + + if ( + !shouldPreventToolSwitching && + this.state.viewModeEnabled && + event.key === KEYS.ESCAPE + ) { + this.setActiveTool({ type: "hand" }); + return; + } + + if ( + !shouldPreventToolSwitching && + !event.ctrlKey && + !event.altKey && + !event.metaKey && + !this.state.newElement && + !this.state.selectionElement && + !this.state.selectedElementsAreBeingDragged + ) { + const shape = findShapeByKey(event.key, this); + + if (this.state.viewModeEnabled && !oneOf(shape, ["laser", "hand"])) { + return; + } + + if (shape) { + if (this.state.activeTool.type !== shape) { + trackEvent( + "toolbar", + shape, + `keyboard (${ + this.editorInterface.formFactor === "phone" + ? "mobile" + : "desktop" + })`, + ); + } + if (shape === "arrow" && this.state.activeTool.type === "arrow") { + this.setState((prevState) => ({ + currentItemArrowType: + prevState.currentItemArrowType === ARROW_TYPE.sharp + ? ARROW_TYPE.round + : prevState.currentItemArrowType === ARROW_TYPE.round + ? ARROW_TYPE.elbow + : ARROW_TYPE.sharp, + })); + } + + if (shape === "lasso" && this.state.activeTool.type === "laser") { + this.setActiveTool({ + type: this.state.preferredSelectionTool.type, + }); + } else { + this.setActiveTool({ type: shape }); + } + + event.stopPropagation(); + + return; + } else if (event.key === KEYS.Q) { + this.toggleLock("keyboard"); + event.stopPropagation(); + return; + } + } + if (this.state.viewModeEnabled) { return; } @@ -4977,44 +5059,8 @@ class App extends React.Component { }); } } - } else if ( - !event.ctrlKey && - !event.altKey && - !event.metaKey && - !this.state.newElement && - !this.state.selectionElement && - !this.state.selectedElementsAreBeingDragged - ) { - const shape = findShapeByKey(event.key, this); - if (shape) { - if (this.state.activeTool.type !== shape) { - trackEvent( - "toolbar", - shape, - `keyboard (${ - this.editorInterface.formFactor === "phone" - ? "mobile" - : "desktop" - })`, - ); - } - if (shape === "arrow" && this.state.activeTool.type === "arrow") { - this.setState((prevState) => ({ - currentItemArrowType: - prevState.currentItemArrowType === ARROW_TYPE.sharp - ? ARROW_TYPE.round - : prevState.currentItemArrowType === ARROW_TYPE.round - ? ARROW_TYPE.elbow - : ARROW_TYPE.sharp, - })); - } - this.setActiveTool({ type: shape }); - event.stopPropagation(); - } else if (event.key === KEYS.Q) { - this.toggleLock("keyboard"); - event.stopPropagation(); - } } + if (event.key === KEYS.SPACE && gesture.pointers.size === 0) { isHoldingSpace = true; setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB); @@ -5078,15 +5124,6 @@ class App extends React.Component { } } - if (event.key === KEYS.K && !event.altKey && !event[KEYS.CTRL_OR_CMD]) { - if (this.state.activeTool.type === "laser") { - this.setActiveTool({ type: this.state.preferredSelectionTool.type }); - } else { - this.setActiveTool({ type: "laser" }); - } - return; - } - if ( event[KEYS.CTRL_OR_CMD] && (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) @@ -5113,7 +5150,8 @@ class App extends React.Component { private onKeyUp = withBatchedUpdates((event: KeyboardEvent) => { if (event.key === KEYS.SPACE) { if ( - this.state.viewModeEnabled || + (this.state.viewModeEnabled && + this.state.activeTool.type !== "laser") || this.state.openDialog?.name === "elementLinkSelector" ) { setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB); @@ -6227,9 +6265,8 @@ class App extends React.Component { } }; - private redirectToLink = ( + private handleElementLinkClick = ( event: React.PointerEvent, - isTouchScreen: boolean, ) => { const draggedDistance = pointDistance( pointFrom( @@ -6803,6 +6840,10 @@ class App extends React.Component { } } + if (isEraserActive(this.state)) { + return; + } + const hitElementMightBeLocked = this.getElementAtPosition( scenePointerX, scenePointerY, @@ -6819,18 +6860,25 @@ class App extends React.Component { hitElement = hitElementMightBeLocked; } - this.hitLinkElement = this.getElementLinkAtPosition( - scenePointer, - hitElementMightBeLocked, - ); - if (isEraserActive(this.state)) { - return; + if ( + !this.handleIframeLikeElementHover({ + hitElement, + scenePointer, + moveEvent: event, + }) + ) { + this.hitLinkElement = this.getElementLinkAtPosition( + scenePointer, + hitElementMightBeLocked, + ); } + if ( this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id] ) { setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER); + showHyperlinkTooltip( this.hitLinkElement, this.state, @@ -6839,11 +6887,6 @@ class App extends React.Component { } else { hideHyperlinkToolip(); if (isLaserTool) { - this.handleIframeLikeElementHover({ - hitElement, - scenePointer, - moveEvent: event, - }); return; } if ( @@ -6878,15 +6921,10 @@ class App extends React.Component { !hitElement?.locked ) { if ( - !this.handleIframeLikeElementHover({ - hitElement, - scenePointer, - moveEvent: event, - }) && - (!hitElement || - // Elbow arrows can only be moved when unconnected - !isElbowArrow(hitElement) || - !(hitElement.startBinding || hitElement.endBinding)) + !hitElement || + // Elbow arrows can only be moved when unconnected + !isElbowArrow(hitElement) || + !(hitElement.startBinding || hitElement.endBinding) ) { if ( this.state.activeTool.type !== "lasso" || @@ -7568,7 +7606,7 @@ class App extends React.Component { this.hitLinkElement && !this.state.selectedElementIds[this.hitLinkElement.id] ) { - this.redirectToLink(event, this.editorInterface.isTouchScreen); + this.handleElementLinkClick(event); } else if (this.state.viewModeEnabled) { this.setState({ activeEmbeddable: null, @@ -7628,7 +7666,8 @@ class App extends React.Component { (event.button === POINTER_BUTTON.WHEEL || (event.button === POINTER_BUTTON.MAIN && isHoldingSpace) || isHandToolActive(this.state) || - this.state.viewModeEnabled) + (this.state.viewModeEnabled && + this.state.activeTool.type !== "laser")) ) ) { return false; @@ -7706,7 +7745,10 @@ class App extends React.Component { lastPointerUp = null; isPanning = false; if (!isHoldingSpace) { - if (this.state.viewModeEnabled) { + if ( + this.state.viewModeEnabled && + this.state.activeTool.type !== "laser" + ) { setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB); } else { setCursorForShape(this.interactiveCanvas, this.state); diff --git a/packages/excalidraw/components/CommandPalette/types.ts b/packages/excalidraw/components/CommandPalette/types.ts index 3eed838ce8..bb01d66b1e 100644 --- a/packages/excalidraw/components/CommandPalette/types.ts +++ b/packages/excalidraw/components/CommandPalette/types.ts @@ -15,7 +15,7 @@ export type CommandPaletteItem = { category: string; order?: number; predicate?: boolean | Action["predicate"]; - shortcut?: string; + shortcut?: string | null; /** if false, command will not show while in view mode */ viewMode?: boolean; perform: (data: { diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index 17dffdfd9d..11447bbd31 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/packages/excalidraw/components/LayerUI.tsx @@ -20,7 +20,6 @@ import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types"; import { actionToggleStats } from "../actions"; import { trackEvent } from "../analytics"; -import { isHandToolActive } from "../appState"; import { TunnelsContext, useInitializeTunnels } from "../context/tunnels"; import { UIAppStateContext } from "../context/ui-appState"; import { useAtom, useAtomValue } from "../editor-jotai"; @@ -55,7 +54,6 @@ import ElementLinkDialog from "./ElementLinkDialog"; import { ErrorDialog } from "./ErrorDialog"; import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper"; import { FixedSideContainer } from "./FixedSideContainer"; -import { HandButton } from "./HandButton"; import { HelpDialog } from "./HelpDialog"; import { HintViewer } from "./HintViewer"; import { ImageExportDialog } from "./ImageExportDialog"; @@ -359,13 +357,6 @@ const LayerUI = ({
- onHandToolToggle()} - title={t("toolBar.hand")} - isMobile - /> - { style={{ width: props.appState.width, height: props.appState.height, - cursor: props.appState.viewModeEnabled - ? CURSOR_TYPE.GRAB - : CURSOR_TYPE.AUTO, + cursor: + props.appState.viewModeEnabled && + props.appState.activeTool.type !== "laser" + ? CURSOR_TYPE.GRAB + : CURSOR_TYPE.AUTO, }} width={props.appState.width * props.scale} height={props.appState.height * props.scale} @@ -233,6 +235,7 @@ const getRelevantAppStateProps = ( width: appState.width, height: appState.height, viewModeEnabled: appState.viewModeEnabled, + activeTool: appState.activeTool, openDialog: appState.openDialog, editingGroupId: appState.editingGroupId, selectedElementIds: appState.selectedElementIds, diff --git a/packages/excalidraw/components/shapes.tsx b/packages/excalidraw/components/shapes.tsx index d46f08a311..999dfe1c14 100644 --- a/packages/excalidraw/components/shapes.tsx +++ b/packages/excalidraw/components/shapes.tsx @@ -11,17 +11,28 @@ import { TextIcon, ImageIcon, EraserIcon, + laserPointerToolIcon, + handIcon, } from "./icons"; import type { AppClassProperties } from "../types"; export const SHAPES = [ + { + icon: handIcon, + value: "hand", + key: KEYS.H, + numericKey: null, + fillable: false, + toolbar: true, + }, { icon: SelectionIcon, value: "selection", key: KEYS.V, numericKey: KEYS["1"], fillable: true, + toolbar: true, }, { icon: RectangleIcon, @@ -29,6 +40,7 @@ export const SHAPES = [ key: KEYS.R, numericKey: KEYS["2"], fillable: true, + toolbar: true, }, { icon: DiamondIcon, @@ -36,6 +48,7 @@ export const SHAPES = [ key: KEYS.D, numericKey: KEYS["3"], fillable: true, + toolbar: true, }, { icon: EllipseIcon, @@ -43,6 +56,7 @@ export const SHAPES = [ key: KEYS.O, numericKey: KEYS["4"], fillable: true, + toolbar: true, }, { icon: ArrowIcon, @@ -50,6 +64,7 @@ export const SHAPES = [ key: KEYS.A, numericKey: KEYS["5"], fillable: true, + toolbar: true, }, { icon: LineIcon, @@ -57,6 +72,7 @@ export const SHAPES = [ key: KEYS.L, numericKey: KEYS["6"], fillable: true, + toolbar: true, }, { icon: FreedrawIcon, @@ -64,6 +80,7 @@ export const SHAPES = [ key: [KEYS.P, KEYS.X], numericKey: KEYS["7"], fillable: false, + toolbar: true, }, { icon: TextIcon, @@ -71,6 +88,7 @@ export const SHAPES = [ key: KEYS.T, numericKey: KEYS["8"], fillable: false, + toolbar: true, }, { icon: ImageIcon, @@ -78,6 +96,7 @@ export const SHAPES = [ key: null, numericKey: KEYS["9"], fillable: false, + toolbar: true, }, { icon: EraserIcon, @@ -85,6 +104,15 @@ export const SHAPES = [ key: KEYS.E, numericKey: KEYS["0"], fillable: false, + toolbar: true, + }, + { + icon: laserPointerToolIcon, + value: "laser", + key: KEYS.K, + numericKey: null, + fillable: false, + toolbar: false, }, ] as const; @@ -97,6 +125,7 @@ export const getToolbarTools = (app: AppClassProperties) => { key: KEYS.V, numericKey: KEYS["1"], fillable: true, + toolbar: true, }, ...SHAPES.slice(1), ] as const) diff --git a/packages/excalidraw/tests/laser.test.tsx b/packages/excalidraw/tests/laser.test.tsx index b8b6510259..fc5c3aa5aa 100644 --- a/packages/excalidraw/tests/laser.test.tsx +++ b/packages/excalidraw/tests/laser.test.tsx @@ -106,4 +106,26 @@ describe("laser tool interactions", () => { handleIframeLikeCenterClickSpy.mockRestore(); }); + + it("doesn't pan in view mode when laser tool is active", async () => { + await render(); + + API.setAppState({ viewModeEnabled: true }); + act(() => { + h.app.setActiveTool({ type: "laser" }); + }); + + expect(GlobalTestState.interactiveCanvas.style.cursor).toContain(""); + + const initialScrollX = h.state.scrollX; + const initialScrollY = h.state.scrollY; + + mouse.downAt(100, 100); + mouse.moveTo(180, 160); + mouse.upAt(180, 160); + + expect(h.state.scrollX).toBe(initialScrollX); + expect(h.state.scrollY).toBe(initialScrollY); + expect(GlobalTestState.interactiveCanvas.style.cursor).toContain(""); + }); }); diff --git a/packages/excalidraw/tests/selection.test.tsx b/packages/excalidraw/tests/selection.test.tsx index 86be835f7b..93135fb2e1 100644 --- a/packages/excalidraw/tests/selection.test.tsx +++ b/packages/excalidraw/tests/selection.test.tsx @@ -504,7 +504,9 @@ describe("tool locking & selection", () => { value !== "image" && value !== "selection" && value !== "eraser" && - value !== "arrow" + value !== "arrow" && + value !== "hand" && + value !== "laser" ) { const element = UI.createElement(value); expect(h.state.selectedElementIds[element.id]).not.toBe(true); diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index 6ce4ae9267..f7e86cc524 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -215,6 +215,7 @@ export type StaticCanvasAppState = Readonly< export type InteractiveCanvasAppState = Readonly< _CommonCanvasAppState & { + activeTool: AppState["activeTool"]; // renderInteractiveScene activeEmbeddable: AppState["activeEmbeddable"]; selectionElement: AppState["selectionElement"]; diff --git a/packages/math/src/point.ts b/packages/math/src/point.ts index 863febfd41..ed25a713d8 100644 --- a/packages/math/src/point.ts +++ b/packages/math/src/point.ts @@ -8,6 +8,8 @@ import type { Radians, Degrees, Vector, + GlobalCoord, + LocalCoord, } from "./types"; /** @@ -20,8 +22,23 @@ import type { export function pointFrom( x: number, y: number, +): Point; +// TODO remove the overload once we migrate to using Point tuples everywhere +export function pointFrom( + coords: Coord, +): Coord extends GlobalCoord ? GlobalPoint : LocalPoint; +// TODO remove the overload once we migrate to using Point tuples everywhere +export function pointFrom(coords: { + x: number; + y: number; +}): Point; +export function pointFrom( + xOrCoords: number | { x: number; y: number }, + y?: number, ): Point { - return [x, y] as Point; + return typeof xOrCoords === "object" + ? ([xOrCoords.x, xOrCoords.y] as Point) + : ([xOrCoords, y!] as Point); } /** diff --git a/packages/math/src/types.ts b/packages/math/src/types.ts index da7d5d6abd..9adb208291 100644 --- a/packages/math/src/types.ts +++ b/packages/math/src/types.ts @@ -28,13 +28,23 @@ export type InclusiveRange = [number, number] & { _brand: "excalimath_degree" }; // /** - * Represents a 2D position in world or canvas space. A + * Represents a 2D position in world/canvas/scene space. A * global coordinate. */ export type GlobalPoint = [x: number, y: number] & { _brand: "excalimath__globalpoint"; }; +/** + * Represents a 2D position in world/canvas/scene space. A + * global coordinate. + * + * TODO remove this once we migrate the codebase to use Point tuples everywhere + */ +export type GlobalCoord = { x: number; y: number } & { + _brand: "excalimath__globalcoord"; +}; + /** * Represents a 2D position in whatever local space it's * needed. A local coordinate. @@ -43,6 +53,16 @@ export type LocalPoint = [x: number, y: number] & { _brand: "excalimath__localpoint"; }; +/** + * Represents a 2D position in whatever local space it's needed. + * A local coordinate. + * + * TODO remove this once we migrate the codebase to use Point tuples everywhere + */ +export type LocalCoord = { x: number; y: number } & { + _brand: "excalimath__localcoord"; +}; + // Line /** From b0404b10b6d775d4a0bc48072947f95e5753e117 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Mon, 23 Feb 2026 20:20:37 +0100 Subject: [PATCH 08/62] chore(debug): add debug.logChanged() and make easy to import (#10828) --- {excalidraw-app => packages/common}/debug.ts | 74 +++++++++++++++++--- packages/common/src/index.ts | 1 + 2 files changed, 67 insertions(+), 8 deletions(-) rename {excalidraw-app => packages/common}/debug.ts (77%) diff --git a/excalidraw-app/debug.ts b/packages/common/debug.ts similarity index 77% rename from excalidraw-app/debug.ts rename to packages/common/debug.ts index 1ef136fb02..efb6fefb46 100644 --- a/excalidraw-app/debug.ts +++ b/packages/common/debug.ts @@ -1,9 +1,3 @@ -declare global { - interface Window { - debug: typeof Debug; - } -} - const lessPrecise = (num: number, precision = 5) => parseFloat(num.toPrecision(precision)); @@ -157,6 +151,70 @@ export class Debug { return ret; }; }; + + private static CHANGED_CACHE: Record> = {}; + + public static logChanged(name: string, obj: Record) { + const prev = Debug.CHANGED_CACHE[name]; + + Debug.CHANGED_CACHE[name] = obj; + + if (!prev) { + return; + } + + const allKeys = new Set([...Object.keys(prev), ...Object.keys(obj)]); + const changed: Record = {}; + + for (const key of allKeys) { + const prevVal = prev[key]; + const nextVal = obj[key]; + if (!deepEqual(prevVal, nextVal)) { + changed[key] = { prev: prevVal, next: nextVal }; + } + } + + if (Object.keys(changed).length > 0) { + console.info(`[${name}] changed:`, changed); + } + } +} + +function deepEqual(a: unknown, b: unknown): boolean { + if (Object.is(a, b)) { + return true; + } + + if ( + a === null || + b === null || + typeof a !== "object" || + typeof b !== "object" + ) { + return false; + } + + if (Array.isArray(a) !== Array.isArray(b)) { + return false; + } + + const keysA = Object.keys(a as Record); + const keysB = Object.keys(b as Record); + + if (keysA.length !== keysB.length) { + return false; + } + + for (const key of keysA) { + if ( + !deepEqual( + (a as Record)[key], + (b as Record)[key], + ) + ) { + return false; + } + } + + return true; } -//@ts-ignore -window.debug = Debug; diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index 7d6bf5b0dc..ca5397ddd1 100644 --- a/packages/common/src/index.ts +++ b/packages/common/src/index.ts @@ -12,3 +12,4 @@ export * from "./url"; export * from "./utils"; export * from "./emitter"; export * from "./editorInterface"; +export { Debug } from "../debug"; From 7ea3229e17696d2d64f9d0c4a0596b15d8cc81b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= Date: Mon, 23 Feb 2026 20:22:27 +0100 Subject: [PATCH 09/62] fix(editor): Hardened fixed point and bound element parsing in restore (#10816) * fix: Reinforce fixedPoint restore Signed-off-by: Mark Tolmacs * fix: Even more hardened boundElement in restore Signed-off-by: Mark Tolmacs * fix: Extract constant Signed-off-by: Mark Tolmacs * fix: Remove superfluous check from restore Signed-off-by: Mark Tolmacs * chore: Remove non-needed code path Signed-off-by: Mark Tolmacs * fix: More robust number test for fixedPoint parsing Signed-off-by: Mark Tolmacs * fix: Validate bindings for element being parsed Signed-off-by: Mark Tolmacs * unrelated type safety --------- Signed-off-by: Mark Tolmacs Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com> --- packages/element/src/binding.ts | 32 ++++++++++++++++++------ packages/excalidraw/data/restore.ts | 38 ++++++++++++++++++++--------- 2 files changed, 51 insertions(+), 19 deletions(-) diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index 86041b4aba..ae84623c3b 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -2447,21 +2447,37 @@ export const getArrowLocalFixedPoints = ( ]; }; -export const normalizeFixedPoint = ( +export const isFixedPoint = ( + fixedPoint: any, +): fixedPoint is FixedPointBinding["fixedPoint"] => { + return ( + Array.isArray(fixedPoint) && + fixedPoint.length === 2 && + fixedPoint.every((coord) => Number.isFinite(coord)) + ); +}; + +export const normalizeFixedPoint = ( fixedPoint: T, -): T extends null ? null : FixedPoint => { +): FixedPoint => { + if (!isFixedPoint(fixedPoint)) { + return [0.5001, 0.5001]; + } + + const EPSILON = 0.0001; + // Do not allow a precise 0.5 for fixed point ratio // to avoid jumping arrow heading due to floating point imprecision if ( - fixedPoint && - (Math.abs(fixedPoint[0] - 0.5) < 0.0001 || - Math.abs(fixedPoint[1] - 0.5) < 0.0001) + Math.abs(fixedPoint[0] - 0.5) < EPSILON || + Math.abs(fixedPoint[1] - 0.5) < EPSILON ) { return fixedPoint.map((ratio) => - Math.abs(ratio - 0.5) < 0.0001 ? 0.5001 : ratio, - ) as T extends null ? null : FixedPoint; + Math.abs(ratio - 0.5) < EPSILON ? 0.5001 : ratio, + ) as FixedPoint; } - return fixedPoint as any as T extends null ? null : FixedPoint; + + return fixedPoint; }; type Side = diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts index 5c81c657f3..b77f010bd8 100644 --- a/packages/excalidraw/data/restore.ts +++ b/packages/excalidraw/data/restore.ts @@ -155,7 +155,7 @@ const repairBinding = ( | ExcalidrawElbowArrowElement["startBinding"] | ExcalidrawElbowArrowElement["endBinding"] = { ...binding, - fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]), + fixedPoint: normalizeFixedPoint(binding.fixedPoint), mode: binding.mode || "orbit", }; @@ -176,7 +176,7 @@ const repairBinding = ( return { elementId: binding.elementId, mode: binding.mode, - fixedPoint: normalizeFixedPoint(binding.fixedPoint || [0.5, 0.5]), + fixedPoint: normalizeFixedPoint(binding.fixedPoint), } as FixedPointBinding | null; } return null; @@ -185,15 +185,14 @@ const repairBinding = ( // binding schema v1 (legacy) -> attempt to migrate to v2 // --------------------------------------------------------------------------- - const targetBoundElement = - (targetElementsMap.get(binding.elementId) as ExcalidrawBindableElement) || - undefined; + const targetBoundElement = targetElementsMap.get(binding.elementId) as + | ExcalidrawBindableElement + | undefined; const boundElement = targetBoundElement || - (existingElementsMap?.get( - binding.elementId, - ) as ExcalidrawBindableElement) || - undefined; + (existingElementsMap?.get(binding.elementId) as + | ExcalidrawBindableElement + | undefined); const elementsMap = targetBoundElement ? targetElementsMap : existingElementsMap; @@ -208,11 +207,28 @@ const repairBinding = ( const mode = isPointInElement(p, boundElement, elementsMap) ? "inside" : "orbit"; + const safeElement = { + ...element, + startBinding: element.startBinding?.elementId + ? { + ...element.startBinding, + mode, + fixedPoint: normalizeFixedPoint(element.startBinding.fixedPoint), + } + : null, + endBinding: element.endBinding?.elementId + ? { + ...element.endBinding, + mode, + fixedPoint: normalizeFixedPoint(element.endBinding.fixedPoint), + } + : null, + }; const focusPoint = mode === "inside" ? p : projectFixedPointOntoDiagonal( - element, + safeElement, p, boundElement, startOrEnd, @@ -220,7 +236,7 @@ const repairBinding = ( { value: 1 as NormalizedZoomValue }, ) || p; const { fixedPoint } = calculateFixedPointForNonElbowArrowBinding( - element, + safeElement, boundElement, startOrEnd, elementsMap, From 0b3a5e7cc4d6ba5bcc5105f694a59f721ee06fc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= Date: Tue, 24 Feb 2026 13:32:44 +0100 Subject: [PATCH 10/62] fix: Multi-point arrow bound point update (#10831) Signed-off-by: Mark Tolmacs --- packages/element/src/binding.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index ae84623c3b..bf1eeb63c7 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -1776,10 +1776,13 @@ export const updateBoundPoint = ( ); const otherArrowPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates( arrow, - startOrEnd === "startBinding" ? -1 : 0, + startOrEnd === "startBinding" ? 1 : -2, elementsMap, ); - const otherFocusPointOrArrowPoint = otherFocusPoint || otherArrowPoint; + const otherFocusPointOrArrowPoint = + arrow.points.length === 2 + ? otherFocusPoint || otherArrowPoint + : otherArrowPoint; const intersector = otherFocusPointOrArrowPoint && lineSegment(focusPoint, otherFocusPointOrArrowPoint); From 2874f9e48c3bf9e7c4a46015b4bb65b177f18b13 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Tue, 24 Feb 2026 21:11:46 +0100 Subject: [PATCH 11/62] fix(editor): simplify and fix midpoint highlighting (#10832) --- .../components/canvases/InteractiveCanvas.tsx | 1 + .../excalidraw/renderer/interactiveScene.ts | 111 ++++++++++-------- packages/excalidraw/types.ts | 1 + 3 files changed, 62 insertions(+), 51 deletions(-) diff --git a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx index a49dd51fbb..15ecb61eaf 100644 --- a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx +++ b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx @@ -265,6 +265,7 @@ const getRelevantAppStateProps = ( frameRendering: appState.frameRendering, shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom, exportScale: appState.exportScale, + currentItemArrowType: appState.currentItemArrowType, }); const areEqual = ( diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts index fd243eee3b..fc9331e6ea 100644 --- a/packages/excalidraw/renderer/interactiveScene.ts +++ b/packages/excalidraw/renderer/interactiveScene.ts @@ -7,6 +7,7 @@ import { type Radians, bezierEquation, pointRotateRads, + pointDistance, } from "@excalidraw/math"; import { @@ -37,14 +38,9 @@ import { isImageElement, isLinearElement, isLineElement, + maxBindingDistance_simple, isTextElement, LinearElementEditor, - headingForPoint, - compareHeading, - HEADING_RIGHT, - HEADING_DOWN, - HEADING_LEFT, - HEADING_UP, } from "@excalidraw/element"; import { renderSelectionElement } from "@excalidraw/element"; @@ -419,9 +415,8 @@ const renderBindingHighlightForBindableElement_simple = ( const arrow = linearElement?.elementId && LinearElementEditor.getElement(linearElement?.elementId, elementsMap); - const insideBindable = + const cursorIsInsideBindable = pointerCoords && - arrow && hitElementItself({ point: pointerCoords, element: suggestedBinding.element, @@ -430,14 +425,17 @@ const renderBindingHighlightForBindableElement_simple = ( overrideShouldTestInside: true, }); - if (!insideBindable || isElbowArrow(arrow)) { - context.save(); - context.translate(suggestedBinding.element.x, suggestedBinding.element.y); + const isElbow = + (arrow && isElbowArrow(arrow)) || + (appState.activeTool.type === "arrow" && + appState.currentItemArrowType === "elbow"); + + if (!cursorIsInsideBindable || isElbow) { + context.save(); - const midpointRadius = 5 / appState.zoom.value; const center = elementCenterPoint(suggestedBinding.element, elementsMap); - let midpoints: LocalPoint[]; + let midpoints: GlobalPoint[]; if (suggestedBinding.element.type === "diamond") { const center = elementCenterPoint( suggestedBinding.element, @@ -452,10 +450,7 @@ const renderBindingHighlightForBindableElement_simple = ( suggestedBinding.element.angle, ); - return pointFrom( - rotatedPoint[0] - suggestedBinding.element.x, - rotatedPoint[1] - suggestedBinding.element.y, - ); + return pointFrom(rotatedPoint[0], rotatedPoint[1]); }, ); } else { @@ -481,47 +476,53 @@ const renderBindingHighlightForBindableElement_simple = ( center, suggestedBinding.element.angle, ); - return pointFrom( - rotatedPoint[0] - suggestedBinding.element.x, - rotatedPoint[1] - suggestedBinding.element.y, - ); + return pointFrom(rotatedPoint[0], rotatedPoint[1]); }); } - const highlightedPoint = - suggestedBinding.midPoint && - pointFrom( - suggestedBinding.midPoint[0] - suggestedBinding.element.x, - suggestedBinding.midPoint[1] - suggestedBinding.element.y, + + const hoveredMidpoint = + pointerCoords && + midpoints.reduce( + ( + closestIdx: { + idx: number; + distance: number; + }, + point, + idx, + ) => { + const distance = pointDistance(point, pointerCoords); + if (idx === -1 || distance < closestIdx.distance) { + return { idx, distance }; + } + return closestIdx; + }, + { + idx: -1, + distance: Infinity, + }, ); - const target = [HEADING_RIGHT, HEADING_DOWN, HEADING_LEFT, HEADING_UP]; + const midpointRadius = 4 / appState.zoom.value; + const highlightThreshold = + maxBindingDistance_simple(appState.zoom) + + suggestedBinding.element.strokeWidth / 2; + midpoints.forEach((midpoint, idx) => { const isHighlighted = - highlightedPoint && - compareHeading( - headingForPoint( - pointRotateRads( - pointFrom( - highlightedPoint[0] + suggestedBinding.element.x, - highlightedPoint[1] + suggestedBinding.element.y, - ), - center, - suggestedBinding.element.angle as Radians, - ), - center, - ), - target[idx], - ); + (!cursorIsInsideBindable || isElbow) && + hoveredMidpoint?.idx === idx && + hoveredMidpoint.distance <= highlightThreshold; - if (!isHighlighted) { - context.fillStyle = - appState.theme === THEME.DARK - ? `rgba(0, 0, 0, 0.5)` - : `rgba(65, 65, 65, 0.4)`; - context.beginPath(); - context.arc(midpoint[0], midpoint[1], midpointRadius, 0, 2 * Math.PI); - context.fill(); - } else { + // also render midpoint if cursor close but not highlighted + // (for elbows, always show all points) + const isShown = + !isHighlighted && + (isElbow || + (idx === hoveredMidpoint?.idx && + hoveredMidpoint.distance <= highlightThreshold * 2)); + + if (isHighlighted) { context.fillStyle = appState.theme === THEME.DARK ? `rgba(3, 93, 161, 1)` @@ -530,6 +531,14 @@ const renderBindingHighlightForBindableElement_simple = ( context.beginPath(); context.arc(midpoint[0], midpoint[1], midpointRadius, 0, 2 * Math.PI); context.fill(); + } else if (isShown) { + context.fillStyle = + appState.theme === THEME.DARK + ? `rgba(0, 0, 0, 0.8)` + : `rgba(65, 65, 65, 0.5)`; + context.beginPath(); + context.arc(midpoint[0], midpoint[1], midpointRadius, 0, 2 * Math.PI); + context.fill(); } }); diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index f7e86cc524..02f70f62b4 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -244,6 +244,7 @@ export type InteractiveCanvasAppState = Readonly< frameRendering: AppState["frameRendering"]; shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"]; exportScale: AppState["exportScale"]; + currentItemArrowType: AppState["currentItemArrowType"]; } >; From cae9d2bcbd3e6c70c579a52574d91ea8898a80bb Mon Sep 17 00:00:00 2001 From: zsviczian Date: Thu, 26 Feb 2026 12:55:13 +0100 Subject: [PATCH 12/62] fix: "hand" tool active after exiting view mode if laser point was used (#10841) --- packages/excalidraw/components/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 59a11f804c..285421e357 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -4866,7 +4866,7 @@ class App extends React.Component { this.state.viewModeEnabled && event.key === KEYS.ESCAPE ) { - this.setActiveTool({ type: "hand" }); + this.setActiveTool({ type: "selection" }); return; } From 60b275880da7d1eb7dff3782e8d491188790597a Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Thu, 26 Feb 2026 16:13:15 +0100 Subject: [PATCH 13/62] feat(editor): support radar chart and multiple series for other chart types (#10824) --- packages/common/src/colors.ts | 29 +- packages/element/src/types.ts | 2 +- packages/excalidraw/actions/actionCanvas.tsx | 1 - packages/excalidraw/appState.ts | 4 - packages/excalidraw/charts.test.ts | 1079 ++++++++++++++++- packages/excalidraw/charts.ts | 481 -------- packages/excalidraw/charts/charts.bar.ts | 103 ++ .../excalidraw/charts/charts.constants.ts | 63 + packages/excalidraw/charts/charts.helpers.ts | 865 +++++++++++++ packages/excalidraw/charts/charts.line.ts | 130 ++ packages/excalidraw/charts/charts.parse.ts | 174 +++ packages/excalidraw/charts/charts.radar.ts | 199 +++ packages/excalidraw/charts/charts.types.ts | 18 + packages/excalidraw/charts/index.ts | 38 + packages/excalidraw/clipboard.test.ts | 63 - packages/excalidraw/clipboard.ts | 28 - packages/excalidraw/components/App.tsx | 23 +- packages/excalidraw/components/LayerUI.tsx | 8 +- .../components/PasteChartDialog.scss | 90 +- .../components/PasteChartDialog.tsx | 199 ++- packages/excalidraw/index.tsx | 6 + packages/excalidraw/locales/en.json | 4 + .../tests/__snapshots__/charts.test.tsx.snap | 19 +- .../__snapshots__/contextmenu.test.tsx.snap | 85 -- .../tests/__snapshots__/history.test.tsx.snap | 315 ----- .../regressionTests.test.tsx.snap | 260 ---- packages/excalidraw/tests/charts.test.tsx | 151 +++ packages/excalidraw/types.ts | 14 +- .../tests/__snapshots__/export.test.ts.snap | 5 - 29 files changed, 3102 insertions(+), 1354 deletions(-) delete mode 100644 packages/excalidraw/charts.ts create mode 100644 packages/excalidraw/charts/charts.bar.ts create mode 100644 packages/excalidraw/charts/charts.constants.ts create mode 100644 packages/excalidraw/charts/charts.helpers.ts create mode 100644 packages/excalidraw/charts/charts.line.ts create mode 100644 packages/excalidraw/charts/charts.parse.ts create mode 100644 packages/excalidraw/charts/charts.radar.ts create mode 100644 packages/excalidraw/charts/charts.types.ts create mode 100644 packages/excalidraw/charts/index.ts diff --git a/packages/common/src/colors.ts b/packages/common/src/colors.ts index 763510646b..567093c7d9 100644 --- a/packages/common/src/colors.ts +++ b/packages/common/src/colors.ts @@ -240,22 +240,21 @@ export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = { // ----------------------------------------------------------------------------- // !!!MUST BE WITHOUT GRAY, TRANSPARENT AND BLACK!!! -export const getAllColorsSpecificShade = (index: 0 | 1 | 2 | 3 | 4) => - [ - // 2nd row - COLOR_PALETTE.cyan[index], - COLOR_PALETTE.blue[index], - COLOR_PALETTE.violet[index], - COLOR_PALETTE.grape[index], - COLOR_PALETTE.pink[index], +export const getAllColorsSpecificShade = (index: 0 | 1 | 2 | 3 | 4) => [ + // 2nd row + COLOR_PALETTE.cyan[index], + COLOR_PALETTE.blue[index], + COLOR_PALETTE.violet[index], + COLOR_PALETTE.grape[index], + COLOR_PALETTE.pink[index], - // 3rd row - COLOR_PALETTE.green[index], - COLOR_PALETTE.teal[index], - COLOR_PALETTE.yellow[index], - COLOR_PALETTE.orange[index], - COLOR_PALETTE.red[index], - ] as const; + // 3rd row + COLOR_PALETTE.green[index], + COLOR_PALETTE.teal[index], + COLOR_PALETTE.yellow[index], + COLOR_PALETTE.orange[index], + COLOR_PALETTE.red[index], +]; // ----------------------------------------------------------------------------- // other helpers diff --git a/packages/element/src/types.ts b/packages/element/src/types.ts index 8067342a20..58e4469706 100644 --- a/packages/element/src/types.ts +++ b/packages/element/src/types.ts @@ -15,7 +15,7 @@ import type { ValueOf, } from "@excalidraw/common/utility-types"; -export type ChartType = "bar" | "line"; +export type ChartType = "bar" | "line" | "radar"; export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag"; export type FontFamilyKeys = keyof typeof FONT_FAMILY; export type FontFamilyValues = typeof FONT_FAMILY[FontFamilyKeys]; diff --git a/packages/excalidraw/actions/actionCanvas.tsx b/packages/excalidraw/actions/actionCanvas.tsx index f9c57a2851..d6986a17af 100644 --- a/packages/excalidraw/actions/actionCanvas.tsx +++ b/packages/excalidraw/actions/actionCanvas.tsx @@ -118,7 +118,6 @@ export const actionClearCanvas = register({ gridStep: appState.gridStep, gridModeEnabled: appState.gridModeEnabled, stats: appState.stats, - pasteDialog: appState.pasteDialog, activeTool: appState.activeTool.type === "image" ? { diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts index 087b1b795e..18e303db29 100644 --- a/packages/excalidraw/appState.ts +++ b/packages/excalidraw/appState.ts @@ -27,7 +27,6 @@ export const getDefaultAppState = (): Omit< showWelcomeScreen: false, theme: THEME.LIGHT, collaborators: new Map(), - currentChartType: "bar", currentItemBackgroundColor: DEFAULT_ELEMENT_PROPS.backgroundColor, currentItemEndArrowhead: "arrow", currentItemFillStyle: DEFAULT_ELEMENT_PROPS.fillStyle, @@ -83,7 +82,6 @@ export const getDefaultAppState = (): Omit< openPopup: null, openSidebar: null, openDialog: null, - pasteDialog: { shown: false, data: null }, previousSelectedElementIds: {}, resizingElement: null, scrolledOutside: false, @@ -150,7 +148,6 @@ const APP_STATE_STORAGE_CONF = (< showWelcomeScreen: { browser: true, export: false, server: false }, theme: { browser: true, export: false, server: false }, collaborators: { browser: false, export: false, server: false }, - currentChartType: { browser: true, export: false, server: false }, currentItemBackgroundColor: { browser: true, export: false, server: false }, currentItemEndArrowhead: { browser: true, export: false, server: false }, currentItemFillStyle: { browser: true, export: false, server: false }, @@ -212,7 +209,6 @@ const APP_STATE_STORAGE_CONF = (< openPopup: { browser: false, export: false, server: false }, openSidebar: { browser: true, export: false, server: false }, openDialog: { browser: false, export: false, server: false }, - pasteDialog: { browser: false, export: false, server: false }, previousSelectedElementIds: { browser: true, export: false, server: false }, resizingElement: { browser: false, export: false, server: false }, scrolledOutside: { browser: true, export: false, server: false }, diff --git a/packages/excalidraw/charts.test.ts b/packages/excalidraw/charts.test.ts index 94fa92fa0c..16e161ca40 100644 --- a/packages/excalidraw/charts.test.ts +++ b/packages/excalidraw/charts.test.ts @@ -1,8 +1,40 @@ -import { tryParseCells, tryParseNumber, VALID_SPREADSHEET } from "./charts"; +import { FONT_FAMILY } from "@excalidraw/common"; +import { + DEFAULT_CHART_COLOR_INDEX, + getAllColorsSpecificShade, +} from "@excalidraw/common"; + +import type { + ExcalidrawLineElement, + ExcalidrawTextElement, +} from "@excalidraw/element/types"; + +import { + isSpreadsheetValidForChartType, + renderSpreadsheet, + tryParseCells, + tryParseNumber, +} from "./charts"; import type { Spreadsheet } from "./charts"; describe("charts", () => { + const getRotatedBounds = (element: ExcalidrawTextElement) => { + const cos = Math.abs(Math.cos(element.angle)); + const sin = Math.abs(Math.sin(element.angle)); + const rotatedWidth = element.width * cos + element.height * sin; + const rotatedHeight = element.width * sin + element.height * cos; + const centerX = element.x + element.width / 2; + const centerY = element.y + element.height / 2; + return { + left: centerX - rotatedWidth / 2, + right: centerX + rotatedWidth / 2, + top: centerY - rotatedHeight / 2, + bottom: centerY + rotatedHeight / 2, + centerX, + }; + }; + describe("tryParseNumber", () => { it.each<[string, number]>([ ["1", 1], @@ -42,11 +74,11 @@ describe("charts", () => { const result = tryParseCells(spreadsheet); - expect(result.type).toBe(VALID_SPREADSHEET); + expect(result.ok).toBe(true); - const { title, labels, values } = ( - result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet } - ).spreadsheet; + const { title, labels, series } = ( + result as { ok: true; data: Spreadsheet } + ).data; expect(title).toEqual("value"); expect(labels).toEqual([ @@ -57,7 +89,9 @@ describe("charts", () => { "05:00", "06:00", ]); - expect(values).toEqual([61, -60, 85, -67, 54, 95]); + expect(series).toEqual([ + { title: "value", values: [61, -60, 85, -67, 54, 95] }, + ]); }); it("Uses the second column as the label if it is not a number", () => { @@ -73,11 +107,11 @@ describe("charts", () => { const result = tryParseCells(spreadsheet); - expect(result.type).toBe(VALID_SPREADSHEET); + expect(result.ok).toBe(true); - const { title, labels, values } = ( - result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet } - ).spreadsheet; + const { title, labels, series } = ( + result as { ok: true; data: Spreadsheet } + ).data; expect(title).toEqual("value"); expect(labels).toEqual([ @@ -88,7 +122,9 @@ describe("charts", () => { "05:00", "06:00", ]); - expect(values).toEqual([61, -60, 85, -67, 54, 95]); + expect(series).toEqual([ + { title: "value", values: [61, -60, 85, -67, 54, 95] }, + ]); }); it("treats the first column as labels if both columns are numbers", () => { @@ -104,15 +140,1026 @@ describe("charts", () => { const result = tryParseCells(spreadsheet); - expect(result.type).toBe(VALID_SPREADSHEET); + expect(result.ok).toBe(true); - const { title, labels, values } = ( - result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet } - ).spreadsheet; + const { title, labels, series } = ( + result as { ok: true; data: Spreadsheet } + ).data; expect(title).toEqual("value"); expect(labels).toEqual(["01", "02", "03", "04", "05", "06"]); - expect(values).toEqual([61, -60, 85, -67, 54, 95]); + expect(series).toEqual([ + { title: "value", values: [61, -60, 85, -67, 54, 95] }, + ]); + }); + + it("parses multi-series cells for radar charts", () => { + const spreadsheet = [ + ["Metric", "Player A", "Player B", "Player C"], + ["Speed", "80", "60", "75"], + ["Strength", "65", "85", "70"], + ["Agility", "90", "70", "88"], + ["Intelligence", "70", "88", "92"], + ["Stamina", "85", "75", "80"], + ]; + + const result = tryParseCells(spreadsheet); + + expect(result.ok).toBe(true); + + const parsed = (result as { ok: true; data: Spreadsheet }).data; + + expect(parsed.title).toEqual("Metric"); + expect(parsed.labels).toEqual([ + "Speed", + "Strength", + "Agility", + "Intelligence", + "Stamina", + ]); + expect(parsed.series).toEqual([ + { title: "Player A", values: [80, 65, 90, 70, 85] }, + { title: "Player B", values: [60, 85, 70, 88, 75] }, + { title: "Player C", values: [75, 70, 88, 92, 80] }, + ]); + }); + + it("treats first row as title+series headers only when all cells are non-numeric", () => { + const spreadsheet = [ + ["Trait", "10", "20"], + ["Physical Strength", "4", "8"], + ["Strategy", "6", "9"], + ["Charisma", "7", "5"], + ]; + + const result = tryParseCells(spreadsheet); + expect(result.ok).toBe(true); + + const parsed = (result as { ok: true; data: Spreadsheet }).data; + + expect(parsed.title).toBeNull(); + expect(parsed.labels?.[0]).toEqual("Trait"); + expect(parsed.series[0].title).toEqual("Series 1"); + expect(parsed.series[1].title).toEqual("Series 2"); + }); + + it("supports header row with series labels but no chart title", () => { + const spreadsheet = [ + ["", "Dunk", "Egg"], + ["Physical Strength", "10", "2"], + ["Swordsmanship", "8", "1"], + ["Political Instinct", "3", "9"], + ]; + + const result = tryParseCells(spreadsheet); + expect(result.ok).toBe(true); + + const parsed = (result as { ok: true; data: Spreadsheet }).data; + + expect(parsed.title).toBeNull(); + expect(parsed.labels).toEqual([ + "Physical Strength", + "Swordsmanship", + "Political Instinct", + ]); + expect(parsed.series).toEqual([ + { title: "Dunk", values: [10, 8, 3] }, + { title: "Egg", values: [2, 1, 9] }, + ]); + }); + + it("parses 2-row multi-series data with header row", () => { + const spreadsheet = [ + ["trait", "Dunk", "Egg"], + ["Physical Strength", "10", "2"], + ["Swordsmanship skill", "8", "1"], + ]; + + const result = tryParseCells(spreadsheet); + expect(result.ok).toBe(true); + + const parsed = (result as { ok: true; data: Spreadsheet }).data; + + expect(parsed.title).toEqual("trait"); + expect(parsed.labels).toEqual([ + "Physical Strength", + "Swordsmanship skill", + ]); + expect(parsed.series).toEqual([ + { title: "Dunk", values: [10, 8] }, + { title: "Egg", values: [2, 1] }, + ]); + }); + + it("parses 2-row multi-series data without header and keeps first column as labels", () => { + const spreadsheet = [ + ["Physical Strength", "10", "2"], + ["Swordsmanship skill", "8", "1"], + ]; + + const result = tryParseCells(spreadsheet); + expect(result.ok).toBe(true); + + const parsed = (result as { ok: true; data: Spreadsheet }).data; + + expect(parsed.title).toBeNull(); + expect(parsed.labels).toEqual([ + "Physical Strength", + "Swordsmanship skill", + ]); + expect(parsed.series).toEqual([ + { title: "Series 1", values: [10, 8] }, + { title: "Series 2", values: [2, 1] }, + ]); + }); + + it("always interprets 2-column data as label in first column and numeric value in second", () => { + const spreadsheet = [ + ["10", "2"], + ["8", "Swordsmanship skill"], + ["6", "3"], + ]; + + const result = tryParseCells(spreadsheet); + expect(result).toEqual({ + ok: false, + reason: "Value is not numeric", + }); + }); + }); + + describe("isSpreadsheetValidForChartType", () => { + it("rejects radar charts with only 2 dimensions", () => { + const spreadsheet: Spreadsheet = { + title: "trait", + labels: ["Physical Strength", "Swordsmanship skill"], + series: [ + { title: "Dunk", values: [10, 8] }, + { title: "Egg", values: [2, 1] }, + ], + }; + + expect(isSpreadsheetValidForChartType(spreadsheet, "radar")).toBe(false); + expect(isSpreadsheetValidForChartType(spreadsheet, "bar")).toBe(true); + expect(isSpreadsheetValidForChartType(spreadsheet, "line")).toBe(true); + }); + + it("accepts radar charts with 3 or more dimensions", () => { + const spreadsheet: Spreadsheet = { + title: "trait", + labels: [ + "Physical Strength", + "Swordsmanship skill", + "Political Instinct", + ], + series: [ + { title: "Dunk", values: [10, 8, 3] }, + { title: "Egg", values: [2, 1, 9] }, + ], + }; + + expect(isSpreadsheetValidForChartType(spreadsheet, "radar")).toBe(true); + }); + }); + + describe("renderSpreadsheet", () => { + it("renders grouped bars and legend for multi-series bar charts", () => { + const spreadsheet: Spreadsheet = { + title: "Trait", + labels: ["A", "B", "C", "D", "E"], + series: [ + { title: "Dunk", values: [10, 8, 3, 2.5, 5] }, + { title: "Egg", values: [2, 1, 9, 8, 9] }, + { title: "Aerion", values: [7, 8, 7, 4, 5] }, + ], + }; + + const elements = renderSpreadsheet("bar", spreadsheet, 0, 0); + const bars = elements!.filter( + (element) => + element.type === "rectangle" && + element.strokeWidth === 1 && + element.opacity === 100 && + !element.roundness, + ); + const textElements = elements!.filter( + (element) => element.type === "text", + ); + const axisLabels = textElements.filter((element) => + spreadsheet.labels?.includes(element.originalText || ""), + ); + const legendLabels = textElements.filter((element) => + spreadsheet.series.some( + (series) => series.title === element.originalText, + ), + ); + + const axisBottomY = Math.max( + ...axisLabels.map((axisLabel) => axisLabel.y + axisLabel.height), + ); + const legendTopY = Math.min( + ...legendLabels.map((legendLabel) => legendLabel.y), + ); + + expect(bars).toHaveLength( + spreadsheet.series.length * spreadsheet.series[0].values.length, + ); + expect(legendLabels).toHaveLength(spreadsheet.series.length); + expect(legendTopY).toBeGreaterThan(axisBottomY + 2); + }); + + it("spreads grouped bar series colors across palette", () => { + const palette = getAllColorsSpecificShade(DEFAULT_CHART_COLOR_INDEX); + const spreadsheet: Spreadsheet = { + title: "Trait", + labels: ["A", "B", "C", "D", "E"], + series: [ + { title: "S1", values: [1, 2, 3, 4, 5] }, + { title: "S2", values: [2, 3, 4, 5, 1] }, + { title: "S3", values: [3, 4, 5, 1, 2] }, + { title: "S4", values: [4, 5, 1, 2, 3] }, + ], + }; + + const randomSpy = vi.spyOn(Math, "random").mockReturnValue(0); + const elements = renderSpreadsheet("bar", spreadsheet, 0, 0); + randomSpy.mockRestore(); + + const bars = elements!.filter( + (element) => + element.type === "rectangle" && + element.strokeWidth === 1 && + element.opacity === 100 && + !element.roundness, + ); + const uniqueColors = Array.from( + new Set(bars.map((bar) => bar.backgroundColor)), + ); + const colorIndices = uniqueColors.map((color) => + palette.findIndex((paletteColor) => paletteColor === color), + ); + + expect(uniqueColors).toHaveLength(spreadsheet.series.length); + expect(colorIndices.every((index) => index >= 0)).toBe(true); + + const circularDistance = (first: number, second: number) => { + const absoluteDistance = Math.abs(first - second); + return Math.min(absoluteDistance, palette.length - absoluteDistance); + }; + const minDistance = Math.min( + ...colorIndices.flatMap((index, i) => + colorIndices + .slice(i + 1) + .map((other) => circularDistance(index, other)), + ), + ); + expect(minDistance).toBeGreaterThan(1); + }); + + it("renders grouped bars for parsed multi-series cells without header row", () => { + const cells = [ + ["Physical Strength", "10", "2", "7"], + ["Swordsmanship", "8", "1", "8"], + ["Political Instinct", "3", "9", "7"], + ["Book Knowledge", "2.5", "8", "4"], + ]; + const parsedResult = tryParseCells(cells); + expect(parsedResult.ok).toBe(true); + const parsedSpreadsheet = ( + parsedResult as { + ok: true; + data: Spreadsheet; + } + ).data; + + const elements = renderSpreadsheet("bar", parsedSpreadsheet, 0, 0); + const bars = elements!.filter( + (element) => + element.type === "rectangle" && + element.strokeWidth === 1 && + element.opacity === 100 && + !element.roundness, + ); + const textElements = elements!.filter( + (element) => element.type === "text", + ); + const legendLabels = textElements + .map((element) => element.originalText) + .filter((text): text is string => typeof text === "string"); + + expect(bars).toHaveLength( + parsedSpreadsheet.series[0].values.length * + parsedSpreadsheet.series.length, + ); + expect(legendLabels).toContain("Series 1"); + expect(legendLabels).toContain("Series 2"); + expect(legendLabels).toContain("Series 3"); + }); + + it("makes multi-series bar charts wider than single-series bar charts", () => { + const singleSeries: Spreadsheet = { + title: "Trait", + labels: ["A", "B", "C", "D"], + series: [{ title: "Trait", values: [10, 8, 3, 2.5] }], + }; + const multiSeries: Spreadsheet = { + title: "Trait", + labels: ["A", "B", "C", "D"], + series: [ + { title: "Dunk", values: [10, 8, 3, 2.5] }, + { title: "Egg", values: [2, 1, 9, 8] }, + { title: "Aerion", values: [7, 8, 7, 4] }, + ], + }; + + const singleElements = renderSpreadsheet("bar", singleSeries, 0, 0); + const multiElements = renderSpreadsheet("bar", multiSeries, 0, 0); + const getXAxisWidth = (elements: ReturnType) => + elements!.find( + (element): element is ExcalidrawLineElement => + element.type === "line" && + element.strokeStyle === "solid" && + element.points[0][1] === 0 && + element.points[1][1] === 0 && + element.points[1][0] > 0, + )?.width || 0; + + expect(getXAxisWidth(multiElements)).toBeGreaterThan( + getXAxisWidth(singleElements), + ); + }); + + it("makes multi-series line charts wider than single-series line charts", () => { + const singleSeries: Spreadsheet = { + title: "Trait", + labels: ["A", "B", "C", "D"], + series: [{ title: "Trait", values: [10, 8, 3, 2.5] }], + }; + const multiSeries: Spreadsheet = { + title: "Trait", + labels: ["A", "B", "C", "D"], + series: [ + { title: "Dunk", values: [10, 8, 3, 2.5] }, + { title: "Egg", values: [2, 1, 9, 8] }, + { title: "Aerion", values: [7, 8, 7, 4] }, + ], + }; + + const singleElements = renderSpreadsheet("line", singleSeries, 0, 0); + const multiElements = renderSpreadsheet("line", multiSeries, 0, 0); + const getXAxisWidth = (elements: ReturnType) => + elements!.find( + (element): element is ExcalidrawLineElement => + element.type === "line" && + element.strokeStyle === "solid" && + element.points[0][1] === 0 && + element.points[1][1] === 0 && + element.points[1][0] > 0, + )?.width || 0; + + expect(getXAxisWidth(multiElements)).toBeGreaterThan( + getXAxisWidth(singleElements), + ); + }); + + it("wraps grouped bar labels with spaces and still ellipsifies long single words", () => { + const spreadsheet: Spreadsheet = { + title: "Trait", + labels: [ + "Supercalifragilisticexpialidocious", + "Data Flow", + "Logic Layer", + ], + series: [ + { title: "Dunk", values: [8, 3, 2.5] }, + { title: "Egg", values: [1, 9, 8] }, + { title: "Aerion", values: [8, 7, 4] }, + ], + }; + + const elements = renderSpreadsheet("bar", spreadsheet, 0, 0); + const longWordLabel = elements!.find( + (element): element is ExcalidrawTextElement => + element.type === "text" && + Math.abs(element.angle) > 0 && + element.text.includes("..."), + ); + const spacedLabels = elements!.filter( + (element): element is ExcalidrawTextElement => + element.type === "text" && + (element.originalText === "Data Flow" || + element.originalText === "Logic Layer"), + ); + + expect(longWordLabel).toBeDefined(); + expect(longWordLabel?.text).toContain("..."); + expect(longWordLabel?.originalText).toBe(longWordLabel?.text); + expect( + (longWordLabel?.text || "").replace("...", "").length, + ).toBeGreaterThan(0); + expect(spacedLabels.some((label) => label.text.includes("\n"))).toBe( + true, + ); + expect( + spacedLabels.every( + (label) => !!label.originalText && !label.originalText.includes("\n"), + ), + ).toBe(true); + }); + + it("keeps single-series bar x-axis labels below axis and avoids neighbor overlap", () => { + const spreadsheet: Spreadsheet = { + title: "Dunk", + labels: [ + "Physical Strength", + "Swordsmanship", + "Political Instinct", + "Book Knowledge", + "Strategic Thinking", + "charisma", + "courage", + "Stubbornness", + "Empathy", + "Practical Survival Skills", + ], + series: [{ title: "Dunk", values: [10, 8, 3, 2.5, 5, 7, 9, 8, 8, 9] }], + }; + + const elements = renderSpreadsheet("bar", spreadsheet, 0, 0); + const axisLabels = elements!.filter( + (element): element is ExcalidrawTextElement => + element.type === "text" && Math.abs(element.angle) > 0, + ); + + expect(axisLabels).toHaveLength(spreadsheet.labels!.length); + + const bounds = axisLabels.map(getRotatedBounds); + for (const bound of bounds) { + expect(bound.top).toBeGreaterThan(0); + } + + const sortedBounds = bounds.sort( + (left, right) => left.centerX - right.centerX, + ); + for (let index = 1; index < sortedBounds.length; index++) { + expect(sortedBounds[index - 1].right).toBeLessThanOrEqual( + sortedBounds[index].left + 2, + ); + } + }); + + it("renders one line per series and one dot per data point for multi-series line charts", () => { + const spreadsheet: Spreadsheet = { + title: "Scores", + labels: ["alpha", "beta", "gamma", "delta", "epsilon"], + series: [ + { title: "Team A", values: [42150, 8300, 95400, 7820, 310500] }, + { title: "Team B", values: [63400, 3150, 51200, 4670, 125800] }, + ], + }; + + const elements = renderSpreadsheet("line", spreadsheet, 0, 0); + const seriesLines = elements!.filter( + (element): element is ExcalidrawLineElement => + element.type === "line" && element.strokeWidth === 2, + ); + const dots = elements!.filter( + (element) => element.type === "ellipse" && element.strokeWidth === 2, + ); + + expect(seriesLines).toHaveLength(spreadsheet.series.length); + expect(dots).toHaveLength( + spreadsheet.series.length * spreadsheet.series[0].values.length, + ); + }); + + it("spreads line series colors across palette to avoid similar adjacent colors", () => { + const palette = getAllColorsSpecificShade(DEFAULT_CHART_COLOR_INDEX); + const spreadsheet: Spreadsheet = { + title: "Trait", + labels: ["A", "B", "C", "D", "E"], + series: [ + { title: "S1", values: [1, 2, 3, 4, 5] }, + { title: "S2", values: [2, 3, 4, 5, 1] }, + { title: "S3", values: [3, 4, 5, 1, 2] }, + { title: "S4", values: [4, 5, 1, 2, 3] }, + ], + }; + + const randomSpy = vi.spyOn(Math, "random").mockReturnValue(0); + const elements = renderSpreadsheet("line", spreadsheet, 0, 0); + randomSpy.mockRestore(); + + const seriesLines = elements!.filter( + (element) => element.type === "line" && element.strokeWidth === 2, + ); + const colorIndices = seriesLines.map((line) => + palette.findIndex((color) => color === line.strokeColor), + ); + + expect(colorIndices.every((index) => index >= 0)).toBe(true); + + const circularDistance = (first: number, second: number) => { + const absoluteDistance = Math.abs(first - second); + return Math.min(absoluteDistance, palette.length - absoluteDistance); + }; + const minDistance = Math.min( + ...colorIndices.flatMap((index, i) => + colorIndices + .slice(i + 1) + .map((other) => circularDistance(index, other)), + ), + ); + + expect(minDistance).toBeGreaterThan(1); + }); + + it("uses colorSeed to deterministically pick chart colors", () => { + const spreadsheet: Spreadsheet = { + title: "Trait", + labels: ["A", "B", "C", "D"], + series: [ + { title: "S1", values: [1, 2, 3, 4] }, + { title: "S2", values: [4, 3, 2, 1] }, + { title: "S3", values: [2, 3, 4, 1] }, + ], + }; + + const getSeriesLineColors = (seed: number) => { + const elements = renderSpreadsheet("line", spreadsheet, 0, 0, seed); + return elements! + .filter( + (element): element is ExcalidrawLineElement => + element.type === "line" && element.strokeWidth === 2, + ) + .map((line) => line.strokeColor); + }; + + expect(getSeriesLineColors(0.125)).toEqual(getSeriesLineColors(0.125)); + expect(getSeriesLineColors(0.125)).not.toEqual( + getSeriesLineColors(0.875), + ); + }); + + it("renders multi-series line legend below axis labels with clearance", () => { + const spreadsheet: Spreadsheet = { + title: "Scores", + labels: ["alpha", "beta", "gamma", "delta", "epsilon"], + series: [ + { title: "Team A", values: [42150, 8300, 95400, 12600, 310500] }, + { title: "Team B", values: [63400, 3150, 51200, 9200, 125800] }, + ], + }; + + const elements = renderSpreadsheet("line", spreadsheet, 0, 0); + const textElements = elements!.filter( + (element) => element.type === "text", + ); + const axisLabels = textElements.filter((element) => + spreadsheet.labels?.includes(element.originalText || ""), + ); + const legendLabels = textElements.filter((element) => + spreadsheet.series.some( + (series) => series.title === element.originalText, + ), + ); + + const axisBottomY = Math.max( + ...axisLabels.map((axisLabel) => axisLabel.y + axisLabel.height), + ); + const legendTopY = Math.min( + ...legendLabels.map((legendLabel) => legendLabel.y), + ); + + expect(axisLabels.length).toBeGreaterThan(0); + expect(legendLabels.length).toBe(2); + expect(legendTopY).toBeGreaterThan(axisBottomY + 2); + }); + + it("keeps multi-series line x-axis labels below axis and avoids neighbor overlap", () => { + const spreadsheet: Spreadsheet = { + title: "trait", + labels: [ + "Physical Strength", + "Swordsmanship", + "Political Instinct", + "Book Knowledge", + "Strategic Thinking", + "charisma", + "courage", + "Stubbornness", + "Empathy", + "Practical Survival Skills", + ], + series: [ + { title: "Dunk", values: [10, 8, 3, 2.5, 5, 7, 9, 8, 8, 9] }, + { title: "Egg", values: [2, 1, 9, 8, 9, 8, 7, 9, 8, 4] }, + ], + }; + + const elements = renderSpreadsheet("line", spreadsheet, 0, 0); + const axisLabels = elements!.filter( + (element): element is ExcalidrawTextElement => + element.type === "text" && Math.abs(element.angle) > 0, + ); + + expect(axisLabels).toHaveLength(spreadsheet.labels!.length); + + const bounds = axisLabels.map(getRotatedBounds); + for (const bound of bounds) { + expect(bound.top).toBeGreaterThan(0); + } + + const sortedBounds = bounds.sort( + (left, right) => left.centerX - right.centerX, + ); + for (let index = 1; index < sortedBounds.length; index++) { + expect(sortedBounds[index - 1].right).toBeLessThanOrEqual( + sortedBounds[index].left + 2, + ); + } + }); + + it("renders one closed polygon line per radar series", () => { + const spreadsheet: Spreadsheet = { + title: "Metric", + labels: ["Speed", "Strength", "Agility", "Intelligence", "Stamina"], + series: [ + { title: "Player A", values: [80, 65, 90, 70, 85] }, + { title: "Player B", values: [60, 85, 70, 88, 75] }, + { title: "Player C", values: [75, 70, 88, 92, 80] }, + ], + }; + + const elements = renderSpreadsheet("radar", spreadsheet, 0, 0); + const seriesPolygons = elements!.filter( + (element): element is ExcalidrawLineElement => + element.type === "line" && + "polygon" in element && + element.polygon === true && + element.strokeWidth === 2, + ); + + expect(seriesPolygons).toHaveLength(3); + for (const polygon of seriesPolygons) { + expect(polygon.points[0]).toEqual( + polygon.points[polygon.points.length - 1], + ); + } + }); + + it("normalizes multi-series radar values with global scale", () => { + const spreadsheet: Spreadsheet = { + title: "Scores", + labels: ["alpha", "beta", "gamma", "delta", "epsilon"], + series: [ + { title: "Series 1", values: [40000, 8300, 95400, 7820, 5000000] }, + { title: "Series 2", values: [76000, 3150, 51200, 4670, 60000] }, + ], + }; + + const elements = renderSpreadsheet("radar", spreadsheet, 0, 0); + const seriesPolygons = elements!.filter( + (element): element is ExcalidrawLineElement => + element.type === "line" && + "polygon" in element && + element.polygon === true && + element.strokeWidth === 2, + ); + + const series1 = seriesPolygons[0]; + const series2 = seriesPolygons[1]; + const getRadius = (point: readonly [number, number]) => + Math.hypot(point[0], point[1]); + + // On alpha axis, second series is about ~1.9x first series. + const alphaRatio = + getRadius(series2.points[0]!) / getRadius(series1.points[0]!); + expect(alphaRatio).toBeCloseTo(76000 / 40000, 1); + + // On epsilon axis, first series should dominate strongly. + const epsilonRatio = + getRadius(series1.points[4]!) / getRadius(series2.points[4]!); + expect(epsilonRatio).toBeGreaterThan(50); + }); + + // it("always renders radar step rings regardless of axis scale ratio", () => { + // const spreadsheet: Spreadsheet = { + // title: "Scores", + // labels: ["alpha", "beta", "gamma", "delta", "epsilon"], + // series: [ + // { title: "Series 1", values: [40000, 8300, 95400, 7820, 5000000] }, + // { title: "Series 2", values: [76000, 3150, 51200, 4670, 60000] }, + // ], + // }; + + // const elements = renderSpreadsheet("radar", spreadsheet, 0, 0); + // const stepRings = elements!.filter( + // (element) => + // element.type === "line" && + // "polygon" in element && + // element.polygon && + // element.strokeStyle === "solid" && + // element.strokeWidth === 1, + // ); + + // expect(stepRings).toHaveLength(4); + // }); + + it("uses log normalization for highly skewed single-series radar data", () => { + const spreadsheet: Spreadsheet = { + title: "Scores", + labels: ["alpha", "beta", "gamma", "delta", "epsilon"], + series: [ + { + title: "Scores", + values: [40000, 8300, 95400, 7820, 5000000], + }, + ], + }; + + const elements = renderSpreadsheet("radar", spreadsheet, 0, 0); + const seriesPolygons = elements!.filter( + (element): element is ExcalidrawLineElement => + element.type === "line" && + "polygon" in element && + element.polygon === true && + element.strokeWidth === 2, + ); + + const polygon = seriesPolygons[0]; + const getRadius = (point: readonly [number, number]) => + Math.hypot(point[0], point[1]); + + const alphaRadius = getRadius(polygon.points[0]!); + const epsilonRadius = getRadius(polygon.points[4]!); + + // With linear scaling this would collapse near 0; log keeps it visible. + expect(alphaRadius).toBeGreaterThan(40); + expect(epsilonRadius).toBeGreaterThan(alphaRadius); + }); + + it("does not render 0/max value labels for radar charts", () => { + const spreadsheet: Spreadsheet = { + title: "Scores", + labels: ["alpha", "beta", "gamma", "delta", "epsilon"], + series: [ + { + title: "Scores", + values: [40000, 8300, 95400, 7820, 5000000], + }, + ], + }; + + const elements = renderSpreadsheet("radar", spreadsheet, 0, 0); + const textElements = elements!.filter( + (element) => element.type === "text", + ); + + expect(textElements.some((element) => element.text === "0")).toBe(false); + expect( + textElements.some( + (element) => + element.text === + Math.max(...spreadsheet.series[0].values).toLocaleString(), + ), + ).toBe(false); + }); + + it("wraps long radar axis labels instead of ellipsifying", () => { + const spreadsheet: Spreadsheet = { + title: "Trait", + labels: [ + "Physical Strength", + "Swordsmanship", + "Political Instinct", + "Book Knowledge", + "Strategic Thinking", + "Charisma", + "Courage", + "Stubbornness", + "Empathy", + "Practical Survival Skills", + ], + series: [ + { title: "Dunk", values: [10, 8, 3, 2.5, 5, 7, 9, 8, 8, 9] }, + { title: "Egg", values: [2, 1, 9, 8, 9, 8, 7, 9, 8, 4] }, + ], + }; + + const elements = renderSpreadsheet("radar", spreadsheet, 0, 0); + const textElements = elements!.filter( + (element) => element.type === "text", + ); + const wrappedAxisLabels = textElements.filter( + (element) => + element.text.includes("\n") && + element.text !== "Trait" && + element.text !== "Dunk" && + element.text !== "Egg", + ); + + expect(wrappedAxisLabels.length).toBeGreaterThan(0); + expect( + wrappedAxisLabels.every( + (element) => + typeof element.originalText === "string" && + !element.originalText.includes("\n"), + ), + ).toBe(true); + expect( + textElements.some( + (element) => element.text.includes("...") && element.text !== "Dunk", + ), + ).toBe(false); + expect( + textElements.some( + (element) => + element.originalText === "Stubbornness" && + !element.text.includes("\n") && + element.text === "Stubbornness", + ), + ).toBe(true); + expect( + textElements.some( + (element) => + element.originalText === "Physical Strength" && + element.text.includes("Physical\nStrength"), + ), + ).toBe(true); + + const topLabel = textElements.find( + (element) => element.originalText === "Physical Strength", + ); + const topSpokeY = Math.min( + ...elements! + .filter( + (element): element is ExcalidrawLineElement => + element.type === "line" && + "polygon" in element && + !element.polygon && + element.strokeStyle === "solid" && + element.strokeWidth === 1, + ) + .map((element) => element.y + element.points[1][1]), + ); + expect(topLabel).toBeDefined(); + expect(topLabel!.y + topLabel!.height).toBeLessThan(topSpokeY - 2); + }); + + it("renders radar title and series legend labels in Lilita One", () => { + const spreadsheet: Spreadsheet = { + title: "Trait", + labels: ["Physical Strength", "Swordsmanship", "Strategy", "Charisma"], + series: [ + { title: "Dunk", values: [10, 8, 5, 7] }, + { title: "Egg", values: [2, 1, 9, 8] }, + ], + }; + + const elements = renderSpreadsheet("radar", spreadsheet, 0, 0); + const textElements = elements!.filter( + (element) => element.type === "text", + ); + const title = textElements.find((element) => + element.text.includes("Trait"), + ); + const dunkLabel = textElements.find((element) => element.text === "Dunk"); + const eggLabel = textElements.find((element) => element.text === "Egg"); + + expect(title?.fontFamily).toBe(FONT_FAMILY["Lilita One"]); + expect(title?.originalText).toBe("Trait"); + expect(dunkLabel?.fontFamily).toBe(FONT_FAMILY["Lilita One"]); + expect(eggLabel?.fontFamily).toBe(FONT_FAMILY["Lilita One"]); + }); + + it("positions radar title with vertical clearance above axis labels", () => { + const spreadsheet: Spreadsheet = { + title: "Trait", + labels: [ + "Physical Strength", + "Swordsmanship", + "Political Instinct", + "Book Knowledge", + "Strategic Thinking", + "Charisma", + "Courage", + "Stubbornness", + "Empathy", + "Practical Survival Skills", + ], + series: [ + { title: "Dunk", values: [10, 8, 3, 2.5, 5, 7, 9, 8, 8, 9] }, + { title: "Egg", values: [2, 1, 9, 8, 9, 8, 7, 9, 8, 4] }, + ], + }; + + const elements = renderSpreadsheet("radar", spreadsheet, 0, 0); + const textElements = elements!.filter( + (element) => element.type === "text", + ); + const title = textElements.find( + (element) => element.fontFamily === FONT_FAMILY["Lilita One"], + ); + const axisLabels = textElements.filter( + (element) => + element.fontFamily === FONT_FAMILY.Excalifont && + element.text !== "Dunk" && + element.text !== "Egg", + ); + const topAxisLabelY = Math.min(...axisLabels.map((element) => element.y)); + + expect(title).toBeDefined(); + expect(title!.y + title!.height).toBeLessThan(topAxisLabelY - 4); + }); + + it("spreads radar series colors across palette to avoid similar adjacent colors", () => { + const palette = getAllColorsSpecificShade(DEFAULT_CHART_COLOR_INDEX); + const spreadsheet: Spreadsheet = { + title: "Trait", + labels: ["A", "B", "C", "D", "E"], + series: [ + { title: "S1", values: [1, 2, 3, 4, 5] }, + { title: "S2", values: [2, 3, 4, 5, 1] }, + { title: "S3", values: [3, 4, 5, 1, 2] }, + { title: "S4", values: [4, 5, 1, 2, 3] }, + ], + }; + + const randomSpy = vi.spyOn(Math, "random").mockReturnValue(0); + const elements = renderSpreadsheet("radar", spreadsheet, 0, 0); + randomSpy.mockRestore(); + + const seriesPolygons = elements!.filter( + (element) => + element.type === "line" && + "polygon" in element && + element.polygon === true && + element.strokeWidth === 2, + ); + const colorIndices = seriesPolygons.map((polygon) => + palette.findIndex((color) => color === polygon.strokeColor), + ); + + expect(colorIndices.every((index) => index >= 0)).toBe(true); + + const circularDistance = (first: number, second: number) => { + const absoluteDistance = Math.abs(first - second); + return Math.min(absoluteDistance, palette.length - absoluteDistance); + }; + const minDistance = Math.min( + ...colorIndices.flatMap((index, i) => + colorIndices + .slice(i + 1) + .map((other) => circularDistance(index, other)), + ), + ); + + expect(minDistance).toBeGreaterThan(1); + }); + + it("positions series legend below the lowest axis label with clearance", () => { + const spreadsheet: Spreadsheet = { + title: "Trait", + labels: [ + "Psychological Warfare", + "Divine Favor", + "Confidence", + "Morale", + "Armor Protection long wrapped label from above", + "Accuracy", + "Agility", + "Weapon Reach", + ], + series: [ + { title: "David", values: [6, 7, 8, 9, 7, 8, 6, 9] }, + { title: "Goliath", values: [9, 3, 2, 6, 10, 2, 8, 1] }, + ], + }; + + const elements = renderSpreadsheet("radar", spreadsheet, 0, 0); + const textElements = elements!.filter( + (element) => element.type === "text", + ); + const axisLabels = textElements.filter((element) => + spreadsheet.labels?.includes(element.originalText), + ); + const legendLabels = textElements.filter((element) => + spreadsheet.series.some( + (series) => series.title === element.originalText, + ), + ); + + const axisBottomY = Math.max( + ...axisLabels.map((axisLabel) => axisLabel.y + axisLabel.height), + ); + const legendTopY = Math.min( + ...legendLabels.map((legendLabel) => legendLabel.y), + ); + + expect(axisLabels.length).toBeGreaterThan(0); + expect(legendLabels.length).toBeGreaterThan(0); + expect(legendTopY).toBeGreaterThan(axisBottomY + 2); }); }); }); diff --git a/packages/excalidraw/charts.ts b/packages/excalidraw/charts.ts deleted file mode 100644 index 26f8802936..0000000000 --- a/packages/excalidraw/charts.ts +++ /dev/null @@ -1,481 +0,0 @@ -import { pointFrom } from "@excalidraw/math"; - -import { - COLOR_PALETTE, - DEFAULT_CHART_COLOR_INDEX, - getAllColorsSpecificShade, - DEFAULT_FONT_FAMILY, - DEFAULT_FONT_SIZE, - VERTICAL_ALIGN, - randomId, - isDevEnv, - FONT_SIZES, -} from "@excalidraw/common"; - -import { - newTextElement, - newLinearElement, - newElement, -} from "@excalidraw/element"; - -import type { Radians } from "@excalidraw/math"; - -import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types"; - -export type ChartElements = readonly NonDeletedExcalidrawElement[]; - -const BAR_WIDTH = 32; -const BAR_GAP = 12; -const BAR_HEIGHT = 256; -const GRID_OPACITY = 50; - -export interface Spreadsheet { - title: string | null; - labels: string[] | null; - values: number[]; -} - -export const NOT_SPREADSHEET = "NOT_SPREADSHEET"; -export const VALID_SPREADSHEET = "VALID_SPREADSHEET"; - -type ParseSpreadsheetResult = - | { type: typeof NOT_SPREADSHEET; reason: string } - | { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }; - -/** - * @private exported for testing - */ -export const tryParseNumber = (s: string): number | null => { - const match = /^([-+]?)[$€£¥₩]?([-+]?)([\d.,]+)[%]?$/.exec(s); - if (!match) { - return null; - } - return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, "")); -}; - -const isNumericColumn = (lines: string[][], columnIndex: number) => - lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null); - -/** - * @private exported for testing - */ -export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => { - const numCols = cells[0].length; - - if (numCols > 2) { - return { type: NOT_SPREADSHEET, reason: "More than 2 columns" }; - } - - if (numCols === 1) { - if (!isNumericColumn(cells, 0)) { - return { type: NOT_SPREADSHEET, reason: "Value is not numeric" }; - } - - const hasHeader = tryParseNumber(cells[0][0]) === null; - const values = (hasHeader ? cells.slice(1) : cells).map((line) => - tryParseNumber(line[0]), - ); - - if (values.length < 2) { - return { type: NOT_SPREADSHEET, reason: "Less than two rows" }; - } - - return { - type: VALID_SPREADSHEET, - spreadsheet: { - title: hasHeader ? cells[0][0] : null, - labels: null, - values: values as number[], - }, - }; - } - - const labelColumnNumeric = isNumericColumn(cells, 0); - const valueColumnNumeric = isNumericColumn(cells, 1); - - if (!labelColumnNumeric && !valueColumnNumeric) { - return { type: NOT_SPREADSHEET, reason: "Value is not numeric" }; - } - - const [labelColumnIndex, valueColumnIndex] = valueColumnNumeric - ? [0, 1] - : [1, 0]; - const hasHeader = tryParseNumber(cells[0][valueColumnIndex]) === null; - const rows = hasHeader ? cells.slice(1) : cells; - - if (rows.length < 2) { - return { type: NOT_SPREADSHEET, reason: "Less than 2 rows" }; - } - - return { - type: VALID_SPREADSHEET, - spreadsheet: { - title: hasHeader ? cells[0][valueColumnIndex] : null, - labels: rows.map((row) => row[labelColumnIndex]), - values: rows.map((row) => tryParseNumber(row[valueColumnIndex])!), - }, - }; -}; - -const transposeCells = (cells: string[][]) => { - const nextCells: string[][] = []; - for (let col = 0; col < cells[0].length; col++) { - const nextCellRow: string[] = []; - for (let row = 0; row < cells.length; row++) { - nextCellRow.push(cells[row][col]); - } - nextCells.push(nextCellRow); - } - return nextCells; -}; - -export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => { - // Copy/paste from excel, spreadsheets, tsv, csv. - // For now we only accept 2 columns with an optional header - - // Check for tab separated values - let lines = text - .trim() - .split("\n") - .map((line) => line.trim().split("\t")); - - // Check for comma separated files - if (lines.length && lines[0].length !== 2) { - lines = text - .trim() - .split("\n") - .map((line) => line.trim().split(",")); - } - - if (lines.length === 0) { - return { type: NOT_SPREADSHEET, reason: "No values" }; - } - - const numColsFirstLine = lines[0].length; - const isSpreadsheet = lines.every((line) => line.length === numColsFirstLine); - - if (!isSpreadsheet) { - return { - type: NOT_SPREADSHEET, - reason: "All rows don't have same number of columns", - }; - } - - const result = tryParseCells(lines); - if (result.type !== VALID_SPREADSHEET) { - const transposedResults = tryParseCells(transposeCells(lines)); - if (transposedResults.type === VALID_SPREADSHEET) { - return transposedResults; - } - } - return result; -}; - -const bgColors = getAllColorsSpecificShade(DEFAULT_CHART_COLOR_INDEX); - -// Put all the common properties here so when the whole chart is selected -// the properties dialog shows the correct selected values -const commonProps = { - fillStyle: "hachure", - fontFamily: DEFAULT_FONT_FAMILY, - fontSize: DEFAULT_FONT_SIZE, - opacity: 100, - roughness: 1, - strokeColor: COLOR_PALETTE.black, - roundness: null, - strokeStyle: "solid", - strokeWidth: 1, - verticalAlign: VERTICAL_ALIGN.MIDDLE, - locked: false, -} as const; - -const getChartDimensions = (spreadsheet: Spreadsheet) => { - const chartWidth = - (BAR_WIDTH + BAR_GAP) * spreadsheet.values.length + BAR_GAP; - const chartHeight = BAR_HEIGHT + BAR_GAP * 2; - return { chartWidth, chartHeight }; -}; - -const chartXLabels = ( - spreadsheet: Spreadsheet, - x: number, - y: number, - groupId: string, - backgroundColor: string, -): ChartElements => { - return ( - spreadsheet.labels?.map((label, index) => { - return newTextElement({ - groupIds: [groupId], - backgroundColor, - ...commonProps, - text: label.length > 8 ? `${label.slice(0, 5)}...` : label, - x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP * 2, - y: y + BAR_GAP / 2, - width: BAR_WIDTH, - angle: 5.87 as Radians, - fontSize: FONT_SIZES.sm, - textAlign: "center", - verticalAlign: "top", - }); - }) || [] - ); -}; - -const chartYLabels = ( - spreadsheet: Spreadsheet, - x: number, - y: number, - groupId: string, - backgroundColor: string, -): ChartElements => { - const minYLabel = newTextElement({ - groupIds: [groupId], - backgroundColor, - ...commonProps, - x: x - BAR_GAP, - y: y - BAR_GAP, - text: "0", - textAlign: "right", - }); - - const maxYLabel = newTextElement({ - groupIds: [groupId], - backgroundColor, - ...commonProps, - x: x - BAR_GAP, - y: y - BAR_HEIGHT - minYLabel.height / 2, - text: Math.max(...spreadsheet.values).toLocaleString(), - textAlign: "right", - }); - - return [minYLabel, maxYLabel]; -}; - -const chartLines = ( - spreadsheet: Spreadsheet, - x: number, - y: number, - groupId: string, - backgroundColor: string, -): ChartElements => { - const { chartWidth, chartHeight } = getChartDimensions(spreadsheet); - const xLine = newLinearElement({ - backgroundColor, - groupIds: [groupId], - ...commonProps, - type: "line", - x, - y, - width: chartWidth, - points: [pointFrom(0, 0), pointFrom(chartWidth, 0)], - }); - - const yLine = newLinearElement({ - backgroundColor, - groupIds: [groupId], - ...commonProps, - type: "line", - x, - y, - height: chartHeight, - points: [pointFrom(0, 0), pointFrom(0, -chartHeight)], - }); - - const maxLine = newLinearElement({ - backgroundColor, - groupIds: [groupId], - ...commonProps, - type: "line", - x, - y: y - BAR_HEIGHT - BAR_GAP, - strokeStyle: "dotted", - width: chartWidth, - opacity: GRID_OPACITY, - points: [pointFrom(0, 0), pointFrom(chartWidth, 0)], - }); - - return [xLine, yLine, maxLine]; -}; - -// For the maths behind it https://excalidraw.com/#json=6320864370884608,O_5xfD-Agh32tytHpRJx1g -const chartBaseElements = ( - spreadsheet: Spreadsheet, - x: number, - y: number, - groupId: string, - backgroundColor: string, - debug?: boolean, -): ChartElements => { - const { chartWidth, chartHeight } = getChartDimensions(spreadsheet); - - const title = spreadsheet.title - ? newTextElement({ - backgroundColor, - groupIds: [groupId], - ...commonProps, - text: spreadsheet.title, - x: x + chartWidth / 2, - y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE, - roundness: null, - textAlign: "center", - }) - : null; - - const debugRect = debug - ? newElement({ - backgroundColor, - groupIds: [groupId], - ...commonProps, - type: "rectangle", - x, - y: y - chartHeight, - width: chartWidth, - height: chartHeight, - strokeColor: COLOR_PALETTE.black, - fillStyle: "solid", - opacity: 6, - }) - : null; - - return [ - ...(debugRect ? [debugRect] : []), - ...(title ? [title] : []), - ...chartXLabels(spreadsheet, x, y, groupId, backgroundColor), - ...chartYLabels(spreadsheet, x, y, groupId, backgroundColor), - ...chartLines(spreadsheet, x, y, groupId, backgroundColor), - ]; -}; - -const chartTypeBar = ( - spreadsheet: Spreadsheet, - x: number, - y: number, -): ChartElements => { - const max = Math.max(...spreadsheet.values); - const groupId = randomId(); - const backgroundColor = bgColors[Math.floor(Math.random() * bgColors.length)]; - - const bars = spreadsheet.values.map((value, index) => { - const barHeight = (value / max) * BAR_HEIGHT; - return newElement({ - backgroundColor, - groupIds: [groupId], - ...commonProps, - type: "rectangle", - x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP, - y: y - barHeight - BAR_GAP, - width: BAR_WIDTH, - height: barHeight, - }); - }); - - return [ - ...bars, - ...chartBaseElements( - spreadsheet, - x, - y, - groupId, - backgroundColor, - isDevEnv(), - ), - ]; -}; - -const chartTypeLine = ( - spreadsheet: Spreadsheet, - x: number, - y: number, -): ChartElements => { - const max = Math.max(...spreadsheet.values); - const groupId = randomId(); - const backgroundColor = bgColors[Math.floor(Math.random() * bgColors.length)]; - - let index = 0; - const points = []; - for (const value of spreadsheet.values) { - const cx = index * (BAR_WIDTH + BAR_GAP); - const cy = -(value / max) * BAR_HEIGHT; - points.push([cx, cy]); - index++; - } - - const maxX = Math.max(...points.map((element) => element[0])); - const maxY = Math.max(...points.map((element) => element[1])); - const minX = Math.min(...points.map((element) => element[0])); - const minY = Math.min(...points.map((element) => element[1])); - - const line = newLinearElement({ - backgroundColor, - groupIds: [groupId], - ...commonProps, - type: "line", - x: x + BAR_GAP + BAR_WIDTH / 2, - y: y - BAR_GAP, - height: maxY - minY, - width: maxX - minX, - strokeWidth: 2, - points: points as any, - }); - - const dots = spreadsheet.values.map((value, index) => { - const cx = index * (BAR_WIDTH + BAR_GAP) + BAR_GAP / 2; - const cy = -(value / max) * BAR_HEIGHT + BAR_GAP / 2; - return newElement({ - backgroundColor, - groupIds: [groupId], - ...commonProps, - fillStyle: "solid", - strokeWidth: 2, - type: "ellipse", - x: x + cx + BAR_WIDTH / 2, - y: y + cy - BAR_GAP * 2, - width: BAR_GAP, - height: BAR_GAP, - }); - }); - - const lines = spreadsheet.values.map((value, index) => { - const cx = index * (BAR_WIDTH + BAR_GAP) + BAR_GAP / 2; - const cy = (value / max) * BAR_HEIGHT + BAR_GAP / 2 + BAR_GAP; - return newLinearElement({ - backgroundColor, - groupIds: [groupId], - ...commonProps, - type: "line", - x: x + cx + BAR_WIDTH / 2 + BAR_GAP / 2, - y: y - cy, - height: cy, - strokeStyle: "dotted", - opacity: GRID_OPACITY, - points: [pointFrom(0, 0), pointFrom(0, cy)], - }); - }); - - return [ - ...chartBaseElements( - spreadsheet, - x, - y, - groupId, - backgroundColor, - isDevEnv(), - ), - line, - ...lines, - ...dots, - ]; -}; - -export const renderSpreadsheet = ( - chartType: string, - spreadsheet: Spreadsheet, - x: number, - y: number, -): ChartElements => { - if (chartType === "line") { - return chartTypeLine(spreadsheet, x, y); - } - return chartTypeBar(spreadsheet, x, y); -}; diff --git a/packages/excalidraw/charts/charts.bar.ts b/packages/excalidraw/charts/charts.bar.ts new file mode 100644 index 0000000000..b1a7759606 --- /dev/null +++ b/packages/excalidraw/charts/charts.bar.ts @@ -0,0 +1,103 @@ +import { isDevEnv } from "@excalidraw/common"; + +import { newElement } from "@excalidraw/element"; + +import { commonProps } from "./charts.constants"; +import { + chartBaseElements, + chartXLabels, + createSeriesLegend, + getBackgroundColor, + getCartesianChartLayout, + getChartDimensions, + getColorOffset, + getRotatedTextElementBottom, + getSeriesColors, +} from "./charts.helpers"; + +import type { ChartElements, Spreadsheet } from "./charts.types"; + +export const renderBarChart = ( + spreadsheet: Spreadsheet, + x: number, + y: number, + colorSeed?: number, +): ChartElements => { + const series = spreadsheet.series; + const layout = getCartesianChartLayout("bar", series.length); + const max = Math.max( + 1, + ...series.flatMap((seriesData) => + seriesData.values.map((value) => Math.max(0, value)), + ), + ); + const colorOffset = getColorOffset(colorSeed); + const backgroundColor = getBackgroundColor(colorOffset); + const seriesColors = getSeriesColors(series.length, colorOffset); + const interBarGap = + series.length > 1 + ? Math.max(1, Math.floor(layout.gap / (series.length + 1))) + : 0; + const barWidth = + series.length > 1 + ? Math.max( + 2, + (layout.slotWidth - interBarGap * (series.length - 1)) / + series.length, + ) + : layout.slotWidth; + const clusterWidth = + series.length * barWidth + interBarGap * (series.length - 1); + const clusterOffset = (layout.slotWidth - clusterWidth) / 2; + + const bars = series[0].values.flatMap((_, categoryIndex) => + series.map((seriesData, seriesIndex) => { + const value = Math.max(0, seriesData.values[categoryIndex] ?? 0); + const barHeight = (value / max) * layout.chartHeight; + const barColor = + series.length > 1 ? seriesColors[seriesIndex] : backgroundColor; + return newElement({ + backgroundColor: barColor, + ...commonProps, + type: "rectangle", + fillStyle: series.length > 1 ? "solid" : commonProps.fillStyle, + strokeColor: series.length > 1 ? barColor : commonProps.strokeColor, + x: + x + + categoryIndex * (layout.slotWidth + layout.gap) + + layout.gap + + clusterOffset + + seriesIndex * (barWidth + interBarGap), + y: y - barHeight - layout.gap, + width: barWidth, + height: barHeight, + }); + }), + ); + + const baseElements = chartBaseElements( + spreadsheet, + x, + y, + backgroundColor, + layout, + max, + isDevEnv(), + ); + const xLabels = chartXLabels(spreadsheet, x, y, backgroundColor, layout); + const xLabelsBottomY = Math.max( + y + layout.gap / 2, + ...xLabels.map((label) => getRotatedTextElementBottom(label)), + ); + const { chartWidth } = getChartDimensions(spreadsheet, layout); + const seriesLegend = createSeriesLegend( + series, + seriesColors, + x + chartWidth / 2, + xLabelsBottomY, + y + layout.gap * 5, + backgroundColor, + ); + + return [...baseElements, ...bars, ...seriesLegend]; +}; diff --git a/packages/excalidraw/charts/charts.constants.ts b/packages/excalidraw/charts/charts.constants.ts new file mode 100644 index 0000000000..4cb23da11b --- /dev/null +++ b/packages/excalidraw/charts/charts.constants.ts @@ -0,0 +1,63 @@ +import { + COLOR_PALETTE, + DEFAULT_FONT_FAMILY, + DEFAULT_FONT_SIZE, + VERTICAL_ALIGN, +} from "@excalidraw/common"; + +import type { Radians } from "@excalidraw/math"; + +export const CARTESIAN_BASE_SLOT_WIDTH = 44; +export const CARTESIAN_BAR_SLOT_EXTRA_PER_SERIES = 22; +export const CARTESIAN_BAR_SLOT_EXTRA_MAX = 66; +export const CARTESIAN_LINE_SLOT_WIDTH = 48; +export const CARTESIAN_GAP = 14; +export const CARTESIAN_BAR_HEIGHT = 304; +export const CARTESIAN_LINE_HEIGHT = 320; +export const CARTESIAN_LABEL_ROTATION = 5.87 as Radians; +export const CARTESIAN_LABEL_MIN_WIDTH = 28; +export const CARTESIAN_LABEL_SLOT_PADDING = 4; +export const CARTESIAN_LABEL_AXIS_CLEARANCE = 2; +export const CARTESIAN_LABEL_MAX_WIDTH_BUFFER = 10; +export const CARTESIAN_LABEL_ROTATED_WIDTH_BUFFER = 10; +export const CARTESIAN_LABEL_OVERFLOW_PREFERENCE_BUFFER = 8; + +export const BAR_GAP = 12; +export const BAR_HEIGHT = 256; +export const GRID_OPACITY = 10; + +export const RADAR_GRID_LEVELS = 4; +export const RADAR_LABEL_OFFSET = BAR_GAP * 2; +export const RADAR_PADDING = BAR_GAP * 2; +export const RADAR_SINGLE_SERIES_LOG_SCALE_THRESHOLD = 100; +export const RADAR_AXIS_LABEL_MAX_WIDTH = 140; +export const RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD = 0.35; +export const RADAR_AXIS_LABEL_CLEARANCE = BAR_GAP / 2; +export const RADAR_LEGEND_SWATCH_SIZE = 20; +export const RADAR_LEGEND_ITEM_GAP = BAR_GAP * 2; +export const RADAR_LEGEND_TEXT_GAP = BAR_GAP; + +// Put all common chart element properties here so properties dialog +// shows stable values when selecting chart groups. +export const commonProps = { + fillStyle: "hachure", + fontFamily: DEFAULT_FONT_FAMILY, + fontSize: DEFAULT_FONT_SIZE, + opacity: 100, + roughness: 1, + strokeColor: COLOR_PALETTE.black, + roundness: null, + strokeStyle: "solid", + strokeWidth: 1, + verticalAlign: VERTICAL_ALIGN.MIDDLE, + locked: false, +} as const; + +export type CartesianChartType = "bar" | "line"; + +export type CartesianChartLayout = { + slotWidth: number; + gap: number; + chartHeight: number; + xLabelMaxWidth: number; +}; diff --git a/packages/excalidraw/charts/charts.helpers.ts b/packages/excalidraw/charts/charts.helpers.ts new file mode 100644 index 0000000000..18097b1df9 --- /dev/null +++ b/packages/excalidraw/charts/charts.helpers.ts @@ -0,0 +1,865 @@ +import { pointFrom } from "@excalidraw/math"; + +import { + COLOR_PALETTE, + DEFAULT_CHART_COLOR_INDEX, + FONT_FAMILY, + FONT_SIZES, + ROUNDNESS, + DEFAULT_FONT_SIZE, + getAllColorsSpecificShade, + getFontString, + getLineHeight, + ROUGHNESS, +} from "@excalidraw/common"; + +import { + getApproxMinLineWidth, + measureText, + newElement, + newLinearElement, + newTextElement, + wrapText, +} from "@excalidraw/element"; + +import type { + ChartType, + ExcalidrawTextElement, +} from "@excalidraw/element/types"; +import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types"; + +import { + BAR_GAP, + CARTESIAN_BAR_HEIGHT, + CARTESIAN_BASE_SLOT_WIDTH, + CARTESIAN_BAR_SLOT_EXTRA_MAX, + CARTESIAN_BAR_SLOT_EXTRA_PER_SERIES, + CARTESIAN_GAP, + CARTESIAN_LABEL_AXIS_CLEARANCE, + CARTESIAN_LABEL_MAX_WIDTH_BUFFER, + CARTESIAN_LABEL_MIN_WIDTH, + CARTESIAN_LABEL_OVERFLOW_PREFERENCE_BUFFER, + CARTESIAN_LABEL_ROTATED_WIDTH_BUFFER, + CARTESIAN_LABEL_ROTATION, + CARTESIAN_LABEL_SLOT_PADDING, + CARTESIAN_LINE_HEIGHT, + CARTESIAN_LINE_SLOT_WIDTH, + GRID_OPACITY, + RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD, + RADAR_AXIS_LABEL_CLEARANCE, + RADAR_AXIS_LABEL_MAX_WIDTH, + RADAR_LABEL_OFFSET, + RADAR_LEGEND_ITEM_GAP, + RADAR_LEGEND_SWATCH_SIZE, + RADAR_LEGEND_TEXT_GAP, + RADAR_PADDING, + RADAR_SINGLE_SERIES_LOG_SCALE_THRESHOLD, + BAR_HEIGHT, + commonProps, + type CartesianChartLayout, + type CartesianChartType, +} from "./charts.constants"; + +import type { + ChartElements, + Spreadsheet, + SpreadsheetSeries, +} from "./charts.types"; + +const bgColors = getAllColorsSpecificShade(DEFAULT_CHART_COLOR_INDEX); + +const getSpreadsheetDimensionCount = (spreadsheet: Spreadsheet) => + spreadsheet.labels?.length ?? spreadsheet.series[0]?.values.length ?? 0; + +export const isSpreadsheetValidForChartType = ( + spreadsheet: Spreadsheet | null, + chartType: ChartType, +) => { + if (!spreadsheet) { + return false; + } + + const dimensionCount = getSpreadsheetDimensionCount(spreadsheet); + if (dimensionCount < 2) { + return false; + } + + if (chartType === "radar") { + return dimensionCount >= 3; + } + + return true; +}; + +const getSeriesAwareSlotWidth = ( + baseSlotWidth: number, + seriesCount: number, +) => { + const extraSlotWidth = + seriesCount <= 1 + ? 0 + : Math.min( + CARTESIAN_BAR_SLOT_EXTRA_MAX, + (seriesCount - 1) * CARTESIAN_BAR_SLOT_EXTRA_PER_SERIES, + ); + return baseSlotWidth + extraSlotWidth; +}; + +export const getCartesianChartLayout = ( + chartType: CartesianChartType, + seriesCount: number, +): CartesianChartLayout => { + if (chartType === "line") { + const slotWidth = getSeriesAwareSlotWidth( + CARTESIAN_LINE_SLOT_WIDTH, + seriesCount, + ); + return { + slotWidth, + gap: CARTESIAN_GAP, + chartHeight: CARTESIAN_LINE_HEIGHT, + xLabelMaxWidth: + slotWidth + CARTESIAN_GAP * 3 + CARTESIAN_LABEL_MAX_WIDTH_BUFFER, + }; + } + + const slotWidth = getSeriesAwareSlotWidth( + CARTESIAN_BASE_SLOT_WIDTH, + seriesCount, + ); + return { + slotWidth, + gap: CARTESIAN_GAP, + chartHeight: CARTESIAN_BAR_HEIGHT, + xLabelMaxWidth: + slotWidth + CARTESIAN_GAP * 3 + CARTESIAN_LABEL_MAX_WIDTH_BUFFER, + }; +}; + +export const getChartDimensions = ( + spreadsheet: Spreadsheet, + layout: CartesianChartLayout, +) => { + const chartWidth = + (layout.slotWidth + layout.gap) * spreadsheet.series[0].values.length + + layout.gap; + const chartHeight = layout.chartHeight + layout.gap * 2; + return { chartWidth, chartHeight }; +}; + +export const getRadarDimensions = () => { + const chartWidth = BAR_HEIGHT + RADAR_PADDING * 2; + const chartHeight = BAR_HEIGHT + RADAR_PADDING * 2; + return { chartWidth, chartHeight }; +}; + +const getCircularDistance = ( + firstIndex: number, + secondIndex: number, + paletteSize: number, +) => { + const absoluteDistance = Math.abs(firstIndex - secondIndex); + return Math.min(absoluteDistance, paletteSize - absoluteDistance); +}; + +export const getSeriesColors = ( + seriesCount: number, + colorOffset: number, +): readonly string[] => { + if (seriesCount <= 0 || bgColors.length === 0) { + return []; + } + + const paletteSize = bgColors.length; + const startIndex = ((colorOffset % paletteSize) + paletteSize) % paletteSize; + const selectedIndices = [startIndex]; + const maxUniqueColors = Math.min(seriesCount, paletteSize); + const availableIndices = new Set( + Array.from({ length: paletteSize }, (_, index) => index).filter( + (index) => index !== startIndex, + ), + ); + + while (selectedIndices.length < maxUniqueColors) { + let bestIndex = -1; + let bestMinDistance = -1; + let bestAverageDistance = -1; + + for (const candidateIndex of availableIndices) { + const distances = selectedIndices.map((selectedIndex) => + getCircularDistance(candidateIndex, selectedIndex, paletteSize), + ); + const minDistance = Math.min(...distances); + const averageDistance = + distances.reduce((total, distance) => total + distance, 0) / + distances.length; + + if ( + minDistance > bestMinDistance || + (minDistance === bestMinDistance && + averageDistance > bestAverageDistance) + ) { + bestIndex = candidateIndex; + bestMinDistance = minDistance; + bestAverageDistance = averageDistance; + } + } + + selectedIndices.push(bestIndex); + availableIndices.delete(bestIndex); + } + + return Array.from( + { length: seriesCount }, + (_, index) => bgColors[selectedIndices[index % selectedIndices.length]], + ); +}; + +export const getColorOffset = (colorSeed?: number) => { + if (bgColors.length === 0) { + return 0; + } + + if (typeof colorSeed !== "number" || !Number.isFinite(colorSeed)) { + return Math.floor(Math.random() * bgColors.length); + } + + const seedText = colorSeed.toString(); + let hash = 0; + for (let index = 0; index < seedText.length; index++) { + hash = (hash * 31 + seedText.charCodeAt(index)) | 0; + } + return Math.abs(hash) % bgColors.length; +}; + +export const getBackgroundColor = (colorOffset: number) => + bgColors[colorOffset]; + +export const getRadarValueScale = ( + series: SpreadsheetSeries[], + _labelsLength: number, +) => { + const allValues = series.flatMap((s) => + s.values.map((value) => Math.max(0, value)), + ); + const positiveValues = allValues.filter((value) => value > 0); + const max = Math.max(1, ...allValues); + const minPositive = + positiveValues.length > 0 ? Math.min(...positiveValues) : 1; + const useLogScale = + series.length === 1 && + minPositive > 0 && + max / minPositive >= RADAR_SINGLE_SERIES_LOG_SCALE_THRESHOLD; + + return { + renderSteps: false, + normalize: (value: number, _axisIndex: number) => { + const safeValue = Math.max(0, value); + return useLogScale + ? Math.log10(safeValue + 1) / Math.log10(max + 1) + : safeValue / max; + }, + }; +}; + +const shouldWrapRadarText = (text: string) => /\s/.test(text.trim()); + +export const getRadarDisplayText = ( + text: string, + fontString: ReturnType, + maxWidth: number, +) => { + return shouldWrapRadarText(text) + ? wrapText(text, fontString, maxWidth) + : text; +}; + +export const createRadarAxisLabels = ( + labels: readonly string[], + angles: readonly number[], + centerX: number, + centerY: number, + radius: number, + backgroundColor: string, +): { + axisLabels: ChartElements; + axisLabelTopY: number; + axisLabelBottomY: number; +} => { + const fontFamily = FONT_FAMILY.Excalifont; + const fontSize = FONT_SIZES.sm; + const lineHeight = getLineHeight(fontFamily); + const fontString = getFontString({ fontFamily, fontSize }); + const baseLabelWidth = Math.min( + RADAR_AXIS_LABEL_MAX_WIDTH, + radius * (labels.length > 8 ? 0.56 : 0.72), + ); + const minLabelWidth = getApproxMinLineWidth(fontString, lineHeight); + + const axisLabels = labels.map((label, index) => { + const angle = angles[index]; + const longestWordWidth = Math.max( + 0, + ...label + .trim() + .split(/\s+/) + .filter(Boolean) + .map((word) => measureText(word, fontString, lineHeight).width), + ); + const maxLabelWidth = Math.max( + minLabelWidth, + baseLabelWidth, + longestWordWidth, + ); + const displayLabel = getRadarDisplayText(label, fontString, maxLabelWidth); + const metrics = measureText(displayLabel, fontString, lineHeight); + const cos = Math.cos(angle); + const sin = Math.sin(angle); + + const textAlign: "left" | "center" | "right" = + cos > RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD + ? "left" + : cos < -RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD + ? "right" + : "center"; + + // Keep labels outside the radar ring by projecting text extents + // onto the axis direction. + const centerAlignedXExtent = textAlign === "center" ? metrics.width / 2 : 0; + const projectedExtent = + Math.abs(cos) * centerAlignedXExtent + + Math.abs(sin) * (metrics.height / 2); + const radialOffset = + RADAR_LABEL_OFFSET + projectedExtent + RADAR_AXIS_LABEL_CLEARANCE; + const anchorX = centerX + cos * (radius + radialOffset); + const anchorY = centerY + sin * (radius + radialOffset); + + const yNudge = + sin > RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD + ? BAR_GAP / 3 + : sin < -RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD + ? -BAR_GAP / 3 + : 0; + + return newTextElement({ + backgroundColor, + ...commonProps, + text: displayLabel, + originalText: label, + x: anchorX, + y: anchorY + yNudge, + fontFamily, + fontSize, + lineHeight, + textAlign, + verticalAlign: "middle", + }); + }); + + const axisLabelTopY = Math.min(...axisLabels.map((axisLabel) => axisLabel.y)); + const axisLabelBottomY = Math.max( + ...axisLabels.map((axisLabel) => axisLabel.y + axisLabel.height), + ); + return { axisLabels, axisLabelTopY, axisLabelBottomY }; +}; + +export const createSeriesLegend = ( + series: SpreadsheetSeries[], + seriesColors: readonly string[], + centerX: number, + minLegendTopY: number, + fallbackLegendY: number, + backgroundColor: string, +): ChartElements => { + if (series.length <= 1) { + return []; + } + + const fontFamily = FONT_FAMILY["Lilita One"]; + const fontSize = FONT_SIZES.lg; + const lineHeight = getLineHeight(fontFamily); + const fontString = getFontString({ fontFamily, fontSize }); + const legendItems = series.map((seriesItem, index) => { + const label = seriesItem.title?.trim() || `Series ${index + 1}`; + const displayLabel = getRadarDisplayText(label, fontString, BAR_HEIGHT); + const metrics = measureText(displayLabel, fontString, lineHeight); + const itemWidth = + RADAR_LEGEND_SWATCH_SIZE + RADAR_LEGEND_TEXT_GAP + metrics.width; + return { + label, + displayLabel, + color: seriesColors[index], + width: itemWidth, + height: metrics.height, + }; + }); + const maxLegendHalfHeight = Math.max( + RADAR_LEGEND_SWATCH_SIZE / 2, + ...legendItems.map((item) => item.height / 2), + ); + const legendY = Math.max( + fallbackLegendY, + minLegendTopY + maxLegendHalfHeight + RADAR_LABEL_OFFSET, + ); + + const pillPaddingX = RADAR_LEGEND_ITEM_GAP; + const pillPaddingY = RADAR_LEGEND_SWATCH_SIZE * 0.6; + const totalLegendWidth = + legendItems.reduce((total, item) => total + item.width, 0) + + RADAR_LEGEND_ITEM_GAP * Math.max(0, legendItems.length - 1); + const pillWidth = totalLegendWidth + pillPaddingX * 2; + const pillHeight = maxLegendHalfHeight * 2 + pillPaddingY * 2; + + const legendElements: NonDeletedExcalidrawElement[] = []; + + // rounded pill background + legendElements.push( + newElement({ + ...commonProps, + backgroundColor: "transparent", + type: "rectangle", + fillStyle: "solid", + strokeColor: COLOR_PALETTE.black, + x: centerX - pillWidth / 2, + y: legendY - pillHeight / 2, + width: pillWidth, + height: pillHeight, + roughness: ROUGHNESS.architect, + roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS }, + }), + ); + + let cursorX = centerX - totalLegendWidth / 2; + + legendItems.forEach((item) => { + // solid filled swatch + legendElements.push( + newElement({ + ...commonProps, + backgroundColor: item.color, + type: "rectangle", + x: cursorX, + y: legendY - RADAR_LEGEND_SWATCH_SIZE / 2, + width: RADAR_LEGEND_SWATCH_SIZE, + height: RADAR_LEGEND_SWATCH_SIZE, + fillStyle: "solid", + strokeColor: item.color, + roughness: ROUGHNESS.architect, + roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS }, + }), + ); + + // label in default (black) color + legendElements.push( + newTextElement({ + ...commonProps, + text: item.displayLabel, + originalText: item.label, + autoResize: false, + x: cursorX + RADAR_LEGEND_SWATCH_SIZE + RADAR_LEGEND_TEXT_GAP, + y: legendY, + fontFamily, + fontSize, + lineHeight, + textAlign: "left", + verticalAlign: "middle", + }), + ); + + cursorX += item.width + RADAR_LEGEND_ITEM_GAP; + }); + + return legendElements; +}; + +const ellipsifyTextToWidth = ( + text: string, + maxWidth: number, + fontString: ReturnType, + lineHeight: ExcalidrawTextElement["lineHeight"], +) => { + if (measureText(text, fontString, lineHeight).width <= maxWidth) { + return text; + } + + let end = text.length; + while (end > 1) { + const candidate = `${text.slice(0, end)}...`; + if (measureText(candidate, fontString, lineHeight).width <= maxWidth) { + return candidate; + } + end--; + } + + return text[0] ? `${text[0]}...` : text; +}; + +const wrapOrEllipsifyTextToWidth = ( + text: string, + maxWidth: number, + fontString: ReturnType, + lineHeight: ExcalidrawTextElement["lineHeight"], +) => { + if (measureText(text, fontString, lineHeight).width <= maxWidth) { + return { wrapped: false, text }; + } + + const words = text.trim().split(/\s+/).filter(Boolean); + if (words.length > 1) { + const hasLongWord = words.some((word) => { + return measureText(word, fontString, lineHeight).width > maxWidth; + }); + if ( + !hasLongWord && + maxWidth >= getApproxMinLineWidth(fontString, lineHeight) + ) { + return { wrapped: true, text: wrapText(text, fontString, maxWidth) }; + } + } + + return { + wrapped: false, + text: ellipsifyTextToWidth(text, maxWidth, fontString, lineHeight), + }; +}; + +const getRotatedBoundingBox = ( + width: number, + height: number, + angle: number, +) => { + const cos = Math.abs(Math.cos(angle)); + const sin = Math.abs(Math.sin(angle)); + return { + width: width * cos + height * sin, + height: width * sin + height * cos, + }; +}; + +type CartesianAxisLabelSpec = { + originalText: string; + text: string; + wrapped: boolean; + metrics: ReturnType; + rotatedWidth: number; + rotatedHeight: number; +}; + +const isEllipsifiedLabel = (text: string) => text.includes("..."); + +const getCartesianAxisLabelSpec = ( + label: string, + maxLabelWidth: number, + maxRotatedWidth: number, + fontString: ReturnType, + lineHeight: ExcalidrawTextElement["lineHeight"], +): CartesianAxisLabelSpec => { + const minWidth = Math.max( + CARTESIAN_LABEL_MIN_WIDTH, + Math.ceil(getApproxMinLineWidth(fontString, lineHeight)), + ); + const maxWidth = Math.max(minWidth, Math.floor(maxLabelWidth)); + const candidateWidths: number[] = []; + for (let width = maxWidth; width >= minWidth; width -= 4) { + candidateWidths.push(width); + } + if (candidateWidths[candidateWidths.length - 1] !== minWidth) { + candidateWidths.push(minWidth); + } + + const getRank = (spec: CartesianAxisLabelSpec) => { + const ellipsified = isEllipsifiedLabel(spec.text); + const visibleChars = spec.text + .replace(/\.\.\./g, "") + .replace(/\n/g, "").length; + const lineCount = spec.text.split("\n").length; + return { + ellipsified, + visibleChars, + lineCount, + }; + }; + + const shouldPrefer = ( + candidate: CartesianAxisLabelSpec, + current: CartesianAxisLabelSpec, + ) => { + const candidateRank = getRank(candidate); + const currentRank = getRank(current); + if (candidateRank.ellipsified !== currentRank.ellipsified) { + return !candidateRank.ellipsified; + } + if (candidateRank.visibleChars !== currentRank.visibleChars) { + return candidateRank.visibleChars > currentRank.visibleChars; + } + if (candidateRank.lineCount !== currentRank.lineCount) { + return candidateRank.lineCount < currentRank.lineCount; + } + return candidate.rotatedHeight < current.rotatedHeight; + }; + + let bestFit: CartesianAxisLabelSpec | null = null; + let bestOverflowAny: { + overflow: number; + spec: CartesianAxisLabelSpec; + } | null = null; + let bestOverflowNonEllipsified: { + overflow: number; + spec: CartesianAxisLabelSpec; + } | null = null; + + for (const width of candidateWidths) { + const { wrapped, text } = wrapOrEllipsifyTextToWidth( + label, + width, + fontString, + lineHeight, + ); + const metrics = measureText(text, fontString, lineHeight); + const rotated = getRotatedBoundingBox( + metrics.width, + metrics.height, + CARTESIAN_LABEL_ROTATION, + ); + const spec = { + originalText: label, + text, + metrics, + rotatedWidth: rotated.width, + rotatedHeight: rotated.height, + wrapped, + }; + const overflow = rotated.width - maxRotatedWidth; + if (overflow <= 0) { + if (!bestFit || shouldPrefer(spec, bestFit)) { + bestFit = spec; + } + continue; + } + if ( + !bestOverflowAny || + overflow < bestOverflowAny.overflow || + (overflow === bestOverflowAny.overflow && + shouldPrefer(spec, bestOverflowAny.spec)) + ) { + bestOverflowAny = { overflow, spec }; + } + if ( + !isEllipsifiedLabel(spec.text) && + (!bestOverflowNonEllipsified || + overflow < bestOverflowNonEllipsified.overflow || + (overflow === bestOverflowNonEllipsified.overflow && + shouldPrefer(spec, bestOverflowNonEllipsified.spec))) + ) { + bestOverflowNonEllipsified = { overflow, spec }; + } + } + + if (bestFit) { + return bestFit; + } + + if ( + bestOverflowNonEllipsified && + bestOverflowAny && + bestOverflowNonEllipsified.overflow <= + bestOverflowAny.overflow + CARTESIAN_LABEL_OVERFLOW_PREFERENCE_BUFFER + ) { + return bestOverflowNonEllipsified.spec; + } + + return bestOverflowAny!.spec; +}; + +export const getRotatedTextElementBottom = ( + element: NonDeletedExcalidrawElement, +) => { + if (element.type !== "text") { + return element.y + element.height; + } + const rotated = getRotatedBoundingBox( + element.width, + element.height, + element.angle, + ); + return element.y + element.height / 2 + rotated.height / 2; +}; + +export const chartXLabels = ( + spreadsheet: Spreadsheet, + x: number, + y: number, + backgroundColor: string, + layout: CartesianChartLayout, +): ChartElements => { + const fontFamily = commonProps.fontFamily; + const fontSize = FONT_SIZES.sm; + const lineHeight = getLineHeight(fontFamily); + const fontString = getFontString({ fontFamily, fontSize }); + const maxRotatedWidth = Math.max( + 1, + layout.slotWidth + + layout.gap - + CARTESIAN_LABEL_SLOT_PADDING * 2 + + CARTESIAN_LABEL_ROTATED_WIDTH_BUFFER, + ); + const axisY = y; + + return ( + spreadsheet.labels?.map((label, index) => { + const labelSpec = getCartesianAxisLabelSpec( + label, + layout.xLabelMaxWidth, + maxRotatedWidth, + fontString, + lineHeight, + ); + const centerX = + x + + index * (layout.slotWidth + layout.gap) + + layout.gap + + layout.slotWidth / 2; + const labelY = + axisY + + CARTESIAN_LABEL_AXIS_CLEARANCE + + (labelSpec.rotatedHeight - labelSpec.metrics.height) / 2; + + return newTextElement({ + backgroundColor, + ...commonProps, + text: labelSpec.text, + originalText: labelSpec.wrapped ? label : labelSpec.text, + autoResize: !labelSpec.wrapped, + x: centerX, + y: labelY, + angle: CARTESIAN_LABEL_ROTATION, + fontSize, + lineHeight, + textAlign: "center", + verticalAlign: "top", + }); + }) || [] + ); +}; + +const chartYLabels = ( + spreadsheet: Spreadsheet, + x: number, + y: number, + backgroundColor: string, + layout: CartesianChartLayout, + maxValue = Math.max(...spreadsheet.series[0].values), +): ChartElements => { + const minYLabel = newTextElement({ + backgroundColor, + ...commonProps, + x: x - layout.gap, + y: y - layout.gap, + text: "0", + textAlign: "right", + }); + + const maxYLabel = newTextElement({ + backgroundColor, + ...commonProps, + x: x - layout.gap, + y: y - layout.chartHeight - minYLabel.height / 2, + text: maxValue.toLocaleString(), + textAlign: "right", + }); + + return [minYLabel, maxYLabel]; +}; + +const chartLines = ( + spreadsheet: Spreadsheet, + x: number, + y: number, + backgroundColor: string, + layout: CartesianChartLayout, +): ChartElements => { + const { chartWidth, chartHeight } = getChartDimensions(spreadsheet, layout); + const xLine = newLinearElement({ + backgroundColor, + ...commonProps, + type: "line", + x, + y, + width: chartWidth, + points: [pointFrom(0, 0), pointFrom(chartWidth, 0)], + }); + + const yLine = newLinearElement({ + backgroundColor, + ...commonProps, + type: "line", + x, + y, + height: chartHeight, + points: [pointFrom(0, 0), pointFrom(0, -chartHeight)], + }); + + const maxLine = newLinearElement({ + backgroundColor, + ...commonProps, + type: "line", + x, + y: y - layout.chartHeight - layout.gap, + strokeStyle: "dotted", + width: chartWidth, + opacity: GRID_OPACITY, + points: [pointFrom(0, 0), pointFrom(chartWidth, 0)], + }); + + return [xLine, yLine, maxLine]; +}; + +// For the maths behind it https://excalidraw.com/#json=6320864370884608,O_5xfD-Agh32tytHpRJx1g +export const chartBaseElements = ( + spreadsheet: Spreadsheet, + x: number, + y: number, + backgroundColor: string, + layout: CartesianChartLayout, + maxValue = Math.max(...spreadsheet.series[0].values), + debug?: boolean, +): ChartElements => { + const { chartWidth, chartHeight } = getChartDimensions(spreadsheet, layout); + + const title = spreadsheet.title + ? newTextElement({ + backgroundColor, + ...commonProps, + text: spreadsheet.title, + x: x + chartWidth / 2, + y: y - layout.chartHeight - layout.gap * 2 - DEFAULT_FONT_SIZE, + roundness: null, + textAlign: "center", + fontSize: FONT_SIZES.xl, + fontFamily: FONT_FAMILY["Lilita One"], + }) + : null; + + const debugRect = debug + ? newElement({ + backgroundColor, + ...commonProps, + type: "rectangle", + x, + y: y - chartHeight, + width: chartWidth, + height: chartHeight, + strokeColor: COLOR_PALETTE.black, + fillStyle: "solid", + opacity: 6, + }) + : null; + + return [ + ...(debugRect ? [debugRect] : []), + ...(title ? [title] : []), + ...chartXLabels(spreadsheet, x, y, backgroundColor, layout), + ...chartYLabels(spreadsheet, x, y, backgroundColor, layout, maxValue), + ...chartLines(spreadsheet, x, y, backgroundColor, layout), + ]; +}; diff --git a/packages/excalidraw/charts/charts.line.ts b/packages/excalidraw/charts/charts.line.ts new file mode 100644 index 0000000000..b08774d8b3 --- /dev/null +++ b/packages/excalidraw/charts/charts.line.ts @@ -0,0 +1,130 @@ +import { pointFrom } from "@excalidraw/math"; + +import { isDevEnv } from "@excalidraw/common"; + +import { newElement, newLinearElement } from "@excalidraw/element"; + +import type { LocalPoint } from "@excalidraw/math"; + +import { GRID_OPACITY, commonProps } from "./charts.constants"; +import { + chartBaseElements, + chartXLabels, + createSeriesLegend, + getBackgroundColor, + getCartesianChartLayout, + getChartDimensions, + getColorOffset, + getRotatedTextElementBottom, + getSeriesColors, +} from "./charts.helpers"; + +import type { ChartElements, Spreadsheet } from "./charts.types"; + +export const renderLineChart = ( + spreadsheet: Spreadsheet, + x: number, + y: number, + colorSeed?: number, +): ChartElements => { + const series = spreadsheet.series; + const layout = getCartesianChartLayout("line", series.length); + const max = Math.max(1, ...series.flatMap((seriesData) => seriesData.values)); + const colorOffset = getColorOffset(colorSeed); + const backgroundColor = getBackgroundColor(colorOffset); + const seriesColors = getSeriesColors(series.length, colorOffset); + + const lines = series.map((seriesData, seriesIndex) => { + const points = seriesData.values.map((value, valueIndex) => + pointFrom( + valueIndex * (layout.slotWidth + layout.gap), + -(value / max) * layout.chartHeight, + ), + ); + + const maxX = Math.max(...points.map((point) => point[0])); + const maxY = Math.max(...points.map((point) => point[1])); + const minX = Math.min(...points.map((point) => point[0])); + const minY = Math.min(...points.map((point) => point[1])); + + return newLinearElement({ + backgroundColor: "transparent", + ...commonProps, + type: "line", + x: x + layout.gap + layout.slotWidth / 2, + y: y - layout.gap, + height: maxY - minY, + width: maxX - minX, + strokeColor: seriesColors[seriesIndex], + strokeWidth: 2, + points, + }); + }); + + const dots = series.flatMap((seriesData, seriesIndex) => + seriesData.values.map((value, valueIndex) => { + const cx = valueIndex * (layout.slotWidth + layout.gap) + layout.gap / 2; + const cy = -(value / max) * layout.chartHeight + layout.gap / 2; + return newElement({ + backgroundColor: seriesColors[seriesIndex], + ...commonProps, + fillStyle: "solid", + strokeColor: seriesColors[seriesIndex], + strokeWidth: 2, + type: "ellipse", + x: x + cx + layout.slotWidth / 2, + y: y + cy - layout.gap * 2, + width: layout.gap, + height: layout.gap, + }); + }), + ); + + const guideValues = series[0].values.map((_, valueIndex) => + Math.max( + 0, + ...series.map((seriesData) => seriesData.values[valueIndex] ?? 0), + ), + ); + const guides = guideValues.map((value, valueIndex) => { + const cx = valueIndex * (layout.slotWidth + layout.gap) + layout.gap / 2; + const cy = (value / max) * layout.chartHeight + layout.gap / 2 + layout.gap; + return newLinearElement({ + backgroundColor, + ...commonProps, + type: "line", + x: x + cx + layout.slotWidth / 2 + layout.gap / 2, + y: y - cy, + height: cy, + strokeStyle: "dotted", + opacity: GRID_OPACITY, + points: [pointFrom(0, 0), pointFrom(0, cy)], + }); + }); + + const baseElements = chartBaseElements( + spreadsheet, + x, + y, + backgroundColor, + layout, + max, + isDevEnv(), + ); + const xLabels = chartXLabels(spreadsheet, x, y, backgroundColor, layout); + const xLabelsBottomY = Math.max( + y + layout.gap / 2, + ...xLabels.map((label) => getRotatedTextElementBottom(label)), + ); + const { chartWidth } = getChartDimensions(spreadsheet, layout); + const seriesLegend = createSeriesLegend( + series, + seriesColors, + x + chartWidth / 2, + xLabelsBottomY, + y + layout.gap * 5, + backgroundColor, + ); + + return [...baseElements, ...lines, ...guides, ...dots, ...seriesLegend]; +}; diff --git a/packages/excalidraw/charts/charts.parse.ts b/packages/excalidraw/charts/charts.parse.ts new file mode 100644 index 0000000000..f6d71fdf69 --- /dev/null +++ b/packages/excalidraw/charts/charts.parse.ts @@ -0,0 +1,174 @@ +import { type ParseSpreadsheetResult } from "./charts.types"; + +/** + * @private exported for testing + */ +export const tryParseNumber = (s: string): number | null => { + const match = + /^([-+]?)[$\u20AC\u00A3\u00A5\u20A9]?([-+]?)([\d.,]+)[%]?$/.exec(s); + if (!match) { + return null; + } + return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, "")); +}; + +const isNumericColumn = (lines: string[][], columnIndex: number) => + lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null); + +/** + * @private exported for testing + */ +export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => { + const numCols = cells[0].length; + + if (numCols > 2) { + const hasHeader = cells[0].every((cell) => tryParseNumber(cell) === null); + const rows = hasHeader ? cells.slice(1) : cells; + + if (rows.length < 1) { + return { ok: false, reason: "No data rows" }; + } + + const invalidNumericColumn = rows.some((row) => + row.slice(1).some((value) => tryParseNumber(value) === null), + ); + if (invalidNumericColumn) { + return { ok: false, reason: "Value is not numeric" }; + } + + // When there are more value columns than data rows, the data is in + // "wide" format — transpose so columns become labels (dimensions) + // and rows become series. This enables e.g. radar charts for wide data. + const numValueCols = numCols - 1; + if (numValueCols > rows.length) { + const labels = hasHeader ? cells[0].slice(1).map((h) => h.trim()) : null; + const series = rows.map((row) => ({ + title: row[0]?.trim() || null, + values: row.slice(1).map((v) => tryParseNumber(v)!), + })); + const title = + series.length === 1 + ? series[0].title + : hasHeader + ? cells[0][0].trim() || null + : null; + return { + ok: true, + data: { title, labels, series }, + }; + } + + const series = cells[0].slice(1).map((seriesTitle, index) => { + const valueColumnIndex = index + 1; + const fallbackTitle = `Series ${valueColumnIndex}`; + return { + title: hasHeader ? seriesTitle.trim() || fallbackTitle : fallbackTitle, + values: rows.map((row) => tryParseNumber(row[valueColumnIndex])!), + }; + }); + + return { + ok: true, + data: { + title: hasHeader ? cells[0][0].trim() || null : null, + labels: rows.map((row) => row[0]), + series, + }, + }; + } + + if (numCols === 1) { + if (!isNumericColumn(cells, 0)) { + return { ok: false, reason: "Value is not numeric" }; + } + + const hasHeader = tryParseNumber(cells[0][0]) === null; + const title = hasHeader ? cells[0][0] : null; + const values = (hasHeader ? cells.slice(1) : cells).map((line) => + tryParseNumber(line[0]), + ); + + if (values.length < 2) { + return { ok: false, reason: "Less than two rows" }; + } + + return { + ok: true, + data: { + title, + labels: null, + series: [{ title, values: values as number[] }], + }, + }; + } + + const hasHeader = tryParseNumber(cells[0][1]) === null; + const rows = hasHeader ? cells.slice(1) : cells; + + if (rows.length < 2) { + return { ok: false, reason: "Less than 2 rows" }; + } + + const invalidNumericColumn = rows.some( + (row) => tryParseNumber(row[1]) === null, + ); + if (invalidNumericColumn) { + return { ok: false, reason: "Value is not numeric" }; + } + + const title = hasHeader ? cells[0][1] : null; + + return { + ok: true, + data: { + title, + labels: rows.map((row) => row[0]), + series: [{ title, values: rows.map((row) => tryParseNumber(row[1])!) }], + }, + }; +}; + +export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => { + // Copy/paste from excel, spreadsheets, TSV, CSV, semicolon-separated. + const parseDelimitedLines = (delimiter: "\t" | "," | ";") => + text + .replace(/\r\n?/g, "\n") + .split("\n") + .filter((line) => line.trim().length > 0) + .map((line) => line.split(delimiter).map((cell) => cell.trim())); + + // Score each delimiter: prefer consistent column counts with the most columns. + // A delimiter that produces all single-column rows likely isn't the right one. + const candidates = (["\t", ",", ";"] as const).map((delimiter) => { + const parsed = parseDelimitedLines(delimiter); + const numCols = parsed[0]?.length ?? 0; + const isConsistent = + parsed.length > 0 && parsed.every((line) => line.length === numCols); + return { delimiter, parsed, numCols, isConsistent }; + }); + + // Prefer: consistent + most columns. Among ties, tab > comma > semicolon + // (the array order already encodes this priority). + const best = + candidates.find((c) => c.isConsistent && c.numCols > 1) ?? + candidates.find((c) => c.isConsistent) ?? + candidates[0]; + + const lines = best.parsed; + + if (lines.length === 0) { + return { ok: false, reason: "No values" }; + } + + const numColsFirstLine = lines[0].length; + const isSpreadsheet = lines.every((line) => line.length === numColsFirstLine); + + if (!isSpreadsheet) { + return { + ok: false, + reason: "All rows don't have same number of columns", + }; + } + + return tryParseCells(lines); +}; diff --git a/packages/excalidraw/charts/charts.radar.ts b/packages/excalidraw/charts/charts.radar.ts new file mode 100644 index 0000000000..6606a4af60 --- /dev/null +++ b/packages/excalidraw/charts/charts.radar.ts @@ -0,0 +1,199 @@ +import { pointFrom } from "@excalidraw/math"; + +import { + FONT_FAMILY, + FONT_SIZES, + getFontString, + getLineHeight, + ROUGHNESS, +} from "@excalidraw/common"; + +import { + measureText, + newLinearElement, + newTextElement, +} from "@excalidraw/element"; + +import type { LocalPoint } from "@excalidraw/math"; + +import { + BAR_GAP, + BAR_HEIGHT, + GRID_OPACITY, + RADAR_GRID_LEVELS, + RADAR_LABEL_OFFSET, + commonProps, +} from "./charts.constants"; +import { + createRadarAxisLabels, + createSeriesLegend, + getBackgroundColor, + getColorOffset, + getRadarDimensions, + getRadarDisplayText, + getRadarValueScale, + getSeriesColors, + isSpreadsheetValidForChartType, +} from "./charts.helpers"; + +import type { ChartElements, Spreadsheet } from "./charts.types"; + +export const renderRadarChart = ( + spreadsheet: Spreadsheet, + x: number, + y: number, + colorSeed?: number, +): ChartElements | null => { + if (!isSpreadsheetValidForChartType(spreadsheet, "radar")) { + return null; + } + + const labels = + spreadsheet.labels ?? + spreadsheet.series[0].values.map((_, index) => `Value ${index + 1}`); + + const series = spreadsheet.series; + const { normalize, renderSteps } = getRadarValueScale(series, labels.length); + const colorOffset = getColorOffset(colorSeed); + const backgroundColor = getBackgroundColor(colorOffset); + const seriesColors = getSeriesColors(series.length, colorOffset); + const { chartWidth, chartHeight } = getRadarDimensions(); + const centerX = x + chartWidth / 2; + const centerY = y - chartHeight / 2; + const radius = BAR_HEIGHT / 2; + const angles = labels.map( + (_, index) => -Math.PI / 2 + (Math.PI * 2 * index) / labels.length, + ); + + const { axisLabels, axisLabelTopY, axisLabelBottomY } = createRadarAxisLabels( + labels, + angles, + centerX, + centerY, + radius, + backgroundColor, + ); + + const titleFontFamily = FONT_FAMILY["Lilita One"]; + const titleFontSize = FONT_SIZES.xl; + const titleLineHeight = getLineHeight(titleFontFamily); + const titleFontString = getFontString({ + fontFamily: titleFontFamily, + fontSize: titleFontSize, + }); + const titleText = spreadsheet.title + ? getRadarDisplayText( + spreadsheet.title, + titleFontString, + chartWidth + RADAR_LABEL_OFFSET * 2, + ) + : null; + const titleTextMetrics = titleText + ? measureText(titleText, titleFontString, titleLineHeight) + : null; + const title = titleText + ? newTextElement({ + backgroundColor, + ...commonProps, + text: titleText, + originalText: spreadsheet.title ?? titleText, + x: x + chartWidth / 2, + y: axisLabelTopY - RADAR_LABEL_OFFSET - titleTextMetrics!.height / 2, + fontFamily: titleFontFamily, + fontSize: titleFontSize, + lineHeight: titleLineHeight, + textAlign: "center", + }) + : null; + + const radarGridLines = renderSteps + ? Array.from({ length: RADAR_GRID_LEVELS }, (_, levelIndex) => { + const levelRatio = (levelIndex + 1) / RADAR_GRID_LEVELS; + const levelRadius = radius * levelRatio; + const points = angles.map((angle) => + pointFrom( + Math.cos(angle) * levelRadius, + Math.sin(angle) * levelRadius, + ), + ); + points.push(pointFrom(points[0][0], points[0][1])); + + return newLinearElement({ + backgroundColor: "transparent", + ...commonProps, + type: "line", + x: centerX, + y: centerY, + width: levelRadius * 2, + height: levelRadius * 2, + strokeStyle: "solid", + roughness: ROUGHNESS.architect, + opacity: GRID_OPACITY, + polygon: true, + points, + }); + }) + : []; + + const spokes = angles.map((angle) => { + const px = Math.cos(angle) * radius; + const py = Math.sin(angle) * radius; + return newLinearElement({ + backgroundColor: "transparent", + ...commonProps, + type: "line", + x: centerX, + y: centerY, + width: Math.abs(px), + height: Math.abs(py), + strokeStyle: "solid", + roughness: ROUGHNESS.architect, + opacity: GRID_OPACITY, + points: [pointFrom(0, 0), pointFrom(px, py)], + }); + }); + + const seriesPolygons = series.map((seriesData, index) => { + const points = angles.map((angle, axisIndex) => { + const value = seriesData.values[axisIndex] ?? 0; + const pointRadius = normalize(value, axisIndex) * radius; + return pointFrom( + Math.cos(angle) * pointRadius, + Math.sin(angle) * pointRadius, + ); + }); + points.push(pointFrom(points[0][0], points[0][1])); + + return newLinearElement({ + backgroundColor: "transparent", + ...commonProps, + type: "line", + x: centerX, + y: centerY, + width: radius * 2, + height: radius * 2, + strokeColor: seriesColors[index], + strokeWidth: 2, + polygon: true, + points, + }); + }); + + const seriesLegend = createSeriesLegend( + series, + seriesColors, + centerX, + axisLabelBottomY, + y + BAR_GAP * 5, + backgroundColor, + ); + + return [ + ...(title ? [title] : []), + ...axisLabels, + ...radarGridLines, + ...spokes, + ...seriesPolygons, + ...seriesLegend, + ]; +}; diff --git a/packages/excalidraw/charts/charts.types.ts b/packages/excalidraw/charts/charts.types.ts new file mode 100644 index 0000000000..29f3971a58 --- /dev/null +++ b/packages/excalidraw/charts/charts.types.ts @@ -0,0 +1,18 @@ +import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types"; + +export type ChartElements = readonly NonDeletedExcalidrawElement[]; + +export interface Spreadsheet { + title: string | null; + labels: string[] | null; + series: SpreadsheetSeries[]; +} + +export interface SpreadsheetSeries { + title: string | null; + values: number[]; +} + +export type ParseSpreadsheetResult = + | { ok: false; reason: string } + | { ok: true; data: Spreadsheet }; diff --git a/packages/excalidraw/charts/index.ts b/packages/excalidraw/charts/index.ts new file mode 100644 index 0000000000..d806546a49 --- /dev/null +++ b/packages/excalidraw/charts/index.ts @@ -0,0 +1,38 @@ +import type { ChartType } from "@excalidraw/element/types"; + +import { renderBarChart } from "./charts.bar"; +import { renderLineChart } from "./charts.line"; +import { + tryParseCells, + tryParseNumber, + tryParseSpreadsheet, +} from "./charts.parse"; +import { renderRadarChart } from "./charts.radar"; + +import type { ChartElements, Spreadsheet } from "./charts.types"; + +export { + type ParseSpreadsheetResult, + type Spreadsheet, + type SpreadsheetSeries, + type ChartElements, +} from "./charts.types"; + +export { isSpreadsheetValidForChartType } from "./charts.helpers"; +export { tryParseCells, tryParseNumber, tryParseSpreadsheet }; + +export const renderSpreadsheet = ( + chartType: ChartType, + spreadsheet: Spreadsheet, + x: number, + y: number, + colorSeed?: number, +): ChartElements | null => { + if (chartType === "line") { + return renderLineChart(spreadsheet, x, y, colorSeed); + } + if (chartType === "radar") { + return renderRadarChart(spreadsheet, x, y, colorSeed); + } + return renderBarChart(spreadsheet, x, y, colorSeed); +}; diff --git a/packages/excalidraw/clipboard.test.ts b/packages/excalidraw/clipboard.test.ts index 2115c3eff2..6f2b6fc374 100644 --- a/packages/excalidraw/clipboard.test.ts +++ b/packages/excalidraw/clipboard.test.ts @@ -155,67 +155,4 @@ describe("parseClipboard()", () => { }, ]); }); - - it("should parse spreadsheet from either text/plain and text/html", async () => { - let clipboardData; - // ------------------------------------------------------------------------- - clipboardData = await parseClipboard( - await parseDataTransferEvent( - createPasteEvent({ - types: { - "text/plain": `a b - 1 2 - 4 5 - 7 10`, - }, - }), - ), - ); - expect(clipboardData.spreadsheet).toEqual({ - title: "b", - labels: ["1", "4", "7"], - values: [2, 5, 10], - }); - // ------------------------------------------------------------------------- - clipboardData = await parseClipboard( - await parseDataTransferEvent( - createPasteEvent({ - types: { - "text/html": `a b - 1 2 - 4 5 - 7 10`, - }, - }), - ), - ); - expect(clipboardData.spreadsheet).toEqual({ - title: "b", - labels: ["1", "4", "7"], - values: [2, 5, 10], - }); - // ------------------------------------------------------------------------- - clipboardData = await parseClipboard( - await parseDataTransferEvent( - createPasteEvent({ - types: { - "text/html": ` - -
ab
12
45
710
- - `, - "text/plain": `a b - 1 2 - 4 5 - 7 10`, - }, - }), - ), - ); - expect(clipboardData.spreadsheet).toEqual({ - title: "b", - labels: ["1", "4", "7"], - values: [2, 5, 10], - }); - }); }); diff --git a/packages/excalidraw/clipboard.ts b/packages/excalidraw/clipboard.ts index 6033b857af..165534741f 100644 --- a/packages/excalidraw/clipboard.ts +++ b/packages/excalidraw/clipboard.ts @@ -33,12 +33,8 @@ import { normalizeFile, } from "./data/blob"; -import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts"; - import type { FileSystemHandle } from "./data/filesystem"; -import type { Spreadsheet } from "./charts"; - import type { BinaryFiles } from "./types"; type ElementsClipboard = { @@ -50,7 +46,6 @@ type ElementsClipboard = { export type PastedMixedContent = { type: "text" | "imageUrl"; value: string }[]; export interface ClipboardData { - spreadsheet?: Spreadsheet; elements?: readonly ExcalidrawElement[]; files?: BinaryFiles; text?: string; @@ -215,16 +210,6 @@ export const copyToClipboard = async ( ); }; -const parsePotentialSpreadsheet = ( - text: string, -): { spreadsheet: Spreadsheet } | { errorMessage: string } | null => { - const result = tryParseSpreadsheet(text); - if (result.type === VALID_SPREADSHEET) { - return { spreadsheet: result.spreadsheet }; - } - return null; -}; - /** internal, specific to parsing paste events. Do not reuse. */ function parseHTMLTree(el: ChildNode) { let result: PastedMixedContent = []; @@ -551,19 +536,6 @@ export const parseClipboard = async ( }; } - try { - // if system clipboard contains spreadsheet, use it even though it's - // technically possible it's staler than in-app clipboard - const spreadsheetResult = - !isPlainPaste && parsePotentialSpreadsheet(parsedEventData.value); - - if (spreadsheetResult) { - return spreadsheetResult; - } - } catch (error: any) { - console.error(error); - } - try { const systemClipboardData = JSON.parse(parsedEventData.value); const programmaticAPI = diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 285421e357..adbcce44e5 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -425,6 +425,8 @@ import { EraserTrail } from "../eraser"; import { getShortcutKey } from "../shortcut"; +import { tryParseSpreadsheet } from "../charts"; + import ConvertElementTypePopup, { getConversionTypeFromElements, convertElementTypePopupAtom, @@ -3542,14 +3544,19 @@ class App extends React.Component { } // ------------------- Spreadsheet ------------------- - if (data.spreadsheet && !isPlainPaste) { - this.setState({ - pasteDialog: { - data: data.spreadsheet, - shown: true, - }, - }); - return; + + if (!isPlainPaste && data.text) { + const result = tryParseSpreadsheet(data.text); + if (result.ok) { + this.setState({ + openDialog: { + name: "charts", + data: result.data, + rawText: data.text, + }, + }); + return; + } } // ------------------- Images or SVG code ------------------- diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index 11447bbd31..85d2701b11 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/packages/excalidraw/components/LayerUI.tsx @@ -556,13 +556,13 @@ const LayerUI = ({ {renderImageExportDialog()} {renderJSONExportDialog()} - {appState.pasteDialog.shown && ( + {appState.openDialog?.name === "charts" && ( setAppState({ - pasteDialog: { shown: false, data: null }, + openDialog: null, }) } /> diff --git a/packages/excalidraw/components/PasteChartDialog.scss b/packages/excalidraw/components/PasteChartDialog.scss index 3bd21b02be..7e73768e39 100644 --- a/packages/excalidraw/components/PasteChartDialog.scss +++ b/packages/excalidraw/components/PasteChartDialog.scss @@ -2,6 +2,40 @@ .excalidraw { .PasteChartDialog { + .PasteChartDialog__title { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .PasteChartDialog__titleText { + min-width: 0; + } + + .PasteChartDialog__reshuffleBtn { + margin-left: auto; + flex: 0 0 auto; + width: 1rem; + height: 1rem; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 4px; + cursor: pointer; + color: var(--text-primary-color); + transition: transform 120ms ease, background-color 120ms ease, + color 120ms ease; + user-select: none; + + &:hover { + color: $color-blue-6; + } + + &:active { + transform: scale(0.94); + } + } + @include isMobile { .Island { display: flex; @@ -11,35 +45,61 @@ .container { display: flex; align-items: center; - justify-content: space-around; + justify-content: center; flex-wrap: wrap; + gap: 1rem; @include isMobile { flex-direction: column; justify-content: center; + align-items: stretch; } } .ChartPreview { - margin: 8px; - text-align: center; - width: 192px; - height: 128px; - border-radius: 2px; - padding: 1px; + width: 260px; + min-height: 190px; + border-radius: 8px; + padding: 10px; border: 1px solid $color-gray-4; display: flex; - align-items: center; - justify-content: center; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + gap: 10px; background: transparent; - div { - display: inline-block; + .ChartPreview__canvas { + display: flex; + flex: 1; + align-items: center; + justify-content: center; + overflow: hidden; + } + .ChartPreview__label { + font-size: 0.875rem; + font-weight: 600; + line-height: 1; + text-align: center; + color: var(--text-primary-color); } svg { - max-height: 120px; - max-width: 186px; + max-height: 144px; + max-width: 100%; } &:hover { - padding: 0; - border: 2px solid $color-blue-5; + border-color: $color-blue-5; + } + &:active { + border-color: $color-blue-5; + box-shadow: 0 0 0 1px $color-blue-5; + transform: scale(0.98); + } + &:focus-visible { + border-color: $color-blue-5; + box-shadow: 0 0 0 1px $color-blue-5; + } + + @include isMobile { + width: 100%; + min-height: 200px; } } } diff --git a/packages/excalidraw/components/PasteChartDialog.tsx b/packages/excalidraw/components/PasteChartDialog.tsx index 2db632a63b..19c3271766 100644 --- a/packages/excalidraw/components/PasteChartDialog.tsx +++ b/packages/excalidraw/components/PasteChartDialog.tsx @@ -1,35 +1,57 @@ import React, { useLayoutEffect, useRef, useState } from "react"; +import { newTextElement } from "@excalidraw/element"; + import type { ChartType } from "@excalidraw/element/types"; import { trackEvent } from "../analytics"; -import { renderSpreadsheet } from "../charts"; +import { isSpreadsheetValidForChartType, renderSpreadsheet } from "../charts"; import { t } from "../i18n"; import { exportToSvg } from "../scene/export"; +import { useUIAppState } from "../context/ui-appState"; + import { useApp } from "./App"; import { Dialog } from "./Dialog"; import "./PasteChartDialog.scss"; +import { bucketFillIcon } from "./icons"; + import type { ChartElements, Spreadsheet } from "../charts"; -import type { UIAppState } from "../types"; + +type OnPlainTextPaste = (rawText: string) => void; type OnInsertChart = (chartType: ChartType, elements: ChartElements) => void; +const getChartTypeLabel = (chartType: ChartType) => { + switch (chartType) { + case "bar": + return t("labels.chartType_bar"); + case "line": + return t("labels.chartType_line"); + case "radar": + return t("labels.chartType_radar"); + default: + return chartType; + } +}; + const ChartPreviewBtn = (props: { spreadsheet: Spreadsheet | null; chartType: ChartType; - selected: boolean; + colorSeed: number; onClick: OnInsertChart; }) => { const previewRef = useRef(null); const [chartElements, setChartElements] = useState( null, ); + const { theme } = useUIAppState(); useLayoutEffect(() => { if (!props.spreadsheet) { + setChartElements(null); return; } @@ -38,7 +60,13 @@ const ChartPreviewBtn = (props: { props.spreadsheet, 0, 0, + props.colorSeed, ); + if (!elements) { + setChartElements(null); + previewRef.current?.replaceChildren(); + return; + } setChartElements(elements); let svg: SVGSVGElement; const previewNode = previewRef.current!; @@ -49,6 +77,7 @@ const ChartPreviewBtn = (props: { { exportBackground: false, viewBackgroundColor: "#fff", + exportWithDarkMode: theme === "dark", }, null, // files { @@ -58,42 +87,108 @@ const ChartPreviewBtn = (props: { svg.querySelector(".style-fonts")?.remove(); previewNode.replaceChildren(); previewNode.appendChild(svg); - - if (props.selected) { - (previewNode.parentNode as HTMLDivElement).focus(); - } })(); return () => { previewNode.replaceChildren(); }; - }, [props.spreadsheet, props.chartType, props.selected]); + }, [props.spreadsheet, props.chartType, props.colorSeed, theme]); + + const chartTypeLabel = getChartTypeLabel(props.chartType); return ( + ); +}; + +const PlainTextPreviewBtn = (props: { + rawText: string; + onClick: OnPlainTextPaste; +}) => { + const previewRef = useRef(null); + const { theme } = useUIAppState(); + + useLayoutEffect(() => { + if (!props.rawText) { + return; + } + + const textElement = newTextElement({ + text: props.rawText, + x: 0, + y: 0, + }); + + const previewNode = previewRef.current!; + + (async () => { + const svg = await exportToSvg( + [textElement], + { + exportBackground: false, + viewBackgroundColor: "#fff", + exportWithDarkMode: theme === "dark", + }, + null, + { + skipInliningFonts: true, + }, + ); + svg.querySelector(".style-fonts")?.remove(); + previewNode.replaceChildren(); + previewNode.appendChild(svg); + })(); + + return () => { + previewNode.replaceChildren(); + }; + }, [props.rawText, theme]); + + return ( + ); }; export const PasteChartDialog = ({ - setAppState, - appState, + data, + rawText, onClose, }: { - appState: UIAppState; + data: Spreadsheet; + rawText: string; onClose: () => void; - setAppState: React.Component["setState"]; }) => { - const { onInsertElements } = useApp(); + const { onInsertElements, focusContainer } = useApp(); + const [colorSeed, setColorSeed] = useState(Math.random()); + + const handleReshuffleColors = React.useCallback(() => { + setColorSeed(Math.random()); + }, []); + const handleClose = React.useCallback(() => { if (onClose) { onClose(); @@ -103,36 +198,72 @@ export const PasteChartDialog = ({ const handleChartClick = (chartType: ChartType, elements: ChartElements) => { onInsertElements(elements); trackEvent("paste", "chart", chartType); - setAppState({ - currentChartType: chartType, - pasteDialog: { - shown: false, - data: null, - }, + onClose(); + focusContainer(); + }; + + const handlePlainTextClick = (rawText: string) => { + const textElement = newTextElement({ + text: rawText, + x: 0, + y: 0, }); + onInsertElements([textElement]); + trackEvent("paste", "chart", "plaintext"); + onClose(); + focusContainer(); }; return ( +
+ {t("labels.pasteCharts")} +
+
{ + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + handleReshuffleColors(); + } + }} + > + {bucketFillIcon} +
+
+ } className={"PasteChartDialog"} autofocus={false} >
- - + {(["bar", "line", "radar"] as const).map((chartType) => { + if (!isSpreadsheetValidForChartType(data, chartType)) { + return null; + } + + return ( + + ); + })} + {rawText && ( + + )}
); diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx index f8004b4c2f..ab0054ee35 100644 --- a/packages/excalidraw/index.tsx +++ b/packages/excalidraw/index.tsx @@ -319,3 +319,9 @@ export { isElementLink } from "@excalidraw/element"; export { setCustomTextMetricsProvider } from "@excalidraw/element"; export { CommandPalette } from "./components/CommandPalette/CommandPalette"; + +export { + renderSpreadsheet, + tryParseSpreadsheet, + isSpreadsheetValidForChartType, +} from "./charts"; diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json index 182e59bb61..18e8c88908 100644 --- a/packages/excalidraw/locales/en.json +++ b/packages/excalidraw/locales/en.json @@ -3,6 +3,10 @@ "paste": "Paste", "pasteAsPlaintext": "Paste as plaintext", "pasteCharts": "Paste charts", + "chartType_bar": "Bar chart", + "chartType_line": "Line chart", + "chartType_radar": "Radar chart", + "chartType_plaintext": "Plain text", "selectAll": "Select all", "multiSelect": "Add element to selection", "moveCanvas": "Move canvas", diff --git a/packages/excalidraw/tests/__snapshots__/charts.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/charts.test.tsx.snap index 868e27e842..5fa9fb7e35 100644 --- a/packages/excalidraw/tests/__snapshots__/charts.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/charts.test.tsx.snap @@ -2,19 +2,24 @@ exports[`tryParseSpreadsheet > works for numbers with comma in them 1`] = ` { - "spreadsheet": { + "data": { "labels": [ "Week 1", "Week 2", "Week 3", ], - "title": "Users", - "values": [ - 814, - 10301, - 4264, + "series": [ + { + "title": "Users", + "values": [ + 814, + 10301, + 4264, + ], + }, ], + "title": "Users", }, - "type": "VALID_SPREADSHEET", + "ok": true, } `; diff --git a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap index b8467c20ab..38f748b817 100644 --- a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap @@ -889,7 +889,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro "top": 40, }, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -951,10 +950,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -1091,7 +1086,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -1150,10 +1144,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -1308,7 +1298,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -1367,10 +1356,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -1642,7 +1627,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -1701,10 +1685,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -1976,7 +1956,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -2035,10 +2014,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -2193,7 +2168,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -2252,10 +2226,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -2437,7 +2407,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -2496,10 +2465,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -2738,7 +2703,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -2797,10 +2761,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -3113,7 +3073,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "#a5d8ff", @@ -3172,10 +3131,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -3609,7 +3564,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -3668,10 +3622,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -3935,7 +3885,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -3994,10 +3943,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -4261,7 +4206,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -4320,10 +4264,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -5549,7 +5489,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi "top": -7, }, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -5608,10 +5547,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -6769,7 +6704,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro "top": -7, }, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -6828,10 +6762,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -7707,7 +7637,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app "top": -9, }, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -7769,10 +7698,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -8710,7 +8635,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap "top": -7, }, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -8769,10 +8693,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -9704,7 +9624,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap "top": 90, }, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -9766,10 +9685,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap index c8c427e6ae..97204839fc 100644 --- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap @@ -15,7 +15,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -73,10 +72,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -649,7 +644,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -707,10 +701,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -1213,7 +1203,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -1274,10 +1263,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -1576,7 +1561,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -1637,10 +1621,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -1941,7 +1921,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -2002,10 +1981,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -2207,7 +2182,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -2265,10 +2239,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -2663,7 +2633,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -2724,10 +2693,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -2969,7 +2934,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -3030,10 +2994,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -3291,7 +3251,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -3352,10 +3311,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -3588,7 +3543,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -3649,10 +3603,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -3877,7 +3827,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -3938,10 +3887,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -4115,7 +4060,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -4176,10 +4120,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -4375,7 +4315,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -4436,10 +4375,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -4649,7 +4584,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -4710,10 +4644,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -4881,7 +4811,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -4942,10 +4871,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -5113,7 +5038,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -5174,10 +5098,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -5363,7 +5283,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -5424,10 +5343,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -5622,7 +5537,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -5683,10 +5597,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -5883,7 +5793,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -5941,10 +5850,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -6215,7 +6120,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "#ffc9c9", @@ -6273,10 +6177,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -6645,7 +6545,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -6703,10 +6602,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -7022,7 +6917,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -7083,10 +6977,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -7337,7 +7227,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -7395,10 +7284,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -7632,7 +7517,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "#ffc9c9", @@ -7690,10 +7574,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "openPopup": "elementBackground", "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -7865,7 +7745,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -7923,10 +7802,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -8220,7 +8095,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -8278,10 +8152,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -8575,7 +8445,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -8633,10 +8502,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -8984,7 +8849,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -9042,10 +8906,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -9266,7 +9126,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -9324,10 +9183,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -9533,7 +9388,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "#ffc9c9", @@ -9591,10 +9445,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on "openPopup": "elementBackground", "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -9801,7 +9651,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "#ffc9c9", @@ -9859,10 +9708,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on "openPopup": "elementBackground", "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -10036,7 +9881,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -10097,10 +9941,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -10336,7 +10176,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -10394,10 +10233,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -10656,7 +10491,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -10714,10 +10548,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -10895,7 +10725,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -10956,10 +10785,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -11340,7 +11165,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "#a5d8ff", @@ -11398,10 +11222,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r "openPopup": "elementBackground", "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -11603,7 +11423,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -11661,10 +11480,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -11841,7 +11656,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -11899,10 +11713,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -12081,7 +11891,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -12139,10 +11948,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -12475,7 +12280,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -12536,10 +12340,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -12688,7 +12488,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -12746,10 +12545,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -12898,7 +12693,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -12959,10 +12753,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -13202,7 +12992,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -13260,10 +13049,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -13503,7 +13288,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -13564,10 +13348,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -13751,7 +13531,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -13809,10 +13588,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -13991,7 +13766,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -14049,10 +13823,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -14231,7 +14001,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -14289,10 +14058,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -14481,7 +14246,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -14539,10 +14303,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -14815,7 +14575,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -14876,10 +14635,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -14988,7 +14743,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -15046,10 +14800,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -15275,7 +15025,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -15336,10 +15085,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -15541,7 +15286,6 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -15602,10 +15346,6 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -15697,7 +15437,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "#a5d8ff", @@ -15755,10 +15494,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -15982,7 +15717,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -16043,10 +15777,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -16147,7 +15877,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -16205,10 +15934,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -16898,7 +16623,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -16956,10 +16680,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -17547,7 +17267,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -17605,10 +17324,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -18196,7 +17911,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -18254,10 +17968,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -18948,7 +18658,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -19006,10 +18715,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -19719,7 +19424,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements' "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -19777,10 +19481,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements' "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -20202,7 +19902,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -20260,10 +19959,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -20716,7 +20411,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -20774,10 +20468,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -21178,7 +20868,6 @@ exports[`history > singleplayer undo/redo > should support linear element creati "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -21236,10 +20925,6 @@ exports[`history > singleplayer undo/redo > should support linear element creati "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap index d9f469988c..c7dd74b91f 100644 --- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap @@ -15,7 +15,6 @@ exports[`given element A and group of elements B and given both are selected whe "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -74,10 +73,6 @@ exports[`given element A and group of elements B and given both are selected whe "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -444,7 +439,6 @@ exports[`given element A and group of elements B and given both are selected whe "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -503,10 +497,6 @@ exports[`given element A and group of elements B and given both are selected whe "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -863,7 +853,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -922,10 +911,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -1432,7 +1417,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -1491,10 +1475,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -1642,7 +1622,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -1701,10 +1680,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -2029,7 +2004,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -2088,10 +2062,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -2277,7 +2247,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = ` "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -2336,10 +2305,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = ` "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -2460,7 +2425,6 @@ exports[`regression tests > can drag element that covers another element, while "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -2519,10 +2483,6 @@ exports[`regression tests > can drag element that covers another element, while "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -2788,7 +2748,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "#ffc9c9", @@ -2847,10 +2806,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app "openPopup": "elementStroke", "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -3046,7 +3001,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -3105,10 +3059,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -3290,7 +3240,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -3349,10 +3298,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -3529,7 +3474,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`] "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -3588,10 +3532,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`] "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -3790,7 +3730,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -3849,10 +3788,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -4107,7 +4042,6 @@ exports[`regression tests > deleting last but one element in editing group shoul "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -4166,10 +4100,6 @@ exports[`regression tests > deleting last but one element in editing group shoul "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -4546,7 +4476,6 @@ exports[`regression tests > deselects group of selected elements on pointer down "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -4605,10 +4534,6 @@ exports[`regression tests > deselects group of selected elements on pointer down "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -4832,7 +4757,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -4891,10 +4815,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -5111,7 +5031,6 @@ exports[`regression tests > deselects selected element on pointer down when poin "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -5170,10 +5089,6 @@ exports[`regression tests > deselects selected element on pointer down when poin "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -5322,7 +5237,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -5381,10 +5295,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -5525,7 +5435,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -5584,10 +5493,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -5921,7 +5826,6 @@ exports[`regression tests > drags selected elements from point inside common bou "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -5980,10 +5884,6 @@ exports[`regression tests > drags selected elements from point inside common bou "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -6221,7 +6121,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1` "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -6280,10 +6179,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1` "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -7012,7 +6907,6 @@ exports[`regression tests > given a group of selected elements with an element t "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -7071,10 +6965,6 @@ exports[`regression tests > given a group of selected elements with an element t "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -7349,7 +7239,6 @@ exports[`regression tests > given a selected element A and a not selected elemen "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "#ffc9c9", @@ -7408,10 +7297,6 @@ exports[`regression tests > given a selected element A and a not selected elemen "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -7631,7 +7516,6 @@ exports[`regression tests > given selected element A with lower z-index than uns "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -7690,10 +7574,6 @@ exports[`regression tests > given selected element A with lower z-index than uns "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -7869,7 +7749,6 @@ exports[`regression tests > given selected element A with lower z-index than uns "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -7928,10 +7807,6 @@ exports[`regression tests > given selected element A with lower z-index than uns "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -8112,7 +7987,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -8171,10 +8045,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -8295,7 +8165,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -8354,10 +8223,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -8478,7 +8343,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -8537,10 +8401,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -8661,7 +8521,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1` "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -8720,10 +8579,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1` "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -8896,7 +8751,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`] "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -8955,10 +8809,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`] "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -9129,7 +8979,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -9188,10 +9037,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -9324,7 +9169,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1` "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -9383,10 +9227,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1` "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -9559,7 +9399,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -9618,10 +9457,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -9742,7 +9577,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`] "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -9801,10 +9635,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`] "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -9975,7 +9805,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -10034,10 +9863,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -10158,7 +9983,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -10217,10 +10041,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -10353,7 +10173,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -10412,10 +10231,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -10536,7 +10351,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -10595,10 +10409,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -11070,7 +10880,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -11129,10 +10938,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -11353,7 +11158,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = ` "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -11412,10 +11216,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = ` "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -11479,7 +11279,6 @@ exports[`regression tests > shift click on selected element should deselect it o "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -11538,10 +11337,6 @@ exports[`regression tests > shift click on selected element should deselect it o "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -11682,7 +11477,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -11741,10 +11535,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -12004,7 +11794,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -12063,10 +11852,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -12436,7 +12221,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -12495,10 +12279,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -13079,7 +12859,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -13141,10 +12920,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -13208,7 +12983,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`] "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -13267,10 +13041,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`] "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -13842,7 +13612,6 @@ exports[`regression tests > switches from group of selected elements to another "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -13901,10 +13670,6 @@ exports[`regression tests > switches from group of selected elements to another "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -14184,7 +13949,6 @@ exports[`regression tests > switches selected element on pointer down > [end of "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -14243,10 +14007,6 @@ exports[`regression tests > switches selected element on pointer down > [end of "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -14451,7 +14211,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`] "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -14510,10 +14269,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`] "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -14577,7 +14332,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -14636,10 +14390,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -14944,7 +14694,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -15003,10 +14752,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes "openPopup": null, "openSidebar": null, "originSnapOffset": null, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { @@ -15070,7 +14815,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = ` "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -15132,10 +14876,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = ` "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { diff --git a/packages/excalidraw/tests/charts.test.tsx b/packages/excalidraw/tests/charts.test.tsx index a4bce153bd..8f2274c824 100644 --- a/packages/excalidraw/tests/charts.test.tsx +++ b/packages/excalidraw/tests/charts.test.tsx @@ -10,4 +10,155 @@ Week 3${"\t"}4,264`, ); expect(result).toMatchSnapshot(); }); + + it("parses multi-series CSV for radar charts", () => { + const result = tryParseSpreadsheet( + `Metric,Player A,Player B,Player C +Speed,80,60,75 +Strength,65,85,70 +Agility,90,70,88 +Intelligence,70,88,92 +Stamina,85,75,80`, + ); + + expect(result).toEqual({ + ok: true, + data: { + title: "Metric", + labels: ["Speed", "Strength", "Agility", "Intelligence", "Stamina"], + series: [ + { title: "Player A", values: [80, 65, 90, 70, 85] }, + { title: "Player B", values: [60, 85, 70, 88, 75] }, + { title: "Player C", values: [75, 70, 88, 92, 80] }, + ], + }, + }); + }); + + it("parses TSV with empty chart-name header cell", () => { + const result = tryParseSpreadsheet( + `\tDunk\tEgg +Physical Strength\t10\t2 +Swordsmanship\t8\t1 +Political Instinct\t3\t9`, + ); + + expect(result).toEqual({ + ok: true, + data: { + title: null, + labels: ["Physical Strength", "Swordsmanship", "Political Instinct"], + series: [ + { title: "Dunk", values: [10, 8, 3] }, + { title: "Egg", values: [2, 1, 9] }, + ], + }, + }); + }); + + it("parses 2-row multi-series TSV without transposing", () => { + const result = tryParseSpreadsheet( + `Physical Strength\t10\t2 +Swordsmanship skill\t8\t1`, + ); + + expect(result).toEqual({ + ok: true, + data: { + title: null, + labels: ["Physical Strength", "Swordsmanship skill"], + series: [ + { title: "Series 1", values: [10, 8] }, + { title: "Series 2", values: [2, 1] }, + ], + }, + }); + }); + + it("parses semicolon-separated values", () => { + const result = tryParseSpreadsheet( + `Metric;Player A;Player B +Speed;80;60 +Strength;65;85 +Agility;90;70`, + ); + + expect(result).toEqual({ + ok: true, + data: { + title: "Metric", + labels: ["Speed", "Strength", "Agility"], + series: [ + { title: "Player A", values: [80, 65, 90] }, + { title: "Player B", values: [60, 85, 70] }, + ], + }, + }); + }); + + it("transposes wide data (more value cols than rows) into series-per-row", () => { + const result = tryParseSpreadsheet( + `trait,Dunk,Egg,Daeron +Physical,10,2,7 +Mental,10,2,7`, + ); + + expect(result).toEqual({ + ok: true, + data: { + title: "trait", + labels: ["Dunk", "Egg", "Daeron"], + series: [ + { title: "Physical", values: [10, 2, 7] }, + { title: "Mental", values: [10, 2, 7] }, + ], + }, + }); + }); + + it("transposes single data row with header into single series", () => { + const result = tryParseSpreadsheet( + `trait,Dunk,Egg,Daeron +Physical,10,2,7`, + ); + + expect(result).toEqual({ + ok: true, + data: { + title: "Physical", + labels: ["Dunk", "Egg", "Daeron"], + series: [{ title: "Physical", values: [10, 2, 7] }], + }, + }); + }); + + it("transposes single data row without header into single series", () => { + const result = tryParseSpreadsheet(`Physical,10,2,7`); + + expect(result).toEqual({ + ok: true, + data: { + title: "Physical", + labels: null, + series: [{ title: "Physical", values: [10, 2, 7] }], + }, + }); + }); + + it("prefers tab over comma/semicolon when tabs produce multiple columns", () => { + const result = tryParseSpreadsheet( + `Label\tValue +A\t10 +B\t20`, + ); + + expect(result).toEqual({ + ok: true, + data: { + title: "Value", + labels: ["A", "B"], + series: [{ title: "Value", values: [10, 20] }], + }, + }); + }); }); diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index 02f70f62b4..07701e17bb 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -20,7 +20,6 @@ import type { GroupId, ExcalidrawBindableElement, Arrowhead, - ChartType, FontFamilyValues, FileId, Theme, @@ -383,7 +382,8 @@ export interface AppState { | { name: "ttd"; tab: "text-to-diagram" | "mermaid" } | { name: "commandPalette" } | { name: "settings" } - | { name: "elementLinkSelector"; sourceElementId: ExcalidrawElement["id"] }; + | { name: "elementLinkSelector"; sourceElementId: ExcalidrawElement["id"] } + | { name: "charts"; data: Spreadsheet; rawText: string }; /** * Reflects user preference for whether the default sidebar should be docked. * @@ -425,16 +425,6 @@ export interface AppState { /** bitmap. Use `STATS_PANELS` bit values */ panels: number; }; - currentChartType: ChartType; - pasteDialog: - | { - shown: false; - data: null; - } - | { - shown: true; - data: Spreadsheet; - }; showHyperlinkPopup: false | "info" | "editor"; selectedLinearElement: LinearElementEditor | null; snapLines: readonly SnapLine[]; diff --git a/packages/utils/tests/__snapshots__/export.test.ts.snap b/packages/utils/tests/__snapshots__/export.test.ts.snap index f914a2bf2b..8b239c7d04 100644 --- a/packages/utils/tests/__snapshots__/export.test.ts.snap +++ b/packages/utils/tests/__snapshots__/export.test.ts.snap @@ -15,7 +15,6 @@ exports[`exportToSvg > with default arguments 1`] = ` "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, - "currentChartType": "bar", "currentHoveredFontFamily": null, "currentItemArrowType": "round", "currentItemBackgroundColor": "transparent", @@ -75,10 +74,6 @@ exports[`exportToSvg > with default arguments 1`] = ` "x": 0, "y": 0, }, - "pasteDialog": { - "data": null, - "shown": false, - }, "penDetected": false, "penMode": false, "preferredSelectionTool": { From 437595fa652b77df700c7f4e6d4fcd8d9ff42000 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= Date: Tue, 3 Mar 2026 22:55:40 +0100 Subject: [PATCH 14/62] feat: Arrow binding is a preference (#10839) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com> --- packages/element/src/Scene.ts | 2 + packages/element/src/binding.ts | 71 ++- packages/element/src/elbowArrow.ts | 16 +- packages/element/src/linearElementEditor.ts | 68 ++- packages/element/src/mutateElement.ts | 2 + packages/element/src/utils.ts | 19 +- .../excalidraw/actions/actionProperties.tsx | 2 + .../actions/actionToggleArrowBinding.tsx | 26 + .../actions/actionToggleMidpointSnapping.tsx | 23 + packages/excalidraw/actions/index.ts | 2 + packages/excalidraw/actions/types.ts | 2 + packages/excalidraw/appState.ts | 6 +- packages/excalidraw/components/App.tsx | 55 +- .../components/canvases/InteractiveCanvas.tsx | 1 + .../components/main-menu/DefaultItems.tsx | 40 ++ packages/excalidraw/locales/en.json | 4 +- .../excalidraw/renderer/interactiveScene.ts | 141 ++--- .../__snapshots__/contextmenu.test.tsx.snap | 56 ++ .../tests/__snapshots__/history.test.tsx.snap | 126 +++++ .../regressionTests.test.tsx.snap | 106 +++- .../excalidraw/tests/arrowBinding.test.tsx | 526 ++++++++++++++++++ .../excalidraw/tests/contextmenu.test.tsx | 5 +- packages/excalidraw/types.ts | 9 + .../tests/__snapshots__/export.test.ts.snap | 2 + 24 files changed, 1164 insertions(+), 146 deletions(-) create mode 100644 packages/excalidraw/actions/actionToggleArrowBinding.tsx create mode 100644 packages/excalidraw/actions/actionToggleMidpointSnapping.tsx create mode 100644 packages/excalidraw/tests/arrowBinding.test.tsx diff --git a/packages/element/src/Scene.ts b/packages/element/src/Scene.ts index eaef257960..4ba663ceba 100644 --- a/packages/element/src/Scene.ts +++ b/packages/element/src/Scene.ts @@ -438,6 +438,8 @@ export class Scene { options: { informMutation: boolean; isDragging: boolean; + isBindingEnabled?: boolean; + isMidpointSnappingEnabled?: boolean; } = { informMutation: true, isDragging: false, diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index bf1eeb63c7..566ef3c4e4 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -1,5 +1,4 @@ import { - KEYS, arrayToMap, getFeatureFlag, invariant, @@ -137,12 +136,6 @@ export const maxBindingDistance_simple = (zoom?: AppState["zoom"]): number => { ); }; -export const shouldEnableBindingForPointerEvent = ( - event: React.PointerEvent, -) => { - return !event[KEYS.CTRL_OR_CMD]; -}; - export const isBindingEnabled = (appState: { isBindingEnabled: AppState["isBindingEnabled"]; }): boolean => { @@ -177,8 +170,20 @@ export const bindOrUnbindBindingElement = ( }, ); - bindOrUnbindBindingElementEdge(arrow, start, "start", scene); - bindOrUnbindBindingElementEdge(arrow, end, "end", scene); + bindOrUnbindBindingElementEdge( + arrow, + start, + "start", + scene, + appState.isBindingEnabled, + ); + bindOrUnbindBindingElementEdge( + arrow, + end, + "end", + scene, + appState.isBindingEnabled, + ); if (start.focusPoint || end.focusPoint) { // If the strategy dictates a focus point override, then // update the arrow points to point to the focus point. @@ -221,12 +226,21 @@ const bindOrUnbindBindingElementEdge = ( { mode, element, focusPoint }: BindingStrategy, startOrEnd: "start" | "end", scene: Scene, + shouldSnapToOutline = true, ): void => { if (mode === null) { // null means break the binding unbindBindingElement(arrow, startOrEnd, scene); } else if (mode !== undefined) { - bindBindingElement(arrow, element, mode, startOrEnd, scene, focusPoint); + bindBindingElement( + arrow, + element, + mode, + startOrEnd, + scene, + focusPoint, + shouldSnapToOutline, + ); } }; @@ -798,6 +812,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = ( startDragged ? "start" : "end", elementsMap, appState.zoom, + appState.isMidpointSnappingEnabled, ) || globalPoint, } : { mode: null }; @@ -842,6 +857,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = ( startDragged ? "end" : "start", elementsMap, appState.zoom, + appState.isMidpointSnappingEnabled, ) || otherEndpoint, } : { mode: undefined } @@ -1005,6 +1021,7 @@ export const bindBindingElement = ( startOrEnd: "start" | "end", scene: Scene, focusPoint?: GlobalPoint, + shouldSnapToOutline = true, ): void => { const elementsMap = scene.getNonDeletedElementsMap(); @@ -1019,6 +1036,7 @@ export const bindBindingElement = ( hoveredElement, startOrEnd, elementsMap, + shouldSnapToOutline, ), }; } else { @@ -1352,6 +1370,7 @@ export const bindPointToSnapToElementOutline = ( startOrEnd: "start" | "end", elementsMap: ElementsMap, customIntersector?: LineSegment, + isMidpointSnappingEnabled = true, ): GlobalPoint => { const elbowed = isElbowArrow(arrowElement); const point = LinearElementEditor.getPointAtIndexGlobalCoordinates( @@ -1391,13 +1410,9 @@ export const bindPointToSnapToElementOutline = ( const isHorizontal = headingIsHorizontal( headingForPointFromElement(bindableElement, aabb, point), ); - const snapPoint = snapToMid( - bindableElement, - elementsMap, - edgePoint, - 0.05, - arrowElement, - ); + const snapPoint = isMidpointSnappingEnabled + ? snapToMid(bindableElement, elementsMap, edgePoint, 0.05, arrowElement) + : undefined; const resolved = snapPoint || point; const otherPoint = pointFrom( isHorizontal ? bindableCenter[0] : resolved[0], @@ -1892,6 +1907,8 @@ export const calculateFixedPointForElbowArrowBinding = ( hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: ElementsMap, + shouldSnapToOutline = true, + isMidpointSnappingEnabled = true, ): { fixedPoint: FixedPoint } => { const bounds = [ hoveredElement.x, @@ -1899,12 +1916,20 @@ export const calculateFixedPointForElbowArrowBinding = ( hoveredElement.x + hoveredElement.width, hoveredElement.y + hoveredElement.height, ] as Bounds; - const snappedPoint = bindPointToSnapToElementOutline( - linearElement, - hoveredElement, - startOrEnd, - elementsMap, - ); + const snappedPoint = shouldSnapToOutline + ? bindPointToSnapToElementOutline( + linearElement, + hoveredElement, + startOrEnd, + elementsMap, + undefined, + isMidpointSnappingEnabled, + ) + : LinearElementEditor.getPointAtIndexGlobalCoordinates( + linearElement, + startOrEnd === "start" ? 0 : -1, + elementsMap, + ); const globalMidPoint = pointFrom( bounds[0] + (bounds[2] - bounds[0]) / 2, bounds[1] + (bounds[3] - bounds[1]) / 2, diff --git a/packages/element/src/elbowArrow.ts b/packages/element/src/elbowArrow.ts index 63b3b7926d..9543b4182f 100644 --- a/packages/element/src/elbowArrow.ts +++ b/packages/element/src/elbowArrow.ts @@ -915,6 +915,8 @@ export const updateElbowArrowPoints = ( }, options?: { isDragging?: boolean; + isBindingEnabled?: boolean; + isMidpointSnappingEnabled?: boolean; }, ): ElementUpdate => { if (arrow.points.length < 2) { @@ -1202,6 +1204,8 @@ const getElbowArrowData = ( options?: { isDragging?: boolean; zoom?: AppState["zoom"]; + isBindingEnabled?: boolean; + isMidpointSnappingEnabled?: boolean; }, ) => { const origStartGlobalPoint: GlobalPoint = pointTranslate< @@ -1215,7 +1219,7 @@ const getElbowArrowData = ( let hoveredStartElement = null; let hoveredEndElement = null; - if (options?.isDragging) { + if (options?.isDragging && options?.isBindingEnabled !== false) { const elements = Array.from(elementsMap.values()); hoveredStartElement = getHoveredElement( @@ -1255,6 +1259,8 @@ const getElbowArrowData = ( hoveredStartElement, elementsMap, options?.isDragging, + options?.isBindingEnabled, + options?.isMidpointSnappingEnabled, ); const endGlobalPoint = getGlobalPoint( { @@ -1270,6 +1276,8 @@ const getElbowArrowData = ( hoveredEndElement, elementsMap, options?.isDragging, + options?.isBindingEnabled, + options?.isMidpointSnappingEnabled, ); const startHeading = getBindPointHeading( startGlobalPoint, @@ -2213,14 +2221,18 @@ const getGlobalPoint = ( element?: ExcalidrawBindableElement | null, elementsMap?: ElementsMap, isDragging?: boolean, + isBindingEnabled = true, + isMidpointSnappingEnabled = true, ): GlobalPoint => { if (isDragging) { - if (element && elementsMap) { + if (isBindingEnabled && element && elementsMap) { return bindPointToSnapToElementOutline( arrow, element, startOrEnd, elementsMap, + undefined, + isMidpointSnappingEnabled, ); } diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts index e3d3f2e510..e57211abbc 100644 --- a/packages/element/src/linearElementEditor.ts +++ b/packages/element/src/linearElementEditor.ts @@ -359,11 +359,20 @@ export class LinearElementEditor { linearElementEditor, ); - LinearElementEditor.movePoints(element, app.scene, positions, { - startBinding: updates?.startBinding, - endBinding: updates?.endBinding, - moveMidPointsWithElement: updates?.moveMidPointsWithElement, - }); + LinearElementEditor.movePoints( + element, + app.scene, + positions, + { + startBinding: updates?.startBinding, + endBinding: updates?.endBinding, + moveMidPointsWithElement: updates?.moveMidPointsWithElement, + }, + { + isBindingEnabled: app.state.isBindingEnabled, + isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled, + }, + ); // Set the suggested binding from the updates if available if (isBindingElement(element, false)) { if (isBindingEnabled(app.state)) { @@ -418,6 +427,7 @@ export class LinearElementEditor { "start", elementsMap, app.state.zoom, + app.state.isMidpointSnappingEnabled, ) : linearElementEditor.initialState.altFocusPoint, }, @@ -538,11 +548,20 @@ export class LinearElementEditor { linearElementEditor, ); - LinearElementEditor.movePoints(element, app.scene, positions, { - startBinding: updates?.startBinding, - endBinding: updates?.endBinding, - moveMidPointsWithElement: updates?.moveMidPointsWithElement, - }); + LinearElementEditor.movePoints( + element, + app.scene, + positions, + { + startBinding: updates?.startBinding, + endBinding: updates?.endBinding, + moveMidPointsWithElement: updates?.moveMidPointsWithElement, + }, + { + isBindingEnabled: app.state.isBindingEnabled, + isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled, + }, + ); // Set the suggested binding from the updates if available if (isBindingElement(element, false)) { @@ -636,6 +655,7 @@ export class LinearElementEditor { "start", elementsMap, app.state.zoom, + app.state.isMidpointSnappingEnabled, ) : linearElementEditor.initialState.altFocusPoint, }, @@ -1524,6 +1544,10 @@ export class LinearElementEditor { endBinding?: FixedPointBinding | null; moveMidPointsWithElement?: boolean | null; }, + options?: { + isBindingEnabled?: boolean; + isMidpointSnappingEnabled?: boolean; + }, ) { const { points } = element; @@ -1592,6 +1616,8 @@ export class LinearElementEditor { otherUpdates, { isDragging: Array.from(pointUpdates.values()).some((t) => t.isDragging), + isBindingEnabled: options?.isBindingEnabled, + isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled, }, ); } @@ -1706,6 +1732,8 @@ export class LinearElementEditor { isDragging?: boolean; zoom?: AppState["zoom"]; sceneElementsMap?: NonDeletedSceneElementsMap; + isBindingEnabled?: boolean; + isMidpointSnappingEnabled?: boolean; }, ) { if (isElbowArrow(element)) { @@ -1726,6 +1754,8 @@ export class LinearElementEditor { scene.mutateElement(element, updates, { informMutation: true, isDragging: options?.isDragging ?? false, + isBindingEnabled: options?.isBindingEnabled, + isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled, }); } else { // TODO do we need to get precise coords here just to calc centers? @@ -2145,14 +2175,16 @@ const pointDraggingUpdates = ( suggestedBinding: suggestedBindingElement ? { element: suggestedBindingElement, - midPoint: snapToMid( - suggestedBindingElement, - elementsMap, - pointFrom( - scenePointerX - linearElementEditor.pointerOffset.x, - scenePointerY - linearElementEditor.pointerOffset.y, - ), - ), + midPoint: app.state.isMidpointSnappingEnabled + ? snapToMid( + suggestedBindingElement, + elementsMap, + pointFrom( + scenePointerX - linearElementEditor.pointerOffset.x, + scenePointerY - linearElementEditor.pointerOffset.y, + ), + ) + : undefined, } : null, }, diff --git a/packages/element/src/mutateElement.ts b/packages/element/src/mutateElement.ts index c45c6df08c..eb6350c2bf 100644 --- a/packages/element/src/mutateElement.ts +++ b/packages/element/src/mutateElement.ts @@ -40,6 +40,8 @@ export const mutateElement = >( updates: ElementUpdate, options?: { isDragging?: boolean; + isBindingEnabled?: boolean; + isMidpointSnappingEnabled?: boolean; }, ) => { let didChange = false; diff --git a/packages/element/src/utils.ts b/packages/element/src/utils.ts index 7013acf2f1..96e09bcbf1 100644 --- a/packages/element/src/utils.ts +++ b/packages/element/src/utils.ts @@ -659,20 +659,23 @@ export const projectFixedPointOntoDiagonal = ( startOrEnd: "start" | "end", elementsMap: ElementsMap, zoom: AppState["zoom"], + isMidpointSnappingEnabled: boolean = true, ): GlobalPoint | null => { invariant(arrow.points.length >= 2, "Arrow must have at least two points"); if (arrow.width < 3 && arrow.height < 3) { return null; } - const sideMidPoint = getSnapOutlineMidPoint( - point, - element, - elementsMap, - zoom, - ); - if (sideMidPoint) { - return sideMidPoint; + if (isMidpointSnappingEnabled) { + const sideMidPoint = getSnapOutlineMidPoint( + point, + element, + elementsMap, + zoom, + ); + if (sideMidPoint) { + return sideMidPoint; + } } // Do the projection onto the diagonals (or center lines diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index 7fb9ed0e86..93fe0ada1a 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -1830,6 +1830,7 @@ export const actionChangeArrowType = register({ startElement, "start", elementsMap, + appState.isBindingEnabled, ), } : null; @@ -1843,6 +1844,7 @@ export const actionChangeArrowType = register({ endElement, "end", elementsMap, + appState.isBindingEnabled, ), } : null; diff --git a/packages/excalidraw/actions/actionToggleArrowBinding.tsx b/packages/excalidraw/actions/actionToggleArrowBinding.tsx new file mode 100644 index 0000000000..a4e6e50ed2 --- /dev/null +++ b/packages/excalidraw/actions/actionToggleArrowBinding.tsx @@ -0,0 +1,26 @@ +import { CaptureUpdateAction } from "@excalidraw/element"; + +import { register } from "./register"; + +export const actionToggleArrowBinding = register({ + name: "arrowBinding", + label: "labels.arrowBinding", + viewMode: false, + trackEvent: { + category: "canvas", + predicate: (appState) => appState.bindingPreference === "disabled", + }, + perform(elements, appState) { + const newPreference = + appState.bindingPreference === "enabled" ? "disabled" : "enabled"; + return { + appState: { + ...appState, + bindingPreference: newPreference, + isBindingEnabled: newPreference === "enabled", + }, + captureUpdate: CaptureUpdateAction.NEVER, + }; + }, + checked: (appState) => appState.bindingPreference === "enabled", +}); diff --git a/packages/excalidraw/actions/actionToggleMidpointSnapping.tsx b/packages/excalidraw/actions/actionToggleMidpointSnapping.tsx new file mode 100644 index 0000000000..eca9df7e27 --- /dev/null +++ b/packages/excalidraw/actions/actionToggleMidpointSnapping.tsx @@ -0,0 +1,23 @@ +import { CaptureUpdateAction } from "@excalidraw/element"; + +import { register } from "./register"; + +export const actionToggleMidpointSnapping = register({ + name: "midpointSnapping", + label: "labels.midpointSnapping", + viewMode: false, + trackEvent: { + category: "canvas", + predicate: (appState) => !appState.isMidpointSnappingEnabled, + }, + perform(elements, appState) { + return { + appState: { + ...appState, + isMidpointSnappingEnabled: !this.checked!(appState), + }, + captureUpdate: CaptureUpdateAction.NEVER, + }; + }, + checked: (appState) => appState.isMidpointSnappingEnabled, +}); diff --git a/packages/excalidraw/actions/index.ts b/packages/excalidraw/actions/index.ts index 6b888e92d3..cc9ca1789c 100644 --- a/packages/excalidraw/actions/index.ts +++ b/packages/excalidraw/actions/index.ts @@ -79,6 +79,8 @@ export { export { actionToggleGridMode } from "./actionToggleGridMode"; export { actionToggleZenMode } from "./actionToggleZenMode"; export { actionToggleObjectsSnapMode } from "./actionToggleObjectsSnapMode"; +export { actionToggleArrowBinding } from "./actionToggleArrowBinding"; +export { actionToggleMidpointSnapping } from "./actionToggleMidpointSnapping"; export { actionToggleStats } from "./actionToggleStats"; export { actionUnbindText, actionBindText } from "./actionBoundText"; diff --git a/packages/excalidraw/actions/types.ts b/packages/excalidraw/actions/types.ts index c85b0639ef..ae80e4107c 100644 --- a/packages/excalidraw/actions/types.ts +++ b/packages/excalidraw/actions/types.ts @@ -59,6 +59,8 @@ export type ActionName = | "gridMode" | "zenMode" | "objectsSnapMode" + | "arrowBinding" + | "midpointSnapping" | "stats" | "changeStrokeColor" | "changeBackgroundColor" diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts index 18e303db29..e51865b2ea 100644 --- a/packages/excalidraw/appState.ts +++ b/packages/excalidraw/appState.ts @@ -70,6 +70,8 @@ export const getDefaultAppState = (): Omit< gridStep: DEFAULT_GRID_STEP, gridModeEnabled: false, isBindingEnabled: true, + bindingPreference: "enabled", + isMidpointSnappingEnabled: true, defaultSidebarDockedPreference: false, isLoading: false, isResizing: false, @@ -190,7 +192,9 @@ const APP_STATE_STORAGE_CONF = (< gridStep: { browser: true, export: true, server: true }, gridModeEnabled: { browser: true, export: true, server: true }, height: { browser: false, export: false, server: false }, - isBindingEnabled: { browser: false, export: false, server: false }, + isBindingEnabled: { browser: true, export: false, server: false }, + bindingPreference: { browser: true, export: false, server: false }, + isMidpointSnappingEnabled: { browser: true, export: false, server: false }, defaultSidebarDockedPreference: { browser: true, export: false, diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index adbcce44e5..0b361e0e70 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -119,7 +119,6 @@ import { fixBindingsAfterDeletion, getHoveredElementForBinding, isBindingEnabled, - shouldEnableBindingForPointerEvent, updateBoundElements, LinearElementEditor, newElementWith, @@ -319,6 +318,8 @@ import { actionToggleElementLock, actionToggleLinearEditor, actionToggleObjectsSnapMode, + actionToggleArrowBinding, + actionToggleMidpointSnapping, actionToggleCropEditor, } from "../actions"; import { actionWrapTextInContainer } from "../actions/actionBoundText"; @@ -2734,7 +2735,9 @@ class App extends React.Component { private onBlur = withBatchedUpdates(() => { isHoldingSpace = false; - this.setState({ isBindingEnabled: true }); + this.setState({ + isBindingEnabled: this.state.bindingPreference === "enabled", + }); }); private onUnload = () => { @@ -4937,13 +4940,15 @@ class App extends React.Component { return; } - if (event[KEYS.CTRL_OR_CMD] && this.state.isBindingEnabled) { + if (event[KEYS.CTRL_OR_CMD] && !event.repeat) { if (getFeatureFlag("COMPLEX_BINDINGS")) { this.resetDelayedBindMode(); } flushSync(() => { - this.setState({ isBindingEnabled: false }); + this.setState({ + isBindingEnabled: this.state.bindingPreference !== "enabled", + }); }); maybeHandleArrowPointlikeDrag({ app: this, event }); @@ -5217,10 +5222,13 @@ class App extends React.Component { } } } - if (!event[KEYS.CTRL_OR_CMD] && !this.state.isBindingEnabled) { - flushSync(() => { - this.setState({ isBindingEnabled: true }); - }); + if (!event[KEYS.CTRL_OR_CMD]) { + const preferenceEnabled = this.state.bindingPreference === "enabled"; + if (this.state.isBindingEnabled !== preferenceEnabled) { + flushSync(() => { + this.setState({ isBindingEnabled: preferenceEnabled }); + }); + } maybeHandleArrowPointlikeDrag({ app: this, event }); } @@ -7138,6 +7146,14 @@ class App extends React.Component { private handleCanvasPointerDown = ( event: React.PointerEvent, ) => { + // If Ctrl is not held, ensure isBindingEnabled reflects the user preference. + if (!event.ctrlKey) { + const preferenceEnabled = this.state.bindingPreference === "enabled"; + if (this.state.isBindingEnabled !== preferenceEnabled) { + this.setState({ isBindingEnabled: preferenceEnabled }); + } + } + const scenePointer = viewportCoordsToSceneCoords(event, this.state); const { x: scenePointerX, y: scenePointerY } = scenePointer; this.lastPointerMoveCoords = { @@ -7358,7 +7374,6 @@ class App extends React.Component { } this.clearSelectionIfNotUsingSelection(); - this.updateBindingEnabledOnPointerMove(event); if (this.handleSelectionOnPointerDown(event, pointerDownState)) { return; @@ -7581,6 +7596,13 @@ class App extends React.Component { this.removePointer(event); this.lastPointerUpEvent = event; + if (!event.ctrlKey) { + const preferenceEnabled = this.state.bindingPreference === "enabled"; + if (this.state.isBindingEnabled !== preferenceEnabled) { + this.setState({ isBindingEnabled: preferenceEnabled }); + } + } + const scenePointer = viewportCoordsToSceneCoords( { clientX: event.clientX, clientY: event.clientY }, this.state, @@ -8636,7 +8658,9 @@ class App extends React.Component { ): void => { if (event.ctrlKey) { flushSync(() => { - this.setState({ isBindingEnabled: false }); + this.setState({ + isBindingEnabled: this.state.bindingPreference !== "enabled", + }); }); } @@ -11330,15 +11354,6 @@ class App extends React.Component { this.addNewImagesToImageCache(); }, IMAGE_RENDER_TIMEOUT); - private updateBindingEnabledOnPointerMove = ( - event: React.PointerEvent, - ) => { - const shouldEnableBinding = shouldEnableBindingForPointerEvent(event); - if (this.state.isBindingEnabled !== shouldEnableBinding) { - this.setState({ isBindingEnabled: shouldEnableBinding }); - } - }; - private clearSelection(hitElement: ExcalidrawElement | null): void { this.setState((prevState) => ({ selectedElementIds: makeNextSelectedElementIds({}, prevState), @@ -12100,6 +12115,8 @@ class App extends React.Component { CONTEXT_MENU_SEPARATOR, actionToggleGridMode, actionToggleObjectsSnapMode, + actionToggleArrowBinding, + actionToggleMidpointSnapping, actionToggleZenMode, actionToggleViewMode, actionToggleStats, diff --git a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx index 15ecb61eaf..c6245953b9 100644 --- a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx +++ b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx @@ -249,6 +249,7 @@ const getRelevantAppStateProps = ( multiElement: appState.multiElement, newElement: appState.newElement, isBindingEnabled: appState.isBindingEnabled, + isMidpointSnappingEnabled: appState.isMidpointSnappingEnabled, suggestedBinding: appState.suggestedBinding, isRotating: appState.isRotating, elementsToHighlight: appState.elementsToHighlight, diff --git a/packages/excalidraw/components/main-menu/DefaultItems.tsx b/packages/excalidraw/components/main-menu/DefaultItems.tsx index 04cea3da48..8865dfa7ae 100644 --- a/packages/excalidraw/components/main-menu/DefaultItems.tsx +++ b/packages/excalidraw/components/main-menu/DefaultItems.tsx @@ -9,7 +9,9 @@ import { actionLoadScene, actionSaveToActiveFile, actionShortcuts, + actionToggleArrowBinding, actionToggleGridMode, + actionToggleMidpointSnapping, actionToggleObjectsSnapMode, actionToggleSearchMenu, actionToggleStats, @@ -443,6 +445,40 @@ const PreferencesToggleSnapModeItem = () => { ); }; +const PreferencesToggleArrowBindingItem = () => { + const { t } = useI18n(); + const actionManager = useExcalidrawActionManager(); + const appState = useUIAppState(); + return ( + { + actionManager.executeAction(actionToggleArrowBinding); + event.preventDefault(); + }} + > + {t("labels.arrowBinding")} + + ); +}; + +const PreferencesToggleMidpointSnappingItem = () => { + const { t } = useI18n(); + const actionManager = useExcalidrawActionManager(); + const appState = useUIAppState(); + return ( + { + actionManager.executeAction(actionToggleMidpointSnapping); + event.preventDefault(); + }} + > + {t("labels.midpointSnapping")} + + ); +}; + export const PreferencesToggleGridModeItem = () => { const { t } = useI18n(); const actionManager = useExcalidrawActionManager(); @@ -538,6 +574,8 @@ export const Preferences = ({ + + )} {additionalItems} @@ -548,6 +586,8 @@ export const Preferences = ({ Preferences.ToggleToolLock = PreferencesToggleToolLockItem; Preferences.ToggleSnapMode = PreferencesToggleSnapModeItem; +Preferences.ToggleArrowBinding = PreferencesToggleArrowBindingItem; +Preferences.ToggleMidpointSnapping = PreferencesToggleMidpointSnappingItem; Preferences.ToggleGridMode = PreferencesToggleGridModeItem; Preferences.ToggleZenMode = PreferencesToggleZenModeItem; Preferences.ToggleViewMode = PreferencesToggleViewModeItem; diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json index 18e8c88908..7a2a7294f8 100644 --- a/packages/excalidraw/locales/en.json +++ b/packages/excalidraw/locales/en.json @@ -177,7 +177,9 @@ "tab": "Tab", "shapeSwitch": "Switch shape", "preferences": "Preferences", - "preferences_toolLock": "Tool lock" + "preferences_toolLock": "Tool lock", + "arrowBinding": "Arrow binding", + "midpointSnapping": "Snap to midpoints" }, "elementLink": { "title": "Link to object", diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts index fc9331e6ea..56c308713e 100644 --- a/packages/excalidraw/renderer/interactiveScene.ts +++ b/packages/excalidraw/renderer/interactiveScene.ts @@ -407,8 +407,9 @@ const renderBindingHighlightForBindableElement_simple = ( } if ( - isFrameLikeElement(suggestedBinding.element) || - isBindableElement(suggestedBinding.element) + appState.isMidpointSnappingEnabled && + (isFrameLikeElement(suggestedBinding.element) || + isBindableElement(suggestedBinding.element)) ) { // Draw midpoint indicators const linearElement = appState.selectedLinearElement; @@ -799,77 +800,79 @@ const renderBindingHighlightForBindableElement_complex = ( context.restore(); - // Draw midpoint indicators - context.save(); - context.translate( - element.x + appState.scrollX, - element.y + appState.scrollY, - ); - - const midpointRadius = 5 / appState.zoom.value; - const cutoutPadding = 5 / appState.zoom.value; - const cutoutRadius = midpointRadius + cutoutPadding; - - let midpoints; - if (element.type === "diamond") { - const [, curves] = deconstructDiamondElement(element); - const center = elementCenterPoint(element, allElementsMap); - - midpoints = curves.map((curve) => { - const point = bezierEquation(curve, 0.5); - const rotatedPoint = pointRotateRads(point, center, element.angle); - return { - x: rotatedPoint[0] - element.x, - y: rotatedPoint[1] - element.y, - }; - }); - } else { - const center = elementCenterPoint(element, allElementsMap); - const basePoints = [ - { x: element.width / 2, y: 0 }, // TOP - { x: element.width, y: element.height / 2 }, // RIGHT - { x: element.width / 2, y: element.height }, // BOTTOM - { x: 0, y: element.height / 2 }, // LEFT - ]; - midpoints = basePoints.map((point) => { - const globalPoint = pointFrom( - point.x + element.x, - point.y + element.y, - ); - const rotatedPoint = pointRotateRads( - globalPoint, - center, - element.angle, - ); - return { - x: rotatedPoint[0] - element.x, - y: rotatedPoint[1] - element.y, - }; - }); - } - - // Clear cutouts around midpoints - midpoints.forEach((midpoint) => { - context.clearRect( - midpoint.x - cutoutRadius, - midpoint.y - cutoutRadius, - cutoutRadius * 2, - cutoutRadius * 2, + if (appState.isMidpointSnappingEnabled) { + // Draw midpoint indicators + context.save(); + context.translate( + element.x + appState.scrollX, + element.y + appState.scrollY, ); - }); - context.fillStyle = - appState.theme === THEME.DARK - ? `rgba(3, 93, 161, ${opacity})` - : `rgba(106, 189, 252, ${opacity})`; + const midpointRadius = 5 / appState.zoom.value; + const cutoutPadding = 5 / appState.zoom.value; + const cutoutRadius = midpointRadius + cutoutPadding; - midpoints.forEach((midpoint) => { - context.beginPath(); - context.arc(midpoint.x, midpoint.y, midpointRadius, 0, 2 * Math.PI); - context.fill(); - }); + let midpoints; + if (element.type === "diamond") { + const [, curves] = deconstructDiamondElement(element); + const center = elementCenterPoint(element, allElementsMap); - context.restore(); + midpoints = curves.map((curve) => { + const point = bezierEquation(curve, 0.5); + const rotatedPoint = pointRotateRads(point, center, element.angle); + return { + x: rotatedPoint[0] - element.x, + y: rotatedPoint[1] - element.y, + }; + }); + } else { + const center = elementCenterPoint(element, allElementsMap); + const basePoints = [ + { x: element.width / 2, y: 0 }, // TOP + { x: element.width, y: element.height / 2 }, // RIGHT + { x: element.width / 2, y: element.height }, // BOTTOM + { x: 0, y: element.height / 2 }, // LEFT + ]; + midpoints = basePoints.map((point) => { + const globalPoint = pointFrom( + point.x + element.x, + point.y + element.y, + ); + const rotatedPoint = pointRotateRads( + globalPoint, + center, + element.angle, + ); + return { + x: rotatedPoint[0] - element.x, + y: rotatedPoint[1] - element.y, + }; + }); + } + + // Clear cutouts around midpoints + midpoints.forEach((midpoint) => { + context.clearRect( + midpoint.x - cutoutRadius, + midpoint.y - cutoutRadius, + cutoutRadius * 2, + cutoutRadius * 2, + ); + }); + + context.fillStyle = + appState.theme === THEME.DARK + ? `rgba(3, 93, 161, ${opacity})` + : `rgba(106, 189, 252, ${opacity})`; + + midpoints.forEach((midpoint) => { + context.beginPath(); + context.arc(midpoint.x, midpoint.y, midpointRadius, 0, 2 * Math.PI); + context.fill(); + }); + + context.restore(); + } } return { diff --git a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap index 38f748b817..15458fa366 100644 --- a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap @@ -12,6 +12,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": { "items": [ @@ -932,6 +933,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -1083,6 +1085,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1129,6 +1132,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -1295,6 +1299,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1341,6 +1346,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -1624,6 +1630,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1670,6 +1677,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -1953,6 +1961,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1999,6 +2008,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2165,6 +2175,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2211,6 +2222,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2404,6 +2416,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2450,6 +2463,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2700,6 +2714,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2746,6 +2761,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -3070,6 +3086,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3116,6 +3133,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -3561,6 +3579,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3607,6 +3626,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -3882,6 +3902,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3928,6 +3949,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -4203,6 +4225,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4249,6 +4272,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -4612,6 +4636,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": { "items": [ @@ -5532,6 +5557,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -5827,6 +5853,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": { "items": [ @@ -6747,6 +6774,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -7093,6 +7121,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": { "items": [ @@ -7468,6 +7497,28 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app }, "viewMode": false, }, + { + "checked": [Function], + "label": "labels.arrowBinding", + "name": "arrowBinding", + "perform": [Function], + "trackEvent": { + "category": "canvas", + "predicate": [Function], + }, + "viewMode": false, + }, + { + "checked": [Function], + "label": "labels.midpointSnapping", + "name": "midpointSnapping", + "perform": [Function], + "trackEvent": { + "category": "canvas", + "predicate": [Function], + }, + "viewMode": false, + }, { "checked": [Function], "icon": shows context menu for canvas > [end of test] app "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -7758,6 +7810,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": { "items": [ @@ -8678,6 +8731,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -8747,6 +8801,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": { "items": [ @@ -9667,6 +9722,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap index 97204839fc..c81459c1c4 100644 --- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap @@ -12,6 +12,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -58,6 +59,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -641,6 +643,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -687,6 +690,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -1200,6 +1204,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1246,6 +1251,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -1558,6 +1564,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1604,6 +1611,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -1918,6 +1926,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1964,6 +1973,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2179,6 +2189,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2225,6 +2236,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2630,6 +2642,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2676,6 +2689,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2931,6 +2945,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2977,6 +2992,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -3248,6 +3264,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3294,6 +3311,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -3540,6 +3558,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3586,6 +3605,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -3824,6 +3844,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3870,6 +3891,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -4057,6 +4079,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4103,6 +4126,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -4312,6 +4336,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4358,6 +4383,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -4581,6 +4607,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4627,6 +4654,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -4808,6 +4836,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4854,6 +4883,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -5035,6 +5065,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5081,6 +5112,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -5280,6 +5312,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5326,6 +5359,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -5534,6 +5568,7 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5580,6 +5615,7 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -5790,6 +5826,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5836,6 +5873,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -6117,6 +6155,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -6163,6 +6202,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -6542,6 +6582,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -6588,6 +6629,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -6914,6 +6956,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -6960,6 +7003,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -7224,6 +7268,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7270,6 +7315,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -7514,6 +7560,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7560,6 +7607,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -7742,6 +7790,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7788,6 +7837,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -8092,6 +8142,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8138,6 +8189,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -8442,6 +8494,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8488,6 +8541,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -8846,6 +8900,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "type": "freedraw", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8892,6 +8947,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -9123,6 +9179,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9169,6 +9226,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -9385,6 +9443,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9431,6 +9490,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -9648,6 +9708,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9694,6 +9755,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -9878,6 +9940,7 @@ exports[`history > multiplayer undo/redo > should override remotely added groups "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9924,6 +9987,7 @@ exports[`history > multiplayer undo/redo > should override remotely added groups "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -10173,6 +10237,7 @@ exports[`history > multiplayer undo/redo > should override remotely added points "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10219,6 +10284,7 @@ exports[`history > multiplayer undo/redo > should override remotely added points "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -10488,6 +10554,7 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10534,6 +10601,7 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -10722,6 +10790,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10768,6 +10837,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -11162,6 +11232,7 @@ exports[`history > multiplayer undo/redo > should update history entries after r "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11208,6 +11279,7 @@ exports[`history > multiplayer undo/redo > should update history entries after r "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -11420,6 +11492,7 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11466,6 +11539,7 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -11653,6 +11727,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11699,6 +11774,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -11888,6 +11964,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f "type": "freedraw", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11934,6 +12011,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -12277,6 +12355,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on e "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -12323,6 +12402,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on e "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -12485,6 +12565,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on e "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -12531,6 +12612,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on e "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -12690,6 +12772,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on i "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -12736,6 +12819,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on i "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -12989,6 +13073,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on i "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13035,6 +13120,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on i "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -13285,6 +13371,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on s "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13331,6 +13418,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on s "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -13528,6 +13616,7 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13574,6 +13663,7 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -13763,6 +13853,7 @@ exports[`history > singleplayer undo/redo > should end up with no history entry "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13809,6 +13900,7 @@ exports[`history > singleplayer undo/redo > should end up with no history entry "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -13998,6 +14090,7 @@ exports[`history > singleplayer undo/redo > should iterate through the history w "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14044,6 +14137,7 @@ exports[`history > singleplayer undo/redo > should iterate through the history w "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -14243,6 +14337,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14289,6 +14384,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -14572,6 +14668,7 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14618,6 +14715,7 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -14740,6 +14838,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14786,6 +14885,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -15022,6 +15122,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -15068,6 +15169,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -15283,6 +15385,7 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -15329,6 +15432,7 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -15434,6 +15538,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -15480,6 +15585,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -15714,6 +15820,7 @@ exports[`history > singleplayer undo/redo > should support appstate name or view "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -15760,6 +15867,7 @@ exports[`history > singleplayer undo/redo > should support appstate name or view "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -15874,6 +15982,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -15920,6 +16029,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -16620,6 +16730,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -16666,6 +16777,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -17264,6 +17376,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -17310,6 +17423,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -17908,6 +18022,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -17954,6 +18069,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -18655,6 +18771,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -18701,6 +18818,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -19421,6 +19539,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements' "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -19467,6 +19586,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements' "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -19899,6 +20019,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -19945,6 +20066,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -20408,6 +20530,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -20454,6 +20577,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -20865,6 +20989,7 @@ exports[`history > singleplayer undo/redo > should support linear element creati "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -20911,6 +21036,7 @@ exports[`history > singleplayer undo/redo > should support linear element creati "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap index c7dd74b91f..e97991d96f 100644 --- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap @@ -12,6 +12,7 @@ exports[`given element A and group of elements B and given both are selected whe "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -58,6 +59,7 @@ exports[`given element A and group of elements B and given both are selected whe "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -436,6 +438,7 @@ exports[`given element A and group of elements B and given both are selected whe "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -482,6 +485,7 @@ exports[`given element A and group of elements B and given both are selected whe "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -850,6 +854,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -893,9 +898,10 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin "gridStep": 5, "height": 768, "hoveredElementIds": {}, - "isBindingEnabled": false, + "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -1414,6 +1420,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1460,6 +1467,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -1619,6 +1627,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1665,6 +1674,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2001,6 +2011,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2047,6 +2058,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2244,6 +2256,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = ` "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2290,6 +2303,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = ` "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2422,6 +2436,7 @@ exports[`regression tests > can drag element that covers another element, while "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2468,6 +2483,7 @@ exports[`regression tests > can drag element that covers another element, while "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2745,6 +2761,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2791,6 +2808,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -2998,6 +3016,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3044,6 +3063,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -3237,6 +3257,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3283,6 +3304,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -3471,6 +3493,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`] "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3517,6 +3540,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`] "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -3727,6 +3751,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3773,6 +3798,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -4039,6 +4065,7 @@ exports[`regression tests > deleting last but one element in editing group shoul "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4085,6 +4112,7 @@ exports[`regression tests > deleting last but one element in editing group shoul "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -4473,6 +4501,7 @@ exports[`regression tests > deselects group of selected elements on pointer down "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4519,6 +4548,7 @@ exports[`regression tests > deselects group of selected elements on pointer down "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -4754,6 +4784,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4800,6 +4831,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -5028,6 +5060,7 @@ exports[`regression tests > deselects selected element on pointer down when poin "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5074,6 +5107,7 @@ exports[`regression tests > deselects selected element on pointer down when poin "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -5234,6 +5268,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5280,6 +5315,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -5432,6 +5468,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5478,6 +5515,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -5823,6 +5861,7 @@ exports[`regression tests > drags selected elements from point inside common bou "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5869,6 +5908,7 @@ exports[`regression tests > drags selected elements from point inside common bou "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -6118,6 +6158,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1` "type": "freedraw", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -6164,6 +6205,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1` "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -6904,6 +6946,7 @@ exports[`regression tests > given a group of selected elements with an element t "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -6950,6 +6993,7 @@ exports[`regression tests > given a group of selected elements with an element t "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -7236,6 +7280,7 @@ exports[`regression tests > given a selected element A and a not selected elemen "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7282,6 +7327,7 @@ exports[`regression tests > given a selected element A and a not selected elemen "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -7513,6 +7559,7 @@ exports[`regression tests > given selected element A with lower z-index than uns "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7559,6 +7606,7 @@ exports[`regression tests > given selected element A with lower z-index than uns "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -7746,6 +7794,7 @@ exports[`regression tests > given selected element A with lower z-index than uns "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7792,6 +7841,7 @@ exports[`regression tests > given selected element A with lower z-index than uns "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -7984,6 +8034,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8030,6 +8081,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -8162,6 +8214,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8208,6 +8261,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -8340,6 +8394,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8386,6 +8441,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -8518,6 +8574,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1` "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8564,6 +8621,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1` "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -8748,6 +8806,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`] "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8794,6 +8853,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`] "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -8976,6 +9036,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState "type": "freedraw", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9022,6 +9083,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -9166,6 +9228,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1` "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9212,6 +9275,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1` "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -9396,6 +9460,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9442,6 +9507,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -9574,6 +9640,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`] "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9620,6 +9687,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`] "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -9802,6 +9870,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9848,6 +9917,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -9980,6 +10050,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState "type": "freedraw", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10026,6 +10097,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -10170,6 +10242,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10216,6 +10289,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -10348,6 +10422,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10394,6 +10469,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -10877,6 +10953,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10923,6 +11000,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -11155,6 +11233,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = ` "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11201,6 +11280,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = ` "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "touch", @@ -11276,6 +11356,7 @@ exports[`regression tests > shift click on selected element should deselect it o "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11322,6 +11403,7 @@ exports[`regression tests > shift click on selected element should deselect it o "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -11474,6 +11556,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11520,6 +11603,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -11791,6 +11875,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11837,6 +11922,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -12218,6 +12304,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -12264,6 +12351,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -12856,6 +12944,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -12902,6 +12991,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -12980,6 +13070,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`] "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13026,6 +13117,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`] "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -13609,6 +13701,7 @@ exports[`regression tests > switches from group of selected elements to another "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13655,6 +13748,7 @@ exports[`regression tests > switches from group of selected elements to another "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -13946,6 +14040,7 @@ exports[`regression tests > switches selected element on pointer down > [end of "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13992,6 +14087,7 @@ exports[`regression tests > switches selected element on pointer down > [end of "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -14208,6 +14304,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`] "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14254,6 +14351,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`] "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "touch", @@ -14329,6 +14427,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14375,6 +14474,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -14691,6 +14791,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes "type": "text", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14737,6 +14838,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", @@ -14812,6 +14914,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = ` "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14858,6 +14961,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = ` "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", diff --git a/packages/excalidraw/tests/arrowBinding.test.tsx b/packages/excalidraw/tests/arrowBinding.test.tsx new file mode 100644 index 0000000000..879b4b67eb --- /dev/null +++ b/packages/excalidraw/tests/arrowBinding.test.tsx @@ -0,0 +1,526 @@ +import { reseed } from "@excalidraw/common"; +import { + isElbowArrow, + projectFixedPointOntoDiagonal, +} from "@excalidraw/element"; + +import { pointFrom } from "@excalidraw/math"; + +import type { GlobalPoint, LocalPoint } from "@excalidraw/math"; + +import type { + ExcalidrawArrowElement, + ExcalidrawBindableElement, + ExcalidrawElement, +} from "@excalidraw/element/types"; + +import { actionToggleArrowBinding } from "../actions/actionToggleArrowBinding"; +import { Excalidraw, sceneCoordsToViewportCoords } from "../index"; + +import { API } from "./helpers/api"; +import { Pointer, UI } from "./helpers/ui"; +import { + render, + fireEvent, + mockBoundingClientRect, + restoreOriginalGetBoundingClientRect, + waitFor, + unmountComponent, +} from "./test-utils"; + +unmountComponent(); + +const { h } = window; +const mouse = new Pointer("mouse"); + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +/** Fire Ctrl (or Meta on Mac) keydown on document. */ +const ctrlKeyDown = (extra: Partial = {}) => + fireEvent.keyDown(document, { + key: "Control", + code: "ControlLeft", + ctrlKey: true, + repeat: false, + ...extra, + }); + +/** Fire Ctrl (or Meta on Mac) keyup on document (ctrlKey is false on keyup). */ +const ctrlKeyUp = () => + fireEvent.keyUp(document, { + key: "Control", + code: "ControlLeft", + ctrlKey: false, + }); + +// --------------------------------------------------------------------------- + +describe("Arrow binding – non-default case (bindingPreference: disabled)", () => { + beforeAll(() => { + mockBoundingClientRect(); + }); + + afterAll(() => { + restoreOriginalGetBoundingClientRect(); + }); + + beforeEach(async () => { + localStorage.clear(); + reseed(7); + await render(); + h.state.width = 1920; + h.state.height = 1080; + }); + + afterEach(() => { + mouse.reset(); + }); + + // ------------------------------------------------------------------------- + // actionToggleArrowBinding + // ------------------------------------------------------------------------- + + describe("actionToggleArrowBinding", () => { + it("isBindingEnabled defaults to true", () => { + expect(h.state.isBindingEnabled).toBe(true); + }); + + it("checked() reflects the current bindingPreference value", () => { + expect(actionToggleArrowBinding.checked!(h.state)).toBe(true); + + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + }); + expect(actionToggleArrowBinding.checked!(h.state)).toBe(false); + }); + + it("executing the action toggles binding from enabled → disabled", () => { + expect(h.state.isBindingEnabled).toBe(true); + API.executeAction(actionToggleArrowBinding); + expect(h.state.isBindingEnabled).toBe(false); + expect(h.state.bindingPreference).toBe("disabled"); + }); + + it("executing the action toggles binding from disabled → enabled", () => { + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + }); + + API.executeAction(actionToggleArrowBinding); + expect(h.state.isBindingEnabled).toBe(true); + expect(h.state.bindingPreference).toBe("enabled"); + }); + + it("checked() returns false after action disables binding", () => { + API.executeAction(actionToggleArrowBinding); // true → false + expect(actionToggleArrowBinding.checked!(h.state)).toBe(false); + }); + }); + + // ------------------------------------------------------------------------- + // Arrow does not bind when isBindingEnabled is false + // ------------------------------------------------------------------------- + + describe("Arrow drawing with binding disabled", () => { + /** + * Baseline: verify binding IS created with binding enabled so we know the + * spatial setup is correct. + */ + it("arrow startBinding is set when binding is enabled", async () => { + API.setElements([ + API.createElement({ + type: "rectangle", + id: "baselineRect", + x: 100, + y: 100, + width: 400, + height: 200, + }), + ]); + + expect(h.state.isBindingEnabled).toBe(true); + + UI.clickTool("arrow"); + // Start inside the rectangle so startBinding can be created + mouse.down(200, 200); + mouse.up(700, 200); + + await waitFor(() => { + const arrow = h.elements.find( + (el): el is ExcalidrawArrowElement => el.type === "arrow", + ); + expect(arrow).toBeDefined(); + expect(arrow!.startBinding).not.toBeNull(); + expect(arrow!.startBinding!.elementId).toBe("baselineRect"); + }); + }); + + it("arrow has no startBinding when binding is disabled", async () => { + API.setElements([ + API.createElement({ + type: "rectangle", + id: "rect1", + x: 100, + y: 100, + width: 400, + height: 200, + }), + ]); + + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + }); + + UI.clickTool("arrow"); + // Start inside the rectangle – binding is off, so no startBinding + mouse.down(200, 200); + mouse.up(700, 200); + + await waitFor(() => { + const arrow = h.elements.find( + (el): el is ExcalidrawArrowElement => el.type === "arrow", + ); + expect(arrow).toBeDefined(); + expect(arrow!.startBinding).toBeNull(); + }); + }); + + it("arrow has no endBinding when binding is disabled", async () => { + API.setElements([ + API.createElement({ + type: "rectangle", + id: "rect2", + x: 500, + y: 100, + width: 300, + height: 200, + }), + ]); + + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + }); + + UI.clickTool("arrow"); + // End inside the target rectangle – binding off -> no endBinding + mouse.down(100, 200); + mouse.up(600, 200); + + await waitFor(() => { + const arrow = h.elements.find( + (el): el is ExcalidrawArrowElement => el.type === "arrow", + ); + expect(arrow).toBeDefined(); + expect(arrow!.endBinding).toBeNull(); + }); + }); + + it("re-enabling binding via action causes new arrows to bind again", async () => { + API.setElements([ + API.createElement({ + type: "rectangle", + id: "rect3", + x: 100, + y: 100, + width: 400, + height: 200, + }), + ]); + + // Disable then re-enable binding + API.executeAction(actionToggleArrowBinding); // true -> false + API.executeAction(actionToggleArrowBinding); // false -> true + expect(h.state.isBindingEnabled).toBe(true); + + UI.clickTool("arrow"); + mouse.down(200, 200); + mouse.up(700, 200); + + await waitFor(() => { + const arrow = h.elements.find( + (el): el is ExcalidrawArrowElement => el.type === "arrow", + ); + expect(arrow).toBeDefined(); + expect(arrow!.startBinding).not.toBeNull(); + }); + }); + + it("elbow arrow does not snap to rectangle when binding is disabled", async () => { + const rect = API.createElement({ + type: "rectangle", + id: "rect-elbow-no-snap", + x: 900, + y: 500, + width: 200, + height: 120, + }) as ExcalidrawBindableElement; + API.setElements([rect]); + + // Turn off arrow binding + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + isMidpointSnappingEnabled: false, + }); + expect(h.state.isBindingEnabled).toBe(false); + + // Create the elbow arrow + UI.clickTool("arrow"); + API.setAppState({ currentItemArrowType: "elbow" }); + mouse.downAt(700, 400); + mouse.upAt(760, 460); + + let arrow: ExcalidrawArrowElement; + await waitFor(() => { + const maybeArrow = h.elements.find(isElbowArrow); + expect(maybeArrow).toBeDefined(); + arrow = maybeArrow!; + }); + + // Move the elbow arrow + UI.clickTool("selection"); + + const insideRectanglePoint = pointFrom(1010, 570); + const originalArrowEndGlobal = pointFrom( + arrow!.x + arrow!.points[arrow!.points.length - 1][0], + arrow!.y + arrow!.points[arrow!.points.length - 1][1], + ); + const originalArrowEndViewport = sceneCoordsToViewportCoords( + { + sceneX: originalArrowEndGlobal[0], + sceneY: originalArrowEndGlobal[1], + }, + h.state, + ); + const insideRectangleViewport = sceneCoordsToViewportCoords( + { + sceneX: insideRectanglePoint[0], + sceneY: insideRectanglePoint[1], + }, + h.state, + ); + + // End point dragged inside the rectangle; with snapping enabled this + // would snap to the rectangle outline. + mouse.moveTo(originalArrowEndViewport.x, originalArrowEndViewport.y); + mouse.down(); + mouse.moveTo(insideRectangleViewport.x, insideRectangleViewport.y); + mouse.up(); + + const updatedEnd = arrow!.points[arrow!.points.length - 1]; + const updatedEndGlobal = pointFrom( + arrow!.x + updatedEnd[0], + arrow!.y + updatedEnd[1], + ); + + expect(arrow!.startBinding).toBeNull(); + expect(arrow!.endBinding).toBeNull(); + expect(updatedEndGlobal).not.toEqual(originalArrowEndGlobal); + expect(updatedEndGlobal).toEqual(insideRectanglePoint); + }); + }); + + // ------------------------------------------------------------------------- + // Arrow does snap to midpoint when isMidpointSnappingEnabled is true + // ------------------------------------------------------------------------- + describe("Arrow doesn't snap to midpoint when midpoint snapping is disabled", () => { + it("does not snap to midpoint when midpoint snapping is turned off", () => { + const rect = API.createElement({ + type: "rectangle", + id: "rectNoMidSnap", + x: 100, + y: 100, + width: 400, + height: 200, + }) as ExcalidrawBindableElement; + const arrow = API.createElement({ + type: "arrow", + x: 0, + y: 250, + width: 502, + height: -48, + points: [pointFrom(0, 0), pointFrom(502, -48)], + }) as ExcalidrawArrowElement; + const elementsMap = new Map([ + [rect.id, rect], + [arrow.id, arrow], + ]); + const point = pointFrom(502, 202); + + const snappedWithMidpoint = projectFixedPointOntoDiagonal( + arrow, + point, + rect, + "end", + elementsMap, + h.state.zoom, + true, + ); + const snappedWithoutMidpoint = projectFixedPointOntoDiagonal( + arrow, + point, + rect, + "end", + elementsMap, + h.state.zoom, + false, + ); + + expect(snappedWithMidpoint).toEqual([500, 200]); + expect(snappedWithoutMidpoint).not.toEqual([500, 200]); + }); + }); + + // ------------------------------------------------------------------------- + // Ctrl / Cmd key toggle + // ------------------------------------------------------------------------- + + describe("Ctrl key toggle when binding preference is disabled", () => { + it("Ctrl keydown temporarily enables binding when preference is disabled", () => { + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + }); + + ctrlKeyDown(); + + expect(h.state.isBindingEnabled).toBe(true); + }); + + it("Ctrl keyup restores isBindingEnabled to false after the temporary toggle", () => { + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + }); + + ctrlKeyDown(); + expect(h.state.isBindingEnabled).toBe(true); + + ctrlKeyUp(); + expect(h.state.isBindingEnabled).toBe(false); + }); + + it("full round-trip: off → Ctrl down → on → Ctrl up → off", () => { + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + }); + + ctrlKeyDown(); + expect(h.state.isBindingEnabled).toBe(true); + + ctrlKeyUp(); + expect(h.state.isBindingEnabled).toBe(false); + }); + + it("full round-trip can be repeated after Ctrl release resets state", () => { + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + }); + + // First cycle + ctrlKeyDown(); + expect(h.state.isBindingEnabled).toBe(true); + ctrlKeyUp(); + expect(h.state.isBindingEnabled).toBe(false); + + // Second cycle + ctrlKeyDown(); + expect(h.state.isBindingEnabled).toBe(true); + ctrlKeyUp(); + expect(h.state.isBindingEnabled).toBe(false); + }); + }); + + describe("Ctrl key toggle when binding starts ON", () => { + it("Ctrl keydown temporarily disables binding when it was on", () => { + expect(h.state.isBindingEnabled).toBe(true); + + ctrlKeyDown(); + expect(h.state.isBindingEnabled).toBe(false); + }); + + it("Ctrl keyup restores isBindingEnabled to true after the temporary toggle", () => { + expect(h.state.isBindingEnabled).toBe(true); + + ctrlKeyDown(); + expect(h.state.isBindingEnabled).toBe(false); + + ctrlKeyUp(); + expect(h.state.isBindingEnabled).toBe(true); + }); + }); + + // ------------------------------------------------------------------------- + // event.repeat guard + // ------------------------------------------------------------------------- + + describe("event.repeat guard", () => { + it("Ctrl keydown with repeat=true does not toggle binding (preference: disabled)", () => { + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + }); + + ctrlKeyDown({ repeat: true }); + + // Must remain off – repeat events are ignored + expect(h.state.isBindingEnabled).toBe(false); + }); + + it("Ctrl keydown with repeat=true does not toggle binding (default: on)", () => { + expect(h.state.isBindingEnabled).toBe(true); + + ctrlKeyDown({ repeat: true }); + + expect(h.state.isBindingEnabled).toBe(true); + }); + + it("pressing another key while Ctrl held does not change binding state", () => { + // Start ON, first Ctrl keydown flips to false + expect(h.state.isBindingEnabled).toBe(true); + + ctrlKeyDown(); + expect(h.state.isBindingEnabled).toBe(false); + + // A second keydown with Ctrl (e.g. pressing another key while Ctrl held) + // should leave state unchanged + fireEvent.keyDown(document, { + key: "z", + ctrlKey: true, + repeat: false, + }); + expect(h.state.isBindingEnabled).toBe(false); + + // Ctrl keyup restores to preference value + ctrlKeyUp(); + expect(h.state.isBindingEnabled).toBe(true); + }); + }); + + // ------------------------------------------------------------------------- + // View-mode guard + // ------------------------------------------------------------------------- + + describe("View-mode guard", () => { + it("Ctrl keydown in viewMode does not toggle isBindingEnabled", () => { + API.setAppState({ + bindingPreference: "disabled", + isBindingEnabled: false, + viewModeEnabled: true, + }); + + ctrlKeyDown(); + + // Handler returns early in viewMode — state must stay false + expect(h.state.isBindingEnabled).toBe(false); + }); + }); +}); diff --git a/packages/excalidraw/tests/contextmenu.test.tsx b/packages/excalidraw/tests/contextmenu.test.tsx index 5bb7fee8e1..3aa50090a8 100644 --- a/packages/excalidraw/tests/contextmenu.test.tsx +++ b/packages/excalidraw/tests/contextmenu.test.tsx @@ -87,20 +87,17 @@ describe("contextMenu element", () => { clientY: 1, }); const contextMenu = UI.queryContextMenu(); - const contextMenuOptions = - contextMenu?.querySelectorAll(".context-menu li"); const expectedShortcutNames: ShortcutName[] = [ "paste", "selectAll", "gridMode", + "objectsSnapMode", "zenMode", "viewMode", - "objectsSnapMode", "stats", ]; expect(contextMenu).not.toBeNull(); - expect(contextMenuOptions?.length).toBe(expectedShortcutNames.length); expectedShortcutNames.forEach((shortcutName) => { expect( contextMenu?.querySelector(`li[data-testid="${shortcutName}"]`), diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index 07701e17bb..ac185ab563 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -223,6 +223,7 @@ export type InteractiveCanvasAppState = Readonly< multiElement: AppState["multiElement"]; newElement: AppState["newElement"]; isBindingEnabled: AppState["isBindingEnabled"]; + isMidpointSnappingEnabled: AppState["isMidpointSnappingEnabled"]; suggestedBinding: AppState["suggestedBinding"]; isRotating: AppState["isRotating"]; elementsToHighlight: AppState["elementsToHighlight"]; @@ -301,7 +302,15 @@ export interface AppState { * - set on pointer down, updated during pointer move */ selectionElement: NonDeletedExcalidrawElement | null; + /** + * tracking current arrow binding editor state (takes into account + * `bindingPreference` and keyboard modifiers (ctrl/alt) + */ isBindingEnabled: boolean; + /** user arrow binding preference */ + bindingPreference: "enabled" | "disabled"; + /** user preference whether arrow snap to midpoints while binding */ + isMidpointSnappingEnabled: boolean; startBoundElement: NonDeleted | null; suggestedBinding: { element: NonDeleted; diff --git a/packages/utils/tests/__snapshots__/export.test.ts.snap b/packages/utils/tests/__snapshots__/export.test.ts.snap index 8b239c7d04..affae46199 100644 --- a/packages/utils/tests/__snapshots__/export.test.ts.snap +++ b/packages/utils/tests/__snapshots__/export.test.ts.snap @@ -12,6 +12,7 @@ exports[`exportToSvg > with default arguments 1`] = ` "type": "selection", }, "bindMode": "orbit", + "bindingPreference": "enabled", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -58,6 +59,7 @@ exports[`exportToSvg > with default arguments 1`] = ` "isBindingEnabled": true, "isCropping": false, "isLoading": false, + "isMidpointSnappingEnabled": true, "isResizing": false, "isRotating": false, "lastPointerDownWith": "mouse", From d1cff91b75d48450430ec1260c498791c066b31f Mon Sep 17 00:00:00 2001 From: Hendrik Horstmann <65970327+heinrich26@users.noreply.github.com> Date: Tue, 3 Mar 2026 23:11:30 +0100 Subject: [PATCH 15/62] fix: spacing in the left menu (#10880) --- packages/excalidraw/components/Actions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx index 9372e2b243..be065d826d 100644 --- a/packages/excalidraw/components/Actions.tsx +++ b/packages/excalidraw/components/Actions.tsx @@ -226,7 +226,7 @@ export const SelectedShapeActions = ({ {(appState.activeTool.type === "text" || targetElements.some(isTextElement)) && ( <> - {renderAction("changeFontFamily")} +
{renderAction("changeFontFamily")}
{renderAction("changeFontSize")} {(appState.activeTool.type === "text" || suppportsHorizontalAlign(targetElements, elementsMap)) && From 47c254216b45b42e48a20de693ffc3ab15cff86f Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Wed, 4 Mar 2026 16:48:33 +0100 Subject: [PATCH 16/62] fix(editor): disable snap-to-midpoint menu item when arrow-binding disabled (#10885) --- .../components/dropdownMenu/DropdownMenu.scss | 15 +++++++++++++++ .../components/main-menu/DefaultItems.tsx | 1 + 2 files changed, 16 insertions(+) diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss index 939ef763ce..e207203d60 100644 --- a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss +++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss @@ -181,6 +181,21 @@ box-shadow: 0 0 0 1px var(--color-brand-active); } + &[disabled] { + cursor: not-allowed; + opacity: 0.5; + pointer-events: none; + + &:hover { + background-color: transparent; + } + + &:active { + background-color: transparent; + box-shadow: none; + } + } + svg { width: 1rem; height: 1rem; diff --git a/packages/excalidraw/components/main-menu/DefaultItems.tsx b/packages/excalidraw/components/main-menu/DefaultItems.tsx index 8865dfa7ae..9793b62e28 100644 --- a/packages/excalidraw/components/main-menu/DefaultItems.tsx +++ b/packages/excalidraw/components/main-menu/DefaultItems.tsx @@ -469,6 +469,7 @@ const PreferencesToggleMidpointSnappingItem = () => { return ( { actionManager.executeAction(actionToggleMidpointSnapping); event.preventDefault(); From c1dbbdf678c71b93f491ce344cc7ba773f654585 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Thu, 5 Mar 2026 18:52:41 +0100 Subject: [PATCH 17/62] feat(editor): mermaid code editor & improve parsing (#10897) --- excalidraw-app/vite.config.mts | 11 +- packages/common/src/utils.ts | 3 +- .../components/TTDDialog/CodeMirrorEditor.tsx | 239 ++++++++++++++++++ .../TTDDialog/MermaidToExcalidraw.tsx | 133 +++++++++- .../components/TTDDialog/TTDDialog.scss | 86 ++++++- .../components/TTDDialog/TTDDialogInput.tsx | 109 +++++++- .../components/TTDDialog/TTDDialogOutput.tsx | 73 +++++- .../components/TTDDialog/common.test.ts | 89 +++++++ .../excalidraw/components/TTDDialog/common.ts | 16 +- .../components/TTDDialog/mermaid-lang-lite.ts | 82 ++++++ .../TTDDialog/utils/mermaidAutoFix.test.ts | 116 +++++++++ .../TTDDialog/utils/mermaidAutoFix.ts | 175 +++++++++++++ .../TTDDialog/utils/mermaidError.test.ts | 155 ++++++++++++ .../TTDDialog/utils/mermaidError.ts | 133 ++++++++++ packages/excalidraw/locales/en.json | 3 +- packages/excalidraw/package.json | 7 +- .../tests/MermaidToExcalidraw.test.tsx | 10 +- .../MermaidToExcalidraw.test.tsx.snap | 9 +- yarn.lock | 86 ++++++- 19 files changed, 1490 insertions(+), 45 deletions(-) create mode 100644 packages/excalidraw/components/TTDDialog/CodeMirrorEditor.tsx create mode 100644 packages/excalidraw/components/TTDDialog/common.test.ts create mode 100644 packages/excalidraw/components/TTDDialog/mermaid-lang-lite.ts create mode 100644 packages/excalidraw/components/TTDDialog/utils/mermaidAutoFix.test.ts create mode 100644 packages/excalidraw/components/TTDDialog/utils/mermaidAutoFix.ts create mode 100644 packages/excalidraw/components/TTDDialog/utils/mermaidError.test.ts create mode 100644 packages/excalidraw/components/TTDDialog/utils/mermaidError.ts diff --git a/excalidraw-app/vite.config.mts b/excalidraw-app/vite.config.mts index a24d0939a6..fa8d63d956 100644 --- a/excalidraw-app/vite.config.mts +++ b/excalidraw-app/vite.config.mts @@ -106,6 +106,10 @@ export default defineConfig(({ mode }) => { if (id.includes("@excalidraw/mermaid-to-excalidraw")) { return "mermaid-to-excalidraw"; } + + if (id.includes("@codemirror/") || id.includes("@lezer/")) { + return "codemirror.chunk"; + } }, }, }, @@ -150,6 +154,11 @@ export default defineConfig(({ mode }) => { "**/locales/**", "service-worker.js", "**/*.chunk-*.js", + // CodeMirrorEditor can't be assigned a `.chunk` name via + // manualChunks because Rollup would hoist shared deps (React) + // via a static import from the main bundle, defeating lazy + // loading. So we exclude it by name instead. + "**/CodeMirrorEditor-*.js", ], runtimeCaching: [ { @@ -189,7 +198,7 @@ export default defineConfig(({ mode }) => { }, }, { - urlPattern: new RegExp(".chunk-.+.js"), + urlPattern: new RegExp("(.chunk-.+|CodeMirrorEditor-.+)\\.js"), handler: "CacheFirst", options: { cacheName: "chunk", diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts index 5bafa41813..6d3858a00d 100644 --- a/packages/common/src/utils.ts +++ b/packages/common/src/utils.ts @@ -88,7 +88,8 @@ export const isWritableElement = ( (target.type === "text" || target.type === "number" || target.type === "password" || - target.type === "search")); + target.type === "search")) || + (target instanceof HTMLElement && target.closest(".cm-editor") !== null); export const getFontFamilyString = ({ fontFamily, diff --git a/packages/excalidraw/components/TTDDialog/CodeMirrorEditor.tsx b/packages/excalidraw/components/TTDDialog/CodeMirrorEditor.tsx new file mode 100644 index 0000000000..d6866a6121 --- /dev/null +++ b/packages/excalidraw/components/TTDDialog/CodeMirrorEditor.tsx @@ -0,0 +1,239 @@ +import { useEffect, useRef } from "react"; +import { + Decoration, + EditorView, + keymap, + lineNumbers, + placeholder as cmPlaceholder, + drawSelection, +} from "@codemirror/view"; +import { Compartment, EditorState, type Extension } from "@codemirror/state"; +import { + defaultKeymap, + history, + historyKeymap, + redo, +} from "@codemirror/commands"; +import { syntaxHighlighting, HighlightStyle } from "@codemirror/language"; +import { tags } from "@lezer/highlight"; + +import type { Theme } from "@excalidraw/element/types"; + +import { mermaidLite } from "./mermaid-lang-lite"; + +export interface CodeMirrorEditorProps { + value: string; + onChange: (value: string) => void; + onKeyboardSubmit?: () => void; + placeholder?: string; + theme: Theme; + errorLine?: number | null; +} + +// ---- Dark theme ---- + +const darkTheme = EditorView.theme( + { + "&": { + backgroundColor: "#1e1e1e", + color: "#d4d4d4", + }, + ".cm-content": { caretColor: "#fff" }, + ".cm-cursor": { borderLeftColor: "#fff" }, + ".cm-gutters": { + backgroundColor: "#1e1e1e", + color: "#858585", + border: "none", + }, + ".cm-activeLineGutter": { backgroundColor: "#2a2a2a" }, + ".cm-activeLine": { backgroundColor: "#2a2a2a" }, + ".cm-errorLine": { backgroundColor: "rgba(255, 0, 0, 0.15)" }, + }, + { dark: true }, +); + +const darkHighlight = HighlightStyle.define([ + { tag: tags.keyword, color: "#569cd6" }, + { tag: tags.string, color: "#ce9178" }, + { tag: tags.comment, color: "#6a9955" }, + { tag: tags.number, color: "#b5cea8" }, + { tag: tags.operator, color: "#d4d4d4" }, + { tag: tags.punctuation, color: "#d4d4d4" }, + { tag: tags.variableName, color: "#9cdcfe" }, + { tag: tags.bracket, color: "#ffd700" }, +]); + +// ---- Light theme ---- + +const lightTheme = EditorView.theme({ + "&": { + backgroundColor: "#ffffff", + color: "#1e1e1e", + }, + ".cm-content": { caretColor: "#000" }, + ".cm-cursor": { borderLeftColor: "#000" }, + ".cm-gutters": { + backgroundColor: "#fff", + color: "#999", + border: "none", + }, + ".cm-activeLineGutter": { backgroundColor: "#e8e8e8" }, + ".cm-activeLine": { backgroundColor: "#e8e8e8" }, + ".cm-errorLine": { backgroundColor: "rgba(255, 0, 0, 0.1)" }, +}); + +const lightHighlight = HighlightStyle.define([ + { tag: tags.keyword, color: "#0000ff" }, + { tag: tags.string, color: "#a31515" }, + { tag: tags.comment, color: "#008000" }, + { tag: tags.number, color: "#098658" }, + { tag: tags.operator, color: "#1e1e1e" }, + { tag: tags.punctuation, color: "#1e1e1e" }, + { tag: tags.variableName, color: "#001080" }, + { tag: tags.bracket, color: "#af00db" }, +]); + +// ---- Error line decoration ---- + +const errorLineDeco = Decoration.line({ class: "cm-errorLine" }); + +const getErrorLineExtension = ( + errorLine: number | null | undefined, + doc: { line(n: number): { from: number }; lines: number }, +): Extension => { + if (!errorLine || errorLine < 1 || errorLine > doc.lines) { + return EditorView.decorations.of(Decoration.none); + } + const line = doc.line(errorLine); + return EditorView.decorations.of( + Decoration.set([errorLineDeco.range(line.from)]), + ); +}; + +// ---- Helpers ---- + +const getThemeExtensions = (theme: Theme) => { + if (theme === "dark") { + return [darkTheme, syntaxHighlighting(darkHighlight)]; + } + return [lightTheme, syntaxHighlighting(lightHighlight)]; +}; + +const CodeMirrorEditor = ({ + value, + onChange, + onKeyboardSubmit, + placeholder, + theme, + errorLine, +}: CodeMirrorEditorProps) => { + const containerRef = useRef(null); + const viewRef = useRef(null); + const onChangeRef = useRef(onChange); + const onKeyboardSubmitRef = useRef(onKeyboardSubmit); + const themeCompartmentRef = useRef(new Compartment()); + const errorLineCompartmentRef = useRef(new Compartment()); + + onChangeRef.current = onChange; + onKeyboardSubmitRef.current = onKeyboardSubmit; + + useEffect(() => { + if (!containerRef.current) { + return; + } + + const themeCompartment = themeCompartmentRef.current; + + const view = new EditorView({ + state: EditorState.create({ + doc: value, + extensions: [ + keymap.of([ + { + key: "Mod-Enter", + run: () => { + onKeyboardSubmitRef.current?.(); + return true; + }, + }, + // historyKeymap binds Mod-Shift-z only on Mac; add it for all platforms + { key: "Mod-Shift-z", run: redo, preventDefault: true }, + ]), + EditorView.updateListener.of((update) => { + if (update.docChanged) { + onChangeRef.current(update.state.doc.toString()); + } + }), + history(), + keymap.of([...defaultKeymap, ...historyKeymap]), + lineNumbers(), + EditorView.lineWrapping, + themeCompartment.of(getThemeExtensions(theme)), + errorLineCompartmentRef.current.of([]), + mermaidLite(), + drawSelection({ drawRangeCursor: true }), + ...(placeholder ? [cmPlaceholder(placeholder)] : []), + ], + }), + parent: containerRef.current, + }); + + viewRef.current = view; + view.focus(); + + return () => { + view.destroy(); + viewRef.current = null; + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + // Swap theme dynamically via compartment + useEffect(() => { + const view = viewRef.current; + if (!view) { + return; + } + view.dispatch({ + effects: themeCompartmentRef.current.reconfigure( + getThemeExtensions(theme), + ), + }); + }, [theme]); + + // Update error line highlight + useEffect(() => { + const view = viewRef.current; + if (!view) { + return; + } + view.dispatch({ + effects: errorLineCompartmentRef.current.reconfigure( + getErrorLineExtension(errorLine, view.state.doc), + ), + }); + }, [errorLine]); + + // Sync external value changes into EditorView + useEffect(() => { + const view = viewRef.current; + if (!view) { + return; + } + const currentDoc = view.state.doc.toString(); + if (value !== currentDoc) { + view.dispatch({ + changes: { from: 0, to: currentDoc.length, insert: value }, + }); + } + }, [value]); + + return ( +
+ ); +}; + +export default CodeMirrorEditor; diff --git a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx index baa1298026..5f98637f47 100644 --- a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx +++ b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx @@ -17,6 +17,11 @@ import { TTDDialogOutput } from "./TTDDialogOutput"; import { TTDDialogPanel } from "./TTDDialogPanel"; import { TTDDialogPanels } from "./TTDDialogPanels"; import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut"; +import { + getMermaidErrorLineNumber, + isMermaidAutoFixableError, +} from "./utils/mermaidError"; +import { getMermaidAutoFixCandidates } from "./utils/mermaidAutoFix"; import { convertMermaidToExcalidraw, insertToEditor, @@ -33,6 +38,27 @@ const MERMAID_EXAMPLE = "flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]"; const debouncedSaveMermaidDefinition = debounce(saveMermaidDataToStorage, 300); +const AUTO_FIX_DEBOUNCE_MS = 500; +const AUTO_FIX_MAX_DEPTH = 4; +const AUTO_FIX_MAX_CANDIDATES = 30; + +const getErrorMessage = (error: unknown): string => { + if (error instanceof Error) { + return error.message; + } + if (typeof error === "string") { + return error; + } + if ( + error && + typeof error === "object" && + "message" in error && + typeof (error as { message?: unknown }).message === "string" + ) { + return (error as { message: string }).message; + } + return ""; +}; const MermaidToExcalidraw = ({ mermaidToExcalidrawLib, @@ -46,8 +72,16 @@ const MermaidToExcalidraw = ({ EditorLocalStorage.get(EDITOR_LS_KEYS.MERMAID_TO_EXCALIDRAW) || MERMAID_EXAMPLE, ); - const deferredText = useDeferredValue(text.trim()); + const deferredText = useDeferredValue(text); const [error, setError] = useState(null); + const [autoFixCandidate, setAutoFixCandidate] = useState(null); + + const errorLine = (() => { + if (!error?.message) { + return null; + } + return getMermaidErrorLineNumber(error.message, deferredText); + })(); const canvasRef = useRef(null); const data = useRef<{ @@ -61,7 +95,7 @@ const MermaidToExcalidraw = ({ useEffect(() => { const doRender = async () => { try { - if (!deferredText) { + if (!deferredText.trim()) { resetPreview({ canvasRef, setError }); return; } @@ -98,6 +132,88 @@ const MermaidToExcalidraw = ({ [], ); + useEffect(() => { + const errorMessage = error?.message ?? ""; + const sourceText = deferredText; + const shouldTryAutoFix = + isActive && + isMermaidAutoFixableError(errorMessage) && + !!sourceText.trim() && + mermaidToExcalidrawLib.loaded; + + if (!shouldTryAutoFix) { + setAutoFixCandidate(null); + return; + } + + const candidates = getMermaidAutoFixCandidates(sourceText, errorMessage); + if (!candidates.length) { + setAutoFixCandidate(null); + return; + } + + let cancelled = false; + const timer = setTimeout(async () => { + try { + const api = await mermaidToExcalidrawLib.api; + const seen = new Set([sourceText]); + const queue = candidates.map((candidate) => ({ + text: candidate, + depth: 1, + })); + + let triedCandidates = 0; + + while (queue.length > 0 && triedCandidates < AUTO_FIX_MAX_CANDIDATES) { + const current = queue.shift(); + if (!current || seen.has(current.text)) { + continue; + } + seen.add(current.text); + triedCandidates += 1; + + try { + await api.parseMermaidToExcalidraw(current.text); + if (!cancelled) { + setAutoFixCandidate(current.text); + } + return; + } catch (candidateError) { + if (current.depth >= AUTO_FIX_MAX_DEPTH) { + continue; + } + const nextErrorMessage = getErrorMessage(candidateError); + if (!nextErrorMessage) { + continue; + } + const nextCandidates = getMermaidAutoFixCandidates( + current.text, + nextErrorMessage, + ); + for (const nextCandidate of nextCandidates) { + if (!seen.has(nextCandidate)) { + queue.push({ + text: nextCandidate, + depth: current.depth + 1, + }); + } + } + } + } + } catch { + // ignore auto-fix probe errors + } + if (!cancelled) { + setAutoFixCandidate(null); + } + }, AUTO_FIX_DEBOUNCE_MS); + + return () => { + cancelled = true; + clearTimeout(timer); + }; + }, [deferredText, error?.message, isActive, mermaidToExcalidrawLib]); + const onInsertToEditor = () => { insertToEditor({ app, @@ -107,6 +223,13 @@ const MermaidToExcalidraw = ({ }); }; + const onApplyAutoFix = () => { + if (!autoFixCandidate) { + return; + } + setText(autoFixCandidate); + }; + return ( <>
@@ -130,7 +253,8 @@ const MermaidToExcalidraw = ({ setText(event.target.value)} + onChange={(value) => setText(value)} + errorLine={errorLine} onKeyboardSubmit={() => { onInsertToEditor(); }} @@ -153,6 +277,9 @@ const MermaidToExcalidraw = ({ canvasRef={canvasRef} loaded={mermaidToExcalidrawLib.loaded} error={error} + sourceText={text} + autoFixAvailable={!!autoFixCandidate} + onApplyAutoFix={onApplyAutoFix} /> diff --git a/packages/excalidraw/components/TTDDialog/TTDDialog.scss b/packages/excalidraw/components/TTDDialog/TTDDialog.scss index 3d133c5baf..e2ba3d1a8e 100644 --- a/packages/excalidraw/components/TTDDialog/TTDDialog.scss +++ b/packages/excalidraw/components/TTDDialog/TTDDialog.scss @@ -219,6 +219,49 @@ $fullScreenModalBreakpoint: 600px; } } + .ttd-dialog-input--loading { + display: flex; + align-items: center; + justify-content: center; + } + + .ttd-dialog-input--codemirror { + padding: 0; + overflow: hidden; + // Override height:100% from .ttd-dialog-input — use flex sizing + // so the editor fills remaining space without overflowing the panel + height: 0; + flex: 1 1 0; + min-height: 0; + + .cm-editor { + height: 100%; + font-family: monospace; + + &.cm-focused { + outline: none; + } + } + + .cm-scroller { + padding: 0.85rem 0; + overflow: auto; + } + + .cm-gutters { + padding-left: 0.25rem; + } + + .cm-content { + padding: 0; + } + + .cm-placeholder { + color: var(--color-gray-40); + font-style: italic; + } + } + .ttd-dialog-output-wrapper { display: flex; flex-direction: column; @@ -331,14 +374,55 @@ $fullScreenModalBreakpoint: 600px; margin-top: 0.25rem; } + .ttd-dialog-output-error-summary { + width: 100%; + max-width: 640px; + color: var(--color-gray-50); + font-size: 0.9rem; + text-align: left; + + &__headline { + font-weight: 600; + color: var(--color-gray-60); + } + + &__label { + margin-top: 0.35rem; + font-weight: 500; + } + + &__causes { + margin: 0.35rem 0 0; + padding-left: 2rem; + } + } + .ttd-dialog-output-error-message { text-align: left; font-weight: 400; color: var(--color-gray-50); word-break: break-word; white-space: pre-wrap; - max-width: 100%; + max-width: 640px; + width: 100%; font-family: monospace; + + &__caret { + color: var(--color-danger); + } + } + + .ttd-dialog-output-error-autofix-slot { + align-self: flex-start; + margin-top: 0.35rem; + min-height: 2.5rem; + display: flex; + align-items: flex-start; + } + + .ttd-dialog-output-error-autofix { + margin-top: 0; + white-space: nowrap; } } diff --git a/packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx b/packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx index 24427d52d5..3a14a9fd56 100644 --- a/packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx +++ b/packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx @@ -1,28 +1,84 @@ -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { EVENT, KEYS } from "@excalidraw/common"; -import type { ChangeEventHandler } from "react"; +import Spinner from "../Spinner"; + +import { useUIAppState } from "../../context/ui-appState"; + +import type { ComponentType } from "react"; +import type { CodeMirrorEditorProps } from "./CodeMirrorEditor"; interface TTDDialogInputProps { input: string; placeholder: string; - onChange: ChangeEventHandler; + onChange: (value: string) => void; onKeyboardSubmit?: () => void; + errorLine?: number | null; } +type EditorState = + | { type: "loading" } + | { type: "ready"; component: ComponentType } + | { type: "fallback" }; + +const SPINNER_DELAY_MS = 300; + export const TTDDialogInput = ({ input, placeholder, onChange, onKeyboardSubmit, + errorLine, }: TTDDialogInputProps) => { const ref = useRef(null); const callbackRef = useRef(onKeyboardSubmit); callbackRef.current = onKeyboardSubmit; + const [editorState, setEditorState] = useState({ + type: "loading", + }); + const [showSpinner, setShowSpinner] = useState(false); + + const { theme } = useUIAppState(); + + // Lazy-load CodeMirror editor useEffect(() => { + let cancelled = false; + + const spinnerTimer = setTimeout(() => { + if (!cancelled) { + setShowSpinner(true); + } + }, SPINNER_DELAY_MS); + + import("./CodeMirrorEditor") + .then((mod) => { + if (!cancelled) { + setEditorState({ type: "ready", component: mod.default }); + } + }) + .catch(() => { + if (!cancelled) { + setEditorState({ type: "fallback" }); + } + }) + .finally(() => { + clearTimeout(spinnerTimer); + }); + + return () => { + cancelled = true; + clearTimeout(spinnerTimer); + }; + }, []); + + // Keyboard shortcut + focus for textarea fallback + useEffect(() => { + if (editorState.type !== "fallback") { + return; + } if (!callbackRef.current) { return; } @@ -40,15 +96,42 @@ export const TTDDialogInput = ({ textarea.removeEventListener(EVENT.KEYDOWN, handleKeyDown); }; } - }, []); + }, [editorState.type]); - return ( -
Ctrl
Enter
" -`; +exports[`Test > should open mermaid popup when active tool is mermaid 1`] = `""`; exports[`Test > should show error in preview when mermaid library throws error 1`] = ` "flowchart TD diff --git a/yarn.lock b/yarn.lock index 11de59df7d..5259da6288 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1095,6 +1095,45 @@ resolved "https://registry.yarnpkg.com/@chevrotain/utils/-/utils-11.0.3.tgz#e39999307b102cff3645ec4f5b3665f5297a2224" integrity sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ== +"@codemirror/commands@^6.0.0": + version "6.10.2" + resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.10.2.tgz#338bf53ab146de7bb26da4a1d32c6a6ff4d36b39" + integrity sha512-vvX1fsih9HledO1c9zdotZYUZnE4xV0m6i3m25s5DIfXofuprk6cRcLUZvSk3CASUbwjQX21tOGbkY2BH8TpnQ== + dependencies: + "@codemirror/language" "^6.0.0" + "@codemirror/state" "^6.4.0" + "@codemirror/view" "^6.27.0" + "@lezer/common" "^1.1.0" + +"@codemirror/language@^6.0.0": + version "6.12.2" + resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.12.2.tgz#7db5a46757411cf251e8f450474c05710c27d42c" + integrity sha512-jEPmz2nGGDxhRTg3lTpzmIyGKxz3Gp3SJES4b0nAuE5SWQoKdT5GoQ69cwMmFd+wvFUhYirtDTr0/DRHpQAyWg== + dependencies: + "@codemirror/state" "^6.0.0" + "@codemirror/view" "^6.23.0" + "@lezer/common" "^1.5.0" + "@lezer/highlight" "^1.0.0" + "@lezer/lr" "^1.0.0" + style-mod "^4.0.0" + +"@codemirror/state@^6.0.0", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0": + version "6.5.4" + resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.5.4.tgz#f5be4b8c0d2310180d5f15a9f641c21ca69faf19" + integrity sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw== + dependencies: + "@marijn/find-cluster-break" "^1.0.0" + +"@codemirror/view@^6.0.0", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0": + version "6.39.16" + resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.39.16.tgz#e9d876aba20b31df7858abd7c2a845319c70b302" + integrity sha512-m6S22fFpKtOWhq8HuhzsI1WzUP/hB9THbDj0Tl5KX4gbO6Y91hwBl7Yky33NdvB6IffuRFiBxf1R8kJMyXmA4Q== + dependencies: + "@codemirror/state" "^6.5.0" + crelt "^1.0.6" + style-mod "^4.1.0" + w3c-keyname "^2.2.4" + "@esbuild/aix-ppc64@0.19.10": version "0.19.10" resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.10.tgz#fb3922a0183d27446de00cf60d4f7baaadf98d84" @@ -1492,10 +1531,10 @@ resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb" integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg== -"@excalidraw/mermaid-to-excalidraw@2.0.0-rfc3": - version "2.0.0-rfc3" - resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.0.0-rfc3.tgz#2aed27280b135086d3d23878e66751819f47c3d4" - integrity sha512-OlKySL2aZwxgvO0wKpjq5fNNWWYwYGQAVMqwG3CJZ/zEf9NotTtX+Rl/WgL6qWvNgDq8/mavOnEstC+42gqnIQ== +"@excalidraw/mermaid-to-excalidraw@2.0.0-rc4": + version "2.0.0-rc4" + resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.0.0-rc4.tgz#9d38568de8e403fefb6a162efa71e024ea1f7e03" + integrity sha512-92efu7VTYF6appGKgbDJAZEM/YXICpYPYOfl+j1E9SVilIFCJEAg7xH2lt/c44WFtffG+rWKrYwf9KUrPYy1Qw== dependencies: "@excalidraw/markdown-to-text" "0.1.2" "@mermaid-js/parser" "^0.6.3" @@ -2045,6 +2084,30 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" +"@lezer/common@^1.0.0", "@lezer/common@^1.1.0", "@lezer/common@^1.3.0", "@lezer/common@^1.5.0": + version "1.5.1" + resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.5.1.tgz#6e8c114ff5d36a41148e146a253734d3bb8807d3" + integrity sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw== + +"@lezer/highlight@^1.0.0": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.2.3.tgz#a20f324b71148a2ea9ba6ff42e58bbfaec702857" + integrity sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g== + dependencies: + "@lezer/common" "^1.3.0" + +"@lezer/lr@^1.0.0": + version "1.4.8" + resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.4.8.tgz#333de9bc9346057323ff09beb4cda47ccc38a498" + integrity sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA== + dependencies: + "@lezer/common" "^1.0.0" + +"@marijn/find-cluster-break@^1.0.0": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz#775374306116d51c0c500b8c4face0f9a04752d8" + integrity sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g== + "@mermaid-js/parser@^0.6.3": version "0.6.3" resolved "https://registry.yarnpkg.com/@mermaid-js/parser/-/parser-0.6.3.tgz#3ce92dad2c5d696d29e11e21109c66a7886c824e" @@ -4968,6 +5031,11 @@ crc-32@^0.3.0: resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-0.3.0.tgz#6a3d3687f5baec41f7e9b99fe1953a2e5d19775e" integrity sha512-kucVIjOmMc1f0tv53BJ/5WIX+MGLcKuoBhnGqQrgKJNqLByb/sVMWfW/Aw6hw0jgcqjJ2pi9E5y32zOIpaUlsA== +crelt@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72" + integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g== + cross-env@7.0.3: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf" @@ -9520,6 +9588,11 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +style-mod@^4.0.0, style-mod@^4.1.0: + version "4.1.3" + resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.1.3.tgz#6e9012255bb799bdac37e288f7671b5d71bf9f73" + integrity sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ== + styled-jsx@5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f" @@ -10269,6 +10342,11 @@ vscode-uri@~3.0.8: resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.8.tgz#1770938d3e72588659a172d0fd4642780083ff9f" integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw== +w3c-keyname@^2.2.4: + version "2.2.8" + resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5" + integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ== + w3c-xmlserializer@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073" From 499e9d64a58b5641eb1d41678d922ea3010800ce Mon Sep 17 00:00:00 2001 From: Hendrik Horstmann <65970327+heinrich26@users.noreply.github.com> Date: Fri, 6 Mar 2026 09:41:49 +0100 Subject: [PATCH 18/62] fix: dropdownMenu item badge position (#10895) --- packages/excalidraw/components/MobileToolBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/excalidraw/components/MobileToolBar.tsx b/packages/excalidraw/components/MobileToolBar.tsx index e439061217..7b541bb311 100644 --- a/packages/excalidraw/components/MobileToolBar.tsx +++ b/packages/excalidraw/components/MobileToolBar.tsx @@ -472,9 +472,9 @@ export const MobileToolBar = ({ onSelect={() => app.onMagicframeToolSelect()} icon={MagicIcon} data-testid="toolbar-magicframe" + badge={AI} > {t("toolBar.magicframe")} - AI )} From a0e93b60402f543ffb5c845dafd29d95d2f0ffc6 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Fri, 6 Mar 2026 18:37:28 +0100 Subject: [PATCH 19/62] feat(editor): sync export theme with ui theme (#10903) --- packages/excalidraw/actions/actionExport.tsx | 3 +- packages/excalidraw/components/App.tsx | 9 +++ .../components/ImageExportDialog.tsx | 63 ++++++++++++------- .../__snapshots__/excalidraw.test.tsx.snap | 4 +- packages/excalidraw/tests/excalidraw.test.tsx | 51 ++++++++++++++- packages/excalidraw/types.ts | 1 + 6 files changed, 106 insertions(+), 25 deletions(-) diff --git a/packages/excalidraw/actions/actionExport.tsx b/packages/excalidraw/actions/actionExport.tsx index e47a5bb84c..453a0be1f7 100644 --- a/packages/excalidraw/actions/actionExport.tsx +++ b/packages/excalidraw/actions/actionExport.tsx @@ -300,7 +300,8 @@ export const actionExportWithDarkMode = register< name: "exportWithDarkMode", label: "imageExportDialog.label.darkMode", trackEvent: { category: "export", action: "toggleTheme" }, - perform: (_elements, appState, value) => { + perform: (_elements, appState, value, app) => { + app.sessionExportThemeOverride = value ? THEME.DARK : THEME.LIGHT; return { appState: { ...appState, exportWithDarkMode: value }, captureUpdate: CaptureUpdateAction.EVENTUALLY, diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 0b361e0e70..75b850f8c2 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -595,6 +595,7 @@ const gesture: Gesture = { class App extends React.Component { canvas: AppClassProperties["canvas"]; interactiveCanvas: AppClassProperties["interactiveCanvas"] = null; + public sessionExportThemeOverride: AppState["theme"] | undefined; rc: RoughCanvas; unmounted: boolean = false; actionManager: ActionManager; @@ -710,6 +711,7 @@ class App extends React.Component { this.state = { ...defaultAppState, theme, + exportWithDarkMode: theme === THEME.DARK, isLoading: true, ...this.getCanvasOffsets(), viewModeEnabled, @@ -3241,6 +3243,13 @@ class App extends React.Component { const elements = this.scene.getElementsIncludingDeleted(); const elementsMap = this.scene.getElementsMapIncludingDeleted(); + const shouldExportWithDarkMode = + (this.sessionExportThemeOverride ?? this.state.theme) === THEME.DARK; + + if (this.state.exportWithDarkMode !== shouldExportWithDarkMode) { + this.setState({ exportWithDarkMode: shouldExportWithDarkMode }); + } + if (!this.state.showWelcomeScreen && !elements.length) { this.setState({ showWelcomeScreen: true }); } diff --git a/packages/excalidraw/components/ImageExportDialog.tsx b/packages/excalidraw/components/ImageExportDialog.tsx index 18831fa08e..48afbaa966 100644 --- a/packages/excalidraw/components/ImageExportDialog.tsx +++ b/packages/excalidraw/components/ImageExportDialog.tsx @@ -59,6 +59,7 @@ type ImageExportModalProps = { actionManager: ActionManager; onExportImage: AppClassProperties["onExportImage"]; name: string; + exportWithDarkMode: boolean; }; const ImageExportModal = ({ @@ -68,6 +69,7 @@ const ImageExportModal = ({ actionManager, onExportImage, name, + exportWithDarkMode, }: ImageExportModalProps) => { const hasSelection = isSomeElementSelected( elementsSnapshot, @@ -79,15 +81,13 @@ const ImageExportModal = ({ const [exportWithBackground, setExportWithBackground] = useState( appStateSnapshot.exportBackground, ); - const [exportDarkMode, setExportDarkMode] = useState( - appStateSnapshot.exportWithDarkMode, - ); const [embedScene, setEmbedScene] = useState( appStateSnapshot.exportEmbedScene, ); const [exportScale, setExportScale] = useState(appStateSnapshot.exportScale); const previewRef = useRef(null); + const previewRenderRequestIdRef = useRef(0); const [renderError, setRenderError] = useState(null); const { onCopy, copyStatus, resetCopyStatus } = useCopyStatus(); @@ -99,7 +99,7 @@ const ImageExportModal = ({ }, [ projectName, exportWithBackground, - exportDarkMode, + exportWithDarkMode, exportScale, embedScene, resetCopyStatus, @@ -122,13 +122,18 @@ const ImageExportModal = ({ return; } + const requestId = ++previewRenderRequestIdRef.current; + const isStaleRequest = () => { + return requestId !== previewRenderRequestIdRef.current; + }; + exportToCanvas({ elements: exportedElements, appState: { ...appStateSnapshot, name: projectName, exportBackground: exportWithBackground, - exportWithDarkMode: exportDarkMode, + exportWithDarkMode, exportScale, exportEmbedScene: embedScene, }, @@ -137,25 +142,41 @@ const ImageExportModal = ({ maxWidthOrHeight: Math.max(maxWidth, maxHeight), exportingFrame, }) - .then((canvas) => { + .then(async (canvas) => { + if (isStaleRequest()) { + return; + } + + // If converting to blob fails, there's some problem that will likely + // prevent preview and export (e.g. canvas too big). + try { + await canvasToBlob(canvas); + } catch (error: any) { + if (error.name === "CANVAS_POSSIBLY_TOO_BIG") { + throw new Error(t("canvasError.canvasTooBig")); + } + throw error; + } + + if (isStaleRequest()) { + return; + } + setRenderError(null); - // if converting to blob fails, there's some problem that will - // likely prevent preview and export (e.g. canvas too big) - return canvasToBlob(canvas) - .then(() => { - previewNode.replaceChildren(canvas); - }) - .catch((e) => { - if (e.name === "CANVAS_POSSIBLY_TOO_BIG") { - throw new Error(t("canvasError.canvasTooBig")); - } - throw e; - }); + previewNode.replaceChildren(canvas); }) .catch((error) => { + if (isStaleRequest()) { + return; + } + console.error(error); setRenderError(error); }); + + return () => { + previewRenderRequestIdRef.current += 1; + }; }, [ appStateSnapshot, files, @@ -163,7 +184,7 @@ const ImageExportModal = ({ exportingFrame, projectName, exportWithBackground, - exportDarkMode, + exportWithDarkMode, exportScale, embedScene, ]); @@ -233,9 +254,8 @@ const ImageExportModal = ({ > { - setExportDarkMode(checked); actionManager.executeAction( actionExportWithDarkMode, "ui", @@ -399,6 +419,7 @@ export const ImageExportDialog = ({ actionManager={actionManager} onExportImage={onExportImage} name={name} + exportWithDarkMode={appState.exportWithDarkMode} /> ); diff --git a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap index ef0fb47e64..2ed8bc1c53 100644 --- a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap @@ -2,7 +2,7 @@ exports[` > > should render main menu with host menu items if passed from host 1`] = `
> > should render main menu with host menu it data-state="open" data-testid="dropdown-menu" dir="ltr" - id="radix-:r7u:" + id="radix-:r86:" role="menu" style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" tabindex="-1" diff --git a/packages/excalidraw/tests/excalidraw.test.tsx b/packages/excalidraw/tests/excalidraw.test.tsx index 34135c618d..8c365dc0d3 100644 --- a/packages/excalidraw/tests/excalidraw.test.tsx +++ b/packages/excalidraw/tests/excalidraw.test.tsx @@ -6,8 +6,16 @@ import { THEME } from "@excalidraw/common"; import { t } from "../i18n"; import { Excalidraw, Footer, MainMenu } from "../index"; +import { actionExportWithDarkMode } from "../actions/actionExport"; -import { fireEvent, GlobalTestState, toggleMenu, render } from "./test-utils"; +import { + act, + fireEvent, + GlobalTestState, + toggleMenu, + render, + waitFor, +} from "./test-utils"; const { h } = window; @@ -304,6 +312,47 @@ describe("", () => { const darkModeToggle = queryByTestId(container, "toggle-dark-mode"); expect(darkModeToggle).toBe(null); }); + + it("should sync export theme with the UI theme when there is no session override", async () => { + await render(); + + expect(h.state.exportWithDarkMode).toBe(true); + + act(() => { + h.setState({ exportWithDarkMode: false }); + }); + + await waitFor(() => { + expect(h.state.exportWithDarkMode).toBe(true); + }); + }); + + it("should keep the export theme override for the current session", async () => { + await render(); + + act(() => { + (h.app as any).actionManager.executeAction( + actionExportWithDarkMode, + "ui", + true, + ); + }); + + expect(h.app.sessionExportThemeOverride).toBe(THEME.DARK); + expect(h.state.exportWithDarkMode).toBe(true); + + act(() => { + h.setState({ theme: THEME.DARK }); + }); + + act(() => { + h.setState({ theme: THEME.LIGHT }); + }); + + await waitFor(() => { + expect(h.state.exportWithDarkMode).toBe(true); + }); + }); }); describe("Test name prop", () => { diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index ac185ab563..0b654386bf 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -719,6 +719,7 @@ export type AppProps = Merge< export type AppClassProperties = { props: AppProps; state: AppState; + sessionExportThemeOverride: App["sessionExportThemeOverride"]; interactiveCanvas: HTMLCanvasElement | null; /** static canvas */ canvas: HTMLCanvasElement; From 757dfeb6ad64c2c58db8ce356a54e3f440e433c4 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Fri, 6 Mar 2026 20:40:36 +0100 Subject: [PATCH 20/62] fix(editor): call throttleRAF with lastArgs and remove trailing (#10905) Co-authored-by: Varun Chawla Co-authored-by: aziamimoh Co-authored-by: pgzcoa Co-authored-by: TinaZhang24 --- excalidraw-app/components/DebugCanvas.tsx | 1 - packages/common/src/utils.ts | 29 +++++++------------ .../renderer/renderNewElementScene.ts | 1 - packages/excalidraw/renderer/staticScene.ts | 1 - 4 files changed, 11 insertions(+), 21 deletions(-) diff --git a/excalidraw-app/components/DebugCanvas.tsx b/excalidraw-app/components/DebugCanvas.tsx index 2c157e34e7..d9279296f7 100644 --- a/excalidraw-app/components/DebugCanvas.tsx +++ b/excalidraw-app/components/DebugCanvas.tsx @@ -414,7 +414,6 @@ export const debugRenderer = throttleRAF( ) => { _debugRenderer(canvas, appState, elements, scale); }, - { trailing: true }, ); export const loadSavedDebugState = () => { diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts index 6d3858a00d..26c75dcfa2 100644 --- a/packages/common/src/utils.ts +++ b/packages/common/src/utils.ts @@ -151,24 +151,19 @@ export const debounce = ( return ret; }; -// throttle callback to execute once per animation frame -export const throttleRAF = ( - fn: (...args: T) => void, - opts?: { trailing?: boolean }, -) => { +// throttle callback to execute once per animation frame using the latest args +export const throttleRAF = (fn: (...args: T) => void) => { let timerId: number | null = null; let lastArgs: T | null = null; - let lastArgsTrailing: T | null = null; - const scheduleFunc = (args: T) => { + const scheduleFunc = () => { timerId = window.requestAnimationFrame(() => { timerId = null; - fn(...args); + const args = lastArgs; lastArgs = null; - if (lastArgsTrailing) { - lastArgs = lastArgsTrailing; - lastArgsTrailing = null; - scheduleFunc(lastArgs); + + if (args) { + fn(...args); } }); }; @@ -180,9 +175,7 @@ export const throttleRAF = ( } lastArgs = args; if (timerId === null) { - scheduleFunc(lastArgs); - } else if (opts?.trailing) { - lastArgsTrailing = args; + scheduleFunc(); } }; ret.flush = () => { @@ -191,12 +184,12 @@ export const throttleRAF = ( timerId = null; } if (lastArgs) { - fn(...(lastArgsTrailing || lastArgs)); - lastArgs = lastArgsTrailing = null; + fn(...lastArgs); + lastArgs = null; } }; ret.cancel = () => { - lastArgs = lastArgsTrailing = null; + lastArgs = null; if (timerId !== null) { cancelAnimationFrame(timerId); timerId = null; diff --git a/packages/excalidraw/renderer/renderNewElementScene.ts b/packages/excalidraw/renderer/renderNewElementScene.ts index 07215dfc07..31aa721329 100644 --- a/packages/excalidraw/renderer/renderNewElementScene.ts +++ b/packages/excalidraw/renderer/renderNewElementScene.ts @@ -88,7 +88,6 @@ export const renderNewElementSceneThrottled = throttleRAF( (config: NewElementSceneRenderConfig) => { _renderNewElementScene(config); }, - { trailing: true }, ); export const renderNewElementScene = ( diff --git a/packages/excalidraw/renderer/staticScene.ts b/packages/excalidraw/renderer/staticScene.ts index 83e45a1227..48c72f8d37 100644 --- a/packages/excalidraw/renderer/staticScene.ts +++ b/packages/excalidraw/renderer/staticScene.ts @@ -483,7 +483,6 @@ export const renderStaticSceneThrottled = throttleRAF( (config: StaticSceneRenderConfig) => { _renderStaticScene(config); }, - { trailing: true }, ); /** From 3d8c12fba475bad8ebee4c238466c59f08a5458c Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Fri, 6 Mar 2026 20:44:57 +0100 Subject: [PATCH 21/62] fix(editor): do not conditionally disable midpoint snapping menu preference (#10906) --- packages/excalidraw/components/main-menu/DefaultItems.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/excalidraw/components/main-menu/DefaultItems.tsx b/packages/excalidraw/components/main-menu/DefaultItems.tsx index 9793b62e28..8865dfa7ae 100644 --- a/packages/excalidraw/components/main-menu/DefaultItems.tsx +++ b/packages/excalidraw/components/main-menu/DefaultItems.tsx @@ -469,7 +469,6 @@ const PreferencesToggleMidpointSnappingItem = () => { return ( { actionManager.executeAction(actionToggleMidpointSnapping); event.preventDefault(); From fa1f7d9f2258375214b02a442b130185a5a1540c Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Sat, 7 Mar 2026 12:05:33 +0100 Subject: [PATCH 22/62] feat(packages/excalidraw): export throttleRAF (#10912) --- packages/common/src/utils.test.ts | 89 ++++++++++++++++++++ packages/common/src/utils.ts | 4 - packages/excalidraw/index.tsx | 1 + packages/excalidraw/tests/clipboard.test.tsx | 5 +- packages/excalidraw/tests/helpers/mocks.ts | 19 +++++ setupTests.ts | 10 +++ 6 files changed, 123 insertions(+), 5 deletions(-) diff --git a/packages/common/src/utils.test.ts b/packages/common/src/utils.test.ts index 25929722f7..677aaf2245 100644 --- a/packages/common/src/utils.test.ts +++ b/packages/common/src/utils.test.ts @@ -3,6 +3,12 @@ import { mapFind, reduceToCommonValue, } from "@excalidraw/common"; +import { vi } from "vitest"; + +// Import directly to avoid the @excalidraw/common throttleRAF mock from setupTests.ts. +import { throttleRAF } from "./utils"; + +type RafCallback = FrameRequestCallback; describe("@excalidraw/common/utils", () => { describe("isTransparent()", () => { @@ -79,4 +85,87 @@ describe("@excalidraw/common/utils", () => { expect(mapFind([1, 2], () => null)).toBe(undefined); }); }); + + describe("throttleRAF()", () => { + let frameCallbacks: Map; + let nextFrameId: number; + + const runScheduledFrame = (timestamp = 16) => { + const callbacks = [...frameCallbacks.values()]; + frameCallbacks.clear(); + callbacks.forEach((callback) => callback(timestamp)); + }; + + beforeEach(() => { + frameCallbacks = new Map(); + nextFrameId = 0; + + vi.spyOn(window, "requestAnimationFrame").mockImplementation( + (callback) => { + const frameId = ++nextFrameId; + frameCallbacks.set(frameId, callback); + return frameId; + }, + ); + + vi.spyOn(window, "cancelAnimationFrame").mockImplementation((frameId) => { + frameCallbacks.delete(frameId); + }); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + it("should invoke the callback with the last args from the same frame", () => { + const fn = vi.fn(); + const throttled = throttleRAF(fn); + + throttled("first", 1); + throttled("second", 2); + throttled("last", 3); + + expect(fn).not.toHaveBeenCalled(); + expect(window.requestAnimationFrame).toHaveBeenCalledTimes(1); + + runScheduledFrame(); + + expect(fn).toHaveBeenCalledTimes(1); + expect(fn).toHaveBeenCalledWith("last", 3); + }); + + it("should flush the pending callback immediately", () => { + const fn = vi.fn(); + const throttled = throttleRAF(fn); + + throttled("first"); + throttled("last"); + + throttled.flush(); + + expect(window.cancelAnimationFrame).toHaveBeenCalledTimes(1); + expect(fn).toHaveBeenCalledTimes(1); + expect(fn).toHaveBeenCalledWith("last"); + + runScheduledFrame(); + + expect(fn).toHaveBeenCalledTimes(1); + }); + + it("should cancel the pending callback", () => { + const fn = vi.fn(); + const throttled = throttleRAF(fn); + + throttled("first"); + throttled("last"); + + throttled.cancel(); + + expect(window.cancelAnimationFrame).toHaveBeenCalledTimes(1); + + runScheduledFrame(); + + expect(fn).not.toHaveBeenCalled(); + }); + }); }); diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts index 26c75dcfa2..e979323649 100644 --- a/packages/common/src/utils.ts +++ b/packages/common/src/utils.ts @@ -169,10 +169,6 @@ export const throttleRAF = (fn: (...args: T) => void) => { }; const ret = (...args: T) => { - if (isTestEnv()) { - fn(...args); - return; - } lastArgs = args; if (timerId === null) { scheduleFunc(); diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx index ab0054ee35..90ddfb896e 100644 --- a/packages/excalidraw/index.tsx +++ b/packages/excalidraw/index.tsx @@ -267,6 +267,7 @@ export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, getFormFactor, + throttleRAF, } from "@excalidraw/common"; export { diff --git a/packages/excalidraw/tests/clipboard.test.tsx b/packages/excalidraw/tests/clipboard.test.tsx index 7386b360cd..f3fda88d11 100644 --- a/packages/excalidraw/tests/clipboard.test.tsx +++ b/packages/excalidraw/tests/clipboard.test.tsx @@ -28,7 +28,9 @@ const { h } = window; const mouse = new Pointer("mouse"); vi.mock("@excalidraw/common", async (importOriginal) => { - const module: any = await importOriginal(); + const module = await importOriginal(); + const { mockThrottleRAF } = await import("./helpers/mocks"); + return { __esmodule: true, ...module, @@ -37,6 +39,7 @@ vi.mock("@excalidraw/common", async (importOriginal) => { ...module.KEYS, CTRL_OR_CMD: "ctrlKey", }, + throttleRAF: mockThrottleRAF, }; }); diff --git a/packages/excalidraw/tests/helpers/mocks.ts b/packages/excalidraw/tests/helpers/mocks.ts index a2f3e8f3f4..71aa020b0a 100644 --- a/packages/excalidraw/tests/helpers/mocks.ts +++ b/packages/excalidraw/tests/helpers/mocks.ts @@ -3,6 +3,25 @@ import React from "react"; import { vi } from "vitest"; import type { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw"; +import type { throttleRAF as throttleRAFType } from "@excalidraw/common"; + +type ThrottledFn = ((...args: T) => void) & { + flush: () => void; + cancel: () => void; +}; + +export const mockThrottleRAF: typeof throttleRAFType = ( + fn: (...args: T) => void, +) => { + const ret = ((...args: T) => { + fn(...args); + }) as ThrottledFn; + + ret.flush = () => {}; + ret.cancel = () => {}; + + return ret; +}; export const mockMermaidToExcalidraw = (opts: { parseMermaidToExcalidraw: typeof parseMermaidToExcalidraw; diff --git a/setupTests.ts b/setupTests.ts index 245c573267..41bc8e165c 100644 --- a/setupTests.ts +++ b/setupTests.ts @@ -6,9 +6,19 @@ import "@testing-library/jest-dom"; import { vi } from "vitest"; import polyfill from "./packages/excalidraw/polyfill"; +import { mockThrottleRAF } from "./packages/excalidraw/tests/helpers/mocks"; import { yellow } from "./packages/excalidraw/tests/helpers/colorize"; import { testPolyfills } from "./packages/excalidraw/tests/helpers/polyfills"; +vi.mock("@excalidraw/common", async (importOriginal) => { + const module = await importOriginal(); + + return { + ...module, + throttleRAF: mockThrottleRAF, + }; +}); + // mock for pep.js not working with setPointerCapture() HTMLElement.prototype.setPointerCapture = vi.fn(); From 21dd1cfacc6beb5d259fdda5c50582a1d9b29894 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Sun, 8 Mar 2026 23:15:18 +0100 Subject: [PATCH 23/62] feat(packages/excalidraw): state tracking, api hook, and others (#10870) --- .eslintrc.json | 23 +- examples/with-script-in-browser/package.json | 10 +- examples/with-script-in-browser/utils.ts | 36 - excalidraw-app/App.tsx | 112 ++- excalidraw-app/collab/Collab.tsx | 2 + excalidraw-app/data/FileManager.ts | 22 + excalidraw-app/data/LocalData.ts | 2 + excalidraw-app/data/fileStatusStore.ts | 48 ++ packages/common/src/appEventBus.test.ts | 74 ++ packages/common/src/appEventBus.ts | 136 ++++ packages/common/src/index.ts | 2 + packages/common/src/versionedSnapshotStore.ts | 70 ++ packages/excalidraw/CHANGELOG.md | 86 +++ .../actions/actionDeleteSelected.tsx | 2 +- .../actions/actionDuplicateSelection.tsx | 2 +- packages/excalidraw/actions/actionExport.tsx | 253 ++++++- packages/excalidraw/actions/actionHistory.tsx | 2 +- packages/excalidraw/clipboard.ts | 6 +- packages/excalidraw/components/App.tsx | 679 ++++++++++-------- .../excalidraw/components/AppStateObserver.ts | 208 ++++++ .../CommandPalette/CommandPalette.tsx | 7 +- .../components/ConvertElementTypePopup.tsx | 10 +- packages/excalidraw/components/LayerUI.tsx | 37 +- .../TTDDialog/Chat/TTDChatPanel.tsx | 2 +- .../TTDDialog/TTDDialogSubmitShortcut.tsx | 2 +- .../excalidraw/components/TTDDialog/common.ts | 15 +- .../TTDDialog/utils/TTDStreamFetch.ts | 7 +- packages/excalidraw/components/Toast.scss | 46 +- packages/excalidraw/components/Toast.tsx | 22 +- .../components/canvases/InteractiveCanvas.tsx | 3 +- packages/excalidraw/css/styles.scss | 20 + packages/excalidraw/data/blob.ts | 19 +- packages/excalidraw/data/filesystem.ts | 48 +- packages/excalidraw/data/index.ts | 4 +- packages/excalidraw/data/json.ts | 45 +- packages/excalidraw/data/resave.ts | 29 +- packages/excalidraw/global.d.ts | 2 +- packages/excalidraw/hooks/useAppStateValue.ts | 110 +++ packages/excalidraw/index.tsx | 96 ++- packages/excalidraw/locales/en.json | 4 + packages/excalidraw/package.json | 4 +- .../excalidraw/tests/packages/events.test.tsx | 83 ++- packages/excalidraw/tests/tool.test.tsx | 2 +- packages/excalidraw/types.ts | 80 ++- packages/utils/package.json | 2 +- yarn.lock | 8 +- 46 files changed, 1900 insertions(+), 582 deletions(-) create mode 100644 excalidraw-app/data/fileStatusStore.ts create mode 100644 packages/common/src/appEventBus.test.ts create mode 100644 packages/common/src/appEventBus.ts create mode 100644 packages/common/src/versionedSnapshotStore.ts create mode 100644 packages/excalidraw/components/AppStateObserver.ts create mode 100644 packages/excalidraw/hooks/useAppStateValue.ts diff --git a/.eslintrc.json b/.eslintrc.json index 89f8227361..708210535c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -39,5 +39,26 @@ "allowReferrer": true } ] - } + }, + "overrides": [ + { + "files": ["packages/excalidraw/**/*.{ts,tsx}"], + "excludedFiles": ["packages/excalidraw/**/*.test.{ts,tsx}", "packages/excalidraw/**/*.test.*.{ts,tsx}"], + "rules": { + "@typescript-eslint/no-restricted-imports": [ + "error", + { + "patterns": [ + { + "group": ["@excalidraw/excalidraw"], + "message": "Do not import from the barrel 'index.tsx' files. Use direct relative imports to the specific module instead.", + "allowTypeImports": true + } + ], + "paths": [".", "..", "../..", "../../..", "../../../..", "../../../../..", "../index", "../../index", "../../../index", "../../../../index"] + } + ] + } + } + ] } diff --git a/examples/with-script-in-browser/package.json b/examples/with-script-in-browser/package.json index 653c2be40e..512786a659 100644 --- a/examples/with-script-in-browser/package.json +++ b/examples/with-script-in-browser/package.json @@ -3,14 +3,14 @@ "version": "1.0.0", "private": true, "dependencies": { - "react": "19.0.0", - "react-dom": "19.0.0", "@excalidraw/excalidraw": "*", - "browser-fs-access": "0.29.1" + "browser-fs-access": "0.38.0", + "react": "19.0.0", + "react-dom": "19.0.0" }, "devDependencies": { - "vite": "5.0.12", - "typescript": "^5" + "typescript": "^5", + "vite": "5.0.12" }, "scripts": { "start": "vite", diff --git a/examples/with-script-in-browser/utils.ts b/examples/with-script-in-browser/utils.ts index 285e9652d3..35f2c332c3 100644 --- a/examples/with-script-in-browser/utils.ts +++ b/examples/with-script-in-browser/utils.ts @@ -4,8 +4,6 @@ import { unstable_batchedUpdates } from "react-dom"; type FILE_EXTENSION = Exclude; -const INPUT_CHANGE_INTERVAL_MS = 500; - export type ResolvablePromise = Promise & { resolve: [T] extends [undefined] ? (value?: T) => void : (value: T) => void; reject: (error: Error) => void; @@ -54,40 +52,6 @@ export const fileOpen = (opts: { extensions, mimeTypes, multiple: opts.multiple ?? false, - legacySetup: (resolve, reject, input) => { - const scheduleRejection = debounce(reject, INPUT_CHANGE_INTERVAL_MS); - const focusHandler = () => { - checkForFile(); - document.addEventListener("keyup", scheduleRejection); - document.addEventListener("pointerup", scheduleRejection); - scheduleRejection(); - }; - const checkForFile = () => { - // this hack might not work when expecting multiple files - if (input.files?.length) { - const ret = opts.multiple ? [...input.files] : input.files[0]; - resolve(ret as RetType); - } - }; - requestAnimationFrame(() => { - window.addEventListener("focus", focusHandler); - }); - const interval = window.setInterval(() => { - checkForFile(); - }, INPUT_CHANGE_INTERVAL_MS); - return (rejectPromise) => { - clearInterval(interval); - scheduleRejection.cancel(); - window.removeEventListener("focus", focusHandler); - document.removeEventListener("keyup", scheduleRejection); - document.removeEventListener("pointerup", scheduleRejection); - if (rejectPromise) { - // so that something is shown in console if we need to debug this - console.warn("Opening the file was canceled (legacy-fs)."); - rejectPromise(new Error("Request Aborted")); - } - }; - }, }) as Promise; }; diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx index 2e71cc6788..011379a4c1 100644 --- a/excalidraw-app/App.tsx +++ b/excalidraw-app/App.tsx @@ -5,6 +5,8 @@ import { CaptureUpdateAction, reconcileElements, useEditorInterface, + ExcalidrawAPIProvider, + useExcalidrawAPI, } from "@excalidraw/excalidraw"; import { trackEvent } from "@excalidraw/excalidraw/analytics"; import { getDefaultAppState } from "@excalidraw/excalidraw/appState"; @@ -34,7 +36,6 @@ import { import polyfill from "@excalidraw/excalidraw/polyfill"; import { useCallback, useEffect, useRef, useState } from "react"; import { loadFromBlob } from "@excalidraw/excalidraw/data/blob"; -import { useCallbackRefState } from "@excalidraw/excalidraw/hooks/useCallbackRefState"; import { t } from "@excalidraw/excalidraw/i18n"; import { @@ -74,6 +75,7 @@ import type { BinaryFiles, ExcalidrawInitialDataState, UIAppState, + ExcalidrawProps, } from "@excalidraw/excalidraw/types"; import type { ResolutionType } from "@excalidraw/common/utility-types"; import type { ResolvablePromise } from "@excalidraw/common/utils"; @@ -114,6 +116,7 @@ import { } from "./data"; import { updateStaleImageStatuses } from "./data/FileManager"; +import { FileStatusStore } from "./data/fileStatusStore"; import { importFromLocalStorage, importUsernameFromLocalStorage, @@ -369,6 +372,8 @@ const initializeScene = async (opts: { }; const ExcalidrawWrapper = () => { + const excalidrawAPI = useExcalidrawAPI(); + const [errorMessage, setErrorMessage] = useState(""); const isCollabDisabled = isRunningInIframe(); @@ -399,9 +404,6 @@ const ExcalidrawWrapper = () => { }, VERSION_TIMEOUT); }, []); - const [excalidrawAPI, excalidrawRefCallback] = - useCallbackRefState(); - const [, setShareDialogState] = useAtom(shareDialogStateAtom); const [collabAPI] = useAtom(collabAPIAtom); const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => { @@ -433,18 +435,15 @@ const ExcalidrawWrapper = () => { } }, [excalidrawAPI]); - useEffect(() => { - if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) { - return; - } - - const loadImages = ( - data: ResolutionType, - isInitialLoad = false, - ) => { - if (!data.scene) { + // --------------------------------------------------------------------------- + // Hoisted loadImages + // --------------------------------------------------------------------------- + const loadImages = useCallback( + (data: ResolutionType, isInitialLoad = false) => { + if (!data.scene || !excalidrawAPI) { return; } + if (collabAPI?.isCollaborating()) { if (data.scene.elements) { collabAPI @@ -471,6 +470,12 @@ const ExcalidrawWrapper = () => { }, [] as FileId[]) || []; if (data.isExternalScene) { + if (fileIds.length) { + // Direct Firebase call (not through FileManager), so track manually + FileStatusStore.updateStatuses( + fileIds.map((id) => [id, "loading"]), + ); + } loadFilesFromFirebase( `${FIREBASE_STORAGE_PREFIXES.shareLinkFiles}/${data.id}`, data.key, @@ -482,12 +487,18 @@ const ExcalidrawWrapper = () => { erroredFiles, elements: excalidrawAPI.getSceneElementsIncludingDeleted(), }); + FileStatusStore.updateStatuses([ + ...loadedFiles.map((f) => [f.id, "loaded"] as [FileId, "loaded"]), + ...[...erroredFiles.keys()].map( + (id) => [id, "error"] as [FileId, "error"], + ), + ]); }); } else if (isInitialLoad) { if (fileIds.length) { LocalData.fileStorage .getFiles(fileIds) - .then(({ loadedFiles, erroredFiles }) => { + .then(async ({ loadedFiles, erroredFiles }) => { if (loadedFiles.length) { excalidrawAPI.addFiles(loadedFiles); } @@ -500,10 +511,19 @@ const ExcalidrawWrapper = () => { } // on fresh load, clear unused files from IDB (from previous // session) - LocalData.fileStorage.clearObsoleteFiles({ currentFileIds: fileIds }); + LocalData.fileStorage.clearObsoleteFiles({ + currentFileIds: fileIds, + }); } } - }; + }, + [collabAPI, excalidrawAPI], + ); + + useEffect(() => { + if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) { + return; + } initializeScene({ collabAPI, excalidrawAPI }).then(async (data) => { loadImages(data, /* isInitialLoad */ true); @@ -628,7 +648,7 @@ const ExcalidrawWrapper = () => { false, ); }; - }, [isCollabDisabled, collabAPI, excalidrawAPI, setLangCode]); + }, [isCollabDisabled, collabAPI, excalidrawAPI, setLangCode, loadImages]); useEffect(() => { const unloadHandler = (event: BeforeUnloadEvent) => { @@ -773,6 +793,56 @@ const ExcalidrawWrapper = () => { [setShareDialogState], ); + // --------------------------------------------------------------------------- + // onExport — intercepts file save to wait for pending image loads + // --------------------------------------------------------------------------- + const onExport: Required["onExport"] = useCallback( + async function* () { + let snapshot = FileStatusStore.getSnapshot(); + const { pending, total } = FileStatusStore.getPendingCount( + snapshot.value, + ); + if (pending === 0) { + return; + } + + // Yield initial progress + yield { + type: "progress", + progress: (total - pending) / total, + message: `Loading images (${total - pending}/${total})...`, + }; + + // Wait for all pending images to finish + while (true) { + snapshot = await FileStatusStore.pull(snapshot.version); + const { pending: nowPending, total: nowTotal } = + FileStatusStore.getPendingCount(snapshot.value); + + yield { + type: "progress", + progress: (nowTotal - nowPending) / nowTotal, + message: `Loading images (${nowTotal - nowPending}/${nowTotal})...`, + }; + + if (nowPending === 0) { + await new Promise((r) => setTimeout(r, 500)); + yield { + type: "progress", + message: `Preparing export...`, + }; + return; + } + } + }, + [], + ); + + // const onExport = () => { + // return new Promise((r) => setTimeout(r, 2500)); + // // console.log("onExport"); + // }; + // browsers generally prevent infinite self-embedding, there are // cases where it still happens, and while we disallow self-embedding // by not whitelisting our own origin, this serves as an additional guard @@ -839,8 +909,8 @@ const ExcalidrawWrapper = () => { })} > { return ( - + + + ); diff --git a/excalidraw-app/collab/Collab.tsx b/excalidraw-app/collab/Collab.tsx index 6eef30d7f1..622f92fb5e 100644 --- a/excalidraw-app/collab/Collab.tsx +++ b/excalidraw-app/collab/Collab.tsx @@ -72,6 +72,7 @@ import { FileManager, updateStaleImageStatuses, } from "../data/FileManager"; +import { FileStatusStore } from "../data/fileStatusStore"; import { LocalData } from "../data/LocalData"; import { isSavedToFirebase, @@ -149,6 +150,7 @@ class Collab extends PureComponent { }; this.portal = new Portal(this); this.fileManager = new FileManager({ + onFileStatusChange: FileStatusStore.updateStatuses.bind(FileStatusStore), getFiles: async (fileIds) => { const { roomId, roomKey } = this.portal; if (!roomId || !roomKey) { diff --git a/excalidraw-app/data/FileManager.ts b/excalidraw-app/data/FileManager.ts index 435d813252..849e47bc92 100644 --- a/excalidraw-app/data/FileManager.ts +++ b/excalidraw-app/data/FileManager.ts @@ -40,10 +40,12 @@ export class FileManager { private _getFiles; private _saveFiles; + private _onFileStatusChange; constructor({ getFiles, saveFiles, + onFileStatusChange, }: { getFiles: (fileIds: FileId[]) => Promise<{ loadedFiles: BinaryFileData[]; @@ -53,9 +55,13 @@ export class FileManager { savedFiles: Map; erroredFiles: Map; }>; + onFileStatusChange?: ( + updates: Array<[FileId, "loading" | "loaded" | "error"]>, + ) => void; }) { this._getFiles = getFiles; this._saveFiles = saveFiles; + this._onFileStatusChange = onFileStatusChange; } /** @@ -146,6 +152,8 @@ export class FileManager { this.fetchingFiles.set(id, true); } + this._onFileStatusChange?.(ids.map((id) => [id, "loading"])); + try { const { loadedFiles, erroredFiles } = await this._getFiles(ids); @@ -156,6 +164,13 @@ export class FileManager { this.erroredFiles_fetch.set(fileId, true); } + this._onFileStatusChange?.([ + ...loadedFiles.map((f) => [f.id, "loaded"] as [FileId, "loaded"]), + ...[...erroredFiles.keys()].map( + (id) => [id, "error"] as [FileId, "error"], + ), + ]); + return { loadedFiles, erroredFiles }; } finally { for (const id of ids) { @@ -195,6 +210,13 @@ export class FileManager { }; reset() { + if (this._onFileStatusChange && this.fetchingFiles.size) { + this._onFileStatusChange( + [...this.fetchingFiles.keys()].map( + (id) => [id, "error"] as [FileId, "error"], + ), + ); + } this.fetchingFiles.clear(); this.savingFiles.clear(); this.savedFiles.clear(); diff --git a/excalidraw-app/data/LocalData.ts b/excalidraw-app/data/LocalData.ts index 13cdf09ac4..634fdc4f1c 100644 --- a/excalidraw-app/data/LocalData.ts +++ b/excalidraw-app/data/LocalData.ts @@ -42,6 +42,7 @@ import type { MaybePromise } from "@excalidraw/common/utility-types"; import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants"; import { FileManager } from "./FileManager"; +import { FileStatusStore } from "./fileStatusStore"; import { Locker } from "./Locker"; import { updateBrowserStateVersion } from "./tabSync"; @@ -166,6 +167,7 @@ export class LocalData { // --------------------------------------------------------------------------- static fileStorage = new LocalFileManager({ + onFileStatusChange: FileStatusStore.updateStatuses.bind(FileStatusStore), getFiles(ids) { return getMany(ids, filesStore).then( async (filesData: (BinaryFileData | undefined)[]) => { diff --git a/excalidraw-app/data/fileStatusStore.ts b/excalidraw-app/data/fileStatusStore.ts new file mode 100644 index 0000000000..ff9363ed5d --- /dev/null +++ b/excalidraw-app/data/fileStatusStore.ts @@ -0,0 +1,48 @@ +import { VersionedSnapshotStore } from "@excalidraw/common"; + +import type { FileId } from "@excalidraw/element/types"; + +export type FileLoadingStatus = "loading" | "loaded" | "error"; + +export class FileStatusStore { + private static store = new VersionedSnapshotStore< + Map + >(new Map()); + + static getSnapshot() { + return this.store.getSnapshot(); + } + + static pull(sinceVersion?: number) { + return this.store.pull(sinceVersion); + } + + static updateStatuses(updates: Array<[FileId, FileLoadingStatus]>) { + if (!updates.length) { + return; + } + this.store.update((prev) => { + let changed = false; + const next = new Map(prev); + for (const [id, status] of updates) { + if (next.get(id) !== status) { + next.set(id, status); + changed = true; + } + } + return changed ? next : prev; + }); + } + + static getPendingCount(statuses: Map) { + let pending = 0; + let total = 0; + for (const status of statuses.values()) { + total++; + if (status === "loading") { + pending++; + } + } + return { pending, total }; + } +} diff --git a/packages/common/src/appEventBus.test.ts b/packages/common/src/appEventBus.test.ts new file mode 100644 index 0000000000..9a768c2ff7 --- /dev/null +++ b/packages/common/src/appEventBus.test.ts @@ -0,0 +1,74 @@ +import { AppEventBus } from "./appEventBus"; + +type TestEvents = { + initialize: [api: number]; + pointerUp: [pointerId: string]; + viewState: [zoom: number]; +}; + +const behavior = { + initialize: { cardinality: "once", replay: "last" }, + pointerUp: { cardinality: "many", replay: "none" }, + viewState: { cardinality: "many", replay: "last" }, +} as const; + +const flushMicrotasks = async () => Promise.resolve(); + +describe("AppEventBus", () => { + it("replays once events to late callback and Promise subscribers", async () => { + const bus = new AppEventBus(behavior); + bus.emit("initialize", 42); + + const calls: number[] = []; + bus.on("initialize", (value) => { + calls.push(value); + }); + + expect(calls).toEqual([]); + await flushMicrotasks(); + expect(calls).toEqual([42]); + + await expect(bus.on("initialize")).resolves.toBe(42); + }); + + it("does not replay stream events to late subscribers", async () => { + const bus = new AppEventBus(behavior); + bus.emit("pointerUp", "first"); + + const calls: string[] = []; + bus.on("pointerUp", (pointerId) => { + calls.push(pointerId); + }); + + await flushMicrotasks(); + expect(calls).toEqual([]); + + bus.emit("pointerUp", "second"); + expect(calls).toEqual(["second"]); + }); + + it("replays replay-last stream events and stays subscribed", async () => { + const bus = new AppEventBus(behavior); + bus.emit("viewState", 1); + + const calls: number[] = []; + bus.on("viewState", (zoom) => { + calls.push(zoom); + }); + + await flushMicrotasks(); + expect(calls).toEqual([1]); + + bus.emit("viewState", 2); + expect(calls).toEqual([1, 2]); + }); + + it("throws when emitting a once event twice", () => { + const bus = new AppEventBus(behavior); + bus.emit("initialize", 1); + + expect(() => { + bus.emit("initialize", 2); + }).toThrow('Event "initialize" can only be emitted once'); + }); +}); diff --git a/packages/common/src/appEventBus.ts b/packages/common/src/appEventBus.ts new file mode 100644 index 0000000000..e561419fed --- /dev/null +++ b/packages/common/src/appEventBus.ts @@ -0,0 +1,136 @@ +import type { UnsubscribeCallback } from "@excalidraw/excalidraw/types"; + +import { Emitter } from "./emitter"; +import { isProdEnv } from "./utils"; + +export type AppEventPayloadMap = Record; + +export type AppEventBehavior = { + cardinality: "once" | "many"; + replay: "none" | "last"; +}; + +export type AppEventBehaviorMap = { + [K in keyof Events]: AppEventBehavior; +}; + +type AwaitableAppEventKeys< + Events extends AppEventPayloadMap, + Behavior extends AppEventBehaviorMap, +> = { + [K in keyof Events]: Behavior[K]["cardinality"] extends "once" + ? Behavior[K]["replay"] extends "last" + ? K + : never + : never; +}[keyof Events]; + +type AppEventPromiseValue = Args extends [infer Only] + ? Only + : Args; + +export class AppEventBus< + Events extends AppEventPayloadMap, + Behavior extends AppEventBehaviorMap, +> { + private readonly emitters = new Map>(); + private readonly lastPayload = new Map(); + private readonly emittedOnce = new Set(); + + constructor(private readonly behavior: Behavior) {} + + private getEmitter(name: K): Emitter { + let emitter = this.emitters.get(name); + if (!emitter) { + emitter = new Emitter(); + this.emitters.set(name, emitter); + } + return emitter as Emitter; + } + + private toPromiseValue( + args: Args, + ): AppEventPromiseValue { + return (args.length === 1 ? args[0] : args) as AppEventPromiseValue; + } + + public on( + name: K, + callback: (...args: Events[K]) => void, + ): UnsubscribeCallback; + public on>( + name: K, + ): Promise>; + public on( + name: K, + callback?: (...args: Events[K]) => void, + ): UnsubscribeCallback | Promise> { + const eventBehavior = this.behavior[name]; + const cachedPayload = this.lastPayload.get(name) as Events[K] | undefined; + + if (callback) { + if (eventBehavior.replay === "last" && cachedPayload) { + queueMicrotask(() => callback(...cachedPayload)); + + if (eventBehavior.cardinality === "once") { + return () => {}; + } + } + + return this.getEmitter(name).on(callback); + } + + if ( + eventBehavior.cardinality !== "once" || + eventBehavior.replay !== "last" + ) { + throw new Error(`Event "${String(name)}" requires a callback`); + } + + if (cachedPayload) { + return Promise.resolve(this.toPromiseValue(cachedPayload)); + } + + return new Promise>((resolve) => { + this.getEmitter(name).once((...args: Events[K]) => { + resolve(this.toPromiseValue(args)); + }); + }); + } + + public emit(name: K, ...args: Events[K]) { + const eventBehavior = this.behavior[name]; + + if (!isProdEnv()) { + if (eventBehavior.cardinality === "once") { + if (this.emittedOnce.has(name)) { + throw new Error(`Event "${String(name)}" can only be emitted once`); + } + this.emittedOnce.add(name); + } + } + + if (eventBehavior.replay === "last") { + this.lastPayload.set(name, args); + } + + try { + this.getEmitter(name).trigger(...args); + } finally { + if (eventBehavior.cardinality === "once") { + this.getEmitter(name).clear(); + } + } + } + + public clear() { + this.lastPayload.clear(); + this.emittedOnce.clear(); + + for (const emitter of this.emitters.values()) { + emitter.clear(); + } + + this.emitters.clear(); + } +} diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index ca5397ddd1..022f7714bb 100644 --- a/packages/common/src/index.ts +++ b/packages/common/src/index.ts @@ -11,5 +11,7 @@ export * from "./random"; export * from "./url"; export * from "./utils"; export * from "./emitter"; +export * from "./appEventBus"; export * from "./editorInterface"; +export * from "./versionedSnapshotStore"; export { Debug } from "../debug"; diff --git a/packages/common/src/versionedSnapshotStore.ts b/packages/common/src/versionedSnapshotStore.ts new file mode 100644 index 0000000000..979f017987 --- /dev/null +++ b/packages/common/src/versionedSnapshotStore.ts @@ -0,0 +1,70 @@ +export type VersionedSnapshot = Readonly<{ + version: number; + value: T; +}>; + +export class VersionedSnapshotStore { + private version = 0; + private value: T; + private readonly waiters = new Set< + (snapshot: VersionedSnapshot) => void + >(); + private readonly subscribers = new Set< + (snapshot: VersionedSnapshot) => void + >(); + + constructor( + initialValue: T, + private readonly isEqual: (prev: T, next: T) => boolean = Object.is, + ) { + this.value = initialValue; + } + + public getSnapshot(): VersionedSnapshot { + return { version: this.version, value: this.value }; + } + + public set(nextValue: T): boolean { + if (this.isEqual(this.value, nextValue)) { + return false; + } + + this.value = nextValue; + this.version += 1; + + const snapshot = this.getSnapshot(); + + for (const subscriber of this.subscribers) { + subscriber(snapshot); + } + for (const waiter of this.waiters) { + waiter(snapshot); + } + this.waiters.clear(); + + return true; + } + + public update(updater: (prev: T) => T): boolean { + return this.set(updater(this.value)); + } + + public subscribe( + subscriber: (snapshot: VersionedSnapshot) => void, + ): () => void { + this.subscribers.add(subscriber); + return () => { + this.subscribers.delete(subscriber); + }; + } + + public pull(sinceVersion = -1): Promise> { + if (this.version !== sinceVersion) { + return Promise.resolve(this.getSnapshot()); + } + + return new Promise((resolve) => { + this.waiters.add(resolve); + }); + } +} diff --git a/packages/excalidraw/CHANGELOG.md b/packages/excalidraw/CHANGELOG.md index e4a98d19e8..5d2fa482db 100644 --- a/packages/excalidraw/CHANGELOG.md +++ b/packages/excalidraw/CHANGELOG.md @@ -11,6 +11,92 @@ The change should be grouped under one of the below section and must contain PR Please add the latest change on the top under the correct section. --> +## Unreleased + +## Excalidraw API + +### Breaking changes + +- Renamed the `excalidrawAPI` prop to `onExcalidrawAPI`. + +### Features + +- Added `onMount` and `onInitialize` props. `onMount` receives `{ excalidrawAPI, container }` once the editor root is mounted, and `onInitialize` fires once the initial scene has loaded. + + ```tsx + { + console.log(container); + excalidrawAPI.scrollToContent(); + }} + onInitialize={(api) => { + api.refresh(); + }} + /> + ``` + +- Same events are also accessible imperatively through `api.onEvent(...)`. + + ```tsx + { + api.onEvent("editor:mount", ({ excalidrawAPI, container }) => { + excalidrawAPI.scrollToContent(); + console.log(container); + }); + + api.onEvent("editor:initialize").then((readyApi) => { + readyApi.scrollToContent(); + }); + }} + /> + ``` + + Note that in future releases, most, if not all, `excalidrawAPI.on*` subscriptions will be removed in favor of `excalidrawAPI.onEvent(name)`. + +- Exported `ExcalidrawAPIProvider`, `useExcalidrawAPI`, and `useAppStateValue` from the package entrypoint. The imperative API also now exposes `onStateChange`. + + ```tsx + + + + ; + + function Logger() { + const api = useExcalidrawAPI(); + + useAppStateValue("viewModeEnabled", (viewModeEnabled) => { + console.log("view mode changed:", viewModeEnabled); + }); + + React.useEffect(() => { + if (api) { + console.log("editor instance id:", api.id); + } + }, [api]); + + return null; + } + ``` + +- Added `onExport` so host apps can delay JSON export until async work completes. The handler receives the export data plus an `AbortSignal`, and may return a `Promise` or an async generator that yields progress updates for the built-in toast UI. + + ```tsx + + ``` + ## Excalidraw Library ## 0.18.0 (2025-03-11) diff --git a/packages/excalidraw/actions/actionDeleteSelected.tsx b/packages/excalidraw/actions/actionDeleteSelected.tsx index 9821abadc8..c25712eb94 100644 --- a/packages/excalidraw/actions/actionDeleteSelected.tsx +++ b/packages/excalidraw/actions/actionDeleteSelected.tsx @@ -30,7 +30,7 @@ import { getSelectedElements, isSomeElementSelected } from "../scene"; import { TrashIcon } from "../components/icons"; import { ToolButton } from "../components/ToolButton"; -import { useStylesPanelMode } from ".."; +import { useStylesPanelMode } from "../components/App"; import { register } from "./register"; diff --git a/packages/excalidraw/actions/actionDuplicateSelection.tsx b/packages/excalidraw/actions/actionDuplicateSelection.tsx index 462803d205..4c22a80ee7 100644 --- a/packages/excalidraw/actions/actionDuplicateSelection.tsx +++ b/packages/excalidraw/actions/actionDuplicateSelection.tsx @@ -27,7 +27,7 @@ import { t } from "../i18n"; import { isSomeElementSelected } from "../scene"; import { getShortcutKey } from "../shortcut"; -import { useStylesPanelMode } from ".."; +import { useStylesPanelMode } from "../components/App"; import { register } from "./register"; diff --git a/packages/excalidraw/actions/actionExport.tsx b/packages/excalidraw/actions/actionExport.tsx index 453a0be1f7..b7ed8974f1 100644 --- a/packages/excalidraw/actions/actionExport.tsx +++ b/packages/excalidraw/actions/actionExport.tsx @@ -9,18 +9,20 @@ import { getNonDeletedElements } from "@excalidraw/element"; import { CaptureUpdateAction } from "@excalidraw/element"; -import type { Theme } from "@excalidraw/element/types"; +import type { ExcalidrawElement, Theme } from "@excalidraw/element/types"; import { useEditorInterface } from "../components/App"; import { CheckboxItem } from "../components/CheckboxItem"; import { DarkModeToggle } from "../components/DarkModeToggle"; import { ProjectName } from "../components/ProjectName"; +import { Toast } from "../components/Toast"; import { ToolButton } from "../components/ToolButton"; import { Tooltip } from "../components/Tooltip"; import { ExportIcon, questionCircle, saveAs } from "../components/icons"; import { loadFromJSON, saveAsJSON } from "../data"; import { isImageFileHandle } from "../data/blob"; import { nativeFileSystemSupported } from "../data/filesystem"; + import { resaveAsImageWithScene } from "../data/resave"; import { t } from "../i18n"; @@ -31,7 +33,15 @@ import "../components/ToolIcon.scss"; import { register } from "./register"; -import type { AppState } from "../types"; +import type { JSONExportData } from "../data/json"; + +import type { + AppClassProperties, + AppState, + BinaryFiles, + ExcalidrawProps, + OnExportProgress, +} from "../types"; export const actionChangeProjectName = register({ name: "changeProjectName", @@ -150,6 +160,143 @@ export const actionChangeExportEmbedScene = register< ), }); +// --------------------------------------------------------------------------- +// onExport interception helpers +// --------------------------------------------------------------------------- + +let onExportInProgress = false; + +const onProgressToast = ( + app: AppClassProperties, + progress: { + message?: OnExportProgress["message"]; + progress?: number | null; + }, +) => { + const message = progress.message ?? t("progressDialog.defaultMessage"); + app.setAppState({ + toast: { + message: + progress.progress != null ? ( + <> + {message} + + + ) : ( + message + ), + duration: Infinity, + }, + }); +}; + +/** awaits host app's onExport result, and renders progress to the UI */ +async function handleOnExportResult( + onExportResult: ReturnType>, + opts: { + signal: AbortSignal; + app: AppClassProperties; + }, +): Promise { + if (opts.app.state.isLoading) { + onProgressToast(opts.app, { progress: null }); + await opts.app.onStateChange({ predicate: (state) => !state.isLoading }); + } + + if ( + onExportResult != null && + typeof onExportResult === "object" && + Symbol.asyncIterator in onExportResult + ) { + for await (const value of onExportResult) { + if (opts.signal.aborted) { + onExportResult.return(); + return; + } + if (value.type === "progress") { + onProgressToast(opts.app, { + message: value.message, + progress: value.progress ?? null, + }); + } else if (value.type === "done") { + return; + } + } + + // Generator completed without explicit "done" message + return; + } + + if (onExportResult instanceof Promise) { + onProgressToast(opts.app, { progress: null }); + await onExportResult; + } +} + +function prepareDataForJSONExport( + elements: readonly ExcalidrawElement[], + appState: AppState, + files: BinaryFiles, + app: AppClassProperties, +): { abortController: AbortController; data: Promise } { + const abortController = new AbortController(); + const signal = abortController.signal; + + const dataPromise = new Promise(async (resolve) => { + try { + if (app.props.onExport) { + await handleOnExportResult( + app.props.onExport( + "json", + { + elements, + appState, + files, + }, + { + signal, + }, + ), + { + app, + signal, + }, + ); + } + } catch (error: any) { + if (error?.name === "AbortError") { + // if abort error, assume it's a reaction on the signal being aborted + console.warn( + `onExport() aborted by host app (signal aborted: ${signal.aborted})`, + ); + } else { + // non-abort error + // + console.error("Error during props.onExport() handling", error); + } + + // either way, we currently don't allow host apps to cancel save actions + // so we resolve to orig data + } + + resolve({ + elements, + appState, + // return latest files in case they finished loading during onExport + files: app.files, + }); + }); + + return { + abortController, + data: dataPromise, + }; +} + +// --------------------------------------------------------------------------- +// Save actions +// --------------------------------------------------------------------------- + export const actionSaveToActiveFile = register({ name: "saveToActiveFile", label: "buttons.save", @@ -163,42 +310,62 @@ export const actionSaveToActiveFile = register({ ); }, perform: async (elements, appState, value, app) => { - const fileHandleExists = !!appState.fileHandle; + if (onExportInProgress) { + return false; + } + onExportInProgress = true; + + const previousFileHandle = appState.fileHandle; + const filename = app.getName(); + + const { abortController, data: exportedDataPromise } = + prepareDataForJSONExport(elements, appState, app.files, app); try { - const { fileHandle } = isImageFileHandle(appState.fileHandle) + const { fileHandle } = isImageFileHandle(previousFileHandle) ? await resaveAsImageWithScene( - elements, - appState, - app.files, - app.getName(), + exportedDataPromise, + previousFileHandle, + filename, ) - : await saveAsJSON(elements, appState, app.files, app.getName()); + : await saveAsJSON({ + data: exportedDataPromise, + filename, + fileHandle: previousFileHandle, + }); return { - captureUpdate: CaptureUpdateAction.EVENTUALLY, + captureUpdate: CaptureUpdateAction.NEVER, appState: { - ...appState, fileHandle, - toast: fileHandleExists - ? { - message: fileHandle?.name - ? t("toast.fileSavedToFilename").replace( - "{filename}", - `"${fileHandle.name}"`, - ) - : t("toast.fileSaved"), - } - : null, + toast: { + message: + previousFileHandle && fileHandle?.name + ? t("toast.fileSavedToFilename").replace( + "{filename}", + `"${fileHandle.name}"`, + ) + : t("toast.fileSaved"), + duration: 1500, + }, }, }; } catch (error: any) { + abortController.abort(); + if (error?.name !== "AbortError") { console.error(error); } else { console.warn(error); } - return { captureUpdate: CaptureUpdateAction.EVENTUALLY }; + return { + captureUpdate: CaptureUpdateAction.NEVER, + appState: { + toast: null, + }, + }; + } finally { + onExportInProgress = false; } }, keyTest: (event) => @@ -212,36 +379,50 @@ export const actionSaveFileToDisk = register({ viewMode: true, trackEvent: { category: "export" }, perform: async (elements, appState, value, app) => { + if (onExportInProgress) { + return false; + } + onExportInProgress = true; + + const { abortController, data: exportedDataPromise } = + prepareDataForJSONExport(elements, appState, app.files, app); + try { - const { fileHandle } = await saveAsJSON( - elements, - { - ...appState, - fileHandle: null, - }, - app.files, - app.getName(), - ); + const { fileHandle: savedFileHandle } = await saveAsJSON({ + data: exportedDataPromise, + filename: app.getName(), + fileHandle: null, + }); + return { - captureUpdate: CaptureUpdateAction.EVENTUALLY, + captureUpdate: CaptureUpdateAction.NEVER, appState: { - ...appState, openDialog: null, - fileHandle, + fileHandle: savedFileHandle, toast: { message: t("toast.fileSaved") }, }, }; } catch (error: any) { + abortController.abort(); if (error?.name !== "AbortError") { console.error(error); } else { console.warn(error); } - return { captureUpdate: CaptureUpdateAction.EVENTUALLY }; + return { + captureUpdate: CaptureUpdateAction.NEVER, + appState: { + toast: null, + }, + }; + } finally { + onExportInProgress = false; } }, keyTest: (event) => - event.key === KEYS.S && event.shiftKey && event[KEYS.CTRL_OR_CMD], + event.key.toLowerCase() === KEYS.S && + event.shiftKey && + event[KEYS.CTRL_OR_CMD], PanelComponent: ({ updateData }) => ( ; kind: "file"; file: File; - fileHandle: FileSystemHandle | null; + fileHandle: FileSystemFileHandle | null; } | { type: ValueOf; kind: "string"; value: string }; @@ -378,7 +376,7 @@ type ParsedDataTransferItem = type: string; kind: "file"; file: File; - fileHandle: FileSystemHandle | null; + fileHandle: FileSystemFileHandle | null; } | { type: string; kind: "string"; value: string }; diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 75b850f8c2..09f059d2ab 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -88,6 +88,7 @@ import { isShallowEqual, arrayToMap, applyDarkModeFilter, + AppEventBus, type EXPORT_IMAGE_TYPES, randomInteger, CLASSES, @@ -448,7 +449,7 @@ import { StaticCanvas, InteractiveCanvas } from "./canvases"; import NewElementCanvas from "./canvases/NewElementCanvas"; import { isPointHittingLink } from "./hyperlink/helpers"; import { MagicIcon, copyIcon, fullscreenIcon } from "./icons"; -import { Toast } from "./Toast"; +import { AppStateObserver, type OnStateChange } from "./AppStateObserver"; import { findShapeByKey } from "./shapes"; @@ -464,7 +465,6 @@ import type { import type { ClipboardData, PastedMixedContent } from "../clipboard"; import type { ExportedElements } from "../data"; import type { ContextMenuItems } from "./ContextMenu"; -import type { FileSystemHandle } from "../data/filesystem"; import type { AppClassProperties, @@ -488,6 +488,7 @@ import type { UnsubscribeCallback, EmbedsValidationStatus, ElementsPendingErasure, + ExcalidrawImperativeAPIEventMap, GenerateDiagramToCode, NullableGridSize, Offsets, @@ -513,6 +514,11 @@ const EditorInterfaceContext = React.createContext( ); EditorInterfaceContext.displayName = "EditorInterfaceContext"; +const editorLifecycleEventBehavior = { + "editor:mount": { cardinality: "once", replay: "last" }, + "editor:initialize": { cardinality: "once", replay: "last" }, +} as const; + export const ExcalidrawContainerContext = React.createContext<{ container: HTMLDivElement | null; id: string | null; @@ -545,6 +551,15 @@ const ExcalidrawActionManagerContext = React.createContext( ); ExcalidrawActionManagerContext.displayName = "ExcalidrawActionManagerContext"; +export const ExcalidrawAPIContext = + React.createContext(null); +ExcalidrawAPIContext.displayName = "ExcalidrawAPIContext"; + +export const ExcalidrawAPISetContext = React.createContext< + ((api: ExcalidrawImperativeAPI) => void) | null +>(null); +ExcalidrawAPISetContext.displayName = "ExcalidrawAPISetContext"; + export const useApp = () => useContext(AppContext); export const useAppProps = () => useContext(AppPropsContext); export const useEditorInterface = () => @@ -561,6 +576,10 @@ export const useExcalidrawSetAppState = () => useContext(ExcalidrawSetAppStateContext); export const useExcalidrawActionManager = () => useContext(ExcalidrawActionManagerContext); +/** + * Requires wrapping your component in + */ +export const useExcalidrawAPI = () => useContext(ExcalidrawAPIContext); let didTapTwice: boolean = false; let tappedTwiceTimer = 0; @@ -635,12 +654,26 @@ class App extends React.Component { * insert to DOM before user initially scrolls to them) */ private initializedEmbeds = new Set(); - private handleToastClose = () => { - this.setToast(null); - }; - private elementsPendingErasure: ElementsPendingErasure = new Set(); + private _initialized = false; + + private readonly editorLifecycleEvents = new AppEventBus< + ExcalidrawImperativeAPIEventMap, + typeof editorLifecycleEventBehavior + >(editorLifecycleEventBehavior); + + public onEvent = this.editorLifecycleEvents.on.bind( + this.editorLifecycleEvents, + ) as AppEventBus< + ExcalidrawImperativeAPIEventMap, + typeof editorLifecycleEventBehavior + >["on"]; + + private appStateObserver = new AppStateObserver(() => this.state); + + public onStateChange: OnStateChange = this.appStateObserver.onStateChange; + public flowChartCreator: FlowChartCreator = new FlowChartCreator(); private flowChartNavigator: FlowChartNavigator = new FlowChartNavigator(); @@ -696,11 +729,12 @@ class App extends React.Component { >(); onRemoveEventListenersEmitter = new Emitter<[]>(); + api: ExcalidrawImperativeAPI; + constructor(props: AppProps) { super(props); const defaultAppState = getDefaultAppState(); const { - excalidrawAPI, viewModeEnabled = false, zenModeEnabled = false, gridModeEnabled = false, @@ -708,6 +742,7 @@ class App extends React.Component { theme = defaultAppState.theme, name = `${t("labels.untitled")}-${getDateTime()}`, } = props; + this.state = { ...defaultAppState, theme, @@ -744,51 +779,6 @@ class App extends React.Component { this.store = new Store(this); this.history = new History(this.store); - if (excalidrawAPI) { - const api: ExcalidrawImperativeAPI = { - updateScene: this.updateScene, - applyDeltas: this.applyDeltas, - mutateElement: this.mutateElement, - updateLibrary: this.library.updateLibrary, - addFiles: this.addFiles, - resetScene: this.resetScene, - getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted, - getSceneElementsMapIncludingDeleted: - this.getSceneElementsMapIncludingDeleted, - history: { - clear: this.resetHistory, - }, - scrollToContent: this.scrollToContent, - getSceneElements: this.getSceneElements, - getAppState: () => this.state, - getFiles: () => this.files, - getName: this.getName, - registerAction: (action: Action) => { - this.actionManager.registerAction(action); - }, - refresh: this.refresh, - setToast: this.setToast, - id: this.id, - setActiveTool: this.setActiveTool, - setCursor: this.setCursor, - resetCursor: this.resetCursor, - getEditorInterface: () => this.editorInterface, - updateFrameRendering: this.updateFrameRendering, - toggleSidebar: this.toggleSidebar, - onChange: (cb) => this.onChangeEmitter.on(cb), - onIncrement: (cb) => this.store.onStoreIncrementEmitter.on(cb), - onPointerDown: (cb) => this.onPointerDownEmitter.on(cb), - onPointerUp: (cb) => this.onPointerUpEmitter.on(cb), - onScrollChange: (cb) => this.onScrollChangeEmitter.on(cb), - onUserFollow: (cb) => this.onUserFollowEmitter.on(cb), - } as const; - if (typeof excalidrawAPI === "function") { - excalidrawAPI(api); - } else { - console.error("excalidrawAPI should be a function!"); - } - } - this.excalidrawContainerValue = { container: this.excalidrawContainerRef.current, id: this.id, @@ -800,6 +790,48 @@ class App extends React.Component { this.actionManager.registerAll(actions); this.actionManager.registerAction(createUndoAction(this.history)); this.actionManager.registerAction(createRedoAction(this.history)); + + this.api = { + updateScene: this.updateScene, + applyDeltas: this.applyDeltas, + mutateElement: this.mutateElement, + updateLibrary: this.library.updateLibrary, + addFiles: this.addFiles, + resetScene: this.resetScene, + getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted, + getSceneElementsMapIncludingDeleted: + this.getSceneElementsMapIncludingDeleted, + history: { + clear: this.resetHistory, + }, + scrollToContent: this.scrollToContent, + getSceneElements: this.getSceneElements, + getAppState: () => this.state, + getFiles: () => this.files, + getName: this.getName, + registerAction: (action: Action) => { + this.actionManager.registerAction(action); + }, + refresh: this.refresh, + setToast: this.setToast, + id: this.id, + setActiveTool: this.setActiveTool, + setCursor: this.setCursor, + resetCursor: this.resetCursor, + getEditorInterface: () => this.editorInterface, + updateFrameRendering: this.updateFrameRendering, + toggleSidebar: this.toggleSidebar, + onChange: (cb) => this.onChangeEmitter.on(cb), + onIncrement: (cb) => this.store.onStoreIncrementEmitter.on(cb), + onPointerDown: (cb) => this.onPointerDownEmitter.on(cb), + onPointerUp: (cb) => this.onPointerUpEmitter.on(cb), + onScrollChange: (cb) => this.onScrollChangeEmitter.on(cb), + onUserFollow: (cb) => this.onUserFollowEmitter.on(cb), + onStateChange: this.onStateChange, + onEvent: this.onEvent, + } as const; + + props.onExcalidrawAPI?.(this.api); } updateEditorAtom = ( @@ -2042,282 +2074,279 @@ class App extends React.Component { onPointerEnter={this.toggleOverscrollBehavior} onPointerLeave={this.toggleOverscrollBehavior} > - - - - - - - - + + + + + + + - - {this.props.children} - + + {this.props.children} + -
-
-
- - {selectedElements.length === 1 && - this.state.openDialog?.name !== - "elementLinkSelector" && - this.state.showHyperlinkPopup && ( - +
+
+ + {selectedElements.length === 1 && + this.state.openDialog?.name !== + "elementLinkSelector" && + this.state.showHyperlinkPopup && ( + + )} + {this.props.aiEnabled !== false && + selectedElements.length === 1 && + isMagicFrameElement(firstSelectedElement) && ( + + + this.onMagicFrameGenerate( + firstSelectedElement, + "button", + ) + } + /> + + )} + {selectedElements.length === 1 && + isIframeElement(firstSelectedElement) && + firstSelectedElement.customData?.generationData + ?.status === "done" && ( + + + this.onIframeSrcCopy(firstSelectedElement) + } + /> + { + const iframe = + this.getHTMLIFrameElement( + firstSelectedElement, + ); + if (iframe) { + try { + iframe.requestFullscreen(); + this.setState({ + activeEmbeddable: { + element: firstSelectedElement, + state: "active", + }, + selectedElementIds: { + [firstSelectedElement.id]: true, + }, + newElement: null, + selectionElement: null, + }); + } catch (err: any) { + console.warn(err); + this.setState({ + errorMessage: + "Couldn't enter fullscreen", + }); + } + } + }} + /> + + )} + + {this.state.contextMenu && ( + { + this.setState({ contextMenu: null }, () => { + this.focusContainer(); + callback?.(); + }); + }} /> )} - {this.props.aiEnabled !== false && - selectedElements.length === 1 && - isMagicFrameElement(firstSelectedElement) && ( - - - this.onMagicFrameGenerate( - firstSelectedElement, - "button", - ) - } - /> - - )} - {selectedElements.length === 1 && - isIframeElement(firstSelectedElement) && - firstSelectedElement.customData?.generationData - ?.status === "done" && ( - - - this.onIframeSrcCopy(firstSelectedElement) - } - /> - { - const iframe = - this.getHTMLIFrameElement( - firstSelectedElement, - ); - if (iframe) { - try { - iframe.requestFullscreen(); - this.setState({ - activeEmbeddable: { - element: firstSelectedElement, - state: "active", - }, - selectedElementIds: { - [firstSelectedElement.id]: true, - }, - newElement: null, - selectionElement: null, - }); - } catch (err: any) { - console.warn(err); - this.setState({ - errorMessage: - "Couldn't enter fullscreen", - }); - } - } - }} - /> - - )} - - {this.state.toast !== null && ( - - )} - - {this.state.contextMenu && ( - { - this.setState({ contextMenu: null }, () => { - this.focusContainer(); - callback?.(); - }); - }} - /> - )} - - {this.state.newElement && ( - - )} - - {this.state.userToFollow && ( - - )} - {this.renderFrameNames()} - {this.state.activeLockedId && ( - + )} + - )} - {showShapeSwitchPanel && ( - - )} - - {this.renderEmbeddables()} - - - - - - - + {this.state.userToFollow && ( + + )} + {this.renderFrameNames()} + {this.state.activeLockedId && ( + + )} + {showShapeSwitchPanel && ( + + )} + + {this.renderEmbeddables()} + + + + + + + +
); } @@ -3015,12 +3044,10 @@ class App extends React.Component { this.history.record(increment.delta); }); - const { onIncrement } = this.props; - // per. optimmisation, only subscribe if there is the `onIncrement` prop registered, to avoid unnecessary computation - if (onIncrement) { + if (this.props.onIncrement) { this.store.onStoreIncrementEmitter.on((increment) => { - onIncrement(increment); + this.props.onIncrement?.(increment); }); } @@ -3054,6 +3081,14 @@ class App extends React.Component { errorMessage: , }); } + + const mountPayload = { + excalidrawAPI: this.api, + container: this.excalidrawContainerRef.current, + }; + + this.editorLifecycleEvents.emit("editor:mount", mountPayload); + this.props.onMount?.(mountPayload); } public componentWillUnmount() { @@ -3074,6 +3109,8 @@ class App extends React.Component { this.onChangeEmitter.clear(); this.store.onStoreIncrementEmitter.clear(); this.store.onDurableIncrementEmitter.clear(); + this.appStateObserver.clear(); + this.editorLifecycleEvents.clear(); ShapeCache.destroy(); SnapCache.destroy(); clearTimeout(touchTimeout); @@ -3239,6 +3276,15 @@ class App extends React.Component { } componentDidUpdate(prevProps: AppProps, prevState: AppState) { + // must be updated *before* state change listeners are triggered below + if (!this._initialized && !this.state.isLoading) { + this._initialized = true; + this.editorLifecycleEvents.emit("editor:initialize", this.api); + this.props.onInitialize?.(this.api); + } + + this.appStateObserver.flush(prevState); + this.updateEmbeddables(); const elements = this.scene.getElementsIncludingDeleted(); const elementsMap = this.scene.getElementsMapIncludingDeleted(); @@ -4324,13 +4370,7 @@ class App extends React.Component { this.setState(state); }; - setToast = ( - toast: { - message: string; - closable?: boolean; - duration?: number; - } | null, - ) => { + setToast = (toast: AppState["toast"]) => { this.setState({ toast }); }; @@ -5155,7 +5195,8 @@ class App extends React.Component { // eye dropper // ----------------------------------------------------------------------- const lowerCased = event.key.toLocaleLowerCase(); - const isPickingStroke = lowerCased === KEYS.S && event.shiftKey; + const isPickingStroke = + lowerCased === KEYS.S && event.shiftKey && !event[KEYS.CTRL_OR_CMD]; const isPickingBackground = event.key === KEYS.I || (lowerCased === KEYS.G && event.shiftKey); @@ -11602,7 +11643,7 @@ class App extends React.Component { loadFileToCanvas = async ( file: File, - fileHandle: FileSystemHandle | null, + fileHandle: FileSystemFileHandle | null, ) => { file = await normalizeFile(file); try { diff --git a/packages/excalidraw/components/AppStateObserver.ts b/packages/excalidraw/components/AppStateObserver.ts new file mode 100644 index 0000000000..68faabec58 --- /dev/null +++ b/packages/excalidraw/components/AppStateObserver.ts @@ -0,0 +1,208 @@ +import type { AppState, UnsubscribeCallback } from "../types"; + +type StateChangeSelector = + | keyof AppState + | (keyof AppState)[] + | ((appState: AppState) => unknown); + +type StateChangePredicateOptions = { + predicate: (appState: AppState) => boolean; + callback?: (appState: AppState) => void; + once?: boolean; +}; + +type StateChangeArg = StateChangeSelector | StateChangePredicateOptions; + +type StateChangeListener = { + predicate: (appState: AppState, prevState: AppState) => boolean; + getValue: (appState: AppState) => unknown; + callback: (value: any, appState: AppState) => void; + once: boolean; +}; + +type NormalizedStateChange = { + predicate: StateChangeListener["predicate"]; + getValue: StateChangeListener["getValue"]; + callback?: StateChangeListener["callback"]; + once: boolean; + matchesImmediately: boolean; +}; + +export type OnStateChange = { + ( + prop: K, + callback: (value: AppState[K], appState: AppState) => void, + opts?: { once: boolean }, + ): UnsubscribeCallback; + (prop: K): Promise; + ( + prop: (keyof AppState)[], + callback: (appState: AppState, appState2: AppState) => void, + opts?: { once: boolean }, + ): UnsubscribeCallback; + (prop: (keyof AppState)[]): Promise; + ( + prop: (appState: AppState) => T, + callback: (value: T, appState: AppState) => void, + opts?: { once: boolean }, + ): UnsubscribeCallback; + (prop: (appState: AppState) => T): Promise; + (opts: { + predicate: (appState: AppState) => boolean; + callback: (appState: AppState) => void; + once?: boolean; + }): UnsubscribeCallback; + (opts: { predicate: (appState: AppState) => boolean }): Promise; + ( + selector: StateChangeSelector, + callback: (value: any, appState: AppState) => void, + ): any; +}; + +export class AppStateObserver { + private listeners: StateChangeListener[] = []; + + constructor(private readonly getState: () => AppState) {} + + private isStateChangePredicateOptions( + propOrOpts: StateChangeArg, + ): propOrOpts is StateChangePredicateOptions { + return ( + typeof propOrOpts === "object" && + !Array.isArray(propOrOpts) && + "predicate" in propOrOpts + ); + } + + private subscribe(listener: StateChangeListener): UnsubscribeCallback { + this.listeners.push(listener); + return () => { + this.listeners = this.listeners.filter( + (existingListener) => existingListener !== listener, + ); + }; + } + + private normalize( + propOrOpts: StateChangeArg, + callback?: (value: any, appState: AppState) => void, + opts?: { once: boolean }, + ): NormalizedStateChange { + let predicate: StateChangeListener["predicate"]; + let getValue: StateChangeListener["getValue"]; + let normalizedCallback = callback; + let once = opts?.once ?? false; + let matchesImmediately = false; + + if (this.isStateChangePredicateOptions(propOrOpts)) { + const { + predicate: predicateFn, + callback: callbackFromOpts, + once: onceFromOpts, + } = propOrOpts; + + predicate = predicateFn; + getValue = (appState: AppState) => appState; + normalizedCallback = callbackFromOpts + ? (_value: AppState, appState: AppState) => callbackFromOpts(appState) + : undefined; + once = onceFromOpts ?? false; + matchesImmediately = predicateFn(this.getState()); + } else if (typeof propOrOpts === "function") { + const selector = propOrOpts; + predicate = (appState: AppState, prevState: AppState) => + selector(appState) !== selector(prevState); + getValue = (appState: AppState) => selector(appState); + } else if (Array.isArray(propOrOpts)) { + const keys = propOrOpts; + predicate = (appState: AppState, prevState: AppState) => + keys.some((key) => appState[key] !== prevState[key]); + getValue = (appState: AppState) => appState; + } else { + const key = propOrOpts; + predicate = (appState: AppState, prevState: AppState) => + appState[key] !== prevState[key]; + getValue = (appState: AppState) => appState[key]; + } + + return { + predicate, + getValue, + callback: normalizedCallback, + once, + matchesImmediately, + }; + } + + public onStateChange: OnStateChange = (( + propOrOpts: StateChangeArg, + callback?: any, + opts?: { once: boolean }, + ) => { + const { + predicate, + getValue, + callback: stateChangeCallback, + once, + matchesImmediately, + } = this.normalize(propOrOpts, callback, opts); + + if (stateChangeCallback) { + if (matchesImmediately) { + queueMicrotask(() => { + const state = this.getState(); + stateChangeCallback(getValue(state), state); + }); + if (once) { + return () => {}; + } + } + + return this.subscribe({ + predicate, + getValue, + callback: stateChangeCallback, + once, + }); + } + + if (matchesImmediately) { + return Promise.resolve(getValue(this.getState())); + } + + return new Promise((resolve) => { + this.subscribe({ + predicate, + getValue, + callback: (value) => resolve(value), + once: true, + }); + }); + }) as OnStateChange; + + public flush(prevState: AppState) { + if (!this.listeners.length) { + return; + } + + const state = this.getState(); + const listenersToKeep: StateChangeListener[] = []; + + for (const listener of this.listeners) { + if (listener.predicate(state, prevState)) { + listener.callback(listener.getValue(state), state); + if (!listener.once) { + listenersToKeep.push(listener); + } + } else { + listenersToKeep.push(listener); + } + } + + this.listeners = listenersToKeep; + } + + public clear() { + this.listeners = []; + } +} diff --git a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx index ed3d85be8b..7a2b7344cf 100644 --- a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx +++ b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx @@ -10,12 +10,11 @@ import { isWritableElement, } from "@excalidraw/common"; -import { actionToggleShapeSwitch } from "@excalidraw/excalidraw/actions/actionToggleShapeSwitch"; - -import { getShortcutKey } from "@excalidraw/excalidraw/shortcut"; - import type { MarkRequired } from "@excalidraw/common/utility-types"; +import { actionToggleShapeSwitch } from "../../actions/actionToggleShapeSwitch"; +import { getShortcutKey } from "../../shortcut"; + import { actionClearCanvas, actionLink, diff --git a/packages/excalidraw/components/ConvertElementTypePopup.tsx b/packages/excalidraw/components/ConvertElementTypePopup.tsx index 596456671c..48da586b05 100644 --- a/packages/excalidraw/components/ConvertElementTypePopup.tsx +++ b/packages/excalidraw/components/ConvertElementTypePopup.tsx @@ -1,7 +1,9 @@ import { type ReactNode, useEffect, useMemo, useRef, useState } from "react"; import { + bumpVersion, getLinearElementSubType, + mutateElement, updateElbowArrowPoints, } from "@excalidraw/element"; @@ -37,6 +39,8 @@ import { isProdEnv, mapFind, reduceToCommonValue, + ROUNDNESS, + sceneCoordsToViewportCoords, updateActiveTool, } from "@excalidraw/common"; @@ -71,12 +75,6 @@ import type { import type { Scene } from "@excalidraw/element"; -import { - bumpVersion, - mutateElement, - ROUNDNESS, - sceneCoordsToViewportCoords, -} from ".."; import { trackEvent } from "../analytics"; import { atom } from "../editor-jotai"; diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index 85d2701b11..bf774bfebc 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/packages/excalidraw/components/LayerUI.tsx @@ -60,6 +60,7 @@ import { ImageExportDialog } from "./ImageExportDialog"; import { Island } from "./Island"; import { JSONExportDialog } from "./JSONExportDialog"; import { LaserPointerButton } from "./LaserPointerButton"; +import { Toast } from "./Toast"; import "./LayerUI.scss"; import "./Toolbar.scss"; @@ -605,18 +606,30 @@ const LayerUI = ({ showExitZenModeBtn={showExitZenModeBtn} renderWelcomeScreen={renderWelcomeScreen} /> - {appState.scrolledOutside && ( - + {(appState.toast || appState.scrolledOutside) && ( +
+ {appState.toast && ( + setAppState({ toast: null })} + duration={appState.toast.duration} + closable={appState.toast.closable} + /> + )} + {!appState.toast && appState.scrolledOutside && ( + + )} +
)}
{renderSidebars()} diff --git a/packages/excalidraw/components/TTDDialog/Chat/TTDChatPanel.tsx b/packages/excalidraw/components/TTDDialog/Chat/TTDChatPanel.tsx index 25aa30df88..3c9d8c608e 100644 --- a/packages/excalidraw/components/TTDDialog/Chat/TTDChatPanel.tsx +++ b/packages/excalidraw/components/TTDDialog/Chat/TTDChatPanel.tsx @@ -11,7 +11,7 @@ import { rateLimitsAtom } from "../TTDContext"; import { ChatHistoryMenu } from "./ChatHistoryMenu"; -import { ChatInterface } from "."; +import { ChatInterface } from "./ChatInterface"; import type { TTDPanelAction } from "../TTDDialogPanel"; diff --git a/packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx b/packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx index 21a6f16948..251f5554f8 100644 --- a/packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx +++ b/packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx @@ -1,4 +1,4 @@ -import { getShortcutKey } from "@excalidraw/excalidraw/shortcut"; +import { getShortcutKey } from "../../shortcut"; export const TTDDialogSubmitShortcut = () => { return ( diff --git a/packages/excalidraw/components/TTDDialog/common.ts b/packages/excalidraw/components/TTDDialog/common.ts index f31987bc9b..d5bac53169 100644 --- a/packages/excalidraw/components/TTDDialog/common.ts +++ b/packages/excalidraw/components/TTDDialog/common.ts @@ -1,4 +1,12 @@ -import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "@excalidraw/common"; +import { + DEFAULT_EXPORT_PADDING, + EDITOR_LS_KEYS, + THEME, +} from "@excalidraw/common"; + +import { convertToExcalidrawElements } from "@excalidraw/element"; + +import { exportToCanvas } from "@excalidraw/utils"; import type { NonDeletedExcalidrawElement, @@ -6,11 +14,6 @@ import type { } from "@excalidraw/element/types"; import { EditorLocalStorage } from "../../data/EditorLocalStorage"; -import { - convertToExcalidrawElements, - exportToCanvas, - THEME, -} from "../../index"; import type { MermaidToExcalidrawLibProps } from "./types"; diff --git a/packages/excalidraw/components/TTDDialog/utils/TTDStreamFetch.ts b/packages/excalidraw/components/TTDDialog/utils/TTDStreamFetch.ts index b30b803951..a2c421a867 100644 --- a/packages/excalidraw/components/TTDDialog/utils/TTDStreamFetch.ts +++ b/packages/excalidraw/components/TTDDialog/utils/TTDStreamFetch.ts @@ -1,9 +1,6 @@ -import { RequestError } from "@excalidraw/excalidraw/errors"; +import { RequestError } from "../../../errors"; -import type { - LLMMessage, - TTTDDialog, -} from "@excalidraw/excalidraw/components/TTDDialog/types"; +import type { LLMMessage, TTTDDialog } from "../types"; interface RateLimitInfo { rateLimit?: number; diff --git a/packages/excalidraw/components/Toast.scss b/packages/excalidraw/components/Toast.scss index 5d8cc8c1d2..89ffc2ade5 100644 --- a/packages/excalidraw/components/Toast.scss +++ b/packages/excalidraw/components/Toast.scss @@ -1,35 +1,51 @@ -@use "../css/variables.module" as *; - .excalidraw { .Toast { $closeButtonSize: 1.2rem; $closeButtonPadding: 0.4rem; - animation: fade-in 0.5s; - background-color: var(--button-gray-1); - border-radius: 4px; - bottom: 10px; + animation: Toast-fade-in 0.5s; + min-width: 220px; + max-width: min(360px, calc(100vw - 32px)); + border-radius: var(--border-radius-lg); + border: 1px solid var(--default-border-color); + background-color: var(--island-bg-color); + color: var(--text-primary-color); + padding: 0.5rem 0.75rem; + box-shadow: 0 0 0 1px var(--color-surface-lowest); box-sizing: border-box; cursor: default; - left: 50%; - margin-left: -150px; - padding: 4px 0; - position: absolute; - text-align: center; - width: 300px; - z-index: 999999; + pointer-events: none; .Toast__message { + font-family: var(--ui-font); + font-size: 0.75rem; + line-height: 1.25rem; + text-align: center; padding: 0 $closeButtonSize + ($closeButtonPadding); - color: var(--popup-text-color); white-space: pre-wrap; } + .Toast__progress-bar { + margin-top: 0.35rem; + width: 100%; + height: 4px; + border-radius: 999px; + background-color: var(--button-gray-2); + overflow: hidden; + } + + .Toast__progress-bar-fill { + height: 100%; + border-radius: inherit; + background-color: var(--color-primary); + } + .close { position: absolute; top: 0; right: 0; padding: $closeButtonPadding; + pointer-events: auto; .ToolIcon__icon { width: $closeButtonSize; @@ -38,7 +54,7 @@ } } - @keyframes fade-in { + @keyframes Toast-fade-in { from { opacity: 0; } diff --git a/packages/excalidraw/components/Toast.tsx b/packages/excalidraw/components/Toast.tsx index a7167c00ff..e30b4b2fa0 100644 --- a/packages/excalidraw/components/Toast.tsx +++ b/packages/excalidraw/components/Toast.tsx @@ -5,11 +5,22 @@ import { ToolButton } from "./ToolButton"; import "./Toast.scss"; -import type { CSSProperties } from "react"; +import type { CSSProperties, ReactNode } from "react"; const DEFAULT_TOAST_TIMEOUT = 5000; -export const Toast = ({ +const ProgressBar = ({ progress }: { progress: number }) => ( +
+
+
+); + +const ToastComponent = ({ message, onClose, closable = false, @@ -17,7 +28,7 @@ export const Toast = ({ duration = DEFAULT_TOAST_TIMEOUT, style, }: { - message: string; + message: ReactNode; onClose: () => void; closable?: boolean; duration?: number; @@ -47,11 +58,12 @@ export const Toast = ({ return (
-

{message}

+
{message}
{closable && ( ); }; + +export const Toast = Object.assign(ToastComponent, { ProgressBar }); diff --git a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx index c6245953b9..a30088f30a 100644 --- a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx +++ b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx @@ -6,7 +6,6 @@ import { sceneCoordsToViewportCoords, type EditorInterface, } from "@excalidraw/common"; -import { AnimationController } from "@excalidraw/excalidraw/renderer/animation"; import type { InteractiveCanvasRenderConfig, @@ -24,6 +23,8 @@ import type { import { t } from "../../i18n"; import { renderInteractiveScene } from "../../renderer/interactiveScene"; +import { AnimationController } from "../../renderer/animation"; + import type { AppClassProperties, AppState, diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss index e0d42fa716..1891a1f2ef 100644 --- a/packages/excalidraw/css/styles.scss +++ b/packages/excalidraw/css/styles.scss @@ -500,6 +500,26 @@ body.excalidraw-cursor-resize * { } } + .floating-status-stack { + position: absolute; + left: 50%; + bottom: 30px; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + pointer-events: none; + + .scroll-back-to-content { + position: static; + left: auto; + bottom: auto; + transform: none; + pointer-events: var(--ui-pointerEvents); + } + } + .help-icon { @include outlineButtonStyles; @include filledButtonOnCanvas; diff --git a/packages/excalidraw/data/blob.ts b/packages/excalidraw/data/blob.ts index c520c33b1c..65f1809497 100644 --- a/packages/excalidraw/data/blob.ts +++ b/packages/excalidraw/data/blob.ts @@ -27,7 +27,6 @@ import { import type { AppState, DataURL, LibraryItem } from "../types"; -import type { FileSystemHandle } from "browser-fs-access"; import type { ImportedLibraryData } from "./types"; const parseFileContents = async (blob: Blob | File): Promise => { @@ -104,7 +103,7 @@ export const getMimeType = (blob: Blob | string): string => { return ""; }; -export const getFileHandleType = (handle: FileSystemHandle | null) => { +export const getFileHandleType = (handle: FileSystemFileHandle | null) => { if (!handle) { return null; } @@ -118,7 +117,9 @@ export const isImageFileHandleType = ( return type === "png" || type === "svg"; }; -export const isImageFileHandle = (handle: FileSystemHandle | null) => { +export const isImageFileHandle = ( + handle: FileSystemFileHandle | null, +): handle is FileSystemFileHandle => { const type = getFileHandleType(handle); return type === "png" || type === "svg"; }; @@ -139,8 +140,8 @@ export const loadSceneOrLibraryFromBlob = async ( /** @see restore.localAppState */ localAppState: AppState | null, localElements: readonly ExcalidrawElement[] | null, - /** FileSystemHandle. Defaults to `blob.handle` if defined, otherwise null. */ - fileHandle?: FileSystemHandle | null, + /** FileSystemFileHandle. Defaults to `blob.handle` if defined, otherwise null. */ + fileHandle?: FileSystemFileHandle | null, ) => { const contents = await parseFileContents(blob); let data; @@ -198,8 +199,8 @@ export const loadFromBlob = async ( /** @see restore.localAppState */ localAppState: AppState | null, localElements: readonly ExcalidrawElement[] | null, - /** FileSystemHandle. Defaults to `blob.handle` if defined, otherwise null. */ - fileHandle?: FileSystemHandle | null, + /** FileSystemFileHandle. Defaults to `blob.handle` if defined, otherwise null. */ + fileHandle?: FileSystemFileHandle | null, ) => { const ret = await loadSceneOrLibraryFromBlob( blob, @@ -392,7 +393,7 @@ export const ImageURLToFile = async ( export const getFileHandle = async ( event: DragEvent | React.DragEvent | DataTransferItem, -): Promise => { +): Promise => { if (nativeFileSystemSupported) { try { const dataTransferItem = @@ -400,7 +401,7 @@ export const getFileHandle = async ( ? event : (event as DragEvent).dataTransfer?.items?.[0]; - const handle: FileSystemHandle | null = + const handle: FileSystemFileHandle | null = (await (dataTransferItem as any).getAsFileSystemHandle()) || null; return handle; diff --git a/packages/excalidraw/data/filesystem.ts b/packages/excalidraw/data/filesystem.ts index 4a8d43c35f..36d2e4b3ca 100644 --- a/packages/excalidraw/data/filesystem.ts +++ b/packages/excalidraw/data/filesystem.ts @@ -4,18 +4,12 @@ import { supported as nativeFileSystemSupported, } from "browser-fs-access"; -import { EVENT, MIME_TYPES, debounce } from "@excalidraw/common"; - -import { AbortError } from "../errors"; +import { MIME_TYPES } from "@excalidraw/common"; import { normalizeFile } from "./blob"; -import type { FileSystemHandle } from "browser-fs-access"; - type FILE_EXTENSION = Exclude; -const INPUT_CHANGE_INTERVAL_MS = 5000; - export const fileOpen = async (opts: { extensions?: FILE_EXTENSION[]; description: string; @@ -42,40 +36,6 @@ export const fileOpen = async (opts: { extensions, mimeTypes, multiple: opts.multiple ?? false, - legacySetup: (resolve, reject, input) => { - const scheduleRejection = debounce(reject, INPUT_CHANGE_INTERVAL_MS); - const focusHandler = () => { - checkForFile(); - document.addEventListener(EVENT.KEYUP, scheduleRejection); - document.addEventListener(EVENT.POINTER_UP, scheduleRejection); - scheduleRejection(); - }; - const checkForFile = () => { - // this hack might not work when expecting multiple files - if (input.files?.length) { - const ret = opts.multiple ? [...input.files] : input.files[0]; - resolve(ret as RetType); - } - }; - requestAnimationFrame(() => { - window.addEventListener(EVENT.FOCUS, focusHandler); - }); - const interval = window.setInterval(() => { - checkForFile(); - }, INPUT_CHANGE_INTERVAL_MS); - return (rejectPromise) => { - clearInterval(interval); - scheduleRejection.cancel(); - window.removeEventListener(EVENT.FOCUS, focusHandler); - document.removeEventListener(EVENT.KEYUP, scheduleRejection); - document.removeEventListener(EVENT.POINTER_UP, scheduleRejection); - if (rejectPromise) { - // so that something is shown in console if we need to debug this - console.warn("Opening the file was canceled (legacy-fs)."); - rejectPromise(new AbortError()); - } - }; - }, }); if (Array.isArray(files)) { @@ -95,8 +55,8 @@ export const fileSave = ( extension: FILE_EXTENSION; mimeTypes?: string[]; description: string; - /** existing FileSystemHandle */ - fileHandle?: FileSystemHandle | null; + /** existing FileSystemFileHandle */ + fileHandle?: FileSystemFileHandle | null; }, ) => { return _fileSave( @@ -108,8 +68,8 @@ export const fileSave = ( mimeTypes: opts.mimeTypes, }, opts.fileHandle, + false, ); }; export { nativeFileSystemSupported }; -export type { FileSystemHandle }; diff --git a/packages/excalidraw/data/index.ts b/packages/excalidraw/data/index.ts index f655e5e8e6..1083a47897 100644 --- a/packages/excalidraw/data/index.ts +++ b/packages/excalidraw/data/index.ts @@ -33,8 +33,6 @@ import { canvasToBlob } from "./blob"; import { fileSave } from "./filesystem"; import { serializeAsJSON } from "./json"; -import type { FileSystemHandle } from "./filesystem"; - import type { ExportType } from "../scene/types"; import type { AppState, BinaryFiles } from "../types"; @@ -110,7 +108,7 @@ export const exportCanvas = async ( viewBackgroundColor: string; /** filename, if applicable */ name?: string; - fileHandle?: FileSystemHandle | null; + fileHandle?: FileSystemFileHandle | null; exportingFrame: ExcalidrawFrameLikeElement | null; }, ) => { diff --git a/packages/excalidraw/data/json.ts b/packages/excalidraw/data/json.ts index 047a2ccdec..fc34203262 100644 --- a/packages/excalidraw/data/json.ts +++ b/packages/excalidraw/data/json.ts @@ -1,12 +1,13 @@ import { - DEFAULT_FILENAME, EXPORT_DATA_TYPES, getExportSource, MIME_TYPES, VERSIONS, } from "@excalidraw/common"; -import type { ExcalidrawElement } from "@excalidraw/element/types"; +import type { ExcalidrawElement, NonDeleted } from "@excalidraw/element/types"; + +import type { MaybePromise } from "@excalidraw/common/utility-types"; import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState"; @@ -21,6 +22,12 @@ import type { ImportedLibraryData, } from "./types"; +export type JSONExportData = { + elements: readonly NonDeleted[]; + appState: AppState; + files: BinaryFiles; +}; + /** * Strips out files which are only referenced by deleted elements */ @@ -67,27 +74,29 @@ export const serializeAsJSON = ( return JSON.stringify(data, null, 2); }; -export const saveAsJSON = async ( - elements: readonly ExcalidrawElement[], - appState: AppState, - files: BinaryFiles, - /** filename */ - name: string = appState.name || DEFAULT_FILENAME, -) => { - const serialized = serializeAsJSON(elements, appState, files, "local"); - const blob = new Blob([serialized], { - type: MIME_TYPES.excalidraw, +export const saveAsJSON = async ({ + data, + filename, + fileHandle, +}: { + data: MaybePromise; + filename: string; + fileHandle: AppState["fileHandle"]; +}) => { + const blob = Promise.resolve(data).then(({ elements, appState, files }) => { + const serialized = serializeAsJSON(elements, appState, files, "local"); + return new Blob([serialized], { + type: MIME_TYPES.excalidraw, + }); }); - const fileHandle = await fileSave(blob, { - name, + const savedFileHandle = await fileSave(blob, { + name: filename, extension: "excalidraw", description: "Excalidraw file", - fileHandle: isImageFileHandle(appState.fileHandle) - ? null - : appState.fileHandle, + fileHandle: isImageFileHandle(fileHandle) ? null : fileHandle, }); - return { fileHandle }; + return { fileHandle: savedFileHandle }; }; export const loadFromJSON = async ( diff --git a/packages/excalidraw/data/resave.ts b/packages/excalidraw/data/resave.ts index 188041d691..8c443e0e28 100644 --- a/packages/excalidraw/data/resave.ts +++ b/packages/excalidraw/data/resave.ts @@ -1,26 +1,39 @@ +import type { MaybePromise } from "@excalidraw/common/utility-types"; + import type { ExcalidrawElement } from "@excalidraw/element/types"; import { getFileHandleType, isImageFileHandleType } from "./blob"; +// eslint-disable-next-line @typescript-eslint/no-restricted-imports import { exportCanvas, prepareElementsForExport } from "."; import type { AppState, BinaryFiles } from "../types"; export const resaveAsImageWithScene = async ( - elements: readonly ExcalidrawElement[], - appState: AppState, - files: BinaryFiles, - name: string, + data: MaybePromise<{ + elements: readonly ExcalidrawElement[]; + appState: AppState; + files: BinaryFiles; + }>, + fileHandle: FileSystemFileHandle, + filename: string, ) => { - const { exportBackground, viewBackgroundColor, fileHandle } = appState; - const fileHandleType = getFileHandleType(fileHandle); - if (!fileHandle || !isImageFileHandleType(fileHandleType)) { + if (Math.random() < 1) { + throw new Error("OLALALALA"); + } + + if (!isImageFileHandleType(fileHandleType)) { throw new Error( "fileHandle should exist and should be of type svg or png when resaving", ); } + + let { elements, appState, files } = await data; + + const { exportBackground, viewBackgroundColor } = appState; + appState = { ...appState, exportEmbedScene: true, @@ -35,7 +48,7 @@ export const resaveAsImageWithScene = async ( await exportCanvas(fileHandleType, exportedElements, appState, files, { exportBackground, viewBackgroundColor, - name, + name: filename, fileHandle, exportingFrame, }); diff --git a/packages/excalidraw/global.d.ts b/packages/excalidraw/global.d.ts index 59157002da..025d3f88e8 100644 --- a/packages/excalidraw/global.d.ts +++ b/packages/excalidraw/global.d.ts @@ -52,7 +52,7 @@ declare module "png-chunks-extract" { // ----------------------------------------------------------------------------- interface Blob { - handle?: import("browser-fs-acces").FileSystemHandle; + handle?: FileSystemFileHandle; name?: string; } diff --git a/packages/excalidraw/hooks/useAppStateValue.ts b/packages/excalidraw/hooks/useAppStateValue.ts new file mode 100644 index 0000000000..2f4750a564 --- /dev/null +++ b/packages/excalidraw/hooks/useAppStateValue.ts @@ -0,0 +1,110 @@ +import { useEffect, useRef, useState } from "react"; + +import { useExcalidrawAPI } from "../components/App"; + +import { getDefaultAppState } from "../appState"; + +import type { AppState } from "../types"; + +/** + * Subscribes to specific appState changes. The component re-renders + * only when the specified prop(s) change — not on every appState update. + * + * Works both inside and outside the tree, as long as + * ExcalidrawAPIContext.Provider is an ancestor (automatically provided + * inside , or manually by the host app). + * + * Returns the narrowed value depending on prop form: + * - `keyof AppState` → `AppState[K]` + * - `(keyof AppState)[]` → whole `AppState` + * - selector function → selector's return type `T` + * + * Calls the optional callback with the latest value on every change (not called + * on initial render). + * + * If excalidrawAPI is not ready yet (host apps), hook is rerendered with latest + * value once available. + */ +export function useAppStateValue( + prop: K, + callback?: (value: AppState[K], appState: AppState) => void, + _internal?: boolean, +): AppState[K]; +export function useAppStateValue( + props: (keyof AppState)[], + callback?: (props: AppState, appState: AppState) => void, + _internal?: boolean, +): AppState; +export function useAppStateValue( + selector: (appState: AppState) => T, + callback?: (value: T, appState: AppState) => void, + _internal?: boolean, +): T; +export function useAppStateValue( + selector: + | keyof AppState + | (keyof AppState)[] + | ((appState: AppState) => unknown), + callback?: (value: any, appState: AppState) => void, + _internal: boolean = true, +): unknown { + const api = useExcalidrawAPI(); + + const getLatestValue = () => { + let appState = api?.getAppState(); + if (!appState) { + if (!_internal) { + return undefined; + } + console.warn( + "useAppStateValue: excalidrawAPI not defined yet for internal component in which case it should always be defined. Are you sure you're rendering inside of component tree?", + ); + // fall back in case there's a bug so we don't break the app + // (internal components using this internal useAppStateValue expect + // non-undefined values on init) + appState = Object.assign( + { width: 0, height: 0, offsetLeft: 0, offsetTop: 0 }, + getDefaultAppState(), + ); + } + if (typeof selector === "function") { + return selector(appState); + } + if (Array.isArray(selector)) { + return appState; + } + return appState[selector]; + }; + + const [value, setValue] = useState(getLatestValue); + + const stateRef = useRef({ + selector, + callback, + isInitialized: !!api, + latestValue: value, + }); + stateRef.current.selector = selector; + stateRef.current.callback = callback; + if (!stateRef.current.isInitialized && api) { + stateRef.current.isInitialized = true; + stateRef.current.latestValue = getLatestValue(); + } + + useEffect(() => { + if (!api) { + return; + } + + return api.onStateChange( + stateRef.current.selector, + (newValue: any, state: AppState) => { + stateRef.current.latestValue = newValue; + stateRef.current.callback?.(newValue, state); + setValue(newValue); + }, + ); + }, [api]); + + return stateRef.current.latestValue; +} diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx index 90ddfb896e..7671951c0e 100644 --- a/packages/excalidraw/index.tsx +++ b/packages/excalidraw/index.tsx @@ -1,14 +1,18 @@ -import React, { useEffect } from "react"; +import React, { useCallback, useContext, useEffect, useState } from "react"; import { DEFAULT_UI_OPTIONS, isShallowEqual } from "@excalidraw/common"; -import App from "./components/App"; +import App, { + ExcalidrawAPIContext, + ExcalidrawAPISetContext, +} from "./components/App"; import { InitializeApp } from "./components/InitializeApp"; import Footer from "./components/footer/FooterCenter"; import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollaborationTrigger"; import MainMenu from "./components/main-menu/MainMenu"; import WelcomeScreen from "./components/welcome-screen/WelcomeScreen"; import { defaultLang } from "./i18n"; +import { useAppStateValue as _useAppStateValue } from "./hooks/useAppStateValue"; import { EditorJotaiProvider, editorJotaiStore } from "./editor-jotai"; import polyfill from "./polyfill"; @@ -16,16 +20,44 @@ import "./css/app.scss"; import "./css/styles.scss"; import "./fonts/fonts.css"; -import type { AppProps, ExcalidrawProps } from "./types"; +import type { + AppProps, + AppState, + ExcalidrawImperativeAPI, + ExcalidrawProps, +} from "./types"; polyfill(); +/** + * Stateless provider that allows `useExcalidrawAPI()` (and hooks built + * on it, such as `useAppStateValue()`) to work outside the + * component tree. + */ +export const ExcalidrawAPIProvider = ({ + children, +}: { + children: React.ReactNode; +}) => { + const [api, setApi] = useState(null); + return ( + + + {children} + + + ); +}; + const ExcalidrawBase = (props: ExcalidrawProps) => { const { + onExport, onChange, onIncrement, initialData, - excalidrawAPI, + onExcalidrawAPI, + onMount, + onInitialize, isCollaborating = false, onPointerUpdate, renderTopLeftUI, @@ -86,6 +118,15 @@ const ExcalidrawBase = (props: ExcalidrawProps) => { UIOptions.canvasActions.toggleTheme = true; } + const setExcalidrawAPI = useContext(ExcalidrawAPISetContext); + const handleExcalidrawAPI = useCallback( + (api: ExcalidrawImperativeAPI) => { + setExcalidrawAPI?.(api); + onExcalidrawAPI?.(api); + }, + [onExcalidrawAPI, setExcalidrawAPI], + ); + useEffect(() => { const importPolyfill = async () => { //@ts-ignore @@ -115,10 +156,13 @@ const ExcalidrawBase = (props: ExcalidrawProps) => { ( + prop: K, + callback?: (value: AppState[K], appState: AppState) => void, +): AppState[K] | undefined; +export function useAppStateValue( + props: T[], + callback?: (values: AppState, appState: AppState) => void, +): AppState | undefined; +export function useAppStateValue( + selector: (appState: AppState) => T, + callback?: (value: T, appState: AppState) => void, +): T | undefined; +export function useAppStateValue( + selector: + | keyof AppState + | (keyof AppState)[] + | ((appState: AppState) => unknown), + callback?: (value: any, appState: AppState) => void, +) { + return _useAppStateValue(selector as any, callback, false); +} +// ----------------------------------------------------------------------------- diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json index 66402f3fb7..bfdb476bba 100644 --- a/packages/excalidraw/locales/en.json +++ b/packages/excalidraw/locales/en.json @@ -403,6 +403,10 @@ "errorDialog": { "title": "Error" }, + "progressDialog": { + "title": "Saving", + "defaultMessage": "Preparing to save..." + }, "exportDialog": { "disk_title": "Save to disk", "disk_details": "Export the scene data to a file from which you can import later.", diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json index d3be66cb37..f60ea96634 100644 --- a/packages/excalidraw/package.json +++ b/packages/excalidraw/package.json @@ -90,8 +90,7 @@ "@excalidraw/math": "0.18.0", "@excalidraw/mermaid-to-excalidraw": "2.0.0-rc4", "@excalidraw/random-username": "1.1.0", - "radix-ui": "1.4.3", - "browser-fs-access": "0.29.1", + "browser-fs-access": "0.38.0", "canvas-roundrect-polyfill": "0.0.1", "clsx": "1.1.1", "cross-env": "7.0.3", @@ -112,6 +111,7 @@ "png-chunks-extract": "1.0.0", "points-on-curve": "1.0.1", "pwacompat": "2.0.17", + "radix-ui": "1.4.3", "roughjs": "4.6.4", "sass": "1.51.0", "tunnel-rat": "0.1.2" diff --git a/packages/excalidraw/tests/packages/events.test.tsx b/packages/excalidraw/tests/packages/events.test.tsx index bc4441c40d..f30c8b092c 100644 --- a/packages/excalidraw/tests/packages/events.test.tsx +++ b/packages/excalidraw/tests/packages/events.test.tsx @@ -6,7 +6,7 @@ import { resolvablePromise } from "@excalidraw/common"; import { Excalidraw, CaptureUpdateAction } from "../../index"; import { API } from "../helpers/api"; import { Pointer } from "../helpers/ui"; -import { render } from "../test-utils"; +import { render, unmountComponent } from "../test-utils"; import type { ExcalidrawImperativeAPI } from "../../types"; @@ -21,12 +21,91 @@ describe("event callbacks", () => { const excalidrawAPIPromise = resolvablePromise(); await render( excalidrawAPIPromise.resolve(api as any)} + onExcalidrawAPI={(api) => excalidrawAPIPromise.resolve(api as any)} />, ); excalidrawAPI = await excalidrawAPIPromise; }); + it("should resolve editor:mount/editor:initialize when subscribed before mount", async () => { + unmountComponent(); + + const lifecyclePromise = resolvablePromise<{ + api: ExcalidrawImperativeAPI; + mount: Promise<{ + excalidrawAPI: ExcalidrawImperativeAPI; + container: HTMLDivElement | null; + }>; + initialize: Promise; + }>(); + + await render( + + lifecyclePromise.resolve({ + api: api as ExcalidrawImperativeAPI, + mount: api.onEvent("editor:mount"), + initialize: api.onEvent("editor:initialize"), + }) + } + />, + ); + + const { api, mount, initialize } = await lifecyclePromise; + await expect(mount).resolves.toEqual({ + excalidrawAPI: api, + container: expect.any(HTMLDivElement), + }); + await expect(initialize).resolves.toBe(api); + }); + + it("should replay editor:mount/editor:initialize to late subscribers", async () => { + const onMount = vi.fn(); + const onInitialize = vi.fn(); + + excalidrawAPI.onEvent("editor:mount", onMount); + excalidrawAPI.onEvent("editor:initialize", onInitialize); + + await Promise.resolve(); + + expect(onMount).toHaveBeenCalledTimes(1); + expect(onMount).toHaveBeenCalledWith({ + excalidrawAPI, + container: expect.any(HTMLDivElement), + }); + expect(onInitialize).toHaveBeenCalledTimes(1); + expect(onInitialize).toHaveBeenCalledWith(excalidrawAPI); + + await expect(excalidrawAPI.onEvent("editor:mount")).resolves.toEqual({ + excalidrawAPI, + container: expect.any(HTMLDivElement), + }); + await expect(excalidrawAPI.onEvent("editor:initialize")).resolves.toBe( + excalidrawAPI, + ); + }); + + it("should call onMount before onInitialize props", async () => { + unmountComponent(); + + const calls: string[] = []; + + await render( + { + expect(excalidrawAPI).toBeDefined(); + expect(container).toBeInstanceOf(HTMLDivElement); + calls.push("mount"); + }} + onInitialize={() => { + calls.push("initialize"); + }} + />, + ); + + expect(calls).toEqual(["mount", "initialize"]); + }); + it("should trigger onChange on render", async () => { const onChange = vi.fn(); diff --git a/packages/excalidraw/tests/tool.test.tsx b/packages/excalidraw/tests/tool.test.tsx index f7c101c1da..f82997dd7c 100644 --- a/packages/excalidraw/tests/tool.test.tsx +++ b/packages/excalidraw/tests/tool.test.tsx @@ -20,7 +20,7 @@ describe("setActiveTool()", () => { const excalidrawAPIPromise = resolvablePromise(); await render( excalidrawAPIPromise.resolve(api as any)} + onExcalidrawAPI={(api) => excalidrawAPIPromise.resolve(api as any)} />, ); excalidrawAPI = await excalidrawAPIPromise; diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index 0b654386bf..b1005d3dcd 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -53,7 +53,6 @@ import type { Spreadsheet } from "./charts"; import type { ClipboardData } from "./clipboard"; import type App from "./components/App"; import type Library from "./data/library"; -import type { FileSystemHandle } from "./data/filesystem"; import type { ContextMenuItems } from "./components/ContextMenu"; import type { SnapLine } from "./snapping"; import type { ImportedDataState } from "./data/types"; @@ -408,7 +407,11 @@ export interface AppState { previousSelectedElementIds: { [id: string]: true }; selectedElementsAreBeingDragged: boolean; shouldCacheIgnoreZoom: boolean; - toast: { message: string; closable?: boolean; duration?: number } | null; + toast: { + message: React.ReactNode; + closable?: boolean; + duration?: number; + } | null; zenModeEnabled: boolean; theme: Theme; /** grid cell px size */ @@ -427,7 +430,7 @@ export interface AppState { offsetTop: number; offsetLeft: number; - fileHandle: FileSystemHandle | null; + fileHandle: FileSystemFileHandle | null; collaborators: Map; stats: { open: boolean; @@ -546,17 +549,39 @@ export type OnUserFollowedPayload = { action: "FOLLOW" | "UNFOLLOW"; }; +export type OnExportProgress = { + type: "progress"; + message?: React.ReactNode; + /** 0-1 range */ + progress?: number; +}; + export interface ExcalidrawProps { onChange?: ( elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles, ) => void; + /** + * note: only subscribes if the props.onIncrement is defined on initial render + */ onIncrement?: (event: DurableIncrement | EphemeralIncrement) => void; initialData?: | (() => MaybePromise) | MaybePromise; - excalidrawAPI?: (api: ExcalidrawImperativeAPI) => void; + /** + * Invoked as soon as the Excalidraw API is available + * NOTE editor is not yet mounted, and state is not yet initialized + */ + onExcalidrawAPI?: (api: ExcalidrawImperativeAPI) => void; + /** + * Invoked once the editor root is mounted. + */ + onMount?: (payload: ExcalidrawMountPayload) => void; + /** + * Invoked once the initial scene is loaded. + */ + onInitialize?: (api: ExcalidrawImperativeAPI) => void; isCollaborating?: boolean; onPointerUpdate?: (payload: { pointer: { x: number; y: number; tool: "pointer" | "laser" }; @@ -641,6 +666,32 @@ export interface ExcalidrawProps { aiEnabled?: boolean; showDeprecatedFonts?: boolean; renderScrollbars?: boolean; + /** + * Called before exporting to a file. + * + * Allows the host app to intercept and delay saving until async operations + * (e.g., images are loaded) complete. + * + * If Promise/AsyncGenerator is returned, a progress toast will be shown + * until the operation completes. Generator can yield progress updates. + */ + onExport?: ( + /** type of export. Currently we only call for JSON exports or + * JSON-embedded PNG (which is also identified as `json` type here)*/ + type: "json", + data: { + elements: readonly ExcalidrawElement[]; + appState: AppState; + files: BinaryFiles; + }, + options: { + /** signal that gets aborted if user cancels the export (e.g. closes + * the native file picker dialog). In that case, you can either + * return immediately, or throw AbortError. + */ + signal: AbortSignal; + }, + ) => MaybePromise | AsyncGenerator; } export type SceneData = { @@ -719,6 +770,7 @@ export type AppProps = Merge< export type AppClassProperties = { props: AppProps; state: AppState; + api: App["api"]; sessionExportThemeOverride: App["sessionExportThemeOverride"]; interactiveCanvas: HTMLCanvasElement | null; /** static canvas */ @@ -764,9 +816,13 @@ export type AppClassProperties = { onPointerUpEmitter: App["onPointerUpEmitter"]; updateEditorAtom: App["updateEditorAtom"]; onPointerDownEmitter: App["onPointerDownEmitter"]; + onEvent: App["onEvent"]; + onStateChange: App["onStateChange"]; lastPointerMoveCoords: App["lastPointerMoveCoords"]; bindModeHandler: App["bindModeHandler"]; + + setAppState: App["setAppState"]; }; export type PointerDownState = Readonly<{ @@ -839,6 +895,20 @@ export type PointerDownState = Readonly<{ export type UnsubscribeCallback = () => void; +export type ExcalidrawMountPayload = { + excalidrawAPI: ExcalidrawImperativeAPI; + /* + *Excalidraw container. + * should never be null, but just to be safe + */ + container: HTMLDivElement | null; +}; + +export type ExcalidrawImperativeAPIEventMap = { + "editor:mount": [payload: ExcalidrawMountPayload]; + "editor:initialize": [api: ExcalidrawImperativeAPI]; +}; + export interface ExcalidrawImperativeAPI { updateScene: InstanceType["updateScene"]; applyDeltas: InstanceType["applyDeltas"]; @@ -905,6 +975,8 @@ export interface ExcalidrawImperativeAPI { onUserFollow: ( callback: (payload: OnUserFollowedPayload) => void, ) => UnsubscribeCallback; + onStateChange: InstanceType["onStateChange"]; + onEvent: InstanceType["onEvent"]; } export type FrameNameBounds = { diff --git a/packages/utils/package.json b/packages/utils/package.json index f571d42035..2439480042 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -50,7 +50,7 @@ "dependencies": { "@braintree/sanitize-url": "6.0.2", "@excalidraw/laser-pointer": "1.3.1", - "browser-fs-access": "0.29.1", + "browser-fs-access": "0.38.0", "pako": "2.0.3", "perfect-freehand": "1.2.0", "png-chunk-text": "1.0.0", diff --git a/yarn.lock b/yarn.lock index 5259da6288..f3a53e391e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4603,10 +4603,10 @@ braces@^3.0.3, braces@~3.0.2: dependencies: fill-range "^7.1.1" -browser-fs-access@0.29.1: - version "0.29.1" - resolved "https://registry.yarnpkg.com/browser-fs-access/-/browser-fs-access-0.29.1.tgz#8a9794c73cf86b9aec74201829999c597128379c" - integrity sha512-LSvVX5e21LRrXqVMhqtAwj5xPgDb+fXAIH80NsnCQ9xuZPs2xWsOREi24RKgZa1XOiQRbcmVrv87+ulOKsgjxw== +browser-fs-access@0.38.0: + version "0.38.0" + resolved "https://registry.yarnpkg.com/browser-fs-access/-/browser-fs-access-0.38.0.tgz#9024c5bf3d962287a08d14beebb86cb819cbb838" + integrity sha512-JveqW2w6pEZqFEEfMgCszXzYpE89dG+nPsmOdcs741mFFAROeL+iqjGEpR07RI+s0YY0EFr+4KnOoACprJTpOw== browserslist@^4.20.3, browserslist@^4.24.0, browserslist@^4.24.4: version "4.24.4" From e73a5b0116019a057a1dfa4b534e3e87784c6554 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Wed, 11 Mar 2026 09:49:12 +0100 Subject: [PATCH 24/62] docs(packages/excalidraw): improve readme (#10932) --- .../with-script-in-browser/initialData.tsx | 2 +- packages/excalidraw/README.md | 125 ++++++++++++++++-- 2 files changed, 112 insertions(+), 15 deletions(-) diff --git a/examples/with-script-in-browser/initialData.tsx b/examples/with-script-in-browser/initialData.tsx index 0db23d5f20..2b1a9d4820 100644 --- a/examples/with-script-in-browser/initialData.tsx +++ b/examples/with-script-in-browser/initialData.tsx @@ -1,4 +1,4 @@ -import type { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/data/transform"; +import type { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/element/transform"; import type { FileId } from "@excalidraw/excalidraw/element/types"; const elements: ExcalidrawElementSkeleton[] = [ diff --git a/packages/excalidraw/README.md b/packages/excalidraw/README.md index 5185185534..f7cec95f77 100644 --- a/packages/excalidraw/README.md +++ b/packages/excalidraw/README.md @@ -1,10 +1,10 @@ # Excalidraw -**Excalidraw** is exported as a component to be directly embedded in your project. +**Excalidraw** is exported as a React component that you can embed directly in your app. ## Installation -Use `npm` or `yarn` to install the package. +Install the package together with its React peer dependencies. ```bash npm install react react-dom @excalidraw/excalidraw @@ -12,34 +12,131 @@ npm install react react-dom @excalidraw/excalidraw yarn add react react-dom @excalidraw/excalidraw ``` -> **Note**: If you don't want to wait for the next stable release and try out the unreleased changes, use `@excalidraw/excalidraw@next`. +> **Note**: If you want to try unreleased changes, use `@excalidraw/excalidraw@next`. -#### Self-hosting fonts +## Quick start -By default, Excalidraw will try to download all the used fonts from the [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod). +The minimum working setup has two easy-to-miss requirements: -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: +1. Import the package CSS: -```js - +```ts +import "@excalidraw/excalidraw/index.css"; ``` -### Dimensions of Excalidraw +2. Render Excalidraw inside a container with a non-zero height. -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. +```tsx +import { Excalidraw } from "@excalidraw/excalidraw"; +import "@excalidraw/excalidraw/index.css"; + +export default function App() { + return ( +
+ +
+ ); +} +``` + +Excalidraw fills `100%` of the width and height of its parent. If the parent has no height, the canvas will not be visible. + +## Next.js / SSR frameworks + +Excalidraw should be rendered on the client. In SSR frameworks such as Next.js, use a client component and load it dynamically with SSR disabled. + +```tsx +// app/components/ExcalidrawClient.tsx +"use client"; + +import { Excalidraw } from "@excalidraw/excalidraw"; +import "@excalidraw/excalidraw/index.css"; + +export default function ExcalidrawClient() { + return ( +
+ +
+ ); +} +``` + +```tsx +// app/page.tsx +import dynamic from "next/dynamic"; + +const ExcalidrawClient = dynamic( + () => import("./components/ExcalidrawClient"), + { ssr: false }, +); + +export default function Page() { + return ; +} +``` + +See the local examples for complete setups: + +- [examples/with-nextjs](https://github.com/excalidraw/excalidraw/tree/master/examples/with-nextjs) +- [examples/with-script-in-browser](https://github.com/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) + +## LLM / agent tips + +If an LLM or coding agent is setting up Excalidraw, these shortcuts usually save more time than re-prompting: + +- Start with a plain `` in a `100vh` container. Add refs, `initialData`, persistence, or custom UI only after the base embed works. +- If the canvas is blank, check the CSS import and parent height first. Those are the two most common integration failures. +- In Next.js or other SSR frameworks, assume client-only rendering first. Use `"use client"` and `dynamic(..., { ssr: false })` before debugging hydration or `window is not defined` errors. +- If imports or entrypoints are unclear, inspect `node_modules/@excalidraw/excalidraw/package.json`. The installed package exports are the source of truth. +- Do not set `window.EXCALIDRAW_ASSET_PATH` unless you are intentionally self-hosting fonts/assets. +- When docs and generated code drift, copy the nearest working example from this repo, especially `examples/with-nextjs` or `examples/with-script-in-browser`. + +## Migrating to `@excalidraw/excalidraw@0.18.x` + +Version `0.18.x` removes the old `types/`-prefixed deep import paths. If you were importing types from `@excalidraw/excalidraw/types/...`, switch to the new type-only subpaths below. + +| Old path | New path | +| --- | --- | +| `@excalidraw/excalidraw/types/data/transform.js` | `@excalidraw/excalidraw/element/transform` | +| `@excalidraw/excalidraw/types/data/types.js` | `@excalidraw/excalidraw/data/types` | +| `@excalidraw/excalidraw/types/element/types.js` | `@excalidraw/excalidraw/element/types` | +| `@excalidraw/excalidraw/types/utility-types.js` | `@excalidraw/excalidraw/common/utility-types` | +| `@excalidraw/excalidraw/types/types.js` | `@excalidraw/excalidraw/types` | + +Drop the `.js` extension. The new package `exports` map resolves these paths without it. + +These deep subpaths are for `import type` only. Runtime imports should come from the package root, plus `@excalidraw/excalidraw/index.css` for styles. + +For example: + +```ts +import { exportToSvg } from "@excalidraw/excalidraw"; +``` + +## Self-hosting fonts + +By default, Excalidraw downloads the fonts it needs from the [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod). + +For self-hosting, copy the contents of `node_modules/@excalidraw/excalidraw/dist/prod/fonts` into the path where your app serves static assets, for example `public/`. Then set `window.EXCALIDRAW_ASSET_PATH` to that same path: + +```html + +``` ## Demo -Go to [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example. +Try the [CodeSandbox example](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser). ## Integration -Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration). +Read the [integration docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration). ## API -Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api). +Read the [API docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api). ## Contributing -Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing). +Read the [contributing docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing). From 92d25446d62296338d2bba053b90330e4a1fb8be Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Wed, 11 Mar 2026 16:51:03 +0100 Subject: [PATCH 25/62] feat(packages/excalidraw): tweak and expose more API around state and lifecycle (#10939) --- packages/excalidraw/CHANGELOG.md | 23 +-- packages/excalidraw/components/App.tsx | 120 +++++++----- packages/excalidraw/hooks/useAppStateValue.ts | 176 ++++++++++++------ packages/excalidraw/index.tsx | 47 +++-- .../excalidraw/tests/appStateHooks.test.tsx | 111 +++++++++++ .../excalidraw/tests/packages/events.test.tsx | 16 +- packages/excalidraw/types.ts | 9 +- 7 files changed, 364 insertions(+), 138 deletions(-) create mode 100644 packages/excalidraw/tests/appStateHooks.test.tsx diff --git a/packages/excalidraw/CHANGELOG.md b/packages/excalidraw/CHANGELOG.md index 5d2fa482db..16a98243ee 100644 --- a/packages/excalidraw/CHANGELOG.md +++ b/packages/excalidraw/CHANGELOG.md @@ -18,22 +18,13 @@ Please add the latest change on the top under the correct section. ### Breaking changes - Renamed the `excalidrawAPI` prop to `onExcalidrawAPI`. + - `onExcalidrawAPI` is now called on mount (instead of during constructor), and later on unmount (with `null` value). The API may be removed altogether in the future (you can use `onMount` & `onUmount` to manage the `ExcalidrawAPI` object (e.g. to cache it to a global state), already). ### Features -- Added `onMount` and `onInitialize` props. `onMount` receives `{ excalidrawAPI, container }` once the editor root is mounted, and `onInitialize` fires once the initial scene has loaded. +- Added `ExcalidrawAPI.isDestroyed` flag. Set to `true` once the editor unmounts. Calling any `get*` method, `onStateChange`, or `onEvent` on a destroyed API instance will throw in development and `console.error` in production. The `ExcalidrawAPI` will be reset to `null` on umount, but to be extra safe, you should check `ExcalidrawAPI.isDestroyed` before calling these methods to guard against subtle race conditions in your code. - ```tsx - { - console.log(container); - excalidrawAPI.scrollToContent(); - }} - onInitialize={(api) => { - api.refresh(); - }} - /> - ``` +- Added `onMount`, `onInitialize`, and `onUnmount` props. `onMount` receives `{ excalidrawAPI, container }` once the editor root is mounted. `onInitialize` fires once the initial scene has loaded. `onUnmount` fires just before unmounting. - Same events are also accessible imperatively through `api.onEvent(...)`. @@ -41,7 +32,6 @@ Please add the latest change on the top under the correct section. { api.onEvent("editor:mount", ({ excalidrawAPI, container }) => { - excalidrawAPI.scrollToContent(); console.log(container); }); @@ -54,7 +44,9 @@ Please add the latest change on the top under the correct section. Note that in future releases, most, if not all, `excalidrawAPI.on*` subscriptions will be removed in favor of `excalidrawAPI.onEvent(name)`. -- Exported `ExcalidrawAPIProvider`, `useExcalidrawAPI`, and `useAppStateValue` from the package entrypoint. The imperative API also now exposes `onStateChange`. +- Also added `"editor:unmount"` lifecycle event, only accessible via `api.onEvent("editor:unmount")`. + +- Exported ``, `useExcalidrawAPI()`, `useAppStateValue(prop | props | selectorFunction)`, and `useOnExcalidrawStateChange(prop | props | selectorFunction, callback)` from the package. The imperative API also now exposes `onStateChange(prop | props | selectorFunction, callback?)`, and `onEvent(name, callback)`. ```tsx @@ -63,6 +55,9 @@ Please add the latest change on the top under the correct section. ; function Logger() { + // initially null before the ExcalidrawAPIProvider initializes ater + // renders + // When unmounts, is reset back to null const api = useExcalidrawAPI(); useAppStateValue("viewModeEnabled", (viewModeEnabled) => { diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 09f059d2ab..4ee4141cd0 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -517,6 +517,7 @@ EditorInterfaceContext.displayName = "EditorInterfaceContext"; const editorLifecycleEventBehavior = { "editor:mount": { cardinality: "once", replay: "last" }, "editor:initialize": { cardinality: "once", replay: "last" }, + "editor:unmount": { cardinality: "once", replay: "last" }, } as const; export const ExcalidrawContainerContext = React.createContext<{ @@ -556,7 +557,7 @@ export const ExcalidrawAPIContext = ExcalidrawAPIContext.displayName = "ExcalidrawAPIContext"; export const ExcalidrawAPISetContext = React.createContext< - ((api: ExcalidrawImperativeAPI) => void) | null + ((api: ExcalidrawImperativeAPI | null) => void) | null >(null); ExcalidrawAPISetContext.displayName = "ExcalidrawAPISetContext"; @@ -731,6 +732,50 @@ class App extends React.Component { api: ExcalidrawImperativeAPI; + private createExcalidrawAPI(): ExcalidrawImperativeAPI { + const api: ExcalidrawImperativeAPI = { + isDestroyed: false, + updateScene: this.updateScene, + applyDeltas: this.applyDeltas, + mutateElement: this.mutateElement, + updateLibrary: this.library.updateLibrary, + addFiles: this.addFiles, + resetScene: this.resetScene, + getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted, + getSceneElementsMapIncludingDeleted: + this.getSceneElementsMapIncludingDeleted, + history: { + clear: this.resetHistory, + }, + scrollToContent: this.scrollToContent, + getSceneElements: this.getSceneElements, + getAppState: () => this.state, + getFiles: () => this.files, + getName: this.getName, + registerAction: (action: Action) => { + this.actionManager.registerAction(action); + }, + refresh: this.refresh, + setToast: this.setToast, + id: this.id, + setActiveTool: this.setActiveTool, + setCursor: this.setCursor, + resetCursor: this.resetCursor, + getEditorInterface: () => this.editorInterface, + updateFrameRendering: this.updateFrameRendering, + toggleSidebar: this.toggleSidebar, + onChange: (cb) => this.onChangeEmitter.on(cb), + onIncrement: (cb) => this.store.onStoreIncrementEmitter.on(cb), + onPointerDown: (cb) => this.onPointerDownEmitter.on(cb), + onPointerUp: (cb) => this.onPointerUpEmitter.on(cb), + onScrollChange: (cb) => this.onScrollChangeEmitter.on(cb), + onUserFollow: (cb) => this.onUserFollowEmitter.on(cb), + onStateChange: this.onStateChange, + onEvent: this.onEvent, + }; + return api; + } + constructor(props: AppProps) { super(props); const defaultAppState = getDefaultAppState(); @@ -791,47 +836,11 @@ class App extends React.Component { this.actionManager.registerAction(createUndoAction(this.history)); this.actionManager.registerAction(createRedoAction(this.history)); - this.api = { - updateScene: this.updateScene, - applyDeltas: this.applyDeltas, - mutateElement: this.mutateElement, - updateLibrary: this.library.updateLibrary, - addFiles: this.addFiles, - resetScene: this.resetScene, - getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted, - getSceneElementsMapIncludingDeleted: - this.getSceneElementsMapIncludingDeleted, - history: { - clear: this.resetHistory, - }, - scrollToContent: this.scrollToContent, - getSceneElements: this.getSceneElements, - getAppState: () => this.state, - getFiles: () => this.files, - getName: this.getName, - registerAction: (action: Action) => { - this.actionManager.registerAction(action); - }, - refresh: this.refresh, - setToast: this.setToast, - id: this.id, - setActiveTool: this.setActiveTool, - setCursor: this.setCursor, - resetCursor: this.resetCursor, - getEditorInterface: () => this.editorInterface, - updateFrameRendering: this.updateFrameRendering, - toggleSidebar: this.toggleSidebar, - onChange: (cb) => this.onChangeEmitter.on(cb), - onIncrement: (cb) => this.store.onStoreIncrementEmitter.on(cb), - onPointerDown: (cb) => this.onPointerDownEmitter.on(cb), - onPointerUp: (cb) => this.onPointerUpEmitter.on(cb), - onScrollChange: (cb) => this.onScrollChangeEmitter.on(cb), - onUserFollow: (cb) => this.onUserFollowEmitter.on(cb), - onStateChange: this.onStateChange, - onEvent: this.onEvent, - } as const; - - props.onExcalidrawAPI?.(this.api); + // in case internal editor APIs call this early, otherwise we need + // to construct this in componentDidMount because componentWillUnmount + // will invalidate it (so in StrictMode, doing this in constructor alone + // would be a problem) + this.api = this.createExcalidrawAPI(); } updateEditorAtom = ( @@ -3003,6 +3012,8 @@ class App extends React.Component { public async componentDidMount() { this.unmounted = false; + this.api = this.createExcalidrawAPI(); + this.excalidrawContainerValue.container = this.excalidrawContainerRef.current; @@ -3089,10 +3100,35 @@ class App extends React.Component { this.editorLifecycleEvents.emit("editor:mount", mountPayload); this.props.onMount?.(mountPayload); + this.props.onExcalidrawAPI?.(this.api); } public componentWillUnmount() { + // we're recreating the api object reference so that the + // picks up on it + this.api = { ...this.api, isDestroyed: true }; + + for (const key of Object.keys(this.api) as (keyof typeof this.api)[]) { + if ( + (key.startsWith("get") || + key === "onStateChange" || + key === "onEvent") && + typeof this.api[key] === "function" + ) { + (this.api as any)[key] = () => { + throw new Error( + "ExcalidrawAPI is no longer usable after the editor has been unmounted and will return invalid/empty data. You should check for `ExcalidrawAPI.isDestroyed` before calling get* methods on subscribing to state/event changes.", + ); + }; + } + } + + this.editorLifecycleEvents.emit("editor:unmount"); + this.props.onUnmount?.(); + this.props.onExcalidrawAPI?.(null); + (window as any).launchQueue?.setConsumer(() => {}); + this.renderer.destroy(); this.scene.destroy(); this.scene = new Scene(); diff --git a/packages/excalidraw/hooks/useAppStateValue.ts b/packages/excalidraw/hooks/useAppStateValue.ts index 2f4750a564..12ca1b5b92 100644 --- a/packages/excalidraw/hooks/useAppStateValue.ts +++ b/packages/excalidraw/hooks/useAppStateValue.ts @@ -6,6 +6,51 @@ import { getDefaultAppState } from "../appState"; import type { AppState } from "../types"; +type AppStateSelector = + | keyof AppState + | (keyof AppState)[] + | ((appState: AppState) => unknown); + +const getSelectedValue = (appState: AppState, selector: AppStateSelector) => { + if (typeof selector === "function") { + return selector(appState); + } + if (Array.isArray(selector)) { + return appState; + } + return appState[selector]; +}; + +const getLatestValue = ( + api: ReturnType, + selector: AppStateSelector, + _internal: boolean, +) => { + if (api?.isDestroyed) { + return; + } + + let appState = api?.getAppState(); + if (!appState) { + if (!_internal) { + return undefined; + } + + console.warn( + "useAppStateValue: excalidrawAPI not defined yet for internal component while it should always be defined. Are you sure you're rendering inside of component tree?", + ); + // fall back in case there's a bug so we don't break the app + // (internal components using this internal useAppStateValue expect + // non-undefined values on init) + appState = Object.assign( + { width: 0, height: 0, offsetLeft: 0, offsetTop: 0 }, + getDefaultAppState(), + ); + } + + return getSelectedValue(appState, selector); +}; + /** * Subscribes to specific appState changes. The component re-renders * only when the specified prop(s) change — not on every appState update. @@ -19,92 +64,109 @@ import type { AppState } from "../types"; * - `(keyof AppState)[]` → whole `AppState` * - selector function → selector's return type `T` * - * Calls the optional callback with the latest value on every change (not called - * on initial render). - * * If excalidrawAPI is not ready yet (host apps), hook is rerendered with latest * value once available. */ export function useAppStateValue( prop: K, - callback?: (value: AppState[K], appState: AppState) => void, _internal?: boolean, ): AppState[K]; export function useAppStateValue( props: (keyof AppState)[], - callback?: (props: AppState, appState: AppState) => void, _internal?: boolean, ): AppState; export function useAppStateValue( selector: (appState: AppState) => T, - callback?: (value: T, appState: AppState) => void, _internal?: boolean, ): T; export function useAppStateValue( - selector: - | keyof AppState - | (keyof AppState)[] - | ((appState: AppState) => unknown), - callback?: (value: any, appState: AppState) => void, + selector: AppStateSelector, _internal: boolean = true, ): unknown { const api = useExcalidrawAPI(); + const [, rerender] = useState(0); - const getLatestValue = () => { - let appState = api?.getAppState(); - if (!appState) { - if (!_internal) { - return undefined; - } - console.warn( - "useAppStateValue: excalidrawAPI not defined yet for internal component in which case it should always be defined. Are you sure you're rendering inside of component tree?", - ); - // fall back in case there's a bug so we don't break the app - // (internal components using this internal useAppStateValue expect - // non-undefined values on init) - appState = Object.assign( - { width: 0, height: 0, offsetLeft: 0, offsetTop: 0 }, - getDefaultAppState(), - ); - } - if (typeof selector === "function") { - return selector(appState); - } - if (Array.isArray(selector)) { - return appState; - } - return appState[selector]; - }; - - const [value, setValue] = useState(getLatestValue); - - const stateRef = useRef({ - selector, - callback, - isInitialized: !!api, - latestValue: value, - }); + const stateRef = useRef<{ + selector: AppStateSelector; + isInitialized: boolean; + latestValue: unknown; + } | null>(null); + if (!stateRef.current) { + stateRef.current = { + selector, + isInitialized: !!api, + latestValue: getLatestValue(api, selector, _internal), + }; + } stateRef.current.selector = selector; - stateRef.current.callback = callback; - if (!stateRef.current.isInitialized && api) { + if (!stateRef.current.isInitialized && api && !api.isDestroyed) { stateRef.current.isInitialized = true; - stateRef.current.latestValue = getLatestValue(); + stateRef.current.latestValue = getLatestValue(api, selector, _internal); } useEffect(() => { - if (!api) { + const currentStateRef = stateRef.current; + if (!api || api.isDestroyed || !currentStateRef) { return; } - return api.onStateChange( - stateRef.current.selector, - (newValue: any, state: AppState) => { - stateRef.current.latestValue = newValue; - stateRef.current.callback?.(newValue, state); - setValue(newValue); - }, - ); + return api.onStateChange(currentStateRef.selector, (newValue: any) => { + currentStateRef.latestValue = newValue; + rerender((value) => value + 1); + }); }, [api]); return stateRef.current.latestValue; } + +/** + * Subscribes to specific appState changes without causing component rerenders. + * + * The callback is called on every matching change, but also on initial render + * so you can initialize your state. + */ +export function useOnAppStateChange( + prop: K, + callback: (value: AppState[K], appState: AppState) => void, +): undefined; +export function useOnAppStateChange( + props: (keyof AppState)[], + callback: (props: AppState, appState: AppState) => void, +): undefined; +export function useOnAppStateChange( + selector: (appState: AppState) => T, + callback: (value: T, appState: AppState) => void, +): undefined; +export function useOnAppStateChange( + selector: AppStateSelector, + callback: (value: any, appState: AppState) => void, +): undefined { + const api = useExcalidrawAPI(); + + const stateRef = useRef({ + selector, + callback, + }); + stateRef.current.selector = selector; + stateRef.current.callback = callback; + + useEffect(() => { + if (!api || api.isDestroyed) { + return; + } + + stateRef.current.callback( + getLatestValue(api, stateRef.current.selector, true), + api.getAppState(), + ); + + return api.onStateChange( + stateRef.current.selector, + (newValue: any, state: AppState) => { + stateRef.current.callback(newValue, state); + }, + ); + }, [api]); + + return undefined; +} diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx index 7671951c0e..7ced19a337 100644 --- a/packages/excalidraw/index.tsx +++ b/packages/excalidraw/index.tsx @@ -1,4 +1,10 @@ -import React, { useCallback, useContext, useEffect, useState } from "react"; +import React, { + useCallback, + useContext, + useEffect, + useRef, + useState, +} from "react"; import { DEFAULT_UI_OPTIONS, isShallowEqual } from "@excalidraw/common"; @@ -12,7 +18,10 @@ import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollab import MainMenu from "./components/main-menu/MainMenu"; import WelcomeScreen from "./components/welcome-screen/WelcomeScreen"; import { defaultLang } from "./i18n"; -import { useAppStateValue as _useAppStateValue } from "./hooks/useAppStateValue"; +import { + useAppStateValue as _useAppStateValue, + useOnAppStateChange as _useOnAppStateChange, +} from "./hooks/useAppStateValue"; import { EditorJotaiProvider, editorJotaiStore } from "./editor-jotai"; import polyfill from "./polyfill"; @@ -31,8 +40,8 @@ polyfill(); /** * Stateless provider that allows `useExcalidrawAPI()` (and hooks built - * on it, such as `useAppStateValue()`) to work outside the - * component tree. + * on it, such as `useAppStateValue()` and `useOnAppStateChange()`) to work + * outside the component tree. */ export const ExcalidrawAPIProvider = ({ children, @@ -57,6 +66,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => { initialData, onExcalidrawAPI, onMount, + onUnmount, onInitialize, isCollaborating = false, onPointerUpdate, @@ -119,12 +129,16 @@ const ExcalidrawBase = (props: ExcalidrawProps) => { } const setExcalidrawAPI = useContext(ExcalidrawAPISetContext); + + const onExcalidrawAPIRef = useRef(onExcalidrawAPI); + onExcalidrawAPIRef.current = onExcalidrawAPI; + const handleExcalidrawAPI = useCallback( - (api: ExcalidrawImperativeAPI) => { + (api: ExcalidrawImperativeAPI | null) => { setExcalidrawAPI?.(api); - onExcalidrawAPI?.(api); + onExcalidrawAPIRef.current?.(api); }, - [onExcalidrawAPI, setExcalidrawAPI], + [setExcalidrawAPI], ); useEffect(() => { @@ -162,6 +176,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => { initialData={initialData} onExcalidrawAPI={handleExcalidrawAPI} onMount={onMount} + onUnmount={onUnmount} onInitialize={onInitialize} isCollaborating={isCollaborating} onPointerUpdate={onPointerUpdate} @@ -378,7 +393,7 @@ export { } from "./charts"; // ----------------------------------------------------------------------------- -// useAppStateValue() wrapper for host apps for the return type to reflect the +// useExcalidrawStateValue() wrapper for host apps for the return type to reflect the // the potentially `undefined` value for initial render before the excalidrawAPI // is ready. // @@ -388,25 +403,23 @@ export { * @param prop - appState prop(s) to subscribe to, or a selector function. * NOTE `prop/selector` is memoized and will not change after initial render */ -export function useAppStateValue( +export function useExcalidrawStateValue( prop: K, - callback?: (value: AppState[K], appState: AppState) => void, ): AppState[K] | undefined; -export function useAppStateValue( +export function useExcalidrawStateValue( props: T[], - callback?: (values: AppState, appState: AppState) => void, ): AppState | undefined; -export function useAppStateValue( +export function useExcalidrawStateValue( selector: (appState: AppState) => T, - callback?: (value: T, appState: AppState) => void, ): T | undefined; -export function useAppStateValue( +export function useExcalidrawStateValue( selector: | keyof AppState | (keyof AppState)[] | ((appState: AppState) => unknown), - callback?: (value: any, appState: AppState) => void, ) { - return _useAppStateValue(selector as any, callback, false); + return _useAppStateValue(selector as any, false); } // ----------------------------------------------------------------------------- + +export { _useOnAppStateChange as useOnExcalidrawStateChange }; diff --git a/packages/excalidraw/tests/appStateHooks.test.tsx b/packages/excalidraw/tests/appStateHooks.test.tsx new file mode 100644 index 0000000000..41f1fbba2b --- /dev/null +++ b/packages/excalidraw/tests/appStateHooks.test.tsx @@ -0,0 +1,111 @@ +import { act, cleanup, render, screen } from "@testing-library/react"; +import { vi } from "vitest"; + +import { getDefaultAppState } from "../appState"; +import { ExcalidrawAPIContext } from "../components/App"; +import { AppStateObserver } from "../components/AppStateObserver"; +import { + useAppStateValue, + useOnAppStateChange, +} from "../hooks/useAppStateValue"; + +import type { AppState, ExcalidrawImperativeAPI } from "../types"; + +const createAppState = (): AppState => ({ + ...getDefaultAppState(), + width: 0, + height: 0, + offsetLeft: 0, + offsetTop: 0, +}); + +const createMockAPI = (initialState: AppState) => { + let state = initialState; + const observer = new AppStateObserver(() => state); + + return { + api: { + isDestroyed: false, + getAppState: () => state, + onStateChange: observer.onStateChange, + } as Pick< + ExcalidrawImperativeAPI, + "isDestroyed" | "getAppState" | "onStateChange" + > as ExcalidrawImperativeAPI, + updateAppState: (partial: Partial) => { + const prevState = state; + state = { ...state, ...partial }; + observer.flush(prevState); + }, + }; +}; + +describe("app state hooks", () => { + afterEach(() => { + cleanup(); + }); + + it("useAppStateValue rerenders when the selected value changes", () => { + const renderSpy = vi.fn(); + const { api, updateAppState } = createMockAPI(createAppState()); + + const ValueConsumer = () => { + const value = useAppStateValue("viewModeEnabled"); + renderSpy(value); + return
{String(value)}
; + }; + + render( + + + , + ); + + expect(screen.getByTestId("value").textContent).toBe("false"); + expect(renderSpy).toHaveBeenCalledTimes(1); + + act(() => { + updateAppState({ viewModeEnabled: true }); + }); + + expect(screen.getByTestId("value").textContent).toBe("true"); + expect(renderSpy).toHaveBeenCalledTimes(2); + }); + + it("useOnAppStateChange notifies without rerendering", () => { + const renderSpy = vi.fn(); + const callback = vi.fn(); + const { api, updateAppState } = createMockAPI(createAppState()); + + const ChangeConsumer = () => { + const value = useOnAppStateChange("viewModeEnabled", callback); + renderSpy(value); + return
{String(value)}
; + }; + + render( + + + , + ); + + expect(screen.getByTestId("value").textContent).toBe("undefined"); + expect(renderSpy).toHaveBeenCalledTimes(1); + expect(callback).toHaveBeenCalledTimes(1); + expect(callback).toHaveBeenCalledWith( + false, + expect.objectContaining({ viewModeEnabled: false }), + ); + + act(() => { + updateAppState({ viewModeEnabled: true }); + }); + + expect(renderSpy).toHaveBeenCalledTimes(1); + expect(callback).toHaveBeenCalledTimes(2); + expect(callback).toHaveBeenLastCalledWith( + true, + expect.objectContaining({ viewModeEnabled: true }), + ); + }); +}); diff --git a/packages/excalidraw/tests/packages/events.test.tsx b/packages/excalidraw/tests/packages/events.test.tsx index f30c8b092c..17107decad 100644 --- a/packages/excalidraw/tests/packages/events.test.tsx +++ b/packages/excalidraw/tests/packages/events.test.tsx @@ -41,13 +41,15 @@ describe("event callbacks", () => { await render( - lifecyclePromise.resolve({ - api: api as ExcalidrawImperativeAPI, - mount: api.onEvent("editor:mount"), - initialize: api.onEvent("editor:initialize"), - }) - } + onExcalidrawAPI={(api) => { + if (api) { + lifecyclePromise.resolve({ + api, + mount: api.onEvent("editor:mount"), + initialize: api.onEvent("editor:initialize"), + }); + } + }} />, ); diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index b1005d3dcd..63397ea488 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -573,11 +573,15 @@ export interface ExcalidrawProps { * Invoked as soon as the Excalidraw API is available * NOTE editor is not yet mounted, and state is not yet initialized */ - onExcalidrawAPI?: (api: ExcalidrawImperativeAPI) => void; + onExcalidrawAPI?: (api: ExcalidrawImperativeAPI | null) => void; /** * Invoked once the editor root is mounted. */ onMount?: (payload: ExcalidrawMountPayload) => void; + /** + * Invoked when the editor root is unmounted. + */ + onUnmount?: () => void; /** * Invoked once the initial scene is loaded. */ @@ -907,9 +911,12 @@ export type ExcalidrawMountPayload = { export type ExcalidrawImperativeAPIEventMap = { "editor:mount": [payload: ExcalidrawMountPayload]; "editor:initialize": [api: ExcalidrawImperativeAPI]; + "editor:unmount": []; }; export interface ExcalidrawImperativeAPI { + /** Whether the editor has been unmounted and the API is no longer usable. */ + isDestroyed: boolean; updateScene: InstanceType["updateScene"]; applyDeltas: InstanceType["applyDeltas"]; mutateElement: InstanceType["mutateElement"]; From 816c81c12e41537373193140c1858fc10a871dae Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Wed, 11 Mar 2026 22:00:31 +0100 Subject: [PATCH 26/62] feat(editor): ERD arrowheads and diagrams (#10940) --- .../api/excalidraw-element-skeleton.mdx | 2 +- packages/element/src/arrowheads.ts | 32 ++ packages/element/src/bounds.ts | 65 ++-- packages/element/src/index.ts | 1 + packages/element/src/shape.ts | 309 +++++++++++++----- packages/element/src/types.ts | 21 +- packages/excalidraw/actions/actionExport.tsx | 2 +- .../excalidraw/actions/actionProperties.tsx | 216 +++++++----- packages/excalidraw/components/App.tsx | 2 +- .../excalidraw/components/IconPicker.scss | 17 +- packages/excalidraw/components/IconPicker.tsx | 227 +++++++++---- .../TTDDialog/MermaidToExcalidraw.tsx | 31 +- .../excalidraw/components/TTDDialog/common.ts | 2 +- packages/excalidraw/components/icons.tsx | 211 +++++++----- packages/excalidraw/css/theme.scss | 10 +- packages/excalidraw/data/restore.ts | 10 +- packages/excalidraw/locales/en.json | 11 +- packages/excalidraw/package.json | 2 +- .../MermaidToExcalidraw.test.tsx.snap | 2 +- .../excalidraw/tests/data/restore.test.ts | 20 ++ yarn.lock | 8 +- 21 files changed, 834 insertions(+), 367 deletions(-) create mode 100644 packages/element/src/arrowheads.ts diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton.mdx index b633236aad..e1dd071eac 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton.mdx @@ -172,7 +172,7 @@ convertToExcalidrawElements([ type: "arrow", x: 450, y: 20, - startArrowhead: "dot", + startArrowhead: "circle", endArrowhead: "triangle", strokeColor: "#1971c2", strokeWidth: 2, diff --git a/packages/element/src/arrowheads.ts b/packages/element/src/arrowheads.ts new file mode 100644 index 0000000000..7e76b2b3bf --- /dev/null +++ b/packages/element/src/arrowheads.ts @@ -0,0 +1,32 @@ +import type { Arrowhead, AnyArrowhead } from "./types"; + +export const normalizeArrowhead = ( + arrowhead: AnyArrowhead | null | undefined, +): Arrowhead | null => { + switch (arrowhead) { + case undefined: + case null: + return null; + case "dot": + return "circle"; + case "crowfoot_one": + return "cardinality_one"; + case "crowfoot_many": + return "cardinality_many"; + case "crowfoot_one_or_many": + return "cardinality_one_or_many"; + default: + return arrowhead; + } +}; + +export const getArrowheadForPicker = ( + arrowhead: AnyArrowhead | null | undefined, +): Arrowhead | null => { + const normalizedArrowhead = normalizeArrowhead(arrowhead); + if (normalizedArrowhead === null) { + return null; + } + + return normalizedArrowhead; +}; diff --git a/packages/element/src/bounds.ts b/packages/element/src/bounds.ts index 0daa80f15d..a73a7d28bb 100644 --- a/packages/element/src/bounds.ts +++ b/packages/element/src/bounds.ts @@ -709,6 +709,9 @@ const getFreeDrawElementAbsoluteCoords = ( return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2]; }; +const CARDINALITY_MARKER_SIZE = 20; +const CROWFOOT_ARROWHEAD_SIZE = 15; + /** @returns number in pixels */ export const getArrowheadSize = (arrowhead: Arrowhead): number => { switch (arrowhead) { @@ -717,10 +720,14 @@ export const getArrowheadSize = (arrowhead: Arrowhead): number => { case "diamond": case "diamond_outline": return 12; - case "crowfoot_many": - case "crowfoot_one": - case "crowfoot_one_or_many": - return 20; + case "cardinality_many": + case "cardinality_one_or_many": + case "cardinality_zero_or_many": + return CROWFOOT_ARROWHEAD_SIZE; + case "cardinality_one": + case "cardinality_exactly_one": + case "cardinality_zero_or_one": + return CARDINALITY_MARKER_SIZE; default: return 15; } @@ -743,7 +750,12 @@ export const getArrowheadPoints = ( shape: Drawable[], position: "start" | "end", arrowhead: Arrowhead, + offsetMultiplier = 0, ) => { + if (arrowhead === null) { + return null; + } + if (shape.length < 1) { return null; } @@ -824,29 +836,30 @@ export const getArrowheadPoints = ( const lengthMultiplier = arrowhead === "diamond" || arrowhead === "diamond_outline" ? 0.25 : 0.5; const minSize = Math.min(size, length * lengthMultiplier); - const xs = x2 - nx * minSize; - const ys = y2 - ny * minSize; + const tx = x2 - nx * minSize * offsetMultiplier; + const ty = y2 - ny * minSize * offsetMultiplier; + const xs = tx - nx * minSize; + const ys = ty - ny * minSize; - if ( - arrowhead === "dot" || - arrowhead === "circle" || - arrowhead === "circle_outline" - ) { - const diameter = Math.hypot(ys - y2, xs - x2) + element.strokeWidth - 2; - return [x2, y2, diameter]; + if (arrowhead === "circle" || arrowhead === "circle_outline") { + const diameter = Math.hypot(ys - ty, xs - tx) + element.strokeWidth - 2; + return [tx, ty, diameter]; } const angle = getArrowheadAngle(arrowhead); - if (arrowhead === "crowfoot_many" || arrowhead === "crowfoot_one_or_many") { + if ( + arrowhead === "cardinality_many" || + arrowhead === "cardinality_one_or_many" + ) { // swap (xs, ys) with (x2, y2) const [x3, y3] = pointRotateRads( - pointFrom(x2, y2), + pointFrom(tx, ty), pointFrom(xs, ys), degreesToRadians(-angle as Degrees), ); const [x4, y4] = pointRotateRads( - pointFrom(x2, y2), + pointFrom(tx, ty), pointFrom(xs, ys), degreesToRadians(angle), ); @@ -856,12 +869,12 @@ export const getArrowheadPoints = ( // Return points const [x3, y3] = pointRotateRads( pointFrom(xs, ys), - pointFrom(x2, y2), + pointFrom(tx, ty), ((-angle * Math.PI) / 180) as Radians, ); const [x4, y4] = pointRotateRads( pointFrom(xs, ys), - pointFrom(x2, y2), + pointFrom(tx, ty), degreesToRadians(angle), ); @@ -874,9 +887,9 @@ export const getArrowheadPoints = ( const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0]; [ox, oy] = pointRotateRads( - pointFrom(x2 + minSize * 2, y2), - pointFrom(x2, y2), - Math.atan2(py - y2, px - x2) as Radians, + pointFrom(tx + minSize * 2, ty), + pointFrom(tx, ty), + Math.atan2(py - ty, px - tx) as Radians, ); } else { const [px, py] = @@ -885,16 +898,16 @@ export const getArrowheadPoints = ( : [0, 0]; [ox, oy] = pointRotateRads( - pointFrom(x2 - minSize * 2, y2), - pointFrom(x2, y2), - Math.atan2(y2 - py, x2 - px) as Radians, + pointFrom(tx - minSize * 2, ty), + pointFrom(tx, ty), + Math.atan2(ty - py, tx - px) as Radians, ); } - return [x2, y2, x3, y3, ox, oy, x4, y4]; + return [tx, ty, x3, y3, ox, oy, x4, y4]; } - return [x2, y2, x3, y3, x4, y4]; + return [tx, ty, x3, y3, x4, y4]; }; // TODO reuse shape.ts diff --git a/packages/element/src/index.ts b/packages/element/src/index.ts index 1ca1c1a289..c55537d451 100644 --- a/packages/element/src/index.ts +++ b/packages/element/src/index.ts @@ -99,3 +99,4 @@ export * from "./typeChecks"; export * from "./utils"; export * from "./zindex"; export * from "./arrows/helpers"; +export * from "./arrowheads"; diff --git a/packages/element/src/shape.ts b/packages/element/src/shape.ts index 176455bdf9..9bef1329af 100644 --- a/packages/element/src/shape.ts +++ b/packages/element/src/shape.ts @@ -69,10 +69,10 @@ import type { NonDeletedExcalidrawElement, ExcalidrawSelectionElement, ExcalidrawLinearElement, - Arrowhead, ExcalidrawFreeDrawElement, ElementsMap, ExcalidrawLineElement, + Arrowhead, } from "./types"; import type { Drawable, Options } from "roughjs/bin/core"; @@ -296,6 +296,82 @@ const modifyIframeLikeForRoughOptions = ( return element; }; +const generateArrowheadCardinalityOne = ( + generator: RoughGenerator, + arrowheadPoints: number[] | null, + lineOptions: Options, +) => { + if (arrowheadPoints === null) { + return []; + } + + const [, , x3, y3, x4, y4] = arrowheadPoints; + + return [generator.line(x3, y3, x4, y4, lineOptions)]; +}; + +const generateArrowheadLinesToTip = ( + generator: RoughGenerator, + arrowheadPoints: number[] | null, + lineOptions: Options, +) => { + if (arrowheadPoints === null) { + return []; + } + + const [x2, y2, x3, y3, x4, y4] = arrowheadPoints; + + return [ + generator.line(x3, y3, x2, y2, lineOptions), + generator.line(x4, y4, x2, y2, lineOptions), + ]; +}; + +const getArrowheadLineOptions = ( + element: ExcalidrawLinearElement, + options: Options, +) => { + const lineOptions = { ...options }; + + if (element.strokeStyle === "dotted") { + // for dotted arrows caps, reduce gap to make it more legible + const dash = getDashArrayDotted(element.strokeWidth - 1); + lineOptions.strokeLineDash = [dash[0], dash[1] - 1]; + } else { + // for solid/dashed, keep solid arrow cap + delete lineOptions.strokeLineDash; + } + lineOptions.roughness = Math.min(1, lineOptions.roughness || 0); + + return lineOptions; +}; + +const generateArrowheadOutlineCircle = ( + generator: RoughGenerator, + options: Options, + strokeColor: string, + arrowheadPoints: number[] | null, + fill: string, + diameterScale = 1, +) => { + if (arrowheadPoints === null) { + return []; + } + + const [x, y, diameter] = arrowheadPoints; + const circleOptions = { + ...options, + fill, + fillStyle: "solid" as const, + stroke: strokeColor, + roughness: Math.min(0.5, options.roughness || 0), + }; + + delete circleOptions.strokeLineDash; + + return [generator.circle(x, y, diameter * diameterScale, circleOptions)]; +}; + const getArrowheadShapes = ( element: ExcalidrawLinearElement, shape: Drawable[], @@ -306,63 +382,54 @@ const getArrowheadShapes = ( canvasBackgroundColor: string, isDarkMode: boolean, ) => { - const arrowheadPoints = getArrowheadPoints( - element, - shape, - position, - arrowhead, - ); - - if (arrowheadPoints === null) { + if (arrowhead === null) { return []; } - const generateCrowfootOne = ( - arrowheadPoints: number[] | null, - options: Options, - ) => { - if (arrowheadPoints === null) { - return []; - } - - const [, , x3, y3, x4, y4] = arrowheadPoints; - - return [generator.line(x3, y3, x4, y4, options)]; - }; - const strokeColor = isDarkMode ? applyDarkModeFilter(element.strokeColor) : element.strokeColor; + const backgroundFillColor = isDarkMode + ? applyDarkModeFilter(canvasBackgroundColor) + : canvasBackgroundColor; + const cardinalityOneOrManyOffset = -0.25; + const cardinalityZeroCircleScale = 0.8; switch (arrowhead) { - case "dot": case "circle": case "circle_outline": { - const [x, y, diameter] = arrowheadPoints; - - // always use solid stroke for arrowhead - delete options.strokeLineDash; - - return [ - generator.circle(x, y, diameter, { - ...options, - fill: - arrowhead === "circle_outline" - ? canvasBackgroundColor - : strokeColor, - - fillStyle: "solid", - stroke: strokeColor, - roughness: Math.min(0.5, options.roughness || 0), - }), - ]; + return generateArrowheadOutlineCircle( + generator, + options, + strokeColor, + getArrowheadPoints(element, shape, position, arrowhead), + arrowhead === "circle_outline" ? backgroundFillColor : strokeColor, + ); } case "triangle": case "triangle_outline": { + const arrowheadPoints = getArrowheadPoints( + element, + shape, + position, + arrowhead, + ); + + if (arrowheadPoints === null) { + return []; + } + const [x, y, x2, y2, x3, y3] = arrowheadPoints; + const triangleOptions = { + ...options, + fill: + arrowhead === "triangle_outline" ? backgroundFillColor : strokeColor, + fillStyle: "solid" as const, + roughness: Math.min(1, options.roughness || 0), + }; // always use solid stroke for arrowhead - delete options.strokeLineDash; + delete triangleOptions.strokeLineDash; return [ generator.polygon( @@ -372,24 +439,34 @@ const getArrowheadShapes = ( [x3, y3], [x, y], ], - { - ...options, - fill: - arrowhead === "triangle_outline" - ? canvasBackgroundColor - : strokeColor, - fillStyle: "solid", - roughness: Math.min(1, options.roughness || 0), - }, + triangleOptions, ), ]; } case "diamond": case "diamond_outline": { + const arrowheadPoints = getArrowheadPoints( + element, + shape, + position, + arrowhead, + ); + + if (arrowheadPoints === null) { + return []; + } + const [x, y, x2, y2, x3, y3, x4, y4] = arrowheadPoints; + const diamondOptions = { + ...options, + fill: + arrowhead === "diamond_outline" ? backgroundFillColor : strokeColor, + fillStyle: "solid" as const, + roughness: Math.min(1, options.roughness || 0), + }; // always use solid stroke for arrowhead - delete options.strokeLineDash; + delete diamondOptions.strokeLineDash; return [ generator.polygon( @@ -400,46 +477,106 @@ const getArrowheadShapes = ( [x4, y4], [x, y], ], - { - ...options, - fill: - arrowhead === "diamond_outline" - ? canvasBackgroundColor - : strokeColor, - fillStyle: "solid", - roughness: Math.min(1, options.roughness || 0), - }, + diamondOptions, + ), + ]; + } + case "cardinality_one": + return generateArrowheadCardinalityOne( + generator, + getArrowheadPoints(element, shape, position, arrowhead), + getArrowheadLineOptions(element, options), + ); + case "cardinality_many": + return generateArrowheadLinesToTip( + generator, + getArrowheadPoints(element, shape, position, arrowhead), + getArrowheadLineOptions(element, options), + ); + case "cardinality_one_or_many": { + const lineOptions = getArrowheadLineOptions(element, options); + + return [ + ...generateArrowheadLinesToTip( + generator, + getArrowheadPoints(element, shape, position, "cardinality_many"), + lineOptions, + ), + ...generateArrowheadCardinalityOne( + generator, + getArrowheadPoints( + element, + shape, + position, + "cardinality_one", + cardinalityOneOrManyOffset, + ), + lineOptions, + ), + ]; + } + case "cardinality_exactly_one": { + const lineOptions = getArrowheadLineOptions(element, options); + + return [ + ...generateArrowheadCardinalityOne( + generator, + getArrowheadPoints(element, shape, position, "cardinality_one", -0.5), + lineOptions, + ), + ...generateArrowheadCardinalityOne( + generator, + getArrowheadPoints(element, shape, position, "cardinality_one"), + lineOptions, + ), + ]; + } + case "cardinality_zero_or_one": { + const lineOptions = getArrowheadLineOptions(element, options); + + return [ + ...generateArrowheadOutlineCircle( + generator, + options, + strokeColor, + getArrowheadPoints(element, shape, position, "circle_outline", 1.5), + backgroundFillColor, + cardinalityZeroCircleScale, + ), + ...generateArrowheadCardinalityOne( + generator, + getArrowheadPoints(element, shape, position, "cardinality_one", -0.5), + lineOptions, + ), + ]; + } + case "cardinality_zero_or_many": { + const lineOptions = getArrowheadLineOptions(element, options); + + return [ + ...generateArrowheadLinesToTip( + generator, + getArrowheadPoints(element, shape, position, "cardinality_many"), + lineOptions, + ), + ...generateArrowheadOutlineCircle( + generator, + options, + strokeColor, + getArrowheadPoints(element, shape, position, "circle_outline", 1.5), + backgroundFillColor, + cardinalityZeroCircleScale, ), ]; } - case "crowfoot_one": - return generateCrowfootOne(arrowheadPoints, options); case "bar": case "arrow": - case "crowfoot_many": - case "crowfoot_one_or_many": default: { - const [x2, y2, x3, y3, x4, y4] = arrowheadPoints; - - if (element.strokeStyle === "dotted") { - // for dotted arrows caps, reduce gap to make it more legible - const dash = getDashArrayDotted(element.strokeWidth - 1); - options.strokeLineDash = [dash[0], dash[1] - 1]; - } else { - // for solid/dashed, keep solid arrow cap - delete options.strokeLineDash; - } - options.roughness = Math.min(1, options.roughness || 0); - return [ - generator.line(x3, y3, x2, y2, options), - generator.line(x4, y4, x2, y2, options), - ...(arrowhead === "crowfoot_one_or_many" - ? generateCrowfootOne( - getArrowheadPoints(element, shape, position, "crowfoot_one"), - options, - ) - : []), - ]; + return generateArrowheadLinesToTip( + generator, + getArrowheadPoints(element, shape, position, arrowhead), + getArrowheadLineOptions(element, options), + ); } } }; diff --git a/packages/element/src/types.ts b/packages/element/src/types.ts index 58e4469706..8d280f3141 100644 --- a/packages/element/src/types.ts +++ b/packages/element/src/types.ts @@ -303,19 +303,32 @@ export type PointsPositionUpdates = Map< { point: LocalPoint; isDragging?: boolean } >; +export type CardinalityArrowhead = + | "cardinality_one" + | "cardinality_many" + | "cardinality_one_or_many" + | "cardinality_exactly_one" + | "cardinality_zero_or_one" + | "cardinality_zero_or_many"; + +export type ArrowheadLegacy = + | "dot" + | "crowfoot_one" + | "crowfoot_many" + | "crowfoot_one_or_many"; + export type Arrowhead = | "arrow" | "bar" - | "dot" // legacy. Do not use for new elements. | "circle" | "circle_outline" | "triangle" | "triangle_outline" | "diamond" | "diamond_outline" - | "crowfoot_one" - | "crowfoot_many" - | "crowfoot_one_or_many"; + | CardinalityArrowhead; + +export type AnyArrowhead = Arrowhead | ArrowheadLegacy; export type ExcalidrawLinearElement = _ExcalidrawElementBase & Readonly<{ diff --git a/packages/excalidraw/actions/actionExport.tsx b/packages/excalidraw/actions/actionExport.tsx index b7ed8974f1..dceeee0e4c 100644 --- a/packages/excalidraw/actions/actionExport.tsx +++ b/packages/excalidraw/actions/actionExport.tsx @@ -399,7 +399,7 @@ export const actionSaveFileToDisk = register({ appState: { openDialog: null, fileHandle: savedFileHandle, - toast: { message: t("toast.fileSaved") }, + toast: { message: t("toast.fileSaved"), duration: 3000 }, }, }; } catch (error: any) { diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index 93fe0ada1a..bca2237940 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -36,6 +36,7 @@ import { import { LinearElementEditor } from "@excalidraw/element"; import { newElementWith } from "@excalidraw/element"; +import { getArrowheadForPicker } from "@excalidraw/element"; import { getBoundTextElement, @@ -124,9 +125,12 @@ import { sharpArrowIcon, roundArrowIcon, elbowArrowIcon, - ArrowheadCrowfootIcon, - ArrowheadCrowfootOneIcon, - ArrowheadCrowfootOneOrManyIcon, + ArrowheadCardinalityExactlyOneIcon, + ArrowheadCardinalityManyIcon, + ArrowheadCardinalityOneIcon, + ArrowheadCardinalityOneOrManyIcon, + ArrowheadCardinalityZeroOrManyIcon, + ArrowheadCardinalityZeroOrOneIcon, } from "../components/icons"; import { Fonts } from "../fonts"; @@ -1550,80 +1554,117 @@ export const actionChangeRoundness = register<"sharp" | "round">({ }); const getArrowheadOptions = (flip: boolean) => { - return [ - { - value: null, - text: t("labels.arrowhead_none"), - keyBinding: "q", - icon: , - }, - { - value: "arrow", - text: t("labels.arrowhead_arrow"), - keyBinding: "w", - icon: , - }, - { - value: "triangle", - text: t("labels.arrowhead_triangle"), - icon: , - keyBinding: "e", - }, - { - value: "triangle_outline", - text: t("labels.arrowhead_triangle_outline"), - icon: , - keyBinding: "r", - }, - { - value: "circle", - text: t("labels.arrowhead_circle"), - keyBinding: "a", - icon: , - }, - { - value: "circle_outline", - text: t("labels.arrowhead_circle_outline"), - keyBinding: "s", - icon: , - }, - { - value: "diamond", - text: t("labels.arrowhead_diamond"), - icon: , - keyBinding: "d", - }, - { - value: "diamond_outline", - text: t("labels.arrowhead_diamond_outline"), - icon: , - keyBinding: "f", - }, - { - value: "bar", - text: t("labels.arrowhead_bar"), - keyBinding: "z", - icon: , - }, - { - value: "crowfoot_one", - text: t("labels.arrowhead_crowfoot_one"), - icon: , - keyBinding: "x", - }, - { - value: "crowfoot_many", - text: t("labels.arrowhead_crowfoot_many"), - icon: , - keyBinding: "c", - }, - { - value: "crowfoot_one_or_many", - text: t("labels.arrowhead_crowfoot_one_or_many"), - icon: , - keyBinding: "v", - }, - ] as const; + return { + visibleSections: [ + { + name: "default", + options: [ + { + value: null, + text: t("labels.arrowhead_none"), + keyBinding: "q", + icon: , + }, + { + value: "arrow", + text: t("labels.arrowhead_arrow"), + keyBinding: "w", + icon: , + }, + { + value: "triangle", + text: t("labels.arrowhead_triangle"), + icon: , + keyBinding: "e", + }, + { + value: "triangle_outline", + text: t("labels.arrowhead_triangle_outline"), + icon: , + keyBinding: "r", + }, + ], + }, + ], + hiddenSections: [ + { + name: "default", + options: [ + { + value: "circle", + text: t("labels.arrowhead_circle"), + keyBinding: "a", + icon: , + }, + { + value: "circle_outline", + text: t("labels.arrowhead_circle_outline"), + keyBinding: "s", + icon: , + }, + { + value: "diamond", + text: t("labels.arrowhead_diamond"), + icon: , + keyBinding: "d", + }, + { + value: "diamond_outline", + text: t("labels.arrowhead_diamond_outline"), + icon: , + keyBinding: "f", + }, + { + value: "bar", + text: t("labels.arrowhead_bar"), + keyBinding: "z", + icon: , + }, + ], + }, + { + name: t("labels.cardinality"), + options: [ + { + value: "cardinality_one", + text: t("labels.arrowhead_cardinality_one"), + icon: , + keyBinding: "x", + }, + { + value: "cardinality_many", + text: t("labels.arrowhead_cardinality_many"), + icon: , + keyBinding: "c", + }, + { + value: "cardinality_one_or_many", + text: t("labels.arrowhead_cardinality_one_or_many"), + icon: , + keyBinding: "v", + }, + { + value: "cardinality_exactly_one", + text: t("labels.arrowhead_cardinality_exactly_one"), + icon: , + keyBinding: null, + }, + { + value: "cardinality_zero_or_one", + text: t("labels.arrowhead_cardinality_zero_or_one"), + icon: , + keyBinding: null, + }, + { + value: "cardinality_zero_or_many", + text: t("labels.arrowhead_cardinality_zero_or_many"), + icon: , + keyBinding: null, + }, + ], + }, + ], + } as const; }; export const actionChangeArrowhead = register<{ @@ -1667,45 +1708,52 @@ export const actionChangeArrowhead = register<{ }, PanelComponent: ({ elements, appState, updateData, app }) => { const isRTL = getLanguage().rtl; + const startArrowheadOptions = useMemo( + () => getArrowheadOptions(!isRTL), + [isRTL], + ); + const endArrowheadOptions = useMemo( + () => getArrowheadOptions(!!isRTL), + [isRTL], + ); return (
{t("labels.arrowheads")}
( elements, app, (element) => isLinearElement(element) && canHaveArrowheads(element.type) - ? element.startArrowhead + ? getArrowheadForPicker(element.startArrowhead) : appState.currentItemStartArrowhead, true, (hasSelection) => hasSelection ? null : appState.currentItemStartArrowhead, )} onChange={(value) => updateData({ position: "start", type: value })} - numberOfOptionsToAlwaysShow={4} /> ( elements, app, (element) => isLinearElement(element) && canHaveArrowheads(element.type) - ? element.endArrowhead + ? getArrowheadForPicker(element.endArrowhead) : appState.currentItemEndArrowhead, true, (hasSelection) => hasSelection ? null : appState.currentItemEndArrowhead, )} onChange={(value) => updateData({ position: "end", type: value })} - numberOfOptionsToAlwaysShow={4} />
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 4ee4141cd0..ab2f4c708c 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -3703,7 +3703,7 @@ class App extends React.Component { if (!isPlainPaste && isMaybeMermaidDefinition(data.text)) { const api = await import("@excalidraw/mermaid-to-excalidraw"); try { - const { elements: skeletonElements, files } = + const { elements: skeletonElements, files = {} } = await api.parseMermaidToExcalidraw(data.text); const elements = convertToExcalidrawElements(skeletonElements, { diff --git a/packages/excalidraw/components/IconPicker.scss b/packages/excalidraw/components/IconPicker.scss index 80413e041d..2e9493f4b3 100644 --- a/packages/excalidraw/components/IconPicker.scss +++ b/packages/excalidraw/components/IconPicker.scss @@ -6,7 +6,7 @@ padding: 0.5rem; background: var(--popup-bg-color); border: 0 solid color.adjust(#fff, $alpha: -0.75); - box-shadow: var(--shadow-island); + box-shadow: var(--shadow-island-stronger); border-radius: 4px; position: absolute; :root[dir="rtl"] & { @@ -14,6 +14,13 @@ } } + .picker-sections, + .picker-section { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .picker-container button, .picker button { position: relative; @@ -62,7 +69,13 @@ .picker-collapsible { font-size: 0.75rem; - padding: 0.5rem 0; + padding: 0; + color: var(--text-primary-color); + } + + .picker-section-label { + font-size: 0.75rem; + color: var(--text-primary-color); } .picker-keybinding { diff --git a/packages/excalidraw/components/IconPicker.tsx b/packages/excalidraw/components/IconPicker.tsx index 0d644ca7e9..ad1b86625e 100644 --- a/packages/excalidraw/components/IconPicker.tsx +++ b/packages/excalidraw/components/IconPicker.tsx @@ -1,6 +1,6 @@ import { Popover } from "radix-ui"; import clsx from "clsx"; -import React, { useEffect } from "react"; +import React, { useEffect, useMemo } from "react"; import { isArrowKey, KEYS } from "@excalidraw/common"; @@ -15,6 +15,8 @@ import "./IconPicker.scss"; import type { JSX } from "react"; const moreOptionsAtom = atom(false); +const PICKER_COLUMNS = 4; +const DEFAULT_SECTION_NAME = "default"; type Option = { value: T; @@ -23,28 +25,74 @@ type Option = { keyBinding: string | null; }; +type PickerSection = { + name: string; + options: readonly Option[]; +}; + +const flattenOptions = (sections: readonly PickerSection[]) => + sections.flatMap((section) => section.options); + +const findOption = ( + sections: readonly PickerSection[], + predicate: (option: Option) => boolean, +) => { + for (const section of sections) { + const option = section.options.find(predicate); + if (option) { + return option; + } + } + + return null; +}; + +const hasOption = ( + sections: readonly PickerSection[], + predicate: (option: Option) => boolean, +) => sections.some((section) => section.options.some(predicate)); + +const getNavigationRows = (sections: readonly PickerSection[]) => + sections.flatMap((section) => + Array.from( + { length: Math.ceil(section.options.length / PICKER_COLUMNS) }, + (_, index) => + section.options.slice( + index * PICKER_COLUMNS, + index * PICKER_COLUMNS + PICKER_COLUMNS, + ), + ), + ); + function Picker({ - options, + visibleSections, + hiddenSections = [], value, label, onChange, onClose, - numberOfOptionsToAlwaysShow = options.length, }: { label: string; value: T; - options: readonly Option[]; + visibleSections: readonly PickerSection[]; + hiddenSections?: readonly PickerSection[]; onChange: (value: T) => void; onClose: () => void; - numberOfOptionsToAlwaysShow?: number; }) { const editorInterface = useEditorInterface(); const { container } = useExcalidrawContainer(); + const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom); + const allSections = [...visibleSections, ...hiddenSections]; + const allOptions = flattenOptions(allSections); + const navigationRows = getNavigationRows([ + ...visibleSections, + ...(showMoreOptions ? hiddenSections : []), + ]); const handleKeyDown = (event: React.KeyboardEvent) => { - const pressedOption = options.find( + const pressedOption = allOptions.find( (option) => option.keyBinding === event.key.toLowerCase(), - )!; + ); if (!(event.metaKey || event.altKey || event.ctrlKey) && pressedOption) { // Keybinding navigation @@ -52,17 +100,17 @@ function Picker({ event.preventDefault(); } else if (event.key === KEYS.TAB) { - const index = options.findIndex((option) => option.value === value); + const index = allOptions.findIndex((option) => option.value === value); const nextIndex = event.shiftKey - ? (options.length + index - 1) % options.length - : (index + 1) % options.length; - onChange(options[nextIndex].value); + ? (allOptions.length + index - 1) % allOptions.length + : (index + 1) % allOptions.length; + onChange(allOptions[nextIndex].value); } else if (isArrowKey(event.key)) { // Arrow navigation const isRTL = getLanguage().rtl; - const index = options.findIndex((option) => option.value === value); + const index = allOptions.findIndex((option) => option.value === value); if (index !== -1) { - const length = options.length; + const length = allOptions.length; let nextIndex = index; switch (event.key) { @@ -76,18 +124,60 @@ function Picker({ break; // Go the next row case KEYS.ARROW_DOWN: { - nextIndex = (index + (numberOfOptionsToAlwaysShow ?? 1)) % length; + const currentRowIndex = navigationRows.findIndex((row) => + row.some((option) => option.value === value), + ); + const currentRow = navigationRows[currentRowIndex]; + + if (currentRowIndex !== -1 && currentRow) { + const column = currentRow.findIndex( + (option) => option.value === value, + ); + const nextRow = + navigationRows[(currentRowIndex + 1) % navigationRows.length]; + const nextOption = + nextRow[Math.min(column, nextRow.length - 1)] ?? + allOptions[index]; + + onChange(nextOption.value); + event.preventDefault(); + event.nativeEvent.stopImmediatePropagation(); + event.stopPropagation(); + return; + } break; } // Go the previous row case KEYS.ARROW_UP: { - nextIndex = - (length + index - (numberOfOptionsToAlwaysShow ?? 1)) % length; + const currentRowIndex = navigationRows.findIndex((row) => + row.some((option) => option.value === value), + ); + const currentRow = navigationRows[currentRowIndex]; + + if (currentRowIndex !== -1 && currentRow) { + const column = currentRow.findIndex( + (option) => option.value === value, + ); + const previousRow = + navigationRows[ + (navigationRows.length + currentRowIndex - 1) % + navigationRows.length + ]; + const previousOption = + previousRow[Math.min(column, previousRow.length - 1)] ?? + allOptions[index]; + + onChange(previousOption.value); + event.preventDefault(); + event.nativeEvent.stopImmediatePropagation(); + event.stopPropagation(); + return; + } break; } } - onChange(options[nextIndex].value); + onChange(allOptions[nextIndex].value); } event.preventDefault(); } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) { @@ -99,38 +189,29 @@ function Picker({ event.stopPropagation(); }; - const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom); - - const alwaysVisibleOptions = React.useMemo( - () => options.slice(0, numberOfOptionsToAlwaysShow), - [options, numberOfOptionsToAlwaysShow], - ); - const moreOptions = React.useMemo( - () => options.slice(numberOfOptionsToAlwaysShow), - [options, numberOfOptionsToAlwaysShow], - ); - useEffect(() => { - if (!alwaysVisibleOptions.some((option) => option.value === value)) { + if (hasOption(hiddenSections, (option) => option.value === value)) { setShowMoreOptions(true); } - }, [value, alwaysVisibleOptions, setShowMoreOptions]); + }, [value, hiddenSections, setShowMoreOptions]); - const renderOptions = (options: Option[]) => { + const renderOptions = (options: readonly Option[]) => { return (
- {options.map((option, i) => ( + {options.map((option) => (
); @@ -192,49 +291,45 @@ function Picker({ export function IconPicker({ value, label, - options, + visibleSections, + hiddenSections, onChange, - group = "", - numberOfOptionsToAlwaysShow, }: { label: string; value: T; - options: readonly { - value: T; - text: string; - icon: JSX.Element; - keyBinding: string | null; - }[]; + visibleSections: readonly PickerSection[]; + hiddenSections?: readonly PickerSection[]; onChange: (value: T) => void; - numberOfOptionsToAlwaysShow?: number; - group?: string; }) { const [isActive, setActive] = React.useState(false); - const rPickerButton = React.useRef(null); + const selectedOption = useMemo( + () => + findOption(visibleSections, (option) => option.value === value) ?? + findOption(hiddenSections ?? [], (option) => option.value === value), + [visibleSections, hiddenSections, value], + ); return (
setActive(open)}> setActive(!isActive)} - ref={rPickerButton} className={isActive ? "active" : ""} > - {options.find((option) => option.value === value)?.icon} + {selectedOption?.icon} {isActive && ( { setActive(false); }} - numberOfOptionsToAlwaysShow={numberOfOptionsToAlwaysShow} /> )} diff --git a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx index 5f98637f47..4bf3f17767 100644 --- a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx +++ b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx @@ -236,15 +236,40 @@ const MermaidToExcalidraw = ({ ( - {el} + + {el} + )} sequenceLink={(el) => ( - + {el} )} classLink={(el) => ( - {el} + + {el} + + )} + erdLink={(el) => ( + + {el} + )} />
diff --git a/packages/excalidraw/components/TTDDialog/common.ts b/packages/excalidraw/components/TTDDialog/common.ts index d5bac53169..e02bafc1f6 100644 --- a/packages/excalidraw/components/TTDDialog/common.ts +++ b/packages/excalidraw/components/TTDDialog/common.ts @@ -94,7 +94,7 @@ export const convertMermaidToExcalidraw = async ({ } } - const { elements, files } = ret; + const { elements, files = {} } = ret; setError(null); data.current = { diff --git a/packages/excalidraw/components/icons.tsx b/packages/excalidraw/components/icons.tsx index 4a1691863f..7e2400728d 100644 --- a/packages/excalidraw/components/icons.tsx +++ b/packages/excalidraw/components/icons.tsx @@ -69,6 +69,11 @@ const modifiedTablerIconProps: Opts = { strokeLinejoin: "round", } as const; +const arrowheadPreviewIconProps: Opts = { + width: 40, + height: 20, +} as const; + // ----------------------------------------------------------------------------- // tabler-icons: present @@ -1291,16 +1296,17 @@ export const ArrowheadNoneIcon = React.memo( ({ flip = false }: { flip?: boolean }) => createIcon( - - - + + , - tablerIconProps, + arrowheadPreviewIconProps, ), ); @@ -1312,57 +1318,12 @@ export const ArrowheadArrowIcon = React.memo( stroke="currentColor" strokeWidth={2} fill="none" + strokeLinecap="round" + strokeLinejoin="round" > - - + , - { width: 40, height: 20 }, - ), -); - -export const ArrowheadCircleIcon = React.memo( - ({ flip = false }: { flip?: boolean }) => - createIcon( - - - - , - { width: 40, height: 20 }, - ), -); - -export const ArrowheadCircleOutlineIcon = React.memo( - ({ flip = false }: { flip?: boolean }) => - createIcon( - - - - , - { width: 40, height: 20 }, - ), -); - -export const ArrowheadBarIcon = React.memo( - ({ flip = false }: { flip?: boolean }) => - createIcon( - - - , - { width: 40, height: 20 }, + arrowheadPreviewIconProps, ), ); @@ -1373,11 +1334,12 @@ export const ArrowheadTriangleIcon = React.memo( stroke="currentColor" fill="currentColor" transform={flip ? "translate(40, 0) scale(-1, 1)" : ""} + strokeLinejoin="round" > - - + + , - { width: 40, height: 20 }, + arrowheadPreviewIconProps, ), ); @@ -1390,12 +1352,43 @@ export const ArrowheadTriangleOutlineIcon = React.memo( transform={flip ? "translate(40, 0) scale(-1, 1)" : ""} strokeWidth={2} strokeLinejoin="round" + strokeLinecap="round" > - - + + , + arrowheadPreviewIconProps, + ), +); - { width: 40, height: 20 }, +export const ArrowheadCircleIcon = React.memo( + ({ flip = false }: { flip?: boolean }) => + createIcon( + + + + , + arrowheadPreviewIconProps, + ), +); + +export const ArrowheadCircleOutlineIcon = React.memo( + ({ flip = false }: { flip?: boolean }) => + createIcon( + + + + , + arrowheadPreviewIconProps, ), ); @@ -1407,12 +1400,11 @@ export const ArrowheadDiamondIcon = React.memo( fill="currentColor" transform={flip ? "translate(40, 0) scale(-1, 1)" : ""} strokeLinejoin="round" - strokeWidth={2} > - - + + , - { width: 40, height: 20 }, + arrowheadPreviewIconProps, ), ); @@ -1425,15 +1417,32 @@ export const ArrowheadDiamondOutlineIcon = React.memo( transform={flip ? "translate(40, 0) scale(-1, 1)" : ""} strokeLinejoin="round" strokeWidth={2} + strokeLinecap="round" > - - + + , - { width: 40, height: 20 }, + arrowheadPreviewIconProps, ), ); -export const ArrowheadCrowfootIcon = React.memo( +export const ArrowheadBarIcon = React.memo( + ({ flip = false }: { flip?: boolean }) => + createIcon( + + + , + arrowheadPreviewIconProps, + ), +); + +export const ArrowheadCardinalityOneIcon = React.memo( ({ flip = false }: { flip?: boolean }) => createIcon( - + , - { width: 40, height: 20 }, + arrowheadPreviewIconProps, ), ); -export const ArrowheadCrowfootOneIcon = React.memo( +export const ArrowheadCardinalityManyIcon = React.memo( ({ flip = false }: { flip?: boolean }) => createIcon( - + , - { width: 40, height: 20 }, + arrowheadPreviewIconProps, ), ); -export const ArrowheadCrowfootOneOrManyIcon = React.memo( +export const ArrowheadCardinalityOneOrManyIcon = React.memo( ({ flip = false }: { flip?: boolean }) => createIcon( - + , - { width: 40, height: 20 }, + arrowheadPreviewIconProps, + ), +); + +export const ArrowheadCardinalityExactlyOneIcon = React.memo( + ({ flip = false }: { flip?: boolean }) => + createIcon( + + + , + arrowheadPreviewIconProps, + ), +); + +export const ArrowheadCardinalityZeroOrOneIcon = React.memo( + ({ flip = false }: { flip?: boolean }) => + createIcon( + + + + , + arrowheadPreviewIconProps, + ), +); + +export const ArrowheadCardinalityZeroOrManyIcon = React.memo( + ({ flip = false }: { flip?: boolean }) => + createIcon( + + + + , + arrowheadPreviewIconProps, ), ); diff --git a/packages/excalidraw/css/theme.scss b/packages/excalidraw/css/theme.scss index 9d741bdc3e..36899229ac 100644 --- a/packages/excalidraw/css/theme.scss +++ b/packages/excalidraw/css/theme.scss @@ -34,9 +34,10 @@ --popup-text-color: #000; --popup-text-inverted-color: #fff; --select-highlight-color: #{$color-blue-5}; - --shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17), - 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08), - 0px 7px 14px 0px rgba(0, 0, 0, 0.05); + --shadow-island: 0px 0px 1px 0px rgba(0, 0, 0, 0.17), + 0px 0px 3px 0px rgba(0, 0, 0, 0.08), 0px 7px 14px 0px rgba(0, 0, 0, 0.05); + --shadow-island-stronger: 0px 0px 1px 0px rgba(0, 0, 0, 0.17), + 0px 0px 3px 0px rgba(0, 0, 0, 0.08), 0px 7px 14px 0px rgb(0 0 0 / 18%); --button-hover-bg: var(--color-surface-high); --button-active-bg: var(--color-surface-high); @@ -210,9 +211,6 @@ --popup-text-color: #{$color-gray-4}; --popup-text-inverted-color: #2c2c2c; --select-highlight-color: #{$color-blue-4}; - --shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17), - 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08), - 0px 7px 14px 0px rgba(0, 0, 0, 0.05); --modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts index b77f010bd8..4550338edf 100644 --- a/packages/excalidraw/data/restore.ts +++ b/packages/excalidraw/data/restore.ts @@ -22,6 +22,7 @@ import { import { calculateFixedPointForNonElbowArrowBinding, getNonDeletedElements, + normalizeArrowhead, isPointInElement, isValidPolygon, projectFixedPointOntoDiagonal, @@ -426,7 +427,8 @@ export const restoreElement = ( // @ts-ignore LEGACY type // eslint-disable-next-line no-fallthrough case "draw": - const { startArrowhead = null, endArrowhead = null } = element; + const startArrowhead = normalizeArrowhead(element.startArrowhead); + const endArrowhead = normalizeArrowhead(element.endArrowhead); let x = element.x; let y = element.y; let points = // migrate old arrow model to new one @@ -458,7 +460,11 @@ export const restoreElement = ( ...getSizeFromPoints(points), }); case "arrow": { - const { startArrowhead = null, endArrowhead = "arrow" } = element; + const startArrowhead = normalizeArrowhead(element.startArrowhead); + const endArrowhead = + element.endArrowhead === undefined + ? "arrow" + : normalizeArrowhead(element.endArrowhead); const x: number | undefined = element.x; const y: number | undefined = element.y; const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json index bfdb476bba..b0a8761de4 100644 --- a/packages/excalidraw/locales/en.json +++ b/packages/excalidraw/locales/en.json @@ -53,7 +53,14 @@ "arrowhead_crowfoot_many": "Crow's foot (many)", "arrowhead_crowfoot_one": "Crow's foot (one)", "arrowhead_crowfoot_one_or_many": "Crow's foot (one or many)", + "arrowhead_cardinality_one": "Cardinality (one)", + "arrowhead_cardinality_many": "Cardinality (many)", + "arrowhead_cardinality_one_or_many": "Cardinality (one or many)", + "arrowhead_cardinality_exactly_one": "Cardinality (exactly one)", + "arrowhead_cardinality_zero_or_one": "Cardinality (zero or one)", + "arrowhead_cardinality_zero_or_many": "Cardinality (zero or many)", "more_options": "More options", + "cardinality": "Cardinality", "arrowtypes": "Arrow type", "arrowtype_sharp": "Sharp arrow", "arrowtype_round": "Curved arrow", @@ -624,7 +631,7 @@ "mermaid": { "title": "Mermaid to Excalidraw", "button": "Insert", - "description": "Currently only Flowchart, Sequence, and Class Diagrams are supported. The other types will be rendered as image in Excalidraw.", + "description": "Currently only Flowchart, Sequence, Class, and Entity Relationship Diagrams are supported. The other types will be rendered as image in Excalidraw.", "syntax": "Mermaid Syntax", "preview": "Preview", "label": "Mermaid", @@ -654,7 +661,7 @@ "placeholder": { "title": "Let's design your diagram", "description": "Describe the diagram you want to create, and we'll generate it for you.", - "hint": "At the moment we know Flowchart, Sequence, and Class diagrams." + "hint": "At the moment we know Flowchart, Sequence, Class, and Entity Relationship diagrams." }, "preview": "Preview", "insert": "Insert", diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json index f60ea96634..b29cede9b4 100644 --- a/packages/excalidraw/package.json +++ b/packages/excalidraw/package.json @@ -88,7 +88,7 @@ "@excalidraw/element": "0.18.0", "@excalidraw/laser-pointer": "1.3.1", "@excalidraw/math": "0.18.0", - "@excalidraw/mermaid-to-excalidraw": "2.0.0-rc4", + "@excalidraw/mermaid-to-excalidraw": "2.1.0", "@excalidraw/random-username": "1.1.0", "browser-fs-access": "0.38.0", "canvas-roundrect-polyfill": "0.0.1", diff --git a/packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap index 294f32f86d..7882f0724c 100644 --- a/packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Test > should open mermaid popup when active tool is mermaid 1`] = `""`; +exports[`Test > should open mermaid popup when active tool is mermaid 1`] = `""`; exports[`Test > should show error in preview when mermaid library throws error 1`] = ` "flowchart TD diff --git a/packages/excalidraw/tests/data/restore.test.ts b/packages/excalidraw/tests/data/restore.test.ts index 4b06601bb2..bd11424b6f 100644 --- a/packages/excalidraw/tests/data/restore.test.ts +++ b/packages/excalidraw/tests/data/restore.test.ts @@ -200,6 +200,26 @@ describe("restoreElements", () => { }); }); + it("should normalize legacy crowfoot arrowheads on restore", () => { + const arrowElement = API.createElement({ + type: "arrow", + }); + + const restoredArrow = restore.restoreElements( + [ + { + ...arrowElement, + startArrowhead: "crowfoot_one", + endArrowhead: "crowfoot_one_or_many", + } as any, + ], + null, + )[0] as ExcalidrawLinearElement; + + expect(restoredArrow.startArrowhead).toBe("cardinality_one"); + expect(restoredArrow.endArrowhead).toBe("cardinality_one_or_many"); + }); + it("should strip element if restore fails", () => { const rect1 = API.createElement({ type: "rectangle", diff --git a/yarn.lock b/yarn.lock index f3a53e391e..2bc70c4afd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1531,10 +1531,10 @@ resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb" integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg== -"@excalidraw/mermaid-to-excalidraw@2.0.0-rc4": - version "2.0.0-rc4" - resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.0.0-rc4.tgz#9d38568de8e403fefb6a162efa71e024ea1f7e03" - integrity sha512-92efu7VTYF6appGKgbDJAZEM/YXICpYPYOfl+j1E9SVilIFCJEAg7xH2lt/c44WFtffG+rWKrYwf9KUrPYy1Qw== +"@excalidraw/mermaid-to-excalidraw@2.1.0": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.1.0.tgz#a5b9cf87c3185558cda7f9687d87b9937f452358" + integrity sha512-RMd+c2b7WzzUjhERMpKwp8PhF2/XlHDjr/zK+Gxfp8K9sVlafPYJ5OEa/GkN6edi2rBUXRfW+41WdO6L56b6Kw== dependencies: "@excalidraw/markdown-to-text" "0.1.2" "@mermaid-js/parser" "^0.6.3" From b4ce7c713b8874ab328a4711af3a83d131bebcaf Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Thu, 12 Mar 2026 16:08:46 +0100 Subject: [PATCH 27/62] fix(editor): arrowhead picker overflowing viewport (#10943) --- .../excalidraw/components/IconPicker.scss | 1 - packages/excalidraw/components/IconPicker.tsx | 53 +++++++++---------- 2 files changed, 24 insertions(+), 30 deletions(-) diff --git a/packages/excalidraw/components/IconPicker.scss b/packages/excalidraw/components/IconPicker.scss index 2e9493f4b3..cf99f81329 100644 --- a/packages/excalidraw/components/IconPicker.scss +++ b/packages/excalidraw/components/IconPicker.scss @@ -8,7 +8,6 @@ border: 0 solid color.adjust(#fff, $alpha: -0.75); box-shadow: var(--shadow-island-stronger); border-radius: 4px; - position: absolute; :root[dir="rtl"] & { padding: 0.4rem; } diff --git a/packages/excalidraw/components/IconPicker.tsx b/packages/excalidraw/components/IconPicker.tsx index ad1b86625e..ac05a93d44 100644 --- a/packages/excalidraw/components/IconPicker.tsx +++ b/packages/excalidraw/components/IconPicker.tsx @@ -8,7 +8,7 @@ import { atom, useAtom } from "../editor-jotai"; import { getLanguage, t } from "../i18n"; import Collapsible from "./Stats/Collapsible"; -import { useEditorInterface, useExcalidrawContainer } from "./App"; +import { useExcalidrawContainer } from "./App"; import "./IconPicker.scss"; @@ -79,7 +79,6 @@ function Picker({ onChange: (value: T) => void; onClose: () => void; }) { - const editorInterface = useEditorInterface(); const { container } = useExcalidrawContainer(); const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom); const allSections = [...visibleSections, ...hiddenSections]; @@ -248,41 +247,37 @@ function Picker({ ), ); - const isMobile = editorInterface.formFactor === "phone"; - return ( -
-
- {renderSections(visibleSections)} +
+ {renderSections(visibleSections)} - {hiddenSections.length > 0 && ( - { - setShowMoreOptions((value) => !value); - }} - className="picker-collapsible" - > -
- {renderSections(hiddenSections)} -
- - )} -
+ {hiddenSections.length > 0 && ( + { + setShowMoreOptions((value) => !value); + }} + className="picker-collapsible" + > +
+ {renderSections(hiddenSections)} +
+ + )}
); From c9ba7f839cc3d9ba1d9c72d2dc6500088b7ff9f3 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Thu, 12 Mar 2026 17:32:13 +0100 Subject: [PATCH 28/62] chore(editor): bump @excalidraw/mermaid-to-excalidraw@2.1.1 (#10944) --- packages/excalidraw/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json index b29cede9b4..3d8fe1daeb 100644 --- a/packages/excalidraw/package.json +++ b/packages/excalidraw/package.json @@ -88,7 +88,7 @@ "@excalidraw/element": "0.18.0", "@excalidraw/laser-pointer": "1.3.1", "@excalidraw/math": "0.18.0", - "@excalidraw/mermaid-to-excalidraw": "2.1.0", + "@excalidraw/mermaid-to-excalidraw": "2.1.1", "@excalidraw/random-username": "1.1.0", "browser-fs-access": "0.38.0", "canvas-roundrect-polyfill": "0.0.1", From 2b0e4c9623e44b3f2f7d02d532f23128e988cb5d Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Sat, 14 Mar 2026 13:12:48 +0100 Subject: [PATCH 29/62] fix(editor): remove leftover debug code path (#10954) --- packages/excalidraw/data/resave.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/excalidraw/data/resave.ts b/packages/excalidraw/data/resave.ts index 8c443e0e28..abeeb16a68 100644 --- a/packages/excalidraw/data/resave.ts +++ b/packages/excalidraw/data/resave.ts @@ -20,10 +20,6 @@ export const resaveAsImageWithScene = async ( ) => { const fileHandleType = getFileHandleType(fileHandle); - if (Math.random() < 1) { - throw new Error("OLALALALA"); - } - if (!isImageFileHandleType(fileHandleType)) { throw new Error( "fileHandle should exist and should be of type svg or png when resaving", From e8b4620a96b722646e6db9e98efd0ca2a0184767 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Wed, 18 Mar 2026 19:14:44 +0100 Subject: [PATCH 30/62] feat(editor): put caret at pointer coords when clicking on selected text element (#10970) --- packages/element/src/textElement.ts | 3 +- packages/element/src/textWrapping.ts | 244 +++++++++++++++--- packages/element/tests/textWrapping.test.ts | 71 ++++- packages/excalidraw/components/App.tsx | 152 +++++++++-- .../components/Stats/stats.test.tsx | 6 +- .../excalidraw/wysiwyg/textWysiwyg.test.tsx | 61 +++++ packages/excalidraw/wysiwyg/textWysiwyg.tsx | 205 ++++++++++++++- 7 files changed, 679 insertions(+), 63 deletions(-) diff --git a/packages/element/src/textElement.ts b/packages/element/src/textElement.ts index 523a8b8804..b891fdf2e9 100644 --- a/packages/element/src/textElement.ts +++ b/packages/element/src/textElement.ts @@ -441,7 +441,8 @@ const VALID_CONTAINER_TYPES = new Set([ export const isValidTextContainer = (element: { type: ExcalidrawElementType; -}) => VALID_CONTAINER_TYPES.has(element.type); +}): element is ExcalidrawTextContainer => + VALID_CONTAINER_TYPES.has(element.type); export const computeContainerDimensionForBoundText = ( dimension: number, diff --git a/packages/element/src/textWrapping.ts b/packages/element/src/textWrapping.ts index 5ec9bb42a9..b580f52ed1 100644 --- a/packages/element/src/textWrapping.ts +++ b/packages/element/src/textWrapping.ts @@ -4,6 +4,22 @@ import { charWidth, getLineWidth } from "./textMeasurements"; import type { FontString } from "./types"; +/** + * This module approximates browser-like soft wrapping for Excalidraw text. + * + * The flow is: + * 1. `parseTokens()` splits a hard line into breakable tokens using a unicode-aware regex. + * 2. `getWrappedTextLines()` reflows each hard line into one or more visual lines and + * records where each visual line came from in the source text. + * 3. `wrapLine()` assembles tokens into lines, and `wrapWord()` handles a single token + * that is wider than the available width. + * 4. `trimLine()` / `trimLineEndAtSoftBreak()` mirror browser behavior around trailing + * whitespace so the rendered text stays consistent with what users see on canvas. + * + * Mostly, you'll want to use wrapText(). getWrappedTextLines() is for callers + * that need metadata such as mapping visual lines back to `originalText` + * for caret placement or future editor features. + */ let cachedCjkRegex: RegExp | undefined; let cachedLineBreakRegex: RegExp | undefined; let cachedEmojiRegex: RegExp | undefined; @@ -358,6 +374,10 @@ const Break = { /** * Breaks the line into the tokens based on the found line break opporutnities. + * + * Note: tokenization normalizes to NFC first so decomposed graphemes are treated as + * their composed variants for wrapping. Any code that needs exact source offsets should + * keep in mind that this assumes the input text is already NFC-normalized. */ export const parseTokens = (line: string) => { const breakLineRegex = getLineBreakRegex(); @@ -370,56 +390,120 @@ export const parseTokens = (line: string) => { /** * Wraps the original text into the lines based on the given width. + * + * This is a convenience adapter over `getWrappedTextLines()` for call sites + * that only need the rendered wrapped string and not the source offsets. */ export const wrapText = ( text: string, font: FontString, maxWidth: number, ): string => { + return getWrappedTextLines(text, font, maxWidth) + .map((line) => line.text) + .join("\n"); +}; + +/** + * A single rendered visual line produced from the original text. + * + * `start` and `end` are end-exclusive code-unit offsets into the original text, and do + * not include synthetic soft line breaks inserted by this module. If trailing whitespace + * was trimmed away at a wrap boundary, `end` points to the last rendered character. + */ +export type WrappedTextLine = { + text: string; + start: number; + end: number; +}; + +/** + * Splits only on existing hard line breaks and preserves original offsets. + */ +const getHardLineBreaks = (text: string): WrappedTextLine[] => { + let offset = 0; + + return text.split("\n").map((line) => { + const start = offset; + const end = start + line.length; + + offset = end + 1; + + return { + text: line, + start, + end, + }; + }); +}; + +/** + * Returns the rendered visual lines together with their source offsets. + * + * This is the source-of-truth wrapping pipeline for callers that need more than the + * final wrapped string, for example caret placement or future editor/rich-text mapping. + */ +export const getWrappedTextLines = ( + text: string, + font: FontString, + maxWidth: number, +): WrappedTextLine[] => { // if maxWidth is not finite or NaN which can happen in case of bugs in // computation, we need to make sure we don't continue as we'll end up // in an infinite loop if (!Number.isFinite(maxWidth) || maxWidth < 0) { - return text; + return getHardLineBreaks(text); } - const lines: Array = []; - const originalLines = text.split("\n"); + const lines: WrappedTextLine[] = []; + let offset = 0; - for (const originalLine of originalLines) { - const currentLineWidth = getLineWidth(originalLine, font); + for (const originalLine of text.split("\n")) { + const originalLineWidth = getLineWidth(originalLine, font); - if (currentLineWidth <= maxWidth) { - lines.push(originalLine); - continue; + if (originalLineWidth <= maxWidth) { + lines.push({ + text: originalLine, + start: offset, + end: offset + originalLine.length, + }); + } else { + lines.push(...wrapLine(originalLine, font, maxWidth, offset)); } - const wrappedLine = wrapLine(originalLine, font, maxWidth); - lines.push(...wrappedLine); + offset += originalLine.length + 1; } - return lines.join("\n"); + return lines; }; /** - * Wraps the original line into the lines based on the given width. + * Wraps a single hard line into one or more visual lines. + * + * The line-local offsets are tracked in original-text code units so + * we can map the visual line back to the source. */ const wrapLine = ( line: string, font: FontString, maxWidth: number, -): string[] => { - const lines: Array = []; + lineStart: number, +): WrappedTextLine[] => { + const lines: WrappedTextLine[] = []; const tokens = parseTokens(line); - const tokenIterator = tokens[Symbol.iterator](); let currentLine = ""; + let currentLineStart = lineStart; + let currentLineEnd = lineStart; let currentLineWidth = 0; + // Tracks the next token's code-unit position in the original source string. + let tokenOffset = lineStart; + let tokenIndex = 0; - let iterator = tokenIterator.next(); - - while (!iterator.done) { - const token = iterator.value; + while (tokenIndex < tokens.length) { + const token = tokens[tokenIndex]; + const tokenStart = tokenOffset; + const tokenEnd = tokenStart + token.length; const testLine = currentLine + token; // cache single codepoint whitespace, CJK or emoji width calc. as kerning should not apply here @@ -429,37 +513,59 @@ const wrapLine = ( // build up the current line, skipping length check for possibly trailing whitespaces if (/\s/.test(token) || testLineWidth <= maxWidth) { + if (!currentLine) { + currentLineStart = tokenStart; + } currentLine = testLine; + currentLineEnd = tokenEnd; currentLineWidth = testLineWidth; - iterator = tokenIterator.next(); + tokenOffset = tokenEnd; + tokenIndex++; continue; } // current line is empty => just the token (word) is longer than `maxWidth` and needs to be wrapped if (!currentLine) { - const wrappedWord = wrapWord(token, font, maxWidth); - const trailingLine = wrappedWord[wrappedWord.length - 1] ?? ""; + const wrappedWord = wrapWord(token, font, maxWidth, tokenStart); + const trailingLine = wrappedWord[wrappedWord.length - 1] ?? { + text: "", + start: tokenStart, + end: tokenStart, + }; const precedingLines = wrappedWord.slice(0, -1); lines.push(...precedingLines); // trailing line of the wrapped word might still be joined with next token/s - currentLine = trailingLine; - currentLineWidth = getLineWidth(trailingLine, font); - iterator = tokenIterator.next(); + currentLine = trailingLine.text; + currentLineStart = trailingLine.start; + currentLineEnd = trailingLine.end; + currentLineWidth = getLineWidth(trailingLine.text, font); + tokenOffset = tokenEnd; + tokenIndex++; } else { // push & reset, but don't iterate on the next token, as we didn't use it yet! - lines.push(currentLine.trimEnd()); + lines.push( + trimLineEndAtSoftBreak(currentLine, currentLineStart, currentLineEnd), + ); // purposefully not iterating and not setting `currentLine` to `token`, so that we could use a simple !currentLine check above currentLine = ""; + currentLineStart = tokenStart; + currentLineEnd = tokenStart; currentLineWidth = 0; } } // iterator done, push the trailing line if exists if (currentLine) { - const trailingLine = trimLine(currentLine, font, maxWidth); + const trailingLine = trimLine( + currentLine, + currentLineStart, + currentLineEnd, + font, + maxWidth, + ); lines.push(trailingLine); } @@ -467,59 +573,100 @@ const wrapLine = ( }; /** - * Wraps the word into the lines based on the given width. + * Wraps a single word that could not be placed on an empty line as-is. */ const wrapWord = ( word: string, font: FontString, maxWidth: number, -): Array => { + wordStart: number, +): WrappedTextLine[] => { // multi-codepoint emojis are already broken apart and shouldn't be broken further if (getEmojiRegex().test(word)) { - return [word]; + return [ + { + text: word, + start: wordStart, + end: wordStart + word.length, + }, + ]; } satisfiesWordInvariant(word); - const lines: Array = []; + const lines: WrappedTextLine[] = []; const chars = Array.from(word); let currentLine = ""; + let currentLineStart = wordStart; + let currentLineEnd = wordStart; let currentLineWidth = 0; + let offset = wordStart; for (const char of chars) { + const charStart = offset; + const charEnd = charStart + char.length; const _charWidth = charWidth.calculate(char, font); const testLineWidth = currentLineWidth + _charWidth; if (testLineWidth <= maxWidth) { + if (!currentLine) { + currentLineStart = charStart; + } currentLine = currentLine + char; + currentLineEnd = charEnd; currentLineWidth = testLineWidth; + offset = charEnd; continue; } if (currentLine) { - lines.push(currentLine); + lines.push({ + text: currentLine, + start: currentLineStart, + end: currentLineEnd, + }); } currentLine = char; + currentLineStart = charStart; + currentLineEnd = charEnd; currentLineWidth = _charWidth; + offset = charEnd; } if (currentLine) { - lines.push(currentLine); + lines.push({ + text: currentLine, + start: currentLineStart, + end: currentLineEnd, + }); } return lines; }; /** - * Similarly to browsers, does not trim all trailing whitespaces, but only those exceeding the `maxWidth`. + * Trims trailing whitespace that is exceeding the `maxWidth`. + * + * Used for the trailing visual line of a hard line, where some trailing + * whitespace may still be visible if it fits into the available width. */ -const trimLine = (line: string, font: FontString, maxWidth: number) => { +const trimLine = ( + line: string, + start: number, + end: number, + font: FontString, + maxWidth: number, +): WrappedTextLine => { const shouldTrimWhitespaces = getLineWidth(line, font) > maxWidth; if (!shouldTrimWhitespaces) { - return line; + return { + text: line, + start, + end, + }; } // defensively default to `trimeEnd` in case the regex does not match @@ -543,7 +690,30 @@ const trimLine = (line: string, font: FontString, maxWidth: number) => { trimmedLineWidth = testLineWidth; } - return trimmedLine; + return { + text: trimmedLine, + start, + end: end - (line.length - trimmedLine.length), + }; +}; + +/** + * Used for internal soft-wrap boundaries, where trailing whitespace should not + * survive into the rendered line even though it still exists in the original + * text. + */ +const trimLineEndAtSoftBreak = ( + line: string, + start: number, + end: number, +): WrappedTextLine => { + const trimmedLine = line.trimEnd(); + + return { + text: trimmedLine, + start, + end: end - (line.length - trimmedLine.length), + }; }; /** diff --git a/packages/element/tests/textWrapping.test.ts b/packages/element/tests/textWrapping.test.ts index 87c96a4c91..2149dd5622 100644 --- a/packages/element/tests/textWrapping.test.ts +++ b/packages/element/tests/textWrapping.test.ts @@ -1,4 +1,8 @@ -import { wrapText, parseTokens } from "../src/textWrapping"; +import { + getWrappedTextLines, + parseTokens, + wrapText, +} from "../src/textWrapping"; import type { FontString } from "../src/types"; @@ -102,6 +106,71 @@ describe("Test wrapText", () => { expect(res2).toBe(`\tA)\none\ntab\n- two\ntabs\n- 8\nspace\ns`); }); + it("should retain original text offsets for wrapped lines", () => { + expect(getWrappedTextLines("Hello World!", font, 60)).toEqual([ + { + text: "Hello", + start: 0, + end: 5, + }, + { + text: "World!", + start: 6, + end: 12, + }, + ]); + }); + + it("should exclude whitespace trimmed away at soft-wrap boundaries from line offsets", () => { + expect(getWrappedTextLines(" Hello World", font, 90)).toEqual([ + { + text: " Hello", + start: 0, + end: 7, + }, + { + text: "World", + start: 9, + end: 14, + }, + ]); + }); + + it("should retain offsets when wrapping a single long token", () => { + expect(getWrappedTextLines("Excalidraw", font, 50)).toEqual([ + { + text: "Excal", + start: 0, + end: 5, + }, + { + text: "idraw", + start: 5, + end: 10, + }, + ]); + }); + + it("should preserve empty hard lines in metadata", () => { + expect(getWrappedTextLines("A\n\nB", font, 100)).toEqual([ + { + text: "A", + start: 0, + end: 1, + }, + { + text: "", + start: 2, + end: 2, + }, + { + text: "B", + start: 3, + end: 4, + }, + ]); + }); + describe("When text is CJK", () => { it("should break each CJK character when width is very small", () => { // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi" diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index ab2f4c708c..905c17048f 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -684,6 +684,11 @@ class App extends React.Component { lastPointerDownEvent: React.PointerEvent | null = null; lastPointerUpEvent: React.PointerEvent | PointerEvent | null = null; + // TODO this is a hack and we should ideally unify touch and pointer events + // and implement our own double click handling end-to-end (currently we're + // using a mix of native browser for click events and manual for touch - + // and browser doubleClick sucks to begin with) + lastPointerUpIsDoubleClick: boolean = false; lastPointerMoveEvent: PointerEvent | null = null; /** current frame pointer cords */ lastPointerMoveCoords: { x: number; y: number } | null = null; @@ -1438,6 +1443,21 @@ class App extends React.Component { return true; } + private isDoubleClick = ( + lastPointerEvent: + | PointerEvent + | React.PointerEvent + | undefined + | null, + currentPointerEvent: PointerEvent | React.PointerEvent, + ) => { + return ( + lastPointerEvent != null && + currentPointerEvent.timeStamp - lastPointerEvent.timeStamp <= + TAP_TWICE_TIMEOUT + ); + }; + private isIframeLikeElementCenter( el: ExcalidrawIframeLikeElement | null, event: React.PointerEvent | PointerEvent, @@ -5617,8 +5637,14 @@ class App extends React.Component { element: ExcalidrawTextElement, { isExistingElement = false, + initialCaretSceneCoords = null, }: { isExistingElement?: boolean; + /** + * supply null if no caret positioning is desired, and instead + * text should be auto-selected + */ + initialCaretSceneCoords?: { x: number; y: number } | null; }, ) { const elementsMap = this.scene.getElementsMapIncludingDeleted(); @@ -5721,6 +5747,7 @@ class App extends React.Component { element, excalidrawContainer: this.excalidrawContainerRef.current, app: this, + initialCaretSceneCoords, // when text is selected, it's hard (at least on iOS) to re-position the // caret (i.e. deselect). There's not much use for always selecting // the text on edit anyway (and users can select-all from contextmenu @@ -5744,6 +5771,68 @@ class App extends React.Component { }); } + private getSelectedTextElement( + container?: ExcalidrawTextContainer | null, + ): NonDeleted | null { + const selectedElements = this.scene.getSelectedElements(this.state); + + if (selectedElements.length !== 1) { + return null; + } + + const selectedElement = selectedElements[0]!; + + if (isTextElement(selectedElement)) { + return selectedElement; + } + + if (!container) { + return null; + } + + return getBoundTextElement( + selectedElement, + this.scene.getNonDeletedElementsMap(), + ); + } + + private getSelectedTextEditingContainerAtPosition( + hitElement: NonDeletedExcalidrawElement | null, + sceneCoords: { x: number; y: number }, + ): ExcalidrawTextContainer | null | undefined { + const selectedElements = this.scene.getSelectedElements(this.state); + + if ( + selectedElements.length !== 1 || + !hitElement || + hitElement.id !== selectedElements[0]!.id + ) { + return null; + } + + const selectedElement = selectedElements[0]!; + + if (isTextElement(selectedElement)) { + return null; + } + + if (!isValidTextContainer(selectedElement)) { + return undefined; + } + + const textElement = this.getSelectedTextElement(selectedElement); + const hitTextElement = this.getTextElementAtPosition( + sceneCoords.x, + sceneCoords.y, + ); + + if (!textElement || hitTextElement?.id !== textElement.id) { + return undefined; + } + + return selectedElement; + } + private getTextElementAtPosition( x: number, y: number, @@ -5969,6 +6058,7 @@ class App extends React.Component { insertAtParentCenter = true, container, autoEdit = true, + initialCaretSceneCoords, }: { /** X position to insert text at */ sceneX: number; @@ -5978,6 +6068,7 @@ class App extends React.Component { insertAtParentCenter?: boolean; container?: ExcalidrawTextContainer | null; autoEdit?: boolean; + initialCaretSceneCoords?: { x: number; y: number }; }) => { let shouldBindToContainer = false; @@ -5998,24 +6089,9 @@ class App extends React.Component { shouldBindToContainer = true; } } - let existingTextElement: NonDeleted | null = null; - - const selectedElements = this.scene.getSelectedElements(this.state); - - if (selectedElements.length === 1) { - if (isTextElement(selectedElements[0])) { - existingTextElement = selectedElements[0]; - } else if (container) { - existingTextElement = getBoundTextElement( - selectedElements[0], - this.scene.getNonDeletedElementsMap(), - ); - } else { - existingTextElement = this.getTextElementAtPosition(sceneX, sceneY); - } - } else { - existingTextElement = this.getTextElementAtPosition(sceneX, sceneY); - } + const existingTextElement = + this.getSelectedTextElement(container) || + this.getTextElementAtPosition(sceneX, sceneY); const fontFamily = existingTextElement?.fontFamily || this.state.currentItemFontFamily; @@ -6116,6 +6192,9 @@ class App extends React.Component { if (autoEdit || existingTextElement || container) { this.handleTextWysiwyg(element, { isExistingElement: !!existingTextElement, + initialCaretSceneCoords: existingTextElement + ? initialCaretSceneCoords + : null, }); } else { this.setState({ @@ -6144,6 +6223,9 @@ class App extends React.Component { private handleCanvasDoubleClick = ( event: React.MouseEvent, ) => { + if (this.state.editingTextElement) { + return; + } // case: double-clicking with arrow/line tool selected would both create // text and enter multiElement mode if (this.state.multiElement) { @@ -7680,6 +7762,10 @@ class App extends React.Component { } this.removePointer(event); + this.lastPointerUpIsDoubleClick = this.isDoubleClick( + this.lastPointerUpEvent, + event, + ); this.lastPointerUpEvent = event; if (!event.ctrlKey) { @@ -8516,6 +8602,7 @@ class App extends React.Component { insertAtParentCenter: !event.altKey, container, autoEdit: false, + initialCaretSceneCoords: { x: sceneX, y: sceneY }, }); resetCursor(this.interactiveCanvas); @@ -11001,6 +11088,35 @@ class App extends React.Component { return; } + const selectedTextEditingContainer = + this.getSelectedTextEditingContainerAtPosition(hitElement, sceneCoords); + + if ( + activeTool.type === this.state.preferredSelectionTool.type && + !this.state.editingTextElement && + !pointerDownState.drag.hasOccurred && + !pointerDownState.hit.wasAddedToSelection && + !childEvent.shiftKey && + !childEvent[KEYS.CTRL_OR_CMD] && + !childEvent.altKey && + childEvent.pointerType !== "touch" && + hitElement && + ((isTextElement(hitElement) && + this.state.selectedElementIds[hitElement.id] && + this.scene.getSelectedElements(this.state).length === 1) || + selectedTextEditingContainer) + ) { + this.startTextEditing({ + sceneX: sceneCoords.x, + sceneY: sceneCoords.y, + container: selectedTextEditingContainer, + initialCaretSceneCoords: this.lastPointerUpIsDoubleClick + ? undefined + : sceneCoords, + }); + return; + } + if (!activeTool.locked && activeTool.type !== "freedraw" && newElement) { this.setState((prevState) => ({ selectedElementIds: makeNextSelectedElementIds( diff --git a/packages/excalidraw/components/Stats/stats.test.tsx b/packages/excalidraw/components/Stats/stats.test.tsx index a43a5fb600..283bdb40d3 100644 --- a/packages/excalidraw/components/Stats/stats.test.tsx +++ b/packages/excalidraw/components/Stats/stats.test.tsx @@ -361,12 +361,10 @@ describe("stats for a non-generic element", () => { mouse.clickAt(20, 30); const editor = await getTextEditor(); updateTextEditor(editor, "Hello!"); - act(() => { - editor.blur(); - }); + Keyboard.exitTextEditor(editor); const text = h.elements[0] as ExcalidrawTextElement; - mouse.clickOn(text); + API.setSelectedElements([text]); elementStats = stats?.querySelector("#elementStats"); diff --git a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx index 7d3da4d049..352b1a1529 100644 --- a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx +++ b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx @@ -232,6 +232,67 @@ describe("textWysiwyg", () => { expect(h.elements.length).toBe(1); }); + it("should edit selected bound text on single click", async () => { + const container = API.createElement({ + type: "rectangle", + width: 160, + height: 70, + boundElements: [], + }); + const text = API.createElement({ + type: "text", + text: "Hello World!", + x: container.x + 20, + y: container.y + 20, + width: 120, + height: 25, + containerId: container.id, + }); + + API.setElements([container, text]); + API.updateElement(container, { + boundElements: [{ type: "text", id: text.id }], + }); + API.setSelectedElements([container]); + UI.clickTool("selection"); + + mouse.clickAt(text.x + 26, text.y + 10); + + const editor = await getTextEditor(); + + expect(editor).not.toBe(null); + }); + + it("should not edit selected bound text container when only the container was single-clicked", async () => { + const container = API.createElement({ + type: "rectangle", + width: 160, + height: 70, + boundElements: [], + }); + const text = API.createElement({ + type: "text", + text: "Hello World!", + x: container.x + 20, + y: container.y + 20, + width: 120, + height: 25, + containerId: container.id, + }); + + API.setElements([container, text]); + API.updateElement(container, { + boundElements: [{ type: "text", id: text.id }], + }); + API.setSelectedElements([container]); + UI.clickTool("selection"); + + mouse.clickAt(container.x + 5, container.y + 10); + + expect(h.state.editingTextElement).toBe(null); + expect(await getTextEditor({ waitForEditor: false })).toBe(null); + }); + // FIXME too flaky. No one knows why. it.skip("should bump the version of a labeled arrow when the label is updated", async () => { const arrow = UI.createElement("arrow", { diff --git a/packages/excalidraw/wysiwyg/textWysiwyg.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.tsx index 27086e07b9..262558727c 100644 --- a/packages/excalidraw/wysiwyg/textWysiwyg.tsx +++ b/packages/excalidraw/wysiwyg/textWysiwyg.tsx @@ -10,7 +10,9 @@ import { isTestEnv, MIME_TYPES, applyDarkModeFilter, + isRTL, } from "@excalidraw/common"; +import { pointFrom, pointRotateRads, type Radians } from "@excalidraw/math"; import { getTextFromElements, @@ -33,8 +35,11 @@ import { getBoundTextElement, } from "@excalidraw/element"; import { getTextWidth } from "@excalidraw/element"; +import { getLineHeightInPx } from "@excalidraw/element"; +import { getLineWidth } from "@excalidraw/element"; import { normalizeText } from "@excalidraw/element"; import { wrapText } from "@excalidraw/element"; +import { getWrappedTextLines } from "@excalidraw/element"; import { isArrowElement, isBoundToContainer, @@ -91,6 +96,103 @@ const getTransform = ( return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`; }; +const getLineDirection = (text: string, offset: number) => { + const hardLineStart = text.lastIndexOf("\n", Math.max(0, offset - 1)) + 1; + const hardLineEnd = text.indexOf("\n", offset); + const hardLineText = text.slice( + hardLineStart, + hardLineEnd === -1 ? text.length : hardLineEnd, + ); + + return isRTL(hardLineText) ? "rtl" : "ltr"; +}; + +const getCaretBoundaryOffsets = (text: string) => { + const offsets = [0]; + let offset = 0; + + for (const char of Array.from(text)) { + offset += char.length; + offsets.push(offset); + } + + return offsets; +}; + +const getLineCaretOffsetFromNativeLayout = ({ + text, + font, + lineHeightPx, + direction, + targetX, +}: { + text: string; + font: ReturnType; + lineHeightPx: number; + direction: "ltr" | "rtl"; + targetX: number; +}) => { + if (!text || !document.body || typeof document.createRange !== "function") { + return null; + } + + const offsets = getCaretBoundaryOffsets(text); + const mirror = document.createElement("div"); + const textNode = document.createTextNode(text); + const range = document.createRange(); + const positions: number[] = []; + + mirror.dir = direction; + Object.assign(mirror.style, { + position: "fixed", + top: "0", + left: "0", + margin: 0, + padding: 0, + border: 0, + opacity: "0", + pointerEvents: "none", + whiteSpace: "pre", + font, + lineHeight: `${lineHeightPx}px`, + }); + mirror.append(textNode); + document.body.append(mirror); + + try { + for (const offset of offsets) { + range.setStart(textNode, offset); + range.setEnd(textNode, offset); + const caretRect = range.getBoundingClientRect(); + + if (!Number.isFinite(caretRect.left)) { + return null; + } + + positions.push(caretRect.left); + } + } catch { + return null; + } finally { + mirror.remove(); + } + + const leftEdge = Math.min(...positions); + let closestOffset = offsets[0]; + let closestDistance = Infinity; + + for (let index = 0; index < offsets.length; index++) { + const distance = Math.abs(positions[index] - leftEdge - targetX); + + if (distance < closestDistance) { + closestDistance = distance; + closestOffset = offsets[index]; + } + } + + return closestOffset; +}; + type SubmitHandler = () => void; export const textWysiwyg = ({ @@ -103,6 +205,7 @@ export const textWysiwyg = ({ excalidrawContainer, app, autoSelect = true, + initialCaretSceneCoords = null, }: { id: ExcalidrawElement["id"]; /** @@ -119,7 +222,19 @@ export const textWysiwyg = ({ excalidrawContainer: HTMLDivElement | null; app: App; autoSelect?: boolean; + initialCaretSceneCoords?: { x: number; y: number } | null; }): SubmitHandler => { + let currentTextLayout: { + angle: Radians; + font: ReturnType; + height: number; + lineHeightPx: number; + textAlign: ExcalidrawTextElement["textAlign"]; + width: number; + x: number; + y: number; + } | null = null; + const textPropertiesUpdated = ( updatedTextElement: ExcalidrawTextElement, editable: HTMLTextAreaElement, @@ -254,6 +369,7 @@ export const textWysiwyg = ({ height *= 1.05; const font = getFontString(updatedTextElement); + const angle = getTextElementAngle(updatedTextElement, container); // Make sure text editor height doesn't go beyond viewport const editorMaxHeight = @@ -269,7 +385,7 @@ export const textWysiwyg = ({ transform: getTransform( width, height, - getTextElementAngle(updatedTextElement, container), + angle, appState, maxWidth, editorMaxHeight, @@ -283,6 +399,19 @@ export const textWysiwyg = ({ opacity: updatedTextElement.opacity / 100, maxHeight: `${editorMaxHeight}px`, }); + currentTextLayout = { + angle: angle as Radians, + font, + height: updatedTextElement.height, + lineHeightPx: getLineHeightInPx( + updatedTextElement.fontSize, + updatedTextElement.lineHeight, + ), + textAlign, + width: updatedTextElement.width, + x: coordX, + y: coordY, + }; editable.scrollTop = 0; // For some reason updating font attribute doesn't set font family // hence updating font family explicitly for test environment @@ -333,6 +462,71 @@ export const textWysiwyg = ({ editable.value = element.originalText; updateWysiwygStyle(); + const getCaretIndexFromInitialSceneCoords = () => { + if (!initialCaretSceneCoords || !currentTextLayout) { + return null; + } + + const layout = currentTextLayout; + const center = pointFrom( + layout.x + layout.width / 2, + layout.y + layout.height / 2, + ); + const [unrotatedX, unrotatedY] = pointRotateRads( + pointFrom(initialCaretSceneCoords.x, initialCaretSceneCoords.y), + center, + -layout.angle as Radians, + ); + const localX = unrotatedX - layout.x; + const localY = unrotatedY - layout.y; + const lines = getWrappedTextLines( + editable.value, + layout.font, + whiteSpace === "pre-wrap" ? layout.width : Infinity, + ); + const lineIndex = Math.max( + 0, + Math.min(lines.length - 1, Math.floor(localY / layout.lineHeightPx)), + ); + const line = lines[lineIndex]; + const direction = getLineDirection(editable.value, line.start); + const lineWidth = getLineWidth(line.text, layout.font); + const lineStartX = + layout.textAlign === "center" + ? (layout.width - lineWidth) / 2 + : layout.textAlign === "right" + ? layout.width - lineWidth + : 0; + const relativeX = localX - lineStartX; + + if (!line.text) { + return line.start; + } + + const lineCaretOffset = getLineCaretOffsetFromNativeLayout({ + text: line.text, + font: layout.font, + lineHeightPx: layout.lineHeightPx, + direction, + targetX: relativeX, + }); + + return line.start + (lineCaretOffset || 0); + }; + + let pendingInitialSelection = (() => { + const caretIndex = getCaretIndexFromInitialSceneCoords(); + + if (caretIndex === null) { + return null; + } + + return { + start: caretIndex, + end: caretIndex, + }; + })(); + if (onChange) { editable.onpaste = async (event) => { // we need to synchronously get the MIME types so we can preventDefault() @@ -696,6 +890,13 @@ export const textWysiwyg = ({ // Otherwise, re-enable submit on blur and refocus the editor. editable.onblur = handleSubmit; editable.focus(); + if (pendingInitialSelection) { + editable.setSelectionRange( + pendingInitialSelection.start, + pendingInitialSelection.end, + ); + pendingInitialSelection = null; + } }); }; @@ -786,7 +987,7 @@ export const textWysiwyg = ({ let isDestroyed = false; - if (autoSelect) { + if (autoSelect && !pendingInitialSelection) { // select on init (focusing is done separately inside the bindBlurEvent() // because we need it to happen *after* the blur event from `pointerdown`) editable.select(); From 81ab857a6fc66254239947524faccf45d5925f69 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Thu, 19 Mar 2026 16:00:58 +0100 Subject: [PATCH 31/62] feat(editor): various text related improvements (#10979) --- packages/element/src/selection.ts | 18 ++ .../excalidraw/actions/actionProperties.tsx | 31 ++- .../actions/actionTextAutoResize.ts | 17 +- packages/excalidraw/components/App.tsx | 183 +++++++++++++++++- packages/excalidraw/components/Range.tsx | 70 +++---- .../components/canvases/InteractiveCanvas.tsx | 2 + .../excalidraw/renderer/interactiveScene.ts | 71 ++++++- .../tests/__snapshots__/history.test.tsx.snap | 68 +++---- packages/excalidraw/tests/helpers/ui.ts | 14 +- packages/excalidraw/textAutoResizeHandle.ts | 88 +++++++++ packages/excalidraw/types.ts | 8 +- .../excalidraw/wysiwyg/textWysiwyg.test.tsx | 43 +++- packages/math/src/point.ts | 9 +- 13 files changed, 518 insertions(+), 104 deletions(-) create mode 100644 packages/excalidraw/textAutoResizeHandle.ts diff --git a/packages/element/src/selection.ts b/packages/element/src/selection.ts index bb94166dbd..ea7fdb1b77 100644 --- a/packages/element/src/selection.ts +++ b/packages/element/src/selection.ts @@ -11,6 +11,7 @@ import { isBoundToContainer, isFrameLikeElement, isLinearElement, + isTextElement, } from "./typeChecks"; import { elementOverlapsWithFrame, @@ -25,6 +26,7 @@ import type { ElementsMap, ElementsMapOrArray, ExcalidrawElement, + NonDeleted, NonDeletedExcalidrawElement, } from "./types"; @@ -288,3 +290,19 @@ export const getSelectionStateForElements = ( ), }; }; + +/** + * Returns editing or single-selected text element, if any. + */ +export const getActiveTextElement = ( + selectedElements: readonly NonDeleted[], + appState: Pick, +) => { + const activeTextElement = + appState.editingTextElement || + (selectedElements.length === 1 && + isTextElement(selectedElements[0]) && + selectedElements[0]); + + return activeTextElement || null; +}; diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index bca2237940..a046db6ea8 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -191,7 +191,7 @@ export const getFormValue = function ( elements: readonly ExcalidrawElement[], app: AppClassProperties, getAttribute: (element: ExcalidrawElement) => T, - isRelevantElement: true | ((element: ExcalidrawElement) => boolean), + elementPredicate: true | ((element: ExcalidrawElement) => boolean), defaultValue: T | ((isSomeElementSelected: boolean) => T), ): T { const editingTextElement = app.state.editingTextElement; @@ -209,9 +209,9 @@ export const getFormValue = function ( if (hasSelection) { const selectedElements = app.scene.getSelectedElements(app.state); const targetElements = - isRelevantElement === true + elementPredicate === true ? selectedElements - : selectedElements.filter((el) => isRelevantElement(el)); + : selectedElements.filter((el) => elementPredicate(el)); ret = reduceToCommonValue(targetElements, getAttribute) ?? @@ -730,9 +730,28 @@ export const actionChangeOpacity = register({ captureUpdate: CaptureUpdateAction.IMMEDIATELY, }; }, - PanelComponent: ({ app, updateData }) => ( - - ), + PanelComponent: ({ elements, appState, app, updateData }) => { + const opacity = getFormValue( + elements, + app, + (element) => element.opacity, + true, + (hasSelection) => (hasSelection ? null : appState.currentItemOpacity), + ); + + return ( + + ); + }, }); export const actionChangeFontSize = register( diff --git a/packages/excalidraw/actions/actionTextAutoResize.ts b/packages/excalidraw/actions/actionTextAutoResize.ts index d4338e7797..dcc0f16955 100644 --- a/packages/excalidraw/actions/actionTextAutoResize.ts +++ b/packages/excalidraw/actions/actionTextAutoResize.ts @@ -1,24 +1,24 @@ import { getFontString } from "@excalidraw/common"; -import { newElementWith } from "@excalidraw/element"; +import { isExcalidrawElement, newElementWith } from "@excalidraw/element"; import { measureText } from "@excalidraw/element"; import { isTextElement } from "@excalidraw/element"; import { CaptureUpdateAction } from "@excalidraw/element"; +import type { ExcalidrawElement } from "@excalidraw/element/types"; + import { getSelectedElements } from "../scene"; import { register } from "./register"; -import type { AppClassProperties } from "../types"; - export const actionTextAutoResize = register({ name: "autoResize", label: "labels.autoResize", icon: null, trackEvent: { category: "element" }, - predicate: (elements, appState, _: unknown, app: AppClassProperties) => { + predicate: (elements, appState, _: unknown) => { const selectedElements = getSelectedElements(elements, appState); return ( selectedElements.length === 1 && @@ -26,13 +26,18 @@ export const actionTextAutoResize = register({ !selectedElements[0].autoResize ); }, - perform: (elements, appState, _, app) => { + perform: (elements, appState, targetElement) => { const selectedElements = getSelectedElements(elements, appState); + const targetTextElement = + isExcalidrawElement(targetElement) && isTextElement(targetElement) + ? targetElement + : (selectedElements[0] as ExcalidrawElement | undefined); + return { appState, elements: elements.map((element) => { - if (element.id === selectedElements[0].id && isTextElement(element)) { + if (element.id === targetTextElement?.id && isTextElement(element)) { const metrics = measureText( element.originalText, getFontString(element), diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 905c17048f..480dae2f7b 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -257,6 +257,7 @@ import { handleFocusPointPointerUp, maybeHandleArrowPointlikeDrag, getUncroppedWidthAndHeight, + getActiveTextElement, } from "@excalidraw/element"; import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math"; @@ -416,6 +417,7 @@ import { import { ElementCanvasButtons } from "../components/ElementCanvasButtons"; import { LaserTrails } from "../laser-trails"; import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils"; +import { isPointHittingTextAutoResizeHandle } from "../textAutoResizeHandle"; import { textWysiwyg } from "../wysiwyg/textWysiwyg"; import { isOverScrollBars } from "../scene/scrollbars"; @@ -692,6 +694,7 @@ class App extends React.Component { lastPointerMoveEvent: PointerEvent | null = null; /** current frame pointer cords */ lastPointerMoveCoords: { x: number; y: number } | null = null; + private lastCompletedCanvasClicks: { x: number; y: number }[] = []; /** previous frame pointer coords */ previousPointerMoveCoords: { x: number; y: number } | null = null; lastViewportPosition = { x: 0, y: 0 }; @@ -1253,6 +1256,26 @@ class App extends React.Component { ) as NullableGridSize; }; + private getTextCreationGridPoint = (x: number, y: number) => { + const effectiveGridSize = this.getEffectiveGridSize(); + + if (effectiveGridSize === null) { + return null; + } + + const getTextCreationGridCoordinate = (coordinate: number) => { + const topLeftGridPoint = + Math.floor(coordinate / effectiveGridSize) * effectiveGridSize; + + return topLeftGridPoint; + }; + + return { + x: getTextCreationGridCoordinate(x), + y: getTextCreationGridCoordinate(y), + }; + }; + private getHTMLIFrameElement( element: ExcalidrawIframeLikeElement, ): HTMLIFrameElement | undefined { @@ -2341,6 +2364,7 @@ class App extends React.Component { } handleCanvasRef={this.handleInteractiveCanvasRef} onContextMenu={this.handleCanvasContextMenu} + onClick={this.handleCanvasClick} onPointerMove={this.handleCanvasPointerMove} onPointerUp={this.handleCanvasPointerUp} onPointerCancel={this.removePointer} @@ -3594,10 +3618,14 @@ class App extends React.Component { this.lassoTrail.endPath(); this.deselectElements(); - // @ts-ignore this.handleCanvasDoubleClick({ clientX: touch.clientX, clientY: touch.clientY, + type: "touch", + altKey: false, + ctrlKey: false, + metaKey: false, + shiftKey: false, }); } didTapTwice = false; @@ -5846,6 +5874,58 @@ class App extends React.Component { return null; } + private isHittingTextAutoResizeHandle = ( + selectedElements: NonDeleted[], + point: Readonly<{ x: number; y: number }>, + ): boolean => { + const activeTextElement = getActiveTextElement( + selectedElements, + this.state, + ); + + if ( + activeTextElement && + !activeTextElement.isDeleted && + !activeTextElement.autoResize && + isPointHittingTextAutoResizeHandle( + point, + activeTextElement, + this.state.zoom.value, + this.editorInterface.formFactor, + ) + ) { + return true; + } + + return false; + }; + + private handleTextAutoResizeHandlePointerDown = ( + selectedElements: NonDeleted[], + point: Readonly<{ x: number; y: number }>, + ) => { + const activeTextElement = getActiveTextElement( + selectedElements, + this.state, + ); + if ( + !activeTextElement || + !this.isHittingTextAutoResizeHandle(selectedElements, point) + ) { + return false; + } + + this.actionManager.executeAction( + actionTextAutoResize, + "ui", + // we need to pass down the element since it may already be deselected + // due to the pointerdown + activeTextElement, + ); + this.resetCursor(); + return true; + }; + // NOTE: Hot path for hit testing, so avoid unnecessary computations private getElementAtPosition( x: number, @@ -6138,11 +6218,32 @@ class App extends React.Component { y: sceneY, }); + const textCreationGridPoint = this.getTextCreationGridPoint(sceneX, sceneY); + + const newTextElementPosition = parentCenterPosition + ? { + x: parentCenterPosition.elementCenterX, + y: parentCenterPosition.elementCenterY, + } + : !existingTextElement + ? { + x: textCreationGridPoint?.x ?? sceneX, + y: + textCreationGridPoint === null + ? // Free text starts from a point cursor, so center the first line box on it. + sceneY - getLineHeightInPx(fontSize, lineHeight) / 2 + : textCreationGridPoint.y, + } + : { + x: sceneX, + y: sceneY, + }; + const element = existingTextElement || newTextElement({ - x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX, - y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY, + x: newTextElementPosition.x, + y: newTextElementPosition.y, strokeColor: this.state.currentItemStrokeColor, backgroundColor: this.state.currentItemBackgroundColor, fillStyle: this.state.currentItemFillStyle, @@ -6220,10 +6321,46 @@ class App extends React.Component { } }; + private shouldHandleBrowserCanvasDoubleClick = (type: string) => { + // TODO remove this once we consolidate double-click logic and handle + // ourselves for all event types together + if (type === "touch") { + return true; + } + if (this.lastCompletedCanvasClicks.length === 0) { + return true; + } + + if (this.lastCompletedCanvasClicks.length < 2) { + return false; + } + + const [firstClick, secondClick] = this.lastCompletedCanvasClicks; + + return ( + pointDistance( + pointFrom(firstClick.x, firstClick.y), + pointFrom(secondClick.x, secondClick.y), + ) <= DOUBLE_TAP_POSITION_THRESHOLD + ); + }; + private handleCanvasDoubleClick = ( - event: React.MouseEvent, + event: Pick< + React.MouseEvent, + | "type" + | "clientX" + | "clientY" + | "altKey" + | "ctrlKey" + | "metaKey" + | "shiftKey" + >, ) => { - if (this.state.editingTextElement) { + if ( + this.state.editingTextElement || + !this.shouldHandleBrowserCanvasDoubleClick(event.type) + ) { return; } // case: double-clicking with arrow/line tool selected would both create @@ -6413,6 +6550,21 @@ class App extends React.Component { } }; + private handleCanvasClick = (event: React.MouseEvent) => { + if (event.button !== POINTER_BUTTON.MAIN) { + this.lastCompletedCanvasClicks = []; + return; + } + + this.lastCompletedCanvasClicks = [ + ...this.lastCompletedCanvasClicks.slice(-1), + { + x: event.clientX, + y: event.clientY, + }, + ]; + }; + private getElementLinkAtPosition = ( scenePointer: Readonly<{ x: number; y: number }>, hitElementMightBeLocked: NonDeletedExcalidrawElement | null, @@ -6949,6 +7101,12 @@ class App extends React.Component { const elements = this.scene.getNonDeletedElements(); const selectedElements = this.scene.getSelectedElements(this.state); + + if (this.isHittingTextAutoResizeHandle(selectedElements, scenePointer)) { + setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER); + return; + } + if ( selectedElements.length === 1 && !isOverScrollBar && @@ -7093,7 +7251,9 @@ class App extends React.Component { setCursor(this.interactiveCanvas, CURSOR_TYPE.AUTO); } else if ( // if using cmd/ctrl, we're not dragging - !event[KEYS.CTRL_OR_CMD] + !event[KEYS.CTRL_OR_CMD] && + // editing text -> don't show move cursor when hovering over its bbox + hitElement?.id !== this.state.editingTextElement?.id ) { if ( (hitElement || @@ -7314,6 +7474,8 @@ class App extends React.Component { private handleCanvasPointerDown = ( event: React.PointerEvent, ) => { + const selectedElements = this.scene.getSelectedElements(this.state); + // If Ctrl is not held, ensure isBindingEnabled reflects the user preference. if (!event.ctrlKey) { const preferenceEnabled = this.state.bindingPreference === "enabled"; @@ -7537,6 +7699,15 @@ class App extends React.Component { selectedElementsAreBeingDragged: false, }); + if ( + this.handleTextAutoResizeHandlePointerDown( + selectedElements, + pointerDownState.origin, + ) + ) { + return; + } + if (this.handleDraggingScrollBar(event, pointerDownState)) { return; } diff --git a/packages/excalidraw/components/Range.tsx b/packages/excalidraw/components/Range.tsx index 501ad7d188..7a4bf397e7 100644 --- a/packages/excalidraw/components/Range.tsx +++ b/packages/excalidraw/components/Range.tsx @@ -1,74 +1,78 @@ import React, { useEffect } from "react"; -import { t } from "../i18n"; - import "./Range.scss"; -import type { AppClassProperties } from "../types"; - export type RangeProps = { - updateData: (value: number) => void; - app: AppClassProperties; + label: React.ReactNode; + value: number; + onChange: (value: number) => void; + min?: number; + max?: number; + step?: number; + minLabel?: React.ReactNode; + hasCommonValue?: boolean; testId?: string; }; -export const Range = ({ updateData, app, testId }: RangeProps) => { +export const Range = ({ + label, + value, + onChange, + min = 0, + max = 100, + step = 10, + minLabel = min, + hasCommonValue = true, + testId, +}: RangeProps) => { const rangeRef = React.useRef(null); const valueRef = React.useRef(null); - const selectedElements = app.scene.getSelectedElements(app.state); - let hasCommonOpacity = true; - const firstElement = selectedElements.at(0); - const leastCommonOpacity = selectedElements.reduce((acc, element) => { - if (acc != null && acc !== element.opacity) { - hasCommonOpacity = false; - } - if (acc == null || acc > element.opacity) { - return element.opacity; - } - return acc; - }, firstElement?.opacity ?? null); - - const value = leastCommonOpacity ?? app.state.currentItemOpacity; useEffect(() => { if (rangeRef.current && valueRef.current) { const rangeElement = rangeRef.current; const valueElement = valueRef.current; const inputWidth = rangeElement.offsetWidth; - const thumbWidth = 15; // 15 is the width of the thumb + const thumbWidth = + parseFloat( + getComputedStyle(rangeElement).getPropertyValue( + "--slider-thumb-size", + ), + ) || 16; + const progress = ((value - min) / (max - min || 1)) * 100; const position = - (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2; + (progress / 100) * (inputWidth - thumbWidth) + thumbWidth / 2; valueElement.style.left = `${position}px`; - rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`; + rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${progress}%, var(--button-bg) ${progress}%, var(--button-bg) 100%)`; } - }, [value]); + }, [max, min, value]); return ( ); diff --git a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx index a30088f30a..2aabddfbab 100644 --- a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx +++ b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx @@ -54,6 +54,7 @@ type InteractiveCanvasProps = { DOMAttributes["onContextMenu"], undefined >; + onClick: Exclude["onClick"], undefined>; onPointerMove: Exclude< DOMAttributes["onPointerMove"], undefined @@ -213,6 +214,7 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => { height={props.appState.height * props.scale} ref={props.handleCanvasRef} onContextMenu={props.onContextMenu} + onClick={props.onClick} onPointerMove={props.onPointerMove} onPointerUp={props.onPointerUp} onPointerCancel={props.onPointerCancel} diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts index 56c308713e..7d31bf9a32 100644 --- a/packages/excalidraw/renderer/interactiveScene.ts +++ b/packages/excalidraw/renderer/interactiveScene.ts @@ -41,6 +41,7 @@ import { maxBindingDistance_simple, isTextElement, LinearElementEditor, + getActiveTextElement, } from "@excalidraw/element"; import { renderSelectionElement } from "@excalidraw/element"; @@ -58,6 +59,8 @@ import { isFocusPointVisible, } from "@excalidraw/element"; +import type { EditorInterface } from "@excalidraw/common"; + import type { TransformHandles, TransformHandleType, @@ -86,6 +89,10 @@ import { } from "../scene/scrollbars"; import { getClientColor, renderRemoteCursors } from "../clients"; +import { + getTextAutoResizeHandle, + getTextBoxPadding, +} from "../textAutoResizeHandle"; import { bootstrapCanvas, @@ -1489,21 +1496,58 @@ const renderTextBox = ( selectionColor: InteractiveCanvasRenderConfig["selectionColor"], ) => { context.save(); - const padding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value; + const padding = getTextBoxPadding(appState.zoom.value); const width = text.width + padding * 2; const height = text.height + padding * 2; - const cx = text.x + width / 2; - const cy = text.y + height / 2; - const shiftX = -(width / 2 + padding); - const shiftY = -(height / 2 + padding); + const cx = text.x + text.width / 2; + const cy = text.y + text.height / 2; + const shiftX = -(text.width / 2 + padding); + const shiftY = -(text.height / 2 + padding); context.translate(cx + appState.scrollX, cy + appState.scrollY); context.rotate(text.angle); context.lineWidth = 1 / appState.zoom.value; context.strokeStyle = selectionColor; + context.globalAlpha = 0.5; + context.setLineDash([6 / appState.zoom.value, 4 / appState.zoom.value]); context.strokeRect(shiftX, shiftY, width, height); context.restore(); }; +const renderResetAutoResizeHandle = ( + text: NonDeleted, + context: CanvasRenderingContext2D, + appState: InteractiveCanvasAppState, + selectionColor: InteractiveCanvasRenderConfig["selectionColor"], + formFactor: EditorInterface["formFactor"], +) => { + const autoResizeHandle = getTextAutoResizeHandle( + text, + appState.zoom.value, + formFactor, + ); + + if (!autoResizeHandle) { + return; + } + + context.save(); + context.globalAlpha = 0.5; + context.lineWidth = 1.5 / appState.zoom.value; + context.lineCap = "round"; + context.strokeStyle = selectionColor; + context.beginPath(); + context.moveTo( + autoResizeHandle.start[0] + appState.scrollX, + autoResizeHandle.start[1] + appState.scrollY, + ); + context.lineTo( + autoResizeHandle.end[0] + appState.scrollX, + autoResizeHandle.end[1] + appState.scrollY, + ); + context.stroke(); + context.restore(); +}; + const _renderInteractiveScene = ({ app, canvas, @@ -1584,10 +1628,19 @@ const _renderInteractiveScene = ({ } } - if ( - appState.editingTextElement && - isTextElement(appState.editingTextElement) - ) { + const activeTextElement = getActiveTextElement(selectedElements, appState); + + if (activeTextElement && !activeTextElement.autoResize) { + renderResetAutoResizeHandle( + activeTextElement, + context, + appState, + renderConfig.selectionColor, + editorInterface.formFactor, + ); + } + + if (appState.editingTextElement) { const textElement = allElementsMap.get(appState.editingTextElement.id) as | ExcalidrawTextElement | undefined; diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap index c81459c1c4..050a20878b 100644 --- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap @@ -224,7 +224,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 29, + "version": 28, "width": "94.00000", "x": 0, "y": 0, @@ -350,7 +350,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 28, + "version": 27, "width": "88.00000", }, "inserted": { @@ -381,7 +381,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 25, + "version": 24, "width": "88.00000", }, }, @@ -437,7 +437,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], ], "startBinding": null, - "version": 29, + "version": 28, "width": "94.00000", "x": 0, "y": 0, @@ -462,7 +462,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 28, + "version": 27, "width": "88.00000", "x": 6, "y": "7.20923", @@ -1360,9 +1360,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 8, + "version": 7, "width": 88, - "x": 6, + "x": "6.00000", "y": "2.00947", } `; @@ -1537,12 +1537,12 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 8, + "version": 7, }, "inserted": { "endBinding": null, "startBinding": null, - "version": 7, + "version": 6, }, }, }, @@ -1722,7 +1722,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "updated": 1, "version": 8, "width": 88, - "x": 6, + "x": "6.00000", "y": "38.80379", } `; @@ -1867,7 +1867,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "type": "arrow", "version": 8, "width": 88, - "x": 6, + "x": "6.00000", "y": "38.80379", }, "inserted": { @@ -2416,7 +2416,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 12, + "version": 11, "width": 488, "x": 6, "y": "-5.39000", @@ -2581,7 +2581,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 12, + "version": 11, "width": 488, "x": 6, "y": "-5.39000", @@ -16254,7 +16254,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 10, + "version": 11, "width": "88.00000", "x": 6, "y": "0.01000", @@ -16307,7 +16307,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 10, + "version": 11, }, "inserted": { "endBinding": { @@ -16327,7 +16327,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 8, + "version": 9, }, }, }, @@ -16669,14 +16669,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 7, + "version": 8, "width": "88.00000", "x": 6, "y": "0.00880", }, "inserted": { "isDeleted": true, - "version": 6, + "version": 7, }, }, }, @@ -17002,7 +17002,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 10, + "version": 11, "width": "88.00000", "x": 6, "y": "0.01000", @@ -17307,14 +17307,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 10, + "version": 11, "width": "88.00000", "x": 6, "y": "0.01000", }, "inserted": { "isDeleted": true, - "version": 8, + "version": 9, }, }, }, @@ -17648,7 +17648,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 10, + "version": 11, "width": "88.00000", "x": 6, "y": "0.01000", @@ -17953,14 +17953,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 10, + "version": 11, "width": "88.00000", "x": 6, "y": "0.01000", }, "inserted": { "isDeleted": true, - "version": 8, + "version": 9, }, }, }, @@ -18292,7 +18292,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 10, + "version": 11, "width": "88.00000", "x": 6, "y": "0.01000", @@ -18361,7 +18361,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 10, + "version": 11, }, "inserted": { "endBinding": { @@ -18373,7 +18373,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "mode": "orbit", }, "startBinding": null, - "version": 8, + "version": 9, }, }, "id2": { @@ -18683,14 +18683,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 7, + "version": 8, "width": "88.00000", "x": 6, "y": "0.00880", }, "inserted": { "isDeleted": true, - "version": 6, + "version": 7, }, }, }, @@ -19044,7 +19044,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 11, + "version": 12, "width": "88.00000", "x": 6, "y": "0.01000", @@ -19124,12 +19124,12 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 11, + "version": 12, }, "inserted": { "endBinding": null, "startBinding": null, - "version": 9, + "version": 10, }, }, }, @@ -19431,14 +19431,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 7, + "version": 8, "width": "88.00000", "x": 6, "y": "0.00880", }, "inserted": { "isDeleted": true, - "version": 6, + "version": 7, }, }, }, diff --git a/packages/excalidraw/tests/helpers/ui.ts b/packages/excalidraw/tests/helpers/ui.ts index 80a7e4c561..079af75969 100644 --- a/packages/excalidraw/tests/helpers/ui.ts +++ b/packages/excalidraw/tests/helpers/ui.ts @@ -4,6 +4,7 @@ import { elementCenterPoint, getCommonBounds, getElementPointsCoords, + getLineHeightInPx, } from "@excalidraw/element"; import { cropElement } from "@excalidraw/element"; import { @@ -20,7 +21,7 @@ import { isTextElement, isFrameLikeElement, } from "@excalidraw/element"; -import { KEYS, arrayToMap } from "@excalidraw/common"; +import { KEYS, arrayToMap, getLineHeight } from "@excalidraw/common"; import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math"; @@ -516,8 +517,17 @@ export class UI { UI.clickTool(type); if (type === "text") { + const clickY = h.state.gridModeEnabled + ? y + : y + + getLineHeightInPx( + h.state.currentItemFontSize, + getLineHeight(h.state.currentItemFontFamily), + ) / + 2; + mouse.reset(); - mouse.click(x, y); + mouse.click(x, clickY); } else if ((type === "line" || type === "arrow") && points.length > 2) { points.forEach((point) => { mouse.reset(); diff --git a/packages/excalidraw/textAutoResizeHandle.ts b/packages/excalidraw/textAutoResizeHandle.ts new file mode 100644 index 0000000000..abf1e76ddc --- /dev/null +++ b/packages/excalidraw/textAutoResizeHandle.ts @@ -0,0 +1,88 @@ +import { DEFAULT_TRANSFORM_HANDLE_SPACING } from "@excalidraw/common"; +import { + pointFrom, + pointRotateRads, + type GlobalPoint, + type Radians, +} from "@excalidraw/math"; + +import type { EditorInterface } from "@excalidraw/common"; + +import type { ExcalidrawTextElement } from "@excalidraw/element/types"; + +const TEXT_AUTO_RESIZE_HANDLE_GAP = 12; +const TEXT_AUTO_RESIZE_HANDLE_LENGTH = 16; +const TEXT_AUTO_RESIZE_HANDLE_HITBOX_WIDTH = 10; +const TEXT_AUTO_RESIZE_HANDLE_HITBOX_HEIGHT = + TEXT_AUTO_RESIZE_HANDLE_LENGTH + 2; +const MAX_HANDLE_HEIGHT_RATIO = 0.8; + +export const getTextBoxPadding = (zoomValue: number) => + (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / zoomValue; + +export const getTextAutoResizeHandle = ( + textElement: ExcalidrawTextElement, + zoomValue: number, + formFactor: EditorInterface["formFactor"], +) => { + if ( + formFactor !== "desktop" || + TEXT_AUTO_RESIZE_HANDLE_LENGTH > + textElement.height * zoomValue * MAX_HANDLE_HEIGHT_RATIO + ) { + return null; + } + + const padding = getTextBoxPadding(zoomValue); + const gap = TEXT_AUTO_RESIZE_HANDLE_GAP / zoomValue; + const length = TEXT_AUTO_RESIZE_HANDLE_LENGTH / zoomValue; + const center = pointFrom( + textElement.x + textElement.width / 2, + textElement.y + textElement.height / 2, + ); + const handleCenter = pointRotateRads( + pointFrom(center[0] + textElement.width / 2 + padding + gap, center[1]), + center, + textElement.angle, + ); + + return { + center: handleCenter, + start: pointRotateRads( + pointFrom(handleCenter[0], handleCenter[1] - length / 2), + handleCenter, + textElement.angle, + ) as GlobalPoint, + end: pointRotateRads( + pointFrom(handleCenter[0], handleCenter[1] + length / 2), + handleCenter, + textElement.angle, + ) as GlobalPoint, + hitboxWidth: TEXT_AUTO_RESIZE_HANDLE_HITBOX_WIDTH / zoomValue, + hitboxHeight: TEXT_AUTO_RESIZE_HANDLE_HITBOX_HEIGHT / zoomValue, + }; +}; + +export const isPointHittingTextAutoResizeHandle = ( + point: Readonly<{ x: number; y: number }>, + textElement: ExcalidrawTextElement, + zoomValue: number, + formFactor: EditorInterface["formFactor"], +) => { + const handle = getTextAutoResizeHandle(textElement, zoomValue, formFactor); + + if (!handle) { + return false; + } + + const unrotatedPoint = pointRotateRads( + pointFrom(point.x, point.y), + handle.center, + -textElement.angle as Radians, + ); + + return ( + Math.abs(unrotatedPoint[0] - handle.center[0]) <= handle.hitboxWidth / 2 && + Math.abs(unrotatedPoint[1] - handle.center[1]) <= handle.hitboxHeight / 2 + ); +}; diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index 63397ea488..cae4e7b93f 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -32,6 +32,7 @@ import type { OrderedExcalidrawElement, ExcalidrawNonSelectionElement, BindMode, + ExcalidrawTextElement, } from "@excalidraw/element/types"; import type { @@ -327,7 +328,7 @@ export interface AppState { /** * set when a new text is created or when an existing text is being edited */ - editingTextElement: NonDeletedExcalidrawElement | null; + editingTextElement: ExcalidrawTextElement | null; activeTool: { /** * indicates a previous tool we should revert back to if we deselect the @@ -876,9 +877,8 @@ export type PointerDownState = Readonly<{ // by default same as PointerDownState.origin. On alt-duplication, reset // to current pointer position at time of duplication. origin: { x: number; y: number }; - // Whether to block drag after lasso selection - // this is meant to be used to block dragging after lasso selection on PCs - // until the next pointer down + // explicit flag for specific scenarios such as: + // - after lasso selection until the next pointer down blockDragging: boolean; }; // We need to have these in the state so that we can unsubscribe them diff --git a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx index 352b1a1529..2a0e5b73c7 100644 --- a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx +++ b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx @@ -1,7 +1,10 @@ import { queryByText } from "@testing-library/react"; import { pointFrom } from "@excalidraw/math"; -import { getOriginalContainerHeightFromCache } from "@excalidraw/element"; +import { + getLineHeightInPx, + getOriginalContainerHeightFromCache, +} from "@excalidraw/element"; import { CODES, @@ -210,6 +213,42 @@ describe("textWysiwyg", () => { expect(h.elements.length).toBe(1); }); + it("should vertically center newly created text on the cursor when clicked with text tool", async () => { + API.setAppState({ + currentItemFontFamily: FONT_FAMILY.Cascadia, + currentItemFontSize: 40, + }); + UI.clickTool("text"); + + mouse.clickAt(120, 80); + + const editor = await getTextEditor(); + const text = h.elements[0] as ExcalidrawTextElement; + const lineHeightPx = getLineHeightInPx(text.fontSize, text.lineHeight); + + expect(editor).not.toBe(null); + expect(text.y + lineHeightPx / 2).toBe(80); + }); + + it("should snap newly created text top-left to the current grid cell when clicked with text tool in grid mode", async () => { + API.setAppState({ + currentItemFontFamily: FONT_FAMILY.Cascadia, + currentItemFontSize: 40, + gridModeEnabled: true, + gridSize: 24, + }); + UI.clickTool("text"); + + mouse.clickAt(113, 86); + + const editor = await getTextEditor(); + const text = h.elements[0] as ExcalidrawTextElement; + + expect(editor).not.toBe(null); + expect(text.x).toBe(96); + expect(text.y).toBe(72); + }); + it("should edit text under cursor when double-clicked with selection tool", async () => { const text = API.createElement({ type: "text", @@ -1572,7 +1611,7 @@ describe("textWysiwyg", () => { version: 2, width: 610, x: 15, - y: 25, + y: 12.5, }), ); expect(h.elements[2] as ExcalidrawTextElement).toEqual( diff --git a/packages/math/src/point.ts b/packages/math/src/point.ts index ed25a713d8..13121d681b 100644 --- a/packages/math/src/point.ts +++ b/packages/math/src/point.ts @@ -123,10 +123,15 @@ export function pointsEqual( * @returns The rotated point */ export function pointRotateRads( - [x, y]: Point, - [cx, cy]: Point, + point: Point, + center: Point, angle: Radians, ): Point { + if (!angle) { + return point; + } + const [x, y] = point; + const [cx, cy] = center; return pointFrom( (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx, (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy, From 987173b52f8a889984c3ff98450f24b9e65c70fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= Date: Sat, 21 Mar 2026 19:26:47 +0100 Subject: [PATCH 32/62] fix: Arrow point index Out-of-Bounds (#10922) * fix: Make OOB not fatal Signed-off-by: Mark Tolmacs * fix: More conservative temp arrow state update Signed-off-by: Mark Tolmacs * chore: Capture condition variables in binding restoration failure Signed-off-by: Mark Tolmacs --------- Signed-off-by: Mark Tolmacs --- packages/element/src/linearElementEditor.ts | 26 +++++++++++++-------- packages/excalidraw/components/App.tsx | 26 +++++++++------------ packages/excalidraw/data/restore.ts | 4 +++- 3 files changed, 30 insertions(+), 26 deletions(-) diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts index e57211abbc..2ef5d53776 100644 --- a/packages/element/src/linearElementEditor.ts +++ b/packages/element/src/linearElementEditor.ts @@ -476,16 +476,22 @@ export class LinearElementEditor { }); } - invariant( - lastClickedPoint > -1 && - selectedPointsIndices.includes(lastClickedPoint) && - element.points[lastClickedPoint], - `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify( - selectedPointsIndices, - )}) points(0..${ - element.points.length - 1 - }) lastClickedPoint(${lastClickedPoint})`, - ); + if ( + lastClickedPoint < 0 || + !selectedPointsIndices.includes(lastClickedPoint) || + !element.points[lastClickedPoint] + ) { + console.error( + `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify( + selectedPointsIndices, + )}) points(0..${ + element.points.length - 1 + }) lastClickedPoint(${lastClickedPoint})`, + ); + + // Fall back to the actual last point as a last resort. + lastClickedPoint = element.points.length - 1; + } // point that's being dragged (out of all selected points) const draggingPoint = element.points[lastClickedPoint]; diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 480dae2f7b..4a79e93baf 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -6995,27 +6995,23 @@ class App extends React.Component { }, { informMutation: false, isDragging: false }, ); + const newLastIdx = multiElement.points.length - 1; this.setState({ selectedLinearElement: { ...selectedLinearElement, - selectedPointsIndices: - selectedLinearElement.selectedPointsIndices?.includes( - multiElement.points.length, - ) - ? [ - ...selectedLinearElement.selectedPointsIndices.filter( - (idx) => - idx !== multiElement.points.length && - idx !== multiElement.points.length - 1, + selectedPointsIndices: selectedLinearElement.selectedPointsIndices + ? [ + ...new Set( + selectedLinearElement.selectedPointsIndices.map((idx) => + Math.min(idx, newLastIdx), ), - multiElement.points.length - 1, - ] - : selectedLinearElement.selectedPointsIndices, - lastCommittedPoint: - multiElement.points[multiElement.points.length - 1], + ), + ] + : selectedLinearElement.selectedPointsIndices, + lastCommittedPoint: multiElement.points[newLastIdx], initialState: { ...selectedLinearElement.initialState, - lastClickedPoint: multiElement.points.length - 1, + lastClickedPoint: newLastIdx, }, }, }); diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts index 4550338edf..1ed068dc1c 100644 --- a/packages/excalidraw/data/restore.ts +++ b/packages/excalidraw/data/restore.ts @@ -251,7 +251,9 @@ const repairBinding = ( }; } - console.error(`could not repair binding for element`); + console.error( + `Could not repair binding for element "${boundElement?.id}" out of (${elementsMap?.size}) elements`, + ); } catch (error) { console.error("Error repairing binding:", error); } From a9ca16eb42c2fd7f06065be7b5238b40e08bf8d3 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Sat, 21 Mar 2026 22:44:27 +0100 Subject: [PATCH 33/62] chore(packages/excalidraw): export Fonts helper class (#11008) --- packages/excalidraw/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx index 7ced19a337..c935f31468 100644 --- a/packages/excalidraw/index.tsx +++ b/packages/excalidraw/index.tsx @@ -382,6 +382,8 @@ export { DiagramToCodePlugin } from "./components/DiagramToCodePlugin/DiagramToC export { getDataURL } from "./data/blob"; export { isElementLink } from "@excalidraw/element"; +export { Fonts } from "./fonts/Fonts"; + export { setCustomTextMetricsProvider } from "@excalidraw/element"; export { CommandPalette } from "./components/CommandPalette/CommandPalette"; From 75789f620d9f61d392027a4d4b317adcedf72056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= Date: Mon, 23 Mar 2026 15:54:44 +0100 Subject: [PATCH 34/62] fix: Other endpoint is not immediately updated on midpoint snap (#10933) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com> --- packages/element/src/linearElementEditor.ts | 4 +- .../tests/__snapshots__/history.test.tsx.snap | 72 ++++++++++--------- yarn.lock | 8 +-- 3 files changed, 43 insertions(+), 41 deletions(-) diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts index 2ef5d53776..9390d56e58 100644 --- a/packages/element/src/linearElementEditor.ts +++ b/packages/element/src/linearElementEditor.ts @@ -2406,7 +2406,7 @@ const pointDraggingUpdates = ( ? nextArrow.points[0] : endBindable ? updateBoundPoint( - element, + nextArrow, "endBinding", nextArrow.endBinding, endBindable, @@ -2437,7 +2437,7 @@ const pointDraggingUpdates = ( ? endLocalPoint : startBindable ? updateBoundPoint( - element, + nextArrow, "startBinding", nextArrow.startBinding, startBindable, diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap index 050a20878b..e3218fd575 100644 --- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap @@ -224,7 +224,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 28, + "version": 22, "width": "94.00000", "x": 0, "y": 0, @@ -350,8 +350,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 27, + "version": 21, "width": "88.00000", + "y": "7.20923", }, "inserted": { "endBinding": { @@ -381,8 +382,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 24, + "version": 20, "width": "88.00000", + "y": "0.01000", }, }, }, @@ -437,7 +439,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], ], "startBinding": null, - "version": 28, + "version": 22, "width": "94.00000", "x": 0, "y": 0, @@ -462,7 +464,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl ], "mode": "orbit", }, - "version": 27, + "version": 21, "width": "88.00000", "x": 6, "y": "7.20923", @@ -16254,7 +16256,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 11, + "version": 10, "width": "88.00000", "x": 6, "y": "0.01000", @@ -16307,7 +16309,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 11, + "version": 10, }, "inserted": { "endBinding": { @@ -16327,7 +16329,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 9, + "version": 8, }, }, }, @@ -16636,7 +16638,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00120", + "height": 0, "index": "a3", "isDeleted": false, "link": null, @@ -16649,7 +16651,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], [ "88.00000", - "0.00120", + 0, ], ], "roughness": 1, @@ -16669,14 +16671,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 8, + "version": 7, "width": "88.00000", "x": 6, - "y": "0.00880", + "y": "0.01000", }, "inserted": { "isDeleted": true, - "version": 7, + "version": 6, }, }, }, @@ -17002,7 +17004,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 11, + "version": 10, "width": "88.00000", "x": 6, "y": "0.01000", @@ -17307,14 +17309,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 11, + "version": 10, "width": "88.00000", "x": 6, "y": "0.01000", }, "inserted": { "isDeleted": true, - "version": 9, + "version": 8, }, }, }, @@ -17648,7 +17650,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 11, + "version": 10, "width": "88.00000", "x": 6, "y": "0.01000", @@ -17953,14 +17955,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 11, + "version": 10, "width": "88.00000", "x": 6, "y": "0.01000", }, "inserted": { "isDeleted": true, - "version": 9, + "version": 8, }, }, }, @@ -18292,7 +18294,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 11, + "version": 10, "width": "88.00000", "x": 6, "y": "0.01000", @@ -18361,7 +18363,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 11, + "version": 10, }, "inserted": { "endBinding": { @@ -18373,7 +18375,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "mode": "orbit", }, "startBinding": null, - "version": 9, + "version": 8, }, }, "id2": { @@ -18650,7 +18652,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00120", + "height": 0, "index": "a3", "isDeleted": false, "link": null, @@ -18663,7 +18665,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], [ "88.00000", - "0.00120", + 0, ], ], "roughness": 1, @@ -18683,14 +18685,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 8, + "version": 7, "width": "88.00000", "x": 6, - "y": "0.00880", + "y": "0.01000", }, "inserted": { "isDeleted": true, - "version": 7, + "version": 6, }, }, }, @@ -19044,7 +19046,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeWidth": 2, "type": "arrow", "updated": 1, - "version": 12, + "version": 11, "width": "88.00000", "x": 6, "y": "0.01000", @@ -19124,12 +19126,12 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], "mode": "orbit", }, - "version": 12, + "version": 11, }, "inserted": { "endBinding": null, "startBinding": null, - "version": 10, + "version": 9, }, }, }, @@ -19398,7 +19400,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": "0.00120", + "height": 0, "index": "a3", "isDeleted": false, "link": null, @@ -19411,7 +19413,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding ], [ "88.00000", - "0.00120", + 0, ], ], "roughness": 1, @@ -19431,14 +19433,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding "strokeStyle": "solid", "strokeWidth": 2, "type": "arrow", - "version": 8, + "version": 7, "width": "88.00000", "x": 6, - "y": "0.00880", + "y": "0.01000", }, "inserted": { "isDeleted": true, - "version": 7, + "version": 6, }, }, }, diff --git a/yarn.lock b/yarn.lock index 2bc70c4afd..3b2d6cddc9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1531,10 +1531,10 @@ resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb" integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg== -"@excalidraw/mermaid-to-excalidraw@2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.1.0.tgz#a5b9cf87c3185558cda7f9687d87b9937f452358" - integrity sha512-RMd+c2b7WzzUjhERMpKwp8PhF2/XlHDjr/zK+Gxfp8K9sVlafPYJ5OEa/GkN6edi2rBUXRfW+41WdO6L56b6Kw== +"@excalidraw/mermaid-to-excalidraw@2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.1.1.tgz#659c934a607dd2cf57f2a69282588ee2b0722959" + integrity sha512-jU+frqcxazsY+t5yOBf2mgrQy+WUrbrzA36if3SQB/Vwaf2qOJjnWxucNafgZZk/3+9xGmRotUeOviSOJG+wYA== dependencies: "@excalidraw/markdown-to-text" "0.1.2" "@mermaid-js/parser" "^0.6.3" From d6f0f34fe91a7fab25106f2b31b074c132815d36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= Date: Mon, 23 Mar 2026 15:54:59 +0100 Subject: [PATCH 35/62] fix: Rotated rounded arrow center point (#10962) --- packages/element/src/collision.ts | 13 +++++++++-- packages/element/src/distance.ts | 8 +++++-- packages/element/src/linearElementEditor.ts | 15 ++++++++++-- packages/element/src/shape.ts | 23 ++++++------------- packages/element/src/textElement.ts | 1 + packages/element/src/utils.ts | 6 ++--- .../excalidraw/renderer/interactiveScene.ts | 1 + 7 files changed, 41 insertions(+), 26 deletions(-) diff --git a/packages/element/src/collision.ts b/packages/element/src/collision.ts index 46d2dbd46a..b17d563dbe 100644 --- a/packages/element/src/collision.ts +++ b/packages/element/src/collision.ts @@ -465,7 +465,12 @@ export const intersectElementWithLineSegment = ( case "line": case "freedraw": case "arrow": - return intersectLinearOrFreeDrawWithLineSegment(element, line, onlyFirst); + return intersectLinearOrFreeDrawWithLineSegment( + element, + line, + elementsMap, + onlyFirst, + ); } }; @@ -532,11 +537,15 @@ const lineIntersections = ( const intersectLinearOrFreeDrawWithLineSegment = ( element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement, segment: LineSegment, + elementsMap: ElementsMap, onlyFirst = false, ): GlobalPoint[] => { // NOTE: This is the only one which return the decomposed elements // rotated! This is due to taking advantage of roughjs definitions. - const [lines, curves] = deconstructLinearOrFreeDrawElement(element); + const [lines, curves] = deconstructLinearOrFreeDrawElement( + element, + elementsMap, + ); const intersections: GlobalPoint[] = []; for (const l of lines) { diff --git a/packages/element/src/distance.ts b/packages/element/src/distance.ts index 4766ac9eef..c94652a1aa 100644 --- a/packages/element/src/distance.ts +++ b/packages/element/src/distance.ts @@ -48,7 +48,7 @@ export const distanceToElement = ( case "line": case "arrow": case "freedraw": - return distanceToLinearOrFreeDraElement(element, p); + return distanceToLinearOrFreeDraElement(element, elementsMap, p); } }; @@ -133,9 +133,13 @@ const distanceToEllipseElement = ( const distanceToLinearOrFreeDraElement = ( element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement, + elementsMap: ElementsMap, p: GlobalPoint, ) => { - const [lines, curves] = deconstructLinearOrFreeDrawElement(element); + const [lines, curves] = deconstructLinearOrFreeDrawElement( + element, + elementsMap, + ); return Math.min( ...lines.map((s) => distanceToLineSegment(p, s)), ...curves.map((a) => curvePointDistance(a, p)), diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts index 9390d56e58..8af8ecd858 100644 --- a/packages/element/src/linearElementEditor.ts +++ b/packages/element/src/linearElementEditor.ts @@ -800,6 +800,7 @@ export class LinearElementEditor { element.points[index + 1], index, appState.zoom, + elementsMap, ) ) { midpoints.push(null); @@ -809,6 +810,7 @@ export class LinearElementEditor { const segmentMidPoint = LinearElementEditor.getSegmentMidPoint( element, index + 1, + elementsMap, ); midpoints.push(segmentMidPoint); index++; @@ -896,6 +898,7 @@ export class LinearElementEditor { endPoint: P, index: number, zoom: Zoom, + elementsMap: ElementsMap, ) { if (isElbowArrow(element)) { if (index >= 0 && index < element.points.length) { @@ -910,7 +913,10 @@ export class LinearElementEditor { let distance = pointDistance(startPoint, endPoint); if (element.points.length > 2 && element.roundness) { - const [lines, curves] = deconstructLinearOrFreeDrawElement(element); + const [lines, curves] = deconstructLinearOrFreeDrawElement( + element, + elementsMap, + ); invariant( lines.length === 0 && curves.length > 0, @@ -930,6 +936,7 @@ export class LinearElementEditor { static getSegmentMidPoint( element: NonDeleted, index: number, + elementsMap: ElementsMap, ): GlobalPoint { if (isElbowArrow(element)) { invariant( @@ -942,7 +949,10 @@ export class LinearElementEditor { return pointFrom(element.x + p[0], element.y + p[1]); } - const [lines, curves] = deconstructLinearOrFreeDrawElement(element); + const [lines, curves] = deconstructLinearOrFreeDrawElement( + element, + elementsMap, + ); invariant( (lines.length === 0 && curves.length > 0) || @@ -1857,6 +1867,7 @@ export class LinearElementEditor { const midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint( element, index + 1, + elementsMap, ); x = midSegmentMidpoint[0] - boundTextElement.width / 2; diff --git a/packages/element/src/shape.ts b/packages/element/src/shape.ts index 9bef1329af..158ace7519 100644 --- a/packages/element/src/shape.ts +++ b/packages/element/src/shape.ts @@ -57,8 +57,8 @@ import { headingForPointIsHorizontal } from "./heading"; import { canChangeRoundness } from "./comparisons"; import { + elementCenterPoint, getArrowheadPoints, - getCenterForBounds, getDiamondPoints, getElementAbsoluteCoords, } from "./bounds"; @@ -583,7 +583,11 @@ const getArrowheadShapes = ( export const generateLinearCollisionShape = ( element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement, -) => { + elementsMap: ElementsMap, +): { + op: string; + data: number[]; +}[] => { const generator = new RoughGenerator(); const options: Options = { seed: element.seed, @@ -592,20 +596,7 @@ export const generateLinearCollisionShape = ( roughness: 0, preserveVertices: true, }; - const center = getCenterForBounds( - // Need a non-rotated center point - element.points.reduce( - (acc, point) => { - return [ - Math.min(element.x + point[0], acc[0]), - Math.min(element.y + point[1], acc[1]), - Math.max(element.x + point[0], acc[2]), - Math.max(element.y + point[1], acc[3]), - ]; - }, - [Infinity, Infinity, -Infinity, -Infinity], - ), - ); + const center = elementCenterPoint(element, elementsMap); switch (element.type) { case "line": diff --git a/packages/element/src/textElement.ts b/packages/element/src/textElement.ts index b891fdf2e9..9ff53d035c 100644 --- a/packages/element/src/textElement.ts +++ b/packages/element/src/textElement.ts @@ -347,6 +347,7 @@ export const getContainerCenter = ( midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint( container, index + 1, + elementsMap, ); } return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] }; diff --git a/packages/element/src/utils.ts b/packages/element/src/utils.ts index 96e09bcbf1..819cad562f 100644 --- a/packages/element/src/utils.ts +++ b/packages/element/src/utils.ts @@ -124,6 +124,7 @@ const setElementShapesCacheEntry = ( */ export function deconstructLinearOrFreeDrawElement( element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement, + elementsMap: ElementsMap, ): [LineSegment[], Curve[]] { const cachedShape = getElementShapesCacheEntry(element, 0); @@ -131,10 +132,7 @@ export function deconstructLinearOrFreeDrawElement( return cachedShape; } - const ops = generateLinearCollisionShape(element) as { - op: string; - data: number[]; - }[]; + const ops = generateLinearCollisionShape(element, elementsMap); const lines = []; const curves = []; diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts index 7d31bf9a32..30cadb0ef7 100644 --- a/packages/excalidraw/renderer/interactiveScene.ts +++ b/packages/excalidraw/renderer/interactiveScene.ts @@ -1156,6 +1156,7 @@ const renderLinearPointHandles = ( points[idx], idx, appState.zoom, + elementsMap, ) ) { renderSingleLinearPoint( From 1c292e4936795b8e2ac0b46bbccedf612e060a2b Mon Sep 17 00:00:00 2001 From: Kundan Date: Tue, 24 Mar 2026 23:31:08 +0530 Subject: [PATCH 36/62] fix(math): correctly validate second point in isLineSegment (#11007) Co-authored-by: Mark Tolmacs --- packages/math/src/segment.ts | 2 +- packages/math/tests/segment.test.ts | 26 +++++++++++++++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/math/src/segment.ts b/packages/math/src/segment.ts index ae282bfee5..7523ef3f2f 100644 --- a/packages/math/src/segment.ts +++ b/packages/math/src/segment.ts @@ -40,7 +40,7 @@ export const isLineSegment = ( Array.isArray(segment) && segment.length === 2 && isPoint(segment[0]) && - isPoint(segment[0]); + isPoint(segment[1]); /** * Return the coordinates resulting from rotating the given line about an origin by an angle in radians diff --git a/packages/math/tests/segment.test.ts b/packages/math/tests/segment.test.ts index 6b29bba591..a7091521df 100644 --- a/packages/math/tests/segment.test.ts +++ b/packages/math/tests/segment.test.ts @@ -1,5 +1,9 @@ import { pointFrom } from "../src/point"; -import { lineSegment, lineSegmentIntersectionPoints } from "../src/segment"; +import { + lineSegment, + lineSegmentIntersectionPoints, + isLineSegment, +} from "../src/segment"; describe("line-segment intersections", () => { it("should correctly detect intersection", () => { @@ -19,3 +23,23 @@ describe("line-segment intersections", () => { ).toEqual(null); }); }); +describe("isLineSegment validation", () => { + it("should return true for a valid segment", () => { + expect( + isLineSegment([ + [0, 0], + [1, 1], + ]), + ).toBe(true); + }); + + it("should return false if second element is not a point", () => { + const invalidSegment = [[0, 0], "not-a-point"] as any; + + expect(isLineSegment(invalidSegment)).toBe(false); + }); + + it("should return false for wrong length", () => { + expect(isLineSegment([[0, 0]])).toBe(false); + }); +}); From c1082923eedf62e2df7821fe8c772d839c46438d Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Tue, 24 Mar 2026 20:20:28 +0100 Subject: [PATCH 37/62] feat(editor): support mermaid staate diagrams (#11031) --- packages/excalidraw/locales/en.json | 2 +- packages/excalidraw/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json index b0a8761de4..42e87bdf82 100644 --- a/packages/excalidraw/locales/en.json +++ b/packages/excalidraw/locales/en.json @@ -661,7 +661,7 @@ "placeholder": { "title": "Let's design your diagram", "description": "Describe the diagram you want to create, and we'll generate it for you.", - "hint": "At the moment we know Flowchart, Sequence, Class, and Entity Relationship diagrams." + "hint": "At the moment we know Flowchart, Sequence, Class, State, and Entity Relationship diagrams." }, "preview": "Preview", "insert": "Insert", diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json index 3d8fe1daeb..1d01b82bd8 100644 --- a/packages/excalidraw/package.json +++ b/packages/excalidraw/package.json @@ -88,7 +88,7 @@ "@excalidraw/element": "0.18.0", "@excalidraw/laser-pointer": "1.3.1", "@excalidraw/math": "0.18.0", - "@excalidraw/mermaid-to-excalidraw": "2.1.1", + "@excalidraw/mermaid-to-excalidraw": "2.2.2", "@excalidraw/random-username": "1.1.0", "browser-fs-access": "0.38.0", "canvas-roundrect-polyfill": "0.0.1", diff --git a/yarn.lock b/yarn.lock index 3b2d6cddc9..dd87b52426 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1531,10 +1531,10 @@ resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb" integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg== -"@excalidraw/mermaid-to-excalidraw@2.1.1": - version "2.1.1" - resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.1.1.tgz#659c934a607dd2cf57f2a69282588ee2b0722959" - integrity sha512-jU+frqcxazsY+t5yOBf2mgrQy+WUrbrzA36if3SQB/Vwaf2qOJjnWxucNafgZZk/3+9xGmRotUeOviSOJG+wYA== +"@excalidraw/mermaid-to-excalidraw@2.2.2": + version "2.2.2" + resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.2.2.tgz#ee6b597a0d95b9a76f7ae41ce0e3733a9b96e4a0" + integrity sha512-5VKQq5CdRocC82vOIUpQ5ufJOVV9FpBTdHGA+ULqazeIVV+cr299877omQCibsdS3Bpitz2fsnTwnIXEmLVDSg== dependencies: "@excalidraw/markdown-to-text" "0.1.2" "@mermaid-js/parser" "^0.6.3" From c09e170bdd50f9e08a82deba2c037043b8fce9e0 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Wed, 25 Mar 2026 17:14:24 +0100 Subject: [PATCH 38/62] feat(editor): deselect on esc (#11035) Co-authored-by: Jawahar Co-authored-by: Andrew Aquino --- packages/excalidraw/actions/actionDeselect.ts | 145 ++++++ .../excalidraw/actions/actionFinalize.tsx | 4 +- packages/excalidraw/actions/index.ts | 1 + packages/excalidraw/actions/types.ts | 1 + packages/excalidraw/components/App.tsx | 12 +- .../tests/__snapshots__/history.test.tsx.snap | 483 ++++++++++++++++++ packages/excalidraw/tests/history.test.tsx | 76 +++ packages/excalidraw/tests/selection.test.tsx | 65 ++- .../excalidraw/wysiwyg/textWysiwyg.test.tsx | 83 +++ 9 files changed, 856 insertions(+), 14 deletions(-) create mode 100644 packages/excalidraw/actions/actionDeselect.ts diff --git a/packages/excalidraw/actions/actionDeselect.ts b/packages/excalidraw/actions/actionDeselect.ts new file mode 100644 index 0000000000..2b48eb825e --- /dev/null +++ b/packages/excalidraw/actions/actionDeselect.ts @@ -0,0 +1,145 @@ +import { + getElementsInGroup, + isSomeElementSelected, + makeNextSelectedElementIds, + selectGroupsForSelectedElements, +} from "@excalidraw/element"; +import { CaptureUpdateAction } from "@excalidraw/element"; +import { KEYS, isWritableElement, updateActiveTool } from "@excalidraw/common"; + +import type { GroupId } from "@excalidraw/element/types"; + +import { register } from "./register"; + +import type { AppClassProperties, AppState } from "../types"; + +const getNextActiveTool = ( + appState: Readonly, + app: AppClassProperties, +) => { + if (appState.activeTool.type === "eraser") { + return updateActiveTool(appState, { + ...(appState.activeTool.lastActiveTool || { + type: app.state.preferredSelectionTool.type, + }), + lastActiveToolBeforeEraser: null, + }); + } + + return updateActiveTool(appState, { + type: app.state.preferredSelectionTool.type, + }); +}; + +const getParentEditingGroupId = ( + appState: Readonly, + app: AppClassProperties, + selectedElementIds: AppState["selectedElementIds"], +): GroupId | null => { + if (!appState.editingGroupId) { + return null; + } + + const nonDeletedElements = app.scene.getNonDeletedElements(); + const selectedElements = app.scene.getSelectedElements({ + selectedElementIds, + elements: nonDeletedElements, + }); + const candidateElements = selectedElements.length + ? selectedElements + : getElementsInGroup(nonDeletedElements, appState.editingGroupId); + + for (const element of candidateElements) { + const editingGroupIndex = element.groupIds.indexOf(appState.editingGroupId); + if (editingGroupIndex !== -1 && element.groupIds[editingGroupIndex + 1]) { + return element.groupIds[editingGroupIndex + 1] as GroupId; + } + } + + return null; +}; + +export const actionDeselect = register({ + name: "deselect", + label: "", + trackEvent: false, + perform: (_elements, appState, _, app) => { + const activeTool = getNextActiveTool(appState, app); + + if (appState.editingGroupId) { + const nonDeletedElements = app.scene.getNonDeletedElements(); + const selectedElementIds = + Object.keys(appState.selectedElementIds).length > 0 + ? appState.selectedElementIds + : getElementsInGroup( + nonDeletedElements, + appState.editingGroupId, + ).reduce((acc, element) => { + acc[element.id] = true; + return acc; + }, {} as Record); + + return { + appState: { + ...appState, + ...selectGroupsForSelectedElements( + { + editingGroupId: getParentEditingGroupId( + appState, + app, + selectedElementIds, + ), + selectedElementIds, + }, + nonDeletedElements, + appState, + app, + ), + activeEmbeddable: null, + activeTool, + selectedLinearElement: null, + selectionElement: null, + showHyperlinkPopup: false, + suggestedBinding: null, + }, + captureUpdate: CaptureUpdateAction.IMMEDIATELY, + }; + } + + return { + appState: { + ...appState, + activeEmbeddable: null, + activeTool, + editingGroupId: null, + selectedElementIds: makeNextSelectedElementIds({}, appState), + selectedGroupIds: {}, + selectedLinearElement: null, + selectionElement: null, + showHyperlinkPopup: false, + suggestedBinding: null, + }, + captureUpdate: CaptureUpdateAction.IMMEDIATELY, + }; + }, + keyTest: (event, appState, _, app) => { + if (event.key !== KEYS.ESCAPE) { + return false; + } + + if (isWritableElement(event.target)) { + return false; + } + + return ( + !appState.newElement && + appState.multiElement === null && + !appState.selectedLinearElement?.isEditing && + (appState.activeEmbeddable !== null || + appState.activeTool.type !== app.state.preferredSelectionTool.type || + !!appState.editingGroupId || + !!appState.selectedLinearElement || + isSomeElementSelected(app.scene.getNonDeletedElements(), appState)) + ); + }, +}); diff --git a/packages/excalidraw/actions/actionFinalize.tsx b/packages/excalidraw/actions/actionFinalize.tsx index 9e529621a7..37332c4124 100644 --- a/packages/excalidraw/actions/actionFinalize.tsx +++ b/packages/excalidraw/actions/actionFinalize.tsx @@ -348,9 +348,7 @@ export const actionFinalize = register({ }; }, keyTest: (event, appState) => - (event.key === KEYS.ESCAPE && - (appState.selectedLinearElement?.isEditing || - (!appState.newElement && appState.multiElement === null))) || + (event.key === KEYS.ESCAPE && appState.selectedLinearElement?.isEditing) || ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) && appState.multiElement !== null), PanelComponent: ({ appState, updateData, data }) => ( diff --git a/packages/excalidraw/actions/index.ts b/packages/excalidraw/actions/index.ts index cc9ca1789c..d630c6ecaa 100644 --- a/packages/excalidraw/actions/index.ts +++ b/packages/excalidraw/actions/index.ts @@ -34,6 +34,7 @@ export { export { actionSetEmbeddableAsActiveTool } from "./actionEmbeddable"; export { actionFinalize } from "./actionFinalize"; +export { actionDeselect } from "./actionDeselect"; export { actionChangeProjectName, diff --git a/packages/excalidraw/actions/types.ts b/packages/excalidraw/actions/types.ts index ae80e4107c..02c67d34f3 100644 --- a/packages/excalidraw/actions/types.ts +++ b/packages/excalidraw/actions/types.ts @@ -114,6 +114,7 @@ export type ActionName = | "distributeVertically" | "flipHorizontal" | "flipVertical" + | "deselect" | "viewMode" | "exportWithDarkMode" | "toggleTheme" diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 4a79e93baf..5561594cb0 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -5725,13 +5725,13 @@ class App extends React.Component { const isDeleted = !nextOriginalText.trim(); updateElement(nextOriginalText, isDeleted); - // select the created text element only if submitting via keyboard - // (when submitting via click it should act as signal to deselect) - if (!isDeleted && viaKeyboard) { - const elementIdToSelect = element.containerId - ? element.containerId - : element.id; + // keyboard-submit keeps focus on the edited object. For bound text, keep + // the container selected even if the text becomes empty and is deleted. + const elementIdToSelect = viaKeyboard + ? element.containerId || (!isDeleted ? element.id : null) + : null; + if (elementIdToSelect) { // needed to ensure state is updated before "finalize" action // that's invoked on keyboard-submit as well // TODO either move this into finalize as well, or handle all state diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap index e3218fd575..3a400a0128 100644 --- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap @@ -11222,6 +11222,489 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end of test] undo stack 1`] = `[]`; +exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] appState 1`] = ` +{ + "activeEmbeddable": null, + "activeLockedId": null, + "activeTool": { + "customType": null, + "fromSelection": false, + "lastActiveTool": null, + "locked": false, + "type": "selection", + }, + "bindMode": "orbit", + "bindingPreference": "enabled", + "collaborators": Map {}, + "contextMenu": null, + "croppingElementId": null, + "currentHoveredFontFamily": null, + "currentItemArrowType": "round", + "currentItemBackgroundColor": "transparent", + "currentItemEndArrowhead": "arrow", + "currentItemFillStyle": "solid", + "currentItemFontFamily": 5, + "currentItemFontSize": 20, + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemRoundness": "sharp", + "currentItemStartArrowhead": null, + "currentItemStrokeColor": "#1e1e1e", + "currentItemStrokeStyle": "solid", + "currentItemStrokeWidth": 2, + "currentItemTextAlign": "left", + "cursorButton": "up", + "defaultSidebarDockedPreference": false, + "editingFrame": null, + "editingGroupId": null, + "editingTextElement": null, + "elementsToHighlight": null, + "errorMessage": null, + "exportBackground": true, + "exportEmbedScene": false, + "exportScale": 1, + "exportWithDarkMode": false, + "fileHandle": null, + "followedBy": Set {}, + "frameRendering": { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, + "frameToHighlight": null, + "gridModeEnabled": false, + "gridSize": 20, + "gridStep": 5, + "height": 0, + "hoveredElementIds": {}, + "isBindingEnabled": true, + "isCropping": false, + "isLoading": false, + "isMidpointSnappingEnabled": true, + "isResizing": false, + "isRotating": false, + "lastPointerDownWith": "mouse", + "lockedMultiSelections": {}, + "multiElement": null, + "newElement": null, + "objectsSnapModeEnabled": false, + "offsetLeft": 0, + "offsetTop": 0, + "openDialog": null, + "openMenu": null, + "openPopup": null, + "openSidebar": null, + "originSnapOffset": null, + "penDetected": false, + "penMode": false, + "preferredSelectionTool": { + "initialized": true, + "type": "selection", + }, + "previousSelectedElementIds": {}, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "searchMatches": null, + "selectedElementIds": {}, + "selectedElementsAreBeingDragged": false, + "selectedGroupIds": {}, + "selectionElement": null, + "shouldCacheIgnoreZoom": false, + "showHyperlinkPopup": false, + "showWelcomeScreen": true, + "snapLines": [], + "startBoundElement": null, + "stats": { + "open": false, + "panels": 3, + }, + "suggestedBinding": null, + "theme": "light", + "toast": null, + "userToFollow": null, + "viewBackgroundColor": "#ffffff", + "viewModeEnabled": false, + "width": 0, + "zenModeEnabled": false, + "zoom": { + "value": 1, + }, +} +`; + +exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 0 1`] = ` +{ + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "inner", + "outer", + ], + "height": 100, + "id": "id0", + "index": "a0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "updated": 1, + "version": 2, + "width": 100, + "x": 0, + "y": 0, +} +`; + +exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 1 1`] = ` +{ + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "outer", + ], + "height": 100, + "id": "id1", + "index": "a1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "updated": 1, + "version": 2, + "width": 100, + "x": 100, + "y": 100, +} +`; + +exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 2 1`] = ` +{ + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "inner", + "outer", + ], + "height": 100, + "id": "id2", + "index": "a2", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "updated": 1, + "version": 2, + "width": 100, + "x": 200, + "y": 200, +} +`; + +exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] number of elements 1`] = `3`; + +exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] number of renders 1`] = `16`; + +exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] redo stack 1`] = `[]`; + +exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] undo stack 1`] = ` +[ + { + "appState": AppStateDelta { + "delta": Delta { + "deleted": { + "selectedElementIds": { + "id0": true, + "id1": true, + "id2": true, + }, + "selectedGroupIds": { + "outer": true, + }, + }, + "inserted": { + "selectedElementIds": {}, + "selectedGroupIds": {}, + }, + }, + }, + "elements": { + "added": {}, + "removed": { + "id0": { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "inner", + "outer", + ], + "height": 100, + "index": "a0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "version": 2, + "width": 100, + "x": 0, + "y": 0, + }, + "inserted": { + "isDeleted": true, + "version": 1, + }, + }, + "id1": { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "outer", + ], + "height": 100, + "index": "a1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "version": 2, + "width": 100, + "x": 100, + "y": 100, + }, + "inserted": { + "isDeleted": true, + "version": 1, + }, + }, + "id2": { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "inner", + "outer", + ], + "height": 100, + "index": "a2", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "version": 2, + "width": 100, + "x": 200, + "y": 200, + }, + "inserted": { + "isDeleted": true, + "version": 1, + }, + }, + }, + "updated": {}, + }, + "id": "id5", + }, + { + "appState": AppStateDelta { + "delta": Delta { + "deleted": { + "editingGroupId": "outer", + "selectedElementIds": {}, + "selectedGroupIds": { + "inner": true, + }, + }, + "inserted": { + "editingGroupId": null, + "selectedElementIds": { + "id1": true, + }, + "selectedGroupIds": { + "outer": true, + }, + }, + }, + }, + "elements": { + "added": {}, + "removed": {}, + "updated": {}, + }, + "id": "id7", + }, + { + "appState": AppStateDelta { + "delta": Delta { + "deleted": { + "editingGroupId": "inner", + "selectedElementIds": {}, + "selectedGroupIds": {}, + }, + "inserted": { + "editingGroupId": "outer", + "selectedElementIds": { + "id2": true, + }, + "selectedGroupIds": { + "inner": true, + }, + }, + }, + }, + "elements": { + "added": {}, + "removed": {}, + "updated": {}, + }, + "id": "id9", + }, + { + "appState": AppStateDelta { + "delta": Delta { + "deleted": { + "editingGroupId": "outer", + "selectedElementIds": { + "id2": true, + }, + "selectedGroupIds": { + "inner": true, + }, + }, + "inserted": { + "editingGroupId": "inner", + "selectedElementIds": {}, + "selectedGroupIds": {}, + }, + }, + }, + "elements": { + "added": {}, + "removed": {}, + "updated": {}, + }, + "id": "id19", + }, + { + "appState": AppStateDelta { + "delta": Delta { + "deleted": { + "editingGroupId": null, + "selectedElementIds": { + "id1": true, + }, + "selectedGroupIds": { + "outer": true, + }, + }, + "inserted": { + "editingGroupId": "outer", + "selectedElementIds": {}, + "selectedGroupIds": { + "inner": true, + }, + }, + }, + }, + "elements": { + "added": {}, + "removed": {}, + "updated": {}, + }, + "id": "id20", + }, + { + "appState": AppStateDelta { + "delta": Delta { + "deleted": { + "selectedElementIds": {}, + "selectedGroupIds": {}, + }, + "inserted": { + "selectedElementIds": { + "id0": true, + "id1": true, + "id2": true, + }, + "selectedGroupIds": { + "outer": true, + }, + }, + }, + }, + "elements": { + "added": {}, + "removed": {}, + "updated": {}, + }, + "id": "id21", + }, +] +`; + exports[`history > multiplayer undo/redo > should update history entries after remote changes on the same properties > [end of test] appState 1`] = ` { "activeEmbeddable": null, diff --git a/packages/excalidraw/tests/history.test.tsx b/packages/excalidraw/tests/history.test.tsx index 96e948958e..f6706a0f99 100644 --- a/packages/excalidraw/tests/history.test.tsx +++ b/packages/excalidraw/tests/history.test.tsx @@ -2971,6 +2971,82 @@ describe("history", () => { expect(h.state.editingGroupId).toBeNull(); }); + // TODO mark with "noncritical" tag once we migrate to vitest 4 + it.skip("should support undo and redo when escape unwinds nested group editing", async () => { + const rectA = API.createElement({ + type: "rectangle", + groupIds: ["inner", "outer"], + x: 0, + }); + const rectB = API.createElement({ + type: "rectangle", + groupIds: ["outer"], + x: 100, + }); + const rectC = API.createElement({ + type: "rectangle", + groupIds: ["inner", "outer"], + x: 200, + }); + + API.setElements([rectA, rectB, rectC]); + mouse.select(rectA); + mouse.doubleClickOn(rectA); + mouse.doubleClickOn(rectA); + + assertSelectedElements([rectA]); + expect(h.state.editingGroupId).toBe("inner"); + expect(API.getUndoStack().length).toBe(3); + expect(API.getRedoStack().length).toBe(0); + + Keyboard.keyPress(KEYS.ESCAPE); + assertSelectedElements([rectA, rectC]); + expect(h.state.editingGroupId).toBe("outer"); + expect(API.getUndoStack().length).toBe(4); + expect(API.getRedoStack().length).toBe(0); + + Keyboard.keyPress(KEYS.ESCAPE); + assertSelectedElements([rectA, rectB, rectC]); + expect(h.state.editingGroupId).toBeNull(); + expect(h.state.selectedGroupIds).toEqual({ outer: true }); + expect(API.getUndoStack().length).toBe(5); + expect(API.getRedoStack().length).toBe(0); + + Keyboard.keyPress(KEYS.ESCAPE); + expect(API.getSelectedElements()).toEqual([]); + expect(h.state.editingGroupId).toBeNull(); + expect(h.state.selectedGroupIds).toEqual({}); + expect(API.getUndoStack().length).toBe(6); + expect(API.getRedoStack().length).toBe(0); + + Keyboard.undo(); + assertSelectedElements([rectA, rectB, rectC]); + expect(h.state.editingGroupId).toBeNull(); + expect(h.state.selectedGroupIds).toEqual({ outer: true }); + + Keyboard.undo(); + assertSelectedElements([rectA, rectC]); + expect(h.state.editingGroupId).toBe("outer"); + + Keyboard.undo(); + assertSelectedElements([rectA]); + expect(h.state.editingGroupId).toBe("inner"); + + Keyboard.redo(); + assertSelectedElements([rectA, rectC]); + expect(h.state.editingGroupId).toBe("outer"); + + Keyboard.redo(); + assertSelectedElements([rectA, rectB, rectC]); + expect(h.state.editingGroupId).toBeNull(); + expect(h.state.selectedGroupIds).toEqual({ outer: true }); + + Keyboard.redo(); + expect(API.getSelectedElements()).toEqual([]); + expect(h.state.editingGroupId).toBeNull(); + expect(h.state.selectedGroupIds).toEqual({}); + }); + it("should iterate through the history when selected or editing linear element was remotely deleted", async () => { // create three point arrow UI.clickTool("arrow"); diff --git a/packages/excalidraw/tests/selection.test.tsx b/packages/excalidraw/tests/selection.test.tsx index 93135fb2e1..64204f1a00 100644 --- a/packages/excalidraw/tests/selection.test.tsx +++ b/packages/excalidraw/tests/selection.test.tsx @@ -326,7 +326,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(8); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -359,7 +359,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(8); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -392,7 +392,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(8); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -438,7 +438,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(10); - expect(renderStaticScene).toHaveBeenCalledTimes(8); + expect(renderStaticScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -483,7 +483,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(10); - expect(renderStaticScene).toHaveBeenCalledTimes(8); + expect(renderStaticScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -558,3 +558,58 @@ describe("selectedElementIds stability", () => { expect(h.state.selectedElementIds).toBe(selectedElementIds_2); }); }); + +describe("deselecting", () => { + beforeEach(async () => { + await render(); + }); + + it("esc unwinds nested group editing before deselecting", () => { + const rectA = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + groupIds: ["inner", "outer"], + }); + const rectB = API.createElement({ + type: "rectangle", + x: 100, + y: 0, + groupIds: ["outer"], + }); + const rectC = API.createElement({ + type: "rectangle", + x: 200, + y: 0, + groupIds: ["inner", "outer"], + }); + + API.setElements([rectA, rectB, rectC]); + + mouse.select(rectA); + assertSelectedElements(rectA, rectB, rectC); + expect(h.state.editingGroupId).toBeNull(); + + mouse.doubleClickOn(rectA); + assertSelectedElements(rectA, rectC); + expect(h.state.editingGroupId).toBe("outer"); + + mouse.doubleClickOn(rectA); + assertSelectedElements(rectA); + expect(h.state.editingGroupId).toBe("inner"); + + Keyboard.keyPress(KEYS.ESCAPE); + assertSelectedElements(rectA, rectC); + expect(h.state.editingGroupId).toBe("outer"); + + Keyboard.keyPress(KEYS.ESCAPE); + assertSelectedElements(rectA, rectB, rectC); + expect(h.state.editingGroupId).toBeNull(); + expect(h.state.selectedGroupIds).toEqual({ outer: true }); + + Keyboard.keyPress(KEYS.ESCAPE); + expect(API.getSelectedElements()).toEqual([]); + expect(h.state.editingGroupId).toBeNull(); + expect(h.state.selectedGroupIds).toEqual({}); + }); +}); diff --git a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx index 2a0e5b73c7..a092576de0 100644 --- a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx +++ b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx @@ -45,6 +45,28 @@ unmountComponent(); const tab = " "; const mouse = new Pointer("mouse"); +const exitTextEditorAndAssertSelection = async ({ + editor, + selectedIds, + nextText, +}: { + editor: HTMLTextAreaElement; + selectedIds: string[]; + nextText?: string; +}) => { + if (nextText !== undefined) { + updateTextEditor(editor, nextText); + } + + Keyboard.exitTextEditor(editor); + + expect(await getTextEditor({ waitForEditor: false })).toBe(null); + expect(window.h.state.editingTextElement).toBeNull(); + expect(API.getSelectedElements().map((element) => element.id)).toEqual( + selectedIds, + ); +}; + describe("textWysiwyg", () => { describe("start text editing", () => { const { h } = window; @@ -271,6 +293,33 @@ describe("textWysiwyg", () => { expect(h.elements.length).toBe(1); }); + it("should reselect text after exiting wysiwyg with escape", async () => { + const text = API.createElement({ + type: "text", + text: "ola", + x: 60, + y: 0, + width: 100, + height: 100, + }); + + API.setElements([text]); + API.setSelectedElements([text]); + UI.clickTool("selection"); + + Keyboard.keyPress(KEYS.ENTER); + + const editor = await getTextEditor(); + + expect(editor).not.toBe(null); + expect(h.state.editingTextElement?.id).toBe(text.id); + + await exitTextEditorAndAssertSelection({ + editor, + selectedIds: [text.id], + }); + }); + it("should edit selected bound text on single click", async () => { const container = API.createElement({ type: "rectangle", @@ -1305,6 +1354,40 @@ describe("textWysiwyg", () => { ); }); + it.each([ + { + label: "container", + createElements: () => API.createTextContainer(), + }, + { + label: "arrow", + createElements: () => API.createLabeledArrow(), + }, + ])( + "should reselect $label after deleting bound text with escape", + async ({ createElements }) => { + const [selectedElement, text] = createElements(); + API.setElements([selectedElement, text]); + API.setSelectedElements([selectedElement]); + + Keyboard.keyPress(KEYS.ENTER); + const editor = await getTextEditor(); + + await exitTextEditorAndAssertSelection({ + editor, + nextText: "", + selectedIds: [selectedElement.id], + }); + + expect(selectedElement.boundElements).toStrictEqual([]); + expect(h.elements[1]).toEqual( + expect.objectContaining({ + isDeleted: true, + }), + ); + }, + ); + it("should restore original container height and clear cache once text is unbind", async () => { const container = API.createElement({ type: "rectangle", From 4a5c9e990ca2dca3106b7bbe674b21cf58acec7d Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Wed, 25 Mar 2026 17:56:48 +0100 Subject: [PATCH 39/62] fix(editor): ensure font picker font names are not quoted (#11036) --- .../components/FontPicker/FontPickerList.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/excalidraw/components/FontPicker/FontPickerList.tsx b/packages/excalidraw/components/FontPicker/FontPickerList.tsx index e5e7b85aea..5d107cbeb1 100644 --- a/packages/excalidraw/components/FontPicker/FontPickerList.tsx +++ b/packages/excalidraw/components/FontPicker/FontPickerList.tsx @@ -46,6 +46,7 @@ import { import { fontPickerKeyHandler } from "./keyboardNavHandlers"; import type { JSX } from "react"; +import type { ExcalidrawFontFace } from "../../fonts/ExcalidrawFontFace"; export interface FontDescriptor { value: number; @@ -86,6 +87,15 @@ const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => { } }; +const getFontFamilyLabel = ( + fontFamily: FontFamilyValues, + fontFaces: ExcalidrawFontFace[], +) => + // prefer our config as the browser resolved names may be wrapped in quotes and such + Object.entries(FONT_FAMILY).find(([, id]) => id === fontFamily)?.[0] ?? + fontFaces[0]?.fontFace?.family ?? + "Unknown"; + export const FontPickerList = React.memo( ({ selectedFontFamily, @@ -114,7 +124,7 @@ export const FontPickerList = React.memo( const fontDescriptor = { value: familyId, icon: getFontFamilyIcon(familyId), - text: fontFaces[0]?.fontFace?.family ?? "Unknown", + text: getFontFamilyLabel(familyId, fontFaces), }; if (metadata.deprecated) { From 4be4cc0ed03e8bd3af23bb07b7f4a04debdb7bdf Mon Sep 17 00:00:00 2001 From: dagecko Date: Mon, 30 Mar 2026 10:49:27 -0400 Subject: [PATCH 40/62] fix: pin 9 actions to commit SHA (#11075) --- .github/workflows/cancel.yml | 2 +- .github/workflows/locales-coverage.yml | 2 +- .github/workflows/publish-docker.yml | 8 ++++---- .github/workflows/semantic-pr-title.yml | 2 +- .github/workflows/size-limit.yml | 2 +- .github/workflows/test-coverage-pr.yml | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/.github/workflows/cancel.yml b/.github/workflows/cancel.yml index e1ef216651..a572df9bed 100644 --- a/.github/workflows/cancel.yml +++ b/.github/workflows/cancel.yml @@ -11,7 +11,7 @@ jobs: runs-on: ubuntu-latest timeout-minutes: 3 steps: - - uses: styfle/cancel-workflow-action@0.6.0 + - uses: styfle/cancel-workflow-action@ce177499ccf9fd2aded3b0426c97e5434c2e8a73 # 0.6.0 with: workflow_id: 400555, 400556, 905313, 1451724, 1710116, 3185001, 3438604 access_token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/locales-coverage.yml b/.github/workflows/locales-coverage.yml index d69f1b1449..67a942438b 100644 --- a/.github/workflows/locales-coverage.yml +++ b/.github/workflows/locales-coverage.yml @@ -40,7 +40,7 @@ jobs: echo ::set-output name=body::$body - name: Update description with coverage - uses: kt3k/update-pr-description@v1.0.1 + uses: kt3k/update-pr-description@1b35a6dcd84d81aa0bc1889610efdcde7f37b0c0 # v1.0.1 with: pr_body: ${{ steps.getCommentBody.outputs.body }} pr_title: "chore: Update translations from Crowdin" diff --git a/.github/workflows/publish-docker.yml b/.github/workflows/publish-docker.yml index 68eee27755..d0aedcb26b 100644 --- a/.github/workflows/publish-docker.yml +++ b/.github/workflows/publish-docker.yml @@ -13,16 +13,16 @@ jobs: - name: Checkout repository uses: actions/checkout@v3 - name: Login to DockerHub - uses: docker/login-action@v2 + uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc # v2 with: username: ${{ secrets.DOCKER_USERNAME }} password: ${{ secrets.DOCKER_PASSWORD }} - name: Set up QEMU - uses: docker/setup-qemu-action@v3 + uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3 - name: Set up Docker Buildx - uses: docker/setup-buildx-action@v3 + uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3 - name: Build and push - uses: docker/build-push-action@v5 + uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25 # v5 with: context: . push: true diff --git a/.github/workflows/semantic-pr-title.yml b/.github/workflows/semantic-pr-title.yml index 34a6413fe2..8bfc1327b4 100644 --- a/.github/workflows/semantic-pr-title.yml +++ b/.github/workflows/semantic-pr-title.yml @@ -11,6 +11,6 @@ jobs: semantic: runs-on: ubuntu-latest steps: - - uses: amannn/action-semantic-pull-request@v5 + - uses: amannn/action-semantic-pull-request@e32d7e603df1aa1ba07e981f2a23455dee596825 # v5 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml index ded07f91fb..2a24507630 100644 --- a/.github/workflows/size-limit.yml +++ b/.github/workflows/size-limit.yml @@ -20,7 +20,7 @@ jobs: working-directory: packages/excalidraw env: CI: true - - uses: andresz1/size-limit-action@v1 + - uses: andresz1/size-limit-action@e7493a72a44b113341c0cf6186ab49c17c4b65c1 # v1 with: github_token: ${{ secrets.GITHUB_TOKEN }} build_script: build:esm diff --git a/.github/workflows/test-coverage-pr.yml b/.github/workflows/test-coverage-pr.yml index 227991a7bc..0cb6327564 100644 --- a/.github/workflows/test-coverage-pr.yml +++ b/.github/workflows/test-coverage-pr.yml @@ -21,6 +21,6 @@ jobs: run: yarn test:coverage - name: "Report Coverage" if: always() # Also generate the report if tests are failing - uses: davelosert/vitest-coverage-report-action@v2 + uses: davelosert/vitest-coverage-report-action@2500dafcee7dd64f85ab689c0b83798a8359770e # v2 with: github-token: ${{ secrets.GITHUB_TOKEN }} From d9e8a33aa4b48d920ecb9d3fde15cf0e8b72fd5c Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Wed, 1 Apr 2026 18:41:11 +0200 Subject: [PATCH 41/62] feat(editor): implement overlap box selection (#11053) Co-authored-by: Mark Tolmacs --- packages/element/src/bounds.ts | 28 +- packages/element/src/collision.ts | 43 +- packages/element/src/frame.ts | 20 +- packages/element/src/selection.ts | 300 +++++++++-- packages/element/tests/collision.test.tsx | 4 +- packages/excalidraw/appState.ts | 2 + packages/excalidraw/components/App.tsx | 48 +- .../excalidraw/components/RadioGroup.scss | 5 +- .../components/Stats/stats.test.tsx | 2 +- .../components/dropdownMenu/DropdownMenu.scss | 2 +- .../DropdownMenuItemContentRadio.tsx | 8 +- .../components/main-menu/DefaultItems.tsx | 43 +- packages/excalidraw/data/index.ts | 8 +- packages/excalidraw/data/restore.ts | 6 + packages/excalidraw/locales/en.json | 3 + packages/excalidraw/scene/export.ts | 6 +- .../__snapshots__/contextmenu.test.tsx.snap | 29 +- .../tests/__snapshots__/history.test.tsx.snap | 63 +++ .../regressionTests.test.tsx.snap | 52 ++ packages/excalidraw/tests/history.test.tsx | 2 +- .../excalidraw/tests/regressionTests.test.tsx | 6 +- packages/excalidraw/tests/selection.test.tsx | 509 +++++++++++++++++- packages/excalidraw/types.ts | 4 + packages/math/src/curve.ts | 44 +- .../tests/__snapshots__/export.test.ts.snap | 1 + scripts/woff2/woff2-vite-plugins.js | 7 + 26 files changed, 1141 insertions(+), 104 deletions(-) diff --git a/packages/element/src/bounds.ts b/packages/element/src/bounds.ts index a73a7d28bb..a072b81a90 100644 --- a/packages/element/src/bounds.ts +++ b/packages/element/src/bounds.ts @@ -680,8 +680,9 @@ export const getMinMaxXYFromCurvePathOps = ( return [minX, minY, maxX, maxY]; }; -export const getBoundsFromPoints = ( - points: ExcalidrawFreeDrawElement["points"], +export const getBoundsFromPoints =

( + points: readonly P[], + padding: number = 0, ): Bounds => { let minX = Infinity; let minY = Infinity; @@ -695,7 +696,7 @@ export const getBoundsFromPoints = ( maxY = Math.max(maxY, y); } - return [minX, minY, maxX, maxY]; + return [minX - padding, minY - padding, maxX + padding, maxY + padding]; }; const getFreeDrawElementAbsoluteCoords = ( @@ -1261,6 +1262,17 @@ export const pointInsideBounds =

( ): boolean => p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3]; +// TODO make pointInsideBounds inclusive and remove this function once we +// test nothing is breaking +export const pointInsideBoundsInclusive =

( + p: P, + bounds: Bounds, +): boolean => + p[0] >= bounds[0] && + p[0] <= bounds[2] && + p[1] >= bounds[1] && + p[1] <= bounds[3]; + export const doBoundsIntersect = ( bounds1: Bounds | null, bounds2: Bounds | null, @@ -1275,13 +1287,21 @@ export const doBoundsIntersect = ( return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2; }; +export const boundsContainBounds = (outerBounds: Bounds, innerBounds: Bounds) => + [ + pointFrom(innerBounds[0], innerBounds[1]), + pointFrom(innerBounds[0], innerBounds[3]), + pointFrom(innerBounds[2], innerBounds[1]), + pointFrom(innerBounds[2], innerBounds[3]), + ].every((point) => pointInsideBoundsInclusive(point, outerBounds)); + export const elementCenterPoint = ( element: ExcalidrawElement, elementsMap: ElementsMap, xOffset: number = 0, yOffset: number = 0, ) => { - if (isLinearElement(element)) { + if (isLinearElement(element) || isFreeDrawElement(element)) { const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap); const [x, y] = pointFrom((x1 + x2) / 2, (y1 + y2) / 2); diff --git a/packages/element/src/collision.ts b/packages/element/src/collision.ts index b17d563dbe..c260ae5267 100644 --- a/packages/element/src/collision.ts +++ b/packages/element/src/collision.ts @@ -154,14 +154,11 @@ export const hitElementItself = ({ // Hit test against the extended, rotated bounding box of the element first const bounds = getElementBounds(element, elementsMap, true); - const hitBounds = isPointWithinBounds( - pointFrom(bounds[0] - threshold, bounds[1] - threshold), - pointRotateRads( - point, - getCenterForBounds(bounds), - -element.angle as Radians, - ), - pointFrom(bounds[2] + threshold, bounds[3] + threshold), + const hitBounds = isPointInRotatedBounds( + point, + bounds, + element.angle, + threshold, ); // PERF: Bail out early if the point is not even in the @@ -192,18 +189,32 @@ export const hitElementItself = ({ return result; }; +const isPointInRotatedBounds = ( + point: GlobalPoint, + bounds: Bounds, + angle: Radians, + tolerance = 0, +) => { + const adjustedPoint = + angle === 0 + ? point + : pointRotateRads(point, getCenterForBounds(bounds), -angle as Radians); + + return isPointWithinBounds( + pointFrom(bounds[0] - tolerance, bounds[1] - tolerance), + adjustedPoint, + pointFrom(bounds[2] + tolerance, bounds[3] + tolerance), + ); +}; + export const hitElementBoundingBox = ( point: GlobalPoint, element: ExcalidrawElement, elementsMap: ElementsMap, tolerance = 0, ) => { - let [x1, y1, x2, y2] = getElementBounds(element, elementsMap); - x1 -= tolerance; - y1 -= tolerance; - x2 += tolerance; - y2 += tolerance; - return isPointWithinBounds(pointFrom(x1, y1), point, pointFrom(x2, y2)); + const bounds = getElementBounds(element, elementsMap, true); + return isPointInRotatedBounds(point, bounds, element.angle, tolerance); }; export const hitElementBoundingBoxOnly = ( @@ -573,7 +584,9 @@ const intersectLinearOrFreeDrawWithLineSegment = ( continue; } - const hits = curveIntersectLineSegment(c, segment); + const hits = curveIntersectLineSegment(c, segment, { + iterLimit: 10, + }); if (hits.length > 0) { intersections.push(...hits); diff --git a/packages/element/src/frame.ts b/packages/element/src/frame.ts index 3c82099546..787c2692f9 100644 --- a/packages/element/src/frame.ts +++ b/packages/element/src/frame.ts @@ -1,7 +1,6 @@ import { arrayToMap } from "@excalidraw/common"; import { isPointWithinBounds, pointFrom } from "@excalidraw/math"; import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox"; -import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds"; import type { AppClassProperties, @@ -18,6 +17,8 @@ import { getElementLineSegments, getCommonBounds, getElementAbsoluteCoords, + doBoundsIntersect, + getElementBounds, } from "./bounds"; import { mutateElement } from "./mutateElement"; import { getBoundTextElement, getContainerElement } from "./textElement"; @@ -920,16 +921,17 @@ export const getFrameLikeTitle = (element: ExcalidrawFrameLikeElement) => { export const getElementsOverlappingFrame = ( elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, + elementsMap: ElementsMap, ) => { - return ( - elementsOverlappingBBox({ - elements, - bounds: frame, - type: "overlap", - }) - // removes elements who are overlapping, but are in a different frame, + return elements.filter( + (el) => + // exclude elements which are overlapping, but are in a different frame, // and thus invisible in target frame - .filter((el) => !el.frameId || el.frameId === frame.id) + (!el.frameId || el.frameId === frame.id) && + doBoundsIntersect( + getElementBounds(el, elementsMap), + getElementBounds(frame, elementsMap), + ), ); }; diff --git a/packages/element/src/selection.ts b/packages/element/src/selection.ts index ea7fdb1b77..8e9c4e8086 100644 --- a/packages/element/src/selection.ts +++ b/packages/element/src/selection.ts @@ -1,15 +1,32 @@ -import { arrayToMap, isShallowEqual } from "@excalidraw/common"; +import { arrayToMap, isShallowEqual, type Bounds } from "@excalidraw/common"; +import { + lineSegment, + pointFrom, + pointRotateRads, + type GlobalPoint, +} from "@excalidraw/math"; import type { AppState, + BoxSelectionMode, InteractiveCanvasAppState, } from "@excalidraw/excalidraw/types"; -import { getElementAbsoluteCoords, getElementBounds } from "./bounds"; +import { + boundsContainBounds, + doBoundsIntersect, + elementCenterPoint, + getElementAbsoluteCoords, + getElementBounds, + pointInsideBounds, +} from "./bounds"; +import { intersectElementWithLineSegment } from "./collision"; import { isElementInViewport } from "./sizeHelpers"; import { + isArrowElement, isBoundToContainer, isFrameLikeElement, + isFreeDrawElement, isLinearElement, isTextElement, } from "./typeChecks"; @@ -17,19 +34,38 @@ import { elementOverlapsWithFrame, getContainingFrame, getFrameChildren, + isElementIntersectingFrame, } from "./frame"; import { LinearElementEditor } from "./linearElementEditor"; import { selectGroupsForSelectedElements } from "./groups"; +import { getBoundTextElement } from "./textElement"; import type { ElementsMap, ElementsMapOrArray, ExcalidrawElement, + ExcalidrawFrameLikeElement, NonDeleted, NonDeletedExcalidrawElement, } from "./types"; +const shouldIgnoreElementFromSelection = ( + element: NonDeletedExcalidrawElement, +) => element.locked || isBoundToContainer(element); + +const excludeElementsFromFrames = ( + selectedElements: readonly T[], + framesInSelection: Set, +) => { + return selectedElements.filter((element) => { + if (element.frameId && framesInSelection.has(element.frameId)) { + return false; + } + return true; + }); +}; + /** * Frames and their containing elements are not to be selected at the same time. * Given an array of selected elements, if there are frames and their containing elements @@ -49,55 +85,243 @@ export const excludeElementsInFramesFromSelection = < } }); - return selectedElements.filter((element) => { - if (element.frameId && framesInSelection.has(element.frameId)) { - return false; - } - return true; - }); + return excludeElementsFromFrames(selectedElements, framesInSelection); }; export const getElementsWithinSelection = ( elements: readonly NonDeletedExcalidrawElement[], selection: NonDeletedExcalidrawElement, elementsMap: ElementsMap, + // TODO remove (this flag is effectively unused AFAIK) excludeElementsInFrames: boolean = true, -) => { - const [selectionX1, selectionY1, selectionX2, selectionY2] = + boxSelectionMode: BoxSelectionMode = "contain", +): NonDeletedExcalidrawElement[] => { + const [selectionStartX, selectionStartY, selectionEndX, selectionEndY] = getElementAbsoluteCoords(selection, elementsMap); + const selectionX1 = Math.min(selectionStartX, selectionEndX); + const selectionY1 = Math.min(selectionStartY, selectionEndY); + const selectionX2 = Math.max(selectionStartX, selectionEndX); + const selectionY2 = Math.max(selectionStartY, selectionEndY); + const selectionBounds = [ + selectionX1, + selectionY1, + selectionX2, + selectionY2, + ] as Bounds; + const selectionEdges = [ + lineSegment( + pointFrom(selectionX1, selectionY1), + pointFrom(selectionX2, selectionY1), + ), + lineSegment( + pointFrom(selectionX2, selectionY1), + pointFrom(selectionX2, selectionY2), + ), + lineSegment( + pointFrom(selectionX2, selectionY2), + pointFrom(selectionX1, selectionY2), + ), + lineSegment( + pointFrom(selectionX1, selectionY2), + pointFrom(selectionX1, selectionY1), + ), + ]; - let elementsInSelection = elements.filter((element) => { - let [elementX1, elementY1, elementX2, elementY2] = getElementBounds( - element, - elementsMap, - ); + const framesInSelection = excludeElementsInFrames + ? new Set() + : null; + let elementsInSelection: NonDeletedExcalidrawElement[] = []; - const containingFrame = getContainingFrame(element, elementsMap); - if (containingFrame) { - const [fx1, fy1, fx2, fy2] = getElementBounds( - containingFrame, - elementsMap, - ); - - elementX1 = Math.max(fx1, elementX1); - elementY1 = Math.max(fy1, elementY1); - elementX2 = Math.min(fx2, elementX2); - elementY2 = Math.min(fy2, elementY2); + for (const element of elements) { + if (shouldIgnoreElementFromSelection(element)) { + continue; } - return ( - element.locked === false && - element.type !== "selection" && - !isBoundToContainer(element) && - selectionX1 <= elementX1 && - selectionY1 <= elementY1 && - selectionX2 >= elementX2 && - selectionY2 >= elementY2 - ); - }); + const strokeWidth = element.strokeWidth; + let labelAABB: Bounds | null = null; + let elementAABB = getElementBounds(element, elementsMap); - elementsInSelection = excludeElementsInFrames - ? excludeElementsInFramesFromSelection(elementsInSelection) + elementAABB = [ + elementAABB[0] - strokeWidth / 2, + elementAABB[1] - strokeWidth / 2, + elementAABB[2] + strokeWidth / 2, + elementAABB[3] + strokeWidth / 2, + ] as Bounds; + + // Whether the element bounds should include the bound text element bounds + const boundTextElement = + isArrowElement(element) && getBoundTextElement(element, elementsMap); + if (boundTextElement) { + const { x, y } = LinearElementEditor.getBoundTextElementPosition( + element, + boundTextElement, + elementsMap, + ); + labelAABB = [ + x, + y, + x + boundTextElement.width, + y + boundTextElement.height, + ] as Bounds; + } + + // Clip element bounds by its containing frame (if any), since only the + // visible (frame-clipped) portion of the element is relevant for selection. + const associatedFrame = getContainingFrame(element, elementsMap); + if ( + associatedFrame && + isElementIntersectingFrame(element, associatedFrame, elementsMap) + ) { + const frameAABB = getElementBounds(associatedFrame, elementsMap); + elementAABB = [ + Math.max(elementAABB[0], frameAABB[0]), + Math.max(elementAABB[1], frameAABB[1]), + Math.min(elementAABB[2], frameAABB[2]), + Math.min(elementAABB[3], frameAABB[3]), + ] as Bounds; + + labelAABB = labelAABB + ? ([ + Math.max(labelAABB[0], frameAABB[0]), + Math.max(labelAABB[1], frameAABB[1]), + Math.min(labelAABB[2], frameAABB[2]), + Math.min(labelAABB[3], frameAABB[3]), + ] as Bounds) + : null; + } + + const commonAABB = labelAABB + ? ([ + Math.min(labelAABB[0], elementAABB[0]), + Math.min(labelAABB[1], elementAABB[1]), + Math.max(labelAABB[2], elementAABB[2]), + Math.max(labelAABB[3], elementAABB[3]), + ] as Bounds) + : elementAABB; + + // ============== Evaluation ============== + + // 1. If the selection box WRAPs the element's AABB, then add it to the + // selection and move on, regardless of the selection mode. + // + // PERF: This trick only works with axis-aligned box selection and the + // current convex element shapes! + if (boundsContainBounds(selectionBounds, commonAABB)) { + if (framesInSelection && isFrameLikeElement(element)) { + framesInSelection.add(element.id); + } else { + elementsInSelection.push(element); + continue; + } + } + + // 2. Handle the case where the label is overlapped by the selection box + if ( + boxSelectionMode === "overlap" && + labelAABB && + doBoundsIntersect(selectionBounds, labelAABB) + ) { + elementsInSelection.push(element); + continue; + } + + // 3. Handle the case where the selection is not wrapping the element, but + // it does intersect the element's outline (non-AABB). + if ( + boxSelectionMode === "overlap" && + doBoundsIntersect(selectionBounds, elementAABB) + ) { + let hasIntersection = false; + + // Preliminary check potential intersection imprecision + if (isLinearElement(element) || isFreeDrawElement(element)) { + const center = elementCenterPoint(element, elementsMap); + hasIntersection = element.points.some((point) => { + const rotatedPoint = pointRotateRads( + pointFrom(element.x + point[0], element.y + point[1]), + center, + element.angle, + ); + + return pointInsideBounds(rotatedPoint, selectionBounds); + }); + } else { + const nonRotatedElementBounds = getElementBounds( + element, + elementsMap, + true, + ); + const center = elementCenterPoint(element, elementsMap); + hasIntersection = [ + pointRotateRads( + pointFrom( + (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2, + nonRotatedElementBounds[1], + ), + center, + element.angle, + ), + pointRotateRads( + pointFrom( + nonRotatedElementBounds[2], + (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2, + ), + center, + element.angle, + ), + pointRotateRads( + pointFrom( + (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2, + nonRotatedElementBounds[3], + ), + center, + element.angle, + ), + pointRotateRads( + pointFrom( + nonRotatedElementBounds[0], + (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2, + ), + center, + element.angle, + ), + ].some((point) => { + return pointInsideBounds( + pointRotateRads(point, center, element.angle), + selectionBounds, + ); + }); + } + + if (!hasIntersection) { + hasIntersection = selectionEdges.some( + (selectionEdge) => + intersectElementWithLineSegment( + element, + elementsMap, + selectionEdge, + strokeWidth / 2, + true, // Stop at first hit for better performance + ).length > 0, + ); + } + + if (hasIntersection) { + if (framesInSelection && isFrameLikeElement(element)) { + framesInSelection.add(element.id); + } + + elementsInSelection.push(element); + continue; + } + } + + // 4. We don't need to handle when the selection is inside the element + // as it is separately handled in App. + } + + elementsInSelection = framesInSelection + ? excludeElementsFromFrames(elementsInSelection, framesInSelection) : elementsInSelection; elementsInSelection = elementsInSelection.filter((element) => { diff --git a/packages/element/tests/collision.test.tsx b/packages/element/tests/collision.test.tsx index 4061a16cb6..a44f1f7bb0 100644 --- a/packages/element/tests/collision.test.tsx +++ b/packages/element/tests/collision.test.tsx @@ -1,4 +1,4 @@ -import { arrayToMap } from "@excalidraw/common"; +import { arrayToMap, reseed } from "@excalidraw/common"; import { type GlobalPoint, type LocalPoint, pointFrom } from "@excalidraw/math"; import { Excalidraw } from "@excalidraw/excalidraw"; import { API } from "@excalidraw/excalidraw/tests/helpers/api"; @@ -12,6 +12,7 @@ import { hitElementItself } from "../src/collision"; describe("check rotated elements can be hit:", () => { beforeEach(async () => { localStorage.clear(); + reseed(7); await render(); }); @@ -56,6 +57,7 @@ describe("hitElementItself cache", () => { }); localStorage.clear(); + reseed(7); await render(); }); diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts index e51865b2ea..93fe770286 100644 --- a/packages/excalidraw/appState.ts +++ b/packages/excalidraw/appState.ts @@ -128,6 +128,7 @@ export const getDefaultAppState = (): Omit< lockedMultiSelections: {}, activeLockedId: null, bindMode: "orbit", + boxSelectionMode: "contain", }; }; @@ -193,6 +194,7 @@ const APP_STATE_STORAGE_CONF = (< gridModeEnabled: { browser: true, export: true, server: true }, height: { browser: false, export: false, server: false }, isBindingEnabled: { browser: true, export: false, server: false }, + boxSelectionMode: { browser: true, export: false, server: false }, bindingPreference: { browser: true, export: false, server: false }, isMidpointSnappingEnabled: { browser: true, export: false, server: false }, defaultSidebarDockedPreference: { diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 5561594cb0..4db823c2d4 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -27,6 +27,7 @@ import { KEYS, APP_NAME, CURSOR_TYPE, + DEFAULT_TRANSFORM_HANDLE_SPACING, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTICAL_ALIGN, DRAGGING_THRESHOLD, @@ -2524,6 +2525,7 @@ class App extends React.Component { const magicFrameChildren = getElementsOverlappingFrame( this.scene.getNonDeletedElements(), magicFrame, + this.scene.getNonDeletedElementsMap(), ).filter((el) => !isMagicFrameElement(el)); if (!magicFrameChildren.length) { @@ -7239,6 +7241,14 @@ class App extends React.Component { this.interactiveCanvas, isTextElement(hitElement) ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR, ); + } else if ( + !event[KEYS.CTRL_OR_CMD] && + this.isHittingCommonBoundingBoxOfSelectedElements( + scenePointer, + selectedElements, + ) + ) { + setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE); } else if (this.state.viewModeEnabled) { setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB); } else if (this.state.openDialog?.name === "elementLinkSelector") { @@ -7730,17 +7740,24 @@ class App extends React.Component { const hitSelectedElement = pointerDownState.hit.element && this.isASelectedElement(pointerDownState.hit.element); + const shouldForceLassoReselect = + event.altKey && + event[KEYS.CTRL_OR_CMD] && + !pointerDownState.resize.handleType; + const shouldStartLassoSelection = + shouldForceLassoReselect || + (!pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements && + !pointerDownState.resize.handleType && + !hitSelectedElement); - if ( - !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements && - !pointerDownState.resize.handleType && - !hitSelectedElement - ) { - this.lassoTrail.startPath( - pointerDownState.origin.x, - pointerDownState.origin.y, - event.shiftKey, - ); + if (shouldStartLassoSelection) { + if (!this.lassoTrail.hasCurrentTrail) { + this.lassoTrail.startPath( + pointerDownState.origin.x, + pointerDownState.origin.y, + event.shiftKey, + ); + } // block dragging after lasso selection on PCs until the next pointer down // (on mobile or tablet, we want to allow user to drag immediately) @@ -8729,12 +8746,14 @@ class App extends React.Component { DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value, 1, ); + const boundsPadding = + (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / this.state.zoom.value; const [x1, y1, x2, y2] = getCommonBounds(selectedElements); return ( - point.x > x1 - threshold && - point.x < x2 + threshold && - point.y > y1 - threshold && - point.y < y2 + threshold + point.x > x1 - boundsPadding - threshold && + point.x < x2 + boundsPadding + threshold && + point.y > y1 - boundsPadding - threshold && + point.y < y2 + boundsPadding + threshold ); } @@ -10267,6 +10286,7 @@ class App extends React.Component { this.state.selectionElement, this.scene.getNonDeletedElementsMap(), false, + this.state.boxSelectionMode, ) : []; diff --git a/packages/excalidraw/components/RadioGroup.scss b/packages/excalidraw/components/RadioGroup.scss index 28ddc8889b..d550d95b3b 100644 --- a/packages/excalidraw/components/RadioGroup.scss +++ b/packages/excalidraw/components/RadioGroup.scss @@ -26,13 +26,16 @@ background: var(--RadioGroup-background); border: 1px solid var(--RadioGroup-border); + gap: 2px; + &__choice { position: relative; display: flex; align-items: center; justify-content: center; - width: 32px; + min-width: 20px; height: 24px; + padding: 0 0.375rem; color: var(--RadioGroup-choice-color-off); background: var(--RadioGroup-choice-background-off); diff --git a/packages/excalidraw/components/Stats/stats.test.tsx b/packages/excalidraw/components/Stats/stats.test.tsx index 283bdb40d3..24d739afa9 100644 --- a/packages/excalidraw/components/Stats/stats.test.tsx +++ b/packages/excalidraw/components/Stats/stats.test.tsx @@ -750,7 +750,7 @@ describe("frame resizing behavior", () => { x: 0, y: 0, width: 100, - height: 100, + height: 103, }); // Create a rectangle outside the frame diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss index e207203d60..3080314250 100644 --- a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss +++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss @@ -2,7 +2,7 @@ .excalidraw { .dropdown-menu { - max-width: 16rem; + max-width: 20rem; z-index: 1; &--placement-top { diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx index 4f2986c30e..63646745fb 100644 --- a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx +++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx @@ -1,4 +1,5 @@ import { useEditorInterface } from "../App"; +import { Ellipsify } from "../Ellipsify"; import { RadioGroup } from "../RadioGroup"; type Props = { @@ -12,6 +13,7 @@ type Props = { onChange: (value: T) => void; children: React.ReactNode; name: string; + icon?: React.ReactNode; }; const DropdownMenuItemContentRadio = ({ @@ -21,13 +23,17 @@ const DropdownMenuItemContentRadio = ({ choices, children, name, + icon, }: Props) => { const editorInterface = useEditorInterface(); return ( <>

- + {icon &&
{icon}
} + { ); }; +const PreferencesBoxSelectionModeItem = () => { + const { t } = useI18n(); + const appState = useUIAppState(); + const setAppState = useExcalidrawSetAppState(); + + return ( + + name="boxSelectionMode" + icon={emptyIcon} + value={appState.boxSelectionMode} + onChange={(value) => { + setAppState({ + boxSelectionMode: value, + }); + }} + choices={[ + { + value: "contain", + label: t("labels.boxSelectionContain"), + ariaLabel: t("labels.boxSelectionContain"), + }, + { + value: "overlap", + label: t("labels.boxSelectionOverlap"), + ariaLabel: t("labels.boxSelectionOverlap"), + }, + ]} + > + {t("labels.boxSelectionMode")} + + ); +}; + const PreferencesToggleSnapModeItem = () => { const { t } = useI18n(); const actionManager = useExcalidrawActionManager(); @@ -568,6 +607,7 @@ export const Preferences = ({ {children || ( <> + @@ -585,6 +625,7 @@ export const Preferences = ({ }; Preferences.ToggleToolLock = PreferencesToggleToolLockItem; +Preferences.BoxSelectionMode = PreferencesBoxSelectionModeItem; Preferences.ToggleSnapMode = PreferencesToggleSnapModeItem; Preferences.ToggleArrowBinding = PreferencesToggleArrowBindingItem; Preferences.ToggleMidpointSnapping = PreferencesToggleMidpointSnappingItem; diff --git a/packages/excalidraw/data/index.ts b/packages/excalidraw/data/index.ts index 1083a47897..d31ab931fd 100644 --- a/packages/excalidraw/data/index.ts +++ b/packages/excalidraw/data/index.ts @@ -6,6 +6,7 @@ import { MIME_TYPES, cloneJSON, SVG_DOCUMENT_PREAMBLE, + arrayToMap, } from "@excalidraw/common"; import { getNonDeletedElements } from "@excalidraw/element"; @@ -49,6 +50,7 @@ export const prepareElementsForExport = ( exportSelectionOnly: boolean, ) => { elements = getNonDeletedElements(elements); + const elementsMap = arrayToMap(elements); const isExportingSelection = exportSelectionOnly && @@ -71,7 +73,11 @@ export const prepareElementsForExport = ( isFrameLikeElement(exportedElements[0]) ) { exportingFrame = exportedElements[0]; - exportedElements = getElementsOverlappingFrame(elements, exportingFrame); + exportedElements = getElementsOverlappingFrame( + elements, + exportingFrame, + elementsMap, + ); } else if (exportedElements.length > 1) { exportedElements = getSelectedElements( elements, diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts index 1ed068dc1c..7a8b9e586c 100644 --- a/packages/excalidraw/data/restore.ts +++ b/packages/excalidraw/data/restore.ts @@ -936,6 +936,12 @@ export const restoreAppState = ( : defaultValue; } + const boxSelectionMode = + appState.boxSelectionMode ?? localAppState?.boxSelectionMode; + if (boxSelectionMode !== undefined) { + nextAppState.boxSelectionMode = boxSelectionMode; + } + return { ...nextAppState, cursorButton: localAppState?.cursorButton || "up", diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json index 42e87bdf82..05d3bf702e 100644 --- a/packages/excalidraw/locales/en.json +++ b/packages/excalidraw/locales/en.json @@ -185,6 +185,9 @@ "shapeSwitch": "Switch shape", "preferences": "Preferences", "preferences_toolLock": "Tool lock", + "boxSelectionMode": "Select on", + "boxSelectionContain": "Wrap", + "boxSelectionOverlap": "Overlap", "arrowBinding": "Arrow binding", "midpointSnapping": "Snap to midpoints" }, diff --git a/packages/excalidraw/scene/export.ts b/packages/excalidraw/scene/export.ts index 7cf111f6ce..8d8c405e82 100644 --- a/packages/excalidraw/scene/export.ts +++ b/packages/excalidraw/scene/export.ts @@ -157,7 +157,11 @@ const prepareElementsForRender = ({ let nextElements: readonly ExcalidrawElement[]; if (exportingFrame) { - nextElements = getElementsOverlappingFrame(elements, exportingFrame); + nextElements = getElementsOverlappingFrame( + elements, + exportingFrame, + arrayToMap(elements), + ); } else if (frameRendering.enabled && frameRendering.name) { nextElements = addFrameLabelsAsTextElements(elements, { exportWithDarkMode, diff --git a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap index 15458fa366..cb548f5b62 100644 --- a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap @@ -13,6 +13,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": { "items": [ @@ -1086,6 +1087,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1300,6 +1302,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1631,6 +1634,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1962,6 +1966,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2176,6 +2181,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2417,6 +2423,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2715,6 +2722,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3087,6 +3095,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3580,6 +3589,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3903,6 +3913,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4226,6 +4237,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4358,7 +4370,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung "type": "rectangle", "updated": 1, "version": 5, - "versionNonce": 760410951, + "versionNonce": 1006504105, "width": 20, "x": -10, "y": 0, @@ -4383,14 +4395,14 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung "opacity": 100, "roughness": 1, "roundness": null, - "seed": 238820263, + "seed": 400692809, "strokeColor": "#1e1e1e", "strokeStyle": "solid", "strokeWidth": 2, "type": "rectangle", "updated": 1, "version": 5, - "versionNonce": 1006504105, + "versionNonce": 289600103, "width": 20, "x": 20, "y": 30, @@ -4637,6 +4649,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": { "items": [ @@ -5854,6 +5867,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": { "items": [ @@ -6864,7 +6878,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro "type": "rectangle", "updated": 1, "version": 4, - "versionNonce": 747212839, + "versionNonce": 1723083209, "width": 10, "x": -10, "y": 0, @@ -6891,14 +6905,14 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro "opacity": 100, "roughness": 1, "roundness": null, - "seed": 238820263, + "seed": 400692809, "strokeColor": "#1e1e1e", "strokeStyle": "solid", "strokeWidth": 2, "type": "rectangle", "updated": 1, "version": 4, - "versionNonce": 1723083209, + "versionNonce": 760410951, "width": 10, "x": 12, "y": 0, @@ -7122,6 +7136,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": { "items": [ @@ -7811,6 +7826,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": { "items": [ @@ -8802,6 +8818,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": { "items": [ diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap index 3a400a0128..2923e9b321 100644 --- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap @@ -13,6 +13,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -646,6 +647,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1207,6 +1209,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1567,6 +1570,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1929,6 +1933,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2192,6 +2197,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2645,6 +2651,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2948,6 +2955,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3267,6 +3275,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3561,6 +3570,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3847,6 +3857,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4082,6 +4093,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4339,6 +4351,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4610,6 +4623,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4839,6 +4853,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5068,6 +5083,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5315,6 +5331,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5571,6 +5588,7 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5829,6 +5847,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -6158,6 +6177,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -6585,6 +6605,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -6959,6 +6980,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7271,6 +7293,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7563,6 +7586,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7793,6 +7817,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8145,6 +8170,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8497,6 +8523,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8903,6 +8930,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9182,6 +9210,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9446,6 +9475,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9711,6 +9741,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9943,6 +9974,7 @@ exports[`history > multiplayer undo/redo > should override remotely added groups }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10240,6 +10272,7 @@ exports[`history > multiplayer undo/redo > should override remotely added points }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10557,6 +10590,7 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10793,6 +10827,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11718,6 +11753,7 @@ exports[`history > multiplayer undo/redo > should update history entries after r }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11978,6 +12014,7 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -12213,6 +12250,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -12450,6 +12488,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -12841,6 +12880,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on e }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13051,6 +13091,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on e }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13258,6 +13299,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on i }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13559,6 +13601,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on i }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13857,6 +13900,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on s }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14102,6 +14146,7 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14339,6 +14384,7 @@ exports[`history > singleplayer undo/redo > should end up with no history entry }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14576,6 +14622,7 @@ exports[`history > singleplayer undo/redo > should iterate through the history w }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14823,6 +14870,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -15154,6 +15202,7 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -15324,6 +15373,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -15608,6 +15658,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -15871,6 +15922,7 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -16024,6 +16076,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -16306,6 +16359,7 @@ exports[`history > singleplayer undo/redo > should support appstate name or view }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -16468,6 +16522,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -17216,6 +17271,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -17862,6 +17918,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -18508,6 +18565,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -19257,6 +19315,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -20025,6 +20084,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements' }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -20505,6 +20565,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -21016,6 +21077,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -21475,6 +21537,7 @@ exports[`history > singleplayer undo/redo > should support linear element creati }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap index e97991d96f..e502925b25 100644 --- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap @@ -13,6 +13,7 @@ exports[`given element A and group of elements B and given both are selected whe }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -439,6 +440,7 @@ exports[`given element A and group of elements B and given both are selected whe }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -855,6 +857,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1421,6 +1424,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -1628,6 +1632,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2012,6 +2017,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2257,6 +2263,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = ` }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2437,6 +2444,7 @@ exports[`regression tests > can drag element that covers another element, while }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -2762,6 +2770,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3017,6 +3026,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3258,6 +3268,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3494,6 +3505,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`] }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -3752,6 +3764,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4066,6 +4079,7 @@ exports[`regression tests > deleting last but one element in editing group shoul }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4502,6 +4516,7 @@ exports[`regression tests > deselects group of selected elements on pointer down }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -4785,6 +4800,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5061,6 +5077,7 @@ exports[`regression tests > deselects selected element on pointer down when poin }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5269,6 +5286,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5469,6 +5487,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -5862,6 +5881,7 @@ exports[`regression tests > drags selected elements from point inside common bou }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -6159,6 +6179,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1` }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -6947,6 +6968,7 @@ exports[`regression tests > given a group of selected elements with an element t }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7281,6 +7303,7 @@ exports[`regression tests > given a selected element A and a not selected elemen }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7560,6 +7583,7 @@ exports[`regression tests > given selected element A with lower z-index than uns }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -7795,6 +7819,7 @@ exports[`regression tests > given selected element A with lower z-index than uns }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8035,6 +8060,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8215,6 +8241,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8395,6 +8422,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8575,6 +8603,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1` }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -8807,6 +8836,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`] }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9037,6 +9067,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9229,6 +9260,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1` }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9461,6 +9493,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9641,6 +9674,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`] }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -9871,6 +9905,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10051,6 +10086,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10243,6 +10279,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10423,6 +10460,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -10954,6 +10992,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11234,6 +11273,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = ` }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11357,6 +11397,7 @@ exports[`regression tests > shift click on selected element should deselect it o }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11557,6 +11598,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -11876,6 +11918,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -12305,6 +12348,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -12945,6 +12989,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13071,6 +13116,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`] }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -13702,6 +13748,7 @@ exports[`regression tests > switches from group of selected elements to another }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14041,6 +14088,7 @@ exports[`regression tests > switches selected element on pointer down > [end of }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14305,6 +14353,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`] }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14428,6 +14477,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14792,6 +14842,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, @@ -14915,6 +14966,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = ` }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, diff --git a/packages/excalidraw/tests/history.test.tsx b/packages/excalidraw/tests/history.test.tsx index f6706a0f99..78b431b773 100644 --- a/packages/excalidraw/tests/history.test.tsx +++ b/packages/excalidraw/tests/history.test.tsx @@ -314,7 +314,7 @@ describe("history", () => { expect.objectContaining({ id: rect2.id, isDeleted: true }), ]); - mouse.downAt(0, 0); + mouse.downAt(-10, -10); mouse.moveTo(25, 25); mouse.moveTo(50, 50); mouse.upAt(50, 50); diff --git a/packages/excalidraw/tests/regressionTests.test.tsx b/packages/excalidraw/tests/regressionTests.test.tsx index d12a845d63..986c828f26 100644 --- a/packages/excalidraw/tests/regressionTests.test.tsx +++ b/packages/excalidraw/tests/regressionTests.test.tsx @@ -468,7 +468,7 @@ describe("regression tests", () => { mouse.reset(); mouse.down(); mouse.move(-1000, -1000); - mouse.restorePosition(...end); + mouse.restorePosition(end[0] + 3, end[1] + 3); mouse.up(); expect(h.elements.length).toBe(3); @@ -519,7 +519,7 @@ describe("regression tests", () => { mouse.reset(); mouse.down(); mouse.move(-1000, -1000); - mouse.restorePosition(...end); + mouse.restorePosition(end[0] + 3, end[1] + 3); mouse.up(); for (const element of h.elements) { @@ -537,7 +537,7 @@ describe("regression tests", () => { mouse.moveTo(-10, -10); // the NW resizing handle is at [0, 0], so moving further mouse.down(); mouse.move(-1000, -1000); - mouse.restorePosition(...end); + mouse.restorePosition(end[0] + 3, end[1] + 3); mouse.up(); Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => { diff --git a/packages/excalidraw/tests/selection.test.tsx b/packages/excalidraw/tests/selection.test.tsx index 64204f1a00..ef0bd46b2c 100644 --- a/packages/excalidraw/tests/selection.test.tsx +++ b/packages/excalidraw/tests/selection.test.tsx @@ -1,7 +1,9 @@ import React from "react"; import { vi } from "vitest"; -import { KEYS, reseed } from "@excalidraw/common"; +import { KEYS, ROUNDNESS, reseed } from "@excalidraw/common"; +import { getElementBounds, getElementLineSegments } from "@excalidraw/element"; +import { pointFrom, pointRotateRads, type LocalPoint } from "@excalidraw/math"; import { SHAPES } from "../components/shapes"; @@ -12,6 +14,7 @@ import * as StaticScene from "../renderer/staticScene"; import { API } from "./helpers/api"; import { Keyboard, Pointer, UI } from "./helpers/ui"; import { + act, render, fireEvent, mockBoundingClientRect, @@ -39,6 +42,19 @@ const { h } = window; const mouse = new Pointer("mouse"); +const getOutlineBounds = (element: ReturnType) => { + const sceneElement = API.getElement(element); + const elementsMap = h.scene.getNonDeletedElementsMap(); + const points = getElementLineSegments(sceneElement, elementsMap).flat(); + + return [ + Math.min(...points.map((point) => point[0])), + Math.min(...points.map((point) => point[1])), + Math.max(...points.map((point) => point[0])), + Math.max(...points.map((point) => point[1])), + ] as const; +}; + describe("box-selection", () => { beforeEach(async () => { await render(); @@ -108,6 +124,497 @@ describe("box-selection", () => { assertSelectedElements([]); }); + + it("should not select an element when the selection box only partially overlaps it", () => { + const rect1 = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + width: 50, + height: 50, + backgroundColor: "red", + fillStyle: "solid", + }); + + API.setElements([rect1]); + + mouse.downAt(25, -20); + mouse.move(-1000, -1000); + mouse.moveTo(75, 70); + mouse.up(); + + assertSelectedElements([]); + }); +}); + +describe("lasso reselection", () => { + beforeEach(async () => { + await render(); + }); + + it("should allow ctrl+alt lasso reselection when starting inside the active common bounds", () => { + const rectA = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + width: 100, + height: 100, + backgroundColor: "red", + fillStyle: "solid", + }); + const rectB = API.createElement({ + type: "rectangle", + x: 220, + y: 0, + width: 100, + height: 100, + backgroundColor: "blue", + fillStyle: "solid", + }); + + API.setElements([rectA, rectB]); + mouse.select([rectA, rectB]); + act(() => { + h.app.setActiveTool({ type: "lasso" }); + }); + + Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => { + mouse.downAt(110, 50); + mouse.moveTo(50, -20); + + expect(h.app.lassoTrail.hasCurrentTrail).toBe(true); + + mouse.moveTo(-20, 50); + mouse.moveTo(50, 120); + mouse.moveTo(110, 50); + mouse.up(); + }); + + assertSelectedElements([rectA.id]); + }); +}); + +describe("box-selection overlap mode", () => { + const boxSelect = ( + startX: number, + startY: number, + endX: number, + endY: number, + ) => { + mouse.downAt(startX, startY); + mouse.move(-1000, -1000); + mouse.moveTo(endX, endY); + mouse.up(); + }; + + const boxSelectTopLeftAabbCorner = ( + element: ReturnType, + ) => { + const sceneElement = API.getElement(element); + const elementsMap = h.scene.getNonDeletedElementsMap(); + const [x1, y1] = getElementBounds(sceneElement, elementsMap); + + boxSelect(x1 + 2, y1 + 2, x1 + 12, y1 + 12); + }; + + const boxSelectTopRightAabbCorner = ( + element: ReturnType, + ) => { + const sceneElement = API.getElement(element); + const elementsMap = h.scene.getNonDeletedElementsMap(); + const [, y1, x2] = getElementBounds(sceneElement, elementsMap); + + boxSelect(x2 - 12, y1 + 2, x2 - 2, y1 + 12); + }; + + const boxSelectTopLeftRotatedLocalBoundsCorner = ( + element: ReturnType, + ) => { + const sceneElement = API.getElement(element); + const elementsMap = h.scene.getNonDeletedElementsMap(); + const [x1, y1, x2, y2] = getElementBounds(sceneElement, elementsMap, true); + const center = pointFrom((x1 + x2) / 2, (y1 + y2) / 2); + const [cornerX, cornerY] = pointRotateRads( + pointFrom(x1, y1), + center, + sceneElement.angle, + ); + + boxSelect(cornerX - 4, cornerY - 4, cornerX + 4, cornerY + 4); + }; + + beforeEach(async () => { + await render( + , + ); + }); + + it("should select an element when the selection box partially overlaps it", () => { + const rect1 = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + width: 50, + height: 50, + backgroundColor: "red", + fillStyle: "solid", + }); + + API.setElements([rect1]); + + boxSelect(25, -20, 75, 70); + + assertSelectedElements([rect1.id]); + }); + + it("should not select a transparent rectangle when the selection box stays inside it", () => { + const rect1 = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + width: 100, + height: 100, + backgroundColor: "transparent", + fillStyle: "solid", + }); + + API.setElements([rect1]); + + boxSelect(25, 25, 75, 75); + + assertSelectedElements([]); + }); + + it("should select a transparent rectangle when the selection box crosses its outline", () => { + const rect1 = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + width: 100, + height: 100, + backgroundColor: "transparent", + fillStyle: "solid", + }); + + API.setElements([rect1]); + + boxSelect(25, 25, 125, 75); + + assertSelectedElements([rect1.id]); + }); + + it("should not select a rotated transparent rectangle when the selection box stays inside it", () => { + const rect1 = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + width: 100, + height: 100, + angle: Math.PI / 4, + backgroundColor: "transparent", + fillStyle: "solid", + }); + + API.setElements([rect1]); + + boxSelect(40, 40, 60, 60); + + assertSelectedElements([]); + }); + + it("should select a rotated rounded rectangle when the selection box contains its outline but not its bounds", () => { + const rect = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + width: 100, + height: 180, + angle: Math.PI / 6, + backgroundColor: "transparent", + fillStyle: "solid", + roundness: { type: ROUNDNESS.ADAPTIVE_RADIUS }, + roughness: 0, + }); + + API.setElements([rect]); + + const sceneRect = API.getElement(rect); + const elementsMap = h.scene.getNonDeletedElementsMap(); + const [boundsX1, boundsY1, boundsX2, boundsY2] = getElementBounds( + sceneRect, + elementsMap, + ); + const [outlineX1, outlineY1, outlineX2, outlineY2] = getOutlineBounds(rect); + + expect(outlineX1).toBeGreaterThan(boundsX1 - 1); + expect(outlineY1).toBeGreaterThan(boundsY1 - 1); + expect(outlineX2).toBeLessThan(boundsX2 + 1); + expect(outlineY2).toBeLessThan(boundsY2 + 1); + + boxSelect( + outlineX1 - (outlineX1 - boundsX1) / 2, + outlineY1 - (outlineY1 - boundsY1) / 2, + outlineX2 + (boundsX2 - outlineX2) / 2, + outlineY2 + (boundsY2 - outlineY2) / 2, + ); + + assertSelectedElements([rect.id]); + }); + + it("should not select a filled rotated rectangle when the selection box only overlaps its axis-aligned bounds", () => { + const rect = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + width: 100, + height: 100, + angle: Math.PI / 4, + backgroundColor: "red", + fillStyle: "solid", + }); + + API.setElements([rect]); + + boxSelectTopLeftAabbCorner(rect); + + assertSelectedElements([]); + }); + + it("should not select a filled ellipse when the selection box only overlaps its bounds corner", () => { + const ellipse = API.createElement({ + type: "ellipse", + x: 0, + y: 0, + width: 100, + height: 100, + backgroundColor: "red", + fillStyle: "solid", + }); + + API.setElements([ellipse]); + + boxSelectTopRightAabbCorner(ellipse); + + assertSelectedElements([]); + }); + + it("should not select a filled diamond when the selection box only overlaps its bounds corner", () => { + const diamond = API.createElement({ + type: "diamond", + x: 0, + y: 0, + width: 100, + height: 100, + backgroundColor: "red", + fillStyle: "solid", + }); + + API.setElements([diamond]); + + boxSelectTopRightAabbCorner(diamond); + + assertSelectedElements([]); + }); + + it("should not select a filled rotated ellipse when the selection box only overlaps its axis-aligned bounds", () => { + const ellipse = API.createElement({ + type: "ellipse", + x: 0, + y: 0, + width: 100, + height: 100, + angle: Math.PI / 4, + backgroundColor: "red", + fillStyle: "solid", + }); + + API.setElements([ellipse]); + + boxSelectTopLeftRotatedLocalBoundsCorner(ellipse); + + assertSelectedElements([]); + }); + + it("should not select a filled rotated diamond when the selection box only overlaps its rotated local bounds", () => { + const diamond = API.createElement({ + type: "diamond", + x: 0, + y: 0, + width: 100, + height: 100, + angle: Math.PI / 4, + backgroundColor: "red", + fillStyle: "solid", + }); + + API.setElements([diamond]); + + boxSelectTopLeftRotatedLocalBoundsCorner(diamond); + + assertSelectedElements([]); + }); + + it("should not select rotated text when the selection box only overlaps its axis-aligned bounds", () => { + const text = API.createElement({ + type: "text", + x: 0, + y: 0, + width: 100, + height: 100, + angle: Math.PI / 4, + text: "test", + }); + + API.setElements([text]); + + boxSelect(-18, -18, -8, -8); + + assertSelectedElements([]); + }); + + it("should not select rotated image when the selection box only overlaps its axis-aligned bounds", () => { + const image = API.createElement({ + type: "image", + x: 0, + y: 0, + width: 100, + height: 100, + angle: Math.PI / 4, + fileId: "file_A", + status: "saved", + }); + + API.setElements([image]); + + boxSelect(-18, -18, -8, -8); + + assertSelectedElements([]); + }); + + it("should deselect a selected rotated rectangle when clicking in the empty corner of its axis-aligned bounds", () => { + const rect = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + width: 100, + height: 100, + angle: Math.PI / 4, + backgroundColor: "red", + fillStyle: "solid", + }); + + API.setElements([rect]); + + mouse.clickAt(50, 50); + assertSelectedElements([rect.id]); + + const sceneRect = API.getElement(rect); + const elementsMap = h.scene.getNonDeletedElementsMap(); + const [x1, y1] = getElementBounds(sceneRect, elementsMap); + + mouse.clickAt(x1 + 2, y1 + 2); + + assertSelectedElements([]); + }); + + it("should not select a line when the selection box only overlaps its bounds", () => { + const line = API.createElement({ + type: "line", + x: 0, + y: 0, + width: 100, + height: 100, + backgroundColor: "transparent", + points: [pointFrom(0, 0), pointFrom(100, 100)], + }); + + API.setElements([line]); + + boxSelect(20, 50, 30, 60); + + assertSelectedElements([]); + }); + + it("should not click-select rotated freedraw in the corner of its axis-aligned bounds", () => { + const freedraw = API.createElement({ + type: "freedraw", + x: 0, + y: 0, + width: 100, + height: 100, + angle: Math.PI / 4, + backgroundColor: "transparent", + points: [ + pointFrom(0, 0), + pointFrom(100, 0), + pointFrom(100, 100), + pointFrom(0, 100), + pointFrom(0, 0), + ], + }); + + API.setElements([freedraw]); + + const sceneFreedraw = API.getElement(freedraw); + const elementsMap = h.scene.getNonDeletedElementsMap(); + const [x1, y1] = getElementBounds(sceneFreedraw, elementsMap); + + mouse.clickAt(x1 + 2, y1 + 2); + + assertSelectedElements([]); + }); + + it("should not select a freedraw when the selection box only overlaps its bounds", () => { + const freedraw = API.createElement({ + type: "freedraw", + x: 0, + y: 0, + width: 100, + height: 100, + backgroundColor: "transparent", + points: [ + pointFrom(0, 0), + pointFrom(50, 50), + pointFrom(100, 100), + ], + }); + + API.setElements([freedraw]); + + boxSelect(20, 50, 30, 60); + + assertSelectedElements([]); + }); + + it("should not select a transparent framed element when the selection box stays inside its clipped bounds", () => { + const frame = API.createElement({ + type: "frame", + x: 0, + y: 0, + width: 100, + height: 100, + backgroundColor: "transparent", + fillStyle: "solid", + }); + const rect1 = API.createElement({ + type: "rectangle", + x: 50, + y: 10, + width: 100, + height: 80, + frameId: frame.id, + backgroundColor: "transparent", + fillStyle: "solid", + }); + + API.setElements([frame, rect1]); + + boxSelect(60, 20, 90, 60); + + assertSelectedElements([]); + }); }); describe("inner box-selection", () => { diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index cae4e7b93f..a41512fe64 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -269,6 +269,8 @@ export type ObservedElementsAppState = { activeLockedId: AppState["activeLockedId"]; }; +export type BoxSelectionMode = "contain" | "overlap"; + export interface AppState { contextMenu: { items: ContextMenuItems; @@ -307,6 +309,8 @@ export interface AppState { * `bindingPreference` and keyboard modifiers (ctrl/alt) */ isBindingEnabled: boolean; + /** user box selection preference; defaults to "contain" when unset */ + boxSelectionMode: BoxSelectionMode; /** user arrow binding preference */ bindingPreference: "enabled" | "disabled"; /** user preference whether arrow snap to midpoints while binding */ diff --git a/packages/math/src/curve.ts b/packages/math/src/curve.ts index 32f537f434..8e53727f84 100644 --- a/packages/math/src/curve.ts +++ b/packages/math/src/curve.ts @@ -137,8 +137,17 @@ const calculate = ( [t0, s0]: [number, number], l: LineSegment, c: Curve, + tolerance: number = 1e-2, + iterLimit: number = 4, ) => { - const solution = solveWithAnalyticalJacobian(c, l, t0, s0, 1e-2, 4); + const solution = solveWithAnalyticalJacobian( + c, + l, + t0, + s0, + tolerance, + iterLimit, + ); if (!solution) { return null; @@ -158,18 +167,43 @@ const calculate = ( */ export function curveIntersectLineSegment< Point extends GlobalPoint | LocalPoint, ->(c: Curve, l: LineSegment): Point[] { - let solution = calculate(initial_guesses[0], l, c); +>( + c: Curve, + l: LineSegment, + opts?: { + tolerance?: number; + iterLimit?: number; + }, +): Point[] { + let solution = calculate( + initial_guesses[0], + l, + c, + opts?.tolerance, + opts?.iterLimit, + ); if (solution) { return [solution]; } - solution = calculate(initial_guesses[1], l, c); + solution = calculate( + initial_guesses[1], + l, + c, + opts?.tolerance, + opts?.iterLimit, + ); if (solution) { return [solution]; } - solution = calculate(initial_guesses[2], l, c); + solution = calculate( + initial_guesses[2], + l, + c, + opts?.tolerance, + opts?.iterLimit, + ); if (solution) { return [solution]; } diff --git a/packages/utils/tests/__snapshots__/export.test.ts.snap b/packages/utils/tests/__snapshots__/export.test.ts.snap index affae46199..f59d0a9e84 100644 --- a/packages/utils/tests/__snapshots__/export.test.ts.snap +++ b/packages/utils/tests/__snapshots__/export.test.ts.snap @@ -13,6 +13,7 @@ exports[`exportToSvg > with default arguments 1`] = ` }, "bindMode": "orbit", "bindingPreference": "enabled", + "boxSelectionMode": "contain", "collaborators": Map {}, "contextMenu": null, "croppingElementId": null, diff --git a/scripts/woff2/woff2-vite-plugins.js b/scripts/woff2/woff2-vite-plugins.js index b62a76cffb..3870bbcdfc 100644 --- a/scripts/woff2/woff2-vite-plugins.js +++ b/scripts/woff2/woff2-vite-plugins.js @@ -90,6 +90,13 @@ module.exports.woff2BrowserPlugin = () => { type="font/woff2" crossorigin="anonymous" /> + Date: Thu, 2 Apr 2026 14:07:02 +0530 Subject: [PATCH 42/62] Fix typo in Discord badge URL parameter (#11096) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 74fc2c084f..48b9d1de9f 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ PRs welcome! - Chat on Discord + Chat on Discord Ask DeepWiki From 1caec99b290c75cda05385e637138998807a65ae Mon Sep 17 00:00:00 2001 From: Tom Louveau Date: Mon, 13 Apr 2026 10:30:58 +0200 Subject: [PATCH 43/62] docs: change twitter label by X (#11158) Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com> --- dev-docs/docusaurus.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dev-docs/docusaurus.config.js b/dev-docs/docusaurus.config.js index 4e8d75800a..d2b34843ee 100644 --- a/dev-docs/docusaurus.config.js +++ b/dev-docs/docusaurus.config.js @@ -97,8 +97,8 @@ const config = { href: "https://discord.gg/UexuTaE", }, { - label: "Twitter", - href: "https://twitter.com/excalidraw", + label: "𝕏", + href: "https://x.com/excalidraw", }, { label: "Linkedin", From b1c6bfcf40cba255d208d8d525060684b10cb3cc Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Mon, 20 Apr 2026 22:07:00 +0200 Subject: [PATCH 44/62] chore(docker): bump node (#11208) --- .codesandbox/Dockerfile | 2 +- Dockerfile | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.codesandbox/Dockerfile b/.codesandbox/Dockerfile index fd5b38d1e8..ce8c857650 100644 --- a/.codesandbox/Dockerfile +++ b/.codesandbox/Dockerfile @@ -1,4 +1,4 @@ -FROM node:18-bullseye +FROM node:24-bullseye # Vite wants to open the browser using `open`, so we # need to install those utils. diff --git a/Dockerfile b/Dockerfile index c08385d654..e15b425704 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM --platform=${BUILDPLATFORM} node:18 AS build +FROM --platform=${BUILDPLATFORM} node:24 AS build WORKDIR /opt/node_app @@ -13,7 +13,7 @@ ARG NODE_ENV=production RUN npm_config_target_arch=${TARGETARCH} yarn build:app:docker -FROM --platform=${TARGETPLATFORM} nginx:1.27-alpine +FROM nginx:1.27-alpine COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html From 2e1a529c6781b1534d27ca79198dccd40b97ec7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= Date: Sat, 25 Apr 2026 12:03:50 +0200 Subject: [PATCH 45/62] fix(editor): remove extremely large arrows on restore (#11235) * fix: Temp fix for elbow arrow at restore Co-authored-by: Copilot Signed-off-by: Mark Tolmacs * fix: Speculative fixes to avoid Infinity Co-authored-by: Copilot Signed-off-by: Mark Tolmacs * validate/remove arrow size after point normalization & move binding repairs back * validate even simple arrows * remove x/y check * remove duplicate constant --------- Signed-off-by: Mark Tolmacs Co-authored-by: Copilot Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com> --- packages/element/src/binding.ts | 10 +++--- packages/element/src/elbowArrow.ts | 4 +-- packages/excalidraw/data/restore.ts | 47 +++++++++++++++++++++++++---- packages/math/src/constants.ts | 2 -- 4 files changed, 49 insertions(+), 14 deletions(-) diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index 566ef3c4e4..3f80ffbae2 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -1943,9 +1943,9 @@ export const calculateFixedPointForElbowArrowBinding = ( return { fixedPoint: normalizeFixedPoint([ (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) / - hoveredElement.width, + Math.max(hoveredElement.width, PRECISION), (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) / - hoveredElement.height, + Math.max(hoveredElement.height, PRECISION), ]), }; }; @@ -1976,9 +1976,11 @@ export const calculateFixedPointForNonElbowArrowBinding = ( // Calculate the ratio relative to the element's bounds const fixedPointX = - (nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width; + (nonRotatedPoint[0] - hoveredElement.x) / + Math.max(hoveredElement.width, PRECISION); const fixedPointY = - (nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height; + (nonRotatedPoint[1] - hoveredElement.y) / + Math.max(hoveredElement.height, PRECISION); return { fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]), diff --git a/packages/element/src/elbowArrow.ts b/packages/element/src/elbowArrow.ts index 9543b4182f..024b846b12 100644 --- a/packages/element/src/elbowArrow.ts +++ b/packages/element/src/elbowArrow.ts @@ -2124,8 +2124,8 @@ const normalizeArrowElementUpdate = ( offsetY < -MAX_POS || offsetY > MAX_POS || offsetX + points[points.length - 1][0] < -MAX_POS || - offsetY + points[points.length - 1][0] > MAX_POS || - offsetX + points[points.length - 1][1] < -MAX_POS || + offsetX + points[points.length - 1][0] > MAX_POS || + offsetY + points[points.length - 1][1] < -MAX_POS || offsetY + points[points.length - 1][1] > MAX_POS ) { console.error( diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts index 7a8b9e586c..7ffe9b712f 100644 --- a/packages/excalidraw/data/restore.ts +++ b/packages/excalidraw/data/restore.ts @@ -96,6 +96,8 @@ type RestoredAppState = Omit< "offsetTop" | "offsetLeft" | "width" | "height" >; +const MAX_ARROW_PX = 75_000; + export const AllowedExcalidrawActiveTools: Record< AppState["activeTool"]["type"], boolean @@ -467,8 +469,8 @@ export const restoreElement = ( element.endArrowhead === undefined ? "arrow" : normalizeArrowhead(element.endArrowhead); - const x: number | undefined = element.x; - const y: number | undefined = element.y; + const x = element.x as number | undefined; + const y = element.y as number | undefined; const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one !Array.isArray(element.points) || element.points.length < 2 ? [pointFrom(0, 0), pointFrom(element.width, element.height)] @@ -493,8 +495,8 @@ export const restoreElement = ( startArrowhead, endArrowhead, points, - x, - y, + x: x ?? 0, + y: y ?? 0, elbowed: (element as ExcalidrawArrowElement).elbowed, ...getSizeFromPoints(points), }; @@ -513,12 +515,44 @@ export const restoreElement = ( }) : restoreElementWithProperties(element as ExcalidrawArrowElement, base); - return { + const normalizedRestoredElement = { ...restoredElement, ...LinearElementEditor.getNormalizeElementPointsAndCoords( restoredElement, ), }; + + // Last resort fix for extremely large arrows + if ( + normalizedRestoredElement.width > MAX_ARROW_PX || + normalizedRestoredElement.height > MAX_ARROW_PX + ) { + console.error( + `Removing extremely large arrow ${ + normalizedRestoredElement.id + } (type: ${ + isElbowArrow(normalizedRestoredElement) ? "elbow" : "simple" + }, width: ${normalizedRestoredElement.width}, height: ${ + normalizedRestoredElement.height + }, x: ${normalizedRestoredElement.x}, y: ${ + normalizedRestoredElement.y + })`, + ); + return { + ...normalizedRestoredElement, + x: 0, + y: 0, + width: 100, + height: 100, + points: [ + pointFrom(0, 0), + pointFrom(100, 100), + ], + isDeleted: true, + }; + } + + return normalizedRestoredElement; } // generic elements @@ -666,6 +700,7 @@ export const restoreElements = ( const existingElementsMap = existingElements ? arrayToMap(existingElements) : null; + const restoredElements = syncInvalidIndices( (targetElements || []).reduce((elements, element) => { // filtering out selection, which is legacy, no longer kept in elements, @@ -762,7 +797,7 @@ export const restoreElements = ( } } - // NOTE (mtolmacs): Temporary fix for extremely large arrows + // NOTE (mtolmacs): Temporary fix for invalid/self-bound elbow arrows // Need to iterate again so we have attached text nodes in elementsMap return restoredElements.map((element) => { if ( diff --git a/packages/math/src/constants.ts b/packages/math/src/constants.ts index ce39e42682..6ba5eb8f7f 100644 --- a/packages/math/src/constants.ts +++ b/packages/math/src/constants.ts @@ -1,5 +1,3 @@ -export const PRECISION = 10e-5; - // Legendre-Gauss abscissae (x values) and weights for n=24 // Refeerence: https://pomax.github.io/bezierinfo/legendre-gauss.html export const LegendreGaussN24TValues = [ From 43fa4b56028478f53dbb65045df1f9f7737c4321 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Tue, 28 Apr 2026 18:23:10 +0200 Subject: [PATCH 46/62] fix: frame selection and membership (#11250) fix: element fully overlapping frame --- packages/element/src/frame.ts | 6 ++- packages/element/src/selection.ts | 8 ++-- packages/element/tests/frame.test.tsx | 44 +++++++++++++++++++- packages/excalidraw/tests/selection.test.tsx | 26 ++++++++++++ 4 files changed, 76 insertions(+), 8 deletions(-) diff --git a/packages/element/src/frame.ts b/packages/element/src/frame.ts index 787c2692f9..6138633ff4 100644 --- a/packages/element/src/frame.ts +++ b/packages/element/src/frame.ts @@ -19,6 +19,7 @@ import { getElementAbsoluteCoords, doBoundsIntersect, getElementBounds, + boundsContainBounds, } from "./bounds"; import { mutateElement } from "./mutateElement"; import { getBoundTextElement, getContainerElement } from "./textElement"; @@ -101,8 +102,9 @@ export const isElementContainingFrame = ( frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap, ) => { - return getElementsWithinSelection([frame], element, elementsMap).some( - (e) => e.id === frame.id, + return boundsContainBounds( + getElementBounds(element, elementsMap), + getElementBounds(frame, elementsMap), ); }; diff --git a/packages/element/src/selection.ts b/packages/element/src/selection.ts index 8e9c4e8086..88bb1c2c80 100644 --- a/packages/element/src/selection.ts +++ b/packages/element/src/selection.ts @@ -34,7 +34,6 @@ import { elementOverlapsWithFrame, getContainingFrame, getFrameChildren, - isElementIntersectingFrame, } from "./frame"; import { LinearElementEditor } from "./linearElementEditor"; @@ -170,7 +169,7 @@ export const getElementsWithinSelection = ( const associatedFrame = getContainingFrame(element, elementsMap); if ( associatedFrame && - isElementIntersectingFrame(element, associatedFrame, elementsMap) + elementOverlapsWithFrame(element, associatedFrame, elementsMap) ) { const frameAABB = getElementBounds(associatedFrame, elementsMap); elementAABB = [ @@ -209,10 +208,9 @@ export const getElementsWithinSelection = ( if (boundsContainBounds(selectionBounds, commonAABB)) { if (framesInSelection && isFrameLikeElement(element)) { framesInSelection.add(element.id); - } else { - elementsInSelection.push(element); - continue; } + elementsInSelection.push(element); + continue; } // 2. Handle the case where the label is overlapped by the selection box diff --git a/packages/element/tests/frame.test.tsx b/packages/element/tests/frame.test.tsx index 47f2160ac3..e92267130a 100644 --- a/packages/element/tests/frame.test.tsx +++ b/packages/element/tests/frame.test.tsx @@ -2,6 +2,7 @@ import { convertToExcalidrawElements, Excalidraw, } from "@excalidraw/excalidraw"; +import { arrayToMap } from "@excalidraw/common"; import { API } from "@excalidraw/excalidraw/tests/helpers/api"; import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui"; @@ -10,7 +11,12 @@ import { render, } from "@excalidraw/excalidraw/tests/test-utils"; -import type { ExcalidrawElement } from "../src/types"; +import { elementOverlapsWithFrame } from "../src/frame"; + +import type { + ExcalidrawElement, + ExcalidrawFrameLikeElement, +} from "../src/types"; const { h } = window; const mouse = new Pointer("mouse"); @@ -125,6 +131,26 @@ describe("adding elements to frames", () => { }); }); + it("should treat an element fully containing a frame as overlapping the frame", () => { + const containingRect = API.createElement({ + type: "rectangle", + x: -50, + y: -50, + width: 250, + height: 250, + }); + + API.setElements([containingRect, frame]); + + expect( + elementOverlapsWithFrame( + containingRect, + frame as ExcalidrawFrameLikeElement, + arrayToMap(h.elements), + ), + ).toBe(true); + }); + const commonTestCases = async ( func: typeof resizeFrameOverElement | typeof dragElementIntoFrame, ) => { @@ -415,6 +441,22 @@ describe("adding elements to frames", () => { describe("dragging elements into the frame", async () => { await commonTestCases(dragElementIntoFrame); + it("should add a dragged element fully containing the frame", () => { + const containingRect = API.createElement({ + type: "rectangle", + x: 220, + y: 20, + width: 300, + height: 300, + }); + + API.setElements([frame, containingRect]); + + dragElementIntoFrame(frame, containingRect); + + expect(API.getElement(containingRect).frameId).toBe(frame.id); + }); + it.skip("should drag element inside, duplicate it and keep it in frame", () => { API.setElements([frame, rect2]); diff --git a/packages/excalidraw/tests/selection.test.tsx b/packages/excalidraw/tests/selection.test.tsx index ef0bd46b2c..5fd7a303d7 100644 --- a/packages/excalidraw/tests/selection.test.tsx +++ b/packages/excalidraw/tests/selection.test.tsx @@ -615,6 +615,32 @@ describe("box-selection overlap mode", () => { assertSelectedElements([]); }); + + it("should not select a framed element when selection only overlaps its clipped-out outline", () => { + const frame = API.createElement({ + type: "frame", + x: 100, + y: 100, + width: 100, + height: 100, + }); + const rect1 = API.createElement({ + type: "rectangle", + x: 50, + y: 50, + width: 200, + height: 200, + frameId: frame.id, + backgroundColor: "red", + fillStyle: "solid", + }); + + API.setElements([frame, rect1]); + + boxSelect(40, 170, 70, 220); + + assertSelectedElements([]); + }); }); describe("inner box-selection", () => { From 278cd357724b17e1119b6c76416520c42958d0e3 Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Tue, 28 Apr 2026 21:49:40 +0200 Subject: [PATCH 47/62] feat(editor): scale video embeddables based on zoom (#11251) --- packages/excalidraw/components/App.tsx | 75 +++++++++++++++++--------- packages/excalidraw/css/styles.scss | 8 +++ 2 files changed, 58 insertions(+), 25 deletions(-) diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 4db823c2d4..299304eb0e 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -603,6 +603,8 @@ const YOUTUBE_VIDEO_STATES = new Map< ValueOf >(); +const MAX_EMBEDDABLE_VIEWPORT_SCALE = 4; + let IS_PLAIN_PASTE = false; let IS_PLAIN_PASTE_TIMER = 0; let PLAIN_PASTE_TOAST_SHOWN = false; @@ -1735,6 +1737,18 @@ class App extends React.Component { this.state.activeEmbeddable?.element === el && this.state.activeEmbeddable?.state === "hover"; + // scale video embeds based on zoom (capped) so that smaller embeds + // on canvas when zoomed are still of legible quality + // (note: for some embed types like gdrive, the quality is poor when + // scaling mid playback and works only when you initially start the + // playback at the higher zoom level) + const shouldScaleEmbeddableViewport = src?.type === "video"; + const embeddableViewportScale = clamp( + shouldScaleEmbeddableViewport ? scale : 1, + 0.75, + MAX_EMBEDDABLE_VIEWPORT_SCALE, + ); + return (
{ padding: `${el.strokeWidth}px`, }} > - {(isEmbeddableElement(el) - ? this.props.renderEmbeddable?.(el, this.state) - : null) ?? ( -