sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reduce passing-around of canvas in export code (#3571)

Browse Source
This commit is contained in:
David Laban 2021-05-13 18:21:15 +01:00 committed by GitHub
parent 3b9290831a
commit f1cf28a84e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/actions/actionClipboard.tsx
View File

@ -50,7 +50,6 @@ export const actionCopyAsSvg = register({
? selectedElements ? selectedElements
: getNonDeletedElements(elements), : getNonDeletedElements(elements),
appState, appState,
app.canvas,
appState, appState,
); );
return { return {
@ -89,7 +88,6 @@ export const actionCopyAsPng = register({
? selectedElements ? selectedElements
: getNonDeletedElements(elements), : getNonDeletedElements(elements),
appState, appState,
app.canvas,
appState, appState,
); );
return { return {

4
src/clipboard.ts
View File

@ -6,7 +6,6 @@ import { getSelectedElements } from "./scene";
import { AppState } from "./types"; import { AppState } from "./types";
import { SVG_EXPORT_TAG } from "./scene/export"; import { SVG_EXPORT_TAG } from "./scene/export";
import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts"; import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
import { canvasToBlob } from "./data/blob";
import { EXPORT_DATA_TYPES } from "./constants"; import { EXPORT_DATA_TYPES } from "./constants";
type ElementsClipboard = { type ElementsClipboard = {
@ -152,8 +151,7 @@ export const parseClipboard = async (
} }
}; };
export const copyCanvasToClipboardAsPng = async (canvas: HTMLCanvasElement) => { export const copyBlobToClipboardAsPng = async (blob: Blob) => {
const blob = await canvasToBlob(canvas);
await navigator.clipboard.write([ await navigator.clipboard.write([
new window.ClipboardItem({ "image/png": blob }), new window.ClipboardItem({ "image/png": blob }),
]); ]);

26
src/components/LayerUI.tsx
View File

@ -407,20 +407,18 @@ const LayerUI = ({
exportedElements, exportedElements,
scale, scale,
) => { ) => {
if (canvas) { await exportCanvas(type, exportedElements, appState, {
await exportCanvas(type, exportedElements, appState, canvas, { exportBackground: appState.exportBackground,
exportBackground: appState.exportBackground, name: appState.name,
name: appState.name, viewBackgroundColor: appState.viewBackgroundColor,
viewBackgroundColor: appState.viewBackgroundColor, scale,
scale, shouldAddWatermark: appState.shouldAddWatermark,
shouldAddWatermark: appState.shouldAddWatermark, })
}) .catch(muteFSAbortError)
.catch(muteFSAbortError) .catch((error) => {
.catch((error) => { console.error(error);
console.error(error); setAppState({ errorMessage: error.message });
setAppState({ errorMessage: error.message }); });
});
}
}; };
return ( return (

13
src/data/index.ts
View File

@ -1,6 +1,6 @@
import { fileSave } from "browser-fs-access"; import { fileSave } from "browser-fs-access";
import { import {
copyCanvasToClipboardAsPng, copyBlobToClipboardAsPng,
copyTextToSystemClipboard, copyTextToSystemClipboard,
} from "../clipboard"; } from "../clipboard";
import { NonDeletedExcalidrawElement } from "../element/types"; import { NonDeletedExcalidrawElement } from "../element/types";
@ -18,7 +18,6 @@ export const exportCanvas = async (
type: ExportType, type: ExportType,
elements: readonly NonDeletedExcalidrawElement[], elements: readonly NonDeletedExcalidrawElement[],
appState: AppState, appState: AppState,
canvas: HTMLCanvasElement,
{ {
exportBackground, exportBackground,
exportPadding = 10, exportPadding = 10,
@ -76,10 +75,11 @@ export const exportCanvas = async (
}); });
tempCanvas.style.display = "none"; tempCanvas.style.display = "none";
document.body.appendChild(tempCanvas); document.body.appendChild(tempCanvas);
let blob = await canvasToBlob(tempCanvas);
tempCanvas.remove();
if (type === "png") { if (type === "png") {
const fileName = `${name}.png`; const fileName = `${name}.png`;
let blob = await canvasToBlob(tempCanvas);
if (appState.exportEmbedScene) { if (appState.exportEmbedScene) {
blob = await ( blob = await (
await import(/* webpackChunkName: "image" */ "./image") await import(/* webpackChunkName: "image" */ "./image")
@ -95,7 +95,7 @@ export const exportCanvas = async (
}); });
} else if (type === "clipboard") { } else if (type === "clipboard") {
try { try {
await copyCanvasToClipboardAsPng(tempCanvas); await copyBlobToClipboardAsPng(blob);
} catch (error) { } catch (error) {
if (error.name === "CANVAS_POSSIBLY_TOO_BIG") { if (error.name === "CANVAS_POSSIBLY_TOO_BIG") {
throw error; throw error;
@ -103,9 +103,4 @@ export const exportCanvas = async (
throw new Error(t("alerts.couldNotCopyToClipboard")); throw new Error(t("alerts.couldNotCopyToClipboard"));
} }
} }
// clean up the DOM
if (tempCanvas !== canvas) {
tempCanvas.remove();
}
}; };