Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2025-12-11 05:16:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: show dynamic key maps in layout view

Browse Source
This commit is contained in:
Thea Schöbl
2023-12-22 12:51:23 +01:00
parent 7911904906
commit 2411dd2bea
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/components/layout/KeyText.svelte
View File

@@ -4,6 +4,7 @@
import type {VisualLayoutConfig} from "$lib/components/layout/visual-layout"
import type {CompiledLayoutKey} from "$lib/serialization/visual-layout"
import {layout} from "$lib/undo-redo.js"
import {osLayout} from "$lib/os-layout.js"
import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
import {action} from "$lib/title"
@@ -23,9 +24,14 @@
{#each positions as position, layer}
{@const {action: actionId, isApplied} = $layout[layer][key.id] ?? {action: 0, isApplied: true}}
{@const {code, icon, id, title} = KEYMAP_CODES[actionId] ?? {code: actionId}}
{@const {code, icon, id, title, keyCode, variant} = KEYMAP_CODES[actionId] ?? {code: actionId}}
{@const dynamicMapping = keyCode && $osLayout[JSON.stringify([keyCode])]}
{@const tooltip =
(title ?? id ?? `0x${code.toString(16)}`) +
(variant === "left" ? " (left)" : variant === "right" ? " (right)" : "")}
{@const isActive = layer === $activeLayer}
{@const direction = [(middle[0] - margin * 3) / position[0], (middle[1] - margin * 3) / position[1]]}
{@const hasIcon = !dynamicMapping && !!icon}
<text
fill={isApplied ? "currentcolor" : "var(--md-sys-color-primary)"}
font-weight={isApplied ? "" : "bold"}
@@ -33,16 +39,16 @@
alignment-baseline="central"
x={pos[0] + middle[0] + (isApplied ? 0 : fontSize / 3)}
y={pos[1] + middle[1]}
font-size={fontSizeMultiplier * (icon ? iconFontSize : fontSize)}
font-family={icon ? "Material Symbols Rounded" : undefined}
font-size={fontSizeMultiplier * (hasIcon ? iconFontSize : fontSize)}
font-family={hasIcon ? "Material Symbols Rounded" : undefined}
opacity={isActive ? 1 : inactiveOpacity}
style:scale={isActive ? 1 : inactiveScale}
style:translate={isActive ? "0 0 0" : `${direction[0]}px ${direction[1]}px 0`}
style:rotate="{rotate}deg"
use:action={{title: title ?? id}}
use:action={{title: tooltip}}
>
{#if code !== 0}
{icon || id || `0x${code.toString(16)}`}
{dynamicMapping || icon || id || `0x${code.toString(16)}`}
{/if}
{#if !isApplied}
<tspan>•</tspan>