diff --git a/d2renderers/d2sketch/sketch.go b/d2renderers/d2sketch/sketch.go index 3ab9e8c27..8c2ec056e 100644 --- a/d2renderers/d2sketch/sketch.go +++ b/d2renderers/d2sketch/sketch.go @@ -6,6 +6,7 @@ import ( "fmt" "regexp" "strings" + "unicode" _ "embed" @@ -327,23 +328,71 @@ func Connection(r *Runner, connection d2target.Connection, path, attrs string) ( if err != nil { return "", err } - output := "" + + finalPath := "" + + insertSpacesAfterLetters := func(s string) { + output := "" + for i := 0; i < len(s); i++ { + if s[i] != ',' { + output += string(s[i]) + } + if unicode.IsLetter(rune(s[i])) { + output += " " + } + } + fmt.Println("PATH", output) + finalPath += output + } + fmt.Println() + + for i := 0; i < len(paths); i++ { + insertSpacesAfterLetters(paths[i]) + } + animatedClass := "" if connection.Animated { animatedClass = " animated-connection" } - pathEl := d2themes.NewThemableElement("path") - pathEl.Fill = color.None - pathEl.Stroke = connection.Stroke - pathEl.ClassName = fmt.Sprintf("connection%s", animatedClass) - pathEl.Style = connection.CSSStyle() - pathEl.Attributes = attrs - for _, p := range paths { - pathEl.D = p - output += pathEl.Render() + // If connection is animated and bidirectional + if connection.Animated && ((connection.DstArrow == d2target.NoArrowhead && connection.SrcArrow == d2target.NoArrowhead) || (connection.DstArrow != d2target.NoArrowhead && connection.SrcArrow != d2target.NoArrowhead)) { + // There is no pure CSS way to animate bidirectional connections in two directions, so we split it up + path1, path2, err := svg.SplitPath(path, 0.5) + + if err != nil { + return "", err + } + + pathEl1 := d2themes.NewThemableElement("path") + pathEl1.D = path1 + pathEl1.Fill = color.None + pathEl1.Stroke = connection.Stroke + pathEl1.ClassName = fmt.Sprintf("connection%s", animatedClass) + pathEl1.Style = connection.CSSStyle() + pathEl1.Style += "animation-direction: reverse;" + pathEl1.Attributes = attrs + + pathEl2 := d2themes.NewThemableElement("path") + pathEl2.D = path2 + pathEl2.Fill = color.None + pathEl2.Stroke = connection.Stroke + pathEl2.ClassName = fmt.Sprintf("connection%s", animatedClass) + pathEl2.Style = connection.CSSStyle() + pathEl2.Attributes = attrs + // return pathEl1.Render(), nil + return pathEl2.Render(), nil + // return pathEl1.Render() + " " + pathEl2.Render(), nil + } else { + pathEl := d2themes.NewThemableElement("path") + pathEl.D = finalPath + pathEl.Fill = color.None + pathEl.Stroke = connection.Stroke + pathEl.ClassName = fmt.Sprintf("connection%s", animatedClass) + pathEl.Style = connection.CSSStyle() + pathEl.Attributes = attrs + return pathEl.Render(), nil } - return output, nil } // TODO cleanup diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index 9faf2a361..9360c3eed 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -11,7 +11,6 @@ import ( "html" "io" "sort" - "strconv" "strings" "math" @@ -495,178 +494,6 @@ func makeLabelMask(labelTL *geo.Point, width, height int, opacity float64) strin ) } -// Gets a certain line/curve's SVG path string. offsetIdx and pathData provides the points needed -func getSVGPathString(pathType string, offsetIdx int, pathData []string) (string, error) { - switch pathType { - case "M": - return fmt.Sprintf("M %s %s ", pathData[offsetIdx+1], pathData[offsetIdx+2]), nil - case "L": - return fmt.Sprintf("L %s %s ", pathData[offsetIdx+1], pathData[offsetIdx+2]), nil - case "C": - return fmt.Sprintf("C %s %s %s %s %s %s ", pathData[offsetIdx+1], pathData[offsetIdx+2], pathData[offsetIdx+3], pathData[offsetIdx+4], pathData[offsetIdx+5], pathData[offsetIdx+6]), nil - case "S": - return fmt.Sprintf("S %s %s %s %s ", pathData[offsetIdx+1], pathData[offsetIdx+2], pathData[offsetIdx+3], pathData[offsetIdx+4]), nil - default: - return "", fmt.Errorf("unknown svg path command \"%s\"", pathData[offsetIdx]) - } -} - -// Gets how much to increment by on an SVG string to get to the next path command -func getPathStringIncrement(pathType string) (int, error) { - switch pathType { - case "M": - return 3, nil - case "L": - return 3, nil - case "C": - return 7, nil - case "S": - return 5, nil - default: - return 0, fmt.Errorf("unknown svg path command \"%s\"", pathType) - } -} - -// This function finds the length of a path in SVG notation -func pathLength(pathData []string) (float64, error) { - var x, y, pathLength float64 - var prevPosition geo.Point - var increment int - - for i := 0; i < len(pathData); i += increment { - switch pathData[i] { - case "M": - x, _ = strconv.ParseFloat(pathData[i+1], 64) - y, _ = strconv.ParseFloat(pathData[i+2], 64) - case "L": - x, _ = strconv.ParseFloat(pathData[i+1], 64) - y, _ = strconv.ParseFloat(pathData[i+2], 64) - - pathLength += geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) - case "C": - x, _ = strconv.ParseFloat(pathData[i+5], 64) - y, _ = strconv.ParseFloat(pathData[i+6], 64) - - pathLength += geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) - case "S": - x, _ = strconv.ParseFloat(pathData[i+3], 64) - y, _ = strconv.ParseFloat(pathData[i+4], 64) - - pathLength += geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) - default: - return 0, fmt.Errorf("unknown svg path command \"%s\"", pathData[i]) - } - - prevPosition = geo.Point{X: x, Y: y} - - incr, err := getPathStringIncrement(pathData[i]) - - if err != nil { - return 0, err - } - - increment = incr - } - - return pathLength, nil -} - -// Splits an SVG path into two SVG paths, with the first path being ~{percentage}% of the path -func splitPath(path string, percentage float64) (string, string, error) { - var sumPathLens, curPathLen, x, y float64 - var prevPosition geo.Point - var path1, path2 string - var increment int - - pastHalf := false - pathData := strings.Split(path, " ") - pathLen, err := pathLength(pathData) - - if err != nil { - return "", "", err - } - - for i := 0; i < len(pathData); i += increment { - switch pathData[i] { - case "M": - x, _ = strconv.ParseFloat(pathData[i+1], 64) - y, _ = strconv.ParseFloat(pathData[i+2], 64) - case "L": - x, _ = strconv.ParseFloat(pathData[i+1], 64) - y, _ = strconv.ParseFloat(pathData[i+2], 64) - - curPathLen = geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) - case "C": - x, _ = strconv.ParseFloat(pathData[i+5], 64) - y, _ = strconv.ParseFloat(pathData[i+6], 64) - - curPathLen = geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) - case "S": - x, _ = strconv.ParseFloat(pathData[i+3], 64) - y, _ = strconv.ParseFloat(pathData[i+4], 64) - - curPathLen = geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) - default: - return "", "", fmt.Errorf("unknown svg path command \"%s\"", pathData[i]) - } - - curPath, err := getSVGPathString(pathData[i], i, pathData) - if err != nil { - return "", "", err - } - - sumPathLens += curPathLen - - if pastHalf { // add to path2 - path2 += curPath - } else if sumPathLens < pathLen*percentage { // add to path1 - path1 += curPath - } else { // transition from path1 -> path2 - t := (pathLen*percentage - sumPathLens + curPathLen) / curPathLen - - switch pathData[i] { - case "L": - path1 += fmt.Sprintf("L %f %f ", (x-prevPosition.X)*t+prevPosition.X, (y-prevPosition.Y)*t+prevPosition.Y) - path2 += fmt.Sprintf("M %f %f L %f %f ", (x-prevPosition.X)*t+prevPosition.X, (y-prevPosition.Y)*t+prevPosition.Y, x, y) - case "C": - h1x, _ := strconv.ParseFloat(pathData[i+1], 64) - h1y, _ := strconv.ParseFloat(pathData[i+2], 64) - h2x, _ := strconv.ParseFloat(pathData[i+3], 64) - h2y, _ := strconv.ParseFloat(pathData[i+4], 64) - - heading1 := geo.Point{X: h1x, Y: h1y} - heading2 := geo.Point{X: h2x, Y: h2y} - nextPoint := geo.Point{X: x, Y: y} - - q1, q2, q3, q4 := svg.BezierCurveSegment(&prevPosition, &heading1, &heading2, &nextPoint, 0, 0.5) - path1 += fmt.Sprintf("C %f %f %f %f %f %f ", q2.X, q2.Y, q3.X, q3.Y, q4.X, q4.Y) - - q1, q2, q3, q4 = svg.BezierCurveSegment(&prevPosition, &heading1, &heading2, &nextPoint, 0.5, 1) - path2 += fmt.Sprintf("M %f %f C %f %f %f %f %f %f ", q1.X, q1.Y, q2.X, q2.Y, q3.X, q3.Y, q4.X, q4.Y) - case "S": - // Skip S curves because they are shorter and we can split along the connection to the next path instead - path1 += fmt.Sprintf("S %s %s %s %s ", pathData[i+1], pathData[i+2], pathData[i+3], pathData[i+4]) - path2 += fmt.Sprintf("M %s %s ", pathData[i+3], pathData[i+4]) - default: - return "", "", fmt.Errorf("unknown svg path command \"%s\"", pathData[i]) - } - - pastHalf = true - } - - incr, err := getPathStringIncrement(pathData[i]) - - if err != nil { - return "", "", err - } - - increment = incr - prevPosition = geo.Point{X: x, Y: y} - } - - return path1, path2, nil -} - func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape, sketchRunner *d2sketch.Runner) (labelMask string, _ error) { opacityStyle := "" if connection.Opacity != 1.0 { @@ -745,7 +572,7 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co // If connection is animated and bidirectional if connection.Animated && ((connection.DstArrow == d2target.NoArrowhead && connection.SrcArrow == d2target.NoArrowhead) || (connection.DstArrow != d2target.NoArrowhead && connection.SrcArrow != d2target.NoArrowhead)) { // There is no pure CSS way to animate bidirectional connections in two directions, so we split it up - path1, path2, err := splitPath(path, 0.5) + path1, path2, err := svg.SplitPath(path, 0.5) if err != nil { return "", err diff --git a/e2etests/testdata/txtar.txt b/e2etests/testdata/txtar.txt index 19692fcd8..351eea8a1 100644 --- a/e2etests/testdata/txtar.txt +++ b/e2etests/testdata/txtar.txt @@ -215,6 +215,12 @@ ok: { } -- bidirectional_connection_animation -- +vars: { + d2-config: { + sketch: true + } +} + a <-> b: {style.animated: true} a <-> c: {style.animated: true} a <-> d: {style.animated: true} diff --git a/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/board.exp.json b/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/board.exp.json index 16c3d88b9..09c09cfbe 100644 --- a/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/board.exp.json +++ b/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/board.exp.json @@ -1,16 +1,24 @@ { "name": "", + "config": { + "sketch": true, + "themeID": null, + "darkThemeID": null, + "pad": null, + "center": null, + "layoutEngine": null + }, "isFolderOnly": false, - "fontFamily": "SourceSansPro", + "fontFamily": "HandDrawn", "shapes": [ { "id": "a", "type": "rectangle", "pos": { - "x": 170, + "x": 172, "y": 0 }, - "width": 53, + "width": 54, "height": 66, "opacity": 1, "strokeDash": 0, @@ -38,7 +46,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 8, + "labelWidth": 9, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -51,7 +59,7 @@ "x": 0, "y": 166 }, - "width": 53, + "width": 55, "height": 66, "opacity": 1, "strokeDash": 0, @@ -79,7 +87,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 8, + "labelWidth": 10, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -89,10 +97,10 @@ "id": "c", "type": "rectangle", "pos": { - "x": 113, + "x": 115, "y": 166 }, - "width": 53, + "width": 54, "height": 66, "opacity": 1, "strokeDash": 0, @@ -120,7 +128,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 8, + "labelWidth": 9, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -130,10 +138,10 @@ "id": "d", "type": "rectangle", "pos": { - "x": 226, + "x": 229, "y": 166 }, - "width": 54, + "width": 55, "height": 66, "opacity": 1, "strokeDash": 0, @@ -161,7 +169,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 9, + "labelWidth": 10, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -171,7 +179,7 @@ "id": "e", "type": "rectangle", "pos": { - "x": 340, + "x": 344, "y": 166 }, "width": 53, @@ -212,10 +220,10 @@ "id": "f", "type": "rectangle", "pos": { - "x": 455, + "x": 457, "y": 0 }, - "width": 51, + "width": 54, "height": 66, "opacity": 1, "strokeDash": 0, @@ -243,7 +251,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 6, + "labelWidth": 9, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -253,7 +261,7 @@ "id": "g", "type": "rectangle", "pos": { - "x": 453, + "x": 457, "y": 166 }, "width": 54, @@ -294,10 +302,10 @@ "id": "x", "type": "rectangle", "pos": { - "x": 566, + "x": 571, "y": 0 }, - "width": 53, + "width": 54, "height": 66, "opacity": 1, "strokeDash": 0, @@ -325,7 +333,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 8, + "labelWidth": 9, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -358,19 +366,19 @@ "labelPercentage": 0, "route": [ { - "x": 169.75, - "y": 45.957000732421875 + "x": 172.5, + "y": 46 }, { - "x": 55.14899826049805, - "y": 101.99099731445312 + "x": 56.5, + "y": 102 }, { - "x": 26.5, + "x": 27.5, "y": 126 }, { - "x": 26.5, + "x": 27.5, "y": 166 } ], @@ -405,19 +413,19 @@ "labelPercentage": 0, "route": [ { - "x": 173.5, + "x": 176, "y": 66 }, { - "x": 146.3000030517578, + "x": 148.8000030517578, "y": 106 }, { - "x": 139.5, + "x": 142, "y": 126 }, { - "x": 139.5, + "x": 142, "y": 166 } ], @@ -452,19 +460,19 @@ "labelPercentage": 0, "route": [ { - "x": 219, + "x": 222.5, "y": 66 }, { - "x": 246.1999969482422, + "x": 249.6999969482422, "y": 106 }, { - "x": 253, + "x": 256.5, "y": 126 }, { - "x": 253, + "x": 256.5, "y": 166 } ], @@ -499,19 +507,19 @@ "labelPercentage": 0, "route": [ { - "x": 222.5, - "y": 46 + "x": 226.25, + "y": 46.08599853515625 }, { - "x": 337.70001220703125, - "y": 102 + "x": 341.6499938964844, + "y": 102.01699829101562 }, { - "x": 366.5, + "x": 370.5, "y": 126 }, { - "x": 366.5, + "x": 370.5, "y": 166 } ], @@ -546,19 +554,19 @@ "labelPercentage": 0, "route": [ { - "x": 480, + "x": 484, "y": 66 }, { - "x": 480, + "x": 484, "y": 106 }, { - "x": 480, + "x": 484, "y": 126 }, { - "x": 480, + "x": 484, "y": 166 } ], @@ -593,55 +601,55 @@ "labelPercentage": 0, "route": [ { - "x": 619.166015625, + "x": 624.666015625, "y": 16 }, { - "x": 639.9660034179688, + "x": 646.2659912109375, "y": 3.1989998817443848 }, { - "x": 646.5, + "x": 653, "y": 0 }, { - "x": 648.5, + "x": 655, "y": 0 }, { - "x": 650.5, + "x": 657, "y": 0 }, { - "x": 653.166015625, + "x": 659.666015625, "y": 6.599999904632568 }, { - "x": 655.166015625, + "x": 661.666015625, "y": 16.5 }, { - "x": 657.166015625, + "x": 663.666015625, "y": 26.399999618530273 }, { - "x": 657.166015625, + "x": 663.666015625, "y": 39.599998474121094 }, { - "x": 655.166015625, + "x": 661.666015625, "y": 49.5 }, { - "x": 653.166015625, + "x": 659.666015625, "y": 59.400001525878906 }, { - "x": 639.9660034179688, + "x": 646.2659912109375, "y": 62.79999923706055 }, { - "x": 619.166015625, + "x": 624.666015625, "y": 50 } ], diff --git a/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/sketch.exp.svg b/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/sketch.exp.svg index 030120280..02f9b9fa1 100644 --- a/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/sketch.exp.svg +++ b/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/sketch.exp.svg @@ -1,16 +1,16 @@ -abcdefgx - - - - - - - - - + .d2-3469083568 .fill-N1{fill:#0A0F25;} + .d2-3469083568 .fill-N2{fill:#676C7E;} + .d2-3469083568 .fill-N3{fill:#9499AB;} + .d2-3469083568 .fill-N4{fill:#CFD2DD;} + .d2-3469083568 .fill-N5{fill:#DEE1EB;} + .d2-3469083568 .fill-N6{fill:#EEF1F8;} + .d2-3469083568 .fill-N7{fill:#FFFFFF;} + .d2-3469083568 .fill-B1{fill:#0D32B2;} + .d2-3469083568 .fill-B2{fill:#0D32B2;} + .d2-3469083568 .fill-B3{fill:#E3E9FD;} + .d2-3469083568 .fill-B4{fill:#E3E9FD;} + .d2-3469083568 .fill-B5{fill:#EDF0FD;} + .d2-3469083568 .fill-B6{fill:#F7F8FE;} + .d2-3469083568 .fill-AA2{fill:#4A6FF3;} + .d2-3469083568 .fill-AA4{fill:#EDF0FD;} + .d2-3469083568 .fill-AA5{fill:#F7F8FE;} + .d2-3469083568 .fill-AB4{fill:#EDF0FD;} + .d2-3469083568 .fill-AB5{fill:#F7F8FE;} + .d2-3469083568 .stroke-N1{stroke:#0A0F25;} + .d2-3469083568 .stroke-N2{stroke:#676C7E;} + .d2-3469083568 .stroke-N3{stroke:#9499AB;} + .d2-3469083568 .stroke-N4{stroke:#CFD2DD;} + .d2-3469083568 .stroke-N5{stroke:#DEE1EB;} + .d2-3469083568 .stroke-N6{stroke:#EEF1F8;} + .d2-3469083568 .stroke-N7{stroke:#FFFFFF;} + .d2-3469083568 .stroke-B1{stroke:#0D32B2;} + .d2-3469083568 .stroke-B2{stroke:#0D32B2;} + .d2-3469083568 .stroke-B3{stroke:#E3E9FD;} + .d2-3469083568 .stroke-B4{stroke:#E3E9FD;} + .d2-3469083568 .stroke-B5{stroke:#EDF0FD;} + .d2-3469083568 .stroke-B6{stroke:#F7F8FE;} + .d2-3469083568 .stroke-AA2{stroke:#4A6FF3;} + .d2-3469083568 .stroke-AA4{stroke:#EDF0FD;} + .d2-3469083568 .stroke-AA5{stroke:#F7F8FE;} + .d2-3469083568 .stroke-AB4{stroke:#EDF0FD;} + .d2-3469083568 .stroke-AB5{stroke:#F7F8FE;} + .d2-3469083568 .background-color-N1{background-color:#0A0F25;} + .d2-3469083568 .background-color-N2{background-color:#676C7E;} + .d2-3469083568 .background-color-N3{background-color:#9499AB;} + .d2-3469083568 .background-color-N4{background-color:#CFD2DD;} + .d2-3469083568 .background-color-N5{background-color:#DEE1EB;} + .d2-3469083568 .background-color-N6{background-color:#EEF1F8;} + .d2-3469083568 .background-color-N7{background-color:#FFFFFF;} + .d2-3469083568 .background-color-B1{background-color:#0D32B2;} + .d2-3469083568 .background-color-B2{background-color:#0D32B2;} + .d2-3469083568 .background-color-B3{background-color:#E3E9FD;} + .d2-3469083568 .background-color-B4{background-color:#E3E9FD;} + .d2-3469083568 .background-color-B5{background-color:#EDF0FD;} + .d2-3469083568 .background-color-B6{background-color:#F7F8FE;} + .d2-3469083568 .background-color-AA2{background-color:#4A6FF3;} + .d2-3469083568 .background-color-AA4{background-color:#EDF0FD;} + .d2-3469083568 .background-color-AA5{background-color:#F7F8FE;} + .d2-3469083568 .background-color-AB4{background-color:#EDF0FD;} + .d2-3469083568 .background-color-AB5{background-color:#F7F8FE;} + .d2-3469083568 .color-N1{color:#0A0F25;} + .d2-3469083568 .color-N2{color:#676C7E;} + .d2-3469083568 .color-N3{color:#9499AB;} + .d2-3469083568 .color-N4{color:#CFD2DD;} + .d2-3469083568 .color-N5{color:#DEE1EB;} + .d2-3469083568 .color-N6{color:#EEF1F8;} + .d2-3469083568 .color-N7{color:#FFFFFF;} + .d2-3469083568 .color-B1{color:#0D32B2;} + .d2-3469083568 .color-B2{color:#0D32B2;} + .d2-3469083568 .color-B3{color:#E3E9FD;} + .d2-3469083568 .color-B4{color:#E3E9FD;} + .d2-3469083568 .color-B5{color:#EDF0FD;} + .d2-3469083568 .color-B6{color:#F7F8FE;} + .d2-3469083568 .color-AA2{color:#4A6FF3;} + .d2-3469083568 .color-AA4{color:#EDF0FD;} + .d2-3469083568 .color-AA5{color:#F7F8FE;} + .d2-3469083568 .color-AB4{color:#EDF0FD;} + .d2-3469083568 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]> + + + + + + + +abcdefgx + + + + + + + + + \ No newline at end of file diff --git a/e2etests/testdata/txtar/bidirectional_connection_animation/elk/board.exp.json b/e2etests/testdata/txtar/bidirectional_connection_animation/elk/board.exp.json index 85d12fc27..9eadf807d 100644 --- a/e2etests/testdata/txtar/bidirectional_connection_animation/elk/board.exp.json +++ b/e2etests/testdata/txtar/bidirectional_connection_animation/elk/board.exp.json @@ -1,13 +1,21 @@ { "name": "", + "config": { + "sketch": true, + "themeID": null, + "darkThemeID": null, + "pad": null, + "center": null, + "layoutEngine": null + }, "isFolderOnly": false, - "fontFamily": "SourceSansPro", + "fontFamily": "HandDrawn", "shapes": [ { "id": "a", "type": "rectangle", "pos": { - "x": 68, + "x": 71, "y": 12 }, "width": 160, @@ -38,7 +46,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 8, + "labelWidth": 9, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -51,7 +59,7 @@ "x": 12, "y": 208 }, - "width": 53, + "width": 55, "height": 66, "opacity": 1, "strokeDash": 0, @@ -79,7 +87,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 8, + "labelWidth": 10, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -89,10 +97,10 @@ "id": "c", "type": "rectangle", "pos": { - "x": 85, + "x": 87, "y": 208 }, - "width": 53, + "width": 54, "height": 66, "opacity": 1, "strokeDash": 0, @@ -120,7 +128,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 8, + "labelWidth": 9, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -130,10 +138,10 @@ "id": "d", "type": "rectangle", "pos": { - "x": 158, + "x": 161, "y": 208 }, - "width": 54, + "width": 55, "height": 66, "opacity": 1, "strokeDash": 0, @@ -161,7 +169,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 9, + "labelWidth": 10, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -171,7 +179,7 @@ "id": "e", "type": "rectangle", "pos": { - "x": 232, + "x": 236, "y": 208 }, "width": 53, @@ -212,10 +220,10 @@ "id": "f", "type": "rectangle", "pos": { - "x": 306, + "x": 309, "y": 12 }, - "width": 51, + "width": 54, "height": 66, "opacity": 1, "strokeDash": 0, @@ -243,7 +251,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 6, + "labelWidth": 9, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -253,7 +261,7 @@ "id": "g", "type": "rectangle", "pos": { - "x": 305, + "x": 309, "y": 208 }, "width": 54, @@ -294,10 +302,10 @@ "id": "x", "type": "rectangle", "pos": { - "x": 427, + "x": 433, "y": 12 }, - "width": 53, + "width": 54, "height": 66, "opacity": 1, "strokeDash": 0, @@ -325,7 +333,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 8, + "labelWidth": 9, "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, @@ -358,19 +366,19 @@ "labelPercentage": 0, "route": [ { - "x": 100.25, + "x": 103.25, "y": 78 }, { - "x": 100.25, + "x": 103.25, "y": 118 }, { - "x": 38.5, + "x": 39.5, "y": 118 }, { - "x": 38.5, + "x": 39.5, "y": 208 } ], @@ -404,19 +412,19 @@ "labelPercentage": 0, "route": [ { - "x": 132.25, + "x": 135.25, "y": 78 }, { - "x": 132.25, + "x": 135.25, "y": 168 }, { - "x": 111.5, + "x": 114, "y": 168 }, { - "x": 111.5, + "x": 114, "y": 208 } ], @@ -450,19 +458,19 @@ "labelPercentage": 0, "route": [ { - "x": 164.25, + "x": 167.25, "y": 78 }, { - "x": 164.25, + "x": 167.25, "y": 168 }, { - "x": 185, + "x": 188.5, "y": 168 }, { - "x": 185, + "x": 188.5, "y": 208 } ], @@ -496,19 +504,19 @@ "labelPercentage": 0, "route": [ { - "x": 196.25, + "x": 199.25, "y": 78 }, { - "x": 196.25, + "x": 199.25, "y": 118 }, { - "x": 258.5, + "x": 262.5, "y": 118 }, { - "x": 258.5, + "x": 262.5, "y": 208 } ], @@ -542,11 +550,11 @@ "labelPercentage": 0, "route": [ { - "x": 332, + "x": 336, "y": 78 }, { - "x": 332, + "x": 336, "y": 208 } ], @@ -580,19 +588,19 @@ "labelPercentage": 0, "route": [ { - "x": 427.5, + "x": 433, "y": 34 }, { - "x": 377.5, + "x": 383, "y": 34 }, { - "x": 377.5, + "x": 383, "y": 56 }, { - "x": 427.5, + "x": 433, "y": 56 } ], diff --git a/e2etests/testdata/txtar/bidirectional_connection_animation/elk/sketch.exp.svg b/e2etests/testdata/txtar/bidirectional_connection_animation/elk/sketch.exp.svg index 5bdfdd2c5..4c6c71efb 100644 --- a/e2etests/testdata/txtar/bidirectional_connection_animation/elk/sketch.exp.svg +++ b/e2etests/testdata/txtar/bidirectional_connection_animation/elk/sketch.exp.svg @@ -1,16 +1,16 @@ -abcdefgx - - - - - - - - - + .d2-2501036534 .fill-N1{fill:#0A0F25;} + .d2-2501036534 .fill-N2{fill:#676C7E;} + .d2-2501036534 .fill-N3{fill:#9499AB;} + .d2-2501036534 .fill-N4{fill:#CFD2DD;} + .d2-2501036534 .fill-N5{fill:#DEE1EB;} + .d2-2501036534 .fill-N6{fill:#EEF1F8;} + .d2-2501036534 .fill-N7{fill:#FFFFFF;} + .d2-2501036534 .fill-B1{fill:#0D32B2;} + .d2-2501036534 .fill-B2{fill:#0D32B2;} + .d2-2501036534 .fill-B3{fill:#E3E9FD;} + .d2-2501036534 .fill-B4{fill:#E3E9FD;} + .d2-2501036534 .fill-B5{fill:#EDF0FD;} + .d2-2501036534 .fill-B6{fill:#F7F8FE;} + .d2-2501036534 .fill-AA2{fill:#4A6FF3;} + .d2-2501036534 .fill-AA4{fill:#EDF0FD;} + .d2-2501036534 .fill-AA5{fill:#F7F8FE;} + .d2-2501036534 .fill-AB4{fill:#EDF0FD;} + .d2-2501036534 .fill-AB5{fill:#F7F8FE;} + .d2-2501036534 .stroke-N1{stroke:#0A0F25;} + .d2-2501036534 .stroke-N2{stroke:#676C7E;} + .d2-2501036534 .stroke-N3{stroke:#9499AB;} + .d2-2501036534 .stroke-N4{stroke:#CFD2DD;} + .d2-2501036534 .stroke-N5{stroke:#DEE1EB;} + .d2-2501036534 .stroke-N6{stroke:#EEF1F8;} + .d2-2501036534 .stroke-N7{stroke:#FFFFFF;} + .d2-2501036534 .stroke-B1{stroke:#0D32B2;} + .d2-2501036534 .stroke-B2{stroke:#0D32B2;} + .d2-2501036534 .stroke-B3{stroke:#E3E9FD;} + .d2-2501036534 .stroke-B4{stroke:#E3E9FD;} + .d2-2501036534 .stroke-B5{stroke:#EDF0FD;} + .d2-2501036534 .stroke-B6{stroke:#F7F8FE;} + .d2-2501036534 .stroke-AA2{stroke:#4A6FF3;} + .d2-2501036534 .stroke-AA4{stroke:#EDF0FD;} + .d2-2501036534 .stroke-AA5{stroke:#F7F8FE;} + .d2-2501036534 .stroke-AB4{stroke:#EDF0FD;} + .d2-2501036534 .stroke-AB5{stroke:#F7F8FE;} + .d2-2501036534 .background-color-N1{background-color:#0A0F25;} + .d2-2501036534 .background-color-N2{background-color:#676C7E;} + .d2-2501036534 .background-color-N3{background-color:#9499AB;} + .d2-2501036534 .background-color-N4{background-color:#CFD2DD;} + .d2-2501036534 .background-color-N5{background-color:#DEE1EB;} + .d2-2501036534 .background-color-N6{background-color:#EEF1F8;} + .d2-2501036534 .background-color-N7{background-color:#FFFFFF;} + .d2-2501036534 .background-color-B1{background-color:#0D32B2;} + .d2-2501036534 .background-color-B2{background-color:#0D32B2;} + .d2-2501036534 .background-color-B3{background-color:#E3E9FD;} + .d2-2501036534 .background-color-B4{background-color:#E3E9FD;} + .d2-2501036534 .background-color-B5{background-color:#EDF0FD;} + .d2-2501036534 .background-color-B6{background-color:#F7F8FE;} + .d2-2501036534 .background-color-AA2{background-color:#4A6FF3;} + .d2-2501036534 .background-color-AA4{background-color:#EDF0FD;} + .d2-2501036534 .background-color-AA5{background-color:#F7F8FE;} + .d2-2501036534 .background-color-AB4{background-color:#EDF0FD;} + .d2-2501036534 .background-color-AB5{background-color:#F7F8FE;} + .d2-2501036534 .color-N1{color:#0A0F25;} + .d2-2501036534 .color-N2{color:#676C7E;} + .d2-2501036534 .color-N3{color:#9499AB;} + .d2-2501036534 .color-N4{color:#CFD2DD;} + .d2-2501036534 .color-N5{color:#DEE1EB;} + .d2-2501036534 .color-N6{color:#EEF1F8;} + .d2-2501036534 .color-N7{color:#FFFFFF;} + .d2-2501036534 .color-B1{color:#0D32B2;} + .d2-2501036534 .color-B2{color:#0D32B2;} + .d2-2501036534 .color-B3{color:#E3E9FD;} + .d2-2501036534 .color-B4{color:#E3E9FD;} + .d2-2501036534 .color-B5{color:#EDF0FD;} + .d2-2501036534 .color-B6{color:#F7F8FE;} + .d2-2501036534 .color-AA2{color:#4A6FF3;} + .d2-2501036534 .color-AA4{color:#EDF0FD;} + .d2-2501036534 .color-AA5{color:#F7F8FE;} + .d2-2501036534 .color-AB4{color:#EDF0FD;} + .d2-2501036534 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]> + + + + + + + +abcdefgx + + + + + + + + + \ No newline at end of file diff --git a/lib/svg/path.go b/lib/svg/path.go index eddbb970f..f3d2d6606 100644 --- a/lib/svg/path.go +++ b/lib/svg/path.go @@ -3,6 +3,7 @@ package svg import ( "fmt" "math" + "strconv" "strings" "oss.terrastruct.com/d2/lib/geo" @@ -139,3 +140,181 @@ func BezierCurveSegment(p1, p2, p3, p4 *geo.Point, t0, t1 float64) (geo.Point, g return q1, q2, q3, q4 } + +// Gets a certain line/curve's SVG path string. offsetIdx and pathData provides the points needed +func getSVGPathString(pathType string, offsetIdx int, pathData []string) (string, error) { + switch pathType { + case "M": + return fmt.Sprintf("M %s %s ", pathData[offsetIdx+1], pathData[offsetIdx+2]), nil + case "L": + return fmt.Sprintf("L %s %s ", pathData[offsetIdx+1], pathData[offsetIdx+2]), nil + case "C": + return fmt.Sprintf("C %s %s %s %s %s %s ", pathData[offsetIdx+1], pathData[offsetIdx+2], pathData[offsetIdx+3], pathData[offsetIdx+4], pathData[offsetIdx+5], pathData[offsetIdx+6]), nil + case "S": + return fmt.Sprintf("S %s %s %s %s ", pathData[offsetIdx+1], pathData[offsetIdx+2], pathData[offsetIdx+3], pathData[offsetIdx+4]), nil + default: + return "", fmt.Errorf("unknown svg path command \"%s\"", pathData[offsetIdx]) + } +} + +// Gets how much to increment by on an SVG string to get to the next path command +func getPathStringIncrement(pathType string) (int, error) { + switch pathType { + case "M": + return 3, nil + case "L": + return 3, nil + case "C": + return 7, nil + case "S": + return 5, nil + default: + return 0, fmt.Errorf("unknown svg path command \"%s\"", pathType) + } +} + +// This function finds the length of a path in SVG notation +func pathLength(pathData []string) (float64, error) { + var x, y, pathLength float64 + var prevPosition geo.Point + var increment int + + for i := 0; i < len(pathData); i += increment { + switch pathData[i] { + case "M": + x, _ = strconv.ParseFloat(pathData[i+1], 64) + y, _ = strconv.ParseFloat(pathData[i+2], 64) + case "L": + x, _ = strconv.ParseFloat(pathData[i+1], 64) + y, _ = strconv.ParseFloat(pathData[i+2], 64) + + pathLength += geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) + case "C": + x, _ = strconv.ParseFloat(pathData[i+5], 64) + y, _ = strconv.ParseFloat(pathData[i+6], 64) + + pathLength += geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) + case "S": + x, _ = strconv.ParseFloat(pathData[i+3], 64) + y, _ = strconv.ParseFloat(pathData[i+4], 64) + + pathLength += geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) + default: + fmt.Println("hello", pathData[i]) + return 0, fmt.Errorf("unknown svg path command \"%s\"", pathData[i]) + } + + prevPosition = geo.Point{X: x, Y: y} + + incr, err := getPathStringIncrement(pathData[i]) + + if err != nil { + return 0, err + } + + increment = incr + } + + return pathLength, nil +} + +// Splits an SVG path into two SVG paths, with the first path being ~{percentage}% of the path +func SplitPath(path string, percentage float64) (string, string, error) { + var sumPathLens, curPathLen, x, y float64 + var prevPosition geo.Point + var path1, path2 string + var increment int + + pastHalf := false + pathData := strings.Split(path, " ") + pathLen, err := pathLength(pathData) + fmt.Println("pathLen:", pathLen) + + if err != nil { + return "", "", err + } + + for i := 0; i < len(pathData); i += increment { + switch pathData[i] { + case "M": + x, _ = strconv.ParseFloat(pathData[i+1], 64) + y, _ = strconv.ParseFloat(pathData[i+2], 64) + + curPathLen = 0 + case "L": + x, _ = strconv.ParseFloat(pathData[i+1], 64) + y, _ = strconv.ParseFloat(pathData[i+2], 64) + + curPathLen = geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) + case "C": + x, _ = strconv.ParseFloat(pathData[i+5], 64) + y, _ = strconv.ParseFloat(pathData[i+6], 64) + + curPathLen = geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) + case "S": + x, _ = strconv.ParseFloat(pathData[i+3], 64) + y, _ = strconv.ParseFloat(pathData[i+4], 64) + + curPathLen = geo.EuclideanDistance(prevPosition.X, prevPosition.Y, x, y) + default: + return "", "", fmt.Errorf("unknown svg path command \"%s\"", pathData[i]) + } + + curPath, err := getSVGPathString(pathData[i], i, pathData) + if err != nil { + return "", "", err + } + + sumPathLens += curPathLen + + if pastHalf { // add to path2 + path2 += curPath + } else if sumPathLens < pathLen*percentage { // add to path1 + path1 += curPath + } else { // transition from path1 -> path2 + t := (pathLen*percentage - sumPathLens + curPathLen) / curPathLen + + switch pathData[i] { + case "M": + path2 += fmt.Sprintf("M %s %s ", pathData[i+3], pathData[i+4]) + case "L": + path1 += fmt.Sprintf("L %f %f ", (x-prevPosition.X)*t+prevPosition.X, (y-prevPosition.Y)*t+prevPosition.Y) + path2 += fmt.Sprintf("M %f %f L %f %f ", (x-prevPosition.X)*t+prevPosition.X, (y-prevPosition.Y)*t+prevPosition.Y, x, y) + case "C": + h1x, _ := strconv.ParseFloat(pathData[i+1], 64) + h1y, _ := strconv.ParseFloat(pathData[i+2], 64) + h2x, _ := strconv.ParseFloat(pathData[i+3], 64) + h2y, _ := strconv.ParseFloat(pathData[i+4], 64) + + heading1 := geo.Point{X: h1x, Y: h1y} + heading2 := geo.Point{X: h2x, Y: h2y} + nextPoint := geo.Point{X: x, Y: y} + + q1, q2, q3, q4 := BezierCurveSegment(&prevPosition, &heading1, &heading2, &nextPoint, 0, 0.5) + path1 += fmt.Sprintf("C %f %f %f %f %f %f ", q2.X, q2.Y, q3.X, q3.Y, q4.X, q4.Y) + + q1, q2, q3, q4 = BezierCurveSegment(&prevPosition, &heading1, &heading2, &nextPoint, 0.5, 1) + path2 += fmt.Sprintf("M %f %f C %f %f %f %f %f %f ", q1.X, q1.Y, q2.X, q2.Y, q3.X, q3.Y, q4.X, q4.Y) + case "S": + // Skip S curves because they are shorter and we can split along the connection to the next path instead + path1 += fmt.Sprintf("S %s %s %s %s ", pathData[i+1], pathData[i+2], pathData[i+3], pathData[i+4]) + path2 += fmt.Sprintf("M %s %s ", pathData[i+3], pathData[i+4]) + default: + return "", "", fmt.Errorf("unknown svg path command \"%s\"", pathData[i]) + } + + pastHalf = true + } + + incr, err := getPathStringIncrement(pathData[i]) + + if err != nil { + return "", "", err + } + + increment = incr + prevPosition = geo.Point{X: x, Y: y} + } + + return path1, path2, nil +}