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

refactor: flatten visual key positioning system

Browse Source 
fixes #74
fixes #43
This commit is contained in:
Thea Schöbl
2023-12-30 15:50:48 +01:00
parent edabf8ec84
commit cb7c70dac1
2 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,7 +30,10 @@
(title ?? id ?? `0x${code.toString(16)}`) + (title ?? id ?? `0x${code.toString(16)}`) +
(variant === "left" ? " (left)" : variant === "right" ? " (right)" : "")} (variant === "left" ? " (left)" : variant === "right" ? " (right)" : "")}
{@const isActive = layer === $activeLayer} {@const isActive = layer === $activeLayer}
{@const direction = [(middle[0] - margin * 3) / position[0], (middle[1] - margin * 3) / position[1]]} {@const direction = [
Math.sign(middle[0]) * (Math.abs(middle[0]) - margin * 3) * position[0],
Math.sign(middle[1]) * (Math.abs(middle[1]) - margin * 3) * position[1],
]}
{@const hasIcon = !dynamicMapping && !!icon} {@const hasIcon = !dynamicMapping && !!icon}
<text <text
fill={isApplied ? "currentcolor" : "var(--md-sys-color-primary)"} fill={isApplied ? "currentcolor" : "var(--md-sys-color-primary)"}
@@ -43,7 +46,9 @@
font-family={hasIcon ? "Material Symbols Rounded" : undefined} font-family={hasIcon ? "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 0" : `${direction[0]}px ${direction[1]}px 0`} style:translate={isActive
? "0 0 0"
: `${direction[0].toPrecision(2)}px ${direction[1].toPrecision(2)}px 0`}
style:rotate="{rotate}deg" style:rotate="{rotate}deg"
use:action={{title: tooltip}} use:action={{title: tooltip}}
> >

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

@@ -42,23 +42,30 @@
{@const r2 = r1 - sizeY + innerMargin * 2} {@const r2 = r1 - sizeY + innerMargin * 2}
{@const p2 = r2 - innerMargin} {@const p2 = r2 - innerMargin}
{@const multiplier = 1.25} {@const multiplier = 1.25}
<g style:transform="rotateZ({key.rotate}deg) translate({innerMargin}px, {innerMargin}px)">
{@const rotateRad = (key.rotate + 45) * (Math.PI / 180)}
{@const rotX = Math.round((Math.abs(Math.cos(rotateRad - Math.PI / 2)) + Number.EPSILON) * 100) / 100}
{@const rotY = Math.round((Math.abs(Math.sin(rotateRad - Math.PI / 2)) + Number.EPSILON) * 100) / 100}
{@const rc = r1 - (r1 - r2) / 2}
{@const middleX = Math.cos(rotateRad) * rc}
{@const middleY = Math.sin(rotateRad) * rc}
<path <path
style:transform="rotateZ({key.rotate}deg) translate({innerMargin}px, {innerMargin}px)"
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"
/> />
<KeyText <KeyText
{key} {key}
middle={[sizeY - margin * 2, sizeY - margin * 2]} middle={[middleX, middleY]}
pos={[posX, posY]} pos={[posX, posY]}
rotate={-key.rotate} rotate={0}
fontSizeMultiplier={multiplier} fontSizeMultiplier={multiplier}
positions={[ positions={[
[-0.5, -0.5], [-rotY, -rotX],
[0.5, -0.5], [-rotX, -rotY],
[-0.5, 0.5], [rotX, rotY],
]} ]}
/> />
</g>
{/if} {/if}
</g> </g>
@@ -71,6 +78,7 @@
transform-box: fill-box; transform-box: fill-box;
} }
path,
g { g {
transform-origin: top left; transform-origin: top left;
transform-box: fill-box; transform-box: fill-box;