do not re-render static when setting selected element ids in lasso

This commit is contained in:
Ryan Di 2025-04-03 16:54:08 +11:00
parent 1e1dab3bbc
commit 64aeb0fe56
2 changed files with 42 additions and 26 deletions

View file

@ -89,32 +89,46 @@ const StaticCanvas = (props: StaticCanvasProps) => {
const getRelevantAppStateProps = (
appState: AppState,
): StaticCanvasAppState => ({
zoom: appState.zoom,
scrollX: appState.scrollX,
scrollY: appState.scrollY,
width: appState.width,
height: appState.height,
viewModeEnabled: appState.viewModeEnabled,
openDialog: appState.openDialog,
hoveredElementIds: appState.hoveredElementIds,
offsetLeft: appState.offsetLeft,
offsetTop: appState.offsetTop,
theme: appState.theme,
pendingImageElementId: appState.pendingImageElementId,
shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
viewBackgroundColor: appState.viewBackgroundColor,
exportScale: appState.exportScale,
selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
gridSize: appState.gridSize,
gridStep: appState.gridStep,
frameRendering: appState.frameRendering,
selectedElementIds: appState.selectedElementIds,
frameToHighlight: appState.frameToHighlight,
editingGroupId: appState.editingGroupId,
currentHoveredFontFamily: appState.currentHoveredFontFamily,
croppingElementId: appState.croppingElementId,
});
):
| StaticCanvasAppState
| Omit<StaticCanvasAppState, "selectedElementIds" | "activeTool"> => {
const relevantAppStateProps = {
zoom: appState.zoom,
scrollX: appState.scrollX,
scrollY: appState.scrollY,
width: appState.width,
height: appState.height,
viewModeEnabled: appState.viewModeEnabled,
openDialog: appState.openDialog,
hoveredElementIds: appState.hoveredElementIds,
offsetLeft: appState.offsetLeft,
offsetTop: appState.offsetTop,
theme: appState.theme,
pendingImageElementId: appState.pendingImageElementId,
shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
viewBackgroundColor: appState.viewBackgroundColor,
exportScale: appState.exportScale,
selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
gridSize: appState.gridSize,
gridStep: appState.gridStep,
frameRendering: appState.frameRendering,
selectedElementIds: appState.selectedElementIds,
frameToHighlight: appState.frameToHighlight,
editingGroupId: appState.editingGroupId,
currentHoveredFontFamily: appState.currentHoveredFontFamily,
croppingElementId: appState.croppingElementId,
activeTool: appState.activeTool,
};
if (appState.activeTool.type === "lasso") {
delete (relevantAppStateProps as Partial<typeof relevantAppStateProps>)
.activeTool;
delete (relevantAppStateProps as Partial<typeof relevantAppStateProps>)
.selectedElementIds;
}
return relevantAppStateProps;
};
const areEqual = (
prevProps: StaticCanvasProps,

View file

@ -203,6 +203,8 @@ export type StaticCanvasAppState = Readonly<
hoveredElementIds: AppState["hoveredElementIds"];
// Cropping
croppingElementId: AppState["croppingElementId"];
// For reducing unnecessary re-renders
activeTool: AppState["activeTool"];
}
>;