diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 6734f1dcd1..77c486004c 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -528,7 +528,7 @@ "hidePreview": "Hide Preview", "showPreview": "Show Preview", "controlNetControlMode": "Control Mode", - "clipSkip": "Clip Skip", + "clipSkip": "CLIP Skip", "aspectRatio": "Ratio" }, "settings": { 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 0241f3eb55..3421749658 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx @@ -12,6 +12,7 @@ import { setIsMovingBoundingBox, setIsTransformingBoundingBox, } from 'features/canvas/store/canvasSlice'; +import { uiSelector } from 'features/ui/store/uiSelectors'; import Konva from 'konva'; import { GroupConfig } from 'konva/lib/Group'; import { KonvaEventObject } from 'konva/lib/Node'; @@ -22,8 +23,8 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { Group, Rect, Transformer } from 'react-konva'; const boundingBoxPreviewSelector = createSelector( - canvasSelector, - (canvas) => { + [canvasSelector, uiSelector], + (canvas, ui) => { const { boundingBoxCoordinates, boundingBoxDimensions, @@ -35,6 +36,8 @@ const boundingBoxPreviewSelector = createSelector( shouldSnapToGrid, } = canvas; + const { aspectRatio } = ui; + return { boundingBoxCoordinates, boundingBoxDimensions, @@ -45,6 +48,7 @@ const boundingBoxPreviewSelector = createSelector( shouldSnapToGrid, tool, hitStrokeWidth: 20 / stageScale, + aspectRatio, }; }, { @@ -70,6 +74,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { shouldSnapToGrid, tool, hitStrokeWidth, + aspectRatio, } = useAppSelector(boundingBoxPreviewSelector); const transformerRef = useRef(null); @@ -137,12 +142,22 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { const x = Math.round(rect.x()); const y = Math.round(rect.y()); - dispatch( - setBoundingBoxDimensions({ - width, - height, - }) - ); + if (aspectRatio) { + const newHeight = roundToMultiple(width / aspectRatio, 64); + dispatch( + setBoundingBoxDimensions({ + width: width, + height: newHeight, + }) + ); + } else { + dispatch( + setBoundingBoxDimensions({ + width, + height, + }) + ); + } dispatch( setBoundingBoxCoordinates({ @@ -154,7 +169,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { // Reset the scale now that the coords/dimensions have been un-scaled rect.scaleX(1); rect.scaleY(1); - }, [dispatch, shouldSnapToGrid]); + }, [dispatch, shouldSnapToGrid, aspectRatio]); const anchorDragBoundFunc = useCallback( ( diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts index ae184aec00..9bba44e3ea 100644 --- a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts +++ b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts @@ -879,7 +879,7 @@ export const canvasSlice = createSlice({ if (ratio) { state.boundingBoxDimensions.height = roundToMultiple( state.boundingBoxDimensions.width / ratio, - 8 + 64 ); } }); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx index 78fa245753..12fc4abcf7 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx @@ -42,7 +42,7 @@ const ParamBoundingBoxWidth = () => { }) ); if (aspectRatio) { - const newWidth = roundToMultiple(v * aspectRatio, 8); + const newWidth = roundToMultiple(v * aspectRatio, 64); dispatch( setBoundingBoxDimensions({ width: newWidth, @@ -60,7 +60,7 @@ const ParamBoundingBoxWidth = () => { }) ); if (aspectRatio) { - const newWidth = roundToMultiple(512 * aspectRatio, 8); + const newWidth = roundToMultiple(512 * aspectRatio, 64); dispatch( setBoundingBoxDimensions({ width: newWidth, diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx index 69edd09137..5c9a82110a 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx @@ -42,7 +42,7 @@ const ParamBoundingBoxWidth = () => { }) ); if (aspectRatio) { - const newHeight = roundToMultiple(v / aspectRatio, 8); + const newHeight = roundToMultiple(v / aspectRatio, 64); dispatch( setBoundingBoxDimensions({ width: Math.floor(v), @@ -60,7 +60,7 @@ const ParamBoundingBoxWidth = () => { }) ); if (aspectRatio) { - const newHeight = roundToMultiple(512 / aspectRatio, 8); + const newHeight = roundToMultiple(512 / aspectRatio, 64); dispatch( setBoundingBoxDimensions({ width: Math.floor(512),