feat: update renderConfig to move and scale content

This commit is contained in:
Arnošt Pleskot 2023-08-10 21:19:19 +02:00
parent 70c7185f32
commit c731bd13b6
No known key found for this signature in database
2 changed files with 111 additions and 32 deletions

View file

@ -4,7 +4,12 @@ import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
import { renderSceneToSvg, renderStaticScene } from "../renderer/renderScene";
import { distance, isOnlyExportingSingleFrame } from "../utils";
import { AppState, BinaryFiles } from "../types";
import { DEFAULT_EXPORT_PADDING, SVG_NS, THEME_FILTER } from "../constants";
import {
DEFAULT_EXPORT_PADDING,
SVG_NS,
THEME,
THEME_FILTER,
} from "../constants";
import { getDefaultAppState } from "../appState";
import { serializeAsJSON } from "../data/json";
import {
@ -41,7 +46,7 @@ export const exportToCanvas = async (
) => {
const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
const { canvas, scale = 1 } = createCanvas(width, height);
let { canvas, scale = 1 } = createCanvas(width, height);
const defaultAppState = getDefaultAppState();
@ -55,12 +60,39 @@ export const exportToCanvas = async (
const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
let renderConfig = {
viewBackgroundColor:
exportBackground && !appState.fancyBackgroundImageUrl
? viewBackgroundColor
: null,
scrollX: -minX + (onlyExportingSingleFrame ? 0 : exportPadding),
scrollY: -minY + (onlyExportingSingleFrame ? 0 : exportPadding),
zoom: defaultAppState.zoom,
remotePointerViewportCoords: {},
remoteSelectedElementIds: {},
shouldCacheIgnoreZoom: false,
remotePointerUsernames: {},
remotePointerUserStates: {},
theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
imageCache,
renderScrollbars: false,
renderSelection: false,
renderGrid: false,
isExporting: true,
exportBackgroundImage: appState.fancyBackgroundImageUrl,
};
if (appState.fancyBackgroundImageUrl) {
await applyFancyBackground(
const updatedRenderProps = await applyFancyBackground({
canvas,
appState.fancyBackgroundImageUrl,
viewBackgroundColor,
);
fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl,
backgroundColor: viewBackgroundColor,
scale,
renderConfig,
});
renderConfig = updatedRenderProps.renderConfig;
scale = updatedRenderProps.scale;
}
renderStaticScene({