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,
fancyBackgroundImageKey: `${appState.fancyBackgroundImageKey}`,
backgroundColor: viewBackgroundColor,
dimensions: { width, height },
exportScale,
canvasDimensions: {
width,
height,
},
theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
contentSize,
includeLogo: true,

44
src/scene/fancyBackground.ts
View File

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