feat: chord editing prototype

feat: printing style for layout

src/lib/components/ActionStringEdit.svelte

@@ -1,113 +1,181 @@
 <script lang="ts">
   import {KEYMAP_CODES, KEYMAP_IDS, specialKeycodes} from "$lib/serial/keymap-codes"
-  import {onDestroy, onMount} from "svelte"
-  import type ActionSelector from "$lib/components/layout/ActionSelector.svelte"
+  import {tick} from "svelte"
+  import ActionSelector from "$lib/components/layout/ActionSelector.svelte"
+  import {changes, ChangeType} from "$lib/undo-redo"
 
   export let actions: number[]
 
-  onMount(() => {
-    document.addEventListener("selectionchange", select)
-  })
+  function keypress(event: KeyboardEvent) {
+    if (event.key === "ArrowUp") {
+      selectAction()
+    } else if (event.key === "ArrowLeft") {
+      moveCursor(cursorPosition - 1)
+    } else if (event.key === "ArrowRight") {
+      moveCursor(cursorPosition + 1)
+    } else if (event.key === "Backspace") {
+      deleteAction(cursorPosition - 1)
+      moveCursor(cursorPosition - 1)
+    } else if (event.key === "Delete") {
+      deleteAction(cursorPosition)
+    } else if (KEYMAP_IDS.has(event.key)) {
+      insertAction(cursorPosition, KEYMAP_IDS.get(event.key)!.code)
+      tick().then(() => moveCursor(cursorPosition + 1))
+    } else if (specialKeycodes.has(event.key)) {
+      insertAction(cursorPosition, specialKeycodes.get(event.key)!)
+      tick().then(() => moveCursor(cursorPosition + 1))
+    }
+  }
 
-  onDestroy(() => {
-    document.removeEventListener("selectionchange", select)
-  })
+  function moveCursor(to: number) {
+    cursorPosition = Math.max(0, Math.min(to, actions.length))
+    const item = box.children.item(cursorPosition) as HTMLElement
+    cursorOffset = item.offsetLeft + item.offsetWidth
+  }
 
-  function input(event: KeyboardEvent) {
-    switch (event.key) {
-      case "ArrowLeft":
-      case "ArrowRight":
-      case "Escape":
-      case "Tab": {
+  function deleteAction(at: number, count = 1) {
+    actions = actions.toSpliced(at, count)
+  }
+
+  function insertAction(at: number, action: number) {
+    actions = actions.toSpliced(at, 0, action)
+  }
+
+  function clickCursor(event: unknown) {
+    const distance = (event as {layerX: number}).layerX
+
+    let i = 0
+    for (const child of box.children) {
+      const {offsetLeft, offsetWidth} = child as HTMLElement
+      if (distance < offsetLeft + offsetWidth / 2) {
+        moveCursor(i - 1)
         return
       }
-      case "Backspace": {
-        caretPosition--
-        if (caretPosition >= 0) actions = actions.toSpliced(caretPosition, 1)
-        else caretPosition = 0
-        break
-      }
-      case "Delete": {
-        if (caretPosition < actions.length) actions = actions.toSpliced(caretPosition, 1)
-        break
-      }
-      default: {
-        if (specialKeycodes.has(event.key)) {
-          actions = actions.toSpliced(caretPosition, 0, 32)
-        } else if (KEYMAP_IDS.has(event.key)) {
-          actions = actions.toSpliced(caretPosition, 0, KEYMAP_IDS.get(event.key)!.code)
-        } else {
-          break
-        }
-
-        break
-      }
-    }
-    event.preventDefault()
-    console.log(event.key)
-  }
-
-  function select() {
-    const selection = document.getSelection()
-    if (!selection || !selection.containsNode(field, true)) return
-
-    let node = selection.anchorNode?.parentNode
-    let i = 0
-    while (node) {
       i++
-      node = node.previousSibling
     }
-
-    const range = selection.getRangeAt(0)
-    const clonedRange = range.cloneRange()
-    clonedRange.selectNodeContents(field)
-    clonedRange.setEnd(range.endContainer, range.endOffset)
-
-    caretPosition = (i - 1) / 2 + clonedRange.endOffset
-    console.log(caretPosition)
+    moveCursor(i - 1)
   }
 
-  let editDialog: ActionSelector
-  let caretPosition: number
-  let field: HTMLSpanElement
+  function selectAction() {
+    const component = new ActionSelector({target: document.body})
+    const dialog = document.querySelector("dialog > div") as HTMLDivElement
+    const backdrop = document.querySelector("dialog") as HTMLDialogElement
+    const dialogRect = dialog.getBoundingClientRect()
+    const groupRect = button.getBoundingClientRect()
+
+    const scale = 0.5
+    const dialogScale = `${1 - scale * (1 - groupRect.width / dialogRect.width)} ${
+      1 - scale * (1 - groupRect.height / dialogRect.height)
+    }`
+    const dialogTranslate = `${scale * (groupRect.x - dialogRect.x)}px ${
+      scale * (groupRect.y - dialogRect.y)
+    }px`
+
+    const duration = 150
+    const options = {duration, easing: "ease"}
+    const dialogAnimation = dialog.animate(
+      [
+        {scale: dialogScale, translate: dialogTranslate},
+        {translate: "0 0", scale: "1"},
+      ],
+      options,
+    )
+    const backdropAnimation = backdrop.animate([{opacity: 0}, {opacity: 1}], options)
+
+    async function closed() {
+      dialogAnimation.reverse()
+      backdropAnimation.reverse()
+
+      await dialogAnimation.finished
+
+      component.$destroy()
+      await tick()
+      box.focus()
+    }
+
+    component.$on("close", closed)
+    component.$on("select", ({detail}) => {
+      insertAction(cursorPosition, detail)
+      tick().then(() => moveCursor(cursorPosition + 1))
+      closed()
+    })
+  }
+
+  let button: HTMLButtonElement
+  let box: HTMLDivElement
+  let cursorPosition = 0
+  let cursorOffset = 0
 </script>
 
-<svelte:window on:selectionchange={select} />
-
-<span
-  bind:this={field}
-  contenteditable
-  on:keydown={input}
-  spellcheck="false"
-  on:select|preventDefault={select}
-  role="textbox"
-  tabindex="0"
->
-  {#each actions as char}
-    {@const action = KEYMAP_CODES[char]}
-    {#if action?.id && /^\w$/.test(action.id)}
-      <span data-action={char}>{KEYMAP_CODES[char].id}</span>
-    {:else if action}
-      <kbd data-action={char} title={action.title} class:icon={!!action.icon}>{action.icon || action.id}</kbd>
+<div on:keydown={keypress} on:mousedown={clickCursor} role="textbox" tabindex="0" bind:this={box}>
+  <div class="cursor" style:translate="{cursorOffset}px 0">
+    <button class="icon" bind:this={button} on:click={selectAction}>add</button>
+  </div>
+  {#each actions as actionId}
+    {@const {icon, id, code} = KEYMAP_CODES[actionId] ?? {code: actionId}}
+    {#if !icon && id?.length === 1}
+      <span>{id}</span>
     {:else}
-      <kbd data-action={char}>{action}</kbd>
+      <kbd class:icon={!!icon}>{icon ?? id ?? `0x${code.toString(16)}`}</kbd>
     {/if}
   {/each}
-  <!-- <kbd class="icon" style="background: red">abc</kbd> -->
-</span>
+</div>
 
 <style lang="scss">
-  kbd {
-    min-width: 24px;
-    height: 24px;
-    margin-inline-end: 4px;
+  .cursor {
+    display: none;
   }
 
-  :not(kbd) + kbd {
-    margin-inline-start: 4px;
+  :not(.cursor) + kbd {
+    margin-inline-start: 2px;
   }
 
-  span[contenteditable]:focus-within {
-    outline-offset: 4px;
+  kbd + * {
+    margin-inline-start: 2px;
+  }
+
+  [role="textbox"] {
+    cursor: text;
+
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    height: 1em;
+
+    &:focus-within {
+      outline: none;
+
+      .cursor {
+        position: absolute;
+        transform: translateX(-50%);
+        translate: 0 0;
+
+        display: block;
+
+        width: 2px;
+        height: 100%;
+
+        background: var(--md-sys-color-on-secondary-container);
+
+        transition: translate 50ms ease;
+
+        button {
+          position: absolute;
+          top: -24px;
+          left: 0;
+
+          height: 24px;
+          padding: 0;
+
+          color: var(--md-sys-color-on-secondary-container);
+
+          background: var(--md-sys-color-secondary-container);
+          border: 2px solid currentcolor;
+          border-radius: 12px 12px 12px 0;
+        }
+      }
+    }
   }
 </style>

src/lib/components/action-extension.ts

@@ -0,0 +1,8 @@
+import {Extension, Node} from "@tiptap/core"
+
+const CharaAction = Node.create({
+  name: "Action",
+  renderHTML({HTMLAttributes}) {
+    return ["kbd", HTMLAttributes, 0]
+  },
+})

src/lib/components/layout/ActionSelector.svelte

@@ -6,9 +6,8 @@
   import ActionListItem from "$lib/components/ActionListItem.svelte"
   import LL from "../../../i18n/i18n-svelte"
   import {action} from "$lib/title"
-  import type {KeymapCategory} from "$lib/assets/keymaps/keymap"
 
-  export let currentAction: number
+  export let currentAction: number | undefined = undefined
 
   const index = new Index({tokenize: "full"})
   for (const action of Object.values(KEYMAP_CODES)) {
@@ -117,10 +116,12 @@
         >
       {/each}
     </fieldset>
-    <aside>
-      <h3>{$LL.actionSearch.CURRENT_ACTION()}</h3>
-      <ActionListItem id={currentAction} />
-    </aside>
+    {#if currentAction !== undefined}
+      <aside>
+        <h3>{$LL.actionSearch.CURRENT_ACTION()}</h3>
+        <ActionListItem id={currentAction} />
+      </aside>
+    {/if}
     <ul bind:this={resultList}>
       {#if exact !== undefined}
         <li class="exact">

src/lib/components/layout/GenericLayout.svelte

@@ -171,8 +171,11 @@
 
 <svelte:window on:keydown={navigate} />
 
-<p>{layoutInfo.name}</p>
-<svg viewBox="0 0 {layoutInfo.size[0] * scale} {layoutInfo.size[1] * scale}" bind:this={groupParent}>
+<svg
+  class="print"
+  viewBox="0 0 {layoutInfo.size[0] * scale} {layoutInfo.size[1] * scale}"
+  bind:this={groupParent}
+>
   {#each layoutInfo.keys as key, i}
     <KeyboardKey
       {i}
@@ -191,6 +194,7 @@
 <style lang="scss">
   svg {
     overflow: visible;
+    grid-area: "d";
     width: calc(min(100%, 35cm));
     max-height: calc(100% - 170px);
   }

src/lib/components/layout/Layout.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import {serialPort} from "$lib/serial/connection"
+  import {deviceLayout, serialPort} from "$lib/serial/connection"
   import {action} from "$lib/title"
   import GenericLayout from "$lib/components/layout/GenericLayout.svelte"
   import {getContext} from "svelte"
   import type {Writable} from "svelte/store"
+  import {csvLayoutToJson, isCsvLayout} from "$lib/compat/legacy-layout"
+  import type {CharaLayoutFile} from "$lib/share/chara-file"
 
-  export let layoutOverride: "ONE" | "LITE" | undefined
+  export let layoutOverride: "ONE" | "LITE" | undefined = undefined
 
   $: device = $serialPort?.device ?? "ONE"
   const activeLayer = getContext<Writable<number>>("active-layer")
@@ -20,6 +22,16 @@
     ONE: () => import("$lib/assets/layouts/one.yml"),
     LITE: () => import("$lib/assets/layouts/lite.yml"),
   }
+
+  async function importLayout() {
+    const file = await fileInput.files?.item(0)?.text()
+    if (!file) return
+    const importedLayout = isCsvLayout(file) ? csvLayoutToJson(file) : (JSON.parse(file) as CharaLayoutFile)
+    if (importedLayout.type === "layout" && importedLayout.charaVersion === 1)
+      $deviceLayout = importedLayout.layout
+  }
+
+  let fileInput: HTMLInputElement
 </script>
 
 <div class="container">
@@ -42,6 +54,14 @@
 </div>
 
 <style lang="scss">
+  .controls {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
   .container {
     display: flex;
     flex-direction: column;

src/lib/style/print.scss

@@ -0,0 +1,16 @@
+@media print {
+  .print {
+    visibility: visible;
+  }
+
+  nav {
+    display: none;
+  }
+
+  body {
+    --md-sys-color-background: white !important;
+    --md-sys-color-on-background: black !important;
+
+    visibility: hidden;
+  }
+}

src/lib/style/theme.scss

@@ -1,6 +1,7 @@
 @import "./form/button";
 @import "./form/toggle";
 @import "./kbd";
+@import "./print";
 
 * {
   box-sizing: border-box;

src/routes/Navigation.svelte

@@ -30,6 +30,7 @@
   <div class="actions">
     {#if $canShare}
       <button transition:fly={{x: -8}} class="icon" on:click={triggerShare}>share</button>
+      <button transition:fly={{x: -8}} class="icon" on:click={() => print()}>print</button>
       <div transition:slide class="separator" />
     {/if}
     {#if import.meta.env.TAURI_FAMILY === undefined}
@@ -128,7 +129,6 @@
   nav {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
-    gap: 4px;
 
     width: calc(min(100%, 28cm));
     margin-block: 8px;
@@ -158,7 +158,7 @@
     justify-content: center;
 
     aspect-ratio: 1;
-    padding: 2px;
+    padding: 0;
 
     color: inherit;
     text-decoration: none;
@@ -177,7 +177,6 @@
 
   .actions {
     display: flex;
-    gap: 8px;
     align-items: center;
 
     &:last-child {

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

@@ -48,14 +48,6 @@
     }).show()
   }
 
-  async function importLayout() {
-    const file = await fileInput.files?.item(0)?.text()
-    if (!file) return
-    const importedLayout = isCsvLayout(file) ? csvLayoutToJson(file) : (JSON.parse(file) as CharaLayoutFile)
-    if (importedLayout.type === "layout" && importedLayout.charaVersion === 1)
-      $deviceLayout = importedLayout.layout
-  }
-
   setContext<VisualLayoutConfig>("visual-layout-config", {
     scale: 50,
     inactiveScale: 0.5,
@@ -67,37 +59,22 @@
   })
 
   setContext("active-layer", writable(0))
-
-  let fileInput: HTMLInputElement
-  let layoutOverride: "ONE" | "LITE" | undefined = undefined
 </script>
 
 <svelte:window use:share={shareLayout} />
 
 <section>
-  <select bind:value={layoutOverride}>
-    <option value={undefined}>Auto</option>
-    <option value="ONE">CC1</option>
-    <option value="LITE">Lite</option>
-  </select>
-  <!-- <label class="icon"
-    >upload_file<input
-      bind:this={fileInput}
-      on:input={importLayout}
-      type="file"
-      accept="text/csv, application/json"
-    /></label
-  > -->
-  <Layout {layoutOverride} />
+  <Layout />
 </section>
 
 <style lang="scss">
   section {
     display: flex;
+    align-items: center;
+    justify-content: center;
+
     width: 100%;
     height: 100%;
-    justify-content: center;
-    align-items: center;
   }
 
   input[type="file"] {