From e46c7acd2e9dd94a0301d5379d41e858b0eeba41 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 31 Jul 2024 15:06:33 +1000 Subject: [PATCH] feat(ui): use nanoid(10) instead of uuidv4 for canvas Shorter ids makes it much more readable --- .../features/controlLayers/konva/CanvasLayer.ts | 11 +++++------ .../controlLayers/konva/CanvasManager.ts | 3 ++- .../src/features/controlLayers/konva/events.ts | 17 ++++++++--------- .../src/features/controlLayers/konva/util.ts | 3 +++ .../controlLayers/store/layersReducers.ts | 8 ++++---- 5 files changed, 22 insertions(+), 20 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts index 40d90fcb17..d6f9197438 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts @@ -6,7 +6,7 @@ import { CanvasImage } from 'features/controlLayers/konva/CanvasImage'; import { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import { CanvasRect } from 'features/controlLayers/konva/CanvasRect'; import { getBrushLineId, getEraserLineId, getRectShapeId } from 'features/controlLayers/konva/naming'; -import { konvaNodeToBlob, mapId, previewBlob } from 'features/controlLayers/konva/util'; +import { konvaNodeToBlob, mapId, nanoid, previewBlob } from 'features/controlLayers/konva/util'; import { layerRasterized } from 'features/controlLayers/store/canvasV2Slice'; import { type BrushLine, @@ -23,7 +23,6 @@ import { debounce, get } from 'lodash-es'; import type { Logger } from 'roarr'; import { uploadImage } from 'services/api/endpoints/images'; import { assert } from 'tsafe'; -import { v4 as uuidv4 } from 'uuid'; export class CanvasLayer { static NAME_PREFIX = 'layer'; @@ -222,13 +221,13 @@ export class CanvasLayer { // a non-buffer object, and we won't trigger things like bbox calculation if (drawingBuffer.type === 'brush_line') { - drawingBuffer.id = getBrushLineId(this.id, uuidv4()); + drawingBuffer.id = getBrushLineId(this.id, nanoid()); this.manager.stateApi.onBrushLineAdded({ id: this.id, brushLine: drawingBuffer }, 'layer'); } else if (drawingBuffer.type === 'eraser_line') { - drawingBuffer.id = getEraserLineId(this.id, uuidv4()); + drawingBuffer.id = getEraserLineId(this.id, nanoid()); this.manager.stateApi.onEraserLineAdded({ id: this.id, eraserLine: drawingBuffer }, 'layer'); } else if (drawingBuffer.type === 'rect_shape') { - drawingBuffer.id = getRectShapeId(this.id, uuidv4()); + drawingBuffer.id = getRectShapeId(this.id, nanoid()); this.manager.stateApi.onRectShapeAdded({ id: this.id, rectShape: drawingBuffer }, 'layer'); } } @@ -552,7 +551,7 @@ export class CanvasLayer { } const imageDTO = await uploadImage(blob, `${this.id}_rasterized.png`, 'other', true); const { dispatch } = getStore(); - const imageObject = imageDTOToImageObject(this.id, uuidv4(), imageDTO); + const imageObject = imageDTOToImageObject(this.id, nanoid(), imageDTO); await this._renderObject(imageObject, true); for (const obj of this.objects.values()) { if (obj.id !== imageObject.id) { diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts index cf5435561a..1fd787ce3b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts @@ -10,6 +10,7 @@ import { getInitialImage, getInpaintMaskImage, getRegionMaskImage, + nanoid, } from 'features/controlLayers/konva/util'; import type { Extents, ExtentsResult, GetBboxTask, WorkerLogMessage } from 'features/controlLayers/konva/worker'; import { $lastProgressEvent, $shouldShowStagedImage } from 'features/controlLayers/store/canvasV2Slice'; @@ -178,7 +179,7 @@ export class CanvasManager { } requestBbox(data: Omit, onComplete: (extents: Extents | null) => void) { - const id = crypto.randomUUID(); + const id = nanoid(); const task: GetBboxTask = { type: 'get_bbox', data: { ...data, id }, diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/events.ts b/invokeai/frontend/web/src/features/controlLayers/konva/events.ts index 0b79e7167a..90d2917828 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/events.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/events.ts @@ -1,5 +1,5 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { getScaledFlooredCursorPosition } from 'features/controlLayers/konva/util'; +import { getScaledFlooredCursorPosition, nanoid } from 'features/controlLayers/konva/util'; import type { CanvasV2State, Coordinate, @@ -12,7 +12,6 @@ import { isDrawableEntity, isDrawableEntityAdapter } from 'features/controlLayer import type Konva from 'konva'; import type { KonvaEventObject } from 'konva/lib/Node'; import { clamp } from 'lodash-es'; -import { v4 as uuidv4 } from 'uuid'; import { BRUSH_SPACING_TARGET_SCALE, CANVAS_SCALE_BY, MAX_CANVAS_SCALE, MIN_CANVAS_SCALE } from './constants'; import { getBrushLineId, getEraserLineId, getRectShapeId } from './naming'; @@ -188,7 +187,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.finalizeDrawingBuffer(); } await selectedEntityAdapter.setDrawingBuffer({ - id: getBrushLineId(selectedEntityAdapter.id, uuidv4(), true), + id: getBrushLineId(selectedEntityAdapter.id, nanoid(), true), type: 'brush_line', points: [ // The last point of the last line is already normalized to the entity's coordinates @@ -206,7 +205,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.finalizeDrawingBuffer(); } await selectedEntityAdapter.setDrawingBuffer({ - id: getBrushLineId(selectedEntityAdapter.id, uuidv4(), true), + id: getBrushLineId(selectedEntityAdapter.id, nanoid(), true), type: 'brush_line', points: [pos.x - selectedEntity.position.x, pos.y - selectedEntity.position.y], strokeWidth: toolState.brush.width, @@ -225,7 +224,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.finalizeDrawingBuffer(); } await selectedEntityAdapter.setDrawingBuffer({ - id: getEraserLineId(selectedEntityAdapter.id, uuidv4(), true), + id: getEraserLineId(selectedEntityAdapter.id, nanoid(), true), type: 'eraser_line', points: [ // The last point of the last line is already normalized to the entity's coordinates @@ -242,7 +241,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.finalizeDrawingBuffer(); } await selectedEntityAdapter.setDrawingBuffer({ - id: getEraserLineId(selectedEntityAdapter.id, uuidv4(), true), + id: getEraserLineId(selectedEntityAdapter.id, nanoid(), true), type: 'eraser_line', points: [pos.x - selectedEntity.position.x, pos.y - selectedEntity.position.y], strokeWidth: toolState.eraser.width, @@ -257,7 +256,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.finalizeDrawingBuffer(); } await selectedEntityAdapter.setDrawingBuffer({ - id: getRectShapeId(selectedEntityAdapter.id, uuidv4(), true), + id: getRectShapeId(selectedEntityAdapter.id, nanoid(), true), type: 'rect_shape', x: pos.x - selectedEntity.position.x, y: pos.y - selectedEntity.position.y, @@ -357,7 +356,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.finalizeDrawingBuffer(); } await selectedEntityAdapter.setDrawingBuffer({ - id: getBrushLineId(selectedEntityAdapter.id, uuidv4(), true), + id: getBrushLineId(selectedEntityAdapter.id, nanoid(), true), type: 'brush_line', points: [pos.x - selectedEntity.position.x, pos.y - selectedEntity.position.y], strokeWidth: toolState.brush.width, @@ -389,7 +388,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => { await selectedEntityAdapter.finalizeDrawingBuffer(); } await selectedEntityAdapter.setDrawingBuffer({ - id: getEraserLineId(selectedEntityAdapter.id, uuidv4(), true), + id: getEraserLineId(selectedEntityAdapter.id, nanoid(), true), type: 'eraser_line', points: [pos.x - selectedEntity.position.x, pos.y - selectedEntity.position.y], strokeWidth: toolState.eraser.width, diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/util.ts b/invokeai/frontend/web/src/features/controlLayers/konva/util.ts index fc764afe04..9c8740d2be 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/util.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/util.ts @@ -6,6 +6,7 @@ import { isValidLayer } from 'features/nodes/util/graph/generation/addLayers'; import Konva from 'konva'; import type { KonvaEventObject } from 'konva/lib/Node'; import type { Vector2d } from 'konva/lib/types'; +import { customAlphabet, urlAlphabet } from 'nanoid'; import type { ImageDTO } from 'services/api/types'; import { assert } from 'tsafe'; @@ -573,3 +574,5 @@ export function loadImage(src: string, imageEl?: HTMLImageElement): Promise ({ payload: { id: uuidv4() } }), + prepare: () => ({ payload: { id: nanoid() } }), }, layerAddedFromStagingArea: { reducer: ( @@ -64,7 +64,7 @@ export const layersReducers = { state.layers.imageCache = null; }, prepare: (payload: { stagingAreaImage: StagingAreaImage; position: Coordinate }) => ({ - payload: { ...payload, id: uuidv4(), objectId: uuidv4() }, + payload: { ...payload, id: nanoid(), objectId: nanoid() }, }), }, layerRecalled: (state, action: PayloadAction<{ data: LayerEntity }>) => { @@ -246,7 +246,7 @@ export const layersReducers = { state.layers.imageCache = null; }, prepare: (payload: ImageObjectAddedArg & { pos?: { x: number; y: number } }) => ({ - payload: { ...payload, objectId: uuidv4() }, + payload: { ...payload, objectId: nanoid() }, }), }, layerImageCacheChanged: (state, action: PayloadAction<{ imageDTO: ImageDTO | null }>) => {