From e8bc06cfd3896c41c56fbeea8971d916f6db420e Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 17 Jul 2024 10:43:38 +1000 Subject: [PATCH] feat(ui): rename types size and position to dimensions and coordinate --- .../features/controlLayers/konva/events.ts | 12 +++++------ .../controlLayers/store/bboxReducers.ts | 4 ++-- .../controlLayers/store/canvasV2Slice.ts | 8 ++++---- .../controlLayers/store/layersReducers.ts | 6 +++--- .../src/features/controlLayers/store/types.ts | 20 ++++++++++--------- .../util/getScaledBoundingBoxDimensions.ts | 4 ++-- .../ImageViewer/ImageComparison.tsx | 4 ++-- .../ImageViewer/ImageComparisonHover.tsx | 6 +++--- .../ImageViewer/ImageComparisonSlider.tsx | 6 +++--- .../gallery/components/ImageViewer/common.ts | 14 ++++++------- .../util/graph/generation/addImageToImage.ts | 6 +++--- .../nodes/util/graph/generation/addInpaint.ts | 6 +++--- .../util/graph/generation/addOutpaint.ts | 6 +++--- .../util/graph/generation/addTextToImage.ts | 6 +++--- 14 files changed, 55 insertions(+), 53 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/events.ts b/invokeai/frontend/web/src/features/controlLayers/konva/events.ts index daaf63c8e7..b6869c4318 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/events.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/events.ts @@ -4,7 +4,7 @@ import type { CanvasV2State, InpaintMaskEntity, LayerEntity, - Position, + Coordinate, RegionEntity, Tool, } from 'features/controlLayers/store/types'; @@ -45,10 +45,10 @@ const calculateNewBrushSize = (brushSize: number, delta: number) => { }; const getNextPoint = ( - currentPos: Position, + currentPos: Coordinate, toolState: CanvasV2State['tool'], - lastAddedPoint: Position | null -): Position | null => { + lastAddedPoint: Coordinate | null +): Coordinate | null => { // Continue the last line const minSpacingPx = toolState.selected === 'brush' @@ -65,7 +65,7 @@ const getNextPoint = ( return currentPos; }; -const getLastPointOfLine = (points: number[]): Position | null => { +const getLastPointOfLine = (points: number[]): Coordinate | null => { if (points.length < 2) { return null; } @@ -80,7 +80,7 @@ const getLastPointOfLine = (points: number[]): Position | null => { const getLastPointOfLastLineOfEntity = ( entity: LayerEntity | RegionEntity | InpaintMaskEntity, tool: Tool -): Position | null => { +): Coordinate | null => { const lastObject = entity.objects[entity.objects.length - 1]; if (!lastObject) { diff --git a/invokeai/frontend/web/src/features/controlLayers/store/bboxReducers.ts b/invokeai/frontend/web/src/features/controlLayers/store/bboxReducers.ts index 202ec0dda2..a1c276f4ae 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/bboxReducers.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/bboxReducers.ts @@ -1,7 +1,7 @@ import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit'; import { deepClone } from 'common/util/deepClone'; import { roundDownToMultiple, roundToMultiple } from 'common/util/roundDownToMultiple'; -import type { BoundingBoxScaleMethod, CanvasV2State, Size } from 'features/controlLayers/store/types'; +import type { BoundingBoxScaleMethod, CanvasV2State, Dimensions } from 'features/controlLayers/store/types'; import { getScaledBoundingBoxDimensions } from 'features/controlLayers/util/getScaledBoundingBoxDimensions'; import { calculateNewSize } from 'features/parameters/components/DocumentSize/calculateNewSize'; import { ASPECT_RATIO_MAP, initialAspectRatioState } from 'features/parameters/components/DocumentSize/constants'; @@ -11,7 +11,7 @@ import type { IRect } from 'konva/lib/types'; import { pick } from 'lodash-es'; export const bboxReducers = { - bboxScaledSizeChanged: (state, action: PayloadAction>) => { + bboxScaledSizeChanged: (state, action: PayloadAction>) => { state.layers.imageCache = null; state.bbox.scaledSize = { ...state.bbox.scaledSize, ...action.payload }; }, diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts index f5c106457b..621d1fda82 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts @@ -22,7 +22,7 @@ import { pick } from 'lodash-es'; import { atom } from 'nanostores'; import type { InvocationDenoiseProgressEvent } from 'services/events/types'; -import type { CanvasEntityIdentifier, CanvasV2State, Position, StageAttrs } from './types'; +import type { CanvasEntityIdentifier, CanvasV2State, Coordinate, StageAttrs } from './types'; import { RGBA_RED } from './types'; const initialState: CanvasV2State = { @@ -379,9 +379,9 @@ export const $shouldShowStagedImage = atom(true); export const $lastProgressEvent = atom(null); export const $isDrawing = atom(false); export const $isMouseDown = atom(false); -export const $lastAddedPoint = atom(null); -export const $lastMouseDownPos = atom(null); -export const $lastCursorPos = atom(null); +export const $lastAddedPoint = atom(null); +export const $lastMouseDownPos = atom(null); +export const $lastCursorPos = atom(null); export const $spaceKey = atom(false); export const canvasV2PersistConfig: PersistConfig = { diff --git a/invokeai/frontend/web/src/features/controlLayers/store/layersReducers.ts b/invokeai/frontend/web/src/features/controlLayers/store/layersReducers.ts index d98740258e..52c7cf0849 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/layersReducers.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/layersReducers.ts @@ -11,7 +11,7 @@ import type { EraserLine, ImageObjectAddedArg, LayerEntity, - Position, + Coordinate, RectShape, ScaleChangedArg, StagingAreaImage, @@ -48,7 +48,7 @@ export const layersReducers = { layerAddedFromStagingArea: { reducer: ( state, - action: PayloadAction<{ id: string; objectId: string; stagingAreaImage: StagingAreaImage; pos: Position }> + action: PayloadAction<{ id: string; objectId: string; stagingAreaImage: StagingAreaImage; pos: Coordinate }> ) => { const { id, objectId, stagingAreaImage, pos } = action.payload; const { imageDTO, offsetX, offsetY } = stagingAreaImage; @@ -67,7 +67,7 @@ export const layersReducers = { state.selectedEntityIdentifier = { type: 'layer', id }; state.layers.imageCache = null; }, - prepare: (payload: { stagingAreaImage: StagingAreaImage; pos: Position }) => ({ + prepare: (payload: { stagingAreaImage: StagingAreaImage; pos: Coordinate }) => ({ payload: { ...payload, id: uuidv4(), objectId: uuidv4() }, }), }, diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts index f4972f2d1d..836c04459c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts @@ -809,15 +809,17 @@ export type CanvasEntity = | InitialImageEntity; export type CanvasEntityIdentifier = Pick; -export type Size = { - width: number; - height: number; -}; +const zDimensions = z.object({ + width: z.number().int().positive(), + height: z.number().int().positive(), +}); +export type Dimensions = z.infer; -export type Position = { - x: number; - y: number; -}; +const zCoordinate = z.object({ + x: z.number(), + y: z.number(), +}); +export type Coordinate = z.infer; export type LoRA = { id: string; @@ -937,7 +939,7 @@ export type EraserLineAddedArg = { export type BrushLineAddedArg = EraserLineAddedArg & { color: RgbaColor }; export type PointAddedToLineArg = { id: string; point: [number, number] }; export type RectShapeAddedArg = { id: string; rect: IRect; color: RgbaColor }; -export type ImageObjectAddedArg = { id: string; imageDTO: ImageDTO; pos?: Position }; +export type ImageObjectAddedArg = { id: string; imageDTO: ImageDTO; pos?: Coordinate }; //#region Type guards export const isLine = (obj: RenderableObject): obj is BrushLine | EraserLine => { diff --git a/invokeai/frontend/web/src/features/controlLayers/util/getScaledBoundingBoxDimensions.ts b/invokeai/frontend/web/src/features/controlLayers/util/getScaledBoundingBoxDimensions.ts index e35e11e226..d98d03f33e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/util/getScaledBoundingBoxDimensions.ts +++ b/invokeai/frontend/web/src/features/controlLayers/util/getScaledBoundingBoxDimensions.ts @@ -1,6 +1,6 @@ import { roundToMultiple } from 'common/util/roundDownToMultiple'; import { CANVAS_GRID_SIZE_FINE } from 'features/controlLayers/konva/constants'; -import type { Size } from 'features/controlLayers/store/types'; +import type { Dimensions } from 'features/controlLayers/store/types'; /** * Scales the bounding box dimensions to the optimal dimension. The optimal dimensions should be the trained dimension @@ -8,7 +8,7 @@ import type { Size } from 'features/controlLayers/store/types'; * @param dimensions The un-scaled bbox dimensions * @param optimalDimension The optimal dimension to scale the bbox to */ -export const getScaledBoundingBoxDimensions = (dimensions: Size, optimalDimension: number): Size => { +export const getScaledBoundingBoxDimensions = (dimensions: Dimensions, optimalDimension: number): Dimensions => { const { width, height } = dimensions; const scaledDimensions = { width, height }; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparison.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparison.tsx index 3e1583cf6e..ff97a5a687 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparison.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparison.tsx @@ -1,6 +1,6 @@ import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; -import type { Size } from 'features/controlLayers/store/types'; +import type { Dimensions } from 'features/controlLayers/store/types'; import { selectComparisonImages } from 'features/gallery/components/ImageViewer/common'; import { ImageComparisonHover } from 'features/gallery/components/ImageViewer/ImageComparisonHover'; import { ImageComparisonSideBySide } from 'features/gallery/components/ImageViewer/ImageComparisonSideBySide'; @@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'; import { PiImagesBold } from 'react-icons/pi'; type Props = { - containerDims: Size; + containerDims: Dimensions; }; export const ImageComparison = memo(({ containerDims }: Props) => { diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonHover.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonHover.tsx index 83afa376cd..11f9da928b 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonHover.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonHover.tsx @@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks'; import { useBoolean } from 'common/hooks/useBoolean'; import { preventDefault } from 'common/util/stopPropagation'; import { TRANSPARENCY_CHECKER_PATTERN } from 'features/controlLayers/konva/constants'; -import type { Size } from 'features/controlLayers/store/types'; +import type { Dimensions } from 'features/controlLayers/store/types'; import { ImageComparisonLabel } from 'features/gallery/components/ImageViewer/ImageComparisonLabel'; import { memo, useMemo, useRef } from 'react'; @@ -14,11 +14,11 @@ export const ImageComparisonHover = memo(({ firstImage, secondImage, containerDi const comparisonFit = useAppSelector((s) => s.gallery.comparisonFit); const imageContainerRef = useRef(null); const mouseOver = useBoolean(false); - const fittedDims = useMemo( + const fittedDims = useMemo( () => fitDimsToContainer(containerDims, firstImage), [containerDims, firstImage] ); - const compareImageDims = useMemo( + const compareImageDims = useMemo( () => getSecondImageDims(comparisonFit, fittedDims, firstImage, secondImage), [comparisonFit, fittedDims, firstImage, secondImage] ); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx index 2a9da09516..00b25b1b32 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx @@ -2,7 +2,7 @@ import { Box, Flex, Icon, Image } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { preventDefault } from 'common/util/stopPropagation'; import { TRANSPARENCY_CHECKER_PATTERN } from 'features/controlLayers/konva/constants'; -import type { Size } from 'features/controlLayers/store/types'; +import type { Dimensions } from 'features/controlLayers/store/types'; import { ImageComparisonLabel } from 'features/gallery/components/ImageViewer/ImageComparisonLabel'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi'; @@ -31,12 +31,12 @@ export const ImageComparisonSlider = memo(({ firstImage, secondImage, containerD const rafRef = useRef(null); const lastMoveTimeRef = useRef(0); - const fittedDims = useMemo( + const fittedDims = useMemo( () => fitDimsToContainer(containerDims, firstImage), [containerDims, firstImage] ); - const compareImageDims = useMemo( + const compareImageDims = useMemo( () => getSecondImageDims(comparisonFit, fittedDims, firstImage, secondImage), [comparisonFit, fittedDims, firstImage, secondImage] ); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/common.ts b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/common.ts index 7c58ad2aff..ac3d7b172b 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/common.ts +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/common.ts @@ -1,5 +1,5 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; -import type { Size } from 'features/controlLayers/store/types'; +import type { Dimensions } from 'features/controlLayers/store/types'; import { selectGallerySlice } from 'features/gallery/store/gallerySlice'; import type { ComparisonFit } from 'features/gallery/store/types'; import type { ImageDTO } from 'services/api/types'; @@ -9,10 +9,10 @@ export const DROP_SHADOW = 'drop-shadow(0px 0px 4px rgb(0, 0, 0)) drop-shadow(0p export type ComparisonProps = { firstImage: ImageDTO; secondImage: ImageDTO; - containerDims: Size; + containerDims: Dimensions; }; -export const fitDimsToContainer = (containerDims: Size, imageDims: Size): Size => { +export const fitDimsToContainer = (containerDims: Dimensions, imageDims: Dimensions): Dimensions => { // Fall back to the image's dimensions if the container has no dimensions if (containerDims.width === 0 || containerDims.height === 0) { return { width: imageDims.width, height: imageDims.height }; @@ -46,10 +46,10 @@ export const fitDimsToContainer = (containerDims: Size, imageDims: Size): Size = */ export const getSecondImageDims = ( comparisonFit: ComparisonFit, - fittedDims: Size, - firstImageDims: Size, - secondImageDims: Size -): Size => { + fittedDims: Dimensions, + firstImageDims: Dimensions, + secondImageDims: Dimensions +): Dimensions => { const width = comparisonFit === 'fill' ? fittedDims.width : (fittedDims.width * secondImageDims.width) / firstImageDims.width; const height = diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/addImageToImage.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/addImageToImage.ts index 2bac462f12..730077b304 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/addImageToImage.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/addImageToImage.ts @@ -1,5 +1,5 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import type { CanvasV2State, Size } from 'features/controlLayers/store/types'; +import type { CanvasV2State, Dimensions } from 'features/controlLayers/store/types'; import type { Graph } from 'features/nodes/util/graph/generation/Graph'; import { isEqual, pick } from 'lodash-es'; import type { Invocation } from 'services/api/types'; @@ -10,8 +10,8 @@ export const addImageToImage = async ( l2i: Invocation<'l2i'>, denoise: Invocation<'denoise_latents'>, vaeSource: Invocation<'main_model_loader' | 'sdxl_model_loader' | 'seamless' | 'vae_loader'>, - originalSize: Size, - scaledSize: Size, + originalSize: Dimensions, + scaledSize: Dimensions, bbox: CanvasV2State['bbox'], denoising_start: number ): Promise> => { diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/addInpaint.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/addInpaint.ts index ceeed6caa4..24c10a6ea3 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/addInpaint.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/addInpaint.ts @@ -1,5 +1,5 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import type { CanvasV2State, Size } from 'features/controlLayers/store/types'; +import type { CanvasV2State, Dimensions } from 'features/controlLayers/store/types'; import type { Graph } from 'features/nodes/util/graph/generation/Graph'; import type { ParameterPrecision } from 'features/parameters/types/parameterSchemas'; import { isEqual, pick } from 'lodash-es'; @@ -12,8 +12,8 @@ export const addInpaint = async ( denoise: Invocation<'denoise_latents'>, vaeSource: Invocation<'main_model_loader' | 'sdxl_model_loader' | 'seamless' | 'vae_loader'>, modelLoader: Invocation<'main_model_loader' | 'sdxl_model_loader'>, - originalSize: Size, - scaledSize: Size, + originalSize: Dimensions, + scaledSize: Dimensions, bbox: CanvasV2State['bbox'], compositing: CanvasV2State['compositing'], denoising_start: number, diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/addOutpaint.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/addOutpaint.ts index fd0dd8b193..6a7c5ec6f8 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/addOutpaint.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/addOutpaint.ts @@ -1,5 +1,5 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import type { CanvasV2State, Size } from 'features/controlLayers/store/types'; +import type { CanvasV2State, Dimensions } from 'features/controlLayers/store/types'; import type { Graph } from 'features/nodes/util/graph/generation/Graph'; import { getInfill } from 'features/nodes/util/graph/graphBuilderUtils'; import type { ParameterPrecision } from 'features/parameters/types/parameterSchemas'; @@ -13,8 +13,8 @@ export const addOutpaint = async ( denoise: Invocation<'denoise_latents'>, vaeSource: Invocation<'main_model_loader' | 'sdxl_model_loader' | 'seamless' | 'vae_loader'>, modelLoader: Invocation<'main_model_loader' | 'sdxl_model_loader'>, - originalSize: Size, - scaledSize: Size, + originalSize: Dimensions, + scaledSize: Dimensions, bbox: CanvasV2State['bbox'], compositing: CanvasV2State['compositing'], denoising_start: number, diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/generation/addTextToImage.ts b/invokeai/frontend/web/src/features/nodes/util/graph/generation/addTextToImage.ts index 6a80c325fa..bc11f76be2 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/generation/addTextToImage.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/generation/addTextToImage.ts @@ -1,4 +1,4 @@ -import type { Size } from 'features/controlLayers/store/types'; +import type { Dimensions } from 'features/controlLayers/store/types'; import type { Graph } from 'features/nodes/util/graph/generation/Graph'; import { isEqual } from 'lodash-es'; import type { Invocation } from 'services/api/types'; @@ -6,8 +6,8 @@ import type { Invocation } from 'services/api/types'; export const addTextToImage = ( g: Graph, l2i: Invocation<'l2i'>, - originalSize: Size, - scaledSize: Size + originalSize: Dimensions, + scaledSize: Dimensions ): Invocation<'img_resize' | 'l2i'> => { if (!isEqual(scaledSize, originalSize)) { // We need to resize the output image back to the original size