diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx index 721ddf9d8e..83f589a392 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx @@ -1,5 +1,6 @@ import { Flex } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; +import { createSelector } from '@reduxjs/toolkit'; import { logger } from 'app/logging/logger'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; @@ -33,6 +34,11 @@ const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSli return layer?.previewColor ?? null; }); +const selectSelectedLayerType = createSelector(selectRegionalPromptsSlice, (regionalPrompts) => { + const selectedLayer = regionalPrompts.present.layers.find((l) => l.id === regionalPrompts.present.selectedLayerId); + return selectedLayer?.type ?? null; +}); + const useStageRenderer = ( stage: Konva.Stage, container: HTMLDivElement | null, @@ -47,6 +53,7 @@ const useStageRenderer = ( const lastMouseDownPos = useStore($lastMouseDownPos); const isMouseOver = useStore($isMouseOver); const selectedLayerIdColor = useAppSelector(selectSelectedLayerColor); + const selectedLayerType = useAppSelector(selectSelectedLayerType); const layerIds = useMemo(() => state.layers.map((l) => l.id), [state.layers]); const renderers = useMemo(() => (asPreview ? debouncedRenderers : normalRenderers), [asPreview]); const dpr = useDevicePixelRatio({ round: false }); @@ -135,6 +142,7 @@ const useStageRenderer = ( stage, tool, selectedLayerIdColor, + selectedLayerType, state.globalMaskLayerOpacity, cursorPosition, lastMouseDownPos, @@ -146,6 +154,7 @@ const useStageRenderer = ( stage, tool, selectedLayerIdColor, + selectedLayerType, state.globalMaskLayerOpacity, cursorPosition, lastMouseDownPos, diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/ToolChooser.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/ToolChooser.tsx index 80ed271289..a3b556a7e5 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/ToolChooser.tsx +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/ToolChooser.tsx @@ -1,16 +1,27 @@ import { ButtonGroup, IconButton } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; +import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { $tool, selectedLayerDeleted, selectedLayerReset } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { + $tool, + selectedLayerDeleted, + selectedLayerReset, + selectRegionalPromptsSlice, +} from 'features/regionalPrompts/store/regionalPromptsSlice'; import { useCallback } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { PiArrowsOutCardinalBold, PiEraserBold, PiPaintBrushBold, PiRectangleBold } from 'react-icons/pi'; +const selectIsDisabled = createSelector(selectRegionalPromptsSlice, (regionalPrompts) => { + const selectedLayer = regionalPrompts.present.layers.find((l) => l.id === regionalPrompts.present.selectedLayerId); + return selectedLayer?.type !== 'masked_guidance_layer'; +}); + export const ToolChooser: React.FC = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const isDisabled = useAppSelector((s) => s.regionalPrompts.present.layers.length === 0); + const isDisabled = useAppSelector(selectIsDisabled); const tool = useStore($tool); const setToolToBrush = useCallback(() => { diff --git a/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts b/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts index 944d996bff..2e437728b5 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts +++ b/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts @@ -133,6 +133,7 @@ const renderToolPreview = ( stage: Konva.Stage, tool: Tool, color: RgbColor | null, + selectedLayerType: Layer['type'] | null, globalMaskLayerOpacity: number, cursorPos: Vector2d | null, lastMouseDownPos: Vector2d | null, @@ -144,6 +145,9 @@ const renderToolPreview = ( if (layerCount === 0) { // We have no layers, so we should not render any tool stage.container().style.cursor = 'default'; + } else if (selectedLayerType !== 'masked_guidance_layer') { + // Non-mask-guidance layers don't have tools + stage.container().style.cursor = 'not-allowed'; } else if (tool === 'move') { // Move tool gets a pointer stage.container().style.cursor = 'default';