feat: 限制图形拖拽只对鼠标左键生效

l-x-f · Jun 7, 2022 · 95bc754 · 95bc754
1 parent 70f8288
commit 95bc754
Show file tree

Hide file tree

Showing 10 changed files with 1,456 additions and 15 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,3 @@
 dist
 /node_modules
-# tests
+tests
diff --git a/dist/auto-drawing.esm.js b/dist/auto-drawing.esm.js
diff --git a/dist/auto-drawing.js b/dist/auto-drawing.js
@@ -19101,18 +19101,20 @@
       var state = {
         startX: 0,
         startY: 0,
-        isDown: false
+        canTranslate: false
       };
       zr.on('mousedown', function (e) {
         var _e$event = e.event,
             startX = _e$event.clientX,
             startY = _e$event.clientY;
         state.startX = startX;
-        state.startY = startY;
-        state.isDown = true;
+        state.startY = startY; // 判断用户点击的是否是鼠标左键 左键可以平移
+
+        state.canTranslate = e.event.button === 0 ? true : false;
       });
 
       function move(e) {
+        if (!state.canTranslate) return;
         var _e$event2 = e.event,
             clientX = _e$event2.clientX,
             clientY = _e$event2.clientY;
@@ -19138,7 +19140,7 @@
 
       zr.on('mouseup', function (e) {
         move(e);
-        state.isDown = true;
+        state.canTranslate = false;
       });
     }
     /**

diff --git a/dist/auto-drawing.min.js b/dist/auto-drawing.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auto-drawing",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "auto-drawing based zrender",
   "types": "dist/index.d.ts",
   "module": "dist/auto-drawing.esm.js",
@@ -68,4 +68,4 @@
       "npm run lint"
     ]
   }
-}
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -56,7 +56,7 @@ const rollupConfig = {
 
     // 使得 rollup 支持 commonjs 规范，识别 commonjs 规范的依赖
     commonjs(),
-    // 配合 commnjs 解析第三方模块
+    // 配合 commonjs 解析第三方模块
     resolve({
       // 将自定义选项传递给解析插件
       customResolveOptions: {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -56,14 +56,16 @@ export function translateGroup(
   group: ZRenderGroup,
   options?: { callback?: CallbackType }
 ): void {
-  const state = { startX: 0, startY: 0, isDown: false }
+  const state = { startX: 0, startY: 0, canTranslate: false }
   zr.on('mousedown', (e: any) => {
     const { clientX: startX, clientY: startY } = e.event
     state.startX = startX
     state.startY = startY
-    state.isDown = true
+    // 判断用户点击的是否是鼠标左键 左键可以平移
+    state.canTranslate = e.event.button === 0 ? true : false
   })
   function move(e: any) {
+    if (!state.canTranslate) return
     const { clientX, clientY } = e.event
     const stepX = clientX - state.startX
     const stepY = clientY - state.startY
@@ -87,7 +89,7 @@ export function translateGroup(
   }
   zr.on('mouseup', (e: any) => {
     move(e)
-    state.isDown = true
+    state.canTranslate = false
   })
 }