michael/pathfinder
michael
/
pathfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Limit how far the user can zoom the camera out

This commit is contained in:
Patrick Walton 2017-09-13 13:30:26 -07:00
parent d64a28c166
commit 6642cc7aa4
5 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/client/src/benchmark.ts
View File

@ -130,7 +130,7 @@ class BenchmarkTestView extends PathfinderDemoView {
this.appController = appController; this.appController = appController;
this.camera = new OrthographicCamera(this.canvas, false); this.camera = new OrthographicCamera(this.canvas);
this.camera.onPan = () => this.setDirty(); this.camera.onPan = () => this.setDirty();
this.camera.onZoom = () => this.setDirty(); this.camera.onZoom = () => this.setDirty();
} }

15
demo/client/src/camera.ts
View File

@ -18,7 +18,8 @@ const ORTHOGRAPHIC_ZOOM_SPEED: number = 1.0 / 100.0;
const ORTHOGRAPHIC_ZOOM_IN_FACTOR: number = 1.2; const ORTHOGRAPHIC_ZOOM_IN_FACTOR: number = 1.2;
const ORTHOGRAPHIC_ZOOM_OUT_FACTOR: number = 1.0 / ORTHOGRAPHIC_ZOOM_IN_FACTOR; const ORTHOGRAPHIC_ZOOM_OUT_FACTOR: number = 1.0 / ORTHOGRAPHIC_ZOOM_IN_FACTOR;
const ORTHOGRAPHIC_MAX_SCALE: number = 10.0; const ORTHOGRAPHIC_DEFAULT_MIN_SCALE: number = 0.01;
const ORTHOGRAPHIC_DEFAULT_MAX_SCALE: number = 1000.0;
const PERSPECTIVE_MOVEMENT_SPEED: number = 10.0; const PERSPECTIVE_MOVEMENT_SPEED: number = 10.0;
const PERSPECTIVE_ROTATION_SPEED: number = 1.0 / 300.0; const PERSPECTIVE_ROTATION_SPEED: number = 1.0 / 300.0;
@ -52,10 +53,11 @@ export abstract class Camera {
} }
export class OrthographicCamera extends Camera { export class OrthographicCamera extends Camera {
constructor(canvas: HTMLCanvasElement, limitedZoom: boolean) { constructor(canvas: HTMLCanvasElement, minScale?: number, maxScale?: number) {
super(canvas); super(canvas);
this.limitedZoom = limitedZoom; this.minScale = _.defaultTo(minScale, ORTHOGRAPHIC_DEFAULT_MIN_SCALE);
this.maxScale = _.defaultTo(maxScale, ORTHOGRAPHIC_DEFAULT_MAX_SCALE);
this.translation = glmatrix.vec2.create(); this.translation = glmatrix.vec2.create();
this.scale = 1.0; this.scale = 1.0;
@ -147,9 +149,7 @@ export class OrthographicCamera extends Camera {
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);
this.scale *= scale; this.scale = _.clamp(this.scale * scale, this.minScale, this.maxScale);
if (this.limitedZoom && this.scale > ORTHOGRAPHIC_MAX_SCALE)
this.scale = ORTHOGRAPHIC_MAX_SCALE;
glmatrix.vec2.scale(absoluteTranslation, absoluteTranslation, this.scale); glmatrix.vec2.scale(absoluteTranslation, absoluteTranslation, this.scale);
glmatrix.vec2.add(this.translation, absoluteTranslation, point); glmatrix.vec2.add(this.translation, absoluteTranslation, point);
@ -178,7 +178,8 @@ export class OrthographicCamera extends Camera {
translation: glmatrix.vec2; translation: glmatrix.vec2;
scale: number; scale: number;
private readonly limitedZoom: boolean; private readonly minScale: number;
private readonly maxScale: number;
} }
export class PerspectiveCamera extends Camera { export class PerspectiveCamera extends Camera {

2
demo/client/src/mesh-debugger.ts
View File

@ -68,7 +68,7 @@ class MeshDebuggerView extends PathfinderView {
super(); super();
this.appController = appController; this.appController = appController;
this.camera = new OrthographicCamera(this.canvas, false); this.camera = new OrthographicCamera(this.canvas);
this.scale = 1.0; this.scale = 1.0;
} }

2
demo/client/src/svg-demo.ts
View File

@ -213,7 +213,7 @@ class SVGDemoView extends PathfinderDemoView {
this.appController = appController; this.appController = appController;
this.camera = new OrthographicCamera(this.canvas, false); this.camera = new OrthographicCamera(this.canvas);
this.camera.onPan = () => this.setDirty(); this.camera.onPan = () => this.setDirty();
this.camera.onZoom = () => this.setDirty(); this.camera.onZoom = () => this.setDirty();
} }

5
demo/client/src/text-demo.ts
View File

@ -76,6 +76,9 @@ const B_PATH_INDEX_SIZE: number = 2;
const ATLAS_SIZE: glmatrix.vec2 = glmatrix.vec2.fromValues(2048, 4096); const ATLAS_SIZE: glmatrix.vec2 = glmatrix.vec2.fromValues(2048, 4096);
const MIN_SCALE: number = 0.02;
const MAX_SCALE: number = 10.0;
declare global { declare global {
interface Window { interface Window {
jQuery(element: HTMLElement): JQuerySubset; jQuery(element: HTMLElement): JQuerySubset;
@ -243,7 +246,7 @@ class TextDemoView extends MonochromePathfinderView {
this.appController = appController; this.appController = appController;
this.camera = new OrthographicCamera(this.canvas, true); this.camera = new OrthographicCamera(this.canvas, MIN_SCALE, MAX_SCALE);
this.camera.onPan = () => this.onPan(); this.camera.onPan = () => this.onPan();
this.camera.onZoom = () => this.onZoom(); this.camera.onZoom = () => this.onZoom();