d2target: add support for cross arrowhead

d2renderers/d2sketch/sketch.go

@@ -798,6 +798,13 @@ func ArrowheadJS(r *Runner, arrowhead d2target.Arrowhead, stroke string, strokeW
 			stroke,
 			stroke,
 		)
+	case d2target.CrossArrowhead:
+		arrowJS = fmt.Sprintf(
+			`node = rc.linearPath(%s, { strokeWidth: %d, stroke: "%s", seed: 3 })`,
+			`[[-6, -6], [6, 6], [0, 0], [-6, 6], [0, 0], [6, -6]]`,
+			strokeWidth,
+			stroke,
+		)
 	case d2target.CfManyRequired:
 		arrowJS = fmt.Sprintf(
 			// TODO why does fillStyle: "zigzag" error with path

d2renderers/d2svg/d2svg.go

@@ -285,6 +285,51 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection, i
 		}
 
 		path = circleEl.Render()
+	case d2target.CrossArrowhead:
+		inset := strokeWidth / 8
+		rotationAngle := math.Pi / 4
+		origin := geo.NewPoint(width/2, height/2)
+		newOrigin := geo.NewPoint(math.Cos(rotationAngle)*origin.X-math.Sin(rotationAngle)*origin.Y, math.Sin(rotationAngle)*origin.X+math.Cos(rotationAngle)*origin.Y)
+
+		crossEl := d2themes.NewThemableElement("polygon", inlineTheme)
+		crossEl.Points = fmt.Sprintf("%f,%f %f,%f %f,%f %f,%f, %f,%f %f,%f %f,%f %f,%f %f,%f %f,%f %f,%f %f,%f",
+			0., height/2+inset,
+			width/2-inset, height/2+inset,
+			width/2-inset, height,
+			width/2+inset, height,
+			width/2+inset, height/2+inset,
+			width, height/2+inset,
+			width, height/2-inset,
+			width/2+inset, height/2-inset,
+			width/2+inset, 0.,
+			width/2-inset, 0.,
+			width/2-inset, height/2-inset,
+			0., height/2-inset,
+		)
+		crossEl.Transform = fmt.Sprintf("translate(%f, %f) rotate(45)", -newOrigin.X+width/2, -newOrigin.Y+height/2)
+
+		childPathEl := d2themes.NewThemableElement("path", inlineTheme)
+		if isTarget {
+			childPathEl.D = fmt.Sprintf("M%f,%f %f,%f",
+				width/2, height/2,
+				width, height/2,
+			)
+		} else {
+			childPathEl.D = fmt.Sprintf("M%f,%f %f,%f",
+				width/2, height/2,
+				0., height/2,
+			)
+		}
+
+		gEl := d2themes.NewThemableElement("g", inlineTheme)
+		gEl.Fill = d2target.BG_COLOR
+		gEl.Stroke = connection.Stroke
+		gEl.ClassName = "connection"
+		gEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
+		gEl.Content = fmt.Sprintf("%s%s",
+			crossEl.Render(), childPathEl.Render(),
+		)
+		path = gEl.Render()
 	case d2target.CfOne, d2target.CfMany, d2target.CfOneRequired, d2target.CfManyRequired:
 		offset := 3.0 + float64(connection.StrokeWidth)*1.8
 

d2target/d2target.go

@@ -748,6 +748,7 @@ const (
 	FilledDiamondArrowhead    Arrowhead = "filled-diamond"
 	CircleArrowhead           Arrowhead = "circle"
 	FilledCircleArrowhead     Arrowhead = "filled-circle"
+	CrossArrowhead            Arrowhead = "cross"
 
 	// For fat arrows
 	LineArrowhead Arrowhead = "line"
@@ -772,6 +773,7 @@ var Arrowheads = map[string]struct{}{
 	string(CfMany):            {},
 	string(CfOneRequired):     {},
 	string(CfManyRequired):    {},
+	string(CrossArrowhead):    {},
 }
 
 func ToArrowhead(arrowheadType string, filled *bool) Arrowhead {
@@ -795,6 +797,8 @@ func ToArrowhead(arrowheadType string, filled *bool) Arrowhead {
 			return UnfilledTriangleArrowhead
 		}
 		return TriangleArrowhead
+	case string(CrossArrowhead):
+		return CrossArrowhead
 	case string(CfOne):
 		return CfOne
 	case string(CfMany):
@@ -844,6 +848,11 @@ func (arrowhead Arrowhead) Dimensions(strokeWidth float64) (width, height float6
 		baseHeight = 9
 		widthMultiplier = 5.5
 		heightMultiplier = 4.5
+	case CrossArrowhead:
+		baseWidth = 7
+		baseHeight = 7
+		widthMultiplier = 5
+		heightMultiplier = 5
 	case FilledCircleArrowhead, CircleArrowhead:
 		baseWidth = 8
 		baseHeight = 8

e2etests/stable_test.go

@@ -2881,6 +2881,7 @@ y: profits {
 		loadFromFile(t, "unfilled_triangle"),
 		loadFromFile(t, "grid_container_dimensions"),
 		loadFromFile(t, "grid_label_positions"),
+		loadFromFile(t, "cross_arrowhead"),
 	}
 
 	runa(t, tcs)

e2etests/testdata/files/cross_arrowhead.d2

@@ -0,0 +1,29 @@
+cross: {
+  start: ""
+  end: ""
+  start.1 <-> end.1: 1 {
+    style.stroke-width: 1
+    source-arrowhead.shape: cross
+    target-arrowhead.shape: cross
+  }
+  start.2 <-> end.2: 2 {
+    style.stroke-width: 2
+    source-arrowhead.shape: cross
+    target-arrowhead.shape: cross
+  }
+  start.4 <-> end.4: 4 {
+    style.stroke-width: 4
+    source-arrowhead.shape: cross
+    target-arrowhead.shape: cross
+  }
+  start.8 <-> end.8: 8 {
+    style.stroke-width: 8
+    source-arrowhead.shape: cross
+    target-arrowhead.shape: cross
+  }
+  start.15 <-> end.15: 15 {
+    style.stroke-width: 15
+    source-arrowhead.shape: cross
+    target-arrowhead.shape: cross
+  }
+}