From 2f87770e660b96af7e8d0210e0833ed0776241d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Mon, 9 Dec 2024 14:50:52 -0800
Subject: [PATCH] bigger handlers for touch devices

---
 src/folk-shape.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/folk-shape.ts b/src/folk-shape.ts
index 11819a1..0ae8927 100644
--- a/src/folk-shape.ts
+++ b/src/folk-shape.ts
@@ -102,13 +102,19 @@ const styles = css`
     transform: translate(-50%, -50%);
     border: 1.5px solid hsl(214, 84%, 56%);
     border-radius: 2px;
+
+    @media (any-pointer: coarse) {
+      width: 13px;
+    }
   }
 
   [part^='rotation'] {
-    border-radius: 0px;
     opacity: 0;
     width: 16px;
-    aspect-ratio: 1;
+
+    @media (any-pointer: coarse) {
+      width: 20px;
+    }
   }
 
   [part$='top-left'] {
@@ -177,8 +183,6 @@ export class FolkShape extends HTMLElement {
 
   #handles: Record<ResizeHandle | RotateHandle, HTMLElement>;
 
-  // Used for rotation handling, would love a better way to do this that avoids this clutter.
-  #initialRotation = 0;
   #startAngle = 0;
 
   get x() {
@@ -330,7 +334,6 @@ export class FolkShape extends HTMLElement {
 
         // Setup rotation initial state if needed
         if (handle?.startsWith('rotation')) {
-          this.#initialRotation = this.#rect.rotation;
           const parentRotateOrigin = this.#rect.toParentSpace({
             x: this.#rect.width * this.#rect.rotateOrigin.x,
             y: this.#rect.height * this.#rect.rotateOrigin.y,