Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add highlight to chaning frame dimensions

Browse Source
This commit is contained in:
Mark Tolmacs 2025-05-24 12:29:42 +02:00
parent a9f58b11b5
commit a1af6748a4
No known key found for this signature in database
2 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/excalidraw/components/Stats/Dimension.tsx
View File

@ -46,6 +46,8 @@ const handleDimensionChange: DragInputCallbackType<
originalAppState, originalAppState,
instantChange, instantChange,
scene, scene,
app,
setAppState,
}) => { }) => {
const elementsMap = scene.getNonDeletedElementsMap(); const elementsMap = scene.getNonDeletedElementsMap();
const origElement = originalElements[0]; const origElement = originalElements[0];
@ -200,10 +202,15 @@ const handleDimensionChange: DragInputCallbackType<
scene.getElementsIncludingDeleted(), scene.getElementsIncludingDeleted(),
nextElementsInFrame, nextElementsInFrame,
latestElement, latestElement,
{ state: originalAppState } as any, app,
); );
scene.replaceAllElements(updatedElements); scene.replaceAllElements(updatedElements);
setAppState({
...app.state,
elementsToHighlight: nextElementsInFrame,
});
} }
return; return;
@ -266,10 +273,15 @@ const handleDimensionChange: DragInputCallbackType<
scene.getElementsIncludingDeleted(), scene.getElementsIncludingDeleted(),
nextElementsInFrame, nextElementsInFrame,
latestElement, latestElement,
{ state: originalAppState } as any, app,
); );
scene.replaceAllElements(updatedElements); scene.replaceAllElements(updatedElements);
setAppState({
...app.state,
elementsToHighlight: nextElementsInFrame,
});
} }
} }
}; };

19
packages/excalidraw/components/Stats/DragInput.tsx
View File

@ -11,7 +11,7 @@ import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
import type { Scene } from "@excalidraw/element"; import type { Scene } from "@excalidraw/element";
import { useApp } from "../App"; import { useApp, useExcalidrawSetAppState } from "../App";
import { InlineIcon } from "../InlineIcon"; import { InlineIcon } from "../InlineIcon";
import { SMALLEST_DELTA } from "./utils"; import { SMALLEST_DELTA } from "./utils";
@ -36,6 +36,8 @@ export type DragInputCallbackType<
property: P; property: P;
originalAppState: AppState; originalAppState: AppState;
setInputValue: (value: number) => void; setInputValue: (value: number) => void;
app: ReturnType<typeof useApp>;
setAppState: ReturnType<typeof useExcalidrawSetAppState>;
}) => void; }) => void;
interface StatsDragInputProps< interface StatsDragInputProps<
@ -73,6 +75,7 @@ const StatsDragInput = <
sensitivity = 1, sensitivity = 1,
}: StatsDragInputProps<T, E>) => { }: StatsDragInputProps<T, E>) => {
const app = useApp(); const app = useApp();
const setAppState = useExcalidrawSetAppState();
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const labelRef = useRef<HTMLDivElement>(null); const labelRef = useRef<HTMLDivElement>(null);
@ -137,6 +140,8 @@ const StatsDragInput = <
property, property,
originalAppState: appState, originalAppState: appState,
setInputValue: (value) => setInputValue(String(value)), setInputValue: (value) => setInputValue(String(value)),
app,
setAppState,
}); });
app.syncActionResult({ app.syncActionResult({
captureUpdate: CaptureUpdateAction.IMMEDIATELY, captureUpdate: CaptureUpdateAction.IMMEDIATELY,
@ -263,6 +268,8 @@ const StatsDragInput = <
scene, scene,
originalAppState, originalAppState,
setInputValue: (value) => setInputValue(String(value)), setInputValue: (value) => setInputValue(String(value)),
app,
setAppState,
}); });
stepChange = 0; stepChange = 0;
@ -287,6 +294,11 @@ const StatsDragInput = <
captureUpdate: CaptureUpdateAction.IMMEDIATELY, captureUpdate: CaptureUpdateAction.IMMEDIATELY,
}); });
// Clear frame highlighting
setAppState({
elementsToHighlight: null,
});
lastPointer = null; lastPointer = null;
accumulatedChange = 0; accumulatedChange = 0;
stepChange = 0; stepChange = 0;
@ -341,6 +353,11 @@ const StatsDragInput = <
stateRef.current.originalAppState = cloneJSON(appState); stateRef.current.originalAppState = cloneJSON(appState);
}} }}
onBlur={(event) => { onBlur={(event) => {
// Clear frame highlighting when input loses focus
setAppState({
elementsToHighlight: null,
});
if (!inputValue) { if (!inputValue) {
setInputValue(value.toString()); setInputValue(value.toString());
} else if (editable) { } else if (editable) {