From 68f5339e5fc7c4432dba7a1f4612aca5082ffdbc Mon Sep 17 00:00:00 2001
From: Atul Varma
Date: Wed, 17 Feb 2021 08:46:30 -0500
Subject: [PATCH] Add 'Export SVG' button.
---
lib/pages/creature-page.tsx | 63 +++++++++++++++++++++++++++++--------
1 file changed, 50 insertions(+), 13 deletions(-)
diff --git a/lib/pages/creature-page.tsx b/lib/pages/creature-page.tsx
index 65eb6b1..5867093 100644
--- a/lib/pages/creature-page.tsx
+++ b/lib/pages/creature-page.tsx
@@ -237,15 +237,38 @@ function randomlyReplaceParts(rng: Random, creature: JSX.Element): JSX.Element {
});
}
+function getSvgMarkup(el: SVGSVGElement): string {
+ return [
+ ``,
+ "",
+ '',
+ el.outerHTML,
+ ].join("\n");
+}
+
+function exportSvg(filename: string, svgEl: SVGSVGElement) {
+ const dataURL = `data:image/svg+xml;utf8,${encodeURIComponent(
+ getSvgMarkup(svgEl)
+ )}`;
+ const anchor = document.createElement("a");
+ anchor.href = dataURL;
+ anchor.download = filename;
+ document.body.append(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+}
+
const AutoSizingSvg: React.FC<{
padding: number;
children: JSX.Element | JSX.Element[];
-}> = (props) => {
+ downloadFilename?: string;
+}> = ({ downloadFilename, ...props }) => {
const ref = useRef(null);
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [width, setWidth] = useState(1);
const [height, setHeight] = useState(1);
+ const svgEl = ref.current;
useEffect(() => {
if (ref.current) {
@@ -258,14 +281,25 @@ const AutoSizingSvg: React.FC<{
});
return (
-
+ <>
+
+ {downloadFilename && svgEl && (
+
+
+
+ )}
+ >
);
};
@@ -282,6 +316,11 @@ export const CreaturePage: React.FC<{}> = () => {
randomSeed === null
? EYE_CREATURE
: randomlyReplaceParts(new Random(randomSeed), EYE_CREATURE);
+ let downloadBasename = "mystic-symbolic-creature";
+
+ if (randomSeed !== null) {
+ downloadBasename += `-${randomSeed}`;
+ }
return (
<>
@@ -292,10 +331,8 @@ export const CreaturePage: React.FC<{}> = () => {
-
-
- {creature}
-
+
+ {creature}
>