add top bar to curve editor

bin/style.css

@@ -1283,10 +1283,24 @@ input[type=checkbox]:checked:after {
   height: 100%;
   flex: 1;
 }
-.fx-animpanel .top-bar {
-  margin-left: 200px;
+.fx-animpanel .event-track {
+  background: #161616;
+  fill: #303030;
   position: relative;
 }
+.fx-animpanel .key-event {
+  fill: rgba(187, 187, 187, 0.644);
+  stroke: #000000;
+  stroke-width: 1px;
+  cursor: pointer;
+}
+.fx-animpanel .key-event:hover {
+  fill: #ffd967;
+}
+.fx-animpanel .key-event.selected,
+.fx-animpanel .key-event:hover.selected {
+  fill: #ffbe33;
+}
 .fx-animpanel .timeline {
   background: #161616;
   fill: #161616;
@@ -1494,32 +1508,6 @@ input[type=checkbox]:checked:after {
 .fx-animpanel .track.hidden {
   display: none;
 }
-.fx-animpanel .track .dopesheet {
-  position: relative;
-  height: 20px;
-  flex-grow: 1;
-  background: #333;
-  box-shadow: 0px -1px 0px black inset;
-  overflow-x: hidden;
-}
-.fx-animpanel .track .dopesheet .key {
-  cursor: pointer;
-  user-select: none;
-  position: absolute;
-  width: 5px;
-  margin-top: 1px;
-  margin-left: -2px;
-  height: 15px;
-  background: #9a9a9a;
-  border: 1px solid black;
-}
-.fx-animpanel .track .dopesheet .key:hover {
-  background: white;
-}
-.fx-animpanel .track .dopesheet .key .sp-replacer {
-  border: none;
-  padding: 0;
-}
 .fx-animpanel .track .curve {
   margin-left: 200px;
   position: relative;

bin/style.less

@@ -1393,10 +1393,26 @@ input[type=checkbox] {
 		flex: 1;
 	}
 
-	.top-bar {
-		margin-left: @leftPanelWidth;
+	.event-track {
+		background: #161616;
+		fill: #303030;
 		position: relative;
 	}
+	
+
+	.key-event {
+		fill: rgba(187, 187, 187, 0.644);
+		stroke: #000000;
+		stroke-width: 1px;
+		cursor: pointer;
+	}
+
+	.key-event:hover {
+		fill: #ffd967;
+	}
+	.key-event.selected, .key-event:hover.selected {
+		fill: #ffbe33;
+	}
 
 	.timeline {
 		background: #161616;
@@ -1631,33 +1647,6 @@ input[type=checkbox] {
 		&.hidden {
 			display: none;
 		}
-
-		.dopesheet {
-			position: relative;
-			height: 20px;
-			flex-grow: 1;
-			background: #333;
-			box-shadow: 0px -1px 0px black inset;
-			overflow-x: hidden;
-			.key {
-				cursor: pointer;
-				user-select: none;
-				position: absolute;
-				width: 5px;
-				margin-top: 1px;
-				margin-left: -2px;
-				height: 15px;
-				background: #9a9a9a;
-				border: 1px solid black;
-				&:hover {
-					background: white;
-				}
-				.sp-replacer {
-					border: none;
-					padding: 0;
-				}
-			}
-		}
 		
 		.curve {
 			margin-left: @leftPanelWidth;

hide/comp/CurveEditor.hx

@@ -37,8 +37,11 @@ class CurveEditor extends Component {
 	var graphGroup : Element;
 	var selectGroup : Element;
 	var overlayGroup : Element;
+	var topbarGroup : Element;
+	var topbarKeys : Element;
 
 	var tlHeight = 20;
+	var topBarHeight = 30;
 
 	var refreshTimer : haxe.Timer = null;
 	var lastValue : Dynamic;
@@ -64,8 +67,10 @@ class CurveEditor extends Component {
 		width = Math.round(svg.element.width());
 
 		gridGroup = svg.group(root, "grid");
-		overlayGroup = svg.group(root, "overlaygroup");
 		graphGroup = svg.group(root, "graph");
+		topbarGroup = svg.group(root, "eventGroup");
+		topbarKeys = svg.group(root, "event-handles");
+		overlayGroup = svg.group(root, "overlaygroup");
 		selectGroup = svg.group(root, "selection-overlay");
 		tlGroup = svg.group(root, "tlgroup");
 		markersGroup = svg.group(root, "markers").css({'pointer-events':'none'});
@@ -485,6 +490,7 @@ class CurveEditor extends Component {
 		yOffset = yoff;
 		refreshGrid();
 		graphGroup.attr({transform: 'translate(${xt(0)},${yt(0)})'});
+		topbarKeys.attr({transform: 'translate(${xt(0)}, 0)'});
 	}
 
 	public function setYZoom(yMin: Float, yMax: Float) {
@@ -691,6 +697,11 @@ class CurveEditor extends Component {
 		svg.line(markersGroup, xt(this.currentTime), svg.element.height(), xt(this.currentTime), labelHeight / 2.0, { stroke:'#426dae', 'stroke-width':'2px' });
 		drawLabel(markersGroup, xt(this.currentTime), labelHeight / 2.0 + (tlHeight - labelHeight) / 2.0, labelWidth, labelHeight, { fill:'#426dae', stroke: '#426dae', 'stroke-width':'5px', 'stroke-linejoin':'round'});
 		svg.text(markersGroup, xt(this.currentTime), 14, '${rounderCurrTime}', { 'fill':'#e7ecf5', 'text-anchor':'middle', 'font':'10px sans-serif'});
+
+		// Draw top bar
+		topbarGroup.empty();
+		var topBar = svg.rect(topbarGroup, 0, tlHeight, width, topBarHeight).addClass("event-track");
+		svg.line(topbarGroup, 0, tlHeight + topBarHeight, width, tlHeight + topBarHeight,{ stroke:'#000000', 'stroke-width':'1px' });
 	}
 
 	public function refreshOverlay(?duration: Float) {
@@ -715,12 +726,15 @@ class CurveEditor extends Component {
 		var graphOffX = xt(0);
 		var graphOffY = yt(0);
 		graphGroup.attr({transform: 'translate($graphOffX, $graphOffY)'});
+		
+		topbarKeys.empty();
+		topbarKeys.attr({transform: 'translate($graphOffX, 0)'});
 
 		var curveGroup = svg.group(graphGroup, "curve");
 		var vectorsGroup = svg.group(graphGroup, "vectors");
 		var handlesGroup = svg.group(graphGroup, "handles");
-		var tangentsHandles = svg.group(handlesGroup, "tangents");
 		var keyHandles = svg.group(handlesGroup, "keys");
+		var tangentsHandles = svg.group(handlesGroup, "tangents");
 		var selection = svg.group(graphGroup, "selection");
 		var size = 3;
 
@@ -730,6 +744,21 @@ class CurveEditor extends Component {
 			});
 		}
 
+		function addDiamound(group, x: Float, y: Float, ?style: Dynamic) {
+			var size = 4;
+			var points = [
+				new h2d.col.Point(x + size,y),
+				new h2d.col.Point(x,y - size * 1.5),
+				new h2d.col.Point(x - size,y),
+				new h2d.col.Point(x,y + size * 1.5),
+				new h2d.col.Point(x + size,y)
+			];
+
+			return svg.polygon(group, points, style).attr({
+				"shape-rendering": "crispEdges"
+			});
+		}
+
 		function editPopup(curve: Curve, key: CurveKey, top: Float, left: Float) {
 			var popup = new Element('<div class="keyPopup">
 					<div class="line"><label>Time</label><input class="x" type="number" value="0" step="0.1"/></div>
@@ -795,7 +824,7 @@ class CurveEditor extends Component {
 			return popup;
 		}
 
-		function drawCurve(curve : Curve, ?style: Dynamic){
+		function drawCurve(curve : Curve, ?style: Dynamic) {
 			// Draw curve
 			if(curve.keys.length > 0) {
 				var keys = curve.keys;
@@ -832,7 +861,7 @@ class CurveEditor extends Component {
 			}
 		}
 
-		function drawKeys(curve : Curve, ?style: Dynamic){
+		function drawKeys(curve : Curve, ?style: Dynamic) {
 			for(key in curve.previewKeys) {
 				var kx = xScale*(key.time);
 				var ky = -yScale*(key.value);
@@ -966,28 +995,100 @@ class CurveEditor extends Component {
 				}
 			}
 		}
+
+		function drawTopBarKeys(curve : Curve, ?style: Dynamic) {
+			for(key in curve.keys) {
+				var kx = xScale*(key.time);
+				var ky = -yScale*(key.value);
+
+				var keyEvent = addDiamound(topbarKeys, kx, tlHeight + topBarHeight / 2.0,style);
+				keyEvent.addClass("key-event");
+
+				var selected = selectedKeys.indexOf(key) >= 0;
+				if(selected)
+					keyEvent.addClass("selected");
+				if(!anim) {
+					keyEvent.mousedown(function(e) {
+						if (curve.lock || curve.hidden) return;
+						
+						for (c in curves)
+							c.selected = false;
+						
+						curve.selected = true;
+						
+						if(e.which != 1) return;
+
+						e.preventDefault();
+						e.stopPropagation();
+						var offset = element.offset();
+						beforeChange();
+						var startT = key.time;
+	
+						startDrag(function(e) {
+							var lx = e.clientX - offset.left;
+							var nkx = ixt(lx);
+							var prevTime = key.time;
+							key.time = nkx;
+							if(e.ctrlKey) {
+								key.time = Math.round(key.time * 10) / 10.;
+								key.value = Math.round(key.value * 10) / 10.;
+							}
+							if(e.shiftKey)
+								key.time = startT;
+							fixKey(key);
+							refreshGraph(true, key);
+							onKeyMove(key, prevTime, null);
+							onChange(true);
+						}, function(e) {
+							selectedKeys = [key];
+							fixKey(key);
+							afterChange();
+						});
+						selectedKeys = [key];
+						refreshGraph();
+					});
+					keyEvent.contextmenu(function(e) {
+						if (curve.lock || curve.hidden) return false;
+						
+						for (c in curves)
+							c.selected = false;
+						
+						curve.selected = true;
+						var offset = element.offset();
+						var popup = editPopup(curve, key, e.clientY - offset.top - 50, e.clientX - offset.left);
+						e.preventDefault();
+						return false;
+					});
+				}
+			}
+		}
 		
 		for (curve in curves){
 			var color = '#${StringTools.hex(curve.color)}';
 			var curveStyle: Dynamic = { opacity : curve.selected ? 1 : 0.5, stroke : color, "stroke-width":'${curve.selected ? 2 : 1}px'};
 			var keyStyle: Dynamic = { opacity : curve.selected ? 1 : 0.5};
+			var eventStyle: Dynamic = { 'fill-opacity' : curve.selected ? 1 : 0.5};
 			
 			if (curve.lock || curve.blendCurve) {
 				curveStyle = { opacity : curve.selected ? 1 : 0.5 , stroke : color, "stroke-width":'${curve.selected ? 2 : 1}px', "stroke-dasharray":"5, 3"};
 				keyStyle = { opacity : curve.selected ? 1 : 0.5};
+				eventStyle = { 'fill-opacity' : curve.selected ? 1 : 0.5};
 			}
 
 			if (curve.hidden) {
 				curveStyle = { opacity : 0};
 				keyStyle = { opacity : 0};
+				eventStyle = { 'fill-opacity' : 0};
 			}
 
 			drawCurve(curve, curveStyle);
 			
 			// Blend curve are controlled with parent curve
 			// so we don't want to allow user to use keys on this.s
-			if (!curve.blendCurve)
+			if (!curve.blendCurve) {
 				drawKeys(curve, keyStyle);
+				drawTopBarKeys(curve, eventStyle);
+			}
 		}
 
 		if(selectedKeys.length > 1) {

hide/view/FXEditor.hx

@@ -672,104 +672,7 @@ class FXEditor extends FileView {
 		toolsDefs.push({id: "iconVisibility", title : "Toggle 3d icons visibility", icon : "image", type : Toggle((v) -> { hide.Ide.inst.show3DIcons = v; }), defaultValue: true });
 		toolsDefs.push({id: "iconVisibility-menu", title : "", icon: "", type : Popup((e) -> new hide.comp.SceneEditor.IconVisibilityPopup(null, e, sceneEditor))});
 
-
 		tools.saveDisplayKey = "FXScene/tools";
-		/*tools.addButton("video-camera", "Perspective camera", () -> sceneEditor.resetCamera());
-		tools.addSeparator();
-		tools.addButton("arrows", "Gizmo translation Mode", @:privateAccess sceneEditor.gizmo.translationMode, () -> {
-			var items = [{
-				label : "Snap to Grid",
-				click : function() {
-					@:privateAccess sceneEditor.gizmo.snapToGrid = !sceneEditor.gizmo.snapToGrid;
-				},
-				checked: @:privateAccess sceneEditor.gizmo.snapToGrid
-			}];
-			var steps : Array<Float> = sceneEditor.view.config.get("sceneeditor.gridSnapSteps");
-			for (step in steps) {
-				items.push({
-					label : ""+step,
-					click : function() {
-						@:privateAccess sceneEditor.gizmo.moveStep = step;
-					},
-					checked: @:privateAccess sceneEditor.gizmo.moveStep == step
-				});
-			}
-			new hide.comp.ContextMenu(items);
-		});
-		tools.addButton("refresh", "Gizmo rotation Mode", @:privateAccess sceneEditor.gizmo.rotationMode, () -> {
-			var steps : Array<Float> = sceneEditor.view.config.get("sceneeditor.rotateStepCoarses");
-			var items = [{
-				label : "Snap enabled",
-				click : function() {
-					@:privateAccess sceneEditor.gizmo.rotateSnap = !sceneEditor.gizmo.rotateSnap;
-				},
-				checked: @:privateAccess sceneEditor.gizmo.rotateSnap
-			}];
-			for (step in steps) {
-				items.push({
-					label : ""+step+"°",
-					click : function() {
-						@:privateAccess sceneEditor.gizmo.rotateStepCoarse = step;
-					},
-					checked: @:privateAccess sceneEditor.gizmo.rotateStepCoarse == step
-				});
-			}
-			new hide.comp.ContextMenu(items);
-		});
-		tools.addButton("expand", "Gizmo scaling Mode", @:privateAccess sceneEditor.gizmo.scalingMode);
-
-		tools.addSeparator();
-
-
-		function renderProps() {
-			properties.clear();
-			var renderer = scene.s3d.renderer;
-			var group = new Element('<div class="group" name="Renderer"></div>');
-			renderer.editProps().appendTo(group);
-			properties.add(group, renderer.props, function(_) {
-				renderer.refreshProps();
-				if( !properties.isTempChange ) renderProps();
-			});
-			var lprops = {
-				power : Math.sqrt(light.color.r),
-				enable: true
-			};
-			var group = new Element('<div class="group" name="Light">
-				<dl>
-				<dt>Power</dt><dd><input type="range" min="0" max="4" field="power"/></dd>
-				</dl>
-			</div>');
-			properties.add(group, lprops, function(_) {
-				var p = lprops.power * lprops.power;
-				light.color.set(p, p, p);
-			});
-		}
-		tools.addButton("gears", "Renderer Properties", renderProps);
-
-		tools.addToggle("th", "Show grid", function(v) {
-			showGrid = v;
-			axis.visible = (is2D) ? false : v;
-			cullingPreview.visible = (is2D) ? false : v;
-			updateGrid();
-		}, showGrid);
-
-
-		tools.addToggle("cube", "Toggle model axis", null, (v) -> { sceneEditor.showBasis = v; sceneEditor.updateBasis(); });
-
-		tools.addToggle("image", "Toggle 3d icons visibility", null, function(v) { hide.Ide.inst.show3DIcons = v; }, true);
-		tools.addColor("Background color", function(v) {
-			scene.engine.backgroundColor = v;
-			updateGrid();
-		}, scene.engine.backgroundColor);
-		tools.addToggle("refresh", "Auto synchronize", function(b) {
-			autoSync = b;
-		});
-		tools.addToggle("compass", "Local transforms", (v) -> sceneEditor.localTransform = v, sceneEditor.localTransform);
-		tools.addToggle("connectdevelop", "Wireframe",(b) -> { sceneEditor.setWireframe(b); });
-		pauseButton = tools.addToggle("pause", "Pause animation", function(v) {}, false);
-		tools.addRange("Speed", function(v) {
-			scene.speed = v;
-		}, scene.speed);*/
 
 		tools.makeToolbar(toolsDefs, config, keys);
 
@@ -1161,21 +1064,8 @@ class FXEditor extends FileView {
 
 		for (curve in curves){
 			var dispKey = getPath() + "/" + curve.getAbsPath(true);
-			// Was certainly used for set prefered display height of a curve
-			// var height = getDisplayState(dispKey + "/height");
-	
-			// if(height == null)
-			// 	height = curveEditorHeight;
-	
-			// if(height < minHeight)
-			// 	height = minHeight;
-
-			//curveContainer.height(height);
 			curve.maxTime = data.duration == 0 ? 5000 : data.duration;
 			this.curveEditor.saveDisplayKey = dispKey;
-
-			// Why do we want to lock displacement in x when focused on a curve ?
-			//this.curveEditor.lockViewX = true;
 	
 			this.curveEditor.requestXZoom = function(xMin, xMax) {
 				var margin = 10.0;
@@ -1191,8 +1081,6 @@ class FXEditor extends FileView {
 				refreshTimeline(false);
 			}
 	
-			//this.curveEditor.lockKeyX = true;
-	
 			if(["visibility", "s", "l", "a"].indexOf(curve.name.split(".").pop()) >= 0) {
 				this.curveEditor.minValue = 0;
 				this.curveEditor.maxValue = 1;
@@ -1530,6 +1418,12 @@ class FXEditor extends FileView {
 			leftPanel.width(prefWidth);
 	}
 
+	function addEventsToCurveEditor(sections: Array<Section>) {
+		for (sec in sections) {
+			
+		}
+	}
+
 	function addEventsTrack(events: Array<IEvent>, tracksEl: Element) {
 		var trackEl = new Element('<div class="track">
 			<div class="track-header">
@@ -1628,7 +1522,7 @@ class FXEditor extends FileView {
 		afterPanRefreshes = [];
 		var curvesToDraw : Array<Curve> = [];
 
-		function getSection(?root : PrefabElement): Section{		
+		function getSection(?root : PrefabElement): Section {		
 			var section: Section = { root:root, curves: [], children: [], events: []};
 
 			if (root is Curve)
@@ -1670,65 +1564,8 @@ class FXEditor extends FileView {
 			sections.push(getSection(sel));
 		}
 
-		// function getTagRec(elt : PrefabElement) {
-		// 	var p = elt;
-		// 	while(p != null) {
-		// 		var tag = sceneEditor.getTag(p);
-		// 		if(tag != null)
-		// 			return tag;
-		// 		p = p.parent;
-		// 	}
-		// 	return null;
-		// }
-
-		// for(sel in selection) {
-		// 	for(curve in sel.flatten(Curve))
-		// 		getSection(curve).curves.push(curve);
-		// 	for(evt in sel.flatten(Event))
-		// 		getSection(evt).events.push(evt);
-		// 	for(fx in sel.flatten(hrt.prefab.fx.SubFX))
-		// 		getSection(fx).events.push(fx);
-		// }
-
-
-		// for(sec in sections) {
-		// 	var objPanel = new Element('<div>
-		// 		<div class="tracks-header">
-		// 			<div class="track-button fold ico ico-angle-right"></div>
-		// 			<div class="track-button ico ico-eye"></div>
-		// 			<label class="name">${upperCase(sec.elt.name)}</label>
-		// 			<label class="abspath">${sec.elt.getAbsPath(true)}</label>
-		// 			<div class="track-button addtrack ico ico-plus-square"></div>
-		// 			<div class="track-button ico ico-lock"></div>
-		// 		</div>
-		// 		<div class="tracks"></div>
-		// 	</div>');
-
-		// 	leftPanel.append(objPanel);
-			
-		// 	var addTrackEl = objPanel.find(".addtrack");
-
-		// 	var parentTag = getTagRec(sec.elt);
-		// 	if(parentTag != null) {
-		// 		objPanel.find(".name").css("background", parentTag.color);
-		// 	}
-
-		// 	addTrackEl.click(function(e) {
-		// 		var menuItems = getNewTrackMenu(sec.elt);
-		// 		new hide.comp.ContextMenu(menuItems);
-		// 	});
-		// 	var tracksEl = objPanel.find(".tracks");
-
-		// 	if(sec.events.length > 0)
-		// 		addEventsTrack(sec.events, tracksEl);
-
-		// 	var groups = Curve.getGroups(sec.curves);
-		// 	for(group in groups)
-		// 		for (item in group.items)
-		// 			curvesToDraw.push(item);
-		// }
-
 		addHeadersToCurveEditor(sections);
+		//addEventToCurveEditor(sections);
 		addCurvesToCurveEditor(curvesToDraw);
 
 		this.curveEditor.refreshTimeline(currentTime);