From b77675f74d6c0cbbaf743b2f5cd0c8eacb4dcb4e Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 21 Aug 2024 23:05:34 +1000 Subject: [PATCH] feat(ui): move all caching out of redux While we lose the benefit of the caches persisting across reloads, this is a much simpler way to handle things. If we need a persistent cache, we can explore it in the future. --- invokeai/frontend/web/package.json | 1 + invokeai/frontend/web/pnpm-lock.yaml | 8 ++ .../ControlLayersSettingsPopover.tsx | 31 ++--- .../controlLayers/konva/CanvasFilter.ts | 2 +- .../controlLayers/konva/CanvasLayerAdapter.ts | 34 ++++- .../controlLayers/konva/CanvasManager.ts | 131 ++++++++++++++---- .../controlLayers/konva/CanvasMaskAdapter.ts | 23 ++- .../konva/CanvasObjectRenderer.ts | 30 ++-- .../controlLayers/konva/CanvasStateApi.ts | 8 -- .../controlLayers/konva/CanvasTransformer.ts | 15 +- .../src/features/controlLayers/konva/util.ts | 3 - .../controlLayers/store/canvasV2Slice.ts | 81 +---------- .../store/controlLayersReducers.ts | 4 - .../store/inpaintMaskReducers.ts | 5 - .../store/rasterLayersReducers.ts | 18 --- .../controlLayers/store/regionsReducers.ts | 1 - .../src/features/controlLayers/store/types.ts | 11 +- .../graph/generation/addControlAdapters.ts | 2 +- .../nodes/util/graph/generation/addRegions.ts | 2 +- 19 files changed, 204 insertions(+), 206 deletions(-) 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 = () => { -