improvements to the eyedropper

editor/extensions/ext-eyedropper.js

@@ -34,9 +34,8 @@ svgEditor.addExtension("eyedropper", function(S) {
 
 			var elem = null;
 			var tool = $('#tool_eyedropper');
-			// enable-eye-dropper if one element is selected
 			
-			if (!opts.multiselected && opts.elems[0] &&
+			if (opts.elems[0] &&
 				$.inArray(opts.elems[0].nodeName, ['svg', 'g', 'use']) == -1) 
 			{
 				elem = opts.elems[0];
@@ -52,6 +51,7 @@ svgEditor.addExtension("eyedropper", function(S) {
 		var getPaint = function(color, opac, type) {
 			// update the editor's fill paint
 			var opts = null;
+			console.log(color);
 			if (color.indexOf("url(#") === 0) {
 				var refElem = svgCanvas.getRefElem(color);
 				if(refElem) {
@@ -100,43 +100,44 @@ svgEditor.addExtension("eyedropper", function(S) {
 			elementChanged: getStyle,
 			mouseDown: function(opts) {
 				var mode = svgCanvas.getMode();
-				if (mode == "eyedropper") {
 				var e = opts.event;
-					var target = e.target;
+				var target = (e.target.id === "svgroot") ? document.getElementById('canvas_background') : e.target;
+				if (mode == "eyedropper" && target) {
 					currentStyle.fillPaint = target.getAttribute("fill") || "white";
   				currentStyle.fillOpacity = target.getAttribute("fill-opacity") || 1.0;
-  				currentStyle.strokePaint = target.getAttribute("stroke");
+  				currentStyle.strokePaint = target.getAttribute("stroke") || 'none';
   				currentStyle.strokeOpacity = target.getAttribute("stroke-opacity") || 1.0;
   				currentStyle.strokeWidth = target.getAttribute("stroke-width");
   				currentStyle.strokeDashArray = target.getAttribute("stroke-dasharray");
   				currentStyle.strokeLinecap = target.getAttribute("stroke-linecap");
   				currentStyle.strokeLinejoin = target.getAttribute("stroke-linejoin");
   				currentStyle.opacity = target.getAttribute("opacity") || 1.0;
-					if ($.inArray(target.nodeName, ['g', 'use']) == -1) {
+					if ($.inArray(opts.selectedElements.nodeName, ['g', 'use']) == -1) {
 						var changes = {};
-
 						var change = function(elem, attrname, newvalue) {
 							changes[attrname] = elem.getAttribute(attrname);
 							elem.setAttribute(attrname, newvalue);
 						};
-						
+						var batchCmd = new S.BatchCommand();
-						if (currentStyle.fillPaint) 		change(opts.selectedElements[0], "fill", currentStyle.fillPaint);
+						opts.selectedElements.forEach(function(element){
-						if (currentStyle.fillOpacity) 		change(opts.selectedElements[0], "fill-opacity", currentStyle.fillOpacity);
+						  if (currentStyle.fillPaint) 		  change(element, "fill", currentStyle.fillPaint);
-						if (currentStyle.strokePaint) 		change(opts.selectedElements[0], "stroke", currentStyle.strokePaint);
+  						if (currentStyle.fillOpacity) 		change(element, "fill-opacity", currentStyle.fillOpacity);
-						if (currentStyle.strokeOpacity) 	change(opts.selectedElements[0], "stroke-opacity", currentStyle.strokeOpacity);
+  						if (currentStyle.strokePaint) 		change(element, "stroke", currentStyle.strokePaint);
-						if (currentStyle.strokeWidth) 		change(opts.selectedElements[0], "stroke-width", currentStyle.strokeWidth);
+  						if (currentStyle.strokeOpacity) 	change(element, "stroke-opacity", currentStyle.strokeOpacity);
-						if (currentStyle.strokeDashArray) 	change(opts.selectedElements[0], "stroke-dasharray", currentStyle.strokeDashArray);
+  						if (currentStyle.strokeWidth) 		change(element, "stroke-width", currentStyle.strokeWidth);
-						if (currentStyle.opacity) 			change(opts.selectedElements[0], "opacity", currentStyle.opacity);
+  						if (currentStyle.strokeDashArray) change(element, "stroke-dasharray", currentStyle.strokeDashArray);
-						if (currentStyle.strokeLinecap) 	change(opts.selectedElements[0], "stroke-linecap", currentStyle.strokeLinecap);
+  						if (currentStyle.opacity) 			  change(element, "opacity", currentStyle.opacity);
-						if (currentStyle.strokeLinejoin) 	change(opts.selectedElements[0], "stroke-linejoin", currentStyle.strokeLinejoin);
+  						if (currentStyle.strokeLinecap) 	change(element, "stroke-linecap", currentStyle.strokeLinecap);
-						
+  						if (currentStyle.strokeLinejoin) 	change(element, "stroke-linejoin", currentStyle.strokeLinejoin);
+  						batchCmd.addSubCommand(new ChangeElementCommand(element, changes));
+  						console.log(changes);
+  						changes = {};
+						});
 						var fill = getPaint(currentStyle.fillPaint, currentStyle.fillOpacity*100, "fill")
 						var stroke = getPaint(currentStyle.strokePaint, currentStyle.strokeOpacity*100, "stroke")
-						
+						svgEditor.paintBox.fill.update(true)
-						svgCanvas.setPaint("fill", fill)
+						svgEditor.paintBox.stroke.update(true)
-						svgCanvas.setPaint("stroke", stroke)
+						addToHistory(batchCmd);
-						
-						addToHistory(new ChangeElementCommand(target, changes));
 					}
 				}
 			},

editor/extensions/ext-grid.js

@@ -20,7 +20,7 @@ svgEditor.addExtension("view_grid", function(s) {
 			svgroot = s.svgroot;
 
 	var showGrid = false;
-    var assignAttributes = svgCanvas.assignAttributes;
+    var assignAttributes = s.assignAttributes;
     
     var hcanvas = document.createElement('canvas');
     $(hcanvas).hide().appendTo('body');

editor/extensions/ext-shapes.js

@@ -103,7 +103,6 @@ svgEditor.addExtension("shapes", function() {
 	}
 	
 	function makeButtons(cat, shapes) {
-	  $('.tool_button, .tool_button_current').addClass("loaded")
 		var size = cur_lib.size || 300;
 		var fill = cur_lib.fill || false;
 		var off = size * .05;

editor/hover.js

@@ -0,0 +1,147 @@
+/**
+ * Package: svedit.select
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Alexis Deveria
+ * Copyright(c) 2010 Jeff Schiller
+ */
+
+// Dependencies:
+// 1) jQuery
+// 2) browser.js
+// 3) math.js
+// 4) svgutils.js
+
+var svgedit = svgedit || {};
+
+(function() {
+
+if (!svgedit.hover) {
+	svgedit.hover = {};
+}
+
+var svgFactory_;
+var config_;
+var hoverManager_; // A Singleton
+
+// Class: svgedit.select.Selector
+// Private class for DOM element selection boxes
+// 
+// Parameters:
+// id - integer to internally indentify the selector
+// elem - DOM element associated with this selector
+svgedit.hover.Hoverer = function(id, elem) {
+	// this is the selector's unique number
+	this.id = id;
+
+	// this holds a reference to the element for which this selector is being used
+	this.hoveredElement = elem;
+
+	// this is a flag used internally to track whether the selector is being used or not
+	this.locked = true;
+
+	// this holds a reference to the <g> element that holds all visual elements of the selector
+	this.hoverGroup = svgFactory_.createSVGElement({
+		'element': 'g',
+		'attr': {'id': ('hoverGroup' + this.id)}
+	});
+
+	// this holds a reference to the path rect
+	this.hoverElem = this.selectorGroup.appendChild(
+		svgFactory_.createSVGElement({
+			'element': 'path',
+			'attr': {
+				'id': ('hoverBox' + this.id),
+				'fill': 'none',
+				'stroke': '#4F80FF',
+				'stroke-width': '1',
+				'shape-rendering': 'crispEdges',
+				'style': 'pointer-events:none'
+			}
+		})
+	);
+
+
+	this.reset(this.hoveredElement);
+};
+
+
+// Function: svgedit.select.Selector.reset 
+// Used to reset the id and element that the selector is attached to
+//
+// Parameters: 
+// e - DOM element associated with this selector
+svgedit.hover.Hoverer.prototype.reset = function(e) {
+	this.locked = true;
+	this.hoveredElement = e;
+	this.resize();
+	this.hoverGroup.setAttribute('display', 'inline');
+};
+
+
+// Class: svgedit.select.SelectorManager
+svgedit.hover.HoverManager = function() {
+	// this will hold the <g> element that contains all hover elements
+	this.hoverParentGroup = null;
+	this.initGroup();
+};
+
+// Function: svgedit.select.SelectorManager.initGroup
+// Resets the parent selector group element
+svgedit.hover.HoverManager.prototype.initGroup = function() {
+	// remove old selector parent group if it existed
+	if (this.hoverParentGroup && this.hoverParentGroup.parentNode) {
+		this.hoverParentGroup.parentNode.removeChild(this.hoverParentGroup);
+	}
+
+	// create parent selector group and add it to svgroot
+	this.selectorParentGroup = svgFactory_.createSVGElement({
+		'element': 'g',
+		'attr': {'id': 'hoverParentGroup'}
+	});
+	
+
+	if($('#canvasBackground').length) return;
+
+	var rect = svgFactory_.createSVGElement({
+		'element': 'rect',
+		'attr': {
+			'width': '100%',
+			'height': '100%',
+			'x': 0,
+			'y': 0,
+			'stroke-width': 1,
+			'stroke': '#000',
+			'fill': '#FFF',
+			'shape-rendering': 'crispEdges',
+			'style': 'pointer-events:none'
+		}
+	});
+
+	// Both Firefox and WebKit are too slow with this filter region (especially at higher
+	// zoom levels) and Opera has at least one bug
+//	if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
+	canvasbg.appendChild(rect);
+	svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
+};
+
+
+
+svgedit.hover.init = function(config, svgFactory) {
+	config_ = config;
+	svgFactory_ = svgFactory;
+	selectorManager_ = new svgedit.hover.HoverManager();
+};
+
+/**
+ * Function: svgedit.select.getSelectorManager
+ *
+ * Returns:
+ * The SelectorManager instance.
+ */
+svgedit.hover.getHoverManager = function() {
+	return selectorManager_;
+};
+
+})();

editor/svg-editor.css

@@ -1977,3 +1977,8 @@ span.zoom_tool img {
 
 #svg_editor #group_title {display: none;}
 
+#base_unit_container {
+	display: none;
+	position: absolute;
+	z-index: 20;
+}

editor/svg-editor.html

@@ -39,6 +39,7 @@
   <script type="text/javascript" src="sanitize.js"></script>
   <script type="text/javascript" src="history.js"></script>
   <script type="text/javascript" src="select.js"></script>
+  <script type="text/javascript" src="hover.js"></script>
   <script type="text/javascript" src="draw.js"></script>
   <script type="text/javascript" src="path.js"></script>
   <script type="text/javascript" src="svgcanvas.js"></script>
@@ -48,6 +49,8 @@
   <script type="text/javascript" src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
   <script type="text/javascript" src="jgraduate/jpicker.min.js"></script>
   <script type="text/javascript" src="mousewheel.js"></script>
+  <script type="text/javascript" src="extensions/ext-eyedropper.js"></script>
+  <script type="text/javascript" src="extensions/ext-grid.js"></script>
 <!--{endif}-->
 
 <!-- you can load extensions here -->
@@ -87,7 +90,6 @@ $(function(){
 </div>
 
 <div id="workarea">
-<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
 <div id="svgcanvas" style="position:relative">
 
 </div>
@@ -182,6 +184,7 @@ $(function(){
   	<div class="menu_list" id="view_menu">
   	    <div class="menu_item push_button_pressed" id="tool_rulers">View Rulers</div>
   	    <div class="menu_item" id="tool_wireframe">View Wireframe</div>
+  	    <div class="menu_item" id="tool_snap">Snap to Grid</div>
   	    <div class="separator"></div>
     		<div class="menu_item" id="tool_source">Source... <span class="shortcut">⌘U</span></div>
     </div>
@@ -787,8 +790,17 @@ $(function(){
 				<label>
 				  <div class="subtitle"><strong>Units &amp; Rulers</strong></div>
 				  <span id="svginfo_rulers_onoff"><input type="checkbox" value="show_rulers" id="show_rulers" checked> Show rulers</span>  
+				</label>
 	
-					<span id="svginfo_unit">Base Unit:</span>
+		</fieldset>
+		<div>
+		  <button id="tool_prefs_cancel" class="cancel">Cancel</button>
+			<button id="tool_prefs_save">Save</button>
+		</div>
+	</div>
+</div>
+
+<div id="base_unit_container">
   <select id="base_unit">
   	<option value="px">Pixels</option>
   	<option value="cm">Centimeters</option>
@@ -799,14 +811,6 @@ $(function(){
   	<option value="em">Ems</option>
   	<option value="ex">Exs</option>
   </select>
-				</label>
-	
-		</fieldset>
-		<div>
-		  <button id="tool_prefs_cancel" class="cancel">Cancel</button>
-			<button id="tool_prefs_save">Save</button>
-		</div>
-	</div>
 </div>
 
 <div id="dialog_box">

editor/svg-editor.js

@@ -52,10 +52,10 @@
 				},
 				initOpacity: 1,
 				imgPath: 'images/',
-				langPath: 'locale/',
 				extPath: 'extensions/',
 				jGraduatePath: 'jgraduate/images/',
-				extensions: ['ext-markers.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-grid.js'],
+				//extensions: ['ext-markers.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-grid.js'],
+				extensions: [],
 				initTool: 'select',
 				wireframe: false,
 				colorPickerCSS: false,
@@ -281,15 +281,6 @@
 						}
 					});
 				});
-				
-				var good_langs = [];
-	
-				$('#lang_select option').each(function() {
-					good_langs.push(this.value);
-				});
-				
-	// 			var lang = ('lang' in curPrefs) ? curPrefs.lang : null;
-				Editor.putLocale(null, good_langs);
 			}
 			
 			// Load extensions
@@ -443,7 +434,7 @@
 					$('.toolbar_button button > svg, .toolbar_button button > img').each(function() {
 						$(this).parent().prepend(this);
 					});
-					
+					$('.tool_button, .tool_button_current').addClass("loaded")
 					var tleft = $('#tools_left');
 					if (tleft.length != 0) {
 						var min_height = tleft.offset().top + tleft.outerHeight();
@@ -473,8 +464,26 @@
 				}
 			});
 			
+			$('#rulers').on("dblclick", function(e){
+			  $("#base_unit_container").css({
+			    top: e.pageY-10,
+			    left: e.pageX-50,
+			    display: 'block'
+		    })
+			})
+			$("#base_unit_container")
+  			.on("mouseleave mouseenter", function(e){
+  			  t = setTimeout(function(){$("#base_unit_container").fadeOut(500)}, 200)
+  			  if(event.type == "mouseover") clearTimeout(t)  
+  			})
+  		$("#base_unit")
+    		.on("change", function(e) {
+    			savePreferences();
+    		});
+
 			Editor.canvas = svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"), curConfig);
 			Editor.show_save_warning = false;
+			Editor.paintBox = {fill: null, stroke:null, canvas:null};
 			var palette = ["#000000", "#3f3f3f", "#7f7f7f", "#bfbfbf", "#ffffff",
 			           "#ff0000", "#ff7f00", "#ffff00", "#7fff00",
 			           "#00ff00", "#00ff7f", "#00ffff", "#007fff",
@@ -500,8 +509,7 @@
 				zoomInIcon = 'crosshair',
 				zoomOutIcon = 'crosshair',
 				ui_context = 'toolbars',
-				orig_source = '',
+				orig_source = '';
-				paintBox = {fill: null, stroke:null};
 				
 
 			// This puts the correct shortcuts in the menus
@@ -566,7 +574,6 @@
 				if(curr.length && curr[0].id !== 'tool_select') {
 					curr.removeClass('tool_button_current').addClass('tool_button');
 					$('#tool_select').addClass('tool_button_current').removeClass('tool_button');
-					$('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}');
 				}
 				svgCanvas.setMode('select');
 			};
@@ -772,8 +779,8 @@
 				
 				// In the event a gradient was flipped:
 				if(selectedElement && mode === "select") {
-					paintBox.fill.update();
+					Editor.paintBox.fill.update();
-					paintBox.stroke.update();
+					Editor.paintBox.stroke.update();
 				}
 				
 				svgCanvas.runExtensions("elementChanged", {
@@ -853,8 +860,8 @@
 			
 			// Makes sure the current selected paint is available to work with
 			var prepPaints = function() {
-				paintBox.fill.prep();
+				Editor.paintBox.fill.prep();
-				paintBox.stroke.prep();
+				Editor.paintBox.stroke.prep();
 			}
 			
 			var flyout_funcs = {};
@@ -1450,14 +1457,14 @@
 						
 						$('#stroke_width').val(gWidth === null ? "" : gWidth);
 						
-						paintBox.fill.update(true);
+						Editor.paintBox.fill.update(true);
-						paintBox.stroke.update(true);
+						Editor.paintBox.stroke.update(true);
 
 						
 						break;
 					default:
-						paintBox.fill.update(true);
+						Editor.paintBox.fill.update(true);
-						paintBox.stroke.update(true);
+						Editor.paintBox.stroke.update(true);
 						
 						$('#stroke_width').val(selectedElement.getAttribute("stroke-width") || 1);
 						$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
@@ -1977,7 +1984,7 @@
 					paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
 				}
 				
-				paintBox[picker].setPaint(paint);
+				Editor.paintBox[picker].setPaint(paint);
 				
 				if (isStroke) {
 					svgCanvas.setColor('stroke', color);
@@ -2728,8 +2735,8 @@
 				if (isNaN(fill_opacity)) {fill_opacity = 100;}
 				var stroke = getPaint(stroke_color, stroke_opacity, "stroke");
 				var fill = getPaint(fill_color, fill_opacity, "fill");
-				paintBox.fill.setPaint(stroke, true);
+				Editor.paintBox.fill.setPaint(stroke, true);
-				paintBox.stroke.setPaint(fill, true);
+				Editor.paintBox.stroke.setPaint(fill, true);
 				
 			};
 			
@@ -2768,6 +2775,16 @@
 				updateWireFrame();
 			}
 			
+			var clickSnapGrid = function() {
+				var sg = !$('#tool_snap').hasClass('push_button_pressed');
+				if (sg) 
+					$('#tool_snap').addClass('push_button_pressed');
+				else
+					$('#tool_snap').removeClass('push_button_pressed');		
+				curConfig.gridSnapping = sg;
+				savePreferences();
+			}
+			
 			var clickCanvasColor = function(){
 				  svgCanvas.clearSelection();
 				  $('#tool_canvas').trigger("click")
@@ -2946,17 +2963,12 @@
 				var color = $('#bg_blocks div.cur_background').css('background-color') || '#FFF';
 				setBackground(color, $('#canvas_bg_url').val());
 				
-				// set language
-				var lang = $('#lang_select').val();
-				if(lang != curPrefs.lang) {
-					Editor.putLocale(lang);
-				}
 				
 				// set icon size
 				setIconSize($('#iconsize').val());
 				
 				// set grid setting
-				curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;
+				curConfig.gridSnapping = $('#tool_snap').hasClass('push_button_pressed');
 				curConfig.snappingStep = $('#grid_snapping_step').val();
 				curConfig.showRulers = $('#show_rulers')[0].checked;
 				
@@ -3426,7 +3438,7 @@
 				var is_background = elem[0].id == "canvas_color"
 				if (is_background) picker = 'canvas'
 // 				var opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));
-				var paint = paintBox[picker].paint;
+				var paint = Editor.paintBox[picker].paint;
 				
 				var title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity');
 				var was_none = false;
@@ -3445,7 +3457,7 @@
 					function(p) {
 						paint = new $.jGraduate.Paint(p);
 						
-						paintBox[picker].setPaint(paint);
+						Editor.paintBox[picker].setPaint(paint);
 						svgCanvas.setPaint(picker, paint);
 						
 						$('#color_picker').hide();
@@ -3649,19 +3661,19 @@
 				}
 			};
 			
-			paintBox.fill = new PaintBox('#fill_color', 'fill');
+			Editor.paintBox.fill = new PaintBox('#fill_color', 'fill');
-			paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
+			Editor.paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
-			paintBox.canvas = new PaintBox('#canvas_color', 'canvas');
+			Editor.paintBox.canvas = new PaintBox('#canvas_color', 'canvas');
 
 			$('#stroke_width').val(curConfig.initStroke.width);
 			$('#group_opacity').val(curConfig.initOpacity * 100);
 			
 			// Use this SVG elem to test vectorEffect support
-			var test_el = paintBox.fill.rect.cloneNode(false);
+			var test_el = Editor.paintBox.fill.rect.cloneNode(false);
 			test_el.setAttribute('style','vector-effect:non-scaling-stroke');
 			var supportsNonSS = (test_el.style.vectorEffect === 'non-scaling-stroke');
 			test_el.removeAttribute('style');
-			var svgdocbox = paintBox.fill.rect.ownerDocument;
+			var svgdocbox = Editor.paintBox.fill.rect.ownerDocument;
 			// Use this to test support for blur element. Seems to work to test support in Webkit
 			var blur_test = svgdocbox.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
 			if(typeof blur_test.stdDeviationX === "undefined") {
@@ -4100,6 +4112,7 @@
 					{sel:'#tool_import', fn: clickImport, evt: 'mouseup'},
 					{sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: [modKey + 'U', true]},
 					{sel:'#tool_wireframe', fn: clickWireframe, evt: 'click'},
+					{sel:'#tool_snap', fn: clickSnapGrid, evt: 'click'},
 					{sel:'#tool_rulers', fn: clickRulers, evt: 'click'},
 					{sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel,#tool_prefs_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true},
 					{sel:'#tool_source_save', fn: saveSourceEditor, evt: 'click'},

editor/svgcanvas.js

@@ -408,6 +408,8 @@ svgedit.select.init(curConfig, {
 });
 // this object manages selectors for us
 var selectorManager = this.selectorManager = svgedit.select.getSelectorManager();
+// this object manages selectors for us
+var hoverManager = this.hoverManager = svgedit.select.getSelectorManager();
 
 // Import from path.js
 svgedit.path.init({
@@ -573,7 +575,8 @@ this.addExtension = function(name, ext_func) {
 			svgroot: svgroot,
 			svgcontent: svgcontent,
 			nonce: getCurrentDrawing().getNonce(),
-			selectorManager: selectorManager
+			selectorManager: selectorManager,
+			hoverManager: hoverManager
 		}));
 		} else {
 			var ext = ext_func;
@@ -2370,7 +2373,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 	//   but the action is not recorded until mousing up
 	// - when we are in select mode, select the element, remember the position
 	//   and do nothing else
-	var mouseDown = function(evt)
+	var mouseDown = mosueOver = function(evt)
 	{
 		if(canvas.spaceKey || evt.button === 1) return;
 		
@@ -3159,6 +3162,18 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 
 	}; // mouseMove()
 	
+	
+	// mouseover mode
+	var mouseOver = function(evt) {
+	  if (evt.button) return;
+	  elem = evt.target;
+	  var clone = elem.cloneNode(true);
+	  clone.setAttribute("fill", "none");
+	  clone.setAttribute("stroke", "#09f")
+    clone.setAttribute("stroke-width", "1")
+    elem.selectorParentGroup.appendChild(clone)
+	}
+	
 	// - in create mode, the element's opacity is set properly, we create an InsertElementCommand
 	//   and store it on the Undo stack
 	// - in move/resize mode, the element's attributes which were affected by the move/resize are

editor/svgedit.compiled.css

@@ -411,6 +411,7 @@ span.zoom_tool img{vertical-align:top}
 .clearfix:after{clear:both}
 .clearfix{*zoom:1}
 #svg_editor #group_title{display:none}
+#base_unit_container{display:none;position:absolute;z-index:20}
 INPUT.spin-button{padding:2px 20px 2px 2px;background-repeat:no-repeat;background-position:100% 0;background-image:url('spinbtn_updn.png');background-color:white}
 INPUT.spin-button.up{cursor:pointer;background-position:100% -18px}
 INPUT.spin-button.down{cursor:pointer;background-position:100% -36px}

editor/temp.css

@@ -2623,7 +2623,11 @@ span.zoom_tool img {
 
 #svg_editor #group_title {display: none;}
 
-/*
+#base_unit_container {
+	display: none;
+	position: absolute;
+	z-index: 20;
+}/*
 	Styles to make ordinary <INPUT type="text"/> look like a spinbutton/spinbox control.
 	Use with JQuerySpinBtn.js to provide the spin functionality by reacting to mouse etc.
 	(Requires a reference to the JQuery library found at http://jquery.com/src/latest/)

method-draw/extensions/ext-eyedropper.js

@@ -34,9 +34,8 @@ svgEditor.addExtension("eyedropper", function(S) {
 
 			var elem = null;
 			var tool = $('#tool_eyedropper');
-			// enable-eye-dropper if one element is selected
 			
-			if (!opts.multiselected && opts.elems[0] &&
+			if (opts.elems[0] &&
 				$.inArray(opts.elems[0].nodeName, ['svg', 'g', 'use']) == -1) 
 			{
 				elem = opts.elems[0];
@@ -52,6 +51,7 @@ svgEditor.addExtension("eyedropper", function(S) {
 		var getPaint = function(color, opac, type) {
 			// update the editor's fill paint
 			var opts = null;
+			console.log(color);
 			if (color.indexOf("url(#") === 0) {
 				var refElem = svgCanvas.getRefElem(color);
 				if(refElem) {
@@ -100,43 +100,44 @@ svgEditor.addExtension("eyedropper", function(S) {
 			elementChanged: getStyle,
 			mouseDown: function(opts) {
 				var mode = svgCanvas.getMode();
-				if (mode == "eyedropper") {
 				var e = opts.event;
-					var target = e.target;
+				var target = (e.target.id === "svgroot") ? document.getElementById('canvas_background') : e.target;
+				if (mode == "eyedropper" && target) {
 					currentStyle.fillPaint = target.getAttribute("fill") || "white";
   				currentStyle.fillOpacity = target.getAttribute("fill-opacity") || 1.0;
-  				currentStyle.strokePaint = target.getAttribute("stroke");
+  				currentStyle.strokePaint = target.getAttribute("stroke") || 'none';
   				currentStyle.strokeOpacity = target.getAttribute("stroke-opacity") || 1.0;
   				currentStyle.strokeWidth = target.getAttribute("stroke-width");
   				currentStyle.strokeDashArray = target.getAttribute("stroke-dasharray");
   				currentStyle.strokeLinecap = target.getAttribute("stroke-linecap");
   				currentStyle.strokeLinejoin = target.getAttribute("stroke-linejoin");
   				currentStyle.opacity = target.getAttribute("opacity") || 1.0;
-					if ($.inArray(target.nodeName, ['g', 'use']) == -1) {
+					if ($.inArray(opts.selectedElements.nodeName, ['g', 'use']) == -1) {
 						var changes = {};
-
 						var change = function(elem, attrname, newvalue) {
 							changes[attrname] = elem.getAttribute(attrname);
 							elem.setAttribute(attrname, newvalue);
 						};
-						
+						var batchCmd = new S.BatchCommand();
-						if (currentStyle.fillPaint) 		change(opts.selectedElements[0], "fill", currentStyle.fillPaint);
+						opts.selectedElements.forEach(function(element){
-						if (currentStyle.fillOpacity) 		change(opts.selectedElements[0], "fill-opacity", currentStyle.fillOpacity);
+						  if (currentStyle.fillPaint) 		  change(element, "fill", currentStyle.fillPaint);
-						if (currentStyle.strokePaint) 		change(opts.selectedElements[0], "stroke", currentStyle.strokePaint);
+  						if (currentStyle.fillOpacity) 		change(element, "fill-opacity", currentStyle.fillOpacity);
-						if (currentStyle.strokeOpacity) 	change(opts.selectedElements[0], "stroke-opacity", currentStyle.strokeOpacity);
+  						if (currentStyle.strokePaint) 		change(element, "stroke", currentStyle.strokePaint);
-						if (currentStyle.strokeWidth) 		change(opts.selectedElements[0], "stroke-width", currentStyle.strokeWidth);
+  						if (currentStyle.strokeOpacity) 	change(element, "stroke-opacity", currentStyle.strokeOpacity);
-						if (currentStyle.strokeDashArray) 	change(opts.selectedElements[0], "stroke-dasharray", currentStyle.strokeDashArray);
+  						if (currentStyle.strokeWidth) 		change(element, "stroke-width", currentStyle.strokeWidth);
-						if (currentStyle.opacity) 			change(opts.selectedElements[0], "opacity", currentStyle.opacity);
+  						if (currentStyle.strokeDashArray) change(element, "stroke-dasharray", currentStyle.strokeDashArray);
-						if (currentStyle.strokeLinecap) 	change(opts.selectedElements[0], "stroke-linecap", currentStyle.strokeLinecap);
+  						if (currentStyle.opacity) 			  change(element, "opacity", currentStyle.opacity);
-						if (currentStyle.strokeLinejoin) 	change(opts.selectedElements[0], "stroke-linejoin", currentStyle.strokeLinejoin);
+  						if (currentStyle.strokeLinecap) 	change(element, "stroke-linecap", currentStyle.strokeLinecap);
-						
+  						if (currentStyle.strokeLinejoin) 	change(element, "stroke-linejoin", currentStyle.strokeLinejoin);
+  						batchCmd.addSubCommand(new ChangeElementCommand(element, changes));
+  						console.log(changes);
+  						changes = {};
+						});
 						var fill = getPaint(currentStyle.fillPaint, currentStyle.fillOpacity*100, "fill")
 						var stroke = getPaint(currentStyle.strokePaint, currentStyle.strokeOpacity*100, "stroke")
-						
+						svgEditor.paintBox.fill.update(true)
-						svgCanvas.setPaint("fill", fill)
+						svgEditor.paintBox.stroke.update(true)
-						svgCanvas.setPaint("stroke", stroke)
+						addToHistory(batchCmd);
-						
-						addToHistory(new ChangeElementCommand(target, changes));
 					}
 				}
 			},

method-draw/extensions/ext-grid.js

@@ -20,7 +20,7 @@ svgEditor.addExtension("view_grid", function(s) {
 			svgroot = s.svgroot;
 
 	var showGrid = false;
-    var assignAttributes = svgCanvas.assignAttributes;
+    var assignAttributes = s.assignAttributes;
     
     var hcanvas = document.createElement('canvas');
     $(hcanvas).hide().appendTo('body');

method-draw/extensions/ext-shapes.js

@@ -103,7 +103,6 @@ svgEditor.addExtension("shapes", function() {
 	}
 	
 	function makeButtons(cat, shapes) {
-	  $('.tool_button, .tool_button_current').addClass("loaded")
 		var size = cur_lib.size || 300;
 		var fill = cur_lib.fill || false;
 		var off = size * .05;

method-draw/hover.js

@@ -0,0 +1,147 @@
+/**
+ * Package: svedit.select
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Alexis Deveria
+ * Copyright(c) 2010 Jeff Schiller
+ */
+
+// Dependencies:
+// 1) jQuery
+// 2) browser.js
+// 3) math.js
+// 4) svgutils.js
+
+var svgedit = svgedit || {};
+
+(function() {
+
+if (!svgedit.hover) {
+	svgedit.hover = {};
+}
+
+var svgFactory_;
+var config_;
+var hoverManager_; // A Singleton
+
+// Class: svgedit.select.Selector
+// Private class for DOM element selection boxes
+// 
+// Parameters:
+// id - integer to internally indentify the selector
+// elem - DOM element associated with this selector
+svgedit.hover.Hoverer = function(id, elem) {
+	// this is the selector's unique number
+	this.id = id;
+
+	// this holds a reference to the element for which this selector is being used
+	this.hoveredElement = elem;
+
+	// this is a flag used internally to track whether the selector is being used or not
+	this.locked = true;
+
+	// this holds a reference to the <g> element that holds all visual elements of the selector
+	this.hoverGroup = svgFactory_.createSVGElement({
+		'element': 'g',
+		'attr': {'id': ('hoverGroup' + this.id)}
+	});
+
+	// this holds a reference to the path rect
+	this.hoverElem = this.selectorGroup.appendChild(
+		svgFactory_.createSVGElement({
+			'element': 'path',
+			'attr': {
+				'id': ('hoverBox' + this.id),
+				'fill': 'none',
+				'stroke': '#4F80FF',
+				'stroke-width': '1',
+				'shape-rendering': 'crispEdges',
+				'style': 'pointer-events:none'
+			}
+		})
+	);
+
+
+	this.reset(this.hoveredElement);
+};
+
+
+// Function: svgedit.select.Selector.reset 
+// Used to reset the id and element that the selector is attached to
+//
+// Parameters: 
+// e - DOM element associated with this selector
+svgedit.hover.Hoverer.prototype.reset = function(e) {
+	this.locked = true;
+	this.hoveredElement = e;
+	this.resize();
+	this.hoverGroup.setAttribute('display', 'inline');
+};
+
+
+// Class: svgedit.select.SelectorManager
+svgedit.hover.HoverManager = function() {
+	// this will hold the <g> element that contains all hover elements
+	this.hoverParentGroup = null;
+	this.initGroup();
+};
+
+// Function: svgedit.select.SelectorManager.initGroup
+// Resets the parent selector group element
+svgedit.hover.HoverManager.prototype.initGroup = function() {
+	// remove old selector parent group if it existed
+	if (this.hoverParentGroup && this.hoverParentGroup.parentNode) {
+		this.hoverParentGroup.parentNode.removeChild(this.hoverParentGroup);
+	}
+
+	// create parent selector group and add it to svgroot
+	this.selectorParentGroup = svgFactory_.createSVGElement({
+		'element': 'g',
+		'attr': {'id': 'hoverParentGroup'}
+	});
+	
+
+	if($('#canvasBackground').length) return;
+
+	var rect = svgFactory_.createSVGElement({
+		'element': 'rect',
+		'attr': {
+			'width': '100%',
+			'height': '100%',
+			'x': 0,
+			'y': 0,
+			'stroke-width': 1,
+			'stroke': '#000',
+			'fill': '#FFF',
+			'shape-rendering': 'crispEdges',
+			'style': 'pointer-events:none'
+		}
+	});
+
+	// Both Firefox and WebKit are too slow with this filter region (especially at higher
+	// zoom levels) and Opera has at least one bug
+//	if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
+	canvasbg.appendChild(rect);
+	svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
+};
+
+
+
+svgedit.hover.init = function(config, svgFactory) {
+	config_ = config;
+	svgFactory_ = svgFactory;
+	selectorManager_ = new svgedit.hover.HoverManager();
+};
+
+/**
+ * Function: svgedit.select.getSelectorManager
+ *
+ * Returns:
+ * The SelectorManager instance.
+ */
+svgedit.hover.getHoverManager = function() {
+	return selectorManager_;
+};
+
+})();

method-draw/svg-editor.css

@@ -1977,3 +1977,8 @@ span.zoom_tool img {
 
 #svg_editor #group_title {display: none;}
 
+#base_unit_container {
+	display: none;
+	position: absolute;
+	z-index: 20;
+}

method-draw/svg-editor.html

@@ -39,6 +39,7 @@
   <script type="text/javascript" src="sanitize.js"></script>
   <script type="text/javascript" src="history.js"></script>
   <script type="text/javascript" src="select.js"></script>
+  <script type="text/javascript" src="hover.js"></script>
   <script type="text/javascript" src="draw.js"></script>
   <script type="text/javascript" src="path.js"></script>
   <script type="text/javascript" src="svgcanvas.js"></script>
@@ -48,6 +49,8 @@
   <script type="text/javascript" src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
   <script type="text/javascript" src="jgraduate/jpicker.min.js"></script>
   <script type="text/javascript" src="mousewheel.js"></script>
+  <script type="text/javascript" src="extensions/ext-eyedropper.js"></script>
+  <script type="text/javascript" src="extensions/ext-grid.js"></script>
 <!{endif}-->
 
 <!-- you can load extensions here -->
@@ -87,7 +90,6 @@ $(function(){
 </div>
 
 <div id="workarea">
-<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
 <div id="svgcanvas" style="position:relative">
 
 </div>
@@ -182,6 +184,7 @@ $(function(){
   	<div class="menu_list" id="view_menu">
   	    <div class="menu_item push_button_pressed" id="tool_rulers">View Rulers</div>
   	    <div class="menu_item" id="tool_wireframe">View Wireframe</div>
+  	    <div class="menu_item" id="tool_snap">Snap to Grid</div>
   	    <div class="separator"></div>
     		<div class="menu_item" id="tool_source">Source... <span class="shortcut">⌘U</span></div>
     </div>
@@ -787,8 +790,17 @@ $(function(){
 				<label>
 				  <div class="subtitle"><strong>Units &amp; Rulers</strong></div>
 				  <span id="svginfo_rulers_onoff"><input type="checkbox" value="show_rulers" id="show_rulers" checked> Show rulers</span>  
+				</label>
 	
-					<span id="svginfo_unit">Base Unit:</span>
+		</fieldset>
+		<div>
+		  <button id="tool_prefs_cancel" class="cancel">Cancel</button>
+			<button id="tool_prefs_save">Save</button>
+		</div>
+	</div>
+</div>
+
+<div id="base_unit_container">
   <select id="base_unit">
   	<option value="px">Pixels</option>
   	<option value="cm">Centimeters</option>
@@ -799,14 +811,6 @@ $(function(){
   	<option value="em">Ems</option>
   	<option value="ex">Exs</option>
   </select>
-				</label>
-	
-		</fieldset>
-		<div>
-		  <button id="tool_prefs_cancel" class="cancel">Cancel</button>
-			<button id="tool_prefs_save">Save</button>
-		</div>
-	</div>
 </div>
 
 <div id="dialog_box">

method-draw/svg-editor.js

@@ -52,10 +52,10 @@
 				},
 				initOpacity: 1,
 				imgPath: 'images/',
-				langPath: 'locale/',
 				extPath: 'extensions/',
 				jGraduatePath: 'jgraduate/images/',
-				extensions: ['ext-markers.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-grid.js'],
+				//extensions: ['ext-markers.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-grid.js'],
+				extensions: [],
 				initTool: 'select',
 				wireframe: false,
 				colorPickerCSS: false,
@@ -281,15 +281,6 @@
 						}
 					});
 				});
-				
-				var good_langs = [];
-	
-				$('#lang_select option').each(function() {
-					good_langs.push(this.value);
-				});
-				
-	// 			var lang = ('lang' in curPrefs) ? curPrefs.lang : null;
-				Editor.putLocale(null, good_langs);
 			}
 			
 			// Load extensions
@@ -443,7 +434,7 @@
 					$('.toolbar_button button > svg, .toolbar_button button > img').each(function() {
 						$(this).parent().prepend(this);
 					});
-					
+					$('.tool_button, .tool_button_current').addClass("loaded")
 					var tleft = $('#tools_left');
 					if (tleft.length != 0) {
 						var min_height = tleft.offset().top + tleft.outerHeight();
@@ -473,8 +464,26 @@
 				}
 			});
 			
+			$('#rulers').on("dblclick", function(e){
+			  $("#base_unit_container").css({
+			    top: e.pageY-10,
+			    left: e.pageX-50,
+			    display: 'block'
+		    })
+			})
+			$("#base_unit_container")
+  			.on("mouseleave mouseenter", function(e){
+  			  t = setTimeout(function(){$("#base_unit_container").fadeOut(500)}, 200)
+  			  if(event.type == "mouseover") clearTimeout(t)  
+  			})
+  		$("#base_unit")
+    		.on("change", function(e) {
+    			savePreferences();
+    		});
+
 			Editor.canvas = svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"), curConfig);
 			Editor.show_save_warning = false;
+			Editor.paintBox = {fill: null, stroke:null, canvas:null};
 			var palette = ["#000000", "#3f3f3f", "#7f7f7f", "#bfbfbf", "#ffffff",
 			           "#ff0000", "#ff7f00", "#ffff00", "#7fff00",
 			           "#00ff00", "#00ff7f", "#00ffff", "#007fff",
@@ -500,8 +509,7 @@
 				zoomInIcon = 'crosshair',
 				zoomOutIcon = 'crosshair',
 				ui_context = 'toolbars',
-				orig_source = '',
+				orig_source = '';
-				paintBox = {fill: null, stroke:null};
 				
 
 			// This puts the correct shortcuts in the menus
@@ -566,7 +574,6 @@
 				if(curr.length && curr[0].id !== 'tool_select') {
 					curr.removeClass('tool_button_current').addClass('tool_button');
 					$('#tool_select').addClass('tool_button_current').removeClass('tool_button');
-					$('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}');
 				}
 				svgCanvas.setMode('select');
 			};
@@ -772,8 +779,8 @@
 				
 				// In the event a gradient was flipped:
 				if(selectedElement && mode === "select") {
-					paintBox.fill.update();
+					Editor.paintBox.fill.update();
-					paintBox.stroke.update();
+					Editor.paintBox.stroke.update();
 				}
 				
 				svgCanvas.runExtensions("elementChanged", {
@@ -853,8 +860,8 @@
 			
 			// Makes sure the current selected paint is available to work with
 			var prepPaints = function() {
-				paintBox.fill.prep();
+				Editor.paintBox.fill.prep();
-				paintBox.stroke.prep();
+				Editor.paintBox.stroke.prep();
 			}
 			
 			var flyout_funcs = {};
@@ -1450,14 +1457,14 @@
 						
 						$('#stroke_width').val(gWidth === null ? "" : gWidth);
 						
-						paintBox.fill.update(true);
+						Editor.paintBox.fill.update(true);
-						paintBox.stroke.update(true);
+						Editor.paintBox.stroke.update(true);
 
 						
 						break;
 					default:
-						paintBox.fill.update(true);
+						Editor.paintBox.fill.update(true);
-						paintBox.stroke.update(true);
+						Editor.paintBox.stroke.update(true);
 						
 						$('#stroke_width').val(selectedElement.getAttribute("stroke-width") || 1);
 						$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
@@ -1977,7 +1984,7 @@
 					paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
 				}
 				
-				paintBox[picker].setPaint(paint);
+				Editor.paintBox[picker].setPaint(paint);
 				
 				if (isStroke) {
 					svgCanvas.setColor('stroke', color);
@@ -2728,8 +2735,8 @@
 				if (isNaN(fill_opacity)) {fill_opacity = 100;}
 				var stroke = getPaint(stroke_color, stroke_opacity, "stroke");
 				var fill = getPaint(fill_color, fill_opacity, "fill");
-				paintBox.fill.setPaint(stroke, true);
+				Editor.paintBox.fill.setPaint(stroke, true);
-				paintBox.stroke.setPaint(fill, true);
+				Editor.paintBox.stroke.setPaint(fill, true);
 				
 			};
 			
@@ -2768,6 +2775,16 @@
 				updateWireFrame();
 			}
 			
+			var clickSnapGrid = function() {
+				var sg = !$('#tool_snap').hasClass('push_button_pressed');
+				if (sg) 
+					$('#tool_snap').addClass('push_button_pressed');
+				else
+					$('#tool_snap').removeClass('push_button_pressed');		
+				curConfig.gridSnapping = sg;
+				savePreferences();
+			}
+			
 			var clickCanvasColor = function(){
 				  svgCanvas.clearSelection();
 				  $('#tool_canvas').trigger("click")
@@ -2946,17 +2963,12 @@
 				var color = $('#bg_blocks div.cur_background').css('background-color') || '#FFF';
 				setBackground(color, $('#canvas_bg_url').val());
 				
-				// set language
-				var lang = $('#lang_select').val();
-				if(lang != curPrefs.lang) {
-					Editor.putLocale(lang);
-				}
 				
 				// set icon size
 				setIconSize($('#iconsize').val());
 				
 				// set grid setting
-				curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;
+				curConfig.gridSnapping = $('#tool_snap').hasClass('push_button_pressed');
 				curConfig.snappingStep = $('#grid_snapping_step').val();
 				curConfig.showRulers = $('#show_rulers')[0].checked;
 				
@@ -3426,7 +3438,7 @@
 				var is_background = elem[0].id == "canvas_color"
 				if (is_background) picker = 'canvas'
 // 				var opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));
-				var paint = paintBox[picker].paint;
+				var paint = Editor.paintBox[picker].paint;
 				
 				var title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity');
 				var was_none = false;
@@ -3445,7 +3457,7 @@
 					function(p) {
 						paint = new $.jGraduate.Paint(p);
 						
-						paintBox[picker].setPaint(paint);
+						Editor.paintBox[picker].setPaint(paint);
 						svgCanvas.setPaint(picker, paint);
 						
 						$('#color_picker').hide();
@@ -3649,19 +3661,19 @@
 				}
 			};
 			
-			paintBox.fill = new PaintBox('#fill_color', 'fill');
+			Editor.paintBox.fill = new PaintBox('#fill_color', 'fill');
-			paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
+			Editor.paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
-			paintBox.canvas = new PaintBox('#canvas_color', 'canvas');
+			Editor.paintBox.canvas = new PaintBox('#canvas_color', 'canvas');
 
 			$('#stroke_width').val(curConfig.initStroke.width);
 			$('#group_opacity').val(curConfig.initOpacity * 100);
 			
 			// Use this SVG elem to test vectorEffect support
-			var test_el = paintBox.fill.rect.cloneNode(false);
+			var test_el = Editor.paintBox.fill.rect.cloneNode(false);
 			test_el.setAttribute('style','vector-effect:non-scaling-stroke');
 			var supportsNonSS = (test_el.style.vectorEffect === 'non-scaling-stroke');
 			test_el.removeAttribute('style');
-			var svgdocbox = paintBox.fill.rect.ownerDocument;
+			var svgdocbox = Editor.paintBox.fill.rect.ownerDocument;
 			// Use this to test support for blur element. Seems to work to test support in Webkit
 			var blur_test = svgdocbox.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
 			if(typeof blur_test.stdDeviationX === "undefined") {
@@ -4100,6 +4112,7 @@
 					{sel:'#tool_import', fn: clickImport, evt: 'mouseup'},
 					{sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: [modKey + 'U', true]},
 					{sel:'#tool_wireframe', fn: clickWireframe, evt: 'click'},
+					{sel:'#tool_snap', fn: clickSnapGrid, evt: 'click'},
 					{sel:'#tool_rulers', fn: clickRulers, evt: 'click'},
 					{sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel,#tool_prefs_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true},
 					{sel:'#tool_source_save', fn: saveSourceEditor, evt: 'click'},

method-draw/svgcanvas.js

@@ -408,6 +408,8 @@ svgedit.select.init(curConfig, {
 });
 // this object manages selectors for us
 var selectorManager = this.selectorManager = svgedit.select.getSelectorManager();
+// this object manages selectors for us
+var hoverManager = this.hoverManager = svgedit.select.getSelectorManager();
 
 // Import from path.js
 svgedit.path.init({
@@ -573,7 +575,8 @@ this.addExtension = function(name, ext_func) {
 			svgroot: svgroot,
 			svgcontent: svgcontent,
 			nonce: getCurrentDrawing().getNonce(),
-			selectorManager: selectorManager
+			selectorManager: selectorManager,
+			hoverManager: hoverManager
 		}));
 		} else {
 			var ext = ext_func;
@@ -2370,7 +2373,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 	//   but the action is not recorded until mousing up
 	// - when we are in select mode, select the element, remember the position
 	//   and do nothing else
-	var mouseDown = function(evt)
+	var mouseDown = mosueOver = function(evt)
 	{
 		if(canvas.spaceKey || evt.button === 1) return;
 		
@@ -3159,6 +3162,18 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 
 	}; // mouseMove()
 	
+	
+	// mouseover mode
+	var mouseOver = function(evt) {
+	  if (evt.button) return;
+	  elem = evt.target;
+	  var clone = elem.cloneNode(true);
+	  clone.setAttribute("fill", "none");
+	  clone.setAttribute("stroke", "#09f")
+    clone.setAttribute("stroke-width", "1")
+    elem.selectorParentGroup.appendChild(clone)
+	}
+	
 	// - in create mode, the element's opacity is set properly, we create an InsertElementCommand
 	//   and store it on the Undo stack
 	// - in move/resize mode, the element's attributes which were affected by the move/resize are

method-draw/svgedit.compiled.css

@@ -411,6 +411,7 @@ span.zoom_tool img{vertical-align:top}
 .clearfix:after{clear:both}
 .clearfix{*zoom:1}
 #svg_editor #group_title{display:none}
+#base_unit_container{display:none;position:absolute;z-index:20}
 INPUT.spin-button{padding:2px 20px 2px 2px;background-repeat:no-repeat;background-position:100% 0;background-image:url('spinbtn_updn.png');background-color:white}
 INPUT.spin-button.up{cursor:pointer;background-position:100% -18px}
 INPUT.spin-button.down{cursor:pointer;background-position:100% -36px}

method-draw/temp.css

@@ -2623,7 +2623,11 @@ span.zoom_tool img {
 
 #svg_editor #group_title {display: none;}
 
-/*
+#base_unit_container {
+	display: none;
+	position: absolute;
+	z-index: 20;
+}/*
 	Styles to make ordinary <INPUT type="text"/> look like a spinbutton/spinbox control.
 	Use with JQuerySpinBtn.js to provide the spin functionality by reacting to mouse etc.
 	(Requires a reference to the JQuery library found at http://jquery.com/src/latest/)