feat: chord editing prototype

feat: printing style for layout

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;