diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index a75a9bebcc..e7c7d919a9 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -75,6 +75,7 @@ "jsondiffpatch": "^0.6.0", "konva": "^9.3.14", "lodash-es": "^4.17.21", + "lru-cache": "^11.0.0", "nanoid": "^5.0.7", "nanostores": "^0.11.2", "new-github-issue-url": "^1.0.0", diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml index 532db45136..f99a163823 100644 --- a/invokeai/frontend/web/pnpm-lock.yaml +++ b/invokeai/frontend/web/pnpm-lock.yaml @@ -74,6 +74,9 @@ dependencies: lodash-es: specifier: ^4.17.21 version: 4.17.21 + lru-cache: + specifier: ^11.0.0 + version: 11.0.0 nanoid: specifier: ^5.0.7 version: 5.0.7 @@ -8704,6 +8707,11 @@ packages: engines: {node: 14 || >=16.14} dev: true + /lru-cache@11.0.0: + resolution: {integrity: sha512-Qv32eSV1RSCfhY3fpPE2GNZ8jgM9X7rdAfemLWqTUxwiyIC4jJ6Sy0fZ8H+oLWevO6i4/bizg7c8d8i6bxrzbA==} + engines: {node: 20 || >=22} + dev: false + /lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} dependencies: diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx index 4bc1d3409d..2d678b701a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx @@ -14,11 +14,7 @@ import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { CanvasSettingsBackgroundStyle } from 'features/controlLayers/components/CanvasSettingsBackgroundStyle'; import { $canvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { - clipToBboxChanged, - invertScrollChanged, - rasterizationCachesInvalidated, -} from 'features/controlLayers/store/canvasV2Slice'; +import { clipToBboxChanged, invertScrollChanged } from 'features/controlLayers/store/canvasV2Slice'; import type { ChangeEvent } from 'react'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -38,23 +34,22 @@ const ControlLayersSettingsPopover = () => { (e: ChangeEvent) => dispatch(clipToBboxChanged(e.target.checked)), [dispatch] ); - const invalidateRasterizationCaches = useCallback(() => { - dispatch(rasterizationCachesInvalidated()); - }, [dispatch]); + const clearCaches = useCallback(() => { + canvasManager?.clearCaches(); + }, [canvasManager]); const calculateBboxes = useCallback(() => { if (!canvasManager) { return; } - for (const adapter of canvasManager.rasterLayerAdapters.values()) { + const adapters = [ + ...canvasManager.rasterLayerAdapters.values(), + ...canvasManager.controlLayerAdapters.values(), + ...canvasManager.regionalGuidanceAdapters.values(), + ...canvasManager.inpaintMaskAdapters.values(), + ]; + for (const adapter of adapters) { adapter.transformer.requestRectCalculation(); } - for (const adapter of canvasManager.controlLayerAdapters.values()) { - adapter.transformer.requestRectCalculation(); - } - for (const adapter of canvasManager.regionalGuidanceAdapters.values()) { - adapter.transformer.requestRectCalculation(); - } - canvasManager.inpaintMaskAdapters.transformer.requestRectCalculation(); }, [canvasManager]); return ( @@ -73,8 +68,8 @@ const ControlLayersSettingsPopover = () => { -