Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-01-08 11:02:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: layout keys

Browse Source
This commit is contained in:
Thea Schöbl
2023-11-01 16:40:18 +01:00
parent 9d33565081
commit a1760d518c
4 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,8 +35,8 @@
font-family={action.icon ? "Material Symbols Rounded" : undefined} font-family={action.icon ? "Material Symbols Rounded" : undefined}
opacity={isActive ? 1 : inactiveOpacity} opacity={isActive ? 1 : inactiveOpacity}
style:scale={isActive ? 1 : inactiveScale} style:scale={isActive ? 1 : inactiveScale}
style:translate={isActive ? "0 0" : `${direction[0]}px ${direction[1]}px`} style:translate={isActive ? "0 0 0" : `${direction[0]}px ${direction[1]}px 0`}
style:rotate="{rotate}rad" style:rotate="{rotate}deg"
> >
{#if action.code !== 0} {#if action.code !== 0}
{action.icon || action.id || `0x${action.code?.toString(16)}`} {action.icon || action.id || `0x${action.code?.toString(16)}`}
@@ -52,6 +52,7 @@
$transition: 200ms; $transition: 200ms;
text { text {
will-change: translate, scale;
transform-origin: center; transform-origin: center;
transform-box: fill-box; transform-box: fill-box;
transition: transition:

10
src/lib/components/layout/KeyboardKey.svelte
View File

@@ -41,8 +41,8 @@
{@const p1 = r1 - innerMargin} {@const p1 = r1 - innerMargin}
{@const r2 = r1 - sizeY + innerMargin * 2} {@const r2 = r1 - sizeY + innerMargin * 2}
{@const p2 = r2 - innerMargin} {@const p2 = r2 - innerMargin}
{@const multiplier = 1.4} {@const multiplier = 1.25}
<g style:transform="rotateZ({key.rotate}rad) translate({innerMargin}px, {innerMargin}px)"> <g style:transform="rotateZ({key.rotate}deg) translate({innerMargin}px, {innerMargin}px)">
<path <path
opacity="0.4" opacity="0.4"
d="M{posX + p1},{posY} a{r1},{r1} 0 0,1 {-p1},{p1} l0,{-(p1 - p2)} a{r2},{r2} 0 0,0 {p2},{-p2}z" d="M{posX + p1},{posY} a{r1},{r1} 0 0,1 {-p1},{p1} l0,{-(p1 - p2)} a{r2},{r2} 0 0,0 {p2},{-p2}z"
@@ -54,9 +54,9 @@
rotate={-key.rotate} rotate={-key.rotate}
fontSizeMultiplier={multiplier} fontSizeMultiplier={multiplier}
positions={[ positions={[
[-0.6, -0.6], [-0.5, -0.5],
[0.6, -0.6], [0.5, -0.5],
[-0.6, 0.6], [-0.5, 0.5],
]} ]}
/> />
</g> </g>

4
src/lib/serialization/visual-layout.ts
View File

@@ -74,14 +74,14 @@ export function compileLayout(layout: VisualLayout): CompiledLayout {
} else if ("switch" in info) { } else if ("switch" in info) {
const cx = x + ox + 1 const cx = x + ox + 1
const cy = y + oy + 1 const cy = y + oy + 1
for (const [id, i] of [info.switch.n, info.switch.e, info.switch.s, info.switch.w].entries()) { for (const [i, id] of [info.switch.n, info.switch.e, info.switch.s, info.switch.w].entries()) {
compiled.keys.push({ compiled.keys.push({
id, id,
shape: "quarter-circle", shape: "quarter-circle",
cornerRadius: 0, cornerRadius: 0,
size: [2, 0.6], size: [2, 0.6],
pos: [cx, cy], pos: [cx, cy],
rotate: (Math.PI / 2) * i + Math.PI / 4, rotate: 90 * i + 45,
}) })
} }
compiled.keys.push({ compiled.keys.push({

2
src/routes/config/layout/+page.svelte
View File

@@ -57,7 +57,7 @@
setContext<VisualLayoutConfig>("visual-layout-config", { setContext<VisualLayoutConfig>("visual-layout-config", {
scale: 50, scale: 50,
inactiveScale: 0.6, inactiveScale: 0.5,
inactiveOpacity: 0.4, inactiveOpacity: 0.4,
strokeWidth: 1, strokeWidth: 1,
margin: 5, margin: 5,