diff --git a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts index d7cc127047..97b3190e3e 100644 --- a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts +++ b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts @@ -88,7 +88,10 @@ const selector = createMemoizedSelector( }); } } else { - if (dynamicPrompts.prompts.length === 0 && getShouldProcessPrompt(positivePrompt)) { + if ( + dynamicPrompts.prompts.length === 0 && + getShouldProcessPrompt(positivePrompt) + ) { reasons.push(i18n.t('parameters.invoke.noPrompts')); } diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx index d6fbdb0cf8..3719fa5cd7 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx @@ -18,12 +18,14 @@ import { } from 'features/canvas/store/canvasNanostore'; import { aspectRatioChanged, - CANVAS_GRID_SIZE_COARSE, - CANVAS_GRID_SIZE_FINE, setBoundingBoxCoordinates, setBoundingBoxDimensions, setShouldSnapToGrid, } from 'features/canvas/store/canvasSlice'; +import { + CANVAS_GRID_SIZE_COARSE, + CANVAS_GRID_SIZE_FINE, +} from 'features/canvas/store/constants'; import type Konva from 'konva'; import type { GroupConfig } from 'konva/lib/Group'; import type { KonvaEventObject } from 'konva/lib/Node'; @@ -161,7 +163,10 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { const y = Math.round(rect.y()); if (aspectRatio.isLocked) { - const newHeight = roundDownToMultipleMin(width / aspectRatio.value, gridSize); + const newHeight = roundDownToMultipleMin( + width / aspectRatio.value, + gridSize + ); dispatch( setBoundingBoxDimensions({ width: roundDownToMultipleMin(width, gridSize), diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts index b5ab8e7c46..f9b9b36b6b 100644 --- a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts +++ b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts @@ -30,15 +30,13 @@ import type { Dimensions, } from './canvasTypes'; import { isCanvasAnyLine, isCanvasMaskLine } from './canvasTypes'; +import { CANVAS_GRID_SIZE_FINE } from './constants'; /** * The maximum history length to keep in the past/future layer states. */ const MAX_HISTORY = 128; -export const CANVAS_GRID_SIZE_FINE = 8; -export const CANVAS_GRID_SIZE_COARSE = 64; - export const initialLayerState: CanvasLayerState = { objects: [], stagingArea: { diff --git a/invokeai/frontend/web/src/features/canvas/store/constants.ts b/invokeai/frontend/web/src/features/canvas/store/constants.ts new file mode 100644 index 0000000000..21806c7c8c --- /dev/null +++ b/invokeai/frontend/web/src/features/canvas/store/constants.ts @@ -0,0 +1,2 @@ +export const CANVAS_GRID_SIZE_COARSE = 64; +export const CANVAS_GRID_SIZE_FINE = 8; diff --git a/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts b/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts index e22373f841..c05fefc78d 100644 --- a/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts +++ b/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts @@ -1,6 +1,6 @@ import { roundToMultiple } from 'common/util/roundDownToMultiple'; -import { CANVAS_GRID_SIZE_FINE } from 'features/canvas/store/canvasSlice'; import type { Dimensions } from 'features/canvas/store/canvasTypes'; +import { CANVAS_GRID_SIZE_FINE } from 'features/canvas/store/constants'; const getScaledBoundingBoxDimensions = (dimensions: Dimensions) => { const { width, height } = dimensions; diff --git a/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts b/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts index 8e526a54e6..18141d29a8 100644 --- a/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts +++ b/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts @@ -1,7 +1,10 @@ import { roundToMultiple } from 'common/util/roundDownToMultiple'; import type { Dimensions } from 'features/canvas/store/canvasTypes'; -const roundDimensionsToMultiple = (dimensions: Dimensions, multiple: number): Dimensions => { +const roundDimensionsToMultiple = ( + dimensions: Dimensions, + multiple: number +): Dimensions => { return { width: roundToMultiple(dimensions.width, multiple), height: roundToMultiple(dimensions.height, multiple), diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx index 1f561ceaf3..c300490a44 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx @@ -4,7 +4,10 @@ import { useAppSelector } from 'app/store/storeHooks'; import { InvControl } from 'common/components/InvControl/InvControl'; import { InvSlider } from 'common/components/InvSlider/InvSlider'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; -import { CANVAS_GRID_SIZE_COARSE, CANVAS_GRID_SIZE_FINE } from 'features/canvas/store/canvasSlice'; +import { + CANVAS_GRID_SIZE_COARSE, + CANVAS_GRID_SIZE_FINE, +} from 'features/canvas/store/constants'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx index a101285aec..2f3253ad43 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx @@ -4,7 +4,10 @@ import { useAppSelector } from 'app/store/storeHooks'; import { InvControl } from 'common/components/InvControl/InvControl'; import { InvSlider } from 'common/components/InvSlider/InvSlider'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; -import { CANVAS_GRID_SIZE_COARSE, CANVAS_GRID_SIZE_FINE } from 'features/canvas/store/canvasSlice'; +import { + CANVAS_GRID_SIZE_COARSE, + CANVAS_GRID_SIZE_FINE, +} from 'features/canvas/store/constants'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.stories.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.stories.tsx deleted file mode 100644 index 0b6e6b0a59..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { Flex } from '@chakra-ui/layout'; -import type { Meta, StoryObj } from '@storybook/react'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; -import { useState } from 'react'; - -import { AspectRatioPreview } from './AspectRatioPreview'; - -const meta: Meta = { - title: 'Components/AspectRatioPreview', - tags: ['autodocs'], - component: AspectRatioPreview, -}; - -export default meta; -type Story = StoryObj; - -const MIN = 64; -const MAX = 1024; -const STEP = 64; -const FINE_STEP = 8; -const INITIAL = 512; -const MARKS = Array.from( - { length: Math.floor(MAX / STEP) }, - (_, i) => MIN + i * STEP -); - -const Component = () => { - const [width, setWidth] = useState(INITIAL); - const [height, setHeight] = useState(INITIAL); - return ( - - - - - - - - - - - - ); -}; - -export const AspectRatioWithSliderInvControls: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSizeCanvas.tsx b/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSizeCanvas.tsx index 811ccd464d..648a14d0f0 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSizeCanvas.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSizeCanvas.tsx @@ -14,9 +14,7 @@ export const ImageSizeCanvas = memo(() => { const { width, height } = useAppSelector( (state) => state.canvas.boundingBoxDimensions ); - const aspectRatioState = useAppSelector( - (state) => state.canvas.aspectRatio - ); + const aspectRatioState = useAppSelector((state) => state.canvas.aspectRatio); const onChangeWidth = useCallback( (width: number) => {