Add SVG symbol widget picker to mandala page.

index.html

@@ -6,6 +6,10 @@ html, body {
   font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif;
 }
 
+select {
+  padding: 8px;
+}
+
 .checkerboard-bg {
   /* https://codepen.io/pascalvgaal/pen/jPXPNP/ */
   background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');

lib/pages/mandala-page.tsx

@@ -13,13 +13,14 @@ import {
   SvgSymbolContext,
   SvgSymbolData,
 } from "../svg-symbol";
+import { SvgSymbolWidget } from "../svg-symbol-widget";
 import {
   svgRotate,
   svgScale,
   SvgTransforms,
   svgTranslate,
 } from "../svg-transform";
-import { getSvgSymbol } from "../svg-vocabulary";
+import { getSvgSymbol, SvgVocabulary } from "../svg-vocabulary";
 import { SymbolContextWidget } from "../symbol-context-widget";
 import { range } from "../util";
 
@@ -59,6 +60,7 @@ const MandalaCircle: React.FC<
 export const MandalaPage: React.FC<{}> = () => {
   const svgRef = useRef<SVGSVGElement>(null);
   const [bgColor, setBgColor] = useState(DEFAULT_BG_COLOR);
+  const [symbol, setSymbol] = useState(EYE);
   const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
   const [radius, setRadius] = useState(400);
   const [numSymbols, setNumSymbols] = useState(6);
@@ -75,6 +77,12 @@ export const MandalaPage: React.FC<{}> = () => {
         />{" "}
       </SymbolContextWidget>
       <p>
+        <SvgSymbolWidget
+          label="Symbol"
+          value={symbol}
+          onChange={setSymbol}
+          choices={SvgVocabulary}
+        />
         <NumericSlider
           id="radius"
           label="Radius"
@@ -101,7 +109,7 @@ export const MandalaPage: React.FC<{}> = () => {
         <AutoSizingSvg padding={20} ref={svgRef} bgColor={bgColor}>
           <SvgTransforms transforms={[svgScale(0.5)]}>
             <MandalaCircle
-              data={EYE}
+              data={symbol}
               radius={radius}
               numSymbols={numSymbols}
               {...symbolCtx}

lib/svg-symbol-widget.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import { SvgSymbolData } from "./svg-symbol";
+import { slugify } from "./util";
+
+export type SvgSymbolWidgetProps = {
+  id?: string;
+  label: string;
+  value: SvgSymbolData;
+  onChange: (value: SvgSymbolData) => void;
+  choices: SvgSymbolData[];
+};
+
+export const SvgSymbolWidget: React.FC<SvgSymbolWidgetProps> = ({
+  id,
+  label,
+  value,
+  onChange,
+  choices,
+}) => {
+  id = id || slugify(label);
+  const symbolMap = useMemo(
+    () => new Map(choices.map((symbol) => [symbol.name, symbol])),
+    [choices]
+  );
+  const handleChange = (value: string) => {
+    const symbol = symbolMap.get(value);
+    if (!symbol) throw new Error(`Unable to find "${value}"`);
+    onChange(symbol);
+  };
+
+  return (
+    <>
+      <label htmlFor={id}>{label}: </label>
+      <select
+        id={id}
+        onChange={(e) => handleChange(e.target.value)}
+        value={value.name}
+      >
+        {choices.map((choice) => (
+          <option key={choice.name} value={choice.name}>
+            {choice.name}
+          </option>
+        ))}
+      </select>
+    </>
+  );
+};

lib/util.ts

@@ -40,3 +40,19 @@ export function range(count: number): number[] {
 
   return result;
 }
+
+/**
+ * Slugify the given string.
+ *
+ * Taken from: https://gist.github.com/mathewbyrne/1280286
+ */
+export function slugify(text: string) {
+  return text
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, "-") // Replace spaces with -
+    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
+    .replace(/\-\-+/g, "-") // Replace multiple - with single -
+    .replace(/^-+/, "") // Trim - from start of text
+    .replace(/-+$/, ""); // Trim - from end of text
+}