Browse Source

[shgraph] better edge hitboxes

Clément Espeute 1 năm trước cách đây
mục cha
commit
7707a57a44
3 tập tin đã thay đổi với 42 bổ sung23 xóa
  1. 7 4
      bin/style.css
  2. 8 4
      bin/style.less
  3. 27 15
      hide/view/GraphEditor.hx

+ 7 - 4
bin/style.css

@@ -2377,11 +2377,14 @@ input[type=checkbox]:checked:after {
   stroke-width: 2;
   stroke: #c8c8c8;
   fill: transparent;
+  pointer-events: stroke;
 }
-.graph-view .heaps-scene svg .edge:not(.draft):hover,
-.graph-view .heaps-scene svg .edge:not(.draft).selected {
-  stroke-width: 5;
-  stroke: #72b4ff;
+.graph-view .heaps-scene svg .edge.hitbox {
+  stroke-width: 10;
+  stroke: transparent;
+}
+.graph-view .heaps-scene svg .edge.hitbox:hover {
+  stroke: rgba(114, 180, 255, 0.5);
 }
 .graph-view .heaps-scene svg .rect-selection {
   stroke: rgba(0, 0, 255, 0.7);

+ 8 - 4
bin/style.less

@@ -2693,11 +2693,15 @@ input[type=checkbox] {
 				stroke-width: 2;
 				stroke: rgb(200, 200, 200);
 				fill: transparent;
-			}
+				pointer-events: stroke;
 
-			.edge:not(.draft):hover, .edge:not(.draft).selected {
-				stroke-width: 5;
-				stroke: rgb(114, 180, 255);
+				&.hitbox {
+					stroke-width: 10;
+					stroke: transparent;
+					&:hover {
+						stroke: rgba(114, 180, 255, 0.5);
+					}
+				}
 			}
 
 			.rect-selection {

+ 27 - 15
hide/view/GraphEditor.hx

@@ -1558,20 +1558,29 @@ class GraphEditor extends hide.comp.Component {
 		var valueCurveY = 1;
 		var maxDistanceY = 900;
 
-		var curve = editorDisplay.straightCurve(null,
-							startX,
-							startY,
-							endX,
-							endY,
-							18,
-							0.25,
-							{})
-							.addClass("edge");
-		editorMatrix.prepend(curve);
-		if (isDraft)
-			curve.addClass("draft");
-		else if (packedOutput != null && packedInput != null) {
-			curve.on("pointerdown", function(e) {
+		var curves = editorDisplay.group(null);
+		editorMatrix.prepend(curves);
+
+		var curveViz = editorDisplay.straightCurve(curves,
+			startX,
+			startY,
+			endX,
+			endY,
+			18,
+			0.25,
+			{}).addClass("edge");
+
+		if (!isDraft && packedOutput != null && packedInput != null) {
+			var curveHitbox = editorDisplay.straightCurve(curves,
+				startX,
+				startY,
+				endX,
+				endY,
+				18,
+				0.25,
+				).addClass("edge").addClass("hitbox");
+
+			curveHitbox.on("pointerdown", function(e) {
 
 				if (e.button == 0) {
 					opEdge(packedOutput, packedInput, false, currentUndoBuffer);
@@ -1609,7 +1618,10 @@ class GraphEditor extends hide.comp.Component {
 			});
 		}
 
-		return curve;
+		if (isDraft)
+			curves.addClass("draft");
+
+		return curves;
 	}
 
 	function clearSelectionBoxesUndo(undoBuffer: UndoBuffer) {