maxScale

zoomableCanvas.ts

@@ -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;
       }