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

This commit is contained in:
psychedelicious 2024-07-17 10:43:38 +10:00
parent 67a0a024e9
commit e8bc06cfd3
14 changed files with 55 additions and 53 deletions

View File

@ -4,7 +4,7 @@ import type {
CanvasV2State, CanvasV2State,
InpaintMaskEntity, InpaintMaskEntity,
LayerEntity, LayerEntity,
Position, Coordinate,
RegionEntity, RegionEntity,
Tool, Tool,
} from 'features/controlLayers/store/types'; } from 'features/controlLayers/store/types';
@ -45,10 +45,10 @@ const calculateNewBrushSize = (brushSize: number, delta: number) => {
}; };
const getNextPoint = ( const getNextPoint = (
currentPos: Position, currentPos: Coordinate,
toolState: CanvasV2State['tool'], toolState: CanvasV2State['tool'],
lastAddedPoint: Position | null lastAddedPoint: Coordinate | null
): Position | null => { ): Coordinate | null => {
// Continue the last line // Continue the last line
const minSpacingPx = const minSpacingPx =
toolState.selected === 'brush' toolState.selected === 'brush'
@ -65,7 +65,7 @@ const getNextPoint = (
return currentPos; return currentPos;
}; };
const getLastPointOfLine = (points: number[]): Position | null => { const getLastPointOfLine = (points: number[]): Coordinate | null => {
if (points.length < 2) { if (points.length < 2) {
return null; return null;
} }
@ -80,7 +80,7 @@ const getLastPointOfLine = (points: number[]): Position | null => {
const getLastPointOfLastLineOfEntity = ( const getLastPointOfLastLineOfEntity = (
entity: LayerEntity | RegionEntity | InpaintMaskEntity, entity: LayerEntity | RegionEntity | InpaintMaskEntity,
tool: Tool tool: Tool
): Position | null => { ): Coordinate | null => {
const lastObject = entity.objects[entity.objects.length - 1]; const lastObject = entity.objects[entity.objects.length - 1];
if (!lastObject) { if (!lastObject) {

View File

@ -1,7 +1,7 @@
import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit'; import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import { deepClone } from 'common/util/deepClone'; import { deepClone } from 'common/util/deepClone';
import { roundDownToMultiple, roundToMultiple } from 'common/util/roundDownToMultiple'; 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 { getScaledBoundingBoxDimensions } from 'features/controlLayers/util/getScaledBoundingBoxDimensions';
import { calculateNewSize } from 'features/parameters/components/DocumentSize/calculateNewSize'; import { calculateNewSize } from 'features/parameters/components/DocumentSize/calculateNewSize';
import { ASPECT_RATIO_MAP, initialAspectRatioState } from 'features/parameters/components/DocumentSize/constants'; 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'; import { pick } from 'lodash-es';
export const bboxReducers = { export const bboxReducers = {
bboxScaledSizeChanged: (state, action: PayloadAction<Partial<Size>>) => { bboxScaledSizeChanged: (state, action: PayloadAction<Partial<Dimensions>>) => {
state.layers.imageCache = null; state.layers.imageCache = null;
state.bbox.scaledSize = { ...state.bbox.scaledSize, ...action.payload }; state.bbox.scaledSize = { ...state.bbox.scaledSize, ...action.payload };
}, },

View File

@ -22,7 +22,7 @@ import { pick } from 'lodash-es';
import { atom } from 'nanostores'; import { atom } from 'nanostores';
import type { InvocationDenoiseProgressEvent } from 'services/events/types'; 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'; import { RGBA_RED } from './types';
const initialState: CanvasV2State = { const initialState: CanvasV2State = {
@ -379,9 +379,9 @@ export const $shouldShowStagedImage = atom(true);
export const $lastProgressEvent = atom<InvocationDenoiseProgressEvent | null>(null); export const $lastProgressEvent = atom<InvocationDenoiseProgressEvent | null>(null);
export const $isDrawing = atom<boolean>(false); export const $isDrawing = atom<boolean>(false);
export const $isMouseDown = atom<boolean>(false); export const $isMouseDown = atom<boolean>(false);
export const $lastAddedPoint = atom<Position | null>(null); export const $lastAddedPoint = atom<Coordinate | null>(null);
export const $lastMouseDownPos = atom<Position | null>(null); export const $lastMouseDownPos = atom<Coordinate | null>(null);
export const $lastCursorPos = atom<Position | null>(null); export const $lastCursorPos = atom<Coordinate | null>(null);
export const $spaceKey = atom<boolean>(false); export const $spaceKey = atom<boolean>(false);
export const canvasV2PersistConfig: PersistConfig<CanvasV2State> = { export const canvasV2PersistConfig: PersistConfig<CanvasV2State> = {

View File

@ -11,7 +11,7 @@ import type {
EraserLine, EraserLine,
ImageObjectAddedArg, ImageObjectAddedArg,
LayerEntity, LayerEntity,
Position, Coordinate,
RectShape, RectShape,
ScaleChangedArg, ScaleChangedArg,
StagingAreaImage, StagingAreaImage,
@ -48,7 +48,7 @@ export const layersReducers = {
layerAddedFromStagingArea: { layerAddedFromStagingArea: {
reducer: ( reducer: (
state, 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 { id, objectId, stagingAreaImage, pos } = action.payload;
const { imageDTO, offsetX, offsetY } = stagingAreaImage; const { imageDTO, offsetX, offsetY } = stagingAreaImage;
@ -67,7 +67,7 @@ export const layersReducers = {
state.selectedEntityIdentifier = { type: 'layer', id }; state.selectedEntityIdentifier = { type: 'layer', id };
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
prepare: (payload: { stagingAreaImage: StagingAreaImage; pos: Position }) => ({ prepare: (payload: { stagingAreaImage: StagingAreaImage; pos: Coordinate }) => ({
payload: { ...payload, id: uuidv4(), objectId: uuidv4() }, payload: { ...payload, id: uuidv4(), objectId: uuidv4() },
}), }),
}, },

View File

@ -809,15 +809,17 @@ export type CanvasEntity =
| InitialImageEntity; | InitialImageEntity;
export type CanvasEntityIdentifier = Pick<CanvasEntity, 'id' | 'type'>; export type CanvasEntityIdentifier = Pick<CanvasEntity, 'id' | 'type'>;
export type Size = { const zDimensions = z.object({
width: number; width: z.number().int().positive(),
height: number; height: z.number().int().positive(),
}; });
export type Dimensions = z.infer<typeof zDimensions>;
export type Position = { const zCoordinate = z.object({
x: number; x: z.number(),
y: number; y: z.number(),
}; });
export type Coordinate = z.infer<typeof zCoordinate>;
export type LoRA = { export type LoRA = {
id: string; id: string;
@ -937,7 +939,7 @@ export type EraserLineAddedArg = {
export type BrushLineAddedArg = EraserLineAddedArg & { color: RgbaColor }; export type BrushLineAddedArg = EraserLineAddedArg & { color: RgbaColor };
export type PointAddedToLineArg = { id: string; point: [number, number] }; export type PointAddedToLineArg = { id: string; point: [number, number] };
export type RectShapeAddedArg = { id: string; rect: IRect; color: RgbaColor }; 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 //#region Type guards
export const isLine = (obj: RenderableObject): obj is BrushLine | EraserLine => { export const isLine = (obj: RenderableObject): obj is BrushLine | EraserLine => {

View File

@ -1,6 +1,6 @@
import { roundToMultiple } from 'common/util/roundDownToMultiple'; import { roundToMultiple } from 'common/util/roundDownToMultiple';
import { CANVAS_GRID_SIZE_FINE } from 'features/controlLayers/konva/constants'; 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 * 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 dimensions The un-scaled bbox dimensions
* @param optimalDimension The optimal dimension to scale the bbox to * @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 { width, height } = dimensions;
const scaledDimensions = { width, height }; const scaledDimensions = { width, height };

View File

@ -1,6 +1,6 @@
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { IAINoContentFallback } from 'common/components/IAIImageFallback'; 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 { selectComparisonImages } from 'features/gallery/components/ImageViewer/common';
import { ImageComparisonHover } from 'features/gallery/components/ImageViewer/ImageComparisonHover'; import { ImageComparisonHover } from 'features/gallery/components/ImageViewer/ImageComparisonHover';
import { ImageComparisonSideBySide } from 'features/gallery/components/ImageViewer/ImageComparisonSideBySide'; import { ImageComparisonSideBySide } from 'features/gallery/components/ImageViewer/ImageComparisonSideBySide';
@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
import { PiImagesBold } from 'react-icons/pi'; import { PiImagesBold } from 'react-icons/pi';
type Props = { type Props = {
containerDims: Size; containerDims: Dimensions;
}; };
export const ImageComparison = memo(({ containerDims }: Props) => { export const ImageComparison = memo(({ containerDims }: Props) => {

View File

@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
import { useBoolean } from 'common/hooks/useBoolean'; import { useBoolean } from 'common/hooks/useBoolean';
import { preventDefault } from 'common/util/stopPropagation'; import { preventDefault } from 'common/util/stopPropagation';
import { TRANSPARENCY_CHECKER_PATTERN } from 'features/controlLayers/konva/constants'; 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 { ImageComparisonLabel } from 'features/gallery/components/ImageViewer/ImageComparisonLabel';
import { memo, useMemo, useRef } from 'react'; 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 comparisonFit = useAppSelector((s) => s.gallery.comparisonFit);
const imageContainerRef = useRef<HTMLDivElement>(null); const imageContainerRef = useRef<HTMLDivElement>(null);
const mouseOver = useBoolean(false); const mouseOver = useBoolean(false);
const fittedDims = useMemo<Size>( const fittedDims = useMemo<Dimensions>(
() => fitDimsToContainer(containerDims, firstImage), () => fitDimsToContainer(containerDims, firstImage),
[containerDims, firstImage] [containerDims, firstImage]
); );
const compareImageDims = useMemo<Size>( const compareImageDims = useMemo<Dimensions>(
() => getSecondImageDims(comparisonFit, fittedDims, firstImage, secondImage), () => getSecondImageDims(comparisonFit, fittedDims, firstImage, secondImage),
[comparisonFit, fittedDims, firstImage, secondImage] [comparisonFit, fittedDims, firstImage, secondImage]
); );

View File

@ -2,7 +2,7 @@ import { Box, Flex, Icon, Image } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { preventDefault } from 'common/util/stopPropagation'; import { preventDefault } from 'common/util/stopPropagation';
import { TRANSPARENCY_CHECKER_PATTERN } from 'features/controlLayers/konva/constants'; 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 { ImageComparisonLabel } from 'features/gallery/components/ImageViewer/ImageComparisonLabel';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi'; 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 rafRef = useRef<number | null>(null);
const lastMoveTimeRef = useRef<number>(0); const lastMoveTimeRef = useRef<number>(0);
const fittedDims = useMemo<Size>( const fittedDims = useMemo<Dimensions>(
() => fitDimsToContainer(containerDims, firstImage), () => fitDimsToContainer(containerDims, firstImage),
[containerDims, firstImage] [containerDims, firstImage]
); );
const compareImageDims = useMemo<Size>( const compareImageDims = useMemo<Dimensions>(
() => getSecondImageDims(comparisonFit, fittedDims, firstImage, secondImage), () => getSecondImageDims(comparisonFit, fittedDims, firstImage, secondImage),
[comparisonFit, fittedDims, firstImage, secondImage] [comparisonFit, fittedDims, firstImage, secondImage]
); );

View File

@ -1,5 +1,5 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; 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 { selectGallerySlice } from 'features/gallery/store/gallerySlice';
import type { ComparisonFit } from 'features/gallery/store/types'; import type { ComparisonFit } from 'features/gallery/store/types';
import type { ImageDTO } from 'services/api/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 = { export type ComparisonProps = {
firstImage: ImageDTO; firstImage: ImageDTO;
secondImage: 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 // Fall back to the image's dimensions if the container has no dimensions
if (containerDims.width === 0 || containerDims.height === 0) { if (containerDims.width === 0 || containerDims.height === 0) {
return { width: imageDims.width, height: imageDims.height }; return { width: imageDims.width, height: imageDims.height };
@ -46,10 +46,10 @@ export const fitDimsToContainer = (containerDims: Size, imageDims: Size): Size =
*/ */
export const getSecondImageDims = ( export const getSecondImageDims = (
comparisonFit: ComparisonFit, comparisonFit: ComparisonFit,
fittedDims: Size, fittedDims: Dimensions,
firstImageDims: Size, firstImageDims: Dimensions,
secondImageDims: Size secondImageDims: Dimensions
): Size => { ): Dimensions => {
const width = const width =
comparisonFit === 'fill' ? fittedDims.width : (fittedDims.width * secondImageDims.width) / firstImageDims.width; comparisonFit === 'fill' ? fittedDims.width : (fittedDims.width * secondImageDims.width) / firstImageDims.width;
const height = const height =

View File

@ -1,5 +1,5 @@
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; 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 { Graph } from 'features/nodes/util/graph/generation/Graph';
import { isEqual, pick } from 'lodash-es'; import { isEqual, pick } from 'lodash-es';
import type { Invocation } from 'services/api/types'; import type { Invocation } from 'services/api/types';
@ -10,8 +10,8 @@ export const addImageToImage = async (
l2i: Invocation<'l2i'>, l2i: Invocation<'l2i'>,
denoise: Invocation<'denoise_latents'>, denoise: Invocation<'denoise_latents'>,
vaeSource: Invocation<'main_model_loader' | 'sdxl_model_loader' | 'seamless' | 'vae_loader'>, vaeSource: Invocation<'main_model_loader' | 'sdxl_model_loader' | 'seamless' | 'vae_loader'>,
originalSize: Size, originalSize: Dimensions,
scaledSize: Size, scaledSize: Dimensions,
bbox: CanvasV2State['bbox'], bbox: CanvasV2State['bbox'],
denoising_start: number denoising_start: number
): Promise<Invocation<'img_resize' | 'l2i'>> => { ): Promise<Invocation<'img_resize' | 'l2i'>> => {

View File

@ -1,5 +1,5 @@
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; 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 { Graph } from 'features/nodes/util/graph/generation/Graph';
import type { ParameterPrecision } from 'features/parameters/types/parameterSchemas'; import type { ParameterPrecision } from 'features/parameters/types/parameterSchemas';
import { isEqual, pick } from 'lodash-es'; import { isEqual, pick } from 'lodash-es';
@ -12,8 +12,8 @@ export const addInpaint = async (
denoise: Invocation<'denoise_latents'>, denoise: Invocation<'denoise_latents'>,
vaeSource: Invocation<'main_model_loader' | 'sdxl_model_loader' | 'seamless' | 'vae_loader'>, vaeSource: Invocation<'main_model_loader' | 'sdxl_model_loader' | 'seamless' | 'vae_loader'>,
modelLoader: Invocation<'main_model_loader' | 'sdxl_model_loader'>, modelLoader: Invocation<'main_model_loader' | 'sdxl_model_loader'>,
originalSize: Size, originalSize: Dimensions,
scaledSize: Size, scaledSize: Dimensions,
bbox: CanvasV2State['bbox'], bbox: CanvasV2State['bbox'],
compositing: CanvasV2State['compositing'], compositing: CanvasV2State['compositing'],
denoising_start: number, denoising_start: number,

View File

@ -1,5 +1,5 @@
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; 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 { Graph } from 'features/nodes/util/graph/generation/Graph';
import { getInfill } from 'features/nodes/util/graph/graphBuilderUtils'; import { getInfill } from 'features/nodes/util/graph/graphBuilderUtils';
import type { ParameterPrecision } from 'features/parameters/types/parameterSchemas'; import type { ParameterPrecision } from 'features/parameters/types/parameterSchemas';
@ -13,8 +13,8 @@ export const addOutpaint = async (
denoise: Invocation<'denoise_latents'>, denoise: Invocation<'denoise_latents'>,
vaeSource: Invocation<'main_model_loader' | 'sdxl_model_loader' | 'seamless' | 'vae_loader'>, vaeSource: Invocation<'main_model_loader' | 'sdxl_model_loader' | 'seamless' | 'vae_loader'>,
modelLoader: Invocation<'main_model_loader' | 'sdxl_model_loader'>, modelLoader: Invocation<'main_model_loader' | 'sdxl_model_loader'>,
originalSize: Size, originalSize: Dimensions,
scaledSize: Size, scaledSize: Dimensions,
bbox: CanvasV2State['bbox'], bbox: CanvasV2State['bbox'],
compositing: CanvasV2State['compositing'], compositing: CanvasV2State['compositing'],
denoising_start: number, denoising_start: number,

View File

@ -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 type { Graph } from 'features/nodes/util/graph/generation/Graph';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
import type { Invocation } from 'services/api/types'; import type { Invocation } from 'services/api/types';
@ -6,8 +6,8 @@ import type { Invocation } from 'services/api/types';
export const addTextToImage = ( export const addTextToImage = (
g: Graph, g: Graph,
l2i: Invocation<'l2i'>, l2i: Invocation<'l2i'>,
originalSize: Size, originalSize: Dimensions,
scaledSize: Size scaledSize: Dimensions
): Invocation<'img_resize' | 'l2i'> => { ): Invocation<'img_resize' | 'l2i'> => {
if (!isEqual(scaledSize, originalSize)) { if (!isEqual(scaledSize, originalSize)) {
// We need to resize the output image back to the original size // We need to resize the output image back to the original size