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

fix regression of always exporting bg (#62)

Browse Source
This commit is contained in:
David Luzar 2020-01-03 14:18:26 +01:00 committed by Christopher Chedeau
parent a980f40e37
commit db386b8400
1 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/index.tsx
View File

@ -118,6 +118,43 @@ function newElement(type: string, x: number, y: number, width = 0, height = 0) {
return element; return element;
} }
function renderScene(
rc: RoughCanvas,
context: CanvasRenderingContext2D,
// null indicates transparent bg
viewBgColor: string | null
) {
const fillStyle = context.fillStyle;
if (typeof viewBgColor === "string") {
context.fillStyle = viewBgColor;
context.fillRect(-0.5, -0.5, canvas.width, canvas.height);
} else {
context.clearRect(-0.5, -0.5, canvas.width, canvas.height);
}
context.fillStyle = fillStyle;
elements.forEach(element => {
element.draw(rc, context);
if (element.isSelected) {
const margin = 4;
const elementX1 = getElementAbsoluteX1(element);
const elementX2 = getElementAbsoluteX2(element);
const elementY1 = getElementAbsoluteY1(element);
const elementY2 = getElementAbsoluteY2(element);
const lineDash = context.getLineDash();
context.setLineDash([8, 4]);
context.strokeRect(
elementX1 - margin,
elementY1 - margin,
elementX2 - elementX1 + margin * 2,
elementY2 - elementY1 + margin * 2
);
context.setLineDash(lineDash);
}
});
}
function exportAsPNG({ function exportAsPNG({
exportBackground, exportBackground,
exportVisibleOnly, exportVisibleOnly,
@ -162,9 +199,10 @@ function exportAsPNG({
? subCanvasY2 - subCanvasY1 + exportPadding * 2 ? subCanvasY2 - subCanvasY1 + exportPadding * 2
: canvas.height; : canvas.height;
if (exportBackground) { // if we're exporting without bg, we need to rerender the scene without it
tempCanvasCtx.fillStyle = viewBgColor; // (it's reset again, below)
tempCanvasCtx.fillRect(0, 0, canvas.width, canvas.height); if (!exportBackground) {
renderScene(rc, context, null);
} }
// copy our original canvas onto the temp canvas // copy our original canvas onto the temp canvas
@ -188,6 +226,11 @@ function exportAsPNG({
exportVisibleOnly ? tempCanvas.height : canvas.height // dHeight exportVisibleOnly ? tempCanvas.height : canvas.height // dHeight
); );
// reset transparent bg back to original
if (!exportBackground) {
renderScene(rc, context, viewBgColor);
}
// create a temporary <a> elem which we'll use to download the image // create a temporary <a> elem which we'll use to download the image
const link = document.createElement("a"); const link = document.createElement("a");
link.setAttribute("download", "excalibur.png"); link.setAttribute("download", "excalibur.png");
@ -753,31 +796,7 @@ class App extends React.Component<{}, AppState> {
} }
componentDidUpdate() { componentDidUpdate() {
const fillStyle = context.fillStyle; renderScene(rc, context, this.state.viewBgColor);
context.fillStyle = this.state.viewBgColor;
context.fillRect(-0.5, -0.5, canvas.width, canvas.height);
context.fillStyle = fillStyle;
elements.forEach(element => {
element.draw(rc, context);
if (element.isSelected) {
const margin = 4;
const elementX1 = getElementAbsoluteX1(element);
const elementX2 = getElementAbsoluteX2(element);
const elementY1 = getElementAbsoluteY1(element);
const elementY2 = getElementAbsoluteY2(element);
const lineDash = context.getLineDash();
context.setLineDash([8, 4]);
context.strokeRect(
elementX1 - margin,
elementY1 - margin,
elementX2 - elementX1 + margin * 2,
elementY2 - elementY1 + margin * 2
);
context.setLineDash(lineDash);
}
});
} }
} }