diff --git a/packages/excalidraw/components/Stats/Dimension.tsx b/packages/excalidraw/components/Stats/Dimension.tsx index 69b67c61a..e0dc3f790 100644 --- a/packages/excalidraw/components/Stats/Dimension.tsx +++ b/packages/excalidraw/components/Stats/Dimension.tsx @@ -46,6 +46,8 @@ const handleDimensionChange: DragInputCallbackType< originalAppState, instantChange, scene, + app, + setAppState, }) => { const elementsMap = scene.getNonDeletedElementsMap(); const origElement = originalElements[0]; @@ -200,10 +202,15 @@ const handleDimensionChange: DragInputCallbackType< scene.getElementsIncludingDeleted(), nextElementsInFrame, latestElement, - { state: originalAppState } as any, + app, ); scene.replaceAllElements(updatedElements); + + setAppState({ + ...app.state, + elementsToHighlight: nextElementsInFrame, + }); } return; @@ -266,10 +273,15 @@ const handleDimensionChange: DragInputCallbackType< scene.getElementsIncludingDeleted(), nextElementsInFrame, latestElement, - { state: originalAppState } as any, + app, ); scene.replaceAllElements(updatedElements); + + setAppState({ + ...app.state, + elementsToHighlight: nextElementsInFrame, + }); } } }; diff --git a/packages/excalidraw/components/Stats/DragInput.tsx b/packages/excalidraw/components/Stats/DragInput.tsx index 56138d810..bed42019d 100644 --- a/packages/excalidraw/components/Stats/DragInput.tsx +++ b/packages/excalidraw/components/Stats/DragInput.tsx @@ -11,7 +11,7 @@ import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types"; import type { Scene } from "@excalidraw/element"; -import { useApp } from "../App"; +import { useApp, useExcalidrawSetAppState } from "../App"; import { InlineIcon } from "../InlineIcon"; import { SMALLEST_DELTA } from "./utils"; @@ -36,6 +36,8 @@ export type DragInputCallbackType< property: P; originalAppState: AppState; setInputValue: (value: number) => void; + app: ReturnType; + setAppState: ReturnType; }) => void; interface StatsDragInputProps< @@ -73,6 +75,7 @@ const StatsDragInput = < sensitivity = 1, }: StatsDragInputProps) => { const app = useApp(); + const setAppState = useExcalidrawSetAppState(); const inputRef = useRef(null); const labelRef = useRef(null); @@ -137,6 +140,8 @@ const StatsDragInput = < property, originalAppState: appState, setInputValue: (value) => setInputValue(String(value)), + app, + setAppState, }); app.syncActionResult({ captureUpdate: CaptureUpdateAction.IMMEDIATELY, @@ -263,6 +268,8 @@ const StatsDragInput = < scene, originalAppState, setInputValue: (value) => setInputValue(String(value)), + app, + setAppState, }); stepChange = 0; @@ -287,6 +294,11 @@ const StatsDragInput = < captureUpdate: CaptureUpdateAction.IMMEDIATELY, }); + // Clear frame highlighting + setAppState({ + elementsToHighlight: null, + }); + lastPointer = null; accumulatedChange = 0; stepChange = 0; @@ -341,6 +353,11 @@ const StatsDragInput = < stateRef.current.originalAppState = cloneJSON(appState); }} onBlur={(event) => { + // Clear frame highlighting when input loses focus + setAppState({ + elementsToHighlight: null, + }); + if (!inputValue) { setInputValue(value.toString()); } else if (editable) {