github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): lint (circular dependency)

Browse Source 
Had to shuffle around the canvas right panel tabs state.
This commit is contained in:
psychedelicious
2024-09-18 16:49:40 +10:00
committed by Kent Keirsey
parent 95675c0545
commit fdcd26fa12
11 changed files with 45 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
View File

@@ -4,7 +4,7 @@ import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'
import type { SerializableObject } from 'common/types'; import type { SerializableObject } from 'common/types';
import type { Result } from 'common/util/result'; import type { Result } from 'common/util/result';
import { withResult, withResultAsync } from 'common/util/result'; import { withResult, withResultAsync } from 'common/util/result';
import { $canvasManager } from 'features/controlLayers/store/canvasSlice'; import { $canvasManager } from 'features/controlLayers/store/ephemeral';
import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig'; import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
import { buildFLUXGraph } from 'features/nodes/util/graph/generation/buildFLUXGraph'; import { buildFLUXGraph } from 'features/nodes/util/graph/generation/buildFLUXGraph';
import { buildSD1Graph } from 'features/nodes/util/graph/generation/buildSD1Graph'; import { buildSD1Graph } from 'features/nodes/util/graph/generation/buildSD1Graph';

10
invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx
View File

@@ -12,9 +12,9 @@ import {
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useBoolean } from 'common/hooks/useBoolean'; import { useBoolean } from 'common/hooks/useBoolean';
import { import {
setRightPanelTabToGallery, selectCanvasRightPanelGalleryTab,
setRightPanelTabToLayers, selectCanvasRightPanelLayersTab,
} from 'features/controlLayers/components/CanvasRightPanel'; } from 'features/controlLayers/store/ephemeral';
import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer'; import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
import { useCurrentDestination } from 'features/queue/hooks/useCurrentDestination'; import { useCurrentDestination } from 'features/queue/hooks/useCurrentDestination';
import { selectShowSendingToAlerts, showSendingToAlertsChanged } from 'features/system/store/systemSlice'; import { selectShowSendingToAlerts, showSendingToAlertsChanged } from 'features/system/store/systemSlice';
@@ -29,7 +29,7 @@ const ActivateImageViewerButton = (props: PropsWithChildren) => {
const imageViewer = useImageViewer(); const imageViewer = useImageViewer();
const onClick = useCallback(() => { const onClick = useCallback(() => {
imageViewer.open(); imageViewer.open();
setRightPanelTabToGallery(); selectCanvasRightPanelGalleryTab();
}, [imageViewer]); }, [imageViewer]);
return ( return (
<Button onClick={onClick} size="sm" variant="link" color="base.50"> <Button onClick={onClick} size="sm" variant="link" color="base.50">
@@ -69,7 +69,7 @@ const ActivateCanvasButton = (props: PropsWithChildren) => {
const imageViewer = useImageViewer(); const imageViewer = useImageViewer();
const onClick = useCallback(() => { const onClick = useCallback(() => {
dispatch(setActiveTab('canvas')); dispatch(setActiveTab('canvas'));
setRightPanelTabToLayers(); selectCanvasRightPanelLayersTab();
imageViewer.close(); imageViewer.close();
}, [dispatch, imageViewer]); }, [dispatch, imageViewer]);
return ( return (

23
invokeai/frontend/web/src/features/controlLayers/components/CanvasRightPanel.tsx
View File

@@ -4,35 +4,34 @@ import { useStore } from '@nanostores/react';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useScopeOnFocus } from 'common/hooks/interactionScopes'; import { useScopeOnFocus } from 'common/hooks/interactionScopes';
import { CanvasLayersPanelContent } from 'features/controlLayers/components/CanvasLayersPanelContent'; import { CanvasLayersPanelContent } from 'features/controlLayers/components/CanvasLayersPanelContent';
import {
$canvasRightPanelTabIndex,
selectCanvasRightPanelGalleryTab,
selectCanvasRightPanelLayersTab,
} from 'features/controlLayers/store/ephemeral';
import { selectEntityCountActive } from 'features/controlLayers/store/selectors'; import { selectEntityCountActive } from 'features/controlLayers/store/selectors';
import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent'; import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer'; import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
import { atom, computed } from 'nanostores';
import { memo, useCallback, useMemo, useRef } from 'react'; import { memo, useCallback, useMemo, useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const $tabIndex = atom(0);
export const $canvasRightPanelTab = computed($tabIndex, (index) => (index === 0 ? 'layers' : 'gallery'));
export const setRightPanelTabToLayers = () => $tabIndex.set(0);
export const setRightPanelTabToGallery = () => $tabIndex.set(1);
export const CanvasRightPanel = memo(() => { export const CanvasRightPanel = memo(() => {
const { t } = useTranslation(); const { t } = useTranslation();
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const tabIndex = useStore($tabIndex); const tabIndex = useStore($canvasRightPanelTabIndex);
useScopeOnFocus('gallery', ref); useScopeOnFocus('gallery', ref);
const imageViewer = useImageViewer(); const imageViewer = useImageViewer();
const onClickViewerToggleButton = useCallback(() => { const onClickViewerToggleButton = useCallback(() => {
if ($tabIndex.get() !== 1) { if ($canvasRightPanelTabIndex.get() !== 1) {
$tabIndex.set(1); $canvasRightPanelTabIndex.set(1);
} }
imageViewer.toggle(); imageViewer.toggle();
}, [imageViewer]); }, [imageViewer]);
useHotkeys('z', imageViewer.toggle); useHotkeys('z', imageViewer.toggle);
return ( return (
<Tabs index={tabIndex} onChange={$tabIndex.set} w="full" h="full" display="flex" flexDir="column"> <Tabs index={tabIndex} onChange={$canvasRightPanelTabIndex.set} w="full" h="full" display="flex" flexDir="column">
<TabList alignItems="center"> <TabList alignItems="center">
<PanelTabs /> <PanelTabs />
<Spacer /> <Spacer />
@@ -63,7 +62,7 @@ const PanelTabs = memo(() => {
const onOnMouseOverLayersTab = useCallback(() => { const onOnMouseOverLayersTab = useCallback(() => {
tabTimeout.current = window.setTimeout(() => { tabTimeout.current = window.setTimeout(() => {
if (dndCtx.active) { if (dndCtx.active) {
setRightPanelTabToLayers(); selectCanvasRightPanelLayersTab();
} }
}, 300); }, 300);
}, [dndCtx.active]); }, [dndCtx.active]);
@@ -71,7 +70,7 @@ const PanelTabs = memo(() => {
const onOnMouseOverGalleryTab = useCallback(() => { const onOnMouseOverGalleryTab = useCallback(() => {
tabTimeout.current = window.setTimeout(() => { tabTimeout.current = window.setTimeout(() => {
if (dndCtx.active) { if (dndCtx.active) {
setRightPanelTabToGallery(); selectCanvasRightPanelGalleryTab();
} }
}, 300); }, 300);
}, [dndCtx.active]); }, [dndCtx.active]);

2
invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx
View File

@@ -1,7 +1,7 @@
import { $alt, IconButton } from '@invoke-ai/ui-library'; import { $alt, IconButton } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { INTERACTION_SCOPES } from 'common/hooks/interactionScopes'; import { INTERACTION_SCOPES } from 'common/hooks/interactionScopes';
import { $canvasManager } from 'features/controlLayers/store/canvasSlice'; import { $canvasManager } from 'features/controlLayers/store/ephemeral';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';

2
invokeai/frontend/web/src/features/controlLayers/contexts/CanvasManagerProviderGate.tsx
View File

@@ -1,6 +1,6 @@
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { $canvasManager } from 'features/controlLayers/store/canvasSlice'; import { $canvasManager } from 'features/controlLayers/store/ephemeral';
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
import { createContext, memo, useContext } from 'react'; import { createContext, memo, useContext } from 'react';
import { assert } from 'tsafe'; import { assert } from 'tsafe';

2
invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasDeleteLayerHotkey.ts
View File

@@ -1,9 +1,9 @@
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useAssertSingleton } from 'common/hooks/useAssertSingleton'; import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
import { $canvasRightPanelTab } from 'features/controlLayers/components/CanvasRightPanel';
import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
import { entityDeleted } from 'features/controlLayers/store/canvasSlice'; import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
import { $canvasRightPanelTab } from 'features/controlLayers/store/ephemeral';
import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors'; import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors'; import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { useCallback, useMemo } from 'react'; import { useCallback, useMemo } from 'react';

2
invokeai/frontend/web/src/features/controlLayers/hooks/useInvokeCanvas.ts
View File

@@ -3,7 +3,7 @@ import { logger } from 'app/logging/logger';
import { useAppStore } from 'app/store/nanostores/store'; import { useAppStore } from 'app/store/nanostores/store';
import { useAssertSingleton } from 'common/hooks/useAssertSingleton'; import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
import { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { $canvasManager } from 'features/controlLayers/store/canvasSlice'; import { $canvasManager } from 'features/controlLayers/store/ephemeral';
import Konva from 'konva'; import Konva from 'konva';
import { useLayoutEffect, useState } from 'react'; import { useLayoutEffect, useState } from 'react';
import { $socket } from 'services/events/stores'; import { $socket } from 'services/events/stores';

2
invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
View File

@@ -18,7 +18,7 @@ import { CanvasStagingAreaModule } from 'features/controlLayers/konva/CanvasStag
import { CanvasToolModule } from 'features/controlLayers/konva/CanvasTool/CanvasToolModule'; import { CanvasToolModule } from 'features/controlLayers/konva/CanvasTool/CanvasToolModule';
import { CanvasWorkerModule } from 'features/controlLayers/konva/CanvasWorkerModule.js'; import { CanvasWorkerModule } from 'features/controlLayers/konva/CanvasWorkerModule.js';
import { getPrefixedId } from 'features/controlLayers/konva/util'; import { getPrefixedId } from 'features/controlLayers/konva/util';
import { $canvasManager } from 'features/controlLayers/store/canvasSlice'; import { $canvasManager } from 'features/controlLayers/store/ephemeral';
import type { CanvasEntityIdentifier, CanvasEntityType } from 'features/controlLayers/store/types'; import type { CanvasEntityIdentifier, CanvasEntityType } from 'features/controlLayers/store/types';
import { import {
isControlLayerEntityIdentifier, isControlLayerEntityIdentifier,

7
invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts
View File

@@ -4,7 +4,6 @@ import type { PersistConfig } from 'app/store/store';
import { moveOneToEnd, moveOneToStart, moveToEnd, moveToStart } from 'common/util/arrayUtils'; import { moveOneToEnd, moveOneToStart, moveToEnd, moveToStart } from 'common/util/arrayUtils';
import { deepClone } from 'common/util/deepClone'; import { deepClone } from 'common/util/deepClone';
import { roundDownToMultiple, roundToMultiple } from 'common/util/roundDownToMultiple'; import { roundDownToMultiple, roundToMultiple } from 'common/util/roundDownToMultiple';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { getPrefixedId } from 'features/controlLayers/konva/util'; import { getPrefixedId } from 'features/controlLayers/konva/util';
import { canvasReset } from 'features/controlLayers/store/actions'; import { canvasReset } from 'features/controlLayers/store/actions';
import { modelChanged } from 'features/controlLayers/store/paramsSlice'; import { modelChanged } from 'features/controlLayers/store/paramsSlice';
@@ -28,7 +27,6 @@ import { ASPECT_RATIO_MAP } from 'features/parameters/components/Bbox/constants'
import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension'; import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';
import type { IRect } from 'konva/lib/types'; import type { IRect } from 'konva/lib/types';
import { merge, omit } from 'lodash-es'; import { merge, omit } from 'lodash-es';
import { atom } from 'nanostores';
import type { UndoableOptions } from 'redux-undo'; import type { UndoableOptions } from 'redux-undo';
import type { ControlNetModelConfig, ImageDTO, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types'; import type { ControlNetModelConfig, ImageDTO, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
import { assert } from 'tsafe'; import { assert } from 'tsafe';
@@ -1234,8 +1232,3 @@ function actionsThrottlingFilter(action: UnknownAction) {
}, THROTTLE_MS); }, THROTTLE_MS);
return true; return true;
} }
/**
* The global canvas manager instance.
*/
export const $canvasManager = atom<CanvasManager | null>(null);

22
invokeai/frontend/web/src/features/controlLayers/store/ephemeral.ts Normal file
View File

@@ -0,0 +1,22 @@
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { atom, computed } from 'nanostores';
// Ephemeral state for canvas - not persisted across sessions.
/**
* The global canvas manager instance.
*/
export const $canvasManager = atom<CanvasManager | null>(null);
/**
* The index of the active tab in the canvas right panel.
*/
export const $canvasRightPanelTabIndex = atom(0);
/**
* The name of the active tab in the canvas right panel.
*/
export const $canvasRightPanelTab = computed($canvasRightPanelTabIndex, (index) =>
index === 0 ? 'layers' : 'gallery'
);
export const selectCanvasRightPanelLayersTab = () => $canvasRightPanelTabIndex.set(0);
export const selectCanvasRightPanelGalleryTab = () => $canvasRightPanelTabIndex.set(1);

2
invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
View File

@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { $activeScopes } from 'common/hooks/interactionScopes'; import { $activeScopes } from 'common/hooks/interactionScopes';
import { useAssertSingleton } from 'common/hooks/useAssertSingleton'; import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
import { $canvasRightPanelTab } from 'features/controlLayers/components/CanvasRightPanel'; import { $canvasRightPanelTab } from 'features/controlLayers/store/ephemeral';
import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice'; import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation'; import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation';
import { useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination'; import { useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination';