Merge pull request #1711 from gavin-ts/unfilled-triangle-arrowhead

add unfilled triangle arrowhead

ci/release/changelogs/next.md

@@ -1,6 +1,7 @@
 #### Features 🚀
 
 - ELK now routes `sql_table` edges to the exact columns (ty @landmaj) [#1681](https://github.com/terrastruct/d2/pull/1681)
+- Adds new unfilled triangle arrowhead. [#1711](https://github.com/terrastruct/d2/pull/1711)
 
 #### Improvements 🧹
 

d2exporter/export.go

@@ -202,7 +202,7 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection
 
 	if edge.SrcArrow {
 		connection.SrcArrow = d2target.DefaultArrowhead
-		if edge.SrcArrowhead != nil && edge.SrcArrowhead.Shape.Value != "" {
+		if edge.SrcArrowhead != nil {
 			connection.SrcArrow = edge.SrcArrowhead.ToArrowhead()
 		}
 	}
@@ -220,7 +220,7 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection
 	}
 	if edge.DstArrow {
 		connection.DstArrow = d2target.DefaultArrowhead
-		if edge.DstArrowhead != nil && edge.DstArrowhead.Shape.Value != "" {
+		if edge.DstArrowhead != nil {
 			connection.DstArrow = edge.DstArrowhead.ToArrowhead()
 		}
 	}

d2graph/d2graph.go

@@ -177,13 +177,10 @@ func (a *Attributes) ApplyTextTransform() {
 }
 
 func (a *Attributes) ToArrowhead() d2target.Arrowhead {
-	if a.Shape.Value == "" {
-		return d2target.NoArrowhead
-	}
-
-	filled := false
+	var filled *bool
 	if a.Style.Filled != nil {
-		filled, _ = strconv.ParseBool(a.Style.Filled.Value)
+		v, _ := strconv.ParseBool(a.Style.Filled.Value)
+		filled = go2.Pointer(v)
 	}
 	return d2target.ToArrowhead(a.Shape.Value, filled)
 }

d2renderers/d2svg/d2svg.go

@@ -138,6 +138,29 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
 			)
 		}
 		path = polygonEl.Render()
+	case d2target.UnfilledTriangleArrowhead:
+		polygonEl := d2themes.NewThemableElement("polygon")
+		polygonEl.Fill = d2target.BG_COLOR
+		polygonEl.Stroke = connection.Stroke
+		polygonEl.ClassName = "connection"
+		polygonEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
+
+		inset := strokeWidth / 2
+		if isTarget {
+			polygonEl.Points = fmt.Sprintf("%f,%f %f,%f %f,%f",
+				inset, inset,
+				width-inset, height/2.0,
+				inset, height-inset,
+			)
+		} else {
+			polygonEl.Points = fmt.Sprintf("%f,%f %f,%f %f,%f",
+				width-inset, inset,
+				inset, height/2.0,
+				width-inset, height-inset,
+			)
+		}
+		path = polygonEl.Render()
+
 	case d2target.TriangleArrowhead:
 		polygonEl := d2themes.NewThemableElement("polygon")
 		polygonEl.Fill = connection.Stroke

d2target/d2target.go

@@ -720,13 +720,14 @@ func (c Connection) GetID() string {
 type Arrowhead string
 
 const (
-	NoArrowhead            Arrowhead = "none"
-	ArrowArrowhead         Arrowhead = "arrow"
-	TriangleArrowhead      Arrowhead = "triangle"
-	DiamondArrowhead       Arrowhead = "diamond"
-	FilledDiamondArrowhead Arrowhead = "filled-diamond"
-	CircleArrowhead        Arrowhead = "circle"
-	FilledCircleArrowhead  Arrowhead = "filled-circle"
+	NoArrowhead               Arrowhead = "none"
+	ArrowArrowhead            Arrowhead = "arrow"
+	UnfilledTriangleArrowhead Arrowhead = "unfilled-triangle"
+	TriangleArrowhead         Arrowhead = "triangle"
+	DiamondArrowhead          Arrowhead = "diamond"
+	FilledDiamondArrowhead    Arrowhead = "filled-diamond"
+	CircleArrowhead           Arrowhead = "circle"
+	FilledCircleArrowhead     Arrowhead = "filled-circle"
 
 	// For fat arrows
 	LineArrowhead Arrowhead = "line"
@@ -740,29 +741,28 @@ const (
 	DefaultArrowhead Arrowhead = TriangleArrowhead
 )
 
+// valid values for arrowhead.shape
 var Arrowheads = map[string]struct{}{
-	string(NoArrowhead):            {},
-	string(ArrowArrowhead):         {},
-	string(TriangleArrowhead):      {},
-	string(DiamondArrowhead):       {},
-	string(FilledDiamondArrowhead): {},
-	string(CircleArrowhead):        {},
-	string(FilledCircleArrowhead):  {},
-	string(CfOne):                  {},
-	string(CfMany):                 {},
-	string(CfOneRequired):          {},
-	string(CfManyRequired):         {},
-}
-
-func ToArrowhead(arrowheadType string, filled bool) Arrowhead {
+	string(NoArrowhead):       {},
+	string(ArrowArrowhead):    {},
+	string(TriangleArrowhead): {},
+	string(DiamondArrowhead):  {},
+	string(CircleArrowhead):   {},
+	string(CfOne):             {},
+	string(CfMany):            {},
+	string(CfOneRequired):     {},
+	string(CfManyRequired):    {},
+}
+
+func ToArrowhead(arrowheadType string, filled *bool) Arrowhead {
 	switch arrowheadType {
 	case string(DiamondArrowhead):
-		if filled {
+		if filled != nil && *filled {
 			return FilledDiamondArrowhead
 		}
 		return DiamondArrowhead
 	case string(CircleArrowhead):
-		if filled {
+		if filled != nil && *filled {
 			return FilledCircleArrowhead
 		}
 		return CircleArrowhead
@@ -771,6 +771,9 @@ func ToArrowhead(arrowheadType string, filled bool) Arrowhead {
 	case string(ArrowArrowhead):
 		return ArrowArrowhead
 	case string(TriangleArrowhead):
+		if filled != nil && !(*filled) {
+			return UnfilledTriangleArrowhead
+		}
 		return TriangleArrowhead
 	case string(CfOne):
 		return CfOne
@@ -781,6 +784,10 @@ func ToArrowhead(arrowheadType string, filled bool) Arrowhead {
 	case string(CfManyRequired):
 		return CfManyRequired
 	default:
+		if DefaultArrowhead == TriangleArrowhead &&
+			filled != nil && !(*filled) {
+			return UnfilledTriangleArrowhead
+		}
 		return DefaultArrowhead
 	}
 }
@@ -799,6 +806,11 @@ func (arrowhead Arrowhead) Dimensions(strokeWidth float64) (width, height float6
 		baseHeight = 4
 		widthMultiplier = 3
 		heightMultiplier = 4
+	case UnfilledTriangleArrowhead:
+		baseWidth = 7
+		baseHeight = 7
+		widthMultiplier = 3
+		heightMultiplier = 4
 	case LineArrowhead:
 		widthMultiplier = 5
 		heightMultiplier = 8

e2etests/stable_test.go

@@ -2868,6 +2868,7 @@ y: profits {
 		loadFromFile(t, "grid_outside_labels"),
 		loadFromFile(t, "grid_edge_across_cell"),
 		loadFromFile(t, "nesting_power"),
+		loadFromFile(t, "unfilled_triangle"),
 	}
 
 	runa(t, tcs)

e2etests/testdata/files/unfilled_triangle.d2

@@ -0,0 +1,16 @@
+direction: right
+
+A <-> B: default {
+  source-arrowhead.style.filled: false
+  target-arrowhead.style.filled: false
+}
+C <-> D: triangle {
+  source-arrowhead: {
+    shape: triangle
+    style.filled: false
+  }
+  target-arrowhead: {
+    shape: triangle
+    style.filled: false
+  }
+}