fix: make druggable with touch

packages/kite-chat-component/src/draggable-controller.ts

@@ -15,6 +15,7 @@ export class DraggableController {
 
     private handleMouseDownBound: (event: MouseEvent) => void;
     private handleClickBound: () => void;
+    private handleTouchStartBound: (event: TouchEvent) => void;
 
     constructor(
         private host: ReactiveControllerHost & HTMLElement,
@@ -31,25 +32,32 @@ export class DraggableController {
     hostConnected() {
         window.addEventListener('mousemove', this.handleMouseMove.bind(this));
         window.addEventListener('mouseup', this.handleMouseUp.bind(this));
+        window.addEventListener('touchmove', this.handleTouchMove.bind(this));
+        window.addEventListener('touchend', this.handleTouchEnd.bind(this));
         this.handleMouseDownBound = this.handleMouseDown.bind(this);
         this.handleClickBound = this.handleClick.bind(this);
+        this.handleTouchStartBound = this.handleTouchStart.bind(this);
     }
 
     hostUpdate() {
         if (this.targetElement) {
             this.targetElement.removeEventListener('mousedown', this.handleMouseDownBound);
             this.targetElement.removeEventListener('click', this.handleClickBound);
+            this.targetElement.removeEventListener('touchstart', this.handleTouchStartBound);
         }
     }
 
     hostUpdated() {
         this.targetElement.addEventListener('mousedown', this.handleMouseDownBound);
         this.targetElement.addEventListener('click', this.handleClickBound);
+        this.targetElement.addEventListener('touchstart', this.handleTouchStartBound);
     }
 
     hostDisconnected() {
         window.removeEventListener('mousemove', this.handleMouseMove.bind(this));
         window.removeEventListener('mouseup', this.handleMouseUp.bind(this));
+        window.removeEventListener('touchmove', this.handleTouchMove.bind(this));
+        window.removeEventListener('touchend', this.handleTouchEnd.bind(this));
     }
 
     private handleClick() {
@@ -65,36 +73,59 @@ export class DraggableController {
 
     private handleMouseDown(event: MouseEvent) {
         event.preventDefault();
+        this.start({ x: event.clientX, y: event.clientY });
+    }
+
+    private handleTouchStart(event: TouchEvent) {
+        this.start({ x: event.touches[0].clientX, y: event.touches[0].clientY });
+    }
+
+    private handleMouseMove(event: MouseEvent) {
+        event.preventDefault();
+        this.move({ x: event.clientX, y: event.clientY });
+    }
+
+    private handleTouchMove(event: TouchEvent) {
+        this.move({ x: event.touches[0].clientX, y: event.touches[0].clientY });
+    }
+
+    private start(position: Position) {
         if (this.targetElement) {
             this.clickOccurred = true;
             const rect = this.targetElement.getBoundingClientRect();
-            this.initial = { x: event.clientX, y: event.clientY };
+            this.initial = position;
             this.offset = { x: this.initial.x - rect.left, y: this.initial.y - rect.top };
             this.current = this.initial;
         }
     }
 
-    private handleMouseMove(event: MouseEvent) {
-        event.preventDefault();
+    private move(position: Position) {
         if (this.clickOccurred && !this.isDragging) {
-            this.current = { x: event.clientX, y: event.clientY };
+            this.current = position;
             if (this.isMoved()) {
                 this.isDragging = true;
                 this.targetElement.style.cursor = 'grabbing';
             }
         }
 
-        if (this.isDragging && this.targetElement) {
-            this.targetElement.style.left = `${event.clientX - this.offset.x}px`;
-            this.targetElement.style.top = `${event.clientY - this.offset.y}px`;
-            this.current = {x: event.clientX, y: event.clientY};
+        if (this.isDragging) {
+            this.current = position;
+            this.targetElement.style.left = `${this.current.x - this.offset.x}px`;
+            this.targetElement.style.top = `${this.current.y - this.offset.y}px`;
         }
     }
 
+    private end() {
+        this.isDragging = false;
+        this.clickOccurred = false;
+    }
+
     private handleMouseUp() {
         this.targetElement.style.cursor = 'pointer';
+        this.end();
+    }
 
-        this.isDragging = false;
-        this.clickOccurred = false;
+    private handleTouchEnd() {
+        this.end();
     }
 }