package d2sketch
import (
"encoding/json"
"fmt"
_ "embed"
"github.com/dop251/goja"
"oss.terrastruct.com/d2/d2target"
"oss.terrastruct.com/d2/lib/color"
"oss.terrastruct.com/d2/lib/geo"
"oss.terrastruct.com/d2/lib/label"
"oss.terrastruct.com/d2/lib/svg"
svg_style "oss.terrastruct.com/d2/lib/svg/style"
"oss.terrastruct.com/util-go/go2"
)
//go:embed fillpattern.svg
var fillPattern string
//go:embed rough.js
var roughJS string
//go:embed setup.js
var setupJS string
type Runner goja.Runtime
var baseRoughProps = `fillWeight: 2.0,
hachureGap: 16,
fillStyle: "solid",
bowing: 2,
seed: 1,`
func (r *Runner) run(js string) (goja.Value, error) {
vm := (*goja.Runtime)(r)
return vm.RunString(js)
}
func InitSketchVM() (*Runner, error) {
vm := goja.New()
if _, err := vm.RunString(roughJS); err != nil {
return nil, err
}
if _, err := vm.RunString(setupJS); err != nil {
return nil, err
}
r := Runner(*vm)
return &r, nil
}
// DefineFillPattern adds a reusable pattern that is overlayed on shapes with
// fill. This gives it a subtle streaky effect that subtly looks hand-drawn but
// not distractingly so.
func DefineFillPattern() string {
return fmt.Sprintf(`
%s
`, fillPattern)
}
func Rect(r *Runner, shape d2target.Shape) (string, error) {
js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
fill: "#000",
stroke: "#000",
strokeWidth: %d,
%s
});`, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
paths, err := computeRoughPaths(r, js)
if err != nil {
return "", err
}
output := ""
pathEl := svg_style.NewThemableElement("path")
pathEl.Transform = fmt.Sprintf("translate(%d %d)", shape.Pos.X, shape.Pos.Y)
pathEl.Fill, pathEl.Stroke = svg_style.ShapeTheme(shape)
pathEl.Class = "shape"
pathEl.Style = svg_style.ShapeStyle(shape)
for _, p := range paths {
pathEl.D = p
output += pathEl.Render()
}
output += fmt.Sprintf(
``,
shape.Pos.X, shape.Pos.Y, shape.Width, shape.Height,
)
return output, nil
}
func Oval(r *Runner, shape d2target.Shape) (string, error) {
js := fmt.Sprintf(`node = rc.ellipse(%d, %d, %d, %d, {
fill: "#000",
stroke: "#000",
strokeWidth: %d,
%s
});`, shape.Width/2, shape.Height/2, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
paths, err := computeRoughPaths(r, js)
if err != nil {
return "", err
}
output := ""
pathEl := svg_style.NewThemableElement("path")
pathEl.Transform = fmt.Sprintf("translate(%d %d)", shape.Pos.X, shape.Pos.Y)
pathEl.Fill, pathEl.Stroke = svg_style.ShapeTheme(shape)
pathEl.Class = "shape"
pathEl.Style = svg_style.ShapeStyle(shape)
for _, p := range paths {
pathEl.D = p
output += pathEl.Render()
}
output += fmt.Sprintf(
``,
shape.Pos.X+shape.Width/2, shape.Pos.Y+shape.Height/2, shape.Width/2, shape.Height/2,
)
return output, nil
}
// TODO need to personalize this per shape like we do in Terrastruct app
func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
output := ""
for _, path := range paths {
js := fmt.Sprintf(`node = rc.path("%s", {
fill: "#000",
stroke: "#000",
strokeWidth: %d,
%s
});`, path, shape.StrokeWidth, baseRoughProps)
sketchPaths, err := computeRoughPaths(r, js)
if err != nil {
return "", err
}
pathEl := svg_style.NewThemableElement("path")
pathEl.Fill, pathEl.Stroke = svg_style.ShapeTheme(shape)
pathEl.Class = "shape"
pathEl.Style = svg_style.ShapeStyle(shape)
for _, p := range sketchPaths {
pathEl.D = p
output += pathEl.Render()
}
for _, p := range sketchPaths {
output += fmt.Sprintf(
``,
p,
)
}
}
return output, nil
}
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)
if err != nil {
return "", err
}
output := ""
pathEl := svg_style.NewThemableElement("path")
pathEl.Fill = color.None
pathEl.Stroke = svg_style.ConnectionTheme(connection)
pathEl.Class = "connection"
pathEl.Style = svg_style.ConnectionStyle(connection)
pathEl.Attributes = attrs
for _, p := range paths {
pathEl.D = p
output += pathEl.Render()
}
return output, nil
}
// TODO cleanup
func Table(r *Runner, shape d2target.Shape) (string, error) {
output := ""
js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
fill: "#000",
stroke: "#000",
strokeWidth: %d,
%s
});`, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
paths, err := computeRoughPaths(r, js)
if err != nil {
return "", err
}
pathEl := svg_style.NewThemableElement("path")
pathEl.Transform = fmt.Sprintf("translate(%d %d)", shape.Pos.X, shape.Pos.Y)
pathEl.Fill, pathEl.Stroke = svg_style.ShapeTheme(shape)
pathEl.Class = "shape"
pathEl.Style = svg_style.ShapeStyle(shape)
for _, p := range paths {
pathEl.D = p
output += pathEl.Render()
}
box := geo.NewBox(
geo.NewPoint(float64(shape.Pos.X), float64(shape.Pos.Y)),
float64(shape.Width),
float64(shape.Height),
)
rowHeight := box.Height / float64(1+len(shape.SQLTable.Columns))
headerBox := geo.NewBox(box.TopLeft, box.Width, rowHeight)
js = fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %f, {
fill: "#000",
%s
});`, shape.Width, rowHeight, baseRoughProps)
paths, err = computeRoughPaths(r, js)
if err != nil {
return "", err
}
pathEl = svg_style.NewThemableElement("path")
pathEl.Transform = fmt.Sprintf("translate(%d %d)", shape.Pos.X, shape.Pos.Y)
pathEl.Fill = shape.Fill
pathEl.Class = "class_header"
for _, p := range paths {
pathEl.D = p
output += pathEl.Render()
}
if shape.Label != "" {
tl := label.InsideMiddleLeft.GetPointOnBox(
headerBox,
20,
float64(shape.LabelWidth),
float64(shape.LabelHeight),
)
textEl := svg_style.NewThemableElement("text")
textEl.X = tl.X
textEl.Y = tl.Y + float64(shape.LabelHeight)*3/4
textEl.Fill = shape.Stroke
textEl.Class = "text"
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx",
"start", 4+shape.FontSize,
)
textEl.Content = svg.EscapeText(shape.Label)
output += textEl.Render()
}
var longestNameWidth int
for _, f := range shape.Columns {
longestNameWidth = go2.Max(longestNameWidth, f.Name.LabelWidth)
}
rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
rowBox.TopLeft.Y += headerBox.Height
for _, f := range shape.Columns {
nameTL := label.InsideMiddleLeft.GetPointOnBox(
rowBox,
d2target.NamePadding,
rowBox.Width,
float64(shape.FontSize),
)
constraintTR := label.InsideMiddleRight.GetPointOnBox(
rowBox,
d2target.TypePadding,
0,
float64(shape.FontSize),
)
textEl := svg_style.NewThemableElement("text")
textEl.X = nameTL.X
textEl.Y = nameTL.Y + float64(shape.FontSize)*3/4
textEl.Fill = shape.PrimaryAccentColor
textEl.Class = "text"
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "start", float64(shape.FontSize))
textEl.Content = svg.EscapeText(f.Name.Label)
output += textEl.Render()
textEl.X = nameTL.X + float64(longestNameWidth) + 2*d2target.NamePadding
textEl.Fill = shape.NeutralAccentColor
textEl.Content = svg.EscapeText(f.Type.Label)
output += textEl.Render()
textEl.X = constraintTR.X
textEl.Y = constraintTR.Y + float64(shape.FontSize)*3/4
textEl.Fill = shape.SecondaryAccentColor
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx;letter-spacing:2px", "end", float64(shape.FontSize))
textEl.Content = f.ConstraintAbbr()
output += textEl.Render()
rowBox.TopLeft.Y += rowHeight
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)
if err != nil {
return "", err
}
pathEl := svg_style.NewThemableElement("path")
pathEl.Fill = shape.Fill
for _, p := range paths {
pathEl.D = p
output += pathEl.Render()
}
}
output += fmt.Sprintf(
``,
shape.Pos.X, shape.Pos.Y, shape.Width, shape.Height,
)
return output, nil
}
func Class(r *Runner, shape d2target.Shape) (string, error) {
output := ""
js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
fill: "#000",
stroke: "#000",
strokeWidth: %d,
%s
});`, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
paths, err := computeRoughPaths(r, js)
if err != nil {
return "", err
}
pathEl := svg_style.NewThemableElement("path")
pathEl.Transform = fmt.Sprintf("translate(%d %d)", shape.Pos.X, shape.Pos.Y)
pathEl.Fill, pathEl.Stroke = svg_style.ShapeTheme(shape)
pathEl.Class = "shape"
for _, p := range paths {
pathEl.D = p
output += pathEl.Render()
}
box := geo.NewBox(
geo.NewPoint(float64(shape.Pos.X), float64(shape.Pos.Y)),
float64(shape.Width),
float64(shape.Height),
)
rowHeight := box.Height / float64(2+len(shape.Class.Fields)+len(shape.Class.Methods))
headerBox := geo.NewBox(box.TopLeft, box.Width, 2*rowHeight)
js = fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %f, {
fill: "#000",
%s
});`, shape.Width, headerBox.Height, baseRoughProps)
paths, err = computeRoughPaths(r, js)
if err != nil {
return "", err
}
pathEl = svg_style.NewThemableElement("path")
pathEl.Transform = fmt.Sprintf("translate(%d %d)", shape.Pos.X, shape.Pos.Y)
pathEl.Fill = shape.Fill
pathEl.Class = "class_header"
for _, p := range paths {
pathEl.D = p
output += pathEl.Render()
}
output += fmt.Sprintf(
``,
shape.Pos.X, shape.Pos.Y, shape.Width, headerBox.Height,
)
if shape.Label != "" {
tl := label.InsideMiddleCenter.GetPointOnBox(
headerBox,
0,
float64(shape.LabelWidth),
float64(shape.LabelHeight),
)
textEl := svg_style.NewThemableElement("text")
textEl.X = tl.X + float64(shape.LabelWidth)/2
textEl.Y = tl.Y + float64(shape.LabelHeight)*3/4
textEl.Fill = shape.Stroke
textEl.Class = "text-mono"
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx",
"middle",
4+shape.FontSize,
)
textEl.Content = svg.EscapeText(shape.Label)
output += textEl.Render()
}
rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
rowBox.TopLeft.Y += headerBox.Height
for _, f := range shape.Fields {
output += classRow(shape, rowBox, f.VisibilityToken(), f.Name, f.Type, float64(shape.FontSize))
rowBox.TopLeft.Y += rowHeight
}
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)
if err != nil {
return "", err
}
pathEl = svg_style.NewThemableElement("path")
pathEl.Fill = shape.Fill
pathEl.Class = "class_header"
for _, p := range paths {
pathEl.D = p
output += pathEl.Render()
}
for _, m := range shape.Methods {
output += classRow(shape, rowBox, m.VisibilityToken(), m.Name, m.Return, float64(shape.FontSize))
rowBox.TopLeft.Y += rowHeight
}
return output, nil
}
func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText string, fontSize float64) string {
output := ""
prefixTL := label.InsideMiddleLeft.GetPointOnBox(
box,
d2target.PrefixPadding,
box.Width,
fontSize,
)
typeTR := label.InsideMiddleRight.GetPointOnBox(
box,
d2target.TypePadding,
0,
fontSize,
)
textEl := svg_style.NewThemableElement("text")
textEl.X = prefixTL.X
textEl.Y = prefixTL.Y + fontSize*3/4
textEl.Fill = shape.PrimaryAccentColor
textEl.Class = "text-mono"
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "start", fontSize)
textEl.Content = prefix
output += textEl.Render()
textEl.X = prefixTL.X + d2target.PrefixWidth
textEl.Fill = shape.Fill
textEl.Content = svg.EscapeText(nameText)
output += textEl.Render()
textEl.X = typeTR.X
textEl.Y = typeTR.Y + fontSize*3/4
textEl.Fill = shape.SecondaryAccentColor
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "end", fontSize)
textEl.Content = svg.EscapeText(typeText)
output += textEl.Render()
return output
}
func computeRoughPaths(r *Runner, js string) ([]string, error) {
if _, err := r.run(js); err != nil {
return nil, err
}
return extractPaths(r)
}
type attrs struct {
D string `json:"d"`
}
type node struct {
Attrs attrs `json:"attrs"`
}
func extractPaths(r *Runner) ([]string, error) {
val, err := r.run("JSON.stringify(node.children)")
if err != nil {
return nil, err
}
var nodes []node
err = json.Unmarshal([]byte(val.String()), &nodes)
if err != nil {
return nil, err
}
var paths []string
for _, n := range nodes {
paths = append(paths, n.Attrs.D)
}
return paths, nil
}