[animgraph] Anim list component

bin/style.css

@@ -3860,6 +3860,36 @@ hide-popover hide-content {
   border: 1px solid #fff;
   pointer-events: none;
 }
+.context-menu2 .search-bar,
+.fancy-search-bar {
+  background-color: #444;
+  border: 1px solid #666;
+  border-radius: 2px;
+  box-sizing: border-box;
+  position: relative;
+}
+.context-menu2 .search-bar input,
+.fancy-search-bar input {
+  color: #aaaaaa;
+  font-family: var(--default-font), Geneva, Tahoma, sans-serif;
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  margin: none;
+}
+.context-menu2 .search-bar input:focus,
+.fancy-search-bar input:focus {
+  outline: none;
+}
+.context-menu2 .search-bar:after,
+.fancy-search-bar:after {
+  color: #aaaaaa;
+  content: "\f002";
+  font-family: "FontAwesome";
+  position: absolute;
+  right: 6px;
+  top: 2px;
+}
 .context-menu2 {
   --offset-x: 4;
   --offset-y: 0;
@@ -3886,32 +3916,6 @@ hide-popover hide-content {
   right: 5px;
   margin: 0;
 }
-.context-menu2 .search-bar {
-  background-color: #444;
-  border: 1px solid #666;
-  border-radius: 2px;
-  box-sizing: border-box;
-  position: relative;
-}
-.context-menu2 .search-bar input {
-  color: #aaaaaa;
-  font-family: var(--default-font), Geneva, Tahoma, sans-serif;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  margin: none;
-}
-.context-menu2 .search-bar input:focus {
-  outline: none;
-}
-.context-menu2 .search-bar:after {
-  color: #aaaaaa;
-  content: "\f002";
-  font-family: "FontAwesome";
-  position: absolute;
-  right: 6px;
-  top: 2px;
-}
 .context-menu2 menu {
   max-height: min(500px, 90vh);
   overflow-y: auto;
@@ -4424,7 +4428,38 @@ blend-space-2d-root properties-container {
   padding: var(--basic-padding);
   display: flex;
   flex-direction: column;
-  flex-basis: 320px;
+  width: 320px;
   border-left: var(--basic-border);
   background-color: var(--bg-1);
 }
+blend-space-2d-root properties-container parameters-container {
+  flex-grow: 1;
+}
+.anim-list {
+  padding: var(--basic-padding);
+  border: var(--basic-border);
+  border-radius: var(--basic-border-radius);
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+.anim-list h1 {
+  font-size: 1em;
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+}
+.anim-list > ul {
+  flex-grow: 1;
+  overflow: auto;
+  width: 100%;
+  border: var(--basic-border);
+  border-radius: var(--basic-border-radius);
+  padding: var(--basic-padding);
+}
+.anim-list > ul > li {
+  border-radius: var(--basic-border-radius);
+}
+.anim-list > ul > li:hover {
+  background-color: var(--hover-highlight);
+}

bin/style.less

@@ -4537,6 +4537,38 @@ hide-popover {
 
 }
 
+.context-menu2 .search-bar, .fancy-search-bar{
+
+	background-color: #444;
+	border: 1px solid #666;
+	border-radius: 2px;
+	box-sizing: border-box;
+	position: relative;
+
+	input {
+		color: #aaaaaa;
+		font-family: var(--default-font), Geneva, Tahoma, sans-serif;
+		width: 100%;
+		box-sizing: border-box;
+
+		border: none;
+		margin: none;
+
+		&:focus {
+			outline: none;
+		}
+	}
+
+	&:after {
+		color: #aaaaaa;
+		content: "\f002";
+		font-family: "FontAwesome";
+		position: absolute;
+		right: 6px;
+		top: 2px;
+	}
+}
+
 .context-menu2 {
 	--offset-x: 4;
 	--offset-y: 0;
@@ -4567,38 +4599,6 @@ hide-popover {
 		margin: 0;
 	}
 
-	.search-bar {
-
-		background-color: #444;
-		border: 1px solid #666;
-		border-radius: 2px;
-		box-sizing: border-box;
-		position: relative;
-
-		input {
-			color: #aaaaaa;
-			font-family: var(--default-font), Geneva, Tahoma, sans-serif;
-			width: 100%;
-			box-sizing: border-box;
-
-			border: none;
-			margin: none;
-
-			&:focus {
-				outline: none;
-			}
-		}
-
-		&:after {
-			color: #aaaaaa;
-			content: "\f002";
-			font-family: "FontAwesome";
-			position: absolute;
-			right: 6px;
-			top: 2px;
-		}
-	}
-
 	menu {
 		max-height: min(500px, 90vh);
 		overflow-y: auto;
@@ -5034,6 +5034,7 @@ graph-editor-root {
 		flex-direction: column;
 		flex-basis: 300px;
 
+
 		border-left: var(--basic-border);
 
 		background-color: var(--bg-1);
@@ -5250,11 +5251,46 @@ blend-space-2d-root {
 
 		display: flex;
 		flex-direction: column;
-		flex-basis: 320px;
+		width: 320px;
 
 		border-left: var(--basic-border);
 
 		background-color: var(--bg-1);
+
+		parameters-container {
+			flex-grow: 1;
+		}
 	}
 
 }
+
+.anim-list {
+	padding: var(--basic-padding);
+	border: var(--basic-border);
+	border-radius: var(--basic-border-radius);
+	height: 400px;
+	display: flex;
+	flex-direction: column;
+	h1 {
+		font-size: 1em;
+		padding: 0;
+		margin: 0;
+		font-weight: normal;
+	}
+
+	> ul {
+		flex-grow: 1;
+		overflow: auto;
+		width: 100%;
+		border: var(--basic-border);
+		border-radius: var(--basic-border-radius);
+		padding: var(--basic-padding);
+
+		> li {
+			&:hover {
+				background-color: var(--hover-highlight);
+			}
+			border-radius: var(--basic-border-radius);
+		}
+	}
+}

hide/view/animgraph/AnimGraphEditor.hx

@@ -208,7 +208,6 @@ class AnimGraphEditor extends GenericGraphEditor {
 
                 e.dataTransfer.setData("index", '${paramIndex}');
                 e.dataTransfer.dropEffect = "move";
-                trace("Dragstart", e.dataTransfer.getData("index"));
             }
 
             inline function isAfter(e) {

hide/view/animgraph/AnimList.hx

@@ -0,0 +1,51 @@
+package hide.view.animgraph;
+
+class AnimList extends hide.comp.Component {
+	public static final dragEventKey = "animlist.path";
+
+	var paths : Array<String> = [];
+	var filter = "";
+
+	public function new(parent, el, paths: Array<String>) {
+		super(parent, el);
+		this.paths = paths;
+		element.addClass("anim-list");
+		element.html('
+			<h1>Animations</h1>
+			<div class="fancy-search-bar">
+				<input type="text"/>
+			</div>
+			<ul>
+			</ul>
+		');
+
+		var filterElem = element.find("input");
+
+		filterElem.get(0).onkeyup = (e) -> {
+			filter = filterElem.val();
+			refreshList();
+		};
+
+		refreshList();
+	}
+
+	public function refreshList() {
+		var list = element.find("ul");
+		list.html("");
+		var lowFilter = filter.toLowerCase();
+		for (path in paths) {
+			var rel = ide.makeRelative(path);
+			if (filter.length > 0 && !StringTools.contains(rel.toLowerCase(), lowFilter))
+				continue;
+
+			var item = new Element('<li draggable="true">$rel</li>').appendTo(list);
+
+            item.get(0).ondragstart = (e: js.html.DragEvent) -> {
+                e.dataTransfer.setDragImage(item.get(0), Std.int(item.width()), 0);
+
+                e.dataTransfer.setData(dragEventKey, rel);
+                e.dataTransfer.dropEffect = "link";
+            }
+		}
+	}
+}

hide/view/animgraph/BlendSpace2DEditor.hx

@@ -238,7 +238,21 @@ class BlendSpace2DEditor extends hide.view.FileView {
 					hide.comp.ContextMenu.createFromEvent(e, options);
 				}
 
+				svg.ondragover = (e:js.html.DragEvent) -> {
+					if (e.dataTransfer.types.contains(AnimList.dragEventKey)) {
+						e.preventDefault();
+					}
+				}
+
+				svg.ondrop = (e:js.html.DragEvent) -> {
+					if (e.dataTransfer.types.contains(AnimList.dragEventKey)) {
+						e.preventDefault();
 
+							var pos = getPointPos(e.clientX, e.clientY, true);
+							var newPoint = {x: pos.x, y: pos.y, animPath: e.dataTransfer.getData(AnimList.dragEventKey)};
+							addPoint(newPoint, true);
+					}
+				}
 			}
 			panel.onResize = refreshGraph;
 
@@ -254,10 +268,11 @@ class BlendSpace2DEditor extends hide.view.FileView {
 			}
 		}
 
-		propertiesContainer = new hide.Element("<properties-container></properties-container>").appendTo(root).addClass("hide-properties");
+		propertiesContainer = new hide.Element("<properties-container></properties-container>").appendTo(root);
 		{
-			new Element("<h1>Parameters</h1>").appendTo(propertiesContainer);
-			propsEditor = new hide.comp.PropsEditor(undo, propertiesContainer);
+			var paramContainer = new Element('<parameters-container></parameters-container>').appendTo(propertiesContainer).addClass("hide-properties");
+			new Element("<h1>Parameters</h1>").appendTo(paramContainer);
+			propsEditor = new hide.comp.PropsEditor(undo, paramContainer);
 			refreshPropertiesPannel();
 		}
 		refreshGraph();
@@ -365,6 +380,8 @@ class BlendSpace2DEditor extends hide.view.FileView {
 			var first = AnimGraphEditor.gatherAllPreviewModels(blendSpace2D.animFolder)[0];
 			scenePreview.setObjectPath(first);
 		}
+
+		var animList = new AnimList(propertiesContainer, null, scenePreview.listAnims(blendSpace2D.animFolder));
     }
 
 	function deletePoint(index: Int) {
@@ -388,14 +405,15 @@ class BlendSpace2DEditor extends hide.view.FileView {
 		function exec(isUndo: Bool) {
 			if (!isUndo) {
 				blendSpace2D.points.insert(index, point);
+				blendSpace2D.triangulate();
 				if (select)
 					setSelection(index);
 			} else {
 				blendSpace2D.points.splice(index, 1);
+				blendSpace2D.triangulate();
 				if (select)
 					setSelection(prevSelection);
 			}
-			blendSpace2D.triangulate();
 			refreshGraph();
 		}
 		exec(false);