diff --git a/d2renderers/d2sketch/sketch.go b/d2renderers/d2sketch/sketch.go
index 13beb9b97..4564c0f5b 100644
--- a/d2renderers/d2sketch/sketch.go
+++ b/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 {
- Attrs attrs `json:"attrs"`
+type style struct {
+ Stroke string `json:"stroke,omitempty"`
+ StrokeWidth string `json:"strokeWidth,omitempty"`
+ Fill string `json:"fill,omitempty"`
}
-func extractPaths(r *Runner) ([]string, error) {
- val, err := r.run("JSON.stringify(node.children)")
+type roughPath struct {
+ 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
-
- err = json.Unmarshal([]byte(val.String()), &nodes)
+ var roughPaths []roughPath
+ err = json.Unmarshal([]byte(val.String()), &roughPaths)
if err != nil {
return nil, err
}
+ return roughPaths, nil
+}
+
+func extractPathData(roughPaths []roughPath) ([]string, error) {
var paths []string
- for _, n := range nodes {
- paths = append(paths, n.Attrs.D)
+ for _, rp := range roughPaths {
+ 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(``,
+ 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(``,
+ rp.Attrs.D,
+ rp.StyleCSS(),
+ transform,
+ )
+ arrowPaths = append(arrowPaths, pathStr)
+ }
+ }
+
+ return strings.Join(arrowPaths, " "), nil
+}
diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index 5ed641c44..876a5b6fa 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/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
- if markerStart != "" || markerEnd != "" {
- // set stroke width to 0
- style := strokeWidthRE.ReplaceAllString(connection.CSSStyle(), `$1:0;$3`)
- fmt.Fprintf(writer, ``,
- path, style,
- markerStart,
- markerEnd,
- )
+ arrowPaths, err := d2sketch.Arrowheads(sketchRunner, connection)
+ if err != nil {
+ return "", err
}
+ fmt.Fprint(writer, arrowPaths)
} else {
animatedClass := ""
if connection.Animated {
diff --git a/lib/geo/vector.go b/lib/geo/vector.go
index 199fe73db..db1bb107b 100644
--- a/lib/geo/vector.go
+++ b/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)
+}