diff src/app/waveform/waveform.component.ts @ 81:13955649f5af

Ad-hoc pan and pinch zoom for waveform - only tested in iOS simulator, very unpleasant.

--- a/src/app/waveform/waveform.component.ts	Wed Jan 18 17:50:39 2017 +0000
+++ b/src/app/waveform/waveform.component.ts	Wed Feb 22 18:09:50 2017 +0000
@@ -14,6 +14,7 @@
 } from "piper/HigherLevelUtilities";
 import {toSeconds} from "piper";
 import {FeatureList, Feature} from "piper/Feature";
+import * as Hammer from 'hammerjs';
 
 type Timeline = any; // TODO what type actually is it.. start a .d.ts for waves-ui?
 type Layer = any;
@@ -159,6 +160,34 @@
     this.timeline.state = new wavesUI.states.CenteredZoomState(this.timeline);
     mainTrack.render();
     mainTrack.update();
+
+
+    if ('ontouchstart' in window) {
+      console.log('TOUCH!');
+      const scroll = (ev) => {
+        const sign = ev.direction === Hammer.DIRECTION_LEFT ? -1 : 1;
+        let delta = this.timeline.timeContext.timeToPixel.invert(sign * ev.distance);
+        if (Math.abs(ev.velocityX) < 2 /*arbitrary, it just felt a bit better than 1*/) {
+          delta *= Math.abs(ev.velocityX);
+        }
+        this.timeline.timeContext.offset += delta;
+        this.timeline.tracks.update();
+      };
+      const zoom = (ev) => {
+        const minZoom = this.timeline.state.minZoom;
+        const maxZoom = this.timeline.state.maxZoom;
+        const initialZoom = this.timeline.timeContext.zoom;
+        const targetZoom = initialZoom * ev.scale;
+        this.timeline.timeContext.zoom = Math.min(Math.max(targetZoom, minZoom), maxZoom);
+        this.timeline.tracks.update();
+      };
+      const hammertime = new Hammer(this.trackDiv.nativeElement);
+      hammertime.get('pinch').set({ enable: true });
+      hammertime.on('panleft', scroll);
+      hammertime.on('panright', scroll);
+      hammertime.on('pinch', zoom);
+    }
+
     this.animate();
   }