Add highlight to chaning frame dimensions

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,
+      });
     }
   }
 };

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<typeof useApp>;
+  setAppState: ReturnType<typeof useExcalidrawSetAppState>;
 }) => void;
 
 interface StatsDragInputProps<
@@ -73,6 +75,7 @@ const StatsDragInput = <
   sensitivity = 1,
 }: StatsDragInputProps<T, E>) => {
   const app = useApp();
+  const setAppState = useExcalidrawSetAppState();
   const inputRef = useRef<HTMLInputElement>(null);
   const labelRef = useRef<HTMLDivElement>(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) {