package d2sketch import ( "encoding/json" "fmt" "strings" _ "embed" "github.com/dop251/goja" "oss.terrastruct.com/d2/d2target" "oss.terrastruct.com/d2/lib/geo" "oss.terrastruct.com/d2/lib/label" "oss.terrastruct.com/d2/lib/svg" "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 shapeStyle(shape d2target.Shape) string { out := "" if shape.Type == d2target.ShapeSQLTable || shape.Type == d2target.ShapeClass { out += fmt.Sprintf(`fill:%s;`, shape.Stroke) out += fmt.Sprintf(`stroke:%s;`, shape.Fill) } else { out += fmt.Sprintf(`fill:%s;`, shape.Fill) out += fmt.Sprintf(`stroke:%s;`, shape.Stroke) } out += fmt.Sprintf(`opacity:%f;`, shape.Opacity) out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth) if shape.StrokeDash != 0 { dashSize, gapSize := svg.GetStrokeDashAttributes(float64(shape.StrokeWidth), shape.StrokeDash) out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize) } return out } func Rect(r *Runner, shape d2target.Shape) (string, error) { js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, { fill: "%s", stroke: "%s", strokeWidth: %d, %s });`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps) paths, err := computeRoughPaths(r, js) if err != nil { return "", err } output := "" for _, p := range paths { output += fmt.Sprintf( ``, shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape), ) } 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: "%s", stroke: "%s", 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) if err != nil { return "", err } output := "" for _, p := range paths { output += fmt.Sprintf( ``, shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape), ) } 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: "%s", stroke: "%s", strokeWidth: %d, %s });`, path, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps) sketchPaths, err := computeRoughPaths(r, js) if err != nil { return "", err } for _, p := range sketchPaths { output += fmt.Sprintf( ``, p, shapeStyle(shape), ) } for _, p := range sketchPaths { output += fmt.Sprintf( ``, p, ) } } return output, nil } func connectionStyle(connection d2target.Connection) string { out := "" out += fmt.Sprintf(`stroke:%s;`, connection.Stroke) out += fmt.Sprintf(`opacity:%f;`, connection.Opacity) out += fmt.Sprintf(`stroke-width:%d;`, connection.StrokeWidth) if connection.StrokeDash != 0 { dashSize, gapSize := svg.GetStrokeDashAttributes(float64(connection.StrokeWidth), connection.StrokeDash) out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize) } return out } 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 := "" for _, p := range paths { output += fmt.Sprintf( ``, p, connectionStyle(connection), attrs, ) } 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: "%s", stroke: "%s", strokeWidth: %d, %s });`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps) paths, err := computeRoughPaths(r, js) if err != nil { return "", err } for _, p := range paths { output += fmt.Sprintf( ``, shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape), ) } 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: "%s", %s });`, shape.Width, rowHeight, shape.Fill, baseRoughProps) paths, err = computeRoughPaths(r, js) if err != nil { return "", err } for _, p := range paths { output += fmt.Sprintf( ``, shape.Pos.X, shape.Pos.Y, p, shape.Fill, ) } if shape.Label != "" { tl := label.InsideMiddleLeft.GetPointOnBox( headerBox, 20, float64(shape.LabelWidth), float64(shape.LabelHeight), ) output += fmt.Sprintf(`%s`, "text", tl.X, tl.Y+float64(shape.LabelHeight)*3/4, fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", 4+shape.FontSize, shape.Stroke, ), svg.EscapeText(shape.Label), ) } 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), ) output += strings.Join([]string{ fmt.Sprintf(`%s`, nameTL.X, nameTL.Y+float64(shape.FontSize)*3/4, fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", float64(shape.FontSize), shape.PrimaryAccentColor), svg.EscapeText(f.Name.Label), ), fmt.Sprintf(`%s`, nameTL.X+float64(longestNameWidth)+2*d2target.NamePadding, nameTL.Y+float64(shape.FontSize)*3/4, fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", float64(shape.FontSize), shape.NeutralAccentColor), svg.EscapeText(f.Type.Label), ), fmt.Sprintf(`%s`, constraintTR.X, constraintTR.Y+float64(shape.FontSize)*3/4, fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;letter-spacing:2px;", "end", float64(shape.FontSize), shape.SecondaryAccentColor), f.ConstraintAbbr(), ), }, "\n") 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 } for _, p := range paths { output += fmt.Sprintf( ``, p, shape.Fill, ) } } 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: "%s", stroke: "%s", strokeWidth: %d, %s });`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps) paths, err := computeRoughPaths(r, js) if err != nil { return "", err } for _, p := range paths { output += fmt.Sprintf( ``, shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape), ) } 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: "%s", %s });`, shape.Width, headerBox.Height, shape.Fill, baseRoughProps) paths, err = computeRoughPaths(r, js) if err != nil { return "", err } for _, p := range paths { output += fmt.Sprintf( ``, shape.Pos.X, shape.Pos.Y, p, shape.Fill, ) } 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), ) output += fmt.Sprintf(`%s`, "text-mono", tl.X+float64(shape.LabelWidth)/2, tl.Y+float64(shape.LabelHeight)*3/4, fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "middle", 4+shape.FontSize, shape.Stroke, ), svg.EscapeText(shape.Label), ) } 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 } for _, p := range paths { output += fmt.Sprintf( ``, p, shape.Fill, ) } 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, ) output += strings.Join([]string{ fmt.Sprintf(`%s`, prefixTL.X, prefixTL.Y+fontSize*3/4, fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor), prefix, ), fmt.Sprintf(`%s`, prefixTL.X+d2target.PrefixWidth, prefixTL.Y+fontSize*3/4, fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill), svg.EscapeText(nameText), ), fmt.Sprintf(`%s`, typeTR.X, typeTR.Y+fontSize*3/4, fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;", "end", fontSize, shape.SecondaryAccentColor), svg.EscapeText(typeText), ), }, "\n") 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 }