Skip to content

fix(#368): position section content with absolute coords to fix Safari icon placement #369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MindFreeze merged 1 commit into from
May 24, 2026
Merged

fix(#368): position section content with absolute coords to fix Safari icon placement #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions __tests__/__snapshots__/basic.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
<div class=" container ">
<svg class="chart" preserveAspectRatio="xMinYMin meet" viewBox="0 0 992 200" width="992" height="200">

<g class="section" transform="translate(0, 0)">
<g class="section">

<defs>

Expand Down Expand Up @@ -54,14 +54,14 @@ exports[`SankeyChart matches a simple snapshot 2`] = `

</g>

<g class="section" transform="translate(940.7, 0)">
<g class="section">


<g class=" box type-entity ">
<title></title>
<rect class="color-bar" x="0" y="0" width="15" height="97" fill="var(--primary-color)"></rect>
<rect class="color-bar" x="940.7" y="0" width="15" height="97" fill="var(--primary-color)"></rect>

<foreignObject x="15" y="0" width="36.3" height="97">
<foreignObject x="955.7" y="0" width="36.3" height="97">
<div class="label-wrap" xmlns="http://www.w3.org/1999/xhtml">
<div class="label" style="line-height:15px;">
<span>
Expand All @@ -75,9 +75,9 @@ exports[`SankeyChart matches a simple snapshot 2`] = `

<g class=" box type-entity ">
<title></title>
<rect class="color-bar" x="0" y="103" width="15" height="97" fill="var(--primary-color)"></rect>
<rect class="color-bar" x="940.7" y="103" width="15" height="97" fill="var(--primary-color)"></rect>

<foreignObject x="15" y="103" width="36.3" height="97">
<foreignObject x="955.7" y="103" width="36.3" height="97">
<div class="label-wrap" xmlns="http://www.w3.org/1999/xhtml">
<div class="label" style="line-height:15px;">
<span>
Expand Down
46 changes: 23 additions & 23 deletions __tests__/__snapshots__/remaining.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`SankeyChart with remaining type entities matches snapshot 2`] = `
<div class=" container with-header ">
<svg class="chart" preserveAspectRatio="xMinYMin meet" viewBox="0 0 992 200" width="992" height="200">

<g class="section" transform="translate(0, 0)">
<g class="section">

<defs>

Expand Down Expand Up @@ -47,7 +47,7 @@ exports[`SankeyChart with remaining type entities matches snapshot 2`] = `

</g>

<g class="section" transform="translate(229.0625, 0)">
<g class="section">

<defs>

Expand All @@ -68,11 +68,11 @@ exports[`SankeyChart with remaining type entities matches snapshot 2`] = `

</defs>

<path d="M15,5 C122.03125,5 122.03125,0 229.0625,0 L229.0625,63 C122.03125,63 122.03125,68.2879899767317 15,68.2879899767317 Z" fill="url(#gradient1.0.0)" fill-opacity="0.4"></path>
<path d="M244.0625,5 C351.09375,5 351.09375,0 458.125,0 L458.125,63 C351.09375,63 351.09375,68.2879899767317 244.0625,68.2879899767317 Z" fill="url(#gradient1.0.0)" fill-opacity="0.4"></path>

<path d="M15,68.2879899767317 C122.03125,68.2879899767317 122.03125,68.5 229.0625,68.5 L229.0625,131.5 C122.03125,131.5 122.03125,131.60998747091463 15,131.60998747091463 Z" fill="url(#gradient1.0.1)" fill-opacity="0.4"></path>
<path d="M244.0625,68.2879899767317 C351.09375,68.2879899767317 351.09375,68.5 458.125,68.5 L458.125,131.5 C351.09375,131.5 351.09375,131.60998747091463 244.0625,131.60998747091463 Z" fill="url(#gradient1.0.1)" fill-opacity="0.4"></path>

<path d="M15,131.60998747091463 C122.03125,131.60998747091463 122.03125,137 229.0625,137 L229.0625,200 C122.03125,200 122.03125,195.00000000000003 15,195.00000000000003 Z" fill="url(#gradient1.0.2)" fill-opacity="0.4"></path>
<path d="M244.0625,131.60998747091463 C351.09375,131.60998747091463 351.09375,137 458.125,137 L458.125,200 C351.09375,200 351.09375,195.00000000000003 244.0625,195.00000000000003 Z" fill="url(#gradient1.0.2)" fill-opacity="0.4"></path>

</g>

Expand All @@ -92,9 +92,9 @@ IDK
IDK
IDK
IDK</title>
<rect class="color-bar" x="0" y="5" width="15" height="190" fill="darkslateblue"></rect>
<rect class="color-bar" x="229.0625" y="5" width="15" height="190" fill="darkslateblue"></rect>

<foreignObject x="15" y="5" width="214.0625" height="190">
<foreignObject x="244.0625" y="5" width="214.0625" height="190">
<div class="label-wrap" xmlns="http://www.w3.org/1999/xhtml">
<div class="label" style="line-height:15px;">
<span>
Expand All @@ -108,7 +108,7 @@ IDK</title>

</g>

<g class="section" transform="translate(458.125, 0)">
<g class="section">

<defs>

Expand All @@ -119,7 +119,7 @@ IDK</title>

</defs>

<path d="M15,0 C122.03125,0 122.03125,68.5 229.0625,68.5 L229.0625,131.43236714975845 C122.03125,131.43236714975845 122.03125,63 15,63 Z" fill="url(#gradient2.0.0)" fill-opacity="0.4"></path>
<path d="M473.125,0 C580.15625,0 580.15625,68.5 687.1875,68.5 L687.1875,131.43236714975845 C580.15625,131.43236714975845 580.15625,63 473.125,63 Z" fill="url(#gradient2.0.0)" fill-opacity="0.4"></path>


<defs>
Expand All @@ -131,7 +131,7 @@ IDK</title>

</defs>

<path d="M15,68.5 C122.03125,68.5 122.03125,131.43236714975845 229.0625,131.43236714975845 L229.0625,131.5 C122.03125,131.5 122.03125,68.56766917293233 15,68.56766917293233 Z" fill="url(#gradient2.1.0)" fill-opacity="0.4"></path>
<path d="M473.125,68.5 C580.15625,68.5 580.15625,131.43236714975845 687.1875,131.43236714975845 L687.1875,131.5 C580.15625,131.5 580.15625,68.56766917293233 473.125,68.56766917293233 Z" fill="url(#gradient2.1.0)" fill-opacity="0.4"></path>


<defs>
Expand All @@ -143,9 +143,9 @@ IDK</title>
<g class=" box type-entity ">
<title>1.9kW Varmtvann
Blaa</title>
<rect class="color-bar" x="0" y="0" width="15" height="63" fill="var(--primary-color)"></rect>
<rect class="color-bar" x="458.125" y="0" width="15" height="63" fill="var(--primary-color)"></rect>

<foreignObject x="15" y="0" width="214.0625" height="63">
<foreignObject x="473.125" y="0" width="214.0625" height="63">
<div class="label-wrap" xmlns="http://www.w3.org/1999/xhtml">
<div class="label" style="line-height:15px;">
<span>
Expand All @@ -159,9 +159,9 @@ Blaa</title>

<g class=" box type-entity ">
<title></title>
<rect class="color-bar" x="0" y="68.5" width="15" height="63" fill="var(--primary-color)"></rect>
<rect class="color-bar" x="458.125" y="68.5" width="15" height="63" fill="var(--primary-color)"></rect>

<foreignObject x="15" y="68.5" width="214.0625" height="63">
<foreignObject x="473.125" y="68.5" width="214.0625" height="63">
<div class="label-wrap" xmlns="http://www.w3.org/1999/xhtml">
<div class="label" style="line-height:15px;">
<span>
Expand All @@ -175,9 +175,9 @@ Blaa</title>

<g class=" box type-entity ">
<title></title>
<rect class="color-bar" x="0" y="137" width="15" height="63" fill="var(--primary-color)"></rect>
<rect class="color-bar" x="458.125" y="137" width="15" height="63" fill="var(--primary-color)"></rect>

<foreignObject x="15" y="137" width="214.0625" height="63">
<foreignObject x="473.125" y="137" width="214.0625" height="63">
<div class="label-wrap" xmlns="http://www.w3.org/1999/xhtml">
<div class="label" style="line-height:15px;">
<span>
Expand All @@ -191,7 +191,7 @@ Blaa</title>

</g>

<g class="section" transform="translate(687.1875, 0)">
<g class="section">

<defs>

Expand All @@ -202,15 +202,15 @@ Blaa</title>

</defs>

<path d="M15,68.5 C122.03125,68.5 122.03125,68.5 229.0625,68.5 L229.0625,131.5 C122.03125,131.5 122.03125,131.5 15,131.5 Z" fill="url(#gradient3.0.0)" fill-opacity="0.4"></path>
<path d="M702.1875,68.5 C809.21875,68.5 809.21875,68.5 916.25,68.5 L916.25,131.5 C809.21875,131.5 809.21875,131.5 702.1875,131.5 Z" fill="url(#gradient3.0.0)" fill-opacity="0.4"></path>

</g>

<g class=" box type-passthrough ">
<title></title>
<rect class="color-bar" x="0" y="68.5" width="15" height="63" fill="red"></rect>
<rect class="color-bar" x="687.1875" y="68.5" width="15" height="63" fill="red"></rect>

<foreignObject x="15" y="68.5" width="214.0625" height="63">
<foreignObject x="702.1875" y="68.5" width="214.0625" height="63">
<div class="label-wrap" xmlns="http://www.w3.org/1999/xhtml">

</div>
Expand All @@ -219,14 +219,14 @@ Blaa</title>

</g>

<g class="section" transform="translate(916.25, 0)">
<g class="section">


<g class=" box type-entity ">
<title></title>
<rect class="color-bar" x="0" y="68.5" width="15" height="63" fill="red"></rect>
<rect class="color-bar" x="916.25" y="68.5" width="15" height="63" fill="red"></rect>

<foreignObject x="15" y="68.5" width="60.75" height="63">
<foreignObject x="931.25" y="68.5" width="60.75" height="63">
<div class="label-wrap" xmlns="http://www.w3.org/1999/xhtml">
<div class="label" style="line-height:15px;">
<span>
Expand Down
19 changes: 8 additions & 11 deletions src/section.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ export function renderBranchConnectors(props: {
allConnections: ConnectionState[];
vertical: boolean;
}): SVGTemplateResult[] {
const { boxes, size } = props.section;
const nearEdge = BOX_COLOR_BAR;
const farEdge = size;
const { boxes, size, offset } = props.section;
const nearEdge = BOX_COLOR_BAR + offset;
const farEdge = size + offset;
const midEdge = (nearEdge + farEdge) / 2;
return boxes
.filter(b => b.children.length > 0)
Expand Down Expand Up @@ -84,12 +84,9 @@ export function renderSection(props: {
const { show_icons } = props.config;
const { boxes, spacerSize, offset, size } = props.section;
const hasChildren = props.nextSection && boxes.some(b => b.children.length > 0);
const sectionTransform = props.vertical
? `translate(0, ${offset})`
: `translate(${offset}, 0)`;

return svg`
<g class="section" transform="${sectionTransform}">
<g class="section">
${hasChildren
? svg`<g class="connectors">${renderBranchConnectors(props)}</g>`
: null}
Expand All @@ -105,11 +102,11 @@ export function renderSection(props: {
const isHighlighted = props.highlightedEntities.includes(box.config);

const colorRect = props.vertical
? { x: box.top, y: 0, width: box.size, height: BOX_COLOR_BAR }
: { x: 0, y: box.top, width: BOX_COLOR_BAR, height: box.size };
? { x: box.top, y: offset, width: box.size, height: BOX_COLOR_BAR }
: { x: offset, y: box.top, width: BOX_COLOR_BAR, height: box.size };
const labelArea = props.vertical
? { x: box.top, y: BOX_COLOR_BAR, width: box.size, height: size - BOX_COLOR_BAR }
: { x: BOX_COLOR_BAR, y: box.top, width: size - BOX_COLOR_BAR, height: box.size };
? { x: box.top, y: offset + BOX_COLOR_BAR, width: box.size, height: size - BOX_COLOR_BAR }
: { x: offset + BOX_COLOR_BAR, y: box.top, width: size - BOX_COLOR_BAR, height: box.size };

const classes = classMap({
box: true,
Expand Down