From f92102dd994480093505fb8577bdc9822a6de15f Mon Sep 17 00:00:00 2001 From: Guilherme <34373290+GuilhermePSDG@users.noreply.github.com> Date: Wed, 2 Aug 2023 00:26:20 -0300 Subject: [PATCH] Fix image paste --- src/js/Import.js | 48 +++++++++++++++++++++++++++++----------------- src/js/Keyboard.js | 2 +- src/js/paste.js | 23 +++++++++++----------- 3 files changed, 43 insertions(+), 30 deletions(-) diff --git a/src/js/Import.js b/src/js/Import.js index c544e5e6..ca1da6e8 100644 --- a/src/js/Import.js +++ b/src/js/Import.js @@ -1,4 +1,4 @@ -MD.Import = function(){ +MD.Import = function () { const workarea = document.getElementById("workarea"); const $importInput = $('#tool_import input'); const $openInput = $('#tool_open input'); @@ -6,7 +6,8 @@ MD.Import = function(){ $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,16 +18,24 @@ 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); } @@ -34,10 +43,10 @@ MD.Import = function(){ //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,6 +62,9 @@ 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; @@ -60,7 +72,7 @@ MD.Import = function(){ 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; } \ No newline at end of file diff --git a/src/js/Keyboard.js b/src/js/Keyboard.js index d1075d2b..7ef15fbb 100644 --- a/src/js/Keyboard.js +++ b/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()}, diff --git a/src/js/paste.js b/src/js/paste.js index 38f748dd..4527e8d1 100644 --- a/src/js/paste.js +++ b/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(); } + } \ No newline at end of file