add sketch versions of arrowheads

d2renderers/d2sketch/sketch.go

@@ -70,7 +70,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 +95,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 +123,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 +146,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 +173,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 +196,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 +275,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 +301,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 +325,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 +372,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 +431,244 @@ 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 {
+	Stroke      string `json:"stroke,omitempty"`
+	StrokeWidth string `json:"strokeWidth,omitempty"`
+	Fill        string `json:"fill,omitempty"`
+}
+
+type roughPath struct {
 	Attrs attrs `json:"attrs"`
+	Style style `json:"style"`
 }
 
-func extractPaths(r *Runner) ([]string, error) {
+func (rp roughPath) StyleCSS() string {
-	val, err := r.run("JSON.stringify(node.children)")
+	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
 	}
 
+	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-20,-10 -20,10 M-2,10 -20,0 M-2,-10 -20,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: 4 })`,
+			`"M-2,10 -20,0 M-2,-10 -20,0"`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+		extraJS = fmt.Sprintf(
+			`node = rc.circle(-22, 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: 3 })`,
+			`"M-20,-10 -20,10 M-15,-10 -15,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: 1 })`,
+			`"M-15,-10 -15,10"`,
+			strokeWidth,
+			stroke,
+			stroke,
+		)
+		extraJS = fmt.Sprintf(
+			`node = rc.circle(-22, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "white", fillStyle: "solid", fillWeight: 1, seed: 2 })`,
+			strokeWidth,
+			stroke,
+		)
+	}
+	return
+}
+
+func Arrowheads(r *Runner, connection d2target.Connection) (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()
+
+		// TODO get src shape stroke width
+		srcStrokeWidth := 2
+		distance := float64(connection.StrokeWidth) + (float64(connection.StrokeWidth)+float64(srcStrokeWidth))/2.0
+
+		sourceAdjustment := startingVector.Unit().Multiply(-distance).ToPoint()
+		transform := fmt.Sprintf(`transform="translate(%f %f) rotate(%v)"`,
+			startingSegment.Start.X+sourceAdjustment.X, startingSegment.Start.Y+sourceAdjustment.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()
+
+		// TODO get dst shape stroke width
+		dstStrokeWidth := 2
+		distance := (float64(connection.StrokeWidth) + float64(dstStrokeWidth)) / 2.0
+		if connection.DstArrow != d2target.NoArrowhead {
+			distance += float64(connection.StrokeWidth)
+		}
+
+		targetAdjustment := endingVector.Unit().Multiply(-distance).ToPoint()
+		transform := fmt.Sprintf(`transform="translate(%f %f) rotate(%v)"`,
+			endingSegment.End.X+targetAdjustment.X, endingSegment.End.Y+targetAdjustment.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/d2svg/d2svg.go

@@ -10,7 +10,6 @@ import (
 	"hash/fnv"
 	"html"
 	"io"
-	"regexp"
 	"sort"
 	"strings"
 
@@ -61,8 +60,6 @@ var sketchStyleCSS string
 //go:embed github-markdown.css
 var mdCSS string
 
-var strokeWidthRE = regexp.MustCompile(`(.*stroke-width):(.+?);(.*)`)
-
 type RenderOpts struct {
 	Pad    int
 	Sketch bool
@@ -461,16 +458,11 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 		fmt.Fprint(writer, out)
 
 		// render sketch arrowheads separately
-		// TODO add sketch specific arrowheads
+		arrowPaths, err := d2sketch.Arrowheads(sketchRunner, connection)
-		if markerStart != "" || markerEnd != "" {
+		if err != nil {
-			// set stroke width to 0
+			return "", err
-			style := strokeWidthRE.ReplaceAllString(connection.CSSStyle(), `$1:0;$3`)
-			fmt.Fprintf(writer, `<path d="%s" class="connection" style="fill:none;%s" %s%s/>`,
-				path, style,
-				markerStart,
-				markerEnd,
-			)
 		}
+		fmt.Fprint(writer, arrowPaths)
 	} else {
 		animatedClass := ""
 		if connection.Animated {

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)
+}