From 0ca74a1ad950cdbd0e9569497c4ed1beb9ebed22 Mon Sep 17 00:00:00 2001
From: Uri Shaked <uri@urishaked.com>
Date: Tue, 7 Apr 2020 20:47:12 +0300
Subject: [PATCH] fix(potentiometer): improve knob accuracy

---
 src/potentiometer-element.ts | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/potentiometer-element.ts b/src/potentiometer-element.ts
index 3cc3f0b..81de8b4 100644
--- a/src/potentiometer-element.ts
+++ b/src/potentiometer-element.ts
@@ -80,7 +80,15 @@ export class PotentiometerElement extends LitElement {
           stroke-width=".30"
         />
         <rect x="5.4" y=".70" width="9.1" height="1.9" fill="#ccdae3" stroke-width=".15" />
-        <ellipse cx="9.91" cy="8.18" rx="7.27" ry="7.43" fill="#e4e8eb" stroke-width=".15" />
+        <ellipse
+          id="knob"
+          cx="9.91"
+          cy="8.18"
+          rx="7.27"
+          ry="7.43"
+          fill="#e4e8eb"
+          stroke-width=".15"
+        />
         <rect
           x="6.6"
           y="17"
@@ -134,12 +142,14 @@ export class PotentiometerElement extends LitElement {
     event.stopPropagation();
     event.preventDefault();
 
-    const potentiometerRect = this.getBoundingClientRect();
+    const potentiometerRect = this.shadowRoot?.querySelector('#knob')?.getBoundingClientRect();
 
-    this.center = {
-      x: window.scrollX + potentiometerRect.left + potentiometerRect.width / 2,
-      y: window.scrollY + potentiometerRect.top + potentiometerRect.height / 2,
-    };
+    if (potentiometerRect) {
+      this.center = {
+        x: window.scrollX + potentiometerRect.left + potentiometerRect.width / 2,
+        y: window.scrollY + potentiometerRect.top + potentiometerRect.height / 2,
+      };
+    }
   }
 
   private rotateHandler(event: MouseEvent | TouchEvent) {