From 85b32e307a87b91b37d5323472bee33105207a8f Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Tue, 18 Jul 2023 17:48:50 +0800
Subject: [PATCH] feat: support mouse on touch device

---
 src/color-picker/style.scss      |  1 +
 src/cropper/style.scss           |  4 +++-
 src/data-grid/style.scss         |  1 +
 src/image-viewer/style.scss      |  1 +
 src/music-player/style.scss      |  2 ++
 src/scrollbar/style.scss         |  1 +
 src/shader-toy-player/style.scss |  2 +-
 src/share/util.ts                | 10 ++++++++++
 src/video-player/style.scss      |  2 ++
 src/window/style.scss            |  2 ++
 10 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/color-picker/style.scss b/src/color-picker/style.scss
index fa65eb1..0babe91 100644
--- a/src/color-picker/style.scss
+++ b/src/color-picker/style.scss
@@ -3,6 +3,7 @@
 
 .luna-color-picker {
   @include component();
+  touch-action: none;
   width: 225px;
   box-shadow: $box-shadow;
 }
diff --git a/src/cropper/style.scss b/src/cropper/style.scss
index 863e2aa..a531301 100644
--- a/src/cropper/style.scss
+++ b/src/cropper/style.scss
@@ -1,10 +1,12 @@
 @import '../share/variable';
+@import '../share/mixin';
 
 .luna-cropper {
+  @include component();
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
   position: relative;
-  user-select: none;
   min-height: 150px;
+  touch-action: none;
 }
 
 .preview {
diff --git a/src/data-grid/style.scss b/src/data-grid/style.scss
index 1e9a42f..275141d 100644
--- a/src/data-grid/style.scss
+++ b/src/data-grid/style.scss
@@ -98,6 +98,7 @@
   bottom: 0;
   width: 5px;
   z-index: 500;
+  touch-action: none;
   cursor: col-resize;
 }
 
diff --git a/src/image-viewer/style.scss b/src/image-viewer/style.scss
index 5a4dc9b..c619f74 100644
--- a/src/image-viewer/style.scss
+++ b/src/image-viewer/style.scss
@@ -4,6 +4,7 @@
 .luna-image-viewer {
   @include component();
   overflow: hidden;
+  touch-action: none;
   border: 1px solid $border-color;
 }
 
diff --git a/src/music-player/style.scss b/src/music-player/style.scss
index ad9e613..6e9c300 100644
--- a/src/music-player/style.scss
+++ b/src/music-player/style.scss
@@ -71,6 +71,7 @@
 }
 
 .controller-left {
+  touch-action: none;
   margin: 0 0 0 5px;
   padding: 6px 0;
   flex: 1;
@@ -154,6 +155,7 @@
 }
 
 .volume-controller {
+  touch-action: none;
   height: 0;
   position: absolute;
   bottom: 15px;
diff --git a/src/scrollbar/style.scss b/src/scrollbar/style.scss
index 9e54e26..5f224e9 100644
--- a/src/scrollbar/style.scss
+++ b/src/scrollbar/style.scss
@@ -49,6 +49,7 @@
 
 .thumb {
   position: absolute;
+  touch-action: none;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 3px;
 }
diff --git a/src/shader-toy-player/style.scss b/src/shader-toy-player/style.scss
index 142d4a9..b03a10b 100644
--- a/src/shader-toy-player/style.scss
+++ b/src/shader-toy-player/style.scss
@@ -6,7 +6,7 @@
   background: #000;
   width: 100%;
   height: 100%;
-  user-select: none;
+  touch-action: none;
   position: relative;
 }
 
diff --git a/src/share/util.ts b/src/share/util.ts
index d7254f7..029cabc 100644
--- a/src/share/util.ts
+++ b/src/share/util.ts
@@ -60,6 +60,7 @@ function traverseTree(tree: any[], handler: any) {
 }
 
 export const hasTouchSupport = 'ontouchstart' in root
+export const hasPointerSupport = 'PointerEvent' in root
 const touchEvents: any = {
   start: 'touchstart',
   move: 'touchmove',
@@ -70,8 +71,17 @@ const mouseEvents: any = {
   move: 'mousemove',
   end: 'mouseup',
 }
+const pointerEvents: any = {
+  start: 'pointerdown',
+  move: 'pointermove',
+  end: 'pointerup',
+}
 
 export function drag(name: string) {
+  if (hasPointerSupport) {
+    return pointerEvents[name]
+  }
+
   return hasTouchSupport ? touchEvents[name] : mouseEvents[name]
 }
 
diff --git a/src/video-player/style.scss b/src/video-player/style.scss
index 0ff5d67..9d03cd4 100644
--- a/src/video-player/style.scss
+++ b/src/video-player/style.scss
@@ -22,6 +22,7 @@
 }
 
 .controller-top {
+  touch-action: none;
   padding: 5px 0;
   position: absolute;
   bottom: 38px;
@@ -95,6 +96,7 @@
 }
 
 .volume-controller {
+  touch-action: none;
   display: inline-block;
   width: 0;
   height: 100%;
diff --git a/src/window/style.scss b/src/window/style.scss
index 8d4f420..fa22fd7 100644
--- a/src/window/style.scss
+++ b/src/window/style.scss
@@ -53,9 +53,11 @@
 
 .resizer {
   @include fill-window;
+  touch-action: none;
 }
 
 .title-bar {
+  touch-action: none;
   height: 30px;
   cursor: default;
   user-select: none;