fix example outline, ensure tooltip stays where you put it

mcnuttandrew · Jan 22, 2024 · 74ab170 · 74ab170
1 parent 87d103d
commit 74ab170
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/components/Example.svelte b/src/components/Example.svelte
@@ -21,7 +21,7 @@
     bg: string
   ) {
     const numInUse = countNumberOfExamplesInUse(example);
-    let svg = example.replace("SaLmOn", bg);
+    let svg = example.replace("rebekkablue", bg);
     //   .replace("<svg", `<svg overflow="visible" `);
     if (!svg.match(/<svg[^>]*\sheight="([^"]*)"/)) {
       svg = svg.replace("<svg", `<svg height="300px" `);

diff --git a/src/components/Tooltip.svelte b/src/components/Tooltip.svelte
@@ -10,12 +10,16 @@
   import { draggable } from "../lib/utils";
   export let customClass: string = "";
   let tooltipOpen: boolean = initiallyOpen;
+
   const query = "main *";
   function onClick() {
     tooltipOpen = false;
     onClose();
     document.querySelectorAll(query).forEach((x) => {
       x.removeEventListener("click", onClick);
+      // remove select-none class
+      const newClass = x.getAttribute("class").replace("select-none", "");
+      x.setAttribute("class", newClass);
     });
   }
   function toggle() {
@@ -35,6 +39,8 @@
 
     document.querySelectorAll(query).forEach((x) => {
       x.addEventListener("click", onClick);
+      const newClass = x.getAttribute("class") + " select-none";
+      x.setAttribute("class", newClass);
     });
   }
   $: topString = boundingBox
@@ -49,9 +55,10 @@
     }
   }
   $: {
-    if (allowDrag && $configStore.tooltipXY) {
-      topString = $configStore.tooltipXY[1];
-      leftString = $configStore.tooltipXY[0];
+    if (tooltipOpen && allowDrag && $configStore.tooltipXY?.length) {
+      const [x, y] = $configStore.tooltipXY;
+      topString = y;
+      leftString = x;
     }
   }
 </script>

diff --git a/src/lib/charts.ts b/src/lib/charts.ts
@@ -35,7 +35,7 @@ export function buildTheme(pal: Palette): any {
   const basicColor = pal.background.luminance() > 0.5 ? "#000000" : "#ffffff";
   // const secondLevelElementColor = "#605E5C";
   // const backgroundColor = pal.background.toHex();
-  const backgroundColor = "SaLmOn";
+  const backgroundColor = "rebekkablue";
   // const backgroundSecondaryColor = "#C8C6C4";
 
   return {