From 931d03d514876859b539721e4ebd8798c74d9dd4 Mon Sep 17 00:00:00 2001 From: Marcel Mraz Date: Tue, 18 Mar 2025 11:54:51 +0100 Subject: [PATCH] Moved ShapeCache in element --- packages/element/global.d.ts | 3 ++ .../scene => element/src}/Shape.ts | 11 +++--- .../scene => element/src}/ShapeCache.ts | 13 +++++-- packages/element/src/bounds.ts | 3 +- .../scene => element/src}/comparisons.ts | 2 +- packages/element/src/linearElementEditor.ts | 5 ++- packages/element/src/mutateElement.ts | 3 +- .../renderer => element/src}/renderElement.ts | 37 +++++++++++-------- packages/element/src/shapes.ts | 2 +- .../excalidraw/actions/actionProperties.tsx | 3 +- packages/excalidraw/components/Actions.tsx | 3 +- packages/excalidraw/components/App.tsx | 6 ++- packages/excalidraw/components/LayerUI.tsx | 3 +- .../components/hyperlink/helpers.ts | 4 +- packages/excalidraw/fonts/Fonts.ts | 4 +- packages/excalidraw/index.tsx | 2 +- .../excalidraw/renderer/interactiveScene.ts | 3 +- .../renderer/renderNewElementScene.ts | 3 +- packages/excalidraw/renderer/staticScene.ts | 3 +- .../excalidraw/renderer/staticSvgScene.ts | 10 +++-- packages/excalidraw/scene/Scene.ts | 11 +++--- packages/excalidraw/scene/index.ts | 2 +- packages/excalidraw/vite-env.d.ts | 2 - 23 files changed, 84 insertions(+), 54 deletions(-) rename packages/{excalidraw/scene => element/src}/Shape.ts (98%) rename packages/{excalidraw/scene => element/src}/ShapeCache.ts (91%) rename packages/{excalidraw/scene => element/src}/comparisons.ts (94%) rename packages/{excalidraw/renderer => element/src}/renderElement.ts (98%) diff --git a/packages/element/global.d.ts b/packages/element/global.d.ts index 2f3f0e133..ee7c72526 100644 --- a/packages/element/global.d.ts +++ b/packages/element/global.d.ts @@ -2,6 +2,9 @@ interface ImportMetaEnv { MODE: string; DEV: string; PROD: string; + + // To enable bounding box for text containers + VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: string; } interface ImportMeta { diff --git a/packages/excalidraw/scene/Shape.ts b/packages/element/src/Shape.ts similarity index 98% rename from packages/excalidraw/scene/Shape.ts rename to packages/element/src/Shape.ts index 2d2b22ab8..33ee4c545 100644 --- a/packages/excalidraw/scene/Shape.ts +++ b/packages/element/src/Shape.ts @@ -1,9 +1,10 @@ -import { pointFrom, pointDistance, type LocalPoint } from "@excalidraw/math"; import { simplify } from "points-on-curve"; +import { pointFrom, pointDistance, type LocalPoint } from "@excalidraw/math"; import { ROUGHNESS, isTransparent, assertNever } from "@excalidraw/common"; import { getDiamondPoints, getArrowheadPoints } from "@excalidraw/element"; import { headingForPointIsHorizontal } from "@excalidraw/element/heading"; +import { getCornerRadius, isPathALoop } from "@excalidraw/element/shapes"; import { isElbowArrow, isEmbeddableElement, @@ -12,8 +13,6 @@ import { isLinearElement, } from "@excalidraw/element/typeChecks"; -import { getCornerRadius, isPathALoop } from "@excalidraw/element/shapes"; - import type { ExcalidrawElement, NonDeletedExcalidrawElement, @@ -22,12 +21,12 @@ import type { Arrowhead, } from "@excalidraw/element/types"; -import { generateFreeDrawShape } from "../renderer/renderElement"; +import type { EmbedsValidationStatus } from "@excalidraw/excalidraw/types"; +import type { ElementShapes } from "@excalidraw/excalidraw/scene/types"; import { canChangeRoundness } from "./comparisons"; +import { generateFreeDrawShape } from "./renderElement"; -import type { EmbedsValidationStatus } from "../types"; -import type { ElementShapes } from "./types"; import type { Drawable, Options } from "roughjs/bin/core"; import type { RoughGenerator } from "roughjs/bin/generator"; import type { Point as RoughPoint } from "roughjs/bin/geometry"; diff --git a/packages/excalidraw/scene/ShapeCache.ts b/packages/element/src/ShapeCache.ts similarity index 91% rename from packages/excalidraw/scene/ShapeCache.ts rename to packages/element/src/ShapeCache.ts index 53f2f96d7..517dc69f4 100644 --- a/packages/excalidraw/scene/ShapeCache.ts +++ b/packages/element/src/ShapeCache.ts @@ -7,12 +7,19 @@ import type { ExcalidrawSelectionElement, } from "@excalidraw/element/types"; -import { elementWithCanvasCache } from "../renderer/renderElement"; +import type { + AppState, + EmbedsValidationStatus, +} from "@excalidraw/excalidraw/types"; +import type { + ElementShape, + ElementShapes, +} from "@excalidraw/excalidraw/scene/types"; import { _generateElementShape } from "./Shape"; -import type { AppState, EmbedsValidationStatus } from "../types"; -import type { ElementShape, ElementShapes } from "./types"; +import { elementWithCanvasCache } from "./renderElement"; + import type { Drawable } from "roughjs/bin/core"; export class ShapeCache { diff --git a/packages/element/src/bounds.ts b/packages/element/src/bounds.ts index 0fc428a5a..225a78ba6 100644 --- a/packages/element/src/bounds.ts +++ b/packages/element/src/bounds.ts @@ -12,8 +12,7 @@ import { } from "@excalidraw/math"; import { getCurvePathOps } from "@excalidraw/utils/geometry/shape"; -import { generateRoughOptions } from "@excalidraw/excalidraw/scene/Shape"; -import { ShapeCache } from "@excalidraw/excalidraw/scene/ShapeCache"; +import { generateRoughOptions } from "@excalidraw/element/Shape"; import type { Degrees, diff --git a/packages/excalidraw/scene/comparisons.ts b/packages/element/src/comparisons.ts similarity index 94% rename from packages/excalidraw/scene/comparisons.ts rename to packages/element/src/comparisons.ts index 9af3e66cb..75fac889d 100644 --- a/packages/excalidraw/scene/comparisons.ts +++ b/packages/element/src/comparisons.ts @@ -1,4 +1,4 @@ -import type { ElementOrToolType } from "../types"; +import type { ElementOrToolType } from "@excalidraw/excalidraw/types"; export const hasBackground = (type: ElementOrToolType) => type === "rectangle" || diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts index 264a24b41..8a4e0c856 100644 --- a/packages/element/src/linearElementEditor.ts +++ b/packages/element/src/linearElementEditor.ts @@ -19,7 +19,6 @@ import { invariant, tupleToCoors, } from "@excalidraw/common"; -import { ShapeCache } from "@excalidraw/excalidraw/scene/ShapeCache"; import { getBezierCurveLength, @@ -29,6 +28,8 @@ import { mapIntervalToBezierT, } from "@excalidraw/element"; +import type { Store } from "@excalidraw/excalidraw/store"; + import type { Radians } from "@excalidraw/math"; import type Scene from "@excalidraw/excalidraw/scene/Scene"; @@ -59,6 +60,8 @@ import { isFixedPointBinding, } from "./typeChecks"; +import { ShapeCache } from "./ShapeCache"; + import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from "./"; import type { Bounds } from "./bounds"; diff --git a/packages/element/src/mutateElement.ts b/packages/element/src/mutateElement.ts index 3f0604354..236eb62ce 100644 --- a/packages/element/src/mutateElement.ts +++ b/packages/element/src/mutateElement.ts @@ -10,7 +10,8 @@ import type { Radians } from "@excalidraw/math"; import type { Mutable } from "@excalidraw/excalidraw/utility-types"; import Scene from "../scene/Scene"; -import { ShapeCache } from "../scene/ShapeCache"; + +import { ShapeCache } from "./ShapeCache"; import { updateElbowArrowPoints } from "./elbowArrow"; import { isElbowArrow } from "./typeChecks"; diff --git a/packages/excalidraw/renderer/renderElement.ts b/packages/element/src/renderElement.ts similarity index 98% rename from packages/excalidraw/renderer/renderElement.ts rename to packages/element/src/renderElement.ts index 84a013164..fbe3c0d52 100644 --- a/packages/excalidraw/renderer/renderElement.ts +++ b/packages/element/src/renderElement.ts @@ -1,6 +1,7 @@ -import { isRightAngleRads } from "@excalidraw/math"; -import { getStroke } from "perfect-freehand"; import rough from "roughjs/bin/rough"; +import { getStroke } from "perfect-freehand"; + +import { isRightAngleRads } from "@excalidraw/math"; import { BOUND_TEXT_PADDING, @@ -37,6 +38,9 @@ import { import { getContainingFrame } from "@excalidraw/element/frame"; import { getCornerRadius } from "@excalidraw/element/shapes"; +// TODO: consider separating +import { getVerticalOffset } from "@excalidraw/excalidraw/fonts/FontMetadata"; + import type { ExcalidrawElement, ExcalidrawTextElement, @@ -49,15 +53,6 @@ import type { ElementsMap, } from "@excalidraw/element/types"; -import { getDefaultAppState } from "../appState"; -import { getVerticalOffset } from "../fonts/FontMetadata"; -import { ShapeCache } from "../scene/ShapeCache"; - -import type { - StaticCanvasRenderConfig, - RenderableElementsMap, - InteractiveCanvasRenderConfig, -} from "../scene/types"; import type { AppState, StaticCanvasAppState, @@ -65,7 +60,17 @@ import type { InteractiveCanvasAppState, ElementsPendingErasure, PendingExcalidrawElements, -} from "../types"; + NormalizedZoomValue, +} from "@excalidraw/excalidraw/types"; + +import type { + StaticCanvasRenderConfig, + RenderableElementsMap, + InteractiveCanvasRenderConfig, +} from "@excalidraw/excalidraw/scene/types"; + +import { ShapeCache } from "./ShapeCache"; + import type { StrokeOptions } from "perfect-freehand"; import type { RoughCanvas } from "roughjs/bin/canvas"; @@ -76,8 +81,6 @@ import type { RoughCanvas } from "roughjs/bin/canvas"; export const IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)"; -const defaultAppState = getDefaultAppState(); - const isPendingImageElement = ( element: ExcalidrawElement, renderConfig: StaticCanvasRenderConfig, @@ -537,7 +540,11 @@ const generateElementWithCanvas = ( renderConfig: StaticCanvasRenderConfig, appState: StaticCanvasAppState, ) => { - const zoom: Zoom = renderConfig ? appState.zoom : defaultAppState.zoom; + const zoom: Zoom = renderConfig + ? appState.zoom + : { + value: 1 as NormalizedZoomValue, + }; const prevElementWithCanvas = elementWithCanvasCache.get(element); const shouldRegenerateBecauseZoom = prevElementWithCanvas && diff --git a/packages/element/src/shapes.ts b/packages/element/src/shapes.ts index cff01b9ac..61e355742 100644 --- a/packages/element/src/shapes.ts +++ b/packages/element/src/shapes.ts @@ -30,7 +30,7 @@ import type { NormalizedZoomValue, Zoom } from "@excalidraw/excalidraw/types"; import { shouldTestInside } from "./collision"; import { LinearElementEditor } from "./linearElementEditor"; import { getBoundTextElement } from "./textElement"; -import { ShapeCache } from "./scene/ShapeCache"; +import { ShapeCache } from "./ShapeCache"; import { getElementAbsoluteCoords } from "./"; diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index 43818e7bb..0ca2eef3b 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -52,6 +52,8 @@ import { isUsingAdaptiveRadius, } from "@excalidraw/element/typeChecks"; +import { hasStrokeColor } from "@excalidraw/element/comparisons"; + import type { LocalPoint } from "@excalidraw/math"; import type { @@ -128,7 +130,6 @@ import { getTargetElements, isSomeElementSelected, } from "../scene"; -import { hasStrokeColor } from "../scene/comparisons"; import { CaptureUpdateAction } from "../store"; import { register } from "./register"; diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx index 53b1efb72..b69204867 100644 --- a/packages/excalidraw/components/Actions.tsx +++ b/packages/excalidraw/components/Actions.tsx @@ -21,6 +21,8 @@ import { isTextElement, } from "@excalidraw/element/typeChecks"; +import { hasStrokeColor, toolIsArrow } from "@excalidraw/element/comparisons"; + import type { ExcalidrawElement, ExcalidrawElementType, @@ -43,7 +45,6 @@ import { hasStrokeStyle, hasStrokeWidth, } from "../scene"; -import { hasStrokeColor, toolIsArrow } from "../scene/comparisons"; import { SHAPES } from "./shapes"; diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 5fd2ea030..53caf2959 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -270,6 +270,10 @@ import { getMinTextElementWidth, } from "@excalidraw/element/textMeasurements"; +import { ShapeCache } from "@excalidraw/element/ShapeCache"; + +import { getRenderOpacity } from "@excalidraw/element/renderElement"; + import type { LocalPoint, Radians } from "@excalidraw/math"; import type { @@ -428,7 +432,6 @@ import { } from "../snapping"; import { convertToExcalidrawElements } from "../data/transform"; import { Renderer } from "../scene/Renderer"; -import { ShapeCache } from "../scene/ShapeCache"; import { setEraserCursor, setCursor, @@ -441,7 +444,6 @@ import { Store, CaptureUpdateAction } from "../store"; import { AnimatedTrail } from "../animated-trail"; import { LaserTrails } from "../laser-trails"; import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils"; -import { getRenderOpacity } from "../renderer/renderElement"; import { textWysiwyg } from "../wysiwyg/textWysiwyg"; import { isOverScrollBars } from "../scene/scrollbars"; import { syncInvalidIndices, syncMovedIndices } from "../fractionalIndex"; diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index e08956c08..340d3b84c 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/packages/excalidraw/components/LayerUI.tsx @@ -13,9 +13,10 @@ import { mutateElement } from "@excalidraw/element/mutateElement"; import { showSelectedShapeActions } from "@excalidraw/element"; +import { ShapeCache } from "@excalidraw/element/ShapeCache"; + import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types"; -import { ShapeCache } from "../scene/ShapeCache"; import Scene from "../scene/Scene"; import { actionToggleStats } from "../actions"; import { trackEvent } from "../analytics"; diff --git a/packages/excalidraw/components/hyperlink/helpers.ts b/packages/excalidraw/components/hyperlink/helpers.ts index b5140f485..d1345db98 100644 --- a/packages/excalidraw/components/hyperlink/helpers.ts +++ b/packages/excalidraw/components/hyperlink/helpers.ts @@ -4,6 +4,8 @@ import { MIME_TYPES } from "@excalidraw/common"; import { getElementAbsoluteCoords } from "@excalidraw/element/bounds"; import { hitElementBoundingBox } from "@excalidraw/element/collision"; +import { DEFAULT_LINK_SIZE } from "@excalidraw/element/renderElement"; + import type { GlobalPoint, Radians } from "@excalidraw/math"; import type { Bounds } from "@excalidraw/element/bounds"; @@ -12,8 +14,6 @@ import type { NonDeletedExcalidrawElement, } from "@excalidraw/element/types"; -import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement"; - import type { AppState, UIAppState } from "../../types"; export const EXTERNAL_LINK_IMG = document.createElement("img"); diff --git a/packages/excalidraw/fonts/Fonts.ts b/packages/excalidraw/fonts/Fonts.ts index dba294546..fcc4e7642 100644 --- a/packages/excalidraw/fonts/Fonts.ts +++ b/packages/excalidraw/fonts/Fonts.ts @@ -12,13 +12,13 @@ import { containsCJK } from "@excalidraw/element/textWrapping"; import { getFontString, PromisePool, promiseTry } from "@excalidraw/common"; +import { ShapeCache } from "@excalidraw/element/ShapeCache"; + import type { ExcalidrawElement, ExcalidrawTextElement, } from "@excalidraw/element/types"; -import { ShapeCache } from "../scene/ShapeCache"; - import { CascadiaFontFaces } from "./Cascadia"; import { ComicShannsFontFaces } from "./ComicShanns"; import { EmojiFontFaces } from "./Emoji"; diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx index 4ff7b38c2..40f22de8f 100644 --- a/packages/excalidraw/index.tsx +++ b/packages/excalidraw/index.tsx @@ -242,7 +242,7 @@ export { loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "./data/blob"; -export { getFreeDrawSvgPath } from "./renderer/renderElement"; +export { getFreeDrawSvgPath } from "@excalidraw/element/renderElement"; export { mergeLibraryItems, getLibraryItemsHash } from "./data/library"; export { isLinearElement } from "@excalidraw/element/typeChecks"; diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts index 5fd64af5f..6f6820034 100644 --- a/packages/excalidraw/renderer/interactiveScene.ts +++ b/packages/excalidraw/renderer/interactiveScene.ts @@ -40,6 +40,8 @@ import { import { getCornerRadius } from "@excalidraw/element/shapes"; +import { renderSelectionElement } from "@excalidraw/element/renderElement"; + import type { SuggestedBinding, SuggestedPointBinding, @@ -68,7 +70,6 @@ import { getElementsInGroup, selectGroupsFromGivenElements, } from "../groups"; -import { renderSelectionElement } from "../renderer/renderElement"; import { renderSnaps } from "../renderer/renderSnaps"; import { roundRect } from "../renderer/roundRect"; import { diff --git a/packages/excalidraw/renderer/renderNewElementScene.ts b/packages/excalidraw/renderer/renderNewElementScene.ts index 16b191401..bbc14654a 100644 --- a/packages/excalidraw/renderer/renderNewElementScene.ts +++ b/packages/excalidraw/renderer/renderNewElementScene.ts @@ -1,7 +1,8 @@ import { throttleRAF } from "@excalidraw/common"; +import { renderElement } from "@excalidraw/element/renderElement"; + import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers"; -import { renderElement } from "./renderElement"; import type { NewElementSceneRenderConfig } from "../scene/types"; diff --git a/packages/excalidraw/renderer/staticScene.ts b/packages/excalidraw/renderer/staticScene.ts index ac19776c6..9a84145ec 100644 --- a/packages/excalidraw/renderer/staticScene.ts +++ b/packages/excalidraw/renderer/staticScene.ts @@ -14,6 +14,8 @@ import { shouldApplyFrameClip, } from "@excalidraw/element/frame"; +import { renderElement } from "@excalidraw/element/renderElement"; + import type { ElementsMap, ExcalidrawFrameLikeElement, @@ -25,7 +27,6 @@ import { ELEMENT_LINK_IMG, getLinkHandleFromCoords, } from "../components/hyperlink/helpers"; -import { renderElement } from "../renderer/renderElement"; import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers"; diff --git a/packages/excalidraw/renderer/staticSvgScene.ts b/packages/excalidraw/renderer/staticSvgScene.ts index 12cf9293c..60f7d366d 100644 --- a/packages/excalidraw/renderer/staticSvgScene.ts +++ b/packages/excalidraw/renderer/staticSvgScene.ts @@ -31,6 +31,13 @@ import { getContainingFrame } from "@excalidraw/element/frame"; import { getCornerRadius, isPathALoop } from "@excalidraw/element/shapes"; +import { ShapeCache } from "@excalidraw/element/ShapeCache"; + +import { + getFreeDrawSvgPath, + IMAGE_INVERT_FILTER, +} from "@excalidraw/element/renderElement"; + import type { ExcalidrawElement, ExcalidrawTextElementWithContainer, @@ -38,9 +45,6 @@ import type { } from "@excalidraw/element/types"; import { getVerticalOffset } from "../fonts/FontMetadata"; -import { ShapeCache } from "../scene/ShapeCache"; - -import { getFreeDrawSvgPath, IMAGE_INVERT_FILTER } from "./renderElement"; import type { RenderableElementsMap, SVGRenderConfig } from "../scene/types"; import type { AppState, BinaryFiles } from "../types"; diff --git a/packages/excalidraw/scene/Scene.ts b/packages/excalidraw/scene/Scene.ts index e9b044acb..eb8e66e17 100644 --- a/packages/excalidraw/scene/Scene.ts +++ b/packages/excalidraw/scene/Scene.ts @@ -1,13 +1,14 @@ import throttle from "lodash.throttle"; -import { ENV } from "@excalidraw/common"; +import { + ENV, + randomInteger, + arrayToMap, + toBrandedType, +} from "@excalidraw/common"; import { isNonDeletedElement } from "@excalidraw/element"; import { isFrameLikeElement } from "@excalidraw/element/typeChecks"; -import { randomInteger } from "@excalidraw/common"; -import { arrayToMap } from "@excalidraw/common"; -import { toBrandedType } from "@excalidraw/common"; - import type { LinearElementEditor } from "@excalidraw/element/linearElementEditor"; import type { ExcalidrawElement, diff --git a/packages/excalidraw/scene/index.ts b/packages/excalidraw/scene/index.ts index 1c0b795f1..3819d3ab4 100644 --- a/packages/excalidraw/scene/index.ts +++ b/packages/excalidraw/scene/index.ts @@ -12,7 +12,7 @@ export { hasStrokeStyle, canHaveArrowheads, canChangeRoundness, -} from "./comparisons"; +} from "@excalidraw/element/comparisons"; export { getNormalizedZoom, getNormalizedGridSize, diff --git a/packages/excalidraw/vite-env.d.ts b/packages/excalidraw/vite-env.d.ts index 4292e3b6a..ec22bcbf6 100644 --- a/packages/excalidraw/vite-env.d.ts +++ b/packages/excalidraw/vite-env.d.ts @@ -34,8 +34,6 @@ interface ImportMetaEnv { //Debug flags - // To enable bounding box for text containers - VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: string; VITE_APP_DISABLE_SENTRY: string; // Set this flag to false if you want to open the overlay by default VITE_APP_COLLAPSE_OVERLAY: string;