[animgraph] Drag & drop & UI imrpovements

bin/style.css

@@ -4407,6 +4407,7 @@ blend-space-2d-root main-panel preview-container .hide-toolbar2 {
 }
 blend-space-2d-root main-panel graph-container {
   height: 40%;
+  position: relative;
   background-color: var(--bg-1);
   margin: 16px;
 }
@@ -4446,6 +4447,14 @@ blend-space-2d-root main-panel graph-container svg .preview-axis {
   stroke: #008a00;
   stroke-width: 2;
 }
+blend-space-2d-root main-panel graph-container drag-handler {
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+}
 blend-space-2d-root properties-container {
   padding: var(--basic-padding);
   display: flex;
@@ -4470,14 +4479,15 @@ blend-space-2d-root properties-container .hide-properties input {
 blend-space-2d-root properties-container .hide-properties dl {
   display: grid;
   grid-template-columns: 6em minmax(0, 1fr);
-  row-gap: 2px;
-  column-gap: 1em;
+  row-gap: 1px;
+  column-gap: 0.5em;
   width: 100%;
 }
 blend-space-2d-root properties-container .hide-properties dl > div {
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
+  align-items: center;
 }
 blend-space-2d-root properties-container .hide-properties dl > div > dt {
   width: unset;

bin/style.less

@@ -5219,6 +5219,8 @@ blend-space-2d-root {
 		graph-container {
 			height: 40%;
 
+			position: relative;
+
 			background-color: var(--bg-1);
 			margin: 16px;
 
@@ -5267,6 +5269,15 @@ blend-space-2d-root {
 					stroke-width: 2;
 				}
 			}
+
+			drag-handler {
+				z-index: 1;
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				right: 0;
+				top: 0;
+			}
 		}
 	}
 
@@ -5300,14 +5311,15 @@ blend-space-2d-root {
 			dl {
 				display: grid;
 				grid-template-columns: 6em minmax(0, 1fr);
-				row-gap: 2px;
-				column-gap: 1em;
+				row-gap: 1px;
+				column-gap: 0.5em;
 				width: 100%;
 
 				> div {
 					display: grid;
 					grid-column: 1 / -1;
 					grid-template-columns: subgrid;
+					align-items: center;
 					> dt {
 						width: unset;
 						text-align: right;

hide/view/animgraph/BlendSpace2DEditor.hx

@@ -92,7 +92,10 @@ class BlendSpace2DEditor extends hide.view.FileView {
 				var movingPreview = false;
 				var svg: js.html.svg.SVGElement = cast graph.element.get(0);
 
-				svg.onpointerdown = (e:js.html.PointerEvent) -> {
+				// We use a div instead to catch the drag event instead of the svg because the svg getting repainted messes with the mouse cursor drag preview
+				var dragHandler = new Element("<drag-handler>").appendTo(graphContainer).get(0);
+
+				dragHandler.onpointerdown = (e:js.html.PointerEvent) -> {
 					if (e.button != 0)
 						return;
 
@@ -115,11 +118,14 @@ class BlendSpace2DEditor extends hide.view.FileView {
 							return;
 					}
 
-					svg.setPointerCapture(e.pointerId);
+					dragHandler.setPointerCapture(e.pointerId);
 					e.preventDefault();
 				}
 
-				svg.onpointermove = (e:js.html.PointerEvent) -> {
+
+
+
+				dragHandler.onpointermove = (e:js.html.PointerEvent) -> {
 					if (movingPreview) {
 						var pt = getPointPos(e.clientX, e.clientY, false);
 
@@ -161,7 +167,7 @@ class BlendSpace2DEditor extends hide.view.FileView {
 					refreshGraph();
 				}
 
-				svg.onpointerup = (e:js.html.PointerEvent) -> {
+				dragHandler.onpointerup = (e:js.html.PointerEvent) -> {
 					if (movingPreview) {
 						movingPreview = false;
 						refreshPropertiesPannel();
@@ -199,7 +205,7 @@ class BlendSpace2DEditor extends hide.view.FileView {
 					movedPoint = -1;
 				}
 
-				svg.oncontextmenu = (e:js.html.MouseEvent) -> {
+				dragHandler.oncontextmenu = (e:js.html.MouseEvent) -> {
 					e.preventDefault();
 
 					var options : Array<hide.comp.ContextMenu.MenuItem> = [];
@@ -238,18 +244,48 @@ class BlendSpace2DEditor extends hide.view.FileView {
 					hide.comp.ContextMenu.createFromEvent(e, options);
 				}
 
-				svg.ondragover = (e:js.html.DragEvent) -> {
+				dragHandler.ondragover = (e:js.html.DragEvent) -> {
 					if (e.dataTransfer.types.contains(AnimList.dragEventKey)) {
 						e.preventDefault();
+
+						var mouse = inline new h2d.col.Point(e.clientX - cachedRect.x, e.clientY - cachedRect.y);
+
+						hoverPoint = -1;
+						for (id => point in blendSpace2D.points) {
+							var pt = inline new h2d.col.Point(localXToGraph(point.x), localYToGraph(point.y));
+							if (mouse.distanceSq(pt) < pointRadius * pointRadius) {
+								hoverPoint = id;
+								break;
+							}
+						}
+
+						refreshGraph();
 					}
 				}
 
-				svg.ondrop = (e:js.html.DragEvent) -> {
+				dragHandler.ondrop = (e:js.html.DragEvent) -> {
 					if (e.dataTransfer.types.contains(AnimList.dragEventKey)) {
+
+						var path = e.dataTransfer.getData(AnimList.dragEventKey);
+						if (path.length <= 0)
+							return;
+
 						e.preventDefault();
 
-							var pos = getPointPos(e.clientX, e.clientY, true);
-							addPoint({x: pos.x, y: pos.y, animPath: e.dataTransfer.getData(AnimList.dragEventKey)}, true);
+						if (hoverPoint >= 0) {
+							var old = blendSpace2D.points[hoverPoint].animPath;
+							blendSpace2D.points[hoverPoint].animPath = path;
+							undo.change(Field(blendSpace2D.points[hoverPoint], "animPath", old), () -> {
+								refreshPropertiesPannel();
+								refreshPreviewAnimation();
+							});
+							refreshPropertiesPannel();
+							refreshPreviewAnimation();
+						}
+						else {
+							var pos = getPointPos(e.clientX, e.clientY, false);
+							addPoint({x: pos.x, y: pos.y, animPath: path}, true);
+						}
 					}
 				}
 			}
@@ -390,12 +426,37 @@ class BlendSpace2DEditor extends hide.view.FileView {
 								blendSpace2D.points[selectedPoint].animPath = path;
 								undo.change(Field(blendSpace2D.points[selectedPoint], "animPath", old), () -> {
 									button.label = blendSpace2D.points[selectedPoint].animPath;
+									refreshPreviewAnimation();
 								});
+								button.label = blendSpace2D.points[selectedPoint].animPath;
+								refreshPreviewAnimation();
 							}, true);
 						}
 					}
 				], {search: Visible, autoWidth: true});
 			};
+
+			button.element.get(0).ondragover = (e:js.html.DragEvent) -> {
+				if (e.dataTransfer.types.contains(AnimList.dragEventKey))
+					e.preventDefault();
+			};
+
+			button.element.get(0).ondrop = (e:js.html.DragEvent) -> {
+				var data = e.dataTransfer.getData(AnimList.dragEventKey);
+				if (data.length == 0)
+					return;
+				e.preventDefault();
+
+				var old = blendSpace2D.points[selectedPoint].animPath;
+				blendSpace2D.points[selectedPoint].animPath = data;
+				undo.change(Field(blendSpace2D.points[selectedPoint], "animPath", old), () -> {
+					button.label = blendSpace2D.points[selectedPoint].animPath;
+					refreshPreviewAnimation();
+				});
+
+				button.label = blendSpace2D.points[selectedPoint].animPath;
+				refreshPreviewAnimation();
+			};
 		}
 
 		propsEditor.add(new hide.Element('
@@ -474,7 +535,7 @@ class BlendSpace2DEditor extends hide.view.FileView {
 			} else {
 				blendSpace2D.points.splice(index, 1);
 				blendSpace2D.triangulate();
-				if (select)
+				if (select || selectedPoint == index)
 					setSelection(prevSelection);
 			}
 			refreshGraph();