add help to curve editor

bin/style.css

@@ -1260,6 +1260,17 @@ input[type=checkbox]:checked:after {
   display: flex;
   flex-direction: row;
 }
+.fx-animpanel .help-button {
+  position: absolute;
+  left: 5px;
+  bottom: 5px;
+  border-color: #3d3d3d;
+  background: #545454;
+  border-right-width: 1px;
+  border-radius: 4px;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
+  padding: 5px 8px 5px 8px;
+}
 .fx-animpanel .left-fx-animpanel {
   margin-top: 20px;
   min-width: 200px;

bin/style.less

@@ -1364,6 +1364,19 @@ input[type=checkbox] {
 	display: flex;
     flex-direction: row;
 
+	.help-button
+	{
+		position: absolute;
+		left: 5px;
+		bottom: 5px;
+		border-color: #3d3d3d;
+		background: #545454;
+		border-right-width: 1px;
+		border-radius: 4px;
+		box-shadow: 1px 1px 1px rgba(.0,.0,.0,.75);
+		padding: 5px 8px 5px 8px;
+	}
+
 	.left-fx-animpanel
 	{
 		margin-top: @timelineHeight;

hide/comp/SceneEditor.hx

@@ -353,7 +353,7 @@ class IconVisibilityPopup extends Popup {
 class HelpPopup extends Popup {
 	var editor : SceneEditor;
 
-	public function new(?parent : Element, ?root : Element, editor: SceneEditor) {
+	public function new(?parent : Element, ?root : Element, editor: SceneEditor, ?shortcuts: Array<{name:String, shortcut:String}>) {
         super(parent, root);
         this.editor = editor;
 
@@ -362,13 +362,21 @@ class HelpPopup extends Popup {
         popup.css("max-width", "300px");
 
 		var form_div = new Element("<div>").addClass("form-grid").appendTo(popup);
-		var categories = editor.view.keys.sortDocCategories(editor.view.config);
 
-		for (cat => shortcuts in categories) {
+		if (shortcuts != null) {
+			for (shortcut in shortcuts) {
+				form_div.append(new Element('<label>${shortcut.name}</label><span>${shortcut.shortcut}</span>'));
+			}
+
+			return;
+		}
+
+		var categories = editor.view.keys.sortDocCategories(editor.view.config);
+		for (cat => sc in categories) {
 			if (cat == "none")
 				continue;
 			form_div.append(new Element('<p style="grid-column: 1 / -1">$cat</p>'));
-			for (s in shortcuts) {
+			for (s in sc) {
 				form_div.append(new Element('<label>${s.name}</label><span>${s.shortcut}</span>'));
 			}
 		}

hide/view/FXEditor.hx

@@ -299,6 +299,7 @@ class FXEditor extends FileView {
 	var timelineLeftMargin = 10;
 	var xScale = 200.;
 	var xOffset = 0.;
+	var tlKeys: Array<{name:String, shortcut:String}> = [];
 
 	var pauseButton : hide.comp.Toolbar.ToolToggle;
 	@:isVar var currentTime(get, set) : Float;
@@ -364,6 +365,7 @@ class FXEditor extends FileView {
 					<div style="display: flex; flex-direction: column; flex: 1; overflow: hidden;">
 						<div class="flex heaps-scene"></div>
 						<div class="fx-animpanel">
+							<div class="help-button icon ico ico-question" title="help"></div>
 							<div class="left-fx-animpanel"></div>
 							<div class="right-fx-animpanel"></div>
 							<div class="overlay-container">
@@ -417,6 +419,31 @@ class FXEditor extends FileView {
 		leftAnimPanel.saveDisplayKey = "leftAnimPanel";
 		leftAnimPanel.onResize = () -> { @:privateAccess if( scene.window != null) scene.window.checkResize(); rebuildAnimPanel(); };
 
+		tlKeys.empty();
+		tlKeys.push({name:"Undo", shortcut:"Ctrl Z"});
+		tlKeys.push({name:"Drag / zoom on Y axis", shortcut:"Hold shift during action"});
+		tlKeys.push({name:"Drag / zoom on X axis", shortcut:"Hold alt during action"});
+		tlKeys.push({name:"Edit keyframe", shortcut:"Right-click"});
+		tlKeys.push({name:"Snap keyframe", shortcut:"Ctrl while dragging"});
+		tlKeys.push({name:"Zoom on curves", shortcut:"F"});
+		tlKeys.push({name:"Move in curve graph", shortcut:"Mouse wheel"});
+
+		var helpButton = element.find(".help-button").first();
+		var p : hide.comp.Popup = null;
+		helpButton.click(function(e) {
+			if (p == null) {
+				p = new hide.comp.SceneEditor.HelpPopup(null, helpButton, sceneEditor, tlKeys);
+				@:privateAccess p.popup.css({'position':'absolute', 'left':'30px','top':'800px'});
+				//p = open(el);
+				p.onClose = function() {
+					p = null;
+				}
+			}
+			else {
+				p.close();
+			}
+		});
+
 		refreshLayout();
 		element.resize(function(e) {
 			refreshTimeline(false);