Merge branch 'bzr/golem' of /Users/distler/Sites/code/instiki

public/svg-edit/editor/extensions/ext-foreignobject.js

@@ -144,7 +144,7 @@ $(function() {
 			}, {
 				type: "input",
 				panel: "foreignObject_panel",
-				title: "Change the font-size of enclosed content",
+				title: "Change foreignObject's font size",
 				id: "foreign_font_size",
 				label: "font-size",
 				size: 2,

public/svg-edit/editor/extensions/ext-helloworld.js

@@ -0,0 +1,80 @@
+/*
+ * ext-helloworld.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Alexis Deveria
+ *
+ */
+ 
+/* 
+	This is a very basic SVG-Edit extension. It adds a "Hello World" button in
+	the left panel. Clicking on the button, and then the canvas will show the
+ 	user the point on the canvas that was clicked on.
+*/
+ 
+$(function() {
+	svgCanvas.addExtension("Hello World", function() {
+
+		return {
+			name: "Hello World",
+			// For more notes on how to make an icon file, see the source of
+			// the hellorworld-icon.xml
+			svgicons: "extensions/helloworld-icon.xml",
+			
+			// Multiple buttons can be added in this array
+			buttons: [{
+				// Must match the icon ID in helloworld-icon.xml
+				id: "hello_world", 
+				
+				// This indicates that the button will be added to the "mode"
+				// button panel on the left side
+				type: "mode", 
+				
+				// Tooltip text
+				title: "Say 'Hello World'", 
+				
+				// Events
+				events: {
+					'click': function() {
+						// The action taken when the button is clicked on.
+						// For "mode" buttons, any other button will 
+						// automatically be de-pressed.
+						svgCanvas.setMode("hello_world");
+					}
+				}
+			}],
+			// This is triggered when the main mouse button is pressed down 
+			// on the editor canvas (not the tool panels)
+			mouseDown: function() {
+				// Check the mode on mousedown
+				if(svgCanvas.getMode() == "hello_world") {
+				
+					// The returned object must include "started" with 
+					// a value of true in order for mouseUp to be triggered
+					return {started: true};
+				}
+			},
+			
+			// This is triggered from anywhere, but "started" must have been set
+			// to true (see above). Note that "opts" is an object with event info
+			mouseUp: function(opts) {
+				// Check the mode on mouseup
+				if(svgCanvas.getMode() == "hello_world") {
+					var zoom = svgCanvas.getZoom();
+					
+					// Get the actual coordinate by dividing by the zoom value
+					var x = opts.mouse_x / zoom;
+					var y = opts.mouse_y / zoom;
+					
+					var text = "Hello World!\n\nYou clicked here: " 
+						+ x + ", " + y;
+						
+					// Show the text using the custom alert function
+					$.alert(text);
+				}
+			}
+		};
+	});
+});
+

public/svg-edit/editor/extensions/ext-itex.js

@@ -283,7 +283,8 @@ $(function() {
 				while(i--) {
 					var elem = selElems[i];
 					if(elem && elem.tagName == "foreignObject") {
-						if(opts.selectedElement && !opts.multiselected) {
+						if(opts.selectedElement && !opts.multiselected &&
+							  elem.firstElementChild.namespaceURI == mathns ) {
 							$('#itex_font_size').val(elem.getAttribute("font-size"));
 							$('#itex_width').val(elem.getAttribute("width"));
 							$('#itex_height').val(elem.getAttribute("height"));

public/svg-edit/editor/extensions/helloworld-icon.xml

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+<!-- 
+	Sample icons file. This file looks like an SVG file with groups as its
+	children. Each group element has an ID that must match the ID of the button given
+	in the extension. The SVG inside the group makes up the actual icon, and
+	needs use a viewBox instead of width/height for it to scale	properly.
+	
+	Multiple icons can be included, each within their own group. A final element
+	with ID "svg_eof" must be included too.
+-->
+	<g id="hello_world">
+		<svg viewBox="0 0 102 102" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+		 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+		 <g>
+		  <title>Layer 1</title>
+		  <rect ry="30" rx="30" x="2.5" y="2.5" width="97" height="97" id="svg_3" fill="#008000" stroke="#000000" stroke-width="5"/>
+		  <text x="52.668" y="42.5" id="svg_1" fill="#ffffff" stroke="#000000" stroke-width="0" font-size="24" font-family="Monospace" text-anchor="middle" xml:space="preserve">Hello</text>
+		  <text x="52.668" y="71.5" fill="#ffffff" stroke="#000000" stroke-width="0" font-size="24" font-family="Monospace" text-anchor="middle" xml:space="preserve" id="svg_2">World!</text>
+		 </g>
+		</svg>
+	</g>
+	<g id="svg_eof"/>
+</svg>

public/svg-edit/editor/images/svg_edit_icons.svg

@@ -198,6 +198,26 @@
  </svg>
 </g>
 
+<g id="add_subpath">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 124" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <linearGradient id="svg_4" x1="0.33594" y1="0.28125" x2="1" y2="1">
+   <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
+   <stop offset="1" stop-color="#33a533" stop-opacity="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <path d="m6,103l55,-87c85,33.64 -26,37.12 55,87l-110,0z" id="svg_1" fill="url(#svg_4)" stroke="#000000" stroke-width="4" stroke-dasharray="null"/>
+  <g id="svg_7">
+   <circle stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff" id="svg_6" r="22.63281" cy="88.5" cx="45.5"/>
+   <line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_2" y2="104.03768" x2="45.5" y1="72.96232" x1="45.5"/>
+   <line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_3" y2="88.5" x2="61.03768" y1="88.5" x1="29.96232"/>
+  </g>
+ </g>
+ </svg>
+</g>
+
+
 <g id="image">
 <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <defs>

public/svg-edit/editor/svg-editor.html

@@ -21,7 +21,8 @@
 <script type="text/javascript" src="extensions/ext-closepath.js"></script>
 <script type="text/javascript" src="extensions/ext-arrows.js"></script>
 <script type="text/javascript" src="extensions/ext-connector.js"></script>
-<!--<script type="text/javascript" src="extensions/ext-foreignobject.js"></script>-->
+<!-- <script type="text/javascript" src="extensions/ext-helloworld.js"></script> -->
+<!-- <script type="text/javascript" src="extensions/ext-foreignobject.js"></script> -->
 <script type="text/javascript" src="extensions/ext-itex.js"></script>
 
 <!-- Release version of script tags: >
@@ -367,6 +368,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		</select>
 		<div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
 		<div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
+		<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
 	</div>
 	
 </div> <!-- tools_top -->

public/svg-edit/editor/svg-editor.js

@@ -794,6 +794,7 @@ function svg_edit_setup() {
 				$('#tool_reorient').toggleClass('disabled', angle == 0);
 			} else {
 				var point = path.getNodePoint();
+				$('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
 				$('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes);
 				if(point) {
 					var seg_type = $('#seg_type');
@@ -1415,6 +1416,20 @@ function svg_edit_setup() {
 		}
 	};
 	
+	var addSubPath = function() {
+		var button = $('#tool_add_subpath');
+		var sp = !button.hasClass('push_button_pressed');
+		if (sp) {
+			button.addClass('push_button_pressed').removeClass('tool_button');
+		} else {
+			button.removeClass('push_button_pressed').addClass('tool_button');
+		}
+		
+		path.addSubPath(sp);
+		
+	};
+
+	
 	var selectNext = function() {
 		svgCanvas.cycleElement(1);
 	};
@@ -2486,6 +2501,7 @@ function svg_edit_setup() {
 			{sel:'#tool_node_link', fn: linkControlPoints, evt: 'click'},
 			{sel:'#tool_node_clone', fn: clonePathNode, evt: 'click'},
 			{sel:'#tool_node_delete', fn: deletePathNode, evt: 'click'},
+			{sel:'#tool_add_subpath', fn: addSubPath, evt: 'click'},
 			{sel:'#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'shift+up'},
 			{sel:'#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'shift+down'},
 			{sel:'#tool_topath', fn: convertToPath, evt: 'click'},
@@ -2790,7 +2806,7 @@ function svg_edit_setup() {
 		updateCanvas(true);
 	});
 	
-//	var revnums = "svg-editor.js ($Rev: 1433 $) ";
+//	var revnums = "svg-editor.js ($Rev: 1443 $) ";
 //	revnums += svgCanvas.getVersion();
 //	$('#copyright')[0].setAttribute("title", revnums);
 	return svgCanvas;
@@ -2885,6 +2901,7 @@ function svg_edit_setup() {
 			
 			'#tool_clone,#tool_clone_multi,#tool_node_clone':'clone',
 			'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete',
+			'#tool_add_subpath':'add_subpath',
 			'#tool_move_top':'move_top',
 			'#tool_move_bottom':'move_bottom',
 			'#tool_topath':'to_path',

public/svg-edit/editor/svgcanvas.js

@@ -1190,7 +1190,7 @@ function BatchCommand(text) {
 				stroke: "#000000",
 				stroke_paint: null,
 				stroke_opacity: 1,
-				stroke_width: 2,
+				stroke_width: 5,
 				stroke_style: 'none',
 				opacity: 1
 			}
@@ -3740,6 +3740,7 @@ function BatchCommand(text) {
 
 	var pathActions = function() {
 		
+		var subpath = false;
 		var pathData = {};
 		var current_path;
 		var path;
@@ -4346,6 +4347,13 @@ function BatchCommand(text) {
 			
 			this.selectPt = function(pt, ctrl_num) {
 				p.clearSelection();
+				if(pt == null) {
+					p.eachSeg(function(i) {
+						if(this.prev) {
+							pt = i;
+						}
+					});
+				}
 				p.addPtsToSelection(pt);
 				if(ctrl_num) {
 					p.dragctrl = ctrl_num;
@@ -4805,7 +4813,8 @@ function BatchCommand(text) {
 							'x2': mouse_x,
 							'y2': mouse_y
 						});
-						addPointGrip(0,mouse_x,mouse_y);
+						var index = subpath ? path.segs.length : 0;
+						addPointGrip(index, mouse_x, mouse_y);
 					}
 					else {
 						// determine if we clicked on an existing point
@@ -4848,13 +4857,23 @@ function BatchCommand(text) {
 								keep = false;
 								return keep;
 							}
-							// removeAllPointGripsFromPath();
 							$(stretchy).remove();
 							
 							// this will signal to commit the path
 							element = newpath;
 							current_path_pts = [];
 							started = false;
+							
+							if(subpath) {
+								var new_d = newpath.getAttribute("d");
+								var orig_d = $(path.elem).attr("d");
+								$(path.elem).attr("d", orig_d + new_d);
+								$(newpath).remove();
+								path.init();
+								pathActions.toEditMode(path.elem);
+								path.selectPt();
+								return false;
+							}
 						}
 						// else, create a new point, append to pts array, update path element
 						else {
@@ -4879,7 +4898,9 @@ function BatchCommand(text) {
 								'x2': mouse_x,
 								'y2': mouse_y
 							});
-							addPointGrip((current_path_pts.length/2 - 1),mouse_x,mouse_y);
+							var index = (current_path_pts.length/2 - 1);
+							if(subpath) index += path.segs.length;
+							addPointGrip(index, mouse_x, mouse_y);
 						}
 						keep = true;
 					}
@@ -4930,6 +4951,7 @@ function BatchCommand(text) {
 				canvas.clearSelection();
 				path.show(true).update();
 				path.oldbbox = canvas.getBBox(path.elem);
+				subpath = false;
 			},
 			toSelectMode: function(elem) {
 				var selPath = (elem == path.elem);
@@ -4948,6 +4970,17 @@ function BatchCommand(text) {
 					canvas.addToSelection([elem], true);
 				}
 			},
+			addSubPath: function(on) {
+				if(on) {
+					// Internally we go into "path" mode, but in the UI it will
+					// still appear as if in "pathedit" mode.
+					current_mode = "path";
+					subpath = true;
+				} else {
+					pathActions.clear(true);
+					pathActions.toEditMode(path.elem);
+				}
+			},
 			select: function(target) {
 				if (current_path == target) {
 					pathActions.toEditMode(target);
@@ -7955,7 +7988,7 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1433 $)";
+		return "svgcanvas.js ($Rev: 1443 $)";
 	};
 	
 	this.setUiStrings = function(strs) {