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

Merge pull request #799 from alixander/rx

Browse source 
fix border-radius for firefox
This commit is contained in:
Alexander Wang 2023-02-12 12:37:19 -08:00 committed by GitHub
commit 69a4b31aa8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 287 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ci/release/changelogs/next.md
View file

@ -42,3 +42,4 @@
- Images can now be set to sizes smaller than 128x128. [#702](https://github.com/terrastruct/d2/pull/702)
- Tooltips with ampersand would result in invalid SVGs. [#798](https://github.com/terrastruct/d2/pull/798)
- Fixes class height when there are no rows. [#756](https://github.com/terrastruct/d2/pull/756)
- Border radius was not firefox-compatible. [#799](https://github.com/terrastruct/d2/pull/799)

28
d2renderers/d2svg/d2svg.go
View file

@ -802,13 +802,17 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
// TODO should standardize "" to rectangle
case d2target.ShapeRectangle, d2target.ShapeSequenceDiagram, "":
rx := ""
if targetShape.BorderRadius != 0 {
rx = fmt.Sprintf(` rx="%d"`, targetShape.BorderRadius)
}
if targetShape.ThreeDee {
fmt.Fprint(writer, render3dRect(targetShape))
} else {
if !targetShape.DoubleBorder {
if targetShape.Multiple {
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
targetShape.Pos.X+10, targetShape.Pos.Y-10, targetShape.Width, targetShape.Height, style)
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s"%s />`,
targetShape.Pos.X+10, targetShape.Pos.Y-10, targetShape.Width, targetShape.Height, style, rx)
}
if sketchRunner != nil {
out, err := d2sketch.Rect(sketchRunner, targetShape)
@ -817,15 +821,15 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
}
fmt.Fprint(writer, out)
} else {
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style)
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s"%s />`,
targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style, rx)
}
} else {
if targetShape.Multiple {
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
targetShape.Pos.X+10, targetShape.Pos.Y-10, targetShape.Width, targetShape.Height, style)
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
targetShape.Pos.X+10+d2target.INNER_BORDER_OFFSET, targetShape.Pos.Y-10+d2target.INNER_BORDER_OFFSET, targetShape.Width-2*d2target.INNER_BORDER_OFFSET, targetShape.Height-2*d2target.INNER_BORDER_OFFSET, style)
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s"%s />`,
targetShape.Pos.X+10, targetShape.Pos.Y-10, targetShape.Width, targetShape.Height, style, rx)
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s"%s />`,
targetShape.Pos.X+10+d2target.INNER_BORDER_OFFSET, targetShape.Pos.Y-10+d2target.INNER_BORDER_OFFSET, targetShape.Width-2*d2target.INNER_BORDER_OFFSET, targetShape.Height-2*d2target.INNER_BORDER_OFFSET, style, rx)
}
if sketchRunner != nil {
out, err := d2sketch.DoubleRect(sketchRunner, targetShape)
@ -834,10 +838,10 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
}
fmt.Fprint(writer, out)
} else {
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style)
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
targetShape.Pos.X+d2target.INNER_BORDER_OFFSET, targetShape.Pos.Y+d2target.INNER_BORDER_OFFSET, targetShape.Width-2*d2target.INNER_BORDER_OFFSET, targetShape.Height-2*d2target.INNER_BORDER_OFFSET, style)
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s"%s />`,
targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style, rx)
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s"%s />`,
targetShape.Pos.X+d2target.INNER_BORDER_OFFSET, targetShape.Pos.Y+d2target.INNER_BORDER_OFFSET, targetShape.Width-2*d2target.INNER_BORDER_OFFSET, targetShape.Height-2*d2target.INNER_BORDER_OFFSET, style, rx)
}
}
}

3
d2target/d2target.go
View file

@ -199,9 +199,6 @@ func (s Shape) CSSStyle() string {
dashSize, gapSize := svg.GetStrokeDashAttributes(float64(s.StrokeWidth), s.StrokeDash)
out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
}
if s.BorderRadius != 0 {
out += fmt.Sprintf(`rx:%d;`, s.BorderRadius)
}
return out
}

12
e2etests/stable_test.go
View file

@ -2013,6 +2013,18 @@ x: {
y: {
style.border-radius: 10
}
multiple2: {
style.border-radius: 6
style.multiple: true
}
double: {
style.border-radius: 6
style.double-border: true
}
three-dee: {
style.border-radius: 6
style.3d: true
}
`,
},
{

2
e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 472 KiB

After

Width:  |  Height:  |  Size: 472 KiB

2
e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 472 KiB

After

Width:  |  Height:  |  Size: 472 KiB

123
e2etests/testdata/stable/border-radius/dagre/board.exp.json generated vendored
View file

@ -83,6 +83,129 @@
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "multiple2",
"type": "rectangle",
"pos": {
"x": 227,
"y": 0
},
"width": 112,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 6,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": true,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "multiple2",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "double",
"type": "rectangle",
"pos": {
"x": 399,
"y": 0
},
"width": 94,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 6,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": true,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "double",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 49,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "three-dee",
"type": "rectangle",
"pos": {
"x": 553,
"y": 0
},
"width": 114,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 6,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": true,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "three-dee",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 69,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": []

8
e2etests/testdata/stable/border-radius/dagre/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="371" height="270" viewBox="-102 -102 371 270"><style type="text/css">
width="886" height="285" viewBox="-102 -117 886 285"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,8 +39,10 @@ width="371" height="270" viewBox="-102 -102 371 270"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="x"><g class="shape" ><rect x="0" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;rx:4;" /></g><text class="text-bold" x="26.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="113" y="0" width="54" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;rx:10;" /></g><text class="text-bold" x="140.000000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><mask id="266990191" maskUnits="userSpaceOnUse" x="-100" y="-100" width="371" height="270">
<rect x="-100" y="-100" width="371" height="270" fill="white"></rect>
]]></script><g id="x"><g class="shape" ><rect x="0" y="0" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="4" /></g><text class="text-bold" x="26.500000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="113" y="0" width="54" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="10" /></g><text class="text-bold" x="140.000000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="multiple2"><g class="shape" ><rect x="237" y="-10" width="112" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="6" /><rect x="227" y="0" width="112" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="6" /></g><text class="text-bold" x="283.000000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">multiple2</text></g><g id="double"><g class="shape" ><rect x="399" y="0" width="94" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="6" /><rect x="404" y="5" width="84" height="56" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="6" /></g><text class="text-bold" x="446.000000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">double</text></g><g id="three-dee"><g class="shape" ><defs><mask id="border-mask-three-dee" maskUnits="userSpaceOnUse" x="553" y="-15" width="129" height="81">
<rect x="553" y="-15" width="129" height="81" fill="white"></rect>
<path d="M553,0L568,-15L682,-15L682,51L667,66L553,66L553,0L667,0L667,66M667,0L682,-15" style="fill:none;stroke:#0D32B2;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="553" y="0" width="114" height="66" style="fill:#F7F8FE;stroke:none;stroke-width:2;" mask="url(#border-mask-three-dee)"/><polygon points="553,0 568,-15 682,-15 682,51 667,66 667,0" style="fill:#cad0f8;stroke:none;stroke-width:2;" mask="url(#border-mask-three-dee)"/><path d="M553,0 L568,-15 L682,-15 L682,51 L667,66 L553,66 L553,0 L667,0 L667,66 M667,0 L682,-15" style="fill:none;stroke:#0D32B2;stroke-width:2;"/></g><text class="text-bold" x="610.000000" y="38.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">three-dee</text></g><mask id="993173208" maskUnits="userSpaceOnUse" x="-100" y="-100" width="886" height="285">
<rect x="-100" y="-100" width="886" height="285" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 326 KiB

123
e2etests/testdata/stable/border-radius/elk/board.exp.json generated vendored
View file

@ -83,6 +83,129 @@
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "multiple2",
"type": "rectangle",
"pos": {
"x": 159,
"y": 12
},
"width": 112,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 6,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": true,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "multiple2",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "double",
"type": "rectangle",
"pos": {
"x": 291,
"y": 12
},
"width": 94,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 6,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": true,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "double",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 49,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "three-dee",
"type": "rectangle",
"pos": {
"x": 405,
"y": 12
},
"width": 114,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 6,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": true,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "three-dee",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 69,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": []

8
e2etests/testdata/stable/border-radius/elk/sketch.exp.svg vendored
View file

@ -3,7 +3,7 @@
id="d2-svg"
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="331" height="270" viewBox="-90 -90 331 270"><style type="text/css">
width="726" height="285" viewBox="-90 -105 726 285"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -39,8 +39,10 @@ width="331" height="270" viewBox="-90 -90 331 270"><style type="text/css">
svgEl.setAttribute("height", height * ratio - 16);
}
});
]]></script><g id="x"><g class="shape" ><rect x="12" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;rx:4;" /></g><text class="text-bold" x="38.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="85" y="12" width="54" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;rx:10;" /></g><text class="text-bold" x="112.000000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><mask id="1638488526" maskUnits="userSpaceOnUse" x="-100" y="-100" width="331" height="270">
<rect x="-100" y="-100" width="331" height="270" fill="white"></rect>
]]></script><g id="x"><g class="shape" ><rect x="12" y="12" width="53" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="4" /></g><text class="text-bold" x="38.500000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><rect x="85" y="12" width="54" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="10" /></g><text class="text-bold" x="112.000000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="multiple2"><g class="shape" ><rect x="169" y="2" width="112" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="6" /><rect x="159" y="12" width="112" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="6" /></g><text class="text-bold" x="215.000000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">multiple2</text></g><g id="double"><g class="shape" ><rect x="291" y="12" width="94" height="66" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="6" /><rect x="296" y="17" width="84" height="56" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" rx="6" /></g><text class="text-bold" x="338.000000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">double</text></g><g id="three-dee"><g class="shape" ><defs><mask id="border-mask-three-dee" maskUnits="userSpaceOnUse" x="405" y="-3" width="129" height="81">
<rect x="405" y="-3" width="129" height="81" fill="white"></rect>
<path d="M405,12L420,-3L534,-3L534,63L519,78L405,78L405,12L519,12L519,78M519,12L534,-3" style="fill:none;stroke:#0D32B2;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="405" y="12" width="114" height="66" style="fill:#F7F8FE;stroke:none;stroke-width:2;" mask="url(#border-mask-three-dee)"/><polygon points="405,12 420,-3 534,-3 534,63 519,78 519,12" style="fill:#cad0f8;stroke:none;stroke-width:2;" mask="url(#border-mask-three-dee)"/><path d="M405,12 L420,-3 L534,-3 L534,63 L519,78 L405,78 L405,12 L519,12 L519,78 M519,12 L534,-3" style="fill:none;stroke:#0D32B2;stroke-width:2;"/></g><text class="text-bold" x="462.000000" y="50.500000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">three-dee</text></g><mask id="2028340539" maskUnits="userSpaceOnUse" x="-100" y="-100" width="726" height="285">
<rect x="-100" y="-100" width="726" height="285" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 326 KiB