adds drawWithOutline

.vscode/settings.json

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

canvas.ts

@@ -1,15 +1,25 @@
 /// <reference types="./global.d.ts" />
 
-
 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) => {
-  window['doodler'] = new Doodler(opt);
-  window['doodler'].init();
+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, postInit)
+    : new Doodler(opt, postInit);
+  window.doodler.init();
+};
 
-interface IDoodlerOptions {
+export interface IDoodlerOptions {
   width: number;
   height: number;
   canvas?: HTMLCanvasElement;
@@ -20,12 +30,12 @@ interface IDoodlerOptions {
 type layer = (ctx: CanvasRenderingContext2D, index: number) => void;
 
 export class Doodler {
-  private ctx: CanvasRenderingContext2D;
-  private _canvas: HTMLCanvasElement;
+  protected ctx: CanvasRenderingContext2D;
+  protected _canvas: HTMLCanvasElement;
 
   private layers: layer[] = [];
 
-  private bg: string;
+  protected bg: string;
   private framerate: number;
 
   get width() {
@@ -35,19 +45,24 @@ export class Doodler {
     return this.ctx.canvas.height;
   }
 
+  private draggables: Draggable[] = [];
+  private clickables: Clickable[] = [];
+
+  protected dragTarget?: Draggable;
+
   constructor({
     width,
     height,
     canvas,
     bg,
-    framerate
-  }: IDoodlerOptions) {
+    framerate,
+  }: IDoodlerOptions, postInit?: 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;
@@ -55,13 +70,17 @@ export class Doodler {
 
     this._canvas = canvas;
 
-    const ctx = canvas.getContext('2d');
-    console.log(ctx);
-    if (!ctx) throw 'Unable to initialize Doodler: Canvas context not found';
+    const ctx = canvas.getContext("2d");
+    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("mouseup", (e) => this.offClick(e));
+    this._canvas.addEventListener("mousemove", (e) => this.onDrag(e));
     this.startDrawLoop();
   }
 
@@ -70,30 +89,40 @@ export class Doodler {
     this.timer = setInterval(() => this.draw(), 1000 / this.framerate);
   }
 
-  private draw() {
+  protected 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 d of this.draggables.filter(d => d.beingDragged)) {
+    //   d.point.set(this.mouseX,this.mouseY);
+    // }
     for (const [i, l] of (this.layers || []).entries()) {
       l(this.ctx, i);
+      this.drawDeferred();
     }
+    this.drawUI();
   }
 
+  // Layer management
+
   createLayer(layer: layer) {
     this.layers.push(layer);
   }
 
   deleteLayer(layer: layer) {
-    this.layers = this.layers.filter(l => l !== layer);
+    this.layers = this.layers.filter((l) => l !== layer);
   }
 
   moveLayer(layer: layer, index: number) {
-    let temp = this.layers.filter(l => l !== layer);
+    let temp = this.layers.filter((l) => l !== layer);
 
     temp = [...temp.slice(0, index), layer, ...temp.slice(index)];
 
     this.layers = temp;
   }
 
+  // Drawing
+
   line(start: Vector, end: Vector, style?: IStyle) {
     this.setStyle(style);
     this.ctx.beginPath();
@@ -102,7 +131,7 @@ export class Doodler {
     this.ctx.stroke();
   }
   dot(at: Vector, style?: IStyle) {
-    this.setStyle({ ...style, weight: 1 })
+    this.setStyle({ ...style, weight: 1 });
     this.ctx.beginPath();
 
     this.ctx.arc(at.x, at.y, style?.weight || 1, 0, Constants.TWO_PI);
@@ -163,12 +192,291 @@ export class Doodler {
     this.ctx.stroke();
   }
 
+  drawRotated(origin: Vector, angle: number, cb: () => void) {
+    this.ctx.save();
+    this.ctx.translate(origin.x, origin.y);
+    this.ctx.rotate(angle);
+    this.ctx.translate(-origin.x, -origin.y);
+    cb();
+    this.ctx.restore();
+  }
+
+  drawScaled(scale: number, cb: () => void) {
+    this.ctx.save();
+    this.ctx.transform(scale, 0, 0, scale, 0, 0);
+    cb();
+    this.ctx.restore();
+  }
+
+  drawWithAlpha(alpha: number, cb: () => void) {
+    this.ctx.save();
+    this.ctx.globalAlpha = Math.min(Math.max(alpha, 0), 1);
+    cb();
+    this.ctx.restore();
+  }
+
+  drawImage(img: HTMLImageElement, at: Vector): void;
+  drawImage(img: HTMLImageElement, at: Vector, w: number, h: number): void;
+  drawImage(img: HTMLImageElement, at: Vector, w?: number, h?: number) {
+    w && h
+      ? 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,
+    sWidth: number,
+    sHeight: number,
+    at: Vector,
+    width: number,
+    height: number,
+  ) {
+    this.ctx.drawImage(
+      img,
+      spritePos.x,
+      spritePos.y,
+      sWidth,
+      sHeight,
+      at.x,
+      at.y,
+      width,
+      height,
+    );
+  }
+
+  private deferredDrawings: (() => void)[] = [];
+
+  deferDrawing(cb: () => void) {
+    this.deferredDrawings.push(cb);
+  }
+
+  drawDeferred() {
+    while (this.deferredDrawings.length) {
+      this.deferredDrawings.pop()?.();
+    }
+  }
+
   setStyle(style?: IStyle) {
     const ctx = this.ctx;
-    ctx.fillStyle = style?.color || style?.fillColor || 'black';
-    ctx.strokeStyle = style?.color || style?.strokeColor || 'black';
+    ctx.fillStyle = style?.color || style?.fillColor || "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: string, pos: Vector, maxWidth: number, style?: IStyle) {
+    this.setStyle(style);
+    // TODO: add text alignment to style
+    this.ctx.fillText(text, pos.x, pos.y, maxWidth);
+  }
+  strokeText(text: string, pos: Vector, maxWidth: number, style?: IStyle) {
+    this.setStyle(style);
+    // TODO: add text alignment to style
+    this.ctx.strokeText(text, pos.x, pos.y, maxWidth);
+  }
+
+  clearRect(at: Vector, width: number, height: number) {
+    this.ctx.clearRect(at.x, at.y, width, height);
+  }
+
+  // Interaction
+
+  mouseX = 0;
+  mouseY = 0;
+
+  registerDraggable(
+    point: Vector,
+    radius: number,
+    style?: IStyle & { shape: "square" | "circle" },
+  ) {
+    if (this.draggables.find((d) => d.point === point)) return;
+    const id = this.addUIElement("circle", point, radius, {
+      fillColor: "#5533ff50",
+      strokeColor: "#5533ff50",
+    });
+    this.draggables.push({ point, radius, style, id });
+  }
+  unregisterDraggable(point: Vector) {
+    for (const d of this.draggables) {
+      if (d.point === point) {
+        this.removeUIElement(d.id);
+      }
+    }
+    this.draggables = this.draggables.filter((d) => d.point !== point);
+  }
+
+  registerClickable(p1: Vector, p2: Vector, cb: () => void) {
+    const top = Math.min(p1.y, p2.y);
+    const left = Math.min(p1.x, p2.x);
+    const bottom = Math.max(p1.y, p2.y);
+    const right = Math.max(p1.x, p2.x);
+
+    this.clickables.push({
+      onClick: cb,
+      checkBound: (p) =>
+        p.y >= top && p.x >= left && p.y <= bottom && p.x <= right,
+    });
+  }
+
+  unregisterClickable(cb: () => void) {
+    this.clickables = this.clickables.filter((c) => c.onClick !== cb);
+  }
+
+  addDragEvents({
+    onDragEnd,
+    onDragStart,
+    onDrag,
+    point,
+  }: {
+    point: Vector;
+    onDragEnd?: () => void;
+    onDragStart?: () => void;
+    onDrag?: (movement: { x: number; y: number }) => void;
+  }) {
+    const d = this.draggables.find((d) => d.point === point);
+    if (d) {
+      d.onDragEnd = onDragEnd;
+      d.onDragStart = onDragStart;
+      d.onDrag = onDrag;
+    }
+  }
+
+  onClick(e: MouseEvent) {
+    const mouse = new Vector(this.mouseX, this.mouseY);
+    for (const d of this.draggables) {
+      if (d.point.dist(mouse) <= d.radius) {
+        d.beingDragged = true;
+        d.onDragStart?.call(null);
+        this.dragTarget = d;
+      } else d.beingDragged = false;
+    }
+
+    for (const c of this.clickables) {
+      if (c.checkBound(mouse)) {
+        c.onClick();
+      }
+    }
+  }
+
+  offClick(e: MouseEvent) {
+    for (const d of this.draggables) {
+      d.beingDragged = false;
+      d.onDragEnd?.call(null);
+    }
+    this.dragTarget = undefined;
+  }
+
+  onDrag(e: MouseEvent) {
+    const rect = this._canvas.getBoundingClientRect();
+    this.mouseX = e.offsetX;
+    this.mouseY = e.offsetY;
+    // this.mouseX = e.clientX - rect.left;
+    // this.mouseY = e.clientY - rect.top;
+
+    for (const d of this.draggables.filter((d) => d.beingDragged)) {
+      d.point.add(e.movementX, e.movementY);
+      d.onDrag && d.onDrag({ x: e.movementX, y: e.movementY });
+    }
+  }
+
+  // UI Layer
+  uiElements: Map<string, [keyof uiDrawing, ...any]> = new Map();
+  private uiDrawing: uiDrawing = {
+    rectangle: (...args: any[]) => {
+      !args[3].noFill && this.fillRect(args[0], args[1], args[2], args[3]);
+      !args[3].noStroke && this.drawRect(args[0], args[1], args[2], args[3]);
+    },
+    square: (...args: any[]) => {
+      !args[2].noFill && this.fillSquare(args[0], args[1], args[2]);
+      !args[2].noStroke && this.drawSquare(args[0], args[1], args[2]);
+    },
+    circle: (...args: any[]) => {
+      !args[2].noFill && this.fillCircle(args[0], args[1], args[2]);
+      !args[2].noStroke && this.drawCircle(args[0], args[1], args[2]);
+    },
+  };
+
+  private drawUI() {
+    for (const [shape, ...args] of this.uiElements.values()) {
+      this.uiDrawing[shape].apply(null, args as []);
+    }
+  }
+
+  addUIElement(
+    shape: "rectangle",
+    at: Vector,
+    width: number,
+    height: number,
+    style?: IStyle,
+  ): string;
+  addUIElement(
+    shape: "square",
+    at: Vector,
+    size: number,
+    style?: IStyle,
+  ): string;
+  addUIElement(
+    shape: "circle",
+    at: Vector,
+    radius: number,
+    style?: IStyle,
+  ): string;
+  addUIElement(shape: keyof uiDrawing, ...args: any[]) {
+    const id = crypto.randomUUID();
+    for (const arg of args) {
+      delete arg.color;
+    }
+    this.uiElements.set(id, [shape, ...args]);
+    return id;
+  }
+
+  removeUIElement(id: string) {
+    this.uiElements.delete(id);
   }
 }
 
@@ -177,8 +485,42 @@ interface IStyle {
   fillColor?: string;
   strokeColor?: string;
   weight?: number;
+
+  noStroke?: boolean;
+  noFill?: boolean;
+
+  textAlign?: "center" | "end" | "left" | "right" | "start";
+  textBaseline?:
+    | "alphabetic"
+    | "top"
+    | "hanging"
+    | "middle"
+    | "ideographic"
+    | "bottom";
 }
 
 interface IDrawable {
   draw: () => void;
 }
+
+type Draggable = {
+  point: Vector;
+  radius: number;
+  style?: IStyle & { shape: "square" | "circle" };
+  beingDragged?: boolean;
+  id: string;
+  onDragStart?: () => void;
+  onDragEnd?: () => void;
+  onDrag?: (dragDistance: { x: number; y: number }) => void;
+};
+
+type Clickable = {
+  onClick: () => void;
+  checkBound: (p: Vector) => boolean;
+};
+
+type uiDrawing = {
+  circle: () => void;
+  square: () => void;
+  rectangle: () => void;
+};

geometry/vector.ts

@@ -2,7 +2,7 @@
 
 import { Constants } from "./constants.ts";
 
-export class Vector {
+export class Vector implements Point {
   x: number;
   y: number;
   z: number;
@@ -56,9 +56,9 @@ export class Vector {
       return v;
     }
   }
-  add(x: number, y: number, z: number): void;
-  add(x: number, y: number): void;
-  add(v: Vector): void;
+  add(x: number, y: number, z: number): Vector;
+  add(x: number, y: number): Vector;
+  add(v: Vector): Vector;
   add(v: Vector | number, y?: number, z?: number) {
     if (arguments.length === 1 && typeof v !== 'number') {
       this.x += v.x;
@@ -73,10 +73,11 @@ export class Vector {
       this.y += y ?? 0;
       this.z += z ?? 0;
     }
+    return this;
   }
-  sub(x: number, y: number, z: number): void;
-  sub(x: number, y: number): void;
-  sub(v: Vector): void;
+  sub(x: number, y: number, z: number): Vector;
+  sub(x: number, y: number): Vector;
+  sub(v: Vector): Vector;
   sub(v: Vector | number, y?: number, z?: number) {
     if (arguments.length === 1 && typeof v !== 'number') {
       this.x -= v.x;
@@ -91,6 +92,7 @@ export class Vector {
       this.y -= y ?? 0;
       this.z -= z ?? 0;
     }
+    return this;
   }
   mult(v: number | Vector) {
     if (typeof v === 'number') {
@@ -114,6 +116,7 @@ export class Vector {
       this.y /= v.y;
       this.z /= v.z;
     }
+    return this;
   }
   rotate(angle: number) {
     const prev_x = this.x;
@@ -121,6 +124,7 @@ export class Vector {
     const s = Math.sin(angle);
     this.x = c * this.x - s * this.y;
     this.y = s * prev_x + c * this.y;
+    return this;
   }
   dist(v: Vector) {
     const dx = this.x - v.x,
@@ -165,6 +169,7 @@ export class Vector {
     this.x = lerp_val(this.x, x, amt!);
     this.y = lerp_val(this.y, y, amt!);
     this.z = lerp_val(this.z, z!, amt!);
+    return this;
   }
   normalize() {
     const m = this.mag();
@@ -178,6 +183,7 @@ export class Vector {
       this.normalize();
       this.mult(high);
     }
+    return this;
   }
   heading() {
     return (-Math.atan2(-this.y, this.x));
@@ -197,7 +203,6 @@ export class Vector {
   }
 
   drawDot() {
-    let doodler = window['doodler'];
     if (!doodler) return;
 
     doodler.dot(this, {weight: 2, color: 'red'});
@@ -273,3 +278,34 @@ export class Vector {
     return Vector.dot(Vector.sub(a, b), Vector.sub(a, b))
   }
 }
+
+export class OriginVector extends Vector {
+  origin: Point;
+
+  get halfwayPoint() {
+    return {
+      x: (this.mag()/2 * Math.sin(this.heading())) + this.origin.x,
+      y: (this.mag()/2 * Math.cos(this.heading())) + this.origin.y
+    }
+  }
+
+  constructor(origin: Point, p: Point) {
+    super(p.x, p.y, p.z);
+    this.origin = origin;
+  }
+
+  static from(origin: Point, p: Point) {
+    const v = {
+      x: p.x - origin.x,
+      y: p.y - origin.y,
+    };
+
+    return new OriginVector(origin, v);
+  }
+}
+
+export interface Point {
+  x: number;
+  y: number;
+  z?: number;
+}

main.ts

@@ -1,26 +1,68 @@
-import { Doodler } from "./canvas.ts";
 /// <reference types="./global.d.ts" />
 
-import { Vector, initializeDoodler } from './mod.ts'
+import { initializeDoodler, Vector } from "./mod.ts";
 
-initializeDoodler({
+initializeDoodler(
+  {
     width: 400,
-  height: 400
-})
-
-// let doodler = window['doodler'];
+    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);
+const img = new Image();
+img.src = "./skeleton.png";
+img.hidden;
+document.body.append(img);
+
+const p = new Vector(200, 200);
+
 doodler.createLayer(() => {
+  doodler.drawImageWithOutline(img, new Vector(60, 60));
+  // doodler.line(new Vector(100, 100), new Vector(200, 200))
+  // doodler.dot(new Vector(300, 300))
+  // doodler.fillCircle(movingVector, 6, { color: 'red' });
+  // doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
+  // doodler.fillRect(new Vector(200, 250), 30, 10)
 
-  doodler.line(new Vector(100, 100), new Vector(200, 200))
-  doodler.dot(new Vector(300, 300))
-  doodler.fillCircle(movingVector, 6, { color: 'red' });
-  doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
-  doodler.fillRect(new Vector(200, 250), 30, 10)
+  // doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
+  // doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))
 
-  doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
-  doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))
+  // let rotatedOrigin = new Vector(200, 200)
+  // doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, () => {
+  //   doodler.drawCenteredSquare(rotatedOrigin, 30)
+  //   doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20)
+  // })
 
-  movingVector.set((movingVector.x + 1) % 400, movingVector.y);
+  // 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.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) => {
+  e.preventDefault();
+  if (e.key === " ") {
+    doodler.unregisterDraggable(v);
+  }
 });

postInit.ts

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

timing/EaseInOut.ts

@@ -0,0 +1,2 @@
+export const easeInOut = (x: number) =>
+  x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;

timing/Map.ts

@@ -0,0 +1,2 @@
+export const map = (value: number, x1: number, y1: number, x2: number, y2: number) => 
+  (value - x1) * (y2 - x2) / (y1 - x1) + x2;

zoomableCanvas.ts

@@ -0,0 +1,298 @@
+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,
+  };
+
+  mouse = {
+    x: 0,
+    y: 0,
+  };
+
+  private previousTouchLength?: number;
+
+  private touchTimer?: number;
+
+  private hasDoubleTapped = false;
+  private zooming = false;
+  scaleAround: Point = { x: 0, y: 0 };
+
+  maxScale = 4;
+
+  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.y = 0;
+      }
+    });
+    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) => {
+      e.preventDefault();
+      this.dragging = true;
+    });
+    this._canvas.addEventListener("mouseup", (e) => {
+      e.preventDefault();
+      this.dragging = false;
+    });
+    this._canvas.addEventListener("mouseleave", (e) => {
+      this.dragging = false;
+    });
+    this._canvas.addEventListener("mousemove", (e) => {
+      const prev = this.mouse;
+      this.mouse = {
+        x: e.offsetX,
+        y: e.offsetY,
+      };
+      if (this.dragging && !this.dragTarget) this.drag(prev);
+    });
+
+    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,
+          });
+        }
+        // this.touchTimer = setTimeout(() => {
+        //   this.dragging = true;
+        // }, 100)
+      } else {
+        clearTimeout(this.touchTimer);
+      }
+    });
+    this._canvas.addEventListener("touchend", (e) => {
+      if (e.touches.length !== 2) {
+        this.previousTouchLength = undefined;
+      }
+
+      switch (e.touches.length) {
+        case 1:
+          break;
+        case 0:
+          if (!this.zooming) {
+            this.events.get("touchend")?.map((cb) => cb(e));
+          }
+          break;
+      }
+
+      this.dragging = e.touches.length === 1;
+      clearTimeout(this.touchTimer);
+    });
+    this._canvas.addEventListener("touchmove", (e) => {
+      e.preventDefault();
+
+      if (e.touches.length === 2) {
+        const t1 = e.touches.item(0);
+        const t2 = e.touches.item(1);
+
+        if (t1 && t2) {
+          const vect = OriginVector.from(
+            this.getTouchOffset({
+              x: t1.clientX,
+              y: t1.clientY,
+            }),
+            {
+              x: t2.clientX,
+              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.previousTouchLength = vect.mag();
+        }
+      }
+
+      if (e.touches.length === 1) {
+        this.dragging === true;
+        const t1 = e.touches.item(0);
+        if (t1) {
+          const prev = this.mouse;
+          this.mouse = this.getTouchOffset({
+            x: t1.clientX,
+            y: t1.clientY,
+          });
+          this.drag(prev);
+        }
+      }
+    });
+
+    this._canvas.addEventListener("touchstart", (e) => {
+      if (e.touches.length !== 1) return false;
+
+      if (!this.hasDoubleTapped) {
+        this.hasDoubleTapped = true;
+        setTimeout(() => this.hasDoubleTapped = false, 300);
+        return false;
+      }
+
+      // this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+      // this.scale = 1;
+      // this.origin.x = 0;
+      // this.origin.y = 0;
+
+      console.log(this.mouse);
+
+      if (this.scale > 1) {
+        this.frameCounter = map(this.scale, this.maxScale, 1, 0, 59);
+        this.zoomDirection = -1;
+      } else {
+        this.frameCounter = 0;
+        this.zoomDirection = 1;
+      }
+      if (this.zoomDirection > 0) {
+        this.scaleAround = { ...this.mouse };
+      }
+
+      this.events.get("doubletap")?.map((cb) => cb(e));
+    });
+  }
+
+  worldToScreen(x: number, y: number) {
+    x = x * this.scale + this.origin.x;
+    y = y * this.scale + this.origin.y;
+    return { x, y };
+  }
+  screenToWorld(x: number, y: number) {
+    x = (x - this.origin.x) / this.scale;
+    y = (y - this.origin.y) / this.scale;
+    return { x, y };
+  }
+  scaleAtMouse(scaleBy: number) {
+    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), 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();
+  }
+  drag(prev: Point) {
+    if (this.scale > 1) {
+      const xOffset = this.mouse.x - prev.x;
+      const yOffset = this.mouse.y - prev.y;
+      this.origin.x += xOffset;
+      this.origin.y += yOffset;
+      this.constrainOrigin();
+    }
+  }
+  constrainOrigin() {
+    this.origin.x = Math.min(
+      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.animateZoom();
+    this.ctx.fillStyle = this.bg;
+    this.ctx.fillRect(0, 0, this.width / this.scale, this.height / this.scale);
+    super.draw();
+  }
+
+  getTouchOffset(p: Point) {
+    const { x, y } = this._canvas.getBoundingClientRect();
+    const offsetX = p.x - x;
+    const offsetY = p.y - y;
+
+    return {
+      x: offsetX,
+      y: offsetY,
+    };
+  }
+
+  onDrag(e: MouseEvent): void {
+    const d = {
+      ...e,
+      movementX: e.movementX / this.scale,
+      movementY: e.movementY / this.scale,
+    };
+    super.onDrag(d);
+    const { x, y } = this.screenToWorld(e.offsetX, e.offsetY);
+    this.mouseX = x;
+    this.mouseY = y;
+  }
+
+  zoomDirection = -1;
+  frameCounter = 60;
+  animateZoom() {
+    if (this.frameCounter < 60) {
+      const frame = easeInOut(map(this.frameCounter, 0, 59, 0, 1));
+      switch (this.zoomDirection) {
+        case 1:
+          {
+            this.scale = map(frame, 0, 1, 1, this.maxScale);
+          }
+          break;
+        case -1:
+          {
+            this.scale = map(frame, 0, 1, this.maxScale, 1);
+          }
+          break;
+      }
+      this.origin.x = this.scaleAround.x - (this.scaleAround.x * this.scale);
+      this.origin.y = this.scaleAround.y - (this.scaleAround.y * this.scale);
+      this.constrainOrigin();
+
+      this.frameCounter++;
+    }
+  }
+
+  events: Map<string, TouchEventCallback[]> = new Map();
+  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);
+  }
+}