add some more interesting examples

README.md

@@ -46,15 +46,15 @@ To raise the sliders, you need to click on one of the examples that are displaye
 - [ ] Once this is done, it make sense to show a tooltip that displays a pair of values as you hover over the graph. (maybe also the hex?)
 - [ ] There should be an add color button that adds the current state of the sliders.
 - [ ] A single selection sets the sliders. Multi-select does not
-- [ ] Might then make sense to move the graph colorspace, range and background color controls into this area.
-- [ ] As a short term improvement, raise the sliders when you click on a color in the graphs.
+- [x] Might then make sense to move the graph colorspace, range and background color controls into this area.
+- [x] As a short term improvement, raise the sliders when you click on a color in the graphs.
 
 ## TODOS
 
 - [ ] Make keyboard short cut (option+up/down) for the z-direction
 - [ ] Polar stuff
 - [ ] Chore: Extract some common types into a top level location (like types.ts type thing)
-- [ ] Examples: A (default) example showing annotated math stuff
+- [x] Examples: A (default) example showing annotated math stuff
 - [ ] Examples: SVG Upload
 - [ ] Examples: Vega/Vega-Lite Specification
 - [ ] Examples: Examples held as assets somewhere that are downloaded rather than components (for consistency)

src/content-modules/Examples.svelte

@@ -6,8 +6,6 @@
   import colorStore from "../stores/color-store";
   import { charts, idxToKey } from "../lib/charts";
   import Vega from "../components/Vega.svelte";
-  import TinyWebpage from "../content-modules/TinyWebpage.svelte";
-  import TextBlock from "../content-modules/TextBlock.svelte";
   import Modal from "../components/Modal.svelte";
   import { buttonStyle } from "../lib/styles";
   import { xml } from "@codemirror/lang-xml";
@@ -24,7 +22,9 @@
 
   function detectColorsInSvgString(svgString: string) {
     const colors = new Set<string>();
-    const regex = /#[0-9a-f]{6}/gi;
+    //  match hex or rgb(255, 255, 255)
+    const regex = /#(?:[0-9a-fA-F]{3}){1,2}|rgb\((?:\d{1,3},\s*){2}\d{1,3}\)/g;
+
     let match;
     while ((match = regex.exec(svgString))) {
       colors.add(match[0]);
@@ -60,6 +60,13 @@
     };
     colorStore.createNewPal(newPal);
   }
+  const DEMOS = [
+    { title: "Mondrian", filename: "./mondrian.svg" },
+    { title: "Annotated R2", filename: "./r2.svg" },
+    { title: "Annotated Fourier", filename: "./fourier.svg" },
+    { title: "VIS Logo", filename: "./vis-logo.svg" },
+    { title: "Holy Grail Layout", filename: "./HolyGrail.svg" },
+  ];
 </script>
 
 <div class="flex items-center bg-slate-200 px-4">
@@ -128,10 +135,6 @@
   {#if $exampleStore.sections["swatches"]}
     <Swatches />
   {/if}
-  {#if $exampleStore.sections.pages}
-    <TinyWebpage />
-    <TextBlock />
-  {/if}
   {#each charts as { chart, group }}
     {#if sections[group]}
       <div class="flex flex-col border-2 border-dashed rounded w-min mr-4">
@@ -150,34 +153,40 @@
     <div slot="header">
       <div class="flex justify-between">
         <div>Add an Example</div>
-        {#if modalState === "input-svg"}
-          <button
-            class={buttonStyle}
-            on:click={() => {
-              fetch("./mondrian.svg")
-                .then((response) => response.text())
-                .then((text) => {
-                  value = text;
-                  modalState = "input-svg";
-                })
-                .catch((e) => {
-                  console.error(e);
-                });
-            }}
-          >
-            Demo: Add a Mondrian
-          </button>
-        {/if}
       </div>
     </div>
     <div class="h-96 overflow-auto" style="width: 700px;">
+      <div>
+        Demos:
+        {#if modalState === "input-svg"}
+          {#each DEMOS as demo}
+            <button
+              class={buttonStyle}
+              on:click={() => {
+                fetch(demo.filename)
+                  .then((response) => response.text())
+                  .then((text) => {
+                    value = text;
+                    modalState = "input-svg";
+                  })
+                  .catch((e) => {
+                    console.error(e);
+                  });
+              }}
+            >
+              {demo.title}
+            </button>
+          {/each}
+        {/if}
+      </div>
       {#if modalState === "input-svg"}
         <CodeMirror
           bind:value
           lang={xml()}
           placeholder={"Paste in some SVG text here"}
         />
       {/if}
+
       {#if modalState === "edit-colors"}
         <div>
           <h3>

src/content-modules/Swatches.svelte

@@ -16,14 +16,17 @@
     {
       className: `${common} w-8 h-8 `,
       styleMap: (color: Color): string => `background-color: ${color.toHex()};`,
+      selectionClass: "rotate-12",
     },
     {
       className: `${common} w-6 h-6`,
       styleMap: (color: Color): string => `background-color: ${color.toHex()};`,
+      selectionClass: "rotate-12",
     },
     {
       className: `${common} w-4 h-4 rounded-full`,
       styleMap: (color: Color): string => `border: 2px solid ${color.toHex()};`,
+      selectionClass: "relative top-1 left-1",
     },
   ];
 </script>
@@ -38,7 +41,7 @@
       <span>Hold shift to select multiple</span>
     </span> -->
   </div>
-  {#each classes as { className, styleMap }}
+  {#each classes as { className, styleMap, selectionClass }}
     <div class="flex justify-center flex-wrap">
       {#each colors as color, idx}
         <Tooltip top={"100px"} allowDrag={true}>
@@ -49,7 +52,7 @@
             let:toggle
             let:tooltipOpen
             slot="target"
-            class={className}
+            class={`${className} ${focusSet.has(idx) ? selectionClass : ""}`}
             style={`${styleMap(color)}`}
             on:click={(e) => {
               const isFocused = focusSet.has(idx);
@@ -82,7 +85,6 @@
                 }
               }
             }}
-            class:rotate-45={focusSet.has(idx)}
           ></button>
         </Tooltip>
       {/each}
@@ -91,9 +93,10 @@
   <div class="flex flex-wrap justify-center">
     {#each colors as color, i}
       <div
-        style={`color: ${color.toHex()}`}
+        style={`color: ${color.toHex()}; transform: rotate(${
+          focusSet.has(i) ? 10 : 0
+        }deg)`}
         class="mr-2"
-        class:mt-2={focusSet.has(i)}
       >
         {color.toHex()}
       </div>