Merge branch 'main' of https://github.com/mcnuttandrew/color-buddy

apps/color-buddy/src/App.svelte

@@ -15,6 +15,50 @@
       {},
       $configStore.userName
     );
+
+    // check if there's a palette specified in the url
+    const url = new URL(window.location.href);
+    // const colors = url.searchParams.get("colors");
+    // const background = url.searchParams.get("background") || "#ffffff";
+    // const palName = url.searchParams.get("palName");
+    // const space = url.searchParams.get("space");
+    const pal = deserializePaletteForUrl(window.location.href);
+    if (pal) {
+      colorStore.createNewPal(pal);
+      url.searchParams.delete("colors");
+      url.searchParams.delete("bg");
+      url.searchParams.delete("name");
+      url.searchParams.delete("space");
+      window.history.replaceState({}, "", url.toString());
+    }
+    // // } else
+    // if (colors) {
+    //   console.log(colors, background, palName, space);
+    //   let parsedColors = [];
+    //   try {
+    //     parsedColors = JSON.parse(colors || "[]");
+    //   } catch (e) {
+    //     console.error(e);
+    //   }
+    //   const newPal = makePalFromString(parsedColors, background);
+    //   if (palName) {
+    //     newPal.name = palName;
+    //   }
+    //   if (space) {
+    //     newPal.colorSpace = space as any;
+    //   }
+    //   if (parsedColors.length > 0) {
+    //     console.log("here", newPal);
+    //     colorStore.createNewPal(newPal);
+    //   }
+
+    //   // remove the palette from the url
+    //   url.searchParams.delete("colors");
+    //   url.searchParams.delete("background");
+    //   url.searchParams.delete("palName");
+    //   url.searchParams.delete("space");
+    //   window.history.replaceState({}, "", url.toString());
+    // }
   });
 
   // make sure no focused colors are out of bounds
@@ -43,11 +87,13 @@
   import TourProvider from "./content-modules/TourProvider.svelte";
   import Config from "./controls/Config.svelte";
   import Title from "./controls/Title.svelte";
+  import SharePal from "./components/SharePal.svelte";
 
   import { lint } from "./lib/api-calls";
   import { debounce } from "vega";
 
   import { buttonStyle } from "./lib/styles";
+  import { deserializePaletteForUrl } from "./lib/utils";
 
   $: route = $configStore.route;
   $: evalRoute = $configStore.evalDisplayMode;
@@ -83,6 +129,9 @@
   $: scatterSize = Math.max(Math.min(columnWidth - zWidth - padding, 420), 300);
 
   const currentPalTabs = ["examples", "compare", "eval"];
+  $: numPassing = $lintStore.currentChecks.filter(
+    (x) => x.kind === "success" && !x.passes
+  ).length;
 </script>
 
 <header class="flex w-full bg-stone-800 justify-between min-h-12">
@@ -111,6 +160,7 @@
             Redo
           </button>
         </div>
+        <SharePal />
       </div>
     </div>
   </div>
@@ -179,7 +229,7 @@
         }}
       >
         <div slot="menu" let:tab>
-          {#if tab === "eval"}
+          {#if tab === "eval" && numPassing > 0}
             <svg width={`${18}px`} height={`${18}px`} class="ml-1">
               <circle
                 r={9}
@@ -195,11 +245,8 @@
                 fill="white"
                 text-anchor="middle"
                 font-weight="normal"
-                alignment-baseline="middle"
               >
-                {$lintStore.currentChecks.filter(
-                  (x) => x.kind === "success" && !x.passes
-                ).length}
+                {numPassing}
               </text>
             </svg>
           {/if}

apps/color-buddy/src/components/SharePal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import ExportIcon from "virtual:icons/fa6-solid/file-export";
+  import Tooltip from "./Tooltip.svelte";
+  import { buttonStyle } from "../lib/styles";
+  import { serializePaletteForUrl } from "../lib/utils";
+
+  import colorStore from "../stores/color-store";
+
+  $: palette = $colorStore.palettes[$colorStore.currentPal];
+
+  let copyState = "idle" as "idle" | "copied";
+</script>
+
+<div class="mt-0.5 ml-2">
+  <Tooltip>
+    <div slot="content" let:open class="max-w-md overflow-hidden">
+      <div class="font-bold">Share via url</div>
+      <div class="font-mono text-sm p-1 border">
+        {open && serializePaletteForUrl(palette)}
+      </div>
+      <div class="flex items-center">
+        <button
+          class={buttonStyle}
+          on:click={() => {
+            navigator.clipboard.writeText(serializePaletteForUrl(palette));
+            copyState = "copied";
+            setTimeout(() => {
+              copyState = "idle";
+            }, 2000);
+          }}
+        >
+          Copy
+        </button>
+        {#if copyState === "copied"}
+          <div class=" ml-4">Copied!</div>
+        {/if}
+      </div>
+    </div>
+
+    <button slot="target" let:toggle on:click={toggle} class={buttonStyle}>
+      <ExportIcon class="text-xl" />
+    </button>
+  </Tooltip>
+</div>

apps/color-buddy/src/components/Tooltip.svelte

@@ -129,7 +129,7 @@
               }}
             ></div>
           {/if}
-          <slot name="content" {onClick} />
+          <slot name="content" {onClick} open={tooltipOpen} />
         </span>
       </div>
     </div>

apps/color-buddy/src/content-modules/TourProvider.svelte

@@ -68,7 +68,7 @@
       {
         element: "#left-panel",
         popover: {
-          title: "Colors Panel",
+          title: "Palette Pane",
           onCloseClick: closeClick,
           description:
             "Here are the colors in your palette! You can click on a color to select it and edit it. Each color also shows any issues we've found with it. You can learn more by clicking on the issue icon",

apps/color-buddy/src/controls/Config.svelte

@@ -94,7 +94,8 @@
   <div slot="content" class="w-96" let:onClick>
     <div class="font-bold">About</div>
     <div class="text-sm my-2">
-      Color buddy is a tool for building color palettes. It was originally
+      Color buddy is a tool for building color palettes.
+      <!-- It was originally
       written at the
 
       <a
@@ -112,7 +113,7 @@
         target="_blank"
       >
         Scientific Computing and Imaging Institute.
-      </a>
+      </a> -->
       You can learn more about it at the{" "}
       <a
         class="underline text-cyan-800"
@@ -121,19 +122,17 @@
       >
         docs.
       </a>
-      You can also find the source code on{" "}
-      <a
-        class="underline text-cyan-800"
-        href="      https://github.com/mcnuttandrew/color-buddy"
-        target="_blank"
-      >
-        GitHub.
-      </a>
-      If you have any feedback or questions, please feel free to reach out via the
-      github issues page or via email. A small amount of non-identifiable usage data
-      is collected to help improve the application.
+
+      Feedback (via github issues or email) is welcome.
+    </div>
+    <div class="font-bold">What is saved and where?</div>
+    <div class="text-sm my-2">
+      Palettes are saved in your browser's local storage. They are not shared!
+      They are not available on other browsers or devices. A small amount of
+      non-identifiable usage data is collected to help improve the application.
     </div>
 
+    <div class="font-bold">Tools</div>
     <div class="flex">
       <button
         class={buttonStyle}

apps/color-buddy/src/controls/InterpolatePoints.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { Color } from "color-buddy-palette";
   import type { Palette } from "color-buddy-palette";
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
   import { buttonStyle } from "../lib/styles";
-  import Tooltip from "../components/Tooltip.svelte";
   import PalPreview from "../components/PalPreview.svelte";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: focusedColors = $focusStore.focusedColors;
   $: focusSet = new Set(focusedColors);
   $: colors = currentPal.colors;
   let colorSpace = "lab";
+  onMount(() => {
+    if (currentPal) {
+      colorSpace = currentPal.colorSpace;
+    }
+  });
   let numPoints = 1;
   $: tempPal = (numPoints &&
     colorSpace &&

apps/color-buddy/src/example/Examples.svelte

@@ -95,7 +95,7 @@
   </div>
   <div class="flex ml-2">
     {#if $configStore.exampleRoute !== "swatches"}
-      <div class="mr-1">Thumbnail</div>
+      <div class="mr-1">Thumbnails</div>
       <Tooltip positionAlongRightEdge={true}>
         <div class="flex flex-col" slot="content">
           <button
@@ -172,7 +172,7 @@
               class={buttonStyle}
               on:click={toggle}
             >
-              Reset Modifications
+              Restore Defaults
             </button>
           </Tooltip>
         </div>

apps/color-buddy/src/example/NewExampleModal.svelte

@@ -36,12 +36,16 @@
 
   $: {
     if (typeof externalModalState === "number") {
-      const example = $exampleStore.examples[externalModalState] as any;
-      if (example.svg) {
+      let example = $exampleStore.examples[externalModalState] as any;
+      if (!example) {
+        example = $exampleStore.examples[0];
+      }
+      console.log(example);
+      if (example && example.svg) {
         value = example.svg;
         modalState = "input-svg";
       }
-      if (example.vega) {
+      if (example && example.vega) {
         value = example.vega;
         modalState = "input-vega";
       }
@@ -270,7 +274,15 @@
         <button
           class={buttonStyle}
           on:click={() => {
-            const example = { vega: value, name: "Custom Example", size: 300 };
+            let example = { vega: value, name: "Custom Example", size: 300 };
+            if (typeof externalModalState === "number") {
+              example = {
+                ...example,
+                ...$exampleStore.examples[externalModalState],
+                vega: value,
+              };
+            }
+            console.log(example);
             if (typeof externalModalState === "number") {
               exampleStore.updateExample(example, externalModalState);
             } else {

apps/color-buddy/src/example/PreviewSelector.svelte

@@ -5,8 +5,7 @@
   import configStore from "../stores/config-store";
   import Tooltip from "../components/Tooltip.svelte";
   export let exampleName: string;
-  $: SVGs = $exampleStore.examples.filter((x) => (x as any).svg);
-  $: vis = $exampleStore.examples.filter((x) => (x as any).vega);
+  $: examples = $exampleStore.examples as any[];
 </script>
 
 <Tooltip targetBody={false} bg="bg-white" top={0} positionAlongRightEdge={true}>
@@ -21,24 +20,27 @@
       Discs
     </button>
     <div class="w-full border border-stone-300 my-2" />
-    {#each SVGs as example, idx}
-      <button
-        class={simpleTooltipRowStyle}
-        on:click={() => configStore.setManageBrowsePreviewIdx(idx)}
-      >
-        {example.name}
-      </button>
+    {#each examples as example, idx}
+      {#if example.svg}
+        <button
+          class={simpleTooltipRowStyle}
+          on:click={() => configStore.setManageBrowsePreviewIdx(idx)}
+        >
+          {example.name}
+        </button>
+      {/if}
     {/each}
     <div class="w-full border border-stone-300 my-2" />
-    {#each vis as example, idx}
-      <button
-        class={simpleTooltipRowStyle}
-        on:click={() => configStore.setManageBrowsePreviewIdx(idx)}
-      >
-        {example.name}
-      </button>
+    {#each examples as example, idx}
+      {#if example.vega}
+        <button
+          class={simpleTooltipRowStyle}
+          on:click={() => configStore.setManageBrowsePreviewIdx(idx)}
+        >
+          {example.name}
+        </button>
+      {/if}
     {/each}
-    <div class="w-full border border-stone-300 my-2" />
   </div>
   <button
     slot="target"

apps/color-buddy/src/lib/utils.ts

@@ -4,6 +4,7 @@ import {
   makePalFromString,
 } from "color-buddy-palette";
 import type { Palette, StringPalette } from "color-buddy-palette";
+import queryString from "query-string";
 
 import { Formatter, FracturedJsonOptions, EolStyle } from "fracturedjsonjs";
 import fits from "../assets/outfits.json";
@@ -576,3 +577,36 @@ export function computeStroke(
   }
   return "none";
 }
+
+export function serializePaletteForUrl(palette: Palette): string {
+  const colors = palette.colors.map((color) => color.toString());
+  const bg = palette.background.toString();
+  const name = palette.name;
+  const space = palette.colorSpace;
+  const params = { colors, bg, name, space };
+  console.log(params);
+  const str = queryString.stringify(params);
+  const prefix = window.location.origin + window.location.pathname;
+  return `${prefix}?&${str}`;
+}
+
+export function deserializePaletteForUrl(url: string): Palette | undefined {
+  const parsed = queryString.parse(url);
+  console.log(parsed);
+  const colorSpace = parsed.space as ColorSpace;
+  const colors = parsed.colors as string[];
+  const bg = parsed.bg as string;
+  const name = parsed.name as string;
+  console.log(name, bg, colors, colorSpace);
+  if (!colorSpace || !colors || !bg || !name) {
+    return undefined;
+  }
+  try {
+    const newPal = makePalFromString(colors, bg);
+    newPal.name = name;
+    return convertPalToSpace(newPal, colorSpace);
+  } catch (e) {
+    console.log(e);
+    return undefined;
+  }
+}