make left anim panel resizable and scrollable

bin/style.css

@@ -1257,27 +1257,20 @@ input[type=checkbox]:checked:after {
   min-height: 120px;
   max-height: 800px;
   position: relative;
+  display: flex;
+  flex-direction: row;
 }
 .fx-animpanel .left-fx-animpanel {
-  position: absolute;
-  top: 20px;
-  left: 0px;
-  width: 200px;
-  height: 100%;
-  overflow: hidden;
+  margin-top: 20px;
+  min-width: 200px;
+  max-width: 700px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 .fx-animpanel .right-fx-animpanel {
-  position: absolute;
-  top: 0px;
-  left: 200px;
-  right: 0px;
-  bottom: 0px;
   overflow: hidden;
-}
-.fx-animpanel .anim-scroll {
-  overflow-y: scroll;
-  overflow-x: hidden;
-  height: 400px;
+  height: 100%;
+  flex: 1;
 }
 .fx-animpanel .top-bar {
   margin-left: 200px;
@@ -1379,6 +1372,7 @@ input[type=checkbox]:checked:after {
   position: relative;
   background: #4a4a4a;
   text-align: left;
+  white-space: nowrap;
 }
 .fx-animpanel .tracks-header .name {
   padding: 1px;
@@ -1386,9 +1380,8 @@ input[type=checkbox]:checked:after {
   padding-right: 5px;
 }
 .fx-animpanel .tracks-header .abspath {
-  position: absolute;
+  position: relative;
   opacity: 0.5;
-  left: 200px;
 }
 .fx-animpanel .tracks-header :first-child.track-button {
   padding-left: 10px;

bin/style.less

@@ -1361,37 +1361,28 @@ input[type=checkbox] {
 	min-height: 120px;
 	max-height: 800px;
 	position: relative;
+	display: flex;
+    flex-direction: row;
 
 	.left-fx-animpanel
 	{
-		position: absolute;
-		top: @timelineHeight;
-		left: 0px;
-		width: @leftPanelWidth;
-		height: 100%;
-		overflow: hidden;
+		margin-top: @timelineHeight;
+		min-width: @leftPanelWidth;
+		max-width: 700px;
+		overflow-y: auto;
+		overflow-x: hidden;
 	}
 
 	.right-fx-animpanel
 	{
-		position: absolute;
-		top: 0px;
-		left: @leftPanelWidth;
-		right: 0px;
-		bottom: 0px;
 		overflow: hidden;
-	}
-
-	.anim-scroll {
-		overflow-y: scroll;
-		overflow-x: hidden;
-		height: 400px;
+		height:100%;
+		flex: 1;
 	}
 
 	.top-bar {
 		margin-left: @leftPanelWidth;
 		position: relative;
-		//height: 100%;
 	}
 
 	.timeline {
@@ -1493,15 +1484,16 @@ input[type=checkbox] {
 		position: relative;
 		background: #4a4a4a;
 		text-align: left;
+		white-space: nowrap;
+		
 		.name {
 			padding: 1px;
 			padding-left: 5px;
 			padding-right: 5px;
 		}
 		.abspath {
-			position: absolute;
+			position: relative;
 			opacity: 0.5;
-			left: 200px;
 		}
 
 		:first-child.track-button {

hide/comp/ResizablePanel.hx

@@ -4,13 +4,21 @@ enum LayoutDirection {
 	Horizontal;
 	Vertical;
 }
+
+enum SplitterPosition {
+	Before;
+	After;
+}
+
 class ResizablePanel extends hide.comp.Component {
 
 	var layoutDirection : LayoutDirection;
+	var splitterPosition : SplitterPosition;
 
-	public function new(layoutDirection : LayoutDirection, element : Element) {
+	public function new(layoutDirection : LayoutDirection, element : Element, splitterPosition : SplitterPosition = Before) {
 		super(null, element);
 		this.layoutDirection = layoutDirection;
+		this.splitterPosition = splitterPosition;
 		var splitter = new Element('<div class="splitter"><div class="drag-handle"></div></div>');
 		switch (layoutDirection) {
 			case Horizontal:
@@ -18,7 +26,12 @@ class ResizablePanel extends hide.comp.Component {
 			case Vertical:
 				splitter.addClass("vertical");
 		}
-		splitter.insertBefore(element);
+
+		if (splitterPosition == Before)
+			splitter.insertBefore(element);
+		else
+			splitter.insertAfter(element);
+		
 		var handle = splitter.find(".drag-handle").first();
 		var drag = false;
 		var startSize = 0;
@@ -35,7 +48,13 @@ class ResizablePanel extends hide.comp.Component {
 		var scenePartition = element.parent();
 		scenePartition.mousemove((e) -> {
 			if (drag){
-				setSize(startSize - ((layoutDirection == Horizontal? e.clientX : e.clientY) - startPos));
+				var newSize = 0;
+				if (splitterPosition == Before)
+					newSize = startSize - ((layoutDirection == Horizontal? e.clientX : e.clientY) - startPos);
+				else 
+					newSize = startSize + ((layoutDirection == Horizontal? e.clientX : e.clientY) - startPos);
+
+				setSize(newSize);
 			}
 		});
 		scenePartition.mouseup((e) -> {

hide/view/FXEditor.hx

@@ -277,6 +277,7 @@ class FXEditor extends FileView {
 	var tools : hide.comp.Toolbar;
 	var treePanel : hide.comp.ResizablePanel;
 	var animPanel : hide.comp.ResizablePanel;
+	var leftAnimPanel : hide.comp.ResizablePanel;
 	var light : h3d.scene.fwd.DirLight;
 	var lightDirection = new h3d.Vector( 1, 2, -4 );
 
@@ -363,10 +364,8 @@ 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="right-fx-animpanel">
-							</div>
-							<div class="left-fx-animpanel">
-							</div>
+							<div class="left-fx-animpanel"></div>
+							<div class="right-fx-animpanel"></div>
 							<div class="overlay-container">
 								<div class="overlay"></div>
 							</div>
@@ -408,11 +407,16 @@ class FXEditor extends FileView {
 		treePanel.saveDisplayKey = "treeColumn";
 		treePanel.onResize = () -> @:privateAccess if( scene.window != null) scene.window.checkResize();
 
-		var fxPanel = element.find(".fx-animpanel").first();
+		var fxPanel = element.find(".fx-animpanel").first(); 
 		animPanel = new hide.comp.ResizablePanel(Vertical, fxPanel);
 		animPanel.saveDisplayKey = "animPanel";
 		animPanel.onResize = () -> @:privateAccess { if( scene.window != null) scene.window.checkResize(); if( this.curveEditor != null) this.curveEditor.refresh();}
 
+		var leftFxPanel = element.find(".left-fx-animpanel").first();
+		leftAnimPanel = new hide.comp.ResizablePanel(Horizontal, leftFxPanel, After);
+		leftAnimPanel.saveDisplayKey = "leftAnimPanel";
+		leftAnimPanel.onResize = () -> { @:privateAccess if( scene.window != null) scene.window.checkResize(); rebuildAnimPanel(); };
+
 		refreshLayout();
 		element.resize(function(e) {
 			refreshTimeline(false);
@@ -1113,7 +1117,6 @@ class FXEditor extends FileView {
 
 	function addCurvesToCurveEditor(curves: Array<Curve>){
 		var rightPanel = element.find(".right-fx-animpanel").first();
-		var leftPanel = element.find(".left-fx-animpanel").first();
 
 		if (this.curveEditor != null)
 			rightPanel.find(".hide-curve-editor").remove();
@@ -1422,6 +1425,10 @@ class FXEditor extends FileView {
 		for (sec in sections) {
 			drawSection(leftPanel, sec, 0);
 		}
+
+		var prefWidth = leftAnimPanel.getDisplayState("size");
+		if (prefWidth != null)
+			leftPanel.width(prefWidth);
 	}
 
 	function addEventsTrack(events: Array<IEvent>, tracksEl: Element) {