Merge pull request #670 from SVG-Edit/fix-issue-#669

Fix issue #669

package.json

@@ -69,12 +69,12 @@
   ],
   "dependencies": {
     "@babel/polyfill": "7.12.1",
-    "browser-fs-access": "0.21.1",
+    "browser-fs-access": "0.23.0",
     "canvg": "3.0.9",
-    "core-js": "3.19.1",
+    "core-js": "3.19.2",
     "elix": "15.0.1",
     "html2canvas": "1.3.3",
-    "i18next": "21.5.3",
+    "i18next": "21.5.4",
     "jspdf": "2.4.0",
     "pathseg": "1.2.1",
     "regenerator-runtime": "0.13.9",
@@ -86,7 +86,7 @@
     "@babel/preset-env": "7.16.4",
     "@babel/register": "7.16.0",
     "@babel/runtime-corejs3": "7.16.3",
-    "@cypress/code-coverage": "3.9.11",
+    "@cypress/code-coverage": "3.9.12",
     "@cypress/fiddle": "1.19.2",
     "@fintechstudios/eslint-plugin-chai-as-promised": "3.1.0",
     "@rollup/plugin-babel": "5.3.0",
@@ -100,7 +100,7 @@
     "@web/dev-server-rollup": "0.3.13",
     "babel-plugin-transform-object-rest-spread": "7.0.0-beta.3",
     "copyfiles": "2.4.1",
-    "core-js-bundle": "3.19.1",
+    "core-js-bundle": "3.19.2",
     "cp-cli": "2.0.0",
     "cypress": "9.1.0",
     "cypress-multi-reporters": "1.5.0",
@@ -135,7 +135,7 @@
     "remark-cli": "10.0.1",
     "remark-lint-ordered-list-marker-value": "3.1.0",
     "rimraf": "3.0.2",
-    "rollup": "2.60.1",
+    "rollup": "2.60.2",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-filesize": "9.1.1",
     "rollup-plugin-node-polyfills": "0.2.1",

src/editor/EditorStartup.js

@@ -580,96 +580,10 @@ class EditorStartup {
     // if browser has HTML5 File API support, then we will show the open menu item
     // and provide a file input to click. When that change event fires, it will
     // get the text contents of the file and send it to the canvas
-    if (window.FileReader) {
-    /**
-    * @param {Event} e
-    * @returns {void}
-    */
-      const editorObj = this;
-      const importImage = function (e) {
-        $id('se-prompt-dialog').title = editorObj.i18next.t('notification.loadingImage');
-        e.stopPropagation();
-        e.preventDefault();
-        const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
-        if (!file) {
-          $id('se-prompt-dialog').setAttribute('close', true);
-          return;
-        }
-
-        if (!file.type.includes('image')) {
-          return;
-        }
-        // Detected an image
-        // svg handling
-        let reader;
-        if (file.type.includes('svg')) {
-          reader = new FileReader();
-          reader.onloadend = function (ev) {
-            const newElement = editorObj.svgCanvas.importSvgString(ev.target.result, true);
-            editorObj.svgCanvas.ungroupSelectedElement();
-            editorObj.svgCanvas.ungroupSelectedElement();
-            editorObj.svgCanvas.groupSelectedElements();
-            editorObj.svgCanvas.alignSelectedElements('m', 'page');
-            editorObj.svgCanvas.alignSelectedElements('c', 'page');
-            // highlight imported element, otherwise we get strange empty selectbox
-            editorObj.svgCanvas.selectOnly([ newElement ]);
-            $id('se-prompt-dialog').setAttribute('close', true);
-          };
-          reader.readAsText(file);
-        } else {
-        // bitmap handling
-          reader = new FileReader();
-          reader.onloadend = function ({ target: { result } }) {
-          /**
-          * Insert the new image until we know its dimensions.
-          * @param {Float} imageWidth
-          * @param {Float} imageHeight
-          * @returns {void}
-          */
-            const insertNewImage = function (imageWidth, imageHeight) {
-              const newImage = editorObj.svgCanvas.addSVGElementFromJson({
-                element: 'image',
-                attr: {
-                  x: 0,
-                  y: 0,
-                  width: imageWidth,
-                  height: imageHeight,
-                  id: editorObj.svgCanvas.getNextId(),
-                  style: 'pointer-events:inherit'
-                }
-              });
-              editorObj.svgCanvas.setHref(newImage, result);
-              editorObj.svgCanvas.selectOnly([ newImage ]);
-              editorObj.svgCanvas.alignSelectedElements('m', 'page');
-              editorObj.svgCanvas.alignSelectedElements('c', 'page');
-              editorObj.topPanel.updateContextPanel();
-              $id('se-prompt-dialog').setAttribute('close', true);
-            };
-            // create dummy img so we know the default dimensions
-            let imgWidth = 100;
-            let imgHeight = 100;
-            const img = new Image();
-            img.style.opacity = 0;
-            img.addEventListener('load', () => {
-              imgWidth = img.offsetWidth || img.naturalWidth || img.width;
-              imgHeight = img.offsetHeight || img.naturalHeight || img.height;
-              insertNewImage(imgWidth, imgHeight);
-            });
-            img.src = result;
-          };
-          reader.readAsDataURL(file);
-        }
-      };
 
     this.workarea.addEventListener('dragenter', this.onDragEnter);
     this.workarea.addEventListener('dragover', this.onDragOver);
     this.workarea.addEventListener('dragleave', this.onDragLeave);
-      this.workarea.addEventListener('drop', importImage);
-      const imgImport = document.createElement('input');
-      imgImport.type="file";
-      imgImport.addEventListener('change', importImage);
-      window.addEventListener('importImages', () => imgImport.click());
-    }
 
     this.updateCanvas(true);
     // Load extensions

src/editor/MainMenu.js

@@ -195,14 +195,6 @@ class MainMenu {
     }
   }
 
-  /**
-   *
-   * @returns {void}
-   */
-  clickImport() {
-    /* empty fn */
-  }
-
   /**
    *
    * @returns {void}
@@ -277,7 +269,6 @@ class MainMenu {
     const template = document.createElement("template");
     template.innerHTML = `
     <se-menu id="main_button" label="SVG-Edit" src="logo.svg" alt="logo">
-        <se-menu-item id="tool_import" label="tools.import_doc" src="importImg.svg"></se-menu-item>
         <se-menu-item id="tool_export" label="tools.export_img" src="export.svg"></se-menu-item>
         <se-menu-item id="tool_docprops" label="tools.docprops" shortcut="D" src="docprop.svg"></se-menu-item>
         <se-menu-item id="tool_editor_prefs" label="config.editor_prefs" src="editPref.svg"></se-menu-item>
@@ -289,10 +280,6 @@ class MainMenu {
     /**
      * Associate all button actions as well as non-button keyboard shortcuts.
      */
-    $id("tool_import").addEventListener("click", () => {
-      this.clickImport();
-      window.dispatchEvent(new CustomEvent("importImages"));
-    });
     $id("tool_export").addEventListener("click", function() {
       document
         .getElementById("se-export-dialog")

src/editor/dialogs/sePromptDialog.js

@@ -39,6 +39,8 @@ export class SePromptDialog extends HTMLElement {
     case 'close':
       if (this.dialog.opened) {
         this.dialog.close();
+      } else {
+        this.dialog.open();
       }
       break;
     default:
@@ -74,7 +76,12 @@ export class SePromptDialog extends HTMLElement {
    * @returns {void}
    */
   set close (value) {
-    this.setAttribute('close', value);
+    // boolean value => existence = true
+    if (value) {
+      this.setAttribute('close', 'true');
+    } else {
+      this.removeAttribute('close');
+    }
   }
 }
 

src/editor/extensions/ext-opensave/ext-opensave.js

@@ -40,7 +40,88 @@ export default {
     const { svgCanvas } = svgEditor;
     const { $id } = svgCanvas;
     await loadExtensionTranslation(svgEditor);
+    /**
+    * @param {Event} e
+    * @returns {void}
+    */
+    const importImage = (e) => {
+      $id('se-prompt-dialog').title = this.i18next.t('notification.loadingImage');
+      $id('se-prompt-dialog').setAttribute('close', false);
+      e.stopPropagation();
+      e.preventDefault();
+      const file = (e.type === 'drop') ? e.dataTransfer.files[0] : e.currentTarget.files[0];
+      if (!file) {
+        $id('se-prompt-dialog').setAttribute('close', true);
+        return;
+      }
 
+      if (!file.type.includes('image')) {
+        return;
+      }
+      // Detected an image
+      // svg handling
+      let reader;
+      if (file.type.includes('svg')) {
+        reader = new FileReader();
+        reader.onloadend =  (ev) => {
+          const newElement = this.svgCanvas.importSvgString(ev.target.result, true);
+          this.svgCanvas.alignSelectedElements('m', 'page');
+          this.svgCanvas.alignSelectedElements('c', 'page');
+          // highlight imported element, otherwise we get strange empty selectbox
+          this.svgCanvas.selectOnly([ newElement ]);
+          $id('se-prompt-dialog').setAttribute('close', true);
+        };
+        reader.readAsText(file);
+      } else {
+        // bitmap handling
+        reader = new FileReader();
+        reader.onloadend = function ({ target: { result } }) {
+          /**
+              * Insert the new image until we know its dimensions.
+              * @param {Float} imageWidth
+              * @param {Float} imageHeight
+              * @returns {void}
+              */
+          const insertNewImage = (imageWidth, imageHeight) => {
+            const newImage = this.svgCanvas.addSVGElementFromJson({
+              element: 'image',
+              attr: {
+                x: 0,
+                y: 0,
+                width: imageWidth,
+                height: imageHeight,
+                id: this.svgCanvas.getNextId(),
+                style: 'pointer-events:inherit'
+              }
+            });
+            this.svgCanvas.setHref(newImage, result);
+            this.svgCanvas.selectOnly([ newImage ]);
+            this.svgCanvas.alignSelectedElements('m', 'page');
+            this.svgCanvas.alignSelectedElements('c', 'page');
+            this.topPanel.updateContextPanel();
+            $id('se-prompt-dialog').setAttribute('close', true);
+          };
+          // create dummy img so we know the default dimensions
+          let imgWidth = 100;
+          let imgHeight = 100;
+          const img = new Image();
+          img.style.opacity = 0;
+          img.addEventListener('load', () => {
+            imgWidth = img.offsetWidth || img.naturalWidth || img.width;
+            imgHeight = img.offsetHeight || img.naturalHeight || img.height;
+            insertNewImage(imgWidth, imgHeight);
+          });
+          img.src = result;
+        };
+        reader.readAsDataURL(file);
+      }
+    };
+    // create an input with type file to open the filesystem dialog
+    const imgImport = document.createElement('input');
+    imgImport.type="file";
+    imgImport.addEventListener('change', importImage);
+    // dropping a svg file will import it in the svg as well
+    this.workarea.addEventListener('drop', importImage);
     /**
      * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
      * @returns {void}
@@ -166,11 +247,15 @@ export default {
         svgCanvas.insertChildAtIndex($id('main_button'), saveButtonTemplate, 2);
         const saveAsButtonTemplate = `<se-menu-item id="tool_save_as" label="opensave.save_as_doc" src="saveImg.svg"></se-menu-item>`;
         svgCanvas.insertChildAtIndex($id('main_button'), saveAsButtonTemplate, 3);
+        const importButtonTemplate = `<se-menu-item id="tool_import" label="tools.import_doc" src="importImg.svg"></se-menu-item>`;
+        svgCanvas.insertChildAtIndex($id('main_button'), importButtonTemplate, 4);
+
         // handler
         $id("tool_clear").addEventListener("click", clickClear.bind(this));
         $id("tool_open").addEventListener("click", clickOpen.bind(this));
         $id("tool_save").addEventListener("click", clickSave.bind(this, "save"));
         $id("tool_save_as").addEventListener("click", clickSave.bind(this, "saveas"));
+        $id("tool_import").addEventListener("click", () => imgImport.click());
       }
     };
   }