diff --git a/editor/extensions/ext-imagelib.js b/editor/extensions/ext-imagelib.js index 49df1729..429e32b2 100644 --- a/editor/extensions/ext-imagelib.js +++ b/editor/extensions/ext-imagelib.js @@ -44,6 +44,9 @@ svgEditor.addExtension("imagelib", function() { svgCanvas.setImageURL(url); } + var mode = 's'; + var multi_arr = []; + window.addEventListener("message", function(evt) { // Receive postMessage data var response = evt.data; @@ -55,19 +58,22 @@ svgEditor.addExtension("imagelib", function() { var char1 = response.charAt(0); + var svg_str; + var img_str; + switch (char1) { case '<': - svgCanvas.importSvgString(response); + svg_str = true; break; case 'd': if(response.indexOf('data:image/svg+xml') === 0) { var pre = 'data:image/svg+xml;base64,'; var src = response.substring(pre.length); - svgCanvas.importSvgString(svgCanvas.Utils.decode64(src)); + response = svgCanvas.Utils.decode64(src); + svg_str = true; break; } else if(response.indexOf('data:image/') === 0) { - - importImage(response); + img_str = true; break; } // Else fall through @@ -82,10 +88,82 @@ svgEditor.addExtension("imagelib", function() { return; } - closeBrowser(); - + switch (mode) { + case 's': + // Import one + if(svg_str) { + svgCanvas.importSvgString(response); + } else if(img_str) { + importImage(response); + } + closeBrowser(); + break; + case 'm': + // Import multiple + multi_arr.push([(svg_str ? 'svg' : 'img'), response]); + if(svg_str) { + var xml = new DOMParser().parseFromString(response, 'text/xml').documentElement; + var title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')'; + preview.append('
'+title+'
'); + } else { + preview.append('
Raster image #' + response.length + '
'); + } + break; + case 'o': + // Open + if(!svg_str) break; + svgEditor.openPrep(function(ok) { + if(!ok) return; + svgCanvas.clear(); + svgCanvas.setSvgString(response); + // updateCanvas(); + }); + closeBrowser(); + break; + } }, true); + var preview; + + function toggleMulti(show) { + var submit; + + $('#lib_framewrap, #imglib_opts').css({right: (show ? 200 : 10)}); + if(!preview) { + preview = $('
').css({ + position: 'absolute', + top: 45, + right: 10, + width: 180, + bottom: 45, + background: '#fff', + overflow: 'auto' + }).insertAfter('#lib_framewrap'); + + submit = $('').appendTo('#imgbrowse').click(function() { + $.each(multi_arr, function(i) { + var type = this[0]; + var data = this[1]; + if(type == 'svg') { + svgCanvas.importSvgString(data); + svgCanvas.moveSelectedElements(i*20, i*20, false); + } else { + importImage(data); + } + }); + preview.empty(); + multi_arr = []; + $('#imgbrowse_holder').hide(); + }).css({ + position: 'absolute', + bottom: 10, + right: -10 + }); + + } + + preview.toggle(show); + } function showBrowser() { var browser = $('#imgbrowse'); @@ -97,9 +175,14 @@ svgEditor.addExtension("imagelib", function() { var all_libs = 'Select an image library'; var lib_opts = $('