fix issue #669

src/editor/EditorStartup.js

@@ -580,17 +580,17 @@ 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');
+    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] : this.files[0];
+      const file = (e.type === 'drop') ? e.dataTransfer.files[0] : e.currentTarget.files[0];
       if (!file) {
         $id('se-prompt-dialog').setAttribute('close', true);
         return;
@@ -604,15 +604,12 @@ class EditorStartup {
       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');
+        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
-            editorObj.svgCanvas.selectOnly([ newElement ]);
+          this.svgCanvas.selectOnly([ newElement ]);
           $id('se-prompt-dialog').setAttribute('close', true);
         };
         reader.readAsText(file);
@@ -626,23 +623,23 @@ class EditorStartup {
           * @param {Float} imageHeight
           * @returns {void}
           */
-            const insertNewImage = function (imageWidth, imageHeight) {
-              const newImage = editorObj.svgCanvas.addSVGElementFromJson({
+          const insertNewImage = (imageWidth, imageHeight) => {
+            const newImage = this.svgCanvas.addSVGElementFromJson({
               element: 'image',
               attr: {
                 x: 0,
                 y: 0,
                 width: imageWidth,
                 height: imageHeight,
-                  id: editorObj.svgCanvas.getNextId(),
+                id: this.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();
+            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
@@ -664,12 +661,16 @@ class EditorStartup {
     this.workarea.addEventListener('dragenter', this.onDragEnter);
     this.workarea.addEventListener('dragover', this.onDragOver);
     this.workarea.addEventListener('dragleave', this.onDragLeave);
-      this.workarea.addEventListener('drop', importImage);
+
+    // create an input with type file to open the filesystem dialog
     const imgImport = document.createElement('input');
     imgImport.type="file";
     imgImport.addEventListener('change', importImage);
+    // the importImages event will activate the input field
     window.addEventListener('importImages', () => imgImport.click());
-    }
+    // dropping a svg file will import it in the svg as well
+    this.workarea.addEventListener('drop', importImage);
+
 
     this.updateCanvas(true);
     // Load extensions

src/editor/MainMenu.js

@@ -195,14 +195,6 @@ class MainMenu {
     }
   }
 
-  /**
-   *
-   * @returns {void}
-   */
-  clickImport() {
-    /* empty fn */
-  }
-
   /**
    *
    * @returns {void}
@@ -290,7 +282,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() {

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');
+    }
   }
 }