commit
591e6b780c
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue