feat: allow custom color selection

components/geojson-map-toolbar.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ChevronDown } from "lucide-vue-next";
 
+import { useColorsStore } from "@/stores/use-colors-store";
 import { useGeojsonStore } from "@/stores/use-geojson-store.ts";
 import type { GeojsonMapSchema } from "@/types/global.d";
 
@@ -25,6 +26,8 @@ function titleCase(s: string) {
 		.replace(/[-_]+(.)/g, (_, c) => " " + c.toUpperCase()); // First char after each -/_
 }
 const isCollapsibleOpen = ref(categories.value!.map(() => false));
+
+const { colors, addColor } = useColorsStore();
 </script>
 
 <template>
@@ -34,6 +37,12 @@ const isCollapsibleOpen = ref(categories.value!.map(() => false));
 				<DropdownMenu v-slot="{ open }" v-model:open="isCollapsibleOpen[idx]">
 					<DropdownMenuTrigger class="flex w-full items-center gap-1 p-2 text-sm">
 						<span>{{ titleCase(group.id) }}</span>
+						<Badge
+							v-if="group.getLeafColumns().filter((c) => c.getIsVisible()).length"
+							variant="outline"
+							>{{ group.getLeafColumns().filter((c) => c.getIsVisible()).length }}</Badge
+						>
+
 						<ChevronDown class="size-4" :class="open ? 'rotate-180' : ''"></ChevronDown>
 					</DropdownMenuTrigger>
 
@@ -47,10 +56,26 @@ const isCollapsibleOpen = ref(categories.value!.map(() => false));
 								(value) => {
 									column.toggleVisibility(!!value);
 									column.setFilterValue([]);
+									addColor({ id: column.id, colorCode: '#cccccc' });
 								}
 							"
 						>
-							{{ column.columnDef.header }}
+							<span class="flex-1">{{ column.columnDef.header }}</span>
+							<label v-if="column.getIsVisible()" class="grow-0 basis-0 p-0">
+								<input
+									class="size-5"
+									type="color"
+									:value="colors[column.id]?.colorCode || '#cccccc'"
+									@click.capture.stop
+									@input="
+										(event) => {
+											//@ts-expect-error target.value not recognized
+											addColor({ id: column.id, colorCode: event.target!.value });
+										}
+									"
+								/>
+								<span class="sr-only">Select color</span>
+							</label>
 						</DropdownMenuCheckboxItem>
 					</DropdownMenuContent>
 				</DropdownMenu>

composables/use-petal-marker.ts

@@ -9,17 +9,6 @@ const GeojsonStore = useGeojsonStore();
 const { tables } = storeToRefs(GeojsonStore);
 const url = "https://raw.githubusercontent.com/wibarab/wibarab-data/main/wibarab_varieties.geojson";
 
-const sampleColors = [
-	"#555b6e",
-	"#6f868e",
-	"#89b0ae",
-	"#a4cac5",
-	"#bee3db",
-	"#CF9997",
-	"#C14444",
-	"#ffd6ba",
-];
-
 function getPetalSVG(entries: Array<Column<never>>) {
 	const div = document.createElement("div");
 	div.className = "hover:scale-150 transition origin-center relative size-6";
@@ -33,7 +22,7 @@ function getPetalSVG(entries: Array<Column<never>>) {
 		const petal = document.createElementNS("http://www.w3.org/2000/svg", "use");
 		petal.setAttribute("href", "#petal");
 
-		petal.setAttribute("fill", sampleColors[i % sampleColors.length] ?? "#cccccc");
+		petal.style.fill = `var(--${value.id}, #cccccc)`;
 		petal.style.transformOrigin = "bottom";
 		petal.style.transform = `rotate(${String((i * 360) / NUM_PETALS)}deg)`;
 		petal.classList.add("size-3", "absolute", "ml-1.5");

stores/use-colors-store.ts

@@ -0,0 +1,38 @@
+import { debounce } from "@acdh-oeaw/lib";
+
+interface Color {
+	id: string;
+	colorCode: string;
+}
+
+export const useColorsStore = defineStore("colors", () => {
+	const colors = ref<Record<Color["id"], Color>>({});
+	function updateColorValue(color: Color) {
+		colors.value[color.id] = color;
+	}
+
+	function updateCssVariable(color: Color) {
+		document.documentElement.style.setProperty(`--${color.id}`, color.colorCode);
+	}
+
+	const colorUpdateDebounce = debounce((color: Color) => {
+		updateColorValue(color);
+	}, 500);
+
+	function addColor(color: Color) {
+		updateCssVariable(color);
+		colorUpdateDebounce(color);
+	}
+
+	function removeColor(id: Color["id"]) {
+		document.documentElement.style.removeProperty(`--${id}`);
+		// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+		delete colors.value[id];
+	}
+
+	return {
+		addColor,
+		removeColor,
+		colors,
+	};
+});