diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts index d7ccb17bf7..e7053b181b 100644 --- a/packages/common/src/utils.ts +++ b/packages/common/src/utils.ts @@ -680,7 +680,7 @@ export const arrayToMap = ( return items.reduce((acc: Map, element) => { acc.set(typeof element === "string" ? element : element.id, element); return acc; - }, new Map()); + }, new Map() as Map); }; export const arrayToMapWithIndex = ( diff --git a/packages/excalidraw/scene/Scene.ts b/packages/element/src/Scene.ts similarity index 85% rename from packages/excalidraw/scene/Scene.ts rename to packages/element/src/Scene.ts index 5afe3a4c59..b35c54cae1 100644 --- a/packages/excalidraw/scene/Scene.ts +++ b/packages/element/src/Scene.ts @@ -13,6 +13,7 @@ import { isFrameLikeElement } from "@excalidraw/element/typeChecks"; import { getElementsInGroup } from "@excalidraw/element/groups"; import { + orderByFractionalIndex, syncInvalidIndices, syncMovedIndices, validateFractionalIndices, @@ -20,7 +21,11 @@ import { import { getSelectedElements } from "@excalidraw/element/selection"; -import type { LinearElementEditor } from "@excalidraw/element/linearElementEditor"; +import { + mutateElement, + type ElementUpdate, +} from "@excalidraw/element/mutateElement"; + import type { ExcalidrawElement, NonDeletedExcalidrawElement, @@ -33,12 +38,13 @@ import type { Ordered, } from "@excalidraw/element/types"; -import type { Assert, SameType } from "@excalidraw/common/utility-types"; +import type { + Assert, + Mutable, + SameType, +} from "@excalidraw/common/utility-types"; -import type { AppState } from "../types"; - -type ElementIdKey = InstanceType["elementId"]; -type ElementKey = ExcalidrawElement | ElementIdKey; +import type { AppState } from "../../excalidraw/types"; type SceneStateCallback = () => void; type SceneStateCallbackRemover = () => void; @@ -103,44 +109,7 @@ const hashSelectionOpts = ( // in our codebase export type ExcalidrawElementsIncludingDeleted = readonly ExcalidrawElement[]; -const isIdKey = (elementKey: ElementKey): elementKey is ElementIdKey => { - if (typeof elementKey === "string") { - return true; - } - return false; -}; - class Scene { - // --------------------------------------------------------------------------- - // static methods/props - // --------------------------------------------------------------------------- - - private static sceneMapByElement = new WeakMap(); - private static sceneMapById = new Map(); - - static mapElementToScene(elementKey: ElementKey, scene: Scene) { - if (isIdKey(elementKey)) { - // for cases where we don't have access to the element object - // (e.g. restore serialized appState with id references) - this.sceneMapById.set(elementKey, scene); - } else { - this.sceneMapByElement.set(elementKey, scene); - // if mapping element objects, also cache the id string when later - // looking up by id alone - this.sceneMapById.set(elementKey.id, scene); - } - } - - /** - * @deprecated pass down `app.scene` and use it directly - */ - static getScene(elementKey: ElementKey): Scene | null { - if (isIdKey(elementKey)) { - return this.sceneMapById.get(elementKey) || null; - } - return this.sceneMapByElement.get(elementKey) || null; - } - // --------------------------------------------------------------------------- // instance methods/props // --------------------------------------------------------------------------- @@ -199,6 +168,12 @@ class Scene { return this.frames; } + constructor(elements: ElementsMapOrArray | null = null) { + if (elements) { + this.replaceAllElements(elements); + } + } + getSelectedElements(opts: { // NOTE can be ommitted by making Scene constructor require App instance selectedElementIds: AppState["selectedElementIds"]; @@ -293,21 +268,25 @@ class Scene { } replaceAllElements(nextElements: ElementsMapOrArray) { - const _nextElements = isReadonlyArray(nextElements) - ? nextElements - : Array.from(nextElements.values()); + // ts doesn't like `Array.isArray` of `instanceof Map` + if (!isReadonlyArray(nextElements)) { + // need to order by fractional indices to get the correct order + nextElements = orderByFractionalIndex( + Array.from(nextElements.values()) as OrderedExcalidrawElement[], + ); + } + const nextFrameLikes: ExcalidrawFrameLikeElement[] = []; - validateIndicesThrottled(_nextElements); + validateIndicesThrottled(nextElements); - this.elements = syncInvalidIndices(_nextElements); + this.elements = syncInvalidIndices(nextElements); this.elementsMap.clear(); this.elements.forEach((element) => { if (isFrameLikeElement(element)) { nextFrameLikes.push(element); } this.elementsMap.set(element.id, element); - Scene.mapElementToScene(element, this); }); const nonDeletedElements = getNonDeletedElements(this.elements); this.nonDeletedElements = nonDeletedElements.elements; @@ -352,12 +331,6 @@ class Scene { this.selectedElementsCache.elements = null; this.selectedElementsCache.cache.clear(); - Scene.sceneMapById.forEach((scene, elementKey) => { - if (scene === this) { - Scene.sceneMapById.delete(elementKey); - } - }); - // done not for memory leaks, but to guard against possible late fires // (I guess?) this.callbacks.clear(); @@ -454,6 +427,42 @@ class Scene { // then, check if the id is a group return getElementsInGroup(elementsMap, id); }; + + // Mutate an element with passed updates and trigger the component to update. Make sure you + // are calling it either from a React event handler or within unstable_batchedUpdates(). + mutateElement>( + element: TElement, + updates: ElementUpdate, + options: { + informMutation: boolean; + isDragging: boolean; + } = { + informMutation: true, + isDragging: false, + }, + ) { + const elementsMap = this.getNonDeletedElementsMap(); + + const { version: prevVersion } = element; + const { version: nextVersion } = mutateElement( + element, + elementsMap, + updates, + options, + ); + + if ( + // skip if the element is not in the scene (i.e. selection) + this.elementsMap.has(element.id) && + // skip if the element's version hasn't changed, as mutateElement returned the same element + prevVersion !== nextVersion && + options.informMutation + ) { + this.triggerUpdate(); + } + + return element; + } } export default Scene; diff --git a/packages/element/src/align.ts b/packages/element/src/align.ts index 61535b4348..b6dd4d4548 100644 --- a/packages/element/src/align.ts +++ b/packages/element/src/align.ts @@ -1,12 +1,11 @@ -import type Scene from "@excalidraw/excalidraw/scene/Scene"; - import { updateBoundElements } from "./binding"; import { getCommonBoundingBox } from "./bounds"; -import { mutateElement } from "./mutateElement"; import { getMaximumGroups } from "./groups"; +import type Scene from "./Scene"; + import type { BoundingBox } from "./bounds"; -import type { ElementsMap, ExcalidrawElement } from "./types"; +import type { ExcalidrawElement } from "./types"; export interface Alignment { position: "start" | "center" | "end"; @@ -15,10 +14,10 @@ export interface Alignment { export const alignElements = ( selectedElements: ExcalidrawElement[], - elementsMap: ElementsMap, alignment: Alignment, scene: Scene, ): ExcalidrawElement[] => { + const elementsMap = scene.getNonDeletedElementsMap(); const groups: ExcalidrawElement[][] = getMaximumGroups( selectedElements, elementsMap, @@ -33,12 +32,13 @@ export const alignElements = ( ); return group.map((element) => { // update element - const updatedEle = mutateElement(element, { + const updatedEle = scene.mutateElement(element, { x: element.x + translation.x, y: element.y + translation.y, }); + // update bound elements - updateBoundElements(element, scene.getNonDeletedElementsMap(), { + updateBoundElements(element, scene, { simultaneouslyUpdated: group, }); return updatedEle; diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index 1d39ce2f06..96d8a42801 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -31,8 +31,6 @@ import { isPointOnShape } from "@excalidraw/utils/collision"; import type { LocalPoint, Radians } from "@excalidraw/math"; -import type Scene from "@excalidraw/excalidraw/scene/Scene"; - import type { AppState } from "@excalidraw/excalidraw/types"; import type { Mutable } from "@excalidraw/common/utility-types"; @@ -68,6 +66,8 @@ import { import { aabbForElement, getElementShape, pointInsideBounds } from "./shapes"; import { updateElbowArrowPoints } from "./elbowArrow"; +import type Scene from "./Scene"; + import type { Bounds } from "./bounds"; import type { ElementUpdate } from "./mutateElement"; import type { @@ -84,7 +84,6 @@ import type { OrderedExcalidrawElement, ExcalidrawElbowArrowElement, FixedPoint, - SceneElementsMap, FixedPointBinding, } from "./types"; @@ -130,7 +129,6 @@ export const bindOrUnbindLinearElement = ( linearElement: NonDeleted, startBindingElement: ExcalidrawBindableElement | null | "keep", endBindingElement: ExcalidrawBindableElement | null | "keep", - elementsMap: NonDeletedSceneElementsMap, scene: Scene, ): void => { const boundToElementIds: Set = new Set(); @@ -142,7 +140,7 @@ export const bindOrUnbindLinearElement = ( "start", boundToElementIds, unboundFromElementIds, - elementsMap, + scene, ); bindOrUnbindLinearElementEdge( linearElement, @@ -151,7 +149,7 @@ export const bindOrUnbindLinearElement = ( "end", boundToElementIds, unboundFromElementIds, - elementsMap, + scene, ); const onlyUnbound = Array.from(unboundFromElementIds).filter( @@ -159,7 +157,7 @@ export const bindOrUnbindLinearElement = ( ); getNonDeletedElements(scene, onlyUnbound).forEach((element) => { - mutateElement(element, { + scene.mutateElement(element, { boundElements: element.boundElements?.filter( (element) => element.type !== "arrow" || element.id !== linearElement.id, @@ -177,7 +175,7 @@ const bindOrUnbindLinearElementEdge = ( boundToElementIds: Set, // Is mutated unboundFromElementIds: Set, - elementsMap: NonDeletedSceneElementsMap, + scene: Scene, ): void => { // "keep" is for method chaining convenience, a "no-op", so just bail out if (bindableElement === "keep") { @@ -186,7 +184,7 @@ const bindOrUnbindLinearElementEdge = ( // null means break the bind, so nothing to consider here if (bindableElement === null) { - const unbound = unbindLinearElement(linearElement, startOrEnd); + const unbound = unbindLinearElement(linearElement, startOrEnd, scene); if (unbound != null) { unboundFromElementIds.add(unbound); } @@ -209,16 +207,11 @@ const bindOrUnbindLinearElementEdge = ( : startOrEnd === "start" || otherEdgeBindableElement.id !== bindableElement.id) ) { - bindLinearElement( - linearElement, - bindableElement, - startOrEnd, - elementsMap, - ); + bindLinearElement(linearElement, bindableElement, startOrEnd, scene); boundToElementIds.add(bindableElement.id); } } else { - bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap); + bindLinearElement(linearElement, bindableElement, startOrEnd, scene); boundToElementIds.add(bindableElement.id); } }; @@ -362,11 +355,9 @@ const getBindingStrategyForDraggingArrowOrJoints = ( export const bindOrUnbindLinearElements = ( selectedElements: NonDeleted[], - elementsMap: NonDeletedSceneElementsMap, - elements: readonly NonDeletedExcalidrawElement[], - scene: Scene, isBindingEnabled: boolean, draggingPoints: readonly number[] | null, + scene: Scene, zoom?: AppState["zoom"], ): void => { selectedElements.forEach((selectedElement) => { @@ -376,20 +367,20 @@ export const bindOrUnbindLinearElements = ( selectedElement, isBindingEnabled, draggingPoints ?? [], - elementsMap, - elements, + scene.getNonDeletedElementsMap(), + scene.getNonDeletedElements(), zoom, ) : // The arrow itself (the shaft) or the inner joins are dragged getBindingStrategyForDraggingArrowOrJoints( selectedElement, - elementsMap, - elements, + scene.getNonDeletedElementsMap(), + scene.getNonDeletedElements(), isBindingEnabled, zoom, ); - bindOrUnbindLinearElement(selectedElement, start, end, elementsMap, scene); + bindOrUnbindLinearElement(selectedElement, start, end, scene); }); }; @@ -429,15 +420,17 @@ export const maybeBindLinearElement = ( linearElement: NonDeleted, appState: AppState, pointerCoords: { x: number; y: number }, - elementsMap: NonDeletedSceneElementsMap, - elements: readonly NonDeletedExcalidrawElement[], + scene: Scene, ): void => { + const elements = scene.getNonDeletedElements(); + const elementsMap = scene.getNonDeletedElementsMap(); + if (appState.startBoundElement != null) { bindLinearElement( linearElement, appState.startBoundElement, "start", - elementsMap, + scene, ); } @@ -458,7 +451,7 @@ export const maybeBindLinearElement = ( "end", ) ) { - bindLinearElement(linearElement, hoveredElement, "end", elementsMap); + bindLinearElement(linearElement, hoveredElement, "end", scene); } } }; @@ -487,7 +480,7 @@ export const bindLinearElement = ( linearElement: NonDeleted, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", - elementsMap: NonDeletedSceneElementsMap, + scene: Scene, ): void => { if (!isArrowElement(linearElement)) { return; @@ -500,7 +493,7 @@ export const bindLinearElement = ( linearElement, hoveredElement, startOrEnd, - elementsMap, + scene.getNonDeletedElementsMap(), ), hoveredElement, ), @@ -513,18 +506,17 @@ export const bindLinearElement = ( linearElement, hoveredElement, startOrEnd, - elementsMap, ), }; } - mutateElement(linearElement, { + scene.mutateElement(linearElement, { [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding, }); const boundElementsMap = arrayToMap(hoveredElement.boundElements || []); if (!boundElementsMap.has(linearElement.id)) { - mutateElement(hoveredElement, { + scene.mutateElement(hoveredElement, { boundElements: (hoveredElement.boundElements || []).concat({ id: linearElement.id, type: "arrow", @@ -566,13 +558,14 @@ const isLinearElementSimple = ( const unbindLinearElement = ( linearElement: NonDeleted, startOrEnd: "start" | "end", + scene: Scene, ): ExcalidrawBindableElement["id"] | null => { const field = startOrEnd === "start" ? "startBinding" : "endBinding"; const binding = linearElement[field]; if (binding == null) { return null; } - mutateElement(linearElement, { [field]: null }); + scene.mutateElement(linearElement, { [field]: null }); return binding.elementId; }; @@ -740,7 +733,7 @@ const calculateFocusAndGap = ( // in explicitly. export const updateBoundElements = ( changedElement: NonDeletedExcalidrawElement, - elementsMap: NonDeletedSceneElementsMap | SceneElementsMap, + scene: Scene, options?: { simultaneouslyUpdated?: readonly ExcalidrawElement[]; newSize?: { width: number; height: number }; @@ -756,6 +749,8 @@ export const updateBoundElements = ( return; } + const elementsMap = scene.getNonDeletedElementsMap(); + boundElementsVisitor(elementsMap, changedElement, (element) => { if (!isLinearElement(element) || element.isDeleted) { return; @@ -796,7 +791,7 @@ export const updateBoundElements = ( // `linearElement` is being moved/scaled already, just update the binding if (simultaneouslyUpdatedElementIds.has(element.id)) { - mutateElement(element, bindings, true); + scene.mutateElement(element, bindings); return; } @@ -843,23 +838,18 @@ export const updateBoundElements = ( }> => update !== null, ); - LinearElementEditor.movePoints( - element, - updates, - { - ...(changedElement.id === element.startBinding?.elementId - ? { startBinding: bindings.startBinding } - : {}), - ...(changedElement.id === element.endBinding?.elementId - ? { endBinding: bindings.endBinding } - : {}), - }, - elementsMap as NonDeletedSceneElementsMap, - ); + LinearElementEditor.movePoints(element, scene, updates, { + ...(changedElement.id === element.startBinding?.elementId + ? { startBinding: bindings.startBinding } + : {}), + ...(changedElement.id === element.endBinding?.elementId + ? { endBinding: bindings.endBinding } + : {}), + }); const boundText = getBoundTextElement(element, elementsMap); if (boundText && !boundText.isDeleted) { - handleBindTextResize(element, elementsMap, false); + handleBindTextResize(element, scene, false); } }); }; @@ -885,7 +875,6 @@ export const getHeadingForElbowArrowSnap = ( otherPoint: Readonly, bindableElement: ExcalidrawBindableElement | undefined | null, aabb: Bounds | undefined | null, - elementsMap: ElementsMap, origPoint: GlobalPoint, zoom?: AppState["zoom"], ): Heading => { @@ -895,12 +884,7 @@ export const getHeadingForElbowArrowSnap = ( return otherPointHeading; } - const distance = getDistanceForBinding( - origPoint, - bindableElement, - elementsMap, - zoom, - ); + const distance = getDistanceForBinding(origPoint, bindableElement, zoom); if (!distance) { return vectorToHeading( @@ -914,7 +898,6 @@ export const getHeadingForElbowArrowSnap = ( const getDistanceForBinding = ( point: Readonly, bindableElement: ExcalidrawBindableElement, - elementsMap: ElementsMap, zoom?: AppState["zoom"], ) => { const distance = distanceToBindableElement(bindableElement, point); @@ -1216,7 +1199,6 @@ const updateBoundPoint = ( linearElement, bindableElement, startOrEnd === "startBinding" ? "start" : "end", - elementsMap, ).fixedPoint; const globalMidPoint = elementCenterPoint(bindableElement); const global = pointFrom( @@ -1320,7 +1302,6 @@ export const calculateFixedPointForElbowArrowBinding = ( linearElement: NonDeleted, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", - elementsMap: ElementsMap, ): { fixedPoint: FixedPoint } => { const bounds = [ hoveredElement.x, @@ -1486,8 +1467,12 @@ export const fixBindingsAfterDeletion = ( const elements = arrayToMap(sceneElements); for (const element of deletedElements) { - BoundElement.unbindAffected(elements, element, mutateElement); - BindableElement.unbindAffected(elements, element, mutateElement); + BoundElement.unbindAffected(elements, element, (element, updates) => + mutateElement(element, elements, updates), + ); + BindableElement.unbindAffected(elements, element, (element, updates) => + mutateElement(element, elements, updates), + ); } }; diff --git a/packages/element/src/dragElements.ts b/packages/element/src/dragElements.ts index 669417a54e..4f9eb9ca4c 100644 --- a/packages/element/src/dragElements.ts +++ b/packages/element/src/dragElements.ts @@ -11,13 +11,10 @@ import type { PointerDownState, } from "@excalidraw/excalidraw/types"; -import type Scene from "@excalidraw/excalidraw/scene/Scene"; - import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types"; import { updateBoundElements } from "./binding"; import { getCommonBounds } from "./bounds"; -import { mutateElement } from "./mutateElement"; import { getPerfectElementSize } from "./sizeHelpers"; import { getBoundTextElement } from "./textElement"; import { getMinTextElementWidth } from "./textMeasurements"; @@ -29,6 +26,8 @@ import { isTextElement, } from "./typeChecks"; +import type Scene from "./Scene"; + import type { Bounds } from "./bounds"; import type { ExcalidrawElement } from "./types"; @@ -104,7 +103,7 @@ export const dragSelectedElements = ( ); elementsToUpdate.forEach((element) => { - updateElementCoords(pointerDownState, element, adjustedOffset); + updateElementCoords(pointerDownState, element, scene, adjustedOffset); if (!isArrowElement(element)) { // skip arrow labels since we calculate its position during render const textElement = getBoundTextElement( @@ -112,9 +111,14 @@ export const dragSelectedElements = ( scene.getNonDeletedElementsMap(), ); if (textElement) { - updateElementCoords(pointerDownState, textElement, adjustedOffset); + updateElementCoords( + pointerDownState, + textElement, + scene, + adjustedOffset, + ); } - updateBoundElements(element, scene.getElementsMapIncludingDeleted(), { + updateBoundElements(element, scene, { simultaneouslyUpdated: Array.from(elementsToUpdate), }); } @@ -155,6 +159,7 @@ const calculateOffset = ( const updateElementCoords = ( pointerDownState: PointerDownState, element: NonDeletedExcalidrawElement, + scene: Scene, dragOffset: { x: number; y: number }, ) => { const originalElement = @@ -163,7 +168,7 @@ const updateElementCoords = ( const nextX = originalElement.x + dragOffset.x; const nextY = originalElement.y + dragOffset.y; - mutateElement(element, { + scene.mutateElement(element, { x: nextX, y: nextY, }); @@ -190,6 +195,7 @@ export const dragNewElement = ({ shouldMaintainAspectRatio, shouldResizeFromCenter, zoom, + scene, widthAspectRatio = null, originOffset = null, informMutation = true, @@ -205,6 +211,7 @@ export const dragNewElement = ({ shouldMaintainAspectRatio: boolean; shouldResizeFromCenter: boolean; zoom: NormalizedZoomValue; + scene: Scene; /** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is true */ widthAspectRatio?: number | null; @@ -285,7 +292,7 @@ export const dragNewElement = ({ }; } - mutateElement( + scene.mutateElement( newElement, { x: newX + (originOffset?.x ?? 0), @@ -295,7 +302,7 @@ export const dragNewElement = ({ ...textAutoResize, ...imageInitialDimension, }, - informMutation, + { informMutation, isDragging: false }, ); } }; diff --git a/packages/element/src/elbowArrow.ts b/packages/element/src/elbowArrow.ts index a70e265bc6..95a2aa8ef5 100644 --- a/packages/element/src/elbowArrow.ts +++ b/packages/element/src/elbowArrow.ts @@ -50,7 +50,6 @@ import { isBindableElement } from "./typeChecks"; import { type ExcalidrawElbowArrowElement, type NonDeletedSceneElementsMap, - type SceneElementsMap, } from "./types"; import { aabbForElement, pointInsideBounds } from "./shapes"; @@ -887,7 +886,7 @@ export const updateElbowArrowPoints = ( elementsMap: NonDeletedSceneElementsMap, updates: { points?: readonly LocalPoint[]; - fixedSegments?: FixedSegment[] | null; + fixedSegments?: readonly FixedSegment[] | null; startBinding?: FixedPointBinding | null; endBinding?: FixedPointBinding | null; }, @@ -1273,14 +1272,12 @@ const getElbowArrowData = ( const startHeading = getBindPointHeading( startGlobalPoint, endGlobalPoint, - elementsMap, hoveredStartElement, origStartGlobalPoint, ); const endHeading = getBindPointHeading( endGlobalPoint, startGlobalPoint, - elementsMap, hoveredEndElement, origEndGlobalPoint, ); @@ -2250,7 +2247,6 @@ const getGlobalPoint = ( const getBindPointHeading = ( p: GlobalPoint, otherPoint: GlobalPoint, - elementsMap: NonDeletedSceneElementsMap | SceneElementsMap, hoveredElement: ExcalidrawBindableElement | null | undefined, origPoint: GlobalPoint, ): Heading => @@ -2268,7 +2264,6 @@ const getBindPointHeading = ( number, ], ), - elementsMap, origPoint, ); diff --git a/packages/element/src/flowchart.ts b/packages/element/src/flowchart.ts index 8ee2ba530a..62acd1c4ea 100644 --- a/packages/element/src/flowchart.ts +++ b/packages/element/src/flowchart.ts @@ -39,6 +39,8 @@ import { type OrderedExcalidrawElement, } from "./types"; +import type Scene from "./Scene"; + type LinkDirection = "up" | "right" | "down" | "left"; const VERTICAL_OFFSET = 100; @@ -236,10 +238,11 @@ const getOffsets = ( const addNewNode = ( element: ExcalidrawFlowchartNodeElement, - elementsMap: ElementsMap, appState: AppState, direction: LinkDirection, + scene: Scene, ) => { + const elementsMap = scene.getNonDeletedElementsMap(); const successors = getSuccessors(element, elementsMap, direction); const predeccessors = getPredecessors(element, elementsMap, direction); @@ -274,9 +277,9 @@ const addNewNode = ( const bindingArrow = createBindingArrow( element, nextNode, - elementsMap, direction, appState, + scene, ); return { @@ -287,9 +290,9 @@ const addNewNode = ( export const addNewNodes = ( startNode: ExcalidrawFlowchartNodeElement, - elementsMap: ElementsMap, appState: AppState, direction: LinkDirection, + scene: Scene, numberOfNodes: number, ) => { // always start from 0 and distribute evenly @@ -352,9 +355,9 @@ export const addNewNodes = ( const bindingArrow = createBindingArrow( startNode, nextNode, - elementsMap, direction, appState, + scene, ); newNodes.push(nextNode); @@ -367,9 +370,9 @@ export const addNewNodes = ( const createBindingArrow = ( startBindingElement: ExcalidrawFlowchartNodeElement, endBindingElement: ExcalidrawFlowchartNodeElement, - elementsMap: ElementsMap, direction: LinkDirection, appState: AppState, + scene: Scene, ) => { let startX: number; let startY: number; @@ -440,18 +443,10 @@ const createBindingArrow = ( elbowed: true, }); - bindLinearElement( - bindingArrow, - startBindingElement, - "start", - elementsMap as NonDeletedSceneElementsMap, - ); - bindLinearElement( - bindingArrow, - endBindingElement, - "end", - elementsMap as NonDeletedSceneElementsMap, - ); + const elementsMap = scene.getNonDeletedElementsMap(); + + bindLinearElement(bindingArrow, startBindingElement, "start", scene); + bindLinearElement(bindingArrow, endBindingElement, "end", scene); const changedElements = new Map(); changedElements.set( @@ -467,7 +462,7 @@ const createBindingArrow = ( bindingArrow as OrderedExcalidrawElement, ); - LinearElementEditor.movePoints(bindingArrow, [ + LinearElementEditor.movePoints(bindingArrow, scene, [ { index: 1, point: bindingArrow.points[1], @@ -632,16 +627,17 @@ export class FlowChartCreator { createNodes( startNode: ExcalidrawFlowchartNodeElement, - elementsMap: ElementsMap, appState: AppState, direction: LinkDirection, + scene: Scene, ) { + const elementsMap = scene.getNonDeletedElementsMap(); if (direction !== this.direction) { const { nextNode, bindingArrow } = addNewNode( startNode, - elementsMap, appState, direction, + scene, ); this.numberOfNodes = 1; @@ -652,9 +648,9 @@ export class FlowChartCreator { this.numberOfNodes += 1; const newNodes = addNewNodes( startNode, - elementsMap, appState, direction, + scene, this.numberOfNodes, ); @@ -682,13 +678,9 @@ export class FlowChartCreator { ) ) { this.pendingNodes = this.pendingNodes.map((node) => - mutateElement( - node, - { - frameId: startNode.frameId, - }, - false, - ), + mutateElement(node, elementsMap, { + frameId: startNode.frameId, + }), ); } } diff --git a/packages/element/src/fractionalIndex.ts b/packages/element/src/fractionalIndex.ts index bbe739f29a..84505365ec 100644 --- a/packages/element/src/fractionalIndex.ts +++ b/packages/element/src/fractionalIndex.ts @@ -7,6 +7,7 @@ import { getBoundTextElement } from "./textElement"; import { hasBoundTextElement } from "./typeChecks"; import type { + ElementsMap, ExcalidrawElement, FractionalIndex, OrderedExcalidrawElement, @@ -152,9 +153,10 @@ export const orderByFractionalIndex = ( */ export const syncMovedIndices = ( elements: readonly ExcalidrawElement[], - movedElements: Map, + movedElements: ElementsMap, ): OrderedExcalidrawElement[] => { try { + const elementsMap = arrayToMap(elements); const indicesGroups = getMovedIndicesGroups(elements, movedElements); // try generatating indices, throws on invalid movedElements @@ -176,7 +178,7 @@ export const syncMovedIndices = ( // split mutation so we don't end up in an incosistent state for (const [element, update] of elementsUpdates) { - mutateElement(element, update, false); + mutateElement(element, elementsMap, update); } } catch (e) { // fallback to default sync @@ -194,10 +196,12 @@ export const syncMovedIndices = ( export const syncInvalidIndices = ( elements: readonly ExcalidrawElement[], ): OrderedExcalidrawElement[] => { + const elementsMap = arrayToMap(elements); const indicesGroups = getInvalidIndicesGroups(elements); const elementsUpdates = generateIndices(elements, indicesGroups); + for (const [element, update] of elementsUpdates) { - mutateElement(element, update, false); + mutateElement(element, elementsMap, update); } return elements as OrderedExcalidrawElement[]; @@ -210,7 +214,7 @@ export const syncInvalidIndices = ( */ const getMovedIndicesGroups = ( elements: readonly ExcalidrawElement[], - movedElements: Map, + movedElements: ElementsMap, ) => { const indicesGroups: number[][] = []; diff --git a/packages/element/src/frame.ts b/packages/element/src/frame.ts index 664c8d98fc..74375a48d1 100644 --- a/packages/element/src/frame.ts +++ b/packages/element/src/frame.ts @@ -3,8 +3,6 @@ import { isPointWithinBounds, pointFrom } from "@excalidraw/math"; import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox"; import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds"; -import type { ExcalidrawElementsIncludingDeleted } from "@excalidraw/excalidraw/scene/Scene"; - import type { AppClassProperties, AppState, @@ -29,6 +27,8 @@ import { isTextElement, } from "./typeChecks"; +import type { ExcalidrawElementsIncludingDeleted } from "./Scene"; + import type { ElementsMap, ElementsMapOrArray, @@ -56,13 +56,9 @@ export const bindElementsToFramesAfterDuplication = ( const nextFrameId = origIdToDuplicateId.get(element.frameId); const nextElement = nextElementId && nextElementMap.get(nextElementId); if (nextElement) { - mutateElement( - nextElement, - { - frameId: nextFrameId ?? null, - }, - false, - ); + mutateElement(nextElement, nextElementMap, { + frameId: nextFrameId ?? null, + }); } } } @@ -565,13 +561,9 @@ export const addElementsToFrame = ( } for (const element of finalElementsToAdd) { - mutateElement( - element, - { - frameId: frame.id, - }, - false, - ); + mutateElement(element, elementsMap, { + frameId: frame.id, + }); } return allElements; @@ -609,13 +601,9 @@ export const removeElementsFromFrame = ( } for (const [, element] of _elementsToRemove) { - mutateElement( - element, - { - frameId: null, - }, - false, - ); + mutateElement(element, elementsMap, { + frameId: null, + }); } }; diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts index 8a9117bf88..55e3f5c4f7 100644 --- a/packages/element/src/linearElementEditor.ts +++ b/packages/element/src/linearElementEditor.ts @@ -20,10 +20,6 @@ import { tupleToCoors, } from "@excalidraw/common"; -// TODO: remove direct dependency on the scene, should be passed in or injected instead -// eslint-disable-next-line @typescript-eslint/no-restricted-imports -import Scene from "@excalidraw/excalidraw/scene/Scene"; - import type { Store } from "@excalidraw/excalidraw/store"; import type { Radians } from "@excalidraw/math"; @@ -50,10 +46,8 @@ import { getMinMaxXYFromCurvePathOps, } from "./bounds"; -import { updateElbowArrowPoints } from "./elbowArrow"; - import { headingIsHorizontal, vectorToHeading } from "./heading"; -import { bumpVersion, mutateElement } from "./mutateElement"; +import { mutateElement } from "./mutateElement"; import { getBoundTextElement, handleBindTextResize } from "./textElement"; import { isBindingElement, @@ -73,6 +67,8 @@ import { import { getLockedLinearCursorAlignSize } from "./sizeHelpers"; +import type Scene from "./Scene"; + import type { Bounds } from "./bounds"; import type { NonDeleted, @@ -84,7 +80,6 @@ import type { ElementsMap, NonDeletedSceneElementsMap, FixedPointBinding, - SceneElementsMap, FixedSegment, ExcalidrawElbowArrowElement, } from "./types"; @@ -127,15 +122,17 @@ export class LinearElementEditor { public readonly segmentMidPointHoveredCoords: GlobalPoint | null; public readonly elbowed: boolean; - constructor(element: NonDeleted) { + constructor( + element: NonDeleted, + elementsMap: ElementsMap, + ) { this.elementId = element.id as string & { _brand: "excalidrawLinearElementId"; }; if (!pointsEqual(element.points[0], pointFrom(0, 0))) { console.error("Linear element is not normalized", Error().stack); - LinearElementEditor.normalizePoints(element); + LinearElementEditor.normalizePoints(element, elementsMap); } - this.selectedPointsIndices = null; this.lastUncommittedPoint = null; this.isDragging = false; @@ -309,7 +306,7 @@ export class LinearElementEditor { event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(), ); - LinearElementEditor.movePoints(element, [ + LinearElementEditor.movePoints(element, scene, [ { index: selectedIndex, point: pointFrom( @@ -333,6 +330,7 @@ export class LinearElementEditor { LinearElementEditor.movePoints( element, + scene, selectedPointsIndices.map((pointIndex) => { const newPointPosition: LocalPoint = pointIndex === lastClickedPoint @@ -358,7 +356,7 @@ export class LinearElementEditor { const boundTextElement = getBoundTextElement(element, elementsMap); if (boundTextElement) { - handleBindTextResize(element, elementsMap, false); + handleBindTextResize(element, scene, false); } // suggest bindings for first and last point if selected @@ -453,7 +451,7 @@ export class LinearElementEditor { selectedPoint === element.points.length - 1 ) { if (isPathALoop(element.points, appState.zoom.value)) { - LinearElementEditor.movePoints(element, [ + LinearElementEditor.movePoints(element, scene, [ { index: selectedPoint, point: @@ -795,7 +793,7 @@ export class LinearElementEditor { ); } else if (event.altKey && appState.editingLinearElement) { if (linearElementEditor.lastUncommittedPoint == null) { - mutateElement(element, { + scene.mutateElement(element, { points: [ ...element.points, LinearElementEditor.createPointAt( @@ -861,7 +859,6 @@ export class LinearElementEditor { element, startBindingElement, endBindingElement, - elementsMap, scene, ); } @@ -934,13 +931,13 @@ export class LinearElementEditor { scenePointerX: number, scenePointerY: number, app: AppClassProperties, - elementsMap: NonDeletedSceneElementsMap | SceneElementsMap, ): LinearElementEditor | null { const appState = app.state; if (!appState.editingLinearElement) { return null; } const { elementId, lastUncommittedPoint } = appState.editingLinearElement; + const elementsMap = app.scene.getNonDeletedElementsMap(); const element = LinearElementEditor.getElement(elementId, elementsMap); if (!element) { return appState.editingLinearElement; @@ -951,7 +948,9 @@ export class LinearElementEditor { if (!event.altKey) { if (lastPoint === lastUncommittedPoint) { - LinearElementEditor.deletePoints(element, [points.length - 1]); + LinearElementEditor.deletePoints(element, app.scene, [ + points.length - 1, + ]); } return { ...appState.editingLinearElement, @@ -989,14 +988,14 @@ export class LinearElementEditor { } if (lastPoint === lastUncommittedPoint) { - LinearElementEditor.movePoints(element, [ + LinearElementEditor.movePoints(element, app.scene, [ { index: element.points.length - 1, point: newPoint, }, ]); } else { - LinearElementEditor.addPoints(element, [{ point: newPoint }]); + LinearElementEditor.addPoints(element, app.scene, [{ point: newPoint }]); } return { ...appState.editingLinearElement, @@ -1160,23 +1159,26 @@ export class LinearElementEditor { y: element.y + offsetY, }; } - // element-mutating methods // --------------------------------------------------------------------------- - - static normalizePoints(element: NonDeleted) { - mutateElement(element, LinearElementEditor.getNormalizedPoints(element)); + static normalizePoints( + element: NonDeleted, + elementsMap: ElementsMap, + ) { + mutateElement( + element, + elementsMap, + LinearElementEditor.getNormalizedPoints(element), + ); } - static duplicateSelectedPoints( - appState: AppState, - elementsMap: NonDeletedSceneElementsMap | SceneElementsMap, - ): AppState { + static duplicateSelectedPoints(appState: AppState, scene: Scene): AppState { invariant( appState.editingLinearElement, "Not currently editing a linear element", ); + const elementsMap = scene.getNonDeletedElementsMap(); const { selectedPointsIndices, elementId } = appState.editingLinearElement; const element = LinearElementEditor.getElement(elementId, elementsMap); @@ -1219,13 +1221,13 @@ export class LinearElementEditor { return acc; }, []); - mutateElement(element, { points: nextPoints }); + scene.mutateElement(element, { points: nextPoints }); // temp hack to ensure the line doesn't move when adding point to the end, // potentially expanding the bounding box if (pointAddedToEnd) { const lastPoint = element.points[element.points.length - 1]; - LinearElementEditor.movePoints(element, [ + LinearElementEditor.movePoints(element, scene, [ { index: element.points.length - 1, point: pointFrom(lastPoint[0] + 30, lastPoint[1] + 30), @@ -1244,6 +1246,7 @@ export class LinearElementEditor { static deletePoints( element: NonDeleted, + scene: Scene, pointIndices: readonly number[], ) { let offsetX = 0; @@ -1274,28 +1277,41 @@ export class LinearElementEditor { return acc; }, []); - LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY); + LinearElementEditor._updatePoints( + element, + scene, + nextPoints, + offsetX, + offsetY, + ); } static addPoints( element: NonDeleted, + scene: Scene, targetPoints: { point: LocalPoint }[], ) { const offsetX = 0; const offsetY = 0; const nextPoints = [...element.points, ...targetPoints.map((x) => x.point)]; - LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY); + LinearElementEditor._updatePoints( + element, + scene, + nextPoints, + offsetX, + offsetY, + ); } static movePoints( element: NonDeleted, + scene: Scene, targetPoints: { index: number; point: LocalPoint; isDragging?: boolean }[], otherUpdates?: { startBinding?: PointBinding | null; endBinding?: PointBinding | null; }, - sceneElementsMap?: NonDeletedSceneElementsMap, ) { const { points } = element; @@ -1329,6 +1345,7 @@ export class LinearElementEditor { LinearElementEditor._updatePoints( element, + scene, nextPoints, offsetX, offsetY, @@ -1339,7 +1356,6 @@ export class LinearElementEditor { dragging || targetPoint.isDragging === true, false, ), - sceneElementsMap, }, ); } @@ -1394,8 +1410,9 @@ export class LinearElementEditor { pointerCoords: PointerCoords, app: AppClassProperties, snapToGrid: boolean, - elementsMap: ElementsMap, + scene: Scene, ) { + const elementsMap = scene.getNonDeletedElementsMap(); const element = LinearElementEditor.getElement( linearElementEditor.elementId, elementsMap, @@ -1425,9 +1442,7 @@ export class LinearElementEditor { ...element.points.slice(segmentMidpoint.index!), ]; - mutateElement(element, { - points, - }); + scene.mutateElement(element, { points }); ret.pointerDownState = { ...linearElementEditor.pointerDownState, @@ -1443,6 +1458,7 @@ export class LinearElementEditor { private static _updatePoints( element: NonDeleted, + scene: Scene, nextPoints: readonly LocalPoint[], offsetX: number, offsetY: number, @@ -1479,28 +1495,10 @@ export class LinearElementEditor { updates.points = Array.from(nextPoints); - if (!options?.sceneElementsMap || Scene.getScene(element)) { - mutateElement(element, updates, true, { - isDragging: options?.isDragging, - }); - } else { - // The element is not in the scene, so we need to use the provided - // scene map. - Object.assign(element, { - ...updates, - angle: 0 as Radians, - - ...updateElbowArrowPoints( - element, - options.sceneElementsMap, - updates, - { - isDragging: options?.isDragging, - }, - ), - }); - } - bumpVersion(element); + scene.mutateElement(element, updates, { + informMutation: true, + isDragging: options?.isDragging ?? false, + }); } else { const nextCoords = getElementPointsCoords(element, nextPoints); const prevCoords = getElementPointsCoords(element, element.points); @@ -1515,7 +1513,7 @@ export class LinearElementEditor { pointFrom(dX, dY), element.angle, ); - mutateElement(element, { + scene.mutateElement(element, { ...otherUpdates, points: nextPoints, x: element.x + rotated[0], @@ -1574,7 +1572,7 @@ export class LinearElementEditor { elementsMap, ); if (points.length < 2) { - mutateElement(boundTextElement, { isDeleted: true }); + mutateElement(boundTextElement, elementsMap, { isDeleted: true }); } let x = 0; let y = 0; @@ -1781,8 +1779,9 @@ export class LinearElementEditor { index: number, x: number, y: number, - elementsMap: ElementsMap, + scene: Scene, ): LinearElementEditor { + const elementsMap = scene.getNonDeletedElementsMap(); const element = LinearElementEditor.getElement( linearElement.elementId, elementsMap, @@ -1825,7 +1824,7 @@ export class LinearElementEditor { .map((segment) => segment.index) .reduce((count, idx) => (idx < index ? count + 1 : count), 0); - mutateElement(element, { + scene.mutateElement(element, { fixedSegments: nextFixedSegments, }); @@ -1859,14 +1858,14 @@ export class LinearElementEditor { static deleteFixedSegment( element: ExcalidrawElbowArrowElement, + scene: Scene, index: number, ): void { - mutateElement(element, { + scene.mutateElement(element, { fixedSegments: element.fixedSegments?.filter( (segment) => segment.index !== index, ), }); - mutateElement(element, {}, true); } } diff --git a/packages/element/src/mutateElement.ts b/packages/element/src/mutateElement.ts index d870073690..84785c31c9 100644 --- a/packages/element/src/mutateElement.ts +++ b/packages/element/src/mutateElement.ts @@ -2,13 +2,8 @@ import { getSizeFromPoints, randomInteger, getUpdatedTimestamp, - toBrandedType, } from "@excalidraw/common"; -// TODO: remove direct dependency on the scene, should be passed in or injected instead -// eslint-disable-next-line @typescript-eslint/no-restricted-imports -import Scene from "@excalidraw/excalidraw/scene/Scene"; - import type { Radians } from "@excalidraw/math"; import type { Mutable } from "@excalidraw/common/utility-types"; @@ -16,35 +11,42 @@ import type { Mutable } from "@excalidraw/common/utility-types"; import { ShapeCache } from "./ShapeCache"; import { updateElbowArrowPoints } from "./elbowArrow"; + import { isElbowArrow } from "./typeChecks"; -import type { ExcalidrawElement, NonDeletedSceneElementsMap } from "./types"; +import type { + ElementsMap, + ExcalidrawElbowArrowElement, + ExcalidrawElement, + NonDeletedSceneElementsMap, +} from "./types"; export type ElementUpdate = Omit< Partial, "id" | "version" | "versionNonce" | "updated" >; -// This function tracks updates of text elements for the purposes for collaboration. -// The version is used to compare updates when more than one user is working in -// the same drawing. Note: this will trigger the component to update. Make sure you -// are calling it either from a React event handler or within unstable_batchedUpdates(). +/** + * This function tracks updates of text elements for the purposes for collaboration. + * The version is used to compare updates when more than one user is working in + * the same drawing. + * + * WARNING: this won't trigger the component to update, so if you need to trigger component update, + * use `scene.mutateElement` or `ExcalidrawImperativeAPI.mutateElement` instead. + */ export const mutateElement = >( element: TElement, + elementsMap: ElementsMap, updates: ElementUpdate, - informMutation = true, options?: { - // Currently only for elbow arrows. - // If true, the elbow arrow tries to bind to the nearest element. If false - // it tries to keep the same bound element, if any. isDragging?: boolean; }, -): TElement => { +) => { let didChange = false; // casting to any because can't use `in` operator // (see https://github.com/microsoft/TypeScript/issues/21732) - const { points, fixedSegments, fileId, startBinding, endBinding } = + const { points, fixedSegments, startBinding, endBinding, fileId } = updates as any; if ( @@ -55,10 +57,6 @@ export const mutateElement = >( typeof startBinding !== "undefined" || typeof endBinding !== "undefined") // manual binding to element ) { - const elementsMap = toBrandedType( - Scene.getScene(element)?.getNonDeletedElementsMap() ?? new Map(), - ); - updates = { ...updates, angle: 0 as Radians, @@ -68,16 +66,9 @@ export const mutateElement = >( x: updates.x || element.x, y: updates.y || element.y, }, - elementsMap, - { - fixedSegments, - points, - startBinding, - endBinding, - }, - { - isDragging: options?.isDragging, - }, + elementsMap as NonDeletedSceneElementsMap, + updates as ElementUpdate, + options, ), }; } else if (typeof points !== "undefined") { @@ -150,10 +141,6 @@ export const mutateElement = >( element.versionNonce = randomInteger(); element.updated = getUpdatedTimestamp(); - if (informMutation) { - Scene.getScene(element)?.triggerUpdate(); - } - return element; }; diff --git a/packages/element/src/resizeElements.ts b/packages/element/src/resizeElements.ts index 3ff405603a..8a1702afac 100644 --- a/packages/element/src/resizeElements.ts +++ b/packages/element/src/resizeElements.ts @@ -17,8 +17,6 @@ import { import type { GlobalPoint } from "@excalidraw/math"; -import type Scene from "@excalidraw/excalidraw/scene/Scene"; - import type { PointerDownState } from "@excalidraw/excalidraw/types"; import type { Mutable } from "@excalidraw/common/utility-types"; @@ -32,7 +30,6 @@ import { getElementBounds, } from "./bounds"; import { LinearElementEditor } from "./linearElementEditor"; -import { mutateElement } from "./mutateElement"; import { getBoundTextElement, getBoundTextElementId, @@ -60,6 +57,8 @@ import { import { isInGroup } from "./groups"; +import type Scene from "./Scene"; + import type { BoundingBox } from "./bounds"; import type { MaybeTransformHandleType, @@ -74,7 +73,6 @@ import type { ExcalidrawTextElementWithContainer, ExcalidrawImageElement, ElementsMap, - SceneElementsMap, ExcalidrawElbowArrowElement, } from "./types"; @@ -83,7 +81,6 @@ export const transformElements = ( originalElements: PointerDownState["originalElements"], transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], - elementsMap: SceneElementsMap, scene: Scene, shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, @@ -93,31 +90,31 @@ export const transformElements = ( centerX: number, centerY: number, ): boolean => { + const elementsMap = scene.getNonDeletedElementsMap(); if (selectedElements.length === 1) { const [element] = selectedElements; if (transformHandleType === "rotation") { if (!isElbowArrow(element)) { rotateSingleElement( element, - elementsMap, scene, pointerX, pointerY, shouldRotateWithDiscreteAngle, ); - updateBoundElements(element, elementsMap); + updateBoundElements(element, scene); } } else if (isTextElement(element) && transformHandleType) { resizeSingleTextElement( originalElements, element, - elementsMap, + scene, transformHandleType, shouldResizeFromCenter, pointerX, pointerY, ); - updateBoundElements(element, elementsMap); + updateBoundElements(element, scene); return true; } else if (transformHandleType) { const elementId = selectedElements[0].id; @@ -129,8 +126,6 @@ export const transformElements = ( getNextSingleWidthAndHeightFromPointer( latestElement, origElement, - elementsMap, - originalElements, transformHandleType, pointerX, pointerY, @@ -145,8 +140,8 @@ export const transformElements = ( nextHeight, latestElement, origElement, - elementsMap, originalElements, + scene, transformHandleType, { shouldMaintainAspectRatio, @@ -161,7 +156,6 @@ export const transformElements = ( rotateMultipleElements( originalElements, selectedElements, - elementsMap, scene, pointerX, pointerY, @@ -210,13 +204,15 @@ export const transformElements = ( const rotateSingleElement = ( element: NonDeletedExcalidrawElement, - elementsMap: ElementsMap, scene: Scene, pointerX: number, pointerY: number, shouldRotateWithDiscreteAngle: boolean, ) => { - const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap); + const [x1, y1, x2, y2] = getElementAbsoluteCoords( + element, + scene.getNonDeletedElementsMap(), + ); const cx = (x1 + x2) / 2; const cy = (y1 + y2) / 2; let angle: Radians; @@ -233,13 +229,13 @@ const rotateSingleElement = ( } const boundTextElementId = getBoundTextElementId(element); - mutateElement(element, { angle }); + scene.mutateElement(element, { angle }); if (boundTextElementId) { const textElement = scene.getElement(boundTextElementId); if (textElement && !isArrowElement(element)) { - mutateElement(textElement, { angle }); + scene.mutateElement(textElement, { angle }); } } }; @@ -289,12 +285,13 @@ export const measureFontSizeFromWidth = ( const resizeSingleTextElement = ( originalElements: PointerDownState["originalElements"], element: NonDeleted, - elementsMap: ElementsMap, + scene: Scene, transformHandleType: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number, ) => { + const elementsMap = scene.getNonDeletedElementsMap(); const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords( element, elementsMap, @@ -393,7 +390,7 @@ const resizeSingleTextElement = ( ); const [nextX, nextY] = newTopLeft; - mutateElement(element, { + scene.mutateElement(element, { fontSize: metrics.size, width: nextWidth, height: nextHeight, @@ -508,14 +505,13 @@ const resizeSingleTextElement = ( autoResize: false, }; - mutateElement(element, resizedElement); + scene.mutateElement(element, resizedElement); } }; const rotateMultipleElements = ( originalElements: PointerDownState["originalElements"], elements: readonly NonDeletedExcalidrawElement[], - elementsMap: SceneElementsMap, scene: Scene, pointerX: number, pointerY: number, @@ -523,6 +519,7 @@ const rotateMultipleElements = ( centerX: number, centerY: number, ) => { + const elementsMap = scene.getNonDeletedElementsMap(); let centerAngle = (5 * Math.PI) / 2 + Math.atan2(pointerY - centerY, pointerX - centerX); if (shouldRotateWithDiscreteAngle) { @@ -543,38 +540,30 @@ const rotateMultipleElements = ( (centerAngle + origAngle - element.angle) as Radians, ); - if (isElbowArrow(element)) { - // Needed to re-route the arrow - mutateElement(element, { - points: getArrowLocalFixedPoints(element, elementsMap), - }); - } else { - mutateElement( - element, - { + const updates = isElbowArrow(element) + ? { + // Needed to re-route the arrow + points: getArrowLocalFixedPoints(element, elementsMap), + } + : { x: element.x + (rotatedCX - cx), y: element.y + (rotatedCY - cy), angle: normalizeRadians((centerAngle + origAngle) as Radians), - }, - false, - ); - } + }; - updateBoundElements(element, elementsMap, { + scene.mutateElement(element, updates); + + updateBoundElements(element, scene, { simultaneouslyUpdated: elements, }); const boundText = getBoundTextElement(element, elementsMap); if (boundText && !isArrowElement(element)) { - mutateElement( - boundText, - { - x: boundText.x + (rotatedCX - cx), - y: boundText.y + (rotatedCY - cy), - angle: normalizeRadians((centerAngle + origAngle) as Radians), - }, - false, - ); + scene.mutateElement(boundText, { + x: boundText.x + (rotatedCX - cx), + y: boundText.y + (rotatedCY - cy), + angle: normalizeRadians((centerAngle + origAngle) as Radians), + }); } } } @@ -819,8 +808,8 @@ export const resizeSingleElement = ( nextHeight: number, latestElement: ExcalidrawElement, origElement: ExcalidrawElement, - elementsMap: ElementsMap, originalElementsMap: ElementsMap, + scene: Scene, handleDirection: TransformHandleDirection, { shouldInformMutation = true, @@ -833,6 +822,7 @@ export const resizeSingleElement = ( } = {}, ) => { let boundTextFont: { fontSize?: number } = {}; + const elementsMap = scene.getNonDeletedElementsMap(); const boundTextElement = getBoundTextElement(latestElement, elementsMap); if (boundTextElement) { @@ -932,7 +922,7 @@ export const resizeSingleElement = ( } if ("scale" in latestElement && "scale" in origElement) { - mutateElement(latestElement, { + scene.mutateElement(latestElement, { scale: [ // defaulting because scaleX/Y can be 0/-0 (Math.sign(nextWidth) || origElement.scale[0]) * origElement.scale[0], @@ -967,21 +957,24 @@ export const resizeSingleElement = ( ...rescaledPoints, }; - mutateElement(latestElement, updates, shouldInformMutation); + scene.mutateElement(latestElement, updates, { + informMutation: shouldInformMutation, + isDragging: false, + }); - updateBoundElements(latestElement, elementsMap as SceneElementsMap, { + updateBoundElements(latestElement, scene, { // TODO: confirm with MARK if this actually makes sense newSize: { width: nextWidth, height: nextHeight }, }); if (boundTextElement && boundTextFont != null) { - mutateElement(boundTextElement, { + scene.mutateElement(boundTextElement, { fontSize: boundTextFont.fontSize, }); } handleBindTextResize( latestElement, - elementsMap, + scene, handleDirection, shouldMaintainAspectRatio, ); @@ -991,8 +984,6 @@ export const resizeSingleElement = ( const getNextSingleWidthAndHeightFromPointer = ( latestElement: ExcalidrawElement, origElement: ExcalidrawElement, - elementsMap: ElementsMap, - originalElementsMap: ElementsMap, handleDirection: TransformHandleDirection, pointerX: number, pointerY: number, @@ -1527,27 +1518,24 @@ export const resizeMultipleElements = ( } of elementsAndUpdates) { const { width, height, angle } = update; - mutateElement(element, update, false, { + scene.mutateElement(element, update, { + informMutation: true, // needed for the fixed binding point udpate to take effect isDragging: true, }); - updateBoundElements(element, elementsMap as SceneElementsMap, { + updateBoundElements(element, scene, { simultaneouslyUpdated: elementsToUpdate, newSize: { width, height }, }); const boundTextElement = getBoundTextElement(element, elementsMap); if (boundTextElement && boundTextFontSize) { - mutateElement( - boundTextElement, - { - fontSize: boundTextFontSize, - angle: isLinearElement(element) ? undefined : angle, - }, - false, - ); - handleBindTextResize(element, elementsMap, handleDirection, true); + scene.mutateElement(boundTextElement, { + fontSize: boundTextFontSize, + angle: isLinearElement(element) ? undefined : angle, + }); + handleBindTextResize(element, scene, handleDirection, true); } } diff --git a/packages/element/src/selection.ts b/packages/element/src/selection.ts index e07c96d383..ca8c28d40c 100644 --- a/packages/element/src/selection.ts +++ b/packages/element/src/selection.ts @@ -1,4 +1,4 @@ -import { isShallowEqual } from "@excalidraw/common"; +import { arrayToMap, isShallowEqual } from "@excalidraw/common"; import type { AppState, @@ -264,6 +264,7 @@ export const makeNextSelectedElementIds = ( const _getLinearElementEditor = ( targetElements: readonly ExcalidrawElement[], + allElements: readonly NonDeletedExcalidrawElement[], ) => { const linears = targetElements.filter(isLinearElement); if (linears.length === 1) { @@ -274,7 +275,7 @@ const _getLinearElementEditor = ( ); if (onlySingleLinearSelected) { - return new LinearElementEditor(linear); + return new LinearElementEditor(linear, arrayToMap(allElements)); } } @@ -287,7 +288,7 @@ export const getSelectionStateForElements = ( appState: AppState, ) => { return { - selectedLinearElement: _getLinearElementEditor(targetElements), + selectedLinearElement: _getLinearElementEditor(targetElements, allElements), ...selectGroupsForSelectedElements( { editingGroupId: appState.editingGroupId, diff --git a/packages/element/src/sizeHelpers.ts b/packages/element/src/sizeHelpers.ts index 7a84dadba4..bd3d3fb0c4 100644 --- a/packages/element/src/sizeHelpers.ts +++ b/packages/element/src/sizeHelpers.ts @@ -6,7 +6,6 @@ import { import type { AppState, Offsets, Zoom } from "@excalidraw/excalidraw/types"; import { getCommonBounds, getElementBounds } from "./bounds"; -import { mutateElement } from "./mutateElement"; import { isFreeDrawElement, isLinearElement } from "./typeChecks"; import type { ElementsMap, ExcalidrawElement } from "./types"; @@ -170,41 +169,6 @@ export const getLockedLinearCursorAlignSize = ( return { width, height }; }; -export const resizePerfectLineForNWHandler = ( - element: ExcalidrawElement, - x: number, - y: number, -) => { - const anchorX = element.x + element.width; - const anchorY = element.y + element.height; - const distanceToAnchorX = x - anchorX; - const distanceToAnchorY = y - anchorY; - if (Math.abs(distanceToAnchorX) < Math.abs(distanceToAnchorY) / 2) { - mutateElement(element, { - x: anchorX, - width: 0, - y, - height: -distanceToAnchorY, - }); - } else if (Math.abs(distanceToAnchorY) < Math.abs(element.width) / 2) { - mutateElement(element, { - y: anchorY, - height: 0, - }); - } else { - const nextHeight = - Math.sign(distanceToAnchorY) * - Math.sign(distanceToAnchorX) * - element.width; - mutateElement(element, { - x, - y: anchorY - nextHeight, - width: -distanceToAnchorX, - height: nextHeight, - }); - } -}; - export const getNormalizedDimensions = ( element: Pick, ): { diff --git a/packages/element/src/textElement.ts b/packages/element/src/textElement.ts index 55c3f692ce..8ec0ef426a 100644 --- a/packages/element/src/textElement.ts +++ b/packages/element/src/textElement.ts @@ -14,12 +14,14 @@ import type { AppState } from "@excalidraw/excalidraw/types"; import type { ExtractSetType } from "@excalidraw/common/utility-types"; +import type { Radians } from "@excalidraw/math"; + import { resetOriginalContainerCache, updateOriginalContainerCache, } from "./containerCache"; import { LinearElementEditor } from "./linearElementEditor"; -import { mutateElement } from "./mutateElement"; + import { measureText } from "./textMeasurements"; import { wrapText } from "./textWrapping"; import { @@ -28,7 +30,7 @@ import { isTextElement, } from "./typeChecks"; -import type { Radians } from "../../math/src"; +import type Scene from "./Scene"; import type { MaybeTransformHandleType } from "./transformHandles"; import type { @@ -44,9 +46,10 @@ import type { export const redrawTextBoundingBox = ( textElement: ExcalidrawTextElement, container: ExcalidrawElement | null, - elementsMap: ElementsMap, - informMutation = true, + scene: Scene, ) => { + const elementsMap = scene.getNonDeletedElementsMap(); + let maxWidth = undefined; if (!isProdEnv()) { @@ -106,38 +109,43 @@ export const redrawTextBoundingBox = ( metrics.height, container.type, ); - mutateElement(container, { height: nextHeight }, informMutation); + scene.mutateElement(container, { height: nextHeight }); updateOriginalContainerCache(container.id, nextHeight); } + if (metrics.width > maxContainerWidth) { const nextWidth = computeContainerDimensionForBoundText( metrics.width, container.type, ); - mutateElement(container, { width: nextWidth }, informMutation); + scene.mutateElement(container, { width: nextWidth }); } + const updatedTextElement = { ...textElement, ...boundTextUpdates, } as ExcalidrawTextElementWithContainer; + const { x, y } = computeBoundTextPosition( container, updatedTextElement, elementsMap, ); + boundTextUpdates.x = x; boundTextUpdates.y = y; } - mutateElement(textElement, boundTextUpdates, informMutation); + scene.mutateElement(textElement, boundTextUpdates); }; export const handleBindTextResize = ( container: NonDeletedExcalidrawElement, - elementsMap: ElementsMap, + scene: Scene, transformHandleType: MaybeTransformHandleType, shouldMaintainAspectRatio = false, ) => { + const elementsMap = scene.getNonDeletedElementsMap(); const boundTextElementId = getBoundTextElementId(container); if (!boundTextElementId) { return; @@ -190,20 +198,20 @@ export const handleBindTextResize = ( transformHandleType === "n") ? container.y - diff : container.y; - mutateElement(container, { + scene.mutateElement(container, { height: containerHeight, y: updatedY, }); } - mutateElement(textElement, { + scene.mutateElement(textElement, { text, width: nextWidth, height: nextHeight, }); if (!isArrowElement(container)) { - mutateElement( + scene.mutateElement( textElement, computeBoundTextPosition(container, textElement, elementsMap), ); diff --git a/packages/element/src/zindex.ts b/packages/element/src/zindex.ts index e09142e4a0..b99cf833cc 100644 --- a/packages/element/src/zindex.ts +++ b/packages/element/src/zindex.ts @@ -2,8 +2,6 @@ import { arrayToMap, findIndex, findLastIndex } from "@excalidraw/common"; import type { AppState } from "@excalidraw/excalidraw/types"; -import type Scene from "@excalidraw/excalidraw/scene/Scene"; - import { isFrameLikeElement } from "./typeChecks"; import { getElementsInGroup } from "./groups"; @@ -12,6 +10,8 @@ import { syncMovedIndices } from "./fractionalIndex"; import { getSelectedElements } from "./selection"; +import type Scene from "./Scene"; + import type { ExcalidrawElement, ExcalidrawFrameLikeElement } from "./types"; const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => { diff --git a/packages/element/tests/duplicate.test.tsx b/packages/element/tests/duplicate.test.tsx index fd748757bb..ed25083904 100644 --- a/packages/element/tests/duplicate.test.tsx +++ b/packages/element/tests/duplicate.test.tsx @@ -7,7 +7,7 @@ import { isPrimitive, } from "@excalidraw/common"; -import { Excalidraw } from "@excalidraw/excalidraw"; +import { Excalidraw, mutateElement } from "@excalidraw/excalidraw"; import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions"; @@ -24,7 +24,6 @@ import { import type { LocalPoint } from "@excalidraw/math"; -import { mutateElement } from "../src/mutateElement"; import { duplicateElement, duplicateElements } from "../src/duplicate"; import type { ExcalidrawLinearElement } from "../src/types"; @@ -62,7 +61,7 @@ describe("duplicating single elements", () => { // @ts-ignore element.__proto__ = { hello: "world" }; - mutateElement(element, { + mutateElement(element, new Map(), { points: [pointFrom(1, 2), pointFrom(3, 4)], }); diff --git a/packages/element/tests/elbowArrow.test.tsx b/packages/element/tests/elbowArrow.test.tsx index b8b5a8b85d..25f64072e7 100644 --- a/packages/element/tests/elbowArrow.test.tsx +++ b/packages/element/tests/elbowArrow.test.tsx @@ -1,8 +1,7 @@ import { ARROW_TYPE } from "@excalidraw/common"; import { pointFrom } from "@excalidraw/math"; -import { Excalidraw, mutateElement } from "@excalidraw/excalidraw"; +import { Excalidraw } from "@excalidraw/excalidraw"; -import Scene from "@excalidraw/excalidraw/scene/Scene"; import { actionSelectAll } from "@excalidraw/excalidraw/actions"; import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions/actionDuplicateSelection"; @@ -23,6 +22,8 @@ import type { LocalPoint } from "@excalidraw/math"; import { bindLinearElement } from "../src/binding"; +import Scene from "../src/Scene"; + import type { ExcalidrawArrowElement, ExcalidrawBindableElement, @@ -142,7 +143,7 @@ describe("elbow arrow routing", () => { elbowed: true, }) as ExcalidrawElbowArrowElement; scene.insertElement(arrow); - mutateElement(arrow, { + h.app.scene.mutateElement(arrow, { points: [ pointFrom(-45 - arrow.x, -100.1 - arrow.y), pointFrom(45 - arrow.x, 99.9 - arrow.y), @@ -187,14 +188,14 @@ describe("elbow arrow routing", () => { scene.insertElement(rectangle1); scene.insertElement(rectangle2); scene.insertElement(arrow); - const elementsMap = scene.getNonDeletedElementsMap(); - bindLinearElement(arrow, rectangle1, "start", elementsMap); - bindLinearElement(arrow, rectangle2, "end", elementsMap); + + bindLinearElement(arrow, rectangle1, "start", scene); + bindLinearElement(arrow, rectangle2, "end", scene); expect(arrow.startBinding).not.toBe(null); expect(arrow.endBinding).not.toBe(null); - mutateElement(arrow, { + h.app.scene.mutateElement(arrow, { points: [pointFrom(0, 0), pointFrom(90, 200)], }); diff --git a/packages/element/tests/fractionalIndex.test.ts b/packages/element/tests/fractionalIndex.test.ts index 5d040e29f2..c8cc9ad2d1 100644 --- a/packages/element/tests/fractionalIndex.test.ts +++ b/packages/element/tests/fractionalIndex.test.ts @@ -14,6 +14,7 @@ import { deepCopyElement } from "@excalidraw/element/duplicate"; import { API } from "@excalidraw/excalidraw/tests/helpers/api"; import type { + ElementsMap, ExcalidrawElement, FractionalIndex, } from "@excalidraw/element/types"; @@ -749,7 +750,7 @@ function testInvalidIndicesSync(args: { function prepareArguments( elementsLike: { id: string; index?: string }[], movedElementsIds?: string[], -): [ExcalidrawElement[], Map | undefined] { +): [ExcalidrawElement[], ElementsMap | undefined] { const elements = elementsLike.map((x) => API.createElement({ id: x.id, index: x.index as FractionalIndex }), ); @@ -764,7 +765,7 @@ function prepareArguments( function test( name: string, elements: ExcalidrawElement[], - movedElements: Map | undefined, + movedElements: ElementsMap | undefined, expectUnchangedElements: Map, expectValidInput?: boolean, ) { diff --git a/packages/element/tests/resize.test.tsx b/packages/element/tests/resize.test.tsx index f3804e2a22..98fbf2a9a0 100644 --- a/packages/element/tests/resize.test.tsx +++ b/packages/element/tests/resize.test.tsx @@ -333,7 +333,7 @@ describe("line element", () => { element, element, h.app.scene.getNonDeletedElementsMap(), - h.app.scene.getNonDeletedElementsMap(), + h.app.scene, "ne", ); @@ -369,7 +369,7 @@ describe("line element", () => { element, element, h.app.scene.getNonDeletedElementsMap(), - h.app.scene.getNonDeletedElementsMap(), + h.app.scene, "se", ); @@ -424,7 +424,7 @@ describe("line element", () => { element, element, h.app.scene.getNonDeletedElementsMap(), - h.app.scene.getNonDeletedElementsMap(), + h.app.scene, "e", { shouldResizeFromCenter: true, diff --git a/packages/element/tests/sortElements.test.ts b/packages/element/tests/sortElements.test.ts index 509e5e9d0a..1735a6bece 100644 --- a/packages/element/tests/sortElements.test.ts +++ b/packages/element/tests/sortElements.test.ts @@ -1,10 +1,12 @@ import { API } from "@excalidraw/excalidraw/tests/helpers/api"; -import { mutateElement } from "../src/mutateElement"; +import { mutateElement } from "@excalidraw/element/mutateElement"; + import { normalizeElementOrder } from "../src/sortElements"; import type { ExcalidrawElement } from "../src/types"; +const { h } = window; const assertOrder = ( elements: readonly ExcalidrawElement[], expectedOrder: string[], @@ -35,7 +37,7 @@ describe("normalizeElementsOrder", () => { boundElements: [], }); - mutateElement(container, { + mutateElement(container, new Map(), { boundElements: [{ type: "text", id: boundText.id }], }); @@ -352,7 +354,7 @@ describe("normalizeElementsOrder", () => { containerId: container.id, }); - mutateElement(container, { + h.app.scene.mutateElement(container, { boundElements: [ { type: "text", id: boundText.id }, { type: "text", id: "xxx" }, @@ -387,7 +389,7 @@ describe("normalizeElementsOrder", () => { boundElements: [], groupIds: ["C", "A"], }); - mutateElement(container, { + h.app.scene.mutateElement(container, { boundElements: [{ type: "text", id: boundText.id }], }); diff --git a/packages/excalidraw/actions/actionAlign.tsx b/packages/excalidraw/actions/actionAlign.tsx index 46023d61ea..0ef938c67f 100644 --- a/packages/excalidraw/actions/actionAlign.tsx +++ b/packages/excalidraw/actions/actionAlign.tsx @@ -50,14 +50,8 @@ const alignSelectedElements = ( alignment: Alignment, ) => { const selectedElements = app.scene.getSelectedElements(appState); - const elementsMap = arrayToMap(elements); - const updatedElements = alignElements( - selectedElements, - elementsMap, - alignment, - app.scene, - ); + const updatedElements = alignElements(selectedElements, alignment, app.scene); const updatedElementsMap = arrayToMap(updatedElements); diff --git a/packages/excalidraw/actions/actionBoundText.tsx b/packages/excalidraw/actions/actionBoundText.tsx index d08ad341ee..c7843656cf 100644 --- a/packages/excalidraw/actions/actionBoundText.tsx +++ b/packages/excalidraw/actions/actionBoundText.tsx @@ -27,7 +27,6 @@ import { isUsingAdaptiveRadius, } from "@excalidraw/element/typeChecks"; -import { mutateElement } from "@excalidraw/element/mutateElement"; import { measureText } from "@excalidraw/element/textMeasurements"; import { syncMovedIndices } from "@excalidraw/element/fractionalIndex"; @@ -43,12 +42,12 @@ import type { import type { Mutable } from "@excalidraw/common/utility-types"; +import type { Radians } from "@excalidraw/math"; + import { CaptureUpdateAction } from "../store"; import { register } from "./register"; -import type { Radians } from "../../math/src"; - import type { AppState } from "../types"; export const actionUnbindText = register({ @@ -80,7 +79,7 @@ export const actionUnbindText = register({ boundTextElement, elementsMap, ); - mutateElement(boundTextElement as ExcalidrawTextElement, { + app.scene.mutateElement(boundTextElement as ExcalidrawTextElement, { containerId: null, width, height, @@ -88,7 +87,7 @@ export const actionUnbindText = register({ x, y, }); - mutateElement(element, { + app.scene.mutateElement(element, { boundElements: element.boundElements?.filter( (ele) => ele.id !== boundTextElement.id, ), @@ -153,25 +152,21 @@ export const actionBindText = register({ textElement = selectedElements[1] as ExcalidrawTextElement; container = selectedElements[0] as ExcalidrawTextContainer; } - mutateElement(textElement, { + app.scene.mutateElement(textElement, { containerId: container.id, verticalAlign: VERTICAL_ALIGN.MIDDLE, textAlign: TEXT_ALIGN.CENTER, autoResize: true, angle: (isArrowElement(container) ? 0 : container?.angle ?? 0) as Radians, }); - mutateElement(container, { + app.scene.mutateElement(container, { boundElements: (container.boundElements || []).concat({ type: "text", id: textElement.id, }), }); const originalContainerHeight = container.height; - redrawTextBoundingBox( - textElement, - container, - app.scene.getNonDeletedElementsMap(), - ); + redrawTextBoundingBox(textElement, container, app.scene); // overwritting the cache with original container height so // it can be restored when unbind updateOriginalContainerCache(container.id, originalContainerHeight); @@ -301,27 +296,23 @@ export const actionWrapTextInContainer = register({ } if (startBinding || endBinding) { - mutateElement(ele, { startBinding, endBinding }, false); + app.scene.mutateElement(ele, { + startBinding, + endBinding, + }); } }); } - mutateElement( - textElement, - { - containerId: container.id, - verticalAlign: VERTICAL_ALIGN.MIDDLE, - boundElements: null, - textAlign: TEXT_ALIGN.CENTER, - autoResize: true, - }, - false, - ); - redrawTextBoundingBox( - textElement, - container, - app.scene.getNonDeletedElementsMap(), - ); + app.scene.mutateElement(textElement, { + containerId: container.id, + verticalAlign: VERTICAL_ALIGN.MIDDLE, + boundElements: null, + textAlign: TEXT_ALIGN.CENTER, + autoResize: true, + }); + + redrawTextBoundingBox(textElement, container, app.scene); updatedElements = pushContainerBelowText( [...updatedElements, container], diff --git a/packages/excalidraw/actions/actionDeleteSelected.test.tsx b/packages/excalidraw/actions/actionDeleteSelected.test.tsx index 090c819418..708d2cc556 100644 --- a/packages/excalidraw/actions/actionDeleteSelected.test.tsx +++ b/packages/excalidraw/actions/actionDeleteSelected.test.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Excalidraw, mutateElement } from "../index"; +import { Excalidraw } from "../index"; import { API } from "../tests/helpers/api"; import { act, assertElements, render } from "../tests/test-utils"; @@ -56,7 +56,7 @@ describe("deleting selected elements when frame selected should keep children + frameId: f1.id, }); - mutateElement(r1, { + h.app.scene.mutateElement(r1, { boundElements: [{ type: "text", id: t1.id }], }); @@ -94,7 +94,7 @@ describe("deleting selected elements when frame selected should keep children + frameId: null, }); - mutateElement(r1, { + h.app.scene.mutateElement(r1, { boundElements: [{ type: "text", id: t1.id }], }); @@ -132,7 +132,7 @@ describe("deleting selected elements when frame selected should keep children + frameId: null, }); - mutateElement(r1, { + h.app.scene.mutateElement(r1, { boundElements: [{ type: "text", id: t1.id }], }); @@ -170,7 +170,7 @@ describe("deleting selected elements when frame selected should keep children + frameId: null, }); - mutateElement(a1, { + h.app.scene.mutateElement(a1, { boundElements: [{ type: "text", id: t1.id }], }); diff --git a/packages/excalidraw/actions/actionDeleteSelected.tsx b/packages/excalidraw/actions/actionDeleteSelected.tsx index 75e666df02..e183d05f49 100644 --- a/packages/excalidraw/actions/actionDeleteSelected.tsx +++ b/packages/excalidraw/actions/actionDeleteSelected.tsx @@ -3,10 +3,7 @@ import { KEYS, updateActiveTool } from "@excalidraw/common"; import { getNonDeletedElements } from "@excalidraw/element"; import { fixBindingsAfterDeletion } from "@excalidraw/element/binding"; import { LinearElementEditor } from "@excalidraw/element/linearElementEditor"; -import { - mutateElement, - newElementWith, -} from "@excalidraw/element/mutateElement"; +import { newElementWith } from "@excalidraw/element/mutateElement"; import { getContainerElement } from "@excalidraw/element/textElement"; import { isBoundToContainer, @@ -94,7 +91,7 @@ const deleteSelectedElements = ( el.boundElements.forEach((candidate) => { const bound = app.scene.getNonDeletedElementsMap().get(candidate.id); if (bound && isElbowArrow(bound)) { - mutateElement(bound, { + app.scene.mutateElement(bound, { startBinding: el.id === bound.startBinding?.elementId ? null @@ -102,7 +99,6 @@ const deleteSelectedElements = ( endBinding: el.id === bound.endBinding?.elementId ? null : bound.endBinding, }); - mutateElement(bound, { points: bound.points }); } }); } @@ -261,7 +257,11 @@ export const actionDeleteSelected = register({ : endBindingElement, }; - LinearElementEditor.deletePoints(element, selectedPointsIndices); + LinearElementEditor.deletePoints( + element, + app.scene, + selectedPointsIndices, + ); return { elements, diff --git a/packages/excalidraw/actions/actionDuplicateSelection.tsx b/packages/excalidraw/actions/actionDuplicateSelection.tsx index 17b452c365..034edf5438 100644 --- a/packages/excalidraw/actions/actionDuplicateSelection.tsx +++ b/packages/excalidraw/actions/actionDuplicateSelection.tsx @@ -43,7 +43,7 @@ export const actionDuplicateSelection = register({ try { const newAppState = LinearElementEditor.duplicateSelectedPoints( appState, - app.scene.getNonDeletedElementsMap(), + app.scene, ); return { diff --git a/packages/excalidraw/actions/actionFinalize.tsx b/packages/excalidraw/actions/actionFinalize.tsx index 9849616562..22638ee917 100644 --- a/packages/excalidraw/actions/actionFinalize.tsx +++ b/packages/excalidraw/actions/actionFinalize.tsx @@ -5,7 +5,7 @@ import { bindOrUnbindLinearElement, } from "@excalidraw/element/binding"; import { LinearElementEditor } from "@excalidraw/element/linearElementEditor"; -import { mutateElement } from "@excalidraw/element/mutateElement"; + import { isBindingElement, isLinearElement, @@ -46,7 +46,6 @@ export const actionFinalize = register({ element, startBindingElement, endBindingElement, - elementsMap, scene, ); } @@ -72,7 +71,11 @@ export const actionFinalize = register({ scene.getElement(appState.pendingImageElementId); if (pendingImageElement) { - mutateElement(pendingImageElement, { isDeleted: true }, false); + scene.mutateElement( + pendingImageElement, + { isDeleted: true }, + { informMutation: false, isDragging: false }, + ); } if (window.document.activeElement instanceof HTMLElement) { @@ -96,7 +99,7 @@ export const actionFinalize = register({ !lastCommittedPoint || points[points.length - 1] !== lastCommittedPoint ) { - mutateElement(multiPointElement, { + scene.mutateElement(multiPointElement, { points: multiPointElement.points.slice(0, -1), }); } @@ -120,7 +123,7 @@ export const actionFinalize = register({ if (isLoop) { const linePoints = multiPointElement.points; const firstPoint = linePoints[0]; - mutateElement(multiPointElement, { + scene.mutateElement(multiPointElement, { points: linePoints.map((p, index) => index === linePoints.length - 1 ? pointFrom(firstPoint[0], firstPoint[1]) @@ -140,13 +143,7 @@ export const actionFinalize = register({ -1, arrayToMap(elements), ); - maybeBindLinearElement( - multiPointElement, - appState, - { x, y }, - elementsMap, - elements, - ); + maybeBindLinearElement(multiPointElement, appState, { x, y }, scene); } } @@ -202,7 +199,10 @@ export const actionFinalize = register({ // To select the linear element when user has finished mutipoint editing selectedLinearElement: multiPointElement && isLinearElement(multiPointElement) - ? new LinearElementEditor(multiPointElement) + ? new LinearElementEditor( + multiPointElement, + arrayToMap(newElements), + ) : appState.selectedLinearElement, pendingImageElementId: null, }, diff --git a/packages/excalidraw/actions/actionFlip.ts b/packages/excalidraw/actions/actionFlip.ts index 62be891cb7..becc8a976d 100644 --- a/packages/excalidraw/actions/actionFlip.ts +++ b/packages/excalidraw/actions/actionFlip.ts @@ -4,10 +4,7 @@ import { isBindingEnabled, } from "@excalidraw/element/binding"; import { getCommonBoundingBox } from "@excalidraw/element/bounds"; -import { - mutateElement, - newElementWith, -} from "@excalidraw/element/mutateElement"; +import { newElementWith } from "@excalidraw/element/mutateElement"; import { deepCopyElement } from "@excalidraw/element/duplicate"; import { resizeMultipleElements } from "@excalidraw/element/resizeElements"; import { @@ -162,11 +159,9 @@ const flipElements = ( bindOrUnbindLinearElements( selectedElements.filter(isLinearElement), - elementsMap, - app.scene.getNonDeletedElements(), - app.scene, isBindingEnabled(appState), [], + app.scene, appState.zoom, ); @@ -194,13 +189,13 @@ const flipElements = ( getCommonBoundingBox(selectedElements); const [diffX, diffY] = [midX - newMidX, midY - newMidY]; otherElements.forEach((element) => - mutateElement(element, { + app.scene.mutateElement(element, { x: element.x + diffX, y: element.y + diffY, }), ); elbowArrows.forEach((element) => - mutateElement(element, { + app.scene.mutateElement(element, { x: element.x + diffX, y: element.y + diffY, }), diff --git a/packages/excalidraw/actions/actionFrame.ts b/packages/excalidraw/actions/actionFrame.ts index 13d57b2a12..7882d26f6f 100644 --- a/packages/excalidraw/actions/actionFrame.ts +++ b/packages/excalidraw/actions/actionFrame.ts @@ -173,11 +173,9 @@ export const actionWrapSelectionInFrame = register({ }, perform: (elements, appState, _, app) => { const selectedElements = getSelectedElements(elements, appState); + const elementsMap = app.scene.getNonDeletedElementsMap(); - const [x1, y1, x2, y2] = getCommonBounds( - selectedElements, - app.scene.getNonDeletedElementsMap(), - ); + const [x1, y1, x2, y2] = getCommonBounds(selectedElements, elementsMap); const PADDING = 16; const frame = newFrameElement({ x: x1 - PADDING, @@ -196,13 +194,9 @@ export const actionWrapSelectionInFrame = register({ for (const elementInGroup of elementsInGroup) { const index = elementInGroup.groupIds.indexOf(appState.editingGroupId); - mutateElement( - elementInGroup, - { - groupIds: elementInGroup.groupIds.slice(0, index), - }, - false, - ); + mutateElement(elementInGroup, elementsMap, { + groupIds: elementInGroup.groupIds.slice(0, index), + }); } } diff --git a/packages/excalidraw/actions/actionLinearEditor.tsx b/packages/excalidraw/actions/actionLinearEditor.tsx index 56e327bd2e..1645554bf7 100644 --- a/packages/excalidraw/actions/actionLinearEditor.tsx +++ b/packages/excalidraw/actions/actionLinearEditor.tsx @@ -2,6 +2,8 @@ import { LinearElementEditor } from "@excalidraw/element/linearElementEditor"; import { isElbowArrow, isLinearElement } from "@excalidraw/element/typeChecks"; +import { arrayToMap } from "@excalidraw/common"; + import type { ExcalidrawLinearElement } from "@excalidraw/element/types"; import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette"; @@ -50,7 +52,7 @@ export const actionToggleLinearEditor = register({ const editingLinearElement = appState.editingLinearElement?.elementId === selectedElement.id ? null - : new LinearElementEditor(selectedElement); + : new LinearElementEditor(selectedElement, arrayToMap(elements)); return { appState: { ...appState, diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index 5a309b6775..df07960aff 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -34,10 +34,7 @@ import { import { LinearElementEditor } from "@excalidraw/element/linearElementEditor"; -import { - mutateElement, - newElementWith, -} from "@excalidraw/element/mutateElement"; +import { newElementWith } from "@excalidraw/element/mutateElement"; import { getBoundTextElement, @@ -61,6 +58,7 @@ import type { LocalPoint } from "@excalidraw/math"; import type { Arrowhead, + ElementsMap, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawLinearElement, @@ -68,9 +66,10 @@ import type { FontFamilyValues, TextAlign, VerticalAlign, - NonDeletedSceneElementsMap, } from "@excalidraw/element/types"; +import type Scene from "@excalidraw/element/Scene"; + import { trackEvent } from "../analytics"; import { ButtonIconSelect } from "../components/ButtonIconSelect"; import { ColorPicker } from "../components/ColorPicker/ColorPicker"; @@ -207,25 +206,22 @@ export const getFormValue = function ( const offsetElementAfterFontResize = ( prevElement: ExcalidrawTextElement, nextElement: ExcalidrawTextElement, + scene: Scene, ) => { if (isBoundToContainer(nextElement) || !nextElement.autoResize) { return nextElement; } - return mutateElement( - nextElement, - { - x: - prevElement.textAlign === "left" - ? prevElement.x - : prevElement.x + - (prevElement.width - nextElement.width) / - (prevElement.textAlign === "center" ? 2 : 1), - // centering vertically is non-standard, but for Excalidraw I think - // it makes sense - y: prevElement.y + (prevElement.height - nextElement.height) / 2, - }, - false, - ); + return scene.mutateElement(nextElement, { + x: + prevElement.textAlign === "left" + ? prevElement.x + : prevElement.x + + (prevElement.width - nextElement.width) / + (prevElement.textAlign === "center" ? 2 : 1), + // centering vertically is non-standard, but for Excalidraw I think + // it makes sense + y: prevElement.y + (prevElement.height - nextElement.height) / 2, + }); }; const changeFontSize = ( @@ -251,10 +247,14 @@ const changeFontSize = ( redrawTextBoundingBox( newElement, app.scene.getContainerElement(oldElement), - app.scene.getNonDeletedElementsMap(), + app.scene, ); - newElement = offsetElementAfterFontResize(oldElement, newElement); + newElement = offsetElementAfterFontResize( + oldElement, + newElement, + app.scene, + ); return newElement; } @@ -264,15 +264,11 @@ const changeFontSize = ( ); // Update arrow elements after text elements have been updated - const updatedElementsMap = arrayToMap(updatedElements); getSelectedElements(elements, appState, { includeBoundTextElement: true, }).forEach((element) => { if (isTextElement(element)) { - updateBoundElements( - element, - updatedElementsMap as NonDeletedSceneElementsMap, - ); + updateBoundElements(element, app.scene); } }); @@ -778,7 +774,7 @@ type ChangeFontFamilyData = Partial< > > & { /** cache of selected & editing elements populated on opened popup */ - cachedElements?: Map; + cachedElements?: ElementsMap; /** flag to reset all elements to their cached versions */ resetAll?: true; /** flag to reset all containers to their cached versions */ @@ -919,7 +915,7 @@ export const actionChangeFontFamily = register({ if (resetContainers && container && cachedContainer) { // reset the container back to it's cached version - mutateElement(container, { ...cachedContainer }, false); + app.scene.mutateElement(container, { ...cachedContainer }); } if (!skipFontFaceCheck) { @@ -950,12 +946,7 @@ export const actionChangeFontFamily = register({ // we either skip the check (have at least one font face loaded) or do the check and find out all the font faces have loaded for (const [element, container] of elementContainerMapping) { // trigger synchronous redraw - redrawTextBoundingBox( - element, - container, - app.scene.getNonDeletedElementsMap(), - false, - ); + redrawTextBoundingBox(element, container, app.scene); } } else { // otherwise try to load all font faces for the given chars and redraw elements once our font faces loaded @@ -972,8 +963,7 @@ export const actionChangeFontFamily = register({ redrawTextBoundingBox( latestElement as ExcalidrawTextElement, latestContainer, - app.scene.getNonDeletedElementsMap(), - false, + app.scene, ); } } @@ -987,7 +977,7 @@ export const actionChangeFontFamily = register({ return result; }, PanelComponent: ({ elements, appState, app, updateData }) => { - const cachedElementsRef = useRef>(new Map()); + const cachedElementsRef = useRef(new Map()); const prevSelectedFontFamilyRef = useRef(null); // relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them const [batchedData, setBatchedData] = useState({}); @@ -996,7 +986,7 @@ export const actionChangeFontFamily = register({ const selectedFontFamily = useMemo(() => { const getFontFamily = ( elementsArray: readonly ExcalidrawElement[], - elementsMap: Map, + elementsMap: ElementsMap, ) => getFormValue( elementsArray, @@ -1179,7 +1169,7 @@ export const actionChangeTextAlign = register({ redrawTextBoundingBox( newElement, app.scene.getContainerElement(oldElement), - app.scene.getNonDeletedElementsMap(), + app.scene, ); return newElement; } @@ -1270,7 +1260,7 @@ export const actionChangeVerticalAlign = register({ redrawTextBoundingBox( newElement, app.scene.getContainerElement(oldElement), - app.scene.getNonDeletedElementsMap(), + app.scene, ); return newElement; } @@ -1670,10 +1660,10 @@ export const actionChangeArrowType = register({ newElement, startHoveredElement, "start", - elementsMap, + app.scene, ); endHoveredElement && - bindLinearElement(newElement, endHoveredElement, "end", elementsMap); + bindLinearElement(newElement, endHoveredElement, "end", app.scene); const startBinding = startElement && newElement.startBinding @@ -1684,7 +1674,6 @@ export const actionChangeArrowType = register({ newElement, startElement, "start", - elementsMap, ), } : null; @@ -1697,7 +1686,6 @@ export const actionChangeArrowType = register({ newElement, endElement, "end", - elementsMap, ), } : null; @@ -1729,7 +1717,7 @@ export const actionChangeArrowType = register({ newElement.startBinding.elementId, ) as ExcalidrawBindableElement; if (startElement) { - bindLinearElement(newElement, startElement, "start", elementsMap); + bindLinearElement(newElement, startElement, "start", app.scene); } } if (newElement.endBinding) { @@ -1737,7 +1725,7 @@ export const actionChangeArrowType = register({ newElement.endBinding.elementId, ) as ExcalidrawBindableElement; if (endElement) { - bindLinearElement(newElement, endElement, "end", elementsMap); + bindLinearElement(newElement, endElement, "end", app.scene); } } } @@ -1758,6 +1746,7 @@ export const actionChangeArrowType = register({ if (selected) { newState.selectedLinearElement = new LinearElementEditor( selected as ExcalidrawLinearElement, + arrayToMap(elements), ); } } diff --git a/packages/excalidraw/actions/actionSelectAll.ts b/packages/excalidraw/actions/actionSelectAll.ts index d7775774ae..ea13636b74 100644 --- a/packages/excalidraw/actions/actionSelectAll.ts +++ b/packages/excalidraw/actions/actionSelectAll.ts @@ -2,7 +2,7 @@ import { getNonDeletedElements } from "@excalidraw/element"; import { LinearElementEditor } from "@excalidraw/element/linearElementEditor"; import { isLinearElement, isTextElement } from "@excalidraw/element/typeChecks"; -import { KEYS } from "@excalidraw/common"; +import { arrayToMap, KEYS } from "@excalidraw/common"; import { selectGroupsForSelectedElements } from "@excalidraw/element/groups"; @@ -53,7 +53,7 @@ export const actionSelectAll = register({ // single linear element selected Object.keys(selectedElementIds).length === 1 && isLinearElement(elements[0]) - ? new LinearElementEditor(elements[0]) + ? new LinearElementEditor(elements[0], arrayToMap(elements)) : null, }, captureUpdate: CaptureUpdateAction.IMMEDIATELY, diff --git a/packages/excalidraw/actions/actionStyles.ts b/packages/excalidraw/actions/actionStyles.ts index ed3c91e304..08b32e227f 100644 --- a/packages/excalidraw/actions/actionStyles.ts +++ b/packages/excalidraw/actions/actionStyles.ts @@ -139,11 +139,8 @@ export const actionPasteStyles = register({ element.id === newElement.containerId, ) || null; } - redrawTextBoundingBox( - newElement, - container, - app.scene.getNonDeletedElementsMap(), - ); + + redrawTextBoundingBox(newElement, container, app.scene); } if ( diff --git a/packages/excalidraw/change.ts b/packages/excalidraw/change.ts index 28eaf994fc..e7ba76f603 100644 --- a/packages/excalidraw/change.ts +++ b/packages/excalidraw/change.ts @@ -37,6 +37,8 @@ import { syncMovedIndices, } from "@excalidraw/element/fractionalIndex"; +import Scene from "@excalidraw/element/Scene"; + import type { BindableProp, BindingProp } from "@excalidraw/element/binding"; import type { ElementUpdate } from "@excalidraw/element/mutateElement"; @@ -490,6 +492,7 @@ export class AppStateChange implements Change { nextElements.get( selectedLinearElementId, ) as NonDeleted, + nextElements, ) : null; @@ -499,6 +502,7 @@ export class AppStateChange implements Change { nextElements.get( editingLinearElementId, ) as NonDeleted, + nextElements, ) : null; @@ -1132,9 +1136,6 @@ export class ElementsChange implements Change { } try { - // TODO: #7348 refactor away mutations below, so that we couldn't end up in an incosistent state - ElementsChange.redrawTextBoundingBoxes(nextElements, changedElements); - // the following reorder performs also mutations, but only on new instances of changed elements // (unless something goes really bad and it fallbacks to fixing all invalid indices) nextElements = ElementsChange.reorderElements( @@ -1143,8 +1144,14 @@ export class ElementsChange implements Change { flags, ); + // we don't have an up-to-date scene, as we can be just in the middle of applying history entry + // we also don't have a scene on the server + // so we are creating a temp scene just to query and mutate elements + const tempScene = new Scene(nextElements); + + ElementsChange.redrawTextBoundingBoxes(tempScene, changedElements); // Need ordered nextElements to avoid z-index binding issues - ElementsChange.redrawBoundArrows(nextElements, changedElements); + ElementsChange.redrawBoundArrows(tempScene, changedElements); } catch (e) { console.error( `Couldn't mutate elements after applying elements change`, @@ -1337,8 +1344,9 @@ export class ElementsChange implements Change { } else { affectedElement = mutateElement( nextElement, + nextElements, updates as ElementUpdate, - ); + ) as OrderedExcalidrawElement; } nextAffectedElements.set(affectedElement.id, affectedElement); @@ -1456,9 +1464,10 @@ export class ElementsChange implements Change { } private static redrawTextBoundingBoxes( - elements: SceneElementsMap, + scene: Scene, changed: Map, ) { + const elements = scene.getNonDeletedElementsMap(); const boxesToRedraw = new Map< string, { container: OrderedExcalidrawElement; boundText: ExcalidrawTextElement } @@ -1498,17 +1507,17 @@ export class ElementsChange implements Change { continue; } - redrawTextBoundingBox(boundText, container, elements, false); + redrawTextBoundingBox(boundText, container, scene); } } private static redrawBoundArrows( - elements: SceneElementsMap, + scene: Scene, changed: Map, ) { for (const element of changed.values()) { if (!element.isDeleted && isBindableElement(element)) { - updateBoundElements(element, elements, { + updateBoundElements(element, scene, { changedElements: changed, }); } diff --git a/packages/excalidraw/clipboard.ts b/packages/excalidraw/clipboard.ts index 40e4f8b96d..c9ee92cacc 100644 --- a/packages/excalidraw/clipboard.ts +++ b/packages/excalidraw/clipboard.ts @@ -172,7 +172,7 @@ export const serializeAsClipboardJSON = ({ !framesToCopy.has(getContainingFrame(element, elementsMap)!) ) { const copiedElement = deepCopyElement(element); - mutateElement(copiedElement, { + mutateElement(copiedElement, elementsMap, { frameId: null, }); return copiedElement; diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index a70cb9808a..0381a2e393 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -122,10 +122,7 @@ import { import { LinearElementEditor } from "@excalidraw/element/linearElementEditor"; -import { - mutateElement, - newElementWith, -} from "@excalidraw/element/mutateElement"; +import { newElementWith } from "@excalidraw/element/mutateElement"; import { newFrameElement, @@ -303,6 +300,10 @@ import { import { isNonDeletedElement } from "@excalidraw/element"; +import Scene from "@excalidraw/element/Scene"; + +import type { ElementUpdate } from "@excalidraw/element/mutateElement"; + import type { LocalPoint, Radians } from "@excalidraw/math"; import type { @@ -328,9 +329,10 @@ import type { MagicGenerationData, ExcalidrawNonSelectionElement, ExcalidrawArrowElement, + ExcalidrawElbowArrowElement, } from "@excalidraw/element/types"; -import type { ValueOf } from "@excalidraw/common/utility-types"; +import type { Mutable, ValueOf } from "@excalidraw/common/utility-types"; import { actionAddToLibrary, @@ -403,7 +405,6 @@ import { hasBackground, isSomeElementSelected, } from "../scene"; -import Scene from "../scene/Scene"; import { getStateForZoom } from "../scene/zoom"; import { dataURLToFile, @@ -760,6 +761,7 @@ class App extends React.Component { if (excalidrawAPI) { const api: ExcalidrawImperativeAPI = { updateScene: this.updateScene, + mutateElement: this.mutateElement, updateLibrary: this.library.updateLibrary, addFiles: this.addFiles, resetScene: this.resetScene, @@ -1387,7 +1389,7 @@ class App extends React.Component { private resetEditingFrame = (frame: ExcalidrawFrameLikeElement | null) => { if (frame) { - mutateElement(frame, { name: frame.name?.trim() || null }); + this.scene.mutateElement(frame, { name: frame.name?.trim() || null }); } this.setState({ editingFrame: null }); }; @@ -1444,7 +1446,7 @@ class App extends React.Component { autoFocus value={frameNameInEdit} onChange={(e) => { - mutateElement(f, { + this.scene.mutateElement(f, { name: e.target.value, }); }} @@ -1670,7 +1672,7 @@ class App extends React.Component { { // state only. // Thus reset so that we prefer local cache (if there was some // generationData set previously) - mutateElement( + this.scene.mutateElement( frameElement, - { customData: { generationData: undefined } }, - false, + { + customData: { generationData: undefined }, + }, + { informMutation: false, isDragging: false }, ); } else { - mutateElement( + this.scene.mutateElement( frameElement, - { customData: { generationData: data } }, - false, + { + customData: { generationData: data }, + }, + { informMutation: false, isDragging: false }, ); } this.magicGenerations.set(frameElement.id, data); @@ -2119,7 +2125,7 @@ class App extends React.Component { this.scene.insertElement(frame); for (const child of selectedElements) { - mutateElement(child, { frameId: frame.id }); + this.scene.mutateElement(child, { frameId: frame.id }); } this.setState({ @@ -2918,8 +2924,7 @@ class App extends React.Component { nonDeletedElementsMap, ), ), - this.scene.getNonDeletedElementsMap(), - this.scene.getNonDeletedElements(), + this.scene, ); } @@ -3317,11 +3322,7 @@ class App extends React.Component { newElement, this.scene.getElementsMapIncludingDeleted(), ); - redrawTextBoundingBox( - newElement, - container, - this.scene.getElementsMapIncludingDeleted(), - ); + redrawTextBoundingBox(newElement, container, this.scene); } }); @@ -3444,7 +3445,11 @@ class App extends React.Component { } // hack to reset the `y` coord because we vertically center during // insertImageElement - mutateElement(initializedImageElement, { y }, false); + this.scene.mutateElement( + initializedImageElement, + { y }, + { informMutation: false, isDragging: false }, + ); y = imageElement.y + imageElement.height + 25; @@ -3998,6 +4003,17 @@ class App extends React.Component { }, ); + public mutateElement = >( + element: TElement, + updates: ElementUpdate, + informMutation = true, + ) => { + return this.scene.mutateElement(element, updates, { + informMutation, + isDragging: false, + }); + }; + private triggerRender = ( /** force always re-renders canvas even if no change */ force?: boolean, @@ -4166,9 +4182,9 @@ class App extends React.Component { ) { this.flowChartCreator.createNodes( selectedElements[0], - this.scene.getNonDeletedElementsMap(), this.state, getLinkDirectionFromKey(event.key), + this.scene, ); } @@ -4410,16 +4426,16 @@ class App extends React.Component { } selectedElements.forEach((element) => { - mutateElement( + this.scene.mutateElement( element, { x: element.x + offsetX, y: element.y + offsetY, }, - false, + { informMutation: false, isDragging: false }, ); - updateBoundElements(element, this.scene.getNonDeletedElementsMap(), { + updateBoundElements(element, this.scene, { simultaneouslyUpdated: selectedElements, }); }); @@ -4453,6 +4469,7 @@ class App extends React.Component { this.setState({ editingLinearElement: new LinearElementEditor( selectedElement, + this.scene.getNonDeletedElementsMap(), ), }); } @@ -4646,11 +4663,9 @@ class App extends React.Component { if (isArrowKey(event.key)) { bindOrUnbindLinearElements( this.scene.getSelectedElements(this.state).filter(isLinearElement), - this.scene.getNonDeletedElementsMap(), - this.scene.getNonDeletedElements(), - this.scene, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? [], + this.scene, this.state.zoom, ); this.setState({ suggestedBindings: [] }); @@ -4957,7 +4972,7 @@ class App extends React.Component { onChange: withBatchedUpdates((nextOriginalText) => { updateElement(nextOriginalText, false); if (isNonDeletedElement(element)) { - updateBoundElements(element, this.scene.getNonDeletedElementsMap()); + updateBoundElements(element, this.scene); } }), onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => { @@ -5320,7 +5335,10 @@ class App extends React.Component { const minHeight = getApproxMinLineHeight(fontSize, lineHeight); const newHeight = Math.max(container.height, minHeight); const newWidth = Math.max(container.width, minWidth); - mutateElement(container, { height: newHeight, width: newWidth }); + this.scene.mutateElement(container, { + height: newHeight, + width: newWidth, + }); sceneX = container.x + newWidth / 2; sceneY = container.y + newHeight / 2; if (parentCenterPosition) { @@ -5371,7 +5389,7 @@ class App extends React.Component { }); if (!existingTextElement && shouldBindToContainer && container) { - mutateElement(container, { + this.scene.mutateElement(container, { boundElements: (container.boundElements || []).concat({ type: "text", id: element.id, @@ -5447,7 +5465,10 @@ class App extends React.Component { ) { this.store.shouldCaptureIncrement(); this.setState({ - editingLinearElement: new LinearElementEditor(selectedElements[0]), + editingLinearElement: new LinearElementEditor( + selectedElements[0], + this.scene.getNonDeletedElementsMap(), + ), }); return; } else if ( @@ -5471,7 +5492,11 @@ class App extends React.Component { if (midPoint && midPoint > -1) { this.store.shouldCaptureIncrement(); - LinearElementEditor.deleteFixedSegment(selectedElements[0], midPoint); + LinearElementEditor.deleteFixedSegment( + selectedElements[0], + this.scene, + midPoint, + ); const nextCoords = LinearElementEditor.getSegmentMidpointHitCoords( { @@ -5854,7 +5879,6 @@ class App extends React.Component { scenePointerX, scenePointerY, this, - this.scene.getNonDeletedElementsMap(), ); if ( @@ -5916,7 +5940,7 @@ class App extends React.Component { lastPoint, ) >= LINE_CONFIRM_THRESHOLD ) { - mutateElement( + this.scene.mutateElement( multiElement, { points: [ @@ -5924,7 +5948,7 @@ class App extends React.Component { pointFrom(scenePointerX - rx, scenePointerY - ry), ], }, - false, + { informMutation: false, isDragging: false }, ); } else { setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER); @@ -5940,12 +5964,12 @@ class App extends React.Component { ) < LINE_CONFIRM_THRESHOLD ) { setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER); - mutateElement( + this.scene.mutateElement( multiElement, { points: points.slice(0, -1), }, - false, + { informMutation: false, isDragging: false }, ); } else { const [gridX, gridY] = getGridPoint( @@ -5977,8 +6001,9 @@ class App extends React.Component { if (isPathALoop(points, this.state.zoom.value)) { setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER); } + // update last uncommitted point - mutateElement( + this.scene.mutateElement( multiElement, { points: [ @@ -5989,9 +6014,9 @@ class App extends React.Component { ), ], }, - false, { isDragging: true, + informMutation: false, }, ); @@ -6578,7 +6603,7 @@ class App extends React.Component { const frame = this.getTopLayerFrameAtSceneCoords({ x, y }); - mutateElement(pendingImageElement, { + this.scene.mutateElement(pendingImageElement, { x, y, frameId: frame ? frame.id : null, @@ -7633,7 +7658,7 @@ class App extends React.Component { multiElement.type === "line" && isPathALoop(multiElement.points, this.state.zoom.value) ) { - mutateElement(multiElement, { + this.scene.mutateElement(multiElement, { lastCommittedPoint: multiElement.points[multiElement.points.length - 1], }); @@ -7644,7 +7669,7 @@ class App extends React.Component { // Elbow arrows cannot be created by putting down points // only the start and end points can be defined if (isElbowArrow(multiElement) && multiElement.points.length > 1) { - mutateElement(multiElement, { + this.scene.mutateElement(multiElement, { lastCommittedPoint: multiElement.points[multiElement.points.length - 1], }); @@ -7681,7 +7706,7 @@ class App extends React.Component { })); // clicking outside commit zone → update reference for last committed // point - mutateElement(multiElement, { + this.scene.mutateElement(multiElement, { lastCommittedPoint: multiElement.points[multiElement.points.length - 1], }); setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER); @@ -7767,7 +7792,7 @@ class App extends React.Component { ), }; }); - mutateElement(element, { + this.scene.mutateElement(element, { points: [...element.points, pointFrom(0, 0)], }); const boundElement = getHoveredElementForBinding( @@ -8017,7 +8042,7 @@ class App extends React.Component { index, gridX, gridY, - this.scene.getNonDeletedElementsMap(), + this.scene, ); flushSync(() => { @@ -8122,7 +8147,7 @@ class App extends React.Component { pointerCoords, this, !event[KEYS.CTRL_OR_CMD], - elementsMap, + this.scene, ); if (!ret) { return; @@ -8349,7 +8374,7 @@ class App extends React.Component { ), }; - mutateElement(croppingElement, { + this.scene.mutateElement(croppingElement, { crop: nextCrop, }); @@ -8606,13 +8631,16 @@ class App extends React.Component { ? newElement.pressures : [...newElement.pressures, event.pressure]; - mutateElement( + this.scene.mutateElement( newElement, { points: [...points, pointFrom(dx, dy)], pressures, }, - false, + { + informMutation: false, + isDragging: false, + }, ); this.setState({ @@ -8635,24 +8663,23 @@ class App extends React.Component { } if (points.length === 1) { - mutateElement( + this.scene.mutateElement( newElement, { points: [...points, pointFrom(dx, dy)], }, - false, + { informMutation: false, isDragging: false }, ); } else if ( points.length === 2 || (points.length > 1 && isElbowArrow(newElement)) ) { - mutateElement( + this.scene.mutateElement( newElement, { points: [...points.slice(0, -1), pointFrom(dx, dy)], }, - false, - { isDragging: true }, + { isDragging: true, informMutation: false }, ); } @@ -8763,7 +8790,10 @@ class App extends React.Component { selectedLinearElement: elementsWithinSelection.length === 1 && isLinearElement(elementsWithinSelection[0]) - ? new LinearElementEditor(elementsWithinSelection[0]) + ? new LinearElementEditor( + elementsWithinSelection[0], + this.scene.getNonDeletedElementsMap(), + ) : null, showHyperlinkPopup: elementsWithinSelection.length === 1 && @@ -8869,7 +8899,7 @@ class App extends React.Component { .map((e) => elementsMap.get(e.id)) .filter((e) => isElbowArrow(e)) .forEach((e) => { - !!e && mutateElement(e, {}, true); + !!e && this.scene.mutateElement(e, {}); }); } } @@ -8905,7 +8935,10 @@ class App extends React.Component { this.scene.getNonDeletedElementsMap(), ); if (element) { - mutateElement(element, {}, true); + this.scene.mutateElement( + element as ExcalidrawElbowArrowElement, + {}, + ); } } @@ -8934,7 +8967,6 @@ class App extends React.Component { element, startBindingElement, endBindingElement, - elementsMap, this.scene, ); } @@ -9001,7 +9033,7 @@ class App extends React.Component { ? [] : [...newElement.pressures, childEvent.pressure]; - mutateElement(newElement, { + this.scene.mutateElement(newElement, { points: [...points, pointFrom(dx, dy)], pressures, lastCommittedPoint: pointFrom(dx, dy), @@ -9048,15 +9080,20 @@ class App extends React.Component { ); if (!pointerDownState.drag.hasOccurred && newElement && !multiElement) { - mutateElement(newElement, { - points: [ - ...newElement.points, - pointFrom( - pointerCoords.x - newElement.x, - pointerCoords.y - newElement.y, - ), - ], - }); + this.scene.mutateElement( + newElement, + { + points: [ + ...newElement.points, + pointFrom( + pointerCoords.x - newElement.x, + pointerCoords.y - newElement.y, + ), + ], + }, + { informMutation: false, isDragging: false }, + ); + this.setState({ multiElement: newElement, newElement, @@ -9070,8 +9107,7 @@ class App extends React.Component { newElement, this.state, pointerCoords, - this.scene.getNonDeletedElementsMap(), - this.scene.getNonDeletedElements(), + this.scene, ); } this.setState({ suggestedBindings: [], startBoundElement: null }); @@ -9089,7 +9125,10 @@ class App extends React.Component { }, prevState, ), - selectedLinearElement: new LinearElementEditor(newElement), + selectedLinearElement: new LinearElementEditor( + newElement, + this.scene.getNonDeletedElementsMap(), + ), })); } else { this.setState((prevState) => ({ @@ -9112,7 +9151,7 @@ class App extends React.Component { ); if (newElement.width < minWidth) { - mutateElement(newElement, { + this.scene.mutateElement(newElement, { autoResize: true, }); } @@ -9162,7 +9201,14 @@ class App extends React.Component { } if (newElement) { - mutateElement(newElement, getNormalizedDimensions(newElement)); + this.scene.mutateElement( + newElement, + getNormalizedDimensions(newElement), + { + informMutation: false, + isDragging: false, + }, + ); // the above does not guarantee the scene to be rendered again, hence the trigger below this.scene.triggerUpdate(); } @@ -9194,7 +9240,7 @@ class App extends React.Component { ) { // remove the linear element from all groups // before removing it from the frame as well - mutateElement(linearElement, { + this.scene.mutateElement(linearElement, { groupIds: [], }); @@ -9223,12 +9269,12 @@ class App extends React.Component { this.state.editingGroupId!, ); - mutateElement( + this.scene.mutateElement( element, { groupIds: element.groupIds.slice(0, index), }, - false, + { informMutation: false, isDragging: false }, ); } @@ -9240,12 +9286,12 @@ class App extends React.Component { element.groupIds[element.groupIds.length - 1], ).length < 2 ) { - mutateElement( + this.scene.mutateElement( element, { groupIds: [], }, - false, + { informMutation: false, isDragging: false }, ); } }); @@ -9355,7 +9401,10 @@ class App extends React.Component { // the one we've hit if (selectedElements.length === 1) { this.setState({ - selectedLinearElement: new LinearElementEditor(hitElement), + selectedLinearElement: new LinearElementEditor( + hitElement, + this.scene.getNonDeletedElementsMap(), + ), }); } } @@ -9480,7 +9529,10 @@ class App extends React.Component { selectedLinearElement: newSelectedElements.length === 1 && isLinearElement(newSelectedElements[0]) - ? new LinearElementEditor(newSelectedElements[0]) + ? new LinearElementEditor( + newSelectedElements[0], + this.scene.getNonDeletedElementsMap(), + ) : prevState.selectedLinearElement, }; }); @@ -9554,7 +9606,10 @@ class App extends React.Component { // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1. // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized prevState.selectedLinearElement?.elementId !== hitElement.id - ? new LinearElementEditor(hitElement) + ? new LinearElementEditor( + hitElement, + this.scene.getNonDeletedElementsMap(), + ) : prevState.selectedLinearElement, })); } @@ -9647,11 +9702,9 @@ class App extends React.Component { bindOrUnbindLinearElements( linearElements, - this.scene.getNonDeletedElementsMap(), - this.scene.getNonDeletedElements(), - this.scene, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? [], + this.scene, this.state.zoom, ); } @@ -9808,12 +9861,12 @@ class App extends React.Component { const dataURL = this.files[fileId]?.dataURL || (await getDataURL(imageFile)); - const imageElement = mutateElement( + const imageElement = this.scene.mutateElement( _imageElement, { fileId, }, - false, + { informMutation: false, isDragging: false }, ) as NonDeleted; return new Promise>( @@ -9879,7 +9932,7 @@ class App extends React.Component { showCursorImagePreview, }); } catch (error: any) { - mutateElement(imageElement, { + this.scene.mutateElement(imageElement, { isDeleted: true, }); this.actionManager.executeAction(actionFinalize); @@ -10025,7 +10078,7 @@ class App extends React.Component { imageElement.height < DRAGGING_THRESHOLD / this.state.zoom.value ) { const placeholderSize = 100 / this.state.zoom.value; - mutateElement(imageElement, { + this.scene.mutateElement(imageElement, { x: imageElement.x - placeholderSize / 2, y: imageElement.y - placeholderSize / 2, width: placeholderSize, @@ -10059,7 +10112,7 @@ class App extends React.Component { const x = imageElement.x + imageElement.width / 2 - width / 2; const y = imageElement.y + imageElement.height / 2 - height / 2; - mutateElement(imageElement, { + this.scene.mutateElement(imageElement, { x, y, width, @@ -10490,7 +10543,10 @@ class App extends React.Component { this, ), selectedLinearElement: isLinearElement(element) - ? new LinearElementEditor(element) + ? new LinearElementEditor( + element, + this.scene.getNonDeletedElementsMap(), + ) : null, } : this.state), @@ -10523,8 +10579,9 @@ class App extends React.Component { height: distance(pointerDownState.origin.y, pointerCoords.y), shouldMaintainAspectRatio: shouldMaintainAspectRatio(event), shouldResizeFromCenter: false, + scene: this.scene, zoom: this.state.zoom.value, - informMutation, + informMutation: false, }); return; } @@ -10588,6 +10645,7 @@ class App extends React.Component { : shouldMaintainAspectRatio(event), shouldResizeFromCenter: shouldResizeFromCenter(event), zoom: this.state.zoom.value, + scene: this.scene, widthAspectRatio: aspectRatio, originOffset: this.state.originSnapOffset, informMutation, @@ -10675,7 +10733,7 @@ class App extends React.Component { transformHandleType, ); - mutateElement( + this.scene.mutateElement( croppingElement, cropElement( croppingElement, @@ -10690,16 +10748,12 @@ class App extends React.Component { ), ); - updateBoundElements( - croppingElement, - this.scene.getNonDeletedElementsMap(), - { - newSize: { - width: croppingElement.width, - height: croppingElement.height, - }, + updateBoundElements(croppingElement, this.scene, { + newSize: { + width: croppingElement.width, + height: croppingElement.height, }, - ); + }); this.setState({ isCropping: transformHandleType && transformHandleType !== "rotation", @@ -10813,7 +10867,6 @@ class App extends React.Component { pointerDownState.originalElements, transformHandleType, selectedElements, - this.scene.getElementsMapIncludingDeleted(), this.scene, shouldRotateWithDiscreteAngle(event), shouldResizeFromCenter(event), diff --git a/packages/excalidraw/components/ElementLinkDialog.tsx b/packages/excalidraw/components/ElementLinkDialog.tsx index 5a0b9107ba..e9766f3d7b 100644 --- a/packages/excalidraw/components/ElementLinkDialog.tsx +++ b/packages/excalidraw/components/ElementLinkDialog.tsx @@ -6,9 +6,10 @@ import { defaultGetElementLinkFromSelection, getLinkIdAndTypeFromSelection, } from "@excalidraw/element/elementLink"; -import { mutateElement } from "@excalidraw/element/mutateElement"; -import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types"; +import type { ExcalidrawElement } from "@excalidraw/element/types"; + +import type Scene from "@excalidraw/element/Scene"; import { t } from "../i18n"; import { getSelectedElements } from "../scene"; @@ -21,20 +22,20 @@ import { TrashIcon } from "./icons"; import "./ElementLinkDialog.scss"; import type { AppProps, AppState, UIAppState } from "../types"; - const ElementLinkDialog = ({ sourceElementId, onClose, - elementsMap, appState, + scene, generateLinkForSelection = defaultGetElementLinkFromSelection, }: { sourceElementId: ExcalidrawElement["id"]; - elementsMap: ElementsMap; appState: UIAppState; + scene: Scene; onClose?: () => void; generateLinkForSelection: AppProps["generateLinkForSelection"]; }) => { + const elementsMap = scene.getNonDeletedElementsMap(); const originalLink = elementsMap.get(sourceElementId)?.link ?? null; const [nextLink, setNextLink] = useState(originalLink); @@ -70,7 +71,7 @@ const ElementLinkDialog = ({ if (nextLink && nextLink !== elementsMap.get(sourceElementId)?.link) { const elementToLink = elementsMap.get(sourceElementId); elementToLink && - mutateElement(elementToLink, { + scene.mutateElement(elementToLink, { link: nextLink, }); } @@ -78,13 +79,13 @@ const ElementLinkDialog = ({ if (!nextLink && linkEdited && sourceElementId) { const elementToLink = elementsMap.get(sourceElementId); elementToLink && - mutateElement(elementToLink, { + scene.mutateElement(elementToLink, { link: null, }); } onClose?.(); - }, [sourceElementId, nextLink, elementsMap, linkEdited, onClose]); + }, [sourceElementId, nextLink, elementsMap, linkEdited, scene, onClose]); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index b5491dedd7..b2e0d446fa 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/packages/excalidraw/components/LayerUI.tsx @@ -5,6 +5,7 @@ import { CLASSES, DEFAULT_SIDEBAR, TOOL_TYPE, + arrayToMap, capitalizeString, isShallowEqual, } from "@excalidraw/common"; @@ -17,7 +18,6 @@ import { ShapeCache } from "@excalidraw/element/ShapeCache"; import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types"; -import Scene from "../scene/Scene"; import { actionToggleStats } from "../actions"; import { trackEvent } from "../analytics"; import { isHandToolActive } from "../appState"; @@ -446,22 +446,18 @@ const LayerUI = ({ if (selectedElements.length) { for (const element of selectedElements) { - mutateElement( - element, - { - [altKey && eyeDropperState.swapPreviewOnAlt - ? colorPickerType === "elementBackground" - ? "strokeColor" - : "backgroundColor" - : colorPickerType === "elementBackground" - ? "backgroundColor" - : "strokeColor"]: color, - }, - false, - ); + mutateElement(element, arrayToMap(elements), { + [altKey && eyeDropperState.swapPreviewOnAlt + ? colorPickerType === "elementBackground" + ? "strokeColor" + : "backgroundColor" + : colorPickerType === "elementBackground" + ? "backgroundColor" + : "strokeColor"]: color, + }); ShapeCache.delete(element); } - Scene.getScene(selectedElements[0])?.triggerUpdate(); + app.scene.triggerUpdate(); } else if (colorPickerType === "elementBackground") { setAppState({ currentItemBackgroundColor: color, @@ -494,7 +490,7 @@ const LayerUI = ({ openDialog: null, }); }} - elementsMap={app.scene.getNonDeletedElementsMap()} + scene={app.scene} appState={appState} generateLinkForSelection={generateLinkForSelection} /> diff --git a/packages/excalidraw/components/Stats/Angle.tsx b/packages/excalidraw/components/Stats/Angle.tsx index 67693551f6..d0cb187dac 100644 --- a/packages/excalidraw/components/Stats/Angle.tsx +++ b/packages/excalidraw/components/Stats/Angle.tsx @@ -1,7 +1,5 @@ import { degreesToRadians, radiansToDegrees } from "@excalidraw/math"; -import { mutateElement } from "@excalidraw/element/mutateElement"; - import { getBoundTextElement } from "@excalidraw/element/textElement"; import { isArrowElement, isElbowArrow } from "@excalidraw/element/typeChecks"; @@ -9,13 +7,14 @@ import type { Degrees } from "@excalidraw/math"; import type { ExcalidrawElement } from "@excalidraw/element/types"; +import type Scene from "@excalidraw/element/Scene"; + import { angleIcon } from "../icons"; import DragInput from "./DragInput"; import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils"; import type { DragInputCallbackType } from "./DragInput"; -import type Scene from "../../scene/Scene"; import type { AppState } from "../../types"; interface AngleProps { @@ -35,7 +34,6 @@ const handleDegreeChange: DragInputCallbackType = ({ scene, }) => { const elementsMap = scene.getNonDeletedElementsMap(); - const elements = scene.getNonDeletedElements(); const origElement = originalElements[0]; if (origElement && !isElbowArrow(origElement)) { const latestElement = elementsMap.get(origElement.id); @@ -45,14 +43,14 @@ const handleDegreeChange: DragInputCallbackType = ({ if (nextValue !== undefined) { const nextAngle = degreesToRadians(nextValue as Degrees); - mutateElement(latestElement, { + scene.mutateElement(latestElement, { angle: nextAngle, }); - updateBindings(latestElement, elementsMap, elements, scene); + updateBindings(latestElement, scene); const boundTextElement = getBoundTextElement(latestElement, elementsMap); if (boundTextElement && !isArrowElement(latestElement)) { - mutateElement(boundTextElement, { angle: nextAngle }); + scene.mutateElement(boundTextElement, { angle: nextAngle }); } return; @@ -71,14 +69,14 @@ const handleDegreeChange: DragInputCallbackType = ({ const nextAngle = degreesToRadians(nextAngleInDegrees as Degrees); - mutateElement(latestElement, { + scene.mutateElement(latestElement, { angle: nextAngle, }); - updateBindings(latestElement, elementsMap, elements, scene); + updateBindings(latestElement, scene); const boundTextElement = getBoundTextElement(latestElement, elementsMap); if (boundTextElement && !isArrowElement(latestElement)) { - mutateElement(boundTextElement, { angle: nextAngle }); + scene.mutateElement(boundTextElement, { angle: nextAngle }); } } }; diff --git a/packages/excalidraw/components/Stats/CanvasGrid.tsx b/packages/excalidraw/components/Stats/CanvasGrid.tsx index 4611365f43..4766f82041 100644 --- a/packages/excalidraw/components/Stats/CanvasGrid.tsx +++ b/packages/excalidraw/components/Stats/CanvasGrid.tsx @@ -1,9 +1,10 @@ +import type Scene from "@excalidraw/element/Scene"; + import { getNormalizedGridStep } from "../../scene"; import StatsDragInput from "./DragInput"; import { getStepSizedValue } from "./utils"; -import type Scene from "../../scene/Scene"; import type { AppState } from "../../types"; interface PositionProps { diff --git a/packages/excalidraw/components/Stats/Dimension.tsx b/packages/excalidraw/components/Stats/Dimension.tsx index 142abc4074..c838b581f7 100644 --- a/packages/excalidraw/components/Stats/Dimension.tsx +++ b/packages/excalidraw/components/Stats/Dimension.tsx @@ -5,17 +5,17 @@ import { MINIMAL_CROP_SIZE, getUncroppedWidthAndHeight, } from "@excalidraw/element/cropElement"; -import { mutateElement } from "@excalidraw/element/mutateElement"; import { resizeSingleElement } from "@excalidraw/element/resizeElements"; import { isImageElement } from "@excalidraw/element/typeChecks"; import type { ExcalidrawElement } from "@excalidraw/element/types"; +import type Scene from "@excalidraw/element/Scene"; + import DragInput from "./DragInput"; import { getStepSizedValue, isPropertyEditable } from "./utils"; import type { DragInputCallbackType } from "./DragInput"; -import type Scene from "../../scene/Scene"; import type { AppState } from "../../types"; interface DimensionDragInputProps { @@ -113,7 +113,7 @@ const handleDimensionChange: DragInputCallbackType< }; } - mutateElement(element, { + scene.mutateElement(element, { crop: nextCrop, width: nextCrop.width / (crop.naturalWidth / uncroppedWidth), height: nextCrop.height / (crop.naturalHeight / uncroppedHeight), @@ -144,7 +144,7 @@ const handleDimensionChange: DragInputCallbackType< height: nextCropHeight, }; - mutateElement(element, { + scene.mutateElement(element, { crop: nextCrop, width: nextCrop.width / (crop.naturalWidth / uncroppedWidth), height: nextCrop.height / (crop.naturalHeight / uncroppedHeight), @@ -176,8 +176,8 @@ const handleDimensionChange: DragInputCallbackType< nextHeight, latestElement, origElement, - elementsMap, originalElementsMap, + scene, property === "width" ? "e" : "s", { shouldMaintainAspectRatio: keepAspectRatio, @@ -223,8 +223,8 @@ const handleDimensionChange: DragInputCallbackType< nextHeight, latestElement, origElement, - elementsMap, originalElementsMap, + scene, property === "width" ? "e" : "s", { shouldMaintainAspectRatio: keepAspectRatio, diff --git a/packages/excalidraw/components/Stats/DragInput.tsx b/packages/excalidraw/components/Stats/DragInput.tsx index b4795308d8..6fdf909b24 100644 --- a/packages/excalidraw/components/Stats/DragInput.tsx +++ b/packages/excalidraw/components/Stats/DragInput.tsx @@ -7,6 +7,8 @@ import { deepCopyElement } from "@excalidraw/element/duplicate"; import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types"; +import type Scene from "@excalidraw/element/Scene"; + import { CaptureUpdateAction } from "../../store"; import { useApp } from "../App"; import { InlineIcon } from "../InlineIcon"; @@ -16,7 +18,6 @@ import { SMALLEST_DELTA } from "./utils"; import "./DragInput.scss"; import type { StatsInputProperty } from "./utils"; -import type Scene from "../../scene/Scene"; import type { AppState } from "../../types"; export type DragInputCallbackType< @@ -216,13 +217,12 @@ const StatsDragInput = < y: number; } | null = null; - let originalElementsMap: Map | null = - app.scene - .getNonDeletedElements() - .reduce((acc: ElementsMap, element) => { - acc.set(element.id, deepCopyElement(element)); - return acc; - }, new Map()); + let originalElementsMap: ElementsMap | null = app.scene + .getNonDeletedElements() + .reduce((acc: ElementsMap, element) => { + acc.set(element.id, deepCopyElement(element)); + return acc; + }, new Map()); let originalElements: readonly E[] | null = elements.map( (element) => originalElementsMap!.get(element.id) as E, diff --git a/packages/excalidraw/components/Stats/FontSize.tsx b/packages/excalidraw/components/Stats/FontSize.tsx index 90bdee5648..635f2cd5a2 100644 --- a/packages/excalidraw/components/Stats/FontSize.tsx +++ b/packages/excalidraw/components/Stats/FontSize.tsx @@ -1,4 +1,3 @@ -import { mutateElement } from "@excalidraw/element/mutateElement"; import { getBoundTextElement, redrawTextBoundingBox, @@ -13,13 +12,14 @@ import type { ExcalidrawTextElement, } from "@excalidraw/element/types"; +import type Scene from "@excalidraw/element/Scene"; + import { fontSizeIcon } from "../icons"; import StatsDragInput from "./DragInput"; import { getStepSizedValue } from "./utils"; import type { DragInputCallbackType } from "./DragInput"; -import type Scene from "../../scene/Scene"; import type { AppState } from "../../types"; interface FontSizeProps { @@ -68,13 +68,13 @@ const handleFontSizeChange: DragInputCallbackType< } if (nextFontSize) { - mutateElement(latestElement, { + scene.mutateElement(latestElement, { fontSize: nextFontSize, }); redrawTextBoundingBox( latestElement, scene.getContainerElement(latestElement), - scene.getNonDeletedElementsMap(), + scene, ); } } diff --git a/packages/excalidraw/components/Stats/MultiAngle.tsx b/packages/excalidraw/components/Stats/MultiAngle.tsx index 3cabd19c03..a22a011477 100644 --- a/packages/excalidraw/components/Stats/MultiAngle.tsx +++ b/packages/excalidraw/components/Stats/MultiAngle.tsx @@ -1,7 +1,5 @@ import { degreesToRadians, radiansToDegrees } from "@excalidraw/math"; -import { mutateElement } from "@excalidraw/element/mutateElement"; - import { getBoundTextElement } from "@excalidraw/element/textElement"; import { isArrowElement } from "@excalidraw/element/typeChecks"; @@ -11,13 +9,14 @@ import type { Degrees } from "@excalidraw/math"; import type { ExcalidrawElement } from "@excalidraw/element/types"; +import type Scene from "@excalidraw/element/Scene"; + import { angleIcon } from "../icons"; import DragInput from "./DragInput"; import { getStepSizedValue, isPropertyEditable } from "./utils"; import type { DragInputCallbackType } from "./DragInput"; -import type Scene from "../../scene/Scene"; import type { AppState } from "../../types"; interface MultiAngleProps { @@ -54,17 +53,13 @@ const handleDegreeChange: DragInputCallbackType< if (!element) { continue; } - mutateElement( - element, - { - angle: nextAngle, - }, - false, - ); + scene.mutateElement(element, { + angle: nextAngle, + }); const boundTextElement = getBoundTextElement(element, elementsMap); if (boundTextElement && !isArrowElement(element)) { - mutateElement(boundTextElement, { angle: nextAngle }, false); + scene.mutateElement(boundTextElement, { angle: nextAngle }); } } @@ -92,17 +87,13 @@ const handleDegreeChange: DragInputCallbackType< const nextAngle = degreesToRadians(nextAngleInDegrees as Degrees); - mutateElement( - latestElement, - { - angle: nextAngle, - }, - false, - ); + scene.mutateElement(latestElement, { + angle: nextAngle, + }); const boundTextElement = getBoundTextElement(latestElement, elementsMap); if (boundTextElement && !isArrowElement(latestElement)) { - mutateElement(boundTextElement, { angle: nextAngle }, false); + scene.mutateElement(boundTextElement, { angle: nextAngle }); } } scene.triggerUpdate(); diff --git a/packages/excalidraw/components/Stats/MultiDimension.tsx b/packages/excalidraw/components/Stats/MultiDimension.tsx index b482611afa..ddac0ee3f2 100644 --- a/packages/excalidraw/components/Stats/MultiDimension.tsx +++ b/packages/excalidraw/components/Stats/MultiDimension.tsx @@ -3,7 +3,6 @@ import { useMemo } from "react"; import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common"; import { updateBoundElements } from "@excalidraw/element/binding"; -import { mutateElement } from "@excalidraw/element/mutateElement"; import { rescalePointsInElement, resizeSingleElement, @@ -23,13 +22,14 @@ import type { NonDeletedSceneElementsMap, } from "@excalidraw/element/types"; +import type Scene from "@excalidraw/element/Scene"; + import DragInput from "./DragInput"; import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils"; import { getElementsInAtomicUnit } from "./utils"; import type { DragInputCallbackType } from "./DragInput"; import type { AtomicUnit } from "./utils"; -import type Scene from "../../scene/Scene"; import type { AppState } from "../../types"; interface MultiDimensionProps { @@ -75,33 +75,31 @@ const resizeElementInGroup = ( scale: number, latestElement: ExcalidrawElement, origElement: ExcalidrawElement, - elementsMap: NonDeletedSceneElementsMap, originalElementsMap: ElementsMap, + scene: Scene, ) => { + const elementsMap = scene.getNonDeletedElementsMap(); const updates = getResizedUpdates(anchorX, anchorY, scale, origElement); - mutateElement(latestElement, updates, false); + scene.mutateElement(latestElement, updates); + const boundTextElement = getBoundTextElement( origElement, originalElementsMap, ); if (boundTextElement) { const newFontSize = boundTextElement.fontSize * scale; - updateBoundElements(latestElement, elementsMap, { + updateBoundElements(latestElement, scene, { newSize: { width: updates.width, height: updates.height }, }); const latestBoundTextElement = elementsMap.get(boundTextElement.id); if (latestBoundTextElement && isTextElement(latestBoundTextElement)) { - mutateElement( - latestBoundTextElement, - { - fontSize: newFontSize, - }, - false, - ); + scene.mutateElement(latestBoundTextElement, { + fontSize: newFontSize, + }); handleBindTextResize( latestElement, - elementsMap, + scene, property === "width" ? "e" : "s", true, ); @@ -118,8 +116,8 @@ const resizeGroup = ( property: MultiDimensionProps["property"], latestElements: ExcalidrawElement[], originalElements: ExcalidrawElement[], - elementsMap: NonDeletedSceneElementsMap, originalElementsMap: ElementsMap, + scene: Scene, ) => { // keep aspect ratio for groups if (property === "width") { @@ -141,8 +139,8 @@ const resizeGroup = ( scale, latestElement, origElement, - elementsMap, originalElementsMap, + scene, ); } }; @@ -194,8 +192,8 @@ const handleDimensionChange: DragInputCallbackType< property, latestElements, originalElements, - elementsMap, originalElementsMap, + scene, ); } else { const [el] = elementsInUnit; @@ -237,8 +235,8 @@ const handleDimensionChange: DragInputCallbackType< nextHeight, latestElement, origElement, - elementsMap, originalElementsMap, + scene, property === "width" ? "e" : "s", { shouldInformMutation: false, @@ -301,8 +299,8 @@ const handleDimensionChange: DragInputCallbackType< property, latestElements, originalElements, - elementsMap, originalElementsMap, + scene, ); } else { const [el] = elementsInUnit; @@ -340,8 +338,8 @@ const handleDimensionChange: DragInputCallbackType< nextHeight, latestElement, origElement, - elementsMap, originalElementsMap, + scene, property === "width" ? "e" : "s", { shouldInformMutation: false, diff --git a/packages/excalidraw/components/Stats/MultiFontSize.tsx b/packages/excalidraw/components/Stats/MultiFontSize.tsx index 6bac4bd3cd..075016ad19 100644 --- a/packages/excalidraw/components/Stats/MultiFontSize.tsx +++ b/packages/excalidraw/components/Stats/MultiFontSize.tsx @@ -1,4 +1,3 @@ -import { mutateElement } from "@excalidraw/element/mutateElement"; import { getBoundTextElement, redrawTextBoundingBox, @@ -16,13 +15,14 @@ import type { NonDeletedSceneElementsMap, } from "@excalidraw/element/types"; +import type Scene from "@excalidraw/element/Scene"; + import { fontSizeIcon } from "../icons"; import StatsDragInput from "./DragInput"; import { getStepSizedValue } from "./utils"; import type { DragInputCallbackType } from "./DragInput"; -import type Scene from "../../scene/Scene"; import type { AppState } from "../../types"; interface MultiFontSizeProps { @@ -84,19 +84,14 @@ const handleFontSizeChange: DragInputCallbackType< nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE); for (const textElement of latestTextElements) { - mutateElement( - textElement, - { - fontSize: nextFontSize, - }, - false, - ); + scene.mutateElement(textElement, { + fontSize: nextFontSize, + }); redrawTextBoundingBox( textElement, scene.getContainerElement(textElement), - elementsMap, - false, + scene, ); } @@ -117,19 +112,14 @@ const handleFontSizeChange: DragInputCallbackType< if (shouldChangeByStepSize) { nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE); } - mutateElement( - latestElement, - { - fontSize: nextFontSize, - }, - false, - ); + scene.mutateElement(latestElement, { + fontSize: nextFontSize, + }); redrawTextBoundingBox( latestElement, scene.getContainerElement(latestElement), - elementsMap, - false, + scene, ); } diff --git a/packages/excalidraw/components/Stats/MultiPosition.tsx b/packages/excalidraw/components/Stats/MultiPosition.tsx index 98058efecd..ae6b52296b 100644 --- a/packages/excalidraw/components/Stats/MultiPosition.tsx +++ b/packages/excalidraw/components/Stats/MultiPosition.tsx @@ -5,12 +5,9 @@ import { isTextElement } from "@excalidraw/element/typeChecks"; import { getCommonBounds } from "@excalidraw/element/bounds"; -import type { - ElementsMap, - ExcalidrawElement, - NonDeletedExcalidrawElement, - NonDeletedSceneElementsMap, -} from "@excalidraw/element/types"; +import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types"; + +import type Scene from "@excalidraw/element/Scene"; import StatsDragInput from "./DragInput"; import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils"; @@ -18,7 +15,6 @@ import { getElementsInAtomicUnit, moveElement } from "./utils"; import type { DragInputCallbackType } from "./DragInput"; import type { AtomicUnit } from "./utils"; -import type Scene from "../../scene/Scene"; import type { AppState } from "../../types"; interface MultiPositionProps { @@ -36,13 +32,11 @@ const moveElements = ( property: MultiPositionProps["property"], changeInTopX: number, changeInTopY: number, - elements: readonly ExcalidrawElement[], originalElements: readonly ExcalidrawElement[], - elementsMap: NonDeletedSceneElementsMap, originalElementsMap: ElementsMap, scene: Scene, ) => { - for (let i = 0; i < elements.length; i++) { + for (let i = 0; i < originalElements.length; i++) { const origElement = originalElements[i]; const [cx, cy] = [ @@ -65,8 +59,6 @@ const moveElements = ( newTopLeftX, newTopLeftY, origElement, - elementsMap, - elements, scene, originalElementsMap, false, @@ -78,11 +70,10 @@ const moveGroupTo = ( nextX: number, nextY: number, originalElements: ExcalidrawElement[], - elementsMap: NonDeletedSceneElementsMap, - elements: readonly NonDeletedExcalidrawElement[], originalElementsMap: ElementsMap, scene: Scene, ) => { + const elementsMap = scene.getNonDeletedElementsMap(); const [x1, y1, ,] = getCommonBounds(originalElements); const offsetX = nextX - x1; const offsetY = nextY - y1; @@ -112,8 +103,6 @@ const moveGroupTo = ( topLeftX + offsetX, topLeftY + offsetY, origElement, - elementsMap, - elements, scene, originalElementsMap, false, @@ -135,7 +124,6 @@ const handlePositionChange: DragInputCallbackType< originalAppState, }) => { const elementsMap = scene.getNonDeletedElementsMap(); - const elements = scene.getNonDeletedElements(); if (nextValue !== undefined) { for (const atomicUnit of getAtomicUnits( @@ -159,8 +147,6 @@ const handlePositionChange: DragInputCallbackType< newTopLeftX, newTopLeftY, elementsInUnit.map((el) => el.original), - elementsMap, - elements, originalElementsMap, scene, ); @@ -188,8 +174,6 @@ const handlePositionChange: DragInputCallbackType< newTopLeftX, newTopLeftY, origElement, - elementsMap, - elements, scene, originalElementsMap, false, @@ -214,8 +198,6 @@ const handlePositionChange: DragInputCallbackType< changeInTopX, changeInTopY, originalElements, - originalElements, - elementsMap, originalElementsMap, scene, ); diff --git a/packages/excalidraw/components/Stats/Position.tsx b/packages/excalidraw/components/Stats/Position.tsx index bf6dfd1613..5235385811 100644 --- a/packages/excalidraw/components/Stats/Position.tsx +++ b/packages/excalidraw/components/Stats/Position.tsx @@ -4,16 +4,16 @@ import { getFlipAdjustedCropPosition, getUncroppedWidthAndHeight, } from "@excalidraw/element/cropElement"; -import { mutateElement } from "@excalidraw/element/mutateElement"; import { isImageElement } from "@excalidraw/element/typeChecks"; import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types"; +import type Scene from "@excalidraw/element/Scene"; + import StatsDragInput from "./DragInput"; import { getStepSizedValue, moveElement } from "./utils"; import type { DragInputCallbackType } from "./DragInput"; -import type Scene from "../../scene/Scene"; import type { AppState } from "../../types"; interface PositionProps { @@ -38,7 +38,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({ originalAppState, }) => { const elementsMap = scene.getNonDeletedElementsMap(); - const elements = scene.getNonDeletedElements(); const origElement = originalElements[0]; const [cx, cy] = [ origElement.x + origElement.width / 2, @@ -101,7 +100,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({ }; } - mutateElement(element, { + scene.mutateElement(element, { crop: nextCrop, }); @@ -119,7 +118,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({ y: clamp(crop.y + changeInY, 0, crop.naturalHeight - crop.height), }; - mutateElement(element, { + scene.mutateElement(element, { crop: nextCrop, }); @@ -133,8 +132,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({ newTopLeftX, newTopLeftY, origElement, - elementsMap, - elements, scene, originalElementsMap, ); @@ -166,8 +163,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({ newTopLeftX, newTopLeftY, origElement, - elementsMap, - elements, scene, originalElementsMap, ); diff --git a/packages/excalidraw/components/Stats/stats.test.tsx b/packages/excalidraw/components/Stats/stats.test.tsx index fc94da0564..cfb2b4ee41 100644 --- a/packages/excalidraw/components/Stats/stats.test.tsx +++ b/packages/excalidraw/components/Stats/stats.test.tsx @@ -17,7 +17,7 @@ import type { ExcalidrawTextElement, } from "@excalidraw/element/types"; -import { Excalidraw, getCommonBounds, mutateElement } from "../.."; +import { Excalidraw, getCommonBounds } from "../.."; import { actionGroup } from "../../actions"; import { t } from "../../i18n"; import * as StaticScene from "../../renderer/staticScene"; @@ -478,7 +478,7 @@ describe("stats for a non-generic element", () => { containerId: container.id, fontSize: 20, }); - mutateElement(container, { + h.app.scene.mutateElement(container, { boundElements: [{ type: "text", id: text.id }], }); API.setElements([container, text]); diff --git a/packages/excalidraw/components/Stats/utils.ts b/packages/excalidraw/components/Stats/utils.ts index dbb47a2346..79e7ed18b2 100644 --- a/packages/excalidraw/components/Stats/utils.ts +++ b/packages/excalidraw/components/Stats/utils.ts @@ -4,7 +4,6 @@ import { bindOrUnbindLinearElements, updateBoundElements, } from "@excalidraw/element/binding"; -import { mutateElement } from "@excalidraw/element/mutateElement"; import { getBoundTextElement } from "@excalidraw/element/textElement"; import { isFrameLikeElement, @@ -24,10 +23,10 @@ import type { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, - NonDeletedSceneElementsMap, } from "@excalidraw/element/types"; -import type Scene from "../../scene/Scene"; +import type Scene from "@excalidraw/element/Scene"; + import type { AppState } from "../../types"; export type StatsInputProperty = @@ -119,12 +118,11 @@ export const moveElement = ( newTopLeftX: number, newTopLeftY: number, originalElement: ExcalidrawElement, - elementsMap: NonDeletedSceneElementsMap, - elements: readonly NonDeletedExcalidrawElement[], scene: Scene, originalElementsMap: ElementsMap, shouldInformMutation = true, ) => { + const elementsMap = scene.getNonDeletedElementsMap(); const latestElement = elementsMap.get(originalElement.id); if (!latestElement) { return; @@ -148,15 +146,15 @@ export const moveElement = ( -originalElement.angle as Radians, ); - mutateElement( + scene.mutateElement( latestElement, { x, y, }, - shouldInformMutation, + { informMutation: shouldInformMutation, isDragging: false }, ); - updateBindings(latestElement, elementsMap, elements, scene); + updateBindings(latestElement, scene); const boundTextElement = getBoundTextElement( originalElement, @@ -165,13 +163,13 @@ export const moveElement = ( if (boundTextElement) { const latestBoundTextElement = elementsMap.get(boundTextElement.id); latestBoundTextElement && - mutateElement( + scene.mutateElement( latestBoundTextElement, { x: boundTextElement.x + changeInX, y: boundTextElement.y + changeInY, }, - shouldInformMutation, + { informMutation: shouldInformMutation, isDragging: false }, ); } }; @@ -199,8 +197,6 @@ export const getAtomicUnits = ( export const updateBindings = ( latestElement: ExcalidrawElement, - elementsMap: NonDeletedSceneElementsMap, - elements: readonly NonDeletedExcalidrawElement[], scene: Scene, options?: { simultaneouslyUpdated?: readonly ExcalidrawElement[]; @@ -209,16 +205,8 @@ export const updateBindings = ( }, ) => { if (isLinearElement(latestElement)) { - bindOrUnbindLinearElements( - [latestElement], - elementsMap, - elements, - scene, - true, - [], - options?.zoom, - ); + bindOrUnbindLinearElements([latestElement], true, [], scene, options?.zoom); } else { - updateBoundElements(latestElement, elementsMap, options); + updateBoundElements(latestElement, scene, options); } }; diff --git a/packages/excalidraw/components/hyperlink/Hyperlink.tsx b/packages/excalidraw/components/hyperlink/Hyperlink.tsx index 9a386a1635..65883017ea 100644 --- a/packages/excalidraw/components/hyperlink/Hyperlink.tsx +++ b/packages/excalidraw/components/hyperlink/Hyperlink.tsx @@ -21,8 +21,6 @@ import { embeddableURLValidator, } from "@excalidraw/element/embeddable"; -import { mutateElement } from "@excalidraw/element/mutateElement"; - import { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, @@ -33,6 +31,8 @@ import { import { isEmbeddableElement } from "@excalidraw/element/typeChecks"; +import type Scene from "@excalidraw/element/Scene"; + import type { ElementsMap, ExcalidrawEmbeddableElement, @@ -70,14 +70,14 @@ const embeddableLinkCache = new Map< export const Hyperlink = ({ element, - elementsMap, + scene, setAppState, onLinkOpen, setToast, updateEmbedValidationStatus, }: { element: NonDeletedExcalidrawElement; - elementsMap: ElementsMap; + scene: Scene; setAppState: React.Component["setState"]; onLinkOpen: ExcalidrawProps["onLinkOpen"]; setToast: ( @@ -88,6 +88,7 @@ export const Hyperlink = ({ status: boolean, ) => void; }) => { + const elementsMap = scene.getNonDeletedElementsMap(); const appState = useExcalidrawAppState(); const appProps = useAppProps(); const device = useDevice(); @@ -114,7 +115,7 @@ export const Hyperlink = ({ setAppState({ activeEmbeddable: null }); } if (!link) { - mutateElement(element, { + scene.mutateElement(element, { link: null, }); updateEmbedValidationStatus(element, false); @@ -126,7 +127,7 @@ export const Hyperlink = ({ setToast({ message: t("toast.unableToEmbed"), closable: true }); } element.link && embeddableLinkCache.set(element.id, element.link); - mutateElement(element, { + scene.mutateElement(element, { link, }); updateEmbedValidationStatus(element, false); @@ -144,7 +145,7 @@ export const Hyperlink = ({ : 1; const hasLinkChanged = embeddableLinkCache.get(element.id) !== element.link; - mutateElement(element, { + scene.mutateElement(element, { ...(hasLinkChanged ? { width: @@ -169,10 +170,11 @@ export const Hyperlink = ({ } } } else { - mutateElement(element, { link }); + scene.mutateElement(element, { link }); } }, [ element, + scene, setToast, appProps.validateEmbeddable, appState.activeEmbeddable, @@ -229,9 +231,9 @@ export const Hyperlink = ({ const handleRemove = useCallback(() => { trackEvent("hyperlink", "delete"); - mutateElement(element, { link: null }); + scene.mutateElement(element, { link: null }); setAppState({ showHyperlinkPopup: false }); - }, [setAppState, element]); + }, [setAppState, element, scene]); const onEdit = () => { trackEvent("hyperlink", "edit", "popup-ui"); diff --git a/packages/excalidraw/data/transform.ts b/packages/excalidraw/data/transform.ts index 15ad1ffde9..787f2489df 100644 --- a/packages/excalidraw/data/transform.ts +++ b/packages/excalidraw/data/transform.ts @@ -38,10 +38,13 @@ import { redrawTextBoundingBox } from "@excalidraw/element/textElement"; import { LinearElementEditor } from "@excalidraw/element/linearElementEditor"; +import { getCommonBounds } from "@excalidraw/element/bounds"; + +import Scene from "@excalidraw/element/Scene"; + import type { ElementConstructorOpts } from "@excalidraw/element/newElement"; import type { - ElementsMap, ExcalidrawArrowElement, ExcalidrawBindableElement, ExcalidrawElement, @@ -63,8 +66,6 @@ import type { import type { MarkOptional } from "@excalidraw/common/utility-types"; -import { getCommonBounds } from ".."; - export type ValidLinearElement = { type: "arrow" | "line"; x: number; @@ -221,7 +222,7 @@ const DEFAULT_DIMENSION = 100; const bindTextToContainer = ( container: ExcalidrawElement, textProps: { text: string } & MarkOptional, - elementsMap: ElementsMap, + scene: Scene, ) => { const textElement: ExcalidrawTextElement = newTextElement({ x: 0, @@ -240,7 +241,8 @@ const bindTextToContainer = ( }), }); - redrawTextBoundingBox(textElement, container, elementsMap); + redrawTextBoundingBox(textElement, container, scene); + return [container, textElement] as const; }; @@ -249,7 +251,7 @@ const bindLinearElementToElement = ( start: ValidLinearElement["start"], end: ValidLinearElement["end"], elementStore: ElementStore, - elementsMap: NonDeletedSceneElementsMap, + scene: Scene, ): { linearElement: ExcalidrawLinearElement; startBoundElement?: ExcalidrawElement; @@ -335,7 +337,7 @@ const bindLinearElementToElement = ( linearElement, startBoundElement as ExcalidrawBindableElement, "start", - elementsMap, + scene, ); } } @@ -410,7 +412,7 @@ const bindLinearElementToElement = ( linearElement, endBoundElement as ExcalidrawBindableElement, "end", - elementsMap, + scene, ); } } @@ -651,6 +653,9 @@ export const convertToExcalidrawElements = ( } const elementsMap = elementStore.getElementsMap(); + // we don't have a real scene, so we just use a temp scene to query and mutate elements + const scene = new Scene(elementsMap); + // Add labels and arrow bindings for (const [id, element] of elementsWithIds) { const excalidrawElement = elementStore.getElement(id)!; @@ -664,7 +669,7 @@ export const convertToExcalidrawElements = ( let [container, text] = bindTextToContainer( excalidrawElement, element?.label, - elementsMap, + scene, ); elementStore.add(container); elementStore.add(text); @@ -692,7 +697,7 @@ export const convertToExcalidrawElements = ( originalStart, originalEnd, elementStore, - elementsMap, + scene, ); container = linearElement; elementStore.add(linearElement); @@ -717,7 +722,7 @@ export const convertToExcalidrawElements = ( start, end, elementStore, - elementsMap, + scene, ); elementStore.add(linearElement); diff --git a/packages/excalidraw/fonts/Fonts.ts b/packages/excalidraw/fonts/Fonts.ts index 79b5ea1af7..a9419892b3 100644 --- a/packages/excalidraw/fonts/Fonts.ts +++ b/packages/excalidraw/fonts/Fonts.ts @@ -28,6 +28,8 @@ import type { import type { ValueOf } from "@excalidraw/common/utility-types"; +import type Scene from "@excalidraw/element/Scene"; + import { CascadiaFontFaces } from "./Cascadia"; import { ComicShannsFontFaces } from "./ComicShanns"; import { EmojiFontFaces } from "./Emoji"; @@ -40,8 +42,6 @@ import { NunitoFontFaces } from "./Nunito"; import { VirgilFontFaces } from "./Virgil"; import { XiaolaiFontFaces } from "./Xiaolai"; -import type Scene from "../scene/Scene"; - export class Fonts { // it's ok to track fonts across multiple instances only once, so let's use // a static member to reduce memory footprint diff --git a/packages/excalidraw/lasso/index.ts b/packages/excalidraw/lasso/index.ts index d59b2d7439..f7e791665e 100644 --- a/packages/excalidraw/lasso/index.ts +++ b/packages/excalidraw/lasso/index.ts @@ -149,6 +149,7 @@ export class LassoTrail extends AnimatedTrail { this.app.scene.getNonDeletedElement( selectedIds[0], ) as NonDeleted, + this.app.scene.getNonDeletedElementsMap(), ) : null, }; diff --git a/packages/excalidraw/scene/Renderer.ts b/packages/excalidraw/scene/Renderer.ts index e22c997edf..47d859cbf9 100644 --- a/packages/excalidraw/scene/Renderer.ts +++ b/packages/excalidraw/scene/Renderer.ts @@ -9,10 +9,11 @@ import type { NonDeletedExcalidrawElement, } from "@excalidraw/element/types"; +import type Scene from "@excalidraw/element/Scene"; + import { renderInteractiveSceneThrottled } from "../renderer/interactiveScene"; import { renderStaticSceneThrottled } from "../renderer/staticScene"; -import type Scene from "./Scene"; import type { RenderableElementsMap } from "./types"; import type { AppState } from "../types"; diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap index 7b249da278..44dba2e346 100644 --- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap @@ -7490,7 +7490,7 @@ History { exports[`history > multiplayer undo/redo > should iterate through the history when selected or editing linear element was remotely deleted > [end of test] number of elements 1`] = `1`; -exports[`history > multiplayer undo/redo > should iterate through the history when selected or editing linear element was remotely deleted > [end of test] number of renders 1`] = `10`; +exports[`history > multiplayer undo/redo > should iterate through the history when selected or editing linear element was remotely deleted > [end of test] number of renders 1`] = `9`; exports[`history > multiplayer undo/redo > should iterate through the history when when element change relates to remotely deleted element > [end of test] appState 1`] = ` { @@ -10561,7 +10561,7 @@ History { exports[`history > multiplayer undo/redo > should override remotely added points on undo, but restore them on redo > [end of test] number of elements 1`] = `1`; -exports[`history > multiplayer undo/redo > should override remotely added points on undo, but restore them on redo > [end of test] number of renders 1`] = `15`; +exports[`history > multiplayer undo/redo > should override remotely added points on undo, but restore them on redo > [end of test] number of renders 1`] = `14`; exports[`history > multiplayer undo/redo > should redistribute deltas when element gets removed locally but is restored remotely > [end of test] appState 1`] = ` { @@ -20188,4 +20188,4 @@ History { exports[`history > singleplayer undo/redo > should support linear element creation and points manipulation through the editor > [end of test] number of elements 1`] = `1`; -exports[`history > singleplayer undo/redo > should support linear element creation and points manipulation through the editor > [end of test] number of renders 1`] = `21`; +exports[`history > singleplayer undo/redo > should support linear element creation and points manipulation through the editor > [end of test] number of renders 1`] = `20`; diff --git a/packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap index 1b312a5512..3a0f3a58ad 100644 --- a/packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap @@ -50,7 +50,7 @@ exports[`multi point mode in linear elements > arrow 3`] = ` "type": "arrow", "updated": 1, "version": 8, - "versionNonce": 1604849351, + "versionNonce": 400692809, "width": 70, "x": 30, "y": 30, @@ -106,7 +106,7 @@ exports[`multi point mode in linear elements > line 3`] = ` "type": "line", "updated": 1, "version": 8, - "versionNonce": 1604849351, + "versionNonce": 400692809, "width": 70, "x": 30, "y": 30, diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap index 68d4d5d799..e98815d86e 100644 --- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap @@ -6832,7 +6832,7 @@ History { exports[`regression tests > draw every type of shape > [end of test] number of elements 1`] = `0`; -exports[`regression tests > draw every type of shape > [end of test] number of renders 1`] = `33`; +exports[`regression tests > draw every type of shape > [end of test] number of renders 1`] = `31`; exports[`regression tests > given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up > [end of test] appState 1`] = ` { @@ -14550,7 +14550,7 @@ History { exports[`regression tests > undo/redo drawing an element > [end of test] number of elements 1`] = `0`; -exports[`regression tests > undo/redo drawing an element > [end of test] number of renders 1`] = `20`; +exports[`regression tests > undo/redo drawing an element > [end of test] number of renders 1`] = `19`; exports[`regression tests > updates fontSize & fontFamily appState > [end of test] appState 1`] = ` { diff --git a/packages/excalidraw/tests/dragCreate.test.tsx b/packages/excalidraw/tests/dragCreate.test.tsx index c33da5e7ea..810efa973e 100644 --- a/packages/excalidraw/tests/dragCreate.test.tsx +++ b/packages/excalidraw/tests/dragCreate.test.tsx @@ -313,7 +313,7 @@ describe("Test dragCreate", () => { expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot( `6`, ); - expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`); + expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); @@ -342,7 +342,7 @@ describe("Test dragCreate", () => { expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot( `6`, ); - expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`); + expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); diff --git a/packages/excalidraw/tests/elementLocking.test.tsx b/packages/excalidraw/tests/elementLocking.test.tsx index 45e370ed8a..8c4f348748 100644 --- a/packages/excalidraw/tests/elementLocking.test.tsx +++ b/packages/excalidraw/tests/elementLocking.test.tsx @@ -1,7 +1,5 @@ import React from "react"; -import { mutateElement } from "@excalidraw/element/mutateElement"; - import { KEYS } from "@excalidraw/common"; import { actionSelectAll } from "../actions"; @@ -298,7 +296,7 @@ describe("element locking", () => { height: textSize, containerId: container.id, }); - mutateElement(container, { + h.app.scene.mutateElement(container, { boundElements: [{ id: text.id, type: "text" }], }); @@ -339,7 +337,7 @@ describe("element locking", () => { containerId: container.id, locked: true, }); - mutateElement(container, { + h.app.scene.mutateElement(container, { boundElements: [{ id: text.id, type: "text" }], }); API.setElements([container, text]); @@ -373,7 +371,7 @@ describe("element locking", () => { containerId: container.id, locked: true, }); - mutateElement(container, { + h.app.scene.mutateElement(container, { boundElements: [{ id: text.id, type: "text" }], }); API.setElements([container, text]); diff --git a/packages/excalidraw/tests/helpers/api.ts b/packages/excalidraw/tests/helpers/api.ts index 3a83f27635..5ac1bca8cf 100644 --- a/packages/excalidraw/tests/helpers/api.ts +++ b/packages/excalidraw/tests/helpers/api.ts @@ -6,7 +6,6 @@ import { pointFrom, type LocalPoint, type Radians } from "@excalidraw/math"; import { DEFAULT_VERTICAL_ALIGN, ROUNDNESS, assertNever } from "@excalidraw/common"; -import { mutateElement } from "@excalidraw/element/mutateElement"; import { newArrowElement, newElement, @@ -100,10 +99,10 @@ export class API { // eslint-disable-next-line prettier/prettier static updateElement = ( - ...args: Parameters> + ...args: Parameters> ) => { act(() => { - mutateElement(...args); + h.app.scene.mutateElement(...args); }); }; @@ -419,12 +418,11 @@ export class API { }); - mutateElement( + h.app.scene.mutateElement( rectangle, { boundElements: [{ type: "text", id: text.id }], }, - false, ); return [rectangle, text]; @@ -453,12 +451,11 @@ export class API { : opts?.label?.frameId ?? null, }); - mutateElement( + h.app.scene.mutateElement( arrow, { boundElements: [{ type: "text", id: text.id }], }, - false, ); return [arrow, text]; diff --git a/packages/excalidraw/tests/helpers/ui.ts b/packages/excalidraw/tests/helpers/ui.ts index 38070d38bc..d60d488f1f 100644 --- a/packages/excalidraw/tests/helpers/ui.ts +++ b/packages/excalidraw/tests/helpers/ui.ts @@ -5,7 +5,6 @@ import { getElementPointsCoords, } from "@excalidraw/element/bounds"; import { cropElement } from "@excalidraw/element/cropElement"; -import { mutateElement } from "@excalidraw/element/mutateElement"; import { getTransformHandles, getTransformHandlesFromCoords, @@ -526,7 +525,7 @@ export class UI { if (angle !== 0) { act(() => { - mutateElement(origElement, { angle }); + h.app.scene.mutateElement(origElement, { angle }); }); } diff --git a/packages/excalidraw/tests/linearElementEditor.test.tsx b/packages/excalidraw/tests/linearElementEditor.test.tsx index 8619985846..2e32e88218 100644 --- a/packages/excalidraw/tests/linearElementEditor.test.tsx +++ b/packages/excalidraw/tests/linearElementEditor.test.tsx @@ -30,7 +30,7 @@ import type { FontString, } from "@excalidraw/element/types"; -import { Excalidraw, mutateElement } from "../index"; +import { Excalidraw } from "../index"; import * as InteractiveCanvas from "../renderer/interactiveScene"; import * as StaticScene from "../renderer/staticScene"; import { API } from "../tests/helpers/api"; @@ -118,7 +118,7 @@ describe("Test Linear Elements", () => { ], roundness, }); - mutateElement(line, { points: line.points }); + h.app.scene.mutateElement(line, { points: line.points }); API.setElements([line]); mouse.clickAt(p1[0], p1[1]); return line; @@ -177,7 +177,7 @@ describe("Test Linear Elements", () => { pointFrom(0.5, 0), pointFrom(100, 100), ]); - new LinearElementEditor(element); + new LinearElementEditor(element, arrayToMap(h.elements)); expect(element.points).toEqual([ pointFrom(0, 0), pointFrom(99.5, 100), @@ -1271,7 +1271,7 @@ describe("Test Linear Elements", () => { expect(rect.y).toBe(0); expect(handleBindTextResizeSpy).toHaveBeenCalledWith( h.elements[0], - arrayToMap(h.elements), + h.app.scene, "nw", false, ); @@ -1384,7 +1384,7 @@ describe("Test Linear Elements", () => { const [origStartX, origStartY] = [line.x, line.y]; act(() => { - LinearElementEditor.movePoints(line, [ + LinearElementEditor.movePoints(line, h.app.scene, [ { index: 0, point: pointFrom(line.points[0][0] + 10, line.points[0][1] + 10), diff --git a/packages/excalidraw/tests/move.test.tsx b/packages/excalidraw/tests/move.test.tsx index 77fc7e57db..71a489561f 100644 --- a/packages/excalidraw/tests/move.test.tsx +++ b/packages/excalidraw/tests/move.test.tsx @@ -13,8 +13,6 @@ import type { ExcalidrawRectangleElement, } from "@excalidraw/element/types"; -import type Scene from "@excalidraw/excalidraw/scene/Scene"; - import { Excalidraw } from "../index"; import * as InteractiveCanvas from "../renderer/interactiveScene"; import * as StaticScene from "../renderer/staticScene"; @@ -85,15 +83,13 @@ describe("move element", () => { const rectA = UI.createElement("rectangle", { size: 100 }); const rectB = UI.createElement("rectangle", { x: 200, y: 0, size: 300 }); const arrow = UI.createElement("arrow", { x: 110, y: 50, size: 80 }); - const elementsMap = h.app.scene.getNonDeletedElementsMap(); act(() => { // bind line to two rectangles bindOrUnbindLinearElement( arrow.get() as NonDeleted, rectA.get() as ExcalidrawRectangleElement, rectB.get() as ExcalidrawRectangleElement, - elementsMap, - {} as Scene, + h.app.scene, ); }); @@ -170,8 +166,6 @@ describe("duplicate element on move when ALT is clicked", () => { fireEvent.pointerMove(canvas, { clientX: 10, clientY: 60 }); fireEvent.pointerUp(canvas); - // TODO: This used to be 4, but binding made it go up to 5. Do we need - // that additional render? expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`4`); expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`3`); expect(h.state.selectionElement).toBeNull(); diff --git a/packages/excalidraw/tests/multiPointCreate.test.tsx b/packages/excalidraw/tests/multiPointCreate.test.tsx index cde3c7f983..926c8d47f3 100644 --- a/packages/excalidraw/tests/multiPointCreate.test.tsx +++ b/packages/excalidraw/tests/multiPointCreate.test.tsx @@ -119,7 +119,7 @@ describe("multi point mode in linear elements", () => { }); expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`7`); - expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`); + expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`); expect(h.elements.length).toEqual(1); const element = h.elements[0] as ExcalidrawLinearElement; @@ -162,7 +162,7 @@ describe("multi point mode in linear elements", () => { key: KEYS.ENTER, }); expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`7`); - expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`); + expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`); expect(h.elements.length).toEqual(1); const element = h.elements[0] as ExcalidrawLinearElement; diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index cba9fbea7c..ebc31029c6 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -784,6 +784,7 @@ export type UnsubscribeCallback = () => void; export interface ExcalidrawImperativeAPI { updateScene: InstanceType["updateScene"]; + mutateElement: InstanceType["mutateElement"]; updateLibrary: InstanceType["updateLibrary"]; resetScene: InstanceType["resetScene"]; getSceneElementsIncludingDeleted: InstanceType< diff --git a/packages/excalidraw/wysiwyg/textWysiwyg.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.tsx index b1610125f3..a7ddf659ee 100644 --- a/packages/excalidraw/wysiwyg/textWysiwyg.tsx +++ b/packages/excalidraw/wysiwyg/textWysiwyg.tsx @@ -15,7 +15,7 @@ import { } from "@excalidraw/element/containerCache"; import { LinearElementEditor } from "@excalidraw/element/linearElementEditor"; -import { bumpVersion, mutateElement } from "@excalidraw/element/mutateElement"; +import { bumpVersion } from "@excalidraw/element/mutateElement"; import { getBoundTextElementId, getContainerElement, @@ -45,7 +45,6 @@ import type { import { actionSaveToActiveFile } from "../actions"; -import Scene from "../scene/Scene"; import { parseClipboard } from "../clipboard"; import { actionDecreaseFontSize, @@ -130,8 +129,7 @@ export const textWysiwyg = ({ const updateWysiwygStyle = () => { const appState = app.state; - const updatedTextElement = - Scene.getScene(element)?.getElement(id); + const updatedTextElement = app.scene.getElement(id); if (!updatedTextElement) { return; @@ -201,7 +199,7 @@ export const textWysiwyg = ({ container.type, ); - mutateElement(container, { height: targetContainerHeight }); + app.scene.mutateElement(container, { height: targetContainerHeight }); return; } else if ( // autoshrink container height until original container height @@ -214,7 +212,7 @@ export const textWysiwyg = ({ height, container.type, ); - mutateElement(container, { height: targetContainerHeight }); + app.scene.mutateElement(container, { height: targetContainerHeight }); } else { const { y } = computeBoundTextPosition( container, @@ -287,7 +285,7 @@ export const textWysiwyg = ({ editable.style.fontFamily = getFontFamilyString(updatedTextElement); } - mutateElement(updatedTextElement, { x: coordX, y: coordY }); + app.scene.mutateElement(updatedTextElement, { x: coordX, y: coordY }); } }; @@ -544,7 +542,7 @@ export const textWysiwyg = ({ // it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the // wysiwyg on update cleanup(); - const updateElement = Scene.getScene(element)?.getElement( + const updateElement = app.scene.getElement( element.id, ) as ExcalidrawTextElement; if (!updateElement) { @@ -559,7 +557,7 @@ export const textWysiwyg = ({ if (editable.value.trim()) { const boundTextElementId = getBoundTextElementId(container); if (!boundTextElementId || boundTextElementId !== element.id) { - mutateElement(container, { + app.scene.mutateElement(container, { boundElements: (container.boundElements || []).concat({ type: "text", id: element.id, @@ -570,7 +568,7 @@ export const textWysiwyg = ({ bumpVersion(container); } } else { - mutateElement(container, { + app.scene.mutateElement(container, { boundElements: container.boundElements?.filter( (ele) => !isTextElement( @@ -579,11 +577,8 @@ export const textWysiwyg = ({ ), }); } - redrawTextBoundingBox( - updateElement, - container, - app.scene.getNonDeletedElementsMap(), - ); + + redrawTextBoundingBox(updateElement, container, app.scene); } onSubmit({