diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index a5461f916..42bb445ab 100644
--- a/ci/release/changelogs/next.md
+++ b/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)
diff --git a/d2renderers/d2sketch/sketch.go b/d2renderers/d2sketch/sketch.go
index 13beb9b97..16697c0b1 100644
--- a/d2renderers/d2sketch/sketch.go
+++ b/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 {
- 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
}
+ // 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 {
- 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-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(``,
+ 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(``,
+ rp.Attrs.D,
+ rp.StyleCSS(),
+ transform,
+ )
+ arrowPaths = append(arrowPaths, pathStr)
+ }
+ }
+
+ return strings.Join(arrowPaths, " "), nil
+}
diff --git a/d2renderers/d2sketch/sketch_test.go b/d2renderers/d2sketch/sketch_test.go
index f35eb1be7..30d06fc1f 100644
--- a/d2renderers/d2sketch/sketch_test.go
+++ b/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
+}
`,
},
}
diff --git a/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg b/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
index efb2c8aba..8496e2c0f 100644
--- a/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
@@ -51,7 +51,7 @@ width="1597" height="835" viewBox="-102 -102 1597 835">
+
+
+
+
+112233445566778899none arrow triangle diamond diamond filled cf-many cf-many-required cf-one cf-one-required
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/d2renderers/d2sketch/testdata/basic/sketch.exp.svg b/d2renderers/d2sketch/testdata/basic/sketch.exp.svg
index fa9cb40e1..085125e38 100644
--- a/d2renderers/d2sketch/testdata/basic/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/basic/sketch.exp.svg
@@ -51,7 +51,7 @@ width="319" height="556" viewBox="-102 -102 319 556">