From ee62c611811d8041755da14520b03a45888fc567 Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Fri, 16 Jul 2010 18:33:48 +0000
Subject: [PATCH] Added support for raster image loading through image
 libraries

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1636 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/extensions/ext-imagelib.js     | 34 +++++++++++++++--
 editor/extensions/imagelib/index.html | 38 +++++++++++++++----
 editor/svg-editor.js                  | 54 +++++++++++++--------------
 editor/svgcanvas.js                   |  3 +-
 4 files changed, 91 insertions(+), 38 deletions(-)

diff --git a/editor/extensions/ext-imagelib.js b/editor/extensions/ext-imagelib.js
index d9f10a43..e2418687 100644
--- a/editor/extensions/ext-imagelib.js
+++ b/editor/extensions/ext-imagelib.js
@@ -20,11 +20,29 @@ svgEditor.addExtension("imagelib", function() {
 			description: 'Free library of 2300+ illustrations'
 		}
 	];
-
+	
+	var xlinkns = "http://www.w3.org/1999/xlink";
 
 	function closeBrowser() {
 		$('#imgbrowse_holder').hide();
 	}
+	
+	function importImage(url) {
+		var newImage = svgCanvas.addSvgElementFromJson({
+			"element": "image",
+			"attr": {
+				"x": 0,
+				"y": 0,
+				"width": 0,
+				"height": 0,
+				"id": svgCanvas.getNextId(),
+				"style": "pointer-events:inherit"
+			}
+		});
+		svgCanvas.clearSelection();
+		svgCanvas.addToSelection([newImage]);
+		svgCanvas.setImageURL(url);
+	}
 
 	 window.addEventListener("message", function(evt) {
 		// Receive postMessage data
@@ -42,15 +60,25 @@ svgEditor.addExtension("imagelib", function() {
 				svgCanvas.importSvgString(response);
 				break;
 			case 'd':
-				if(response.indexOf('data:') === 0) {
+				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));
 					break;
+				} else if(response.indexOf('data:image/') === 0) {
+					
+					importImage(response);
+					break;
 				}
 				// Else fall through
 			default:
-				$.alert('Unexpected data was returned', closeBrowser);
+				// TODO: See if there's a way to base64 encode the binary data stream
+// 				var str = 'data:;base64,' + svgCanvas.Utils.encode64(response, true);
+			
+				// Assume it's raw image data
+// 				importImage(str);
+			
+				$.alert('Unexpected data was returned: ' + response, closeBrowser);
 				return;
 		}
 		
diff --git a/editor/extensions/imagelib/index.html b/editor/extensions/imagelib/index.html
index 495888d3..bc102c47 100644
--- a/editor/extensions/imagelib/index.html
+++ b/editor/extensions/imagelib/index.html
@@ -6,20 +6,44 @@
 
 <h1>Select an image:</h1>
 <a href="smiley.svg">smiley.svg</a>
-
+<br>
+<a href="../../images/logo.png">logo.png</a>
 </body>
 
 <script>
 
 $('a').click(function() {
-
-	// Do ajax request for image's href value
-	$.get(this.href, function(data) {
 	
-		// This is where the magic happens!
-		window.top.postMessage(data, "*");
+	// Convert Non-SVG images to data URL first 
+	// (this could also have been done server-side by the library)
+	if(this.href.indexOf('.svg') === -1) {
+		var img = new Image();
+		img.onload = function() {
+			var canvas = document.createElement("canvas");
+			canvas.width = this.width;
+			canvas.height = this.height;
+			// load the raster image into the canvas
+			canvas.getContext("2d").drawImage(this,0,0);
+			// retrieve the data: URL
+			try {
+				var dataurl = canvas.toDataURL();
+			} catch(err) {
+				// This fails in Firefox with file:// URLs :(
+				alert("Data URL conversion failed: " + err);
+				var dataurl = "";
+			}
+			window.top.postMessage(dataurl, "*");
+		}
+		img.src = this.href;
+	} else {
+		// Do ajax request for image's href value
+		$.get(this.href, function(data) {
 		
-	}, 'html'); // 'html' is necessary to keep returned data as a string
+			// This is where the magic happens!
+			window.top.postMessage(data, "*");
+			
+		}, 'html'); // 'html' is necessary to keep returned data as a string
+	}
 	return false;
 });
 
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index eee37c29..d684cbaf 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -1233,6 +1233,33 @@
 				updateToolButtonState();
 			};
 		
+			var setImageURL = Editor.setImageURL = function(url) {
+				if(!url) url = default_img_url;
+				
+				svgCanvas.setImageURL(url);
+				$('#image_url').val(url);
+				
+				if(url.indexOf('data:') === 0) {
+					// data URI found
+					$('#image_url').hide();
+					$('#change_image_url').show();
+				} else {
+					// regular URL
+					
+					svgCanvas.embedImage(url, function(datauri) {
+						if(!datauri) {
+							// Couldn't embed, so show warning
+							$('#url_notice').show();
+						} else {
+							$('#url_notice').hide();
+						}
+						default_img_url = url;
+					});
+					$('#image_url').show();
+					$('#change_image_url').hide();
+				}
+			}
+		
 			// updates the context panel tools based on the selected element
 			var updateContextPanel = function() {
 				var elem = selectedElement;
@@ -2702,33 +2729,6 @@
 				});
 			}
 		
-			var setImageURL = Editor.setImageURL = function(url) {
-				if(!url) url = default_img_url;
-				
-				svgCanvas.setImageURL(url);
-				$('#image_url').val(url);
-				
-				if(url.indexOf('data:') === 0) {
-					// data URI found
-					$('#image_url').hide();
-					$('#change_image_url').show();
-				} else {
-					// regular URL
-					
-					svgCanvas.embedImage(url, function(datauri) {
-						if(!datauri) {
-							// Couldn't embed, so show warning
-							$('#url_notice').show();
-						} else {
-							$('#url_notice').hide();
-						}
-						default_img_url = url;
-					});
-					$('#image_url').show();
-					$('#change_image_url').hide();
-				}
-			}
-		
 			// added these event handlers for all the push buttons so they
 			// behave more like buttons being pressed-in and not images
 			(function() {
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index 95e86777..1f5a6a78 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -8144,6 +8144,7 @@ this.importSvgString = function(xmlString, toElements) {
 	return true;
 };
 
+
 // Layer API Functions
 
 // Group: Layers
@@ -9478,7 +9479,7 @@ this.setImageURL = function(val) {
 			
 			batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
 			addCommandToHistory(batchCmd);
-			call("changed", elem);
+			call("changed", [elem]);
 		}).attr('src',val);
 	} else {
 		addCommandToHistory(batchCmd);