From 70390915ab8b6262eb76555f8eef1b95f60e3c42 Mon Sep 17 00:00:00 2001
From: Michael Bebenita <mbebenita@gmail.com>
Date: Tue, 24 Oct 2017 20:15:37 -0700
Subject: [PATCH] Add Pulse Zoom button.

---
 demo/client/html/svg-demo.html.hbs  |  4 ++++
 demo/client/html/text-demo.html.hbs |  4 ++++
 demo/client/src/app-controller.ts   |  8 ++++++++
 demo/client/src/camera.ts           | 17 +++++++++++++----
 demo/client/src/view.ts             | 21 +++++++++++++++++++++
 5 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/demo/client/html/svg-demo.html.hbs b/demo/client/html/svg-demo.html.hbs
index c29008a2..a2de7acd 100644
--- a/demo/client/html/svg-demo.html.hbs
+++ b/demo/client/html/svg-demo.html.hbs
@@ -22,6 +22,10 @@
                      class="btn btn-outline-secondary pf-toolbar-button">
                         {{octicon "plus"}}
                     </button>
+                    <button id="pf-zoom-pulse-button" type="button" title="Pulse Zoom"
+                     class="btn btn-outline-secondary pf-toolbar-button">
+                        {{octicon "watch"}}
+                    </button>
                 </div>
                 <button id="pf-screenshot-button" type="button"
                  class="btn btn-outline-secondary pf-toolbar-button">
diff --git a/demo/client/html/text-demo.html.hbs b/demo/client/html/text-demo.html.hbs
index 95813497..20005278 100644
--- a/demo/client/html/text-demo.html.hbs
+++ b/demo/client/html/text-demo.html.hbs
@@ -21,6 +21,10 @@
                      class="btn btn-outline-secondary pf-toolbar-button">
                         {{octicon "plus"}}
                     </button>
+                    <button id="pf-zoom-pulse-button" type="button" title="Pulse Zoom"
+                     class="btn btn-outline-secondary pf-toolbar-button">
+                        {{octicon "watch"}}
+                    </button>
                 </div>
                 <button id="pf-screenshot-button" type="button"
                  class="btn btn-outline-secondary pf-toolbar-button">
diff --git a/demo/client/src/app-controller.ts b/demo/client/src/app-controller.ts
index 0420f125..af273b73 100644
--- a/demo/client/src/app-controller.ts
+++ b/demo/client/src/app-controller.ts
@@ -121,6 +121,14 @@ export abstract class DemoAppController<View extends DemoView> extends AppContro
             }, false);
         }
 
+        const zoomPulseButton = document.getElementById('pf-zoom-pulse-button') as
+            HTMLButtonElement | null;
+        if (zoomPulseButton != null) {
+            zoomPulseButton.addEventListener('click', () => {
+                this.view.then(view => view.zoomPulse());
+            }, false);
+        }
+
         this.filePickerView = FilePickerView.create();
         if (this.filePickerView != null) {
             this.filePickerView.onFileLoaded = fileData => this.fileLoaded(fileData, null);
diff --git a/demo/client/src/camera.ts b/demo/client/src/camera.ts
index 14d2f218..05a7a5ee 100644
--- a/demo/client/src/camera.ts
+++ b/demo/client/src/camera.ts
@@ -83,6 +83,7 @@ export abstract class Camera {
         this.canvas = canvas;
     }
 
+    abstract zoom(scale: number): void;
     abstract zoomIn(): void;
     abstract zoomOut(): void;
 }
@@ -148,7 +149,7 @@ export class OrthographicCamera extends Camera {
         glmatrix.vec2.scale(mouseLocation, mouseLocation, window.devicePixelRatio);
 
         const scale = 1.0 - event.deltaY * window.devicePixelRatio * ORTHOGRAPHIC_ZOOM_SPEED;
-        this.zoom(scale, mouseLocation);
+        this._zoom(scale, mouseLocation);
     }
 
     zoomToFit(): void {
@@ -168,12 +169,16 @@ export class OrthographicCamera extends Camera {
         this.translation[1] += this.canvas.height * 0.5;
     }
 
+    zoom(scale: number): void {
+        this._zoom(scale, this.centerPoint);
+    }
+
     zoomIn(): void {
-        this.zoom(ORTHOGRAPHIC_ZOOM_IN_FACTOR, this.centerPoint);
+        this._zoom(ORTHOGRAPHIC_ZOOM_IN_FACTOR, this.centerPoint);
     }
 
     zoomOut(): void {
-        this.zoom(ORTHOGRAPHIC_ZOOM_OUT_FACTOR, this.centerPoint);
+        this._zoom(ORTHOGRAPHIC_ZOOM_OUT_FACTOR, this.centerPoint);
     }
 
     private onMouseDown(event: MouseEvent): void {
@@ -228,7 +233,7 @@ export class OrthographicCamera extends Camera {
         }
     }
 
-    private zoom(scale: number, point: glmatrix.vec2): void {
+    private _zoom(scale: number, point: glmatrix.vec2): void {
         const absoluteTranslation = glmatrix.vec2.create();
         glmatrix.vec2.sub(absoluteTranslation, this.translation, point);
         glmatrix.vec2.scale(absoluteTranslation, absoluteTranslation, 1.0 / this.scale);
@@ -306,6 +311,10 @@ export class PerspectiveCamera extends Camera {
         ]);
     }
 
+    zoom(scale: number): void {
+        // TODO(pcwalton)
+    }
+
     zoomIn(): void {
         // TODO(pcwalton)
     }
diff --git a/demo/client/src/view.ts b/demo/client/src/view.ts
index e02c9c87..13333f65 100644
--- a/demo/client/src/view.ts
+++ b/demo/client/src/view.ts
@@ -54,6 +54,8 @@ export abstract class PathfinderView {
 
     private dirty: boolean;
 
+    private pulseHandle: number;
+
     constructor() {
         this.dirty = false;
         this.canvas = unwrapNull(document.getElementById('pf-canvas')) as HTMLCanvasElement;
@@ -75,6 +77,25 @@ export abstract class PathfinderView {
         this.camera.zoomOut();
     }
 
+    zoomPulse(): void {
+        if (this.pulseHandle) {
+            window.cancelAnimationFrame(this.pulseHandle);
+            this.pulseHandle = 0;
+            return;
+        }
+        let c = 0;
+        let d = 0.005;
+        const self = this;
+        function tick() {
+            self.camera.zoom(1 + d);
+            if (c++ % 200 === 0) {
+                d *= -1;
+            }
+            self.pulseHandle = window.requestAnimationFrame(tick);
+        }
+        this.pulseHandle = window.requestAnimationFrame(tick);
+    }
+
     protected resized(): void {
         this.setDirty();
     }