Added remaining updates for grid/snapping extension

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1701 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/svg-editor.html

@@ -658,6 +658,12 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 				<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
 			</fieldset>
 			
+			<fieldset id="change_grid">
+				<legend id="svginfo_grid_settings">Grid</legend>
+				<label><span id="svginfo_snap_onoff">Snapping on/off</span><input type="checkbox" checked value="snapping_on" id="grid_snapping_on"></label>
+				<label><span id="svginfo_snap_step">Snapping Step-Size:</span> <input type="text" id="grid_snapping_step" size="3" value="1"/></label>
+			</fieldset>
+
 		</fieldset>
 
 	</div>

editor/svg-editor.js

@@ -48,10 +48,12 @@
 				langPath: 'locale/',
 				extPath: 'extensions/',
 				jGraduatePath: 'jgraduate/images/',
-				extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js'],
+				extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js','ext-grid.js'],
 				initTool: 'select',
 				wireframe: false,
-				colorPickerCSS: null
+				colorPickerCSS: null,
+				gridSnapping: true,
+				snappingStep: 1
 			},
 			uiStrings = Editor.uiStrings = {
 			"invalidAttrValGiven":"Invalid value given",
@@ -2587,6 +2589,10 @@
 				// set icon size
 				setIconSize($('#iconsize').val());
 				
+				// set grid setting
+				curConfig.gridSnapping = $('#grid_snapping_on').attr('checked');
+				curConfig.snappingStep = $('#grid_snapping_step').val();
+
 				updateCanvas();
 				hideDocProperties();
 			};

editor/svgcanvas.js

@@ -393,6 +393,14 @@ var Utils = this.Utils = function() {
 			return {x:x, y:y, a:snapangle};
 		},
 		
+		// Function: snapToGrid
+		// round value to for snapping
+		"snapToGrid" : function(value){
+			var stepSize = svgEditor.curConfig.snappingStep;
+			value = Math.round(value/stepSize)*stepSize;
+			return value;
+		},
+
 		// Function: text2xml
 		// Cross-browser compatible method of converting a string to an XML tree
 		// found this function here: http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f
@@ -3034,15 +3042,42 @@ var remapElement = this.remapElement = function(selected,changes,m) {
 			changes.y = changes.y-0 + Math.min(0,changes.height);
 			changes.width = Math.abs(changes.width);
 			changes.height = Math.abs(changes.height);
+			if(svgEditor.curConfig.gridSnapping && selected.parentNode.parentNode.localName == "svg"){
+				changes.x = Utils.snapToGrid(changes.x);
+				changes.y = Utils.snapToGrid(changes.y);
+				changes.width = Utils.snapToGrid(changes.width);
+				changes.height = Utils.snapToGrid(changes.height);
+			}
 			assignAttributes(selected, changes, 1000, true);
 			break;
 		case "ellipse":
 			changes.rx = Math.abs(changes.rx);
 			changes.ry = Math.abs(changes.ry);
+			if(svgEditor.curConfig.gridSnapping && selected.parentNode.parentNode.localName == "svg"){
+				changes.cx = Utils.snapToGrid(changes.cx);
+				changes.cy = Utils.snapToGrid(changes.cy);
+				changes.rx = Utils.snapToGrid(changes.rx);
+				changes.ry = Utils.snapToGrid(changes.ry);
+			}
 		case "circle":
 			if(changes.r) changes.r = Math.abs(changes.r);
+			if(svgEditor.curConfig.gridSnapping && selected.parentNode.parentNode.localName == "svg"){
+				changes.cx = Utils.snapToGrid(changes.cx);
+				changes.cy = Utils.snapToGrid(changes.cy);
+				changes.r = Utils.snapToGrid(changes.r);
+			}
 		case "line":
+			if(svgEditor.curConfig.gridSnapping && selected.parentNode.parentNode.localName == "svg"){
+				changes.x1 = Utils.snapToGrid(changes.x1);
+				changes.y1 = Utils.snapToGrid(changes.y1);
+				changes.x2 = Utils.snapToGrid(changes.x2);
+				changes.y2 = Utils.snapToGrid(changes.y2);
+			}
 		case "text":
+			if(svgEditor.curConfig.gridSnapping && selected.parentNode.parentNode.localName == "svg"){
+				changes.x = Utils.snapToGrid(changes.x);
+				changes.y = Utils.snapToGrid(changes.y);
+			}	
 		case "use":
 			assignAttributes(selected, changes, 1000, true);
 			break;
@@ -4270,6 +4305,11 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 		start_x = x;
 		start_y = y;
 
+		if(svgEditor.curConfig.gridSnapping){
+			x = Utils.snapToGrid(x);
+			y = Utils.snapToGrid(y);
+		}
+
 		// if it is a selector grip, then it must be a single element selected, 
 		// set the mouse_target to that and update the mode to rotate/resize
 		if (mouse_target == selectorManager.selectorParentGroup && selectedElements[0] != null) {
@@ -4582,6 +4622,13 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 		x = mouse_x / current_zoom;
 		y = mouse_y / current_zoom;
 	
+		if(svgEditor.curConfig.gridSnapping){
+			x = Utils.snapToGrid(x);
+			y = Utils.snapToGrid(y);
+			start_x = Utils.snapToGrid(start_x);
+			start_y = Utils.snapToGrid(start_y);
+		}
+
 		evt.preventDefault();
 		
 		switch (current_mode)
@@ -4594,6 +4641,11 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 					var dx = x - start_x;
 					var dy = y - start_y;
 					
+					if(svgEditor.curConfig.gridSnapping){
+						dx = Utils.snapToGrid(dx);
+						dy = Utils.snapToGrid(dy);
+					}
+
 					if(evt.shiftKey) { var xya = Utils.snapToAngle(start_x,start_y,x,y); x=xya.x; y=xya.y; }
 
 					if (dx != 0 || dy != 0) {
@@ -4674,6 +4726,13 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 					left=box.x, top=box.y, width=box.width,
 					height=box.height, dx=(x-start_x), dy=(y-start_y);
 				
+				if(svgEditor.curConfig.gridSnapping){
+					dx = Utils.snapToGrid(dx);
+					dy = Utils.snapToGrid(dy);
+					height = Utils.snapToGrid(height);
+					width = Utils.snapToGrid(width);
+				}
+
 				// if rotated, adjust the dx,dy values
 				var angle = getRotationAngle(selected);
 				if (angle) {
@@ -4712,6 +4771,14 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 				var translateOrigin = svgroot.createSVGTransform(),
 					scale = svgroot.createSVGTransform(),
 					translateBack = svgroot.createSVGTransform();
+
+				if(svgEditor.curConfig.gridSnapping){
+					left = Utils.snapToGrid(left);
+					tx = Utils.snapToGrid(tx);
+					top = Utils.snapToGrid(top);
+					ty = Utils.snapToGrid(ty);
+				}
+
 				translateOrigin.setTranslate(-(left+tx),-(top+ty));
 				if(evt.shiftKey) {
 					if(sx == 1) sx = sy
@@ -4769,6 +4836,11 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 				var handle = null;
 				if (!window.opera) svgroot.suspendRedraw(1000);
 
+				if(svgEditor.curConfig.gridSnapping){
+					x = Utils.snapToGrid(x);
+					y = Utils.snapToGrid(y);
+				}
+
 				var x2 = x;
 				var y2 = y;					
 
@@ -4798,6 +4870,13 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 					new_y = Math.min(start_y,y);
 				}
 	
+				if(svgEditor.curConfig.gridSnapping){
+					w = Utils.snapToGrid(w);
+					h = Utils.snapToGrid(h);
+					new_x = Utils.snapToGrid(new_x);
+					new_y = Utils.snapToGrid(new_y);
+				}
+
 				assignAttributes(shape,{
 					'width': w,
 					'height': h,
@@ -4810,6 +4889,9 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 				var c = $(shape).attr(["cx", "cy"]);
 				var cx = c.cx, cy = c.cy,
 					rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
+				if(svgEditor.curConfig.gridSnapping){
+					rad = Utils.snapToGrid(rad);
+				}
 				shape.setAttributeNS(null, "r", rad);
 				break;
 			case "ellipse":
@@ -4818,6 +4900,12 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 				// Opera has a problem with suspendRedraw() apparently
 					handle = null;
 				if (!window.opera) svgroot.suspendRedraw(1000);
+				if(svgEditor.curConfig.gridSnapping){
+					x = Utils.snapToGrid(x);
+					cx = Utils.snapToGrid(cx);
+					y = Utils.snapToGrid(y);
+					cy = Utils.snapToGrid(cy);
+				}
 				shape.setAttributeNS(null, "rx", Math.abs(x - cx) );
 				var ry = Math.abs(evt.shiftKey?(x - cx):(y - cy));
 				shape.setAttributeNS(null, "ry", ry );
@@ -4843,6 +4931,12 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 				x *= current_zoom;
 				y *= current_zoom;
 				
+				if(svgEditor.curConfig.gridSnapping){
+					x = Utils.snapToGrid(x);
+					y = Utils.snapToGrid(y);
+					start_x = Utils.snapToGrid(start_x);
+					start_y = Utils.snapToGrid(start_y);
+				}
 				if(evt.shiftKey) {
 					var x1 = path.dragging?path.dragging[0]:start_x;
 					var y1 = path.dragging?path.dragging[1]:start_y;
@@ -4886,7 +4980,9 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 				cx = center.x;
 				cy = center.y;
 				var angle = ((Math.atan2(cy-y,cx-x)  * (180/Math.PI))-90) % 360;
-				
+				if(svgEditor.curConfig.gridSnapping){
+					angle = Utils.snapToGrid(angle);
+				}
 				if(evt.shiftKey) { // restrict rotations to nice angles (WRS)
 					var snap = 45;
 					angle= Math.round(angle/snap)*snap;
@@ -6731,6 +6827,12 @@ var pathActions = this.pathActions = function() {
 				var x = mouse_x/current_zoom,
 					y = mouse_y/current_zoom,
 					stretchy = getElem("path_stretch_line");
+
+					if(svgEditor.curConfig.gridSnapping){
+						x = Utils.snapToGrid(x);
+						y = Utils.snapToGrid(y);
+					}
+
 				if (!stretchy) {
 					stretchy = document.createElementNS(svgns, "line");
 					assignAttributes(stretchy, {