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 = ( const getRelevantAppStateProps = (
appState: AppState, appState: AppState,
): StaticCanvasAppState => ({ ):
zoom: appState.zoom, | StaticCanvasAppState
scrollX: appState.scrollX, | Omit<StaticCanvasAppState, "selectedElementIds" | "activeTool"> => {
scrollY: appState.scrollY, const relevantAppStateProps = {
width: appState.width, zoom: appState.zoom,
height: appState.height, scrollX: appState.scrollX,
viewModeEnabled: appState.viewModeEnabled, scrollY: appState.scrollY,
openDialog: appState.openDialog, width: appState.width,
hoveredElementIds: appState.hoveredElementIds, height: appState.height,
offsetLeft: appState.offsetLeft, viewModeEnabled: appState.viewModeEnabled,
offsetTop: appState.offsetTop, openDialog: appState.openDialog,
theme: appState.theme, hoveredElementIds: appState.hoveredElementIds,
pendingImageElementId: appState.pendingImageElementId, offsetLeft: appState.offsetLeft,
shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom, offsetTop: appState.offsetTop,
viewBackgroundColor: appState.viewBackgroundColor, theme: appState.theme,
exportScale: appState.exportScale, pendingImageElementId: appState.pendingImageElementId,
selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged, shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
gridSize: appState.gridSize, viewBackgroundColor: appState.viewBackgroundColor,
gridStep: appState.gridStep, exportScale: appState.exportScale,
frameRendering: appState.frameRendering, selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
selectedElementIds: appState.selectedElementIds, gridSize: appState.gridSize,
frameToHighlight: appState.frameToHighlight, gridStep: appState.gridStep,
editingGroupId: appState.editingGroupId, frameRendering: appState.frameRendering,
currentHoveredFontFamily: appState.currentHoveredFontFamily, selectedElementIds: appState.selectedElementIds,
croppingElementId: appState.croppingElementId, 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 = ( const areEqual = (
prevProps: StaticCanvasProps, prevProps: StaticCanvasProps,

View file

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