chore(ui): lint

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'));
       }
 

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),

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: {

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;

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;

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),

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';

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';

invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.stories.tsx

@@ -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<typeof AspectRatioPreview> = {
-  title: 'Components/AspectRatioPreview',
-  tags: ['autodocs'],
-  component: AspectRatioPreview,
-};
-
-export default meta;
-type Story = StoryObj<typeof InvControl>;
-
-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 (
-    <Flex w="full" flexDir="column">
-      <InvControl label="Width">
-        <InvSlider
-          value={width}
-          min={MIN}
-          max={MAX}
-          step={STEP}
-          fineStep={FINE_STEP}
-          onChange={setWidth}
-          marks={MARKS}
-        />
-      </InvControl>
-      <InvControl label="Height">
-        <InvSlider
-          value={height}
-          min={MIN}
-          max={MAX}
-          step={STEP}
-          fineStep={FINE_STEP}
-          onChange={setHeight}
-          marks={MARKS}
-        />
-      </InvControl>
-      <Flex h={96} w={96} p={4}>
-        <AspectRatioPreview width={width} height={height} />
-      </Flex>
-    </Flex>
-  );
-};
-
-export const AspectRatioWithSliderInvControls: Story = {
-  render: Component,
-};

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(
+  const aspectRatioState = useAppSelector((state) => state.canvas.aspectRatio);
-    (state) => state.canvas.aspectRatio
-  );
 
   const onChangeWidth = useCallback(
     (width: number) => {