Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): use nanoid(10) instead of uuidv4 for canvas

Browse Source 
Shorter ids makes it much more readable
This commit is contained in:
psychedelicious 2024-07-31 15:06:33 +10:00
parent b771664851
commit e46c7acd2e
5 changed files with 22 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
View File

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

3
invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
View File

@ -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<GetBboxTask['data'], 'id'>, onComplete: (extents: Extents | null) => void) {
const id = crypto.randomUUID();
const id = nanoid();
const task: GetBboxTask = {
type: 'get_bbox',
data: { ...data, id },

17
invokeai/frontend/web/src/features/controlLayers/konva/events.ts
View File

@ -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,

3
invokeai/frontend/web/src/features/controlLayers/konva/util.ts
View File

@ -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<HTML
_imageEl.src = src;
});
}
export const nanoid = customAlphabet(urlAlphabet, 10);

8
invokeai/frontend/web/src/features/controlLayers/store/layersReducers.ts
View File

@ -1,9 +1,9 @@
import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import { moveOneToEnd, moveOneToStart, moveToEnd, moveToStart } from 'common/util/arrayUtils';
import { nanoid } from 'features/controlLayers/konva/util';
import type { IRect } from 'konva/lib/types';
import type { ImageDTO } from 'services/api/types';
import { assert } from 'tsafe';
import { v4 as uuidv4 } from 'uuid';
import type {
BrushLine,
@ -42,7 +42,7 @@ export const layersReducers = {
state.selectedEntityIdentifier = { type: 'layer', id };
state.layers.imageCache = null;
},
prepare: () => ({ 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 }>) => {