This commit is contained in:
Alexander Wang 2023-02-12 12:34:25 -08:00
parent b842aade73
commit ab5be36a00
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
6 changed files with 269 additions and 6 deletions

View file

@ -41,3 +41,4 @@
- Sequence diagram note ordering was sometimes wrong. [#796](https://github.com/terrastruct/d2/pull/796)
- Images can now be set to sizes smaller than 128x128. [#702](https://github.com/terrastruct/d2/pull/702)
- 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)

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
}
`,
},
{

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": []

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 {

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 326 KiB

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": []

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 {

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 326 KiB