FXE: editable markers

bin/style.css

@@ -776,12 +776,18 @@ input[type=checkbox]:checked:after {
   height: 100%;
   overflow: hidden;
 }
-.fx-animpanel .overlay-container .overlay .timeline {
+.fx-animpanel .overlay-container .overlay .time-marker {
   position: absolute;
   height: 100%;
   width: 1px;
   background: green;
 }
+.fx-animpanel .overlay-container .overlay .marker {
+  position: absolute;
+  height: 100%;
+  width: 1px;
+  background: #907a00;
+}
 .fx-animpanel .overlay-container .overlay .selection {
   position: absolute;
   height: 100%;
@@ -1212,8 +1218,8 @@ input[type=checkbox]:checked:after {
   box-shadow: 0px 0px 34px -9px black;
 }
 .graph-view #add-menu #results div.group:hover {
-  background: #474747!important;
-  color: #dadada!important;
+  background: #474747 !important;
+  color: #dadada !important;
   box-shadow: none;
 }
 .graph-view #add-menu #results div > span:first-child {
@@ -1261,8 +1267,8 @@ input[type=checkbox]:checked:after {
   box-shadow: 0px 0px 34px -9px black;
 }
 .graph-view #context-menu #options div.group:hover {
-  background: #474747!important;
-  color: #dadada!important;
+  background: #474747 !important;
+  color: #dadada !important;
   box-shadow: none;
 }
 .graph-view #context-menu #options div > span:first-child {

bin/style.less

@@ -857,12 +857,18 @@ input[type=checkbox] {
 			width: 100%;
 			height: 100%;
 			overflow: hidden;
-			.timeline {
+			.time-marker {
 				position: absolute;
 				height: 100%;
 				width: 1px;
 				background: green;
 			}
+			.marker {
+				position: absolute;
+				height: 100%;
+				width: 1px;
+				background: #907a00;
+			}
 			.selection {
 				position: absolute;
 				height: 100%;

hide/view/FXEditor.hx

@@ -346,17 +346,40 @@ class FXEditor extends FileView {
 		var timeline = element.find(".timeline");
 		var sMin = 0.0;
 		var sMax = 0.0;
+		timeline.contextmenu(function(e) {
+			var offset = e.clientX - timeline.offset().left;
+			var marker = data.markers.find(m -> hxd.Math.abs(offset - xt(m.t)) < 4);
+			new hide.comp.ContextMenu([
+			{ label : "Add marker", click : function() {
+				if(data.markers == null)
+					data.markers = [];
+				var prevVal = data.markers.copy();
+				data.markers.push({t : ixt(e.clientX - timeline.offset().left)});
+				undo.change(Field(data, "markers", prevVal), refreshTimeline.bind(false));
+				refreshTimeline(false);
+			} },
+			{ label : "Remove marker", enabled: marker != null, click : function() {
+				var prevVal = data.markers.copy();
+				data.markers.remove(marker);
+				undo.change(Field(data, "markers", prevVal), refreshTimeline.bind(false));
+				refreshTimeline(false);
+			} }
+			]);
+			e.preventDefault();
+			return false;
+		});
 		timeline.mousedown(function(e) {
 			var lastX = e.clientX;
 			var shift = e.shiftKey;
 			var ctrl = e.ctrlKey;
 			var xoffset = timeline.offset().left;
+			var clickTime = ixt(e.clientX - xoffset);
 
 			if(shift) {
-				sMin = hxd.Math.max(0, ixt(e.clientX - xoffset));
+				sMin = hxd.Math.max(0, clickTime);
 			}
 			else if(ctrl) {
-				previewMin = hxd.Math.max(0, ixt(e.clientX - xoffset));
+				previewMin = hxd.Math.max(0, clickTime);
 			}
 
 			function updateMouse(e: js.jquery.Event) {
@@ -390,6 +413,26 @@ class FXEditor extends FileView {
 				}
 			}
 
+			if(data.markers != null) {
+				var marker = data.markers.find(m -> hxd.Math.abs(xt(clickTime) - xt(m.t)) < 4);
+				if(marker != null) {
+					var prevVal = marker.t;
+					startDrag(function(e) {
+						updateMouse(e);
+						var x = ixt(e.clientX - xoffset);
+						x = hxd.Math.max(0, x);
+						x = untyped parseFloat(x.toFixed(5));
+						marker.t = x;
+						refreshTimeline(true);
+					}, function(e) {
+						undo.change(Field(marker, "t", prevVal), refreshTimeline.bind(false));
+					});
+					e.preventDefault();
+					e.stopPropagation();
+					return;
+				}
+			}
+
 			element.mousemove(function(e: js.jquery.Event) {
 				updateMouse(e);
 				lastX = e.clientX;
@@ -574,9 +617,16 @@ class FXEditor extends FileView {
 
 		var overlay = element.find(".overlay");
 		overlay.empty();
-		timeLineEl = new Element('<span class="timeline"></span>').appendTo(overlay);
+		timeLineEl = new Element('<span class="time-marker"></span>').appendTo(overlay);
 		timeLineEl.css({left: xt(currentTime)});
 
+		if(data.markers != null) {
+			for(m in data.markers) {
+				var el = new Element('<span class="marker"></span>').appendTo(overlay);
+				el.css({left: xt(m.t)});
+			}
+		}
+
 		var select = new Element('<span class="selection"></span>').appendTo(overlay);
 		select.css({left: xt(selectMin), width: xt(selectMax) - xt(selectMin)});
 

hrt/prefab/fx/BaseFX.hx

@@ -53,6 +53,7 @@ class BaseFX extends hrt.prefab.Library {
 	public var duration : Float;
 	public var scriptCode : String;
 	public var cullingRadius : Float;
+	public var markers : Array<{t: Float}> = [];
 
 	public function new() {
 		super();
@@ -64,12 +65,16 @@ class BaseFX extends hrt.prefab.Library {
 	override function save() {
 		var obj : Dynamic = super.save();
 		obj.duration = duration;
+		if(markers != null && markers.length > 0)
+			obj.markers = markers.copy();
 		return obj;
 	}
 
 	override function load( obj : Dynamic ) {
 		super.load(obj);
 		duration = obj.duration == null ? 5.0 : obj.duration;
+		if(obj.markers != null)
+			markers = obj.markers;
 	}
 
 	public static function makeShaderParams(ctx: Context, shaderElt: hrt.prefab.Shader) {