diff --git a/packages/excalidraw/components/canvases/StaticCanvas.tsx b/packages/excalidraw/components/canvases/StaticCanvas.tsx index b70c8ace6..e017c5b6e 100644 --- a/packages/excalidraw/components/canvases/StaticCanvas.tsx +++ b/packages/excalidraw/components/canvases/StaticCanvas.tsx @@ -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 => { + 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) + .activeTool; + delete (relevantAppStateProps as Partial) + .selectedElementIds; + } + + return relevantAppStateProps; +}; const areEqual = ( prevProps: StaticCanvasProps, diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index 717993b43..a66da3373 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -203,6 +203,8 @@ export type StaticCanvasAppState = Readonly< hoveredElementIds: AppState["hoveredElementIds"]; // Cropping croppingElementId: AppState["croppingElementId"]; + // For reducing unnecessary re-renders + activeTool: AppState["activeTool"]; } >;