setting tags works

mcnuttandrew · Mar 11, 2024 · 92ad968 · 92ad968
1 parent 754aa58
commit 92ad968
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/src/components/PalPreview.svelte b/src/components/PalPreview.svelte
@@ -9,7 +9,6 @@
   import { dealWithFocusEvent } from "../lib/utils";
 
   $: focusSet = new Set($focusStore.focusedColors);
-  console.log("todo tag presentation", pal);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -30,7 +29,7 @@
           class={"w-6 h-6 mx-2 rounded-full transition-all"}
           class:w-8={highlightSelected && focusSet.has(idx)}
           class:h-8={highlightSelected && focusSet.has(idx)}
-          class:mb-5={highlightSelected && !focusSet.has(idx)}
+          class:mb-3={highlightSelected && !focusSet.has(idx)}
           style="background-color: {color.color.toDisplay()}"
         ></button>
       {:else}

diff --git a/src/controls/ColorTagger.svelte b/src/controls/ColorTagger.svelte
@@ -9,18 +9,18 @@
   $: focusedColorIdx = $focusStore.focusedColors[0];
   $: currentColor = currentPalette.colors[focusedColorIdx];
 
-  // const updateTags = (updatedTags: string[]) =>
-  //   updateSemantics({ ...semantics, tags: updatedTags });
-  // const updateSize = (size: (typeof sizes)[number]) =>
-  //   updateSemantics({ ...semantics, size });
+  const updateTags = (updatedTags: string[]) =>
+    updateSemantics({ ...currentColor, tags: updatedTags });
+  const updateSize = (size: (typeof sizes)[number]) =>
+    updateSemantics({ ...currentColor, size });
 
-  // const updateMarkType = (markType: (typeof markTypes)[number]) =>
-  //   updateSemantics({ ...semantics, markType });
-  // function updateSemantics(updatedSemantics: typeof semantics) {
-  //   const newSemantics = [...currentPalette.colorSemantics];
-  //   newSemantics[focusedColorIdx] = updatedSemantics;
-  //   colorStore.updateColorSemantics(newSemantics);
-  // }
+  const updateMarkType = (markType: (typeof markTypes)[number]) =>
+    updateSemantics({ ...currentColor, markType });
+  function updateSemantics(updatedColor: typeof currentColor) {
+    const updatedColors = [...currentPalette.colors];
+    updatedColors[focusedColorIdx] = updatedColor;
+    colorStore.setCurrentPalColors(updatedColors);
+  }
   let tagInput = "";
   const sizes = [undefined, "small", "medium", "large"] as const;
   const markTypes = [
@@ -38,22 +38,22 @@
 <div class="italic text-sm">
   These to mark properties like color, brand, and so on
 </div>
-
-<!-- <form
+<form
   on:submit|preventDefault|stopPropagation={() => {
-    updateTags([...semantics.tags, tagInput]);
+    updateTags([...currentColor.tags, tagInput]);
     tagInput = "";
   }}
 >
   <input type="text" placeholder="Add tag" bind:value={tagInput} />
 </form>
+
 <div class="flex">
-  {#each semantics.tags as tag}
+  {#each currentColor.tags as tag}
     <div class={buttonStyle}>
       {tag}
       <button
         on:click={() => {
-          updateTags(semantics.tags.filter((x) => x !== tag));
+          updateTags(currentColor.tags.filter((x) => x !== tag));
         }}
       >
         ✕
@@ -63,7 +63,7 @@
 </div>
 <div class="text-sm">Object for this color</div>
 <select
-  value={semantics.markType}
+  value={currentColor.markType}
   on:change={(e) => {
     // @ts-ignore
     updateMarkType(e.currentTarget.value);
@@ -76,7 +76,7 @@
 
 <div class="text-sm">Size of color</div>
 <select
-  value={semantics.size}
+  value={currentColor.size}
   on:change={(e) => {
     // @ts-ignore
     updateSize(e.currentTarget.value);
@@ -85,4 +85,4 @@
   {#each sizes as option}
     <option value={option}>{option}</option>
   {/each}
-</select> -->
+</select>