add sketch versions of arrowheads
This commit is contained in:
Gavin Nishizawa
parent
62d153f798
commit
224af99efd
3 changed files with 244 additions and 34 deletions
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue