Curve editor improvements

bin/style.css

@@ -453,9 +453,11 @@ input[type=checkbox]:checked:after {
 .hide-curve-editor .vgrid line {
   stroke: #444;
 }
-.hide-curve-editor .curve line {
-  stroke: #888;
-  stroke-width: 2px;
+.hide-curve-editor .curve line,
+.hide-curve-editor path {
+  stroke: #f00;
+  stroke-width: 1px;
+  fill: none;
 }
 .hide-curve-editor line.axis {
   stroke: #fff;
@@ -471,10 +473,12 @@ input[type=checkbox]:checked:after {
 .hide-curve-editor .handles circle:hover,
 .hide-curve-editor .handles rect:hover {
   fill: #555;
+  stroke: #fff;
+  stroke-width: 2px;
 }
 /* FX Editor */
 .fx-animpanel {
-  flex-basis: 200px;
+  flex-basis: 300px;
 }
 /* Golden Layout Fixes */
 .lm_header .lm_tabs {

bin/style.less

@@ -490,9 +490,10 @@ input[type=checkbox] {
 	}
 	.hgrid line { stroke: #444; }
 	.vgrid line { stroke: #444; }
-	.curve line {
-		stroke: #888;
-		stroke-width: 2px;
+	.curve line, path {
+		stroke: #f00;
+		stroke-width: 1px;
+		fill: none;
 	}
 	line.axis {
 		stroke: #fff;
@@ -509,13 +510,15 @@ input[type=checkbox] {
 		}
 		circle:hover, rect:hover {
 			fill: #555;
+			stroke: #fff;
+			stroke-width: 2px;
 		}
 	}
 }
 
 /* FX Editor */
 .fx-animpanel {
-	flex-basis: 200px;
+	flex-basis: 300px;
 }
 
 /* Golden Layout Fixes */

hide/comp/CurveEditor.hx

@@ -108,19 +108,16 @@ class CurveEditor extends Component {
 
 		// Draw curve
 		{
-			// for(ik in 0...curve.keys.length-1) {
-			// 	var pt = curve.keys[ik];
-			// 	var nextPt = curve.keys[ik+1];
-			// 	svg.line(curveGroup, xt(pt.time), yt(pt.value), xt(nextPt.time), yt(nextPt.value));
-			// }
-			var pts = curve.sample(200);
-			var poly = [];
-			for(i in 0...pts.length) {
-				var x = xt(curve.duration * i / (pts.length - 1));
-				var y = yt(pts[i]);
-				poly.push(new h2d.col.Point(x, y));
+			var keys = curve.keys;
+			var lines = ['M ${xt(keys[0].time)},${yt(keys[0].value)}'];
+			for(ik in 1...keys.length) {
+				var prev = keys[ik-1];
+				var cur = keys[ik];
+				lines.push('C ${xt(prev.time + prev.nextHandle.dt)}, ${yt(prev.value + prev.nextHandle.dv)}
+					${xt(cur.time + cur.prevHandle.dt)}, ${yt(cur.value + cur.prevHandle.dv)}
+					${xt(cur.time)}, ${yt(cur.value)} ');
 			}
-			svg.polyLine(curveGroup, poly);
+			svg.make(curveGroup, "path", {d: lines.join("")});
 		}
 
 
@@ -158,7 +155,9 @@ class CurveEditor extends Component {
 					});
 				});
 			}
-			function addHandle(handle: hide.prefab.Curve.CurveHandle) {
+			function addHandle(next: Bool) {
+				var handle = next ? key.nextHandle : key.prevHandle;
+				var other = next ? key.prevHandle : key.nextHandle;
 				if(handle == null) return null;
 				var px = xt(key.time + handle.dt);
 				var py = yt(key.value + handle.dv);
@@ -170,11 +169,12 @@ class CurveEditor extends Component {
 						var offx = e.clientX - circle.offset().left;
 						var offy = e.clientY - circle.offset().top;
 						var offset = svg.element.offset();
-						var other = handle == key.prevHandle ? key.nextHandle : key.prevHandle;
 						var otherLen = hxd.Math.distance(other.dt * xScale, other.dv * yScale);
 						root.mousemove(function(e) {
 							var lx = e.clientX - offset.left - offx;
 							var ly = e.clientY - offset.top - offy;
+							if(next && lx < kx || !next && lx > kx)
+								lx = kx;
 							var ndt = ixt(lx) - key.time;
 							var ndv = iyt(ly) - key.value;
 							handle.dt = ndt;
@@ -193,8 +193,8 @@ class CurveEditor extends Component {
 				}
 				return circle;
 			}
-			var pHandle = addHandle(key.prevHandle);
-			var nHandle = addHandle(key.nextHandle);
+			var pHandle = addHandle(false);
+			var nHandle = addHandle(true);
 		}
 	}
 }

hide/comp/SVG.hx

@@ -49,7 +49,8 @@ class SVG extends Component {
 		return make(parent, "line", {x1:x1, y1:y1, x2:x2, y2:y2}, style);
 	}
 
-	public function polyLine(?parent: Element, points: Array<h2d.col.Point>, ?style:Dynamic) {
+	public function polygon(?parent: Element, points: Array<h2d.col.Point>, ?style:Dynamic) {
+		// TODO: Use https://www.w3schools.com/graphics/svg_polygon.asp
 		var lines = ['M${points[0].x},${points[0].y} '];
 		for(i in 1...points.length) {
 			lines.push('L${points[i].x},${points[i].y} ');

hide/prefab/Curve.hx

@@ -75,7 +75,6 @@ class Curve extends Prefab {
 		var maxT = 1.;
 		var maxDelta = 1./ 25.;
 
-
 		inline function sampleTime(t) {
 			return bezier(cur.time, cur.time + cur.nextHandle.dt, next.time + next.prevHandle.dt, next.time, t);
 		}
@@ -86,8 +85,8 @@ class Curve extends Prefab {
 
 		while( maxT - minT > maxDelta ) {
 			var t = (maxT + minT) * 0.5;
-			var t = sampleTime(t);
-			if( t > time )
+			var x = sampleTime(t);
+			if( x > time )
 				maxT = t;
 			else
 				minT = t;