From df67073e9880d057869b9abbef37f4af0938a33d Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Sun, 24 May 2026 13:50:17 +0300 Subject: [PATCH] fix(#368): position section content with absolute coords to fix Safari icon placement --- __tests__/__snapshots__/basic.test.ts.snap | 12 ++--- .../__snapshots__/remaining.test.ts.snap | 46 +++++++++---------- src/section.ts | 19 ++++---- 3 files changed, 37 insertions(+), 40 deletions(-) diff --git a/__tests__/__snapshots__/basic.test.ts.snap b/__tests__/__snapshots__/basic.test.ts.snap index 45c74da..a8553a1 100644 --- a/__tests__/__snapshots__/basic.test.ts.snap +++ b/__tests__/__snapshots__/basic.test.ts.snap @@ -14,7 +14,7 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
- + @@ -54,14 +54,14 @@ exports[`SankeyChart matches a simple snapshot 2`] = ` - + - + - +
@@ -75,9 +75,9 @@ exports[`SankeyChart matches a simple snapshot 2`] = ` - + - +
diff --git a/__tests__/__snapshots__/remaining.test.ts.snap b/__tests__/__snapshots__/remaining.test.ts.snap index 6c37f72..23aa82c 100644 --- a/__tests__/__snapshots__/remaining.test.ts.snap +++ b/__tests__/__snapshots__/remaining.test.ts.snap @@ -14,7 +14,7 @@ exports[`SankeyChart with remaining type entities matches snapshot 2`] = `
- + @@ -47,7 +47,7 @@ exports[`SankeyChart with remaining type entities matches snapshot 2`] = ` - + @@ -68,11 +68,11 @@ exports[`SankeyChart with remaining type entities matches snapshot 2`] = ` - + - + - + @@ -92,9 +92,9 @@ IDK IDK IDK IDK - + - +
@@ -108,7 +108,7 @@ IDK - + @@ -119,7 +119,7 @@ IDK - + @@ -131,7 +131,7 @@ IDK - + @@ -143,9 +143,9 @@ IDK 1.9kW Varmtvann Blaa - + - +
@@ -159,9 +159,9 @@ Blaa - + - +
@@ -175,9 +175,9 @@ Blaa - + - +
@@ -191,7 +191,7 @@ Blaa - + @@ -202,15 +202,15 @@ Blaa - + - + - +
@@ -219,14 +219,14 @@ Blaa - + - + - +
diff --git a/src/section.ts b/src/section.ts index a4cd725..365c475 100644 --- a/src/section.ts +++ b/src/section.ts @@ -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) @@ -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` - + ${hasChildren ? svg`${renderBranchConnectors(props)}` : null} @@ -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,