add tooltip stuff

[deploy]

src/lib/assets/keymaps/ascii.yml

@@ -292,4 +292,4 @@ actions:
   127:
     id: "DEL"
     title: Delete
-    icon: delete_forever
+    icon: delete_forever

src/lib/assets/keymaps/scancode.yml

@@ -930,4 +930,4 @@ actions:
     description: Not required to be supported by any OS.
   511:
     id: "KSC_FF"
-    description: Not required to be supported by any OS.
+    description: Not required to be supported by any OS.

src/lib/assets/layouts/cc1.yml

@@ -3,34 +3,34 @@ col:
   - gap: 156
     row:
       - row:
-          - { d: 30, e: 31, n: 32, w: 33, s: 34 }
+          - {d: 30, e: 31, n: 32, w: 33, s: 34}
           - col:
-              - { d: 25, e: 26, n: 27, w: 28, s: 29 }
-              - { d: 40, e: 41, n: 42, w: 43, s: 44 }
+              - {d: 25, e: 26, n: 27, w: 28, s: 29}
+              - {d: 40, e: 41, n: 42, w: 43, s: 44}
           - col:
-              - { d: 20, e: 21, n: 22, w: 23, s: 24 }
-              - { d: 35, e: 36, n: 37, w: 38, s: 39 }
-          - { d: 15, e: 16, n: 17, w: 18, s: 19 }
+              - {d: 20, e: 21, n: 22, w: 23, s: 24}
+              - {d: 35, e: 36, n: 37, w: 38, s: 39}
+          - {d: 15, e: 16, n: 17, w: 18, s: 19}
       - row:
-          - { d: 60, w: 61, n: 62, e: 63, s: 64 }
+          - {d: 60, w: 61, n: 62, e: 63, s: 64}
           - col:
-              - { d: 65, w: 66, n: 67, e: 68, s: 69 }
-              - { d: 80, w: 81, n: 82, e: 83, s: 84 }
+              - {d: 65, w: 66, n: 67, e: 68, s: 69}
+              - {d: 80, w: 81, n: 82, e: 83, s: 84}
           - col:
-              - { d: 70, w: 71, n: 72, e: 73, s: 74 }
-              - { d: 85, w: 86, n: 87, e: 88, s: 89 }
-          - { d: 75, w: 76, n: 77, e: 78, s: 79 }
+              - {d: 70, w: 71, n: 72, e: 73, s: 74}
+              - {d: 85, w: 86, n: 87, e: 88, s: 89}
+          - {d: 75, w: 76, n: 77, e: 78, s: 79}
   - gap: 48
     margin-top: -32
     row:
-      - { d: 10, e: 11, n: 12, w: 13, s: 14 }
-      - { d: 55, w: 56, n: 57, e: 58, s: 59 }
+      - {d: 10, e: 11, n: 12, w: 13, s: 14}
+      - {d: 55, w: 56, n: 57, e: 58, s: 59}
   - gap: 160
     row:
-      - { d: 5, e: 6, n: 7, w: 8, s: 9 }
-      - { d: 50, w: 51, n: 52, e: 53, s: 54 }
+      - {d: 5, e: 6, n: 7, w: 8, s: 9}
+      - {d: 50, w: 51, n: 52, e: 53, s: 54}
   - gap: 320
     margin-top: -12
     row:
-      - { d: 0, e: 1, n: 2, w: 3, s: 4 }
-      - { d: 45, w: 46, n: 47, e: 48, s: 49 }
+      - {d: 0, e: 1, n: 2, w: 3, s: 4}
+      - {d: 45, w: 46, n: 47, e: 48, s: 49}

src/lib/chords/bad-chord.ts

@@ -1,5 +0,0 @@
-import type {CharaLayout} from "$lib/serialization/layout"
-
-export function isBadChord(chord: number[], layout: CharaLayout) {
-  const adjacentHits = layout[0].
-}

src/lib/components/InputEdit.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import {layout} from "$lib/serial/connection"
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
+
+  export let id: number = 0
+</script>
+
+<table>
+  {#each $layout as layer, i}
+    {@const action = KEYMAP_CODES[layer[id]]}
+    <tr>
+      <th class="icon">counter_{i + 1}</th>
+      <td>{action?.id}</td>
+    </tr>
+  {/each}
+</table>

src/lib/components/RingInput.svelte

@@ -3,6 +3,7 @@
   import type {CharaLayout} from "$lib/serialization/layout"
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
   import type {KeyInfo} from "$lib/serial/keymap-codes"
+  import {editableLayout} from "$lib/editable-layout"
 
   export let activeLayer = 0
   export let keys: Record<"d" | "s" | "n" | "w" | "e", number>
@@ -19,13 +20,6 @@
     return 25 * quadrant + layerOffsetIndex * layerOffset
   }
 
-  function getKeyDescriptions(keys: KeyInfo[]): string {
-    return keys
-      .filter(it => !!it)
-      .map(({title, id, code}, i) => `${title || id || code} (${layerNames[i]})`)
-      .join("\n")
-  }
-
   function getActions(id: number, layout: CharaLayout): KeyInfo[] {
     return Array.from({length: 3}).map((_, i) => {
       const actionId = layout?.[i][id]
@@ -38,7 +32,7 @@
   {#each [keys.n, keys.e, keys.s, keys.w] as id, quadrant}
     {@const actions = getActions(id, $layout)}
     <button
-      title={getKeyDescriptions(actions)}
+      use:editableLayout={{id, quadrant}}
       class:active={actions.some(it => it && $highlightActions?.includes(it.code))}
     >
       {#each actions as keyInfo, layer}

src/lib/editable-layout.ts

@@ -0,0 +1,31 @@
+import tippy from "tippy.js"
+import InputEdit from "$lib/components/InputEdit.svelte"
+import type {Action} from "svelte/action"
+
+export const editableLayout: Action<HTMLButtonElement, {id: number; quadrant: number}> = (
+  node,
+  {id, quadrant},
+) => {
+  let component: InputEdit | undefined
+  const edit = tippy(node, {
+    interactive: true,
+    appendTo: document.body,
+    placement: (["top", "right", "bottom", "left"] as const)[quadrant],
+    onShow(instance) {
+      component ??= new InputEdit({
+        target: instance.popper.querySelector(".tippy-content")!,
+        props: {id},
+      })
+    },
+    onHidden() {
+      component?.$destroy()
+      component = undefined
+    },
+  })
+
+  return {
+    destroy() {
+      edit.destroy()
+    },
+  }
+}

src/lib/fonts/material-symbols-rounded.scss

@@ -15,8 +15,8 @@
   font-family: "Material Symbols Rounded";
   font-size: 24px;
   font-feature-settings: "liga";
-  font-variation-settings: "FILL" var(--icon-fill, 0), "wght" var(--icon-weigth, 400), "GRAD"
-    var(--icon-grade, 0);
+  font-variation-settings: "FILL" var(--icon-fill, 0), "wght" var(--icon-weigth, 400),
+    "GRAD" var(--icon-grade, 0);
   font-weight: normal;
   font-style: normal;
   line-height: 1;

src/lib/style/tippy.scss

@@ -0,0 +1,12 @@
+.tippy-box[data-theme~="surface-variant"] {
+  color: var(--md-sys-color-on-surface-variant);
+  background-color: var(--md-sys-color-surface-variant);
+
+  filter: drop-shadow(0 0 12px #000a);
+
+  @each $placement in top, bottom, right, left {
+    &[data-placement^="#{$placement}"] > .tippy-arrow::before {
+      border-#{$placement}-color: var(--md-sys-color-surface-variant);
+    }
+  }
+}

src/lib/tooltip.ts

@@ -0,0 +1,13 @@
+import type {Action} from "svelte/action"
+import tippy from "tippy.js"
+import type {Props} from "tippy.js"
+
+export const tooltip: Action = function (node, props?: Partial<Props>) {
+  const instance = tippy(node, props)
+
+  return {
+    destroy() {
+      instance.destroy()
+    },
+  }
+}

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import "$lib/fonts/noto-sans-mono.scss"
   import "$lib/fonts/material-symbols-rounded.scss"
   import "$lib/style/scrollbar.scss"
+  import "$lib/style/tippy.scss"
   import {onMount} from "svelte"
   import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
   import Navigation from "$lib/components/Navigation.svelte"
@@ -14,6 +15,19 @@
   import {initLocalStorage} from "$lib/serial/storage"
   import {browser} from "$app/environment"
   import BrowserWarning from "./BrowserWarning.svelte"
+  import "tippy.js/animations/shift-away.css"
+  import "tippy.js/dist/tippy.css"
+  import tippy from "tippy.js"
+
+  if (browser) {
+    tippy.setDefaultProps({
+      animation: "shift-away",
+      theme: "surface-variant",
+      allowHTML: true,
+      duration: 250,
+      arrow: true,
+    })
+  }
 
   export let data: LayoutServerData
 

src/routes/config/layout/+page.svelte

@@ -19,8 +19,7 @@
     await navigator.clipboard.writeText(url.toString())
     tippy(event.target, {
       content: "Share url copied!",
-      hideOnClick: true,
-      duration: 4000,
+      delay: [0, 1000000],
       onHidden(instance) {
         instance.destroy()
       },