post init

canvas.ts

@@ -1,15 +1,23 @@
 /// <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, zoomable: boolean) => {
-  if (window.doodler) throw 'Doodler has already been initialized in this window'
-  window.doodler = zoomable ? new ZoomableDoodler(opt) : new Doodler(opt);
+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();
-}
+};
 
 export interface IDoodlerOptions {
   width: number;
@@ -47,14 +55,14 @@ export class Doodler {
     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;
@@ -62,15 +70,17 @@ export class Doodler {
 
     this._canvas = canvas;
 
-    const ctx = canvas.getContext('2d');
-    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._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();
   }
 
@@ -80,6 +90,7 @@ export class Doodler {
   }
 
   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)) {
@@ -87,6 +98,7 @@ export class Doodler {
     // }
     for (const [i, l] of (this.layers || []).entries()) {
       l(this.ctx, i);
+      this.drawDeferred();
     }
     this.drawUI();
   }
@@ -98,11 +110,11 @@ export class Doodler {
   }
 
   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)];
 
@@ -119,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);
@@ -196,21 +208,78 @@ export class Doodler {
     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);
+    w && h
+      ? this.ctx.drawImage(img, at.x, at.y, w, h)
+      : this.ctx.drawImage(img, at.x, at.y);
   }
-  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);
+  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
@@ -218,10 +287,16 @@ export class Doodler {
   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' })
+  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) {
@@ -230,7 +305,7 @@ export class Doodler {
         this.removeUIElement(d.id);
       }
     }
-    this.draggables = this.draggables.filter(d => d.point !== point);
+    this.draggables = this.draggables.filter((d) => d.point !== point);
   }
 
   registerClickable(p1: Vector, p2: Vector, cb: () => void) {
@@ -241,21 +316,27 @@ export class Doodler {
 
     this.clickables.push({
       onClick: cb,
-      checkBound: (p) => p.y >= top && p.x >= left && p.y <= bottom && p.x <= right
-    })
+      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);
+    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);
+    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;
@@ -264,7 +345,7 @@ export class Doodler {
   }
 
   onClick(e: MouseEvent) {
-    const mouse = new Vector(this.mouseX, this.mouseY)
+    const mouse = new Vector(this.mouseX, this.mouseY);
     for (const d of this.draggables) {
       if (d.point.dist(mouse) <= d.radius) {
         d.beingDragged = true;
@@ -295,8 +376,8 @@ export class Doodler {
     // 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)
+    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 });
     }
   }
@@ -305,28 +386,44 @@ export class Doodler {
   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])
+      !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])
+      !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])
+      !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 [])
+      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: "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) {
@@ -349,6 +446,15 @@ interface IStyle {
 
   noStroke?: boolean;
   noFill?: boolean;
+
+  textAlign?: "center" | "end" | "left" | "right" | "start";
+  textBaseline?:
+    | "alphabetic"
+    | "top"
+    | "hanging"
+    | "middle"
+    | "ideographic"
+    | "bottom";
 }
 
 interface IDrawable {
@@ -358,21 +464,21 @@ interface IDrawable {
 type Draggable = {
   point: Vector;
   radius: number;
-  style?: IStyle & { shape: 'square' | 'circle' };
+  style?: IStyle & { shape: "square" | "circle" };
   beingDragged?: boolean;
   id: string;
   onDragStart?: () => void;
   onDragEnd?: () => void;
-  onDrag?: (dragDistance: { x: number, y: number }) => void;
-}
+  onDrag?: (dragDistance: { x: number; y: number }) => void;
+};
 
 type Clickable = {
   onClick: () => void;
   checkBound: (p: Vector) => boolean;
-}
+};
 
 type uiDrawing = {
   circle: () => void;
   square: () => void;
   rectangle: () => void;
-}
+};

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;
 
@@ -29,52 +29,52 @@ export class ZoomableDoodler extends Doodler {
 
   maxScale = 4;
 
-  constructor(options: IDoodlerOptions) {
-    super(options)
+  constructor(options: IDoodlerOptions, postInit?: postInit) {
+    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.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,
-        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) {
@@ -206,15 +207,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.y = Math.min(Math.max(this.origin.y, (-this._canvas.height * this.scale) + this._canvas.height), 0);
+    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.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 +245,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,
-      movementY: e.movementY/this.scale
-    }
+      movementX: e.movementX / 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 +267,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: {
-          this.scale = map(frame, 0, 1, 1, this.maxScale);
-        }
+        case 1:
+          {
+            this.scale = map(frame, 0, 1, 1, this.maxScale);
+          }
           break;
-        case -1: {
-          this.scale = map(frame, 0, 1, this.maxScale, 1);
-        }
+        case -1:
+          {
+            this.scale = map(frame, 0, 1, this.maxScale, 1);
+          }
           break;
       }
       this.origin.x = this.scaleAround.x - (this.scaleAround.x * this.scale);
@@ -265,7 +287,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);