CurveEditor: adjust vertical grid dynamically

bin/style.css

@@ -549,6 +549,10 @@ input[type=checkbox]:checked:after {
   stroke: #747474;
   shape-rendering: crispEdges;
 }
+.hide-curve-editor .grid text {
+  font: 10px sans-serif;
+  fill: #555;
+}
 .hide-curve-editor .graph .selection rect {
   fill: #ffffff;
   fill-opacity: 0.1;

bin/style.less

@@ -598,6 +598,9 @@ input[type=checkbox] {
 			stroke: rgb(116, 116, 116);
 			shape-rendering: crispEdges;
 		}
+		text {
+			font: 10px sans-serif; fill: #555;
+		}
 	}
 
 	.graph {

hide/comp/CurveEditor.hx

@@ -399,12 +399,28 @@ class CurveEditor extends Component {
 		var minY = Math.floor(iyt(height));
 		var maxY = Math.ceil(iyt(0));
 		var vgrid = svg.group(gridGroup, "vgrid");
-		for(iy in minY...(maxY+1)) {
-			var l = svg.line(vgrid, 0, yt(iy), width, yt(iy)).attr({
+		var vstep = 1;
+		while((maxY - minY) / vstep > 10)
+			vstep *= 10;
+
+		inline function hline(iy) {
+			return svg.line(vgrid, 0, yt(iy), width, yt(iy)).attr({
 				"shape-rendering": "crispEdges"
 			});
+		}
+
+		inline function hlabel(str, iy) {
+			svg.text(vgrid, 1, yt(iy), str);
+		}
+
+		var minS = Math.floor(minY / vstep);
+		var maxS = Math.ceil(maxY / vstep);
+		for(i in minS...(maxS+1)) {
+			var iy = i * vstep;
+			var l = hline(iy);
 			if(iy == 0)
-				l.addClass("axis");
+				l.addClass("axis");	
+			hlabel("" + iy, iy + 1);			
 		}
 	}
 

hide/comp/SVG.hx

@@ -61,9 +61,9 @@ class SVG extends Component {
 		return g;
 	}
 
-	// public function text(x: Float, y: Float, text: String, ?style: Dynamic) {
-	// 	var e = make("text", {x:x, y:y}, style);
-	// 	e.text(text);
-	// 	return e;
-	// }
+	public function text(?parent: Element, x: Float, y: Float, text: String, ?style: Dynamic) {
+		var e = make(parent, "text", {x:x, y:y}, style);
+		e.text(text);
+		return e;
+	}
 }