From 535db7cd9a28f85a46289cb304e6ad84baf8eab3 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Tue, 5 Apr 2022 07:22:34 -0500
Subject: [PATCH] refactor: translate position

---
 .../graphics/src/components/stage/index.jsx   | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/graphics/src/components/stage/index.jsx b/packages/graphics/src/components/stage/index.jsx
index 1d7e93f..3225bf2 100644
--- a/packages/graphics/src/components/stage/index.jsx
+++ b/packages/graphics/src/components/stage/index.jsx
@@ -40,14 +40,31 @@ const Stage = forwardRef(({
             event,
             // Normalize touch events.
             (event) => {
+              let {
+                clientX,
+                clientY,
+                deltaX,
+                deltaY,
+              } = event;
               /* eslint-disable no-param-reassign */
               if (-1 !== ['touchstart', 'touchmove'].indexOf(event.type)) {
-                event.clientX = event.touches[0].clientX;
-                event.deltaX = event.touches[0].deltaX;
-                event.clientY = event.touches[0].clientY;
-                event.deltaY = event.touches[0].deltaY;
+                clientX = event.touches[0].clientX;
+                deltaX = event.touches[0].deltaX;
+                clientY = event.touches[0].clientY;
+                deltaY = event.touches[0].deltaY;
               }
               /* eslint-enable no-param-reassign */
+              const {left, top} = event.target.getBoundingClientRect();
+              Object.defineProperty(
+                event,
+                'delta',
+                {get: () => [deltaX, deltaY]},
+              );
+              Object.defineProperty(
+                event,
+                'position',
+                {get: () => [(clientX - left) / scale, (clientY - top) / scale]},
+              );
               return event;
             },
           )