diff --git a/lib/colors.ts b/lib/colors.ts
index efc408e..63d03b0 100644
--- a/lib/colors.ts
+++ b/lib/colors.ts
@@ -1,5 +1,6 @@
import type { AttachmentPointType } from "./specs";
+export const DEFAULT_BG_COLOR = "#858585";
export const STROKE_REPLACEMENT_COLOR = "#000000";
export const FILL_REPLACEMENT_COLOR = "#ffffff";
diff --git a/lib/export-svg.tsx b/lib/export-svg.tsx
index b21df98..04bab97 100644
--- a/lib/export-svg.tsx
+++ b/lib/export-svg.tsx
@@ -1,3 +1,5 @@
+import React from "react";
+
function getSvgMarkup(el: SVGSVGElement): string {
return [
``,
@@ -30,3 +32,10 @@ export function exportSvg(
anchor.click();
document.body.removeChild(anchor);
}
+
+export const ExportSvgButton: React.FC<{
+ svgRef: React.RefObject;
+ filename: string;
+}> = ({ svgRef, filename }) => (
+
+);
diff --git a/lib/pages/creature-page.tsx b/lib/pages/creature-page.tsx
index 51d4d38..6445d3b 100644
--- a/lib/pages/creature-page.tsx
+++ b/lib/pages/creature-page.tsx
@@ -11,7 +11,7 @@ import { SymbolContextWidget } from "../symbol-context-widget";
import { range } from "../util";
import { AutoSizingSvg } from "../auto-sizing-svg";
-import { exportSvg } from "../export-svg";
+import { ExportSvgButton } from "../export-svg";
import {
CreatureContext,
CreatureContextType,
@@ -22,8 +22,7 @@ import { HoverDebugHelper } from "../hover-debug-helper";
import { svgScale, SvgTransforms } from "../svg-transform";
import { ColorWidget } from "../color-widget";
import { NumericSlider } from "../numeric-slider";
-
-const DEFAULT_BG_COLOR = "#858585";
+import { DEFAULT_BG_COLOR } from "../colors";
/** Symbols that can be the "root" (i.e., main body) of a creature. */
const ROOT_SYMBOLS = SvgVocabulary.filter(
@@ -195,8 +194,6 @@ export const CreaturePage: React.FC<{}> = () => {
rng: new Random(randomSeed),
randomlyInvert,
});
- const handleSvgExport = () =>
- exportSvg(getDownloadFilename(randomSeed), svgRef);
return (
<>
@@ -238,7 +235,10 @@ export const CreaturePage: React.FC<{}> = () => {
Randomize!
{" "}
{" "}
-
+
diff --git a/lib/pages/mandala-page.tsx b/lib/pages/mandala-page.tsx
index 184abb4..f9d8720 100644
--- a/lib/pages/mandala-page.tsx
+++ b/lib/pages/mandala-page.tsx
@@ -1,7 +1,11 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
import { AutoSizingSvg } from "../auto-sizing-svg";
import { getBoundingBoxCenter } from "../bounding-box";
+import { ColorWidget } from "../color-widget";
+import { DEFAULT_BG_COLOR } from "../colors";
+import { ExportSvgButton } from "../export-svg";
import { HoverDebugHelper } from "../hover-debug-helper";
+import { NumericSlider } from "../numeric-slider";
import { reversePoint } from "../point";
import {
createSvgSymbolContext,
@@ -53,19 +57,53 @@ const MandalaCircle: React.FC<
};
export const MandalaPage: React.FC<{}> = () => {
+ const svgRef = useRef(null);
+ const [bgColor, setBgColor] = useState(DEFAULT_BG_COLOR);
const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
+ const [radius, setRadius] = useState(400);
+ const [numSymbols, setNumSymbols] = useState(6);
return (
<>
Mandala!
-
+
+ {" "}
+
+
+
+
+
+
+
+
-
+