Add more sliders, export svg btn to mandala page.

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";
 

lib/export-svg.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 function getSvgMarkup(el: SVGSVGElement): string {
   return [
     `<?xml version="1.0" encoding="utf-8"?>`,
@@ -30,3 +32,10 @@ export function exportSvg(
   anchor.click();
   document.body.removeChild(anchor);
 }
+
+export const ExportSvgButton: React.FC<{
+  svgRef: React.RefObject<SVGSVGElement>;
+  filename: string;
+}> = ({ svgRef, filename }) => (
+  <button onClick={() => exportSvg(filename, svgRef)}>Export SVG</button>
+);

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";
-
+import { DEFAULT_BG_COLOR } from "../colors";
-const DEFAULT_BG_COLOR = "#858585";
 
 /** 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<{}> = () => {
           <u>R</u>andomize!
         </button>{" "}
         <button onClick={() => window.location.reload()}>Reset</button>{" "}
-        <button onClick={handleSvgExport}>Export SVG</button>
+        <ExportSvgButton
+          filename={getDownloadFilename(randomSeed)}
+          svgRef={svgRef}
+        />
       </p>
       <CreatureContext.Provider value={ctx}>
         <HoverDebugHelper>

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<SVGSVGElement>(null);
+  const [bgColor, setBgColor] = useState(DEFAULT_BG_COLOR);
   const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
+  const [radius, setRadius] = useState(400);
+  const [numSymbols, setNumSymbols] = useState(6);
 
   return (
     <>
       <h1>Mandala!</h1>
-      <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
+      <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx}>
+        <ColorWidget
+          label="Background"
+          id="bgColor"
+          value={bgColor}
+          onChange={setBgColor}
+        />{" "}
+      </SymbolContextWidget>
+      <p>
+        <NumericSlider
+          id="radius"
+          label="Radius"
+          value={radius}
+          onChange={setRadius}
+          min={0}
+          max={1000}
+          step={1}
+        />
+        <NumericSlider
+          id="symbols"
+          label="Numer of symbols"
+          value={numSymbols}
+          onChange={setNumSymbols}
+          min={1}
+          max={30}
+          step={1}
+        />
+      </p>
+      <p>
+        <ExportSvgButton filename="mandala.svg" svgRef={svgRef} />
+      </p>
       <HoverDebugHelper>
-        <AutoSizingSvg padding={20}>
+        <AutoSizingSvg padding={20} ref={svgRef} bgColor={bgColor}>
           <SvgTransforms transforms={[svgScale(0.5)]}>
             <MandalaCircle
               data={EYE}
-              radius={400}
+              radius={radius}
-              numSymbols={6}
+              numSymbols={numSymbols}
               {...symbolCtx}
             />
           </SvgTransforms>