added wheel gestures stuff

zoompinch-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zoompinch",
   "private": false,
-  "version": "0.0.38",
+  "version": "0.0.39",
   "type": "module",
   "files": [
     "package.json",

zoompinch-vue/src/components/Zoompinch.vue

@@ -43,7 +43,8 @@
 import { useZoom } from '../controllers/zoom';
 import { ref, defineProps, toRef, computed, onMounted, watch, toRefs, onUnmounted, reactive } from 'vue';
 import { radiansToDegrees } from '../controllers/helpers';
-import { detectTrackpad } from '../controllers/wheel';
+// import { detectTrackpad } from '../controllers/wheel';
+import { WheelEventState, WheelGestures } from '../controllers/wheel-gestures';
 
 export type Transform = {
   x: number;
@@ -87,6 +88,8 @@ const props = withDefaults(
 );
 const emit = defineEmits<{
   'update:transform': [transform: Transform];
+  dragGestureStart: [];
+  dragGestureEnd: [];
 }>();
 
 const zoompinchRef = ref<HTMLElement>();
@@ -172,15 +175,37 @@ onMounted(() => {
   // };
 });
 
+const wheelGestures = WheelGestures();
+wheelGestures.on('wheel', (wheelEventState) => {
+  if (props.wheel) {
+    if (wheelEventState.isStart) {
+      emit('dragGestureStart');
+    }
+    handleWheel(wheelEventState.event as any);
+    if (wheelEventState.isEnding) {
+      emit('dragGestureEnd');
+    }
+  }
+});
+onMounted(() => {
+  if (zoompinchRef.value) {
+    wheelGestures.observe(zoompinchRef.value);
+  }
+});
+onUnmounted(() => {
+  wheelGestures.disconnect();
+});
+
 const wheelProxy = (event: WheelEvent) => {
   if (props.wheel) {
-    const isTrackpad = detectTrackpad(event);
-    console.log('isTrackpad', isTrackpad);
-    handleWheel(event);
+    // const isTrackpad = detectTrackpad(event);
+    // console.log('isTrackpad', isTrackpad);
+    // handleWheel(event);
   }
 };
 const touchstartProxy = (event: TouchEvent) => {
   if (props.touch) {
+    emit('dragGestureStart');
     handleTouchstart(event);
   }
 };
@@ -192,10 +217,12 @@ const touchmoveProxy = (event: TouchEvent) => {
 const touchendProxy = (event: TouchEvent) => {
   if (props.touch) {
     handleTouchend(event);
+    emit('dragGestureEnd');
   }
 };
 const mousedownProxy = (event: MouseEvent) => {
   if (props.mouse) {
+    emit('dragGestureStart');
     handleMousedown(event);
   }
 };
@@ -207,6 +234,7 @@ const mousemoveProxy = (event: MouseEvent) => {
 const mouseupProxy = (event: MouseEvent) => {
   if (props.mouse) {
     handleMouseup(event);
+    emit('dragGestureEnd');
   }
 };
 function isTouchDevice() {

zoompinch-vue/src/controllers/wheel-gestures/events/EventBus.ts

@@ -0,0 +1,29 @@
+import { deepFreeze } from '../utils'
+
+export type EventMapEmpty = Record<string, unknown>
+export type EventListener<D = unknown> = (data: D) => void
+export type Off = () => void
+
+export default function EventBus<EventMap = EventMapEmpty>() {
+  const listeners = {} as Record<keyof EventMap, EventListener<never>[]>
+
+  function on<EK extends keyof EventMap>(type: EK, listener: EventListener<EventMap[EK]>): Off {
+    listeners[type] = (listeners[type] || []).concat(listener)
+    return () => off(type, listener)
+  }
+
+  function off<EK extends keyof EventMap>(type: EK, listener: EventListener<EventMap[EK]>) {
+    listeners[type] = (listeners[type] || []).filter((l) => l !== listener)
+  }
+
+  function dispatch<EK extends keyof EventMap>(type: EK, data: EventMap[EK]) {
+    if (!(type in listeners)) return
+    ;(listeners[type] as EventListener<EventMap[EK]>[]).forEach((l) => l(data))
+  }
+
+  return deepFreeze({
+    on,
+    off,
+    dispatch,
+  })
+}

zoompinch-vue/src/controllers/wheel-gestures/events/WheelTargetObserver.ts

@@ -0,0 +1,33 @@
+import { WheelEventData } from '../types'
+import { deepFreeze } from '../utils'
+
+type UnobserveTarget = () => void
+
+export function WheelTargetObserver(eventListener: (wheelEvent: WheelEventData) => void) {
+  let targets: EventTarget[] = []
+
+  // add event listener to target element
+  const observe = (target: EventTarget): UnobserveTarget => {
+    target.addEventListener('wheel', eventListener as EventListener, { passive: false })
+    targets.push(target)
+
+    return () => unobserve(target)
+  }
+
+  /// remove event listener from target element
+  const unobserve = (target: EventTarget) => {
+    target.removeEventListener('wheel', eventListener as EventListener)
+    targets = targets.filter((t) => t !== target)
+  }
+
+  // stops watching all of its target elements for visibility changes.
+  const disconnect = () => {
+    targets.forEach(unobserve)
+  }
+
+  return deepFreeze({
+    observe,
+    unobserve,
+    disconnect,
+  })
+}

zoompinch-vue/src/controllers/wheel-gestures/index.ts

@@ -0,0 +1,5 @@
+export { WheelGestures as default } from './wheel-gestures/wheel-gestures'
+export * from './wheel-gestures/wheel-gestures'
+export { configDefaults } from './wheel-gestures/options'
+export * from './types'
+export * from './utils'