Added touch control to Orbits and Moons/GRS views. Improved mobile keyboard input. Fixed checkbox layout problem.

Author: kshetline

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svc-ng",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "license": "MIT AND GPL-3.0-or-later",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "scripts": {

package.json

@@ -2,7 +2,7 @@
   <div class="about-dialog">
     <img src="/assets/resources/svc_lunar_eclipse.png" alt="lunar eclipse" width="64" height="64">
     <h2>Sky View Café NP</h2>
-    Version 1.4.9<br><br>
+    Version 1.4.10<br><br>
     Copyright © 2016-2018 Kerry Shetline.
   </div>
 </p-dialog>

src/app/app.component.html

@@ -26,7 +26,7 @@ import {
   ASTEROID_BASE, COMET_BASE, EARTH, FIRST_PLANET, HALF_MINUTE, ISkyObserver, LAST_PLANET, NO_MATCH, SkyObserver, SolarSystem,
   StarCatalog, UT_to_TDB
 } from 'ks-astronomy';
-import { abs, ceil, max, Point } from 'ks-math';
+import { abs, ceil, max, Point, sqrt } from 'ks-math';
 import { FontMetrics, getFontMetrics, isSafari } from 'ks-util';
 import * as _ from 'lodash';
 import { KsDateTime } from 'ks-date-time-zone';
@@ -75,9 +75,10 @@ export abstract class GenericView implements AfterViewInit {
   protected clickX = -1;
   protected clickY = -1;
   protected canDrag = true;
+  protected canTouchZoom = false;
+  protected initialZoomSpread = 0; // 0 means not zooming.
   protected goodDragStart = false;
-  protected debouncedDraw: () => void;
-  protected throttledMouseMove: () => void;
+  protected throttledRedraw: () => void;
   protected debouncedResize: () => void;
   protected dragging = false;
   protected excludedPlanets: number[] = [EARTH];
@@ -125,9 +126,9 @@ export abstract class GenericView implements AfterViewInit {
 
     this.updatePlanetsToDraw();
 
-    this.debouncedDraw = _.debounce(() => {
+    this.throttledRedraw = _.throttle(() => {
       this.draw();
-    }, 0);
+    }, 100);
 
     appService.getCurrentTabUpdates((currentTab: CurrentTab) => {
       if (this.tabId === currentTab)
@@ -221,19 +222,27 @@ export abstract class GenericView implements AfterViewInit {
 
   // TODO: Turn into utility function
   // noinspection JSMethodCanBeStatic
-  protected getXYForTouchEvent(event: TouchEvent): Point {
+  protected getXYForTouchEvent(event: TouchEvent, index = 0): Point {
     const touches = event.touches;
 
-    if (touches.length < 1)
+    if (touches.length <= index)
       return {x: -1, y: -1};
 
-    const rect = (touches[0].target as HTMLElement).getBoundingClientRect();
+    const rect = (touches[index].target as HTMLElement).getBoundingClientRect();
 
-    return {x: touches[0].clientX - rect.left, y: touches[0].clientY - rect.top};
+    return {x: touches[index].clientX - rect.left, y: touches[0].clientY - rect.top};
   }
 
   onTouchStart(event: TouchEvent): void {
-    const pt = this.getXYForTouchEvent(event);
+    const pt0 = this.getXYForTouchEvent(event);
+    const pt = _.clone(pt0);
+    let pt1;
+
+    if (event.touches.length > 1) {
+      pt1 = this.getXYForTouchEvent(event, 1);
+      pt.x = (pt0.x + pt1.x) / 2;
+      pt.y = (pt0.y + pt1.y) / 2;
+    }
 
     this.clickX = this.lastMoveX = pt.x;
     this.clickY = this.lastMoveY = pt.y;
@@ -242,9 +251,21 @@ export abstract class GenericView implements AfterViewInit {
       this.goodDragStart = true;
       this.draw();
       event.preventDefault();
+
+      if (this.canTouchZoom && pt1) {
+        const dx = pt1.x - pt0.x;
+        const dy = pt1.y - pt0.y;
+
+        this.initialZoomSpread = max(sqrt(dx * dx + dy * dy), 1);
+        this.startTouchZoom();
+      }
+      else
+        this.initialZoomSpread = 0;
     }
-    else
+    else {
       this.goodDragStart = false;
+      this.initialZoomSpread = 0;
+    }
   }
 
   onMouseDown(event: MouseEvent): void {
@@ -254,15 +275,42 @@ export abstract class GenericView implements AfterViewInit {
   }
 
   onTouchMove(event: TouchEvent): void {
-    const pt = this.getXYForTouchEvent(event);
+    const pt0 = this.getXYForTouchEvent(event);
+    const pt = _.clone(pt0);
+    let pt1;
+
+    if (event.touches.length > 1) {
+      pt1 = this.getXYForTouchEvent(event, 1);
+      pt.x = (pt0.x + pt1.x) / 2;
+      pt.y = (pt0.y + pt1.y) / 2;
+    }
 
     if (this.goodDragStart)
       this.handleMouseMove(pt.x, pt.y, true);
 
+    if (this.initialZoomSpread) {
+      if (pt1) {
+        const dx = pt1.x - pt0.x;
+        const dy = pt1.y - pt0.y;
+        const newSpread = max(sqrt(dx * dx + dy * dy), 1);
+        const zoomRatio = newSpread / this.initialZoomSpread;
+
+        this.touchZoom(zoomRatio);
+      }
+      else
+        this.initialZoomSpread = 0;
+    }
+
     if (this.isInsideView())
       event.preventDefault();
   }
 
+  protected startTouchZoom(): void {
+  }
+
+  protected touchZoom(zoomRatio: number): void {
+  }
+
   onMouseMove(event: MouseEvent): void {
     if (this.goodDragStart || !this.dragging)
       this.handleMouseMove(event.offsetX, event.offsetY, !!((event.buttons & 0x01) || (this.isSafari && (event.which & 0x01))));
@@ -272,7 +320,7 @@ export abstract class GenericView implements AfterViewInit {
     this.lastMoveX = x;
     this.lastMoveY = y;
 
-    let  justCleared = false;
+    let justCleared = false;
 
     if (!this.isInsideView()) {
       this.clearMouseHighlighting();
@@ -289,30 +337,26 @@ export abstract class GenericView implements AfterViewInit {
       this.resetCursor();
     }
 
-    if (!this.dragging || justCleared) {
-      if (!this.throttledMouseMove) {
-         this.throttledMouseMove = _.throttle(() => {
-           this.draw();
-         }, 100);
-      }
-
-      this.throttledMouseMove();
-    }
+    if (!this.dragging || justCleared)
+      this.throttledRedraw();
   }
 
   protected clearMouseHighlighting(): void {
     this.lastMoveX = this.lastMoveY = -1;
   }
 
   onTouchEnd(event: TouchEvent): void {
-    const pt = this.getXYForTouchEvent(event);
+    if (event.touches.length < 2)
+      this.initialZoomSpread = 0;
 
-    this.lastMoveX = pt.x;
-    this.lastMoveY = pt.y;
-    this.resetCursor();
-    this.draw();
-    this.dragging = false;
-    event.preventDefault();
+    if (event.touches.length === 1)
+      this.onTouchStart(event);
+    else if (event.touches.length === 0) {
+      this.resetCursor();
+      this.draw();
+      this.dragging = false;
+      event.preventDefault();
+    }
   }
 
   onMouseUp(event: MouseEvent): void {

src/app/svc/generic-view.ts

@@ -134,7 +134,7 @@ export class SvcEclipticViewComponent extends GenericSkyView implements AfterVie
           this.updatePlanetsToDraw();
         }
 
-        this.debouncedDraw();
+        this.throttledRedraw();
       }
     });
   }

src/app/svc/svc-ecliptic-view/svc-ecliptic-view.component.ts

@@ -100,7 +100,7 @@ export class SvcInsolationViewComponent extends GenericView implements AfterView
           this.showMoonlight = <boolean> setting.value;
 
         this.refreshImage = true;
-        this.debouncedDraw();
+        this.throttledRedraw();
       }
     });
 
@@ -323,7 +323,7 @@ export class SvcInsolationViewComponent extends GenericView implements AfterView
 
     if (this.wasWithinGraph !== within) {
       this.wasWithinGraph = within;
-      this.debouncedDraw();
+      this.throttledRedraw();
     }
   }
 

src/app/svc/svc-insolation-view/svc-insolation-view.component.ts

@@ -137,7 +137,7 @@ export class SvcMapViewComponent extends GenericView implements AfterViewInit {
         else if (setting.property === PROPERTY_BLINK_LOCATION_MARKERS)
           this.blink = <boolean> setting.value;
 
-        this.debouncedDraw();
+        this.throttledRedraw();
       }
     });
 
@@ -185,7 +185,7 @@ export class SvcMapViewComponent extends GenericView implements AfterViewInit {
       context.fillStyle = shadowColor;
       context.fillRect(0, 0, this.politicalMap.width, this.politicalMap.height);
 
-      this.debouncedDraw();
+      this.throttledRedraw();
     }).catch((reason: any) => {
       return Promise.reject('Failed to load all images: ' + reason);
     });

src/app/svc/svc-map-view/svc-map-view.component.ts

@@ -1,9 +1,9 @@
 <div #canvasWrapper class="canvasWrapper">
   <div class="canvasAnchor">
     <canvas #orbitCanvas (window:resize)="onResize()"
-            (mousedown)="onMouseDown($event)"
-            (mousemove)="onMouseMove($event)"
-            (mouseup)="onMouseUp($event)"
+            (touchstart)="onTouchStart($event)"
+            (touchmove)="onTouchMove($event)" (mousemove)="onMouseMove($event)"
+            (touchend)="onTouchEnd($event)" (touchcancel)="onTouchEnd($event)"
             (wheel)="onWheel($event)"
             [style.cursor]="cursor"
     ></canvas>

src/app/svc/svc-moons-view/svc-moons-view.component.html

@@ -84,7 +84,6 @@ export class SvcMoonsViewComponent extends GenericPlanetaryView implements After
   private jupiterMoons = new JupitersMoons();
   private saturnDrawer: SaturnDrawer;
   private saturnMoons = new SaturnMoons();
-  private debouncedWheelRedraw: () => void;
 
   private northOnTop = true;
   private eastOnLeft = true;
@@ -95,6 +94,7 @@ export class SvcMoonsViewComponent extends GenericPlanetaryView implements After
   private grsOverride = false;
   private fixedGrs = DEFAULT_FIXED_GRS;
   private zoom = SvcMoonsViewComponent.zoomToZoomSteps(DEFAULT_ZOOM);
+  private initialZoomScale: number;
 
   @ViewChild('canvasWrapper') private wrapperRef: ElementRef;
   @ViewChild('orbitCanvas') private canvasRef: ElementRef;
@@ -103,6 +103,8 @@ export class SvcMoonsViewComponent extends GenericPlanetaryView implements After
   constructor(appService: AppService, private astroDataService: AstroDataService, private httpClient: HttpClient) {
     super(appService, CurrentTab.MOONS_GRS);
 
+    this.canTouchZoom = true;
+
     appService.getUserSettingUpdates((setting: UserSetting) => {
       if (setting.view === VIEW_MOONS && setting.source !== this) {
         if (setting.property === PROPERTY_NORTH_ON_TOP)
@@ -124,7 +126,7 @@ export class SvcMoonsViewComponent extends GenericPlanetaryView implements After
         else if (setting.property === PROPERTY_ZOOM)
           this.zoom = <number> setting.value;
 
-        this.debouncedDraw();
+        this.throttledRedraw();
       }
     });
   }
@@ -137,12 +139,12 @@ export class SvcMoonsViewComponent extends GenericPlanetaryView implements After
     JupiterDrawer.getJupiterDrawer(this.astroDataService, this.httpClient).then((drawer: JupiterDrawer) => {
       this.jupiterDrawer = drawer;
       this.jupiterInfo = this.jupiterDrawer.getJupiterInfo();
-      this.debouncedDraw();
+      this.throttledRedraw();
     });
 
     SaturnDrawer.getSaturnDrawer().then((drawer: SaturnDrawer) => {
       this.saturnDrawer = drawer;
-      this.debouncedDraw();
+      this.throttledRedraw();
     });
 
     setTimeout(() => this.appService.requestViewSettings(VIEW_MOONS));
@@ -505,13 +507,6 @@ export class SvcMoonsViewComponent extends GenericPlanetaryView implements After
   // noinspection JSUnusedGlobalSymbols
   onWheel(event: WheelEvent): void {
     const oldZoom = this.zoom;
-
-    if (!this.debouncedWheelRedraw) {
-      this.debouncedWheelRedraw = _.debounce(() => {
-        this.draw();
-      }, 10);
-    }
-
     let zoomDelta = event.wheelDeltaY;
 
     if (zoomDelta === undefined)
@@ -527,13 +522,30 @@ export class SvcMoonsViewComponent extends GenericPlanetaryView implements After
     this.zoom = min(max(this.zoom + round(zoomDelta), 0), ZOOM_STEPS);
 
     if (this.zoom !== oldZoom) {
-      this.debouncedWheelRedraw();
+      this.throttledRedraw();
       this.appService.updateUserSetting({view: VIEW_MOONS, property: PROPERTY_ZOOM, value: this.zoom, source: this});
     }
 
     event.preventDefault();
   }
 
+  protected startTouchZoom(): void {
+    this.initialZoomScale = pow(10.0, LOG_MIN_ZOOM + ZOOM_LOG_RANGE * this.zoom / ZOOM_STEPS);
+  }
+
+  protected touchZoom(zoomRatio: number): void {
+    const oldZoom = this.zoom;
+    const scale = this.initialZoomScale / zoomRatio;
+    const newZoom = ZOOM_STEPS * (log10(scale) - LOG_MIN_ZOOM) / ZOOM_LOG_RANGE;
+
+    this.zoom = min(max(newZoom, 0), ZOOM_STEPS);
+
+    if (this.zoom !== oldZoom) {
+      this.throttledRedraw();
+      this.appService.updateUserSetting({view: VIEW_MOONS, property: PROPERTY_ZOOM, value: this.zoom, source: this});
+    }
+  }
+
   protected drawSkyPlotLine(pt1: Point, pt2: Point, dc: DrawingContextPlanetary, subject: SUBJECT): boolean {
     return false;
   }

src/app/svc/svc-moons-view/svc-moons-view.component.ts

@@ -16,9 +16,9 @@
 <div #canvasWrapper class="canvasWrapper">
   <div class="canvasAnchor">
     <canvas #orbitCanvas (window:resize)="onResize()"
-            (mousedown)="onMouseDown($event)"
-            (mousemove)="onMouseMove($event)"
-            (mouseup)="onMouseUp($event)"
+            (touchstart)="onTouchStart($event)" (mousedown)="onMouseDown($event)"
+            (touchmove)="onTouchMove($event)" (mousemove)="onMouseMove($event)"
+            (touchend)="onTouchEnd($event)" (touchcancel)="onTouchEnd($event)" (mouseup)="onMouseUp($event)"
             (wheel)="onWheel($event)"
             [style.cursor]="cursor"
     ></canvas>