[Editor] Support dragging & dropping images on a pdf (bug 1900907)

mozilla · Jun 6, 2024 · 816155e · 816155e
1 parent 6a71f69
commit 816155e
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 7 deletions.
diff --git a/src/display/editor/tools.js b/src/display/editor/tools.js
@@ -600,6 +600,10 @@ class AnnotationEditorUIManager {
 
   #boundCut = this.cut.bind(this);
 
+  #boundDragOver = this.dragOver.bind(this);
+
+  #boundDrop = this.drop.bind(this);
+
   #boundPaste = this.paste.bind(this);
 
   #boundKeydown = this.keydown.bind(this);
@@ -790,6 +794,7 @@ class AnnotationEditorUIManager {
     this._eventBus._on("scalechanging", this.#boundOnScaleChanging);
     this._eventBus._on("rotationchanging", this.#boundOnRotationChanging);
     this.#addSelectionListener();
+    this.#addDragAndDropListeners();
     this.#addKeyboardManager();
     this.#annotationStorage = pdfDocument.annotationStorage;
     this.#filterFactory = pdfDocument.filterFactory;
@@ -815,6 +820,7 @@ class AnnotationEditorUIManager {
   }
 
   destroy() {
+    this.#removeDragAndDropListeners();
     this.#removeKeyboardManager();
     this.#removeFocusManager();
     this._eventBus._off("editingaction", this.#boundOnEditingAction);
@@ -1183,6 +1189,16 @@ class AnnotationEditorUIManager {
     document.removeEventListener("paste", this.#boundPaste);
   }
 
+  #addDragAndDropListeners() {
+    document.addEventListener("dragover", this.#boundDragOver);
+    document.addEventListener("drop", this.#boundDrop);
+  }
+
+  #removeDragAndDropListeners() {
+    document.removeEventListener("dragover", this.#boundDragOver);
+    document.removeEventListener("drop", this.#boundDrop);
+  }
+
   addEditListeners() {
     this.#addKeyboardManager();
     this.#addCopyPasteListeners();
@@ -1193,6 +1209,34 @@ class AnnotationEditorUIManager {
     this.#removeCopyPasteListeners();
   }
 
+  dragOver(event) {
+    for (const { type } of event.dataTransfer.items) {
+      for (const editorType of this.#editorTypes) {
+        if (editorType.isHandlingMimeForPasting(type)) {
+          event.dataTransfer.dropEffect = "copy";
+          event.preventDefault();
+          return;
+        }
+      }
+    }
+  }
+
+  /**
+   * Drop callback.
+   * @param {DragEvent} event
+   */
+  drop(event) {
+    for (const item of event.dataTransfer.items) {
+      for (const editorType of this.#editorTypes) {
+        if (editorType.isHandlingMimeForPasting(item.type)) {
+          editorType.paste(item, this.currentLayer);
+          event.preventDefault();
+          return;
+        }
+      }
+    }
+  }
+
   /**
    * Copy callback.
    * @param {ClipboardEvent} event

diff --git a/web/app.js b/web/app.js
@@ -670,18 +670,28 @@ const PDFViewerApplication = {
 
       // Enable dragging-and-dropping a new PDF file onto the viewerContainer.
       appConfig.mainContainer.addEventListener("dragover", function (evt) {
-        evt.preventDefault();
-
-        evt.dataTransfer.dropEffect =
-          evt.dataTransfer.effectAllowed === "copy" ? "copy" : "move";
+        const { items } = evt.dataTransfer;
+        for (const item of items) {
+          if (item.type === "application/pdf") {
+            evt.dataTransfer.dropEffect =
+              evt.dataTransfer.effectAllowed === "copy" ? "copy" : "move";
+            evt.preventDefault();
+            evt.stopPropagation();
+            return;
+          }
+        }
       });
       appConfig.mainContainer.addEventListener("drop", function (evt) {
-        evt.preventDefault();
-
         const { files } = evt.dataTransfer;
-        if (!files || files.length === 0) {
+        if (
+          !files ||
+          files.length === 0 ||
+          files[0].type !== "application/pdf"
+        ) {
           return;
         }
+        evt.preventDefault();
+        evt.stopPropagation();
         eventBus.dispatch("fileinputchange", {
           source: this,
           fileInput: evt.dataTransfer,