smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: export with solid color only

Browse source
This commit is contained in:
Arnošt Pleskot 2023-08-07 13:05:55 +02:00
parent 67573ba079
commit 6e7c302974
No known key found for this signature in database
4 changed files with 57 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/ImageExportDialog.tsx
View file

@ -1,4 +1,5 @@
import React, { useEffect, useRef, useState } from "react";
import clsx from "clsx";
import type { ActionManager } from "../actions/manager";
import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
@ -62,6 +63,12 @@ type ImageExportModalProps = {
onExportImage: AppClassProperties["onExportImage"];
};
function isBackgroundImageKey(
key: string,
): key is keyof typeof EXPORT_BACKGROUND_IMAGES {
return key in EXPORT_BACKGROUND_IMAGES;
}
const ImageExportModal = ({
appState,
elements,
@ -78,9 +85,9 @@ const ImageExportModal = ({
const [exportWithBackground, setExportWithBackground] = useState(
appState.exportBackground,
);
const [exportBackgroundImage, setExportBackgroundImage] = useState<string>(
DEFAULT_EXPORT_BACKGROUND_IMAGE,
);
const [exportBackgroundImage, setExportBackgroundImage] = useState<
keyof typeof EXPORT_BACKGROUND_IMAGES
>(DEFAULT_EXPORT_BACKGROUND_IMAGE);
const [exportDarkMode, setExportDarkMode] = useState(
appState.exportWithDarkMode,
@ -105,6 +112,7 @@ const ImageExportModal = ({
}
const maxWidth = previewNode.offsetWidth;
const maxHeight = previewNode.offsetHeight;
if (!maxWidth) {
return;
}
@ -127,13 +135,25 @@ const ImageExportModal = ({
console.error(error);
setRenderError(error);
});
}, [appState, files, exportedElements]);
}, [
appState,
appState.exportBackground,
appState.exportBackgroundImage,
files,
exportedElements,
]);
return (
<div className="ImageExportModal">
<h3>{t("imageExportDialog.header")}</h3>
<div className="ImageExportModal__preview">
<div className="ImageExportModal__preview__canvas" ref={previewRef}>
<div
className={clsx("ImageExportModal__preview__canvas", {
"ImageExportModal__preview__canvas--img-bcg":
appState.exportBackground && appState.exportBackgroundImage,
})}
ref={previewRef}
>
{renderError && <ErrorCanvasPreview />}
</div>
</div>
@ -183,12 +203,14 @@ const ImageExportModal = ({
placeholder={t("imageExportDialog.label.backgroundImage")}
value={exportBackgroundImage}
onChange={(value) => {
setExportBackgroundImage(value);
actionManager.executeAction(
actionChangeExportBackgroundImage,
"ui",
value,
);
if (isBackgroundImageKey(value)) {
setExportBackgroundImage(value);
actionManager.executeAction(
actionChangeExportBackgroundImage,
"ui",
EXPORT_BACKGROUND_IMAGES[value].path,
);
}
}}
/>
<Switch