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

feat: center and scale solid background on top of fancyBackground

Browse Source
This commit is contained in:
Arnošt Pleskot 2023-08-23 00:42:31 +02:00
parent e00764a937
commit 38fd4fb165
No known key found for this signature in database
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/scene/export.ts
View File

@ -89,20 +89,21 @@ export const exportToCanvas = async (
exportWithFancyBackground &&
appState.fancyBackgroundImageKey !== "solid"
) {
const commonBounds = getCommonBounds(elements);
const contentSize: Dimensions = {
width: distance(commonBounds[0], commonBounds[2]),
height: distance(commonBounds[1], commonBounds[3]),
};
await applyFancyBackgroundOnCanvas({
canvas,
fancyBackgroundImageKey: appState.fancyBackgroundImageKey,
backgroundColor: viewBackgroundColor,
exportScale: scale,
theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
contentSize,
});
const commonBounds = getCommonBounds(elements);
const contentSize: Dimensions = {
width: distance(commonBounds[0], commonBounds[2]),
height: distance(commonBounds[1], commonBounds[3]),
};
scrollXAdjustment = (width - contentSize.width - padding * 2) / 2;
scrollYAdjustment = (height - contentSize.height - padding * 2) / 2;
}

21
src/scene/fancyBackground.ts
View File

@ -67,6 +67,7 @@ const addContentBackground = (
contentBackgroundColor: string,
exportScale: AppState["exportScale"],
theme: AppState["theme"],
contentSize: Dimensions,
) => {
const shadows = [
{
@ -98,12 +99,21 @@ const addContentBackground = (
context.shadowOffsetX = shadow.offsetX * exportScale;
context.shadowOffsetY = shadow.offsetY * exportScale;
const x =
(normalizedDimensions.width - contentSize.width) / 2 - FANCY_BG_PADDING;
const y =
(normalizedDimensions.height - contentSize.height) / 2 - FANCY_BG_PADDING;
if (context.roundRect) {
context.roundRect(
FANCY_BG_PADDING * exportScale,
FANCY_BG_PADDING * exportScale,
normalizedDimensions.width - FANCY_BG_PADDING * 2 * exportScale,
normalizedDimensions.height - FANCY_BG_PADDING * 2 * exportScale,
x,
y,
(contentSize.width +
(DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) * 2) *
exportScale,
(contentSize.height * exportScale +
(DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) * 2) *
exportScale,
FANCY_BG_BORDER_RADIUS * exportScale,
);
} else {
@ -135,6 +145,7 @@ export const applyFancyBackgroundOnCanvas = async ({
backgroundColor,
exportScale,
theme,
contentSize,
}: {
canvas: HTMLCanvasElement;
fancyBackgroundImageKey: Exclude<
@ -144,6 +155,7 @@ export const applyFancyBackgroundOnCanvas = async ({
backgroundColor: string;
exportScale: AppState["exportScale"];
theme: AppState["theme"];
contentSize: Dimensions;
}) => {
const context = canvas.getContext("2d")!;
@ -172,6 +184,7 @@ export const applyFancyBackgroundOnCanvas = async ({
backgroundColor,
exportScale,
theme,
contentSize,
);
};