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

14
zoomableCanvas.ts
View File

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