Merge pull request #656 from gavin-ts/fix-sketch-arrowheads

render: fix sketch arrowheads

ci/release/changelogs/next.md

@@ -6,9 +6,11 @@
 
 - ELK layouts tuned to have better defaults. [#627](https://github.com/terrastruct/d2/pull/627)
 - Code snippets of unrecognized languages will render (just without syntax highlighting). [#650](https://github.com/terrastruct/d2/pull/650)
+- Adds sketched versions of arrowheads. [#656](https://github.com/terrastruct/d2/pull/656)
 
 #### Bugfixes ⛑️
 
 - Fixes arrowheads sometimes appearing broken in dagre layouts. [#649](https://github.com/terrastruct/d2/pull/649)
 - Fixes attributes being ignored for `sql_table` to `sql_table` connections. [#658](https://github.com/terrastruct/d2/pull/658)
 - Fixes tooltip/link attributes being ignored for `sql_table` and `class`. [#658](https://github.com/terrastruct/d2/pull/658)
+- Fixes arrowheads sometimes appearing broken with sketch on. [#656](https://github.com/terrastruct/d2/pull/656)

d2renderers/d2sketch/sketch.go

@@ -3,6 +3,7 @@ package d2sketch
 import (
 	"encoding/json"
 	"fmt"
+	"regexp"
 	"strings"
 
 	_ "embed"
@@ -33,6 +34,8 @@ fillStyle: "solid",
 bowing: 2,
 seed: 1,`
 
+var floatRE = regexp.MustCompile(`(\d+)\.(\d+)`)
+
 func (r *Runner) run(js string) (goja.Value, error) {
 	vm := (*goja.Runtime)(r)
 	return vm.RunString(js)
@@ -70,7 +73,7 @@ func Rect(r *Runner, shape d2target.Shape) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-	paths, err := computeRoughPaths(r, js)
+	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -95,7 +98,7 @@ func Oval(r *Runner, shape d2target.Shape) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, shape.Width/2, shape.Height/2, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-	paths, err := computeRoughPaths(r, js)
+	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -123,7 +126,7 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, path, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-		sketchPaths, err := computeRoughPaths(r, js)
+		sketchPaths, err := computeRoughPathData(r, js)
 		if err != nil {
 			return "", err
 		}
@@ -146,7 +149,7 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
 func Connection(r *Runner, connection d2target.Connection, path, attrs string) (string, error) {
 	roughness := 1.0
 	js := fmt.Sprintf(`node = rc.path("%s", {roughness: %f, seed: 1});`, path, roughness)
-	paths, err := computeRoughPaths(r, js)
+	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -173,7 +176,7 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-	paths, err := computeRoughPaths(r, js)
+	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -196,7 +199,7 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 		fill: "%s",
 		%s
 	});`, shape.Width, rowHeight, shape.Fill, baseRoughProps)
-	paths, err = computeRoughPaths(r, js)
+	paths, err = computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -275,7 +278,7 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 		js = fmt.Sprintf(`node = rc.line(%f, %f, %f, %f, {
 		%s
 	});`, rowBox.TopLeft.X, rowBox.TopLeft.Y, rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y, baseRoughProps)
-		paths, err = computeRoughPaths(r, js)
+		paths, err = computeRoughPathData(r, js)
 		if err != nil {
 			return "", err
 		}
@@ -301,7 +304,7 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
 		strokeWidth: %d,
 		%s
 	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
-	paths, err := computeRoughPaths(r, js)
+	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -325,7 +328,7 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
 		fill: "%s",
 		%s
 	});`, shape.Width, headerBox.Height, shape.Fill, baseRoughProps)
-	paths, err = computeRoughPaths(r, js)
+	paths, err = computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -372,7 +375,7 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
 	js = fmt.Sprintf(`node = rc.line(%f, %f, %f, %f, {
 %s
 	});`, rowBox.TopLeft.X, rowBox.TopLeft.Y, rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y, baseRoughProps)
-	paths, err = computeRoughPaths(r, js)
+	paths, err = computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
@@ -431,38 +434,242 @@ func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText str
 	return output
 }
 
-func computeRoughPaths(r *Runner, js string) ([]string, error) {
+func computeRoughPathData(r *Runner, js string) ([]string, error) {
 	if _, err := r.run(js); err != nil {
 		return nil, err
 	}
-	return extractPaths(r)
+	roughPaths, err := extractRoughPaths(r)
+	if err != nil {
+		return nil, err
+	}
+	return extractPathData(roughPaths)
+}
+
+func computeRoughPaths(r *Runner, js string) ([]roughPath, error) {
+	if _, err := r.run(js); err != nil {
+		return nil, err
+	}
+	return extractRoughPaths(r)
 }
 
 type attrs struct {
 	D string `json:"d"`
 }
 
-type node struct {
+type style struct {
-	Attrs attrs `json:"attrs"`
+	Stroke      string `json:"stroke,omitempty"`
+	StrokeWidth string `json:"strokeWidth,omitempty"`
+	Fill        string `json:"fill,omitempty"`
 }
 
-func extractPaths(r *Runner) ([]string, error) {
+type roughPath struct {
-	val, err := r.run("JSON.stringify(node.children)")
+	Attrs attrs `json:"attrs"`
+	Style style `json:"style"`
+}
+
+func (rp roughPath) StyleCSS() string {
+	style := ""
+	if rp.Style.Fill != "" {
+		style += fmt.Sprintf("fill:%s;", rp.Style.Fill)
+	}
+	if rp.Style.Stroke != "" {
+		style += fmt.Sprintf("stroke:%s;", rp.Style.Stroke)
+	}
+	if rp.Style.StrokeWidth != "" {
+		style += fmt.Sprintf("stroke-width:%s;", rp.Style.StrokeWidth)
+	}
+	return style
+}
+
+func extractRoughPaths(r *Runner) ([]roughPath, error) {
+	val, err := r.run("JSON.stringify(node.children, null, '  ')")
 	if err != nil {
 		return nil, err
 	}
 
-	var nodes []node
+	var roughPaths []roughPath
-
+	err = json.Unmarshal([]byte(val.String()), &roughPaths)
-	err = json.Unmarshal([]byte(val.String()), &nodes)
 	if err != nil {
 		return nil, err
 	}
 
+	// we want to have a fixed precision to the decimals in the path data
+	for i := range roughPaths {
+		// truncate all floats in path to only use up to 6 decimal places
+		roughPaths[i].Attrs.D = floatRE.ReplaceAllStringFunc(roughPaths[i].Attrs.D, func(floatStr string) string {
+			i := strings.Index(floatStr, ".")
+			decimalLen := len(floatStr) - i - 1
+			end := i + go2.Min(decimalLen, 6)
+			return floatStr[:end+1]
+		})
+	}
+
+	return roughPaths, nil
+}
+
+func extractPathData(roughPaths []roughPath) ([]string, error) {
 	var paths []string
-	for _, n := range nodes {
+	for _, rp := range roughPaths {
-		paths = append(paths, n.Attrs.D)
+		paths = append(paths, rp.Attrs.D)
 	}
-
 	return paths, nil
 }
+
+func ArrowheadJS(r *Runner, arrowhead d2target.Arrowhead, stroke string, strokeWidth int) (arrowJS, extraJS string) {
+	// Note: selected each seed that looks the good for consistent renders
+	switch arrowhead {
+	case d2target.ArrowArrowhead:
+		arrowJS = fmt.Sprintf(
+			`node = rc.linearPath(%s, { strokeWidth: %d, stroke: "%s", seed: 3 })`,
+			`[[-10, -4], [0, 0], [-10, 4]]`,
+			strokeWidth,
+			stroke,
+		)
+	case d2target.TriangleArrowhead:
+		arrowJS = fmt.Sprintf(
+			`node = rc.polygon(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", seed: 2 })`,
+			`[[-10, -4], [0, 0], [-10, 4]]`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+	case d2target.DiamondArrowhead:
+		arrowJS = fmt.Sprintf(
+			`node = rc.polygon(%s, { strokeWidth: %d, stroke: "%s", fill: "white", fillStyle: "solid", seed: 1 })`,
+			`[[-20, 0], [-10, 5], [0, 0], [-10, -5], [-20, 0]]`,
+			strokeWidth,
+			stroke,
+		)
+	case d2target.FilledDiamondArrowhead:
+		arrowJS = fmt.Sprintf(
+			`node = rc.polygon(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "zigzag", fillWeight: 4, seed: 1 })`,
+			`[[-20, 0], [-10, 5], [0, 0], [-10, -5], [-20, 0]]`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+	case d2target.CfManyRequired:
+		arrowJS = fmt.Sprintf(
+			// TODO why does fillStyle: "zigzag" error with path
+			`node = rc.path(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 4, seed: 2 })`,
+			`"M-15,-10 -15,10 M0,10 -15,0 M0,-10 -15,0"`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+	case d2target.CfMany:
+		arrowJS = fmt.Sprintf(
+			`node = rc.path(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 4, seed: 8 })`,
+			`"M0,10 -15,0 M0,-10 -15,0"`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+		extraJS = fmt.Sprintf(
+			`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "white", fillStyle: "solid", fillWeight: 1, seed: 4 })`,
+			strokeWidth,
+			stroke,
+		)
+	case d2target.CfOneRequired:
+		arrowJS = fmt.Sprintf(
+			`node = rc.path(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 4, seed: 2 })`,
+			`"M-15,-10 -15,10 M-10,-10 -10,10"`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+	case d2target.CfOne:
+		arrowJS = fmt.Sprintf(
+			`node = rc.path(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 4, seed: 3 })`,
+			`"M-10,-10 -10,10"`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+		extraJS = fmt.Sprintf(
+			`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "white", fillStyle: "solid", fillWeight: 1, seed: 5 })`,
+			strokeWidth,
+			stroke,
+		)
+	}
+	return
+}
+
+func Arrowheads(r *Runner, connection d2target.Connection, srcAdj, dstAdj *geo.Point) (string, error) {
+	arrowPaths := []string{}
+
+	if connection.SrcArrow != d2target.NoArrowhead {
+		arrowJS, extraJS := ArrowheadJS(r, connection.SrcArrow, connection.Stroke, connection.StrokeWidth)
+		if arrowJS == "" {
+			return "", nil
+		}
+
+		startingSegment := geo.NewSegment(connection.Route[0], connection.Route[1])
+		startingVector := startingSegment.ToVector().Reverse()
+		angle := startingVector.Degrees()
+
+		transform := fmt.Sprintf(`transform="translate(%f %f) rotate(%v)"`,
+			startingSegment.Start.X+srcAdj.X, startingSegment.Start.Y+srcAdj.Y, angle,
+		)
+
+		roughPaths, err := computeRoughPaths(r, arrowJS)
+		if err != nil {
+			return "", err
+		}
+		if extraJS != "" {
+			extraPaths, err := computeRoughPaths(r, extraJS)
+			if err != nil {
+				return "", err
+			}
+			roughPaths = append(roughPaths, extraPaths...)
+		}
+
+		for _, rp := range roughPaths {
+			pathStr := fmt.Sprintf(`<path class="connection" d="%s" style="%s" %s/>`,
+				rp.Attrs.D,
+				rp.StyleCSS(),
+				transform,
+			)
+			arrowPaths = append(arrowPaths, pathStr)
+		}
+	}
+
+	if connection.DstArrow != d2target.NoArrowhead {
+		arrowJS, extraJS := ArrowheadJS(r, connection.DstArrow, connection.Stroke, connection.StrokeWidth)
+		if arrowJS == "" {
+			return "", nil
+		}
+
+		length := len(connection.Route)
+		endingSegment := geo.NewSegment(connection.Route[length-2], connection.Route[length-1])
+		endingVector := endingSegment.ToVector()
+		angle := endingVector.Degrees()
+
+		transform := fmt.Sprintf(`transform="translate(%f %f) rotate(%v)"`,
+			endingSegment.End.X+dstAdj.X, endingSegment.End.Y+dstAdj.Y, angle,
+		)
+
+		roughPaths, err := computeRoughPaths(r, arrowJS)
+		if err != nil {
+			return "", err
+		}
+		if extraJS != "" {
+			extraPaths, err := computeRoughPaths(r, extraJS)
+			if err != nil {
+				return "", err
+			}
+			roughPaths = append(roughPaths, extraPaths...)
+		}
+
+		for _, rp := range roughPaths {
+			pathStr := fmt.Sprintf(`<path class="connection" d="%s" style="%s" %s/>`,
+				rp.Attrs.D,
+				rp.StyleCSS(),
+				transform,
+			)
+			arrowPaths = append(arrowPaths, pathStr)
+		}
+	}
+
+	return strings.Join(arrowPaths, " "), nil
+}

d2renderers/d2sketch/sketch_test.go

@@ -280,6 +280,52 @@ shipments.order_id <-> orders.id`,
   +getJobs(): "Job[]"
   +setTimeout(seconds int)
 }
+`,
+		},
+		{
+			name: "arrowheads",
+			script: `
+a: ""
+b: ""
+a.1 -- b.1: none
+a.2 <-> b.2: arrow {
+	source-arrowhead.shape: arrow
+	target-arrowhead.shape: arrow
+}
+a.3 <-> b.3: triangle {
+	source-arrowhead.shape: triangle
+	target-arrowhead.shape: triangle
+}
+a.4 <-> b.4: diamond {
+	source-arrowhead.shape: diamond
+	target-arrowhead.shape: diamond
+}
+a.5 <-> b.5: diamond filled {
+	source-arrowhead: {
+		shape: diamond
+		style.filled: true
+	}
+	target-arrowhead: {
+		shape: diamond
+		style.filled: true
+	}
+}
+a.6 <-> b.6: cf-many {
+	source-arrowhead.shape: cf-many
+	target-arrowhead.shape: cf-many
+}
+a.7 <-> b.7: cf-many-required {
+	source-arrowhead.shape: cf-many-required
+	target-arrowhead.shape: cf-many-required
+}
+a.8 <-> b.8: cf-one {
+	source-arrowhead.shape: cf-one
+	target-arrowhead.shape: cf-one
+}
+a.9 <-> b.9: cf-one-required {
+	source-arrowhead.shape: cf-one-required
+	target-arrowhead.shape: cf-one-required
+}
 `,
 		},
 	}

d2renderers/d2svg/d2svg.go

@@ -307,17 +307,25 @@ func arrowheadAdjustment(start, end *geo.Point, arrowhead d2target.Arrowhead, ed
 	return v.Unit().Multiply(-distance).ToPoint()
 }
 
-// returns the path's d attribute for the given connection
+func getArrowheadAdjustments(connection d2target.Connection, idToShape map[string]d2target.Shape) (srcAdj, dstAdj *geo.Point) {
-func pathData(connection d2target.Connection, idToShape map[string]d2target.Shape) string {
-	var path []string
 	route := connection.Route
 	srcShape := idToShape[connection.Src]
 	dstShape := idToShape[connection.Dst]
 
-	sourceAdjustment := arrowheadAdjustment(route[0], route[1], connection.SrcArrow, connection.StrokeWidth, srcShape.StrokeWidth)
+	sourceAdjustment := arrowheadAdjustment(route[1], route[0], connection.SrcArrow, connection.StrokeWidth, srcShape.StrokeWidth)
+
+	targetAdjustment := arrowheadAdjustment(route[len(route)-2], route[len(route)-1], connection.DstArrow, connection.StrokeWidth, dstShape.StrokeWidth)
+	return sourceAdjustment, targetAdjustment
+}
+
+// returns the path's d attribute for the given connection
+func pathData(connection d2target.Connection, srcAdj, dstAdj *geo.Point) string {
+	var path []string
+	route := connection.Route
+
 	path = append(path, fmt.Sprintf("M %f %f",
-		route[0].X-sourceAdjustment.X,
+		route[0].X+srcAdj.X,
-		route[0].Y-sourceAdjustment.Y,
+		route[0].Y+srcAdj.Y,
 	))
 
 	if connection.IsCurve {
@@ -330,12 +338,11 @@ func pathData(connection d2target.Connection, idToShape map[string]d2target.Shap
 			))
 		}
 		// final curve target adjustment
-		targetAdjustment := arrowheadAdjustment(route[i+1], route[i+2], connection.DstArrow, connection.StrokeWidth, dstShape.StrokeWidth)
 		path = append(path, fmt.Sprintf("C %f %f %f %f %f %f",
 			route[i].X, route[i].Y,
 			route[i+1].X, route[i+1].Y,
-			route[i+2].X+targetAdjustment.X,
+			route[i+2].X+dstAdj.X,
-			route[i+2].Y+targetAdjustment.Y,
+			route[i+2].Y+dstAdj.Y,
 		))
 	} else {
 		for i := 1; i < len(route)-1; i++ {
@@ -387,12 +394,9 @@ func pathData(connection d2target.Connection, idToShape map[string]d2target.Shap
 		}
 
 		lastPoint := route[len(route)-1]
-		secondToLastPoint := route[len(route)-2]
-
-		targetAdjustment := arrowheadAdjustment(secondToLastPoint, lastPoint, connection.DstArrow, connection.StrokeWidth, dstShape.StrokeWidth)
 		path = append(path, fmt.Sprintf("L %f %f",
-			lastPoint.X+targetAdjustment.X,
+			lastPoint.X+dstAdj.X,
-			lastPoint.Y+targetAdjustment.Y,
+			lastPoint.Y+dstAdj.Y,
 		))
 	}
 
@@ -448,25 +452,29 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 		}
 	}
 
-	path := pathData(connection, idToShape)
+	srcAdj, dstAdj := getArrowheadAdjustments(connection, idToShape)
-	attrs := fmt.Sprintf(`%s%smask="url(#%s)"`,
+	path := pathData(connection, srcAdj, dstAdj)
-		markerStart,
+	mask := fmt.Sprintf(`mask="url(#%s)"`, labelMaskID)
-		markerEnd,
-		labelMaskID,
-	)
 	if sketchRunner != nil {
-		out, err := d2sketch.Connection(sketchRunner, connection, path, attrs)
+		out, err := d2sketch.Connection(sketchRunner, connection, path, mask)
 		if err != nil {
 			return "", err
 		}
-		fmt.Fprintf(writer, out)
+		fmt.Fprint(writer, out)
+
+		// render sketch arrowheads separately
+		arrowPaths, err := d2sketch.Arrowheads(sketchRunner, connection, srcAdj, dstAdj)
+		if err != nil {
+			return "", err
+		}
+		fmt.Fprint(writer, arrowPaths)
 	} else {
 		animatedClass := ""
 		if connection.Animated {
 			animatedClass = " animated-connection"
 		}
-		fmt.Fprintf(writer, `<path d="%s" class="connection%s" style="fill:none;%s" %s/>`,
+		fmt.Fprintf(writer, `<path d="%s" class="connection%s" style="fill:none;%s" %s%s%s/>`,
-			path, animatedClass, connection.CSSStyle(), attrs)
+			path, animatedClass, connection.CSSStyle(), markerStart, markerEnd, mask)
 	}
 
 	if connection.Label != "" {

lib/geo/vector.go

@@ -76,3 +76,15 @@ func GetUnitNormalVector(x1, y1, x2, y2 float64) (float64, float64) {
 	length := EuclideanDistance(x1, y1, x2, y2)
 	return normalX / length, normalY / length
 }
+
+func (a Vector) Radians() float64 {
+	return math.Atan2(a[1], a[0])
+}
+
+func (a Vector) Degrees() float64 {
+	return a.Radians() * 180 / math.Pi
+}
+
+func (a Vector) Reverse() Vector {
+	return a.Multiply(-1)
+}