emma/doodler
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 26 Wiki Activity

maxScale

Browse Source
This commit is contained in:
Emma 2023-02-15 18:14:49 -07:00
parent 3bf0c4587c
commit 76f07625dd
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bundle.js
View File

@ -529,7 +529,6 @@ class Doodler {
this.uiElements.delete(id); this.uiElements.delete(id);
} }
} }
const maxZoomScale = 4;
class ZoomableDoodler extends Doodler { class ZoomableDoodler extends Doodler {
scale = 1; scale = 1;
dragging = false; dragging = false;
@ -549,6 +548,7 @@ class ZoomableDoodler extends Doodler {
x: 0, x: 0,
y: 0 y: 0
}; };
maxScale = 4;
constructor(options){ constructor(options){
super(options); super(options);
this._canvas.addEventListener('wheel', (e)=>{ this._canvas.addEventListener('wheel', (e)=>{
@ -659,7 +659,7 @@ class ZoomableDoodler extends Doodler {
} }
console.log(this.mouse); console.log(this.mouse);
if (this.scale > 1) { if (this.scale > 1) {
this.frameCounter = map(this.scale, maxZoomScale, 1, 0, 59); this.frameCounter = map(this.scale, this.maxScale, 1, 0, 59);
this.zoomDirection = -1; this.zoomDirection = -1;
} else { } else {
this.frameCounter = 0; this.frameCounter = 0;
@ -688,14 +688,14 @@ class ZoomableDoodler extends Doodler {
}; };
} }
scaleAtMouse(scaleBy) { scaleAtMouse(scaleBy) {
if (this.scale === 4 && scaleBy > 1) return; if (this.scale === this.maxScale && scaleBy > 1) return;
this.scaleAt({ this.scaleAt({
x: this.mouse.x, x: this.mouse.x,
y: this.mouse.y y: this.mouse.y
}, scaleBy); }, scaleBy);
} }
scaleAt(p, scaleBy) { scaleAt(p, scaleBy) {
this.scale = Math.min(Math.max(this.scale * scaleBy, 1), maxZoomScale); this.scale = Math.min(Math.max(this.scale * scaleBy, 1), this.maxScale);
this.origin.x = p.x - (p.x - this.origin.x) * scaleBy; this.origin.x = p.x - (p.x - this.origin.x) * scaleBy;
this.origin.y = p.y - (p.y - this.origin.y) * scaleBy; this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
this.constrainOrigin(); this.constrainOrigin();
@ -748,12 +748,12 @@ class ZoomableDoodler extends Doodler {
switch(this.zoomDirection){ switch(this.zoomDirection){
case 1: case 1:
{ {
this.scale = map(frame, 0, 1, 1, maxZoomScale); this.scale = map(frame, 0, 1, 1, this.maxScale);
} }
break; break;
case -1: case -1:
{ {
this.scale = map(frame, 0, 1, maxZoomScale, 1); this.scale = map(frame, 0, 1, this.maxScale, 1);
} }
break; break;
} }

14
zoomableCanvas.ts
View File

@ -4,7 +4,6 @@ import { easeInOut } from "./timing/EaseInOut.ts";
import { map } from "./timing/Map.ts"; import { map } from "./timing/Map.ts";
type TouchEventCallback = (e: TouchEvent) => void; type TouchEventCallback = (e: TouchEvent) => void;
const maxZoomScale = 4;
export class ZoomableDoodler extends Doodler { export class ZoomableDoodler extends Doodler {
@ -27,6 +26,9 @@ export class ZoomableDoodler extends Doodler {
private hasDoubleTapped = false; private hasDoubleTapped = false;
private zooming = false; private zooming = false;
scaleAround: Point = { x: 0, y: 0 }; scaleAround: Point = { x: 0, y: 0 };
maxScale = 4;
constructor(options: IDoodlerOptions) { constructor(options: IDoodlerOptions) {
super(options) super(options)
@ -158,7 +160,7 @@ export class ZoomableDoodler extends Doodler {
console.log(this.mouse); console.log(this.mouse);
if (this.scale > 1) { if (this.scale > 1) {
this.frameCounter = map(this.scale, maxZoomScale, 1, 0, 59); this.frameCounter = map(this.scale, this.maxScale, 1, 0, 59);
this.zoomDirection = -1; this.zoomDirection = -1;
} else { } else {
this.frameCounter = 0; this.frameCounter = 0;
@ -182,14 +184,14 @@ export class ZoomableDoodler extends Doodler {
return { x, y }; return { x, y };
} }
scaleAtMouse(scaleBy: number) { scaleAtMouse(scaleBy: number) {
if (this.scale === 4 && scaleBy > 1) return; if (this.scale === this.maxScale && scaleBy > 1) return;
this.scaleAt({ this.scaleAt({
x: this.mouse.x, x: this.mouse.x,
y: this.mouse.y y: this.mouse.y
}, scaleBy); }, scaleBy);
} }
scaleAt(p: Point, scaleBy: number) { scaleAt(p: Point, scaleBy: number) {
this.scale = Math.min(Math.max(this.scale * scaleBy, 1), maxZoomScale); this.scale = Math.min(Math.max(this.scale * scaleBy, 1), this.maxScale);
this.origin.x = p.x - (p.x - this.origin.x) * scaleBy; this.origin.x = p.x - (p.x - this.origin.x) * scaleBy;
this.origin.y = p.y - (p.y - this.origin.y) * scaleBy; this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
this.constrainOrigin(); this.constrainOrigin();
@ -246,11 +248,11 @@ export class ZoomableDoodler extends Doodler {
const frame = easeInOut(map(this.frameCounter, 0, 59, 0, 1)); const frame = easeInOut(map(this.frameCounter, 0, 59, 0, 1));
switch (this.zoomDirection) { switch (this.zoomDirection) {
case 1: { case 1: {
this.scale = map(frame, 0, 1, 1, maxZoomScale); this.scale = map(frame, 0, 1, 1, this.maxScale);
} }
break; break;
case -1: { case -1: {
this.scale = map(frame, 0, 1, maxZoomScale, 1); this.scale = map(frame, 0, 1, this.maxScale, 1);
} }
break; break;
} }