small bugs (examples duplicated) and some ui tweaks

mcnuttandrew · Feb 21, 2024 · 10290cc · 10290cc
1 parent a8bcb6b
commit 10290cc
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 50 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -39,7 +39,7 @@
   $: updateSearchDebounced = debounce(10, (pal: any) => {
     // keep the noise down on the console
     if (!selectedLint && pal) {
-      lint(pal).then((res) => {
+      lint(pal, true).then((res) => {
         lintStore.postCurrentChecks(res);
       });
     }

diff --git a/src/content-modules/ComparePal.svelte b/src/content-modules/ComparePal.svelte
@@ -33,7 +33,7 @@
   let colorSpace = ComparisonPal?.colorSpace || "lab";
 </script>
 
-<div style={`max-width: ${scatterSize + 50}px`}>
+<div style={`max-width: ${scatterSize + 150}px`}>
   <div class="flex flex-col">
     {#if ComparisonPal !== undefined}
       <div class="font-bold">
@@ -112,7 +112,10 @@
     <div class="flex flex-col pl-2">
       <PalPreview
         highlightSelected={false}
-        pal={ComparisonPal}
+        pal={{
+          ...ComparisonPal,
+          background: Color.colorFromHex(bg, colorSpace),
+        }}
         allowModification={false}
       />
 
@@ -124,24 +127,31 @@
     /> -->
     </div>
   {/if}
-  <Nav tabs={["example"]} selectTab={() => {}} isTabSelected={() => true} />
+  <Nav
+    tabs={["example"]}
+    selectTab={() => {}}
+    isTabSelected={() => true}
+    className="mt-4"
+  />
   {#if compareIdx !== undefined}
-    <div class="example-holder">
+    <div class="example-holder flex justify-center-center flex-col">
       <ExampleAlaCart
         paletteIdx={compareIdx}
         exampleIdx={$configStore.compareSelectedExample}
         setExampleIdx={(idx) => configStore.setCompareSelectedExample(idx)}
+        allowModification={false}
+        bgColor={bg}
       />
     </div>
   {/if}
 </div>
 
 <style>
   .empty-pal-holder {
-    height: 450px;
-    width: 450px;
+    height: 600px;
+    width: 600px;
   }
   .example-holder {
-    width: 450px;
+    width: 600px;
   }
 </style>
diff --git a/src/content-modules/MainColumn.svelte b/src/content-modules/MainColumn.svelte
@@ -99,6 +99,7 @@
         exampleIdx={$configStore.mainColumnSelectedExample}
         setExampleIdx={(idx) => configStore.setMainColumnSelectedExample(idx)}
         allowModification={true}
+        bgColor={currentPal.background.toHex()}
       />
     {/if}
   </div>

diff --git a/src/example/ExampleAlaCarte.svelte b/src/example/ExampleAlaCarte.svelte
@@ -9,6 +9,7 @@
   export let setExampleIdx: (idx: number) => void;
   export let paletteIdx: number;
   export let allowModification: boolean = false;
+  export let bgColor: string = "white";
   $: example = {
     ...$exampleStore.examples[exampleIdx],
     size: 400,
@@ -42,7 +43,10 @@
     </button>
   </Tooltip>
 </div>
-<div class="h-full flex justify-center items-center p-4">
+<div
+  class="h-full flex justify-center items-center"
+  style={`background: ${bgColor}`}
+>
   {#if exampleIdx === -1}
     <Swatches
       {paletteIdx}

diff --git a/src/example/Swatches.svelte b/src/example/Swatches.svelte
@@ -24,8 +24,9 @@
     }
   }
   $: bgColor = currentPal?.background?.toHex() || "white";
+
   $: focused = $focusStore.focusedColors;
-  $: focusSet = new Set(focused);
+  $: focusSet = allowInteraction ? new Set(focused) : new Set();
 
   let common = "cursor-pointer mr-2 mb-2 transition-all";
   let classes = [
@@ -83,6 +84,7 @@
           class:ml-5={focusSet.has(i)}
           class:mr-5={!focusSet.has(i)}
           on:click|preventDefault|stopPropagation={(e) =>
+            allowInteraction &&
             focusStore.setColors(
               dealWithFocusEvent(e, i, $focusStore.focusedColors)
             )}
@@ -102,13 +104,14 @@
                     }`}
                     style={`${styleMap(colors[colorIdx])}`}
                     on:click|preventDefault|stopPropagation={(e) => {
-                      focusStore.setColors(
-                        dealWithFocusEvent(
-                          e,
-                          colorIdx,
-                          $focusStore.focusedColors
-                        )
-                      );
+                      allowInteraction &&
+                        focusStore.setColors(
+                          dealWithFocusEvent(
+                            e,
+                            colorIdx,
+                            $focusStore.focusedColors
+                          )
+                        );
                     }}
                   ></button>
                 {/each}
@@ -125,9 +128,10 @@
             }deg)`}
             class="mr-2 w-16"
             on:click|preventDefault|stopPropagation={(e) => {
-              focusStore.setColors(
-                dealWithFocusEvent(e, i, $focusStore.focusedColors)
-              );
+              allowInteraction &&
+                focusStore.setColors(
+                  dealWithFocusEvent(e, i, $focusStore.focusedColors)
+                );
             }}
           >
             {color.toHex()}

diff --git a/src/lib/lints/max-colors.ts b/src/lib/lints/max-colors.ts
@@ -7,7 +7,7 @@ const lint: CustomLint = {
   program: JSONToPrettyString({
     // @ts-ignore
     $schema: `${location.href}lint-schema.json`,
-    "<": { left: { count: "colors" }, right: 10 },
+    "<": { left: { count: "colors" }, right: 11 },
   }),
   taskTypes: ["sequential", "diverging", "categorical"] as const,
   level: "warning",

diff --git a/src/scatterplot/ColorScatterPlot.svelte b/src/scatterplot/ColorScatterPlot.svelte
@@ -34,7 +34,7 @@
 
   $: focusSet = new Set(focusedColors);
 
-  let margin = { top: 15, right: 15, bottom: 15, left: 15 };
+  let margin = { top: 20, right: 15, bottom: 15, left: 15 };
   $: plotWidth = width - margin.left - margin.right;
   $: plotHeight = height - margin.top - margin.bottom;
   $: extents = {
@@ -468,6 +468,17 @@
             on:touchend|preventDefault={puttingEnd}
           />
         {/if}
+
+        <!-- hover bull shit -->
+        {#if typeof hoveredPoint !== "boolean"}
+          <g transform={`translate(0, ${height - margin.bottom})`}>
+            <circle fill={hoveredPoint.toDisplay()} cx={6} cy={-7.5} r="6" />
+            <text fill={textColor} x={15}>{hoveredPoint.toHex()}</text>
+            <text fill={textColor} y="15">
+              {hoveredPoint.toPrettyString()}
+            </text>
+          </g>
+        {/if}
       </svg>
     </div>
   </div>
@@ -577,24 +588,9 @@
     </div>
   </div>
 </div>
-<div class="flex items-center text-sm w-full justify-center">
-  {#if typeof hoveredPoint !== "boolean"}
-    Hovered point:
-    {hoveredPoint.toPrettyString()} -
-    {hoveredPoint.toHex()}
-    <div
-      class="h-4 w-4 rounded-full"
-      style={`background: ${hoveredPoint.toDisplay()}`}
-    ></div>
-  {:else}
-    &nbsp;
-  {/if}
+<div class="flex justify-end text-sm">
+  {#if $configStore.showGamutMarkers}✖ indicates value that is out of gamut{:else}&nbsp;{/if}
 </div>
-{#if $configStore.showGamutMarkers}
-  <div class="flex items-center text-sm w-full justify-center">
-    X indicates value that is out of gamut
-  </div>
-{/if}
 
 <style>
   circle {

diff --git a/src/stores/example-store.ts b/src/stores/example-store.ts
@@ -85,17 +85,11 @@ async function buildAllExamples() {
   for (const demo of DEMOS) {
     try {
       const text = await fetch(demo.filename).then((x) => x.text());
-      const example = {
-        hidden: false,
-        size: 250,
-        // name: demo.filename.split("/").at(-1)?.split(".")[0],
-        name: demo.title,
-      } as any;
+      const example = { hidden: false, size: 250, name: demo.title } as any;
       if (demo.type === "vega") {
         example.vega = text;
       } else {
         const colors = detectColorsInSvgString(text);
-        store.addExample(example);
         example.svg = modifySVGForExampleStore(text, colors);
       }
       builtExamples.push(example);
@@ -120,10 +114,8 @@ function createStore() {
       return acc;
     }, {} as any);
     if (x) {
-      const examples = x.examples.filter((x: any) => preBuiltMap[x.name]);
-      const newStore = {
-        examples: [...prebuiltExamples, ...examples],
-      };
+      const examples = x.examples.filter((x: any) => !preBuiltMap[x.name]);
+      const newStore = { examples: [...prebuiltExamples, ...examples] };
       set(newStore as StoreData);
     } else {
       set({ ...InitialStore, examples: prebuiltExamples });