From 6d761321813ba0e72fe7cf0a90b2f1bf34108242 Mon Sep 17 00:00:00 2001
From: 0xa663 <142121896+0xa663@users.noreply.github.com>
Date: Fri, 16 Feb 2024 11:53:29 +0100
Subject: [PATCH] Add touch support

---
 dist/user-script.js                 | 43 +++++++++++++++++----------
 src/UI/components/movableWindow.tsx | 45 ++++++++++++++++++-----------
 2 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/dist/user-script.js b/dist/user-script.js
index 759d755..66f73c6 100644
--- a/dist/user-script.js
+++ b/dist/user-script.js
@@ -36428,6 +36428,8 @@
       window.addEventListener("mousemove", this.onMouseMove);
       window.addEventListener("mouseup", this.onMouseUp);
       window.addEventListener("resize", this.fixBounds);
+      window.addEventListener("touchmove", this.onTouchMove);
+      window.addEventListener("touchend", this.onMouseUp);
       this.props.storage.getItem(this.storageKey).then((point) => {
         if (!this.destroyed && point) {
           this.setState({ x: point.x, y: point.y });
@@ -36441,17 +36443,21 @@
       window.removeEventListener("mousemove", this.onMouseMove);
       window.removeEventListener("mouseup", this.onMouseUp);
       window.removeEventListener("resize", this.fixBounds);
+      window.removeEventListener("touchmove", this.onTouchMove);
+      window.removeEventListener("touchend", this.onMouseUp);
       this.destroyed = false;
     }
     onTouchMove = (event) => {
       if (!this.moving)
         return;
-      const lastTouch = event.touches[event.touches.length - 1];
-      const div = this.dragRef.current;
-      const { x: x2, y: y2, width, height } = div.getBoundingClientRect();
-      const offsetX = (lastTouch.clientX - x2) / width * div.offsetWidth;
-      const offsetY = (lastTouch.clientY - y2) / height * div.offsetHeight;
-      this.setMoving(lastTouch.clientX, lastTouch.clientY, offsetX, offsetY);
+      if (!(event instanceof TouchEvent) || !event.isTrusted) {
+        return;
+      }
+      for (let i2 = 0; i2 < event.touches.length; i2++) {
+        const touch = event.touches[i2];
+        const { clientX, clientY } = touch;
+        this.handleMoveLogic(clientX, clientY);
+      }
     };
     setMoving = (clientX, clientY, offsetX, offsetY) => {
       this.moving = {
@@ -36464,7 +36470,7 @@
     onMouseMove = (event) => {
       if (!this.moving)
         return;
-      if (!(event instanceof MouseEvent) || !event.isTrusted || event.ctrlKey || event.altKey || event.metaKey) {
+      if (!(event instanceof MouseEvent) || event.ctrlKey || event.altKey || event.metaKey) {
         return;
       }
       const { clientX, clientY } = event;
@@ -36488,19 +36494,24 @@
         this.setState(point);
       }
     }
+    onMouseDown = (event) => {
+      this.setMoving(event.clientX, event.clientY, event.nativeEvent.offsetX, event.nativeEvent.offsetY);
+      this.setState({ moving: true });
+    };
+    onTouchStart = (event) => {
+      const lastTouch = event.nativeEvent.touches[event.nativeEvent.touches.length - 1];
+      const div = event.target;
+      const { x: x2, y: y2, width, height } = div.getBoundingClientRect();
+      const offsetX = (lastTouch.clientX - x2) / width * div.offsetWidth;
+      const offsetY = (lastTouch.clientY - y2) / height * div.offsetHeight;
+      this.setMoving(lastTouch.clientX, lastTouch.clientY, offsetX, offsetY);
+      this.setState({ moving: true });
+    };
     get storageKey() {
       return `__storage__${this.props.storageKey}`;
     }
     render() {
-      return /* @__PURE__ */ import_react10.default.createElement(Movable, { ref: this.ref, style: { left: `${this.state.x}px`, top: `${this.state.y}px` } }, /* @__PURE__ */ import_react10.default.createElement(DragArea, { ref: this.dragRef, style: { cursor: this.state.moving ? "grabbing" : "" }, onMouseDown: (event) => {
-        this.moving = {
-          x: event.clientX,
-          y: event.clientY,
-          xOff: event.nativeEvent.offsetX,
-          yOff: event.nativeEvent.offsetY
-        };
-        this.setState({ moving: true });
-      } }, " ", /* @__PURE__ */ import_react10.default.createElement("h2", null, this.props.title), " "), this.props.children);
+      return /* @__PURE__ */ import_react10.default.createElement(Movable, { ref: this.ref, style: { left: `${this.state.x}px`, top: `${this.state.y}px` } }, /* @__PURE__ */ import_react10.default.createElement(DragArea, { ref: this.dragRef, style: { cursor: this.state.moving ? "grabbing" : "" }, onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, " ", /* @__PURE__ */ import_react10.default.createElement("h2", null, this.props.title), " "), this.props.children);
     }
   };
 
diff --git a/src/UI/components/movableWindow.tsx b/src/UI/components/movableWindow.tsx
index 3e91b9a..1a2debb 100644
--- a/src/UI/components/movableWindow.tsx
+++ b/src/UI/components/movableWindow.tsx
@@ -60,6 +60,8 @@ export class MovableWindow extends React.Component<Props, State> {
         window.addEventListener("mousemove", this.onMouseMove);
         window.addEventListener("mouseup", this.onMouseUp);
         window.addEventListener("resize", this.fixBounds);
+        window.addEventListener("touchmove", this.onTouchMove);
+        window.addEventListener("touchend", this.onMouseUp);
         this.props.storage.getItem<Point>(this.storageKey).then(point => {
             if (!this.destroyed && point) {
                 this.setState({x: point.x, y: point.y});
@@ -73,17 +75,21 @@ export class MovableWindow extends React.Component<Props, State> {
         window.removeEventListener("mousemove", this.onMouseMove);
         window.removeEventListener("mouseup", this.onMouseUp);
         window.removeEventListener("resize", this.fixBounds);
+        window.removeEventListener("touchmove", this.onTouchMove);
+        window.removeEventListener("touchend", this.onMouseUp);
         this.destroyed = false;
     }
 
     onTouchMove = (event: TouchEvent) => {
         if (!this.moving) return;
-        const lastTouch = event.touches[event.touches.length - 1];
-        const div = this.dragRef.current!;
-        const { x, y, width, height} = div.getBoundingClientRect();
-        const offsetX = (lastTouch.clientX - x) / width * div.offsetWidth;
-        const offsetY = (lastTouch.clientY - y) / height * div.offsetHeight;
-        this.setMoving(lastTouch.clientX, lastTouch.clientY, offsetX, offsetY);
+        if (!(event instanceof TouchEvent) || !event.isTrusted){
+            return;
+        }
+        for (let i = 0; i < event.touches.length; i++) {
+            const touch = event.touches[i];
+            const { clientX, clientY } = touch;
+            this.handleMoveLogic(clientX, clientY);
+        }
     };
 
     setMoving = (clientX: number, clientY: number, offsetX: number, offsetY: number) => {
@@ -97,7 +103,7 @@ export class MovableWindow extends React.Component<Props, State> {
 
     private onMouseMove = (event: MouseEvent) => {
         if (!this.moving) return;
-        if (!(event instanceof MouseEvent) || !event.isTrusted || event.ctrlKey || event.altKey || event.metaKey){
+        if (!(event instanceof MouseEvent) || event.ctrlKey || event.altKey || event.metaKey){
             return;
         }
         const { clientX, clientY } = event;
@@ -153,21 +159,26 @@ export class MovableWindow extends React.Component<Props, State> {
             this.setState(point);
         }
     }
+    onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        this.setMoving(event.clientX,event.clientY, event.nativeEvent.offsetX, event.nativeEvent.offsetY);
+        this.setState({moving: true});
+    };
+    onTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
+        const lastTouch = event.nativeEvent.touches[event.nativeEvent.touches.length - 1];
+        const div = event.target as HTMLDivElement;
+        const { x, y, width, height} = div.getBoundingClientRect();
+        const offsetX = (lastTouch.clientX - x) / width * div.offsetWidth;
+        const offsetY = (lastTouch.clientY - y) / height * div.offsetHeight;
+        this.setMoving(lastTouch.clientX, lastTouch.clientY, offsetX, offsetY);
+        this.setState({moving: true});
+    };
+
     get storageKey() {
         return `__storage__${this.props.storageKey}`;
     }
     render() {
         return <Movable ref={this.ref} style={{left: `${this.state.x}px`, top: `${this.state.y}px`}}>
-            <DragArea ref={this.dragRef} style={{cursor: this.state.moving ? "grabbing" : ""}} onMouseDown={event => {
-                this.moving = {
-                    x: event.clientX,
-                    y: event.clientY,
-                    xOff: event.nativeEvent.offsetX,
-                    yOff: event.nativeEvent.offsetY,
-                };
-                this.setState({moving: true});
-            
-        }}> <h2>{this.props.title}</h2> </DragArea>
+            <DragArea ref={this.dragRef} style={{cursor: this.state.moving ? "grabbing" : ""}} onMouseDown={this.onMouseDown} onTouchStart={this.onTouchStart} > <h2>{this.props.title}</h2> </DragArea>
 
 
             {this.props.children}