canvas auto naming

Author: Attila Cseh

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

@@ -23,6 +23,7 @@ import type {
   CanvasesStateWithoutHistory,
   CanvasInpaintMaskState,
   CanvasMetadata,
+  CanvasStateWithHistory,
   ChannelName,
   ChannelPoints,
   ControlLoRAConfig,
@@ -136,7 +137,7 @@ const getInitialCanvasHistoryState = (id: string, name: string): StateWithHistor
 
 const getInitialCanvasesState = (): CanvasesStateWithoutHistory => {
   const canvasId = getPrefixedId('canvas');
-  const canvasName = 'default';
+  const canvasName = getNextCanvasName([]);
   const canvas = getInitialCanvasState(canvasId, canvasName);
 
   return {
@@ -155,6 +156,15 @@ const getInitialCanvasesHistoryState = (): CanvasesStateWithHistory => {
   };
 };
 
+const getNextCanvasName = (canvases: CanvasStateWithHistory[]): string => {
+  for (let i = 1; ; i++) {
+    const name = `Canvas-${i}`;
+    if (!canvases.some((c) => c.present.name === name)) {
+      return name;
+    }
+  }
+};
+
 const canvasesSlice = createSlice({
   name: 'canvas',
   initialState: getInitialCanvasesHistoryState(),
@@ -163,7 +173,7 @@ const canvasesSlice = createSlice({
       reducer: (state, action: PayloadAction<{ id: string; isSelected?: boolean }>) => {
         const { id, isSelected } = action.payload;
 
-        const name = 'default';
+        const name = getNextCanvasName(state.canvases);
         const canvas = getInitialCanvasHistoryState(id, name);
         state.canvases.push(canvas);
 

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

@@ -824,6 +824,7 @@ const zCanvasState = z.object({
 });
 export type CanvasState = z.infer<typeof zCanvasState>;
 const zCanvasStateWithHistory = zStateWithHistory(zCanvasState);
+export type CanvasStateWithHistory = z.infer<typeof zCanvasStateWithHistory>;
 const zCanvasesStateMigration = z.object({
   isMultiCanvasMigrationPending: z.boolean().optional(),
 });