@netless/forge-imagery-doc 1.0.10 → 1.1.0-beta.2

package/src/InfinityScroll.ts

@@ -11,10 +11,26 @@ export class InfinityScroll extends EventEmitter<InfinityScrollEvents> {
   private lastDelta: {x: number, y: number} = { x: 0, y: 0 };
   private lastTriggerTime: number = 0;
 
+  // Touch event properties
+  private lastTouchDistance: number = 0;
+  private lastTouchCenter: {x: number, y: number} = { x: 0, y: 0 };
+  private isPinching: boolean = false;
+
+  // Gesture detection properties
+  private touchEventCache: Array<{x: number, y: number, distance: number}> = [];
+  private gestureType: 'drag' | 'zoom' | 'unknown' = 'unknown';
+  private gestureDetectionComplete: boolean = false;
+
   public constructor(view: HTMLDivElement) {
     super();
     this.view = view;
     this.view.addEventListener('wheel', this.handleWheel, { passive: false, capture: true });
+
+    console.log(this.view);
+    // Add touch event listeners
+    this.view.addEventListener('touchstart', this.handleTouchStart, { passive: false, capture: true });
+    this.view.addEventListener('touchmove', this.handleTouchMove, { passive: false, capture: true });
+    this.view.addEventListener('touchend', this.handleTouchEnd, { passive: false, capture: true });
   }
 
   private handleWheel = (evt: WheelEvent) => {
@@ -49,8 +65,153 @@ export class InfinityScroll extends EventEmitter<InfinityScrollEvents> {
     this.lastDelta = { x: 0, y: 0 };
   };
 
+  private handleTouchStart = (evt: TouchEvent) => {
+    console.log('Touch Start');
+    evt.preventDefault();
+
+    if (evt.touches.length === 2) {
+      // Reset gesture detection for new gesture
+      this.resetGestureDetection();
+      this.isPinching = true;
+      this.lastTouchDistance = this.getDistance(evt.touches[0], evt.touches[1]);
+      this.lastTouchCenter = this.getCenter(evt.touches[0], evt.touches[1]);
+    }
+  };
+
+  private handleTouchMove = (evt: TouchEvent) => {
+    evt.preventDefault();
+
+    if (evt.touches.length === 2 && this.isPinching) {
+      const currentDistance = this.getDistance(evt.touches[0], evt.touches[1]);
+      const currentCenter = this.getCenter(evt.touches[0], evt.touches[1]);
+
+      // Detect gesture type if not yet determined
+      if (!this.gestureDetectionComplete) {
+        this.gestureType = this.detectGesture(evt.touches[0], evt.touches[1]);
+
+        if (this.gestureType !== 'unknown') {
+          this.gestureDetectionComplete = true;
+        }
+      }
+
+      // Handle based on detected gesture
+      if (this.gestureType === 'drag' || this.gestureType === 'unknown') {
+        // Handle two-finger drag
+        const deltaX = currentCenter.x - this.lastTouchCenter.x;
+        const deltaY = this.lastTouchCenter.y - currentCenter.y;
+        this.emit('translate', deltaX, deltaY);
+      }
+
+      if (this.gestureType === 'zoom' || this.gestureType === 'unknown') {
+        // Handle pinch-to-zoom
+        if (this.lastTouchDistance > 0) {
+          const scale = currentDistance / this.lastTouchDistance;
+          this.emit('scale', scale);
+        }
+      }
+
+      this.lastTouchDistance = currentDistance;
+      this.lastTouchCenter = currentCenter;
+    }
+  };
+
+  private handleTouchEnd = (evt: TouchEvent) => {
+    evt.preventDefault();
+
+    if (evt.touches.length < 2) {
+      this.isPinching = false;
+      this.lastTouchDistance = 0;
+      this.resetGestureDetection();
+    }
+  };
+
+  private getDistance = (touch1: Touch, touch2: Touch): number => {
+    const dx = touch1.clientX - touch2.clientX;
+    const dy = touch1.clientY - touch2.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
+
+  private getCenter = (touch1: Touch, touch2: Touch): {x: number, y: number} => {
+    return {
+      x: (touch1.clientX + touch2.clientX) / 2,
+      y: (touch1.clientY + touch2.clientY) / 2,
+    };
+  };
+
+  private detectGesture = (touch1: Touch, touch2: Touch): 'drag' | 'zoom' | 'unknown' => {
+    const center = this.getCenter(touch1, touch2);
+    const distance = this.getDistance(touch1, touch2);
+
+    // Add to cache
+    this.touchEventCache.push({ x: center.x, y: center.y, distance });
+
+    // Keep only last 3 events
+    if (this.touchEventCache.length > 3) {
+      this.touchEventCache.shift();
+    }
+
+    // Need at least 3 events to determine gesture
+    if (this.touchEventCache.length < 3) {
+      return 'unknown';
+    }
+
+    // Check for drag gesture (consistent movement in one direction)
+    const events = this.touchEventCache;
+    let xDirectionSame = true;
+    let yDirectionSame = true;
+
+    // Check X axis direction consistency
+    const xDirection1 = Math.sign(events[1].x - events[0].x);
+    const xDirection2 = Math.sign(events[2].x - events[1].x);
+
+    if (xDirection1 !== 0 && xDirection2 !== 0 && xDirection1 !== xDirection2) {
+      xDirectionSame = false;
+    }
+
+    // Check Y axis direction consistency
+    const yDirection1 = Math.sign(events[1].y - events[0].y);
+    const yDirection2 = Math.sign(events[2].y - events[1].y);
+
+    if (yDirection1 !== 0 && yDirection2 !== 0 && yDirection1 !== yDirection2) {
+      yDirectionSame = false;
+    }
+
+    // If movement is consistent in either axis, it's a drag
+    if (xDirectionSame || yDirectionSame) {
+      const movementThreshold = 10; // Minimum movement to be considered drag
+      const totalXMovement = Math.abs(events[2].x - events[0].x);
+      const totalYMovement = Math.abs(events[2].y - events[0].y);
+
+      if (totalXMovement > movementThreshold || totalYMovement > movementThreshold) {
+        return 'drag';
+      }
+    }
+
+    // Check for zoom gesture (significant distance change)
+    const totalDistanceChange = Math.abs(events[2].distance - events[0].distance);
+
+    const zoomThreshold = 15; // Minimum distance change to be considered zoom
+    if (totalDistanceChange > zoomThreshold) {
+      return 'zoom';
+    }
+
+    return 'unknown';
+  };
+
+  private resetGestureDetection = () => {
+    this.touchEventCache = [];
+    this.gestureType = 'unknown';
+    this.gestureDetectionComplete = false;
+  };
+
   public dispose() {
     this.view.removeEventListener('wheel', this.handleWheel);
+
+    // Remove touch event listeners
+    this.view.removeEventListener('touchstart', this.handleTouchStart);
+    this.view.removeEventListener('touchmove', this.handleTouchMove);
+    this.view.removeEventListener('touchend', this.handleTouchEnd);
+
     this.removeAllListeners();
   }
 }