Browse Source

fix(touch) Fix switching between mobile/desktop mode #11

Justin Litten 4 years ago
parent
commit
42140ba82f

+ 1 - 0
src/Display/SheetRenderingManager.ts

@@ -332,6 +332,7 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
     protected handleUserDisplayInteraction( relativePositionOnDisplay: PointF2D, positionOnMusicSheet: PointF2D,
     protected handleUserDisplayInteraction( relativePositionOnDisplay: PointF2D, positionOnMusicSheet: PointF2D,
                                             type: InteractionType): void {
                                             type: InteractionType): void {
         switch (type) {
         switch (type) {
+            case InteractionType.TouchDown:
             case InteractionType.SingleTouch:
             case InteractionType.SingleTouch:
             case InteractionType.DoubleTouch: {
             case InteractionType.DoubleTouch: {
                 // switch (this.Tool) {
                 // switch (this.Tool) {

+ 7 - 9
src/Display/WebDisplayInteractionManager.ts

@@ -3,7 +3,6 @@ import { PointF2D } from "../Common/DataObjects/PointF2D";
 import { Dictionary } from "typescript-collections";
 import { Dictionary } from "typescript-collections";
 
 
 export class WebDisplayInteractionManager extends AbstractDisplayInteractionManager {
 export class WebDisplayInteractionManager extends AbstractDisplayInteractionManager {
-    protected isTouchDevice: boolean = false;
     protected osmdSheetMusicContainer: HTMLElement;
     protected osmdSheetMusicContainer: HTMLElement;
     protected fullOffsetLeft: number = 0;
     protected fullOffsetLeft: number = 0;
     protected fullOffsetTop: number = 0;
     protected fullOffsetTop: number = 0;
@@ -16,7 +15,6 @@ export class WebDisplayInteractionManager extends AbstractDisplayInteractionMana
 
 
     constructor(osmdContainer: HTMLElement) {
     constructor(osmdContainer: HTMLElement) {
         super();
         super();
-        this.isTouchDevice = this.isTouch();
         this.osmdSheetMusicContainer = osmdContainer;
         this.osmdSheetMusicContainer = osmdContainer;
         this.listenForInteractions();
         this.listenForInteractions();
     }
     }
@@ -166,11 +164,11 @@ export class WebDisplayInteractionManager extends AbstractDisplayInteractionMana
     }
     }
 
 
     protected get downEventName(): string {
     protected get downEventName(): string {
-        return this.isTouchDevice ? "touchstart" : "mousedown";
+        return this.isTouch() ? "touchstart" : "mousedown";
     }
     }
 
 
     protected get moveEventName(): string {
     protected get moveEventName(): string {
-        return this.isTouchDevice ? "touchmove" : "mousemove";
+        return this.isTouch() ? "touchmove" : "mousemove";
     }
     }
     protected EventCallbackMap: Dictionary<string, [HTMLElement|Document, EventListener]> =
     protected EventCallbackMap: Dictionary<string, [HTMLElement|Document, EventListener]> =
                 new Dictionary<string, [HTMLElement|Document, EventListener]>();
                 new Dictionary<string, [HTMLElement|Document, EventListener]>();
@@ -179,10 +177,10 @@ export class WebDisplayInteractionManager extends AbstractDisplayInteractionMana
         const downEvent: (clickEvent: MouseEvent | TouchEvent) => void = this.downEventListener.bind(this);
         const downEvent: (clickEvent: MouseEvent | TouchEvent) => void = this.downEventListener.bind(this);
         const endTouchEvent: (clickEvent: TouchEvent) => void = this.touchEndEventListener.bind(this);
         const endTouchEvent: (clickEvent: TouchEvent) => void = this.touchEndEventListener.bind(this);
         const moveEvent: (clickEvent: MouseEvent | TouchEvent) => void = this.moveEventListener.bind(this);
         const moveEvent: (clickEvent: MouseEvent | TouchEvent) => void = this.moveEventListener.bind(this);
-        this.osmdSheetMusicContainer.addEventListener(this.downEventName, downEvent);
+        this.osmdSheetMusicContainer.addEventListener("mousedown", downEvent);
         this.osmdSheetMusicContainer.addEventListener("touchend", endTouchEvent);
         this.osmdSheetMusicContainer.addEventListener("touchend", endTouchEvent);
         document.addEventListener(this.moveEventName, moveEvent);
         document.addEventListener(this.moveEventName, moveEvent);
-        this.EventCallbackMap.setValue(this.downEventName, [this.osmdSheetMusicContainer, downEvent]);
+        this.EventCallbackMap.setValue("mousedown", [this.osmdSheetMusicContainer, downEvent]);
         this.EventCallbackMap.setValue("touchend", [this.osmdSheetMusicContainer, endTouchEvent]);
         this.EventCallbackMap.setValue("touchend", [this.osmdSheetMusicContainer, endTouchEvent]);
         this.EventCallbackMap.setValue(this.moveEventName, [document, moveEvent]);
         this.EventCallbackMap.setValue(this.moveEventName, [document, moveEvent]);
     }
     }
@@ -198,7 +196,7 @@ export class WebDisplayInteractionManager extends AbstractDisplayInteractionMana
         clearTimeout(this.clickTimeout);
         clearTimeout(this.clickTimeout);
         let x: number = 0;
         let x: number = 0;
         let y: number = 0;
         let y: number = 0;
-        if (this.isTouchDevice && clickEvent instanceof TouchEvent) {
+        if (this.isTouch() && clickEvent instanceof TouchEvent) {
             x = clickEvent.touches[0].pageX;
             x = clickEvent.touches[0].pageX;
             y = clickEvent.touches[0].pageY;
             y = clickEvent.touches[0].pageY;
         } else if (clickEvent instanceof MouseEvent) {
         } else if (clickEvent instanceof MouseEvent) {
@@ -214,7 +212,7 @@ export class WebDisplayInteractionManager extends AbstractDisplayInteractionMana
             const self: WebDisplayInteractionManager = this;
             const self: WebDisplayInteractionManager = this;
             this.clickTimeout = setTimeout(function(): void {
             this.clickTimeout = setTimeout(function(): void {
                 clearTimeout(this.clickTimeout);
                 clearTimeout(this.clickTimeout);
-                if (self.isTouchDevice) {
+                if (self.isTouch()) {
                     self.touchDown(clickMinusOffset.x, clickMinusOffset.y, undefined);
                     self.touchDown(clickMinusOffset.x, clickMinusOffset.y, undefined);
                 } else {
                 } else {
                     self.click(clickMinusOffset.x, clickMinusOffset.y);
                     self.click(clickMinusOffset.x, clickMinusOffset.y);
@@ -228,7 +226,7 @@ export class WebDisplayInteractionManager extends AbstractDisplayInteractionMana
 
 
         let x: number = 0;
         let x: number = 0;
         let y: number = 0;
         let y: number = 0;
-        if (this.isTouchDevice && mouseMoveEvent instanceof TouchEvent) {
+        if (this.isTouch() && mouseMoveEvent instanceof TouchEvent) {
             let touch: Touch = undefined;
             let touch: Touch = undefined;
             if(mouseMoveEvent.touches && mouseMoveEvent.touches.length > 0){
             if(mouseMoveEvent.touches && mouseMoveEvent.touches.length > 0){
                 touch = mouseMoveEvent.touches[0];
                 touch = mouseMoveEvent.touches[0];