luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add sketch versions of arrowheads

Browse source
This commit is contained in:
Gavin Nishizawa 2023-01-12 18:27:53 -08:00
parent 62d153f798
commit 224af99efd
No known key found for this signature in database
GPG key ID: AE3B177777CE55CD
3 changed files with 244 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

250
d2renderers/d2sketch/sketch.go
View file

@ -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(`<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
}

16
d2renderers/d2svg/d2svg.go
View file

@ -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 d="%s" class="connection" style="fill:none;%s" %s%s/>`,
path, style,
markerStart,
markerEnd,
)
arrowPaths, err := d2sketch.Arrowheads(sketchRunner, connection)
if err != nil {
return "", err
}
fmt.Fprint(writer, arrowPaths)
} else {
animatedClass := ""
if connection.Animated {

12
lib/geo/vector.go
View file

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