diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index 736edb99d..a5e786ea1 100644 --- a/src/renderer/renderScene.ts +++ b/src/renderer/renderScene.ts @@ -402,6 +402,7 @@ const bootstrapCanvas = ({ theme, isExporting, viewBackgroundColor, + exportWithFancyBackground, }: { canvas: HTMLCanvasElement; scale: number; @@ -410,6 +411,7 @@ const bootstrapCanvas = ({ theme?: AppState["theme"]; isExporting?: StaticCanvasRenderConfig["isExporting"]; viewBackgroundColor?: StaticCanvasAppState["viewBackgroundColor"]; + exportWithFancyBackground?: boolean; }): CanvasRenderingContext2D => { const context = canvas.getContext("2d")!; @@ -419,7 +421,6 @@ const bootstrapCanvas = ({ if (isExporting && theme === "dark") { context.filter = THEME_FILTER; } - // Paint background if (typeof viewBackgroundColor === "string") { const hasTransparence = @@ -434,7 +435,7 @@ const bootstrapCanvas = ({ context.fillStyle = viewBackgroundColor; context.fillRect(0, 0, normalizedWidth, normalizedHeight); context.restore(); - } else { + } else if (!exportWithFancyBackground) { context.clearRect(0, 0, normalizedWidth, normalizedHeight); } @@ -924,6 +925,7 @@ const _renderStaticScene = ({ theme: appState.theme, isExporting, viewBackgroundColor: appState.viewBackgroundColor, + exportWithFancyBackground: renderConfig.exportWithFancyBackground, }); // Apply zoom diff --git a/src/scene/export.ts b/src/scene/export.ts index d7db363ac..3c7908b19 100644 --- a/src/scene/export.ts +++ b/src/scene/export.ts @@ -74,28 +74,6 @@ export const exportToCanvas = async ( const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements); - const renderConfig = { - viewBackgroundColor: - exportBackground && !exportWithFancyBackground - ? viewBackgroundColor - : null, - scrollX: -minX + (onlyExportingSingleFrame ? 0 : padding), - scrollY: -minY + (onlyExportingSingleFrame ? 0 : padding), - 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.fancyBackgroundImageKey, - }; - if ( exportWithFancyBackground && appState.fancyBackgroundImageKey !== "solid" @@ -105,7 +83,7 @@ export const exportToCanvas = async ( fancyBackgroundImageKey: appState.fancyBackgroundImageKey, backgroundColor: viewBackgroundColor, exportScale: scale, - theme: renderConfig.theme, + theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT, }); } @@ -117,17 +95,21 @@ export const exportToCanvas = async ( scale, appState: { ...appState, - viewBackgroundColor: exportBackground ? viewBackgroundColor : null, - scrollX: -minX + (onlyExportingSingleFrame ? 0 : exportPadding), - scrollY: -minY + (onlyExportingSingleFrame ? 0 : exportPadding), + viewBackgroundColor: + exportBackground && !exportWithFancyBackground + ? viewBackgroundColor + : null, + scrollX: -minX + (onlyExportingSingleFrame ? 0 : padding), + scrollY: -minY + (onlyExportingSingleFrame ? 0 : padding), zoom: defaultAppState.zoom, shouldCacheIgnoreZoom: false, - theme: appState.exportWithDarkMode ? "dark" : "light", + theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT, }, renderConfig: { imageCache, renderGrid: false, isExporting: true, + exportWithFancyBackground, }, }); diff --git a/src/scene/types.ts b/src/scene/types.ts index b29379a4f..8aef2ef37 100644 --- a/src/scene/types.ts +++ b/src/scene/types.ts @@ -18,6 +18,7 @@ export type StaticCanvasRenderConfig = { /** when exporting the behavior is slightly different (e.g. we can't use CSS filters), and we disable render optimizations for best output */ isExporting: boolean; + exportWithFancyBackground?: boolean; }; export type InteractiveCanvasRenderConfig = {