smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: use elements dimensions for scaling

Browse source
This commit is contained in:
Arnošt Pleskot 2023-08-10 21:35:05 +02:00
parent c731bd13b6
commit b77b7ccce1
No known key found for this signature in database
2 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/scene/export.ts
View file

@ -83,12 +83,17 @@ export const exportToCanvas = async (
}; };
if (appState.fancyBackgroundImageUrl) { if (appState.fancyBackgroundImageUrl) {
const contentBounds = getCommonBounds(elements);
const updatedRenderProps = await applyFancyBackground({ const updatedRenderProps = await applyFancyBackground({
canvas, canvas,
fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl, fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl,
backgroundColor: viewBackgroundColor, backgroundColor: viewBackgroundColor,
scale, scale,
renderConfig, renderConfig,
contentDimensions: {
w: contentBounds[2] - contentBounds[0],
h: contentBounds[3] - contentBounds[1],
},
}); });
renderConfig = updatedRenderProps.renderConfig; renderConfig = updatedRenderProps.renderConfig;

7
src/scene/fancyBackground.ts
View file

@ -137,6 +137,7 @@ const addContentBackground = (
const updateRenderConfig = ( const updateRenderConfig = (
renderConfig: RenderConfig, renderConfig: RenderConfig,
canvasDimensions: Dimensions, canvasDimensions: Dimensions,
contentDimesions: Dimensions,
): { scale: number; renderConfig: RenderConfig } => { ): { scale: number; renderConfig: RenderConfig } => {
const totalPadding = const totalPadding =
FANCY_BG_PADDING + FANCY_BG_BORDER_RADIUS + DEFAULT_EXPORT_PADDING; FANCY_BG_PADDING + FANCY_BG_BORDER_RADIUS + DEFAULT_EXPORT_PADDING;
@ -147,7 +148,7 @@ const updateRenderConfig = (
scrollX: renderConfig.scrollX + totalPadding, scrollX: renderConfig.scrollX + totalPadding,
scrollY: renderConfig.scrollY + totalPadding, scrollY: renderConfig.scrollY + totalPadding,
}, },
scale: getScaleToFit(canvasDimensions, { scale: getScaleToFit(contentDimesions, {
w: canvasDimensions.w - totalPadding * 2, w: canvasDimensions.w - totalPadding * 2,
h: canvasDimensions.h - totalPadding * 2, h: canvasDimensions.h - totalPadding * 2,
}), }),
@ -159,12 +160,14 @@ export const applyFancyBackground = async ({
fancyBackgroundImageUrl, fancyBackgroundImageUrl,
backgroundColor, backgroundColor,
renderConfig, renderConfig,
contentDimensions,
}: { }: {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
fancyBackgroundImageUrl: DataURL; fancyBackgroundImageUrl: DataURL;
backgroundColor: string; backgroundColor: string;
scale: number; scale: number;
renderConfig: RenderConfig; renderConfig: RenderConfig;
contentDimensions: Dimensions;
}) => { }) => {
const context = canvas.getContext("2d")!; const context = canvas.getContext("2d")!;
@ -183,5 +186,5 @@ export const applyFancyBackground = async ({
addContentBackground(context, canvasDimensions, backgroundColor); addContentBackground(context, canvasDimensions, backgroundColor);
return updateRenderConfig(renderConfig, canvasDimensions); return updateRenderConfig(renderConfig, canvasDimensions, contentDimensions);
}; };