✨ add multiple layout support

Author: peppapighs

eslint.config.js

@@ -3,13 +3,14 @@ import { includeIgnoreFile } from "@eslint/compat"
 import js from "@eslint/js"
 import prettierRecommended from "eslint-plugin-prettier/recommended"
 import svelte from "eslint-plugin-svelte"
+import { defineConfig } from "eslint/config"
 import globals from "globals"
 import ts from "typescript-eslint"
 import svelteConfig from "./svelte.config.js"
 
 const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url))
 
-export default ts.config(
+export default defineConfig(
   includeIgnoreFile(gitignorePath),
   js.configs.recommended,
   ...ts.configs.recommended,

src/lib/components/keyboard-editor/index.ts

@@ -16,6 +16,7 @@
 import { ResizableHandle as Handle } from "../ui/resizable"
 import Container from "./keyboard-editor-container.svelte"
 import Keyboard from "./keyboard-editor-keyboard.svelte"
+import LayoutDialog from "./keyboard-editor-layout-dialog.svelte"
 import Menubar from "./keyboard-editor-menubar.svelte"
 import Pane from "./keyboard-editor-pane.svelte"
 import Root from "./keyboard-editor.svelte"
@@ -27,11 +28,13 @@ export {
   Handle,
   Keyboard,
   Menubar,
+  LayoutDialog,
   //
   Root as KeyboardEditor,
   Pane as KeyboardEditorPane,
   Container as KeyboardEditorContainer,
   Handle as KeyboardEditorHandle,
   Keyboard as KeyboardEditorKeyboard,
   Menubar as KeyboardEditorMenubar,
+  LayoutDialog as KeyboardEditorLayoutDialog,
 }

src/lib/components/keyboard-editor/keyboard-editor-keyboard.svelte

@@ -14,53 +14,32 @@ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
 <script lang="ts">
-  import { keyboardContext } from "$lib/keyboard"
-  import type { KeyboardLayout } from "$lib/keyboard/metadata"
+  import {
+    displayLayoutContext,
+    type DisplayLayout,
+  } from "$lib/configurator/context.svelte"
   import { unitToEM, unitToStyle } from "$lib/ui"
   import { cn, type WithoutChildren } from "$lib/utils"
   import type { Snippet } from "svelte"
   import type { HTMLAttributes } from "svelte/elements"
 
   const {
     class: className,
-    layout = keyboardContext.get().metadata.layout,
+    displayLayout = displayLayoutContext.get(),
     keyGenerator,
     ...props
   }: WithoutChildren<HTMLAttributes<HTMLDivElement>> & {
-    layout?: KeyboardLayout
+    displayLayout?: DisplayLayout
     keyGenerator?: Snippet<[number]>
   } = $props()
 
   let containerWidth = $state(0)
   let containerHeight = $state(0)
 
-  const { keyboardWidth, keyboardHeight, coordinates } = $derived.by(() => {
-    const ret = {
-      keyboardWidth: 0,
-      keyboardHeight: 0,
-      coordinates: [] as { x: number; y: number }[],
-    }
-    const position = { x: 0, y: 0 }
-
-    for (const row of layout) {
-      for (const { w, h, x, y } of row) {
-        position.x += x
-        position.y += y
-        ret.keyboardWidth = Math.max(ret.keyboardWidth, position.x + w)
-        ret.keyboardHeight = Math.max(ret.keyboardHeight, position.y + h)
-        ret.coordinates.push({ ...position })
-        position.x += w
-      }
-      position.x = 0
-      position.y++
-    }
-
-    return ret
-  })
   const fontSize = $derived(
     Math.min(
-      containerWidth / unitToEM(keyboardWidth),
-      containerHeight / unitToEM(keyboardHeight),
+      containerWidth / unitToEM(displayLayout.width),
+      containerHeight / unitToEM(displayLayout.height),
     ),
   )
 </script>
@@ -76,13 +55,10 @@ this program. If not, see <https://www.gnu.org/licenses/>.
       <div class="absolute inset-0 grid place-items-center">
         <div
           class="relative"
-          style={unitToStyle(keyboardWidth, keyboardHeight)}
+          style={unitToStyle(displayLayout.width, displayLayout.height)}
         >
-          {#each layout.flat() as { key, w, h }, i (i)}
-            <div
-              class="absolute p-0.5"
-              style={unitToStyle(w, h, coordinates[i].x, coordinates[i].y)}
-            >
+          {#each displayLayout.displayKeys as { key, w, h, x, y }, i (i)}
+            <div class="absolute p-0.5" style={unitToStyle(w, h, x, y)}>
               {@render keyGenerator?.(key)}
             </div>
           {/each}

src/lib/components/keyboard-editor/keyboard-editor-layout-dialog.svelte

@@ -0,0 +1,80 @@
+<!-- 
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later
+version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+details.
+
+You should have received a copy of the GNU General Public License along with
+this program. If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<script lang="ts">
+  import { WrenchIcon } from "@lucide/svelte"
+  import { persistedStateContext } from "$lib/configurator/context.svelte"
+  import { keyboardContext } from "$lib/keyboard"
+  import type { WithoutChildrenOrChild } from "$lib/utils"
+  import type { ComponentProps } from "svelte"
+  import Switch from "../switch.svelte"
+  import { buttonVariants } from "../ui/button"
+  import { Label } from "../ui/label"
+  import * as Popover from "../ui/popover"
+  import * as Select from "../ui/select"
+
+  const {
+    ...props
+  }: WithoutChildrenOrChild<ComponentProps<typeof Popover.Trigger>> = $props()
+
+  const persistedState = persistedStateContext.get()
+  const { layoutOptions } = $derived(persistedState.current)
+  const { labels } = keyboardContext.get().metadata.layout
+</script>
+
+<Popover.Root>
+  <Popover.Trigger class={buttonVariants({ size: "icon", variant: "outline" })}>
+    <WrenchIcon />
+    <span class="sr-only">Configure Layout</span>
+  </Popover.Trigger>
+  <Popover.Content align="end" class="flex flex-col gap-4">
+    {#each labels as label, i (i)}
+      {#if typeof label === "string"}
+        <Switch
+          bind:checked={
+            () => layoutOptions[i] === 1,
+            (v) => (persistedState.current.layoutOptions[i] = v ? 1 : 0)
+          }
+          id={label}
+          title={label}
+        />
+      {:else}
+        <div class="flex flex-col gap-1.5">
+          <div class="flex">
+            <Label for={label[0]}>{label[0]}</Label>
+          </div>
+          <Select.Root
+            bind:value={
+              () => String(layoutOptions[i]),
+              (v) => (persistedState.current.layoutOptions[i] = Number(v))
+            }
+            type="single"
+          >
+            <Select.Trigger id={label[0]} class="w-full" size="sm">
+              <span class="flex items-center gap-2">
+                {label[layoutOptions[i] + 1]}
+              </span>
+            </Select.Trigger>
+            <Select.Content>
+              {#each label.slice(1) as option, j (j)}
+                <Select.Item value={String(j)}>{option}</Select.Item>
+              {/each}
+            </Select.Content>
+          </Select.Root>
+        </div>
+      {/if}
+    {/each}
+  </Popover.Content>
+</Popover.Root>

src/lib/components/ui/popover/index.ts

@@ -0,0 +1,18 @@
+import { Popover as PopoverPrimitive } from "bits-ui"
+import Content from "./popover-content.svelte"
+import Trigger from "./popover-trigger.svelte"
+
+const Root = PopoverPrimitive.Root
+const Close = PopoverPrimitive.Close
+
+export {
+  Root,
+  Content,
+  Trigger,
+  Close,
+  //
+  Root as Popover,
+  Content as PopoverContent,
+  Trigger as PopoverTrigger,
+  Close as PopoverClose,
+}

src/lib/components/ui/popover/popover-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { cn } from "$lib/utils.js"
+  import { Popover as PopoverPrimitive } from "bits-ui"
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    align = "center",
+    portalProps,
+    ...restProps
+  }: PopoverPrimitive.ContentProps & {
+    portalProps?: PopoverPrimitive.PortalProps
+  } = $props()
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+  <PopoverPrimitive.Content
+    bind:ref
+    data-slot="popover-content"
+    {sideOffset}
+    {align}
+    class={cn(
+      "z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      className,
+    )}
+    {...restProps}
+  />
+</PopoverPrimitive.Portal>

src/lib/components/ui/popover/popover-trigger.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn } from "$lib/utils.js"
+  import { Popover as PopoverPrimitive } from "bits-ui"
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: PopoverPrimitive.TriggerProps = $props()
+</script>
+
+<PopoverPrimitive.Trigger
+  bind:ref
+  data-slot="popover-trigger"
+  class={cn("", className)}
+  {...restProps}
+/>

src/lib/configurator/advanced-keys/advanced-keys-menubar.svelte

@@ -14,17 +14,18 @@ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
 <script lang="ts">
-  import { KeyboardEditorMenubar } from "$lib/components/keyboard-editor"
+  import * as KeyboardEditor from "$lib/components/keyboard-editor"
   import LayerSelect from "$lib/components/layer-select.svelte"
   import { advancedKeysStateContext } from "../context.svelte"
 
   const advancedKeysState = advancedKeysStateContext.get()
   const { layer, index, create } = $derived(advancedKeysState)
 </script>
 
-<KeyboardEditorMenubar>
+<KeyboardEditor.Menubar>
   <LayerSelect
     disabled={index !== null || create !== null}
     bind:layer={() => layer, (v) => advancedKeysState.setLayer(v)}
   />
-</KeyboardEditorMenubar>
+  <KeyboardEditor.LayoutDialog />
+</KeyboardEditor.Menubar>