From d4be43c06f8c0fd59488e8a8063d8fb47195ca4a Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Tue, 10 Jan 2023 12:35:37 +0100
Subject: [PATCH] web: improve button squishiness

---
 src/web/components/button.ts | 36 ++++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/web/components/button.ts b/src/web/components/button.ts
index e160fa8..849c735 100644
--- a/src/web/components/button.ts
+++ b/src/web/components/button.ts
@@ -1,5 +1,5 @@
 import {LitElement, html, css} from "lit";
-import {customElement, property, state} from "lit/decorators.js";
+import {customElement, property, query, state} from "lit/decorators.js";
 
 import withSharedStyles from "../theme";
 
@@ -11,20 +11,48 @@ export default class NyanoButton extends LitElement {
     @state()
     private pressed = false;
 
+    @query("#btn")
+    private btn: HTMLButtonElement;
+
     protected render() {
         return html`
             <button
+                id="btn"
                 ?disabled=${this.disabled}
                 class="${this.pressed ? "pressed" : ""}"
-                @mousedown="${() => this.pressed = true}"
-                @mouseup="${() => this.pressed = false}"
-                @mouseleave="${() => this.pressed = false}"
+                @mousedown="${this.handleMouseDown}"
+                @mouseup="${this.handleMouseLeave}"
+                @mouseleave="${this.handleMouseLeave}"
             >
                 <slot/>
             </button>
         `;
     }
 
+    private handleMouseDown(e: MouseEvent) {
+        this.updateTransformOrigin(e);
+        this.btn.addEventListener("mousemove", this.updateTransformOrigin);
+        this.pressed = true;
+    }
+
+    private handleMouseLeave() {
+        this.pressed = false;
+        this.btn.removeEventListener("mousemove", this.updateTransformOrigin);
+    }
+
+    private updateTransformOrigin = (e: MouseEvent) => {
+        const rect = this.btn.getBoundingClientRect();
+        const center = {
+            x: rect.width / 2,
+            y: rect.height / 2,
+        };
+        const origin = {
+            x: center.x + (e.clientX - rect.x - center.x) / 2,
+            y: center.y + (e.clientY - rect.y - center.y) / 2,
+        };
+        this.btn.style.transformOrigin = `${origin.x}px ${origin.y}px`;
+    }
+
     static get styles() {
         return withSharedStyles(css`
             :host {