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

Merge pull request #890 from berniexie/889/fix-shape-image-bundle

Browse source 
imgs: Fix img bundling on image shapes
This commit is contained in:
Bernard Xie 2023-02-24 13:34:03 -08:00 committed by GitHub
commit ddc3ec16b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,3 +5,4 @@
#### Bugfixes ⛑️ #### Bugfixes ⛑️
- Error reported when no actors are declared in sequence diagram. [#886](https://github.com/terrastruct/d2/pull/886) - Error reported when no actors are declared in sequence diagram. [#886](https://github.com/terrastruct/d2/pull/886)
- Fixed img bundling on image shapes. [#889](https://github.com/terrastruct/d2/issues/889)

2
d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/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: 807 KiB

After

Width:  |  Height:  |  Size: 807 KiB

4
d2renderers/d2svg/dark_theme/testdata/twitter/dark_theme.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: 320 KiB

After

Width:  |  Height:  |  Size: 320 KiB

7
d2themes/element.go
View file

@ -96,6 +96,10 @@ func (el *ThemableElement) SetMaskUrl(url string) {
func (el *ThemableElement) Render() string { func (el *ThemableElement) Render() string {
out := "<" + el.tag out := "<" + el.tag
// href has to be at the top for the img bundler to detect <image> tags correctly
if len(el.Href) > 0 {
out += fmt.Sprintf(` href="%s"`, el.Href)
}
if el.X != math.MaxFloat64 { if el.X != math.MaxFloat64 {
out += fmt.Sprintf(` x="%f"`, el.X) out += fmt.Sprintf(` x="%f"`, el.X)
} }
@ -148,9 +152,6 @@ func (el *ThemableElement) Render() string {
if len(el.Transform) > 0 { if len(el.Transform) > 0 {
out += fmt.Sprintf(` transform="%s"`, el.Transform) out += fmt.Sprintf(` transform="%s"`, el.Transform)
} }
if len(el.Href) > 0 {
out += fmt.Sprintf(` href="%s"`, el.Href)
}
if len(el.Xmlns) > 0 { if len(el.Xmlns) > 0 {
out += fmt.Sprintf(` xmlns="%s"`, el.Xmlns) out += fmt.Sprintf(` xmlns="%s"`, el.Xmlns)
} }

2
e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg vendored
View file

@ -30,7 +30,7 @@
svgEl.setAttribute("height", height * ratio - 16); svgEl.setAttribute("height", height * ratio - 16);
} }
}); });
]]></script><g id="img"><g class="shape" ><image x="0.000000" y="0.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="3349745798" maskUnits="userSpaceOnUse" x="-2" y="-2" width="292" height="132"> ]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="0.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="3349745798" maskUnits="userSpaceOnUse" x="-2" y="-2" width="292" height="132">
<rect x="-2" y="-2" width="292" height="132" fill="white"></rect> <rect x="-2" y="-2" width="292" height="132" fill="white"></rect>
</mask></svg> </mask></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

2
e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg vendored
View file

@ -30,7 +30,7 @@
svgEl.setAttribute("height", height * ratio - 16); svgEl.setAttribute("height", height * ratio - 16);
} }
}); });
]]></script><g id="img"><g class="shape" ><image x="12.000000" y="12.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="1174832781" maskUnits="userSpaceOnUse" x="10" y="10" width="252" height="132"> ]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12.000000" y="12.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="1174832781" maskUnits="userSpaceOnUse" x="10" y="10" width="252" height="132">
<rect x="10" y="10" width="252" height="132" fill="white"></rect> <rect x="10" y="10" width="252" height="132" fill="white"></rect>
</mask></svg> </mask></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

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

@ -37,7 +37,7 @@
svgEl.setAttribute("height", height * ratio - 16); svgEl.setAttribute("height", height * ratio - 16);
} }
}); });
]]></script><g id="a"><g class="shape" ><image x="0.000000" y="0.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/essentials/004-picture.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="64.000000" y="149.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><image x="0.000000" y="254.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/essentials/004-picture.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="64.000000" y="403.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 156.000000 C 64.000000 194.000000 64.000000 214.000000 64.000000 250.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2784238266)" /></g><mask id="2784238266" maskUnits="userSpaceOnUse" x="-2" y="-2" width="132" height="410"> ]]></script><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0.000000" y="0.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="64.000000" y="149.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0.000000" y="254.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="64.000000" y="403.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 156.000000 C 64.000000 194.000000 64.000000 214.000000 64.000000 250.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2784238266)" /></g><mask id="2784238266" maskUnits="userSpaceOnUse" x="-2" y="-2" width="132" height="410">
<rect x="-2" y="-2" width="132" height="410" fill="white"></rect> <rect x="-2" y="-2" width="132" height="410" fill="white"></rect>
</mask></svg> </mask></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 329 KiB

After

Width:  |  Height:  |  Size: 329 KiB

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

@ -37,7 +37,7 @@
svgEl.setAttribute("height", height * ratio - 16); svgEl.setAttribute("height", height * ratio - 16);
} }
}); });
]]></script><g id="a"><g class="shape" ><image x="12.000000" y="12.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/essentials/004-picture.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="76.000000" y="161.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><image x="12.000000" y="236.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/essentials/004-picture.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="76.000000" y="385.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 76.000000 168.000000 L 76.000000 232.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2036212292)" /></g><mask id="2036212292" maskUnits="userSpaceOnUse" x="10" y="10" width="132" height="380"> ]]></script><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12.000000" y="12.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="76.000000" y="161.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12.000000" y="236.000000" width="128.000000" height="128.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="76.000000" y="385.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 76.000000 168.000000 L 76.000000 232.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#2036212292)" /></g><mask id="2036212292" maskUnits="userSpaceOnUse" x="10" y="10" width="132" height="380">
<rect x="10" y="10" width="132" height="380" fill="white"></rect> <rect x="10" y="10" width="132" height="380" fill="white"></rect>
</mask></svg> </mask></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 329 KiB

After

Width:  |  Height:  |  Size: 329 KiB

2
e2etests/testdata/stable/overlapping_image_container_labels/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: 802 KiB

After

Width:  |  Height:  |  Size: 802 KiB

2
e2etests/testdata/stable/overlapping_image_container_labels/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: 803 KiB

After

Width:  |  Height:  |  Size: 803 KiB

2
e2etests/testdata/stable/sequence_diagram_all_shapes/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: 849 KiB

After

Width:  |  Height:  |  Size: 849 KiB

2
e2etests/testdata/stable/sequence_diagram_all_shapes/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: 849 KiB

After

Width:  |  Height:  |  Size: 849 KiB