feat(ui): rename types size and position to dimensions and coordinate

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

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<Partial<Size>>) => {
+  bboxScaledSizeChanged: (state, action: PayloadAction<Partial<Dimensions>>) => {
     state.layers.imageCache = null;
     state.bbox.scaledSize = { ...state.bbox.scaledSize, ...action.payload };
   },

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<InvocationDenoiseProgressEvent | null>(null);
 export const $isDrawing = atom<boolean>(false);
 export const $isMouseDown = atom<boolean>(false);
-export const $lastAddedPoint = atom<Position | null>(null);
-export const $lastMouseDownPos = atom<Position | null>(null);
-export const $lastCursorPos = atom<Position | null>(null);
+export const $lastAddedPoint = atom<Coordinate | null>(null);
+export const $lastMouseDownPos = atom<Coordinate | null>(null);
+export const $lastCursorPos = atom<Coordinate | null>(null);
 export const $spaceKey = atom<boolean>(false);
 
 export const canvasV2PersistConfig: PersistConfig<CanvasV2State> = {

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

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -809,15 +809,17 @@ export type CanvasEntity =
   | InitialImageEntity;
 export type CanvasEntityIdentifier = Pick<CanvasEntity, 'id' | 'type'>;
 
-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<typeof zDimensions>;
 
-export type Position = {
-  x: number;
-  y: number;
-};
+const zCoordinate = z.object({
+  x: z.number(),
+  y: z.number(),
+});
+export type Coordinate = z.infer<typeof zCoordinate>;
 
 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 => {

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

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) => {

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<HTMLDivElement>(null);
   const mouseOver = useBoolean(false);
-  const fittedDims = useMemo<Size>(
+  const fittedDims = useMemo<Dimensions>(
     () => fitDimsToContainer(containerDims, firstImage),
     [containerDims, firstImage]
   );
-  const compareImageDims = useMemo<Size>(
+  const compareImageDims = useMemo<Dimensions>(
     () => getSecondImageDims(comparisonFit, fittedDims, firstImage, secondImage),
     [comparisonFit, fittedDims, firstImage, secondImage]
   );

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<number | null>(null);
   const lastMoveTimeRef = useRef<number>(0);
 
-  const fittedDims = useMemo<Size>(
+  const fittedDims = useMemo<Dimensions>(
     () => fitDimsToContainer(containerDims, firstImage),
     [containerDims, firstImage]
   );
 
-  const compareImageDims = useMemo<Size>(
+  const compareImageDims = useMemo<Dimensions>(
     () => getSecondImageDims(comparisonFit, fittedDims, firstImage, secondImage),
     [comparisonFit, fittedDims, firstImage, secondImage]
   );

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 =

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<Invocation<'img_resize' | 'l2i'>> => {

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,

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,

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