Fixed most ruler bugs on high zoom in/out levels

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

editor/svg-editor.css

@@ -96,14 +96,23 @@
 }
 
 
-#ruler_x canvas {
+#ruler_x canvas:first-child {
 	margin-left: -16px;
 }
 
+#ruler_x canvas {
+	float: left;
+}
+
 #ruler_y canvas {
 	margin-top: -16px;
 }
 
+#ruler_x > div, 
+#ruler_y > div {
+	overflow: hidden;
+}
+
 
 
 

editor/svg-editor.html

@@ -52,12 +52,16 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 <div id="rulers">
 	<div id="ruler_corner"></div>
 	<div id="ruler_x">
+		<div>
 			<canvas height="15"></canvas>
 		</div>
+	</div>
 	<div id="ruler_y">
+		<div>
 			<canvas width="15"></canvas>
 		</div>
 	</div>
+</div>
 
 <div id="workarea">
 <style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>

editor/svg-editor.js

@@ -729,7 +729,14 @@
 				if(!z_info) return;
 				var zoomlevel = z_info.zoom,
 					bb = z_info.bbox;
-				$('#zoom').val(Math.round(zoomlevel*100));
+				
+				if(zoomlevel < .001) {
+					changeZoom({value: .1});
+					return;
+				}
+					
+// 				$('#zoom').val(Math.round(zoomlevel*100));
+				$('#zoom').val(zoomlevel*100);
 				
 				if(autoCenter) {
 					updateCanvas();
@@ -1670,6 +1677,10 @@
 			}
 			var changeZoom = function(ctl) {
 				var zoomlevel = ctl.value / 100;
+				if(zoomlevel < .001) {
+					ctl.value = .1;
+					return;
+				}
 				var zoom = svgCanvas.getZoom();
 				var w_area = workarea;
 				
@@ -4234,6 +4245,8 @@
 				if(!zoom) zoom = svgCanvas.getZoom();
 				if(!scanvas) scanvas = $("#svgcanvas");
 				
+				var limit = 30000;
+				
 				var c_elem = svgCanvas.getContentElem();
 				
 				var units = svgCanvas.getUnits();
@@ -4243,14 +4256,45 @@
 					var is_x = (d === 0);
 					var dim = is_x ? 'x' : 'y';
 					var lentype = is_x?'width':'height';
-					
 					var content_d = c_elem.getAttribute(dim)-0;
 					
-					var hcanv = $('#ruler_' + dim + ' canvas')[0];
+					var $hcanv = $('#ruler_' + dim + ' canvas:first');
+					var hcanv = $hcanv[0];
+					
 					// Set the canvas size to the width of the container
-					var len = hcanv[lentype] = scanvas[lentype]();
+					hcanv.setAttribute(lentype, 0);
+					var ruler_len = scanvas[lentype]();
+					var total_len = ruler_len;
+					hcanv.parentNode.style[lentype] = total_len + 'px';
+					
+					var canv_count = 1;
+					var ctx_num = 0;
+					var ctx_arr;
 					var ctx = hcanv.getContext("2d");
 
+					// Remove any existing canvasses
+					$hcanv.siblings().remove();
+					
+					// Create multiple canvases when necessary (due to browser limits)
+					if(ruler_len >= limit) {
+						var num = parseInt(ruler_len / limit) + 1;
+						ctx_arr = Array(num);
+						ctx_arr[0] = ctx;
+						for(var i = 1; i < num; i++) {
+							hcanv[lentype] = limit;
+							var copy = hcanv.cloneNode(true);
+							hcanv.parentNode.appendChild(copy);
+							ctx_arr[i] = copy.getContext('2d');
+						}
+						
+						copy[lentype] = ruler_len % limit;
+						
+						// set copy width to last
+						ruler_len = limit;
+					}
+					
+					hcanv[lentype] = ruler_len;
+					
 					var u_multi = unit * zoom;
 					
 					// Calculate the main number interval
@@ -4269,9 +4313,10 @@
 					ctx.font = "9px sans-serif";
 
 					var ruler_d = ((content_d / u_multi) % multi) * u_multi;
-					
+					var label_pos = ruler_d - big_int;
-					for (; ruler_d < len; ruler_d += big_int) {
+					for (; ruler_d < total_len; ruler_d += big_int) {
-						var real_d = Math.round((ruler_d) - content_d );
+						label_pos += big_int;
+						var real_d = ruler_d - content_d;
 
 						var cur_d = Math.round(ruler_d) + .5;
 						if(is_x) {
@@ -4282,8 +4327,7 @@
 							ctx.lineTo(0, cur_d);
 						}
 	
-	
+						var num = (label_pos - content_d) / u_multi;
-						var num = real_d / u_multi;
 						if(multi >= 1) {
 							label = Math.round(num);
 						} else {
@@ -4312,6 +4356,19 @@
 						var part = big_int / 10;
 						for(var i = 1; i < 10; i++) {
 							var sub_d = Math.round(ruler_d + part * i) + .5;
+							if(ctx_arr && sub_d > ruler_len) {
+								ctx_num++;
+								ctx.stroke();
+								if(ctx_num >= ctx_arr.length) {
+									i = 10;
+									ruler_d = total_len;
+									continue;
+								}
+								ctx = ctx_arr[ctx_num];
+								ruler_d -= limit;
+								sub_d = Math.round(ruler_d + part * i) + .5;
+							}
+							
 							var line_num = (i % 2)?12:10;
 							if(is_x) {
 								ctx.moveTo(sub_d, 15);

editor/svgcanvas.js

@@ -1560,7 +1560,7 @@ var SelectorManager;
 				'height': dims[1],
 				'x': 0,
 				'y': 0,
-				'overflow': 'visible',
+				'overflow': (isWebkit ? 'none' : 'visible'), // Chrome 7 has a problem with this when zooming out
 				'style': 'pointer-events:none'
 			});
 			
@@ -2444,7 +2444,7 @@ var copyElem = function(el) {
 	
 	// Opera's "d" value needs to be reset for Opera/Win/non-EN
 	// Also needed for webkit (else does not keep curved segments on clone)
-	if((isWebkit) && el.nodeName == 'path') {
+	if(isWebkit && el.nodeName == 'path') {
 		var fixed_d = pathActions.convertPath(el);
 		new_el.setAttribute('d', fixed_d);
 	}