From 0803d129a281f73aaf8c8f885a29d9862f6921ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20Fo=C5=A1n=C3=A1r?= Date: Mon, 16 Jan 2023 22:19:19 +0100 Subject: [PATCH] updated sketch test, fixed improper arrowhead rendering, made markdown background transparent --- d2renderers/d2sketch/sketch_test.go | 46 +++--- .../testdata/all_shapes/sketch.exp.svg | 54 +++---- .../d2sketch/testdata/animated/sketch.exp.svg | 54 +++---- .../testdata/arrowheads/sketch.exp.svg | 70 ++++----- .../d2sketch/testdata/basic/sketch.exp.svg | 54 +++---- .../testdata/child_to_child/sketch.exp.svg | 54 +++---- .../d2sketch/testdata/class/sketch.exp.svg | 66 ++++----- .../testdata/connection_label/board.exp.json | 136 ------------------ .../testdata/connection_label/sketch.exp.svg | 54 +++---- .../d2sketch/testdata/overlay/sketch.exp.svg | 68 +++++++++ .../testdata/sql_tables/sketch.exp.svg | 86 ++++------- .../d2sketch/testdata/twitter/sketch.exp.svg | 101 ++++++------- d2renderers/d2svg/d2svg.go | 16 +-- d2renderers/d2svg/github-markdown.css | 2 +- 14 files changed, 388 insertions(+), 473 deletions(-) delete mode 100644 d2renderers/d2sketch/testdata/connection_label/board.exp.json create mode 100644 d2renderers/d2sketch/testdata/overlay/sketch.exp.svg diff --git a/d2renderers/d2sketch/sketch_test.go b/d2renderers/d2sketch/sketch_test.go index 638d0d320..5419455fa 100644 --- a/d2renderers/d2sketch/sketch_test.go +++ b/d2renderers/d2sketch/sketch_test.go @@ -4,6 +4,7 @@ import ( "context" "encoding/xml" "io/ioutil" + "math" "os" "path/filepath" "strings" @@ -329,23 +330,27 @@ a.9 <-> b.9: cf-one-required { `, }, { - name: "bright_overlay", - script: `a.style.fill = "#fff" -`, - }, - { - name: "normal_overlay", - script: `a.style.fill = "#ccc" -`, - }, - { - name: "dark_overlay", - script: `a.style.fill = "#555" -`, - }, - { - name: "darker_overlay", - script: `a.style.fill = "#000" + name: "overlay", + script: `bright: { + style.stroke: "#000" + style.font-color: "#000" + style.fill: "#fff" +} +normal: { + style.stroke: "#000" + style.font-color: "#000" + style.fill: "#ccc" +} +dark: { + style.stroke: "#000" + style.font-color: "#fff" + style.fill: "#555" +} +darker: { + style.stroke: "#000" + style.font-color: "#fff" + style.fill: "#000" +} `, }, } @@ -395,9 +400,10 @@ func run(t *testing.T, tc testCase) { pathGotSVG := filepath.Join(dataPath, "sketch.got.svg") svgBytes, err := d2svg.Render(diagram, &d2svg.RenderOpts{ - Pad: d2svg.DEFAULT_PADDING, - Sketch: true, - ThemeID: 0, + Pad: d2svg.DEFAULT_PADDING, + Sketch: true, + ThemeID: 0, + DarkThemeID: math.MaxInt64, }) assert.Success(t, err) err = os.MkdirAll(dataPath, 0755) diff --git a/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg b/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg index 8496e2c0f..7b0011037 100644 --- a/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg @@ -1,11 +1,4 @@ - - + + + + + + + + \ No newline at end of file +}]]>rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/animated/sketch.exp.svg b/d2renderers/d2sketch/testdata/animated/sketch.exp.svg index 9ce12962d..6878c7ad6 100644 --- a/d2renderers/d2sketch/testdata/animated/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/animated/sketch.exp.svg @@ -1,11 +1,4 @@ - - + + + + + + + + \ No newline at end of file +}]]>wintersummertreessnowsun + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/arrowheads/sketch.exp.svg b/d2renderers/d2sketch/testdata/arrowheads/sketch.exp.svg index 05f0b4575..edaeebc57 100644 --- a/d2renderers/d2sketch/testdata/arrowheads/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/arrowheads/sketch.exp.svg @@ -1,11 +1,4 @@ - - + + + + + + + + \ No newline at end of file +}]]>112233445566778899none arrow triangle diamond diamond filled cf-many cf-many-required cf-one cf-one-required + + + + + + + + + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/basic/sketch.exp.svg b/d2renderers/d2sketch/testdata/basic/sketch.exp.svg index 085125e38..6dc0e7610 100644 --- a/d2renderers/d2sketch/testdata/basic/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/basic/sketch.exp.svg @@ -1,11 +1,4 @@ - - + + + + + + + + \ No newline at end of file +}]]>ab + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg b/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg index 90648293b..0b2866a6e 100644 --- a/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg @@ -1,11 +1,4 @@ - - + + + + + + + + \ No newline at end of file +}]]>wintersummersnowsun + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/class/sketch.exp.svg b/d2renderers/d2sketch/testdata/class/sketch.exp.svg index 91e99ed84..7ff69c265 100644 --- a/d2renderers/d2sketch/testdata/class/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/class/sketch.exp.svg @@ -1,11 +1,4 @@ - - + + + + + + + + \ No newline at end of file +}]]>BatchManager-numint-timeoutint-pid+getStatus()Enum+getJobs()Job[]+setTimeout(seconds int)void + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/connection_label/board.exp.json b/d2renderers/d2sketch/testdata/connection_label/board.exp.json deleted file mode 100644 index fc640e88a..000000000 --- a/d2renderers/d2sketch/testdata/connection_label/board.exp.json +++ /dev/null @@ -1,136 +0,0 @@ -{ - "name": "", - "fontFamily": "HandDrawn", - "shapes": [ - { - "id": "a", - "type": "", - "pos": { - "x": 1, - "y": 0 - }, - "width": 114, - "height": 126, - "opacity": 1, - "strokeDash": 0, - "strokeWidth": 2, - "borderRadius": 0, - "fill": "#F7F8FE", - "stroke": "#0D32B2", - "shadow": false, - "3d": false, - "multiple": false, - "tooltip": "", - "link": "", - "icon": null, - "iconPosition": "", - "blend": false, - "fields": null, - "methods": null, - "columns": null, - "label": "a", - "fontSize": 16, - "fontFamily": "DEFAULT", - "language": "", - "color": "#0A0F25", - "italic": false, - "bold": true, - "underline": false, - "labelWidth": 14, - "labelHeight": 26, - "labelPosition": "INSIDE_MIDDLE_CENTER", - "zIndex": 0, - "level": 1 - }, - { - "id": "b", - "type": "", - "pos": { - "x": 0, - "y": 226 - }, - "width": 115, - "height": 126, - "opacity": 1, - "strokeDash": 0, - "strokeWidth": 2, - "borderRadius": 0, - "fill": "#F7F8FE", - "stroke": "#0D32B2", - "shadow": false, - "3d": false, - "multiple": false, - "tooltip": "", - "link": "", - "icon": null, - "iconPosition": "", - "blend": false, - "fields": null, - "methods": null, - "columns": null, - "label": "b", - "fontSize": 16, - "fontFamily": "DEFAULT", - "language": "", - "color": "#0A0F25", - "italic": false, - "bold": true, - "underline": false, - "labelWidth": 15, - "labelHeight": 26, - "labelPosition": "INSIDE_MIDDLE_CENTER", - "zIndex": 0, - "level": 1 - } - ], - "connections": [ - { - "id": "(a -> b)[0]", - "src": "a", - "srcArrow": "none", - "srcLabel": "", - "dst": "b", - "dstArrow": "triangle", - "dstLabel": "", - "opacity": 1, - "strokeDash": 0, - "strokeWidth": 2, - "stroke": "#0D32B2", - "label": "hello", - "fontSize": 16, - "fontFamily": "DEFAULT", - "language": "", - "color": "#676C7E", - "italic": true, - "bold": false, - "underline": false, - "labelWidth": 31, - "labelHeight": 23, - "labelPosition": "INSIDE_MIDDLE_CENTER", - "labelPercentage": 0, - "route": [ - { - "x": 57.5, - "y": 126 - }, - { - "x": 57.5, - "y": 166 - }, - { - "x": 57.5, - "y": 186 - }, - { - "x": 57.5, - "y": 226 - } - ], - "isCurve": true, - "animated": false, - "tooltip": "", - "icon": null, - "zIndex": 0 - } - ] -} diff --git a/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg b/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg index 05314ebdc..ffdc086ca 100644 --- a/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg @@ -1,11 +1,4 @@ - - + + + + + + + + \ No newline at end of file +}]]>ab hello + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/overlay/sketch.exp.svg b/d2renderers/d2sketch/testdata/overlay/sketch.exp.svg new file mode 100644 index 000000000..dc72fc623 --- /dev/null +++ b/d2renderers/d2sketch/testdata/overlay/sketch.exp.svg @@ -0,0 +1,68 @@ + + + + + + + + + brightnormaldarkdarker + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg b/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg index ca6bb4d1f..a30f985cd 100644 --- a/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg @@ -1,11 +1,4 @@ - - + + + + + + + + \ No newline at end of file +}]]>usersidintnamestringemailstringpasswordstringlast_logindatetimeproductsidintpricedecimalskustringnamestringordersidintuser_idintproduct_idintshipmentsidintorder_idinttracking_numberstringPKstatusstring + + + \ No newline at end of file diff --git a/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg b/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg index b1da8a144..a82add00e 100644 --- a/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg @@ -1,11 +1,4 @@ - - \ No newline at end of file +}]]>People discovery serviceAd mixerOnboarding serviceTwitter Frontend WebIphoneAndroidTimelineScorerHome RankerTimeline ServiceHome mixerManhattanGizmoduckSocial graphTweety PiePrediction ServiceHome ScorerManhattanMemcacheFetchFeatureScoringPrediction Service...etc

Timeline mixer

+
    +
  • Inject ads, who-to-follow, onboarding
    • +
  • Conversation module
    • +
  • Cursoring,pagination
    • +
  • Tweat deduplication
    • +
  • Served data logging
    • +
+
GraphQLFederated Strato Column

Tweet/user content hydration, visibility filtering

+
TLS-API (being deprecated)CrMixerEarlyBirdUtagSpaceCommunities iPhone web HTTP Android Thrift RPC Candidate Fetch Feature Hydration Candidate sources + + + + + + + + \ No newline at end of file diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index ddb4b458a..fafca9f3c 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -238,7 +238,7 @@ func arrowheadMarker(isTarget bool, id string, bgColor string, connection d2targ var modifierEl *svg_style.ThemableElement if arrowhead == d2target.CfOneRequired || arrowhead == d2target.CfManyRequired { - modifierEl := svg_style.NewThemableElement("path") + modifierEl = svg_style.NewThemableElement("path") modifierEl.D = fmt.Sprintf("M%f,%f %f,%f", offset, 0., offset, height, @@ -246,16 +246,16 @@ func arrowheadMarker(isTarget bool, id string, bgColor string, connection d2targ modifierEl.Fill = bgColor modifierEl.Stroke = svg_style.ConnectionTheme(connection) modifierEl.Class = "connection" - modifierEl.Style = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth) + modifierEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth) } else { - modifierEl := svg_style.NewThemableElement("circle") + modifierEl = svg_style.NewThemableElement("circle") modifierEl.Cx = offset/2.0 + 1.0 modifierEl.Cy = height / 2.0 modifierEl.R = offset / 2.0 modifierEl.Fill = bgColor modifierEl.Stroke = svg_style.ConnectionTheme(connection) modifierEl.Class = "connection" - modifierEl.Style = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth) + modifierEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth) } childPathEl := svg_style.NewThemableElement("path") @@ -278,13 +278,13 @@ func arrowheadMarker(isTarget bool, id string, bgColor string, connection d2targ } gEl := svg_style.NewThemableElement("g") - gEl.Fill = bgColor - gEl.Stroke = svg_style.ConnectionTheme(connection) - gEl.Class = "connection" - gEl.Style = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth) if !isTarget { gEl.Transform = fmt.Sprintf("scale(-1) translate(-%f, -%f)", width, height) } + gEl.Fill = bgColor + gEl.Stroke = svg_style.ConnectionTheme(connection) + gEl.Class = "connection" + gEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth) gEl.Content = fmt.Sprintf("%s%s", modifierEl.Render(), childPathEl.Render(), ) diff --git a/d2renderers/d2svg/github-markdown.css b/d2renderers/d2svg/github-markdown.css index 89eeedbf0..a797c6875 100644 --- a/d2renderers/d2svg/github-markdown.css +++ b/d2renderers/d2svg/github-markdown.css @@ -27,7 +27,7 @@ -webkit-text-size-adjust: 100%; margin: 0; color: var(--color-fg-default); - background-color: var(--color-canvas-default); + background-color: transparent; /* we don't want to define the background color */ font-family: "font-regular"; font-size: 16px; line-height: 1.5;