diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md index 0a3afb0f8..9dda6efa4 100644 --- a/ci/release/changelogs/next.md +++ b/ci/release/changelogs/next.md @@ -18,6 +18,7 @@ - Fixes tooltip/link attributes being ignored for `sql_table` and `class`. [#658](https://github.com/terrastruct/d2/pull/658) - Fixes arrowheads sometimes appearing broken with sketch on. [#656](https://github.com/terrastruct/d2/pull/656) - Fixes code snippets not being tall enough with leading newlines. [#664](https://github.com/terrastruct/d2/pull/664) +- Opacity was not being applied to labels of shapes (and other edge cases). [#677](https://github.com/terrastruct/d2/pull/677) - Icon URLs that needed escaping (e.g. with ampersands) are handled correctly by CLI. [#666](https://github.com/terrastruct/d2/pull/666) - Fixes markdown shapes being slightly too short for their text in some cases. [#665](https://github.com/terrastruct/d2/pull/665) - Fixes self-connections inside layouts when using ELK. [#676](https://github.com/terrastruct/d2/pull/676) diff --git a/d2renderers/d2sketch/sketch_test.go b/d2renderers/d2sketch/sketch_test.go index 30d06fc1f..f431a62a2 100644 --- a/d2renderers/d2sketch/sketch_test.go +++ b/d2renderers/d2sketch/sketch_test.go @@ -326,6 +326,25 @@ a.9 <-> b.9: cf-one-required { source-arrowhead.shape: cf-one-required target-arrowhead.shape: cf-one-required } +`, + }, + { + name: "opacity", + script: `x.style.opacity: 0.4 +y: |md + linux: because a PC is a terrible thing to waste +| { + style.opacity: 0.4 +} +x -> a: { + label: You don't have to know how the computer works,\njust how to work the computer. + style.opacity: 0.4 +} +users: { + shape: sql_table + last_login: datetime + style.opacity: 0.4 +} `, }, } diff --git a/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg b/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg index 8496e2c0f..07980441b 100644 --- a/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg @@ -51,7 +51,7 @@ width="1597" height="835" viewBox="-102 -102 1597 835"> + + + + +x

linux: because a PC is a terrible thing to waste

+
userslast_login +datetime +a You don't have to know how the computer works,just how to work the computer. + + + \ 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..a73606a4b 100644 --- a/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg +++ b/d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg @@ -51,7 +51,7 @@ width="1029" height="664" viewBox="-102 -102 1029 664"> \ No newline at end of file diff --git a/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg b/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg index 2ca3fb21b..6f53328fa 100644 --- a/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg +++ b/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg @@ -39,7 +39,7 @@ width="452" height="332" viewBox="-90 -90 452 332"> \ No newline at end of file diff --git a/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg b/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg index 5a3042961..48ca96d52 100644 --- a/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg +++ b/e2etests/testdata/regression/elk_loop_panic/dagre/sketch.exp.svg @@ -39,7 +39,7 @@ width="630" height="430" viewBox="-102 -102 630 430">

Oldest message

+

Oldest message

Offset

Last message

Next message will be
inserted here

-
M0M1M2M3M4M5M6 +
M0M1M2M3M4M5M6

Oldest message

+

Oldest message

Offset

Last message

Next message will be
inserted here

-
M0M1M2M3M4M5M6 +
M0M1M2M3M4M5M6 x

linux: because a PC is a terrible thing to waste

+
a You don't have to know how the computer works,just how to work the computer. + + + \ No newline at end of file diff --git a/e2etests/testdata/regression/opacity-on-label/elk/board.exp.json b/e2etests/testdata/regression/opacity-on-label/elk/board.exp.json new file mode 100644 index 000000000..3ae7ceeba --- /dev/null +++ b/e2etests/testdata/regression/opacity-on-label/elk/board.exp.json @@ -0,0 +1,166 @@ +{ + "name": "", + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "x", + "type": "", + "pos": { + "x": 116, + "y": 12 + }, + "width": 113, + "height": 126, + "opacity": 0.4, + "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": "x", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "y", + "type": "text", + "pos": { + "x": 249, + "y": 63 + }, + "width": 304, + "height": 24, + "opacity": 0.4, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "#0A0F25", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "linux: because a PC is a terrible thing to waste", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "#0A0F25", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 304, + "labelHeight": 24, + "zIndex": 0, + "level": 1 + }, + { + "id": "a", + "type": "", + "pos": { + "x": 116, + "y": 375 + }, + "width": 113, + "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": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + } + ], + "connections": [ + { + "id": "(x -> a)[0]", + "src": "x", + "srcArrow": "none", + "srcLabel": "", + "dst": "a", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 0.4, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "You don't have to know how the computer works,\njust how to work the computer.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 322, + "labelHeight": 37, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 173, + "y": 138 + }, + { + "x": 173, + "y": 375 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ] +} diff --git a/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg b/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg new file mode 100644 index 000000000..28aa950fe --- /dev/null +++ b/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg @@ -0,0 +1,824 @@ + +x

linux: because a PC is a terrible thing to waste

+
a You don't have to know how the computer works,just how to work the computer. + + + \ No newline at end of file diff --git a/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg b/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg index 5a0f1cfad..281102988 100644 --- a/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg +++ b/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg @@ -39,7 +39,7 @@ width="1825" height="777" viewBox="-102 -102 1825 777">aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 +aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 diff --git a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg index 08bad938b..e1498a328 100644 --- a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg @@ -796,7 +796,7 @@ width="1275" height="2738" viewBox="-90 -90 1275 2738">aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 +aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 diff --git a/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg index f8a893097..7bc1e8325 100644 --- a/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg @@ -39,7 +39,7 @@ width="698" height="630" viewBox="-102 -102 698 630">xyThe top of the mountainJoeDonald

Cats, no less liquid than their shadows, offer no angles to the wind.

+xyThe top of the mountainJoeDonald

Cats, no less liquid than their shadows, offer no angles to the wind.

If we can't fix it, it ain't broke.

Dieters live life in the fasting lane.

-
i am top lefti am top righti am bottom lefti am bottom right +
i am top lefti am top righti am bottom lefti am bottom right xyThe top of the mountainJoeDonald

Cats, no less liquid than their shadows, offer no angles to the wind.

+xyThe top of the mountainJoeDonald

Cats, no less liquid than their shadows, offer no angles to the wind.

If we can't fix it, it ain't broke.

Dieters live life in the fasting lane.

-
i am top lefti am top righti am bottom lefti am bottom right +
i am top lefti am top righti am bottom lefti am bottom right poll the peopleresultsunfavorablefavorablewill of the people

A winning strategy

-
 +poll the peopleresultsunfavorablefavorablewill of the people

A winning strategy

+
 poll the peopleresultsunfavorablefavorablewill of the people

A winning strategy

-
 +poll the peopleresultsunfavorablefavorablewill of the people

A winning strategy

+
 mixed togethersugarsolution we get +mixed togethersugarsolution we get mixed togethersugarsolution we get +mixed togethersugarsolution we get

Markdown: Syntax

-
ab +ab

Markdown: Syntax

-
ab +ab container

they did it in style

+container

they did it in style

a header

a line of text and an

{
@@ -805,7 +805,7 @@ width="516" height="686" viewBox="-102 -102 516 686">container
they did it in style

+container
they did it in style

 
a header

 
a line of text and an

 
{
@@ -805,7 +805,7 @@ width="566" height="736" viewBox="-90 -90 566 736">markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

+markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

 
diff --git a/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg b/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
index 556034da3..20588b494 100644
--- a/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
@@ -796,7 +796,7 @@ width="813" height="402" viewBox="-90 -90 813 402">markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

+markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

 
diff --git a/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
index 02882dac2..c8ae1c67d 100644
--- a/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
@@ -796,7 +796,7 @@ width="763" height="352" viewBox="-102 -102 763 352">markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

+markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

 
diff --git a/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg b/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
index 36b39bde1..675ff5992 100644
--- a/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
@@ -796,7 +796,7 @@ width="813" height="402" viewBox="-90 -90 813 402">markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

+markdown
Lorem ipsum dolor sit amet, consectetur adipiscing elit,

 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

 
diff --git a/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
index e6e3efc9b..f56147b8e 100644
--- a/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
@@ -801,7 +801,7 @@ width="400" height="767" viewBox="-102 -102 400 767">
code

-
ab  
+
ab  
 
 
 
code

-
ab  
+
ab  
 
 
 bearmama bearpapa bear  
+bearmama bearpapa bear  
 
 
 bearmama bearpapa bear  
+bearmama bearpapa bear