Fix image paste

src/js/Import.js

@@ -1,12 +1,13 @@
-MD.Import = function(){
+MD.Import = function () {
   const workarea = document.getElementById("workarea");
   const $importInput = $('#tool_import input');
   const $openInput = $('#tool_open input');
 
   $importInput.on("change", importImage);
   $openInput.on("change", openImage);
 
-  function importImage(e){
+
+  function importImage(e) {
     $('#menu_bar').removeClass('active')
     if (!window.FileReader) return;
     //e.stopPropagation();
@@ -17,27 +18,35 @@ MD.Import = function(){
     if (e.type === "drop") file = e.dataTransfer.files[0]
     else file = this.files[0];
     if (!file) return $.alert("File not found");
-    if (file.type.indexOf("image") === -1) return $.alert("File is not image"); 
+    if (file.type.indexOf("image") === -1) return $.alert("File is not image");
+
+    importFile(file);
+    //editor.saveCanvas();
+  }
 
+  function importFile(file, then) {
     //svg handing
-    if(file.type.indexOf("svg") != -1) {
+    if (file.type.indexOf("svg") != -1) {
       var reader = new FileReader();
-      reader.onloadend = function(e) {
+      reader.onloadend = function (e) {
         svgCanvas.importSvgString(e.target.result, true);
         //svgCanvas.ungroupSelectedElement();
         svgCanvas.alignSelectedElements("m", "page");
         svgCanvas.alignSelectedElements("c", "page");
+         if (typeof then === 'function') {
+            then();
+          }
       };
       reader.readAsText(file);
     }
 
     //image handling
     else {
       var reader = new FileReader();
-      reader.onloadend = function(e) {
+      reader.onloadend = function (e) {
         // lets insert the new image until we know its dimensions
-        insertNewImage = function(img_width, img_height){
-            var newImage = svgCanvas.addSvgElementFromJson({
+        insertNewImage = function (img_width, img_height) {
+          var newImage = svgCanvas.addSvgElementFromJson({
             "element": "image",
             "attr": {
               "x": 0,
@@ -53,14 +62,17 @@ MD.Import = function(){
           svgCanvas.alignSelectedElements("m", "page")
           svgCanvas.alignSelectedElements("c", "page")
           editor.panel.updateContextPanel();
+          if (typeof then === 'function') {
+            then();
+          }
         }
         // put a placeholder img so we know the default dimensions
         var img_width = 100;
         var img_height = 100;
         var img = new Image()
         img.src = e.target.result
         document.body.appendChild(img);
-        img.onload = function() {
+        img.onload = function () {
           img_width = img.offsetWidth
           img_height = img.offsetHeight
           insertNewImage(img_width, img_height);
@@ -69,31 +81,30 @@ MD.Import = function(){
       };
       reader.readAsDataURL(file)
     }
-
-    //editor.saveCanvas();
+
   }
 
   function loadSvgString(str, callback) {
     var success = svgCanvas.setSvgString(str) !== false;
     callback = callback || $.noop;
-    if(success) {
+    if (success) {
       callback(true);
       editor.saveCanvas();
       state.set("canvasTitle", svgCanvas.getDocumentTitle());
     } else {
-      $.alert("Error: Unable to load SVG data", function() {
+      $.alert("Error: Unable to load SVG data", function () {
         callback(false);
       });
     }
   }
 
-  function openImage(e){
+  function openImage(e) {
     $('#menu_bar').removeClass('active')
     const f = this;
-    if(f.files.length === 1) {
+    if (f.files.length === 1) {
       svgCanvas.clear();
       var reader = new FileReader();
-      reader.onloadend = function(e) {
+      reader.onloadend = function (e) {
         loadSvgString(e.target.result);
         editor.canvas.update(true);
       };
@@ -118,11 +129,11 @@ MD.Import = function(){
     e.preventDefault();
   }
 
-  function place(){
+  function place() {
     $importInput.trigger("click");
   }
 
-  function open(){
+  function open() {
     $openInput.trigger("click");
   }
 
@@ -134,5 +145,6 @@ MD.Import = function(){
   this.place = place;
   this.open = open;
   this.loadSvgString = loadSvgString;
+  this.importFile = importFile;
 
 }

src/js/Keyboard.js

@@ -20,7 +20,7 @@ MD.Keyboard = function(){
 "cmd_shift_z": { name: "Redo",              cb: ()=> editor.redo()},
     "cmd_c": { name: "Copy",                cb: ()=> editor.copySelected()},
     "cmd_x": { name: "Cut",                 cb: ()=> editor.cutSelected()},
-    "cmd_v": { name: "Paste",               cb: ()=> editor.pasteSelected()},
+    // "cmd_v": { name: "Paste",               cb: ()=> editor.pasteSelected()},
     "cmd_d": { name: "Duplicate",           cb: ()=> editor.duplicateSelected()},
     "cmd_u": { name: "View source",         cb: ()=> editor.source()},
     "cmd_a": { name: "Select All",          cb: ()=> svgCanvas.selectAllInCurrentLayer()},

src/js/paste.js

@@ -1,13 +1,14 @@
-// TODO as is paste is currently not working
-document.onpaste = function(event){
-  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
-  for (index in items) {
-    var item = items[index];
-    if (item.kind === 'file') {
-      var blob = item.getAsFile();
-      var reader = new FileReader();
-      reader.onload = function(event){}; // remove?
-      reader.readAsDataURL(blob);
-    }
+
+document.onpaste = function (event) {
+  var item = (event.clipboardData || event.originalEvent.clipboardData).items[0];
+  if (item && item.kind === 'file') {
+    editor.import.importFile(item.getAsFile(), () => {
+      if (editor.copySelected() !== false) {
+        navigator.clipboard.writeText("");
+      }
+    })
+  } else {
+    editor.pasteSelected();
   }
+
 }