add overlay for fx duration

hide/comp/CurveEditor.hx

@@ -36,6 +36,7 @@ class CurveEditor extends Component {
 	var gridGroup : Element;
 	var graphGroup : Element;
 	var selectGroup : Element;
+	var overlayGroup : Element;
 
 	var tlHeight = 20;
 
@@ -46,7 +47,7 @@ class CurveEditor extends Component {
 	var previewKeys: Array<CurveKey> = [];
 
 	var currentTime: Float = 0.;
-
+	var duration: Float = 2000.;
 
 	public function new(undo, ?parent) {
 		super(parent,null);
@@ -63,6 +64,7 @@ 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");
 		selectGroup = svg.group(root, "selection-overlay");
 		tlGroup = svg.group(root, "tlgroup");
@@ -133,6 +135,7 @@ class CurveEditor extends Component {
 				updateMouse(e);
 				lastX = e.clientX;
 				refreshTimeline(currentTime);
+				refreshOverlay(duration);
 				//refreshTimeline(true);
 				//afterPan(true);
 			});
@@ -149,6 +152,7 @@ class CurveEditor extends Component {
 				e.preventDefault();
 				e.stopPropagation();
 				refreshTimeline(currentTime);
+				refreshOverlay(duration);
 				//afterPan(false);
 			});
 			e.preventDefault();
@@ -470,6 +474,7 @@ class CurveEditor extends Component {
 			lastY = e.clientY;
 			setPan(xOffset, yOffset);
 			refreshTimeline();
+			refreshOverlay();
 		}, function(e) {
 			saveView();
 		});
@@ -581,6 +586,7 @@ class CurveEditor extends Component {
 		refreshGrid();
 		refreshGraph(anim);
 		refreshTimeline();
+		refreshOverlay();
 	}
 
 	public function refreshGrid() {
@@ -687,6 +693,20 @@ class CurveEditor extends Component {
 		svg.text(markersGroup, xt(this.currentTime), 14, '${rounderCurrTime}', { 'fill':'#e7ecf5', 'text-anchor':'middle', 'font':'10px sans-serif'});
 	}
 
+	public function refreshOverlay(?duration: Float) {
+		overlayGroup.empty();
+
+		if (!Math.isNaN(duration))
+			this.duration = duration;
+
+		var minX = xt(0) - 1;
+		var maxX = xt(this.duration);
+		svg.line(overlayGroup, minX, svg.element.height(), minX, 0, { stroke:'#000000', 'stroke-width':'1px' });
+		svg.line(overlayGroup, maxX, svg.element.height(), maxX, 0, { stroke:'#000000', 'stroke-width':'1px' });
+		svg.rect(overlayGroup, 0, 0, xt(0), svg.element.height(), { 'fill':'#000000', opacity:0.3});
+		svg.rect(overlayGroup, maxX, 0, svg.element.width(), svg.element.height(), { 'fill':'#000000', opacity:0.3});
+	}
+
 	public function refreshGraph(?anim: Bool = false, ?animKey: CurveKey) {
 		if(curves == null)
 			return;

hide/view/FXEditor.hx

@@ -818,8 +818,13 @@ class FXEditor extends FileView {
 
 	function onPrefabChange(p: PrefabElement, ?pname: String) {
 		if(p == data) {
+			if (this.curveEditor != null) {
+				previewMax = data.duration == 0 ? 5000 : data.duration;
+				this.curveEditor.refreshTimeline(currentTime);
+				this.curveEditor.refreshOverlay(data.duration);
+			}
+
 			previewMax = hxd.Math.min(data.duration == 0 ? 5000 : data.duration, previewMax);
-			refreshTimeline(false);
 
 			cullingPreview.radius = data.cullingRadius;
 		}
@@ -1216,6 +1221,12 @@ class FXEditor extends FileView {
 		var savedFoldList : Array<String> = getDisplayState("foldList") != null ? getDisplayState("foldList") : [];
 		var toFoldList : Array<{ el: Element, parentEl: Element }> = [];
 
+		var savedLockList : Array<String> = getDisplayState("lockList") != null ? getDisplayState("lockList") : [];
+		var toLockList : Array<{ parentEl: Element, curves: Array<Curve> }> = [];
+
+		var savedHiddenList : Array<String> = getDisplayState("hiddenList") != null ? getDisplayState("hiddenList") : [];
+		var toHiddenList : Array<{ parentEl: Element, curves: Array<Curve> }> = [];
+
 		var leftPanel = element.find(".left-fx-animpanel").first();
 		
 		function drawSection(parent : Element, section: Section, depth: Int) {
@@ -1249,6 +1260,11 @@ class FXEditor extends FileView {
 
 			function addVisibilityButtonListener(parentEl: Element, affectedCurves : Array<Curve>) {
 				var visibilityEl = parentEl.find(".visibility");
+				var saveKey = affectedCurves.length == 1 ? affectedCurves[0].getAbsPath(true) : parentEl.hasClass("section") ? section.root.getAbsPath(true) : affectedCurves[0].parent.getAbsPath(true);
+
+				if (savedHiddenList.contains(saveKey))
+					toHiddenList.push( {parentEl:parentEl, curves:affectedCurves} );
+
 				visibilityEl.click(function(e) {
 					// Update the value of visibilityEl since at this time
 					// the html tree might not be fully constructed
@@ -1256,11 +1272,17 @@ class FXEditor extends FileView {
 					var visible = visibilityEl.first().hasClass("ico-eye");
 					if (visible) {
 						visibilityEl.removeClass("ico-eye").addClass("ico-eye-slash");
+						
+						savedHiddenList = savedHiddenList.filter(hidden -> !StringTools.contains(hidden, saveKey));
+						savedHiddenList.push(saveKey);
 					}
 					else {
 						visibilityEl.removeClass("ico-eye-slash").addClass("ico-eye");
+						savedHiddenList = savedHiddenList.filter(hidden -> !StringTools.contains(saveKey, hidden));
 					}
 	
+					saveDisplayState("hiddenList", savedHiddenList);
+
 					for (c in affectedCurves)
 						c.hidden = visibilityEl.hasClass("ico-eye-slash");
 	
@@ -1270,20 +1292,33 @@ class FXEditor extends FileView {
 
 			function addLockButtonListener(parentEl: Element, affectedCurves : Array<Curve>) {
 				var lockEl = parentEl.find(".lock");
+				var saveKey = affectedCurves.length == 1 ? affectedCurves[0].getAbsPath(true) : parentEl.hasClass("section") ? section.root.getAbsPath(true) : affectedCurves[0].parent.getAbsPath(true);
+
+				if (savedLockList.contains(saveKey))
+					toLockList.push( {parentEl:parentEl, curves:affectedCurves} );
+
 				lockEl.click(function(e) {
 					// Update the value of lockEl since at this time
 					// the html tree might not be fully constructed
 					lockEl = parentEl.find(".lock");
 					var locked = lockEl.first().hasClass("ico-lock");
+					
 					if (locked) {
 						lockEl.removeClass("ico-lock").addClass("ico-unlock");
+
+						savedLockList = savedLockList.filter(lock -> !StringTools.contains(saveKey, lock));
 					}
 					else {
 						lockEl.removeClass("ico-unlock").addClass("ico-lock");
+
+						savedLockList = savedLockList.filter(lock -> !StringTools.contains(lock, saveKey));
+						savedLockList.push(saveKey);
 					}
 
+					saveDisplayState("lockList", savedLockList);
+
 					for (c in affectedCurves)
-						c.lock = lockEl.hasClass("ico-lock");
+						c.lock = lockEl.first().hasClass("ico-lock");
 
 					rebuildAnimPanel();
 				});
@@ -1318,8 +1353,6 @@ class FXEditor extends FileView {
 						
 						if (!savedFoldList.contains(section.root.getAbsPath(true)))
 							savedFoldList.push(section.root.getAbsPath(true));
-
-						toFoldList.push( {el:foldEl, parentEl: parentEl} );
 					}
 					else {
 						foldEl.removeClass("ico-angle-right").addClass("ico-angle-down");
@@ -1331,6 +1364,7 @@ class FXEditor extends FileView {
 					}
 
 					saveDisplayState("foldList", savedFoldList);
+					rebuildAnimPanel();
 				});
 			}
 
@@ -1448,6 +1482,22 @@ class FXEditor extends FileView {
 			fold.parentEl.children().find(".track-header").addClass("hidden");
 		}
 
+		for (lock in toLockList) {
+			var lockEl = lock.parentEl.find(".lock");
+			lockEl.removeClass("ico-unlock").addClass("ico-lock");
+
+			for (c in lock.curves)
+				c.lock = lockEl.first().hasClass("ico-lock");
+		}
+
+		for (hidden in toHiddenList) {
+			var visibilityEl = hidden.parentEl.find(".visibility");
+			visibilityEl.removeClass("ico-eye").addClass("ico-eye-slash");
+
+			for (c in hidden.curves)
+				c.hidden = visibilityEl.hasClass("ico-eye-slash");
+		}
+
 		var prefWidth = leftAnimPanel.getDisplayState("size");
 		if (prefWidth != null)
 			leftPanel.width(prefWidth);
@@ -1655,6 +1705,7 @@ class FXEditor extends FileView {
 		addCurvesToCurveEditor(curvesToDraw);
 
 		this.curveEditor.refreshTimeline(currentTime);
+		this.curveEditor.refreshOverlay(data.duration);
 	}
 
 	function startDrag(onMove: js.jquery.Event->Void, onStop: js.jquery.Event->Void, ?onKeyDown: js.jquery.Event->Void, ?onKeyUp: js.jquery.Event->Void) {
@@ -1985,8 +2036,10 @@ class FXEditor extends FileView {
 		}
 		if(!pauseButton.isDown()) {
 			currentTime += scene.speed * dt;
-			if(this.curveEditor != null)
+			if(this.curveEditor != null) {
 				this.curveEditor.refreshTimeline(currentTime);
+				this.curveEditor.refreshOverlay(data.duration);
+			}
 			if(currentTime >= previewMax) {
 				currentTime = previewMin;
 
@@ -2083,8 +2136,10 @@ class FXEditor extends FileView {
 
 		if(!pauseButton.isDown()) {
 			currentTime += scene.speed * dt;
-			if(this.curveEditor != null)
+			if(this.curveEditor != null) {
 				this.curveEditor.refreshTimeline(currentTime);
+				this.curveEditor.refreshOverlay(data.duration);
+			}
 			if(currentTime >= previewMax) {
 				currentTime = previewMin;
 
@@ -2230,7 +2285,6 @@ class FXEditor extends FileView {
 	function get_currentTime():Float {
 		return @:privateAccess this.curveEditor.currentTime;
 	}
-
 }