[Editor] Allow to abort the current drawing

It fixes #19126.

src/display/editor/annotation_editor_layer.js

@@ -820,14 +820,14 @@ class AnnotationEditorLayer {
     this.#currentEditorType.startDrawing(this, this.#uiManager, false, event);
   }
 
-  endDrawingSession() {
+  endDrawingSession(isAborted = false) {
     if (!this.#drawingAC) {
-      return;
+      return null;
     }
     this.#drawingAC.abort();
     this.#drawingAC = null;
     this.#uiManager.disableUserSelect(false);
-    this.#currentEditorType.endDrawing();
+    return this.#currentEditorType.endDrawing(isAborted);
   }
 
   /**

src/display/editor/draw.js

@@ -739,13 +739,13 @@ class DrawingEditor extends AnnotationEditor {
       return;
     }
 
-    this.endDrawing();
+    this.endDrawing(/* isAborted = */ false);
   }
 
-  static endDrawing() {
+  static endDrawing(isAborted) {
     const parent = this._currentParent;
     if (!parent) {
-      return;
+      return null;
     }
     parent.toggleDrawing(true);
     parent.cleanUndoStack(AnnotationEditorParamsType.DRAW_STEP);
@@ -756,20 +756,31 @@ class DrawingEditor extends AnnotationEditor {
         scale,
       } = parent;
 
-      parent.createAndAddNewEditor({ offsetX: 0, offsetY: 0 }, false, {
+      const editor = parent.createAndAddNewEditor(
-        drawId: this._currentDrawId,
+        { offsetX: 0, offsetY: 0 },
-        drawOutlines: this._currentDraw.getOutlines(
+        false,
-          pageWidth * scale,
+        {
-          pageHeight * scale,
+          drawId: this._currentDrawId,
-          scale,
+          drawOutlines: this._currentDraw.getOutlines(
-          this._INNER_MARGIN
+            pageWidth * scale,
-        ),
+            pageHeight * scale,
-        drawingOptions: this._currentDrawingOptions,
+            scale,
-        mustBeCommitted: true,
+            this._INNER_MARGIN
-      });
+          ),
-    } else {
+          drawingOptions: this._currentDrawingOptions,
-      parent.drawLayer.remove(this._currentDrawId);
+          mustBeCommitted: !isAborted,
+        }
+      );
+      this._cleanup();
+      return editor;
     }
+
+    parent.drawLayer.remove(this._currentDrawId);
+    this._cleanup();
+    return null;
+  }
+
+  static _cleanup() {
     this._currentDrawId = -1;
     this._currentDraw = null;
     this._currentDrawingOptions = null;

src/display/editor/tools.js

@@ -2088,11 +2088,16 @@ class AnnotationEditorUIManager {
    */
   delete() {
     this.commitOrRemove();
-    if (!this.hasSelection) {
+    const drawingEditor = this.currentLayer?.endDrawingSession(
+      /* isAborted = */ true
+    );
+    if (!this.hasSelection && !drawingEditor) {
       return;
     }
 
-    const editors = [...this.#selectedEditors];
+    const editors = drawingEditor
+      ? [drawingEditor]
+      : [...this.#selectedEditors];
     const cmd = () => {
       for (const editor of editors) {
         editor.remove();

test/integration/ink_editor_spec.mjs

@@ -26,6 +26,7 @@ import {
   loadAndWait,
   scrollIntoView,
   switchToEditor,
+  waitForNoElement,
   waitForSerialized,
   waitForStorageEntries,
 } from "./test_utils.mjs";
@@ -567,4 +568,48 @@ describe("Ink Editor", () => {
       );
     });
   });
+
+  describe("Can delete the drawing in progress and undo the deletion", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("empty.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the color has been changed", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToInk(page);
+
+          const rect = await getRect(page, ".annotationEditorLayer");
+
+          const x = rect.x + 20;
+          const y = rect.y + 20;
+          const clickHandle = await waitForPointerUp(page);
+          await page.mouse.move(x, y);
+          await page.mouse.down();
+          await page.mouse.move(x + 50, y + 50);
+          await page.mouse.up();
+          await awaitPromise(clickHandle);
+
+          const drawSelector = `.canvasWrapper svg.draw path[d]:not([d=""])`;
+          await page.waitForSelector(drawSelector);
+
+          await page.keyboard.press("Backspace");
+
+          const editorSelector = getEditorSelector(0);
+          await waitForNoElement(page, drawSelector);
+          await waitForNoElement(page, editorSelector);
+
+          await kbUndo(page);
+          await page.waitForSelector(editorSelector, { visible: true });
+          await page.waitForSelector(drawSelector);
+        })
+      );
+    });
+  });
 });

test/integration/test_utils.mjs

@@ -773,6 +773,14 @@ async function switchToEditor(name, page, disable = false) {
   await awaitPromise(modeChangedHandle);
 }
 
+function waitForNoElement(page, selector) {
+  return page.waitForFunction(
+    sel => !document.querySelector(sel),
+    {},
+    selector
+  );
+}
+
 export {
   applyFunctionToEditor,
   awaitPromise,
@@ -826,6 +834,7 @@ export {
   waitForAnnotationModeChanged,
   waitForEntryInStorage,
   waitForEvent,
+  waitForNoElement,
   waitForPageRendered,
   waitForSandboxTrip,
   waitForSelectedEditor,