Added quick drawing mode for Orbits view. Added speed metrics. Fix IE/Edge cursor issue.

Author: kshetline

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svc-ng",
-  "version": "1.4.13",
+  "version": "1.4.14",
   "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.13<br><br>
+    Version 1.4.14<br><br>
     Copyright © 2016-2018 Kerry Shetline.
   </div>
 </p-dialog>

src/app/app.component.html

@@ -20,19 +20,20 @@
   other uses are restricted.
 */
 
-import { AfterViewInit } from '@angular/core';
+import { AfterViewInit, ElementRef, ViewChild } from '@angular/core';
 import { AppService, CurrentTab } from '../app.service';
 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 { ceil, max, round, sqrt } from 'ks-math';
-import { FontMetrics, getFontMetrics, isSafari } from 'ks-util';
+import { FontMetrics, getFontMetrics, isSafari, padLeft } from 'ks-util';
 import * as _ from 'lodash';
 import { KsDateTime } from 'ks-date-time-zone';
 import { SafeStyle } from '@angular/platform-browser';
 import { Subscription, BehaviorSubject, Observable } from 'rxjs';
 import { getXYForTouchEvent } from '../util/ks-touch-events';
+import { KsMarqueeComponent } from '../widgets/ks-marquee/ks-marquee.component';
 
 export const PROPERTY_ADDITIONALS = 'additionals';
 export enum    ADDITIONALS {NONE, ALL_ASTEROIDS, ALL_COMETS, ALL}
@@ -69,6 +70,9 @@ export abstract class GenericView implements AfterViewInit {
 
   protected wrapper: HTMLDivElement;
   protected canvas: HTMLCanvasElement;
+  protected marquee: HTMLElement;
+  protected lastMarqueeClick = 0;
+  protected marqueeClickCount = 0;
   protected canvasScaling = 1;
   protected touchGuard: HTMLDivElement;
   protected lastWidth = -1;
@@ -99,13 +103,19 @@ export abstract class GenericView implements AfterViewInit {
   protected planetsToDraw: number[] = [];
   protected additional: ADDITIONALS | string = ADDITIONALS.NONE;
 
+  protected showMetrics = false;
+  protected lastDrawStart = 0;
+  protected lastFullDrawTime: number;
+
   protected sanitizedHandCursor: SafeStyle;
   protected sanitizedLabelCrosshair: SafeStyle;
 
   protected readonly largeLabelFont  = '12px Arial, Helvetica, sans-serif';
   protected readonly mediumLabelFont = '11px Arial, Helvetica, sans-serif';
   protected readonly smallLabelFont  = '10px Arial, Helvetica, sans-serif';
 
+  @ViewChild(KsMarqueeComponent, {read: ElementRef}) protected marqueeRef: ElementRef;
+
   public marqueeText = '';
 
   cursor: SafeStyle;
@@ -184,6 +194,47 @@ export abstract class GenericView implements AfterViewInit {
     GenericView.getPrintingUpdate(printing => {
       this.doResize(printing);
     });
+
+    if (this.marqueeRef) {
+      this.marquee = this.marqueeRef.nativeElement as HTMLElement;
+      this.marquee.addEventListener('click', event => this.marqueeClick(event));
+      this.marquee.addEventListener('touchstart', event => this.marqueeTouch(event));
+    }
+  }
+
+  private marqueeClick(event: MouseEvent): void {
+    if (event.detail === 3)
+      this.toggleMarqueeMetrics();
+    else if (event.detail === 0 || event.detail === undefined)
+      this.countMarqueeClicks();
+  }
+
+  private marqueeTouch(event: TouchEvent): void {
+    if (event.touches.length > 2)
+      this.toggleMarqueeMetrics();
+    else if (event.touches.length === 1)
+      this.countMarqueeClicks();
+  }
+
+  private countMarqueeClicks(): void {
+    const now = performance.now();
+
+    if (now > this.lastMarqueeClick + 500)
+      this.marqueeClickCount = 1;
+    else if (++this.marqueeClickCount === 3)
+      this.toggleMarqueeMetrics();
+
+    this.lastMarqueeClick = now;
+  }
+
+  private toggleMarqueeMetrics(): void {
+    const saveBackground = this.marquee.style.backgroundColor;
+
+    this.showMetrics = !this.showMetrics;
+    this.marqueeText = '';
+    this.clearMouseHighlighting();
+    this.marquee.style.backgroundColor = 'cyan';
+    setTimeout(() => this.marquee.style.backgroundColor = saveBackground, 500);
   }
 
   onResize(): void {
@@ -410,14 +461,15 @@ export abstract class GenericView implements AfterViewInit {
     this.lastDrawingContext = dc;
 
     const now = performance.now();
+    const drawingTime = now - startTime;
 
     if (dc.fullDraw) {
-      const fullDrawingTime = now - startTime;
+      this.lastFullDrawTime = max(drawingTime, 1);
 
       if (forceFullDraw)
         this.slowFrameCount = 0;
 
-      if (fullDrawingTime > SLOW_DRAWING_THRESHOLD) {
+      if (this.lastFullDrawTime > SLOW_DRAWING_THRESHOLD) {
         ++this.slowFrameCount;
         this.lastSlowFrameTime = now;
       }
@@ -426,6 +478,18 @@ export abstract class GenericView implements AfterViewInit {
       this.debouncedFullRedraw();
       this.lastSlowFrameTime = now;
     }
+
+    if (this.showMetrics) {
+      const interval = max(startTime - this.lastDrawStart, 1);
+
+      this.marqueeText = padLeft(drawingTime.toFixed(1), 6, '\u2007') + (dc.fullDraw ? 'F' : 'Q') + ', ' +
+        padLeft(interval.toFixed(1), 6, '\u2007');
+
+      if (!dc.fullDraw)
+        this.marqueeText += ', ' + padLeft(this.lastFullDrawTime.toFixed(1), 6, '\u2007') + 'F';
+    }
+
+    this.lastDrawStart = startTime;
   }
 
   protected additionalDrawingSetup(dc: DrawingContext): void {

src/app/svc/generic-view.ts

@@ -74,7 +74,6 @@ const EYE_OFFSET_DIVISOR      = 30.0;
 
 const MARKER_SIZE = 9;
 const MARKER_SIZE2 = floor(MARKER_SIZE / 2);
-const MARKER_GAP = 2;
 
 const DRAG_LOCK_DELTA = 5;
 
@@ -277,6 +276,9 @@ export class SvcOrbitViewComponent extends GenericPlanetaryView implements After
         let colorIndex = planet;
 
         if (SolarSystem.isAsteroidOrComet(planet)) {
+          if (!dc.fullDraw)
+            continue;
+
           // Don't use this orbit drawing method for highly eccentric asteroids and comets.
           if (!oe || oe.e > 0.98) {
             specialCases.push(planet);

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

@@ -87,6 +87,7 @@ export class KsSequenceEditorComponent implements AfterViewInit, OnInit, OnDestr
   private static useHiddenInput = isAndroid();
   private static addFocusOutline = isEdge() || isIE() || isIOS();
   private static checkForRepeatedKeyTimestamps = isIOS();
+  private static disableContentEditable = isEdge() || isIE();
 
   private keyTimer: Subscription;
   private clickTimer: Subscription;
@@ -228,6 +229,9 @@ export class KsSequenceEditorComponent implements AfterViewInit, OnInit, OnDestr
       this.canvas.setAttribute('tabindex', '-1');
     }
 
+    if (KsSequenceEditorComponent.disableContentEditable)
+      this.canvas.contentEditable = 'false';
+
     this.computeSize();
     this.draw();
   }

src/app/widgets/ks-sequence-editor/ks-sequence-editor.component.ts

@@ -60,6 +60,8 @@
   <h2 class="header-sans"><a name="history">What's New / Version History</a></h2>
   <div  style="padding-left: 1em; text-indent: -1em">
 
+  <p><b>1.4.14, 2018-08-14:</b> Added quick drawing mode for Orbits view. Added speed metrics.</p>
+
   <p><b>1.4.13, 2018-08-13:</b> Increased graphics resolution for high resolution displays. Added quick,
     lower-resolution drawing mode for slow devices. Added three-finger gesture for escaping "zoom traps".</p>