Added support for opening images dragged between browser tabs

src/bitmappery.vue

@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2020-2022 - https://www.igorski.nl
+ * Igor Zinken 2020-2023 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -83,13 +83,14 @@ import Toolbox from "@/components/toolbox/toolbox.vue";
 import DialogWindow from "@/components/dialog-window/dialog-window.vue";
 import Notifications from "@/components/notifications/notifications.vue";
 import Loader from "@/components/loader/loader.vue";
+import ToolTypes from "@/definitions/tool-types";
 import DocumentFactory from "@/factories/document-factory";
 import { isMobile } from "@/utils/environment-util";
 import { loadImageFiles } from "@/services/file-loader-queue";
 import { renderState } from "@/services/render-service";
 import ImageToDocumentManager from "@/mixins/image-to-document-manager";
 import { readClipboardFiles, readDroppedFiles } from "@/utils/file-util";
-import ToolTypes from "@/definitions/tool-types";
+import { truncate } from "@/utils/string-util";
 import store from "./store";
 import messages from "./messages.json";
 import {
@@ -222,7 +223,7 @@ export default {
 
         // if File content is pasted or dragged into the application, parse and load image files within
 
-        const loadFiles = async ({ images, documents, thirdParty }) => {
+        const loadFiles = async ({ images, documents, thirdParty, url }) => {
             const LOADING_KEY = `drop_${Date.now()}`;
             this.setLoading( LOADING_KEY );
             try {
@@ -232,6 +233,17 @@ export default {
                     this.addNewDocument( document );
                 }
                 await this.loadThirdPartyDocuments( thirdParty );
+                if ( typeof url === "string" && url.length > 0 ) {
+                    try {
+                        const blob = await fetch( url ).then( r => r.blob() );
+                        loadImageFiles([ blob ], this.addLoadedFile.bind( this ));
+                    } catch {
+                        this.openDialog({
+                            type: "error",
+                            message: this.$t( "corsError", { file: truncate( decodeURIComponent( url ).split( "/" ).at( -1 ), 40 ) })
+                        });
+                    }
+                }
             } catch {
                 // aren't these caught internally ?
             }
@@ -255,13 +267,14 @@ export default {
     },
     methods: {
         ...mapMutations([
-            "setWindowSize",
+            "addNewDocument",
             "closeModal",
             "closeOpenedPanels",
+            "openDialog",
             "resetHistory",
             "setToolboxOpened",
             "setToolOptionValue",
-            "addNewDocument",
+            "setWindowSize",
             "setLoading",
             "unsetLoading",
         ]),

src/messages.json

@@ -9,6 +9,7 @@
         "selectionCopied": "Selection copied",
         "warningUnload": "You are about to close BitMappery. Confirmation means you have either saved your pending changes or are aware these will otherwise be lost.",
         "selectionInverted": "Selection inverted",
+        "corsError": "Could not open file '{file}' as the owner does not allow cross-origin sharing",
         "fonts": {
             "consentRequired": "Consent required",
             "consentExpl": "You are about to use text within a BitMappery document. BitMappery text is rendered using Google Fonts, which is a free to use online service providing a large range of type faces. \n\nBecause we can't have nice things, the EU requires sites to request explicit approval before serving Google Fonts to end users under GDPR (even though no cookies are placed by use of the service).\n\nIf you are not in the EU or of the understanding that usage of Google Fonts does not surrender any personal information to Google or evil ad networks, you can provide consent by clicking OK.\n\nYou can also choose to reject using Google Fonts and continue using BitMappery with fallback fonts (or not use text at all). When in doubt, consult the privacy policy."

src/utils/file-util.ts

@@ -29,6 +29,7 @@ type FileDictionary = {
     images: File[];
     documents: File[];
     thirdParty: File[];
+    url?: string;
 };
 
 /**
@@ -122,5 +123,6 @@ export const readDroppedFiles = ( dataTransfer: DataTransfer ): FileDictionary =
         images     : items.filter( isImageFile ),
         documents  : items.filter( isProjectFile ),
         thirdParty : items.filter( isThirdPartyDocument ),
+        url        : dataTransfer.getData( "URL" )
     };
 };