feat: add generation cancel job functionality and improve job handling

- Introduced `generationCancelJob` command ID in `commands/ids.ts`.
- Added `GenerationCancelJobPayload` type in `commands/payloads.ts`.
- Enhanced job status to include "cancelled" in `editor/state.ts`.
- Updated `runGenerationJob` to accept an `AbortSignal` and handle cancellation.
- Implemented cancellation logic in `runGenerate` and related functions.
- Added tests for job cancellation in `operations/generation/workflow.test.ts`.
- Improved layer rendering logic to prevent stack overflow in `editor/document-indexes.ts`.
- Added raster size assertions in `platform/browser/rasterLimits.ts` for image processing limits.
- Enhanced image file handling to check for size limits in `platform/browser/imageFiles.ts`.
- Updated UI components to reflect job cancellation state in `view/GenerationJobStatus.tsx` and `view/bottom-controls/GenerateActionControls.tsx`.

operations/generation/generationJob.ts

@@ -6,7 +6,8 @@ export async function runGenerationJob(options: {
   kind: GenerationJobKind;
   label: string;
   dispatch: AppStore["dispatch"];
-  task: () => Promise<void>;
+  signal: AbortSignal;
+  task: (signal: AbortSignal) => Promise<void>;
 }): Promise<void> {
   const jobId = crypto.randomUUID();
   const startedAt = Date.now();
@@ -14,9 +15,13 @@ export async function runGenerationJob(options: {
   if (!nextState.editor.generation.jobs.some((job) => job.id === jobId && job.status === "running")) return;
 
   try {
-    await options.task();
+    await options.task(options.signal);
     options.dispatch(commandIds.generationSucceedJob, { jobId, finishedAt: Date.now() });
   } catch (reason: unknown) {
+    if (options.signal.aborted) {
+      options.dispatch(commandIds.generationCancelJob, { jobId, finishedAt: Date.now() });
+      return;
+    }
     options.dispatch(commandIds.generationFailJob, {
       jobId,
       finishedAt: Date.now(),

operations/generation/runGenerate.ts

@@ -17,6 +17,7 @@ export async function runGenerate(options: {
   viewport: ViewportState;
   settings: GenerateSettings;
   dispatch: AppStore["dispatch"];
+  signal?: AbortSignal;
 }) {
   const { document, selection, settings, dispatch } = options;
   const precondition = checkGenerationPreconditions(document, selection, settings);
@@ -39,6 +40,7 @@ export async function runGenerate(options: {
     inputImage,
     maskImage,
     inpaintBundle,
+    signal: options.signal,
   });
   const intrinsicSize = await loadImageSize(generated.source);
   const placement = resolveGeneratedOutputPlacement({ document, selection, settings, intrinsicSize, inpaintBundle });
@@ -64,6 +66,7 @@ export async function runGenerateFromCandidate(options: {
   candidate: GenerationCandidate;
   settings?: GenerateSettings;
   dispatch: AppStore["dispatch"];
+  signal?: AbortSignal;
 }) {
   const settings = options.settings ?? options.candidate.settings;
   const seed = resolveSeed(settings.seed);
@@ -75,6 +78,7 @@ export async function runGenerateFromCandidate(options: {
     inputImage: options.candidate.inputImage,
     maskImage: options.candidate.maskImage,
     inpaintCandidate: options.candidate,
+    signal: options.signal,
   });
   const intrinsicSize = await loadImageSize(generated.source);
 
@@ -141,6 +145,7 @@ async function requestGenerate(options: {
   maskImage?: string;
   inpaintBundle?: InpaintBundle;
   inpaintCandidate?: GenerationCandidate;
+  signal?: AbortSignal;
 }) {
   return requestGeneration({
       architecture: options.settings.architecture,
@@ -162,7 +167,7 @@ async function requestGenerate(options: {
       inpaint: resolveInpaintRequest(options.inpaintBundle, options.inpaintCandidate, options.settings),
       inputImage: options.inputImage,
       maskImage: options.maskImage,
-  });
+  }, options.signal);
 }
 
 function resolveInpaintRequest(inpaintBundle: InpaintBundle | undefined, inpaintCandidate: GenerationCandidate | undefined, settings: GenerateSettings) {

operations/generation/workflow.test.ts

@@ -39,6 +39,25 @@ describe("generation workflow", () => {
     expect(app.store.getState().document.artboards[0]?.layers.some((layer) => layer.id === "layer-new")).toBe(true);
     expect(app.store.getState().editor.generation.candidates).toHaveLength(0);
   });
+
+  test("cancels the active operation and records a cancelled job", async () => {
+    const app = createTestApp();
+    let receivedSignal: AbortSignal | undefined;
+    const workflow = createGenerationWorkflow(app.store, dependencies({
+      runGenerate: async (options) => {
+        receivedSignal = options.signal;
+        await new Promise<void>((_resolve, reject) => options.signal?.addEventListener("abort", () => reject(new DOMException("Cancelled", "AbortError")), { once: true }));
+      },
+    }));
+
+    const running = workflow.generate();
+    await Promise.resolve();
+    workflow.cancel();
+    await running;
+
+    expect(receivedSignal?.aborted).toBe(true);
+    expect(app.store.getState().editor.generation.jobs[0]?.status).toBe("cancelled");
+  });
 });
 
 function dependencies(overrides: Partial<GenerationWorkflowDependencies>): GenerationWorkflowDependencies {

operations/generation/workflow.ts

@@ -30,8 +30,17 @@ const defaultDependencies: GenerationWorkflowDependencies = {
 };
 
 export function createGenerationWorkflow(store: AppStore, dependencies: GenerationWorkflowDependencies = defaultDependencies) {
-  const job = (kind: GenerationJobKind, label: string, task: () => Promise<void>) =>
-    runGenerationJob({ kind, label, dispatch: store.dispatch, task });
+  let activeController: AbortController | undefined;
+  const job = async (kind: GenerationJobKind, label: string, task: (signal: AbortSignal) => Promise<void>) => {
+    if (store.getState().editor.generation.jobs.some((candidate) => candidate.status === "running")) return;
+    const controller = new AbortController();
+    activeController = controller;
+    try {
+      await runGenerationJob({ kind, label, dispatch: store.dispatch, signal: controller.signal, task });
+    } finally {
+      if (activeController === controller) activeController = undefined;
+    }
+  };
 
   return {
     precondition: () => {
@@ -41,7 +50,7 @@ export function createGenerationWorkflow(store: AppStore, dependencies: Generati
 
     loadResources: () => dependencies.loadGenerationResources(store),
 
-    generate: () => job("generate", "Generating", async () => {
+    generate: () => job("generate", "Generating", async (signal) => {
       const state = store.getState();
       await dependencies.runGenerate({
         document: state.document,
@@ -49,15 +58,16 @@ export function createGenerationWorkflow(store: AppStore, dependencies: Generati
         viewport: state.editor.viewport,
         settings: state.editor.tools.generate,
         dispatch: store.dispatch,
+        signal,
       });
     }),
 
     regenerate: (candidateId: string, settings?: GenerateSettings, label = "Regenerate") =>
-      job("regenerate", label, async () => {
+      job("regenerate", label, async (signal) => {
         const candidate = findCandidate(store, candidateId);
         const nextSettings = settings ?? candidate.settings;
         store.dispatch(commandIds.toolSetGenerateSettings, nextSettings);
-        await dependencies.runGenerateFromCandidate({ candidate, settings: nextSettings, dispatch: store.dispatch });
+        await dependencies.runGenerateFromCandidate({ candidate, settings: nextSettings, dispatch: store.dispatch, signal });
       }),
 
     applyCandidateAsLayer: (candidateId: string) => {
@@ -115,6 +125,8 @@ export function createGenerationWorkflow(store: AppStore, dependencies: Generati
         const source = await dependencies.createMaskedPixelReplacementSource(store.getState().document, candidate);
         store.dispatch(commandIds.generationReplaceCandidatePixels, { candidateId, source, mimeType: "image/png" });
       }),
+
+    cancel: () => activeController?.abort(),
   };
 }