Improve adaptation to different screen and window sizes. Add flick rejection to touch dragging.

Author: kshetline

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svc-ng",
-  "version": "1.4.10",
+  "version": "1.4.11",
   "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.10<br><br>
+    Version 1.4.11<br><br>
     Copyright © 2016-2018 Kerry Shetline.
   </div>
 </p-dialog>
@@ -56,7 +56,7 @@ <h2>Sky View Café NP</h2>
         <button type="button" pButton icon="fas fa-list" label="More..." (click)="moremenu.toggle($event)"></button>
       </div>
     </div>
-    <div class="lower-panel flex-container" fxFlex="100%" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutWrap="none" fxLayoutGap="4px">
+    <div class="lower-panel flex-container" fxFlex="100%" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="4px">
       <ks-tab-view fxFlex="1 0 auto" (onChange)="tabChanged($event)" [activeTab]="selectedTab">
         <ks-tab header="Sky">
           <svc-sky-view></svc-sky-view>

src/app/app.component.html

@@ -1,5 +1,5 @@
 /*
-  Copyright © 2017 Kerry Shetline, kerry@shetline.com.
+  Copyright © 2017-2018 Kerry Shetline, kerry@shetline.com.
 
   This code is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
@@ -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, sqrt } from 'ks-math';
+import { max, Point, sqrt } from 'ks-math';
 import { FontMetrics, getFontMetrics, isSafari } from 'ks-util';
 import * as _ from 'lodash';
 import { KsDateTime } from 'ks-date-time-zone';
@@ -36,8 +36,7 @@ import { Subscription, BehaviorSubject, Observable } from 'rxjs';
 export const PROPERTY_ADDITIONALS = 'additionals';
 export enum    ADDITIONALS {NONE, ALL_ASTEROIDS, ALL_COMETS, ALL}
 
-const MAX_RESIZE_TOLERANCE = 4;
-const MAX_RESIZE_CYCLES = 3;
+const FLICK_REJECTION_THRESHOLD = 250;
 
 export interface DrawingContext {
   context: CanvasRenderingContext2D;
@@ -78,8 +77,9 @@ export abstract class GenericView implements AfterViewInit {
   protected canTouchZoom = false;
   protected initialZoomSpread = 0; // 0 means not zooming.
   protected goodDragStart = false;
+  protected dragStartTime = 0;
   protected throttledRedraw: () => void;
-  protected debouncedResize: () => void;
+  protected throttledResize: () => void;
   protected dragging = false;
   protected excludedPlanets: number[] = [EARTH];
   protected isSafari = false;
@@ -88,10 +88,6 @@ export abstract class GenericView implements AfterViewInit {
   protected lastDrawingContext: DrawingContext;
   protected planetsToDraw: number[] = [];
   protected additional: ADDITIONALS | string = ADDITIONALS.NONE;
-  protected waitingForResizeToSettle = false;
-  protected resizeTolerance = 0;
-  protected lastSizeDiff = 0;
-  protected resizeCycles = 0;
 
   protected sanitizedHandCursor: SafeStyle;
   protected sanitizedLabelCrosshair: SafeStyle;
@@ -130,6 +126,10 @@ export abstract class GenericView implements AfterViewInit {
       this.draw();
     }, 100);
 
+    this.throttledResize = _.throttle(() => {
+      this.doResize();
+    }, 100);
+
     appService.getCurrentTabUpdates((currentTab: CurrentTab) => {
       if (this.tabId === currentTab)
         setTimeout(() => this.onResize());
@@ -158,64 +158,17 @@ export abstract class GenericView implements AfterViewInit {
   }
 
   onResize(): void {
-    this.waitingForResizeToSettle = false;
-    this.resizeCycles = 0;
-    this.onResizeAux();
-  }
-
-  protected onResizeAux(): void {
-    if (!this.debouncedResize) {
-      this.debouncedResize = _.debounce(() => {
-        this.doResize();
-
-        setTimeout(() => {
-          // Ideally this.wrapper.clientWidth and this.canvas.clientWidth are equal after resizing,
-          // but in Firefox (and possibly other browsers) they don't match exactly even after an extra
-          // cycle of resizing. Below we try to dynamically figure out how much tolerance in width
-          // difference to allow for.
-          const sizeDiff = abs(this.wrapper.clientWidth - this.canvas.clientWidth);
-          let resizeAgain = true;
-
-          if (sizeDiff > this.resizeTolerance) {
-            if (this.waitingForResizeToSettle && sizeDiff <= MAX_RESIZE_TOLERANCE) {
-              if (sizeDiff === this.lastSizeDiff) {
-                if (++this.resizeCycles === MAX_RESIZE_CYCLES) {
-                  this.resizeTolerance = sizeDiff;
-                  resizeAgain = false;
-                  this.waitingForResizeToSettle = false;
-                }
-              }
-              else
-                this.resizeCycles = 0;
-            }
-
-            this.lastSizeDiff = sizeDiff;
-
-            if (resizeAgain) {
-              this.waitingForResizeToSettle = true;
-              this.onResizeAux();
-            }
-          }
-        }, 50);
-      }, 50);
-    }
-
     this.marqueeText = '';
-    this.debouncedResize();
+    this.throttledResize();
   }
 
   private doResize(): void {
-    const top = ceil(this.canvas.getBoundingClientRect().top);
-    const marqueeHeight = this.marquee.getBoundingClientRect().height;
-
     this.width = this.wrapper.clientWidth;
-    // Using the document's clientHeight instead of the window's innerHeight accounts for possible scroll bar.
-    this.height = max(window.document.documentElement.clientHeight - top - marqueeHeight - 12, 250);
-
+    this.height = this.wrapper.clientHeight;
     this.canvas.width = this.width;
     this.canvas.height = this.height;
     this.canvas.style.height = this.height + 'px';
-    this.wrapper.style.height = this.height + 'px';
+    this.canvas.style.height = this.height + 'px';
 
     this.draw();
   }
@@ -249,6 +202,7 @@ export abstract class GenericView implements AfterViewInit {
 
     if (this.isInsideView()) {
       this.goodDragStart = true;
+      this.dragStartTime = performance.now();
       this.draw();
       event.preventDefault();
 
@@ -275,6 +229,7 @@ export abstract class GenericView implements AfterViewInit {
   }
 
   onTouchMove(event: TouchEvent): void {
+    const notAFlick = performance.now() > this.dragStartTime + FLICK_REJECTION_THRESHOLD;
     const pt0 = this.getXYForTouchEvent(event);
     const pt = _.clone(pt0);
     let pt1;
@@ -285,7 +240,7 @@ export abstract class GenericView implements AfterViewInit {
       pt.y = (pt0.y + pt1.y) / 2;
     }
 
-    if (this.goodDragStart)
+    if (this.goodDragStart && notAFlick && event.touches.length === 1 || this.canTouchZoom)
       this.handleMouseMove(pt.x, pt.y, true);
 
     if (this.initialZoomSpread) {
@@ -301,7 +256,7 @@ export abstract class GenericView implements AfterViewInit {
         this.initialZoomSpread = 0;
     }
 
-    if (this.isInsideView())
+    if (this.isInsideView() && notAFlick)
       event.preventDefault();
   }
 
@@ -352,8 +307,6 @@ export abstract class GenericView implements AfterViewInit {
     if (event.touches.length === 1)
       this.onTouchStart(event);
     else if (event.touches.length === 0) {
-      this.resetCursor();
-      this.draw();
       this.dragging = false;
       event.preventDefault();
     }

src/app/svc/generic-view.ts

@@ -1,6 +1,6 @@
 :host {
   display: flex;
-  height: 100%;
+  height: calc(100% - 2px);
   flex-direction: column;
   justify-content: space-between;
   align-items: stretch;

src/app/svc/svc-calendar-view/svc-calendar-view.component.scss

@@ -32,7 +32,7 @@ import {
   VISIBLE_ALL_DAY, WINTER_SOLSTICE
 } from 'ks-astronomy';
 import { DatePipe } from '@angular/common';
-import { abs, ceil, floor, max, min, round } from 'ks-math';
+import { ceil, floor, max, min, round } from 'ks-math';
 import { isEdge, isFirefox, isIE } from 'ks-util';
 import * as _ from 'lodash';
 import { MoonDrawer } from '../moon-drawer';
@@ -52,9 +52,6 @@ const MIN_MOON_IMAGE_SIZE = 32;
 
 const DAY_HIGHLIGHT = '#000044';
 
-const MAX_RESIZE_TOLERANCE = 4;
-const MAX_RESIZE_CYCLES = 3;
-
 interface TextAndTime {
   text: string;
   time: number;
@@ -110,13 +107,9 @@ export class SvcCalendarViewComponent implements AfterViewInit {
   private equisolstice = true;
   private dailyMoonPhase = true;
   private dailyDaylight = true;
-  private debouncedResize: () => void;
+  private throttledResize: () => void;
   private eventFinder = new EventFinder();
   private moonDrawer: MoonDrawer;
-  protected waitingForResizeToSettle = false;
-  protected resizeTolerance = 0;
-  protected lastSizeDiff = 0;
-  protected resizeCycles = 0;
 
   private eventTypes: EventType[] = [
     {planet: SUN, altitude: 0},
@@ -153,6 +146,10 @@ export class SvcCalendarViewComponent implements AfterViewInit {
     // TODO: Call method below whenever first day of week changes.
     this.updateDayHeadings();
 
+    this.throttledResize = _.throttle(() => {
+      this.doResize();
+    }, 100);
+
     appService.getCurrentTabUpdates((currentTab: CurrentTab) => {
       if (currentTab === CurrentTab.CALENDAR) {
         setTimeout(() => {
@@ -226,65 +223,20 @@ export class SvcCalendarViewComponent implements AfterViewInit {
   }
 
   onResize(): void {
-    this.waitingForResizeToSettle = false;
-    this.resizeCycles = 0;
-    this.onResizeAux();
-  }
-
-  protected onResizeAux(): void {
-    if (!this.debouncedResize) {
-      this.debouncedResize = _.debounce(() => {
-        this.doResize();
-
-        setTimeout(() => {
-          // Ideally this.wrapper.clientWidth and this.canvas.clientWidth are equal after resizing,
-          // but in Firefox (and possibly other browsers) they don't match exactly even after an extra
-          // cycle of resizing. Below we try to dynamically figure out how much tolerance in width
-          // difference to allow for.
-          const sizeDiff = abs(this.wrapper.clientWidth - this.canvas.clientWidth);
-          let resizeAgain = true;
-
-          if (sizeDiff > this.resizeTolerance) {
-            if (this.waitingForResizeToSettle && sizeDiff <= MAX_RESIZE_TOLERANCE) {
-              if (sizeDiff === this.lastSizeDiff) {
-                if (++this.resizeCycles === MAX_RESIZE_CYCLES) {
-                  this.resizeTolerance = sizeDiff;
-                  resizeAgain = false;
-                  this.waitingForResizeToSettle = false;
-                }
-              }
-              else
-                this.resizeCycles = 0;
-            }
-
-            this.lastSizeDiff = sizeDiff;
-
-            if (resizeAgain) {
-              this.waitingForResizeToSettle = true;
-              this.onResizeAux();
-            }
-          }
-        }, 50);
-      }, 50);
-    }
-
-    this.debouncedResize();
+    this.throttledResize();
   }
 
   private doResize(): void {
-    const top = ceil(this.wrapper.getBoundingClientRect().top);
-
     this.width = this.wrapper.clientWidth;
-    // Using the document's clientHeight instead of the window's innerHeight accounts for possible scroll bar.
-    this.height = max(window.document.documentElement.clientHeight - top - 5, 250);
+    this.height = this.wrapper.clientHeight;
     this.dayTop = (<HTMLElement> (this.titleRowRef.nativeElement)).clientHeight + (<HTMLElement> (this.weekdaysRowRef.nativeElement)).clientHeight;
 
     this.canvas.width = this.width;
     this.canvas.height = this.height;
-    this.wrapper.style.height = this.height + 'px';
     this.canvas.style.height = this.height + 'px';
+    this.canvas.style.height = this.height + 'px';
+    this.calendarTable.style.height = this.height + 'px';
     this.calendarTable.style.height = this.height + 'px';
-    this.wrapper.style.height = this.height + 'px';
 
     this.draw();
   }

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

@@ -546,7 +546,9 @@ export class SvcOrbitViewComponent extends GenericPlanetaryView implements After
 
   onTouchMove(event: TouchEvent): void {
     super.onTouchMove(event);
-    this.continueDrag(event.shiftKey);
+
+    if (event.defaultPrevented)
+      this.continueDrag(event.shiftKey);
   }
 
   onMouseMove(event: MouseEvent): void {

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

@@ -1,8 +1,8 @@
 <!--suppress XmlUnboundNsPrefix -->
 <div class="table-controls">
-  <p-dropdown #tableTypesDropdown [options]="tableTypes" [(ngModel)]="tableType" [autoWidth]="true"></p-dropdown>
+  <p-dropdown #tableTypesDropdown [options]="tableTypes" [(ngModel)]="tableType" [autoWidth]="true"></p-dropdown>&nbsp;&nbsp;
   <p-dropdown #planetsDropdown [options]="planetChoices" [(ngModel)]="planetChoice" [autoWidth]="true" [disabled]="!planetChoiceEnabled"></p-dropdown>
 </div>
 <div #wrapper class="wrapper" (window:resize)="onResize()">
-  <div #tableContainer class="table-container" [innerHtml]='tableHtml'></div>
-</div>
+  <div #tableContainer class="table-container" [innerHtml]='tableHtml'>&nbsp;</div>
+</div>

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

@@ -7,12 +7,16 @@
 }
 
 div.wrapper {
+  position: relative;
   flex-grow: 1;
 }
 
 .table-container {
-  width: auto;
+  position: absolute;
+  left: 0;
+  top: 0;
   overflow: auto;
+  white-space: nowrap;
 }
 
 .table-controls {