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