Add Pulse Zoom button.
This commit is contained in:
parent
f8c950d39a
commit
70390915ab
|
@ -22,6 +22,10 @@
|
||||||
class="btn btn-outline-secondary pf-toolbar-button">
|
class="btn btn-outline-secondary pf-toolbar-button">
|
||||||
{{octicon "plus"}}
|
{{octicon "plus"}}
|
||||||
</button>
|
</button>
|
||||||
|
<button id="pf-zoom-pulse-button" type="button" title="Pulse Zoom"
|
||||||
|
class="btn btn-outline-secondary pf-toolbar-button">
|
||||||
|
{{octicon "watch"}}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button id="pf-screenshot-button" type="button"
|
<button id="pf-screenshot-button" type="button"
|
||||||
class="btn btn-outline-secondary pf-toolbar-button">
|
class="btn btn-outline-secondary pf-toolbar-button">
|
||||||
|
|
|
@ -21,6 +21,10 @@
|
||||||
class="btn btn-outline-secondary pf-toolbar-button">
|
class="btn btn-outline-secondary pf-toolbar-button">
|
||||||
{{octicon "plus"}}
|
{{octicon "plus"}}
|
||||||
</button>
|
</button>
|
||||||
|
<button id="pf-zoom-pulse-button" type="button" title="Pulse Zoom"
|
||||||
|
class="btn btn-outline-secondary pf-toolbar-button">
|
||||||
|
{{octicon "watch"}}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button id="pf-screenshot-button" type="button"
|
<button id="pf-screenshot-button" type="button"
|
||||||
class="btn btn-outline-secondary pf-toolbar-button">
|
class="btn btn-outline-secondary pf-toolbar-button">
|
||||||
|
|
|
@ -121,6 +121,14 @@ export abstract class DemoAppController<View extends DemoView> extends AppContro
|
||||||
}, false);
|
}, 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();
|
this.filePickerView = FilePickerView.create();
|
||||||
if (this.filePickerView != null) {
|
if (this.filePickerView != null) {
|
||||||
this.filePickerView.onFileLoaded = fileData => this.fileLoaded(fileData, null);
|
this.filePickerView.onFileLoaded = fileData => this.fileLoaded(fileData, null);
|
||||||
|
|
|
@ -83,6 +83,7 @@ export abstract class Camera {
|
||||||
this.canvas = canvas;
|
this.canvas = canvas;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
abstract zoom(scale: number): void;
|
||||||
abstract zoomIn(): void;
|
abstract zoomIn(): void;
|
||||||
abstract zoomOut(): void;
|
abstract zoomOut(): void;
|
||||||
}
|
}
|
||||||
|
@ -148,7 +149,7 @@ export class OrthographicCamera extends Camera {
|
||||||
glmatrix.vec2.scale(mouseLocation, mouseLocation, window.devicePixelRatio);
|
glmatrix.vec2.scale(mouseLocation, mouseLocation, window.devicePixelRatio);
|
||||||
|
|
||||||
const scale = 1.0 - event.deltaY * window.devicePixelRatio * ORTHOGRAPHIC_ZOOM_SPEED;
|
const scale = 1.0 - event.deltaY * window.devicePixelRatio * ORTHOGRAPHIC_ZOOM_SPEED;
|
||||||
this.zoom(scale, mouseLocation);
|
this._zoom(scale, mouseLocation);
|
||||||
}
|
}
|
||||||
|
|
||||||
zoomToFit(): void {
|
zoomToFit(): void {
|
||||||
|
@ -168,12 +169,16 @@ export class OrthographicCamera extends Camera {
|
||||||
this.translation[1] += this.canvas.height * 0.5;
|
this.translation[1] += this.canvas.height * 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
zoom(scale: number): void {
|
||||||
|
this._zoom(scale, this.centerPoint);
|
||||||
|
}
|
||||||
|
|
||||||
zoomIn(): void {
|
zoomIn(): void {
|
||||||
this.zoom(ORTHOGRAPHIC_ZOOM_IN_FACTOR, this.centerPoint);
|
this._zoom(ORTHOGRAPHIC_ZOOM_IN_FACTOR, this.centerPoint);
|
||||||
}
|
}
|
||||||
|
|
||||||
zoomOut(): void {
|
zoomOut(): void {
|
||||||
this.zoom(ORTHOGRAPHIC_ZOOM_OUT_FACTOR, this.centerPoint);
|
this._zoom(ORTHOGRAPHIC_ZOOM_OUT_FACTOR, this.centerPoint);
|
||||||
}
|
}
|
||||||
|
|
||||||
private onMouseDown(event: MouseEvent): void {
|
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();
|
const absoluteTranslation = glmatrix.vec2.create();
|
||||||
glmatrix.vec2.sub(absoluteTranslation, this.translation, point);
|
glmatrix.vec2.sub(absoluteTranslation, this.translation, point);
|
||||||
glmatrix.vec2.scale(absoluteTranslation, absoluteTranslation, 1.0 / this.scale);
|
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 {
|
zoomIn(): void {
|
||||||
// TODO(pcwalton)
|
// TODO(pcwalton)
|
||||||
}
|
}
|
||||||
|
|
|
@ -54,6 +54,8 @@ export abstract class PathfinderView {
|
||||||
|
|
||||||
private dirty: boolean;
|
private dirty: boolean;
|
||||||
|
|
||||||
|
private pulseHandle: number;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.dirty = false;
|
this.dirty = false;
|
||||||
this.canvas = unwrapNull(document.getElementById('pf-canvas')) as HTMLCanvasElement;
|
this.canvas = unwrapNull(document.getElementById('pf-canvas')) as HTMLCanvasElement;
|
||||||
|
@ -75,6 +77,25 @@ export abstract class PathfinderView {
|
||||||
this.camera.zoomOut();
|
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 {
|
protected resized(): void {
|
||||||
this.setDirty();
|
this.setDirty();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue