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

fix: padding

Browse Source
This commit is contained in:
Arnošt Pleskot 2023-08-29 15:04:02 +02:00
parent 780af522a2
commit 425f1a5461
No known key found for this signature in database
2 changed files with 43 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/constants.ts
View File

@ -234,8 +234,9 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
export const EXPORT_SCALES = [1, 2, 3]; export const EXPORT_SCALES = [1, 2, 3];
export const DEFAULT_EXPORT_PADDING = 10; // px export const DEFAULT_EXPORT_PADDING = 10; // px
export const FANCY_BG_PADDING = 24; // px export const FANCY_BG_PADDING = 24; // px
export const FANCY_BG_LOGO_PADDING = 20; // px
export const FANCY_BG_BORDER_RADIUS = 12; // px export const FANCY_BG_BORDER_RADIUS = 12; // px
export const FANCY_BG_LOGO_PADDING = 20; // px
export const FANCY_BG_LOGO_BOTTOM_PADDING = 12; // px
export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440; export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
@ -358,3 +359,6 @@ export const FANCY_BACKGROUND_IMAGES = {
export const DEFAULT_FANCY_BACKGROUND_IMAGE: keyof typeof FANCY_BACKGROUND_IMAGES = export const DEFAULT_FANCY_BACKGROUND_IMAGE: keyof typeof FANCY_BACKGROUND_IMAGES =
"solid" as const; "solid" as const;
export const EXPORT_LOGO_URL = "/backgrounds/logo.svg" as DataURL;
export const EXPORT_LOGO_URL_DARK = "/backgrounds/logo-dark.svg" as DataURL;

62
src/scene/fancyBackground.ts
View File

@ -4,6 +4,7 @@ import {
EXPORT_LOGO_URL_DARK, EXPORT_LOGO_URL_DARK,
FANCY_BACKGROUND_IMAGES, FANCY_BACKGROUND_IMAGES,
FANCY_BG_BORDER_RADIUS, FANCY_BG_BORDER_RADIUS,
FANCY_BG_LOGO_BOTTOM_PADDING,
FANCY_BG_LOGO_PADDING, FANCY_BG_LOGO_PADDING,
FANCY_BG_PADDING, FANCY_BG_PADDING,
IMAGE_INVERT_FILTER, IMAGE_INVERT_FILTER,
@ -35,7 +36,7 @@ export const getFancyBackgroundPadding = (
const addImageBackground = ( const addImageBackground = (
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
canvasDimensions: Dimensions, normalizedCanvasDimensions: Dimensions,
fancyBackgroundImage: HTMLImageElement, fancyBackgroundImage: HTMLImageElement,
exportScale: AppState["exportScale"], exportScale: AppState["exportScale"],
) => { ) => {
@ -45,8 +46,8 @@ const addImageBackground = (
context.roundRect( context.roundRect(
0, 0,
0, 0,
canvasDimensions.width, normalizedCanvasDimensions.width,
canvasDimensions.height, normalizedCanvasDimensions.height,
FANCY_BG_BORDER_RADIUS * exportScale, FANCY_BG_BORDER_RADIUS * exportScale,
); );
} else { } else {
@ -54,17 +55,23 @@ const addImageBackground = (
context, context,
0, 0,
0, 0,
canvasDimensions.width, normalizedCanvasDimensions.width,
canvasDimensions.height, normalizedCanvasDimensions.height,
FANCY_BG_BORDER_RADIUS * exportScale, FANCY_BG_BORDER_RADIUS * exportScale,
); );
} }
const scale = getScaleToFill( const scale = getScaleToFill(
{ width: fancyBackgroundImage.width, height: fancyBackgroundImage.height }, { width: fancyBackgroundImage.width, height: fancyBackgroundImage.height },
{ width: canvasDimensions.width, height: canvasDimensions.height }, {
width: normalizedCanvasDimensions.width,
height: normalizedCanvasDimensions.height,
},
); );
const x = (canvasDimensions.width - fancyBackgroundImage.width * scale) / 2; const x =
const y = (canvasDimensions.height - fancyBackgroundImage.height * scale) / 2; (normalizedCanvasDimensions.width - fancyBackgroundImage.width * scale) / 2;
const y =
(normalizedCanvasDimensions.height - fancyBackgroundImage.height * scale) /
2;
context.clip(); context.clip();
context.drawImage( context.drawImage(
fancyBackgroundImage, fancyBackgroundImage,
@ -79,16 +86,19 @@ const addImageBackground = (
const getContentBackgound = ( const getContentBackgound = (
contentSize: Dimensions, contentSize: Dimensions,
normalizedDimensions: Dimensions, normalizedCanvasDimensions: Dimensions,
exportScale: number, exportScale: number,
includeLogo: boolean, includeLogo: boolean,
): { x: number; y: number; width: number; height: number } => { ): { x: number; y: number; width: number; height: number } => {
const x = const x =
(normalizedDimensions.width - contentSize.width * exportScale) / 2 - (normalizedCanvasDimensions.width - contentSize.width * exportScale) / 2 -
FANCY_BG_PADDING * exportScale; FANCY_BG_PADDING * exportScale;
const y = const y =
(normalizedDimensions.height - contentSize.height * exportScale) / 2 - (normalizedCanvasDimensions.height -
(contentSize.height + DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) *
exportScale) /
2 -
FANCY_BG_PADDING * exportScale; FANCY_BG_PADDING * exportScale;
const width = const width =
@ -97,7 +107,9 @@ const getContentBackgound = (
exportScale; exportScale;
const height = const height =
(contentSize.height - (contentSize.height +
DEFAULT_EXPORT_PADDING +
FANCY_BG_BORDER_RADIUS -
(includeLogo ? FANCY_BG_LOGO_PADDING : 0) + (includeLogo ? FANCY_BG_LOGO_PADDING : 0) +
(DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) * 2) * (DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) * 2) *
exportScale; exportScale;
@ -107,7 +119,7 @@ const getContentBackgound = (
const addContentBackground = ( const addContentBackground = (
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
normalizedDimensions: Dimensions, normalizedCanvasDimensions: Dimensions,
contentBackgroundColor: string, contentBackgroundColor: string,
exportScale: AppState["exportScale"], exportScale: AppState["exportScale"],
theme: AppState["theme"], theme: AppState["theme"],
@ -146,7 +158,7 @@ const addContentBackground = (
const { x, y, width, height } = getContentBackgound( const { x, y, width, height } = getContentBackgound(
contentSize, contentSize,
normalizedDimensions, normalizedCanvasDimensions,
exportScale, exportScale,
includeLogo, includeLogo,
); );
@ -184,7 +196,7 @@ const addContentBackground = (
const addLogo = ( const addLogo = (
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
canvasDimensions: Dimensions, normalizedCanvasDimensions: Dimensions,
logoImage: HTMLImageElement, logoImage: HTMLImageElement,
exportScale: number, exportScale: number,
) => { ) => {
@ -192,8 +204,10 @@ const addLogo = (
context.beginPath(); context.beginPath();
context.drawImage( context.drawImage(
logoImage, logoImage,
((canvasDimensions.width - logoImage.width) / 2) * exportScale, // center horizontally (normalizedCanvasDimensions.width - logoImage.width * exportScale) / 2,
(canvasDimensions.height - logoImage.height - 12) * exportScale, // 12px from bottom normalizedCanvasDimensions.height -
logoImage.height * exportScale -
FANCY_BG_LOGO_BOTTOM_PADDING * exportScale,
logoImage.width * exportScale, logoImage.width * exportScale,
logoImage.height * exportScale, logoImage.height * exportScale,
); );
@ -231,21 +245,21 @@ export const applyFancyBackgroundOnCanvas = async ({
fancyBackgroundImageUrl, fancyBackgroundImageUrl,
); );
const canvasDimensions: Dimensions = { const normalizedCanvasDimensions: Dimensions = {
width: canvas.width, width: canvas.width,
height: canvas.height, height: canvas.height,
}; };
addImageBackground( addImageBackground(
context, context,
canvasDimensions, normalizedCanvasDimensions,
fancyBackgroundImage, fancyBackgroundImage,
exportScale, exportScale,
); );
addContentBackground( addContentBackground(
context, context,
canvasDimensions, normalizedCanvasDimensions,
backgroundColor, backgroundColor,
exportScale, exportScale,
theme, theme,
@ -257,7 +271,7 @@ export const applyFancyBackgroundOnCanvas = async ({
const logoImage = await loadHTMLImageElement( const logoImage = await loadHTMLImageElement(
theme === THEME.DARK ? EXPORT_LOGO_URL_DARK : EXPORT_LOGO_URL, theme === THEME.DARK ? EXPORT_LOGO_URL_DARK : EXPORT_LOGO_URL,
); );
addLogo(context, canvasDimensions, logoImage, exportScale); addLogo(context, normalizedCanvasDimensions, logoImage, exportScale);
} }
}; };
@ -373,15 +387,15 @@ const addContentBackgroundToSvg = ({
const addLogoToSvg = ( const addLogoToSvg = (
svgRoot: SVGSVGElement, svgRoot: SVGSVGElement,
canvasDimensions: Dimensions, normalizedCanvasDimensions: Dimensions,
logoImage: SVGSVGElement, logoImage: SVGSVGElement,
exportScale: number, exportScale: number,
) => { ) => {
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 = (canvasDimensions.width - logoWidth) / 2; // center horizontally const x = (normalizedCanvasDimensions.width - logoWidth) / 2; // center horizontally
const y = canvasDimensions.height - logoHeight - 12; // 12px from bottom const y = normalizedCanvasDimensions.height - logoHeight - 12; // 12px from bottom
logoImage.setAttribute("x", `${x}`); logoImage.setAttribute("x", `${x}`);
logoImage.setAttribute("y", `${y * exportScale}`); logoImage.setAttribute("y", `${y * exportScale}`);