fix: frame export with fancy background
This commit is contained in:
parent
75cd5c20b6
commit
47de794c44
@ -55,22 +55,24 @@ export const exportToCanvas = async (
|
||||
return { canvas, scale: appState.exportScale };
|
||||
},
|
||||
) => {
|
||||
const exportWithFancyBackground =
|
||||
exportBackground &&
|
||||
appState.fancyBackgroundImageKey &&
|
||||
appState.fancyBackgroundImageKey !== "solid" &&
|
||||
elements.length > 0;
|
||||
const exportingWithFancyBackground = isExportingWithFacnyBackground(
|
||||
appState,
|
||||
elements,
|
||||
);
|
||||
|
||||
const padding = !exportWithFancyBackground
|
||||
const padding = !exportingWithFancyBackground
|
||||
? convertToExportPadding(exportPadding)
|
||||
: getFancyBackgroundPadding(
|
||||
convertToExportPadding(exportPadding),
|
||||
FANCY_BG_INCLUDE_LOGO,
|
||||
);
|
||||
|
||||
const [minX, minY, width, height] = !exportWithFancyBackground
|
||||
? getCanvasSize(elements, padding)
|
||||
: getCanvasSize(elements, padding, {
|
||||
const onlyExportingSingleFrame =
|
||||
isOnlyExportingSingleFrame(elements) && !exportingWithFancyBackground;
|
||||
|
||||
const [minX, minY, width, height] = !exportingWithFancyBackground
|
||||
? getCanvasSize(elements, padding, onlyExportingSingleFrame)
|
||||
: getCanvasSize(elements, padding, onlyExportingSingleFrame, {
|
||||
aspectRatio: { width: 16, height: 9 },
|
||||
});
|
||||
|
||||
@ -86,13 +88,11 @@ export const exportToCanvas = async (
|
||||
files,
|
||||
});
|
||||
|
||||
const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
|
||||
|
||||
let scrollXAdjustment = 0;
|
||||
let scrollYAdjustment = 0;
|
||||
|
||||
if (
|
||||
exportWithFancyBackground &&
|
||||
exportingWithFancyBackground &&
|
||||
appState.fancyBackgroundImageKey !== "solid"
|
||||
) {
|
||||
const commonBounds = getCommonBounds(elements);
|
||||
@ -127,7 +127,7 @@ export const exportToCanvas = async (
|
||||
appState: {
|
||||
...appState,
|
||||
viewBackgroundColor:
|
||||
exportBackground && !exportWithFancyBackground
|
||||
exportBackground && !exportingWithFancyBackground
|
||||
? viewBackgroundColor
|
||||
: null,
|
||||
scrollX:
|
||||
@ -142,7 +142,7 @@ export const exportToCanvas = async (
|
||||
imageCache,
|
||||
renderGrid: false,
|
||||
isExporting: true,
|
||||
exportWithFancyBackground,
|
||||
exportWithFancyBackground: exportingWithFancyBackground,
|
||||
},
|
||||
});
|
||||
|
||||
@ -172,16 +172,17 @@ export const exportToSvg = async (
|
||||
viewBackgroundColor,
|
||||
exportScale = 1,
|
||||
exportEmbedScene,
|
||||
exportBackground,
|
||||
} = appState;
|
||||
|
||||
const exportWithFancyBackground =
|
||||
exportBackground &&
|
||||
elements.length > 0 &&
|
||||
appState.fancyBackgroundImageKey &&
|
||||
appState.fancyBackgroundImageKey !== "solid";
|
||||
const exportingWithFancyBackground = isExportingWithFacnyBackground(
|
||||
{
|
||||
exportBackground: appState.exportBackground,
|
||||
fancyBackgroundImageKey: appState.fancyBackgroundImageKey,
|
||||
},
|
||||
elements,
|
||||
);
|
||||
|
||||
const padding = !exportWithFancyBackground
|
||||
const padding = !exportingWithFancyBackground
|
||||
? convertToExportPadding(exportPadding)
|
||||
: getFancyBackgroundPadding(
|
||||
convertToExportPadding(exportPadding),
|
||||
@ -202,9 +203,13 @@ export const exportToSvg = async (
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
const [minX, minY, width, height] = !exportWithFancyBackground
|
||||
? getCanvasSize(elements, padding)
|
||||
: getCanvasSize(elements, padding, {
|
||||
|
||||
const onlyExportingSingleFrame =
|
||||
isOnlyExportingSingleFrame(elements) && !exportingWithFancyBackground;
|
||||
|
||||
const [minX, minY, width, height] = !exportingWithFancyBackground
|
||||
? getCanvasSize(elements, padding, onlyExportingSingleFrame)
|
||||
: getCanvasSize(elements, padding, onlyExportingSingleFrame, {
|
||||
aspectRatio: { width: 16, height: 9 },
|
||||
});
|
||||
|
||||
@ -239,8 +244,6 @@ export const exportToSvg = async (
|
||||
Scene.getScene(elements[0])?.getNonDeletedElements()?.length ===
|
||||
elements.length;
|
||||
|
||||
const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
|
||||
|
||||
const offsetX = -minX + (onlyExportingSingleFrame ? 0 : padding[3]);
|
||||
const offsetY = -minY + (onlyExportingSingleFrame ? 0 : padding[0]);
|
||||
|
||||
@ -290,6 +293,7 @@ export const exportToSvg = async (
|
||||
// render background rect
|
||||
if (appState.exportBackground && viewBackgroundColor) {
|
||||
if (
|
||||
exportingWithFancyBackground &&
|
||||
appState.fancyBackgroundImageKey &&
|
||||
appState.fancyBackgroundImageKey !== "solid"
|
||||
) {
|
||||
@ -342,6 +346,7 @@ export const exportToSvg = async (
|
||||
const getCanvasSize = (
|
||||
elements: readonly NonDeletedExcalidrawElement[],
|
||||
exportPadding: ExportPadding,
|
||||
onlyExportingSingleFrame: boolean,
|
||||
opts?: { aspectRatio: Dimensions },
|
||||
): [number, number, number, number] => {
|
||||
// we should decide if we are exporting the whole canvas
|
||||
@ -352,8 +357,6 @@ const getCanvasSize = (
|
||||
Scene.getScene(elements[0])?.getNonDeletedElements()?.length ===
|
||||
elements.length;
|
||||
|
||||
const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
|
||||
|
||||
if (!isExportingWholeCanvas || onlyExportingSingleFrame) {
|
||||
const frames = elements.filter((element) => element.type === "frame");
|
||||
|
||||
@ -398,11 +401,27 @@ export const getExportSize = (
|
||||
elements: readonly NonDeletedExcalidrawElement[],
|
||||
exportPadding: number,
|
||||
scale: number,
|
||||
appState: AppState,
|
||||
): [number, number] => {
|
||||
const [, , width, height] = getCanvasSize(
|
||||
elements,
|
||||
convertToExportPadding(exportPadding),
|
||||
isExportingWithFacnyBackground(appState, elements),
|
||||
).map((dimension) => Math.trunc(dimension * scale));
|
||||
|
||||
return [width, height];
|
||||
};
|
||||
|
||||
const isExportingWithFacnyBackground = (
|
||||
appState: Partial<
|
||||
Pick<AppState, "exportBackground" | "fancyBackgroundImageKey">
|
||||
>,
|
||||
elements: readonly NonDeletedExcalidrawElement[],
|
||||
): boolean => {
|
||||
return Boolean(
|
||||
appState.exportBackground &&
|
||||
appState.fancyBackgroundImageKey &&
|
||||
appState.fancyBackgroundImageKey !== "solid" &&
|
||||
elements.length > 0,
|
||||
);
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user