Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): use logger for stage renderer

Browse Source
This commit is contained in:
psychedelicious 2024-04-18 16:36:12 +10:00 committed by Kent Keirsey
parent b9e6b7ba48
commit 85f4a066fb
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
invokeai/frontend/web/src/app/logging/logger.ts
View File

@ -27,7 +27,8 @@ export type LoggerNamespace =
| 'socketio' | 'socketio'
| 'session' | 'session'
| 'queue' | 'queue'
| 'dnd'; | 'dnd'
| 'regionalPrompts';
export const logger = (namespace: LoggerNamespace) => $logger.get().child({ namespace }); export const logger = (namespace: LoggerNamespace) => $logger.get().child({ namespace });

17
invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx
View File

@ -1,5 +1,6 @@
import { Box } from '@invoke-ai/ui-library'; import { Box } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { logger } from 'app/logging/logger';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useMouseEvents } from 'features/regionalPrompts/hooks/mouseEventHooks'; import { useMouseEvents } from 'features/regionalPrompts/hooks/mouseEventHooks';
@ -15,8 +16,8 @@ import type { IRect } from 'konva/lib/types';
import { atom } from 'nanostores'; import { atom } from 'nanostores';
import { useCallback, useLayoutEffect } from 'react'; import { useCallback, useLayoutEffect } from 'react';
const log = logger('regionalPrompts');
const $stage = atom<Konva.Stage | null>(null); const $stage = atom<Konva.Stage | null>(null);
const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => { const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
return regionalPrompts.layers.find((l) => l.id === regionalPrompts.selectedLayer)?.color; return regionalPrompts.layers.find((l) => l.id === regionalPrompts.selectedLayer)?.color;
}); });
@ -46,7 +47,7 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
); );
useLayoutEffect(() => { useLayoutEffect(() => {
console.log('Initializing stage'); log.trace('Initializing stage');
if (!container) { if (!container) {
return; return;
} }
@ -56,13 +57,13 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
}) })
); );
return () => { return () => {
console.log('Cleaning up stage'); log.trace('Cleaning up stage');
$stage.get()?.destroy(); $stage.get()?.destroy();
}; };
}, [container]); }, [container]);
useLayoutEffect(() => { useLayoutEffect(() => {
console.log('Adding stage listeners'); log.trace('Adding stage listeners');
if (!stage) { if (!stage) {
return; return;
} }
@ -73,7 +74,7 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
stage.on('mouseleave', onMouseLeave); stage.on('mouseleave', onMouseLeave);
return () => { return () => {
console.log('Cleaning up stage listeners'); log.trace('Cleaning up stage listeners');
stage.off('mousedown', onMouseDown); stage.off('mousedown', onMouseDown);
stage.off('mouseup', onMouseUp); stage.off('mouseup', onMouseUp);
stage.off('mousemove', onMouseMove); stage.off('mousemove', onMouseMove);
@ -83,7 +84,7 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
}, [stage, onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave]); }, [stage, onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave]);
useLayoutEffect(() => { useLayoutEffect(() => {
console.log('Updating stage dimensions'); log.trace('Updating stage dimensions');
if (!stage || !wrapper) { if (!stage || !wrapper) {
return; return;
} }
@ -115,7 +116,7 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
}, [stage, state.tool, cursorPosition, state.brushSize, selectedLayerColor]); }, [stage, state.tool, cursorPosition, state.brushSize, selectedLayerColor]);
useLayoutEffect(() => { useLayoutEffect(() => {
console.log('Rendering layers'); log.trace('Rendering layers');
if (!stage) { if (!stage) {
return; return;
} }
@ -123,7 +124,7 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
}, [onLayerPosChanged, stage, state.layers, state.promptLayerOpacity, state.tool, state.selectedLayer]); }, [onLayerPosChanged, stage, state.layers, state.promptLayerOpacity, state.tool, state.selectedLayer]);
useLayoutEffect(() => { useLayoutEffect(() => {
console.log('Rendering bbox'); log.trace('Rendering bbox');
if (!stage) { if (!stage) {
return; return;
} }