add simple support for events and subFX

bin/style.css

@@ -1288,6 +1288,24 @@ input[type=checkbox]:checked:after {
   fill: #303030;
   position: relative;
 }
+.fx-animpanel .events .event {
+  stroke: #000;
+  stroke-width: 1px;
+  cursor: pointer;
+  user-select: none;
+  fill: #202;
+  overflow-x: hidden;
+  padding-top: 3px;
+}
+.fx-animpanel .events .event.subFX {
+  fill: #1b3673;
+}
+.fx-animpanel .events .event:hover {
+  stroke: white;
+}
+.fx-animpanel .events text {
+  pointer-events: none;
+}
 .fx-animpanel .key-event {
   fill: rgba(187, 187, 187, 0.644);
   stroke: #000000;
@@ -1516,44 +1534,6 @@ input[type=checkbox]:checked:after {
 .fx-animpanel .track .curves.hidden {
   display: none;
 }
-.fx-animpanel .track .events {
-  position: relative;
-  overflow-x: hidden;
-  flex-grow: 1;
-  box-shadow: 0px -1px 0px black inset;
-}
-.fx-animpanel .track .events .event {
-  cursor: pointer;
-  min-width: 10px;
-  display: inline-block;
-  height: 17px;
-  user-select: none;
-  position: absolute;
-  background: #202;
-  overflow-x: hidden;
-  padding-top: 3px;
-}
-.fx-animpanel .track .events .event label,
-.fx-animpanel .track .events .event i {
-  margin-left: 3px;
-  display: inline;
-}
-.fx-animpanel .track .events .event.subFX {
-  background: #1b3673;
-}
-.fx-animpanel .track .events .event:hover {
-  color: white;
-}
-.fx-animpanel .track label.curve-label {
-  user-select: none;
-  pointer-events: none;
-  position: absolute;
-  text-transform: capitalize;
-  margin-left: 15px;
-  font-size: 20px;
-  color: white;
-  mix-blend-mode: overlay;
-}
 /* Poly editor */
 .poly-editor .editModeButton {
   margin: 10px;

bin/style.less

@@ -1398,7 +1398,30 @@ input[type=checkbox] {
 		fill: #303030;
 		position: relative;
 	}
-	
+
+	.events {
+		.event {
+			stroke:#000;
+			stroke-width: 1px;;
+			cursor: pointer;
+			user-select: none;
+			fill: #202;
+			overflow-x: hidden;
+			padding-top: 3px;
+		}
+
+		.event.subFX {
+			fill: #1b3673;
+		}
+
+		.event:hover {
+			stroke: white;
+		}
+
+		text {
+			pointer-events: none;
+		}
+	}
 
 	.key-event {
 		fill: rgba(187, 187, 187, 0.644);
@@ -1656,48 +1679,6 @@ input[type=checkbox] {
 		.curves.hidden {
 			display: none;
 		}
-
-		.events {
-			position: relative;
-			overflow-x: hidden;
-			flex-grow: 1;
-			box-shadow: 0px -1px 0px black inset;
-
-			.event {
-				cursor: pointer;
-				min-width: 10px;
-				display: inline-block;
-				height: 17px;
-				user-select: none;
-				position: absolute;
-				background: #202;
-				overflow-x: hidden;
-				padding-top: 3px;
-
-				label, i {
-					margin-left: 3px;
-					display: inline;
-				}
-			}
-
-			.event.subFX {
-				background: #1b3673;
-			}
-
-			.event:hover {
-				color: white;
-			}
-		}
-		label.curve-label {
-			user-select: none;
-			pointer-events: none;
-			position: absolute;
-			text-transform: capitalize;
-			margin-left: 15px;
-			font-size: 20px;
-			color: white;
-			mix-blend-mode: overlay;
-		}
 	}
 }
 

hide/comp/CurveEditor.hx

@@ -19,6 +19,7 @@ class CurveEditor extends Component {
 	public var yOffset = 0.;
 
 	public var curves(default, set) : Array<hrt.prefab.Curve>;
+	public var events : Array<Dynamic> = [];
 	public var undo : hide.ui.UndoHistory;
 
 	public var lockViewX = false;
@@ -506,6 +507,9 @@ class CurveEditor extends Component {
 	}
 
 	public function zoomAll() {
+		if (curves.length == 0)
+			return;
+
 		// Compute a surrounding box that encapsulate all the visible curves
 		var bounds = new h2d.col.Bounds();
 		for (c in curves) {
@@ -730,6 +734,7 @@ class CurveEditor extends Component {
 		topbarKeys.empty();
 		topbarKeys.attr({transform: 'translate($graphOffX, 0)'});
 
+		var eventGroup = svg.group(graphGroup, "events");
 		var curveGroup = svg.group(graphGroup, "curve");
 		var vectorsGroup = svg.group(graphGroup, "vectors");
 		var handlesGroup = svg.group(graphGroup, "handles");
@@ -1062,6 +1067,18 @@ class CurveEditor extends Component {
 				}
 			}
 		}
+
+		function drawEvent(event:Dynamic, eventCount: Int, ?style: Dynamic) {
+			var eventHeight = 18;
+			var spacing = 2;
+			var fontSize = 12;
+			var evtBody = svg.rect(eventGroup, event.e.time * xScale, (eventHeight + spacing) * eventCount, event.info.length * xScale, eventHeight, style);
+			var evtLabel = svg.text(eventGroup, event.e.time * xScale + 5, (eventHeight + spacing) * eventCount + fontSize, event.info.label, { 'font-size':fontSize});
+
+			var element = event.e.getEventPrefab();
+			evtBody.addClass("event");
+			evtBody.addClass(element.type);
+		}
 		
 		for (curve in curves){
 			var color = '#${StringTools.hex(curve.color)}';
@@ -1091,6 +1108,11 @@ class CurveEditor extends Component {
 			}
 		}
 
+		var eventCount = 0;
+		for (event in events) {
+			drawEvent(event, eventCount++, { 'opacity':'0.5' });
+		}
+
 		if(selectedKeys.length > 1) {
 			var bounds = new h2d.col.Bounds();
 			for(key in selectedKeys)

hide/view/FXEditor.hx

@@ -1418,10 +1418,13 @@ class FXEditor extends FileView {
 			leftPanel.width(prefWidth);
 	}
 
-	function addEventsToCurveEditor(sections: Array<Section>) {
-		for (sec in sections) {
-			
+	function addEventsToCurveEditor(events: Array<IEvent>) {
+		for (e in events) {	
+			var info = e.getDisplayInfo(sceneEditor.curEdit);
+			this.curveEditor.events.push({ e:e,info:info });
 		}
+
+		this.curveEditor.refresh();
 	}
 
 	function addEventsTrack(events: Array<IEvent>, tracksEl: Element) {
@@ -1521,6 +1524,7 @@ class FXEditor extends FileView {
 		var selection = sceneEditor.getSelection();
 		afterPanRefreshes = [];
 		var curvesToDraw : Array<Curve> = [];
+		var eventsToDraw : Array<IEvent> = [];
 
 		function getSection(?root : PrefabElement): Section {		
 			var section: Section = { root:root, curves: [], children: [], events: []};
@@ -1545,13 +1549,19 @@ class FXEditor extends FileView {
 				}
 
 				if (child.flatten(Event).length > 0) {
-					if (child is Event)
-						section.events.push(Std.downcast(child, Event));
+					if (child is Event) {
+						var e = Std.downcast(child, Event);
+						section.events.push(e);
+						eventsToDraw.push(e);
+					}
 				}
 
 				if (child.flatten(hrt.prefab.fx.SubFX).length > 0) {
-					if (child is hrt.prefab.fx.SubFX)
-						section.events.push(Std.downcast(child, hrt.prefab.fx.SubFX));
+					if (child is hrt.prefab.fx.SubFX) {
+						var s = Std.downcast(child, hrt.prefab.fx.SubFX);
+						section.events.push(s);
+						eventsToDraw.push(s);
+					}
 				}
 			
 			}
@@ -1565,8 +1575,8 @@ class FXEditor extends FileView {
 		}
 
 		addHeadersToCurveEditor(sections);
-		//addEventToCurveEditor(sections);
 		addCurvesToCurveEditor(curvesToDraw);
+		addEventsToCurveEditor(eventsToDraw);
 
 		this.curveEditor.refreshTimeline(currentTime);
 		this.curveEditor.refreshOverlay(data.duration);