moveOrigin for zoomabledoodler

.vscode/settings.json

@@ -20,5 +20,6 @@
   },
   "peacock.remoteColor": "aa11aa",
   "deno.enable": true,
-  "deno.unstable": true
+  "deno.unstable": true,
+  "liveServer.settings.port": 5501
 }

bundle.js

@@ -276,24 +276,25 @@ class Doodler {
     draggables = [];
     clickables = [];
     dragTarget;
-    constructor({ width , height , canvas , bg , framerate  }){
+    constructor({ width, height, canvas, bg, framerate }, postInit){
         if (!canvas) {
-            canvas = document.createElement('canvas');
+            canvas = document.createElement("canvas");
             document.body.append(canvas);
         }
-        this.bg = bg || 'white';
+        this.bg = bg || "white";
         this.framerate = framerate || 60;
         canvas.width = width;
         canvas.height = height;
         this._canvas = canvas;
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext("2d");
-        if (!ctx) throw 'Unable to initialize Doodler: Canvas context not found';
+        if (!ctx) throw "Unable to initialize Doodler: Canvas context not found";
         this.ctx = ctx;
+        postInit?.(this.ctx);
     }
     init() {
-        this._canvas.addEventListener('mousedown', (e)=>this.onClick(e));
+        this._canvas.addEventListener("mousedown", (e)=>this.onClick(e));
-        this._canvas.addEventListener('mouseup', (e)=>this.offClick(e));
+        this._canvas.addEventListener("mouseup", (e)=>this.offClick(e));
-        this._canvas.addEventListener('mousemove', (e)=>this.onDrag(e));
+        this._canvas.addEventListener("mousemove", (e)=>this.onDrag(e));
         this.startDrawLoop();
     }
     timer;
@@ -301,10 +302,12 @@ class Doodler {
         this.timer = setInterval(()=>this.draw(), 1000 / this.framerate);
     }
     draw() {
+        this.ctx.clearRect(0, 0, this.width, this.height);
         this.ctx.fillStyle = this.bg;
         this.ctx.fillRect(0, 0, this.width, this.height);
         for (const [i, l] of (this.layers || []).entries()){
             l(this.ctx, i);
+            this.drawDeferred();
         }
         this.drawUI();
     }
@@ -404,25 +407,67 @@ class Doodler {
         cb();
         this.ctx.restore();
     }
+    drawWithAlpha(alpha, cb) {
+        this.ctx.save();
+        this.ctx.globalAlpha = Math.min(Math.max(alpha, 0), 1);
+        cb();
+        this.ctx.restore();
+    }
     drawImage(img, at, w, h) {
         w && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
     }
+    drawImageWithOutline(img, at, w, h, style) {
+        this.ctx.save();
+        const s = (typeof w === "number" || !w ? style?.weight : w.weight) || 1;
+        this.ctx.shadowColor = (typeof w === "number" || !w ? style?.color || style?.fillColor : w.color || w.strokeColor) || "red";
+        this.ctx.shadowBlur = 0;
+        for(let x = -s; x <= s; x++){
+            for(let y = -s; y <= s; y++){
+                this.ctx.shadowOffsetX = x;
+                this.ctx.shadowOffsetY = y;
+                typeof w === "number" && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
+            }
+        }
+        this.ctx.restore();
+    }
     drawSprite(img, spritePos, sWidth, sHeight, at, width, height) {
         this.ctx.drawImage(img, spritePos.x, spritePos.y, sWidth, sHeight, at.x, at.y, width, height);
     }
+    deferredDrawings = [];
+    deferDrawing(cb) {
+        this.deferredDrawings.push(cb);
+    }
+    drawDeferred() {
+        while(this.deferredDrawings.length){
+            this.deferredDrawings.pop()?.();
+        }
+    }
     setStyle(style) {
         const ctx = this.ctx;
-        ctx.fillStyle = style?.color || style?.fillColor || 'black';
+        ctx.fillStyle = style?.color || style?.fillColor || "black";
-        ctx.strokeStyle = style?.color || style?.strokeColor || 'black';
+        ctx.strokeStyle = style?.color || style?.strokeColor || "black";
         ctx.lineWidth = style?.weight || 1;
+        ctx.textAlign = style?.textAlign || ctx.textAlign;
+        ctx.textBaseline = style?.textBaseline || ctx.textBaseline;
+    }
+    fillText(text, pos, maxWidth, style) {
+        this.setStyle(style);
+        this.ctx.fillText(text, pos.x, pos.y, maxWidth);
+    }
+    strokeText(text, pos, maxWidth, style) {
+        this.setStyle(style);
+        this.ctx.strokeText(text, pos.x, pos.y, maxWidth);
+    }
+    clearRect(at, width, height) {
+        this.ctx.clearRect(at.x, at.y, width, height);
     }
     mouseX = 0;
     mouseY = 0;
     registerDraggable(point, radius, style) {
         if (this.draggables.find((d)=>d.point === point)) return;
-        const id = this.addUIElement('circle', point, radius, {
+        const id = this.addUIElement("circle", point, radius, {
-            fillColor: '#5533ff50',
+            fillColor: "#5533ff50",
-            strokeColor: '#5533ff50'
+            strokeColor: "#5533ff50"
         });
         this.draggables.push({
             point,
@@ -452,7 +497,7 @@ class Doodler {
     unregisterClickable(cb) {
         this.clickables = this.clickables.filter((c)=>c.onClick !== cb);
     }
-    addDragEvents({ onDragEnd , onDragStart , onDrag , point  }) {
+    addDragEvents({ onDragEnd, onDragStart, onDrag, point }) {
         const d = this.draggables.find((d)=>d.point === point);
         if (d) {
             d.onDragEnd = onDragEnd;
@@ -549,34 +594,34 @@ class ZoomableDoodler extends Doodler {
         y: 0
     };
     maxScale = 4;
-    constructor(options){
+    constructor(options, postInit){
-        super(options);
+        super(options, postInit);
-        this._canvas.addEventListener('wheel', (e)=>{
+        this._canvas.addEventListener("wheel", (e)=>{
             this.scaleAtMouse(e.deltaY < 0 ? 1.1 : .9);
             if (this.scale === 1) {
                 this.origin.x = 0;
                 this.origin.y = 0;
             }
         });
-        this._canvas.addEventListener('dblclick', (e)=>{
+        this._canvas.addEventListener("dblclick", (e)=>{
             e.preventDefault();
             this.scale = 1;
             this.origin.x = 0;
             this.origin.y = 0;
             this.ctx.setTransform(1, 0, 0, 1, 0, 0);
         });
-        this._canvas.addEventListener('mousedown', (e)=>{
+        this._canvas.addEventListener("mousedown", (e)=>{
             e.preventDefault();
             this.dragging = true;
         });
-        this._canvas.addEventListener('mouseup', (e)=>{
+        this._canvas.addEventListener("mouseup", (e)=>{
             e.preventDefault();
             this.dragging = false;
         });
-        this._canvas.addEventListener('mouseleave', (e)=>{
+        this._canvas.addEventListener("mouseleave", (e)=>{
             this.dragging = false;
         });
-        this._canvas.addEventListener('mousemove', (e)=>{
+        this._canvas.addEventListener("mousemove", (e)=>{
             const prev = this.mouse;
             this.mouse = {
                 x: e.offsetX,
@@ -584,7 +629,7 @@ class ZoomableDoodler extends Doodler {
             };
             if (this.dragging && !this.dragTarget) this.drag(prev);
         });
-        this._canvas.addEventListener('touchstart', (e)=>{
+        this._canvas.addEventListener("touchstart", (e)=>{
             e.preventDefault();
             if (e.touches.length === 1) {
                 const t1 = e.touches.item(0);
@@ -598,7 +643,7 @@ class ZoomableDoodler extends Doodler {
                 clearTimeout(this.touchTimer);
             }
         });
-        this._canvas.addEventListener('touchend', (e)=>{
+        this._canvas.addEventListener("touchend", (e)=>{
             if (e.touches.length !== 2) {
                 this.previousTouchLength = undefined;
             }
@@ -607,14 +652,14 @@ class ZoomableDoodler extends Doodler {
                     break;
                 case 0:
                     if (!this.zooming) {
-                        this.events.get('touchend')?.map((cb)=>cb(e));
+                        this.events.get("touchend")?.map((cb)=>cb(e));
                     }
                     break;
             }
             this.dragging = e.touches.length === 1;
             clearTimeout(this.touchTimer);
         });
-        this._canvas.addEventListener('touchmove', (e)=>{
+        this._canvas.addEventListener("touchmove", (e)=>{
             e.preventDefault();
             if (e.touches.length === 2) {
                 const t1 = e.touches.item(0);
@@ -639,18 +684,18 @@ class ZoomableDoodler extends Doodler {
             }
             if (e.touches.length === 1) {
                 this.dragging === true;
-                const t11 = e.touches.item(0);
+                const t1 = e.touches.item(0);
-                if (t11) {
+                if (t1) {
                     const prev = this.mouse;
                     this.mouse = this.getTouchOffset({
-                        x: t11.clientX,
+                        x: t1.clientX,
-                        y: t11.clientY
+                        y: t1.clientY
                     });
                     this.drag(prev);
                 }
             }
         });
-        this._canvas.addEventListener('touchstart', (e)=>{
+        this._canvas.addEventListener("touchstart", (e)=>{
             if (e.touches.length !== 1) return false;
             if (!this.hasDoubleTapped) {
                 this.hasDoubleTapped = true;
@@ -665,10 +710,12 @@ class ZoomableDoodler extends Doodler {
                 this.frameCounter = 0;
                 this.zoomDirection = 1;
             }
-            if (this.zoomDirection > 0) this.scaleAround = {
+            if (this.zoomDirection > 0) {
-                ...this.mouse
+                this.scaleAround = {
-            };
+                    ...this.mouse
-            this.events.get('doubletap')?.map((cb)=>cb(e));
+                };
+            }
+            this.events.get("doubletap")?.map((cb)=>cb(e));
         });
     }
     worldToScreen(x, y) {
@@ -700,6 +747,13 @@ class ZoomableDoodler extends Doodler {
         this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
         this.constrainOrigin();
     }
+    moveOrigin(motion) {
+        if (this.scale > 1) {
+            this.origin.x += motion.x;
+            this.origin.y += motion.y;
+            this.constrainOrigin();
+        }
+    }
     drag(prev) {
         if (this.scale > 1) {
             const xOffset = this.mouse.x - prev.x;
@@ -721,7 +775,7 @@ class ZoomableDoodler extends Doodler {
         super.draw();
     }
     getTouchOffset(p) {
-        const { x , y  } = this._canvas.getBoundingClientRect();
+        const { x, y } = this._canvas.getBoundingClientRect();
         const offsetX = p.x - x;
         const offsetY = p.y - y;
         return {
@@ -736,7 +790,7 @@ class ZoomableDoodler extends Doodler {
             movementY: e.movementY / this.scale
         };
         super.onDrag(d);
-        const { x , y  } = this.screenToWorld(e.offsetX, e.offsetY);
+        const { x, y } = this.screenToWorld(e.offsetX, e.offsetY);
         this.mouseX = x;
         this.mouseY = y;
     }
@@ -770,46 +824,57 @@ class ZoomableDoodler extends Doodler {
         events.push(cb);
     }
 }
-const init = (opt, zoomable)=>{
+const init = (opt, zoomable, postInit)=>{
-    if (window.doodler) throw 'Doodler has already been initialized in this window';
+    if (window.doodler) {
-    window.doodler = zoomable ? new ZoomableDoodler(opt) : new Doodler(opt);
+        throw "Doodler has already been initialized in this window";
+    }
+    window.doodler = zoomable ? new ZoomableDoodler(opt, postInit) : new Doodler(opt, postInit);
     window.doodler.init();
 };
 init({
     width: 400,
     height: 400
-}, true);
+}, true, (ctx)=>{
+    ctx.imageSmoothingEnabled = false;
+});
 new Vector(100, 300);
 const v = new Vector(30, 30);
 doodler.registerDraggable(v, 20);
 const img = new Image();
-img.src = './EngineSprites.png';
+img.src = "./skeleton.png";
 img.hidden;
 document.body.append(img);
 const p = new Vector(200, 200);
 doodler.createLayer(()=>{
-    doodler.drawScaled(1.5, ()=>{
+    const [gamepad] = navigator.getGamepads();
-        doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
+    if (gamepad) {
-            color: 'grey',
+        const leftX = gamepad.axes[0];
-            weight: 2
+        const leftY = gamepad.axes[1];
+        p.add(Math.min(Math.max(leftX - 0.04, 0), leftX + 0.04), Math.min(Math.max(leftY - 0.04, 0), leftY + 0.04));
+        const rigthX = gamepad.axes[2];
+        const rigthY = gamepad.axes[3];
+        doodler.moveOrigin({
+            x: -rigthX * 5,
+            y: -rigthY * 5
         });
-        doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
+        if (gamepad.buttons[7].value) {
-            color: 'grey',
+            doodler.scaleAt({
-            weight: 2
+                x: 200,
-        });
+                y: 200
-        doodler.line(p, p.copy().add(0, 12), {
+            }, 1 + gamepad.buttons[7].value / 5);
-            color: 'brown',
+        }
-            weight: 4
+        if (gamepad.buttons[6].value) {
-        });
+            doodler.scaleAt({
-        doodler.line(p, p.copy().add(0, -12), {
+                x: 200,
-            color: 'brown',
+                y: 200
-            weight: 4
+            }, 1 - gamepad.buttons[6].value / 5);
-        });
+        }
-    });
+    }
+    doodler.drawImageWithOutline(img, p);
 });
-document.addEventListener('keyup', (e)=>{
+document.addEventListener("keyup", (e)=>{
     e.preventDefault();
-    if (e.key === ' ') {
+    if (e.key === " ") {
         doodler.unregisterDraggable(v);
     }
 });

canvas.ts

@@ -2,13 +2,20 @@
 
 import { Constants } from "./geometry/constants.ts";
 import { Vector } from "./geometry/vector.ts";
+import { postInit } from "./postInit.ts";
 import { ZoomableDoodler } from "./zoomableCanvas.ts";
 
-export const init = (opt: IDoodlerOptions, zoomable: boolean) => {
+export const init = (
+  opt: IDoodlerOptions,
+  zoomable: boolean,
+  postInit?: postInit,
+) => {
   if (window.doodler) {
     throw "Doodler has already been initialized in this window";
   }
-  window.doodler = zoomable ? new ZoomableDoodler(opt) : new Doodler(opt);
+  window.doodler = zoomable
+    ? new ZoomableDoodler(opt, postInit)
+    : new Doodler(opt, postInit);
   window.doodler.init();
 };
 
@@ -49,7 +56,7 @@ export class Doodler {
     canvas,
     bg,
     framerate,
-  }: IDoodlerOptions) {
+  }: IDoodlerOptions, postInit?: postInit) {
     if (!canvas) {
       canvas = document.createElement("canvas");
       document.body.append(canvas);
@@ -66,6 +73,8 @@ export class Doodler {
     const ctx = canvas.getContext("2d");
     if (!ctx) throw "Unable to initialize Doodler: Canvas context not found";
     this.ctx = ctx;
+
+    postInit?.(this.ctx);
   }
 
   init() {
@@ -213,6 +222,48 @@ export class Doodler {
       ? this.ctx.drawImage(img, at.x, at.y, w, h)
       : this.ctx.drawImage(img, at.x, at.y);
   }
+
+  drawImageWithOutline(img: HTMLImageElement, at: Vector, style?: IStyle): void;
+  drawImageWithOutline(
+    img: HTMLImageElement,
+    at: Vector,
+    w: number,
+    h: number,
+    style?: IStyle,
+  ): void;
+  drawImageWithOutline(
+    img: HTMLImageElement,
+    at: Vector,
+    w?: number | IStyle,
+    h?: number,
+    style?: IStyle,
+  ) {
+    this.ctx.save();
+    const s = (typeof w === "number" || !w ? style?.weight : w.weight) || 1; // thickness scale
+
+    this.ctx.shadowColor =
+      (typeof w === "number" || !w
+        ? style?.color || style?.fillColor
+        : w.color || w.strokeColor) || "red";
+    this.ctx.shadowBlur = 0;
+
+    // X offset loop
+    for (let x = -s; x <= s; x++) {
+      // Y offset loop
+      for (let y = -s; y <= s; y++) {
+        // Set shadow offset
+        this.ctx.shadowOffsetX = x;
+        this.ctx.shadowOffsetY = y;
+
+        // Draw image with shadow
+        typeof w === "number" && h
+          ? this.ctx.drawImage(img, at.x, at.y, w, h)
+          : this.ctx.drawImage(img, at.x, at.y);
+      }
+    }
+    this.ctx.restore();
+  }
+
   drawSprite(
     img: HTMLImageElement,
     spritePos: Vector,

main.ts

@@ -1,25 +1,59 @@
 /// <reference types="./global.d.ts" />
 
-import { Vector, initializeDoodler } from './mod.ts'
+import { initializeDoodler, Vector } from "./mod.ts";
+import { ZoomableDoodler } from "./zoomableCanvas.ts";
 
-initializeDoodler({
+initializeDoodler(
-  width: 400,
+  {
-  height: 400
+    width: 400,
-}, true);
+    height: 400,
+  },
+  true,
+  (ctx) => {
+    ctx.imageSmoothingEnabled = false;
+  },
+);
 
 const movingVector = new Vector(100, 300);
 let angleMultiplier = 0;
 const v = new Vector(30, 30);
-doodler.registerDraggable(v, 20)
+doodler.registerDraggable(v, 20);
 const img = new Image();
-img.src = './EngineSprites.png'
+img.src = "./skeleton.png";
-img.hidden
+img.hidden;
-document.body.append(img)
+document.body.append(img);
 
 const p = new Vector(200, 200);
 
 doodler.createLayer(() => {
+  const [gamepad] = navigator.getGamepads();
+  const deadzone = 0.04;
+  if (gamepad) {
+    const leftX = gamepad.axes[0];
+    const leftY = gamepad.axes[1];
+    p.add(
+      Math.min(Math.max(leftX - deadzone, 0), leftX + deadzone),
+      Math.min(Math.max(leftY - deadzone, 0), leftY + deadzone),
+    );
 
+    const rigthX = gamepad.axes[2];
+    const rigthY = gamepad.axes[3];
+    (doodler as ZoomableDoodler).moveOrigin({ x: -rigthX * 5, y: -rigthY * 5 });
+
+    if (gamepad.buttons[7].value) {
+      (doodler as ZoomableDoodler).scaleAt(
+        { x: 200, y: 200 },
+        1 + (gamepad.buttons[7].value / 5),
+      );
+    }
+    if (gamepad.buttons[6].value) {
+      (doodler as ZoomableDoodler).scaleAt(
+        { x: 200, y: 200 },
+        1 - (gamepad.buttons[6].value / 5),
+      );
+    }
+  }
+  doodler.drawImageWithOutline(img, p);
   // doodler.line(new Vector(100, 100), new Vector(200, 200))
   // doodler.dot(new Vector(300, 300))
   // doodler.fillCircle(movingVector, 6, { color: 'red' });
@@ -35,21 +69,28 @@ doodler.createLayer(() => {
   //   doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20)
   // })
 
-
   // movingVector.set((movingVector.x + 1) % 400, movingVector.y);
   // angleMultiplier += .001;
 
   // doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20)
 
-  doodler.drawScaled(1.5, () => {doodler.line(p.copy().add(-8,10), p.copy().add(8,10), {color: 'grey', weight: 2})
+  // doodler.drawScaled(1.5, () => {
-  doodler.line(p.copy().add(-8,-10), p.copy().add(8,-10), {color: 'grey', weight: 2})
+  //   doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
-  doodler.line(p, p.copy().add(0,12), {color: 'brown', weight: 4})
+  //     color: "grey",
-  doodler.line(p, p.copy().add(0,-12), {color: 'brown', weight: 4})})
+  //     weight: 2,
+  //   });
+  //   doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
+  //     color: "grey",
+  //     weight: 2,
+  //   });
+  //   doodler.line(p, p.copy().add(0, 12), { color: "brown", weight: 4 });
+  //   doodler.line(p, p.copy().add(0, -12), { color: "brown", weight: 4 });
+  // });
 });
 
-document.addEventListener('keyup', e => {
+document.addEventListener("keyup", (e) => {
   e.preventDefault();
-  if (e.key === ' ') {
+  if (e.key === " ") {
     doodler.unregisterDraggable(v);
   }
-})
+});

postInit.ts

@@ -0,0 +1 @@
+export type postInit = (ctx: CanvasRenderingContext2D) => void;

zoomableCanvas.ts

@@ -1,23 +1,23 @@
 import { Doodler, IDoodlerOptions } from "./canvas.ts";
 import { OriginVector, Point } from "./geometry/vector.ts";
+import { postInit } from "./postInit.ts";
 import { easeInOut } from "./timing/EaseInOut.ts";
 import { map } from "./timing/Map.ts";
 
 type TouchEventCallback = (e: TouchEvent) => void;
 
 export class ZoomableDoodler extends Doodler {
-
   private scale = 1;
   dragging = false;
   private origin: Point = {
     x: 0,
-    y: 0
+    y: 0,
-  }
+  };
 
   mouse = {
     x: 0,
-    y: 0
+    y: 0,
-  }
+  };
 
   private previousTouchLength?: number;
 
@@ -28,53 +28,53 @@ export class ZoomableDoodler extends Doodler {
   scaleAround: Point = { x: 0, y: 0 };
 
   maxScale = 4;
-  
-  constructor(options: IDoodlerOptions) {
-    super(options)
 
-    this._canvas.addEventListener('wheel', (e) => {
+  constructor(options: IDoodlerOptions, postInit?: postInit) {
+    super(options, postInit);
+
+    this._canvas.addEventListener("wheel", (e) => {
       this.scaleAtMouse(e.deltaY < 0 ? 1.1 : .9);
       if (this.scale === 1) {
-        this.origin.x = 0
+        this.origin.x = 0;
-        this.origin.y = 0
+        this.origin.y = 0;
       }
-    })
+    });
-    this._canvas.addEventListener('dblclick', (e) => {
+    this._canvas.addEventListener("dblclick", (e) => {
       e.preventDefault();
       this.scale = 1;
       this.origin.x = 0;
       this.origin.y = 0;
       this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-    })
+    });
-    this._canvas.addEventListener('mousedown', (e) => {
+    this._canvas.addEventListener("mousedown", (e) => {
       e.preventDefault();
       this.dragging = true;
-    })
+    });
-    this._canvas.addEventListener('mouseup', (e) => {
+    this._canvas.addEventListener("mouseup", (e) => {
       e.preventDefault();
       this.dragging = false;
-    })
+    });
-    this._canvas.addEventListener('mouseleave', (e) => {
+    this._canvas.addEventListener("mouseleave", (e) => {
       this.dragging = false;
-    })
+    });
-    this._canvas.addEventListener('mousemove', (e) => {
+    this._canvas.addEventListener("mousemove", (e) => {
       const prev = this.mouse;
       this.mouse = {
         x: e.offsetX,
-        y: e.offsetY
+        y: e.offsetY,
-      }
+      };
       if (this.dragging && !this.dragTarget) this.drag(prev);
-    })
+    });
 
-    this._canvas.addEventListener('touchstart', (e) => {
+    this._canvas.addEventListener("touchstart", (e) => {
       e.preventDefault();
       if (e.touches.length === 1) {
         const t1 = e.touches.item(0);
         if (t1) {
           this.mouse = this.getTouchOffset({
             x: t1.clientX,
-            y: t1.clientY
+            y: t1.clientY,
-          })
+          });
         }
         // this.touchTimer = setTimeout(() => {
         //   this.dragging = true;
@@ -83,7 +83,7 @@ export class ZoomableDoodler extends Doodler {
         clearTimeout(this.touchTimer);
       }
     });
-    this._canvas.addEventListener('touchend', (e) => {
+    this._canvas.addEventListener("touchend", (e) => {
       if (e.touches.length !== 2) {
         this.previousTouchLength = undefined;
       }
@@ -93,7 +93,7 @@ export class ZoomableDoodler extends Doodler {
           break;
         case 0:
           if (!this.zooming) {
-            this.events.get('touchend')?.map(cb => cb(e));
+            this.events.get("touchend")?.map((cb) => cb(e));
           }
           break;
       }
@@ -101,7 +101,7 @@ export class ZoomableDoodler extends Doodler {
       this.dragging = e.touches.length === 1;
       clearTimeout(this.touchTimer);
     });
-    this._canvas.addEventListener('touchmove', (e) => {
+    this._canvas.addEventListener("touchmove", (e) => {
       e.preventDefault();
 
       if (e.touches.length === 2) {
@@ -112,18 +112,18 @@ export class ZoomableDoodler extends Doodler {
           const vect = OriginVector.from(
             this.getTouchOffset({
               x: t1.clientX,
-              y: t1.clientY
+              y: t1.clientY,
             }),
             {
               x: t2.clientX,
-              y: t2.clientY
+              y: t2.clientY,
             },
-          )
+          );
 
           if (this.previousTouchLength) {
             const diff = this.previousTouchLength - vect.mag();
             this.scaleAt(vect.halfwayPoint, diff < 0 ? 1.01 : .99);
-            this.scaleAround = { ...vect.halfwayPoint }
+            this.scaleAround = { ...vect.halfwayPoint };
           }
           this.previousTouchLength = vect.mag();
         }
@@ -136,14 +136,14 @@ export class ZoomableDoodler extends Doodler {
           const prev = this.mouse;
           this.mouse = this.getTouchOffset({
             x: t1.clientX,
-            y: t1.clientY
+            y: t1.clientY,
-          })
+          });
           this.drag(prev);
         }
       }
     });
 
-    this._canvas.addEventListener('touchstart', (e) => {
+    this._canvas.addEventListener("touchstart", (e) => {
       if (e.touches.length !== 1) return false;
 
       if (!this.hasDoubleTapped) {
@@ -166,11 +166,12 @@ export class ZoomableDoodler extends Doodler {
         this.frameCounter = 0;
         this.zoomDirection = 1;
       }
-      if (this.zoomDirection > 0)
+      if (this.zoomDirection > 0) {
         this.scaleAround = { ...this.mouse };
+      }
 
-      this.events.get('doubletap')?.map(cb => cb(e));
+      this.events.get("doubletap")?.map((cb) => cb(e));
-    })
+    });
   }
 
   worldToScreen(x: number, y: number) {
@@ -187,7 +188,7 @@ export class ZoomableDoodler extends Doodler {
     if (this.scale === this.maxScale && scaleBy > 1) return;
     this.scaleAt({
       x: this.mouse.x,
-      y: this.mouse.y
+      y: this.mouse.y,
     }, scaleBy);
   }
   scaleAt(p: Point, scaleBy: number) {
@@ -196,6 +197,13 @@ export class ZoomableDoodler extends Doodler {
     this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
     this.constrainOrigin();
   }
+  moveOrigin(motion: Point) {
+    if (this.scale > 1) {
+      this.origin.x += motion.x;
+      this.origin.y += motion.y;
+      this.constrainOrigin();
+    }
+  }
   drag(prev: Point) {
     if (this.scale > 1) {
       const xOffset = this.mouse.x - prev.x;
@@ -206,15 +214,34 @@ export class ZoomableDoodler extends Doodler {
     }
   }
   constrainOrigin() {
-    this.origin.x = Math.min(Math.max(this.origin.x, (-this._canvas.width * this.scale) + this._canvas.width), 0);
+    this.origin.x = Math.min(
-    this.origin.y = Math.min(Math.max(this.origin.y, (-this._canvas.height * this.scale) + this._canvas.height), 0);
+      Math.max(
+        this.origin.x,
+        (-this._canvas.width * this.scale) + this._canvas.width,
+      ),
+      0,
+    );
+    this.origin.y = Math.min(
+      Math.max(
+        this.origin.y,
+        (-this._canvas.height * this.scale) + this._canvas.height,
+      ),
+      0,
+    );
   }
 
   draw() {
-    this.ctx.setTransform(this.scale, 0, 0, this.scale, this.origin.x, this.origin.y)
+    this.ctx.setTransform(
+      this.scale,
+      0,
+      0,
+      this.scale,
+      this.origin.x,
+      this.origin.y,
+    );
     this.animateZoom();
     this.ctx.fillStyle = this.bg;
-    this.ctx.fillRect(0, 0, this.width/this.scale, this.height/this.scale);
+    this.ctx.fillRect(0, 0, this.width / this.scale, this.height / this.scale);
     super.draw();
   }
 
@@ -225,18 +252,18 @@ export class ZoomableDoodler extends Doodler {
 
     return {
       x: offsetX,
-      y: offsetY
+      y: offsetY,
-    }
+    };
   }
 
   onDrag(e: MouseEvent): void {
     const d = {
       ...e,
-      movementX: e.movementX/this.scale,
+      movementX: e.movementX / this.scale,
-      movementY: e.movementY/this.scale
+      movementY: e.movementY / this.scale,
-    }
+    };
     super.onDrag(d);
-    const {x, y} = this.screenToWorld(e.offsetX, e.offsetY);
+    const { x, y } = this.screenToWorld(e.offsetX, e.offsetY);
     this.mouseX = x;
     this.mouseY = y;
   }
@@ -247,13 +274,15 @@ export class ZoomableDoodler extends Doodler {
     if (this.frameCounter < 60) {
       const frame = easeInOut(map(this.frameCounter, 0, 59, 0, 1));
       switch (this.zoomDirection) {
-        case 1: {
+        case 1:
-          this.scale = map(frame, 0, 1, 1, this.maxScale);
+          {
-        }
+            this.scale = map(frame, 0, 1, 1, this.maxScale);
+          }
           break;
-        case -1: {
+        case -1:
-          this.scale = map(frame, 0, 1, this.maxScale, 1);
+          {
-        }
+            this.scale = map(frame, 0, 1, this.maxScale, 1);
+          }
           break;
       }
       this.origin.x = this.scaleAround.x - (this.scaleAround.x * this.scale);
@@ -265,7 +294,10 @@ export class ZoomableDoodler extends Doodler {
   }
 
   events: Map<string, TouchEventCallback[]> = new Map();
-  registerEvent(eventName: 'touchend' | 'touchstart' | 'touchmove' | 'doubletap', cb: TouchEventCallback) {
+  registerEvent(
+    eventName: "touchend" | "touchstart" | "touchmove" | "doubletap",
+    cb: TouchEventCallback,
+  ) {
     let events = this.events.get(eventName);
     if (!events) events = this.events.set(eventName, []).get(eventName)!;
     events.push(cb);