Add Pulse Zoom button.

Author: mbebenita

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">

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">

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);

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)
     }

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();
     }