Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: proper scaling (none) for fancyBackground in svg export

Browse Source
This commit is contained in:
Arnošt Pleskot 2023-08-30 09:57:23 +02:00
parent 8ac95a713b
commit 95baf540f2
No known key found for this signature in database
2 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/scene/export.ts
View File

@ -297,8 +297,10 @@ export const exportToSvg = async (
svgRoot, svgRoot,
fancyBackgroundImageKey: `${appState.fancyBackgroundImageKey}`, fancyBackgroundImageKey: `${appState.fancyBackgroundImageKey}`,
backgroundColor: viewBackgroundColor, backgroundColor: viewBackgroundColor,
dimensions: { width, height }, canvasDimensions: {
exportScale, width,
height,
},
theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT, theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
contentSize, contentSize,
includeLogo: true, includeLogo: true,

44
src/scene/fancyBackground.ts
View File

@ -291,7 +291,7 @@ const addImageBackgroundToSvg = async ({
fancyBackgroundImage.setAttribute("y", "0"); fancyBackgroundImage.setAttribute("y", "0");
fancyBackgroundImage.setAttribute("width", `${dimensions.width}`); fancyBackgroundImage.setAttribute("width", `${dimensions.width}`);
fancyBackgroundImage.setAttribute("height", `${dimensions.height}`); fancyBackgroundImage.setAttribute("height", `${dimensions.height}`);
fancyBackgroundImage.setAttribute("preserveAspectRatio", "none"); fancyBackgroundImage.setAttribute("preserveAspectRatio", "xMidYMid slice");
if (theme === THEME.DARK) { if (theme === THEME.DARK) {
fancyBackgroundImage.setAttribute("filter", IMAGE_INVERT_FILTER); fancyBackgroundImage.setAttribute("filter", IMAGE_INVERT_FILTER);
} }
@ -300,14 +300,12 @@ const addImageBackgroundToSvg = async ({
}; };
const addContentBackgroundToSvg = ({ const addContentBackgroundToSvg = ({
svgRoot, svgRoot,
exportScale,
contentSize, contentSize,
backgroundColor, backgroundColor,
dimensions, dimensions,
includeLogo, includeLogo,
}: { }: {
svgRoot: SVGSVGElement; svgRoot: SVGSVGElement;
exportScale: number;
contentSize: Dimensions; contentSize: Dimensions;
backgroundColor: string; backgroundColor: string;
dimensions: Dimensions; dimensions: Dimensions;
@ -369,16 +367,17 @@ const addContentBackgroundToSvg = ({
const { x, y, width, height } = getContentBackgound( const { x, y, width, height } = getContentBackgound(
contentSize, contentSize,
dimensions, dimensions,
exportScale, 1, // svg is scaled on root
includeLogo, includeLogo,
); );
const rect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect"); const rect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect");
rect.setAttribute("x", x.toString()); rect.setAttribute("x", x.toString());
rect.setAttribute("y", y.toString()); rect.setAttribute("y", y.toString());
rect.setAttribute("width", width.toString()); rect.setAttribute("width", width.toString());
rect.setAttribute("height", height.toString()); rect.setAttribute("height", height.toString());
rect.setAttribute("rx", (FANCY_BG_BORDER_RADIUS * exportScale).toString()); rect.setAttribute("rx", FANCY_BG_BORDER_RADIUS.toString());
rect.setAttribute("ry", (FANCY_BG_BORDER_RADIUS * exportScale).toString()); rect.setAttribute("ry", FANCY_BG_BORDER_RADIUS.toString());
rect.setAttribute("fill", backgroundColor); rect.setAttribute("fill", backgroundColor);
rect.setAttribute("filter", "url(#shadow)"); rect.setAttribute("filter", "url(#shadow)");
svgRoot.appendChild(rect); svgRoot.appendChild(rect);
@ -388,17 +387,18 @@ const addLogoToSvg = (
svgRoot: SVGSVGElement, svgRoot: SVGSVGElement,
normalizedCanvasDimensions: Dimensions, normalizedCanvasDimensions: Dimensions,
logoImage: SVGSVGElement, logoImage: SVGSVGElement,
exportScale: number,
theme: AppState["theme"], theme: AppState["theme"],
) => { ) => {
const logoWidth = parseFloat(logoImage.getAttribute("width") || "0"); const logoWidth = parseFloat(logoImage.getAttribute("width") || "0");
const logoHeight = parseFloat(logoImage.getAttribute("height") || "0"); const logoHeight = parseFloat(logoImage.getAttribute("height") || "0");
const x = (normalizedCanvasDimensions.width - logoWidth) / 2; // center horizontally const x = (normalizedCanvasDimensions.width - logoWidth) / 2;
const y = normalizedCanvasDimensions.height - logoHeight - 12; // 12px from bottom const y =
normalizedCanvasDimensions.height -
(logoHeight + FANCY_BG_LOGO_BOTTOM_PADDING);
logoImage.setAttribute("x", `${x}`); logoImage.setAttribute("x", `${x}`);
logoImage.setAttribute("y", `${y * exportScale}`); logoImage.setAttribute("y", `${y}`);
if (theme === THEME.DARK) { if (theme === THEME.DARK) {
logoImage.setAttribute("filter", IMAGE_INVERT_FILTER); logoImage.setAttribute("filter", IMAGE_INVERT_FILTER);
} }
@ -409,8 +409,7 @@ export const applyFancyBackgroundOnSvg = async ({
svgRoot, svgRoot,
fancyBackgroundImageKey, fancyBackgroundImageKey,
backgroundColor, backgroundColor,
dimensions, canvasDimensions,
exportScale,
theme, theme,
contentSize, contentSize,
includeLogo, includeLogo,
@ -421,8 +420,7 @@ export const applyFancyBackgroundOnSvg = async ({
"solid" "solid"
>; >;
backgroundColor: string; backgroundColor: string;
dimensions: Dimensions; canvasDimensions: Dimensions;
exportScale: AppState["exportScale"];
theme: AppState["theme"]; theme: AppState["theme"];
contentSize: Dimensions; contentSize: Dimensions;
includeLogo: boolean; includeLogo: boolean;
@ -434,16 +432,18 @@ export const applyFancyBackgroundOnSvg = async ({
await addImageBackgroundToSvg({ await addImageBackgroundToSvg({
svgRoot, svgRoot,
fancyBackgroundImageUrl, fancyBackgroundImageUrl,
dimensions, dimensions: canvasDimensions,
theme, theme,
}); });
addContentBackgroundToSvg({ addContentBackgroundToSvg({
svgRoot, svgRoot,
exportScale,
contentSize, contentSize,
backgroundColor, backgroundColor,
dimensions, dimensions: {
width: canvasDimensions.width,
height: canvasDimensions.height,
},
includeLogo, includeLogo,
}); });
@ -451,6 +451,14 @@ export const applyFancyBackgroundOnSvg = async ({
const logoImage = await loadSVGElement( const logoImage = await loadSVGElement(
theme === THEME.DARK ? EXPORT_LOGO_URL_DARK : EXPORT_LOGO_URL, theme === THEME.DARK ? EXPORT_LOGO_URL_DARK : EXPORT_LOGO_URL,
); );
addLogoToSvg(svgRoot, dimensions, logoImage, exportScale, theme); addLogoToSvg(
svgRoot,
{
width: canvasDimensions.width,
height: canvasDimensions.height,
},
logoImage,
theme,
);
} }
}; };