On Drag event

bundle.js

@@ -5,9 +5,244 @@
 const Constants = {
     TWO_PI: Math.PI * 2
 };
+class Vector {
+    x;
+    y;
+    z;
+    constructor(x = 0, y = 0, z = 0){
+        this.x = x;
+        this.y = y;
+        this.z = z;
+    }
+    set(v, y, z) {
+        if (arguments.length === 1 && typeof v !== "number") {
+            this.set(v.x || v[0] || 0, v.y || v[1] || 0, v.z || v[2] || 0);
+        } else {
+            this.x = v;
+            this.y = y || 0;
+            this.z = z || 0;
+        }
+    }
+    get() {
+        return new Vector(this.x, this.y, this.z);
+    }
+    mag() {
+        const x = this.x, y = this.y, z = this.z;
+        return Math.sqrt(x * x + y * y + z * z);
+    }
+    magSq() {
+        const x = this.x, y = this.y, z = this.z;
+        return x * x + y * y + z * z;
+    }
+    setMag(v_or_len, len) {
+        if (len === undefined) {
+            len = v_or_len;
+            this.normalize();
+            this.mult(len);
+        } else {
+            const v = v_or_len;
+            v.normalize();
+            v.mult(len);
+            return v;
+        }
+    }
+    add(v, y, z) {
+        if (arguments.length === 1 && typeof v !== 'number') {
+            this.x += v.x;
+            this.y += v.y;
+            this.z += v.z;
+        } else if (arguments.length === 2) {
+            this.x += v;
+            this.y += y ?? 0;
+        } else {
+            this.x += v;
+            this.y += y ?? 0;
+            this.z += z ?? 0;
+        }
+        return this;
+    }
+    sub(v, y, z) {
+        if (arguments.length === 1 && typeof v !== 'number') {
+            this.x -= v.x;
+            this.y -= v.y;
+            this.z -= v.z;
+        } else if (arguments.length === 2) {
+            this.x -= v;
+            this.y -= y ?? 0;
+        } else {
+            this.x -= v;
+            this.y -= y ?? 0;
+            this.z -= z ?? 0;
+        }
+        return this;
+    }
+    mult(v) {
+        if (typeof v === 'number') {
+            this.x *= v;
+            this.y *= v;
+            this.z *= v;
+        } else {
+            this.x *= v.x;
+            this.y *= v.y;
+            this.z *= v.z;
+        }
+        return this;
+    }
+    div(v) {
+        if (typeof v === 'number') {
+            this.x /= v;
+            this.y /= v;
+            this.z /= v;
+        } else {
+            this.x /= v.x;
+            this.y /= v.y;
+            this.z /= v.z;
+        }
+        return this;
+    }
+    rotate(angle) {
+        const prev_x = this.x;
+        const c = Math.cos(angle);
+        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) {
+        const dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z;
+        return Math.sqrt(dx * dx + dy * dy + dz * dz);
+    }
+    dot(v, y, z) {
+        if (arguments.length === 1 && typeof v !== 'number') {
+            return this.x * v.x + this.y * v.y + this.z * v.z;
+        }
+        return this.x * v + this.y * y + this.z * z;
+    }
+    cross(v) {
+        const x = this.x, y = this.y, z = this.z;
+        return new Vector(y * v.z - v.y * z, z * v.x - v.z * x, x * v.y - v.x * y);
+    }
+    lerp(v_or_x, amt_or_y, z, amt) {
+        const lerp_val = (start, stop, amt)=>{
+            return start + (stop - start) * amt;
+        };
+        let x, y;
+        if (arguments.length === 2 && typeof v_or_x !== 'number') {
+            amt = amt_or_y;
+            x = v_or_x.x;
+            y = v_or_x.y;
+            z = v_or_x.z;
+        } else {
+            x = v_or_x;
+            y = amt_or_y;
+        }
+        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();
+        if (m > 0) {
+            this.div(m);
+        }
+        return this;
+    }
+    limit(high) {
+        if (this.mag() > high) {
+            this.normalize();
+            this.mult(high);
+        }
+        return this;
+    }
+    heading() {
+        return -Math.atan2(-this.y, this.x);
+    }
+    heading2D() {
+        return this.heading();
+    }
+    toString() {
+        return "[" + this.x + ", " + this.y + ", " + this.z + "]";
+    }
+    array() {
+        return [
+            this.x,
+            this.y,
+            this.z
+        ];
+    }
+    copy() {
+        return new Vector(this.x, this.y, this.z);
+    }
+    drawDot() {
+        if (!doodler) return;
+        doodler.dot(this, {
+            weight: 2,
+            color: 'red'
+        });
+    }
+    static fromAngle(angle, v) {
+        if (v === undefined || v === null) {
+            v = new Vector();
+        }
+        v.x = Math.cos(angle);
+        v.y = Math.sin(angle);
+        return v;
+    }
+    static random2D(v) {
+        return Vector.fromAngle(Math.random() * (Math.PI * 2), v);
+    }
+    static random3D(v) {
+        const angle = Math.random() * Constants.TWO_PI;
+        const vz = Math.random() * 2 - 1;
+        const mult = Math.sqrt(1 - vz * vz);
+        const vx = mult * Math.cos(angle);
+        const vy = mult * Math.sin(angle);
+        if (v === undefined || v === null) {
+            v = new Vector(vx, vy, vz);
+        } else {
+            v.set(vx, vy, vz);
+        }
+        return v;
+    }
+    static dist(v1, v2) {
+        return v1.dist(v2);
+    }
+    static dot(v1, v2) {
+        return v1.dot(v2);
+    }
+    static cross(v1, v2) {
+        return v1.cross(v2);
+    }
+    static add(v1, v2) {
+        return new Vector(v1.x + v2.x, v1.y + v2.y, v1.z + v2.z);
+    }
+    static sub(v1, v2) {
+        return new Vector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z);
+    }
+    static angleBetween(v1, v2) {
+        return Math.acos(v1.dot(v2) / Math.sqrt(v1.magSq() * v2.magSq()));
+    }
+    static lerp(v1, v2, amt) {
+        const retval = new Vector(v1.x, v1.y, v1.z);
+        retval.lerp(v2, amt);
+        return retval;
+    }
+    static vectorProjection(v1, v2) {
+        v2 = v2.copy();
+        v2.normalize();
+        const sp = v1.dot(v2);
+        v2.mult(sp);
+        return v2;
+    }
+    static hypot2(a, b) {
+        return Vector.dot(Vector.sub(a, b), Vector.sub(a, b));
+    }
+}
 const init = (opt)=>{
-    window['doodler'] = new Doodler(opt);
+    if (window.doodler) throw 'Doodler has already been initialized in this window';
-    window['doodler'].init();
+    window.doodler = new Doodler(opt);
+    window.doodler.init();
 };
 class Doodler {
     ctx;
@@ -21,6 +256,8 @@ class Doodler {
     get height() {
         return this.ctx.canvas.height;
     }
+    draggables = [];
+    clickables = [];
     constructor({ width , height , canvas , bg , framerate  }){
         if (!canvas) {
             canvas = document.createElement('canvas');
@@ -37,6 +274,16 @@ class Doodler {
         this.ctx = ctx;
     }
     init() {
+        this._canvas.addEventListener('mousedown', (e)=>this.onClick(e));
+        this._canvas.addEventListener('mouseup', (e)=>this.offClick(e));
+        this._canvas.addEventListener('mousemove', (e)=>{
+            const rect = this._canvas.getBoundingClientRect();
+            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);
+            }
+        });
         this.startDrawLoop();
     }
     timer;
@@ -49,6 +296,7 @@ class Doodler {
         for (const [i, l] of (this.layers || []).entries()){
             l(this.ctx, i);
         }
+        this.drawUI();
     }
     createLayer(layer) {
         this.layers.push(layer);
@@ -132,259 +380,157 @@ class Doodler {
         this.ctx.bezierCurveTo(b.x, b.y, c.x, c.y, d.x, d.y);
         this.ctx.stroke();
     }
+    drawRotated(origin, angle, cb) {
+        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();
+    }
+    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);
+    }
+    drawSprite(img, spritePos, sWidth, sHeight, at, width, height) {
+        this.ctx.drawImage(img, spritePos.x, spritePos.y, sWidth, sHeight, at.x, at.y, width, height);
+    }
     setStyle(style) {
         const ctx = this.ctx;
         ctx.fillStyle = style?.color || style?.fillColor || 'black';
         ctx.strokeStyle = style?.color || style?.strokeColor || 'black';
         ctx.lineWidth = style?.weight || 1;
     }
-}
+    mouseX = 0;
-class Vector {
+    mouseY = 0;
-    x;
+    registerDraggable(point, radius, style) {
-    y;
+        if (this.draggables.find((d)=>d.point === point)) return;
-    z;
+        const id = this.addUIElement('circle', point, radius, {
-    constructor(x = 0, y = 0, z = 0){
+            fillColor: '#5533ff50',
-        this.x = x;
+            strokeColor: '#5533ff50'
-        this.y = y;
+        });
-        this.z = z;
+        this.draggables.push({
-    }
+            point,
-    set(v, y, z) {
+            radius,
-        if (arguments.length === 1 && typeof v !== "number") {
+            style,
-            this.set(v.x || v[0] || 0, v.y || v[1] || 0, v.z || v[2] || 0);
+            id
-        } else {
-            this.x = v;
-            this.y = y || 0;
-            this.z = z || 0;
-        }
-    }
-    get() {
-        return new Vector(this.x, this.y, this.z);
-    }
-    mag() {
-        const x = this.x, y = this.y, z = this.z;
-        return Math.sqrt(x * x + y * y + z * z);
-    }
-    magSq() {
-        const x = this.x, y = this.y, z = this.z;
-        return x * x + y * y + z * z;
-    }
-    setMag(v_or_len, len) {
-        if (len === undefined) {
-            len = v_or_len;
-            this.normalize();
-            this.mult(len);
-        } else {
-            const v = v_or_len;
-            v.normalize();
-            v.mult(len);
-            return v;
-        }
-    }
-    add(v, y, z) {
-        if (arguments.length === 1 && typeof v !== 'number') {
-            this.x += v.x;
-            this.y += v.y;
-            this.z += v.z;
-        } else if (arguments.length === 2) {
-            this.x += v;
-            this.y += y ?? 0;
-        } else {
-            this.x += v;
-            this.y += y ?? 0;
-            this.z += z ?? 0;
-        }
-    }
-    sub(v, y, z) {
-        if (arguments.length === 1 && typeof v !== 'number') {
-            this.x -= v.x;
-            this.y -= v.y;
-            this.z -= v.z;
-        } else if (arguments.length === 2) {
-            this.x -= v;
-            this.y -= y ?? 0;
-        } else {
-            this.x -= v;
-            this.y -= y ?? 0;
-            this.z -= z ?? 0;
-        }
-    }
-    mult(v) {
-        if (typeof v === 'number') {
-            this.x *= v;
-            this.y *= v;
-            this.z *= v;
-        } else {
-            this.x *= v.x;
-            this.y *= v.y;
-            this.z *= v.z;
-        }
-        return this;
-    }
-    div(v) {
-        if (typeof v === 'number') {
-            this.x /= v;
-            this.y /= v;
-            this.z /= v;
-        } else {
-            this.x /= v.x;
-            this.y /= v.y;
-            this.z /= v.z;
-        }
-    }
-    rotate(angle) {
-        const prev_x = this.x;
-        const c = Math.cos(angle);
-        const s = Math.sin(angle);
-        this.x = c * this.x - s * this.y;
-        this.y = s * prev_x + c * this.y;
-    }
-    dist(v) {
-        const dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z;
-        return Math.sqrt(dx * dx + dy * dy + dz * dz);
-    }
-    dot(v, y, z) {
-        if (arguments.length === 1 && typeof v !== 'number') {
-            return this.x * v.x + this.y * v.y + this.z * v.z;
-        }
-        return this.x * v + this.y * y + this.z * z;
-    }
-    cross(v) {
-        const x = this.x, y = this.y, z = this.z;
-        return new Vector(y * v.z - v.y * z, z * v.x - v.z * x, x * v.y - v.x * y);
-    }
-    lerp(v_or_x, amt_or_y, z, amt) {
-        const lerp_val = (start, stop, amt)=>{
-            return start + (stop - start) * amt;
-        };
-        let x, y;
-        if (arguments.length === 2 && typeof v_or_x !== 'number') {
-            amt = amt_or_y;
-            x = v_or_x.x;
-            y = v_or_x.y;
-            z = v_or_x.z;
-        } else {
-            x = v_or_x;
-            y = amt_or_y;
-        }
-        this.x = lerp_val(this.x, x, amt);
-        this.y = lerp_val(this.y, y, amt);
-        this.z = lerp_val(this.z, z, amt);
-    }
-    normalize() {
-        const m = this.mag();
-        if (m > 0) {
-            this.div(m);
-        }
-        return this;
-    }
-    limit(high) {
-        if (this.mag() > high) {
-            this.normalize();
-            this.mult(high);
-        }
-    }
-    heading() {
-        return -Math.atan2(-this.y, this.x);
-    }
-    heading2D() {
-        return this.heading();
-    }
-    toString() {
-        return "[" + this.x + ", " + this.y + ", " + this.z + "]";
-    }
-    array() {
-        return [
-            this.x,
-            this.y,
-            this.z
-        ];
-    }
-    copy() {
-        return new Vector(this.x, this.y, this.z);
-    }
-    drawDot() {
-        let doodler1 = window['doodler'];
-        if (!doodler1) return;
-        doodler1.dot(this, {
-            weight: 2,
-            color: 'red'
         });
     }
-    static fromAngle(angle, v) {
+    unregisterDraggable(point) {
-        if (v === undefined || v === null) {
+        for (const d of this.draggables){
-            v = new Vector();
+            if (d.point === point) {
+                this.removeUIElement(d.id);
             }
-        v.x = Math.cos(angle);
-        v.y = Math.sin(angle);
-        return v;
         }
-    static random2D(v) {
+        this.draggables = this.draggables.filter((d)=>d.point !== point);
-        return Vector.fromAngle(Math.random() * (Math.PI * 2), v);
     }
-    static random3D(v) {
+    registerClickable(p1, p2, cb) {
-        const angle = Math.random() * Constants.TWO_PI;
+        const top = Math.min(p1.y, p2.y);
-        const vz = Math.random() * 2 - 1;
+        const left = Math.min(p1.x, p2.x);
-        const mult = Math.sqrt(1 - vz * vz);
+        const bottom = Math.max(p1.y, p2.y);
-        const vx = mult * Math.cos(angle);
+        const right = Math.max(p1.x, p2.x);
-        const vy = mult * Math.sin(angle);
+        this.clickables.push({
-        if (v === undefined || v === null) {
+            onClick: cb,
-            v = new Vector(vx, vy, vz);
+            checkBound: (p)=>p.y >= top && p.x >= left && p.y <= bottom && p.x <= right
-        } else {
+        });
-            v.set(vx, vy, vz);
     }
-        return v;
+    unregisterClickable(cb) {
+        this.clickables = this.clickables.filter((c)=>c.onClick !== cb);
     }
-    static dist(v1, v2) {
+    addDragEvents({ onDragEnd , onDragStart , point  }) {
-        return v1.dist(v2);
+        const d = this.draggables.find((d)=>d.point === point);
+        if (d) {
+            d.onDragEnd = onDragEnd;
+            d.onDragStart = onDragStart;
         }
-    static dot(v1, v2) {
-        return v1.dot(v2);
     }
-    static cross(v1, v2) {
+    onClick(e) {
-        return v1.cross(v2);
+        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);
+            } else d.beingDragged = false;
         }
-    static add(v1, v2) {
+        for (const c of this.clickables){
-        return new Vector(v1.x + v2.x, v1.y + v2.y, v1.z + v2.z);
+            if (c.checkBound(mouse)) {
+                c.onClick();
             }
-    static sub(v1, v2) {
-        return new Vector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z);
         }
-    static angleBetween(v1, v2) {
-        return Math.acos(v1.dot(v2) / Math.sqrt(v1.magSq() * v2.magSq()));
     }
-    static lerp(v1, v2, amt) {
+    offClick(e) {
-        const retval = new Vector(v1.x, v1.y, v1.z);
+        for (const d of this.draggables){
-        retval.lerp(v2, amt);
+            d.beingDragged = false;
-        return retval;
+            d.onDragEnd?.call(null);
         }
-    static vectorProjection(v1, v2) {
-        v2 = v2.copy();
-        v2.normalize();
-        const sp = v1.dot(v2);
-        v2.mult(sp);
-        return v2;
     }
-    static hypot2(a, b) {
+    uiElements = new Map();
-        return Vector.dot(Vector.sub(a, b), Vector.sub(a, b));
+    uiDrawing = {
+        rectangle: (...args)=>{
+            !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)=>{
+            !args[2].noFill && this.fillSquare(args[0], args[1], args[2]);
+            !args[2].noStroke && this.drawSquare(args[0], args[1], args[2]);
+        },
+        circle: (...args)=>{
+            !args[2].noFill && this.fillCircle(args[0], args[1], args[2]);
+            !args[2].noStroke && this.drawCircle(args[0], args[1], args[2]);
+        }
+    };
+    drawUI() {
+        for (const [shape, ...args] of this.uiElements.values()){
+            this.uiDrawing[shape].apply(null, args);
+        }
+    }
+    addUIElement(shape, ...args) {
+        const id = crypto.randomUUID();
+        for (const arg of args){
+            delete arg.color;
+        }
+        this.uiElements.set(id, [
+            shape,
+            ...args
+        ]);
+        return id;
+    }
+    removeUIElement(id) {
+        this.uiElements.delete(id);
     }
 }
 init({
     width: 400,
     height: 400
 });
-const movingVector = new Vector(100, 300);
+new Vector(100, 300);
+const v = new Vector(30, 30);
+doodler.registerDraggable(v, 20);
+const img = new Image();
+img.src = './EngineSprites.png';
+img.hidden;
+document.body.append(img);
+const p = new Vector(200, 200);
 doodler.createLayer(()=>{
-    doodler.line(new Vector(100, 100), new Vector(200, 200));
+    doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
-    doodler.dot(new Vector(300, 300));
+        color: 'grey',
-    doodler.fillCircle(movingVector, 6, {
+        weight: 2
-        color: 'red'
     });
-    doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
+    doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
-    doodler.fillRect(new Vector(200, 250), 30, 10);
+        color: 'grey',
-    doodler.drawCenteredSquare(new Vector(200, 200), 40, {
+        weight: 2
-        color: 'purple',
-        weight: 5
     });
-    doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250));
+    doodler.line(p, p.copy().add(0, 12), {
-    movingVector.set((movingVector.x + 1) % 400, movingVector.y);
+        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);
+    }
 });

canvas.ts

@@ -5,8 +5,9 @@ import { Constants } from "./geometry/constants.ts";
 import { Vector } from "./geometry/vector.ts";
 
 export const init = (opt: IDoodlerOptions) => {
-  window['doodler'] = new Doodler(opt);
+  if (window.doodler) throw 'Doodler has already been initialized in this window'
-  window['doodler'].init();
+  window.doodler = new Doodler(opt);
+  window.doodler.init();
 }
 
 interface IDoodlerOptions {
@@ -35,6 +36,9 @@ export class Doodler {
     return this.ctx.canvas.height;
   }
 
+  private draggables: Draggable[] = [];
+  private clickables: Clickable[] = [];
+
   constructor({
     width,
     height,
@@ -62,6 +66,18 @@ export class Doodler {
   }
 
   init() {
+    this._canvas.addEventListener('mousedown', e => this.onClick(e));
+    this._canvas.addEventListener('mouseup', e => this.offClick(e));
+    this._canvas.addEventListener('mousemove', e => {
+      const rect = this._canvas.getBoundingClientRect();
+      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});
+      }
+    })
     this.startDrawLoop();
   }
 
@@ -73,11 +89,17 @@ export class Doodler {
   private draw() {
     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.drawUI();
   }
 
+  // Layer management
+
   createLayer(layer: layer) {
     this.layers.push(layer);
   }
@@ -94,6 +116,8 @@ export class Doodler {
     this.layers = temp;
   }
 
+  // Drawing
+
   line(start: Vector, end: Vector, style?: IStyle) {
     this.setStyle(style);
     this.ctx.beginPath();
@@ -163,6 +187,24 @@ 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();
+  }
+
+  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);
+  }
+  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);
+  }
+
   setStyle(style?: IStyle) {
     const ctx = this.ctx;
     ctx.fillStyle = style?.color || style?.fillColor || 'black';
@@ -170,6 +212,118 @@ export class Doodler {
 
     ctx.lineWidth = style?.weight || 1;
   }
+
+  // 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?: () => 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);
+      } 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);
+    }
+  }
+
+  // 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);
+  }
 }
 
 interface IStyle {
@@ -177,8 +331,33 @@ interface IStyle {
   fillColor?: string;
   strokeColor?: string;
   weight?: number;
+
+  noStroke?: boolean;
+  noFill?: boolean;
 }
 
 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

@@ -56,9 +56,9 @@ export class Vector {
       return v;
     }
   }
-  add(x: number, y: number, z: number): void;
+  add(x: number, y: number, z: number): Vector;
-  add(x: number, y: number): void;
+  add(x: number, y: number): Vector;
-  add(v: Vector): void;
+  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, z: number): Vector;
-  sub(x: number, y: number): void;
+  sub(x: number, y: number): Vector;
-  sub(v: Vector): void;
+  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'});

main.ts

@@ -1,4 +1,3 @@
-import { Doodler } from "./canvas.ts";
 /// <reference types="./global.d.ts" />
 
 import { Vector, initializeDoodler } from './mod.ts'
@@ -8,19 +7,49 @@ initializeDoodler({
   height: 400
 })
 
-// let doodler = window['doodler'];
-
 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 = './EngineSprites.png'
+img.hidden
+document.body.append(img)
+
+const p = new Vector(200, 200);
+
 doodler.createLayer(() => {
 
-  doodler.line(new Vector(100, 100), new Vector(200, 200))
+  // doodler.line(new Vector(100, 100), new Vector(200, 200))
-  doodler.dot(new Vector(300, 300))
+  // doodler.dot(new Vector(300, 300))
-  doodler.fillCircle(movingVector, 6, { color: 'red' });
+  // doodler.fillCircle(movingVector, 6, { color: 'red' });
-  doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
+  // doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
-  doodler.fillRect(new Vector(200, 250), 30, 10)
+  // doodler.fillRect(new Vector(200, 250), 30, 10)
 
-  doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
+  // 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.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))
 
-  movingVector.set((movingVector.x + 1) % 400, movingVector.y);
+  // 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);
+  // angleMultiplier += .001;
+
+  // doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20)
+
+  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);
+  }
+})