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: simplify the rendering

Browse source
This commit is contained in:
Arnošt Pleskot 2023-08-10 23:45:45 +02:00
parent 77e88c09b8
commit d4d9ecf6c6
No known key found for this signature in database
2 changed files with 19 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/scene/fancyBackground.ts
View file

@ -1,12 +1,7 @@
import {
DEFAULT_EXPORT_PADDING,
FANCY_BG_BORDER_RADIUS,
FANCY_BG_PADDING,
} from "../constants";
import { FANCY_BG_BORDER_RADIUS, FANCY_BG_PADDING } from "../constants";
import { loadHTMLImageElement } from "../element/image";
import { roundRect } from "../renderer/roundRect";
import { DataURL } from "../types";
import { RenderConfig } from "./types";
type Dimensions = { w: number; h: number };
@ -19,15 +14,6 @@ const getScaleToFill = (contentSize: Dimensions, containerSize: Dimensions) => {
return scale;
};
const getScaleToFit = (contentSize: Dimensions, containerSize: Dimensions) => {
const scale = Math.min(
containerSize.w / contentSize.w,
containerSize.h / contentSize.h,
);
return scale;
};
const addImageBackground = (
context: CanvasRenderingContext2D,
canvasDimensions: Dimensions,
@ -134,47 +120,14 @@ const addContentBackground = (
});
};
const updateRenderConfig = (
renderConfig: RenderConfig,
canvasDimensions: Dimensions,
contentDimensions: Dimensions,
): { scale: number; renderConfig: RenderConfig } => {
const totalPadding =
FANCY_BG_PADDING + FANCY_BG_BORDER_RADIUS + DEFAULT_EXPORT_PADDING;
const scale = getScaleToFit(contentDimensions, {
w: canvasDimensions.w - totalPadding * 2,
h: canvasDimensions.h - totalPadding * 2,
});
const centeredScrollX =
(canvasDimensions.w - contentDimensions.w * scale) / 2;
const centeredScrollY =
(canvasDimensions.h - contentDimensions.h * scale) / 2;
return {
renderConfig: {
...renderConfig,
scrollX: centeredScrollX + renderConfig.scrollX,
scrollY: centeredScrollY + renderConfig.scrollY,
},
scale,
};
};
export const applyFancyBackground = async ({
canvas,
fancyBackgroundImageUrl,
backgroundColor,
renderConfig,
contentDimensions,
}: {
canvas: HTMLCanvasElement;
fancyBackgroundImageUrl: DataURL;
backgroundColor: string;
scale: number;
renderConfig: RenderConfig;
contentDimensions: Dimensions;
}) => {
const context = canvas.getContext("2d")!;
@ -184,14 +137,7 @@ export const applyFancyBackground = async ({
const canvasDimensions: Dimensions = { w: canvas.width, h: canvas.height };
// const normalizedDimensions: Dimensions = {
// w: canvas.width / scale,
// h: canvas.height / scale,
// };
addImageBackground(context, canvasDimensions, fancyBackgroundImage);
addContentBackground(context, canvasDimensions, backgroundColor);
return updateRenderConfig(renderConfig, canvasDimensions, contentDimensions);
};