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

feat(ui): move nanostores fallback atoms to util

Browse Source
This commit is contained in:
psychedelicious
2024-09-14 10:16:09 +10:00
parent 51df5aa94d
commit 0e5077a96b
6 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/app/store/nanostores/util.ts Normal file
View File

@@ -0,0 +1,13 @@
import type { ReadableAtom } from 'nanostores';
import { atom } from 'nanostores';
/**
* A fallback non-writable atom that always returns `false`, used when a nanostores atom is only conditionally available
* in a hook or component.
*/
export const $false: ReadableAtom<boolean> = atom(false);
/**
* A fallback non-writable atom that always returns `true`, used when a nanostores atom is only conditionally available
* in a hook or component.
*/
export const $true: ReadableAtom<boolean> = atom(true);

13
invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
View File

@@ -1,6 +1,7 @@
import { useStore } from '@nanostores/react';
import { $isConnected } from 'app/hooks/useSocketIO';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { $true } from 'app/store/nanostores/util';
import { useAppSelector } from 'app/store/storeHooks';
import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
@@ -18,8 +19,6 @@ import { selectSystemSlice } from 'features/system/store/systemSlice';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import i18n from 'i18next';
import { forEach, upperFirst } from 'lodash-es';
import type { ReadableAtom } from 'nanostores';
import { atom } from 'nanostores';
import { useMemo } from 'react';
import { getConnectedEdges } from 'reactflow';
@@ -263,16 +262,14 @@ const createSelector = (
}
);
const $fallbackTrue: ReadableAtom<true> = atom(true);
export const useIsReadyToEnqueue = () => {
const templates = useStore($templates);
const isConnected = useStore($isConnected);
const canvasManager = useCanvasManagerSafe();
const canvasIsFiltering = useStore(canvasManager?.stateApi.$isFiltering ?? $fallbackTrue);
const canvasIsTransforming = useStore(canvasManager?.stateApi.$isTransforming ?? $fallbackTrue);
const canvasIsRasterizing = useStore(canvasManager?.stateApi.$isRasterizing ?? $fallbackTrue);
const canvasIsCompositing = useStore(canvasManager?.compositor.$isBusy ?? $fallbackTrue);
const canvasIsFiltering = useStore(canvasManager?.stateApi.$isFiltering ?? $true);
const canvasIsTransforming = useStore(canvasManager?.stateApi.$isTransforming ?? $true);
const canvasIsRasterizing = useStore(canvasManager?.stateApi.$isRasterizing ?? $true);
const canvasIsCompositing = useStore(canvasManager?.compositor.$isBusy ?? $true);
const selector = useMemo(
() =>
createSelector(

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

@@ -153,6 +153,6 @@ export const useEntityAdapter = (
| CanvasEntityAdapterInpaintMask
| CanvasEntityAdapterRegionalGuidance => {
const adapter = useEntityAdapterSafe(entityIdentifier);
assert(adapter, 'useEntityAdapter must be used within a CanvasRasterLayerAdapterGate');
assert(adapter, 'useEntityAdapter must be used within a EntityAdapterContext');
return adapter;
};

7
invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasResetLayerHotkey.ts
View File

@@ -1,5 +1,6 @@
import { useStore } from '@nanostores/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { $false } from 'app/store/nanostores/util';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
import { useEntityAdapterSafe } from 'features/controlLayers/contexts/EntityAdapterContext';
@@ -7,8 +8,6 @@ import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
import { entityReset } from 'features/controlLayers/store/canvasSlice';
import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
import { isMaskEntityIdentifier } from 'features/controlLayers/store/types';
import type { ReadableAtom } from 'nanostores';
import { atom } from 'nanostores';
import { useCallback, useMemo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
@@ -17,15 +16,13 @@ const selectSelectedEntityIdentifier = createMemoizedSelector(
(canvasState) => canvasState.selectedEntityIdentifier
);
const $fallbackFalse: ReadableAtom<boolean> = atom(false);
export function useCanvasResetLayerHotkey() {
useAssertSingleton(useCanvasResetLayerHotkey.name);
const dispatch = useAppDispatch();
const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
const isBusy = useCanvasIsBusy();
const adapter = useEntityAdapterSafe(selectedEntityIdentifier);
const isInteractable = useStore(adapter?.$isInteractable ?? $fallbackFalse);
const isInteractable = useStore(adapter?.$isInteractable ?? $false);
const resetSelectedLayer = useCallback(() => {
if (selectedEntityIdentifier === null) {

9
invokeai/frontend/web/src/features/controlLayers/hooks/useEntityFilter.ts
View File

@@ -1,21 +1,18 @@
import { useStore } from '@nanostores/react';
import { $false } from 'app/store/nanostores/util';
import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { useEntityAdapterSafe } from 'features/controlLayers/contexts/EntityAdapterContext';
import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import { isFilterableEntityIdentifier } from 'features/controlLayers/store/types';
import type { ReadableAtom } from 'nanostores';
import { atom } from 'nanostores';
import { useCallback, useMemo } from 'react';
const $fallbackFalse: ReadableAtom<boolean> = atom(false);
export const useEntityFilter = (entityIdentifier: CanvasEntityIdentifier | null) => {
const canvasManager = useCanvasManager();
const adapter = useEntityAdapterSafe(entityIdentifier);
const isBusy = useCanvasIsBusy();
const isInteractable = useStore(adapter?.$isInteractable ?? $fallbackFalse);
const isEmpty = useStore(adapter?.$isEmpty ?? $fallbackFalse);
const isInteractable = useStore(adapter?.$isInteractable ?? $false);
const isEmpty = useStore(adapter?.$isEmpty ?? $false);
const isDisabled = useMemo(() => {
if (!entityIdentifier) {

9
invokeai/frontend/web/src/features/controlLayers/hooks/useEntityTransform.ts
View File

@@ -1,21 +1,18 @@
import { useStore } from '@nanostores/react';
import { $false } from 'app/store/nanostores/util';
import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { useEntityAdapterSafe } from 'features/controlLayers/contexts/EntityAdapterContext';
import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import { isTransformableEntityIdentifier } from 'features/controlLayers/store/types';
import type { ReadableAtom } from 'nanostores';
import { atom } from 'nanostores';
import { useCallback, useMemo } from 'react';
const $fallbackFalse: ReadableAtom<boolean> = atom(false);
export const useEntityTransform = (entityIdentifier: CanvasEntityIdentifier | null) => {
const canvasManager = useCanvasManager();
const adapter = useEntityAdapterSafe(entityIdentifier);
const isBusy = useCanvasIsBusy();
const isInteractable = useStore(adapter?.$isInteractable ?? $fallbackFalse);
const isEmpty = useStore(adapter?.$isEmpty ?? $fallbackFalse);
const isInteractable = useStore(adapter?.$isInteractable ?? $false);
const isEmpty = useStore(adapter?.$isEmpty ?? $false);
const isDisabled = useMemo(() => {
if (!entityIdentifier) {