diff --git a/README.md b/README.md index 891f7163..90386156 100644 --- a/README.md +++ b/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) diff --git a/public/HolyGrail.svg b/public/HolyGrail.svg new file mode 100644 index 00000000..6e713795 --- /dev/null +++ b/public/HolyGrail.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + HEADER + + + + + FOOTER + + + + + ADAD + + + + + MENUITEM 1ITEM 2ITEM 3ITEM 4ITEM 5 + + + + + CONTENTLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + + + + + + \ No newline at end of file diff --git a/public/fourier.svg b/public/fourier.svg new file mode 100644 index 00000000..090a5c00 --- /dev/null +++ b/public/fourier.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/r2.svg b/public/r2.svg new file mode 100644 index 00000000..6603ca0d --- /dev/null +++ b/public/r2.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/vis-logo.svg b/public/vis-logo.svg new file mode 100644 index 00000000..e4a5a4fe --- /dev/null +++ b/public/vis-logo.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/content-modules/Examples.svelte b/src/content-modules/Examples.svelte index 4172f9fc..221e8e0e 100644 --- a/src/content-modules/Examples.svelte +++ b/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(); - 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" }, + ];
@@ -128,10 +135,6 @@ {#if $exampleStore.sections["swatches"]} {/if} - {#if $exampleStore.sections.pages} - - - {/if} {#each charts as { chart, group }} {#if sections[group]}
@@ -150,27 +153,32 @@
Add an Example
- {#if modalState === "input-svg"} - - {/if}
+
+ Demos: + {#if modalState === "input-svg"} + {#each DEMOS as demo} + + {/each} + {/if} +
{#if modalState === "input-svg"} {/if} + {#if modalState === "edit-colors"}

diff --git a/src/content-modules/Swatches.svelte b/src/content-modules/Swatches.svelte index c66c3e9f..35a760cc 100644 --- a/src/content-modules/Swatches.svelte +++ b/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", }, ]; @@ -38,7 +41,7 @@ Hold shift to select multiple -->

- {#each classes as { className, styleMap }} + {#each classes as { className, styleMap, selectionClass }}
{#each colors as color, idx} @@ -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)} > {/each} @@ -91,9 +93,10 @@
{#each colors as color, i}
{color.toHex()}
diff --git a/src/content-modules/TextBlock.svelte b/src/content-modules/TextBlock.svelte deleted file mode 100644 index 511a62f6..00000000 --- a/src/content-modules/TextBlock.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - -

- {#each wordBreakDown as { word, style }} - {` ${word} `} - {/each} -

diff --git a/src/content-modules/TinyWebpage.svelte b/src/content-modules/TinyWebpage.svelte deleted file mode 100644 index 0b22d8b7..00000000 --- a/src/content-modules/TinyWebpage.svelte +++ /dev/null @@ -1,54 +0,0 @@ - - -
-
Header
-
-

Webpage Preview

-
- -
- -