feat: enhance scaling functionality to support WheelEvent and improve event handling

Author: yunbookf

dist/index.esm.js

@@ -265,7 +265,6 @@ function calcBorderType(inTop, inRight, inBottom, inLeft, x, y, left, top, right
  * @param opt 回调选项
  */
 function move(e, opt) {
-    const target = e.target;
     isMoving = true;
     set(opt.cursor ?? getComputedStyle(e.target).cursor);
     let { x: tx, y: ty } = getEventPos(e);
@@ -293,7 +292,6 @@ function move(e, opt) {
     let objectLeft = 0, objectTop = 0, objectWidth = 0, objectHeight = 0;
     let offsetLeft = 0, offsetTop = 0, offsetRight = 0, offsetBottom = 0;
     const moveTimes = [];
-    target.style.touchAction = 'none';
     down(e, {
         start: () => {
             if (opt.start?.(tx, ty) === false) {
@@ -367,7 +365,6 @@ function move(e, opt) {
         },
         end: (ne) => {
             opt.end?.(moveTimes, ne);
-            target.style.touchAction = '';
         }
     });
     return { 'left': left, 'top': top, 'right': right, 'bottom': bottom };
@@ -718,14 +715,15 @@ function drag(e, el, opt) {
  * limitations under the License.
  */
 /**
- * --- 绑定滚轮缩放，需要绑定到 wheel 事件上 ---
+ * --- 绑定滚轮缩放 ---
  * @param oe 触发的 WheelEvent 事件
  * @param handler 回调函数
  */
 function scaleWheel(oe, handler) {
     if (!oe.deltaY) {
         return;
     }
+    oe.preventDefault();
     const delta = Math.abs(oe.deltaY);
     const zoomFactor = delta * (delta > 50 ? 0.0015 : 0.003);
     handler(oe, oe.deltaY < 0 ? 1 + zoomFactor : 1 - zoomFactor, { 'x': 0, 'y': 0 });
@@ -736,6 +734,10 @@ function scaleWheel(oe, handler) {
  * @param handler 回调函数
  */
 function scale(oe, handler) {
+    if (oe instanceof WheelEvent) {
+        scaleWheel(oe, handler);
+        return;
+    }
     const target = oe.target;
     if (!target) {
         return;
@@ -1026,4 +1028,4 @@ function gesture(oe, before, handler) {
     }
 }
 
-export { allowEvent, click, dblClick, down, drag, gesture, getData as getDragData, getEventPos, getMoveDir, isMoving, isTouch, long, move, resize, scale, scaleWheel, set as setCursor, setData as setDragData };
+export { allowEvent, click, dblClick, down, drag, gesture, getData as getDragData, getEventPos, getMoveDir, isMoving, isTouch, long, move, resize, scale, set as setCursor, setData as setDragData };

dist/index.umd.js

@@ -271,7 +271,6 @@
      * @param opt 回调选项
      */
     function move(e, opt) {
-        const target = e.target;
         exports.isMoving = true;
         set(opt.cursor ?? getComputedStyle(e.target).cursor);
         let { x: tx, y: ty } = getEventPos(e);
@@ -299,7 +298,6 @@
         let objectLeft = 0, objectTop = 0, objectWidth = 0, objectHeight = 0;
         let offsetLeft = 0, offsetTop = 0, offsetRight = 0, offsetBottom = 0;
         const moveTimes = [];
-        target.style.touchAction = 'none';
         down(e, {
             start: () => {
                 if (opt.start?.(tx, ty) === false) {
@@ -373,7 +371,6 @@
             },
             end: (ne) => {
                 opt.end?.(moveTimes, ne);
-                target.style.touchAction = '';
             }
         });
         return { 'left': left, 'top': top, 'right': right, 'bottom': bottom };
@@ -724,14 +721,15 @@
      * limitations under the License.
      */
     /**
-     * --- 绑定滚轮缩放，需要绑定到 wheel 事件上 ---
+     * --- 绑定滚轮缩放 ---
      * @param oe 触发的 WheelEvent 事件
      * @param handler 回调函数
      */
     function scaleWheel(oe, handler) {
         if (!oe.deltaY) {
             return;
         }
+        oe.preventDefault();
         const delta = Math.abs(oe.deltaY);
         const zoomFactor = delta * (delta > 50 ? 0.0015 : 0.003);
         handler(oe, oe.deltaY < 0 ? 1 + zoomFactor : 1 - zoomFactor, { 'x': 0, 'y': 0 });
@@ -742,6 +740,10 @@
      * @param handler 回调函数
      */
     function scale(oe, handler) {
+        if (oe instanceof WheelEvent) {
+            scaleWheel(oe, handler);
+            return;
+        }
         const target = oe.target;
         if (!target) {
             return;
@@ -1046,7 +1048,6 @@
     exports.move = move;
     exports.resize = resize;
     exports.scale = scale;
-    exports.scaleWheel = scaleWheel;
     exports.setCursor = set;
     exports.setDragData = setData;
 

dist/index.umd.min.js

@@ -636,6 +636,7 @@ <h2>Event Testing</h2>
             });
         }
         scaleArea.addEventListener('pointerdown', handleScale);
+        scaleArea.addEventListener('wheel', handleScale);
 
         // --- gesture 演示 ---
         const gestureArea = document.getElementById('gesture-area');

dist/test/index.html

@@ -46,5 +46,5 @@ export { move, isMoving } from './move';
 export { click, dblClick, long, allowEvent } from './click';
 export { resize } from './resize';
 export { drag, getData as getDragData, setData as setDragData } from './drag';
-export { scale, scaleWheel } from './scale';
+export { scale } from './scale';
 export { gesture } from './gesture';

src/index.ts

@@ -35,14 +35,15 @@ interface IScaleState {
 }
 
 /**
- * --- 绑定滚轮缩放，需要绑定到 wheel 事件上 ---
+ * --- 绑定滚轮缩放 ---
  * @param oe 触发的 WheelEvent 事件
  * @param handler 回调函数
  */
-export function scaleWheel(oe: WheelEvent, handler: types.TScaleHandler): void {
+function scaleWheel(oe: WheelEvent, handler: types.TScaleHandler): void {
     if (!oe.deltaY) {
         return;
     }
+    oe.preventDefault();
     const delta = Math.abs(oe.deltaY);
     const zoomFactor = delta * (delta > 50 ? 0.0015 : 0.003);
     handler(oe, oe.deltaY < 0 ? 1 + zoomFactor : 1 - zoomFactor, { 'x': 0, 'y': 0 }) as any;
@@ -53,7 +54,11 @@ export function scaleWheel(oe: WheelEvent, handler: types.TScaleHandler): void {
  * @param oe 触发的 PointerEvent 事件
  * @param handler 回调函数
  */
-export function scale(oe: PointerEvent, handler: types.TScaleHandler): void {
+export function scale(oe: PointerEvent | WheelEvent, handler: types.TScaleHandler): void {
+    if (oe instanceof WheelEvent) {
+        scaleWheel(oe, handler);
+        return;
+    }
     const target = oe.target as HTMLElement;
     if (!target) {
         return;