Skip to content

Commit fa3ce51

Browse files
committed
Fix legend styles in prints
1 parent 33d66eb commit fa3ce51

File tree

2 files changed

+17
-13
lines changed

2 files changed

+17
-13
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,4 +106,4 @@
106106
"vitest": "^3.1.1",
107107
"vue": "^3.5.14"
108108
}
109-
}
109+
}

src/dom-to-png.js

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ function applyAllComputedStylesDeep(clone, original, inheritedFontFamily) {
6262

6363
let styleMap = {};
6464

65-
// Get all already-inline styles
6665
let inlineStyle = clone.getAttribute('style');
6766
if (typeof inlineStyle !== 'string') inlineStyle = '';
6867
inlineStyle.split(';').forEach(s => {
@@ -72,19 +71,29 @@ function applyAllComputedStylesDeep(clone, original, inheritedFontFamily) {
7271
}
7372
});
7473

75-
// Copy *every* computed property
7674
for (let i = 0; i < computedStyle.length; i += 1) {
7775
const property = computedStyle[i];
7876
const value = computedStyle.getPropertyValue(property);
7977
styleMap[property] = value;
8078
}
8179

82-
// ---- Strongest part: force resolved color and background-color ----
83-
// getPropertyValue always resolves to an actual color, not 'inherit'
8480
styleMap['color'] = computedStyle.color;
8581
styleMap['background-color'] = computedStyle.backgroundColor;
86-
// Add font props for safety (if they matter to your charts)
87-
styleMap['font-family'] = computedStyle.fontFamily || inheritedFontFamily || '';
82+
83+
let fontFamily = computedStyle.fontFamily || inheritedFontFamily || '';
84+
if (!fontFamily ||
85+
fontFamily.trim() === '' ||
86+
fontFamily === 'inherit' ||
87+
fontFamily === 'initial' ||
88+
fontFamily.toLowerCase().startsWith('system-ui') ||
89+
fontFamily.toLowerCase() === 'sans-serif' ||
90+
fontFamily.toLowerCase() === 'serif' ||
91+
fontFamily.toLowerCase() === 'monospace'
92+
) {
93+
fontFamily = 'Helvetica, Arial, sans-serif';
94+
}
95+
styleMap['font-family'] = fontFamily;
96+
8897
styleMap['font-size'] = computedStyle.fontSize;
8998
styleMap['font-weight'] = computedStyle.fontWeight;
9099

@@ -105,8 +114,6 @@ function applyAllComputedStylesDeep(clone, original, inheritedFontFamily) {
105114
styleMap[prop] = computedStyle.getPropertyValue(prop);
106115
});
107116

108-
// No more inheritedFontFamily here; use resolved computedStyle above
109-
110117
styleMap['overflow'] = 'visible';
111118
styleMap['overflow-x'] = 'visible';
112119
styleMap['overflow-y'] = 'visible';
@@ -117,17 +124,15 @@ function applyAllComputedStylesDeep(clone, original, inheritedFontFamily) {
117124
}
118125
clone.setAttribute('style', styleString);
119126

120-
// Recursively walk
121127
const cloneChildren = clone.children || [];
122128
const originalChildren = original.children || [];
123129
for (let i = 0; i < cloneChildren.length; i++) {
124130
if (cloneChildren[i].nodeType === 1 && originalChildren[i]) {
125-
applyAllComputedStylesDeep(cloneChildren[i], originalChildren[i], inheritedFontFamily);
131+
applyAllComputedStylesDeep(cloneChildren[i], originalChildren[i], fontFamily);
126132
}
127133
}
128134
}
129135

130-
131136
/**
132137
* Ensures all <text> elements in the given SVG element tree have the given font family
133138
* as both an attribute and a style property.
@@ -379,7 +384,6 @@ function walkAllAndApply(cloneNode, liveNode) {
379384
}
380385
}
381386

382-
383387
/**
384388
* Converts a DOM element (including HTML, SVG, and canvas) into a high-resolution PNG data URL.
385389
*

0 commit comments

Comments
 (0)