emma/doodler
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 26 Wiki Activity

Compare commits

base: emma:3bf0c4587c629ede8cc87bfca0c6e8db514d9084
Branches Tags
emma:main
emma:0.1.1 emma:0.1.0a emma:0.1.0 emma:0.0.9d emma:0.0.9c emma:0.0.9b emma:0.0.9a emma:0.0.9 emma:0.0.8e emma:0.0.8d emma:0.0.8c emma:0.0.8b emma:0.0.8a emma:0.0.8 emma:0.0.7a emma:0.0.7 emma:0.0.6 emma:0.0.5b emma:0.0.5a emma:0.0.5 emma:0.0.4a emma:0.0.4 emma:0.0.3a emma:0.0.3 emma:0.0.2 emma:0.0.1
...
compare: emma:0.0.9d
Branches Tags
emma:main
emma:0.1.1 emma:0.1.0a emma:0.1.0 emma:0.0.9d emma:0.0.9c emma:0.0.9b emma:0.0.9a emma:0.0.9 emma:0.0.8e emma:0.0.8d emma:0.0.8c emma:0.0.8b emma:0.0.8a emma:0.0.8 emma:0.0.7a emma:0.0.7 emma:0.0.6 emma:0.0.5b emma:0.0.5a emma:0.0.5 emma:0.0.4a emma:0.0.4 emma:0.0.3a emma:0.0.3 emma:0.0.2 emma:0.0.1

9 Commits
3bf0c4587c ... 0.0.9d

Author SHA1 Message Date
Emma
0959386ec2 adds drawWithOutline 2023-10-26 02:27:12 -06:00
Emma
65a34f960c post init 2023-10-26 01:17:59 -06:00
Emma
95afbf9bd3 drawWithAlpha 2023-10-25 17:40:39 -06:00
Emma
c58861bc93 deferred drawing 2023-10-24 01:11:15 -06:00
Emma
7d6b54825d oops 2023-10-24 00:55:01 -06:00
Emma
f1bd085384 text align 2023-10-24 00:49:49 -06:00
Emma
6661936188 clearing 2023-10-23 14:09:18 -06:00
Emma
e4de886646 text drawing 2023-10-23 04:35:03 -06:00
Emma
76f07625dd maxScale 2023-02-15 18:14:49 -07:00
7 changed files with 428 additions and 186 deletions
Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

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

156
bundle.js
View File

@@ -276,24 +276,25 @@ class Doodler {
draggables = []; draggables = [];
clickables = []; clickables = [];
dragTarget; dragTarget;
constructor({ width , height , canvas , bg , framerate }){ constructor({ width, height, canvas, bg, framerate }, postInit){
if (!canvas) { if (!canvas) {
canvas = document.createElement('canvas'); canvas = document.createElement("canvas");
document.body.append(canvas); document.body.append(canvas);
} }
this.bg = bg || 'white'; this.bg = bg || "white";
this.framerate = framerate || 60; this.framerate = framerate || 60;
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
this._canvas = canvas; 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; this.ctx = ctx;
postInit?.(this.ctx);
} }
init() { 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(); this.startDrawLoop();
} }
timer; timer;
@@ -301,10 +302,12 @@ class Doodler {
this.timer = setInterval(()=>this.draw(), 1000 / this.framerate); this.timer = setInterval(()=>this.draw(), 1000 / this.framerate);
} }
draw() { draw() {
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.fillStyle = this.bg; this.ctx.fillStyle = this.bg;
this.ctx.fillRect(0, 0, this.width, this.height); this.ctx.fillRect(0, 0, this.width, this.height);
for (const [i, l] of (this.layers || []).entries()){ for (const [i, l] of (this.layers || []).entries()){
l(this.ctx, i); l(this.ctx, i);
this.drawDeferred();
} }
this.drawUI(); this.drawUI();
} }
@@ -404,25 +407,67 @@ class Doodler {
cb(); cb();
this.ctx.restore(); 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) { 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); 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) { drawSprite(img, spritePos, sWidth, sHeight, at, width, height) {
this.ctx.drawImage(img, spritePos.x, spritePos.y, sWidth, sHeight, at.x, at.y, 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) { setStyle(style) {
const ctx = this.ctx; 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.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; mouseX = 0;
mouseY = 0; mouseY = 0;
registerDraggable(point, radius, style) { registerDraggable(point, radius, style) {
if (this.draggables.find((d)=>d.point === point)) return; 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({ this.draggables.push({
point, point,
@@ -452,7 +497,7 @@ class Doodler {
unregisterClickable(cb) { unregisterClickable(cb) {
this.clickables = this.clickables.filter((c)=>c.onClick !== 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); const d = this.draggables.find((d)=>d.point === point);
if (d) { if (d) {
d.onDragEnd = onDragEnd; d.onDragEnd = onDragEnd;
@@ -529,7 +574,6 @@ class Doodler {
this.uiElements.delete(id); this.uiElements.delete(id);
} }
} }
const maxZoomScale = 4;
class ZoomableDoodler extends Doodler { class ZoomableDoodler extends Doodler {
scale = 1; scale = 1;
dragging = false; dragging = false;
@@ -549,34 +593,35 @@ class ZoomableDoodler extends Doodler {
x: 0, x: 0,
y: 0 y: 0
}; };
constructor(options){ maxScale = 4;
super(options); constructor(options, postInit){
this._canvas.addEventListener('wheel', (e)=>{ super(options, postInit);
this._canvas.addEventListener("wheel", (e)=>{
this.scaleAtMouse(e.deltaY < 0 ? 1.1 : .9); this.scaleAtMouse(e.deltaY < 0 ? 1.1 : .9);
if (this.scale === 1) { 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(); e.preventDefault();
this.scale = 1; this.scale = 1;
this.origin.x = 0; this.origin.x = 0;
this.origin.y = 0; this.origin.y = 0;
this.ctx.setTransform(1, 0, 0, 1, 0, 0); this.ctx.setTransform(1, 0, 0, 1, 0, 0);
}); });
this._canvas.addEventListener('mousedown', (e)=>{ this._canvas.addEventListener("mousedown", (e)=>{
e.preventDefault(); e.preventDefault();
this.dragging = true; this.dragging = true;
}); });
this._canvas.addEventListener('mouseup', (e)=>{ this._canvas.addEventListener("mouseup", (e)=>{
e.preventDefault(); e.preventDefault();
this.dragging = false; this.dragging = false;
}); });
this._canvas.addEventListener('mouseleave', (e)=>{ this._canvas.addEventListener("mouseleave", (e)=>{
this.dragging = false; this.dragging = false;
}); });
this._canvas.addEventListener('mousemove', (e)=>{ this._canvas.addEventListener("mousemove", (e)=>{
const prev = this.mouse; const prev = this.mouse;
this.mouse = { this.mouse = {
x: e.offsetX, x: e.offsetX,
@@ -584,7 +629,7 @@ class ZoomableDoodler extends Doodler {
}; };
if (this.dragging && !this.dragTarget) this.drag(prev); if (this.dragging && !this.dragTarget) this.drag(prev);
}); });
this._canvas.addEventListener('touchstart', (e)=>{ this._canvas.addEventListener("touchstart", (e)=>{
e.preventDefault(); e.preventDefault();
if (e.touches.length === 1) { if (e.touches.length === 1) {
const t1 = e.touches.item(0); const t1 = e.touches.item(0);
@@ -598,7 +643,7 @@ class ZoomableDoodler extends Doodler {
clearTimeout(this.touchTimer); clearTimeout(this.touchTimer);
} }
}); });
this._canvas.addEventListener('touchend', (e)=>{ this._canvas.addEventListener("touchend", (e)=>{
if (e.touches.length !== 2) { if (e.touches.length !== 2) {
this.previousTouchLength = undefined; this.previousTouchLength = undefined;
} }
@@ -607,14 +652,14 @@ class ZoomableDoodler extends Doodler {
break; break;
case 0: case 0:
if (!this.zooming) { if (!this.zooming) {
this.events.get('touchend')?.map((cb)=>cb(e)); this.events.get("touchend")?.map((cb)=>cb(e));
} }
break; break;
} }
this.dragging = e.touches.length === 1; this.dragging = e.touches.length === 1;
clearTimeout(this.touchTimer); clearTimeout(this.touchTimer);
}); });
this._canvas.addEventListener('touchmove', (e)=>{ this._canvas.addEventListener("touchmove", (e)=>{
e.preventDefault(); e.preventDefault();
if (e.touches.length === 2) { if (e.touches.length === 2) {
const t1 = e.touches.item(0); const t1 = e.touches.item(0);
@@ -639,18 +684,18 @@ class ZoomableDoodler extends Doodler {
} }
if (e.touches.length === 1) { if (e.touches.length === 1) {
this.dragging === true; this.dragging === true;
const t11 = e.touches.item(0); const t1 = e.touches.item(0);
if (t11) { if (t1) {
const prev = this.mouse; const prev = this.mouse;
this.mouse = this.getTouchOffset({ this.mouse = this.getTouchOffset({
x: t11.clientX, x: t1.clientX,
y: t11.clientY y: t1.clientY
}); });
this.drag(prev); this.drag(prev);
} }
} }
}); });
this._canvas.addEventListener('touchstart', (e)=>{ this._canvas.addEventListener("touchstart", (e)=>{
if (e.touches.length !== 1) return false; if (e.touches.length !== 1) return false;
if (!this.hasDoubleTapped) { if (!this.hasDoubleTapped) {
this.hasDoubleTapped = true; this.hasDoubleTapped = true;
@@ -659,16 +704,18 @@ class ZoomableDoodler extends Doodler {
} }
console.log(this.mouse); console.log(this.mouse);
if (this.scale > 1) { if (this.scale > 1) {
this.frameCounter = map(this.scale, maxZoomScale, 1, 0, 59); this.frameCounter = map(this.scale, this.maxScale, 1, 0, 59);
this.zoomDirection = -1; this.zoomDirection = -1;
} else { } else {
this.frameCounter = 0; this.frameCounter = 0;
this.zoomDirection = 1; this.zoomDirection = 1;
} }
if (this.zoomDirection > 0) this.scaleAround = { if (this.zoomDirection > 0) {
this.scaleAround = {
...this.mouse ...this.mouse
}; };
this.events.get('doubletap')?.map((cb)=>cb(e)); }
this.events.get("doubletap")?.map((cb)=>cb(e));
}); });
} }
worldToScreen(x, y) { worldToScreen(x, y) {
@@ -688,14 +735,14 @@ class ZoomableDoodler extends Doodler {
}; };
} }
scaleAtMouse(scaleBy) { scaleAtMouse(scaleBy) {
if (this.scale === 4 && scaleBy > 1) return; if (this.scale === this.maxScale && scaleBy > 1) return;
this.scaleAt({ this.scaleAt({
x: this.mouse.x, x: this.mouse.x,
y: this.mouse.y y: this.mouse.y
}, scaleBy); }, scaleBy);
} }
scaleAt(p, scaleBy) { scaleAt(p, scaleBy) {
this.scale = Math.min(Math.max(this.scale * scaleBy, 1), maxZoomScale); this.scale = Math.min(Math.max(this.scale * scaleBy, 1), this.maxScale);
this.origin.x = p.x - (p.x - this.origin.x) * scaleBy; this.origin.x = p.x - (p.x - this.origin.x) * scaleBy;
this.origin.y = p.y - (p.y - this.origin.y) * scaleBy; this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
this.constrainOrigin(); this.constrainOrigin();
@@ -721,7 +768,7 @@ class ZoomableDoodler extends Doodler {
super.draw(); super.draw();
} }
getTouchOffset(p) { getTouchOffset(p) {
const { x , y } = this._canvas.getBoundingClientRect(); const { x, y } = this._canvas.getBoundingClientRect();
const offsetX = p.x - x; const offsetX = p.x - x;
const offsetY = p.y - y; const offsetY = p.y - y;
return { return {
@@ -736,7 +783,7 @@ class ZoomableDoodler extends Doodler {
movementY: e.movementY / this.scale movementY: e.movementY / this.scale
}; };
super.onDrag(d); 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.mouseX = x;
this.mouseY = y; this.mouseY = y;
} }
@@ -748,12 +795,12 @@ class ZoomableDoodler extends Doodler {
switch(this.zoomDirection){ switch(this.zoomDirection){
case 1: case 1:
{ {
this.scale = map(frame, 0, 1, 1, maxZoomScale); this.scale = map(frame, 0, 1, 1, this.maxScale);
} }
break; break;
case -1: case -1:
{ {
this.scale = map(frame, 0, 1, maxZoomScale, 1); this.scale = map(frame, 0, 1, this.maxScale, 1);
} }
break; break;
} }
@@ -770,46 +817,51 @@ class ZoomableDoodler extends Doodler {
events.push(cb); 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(); window.doodler.init();
}; };
init({ init({
width: 400, width: 400,
height: 400 height: 400
}, true); }, true, (ctx)=>{
ctx.imageSmoothingEnabled = false;
});
new Vector(100, 300); new Vector(100, 300);
const v = new Vector(30, 30); const v = new Vector(30, 30);
doodler.registerDraggable(v, 20); doodler.registerDraggable(v, 20);
const img = new Image(); 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); const p = new Vector(200, 200);
doodler.createLayer(()=>{ doodler.createLayer(()=>{
doodler.drawImageWithOutline(img, new Vector(60, 60));
doodler.drawScaled(1.5, ()=>{ doodler.drawScaled(1.5, ()=>{
doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), { doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
color: 'grey', color: "grey",
weight: 2 weight: 2
}); });
doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), { doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
color: 'grey', color: "grey",
weight: 2 weight: 2
}); });
doodler.line(p, p.copy().add(0, 12), { doodler.line(p, p.copy().add(0, 12), {
color: 'brown', color: "brown",
weight: 4 weight: 4
}); });
doodler.line(p, p.copy().add(0, -12), { doodler.line(p, p.copy().add(0, -12), {
color: 'brown', color: "brown",
weight: 4 weight: 4
}); });
}); });
}); });
document.addEventListener('keyup', (e)=>{ document.addEventListener("keyup", (e)=>{
e.preventDefault(); e.preventDefault();
if (e.key === ' ') { if (e.key === " ") {
doodler.unregisterDraggable(v); doodler.unregisterDraggable(v);
} }
}); });

252
canvas.ts
View File

@@ -1,15 +1,23 @@
/// <reference types="./global.d.ts" /> /// <reference types="./global.d.ts" />
import { Constants } from "./geometry/constants.ts"; import { Constants } from "./geometry/constants.ts";
import { Vector } from "./geometry/vector.ts"; import { Vector } from "./geometry/vector.ts";
import { postInit } from "./postInit.ts";
import { ZoomableDoodler } from "./zoomableCanvas.ts"; import { ZoomableDoodler } from "./zoomableCanvas.ts";
export const init = (opt: IDoodlerOptions, zoomable: boolean) => { export const init = (
if (window.doodler) throw 'Doodler has already been initialized in this window' opt: IDoodlerOptions,
window.doodler = zoomable ? new ZoomableDoodler(opt) : new Doodler(opt); 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(); window.doodler.init();
} };
export interface IDoodlerOptions { export interface IDoodlerOptions {
width: number; width: number;
@@ -47,14 +55,14 @@ export class Doodler {
height, height,
canvas, canvas,
bg, bg,
framerate framerate,
}: IDoodlerOptions) { }: IDoodlerOptions, postInit?: postInit) {
if (!canvas) { if (!canvas) {
canvas = document.createElement('canvas'); canvas = document.createElement("canvas");
document.body.append(canvas); document.body.append(canvas);
} }
this.bg = bg || 'white'; this.bg = bg || "white";
this.framerate = framerate || 60; this.framerate = framerate || 60;
canvas.width = width; canvas.width = width;
@@ -62,15 +70,17 @@ export class Doodler {
this._canvas = canvas; 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; this.ctx = ctx;
postInit?.(this.ctx);
} }
init() { 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(); this.startDrawLoop();
} }
@@ -80,6 +90,7 @@ export class Doodler {
} }
protected draw() { protected draw() {
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.fillStyle = this.bg; this.ctx.fillStyle = this.bg;
this.ctx.fillRect(0, 0, this.width, this.height); this.ctx.fillRect(0, 0, this.width, this.height);
// for (const d of this.draggables.filter(d => d.beingDragged)) { // 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()) { for (const [i, l] of (this.layers || []).entries()) {
l(this.ctx, i); l(this.ctx, i);
this.drawDeferred();
} }
this.drawUI(); this.drawUI();
} }
@@ -98,11 +110,11 @@ export class Doodler {
} }
deleteLayer(layer: 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) { 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)]; temp = [...temp.slice(0, index), layer, ...temp.slice(index)];
@@ -119,7 +131,7 @@ export class Doodler {
this.ctx.stroke(); this.ctx.stroke();
} }
dot(at: Vector, style?: IStyle) { dot(at: Vector, style?: IStyle) {
this.setStyle({ ...style, weight: 1 }) this.setStyle({ ...style, weight: 1 });
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.arc(at.x, at.y, style?.weight || 1, 0, Constants.TWO_PI); this.ctx.arc(at.x, at.y, style?.weight || 1, 0, Constants.TWO_PI);
@@ -196,21 +208,120 @@ export class Doodler {
this.ctx.restore(); 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): void;
drawImage(img: HTMLImageElement, at: Vector, w: number, h: number): void; drawImage(img: HTMLImageElement, at: Vector, w: number, h: number): void;
drawImage(img: HTMLImageElement, at: Vector, w?: number, h?: number) { 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);
}
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()?.();
} }
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) { setStyle(style?: IStyle) {
const ctx = this.ctx; 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.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 // Interaction
@@ -218,10 +329,16 @@ export class Doodler {
mouseX = 0; mouseX = 0;
mouseY = 0; mouseY = 0;
registerDraggable(
registerDraggable(point: Vector, radius: number, style?: IStyle & { shape: 'square' | 'circle' }) { point: Vector,
if (this.draggables.find(d => d.point === point)) return; radius: number,
const id = this.addUIElement('circle', point, radius, { fillColor: '#5533ff50', strokeColor: '#5533ff50' }) 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 }); this.draggables.push({ point, radius, style, id });
} }
unregisterDraggable(point: Vector) { unregisterDraggable(point: Vector) {
@@ -230,7 +347,7 @@ export class Doodler {
this.removeUIElement(d.id); 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) { registerClickable(p1: Vector, p2: Vector, cb: () => void) {
@@ -241,21 +358,27 @@ export class Doodler {
this.clickables.push({ this.clickables.push({
onClick: cb, 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) { unregisterClickable(cb: () => void) {
this.clickables = this.clickables.filter(c => c.onClick !== cb); this.clickables = this.clickables.filter((c) => c.onClick !== cb);
} }
addDragEvents({ addDragEvents({
onDragEnd, onDragEnd,
onDragStart, onDragStart,
onDrag, onDrag,
point point,
}: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void, onDrag?: (movement: { x: number, y: number }) => void }) { }: {
const d = this.draggables.find(d => d.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) { if (d) {
d.onDragEnd = onDragEnd; d.onDragEnd = onDragEnd;
d.onDragStart = onDragStart; d.onDragStart = onDragStart;
@@ -264,7 +387,7 @@ export class Doodler {
} }
onClick(e: MouseEvent) { 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) { for (const d of this.draggables) {
if (d.point.dist(mouse) <= d.radius) { if (d.point.dist(mouse) <= d.radius) {
d.beingDragged = true; d.beingDragged = true;
@@ -295,8 +418,8 @@ export class Doodler {
// this.mouseX = e.clientX - rect.left; // this.mouseX = e.clientX - rect.left;
// this.mouseY = e.clientY - rect.top; // this.mouseY = e.clientY - rect.top;
for (const d of this.draggables.filter(d => d.beingDragged)) { for (const d of this.draggables.filter((d) => d.beingDragged)) {
d.point.add(e.movementX, e.movementY) d.point.add(e.movementX, e.movementY);
d.onDrag && d.onDrag({ x: e.movementX, y: e.movementY }); d.onDrag && d.onDrag({ x: e.movementX, y: e.movementY });
} }
} }
@@ -305,28 +428,44 @@ export class Doodler {
uiElements: Map<string, [keyof uiDrawing, ...any]> = new Map(); uiElements: Map<string, [keyof uiDrawing, ...any]> = new Map();
private uiDrawing: uiDrawing = { private uiDrawing: uiDrawing = {
rectangle: (...args: any[]) => { rectangle: (...args: any[]) => {
!args[3].noFill && this.fillRect(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]) !args[3].noStroke && this.drawRect(args[0], args[1], args[2], args[3]);
}, },
square: (...args: any[]) => { square: (...args: any[]) => {
!args[2].noFill && this.fillSquare(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]) !args[2].noStroke && this.drawSquare(args[0], args[1], args[2]);
}, },
circle: (...args: any[]) => { circle: (...args: any[]) => {
!args[2].noFill && this.fillCircle(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]) !args[2].noStroke && this.drawCircle(args[0], args[1], args[2]);
}, },
} };
private drawUI() { private drawUI() {
for (const [shape, ...args] of this.uiElements.values()) { 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(
addUIElement(shape: 'square', at: Vector, size: number, style?: IStyle): string; shape: "rectangle",
addUIElement(shape: 'circle', at: Vector, radius: number, style?: IStyle): string; 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[]) { addUIElement(shape: keyof uiDrawing, ...args: any[]) {
const id = crypto.randomUUID(); const id = crypto.randomUUID();
for (const arg of args) { for (const arg of args) {
@@ -349,6 +488,15 @@ interface IStyle {
noStroke?: boolean; noStroke?: boolean;
noFill?: boolean; noFill?: boolean;
textAlign?: "center" | "end" | "left" | "right" | "start";
textBaseline?:
| "alphabetic"
| "top"
| "hanging"
| "middle"
| "ideographic"
| "bottom";
} }
interface IDrawable { interface IDrawable {
@@ -358,21 +506,21 @@ interface IDrawable {
type Draggable = { type Draggable = {
point: Vector; point: Vector;
radius: number; radius: number;
style?: IStyle & { shape: 'square' | 'circle' }; style?: IStyle & { shape: "square" | "circle" };
beingDragged?: boolean; beingDragged?: boolean;
id: string; id: string;
onDragStart?: () => void; onDragStart?: () => void;
onDragEnd?: () => void; onDragEnd?: () => void;
onDrag?: (dragDistance: { x: number, y: number }) => void; onDrag?: (dragDistance: { x: number; y: number }) => void;
} };
type Clickable = { type Clickable = {
onClick: () => void; onClick: () => void;
checkBound: (p: Vector) => boolean; checkBound: (p: Vector) => boolean;
} };
type uiDrawing = { type uiDrawing = {
circle: () => void; circle: () => void;
square: () => void; square: () => void;
rectangle: () => void; rectangle: () => void;
} };

47
main.ts
View File

@@ -1,25 +1,31 @@
/// <reference types="./global.d.ts" /> /// <reference types="./global.d.ts" />
import { Vector, initializeDoodler } from './mod.ts' import { initializeDoodler, Vector } from "./mod.ts";
initializeDoodler({ initializeDoodler(
{
width: 400, width: 400,
height: 400 height: 400,
}, true); },
true,
(ctx) => {
ctx.imageSmoothingEnabled = false;
},
);
const movingVector = new Vector(100, 300); const movingVector = new Vector(100, 300);
let angleMultiplier = 0; let angleMultiplier = 0;
const v = new Vector(30, 30); const v = new Vector(30, 30);
doodler.registerDraggable(v, 20) doodler.registerDraggable(v, 20);
const img = new Image(); 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); const p = new Vector(200, 200);
doodler.createLayer(() => { doodler.createLayer(() => {
doodler.drawImageWithOutline(img, new Vector(60, 60));
// 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' });
@@ -35,21 +41,28 @@ doodler.createLayer(() => {
// doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20) // 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; // angleMultiplier += .001;
// doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20) // 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(); e.preventDefault();
if (e.key === ' ') { if (e.key === " ") {
doodler.unregisterDraggable(v); doodler.unregisterDraggable(v);
} }
}) });

1
postInit.ts Normal file
View File

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

BIN
skeleton.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 795 B

145
zoomableCanvas.ts
View File

@@ -1,24 +1,23 @@
import { Doodler, IDoodlerOptions } from "./canvas.ts"; import { Doodler, IDoodlerOptions } from "./canvas.ts";
import { OriginVector, Point } from "./geometry/vector.ts"; import { OriginVector, Point } from "./geometry/vector.ts";
import { postInit } from "./postInit.ts";
import { easeInOut } from "./timing/EaseInOut.ts"; import { easeInOut } from "./timing/EaseInOut.ts";
import { map } from "./timing/Map.ts"; import { map } from "./timing/Map.ts";
type TouchEventCallback = (e: TouchEvent) => void; type TouchEventCallback = (e: TouchEvent) => void;
const maxZoomScale = 4;
export class ZoomableDoodler extends Doodler { export class ZoomableDoodler extends Doodler {
private scale = 1; private scale = 1;
dragging = false; dragging = false;
private origin: Point = { private origin: Point = {
x: 0, x: 0,
y: 0 y: 0,
} };
mouse = { mouse = {
x: 0, x: 0,
y: 0 y: 0,
} };
private previousTouchLength?: number; private previousTouchLength?: number;
@@ -27,52 +26,55 @@ export class ZoomableDoodler extends Doodler {
private hasDoubleTapped = false; private hasDoubleTapped = false;
private zooming = false; private zooming = false;
scaleAround: Point = { x: 0, y: 0 }; scaleAround: Point = { x: 0, y: 0 };
constructor(options: IDoodlerOptions) {
super(options)
this._canvas.addEventListener('wheel', (e) => { maxScale = 4;
constructor(options: IDoodlerOptions, postInit?: postInit) {
super(options, postInit);
this._canvas.addEventListener("wheel", (e) => {
this.scaleAtMouse(e.deltaY < 0 ? 1.1 : .9); this.scaleAtMouse(e.deltaY < 0 ? 1.1 : .9);
if (this.scale === 1) { 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(); e.preventDefault();
this.scale = 1; this.scale = 1;
this.origin.x = 0; this.origin.x = 0;
this.origin.y = 0; this.origin.y = 0;
this.ctx.setTransform(1, 0, 0, 1, 0, 0); this.ctx.setTransform(1, 0, 0, 1, 0, 0);
}) });
this._canvas.addEventListener('mousedown', (e) => { this._canvas.addEventListener("mousedown", (e) => {
e.preventDefault(); e.preventDefault();
this.dragging = true; this.dragging = true;
}) });
this._canvas.addEventListener('mouseup', (e) => { this._canvas.addEventListener("mouseup", (e) => {
e.preventDefault(); e.preventDefault();
this.dragging = false; this.dragging = false;
}) });
this._canvas.addEventListener('mouseleave', (e) => { this._canvas.addEventListener("mouseleave", (e) => {
this.dragging = false; this.dragging = false;
}) });
this._canvas.addEventListener('mousemove', (e) => { this._canvas.addEventListener("mousemove", (e) => {
const prev = this.mouse; const prev = this.mouse;
this.mouse = { this.mouse = {
x: e.offsetX, x: e.offsetX,
y: e.offsetY y: e.offsetY,
} };
if (this.dragging && !this.dragTarget) this.drag(prev); if (this.dragging && !this.dragTarget) this.drag(prev);
}) });
this._canvas.addEventListener('touchstart', (e) => { this._canvas.addEventListener("touchstart", (e) => {
e.preventDefault(); e.preventDefault();
if (e.touches.length === 1) { if (e.touches.length === 1) {
const t1 = e.touches.item(0); const t1 = e.touches.item(0);
if (t1) { if (t1) {
this.mouse = this.getTouchOffset({ this.mouse = this.getTouchOffset({
x: t1.clientX, x: t1.clientX,
y: t1.clientY y: t1.clientY,
}) });
} }
// this.touchTimer = setTimeout(() => { // this.touchTimer = setTimeout(() => {
// this.dragging = true; // this.dragging = true;
@@ -81,7 +83,7 @@ export class ZoomableDoodler extends Doodler {
clearTimeout(this.touchTimer); clearTimeout(this.touchTimer);
} }
}); });
this._canvas.addEventListener('touchend', (e) => { this._canvas.addEventListener("touchend", (e) => {
if (e.touches.length !== 2) { if (e.touches.length !== 2) {
this.previousTouchLength = undefined; this.previousTouchLength = undefined;
} }
@@ -91,7 +93,7 @@ export class ZoomableDoodler extends Doodler {
break; break;
case 0: case 0:
if (!this.zooming) { if (!this.zooming) {
this.events.get('touchend')?.map(cb => cb(e)); this.events.get("touchend")?.map((cb) => cb(e));
} }
break; break;
} }
@@ -99,7 +101,7 @@ export class ZoomableDoodler extends Doodler {
this.dragging = e.touches.length === 1; this.dragging = e.touches.length === 1;
clearTimeout(this.touchTimer); clearTimeout(this.touchTimer);
}); });
this._canvas.addEventListener('touchmove', (e) => { this._canvas.addEventListener("touchmove", (e) => {
e.preventDefault(); e.preventDefault();
if (e.touches.length === 2) { if (e.touches.length === 2) {
@@ -110,18 +112,18 @@ export class ZoomableDoodler extends Doodler {
const vect = OriginVector.from( const vect = OriginVector.from(
this.getTouchOffset({ this.getTouchOffset({
x: t1.clientX, x: t1.clientX,
y: t1.clientY y: t1.clientY,
}), }),
{ {
x: t2.clientX, x: t2.clientX,
y: t2.clientY y: t2.clientY,
}, },
) );
if (this.previousTouchLength) { if (this.previousTouchLength) {
const diff = this.previousTouchLength - vect.mag(); const diff = this.previousTouchLength - vect.mag();
this.scaleAt(vect.halfwayPoint, diff < 0 ? 1.01 : .99); this.scaleAt(vect.halfwayPoint, diff < 0 ? 1.01 : .99);
this.scaleAround = { ...vect.halfwayPoint } this.scaleAround = { ...vect.halfwayPoint };
} }
this.previousTouchLength = vect.mag(); this.previousTouchLength = vect.mag();
} }
@@ -134,14 +136,14 @@ export class ZoomableDoodler extends Doodler {
const prev = this.mouse; const prev = this.mouse;
this.mouse = this.getTouchOffset({ this.mouse = this.getTouchOffset({
x: t1.clientX, x: t1.clientX,
y: t1.clientY y: t1.clientY,
}) });
this.drag(prev); this.drag(prev);
} }
} }
}); });
this._canvas.addEventListener('touchstart', (e) => { this._canvas.addEventListener("touchstart", (e) => {
if (e.touches.length !== 1) return false; if (e.touches.length !== 1) return false;
if (!this.hasDoubleTapped) { if (!this.hasDoubleTapped) {
@@ -158,17 +160,18 @@ export class ZoomableDoodler extends Doodler {
console.log(this.mouse); console.log(this.mouse);
if (this.scale > 1) { if (this.scale > 1) {
this.frameCounter = map(this.scale, maxZoomScale, 1, 0, 59); this.frameCounter = map(this.scale, this.maxScale, 1, 0, 59);
this.zoomDirection = -1; this.zoomDirection = -1;
} else { } else {
this.frameCounter = 0; this.frameCounter = 0;
this.zoomDirection = 1; this.zoomDirection = 1;
} }
if (this.zoomDirection > 0) if (this.zoomDirection > 0) {
this.scaleAround = { ...this.mouse }; 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) { worldToScreen(x: number, y: number) {
@@ -182,14 +185,14 @@ export class ZoomableDoodler extends Doodler {
return { x, y }; return { x, y };
} }
scaleAtMouse(scaleBy: number) { scaleAtMouse(scaleBy: number) {
if (this.scale === 4 && scaleBy > 1) return; if (this.scale === this.maxScale && scaleBy > 1) return;
this.scaleAt({ this.scaleAt({
x: this.mouse.x, x: this.mouse.x,
y: this.mouse.y y: this.mouse.y,
}, scaleBy); }, scaleBy);
} }
scaleAt(p: Point, scaleBy: number) { scaleAt(p: Point, scaleBy: number) {
this.scale = Math.min(Math.max(this.scale * scaleBy, 1), maxZoomScale); this.scale = Math.min(Math.max(this.scale * scaleBy, 1), this.maxScale);
this.origin.x = p.x - (p.x - this.origin.x) * scaleBy; this.origin.x = p.x - (p.x - this.origin.x) * scaleBy;
this.origin.y = p.y - (p.y - this.origin.y) * scaleBy; this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
this.constrainOrigin(); this.constrainOrigin();
@@ -204,15 +207,34 @@ export class ZoomableDoodler extends Doodler {
} }
} }
constrainOrigin() { 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() { 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.animateZoom();
this.ctx.fillStyle = this.bg; 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(); super.draw();
} }
@@ -223,18 +245,18 @@ export class ZoomableDoodler extends Doodler {
return { return {
x: offsetX, x: offsetX,
y: offsetY y: offsetY,
} };
} }
onDrag(e: MouseEvent): void { onDrag(e: MouseEvent): void {
const d = { const d = {
...e, ...e,
movementX: e.movementX/this.scale, movementX: e.movementX / this.scale,
movementY: e.movementY/this.scale movementY: e.movementY / this.scale,
} };
super.onDrag(d); 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.mouseX = x;
this.mouseY = y; this.mouseY = y;
} }
@@ -245,12 +267,14 @@ export class ZoomableDoodler extends Doodler {
if (this.frameCounter < 60) { if (this.frameCounter < 60) {
const frame = easeInOut(map(this.frameCounter, 0, 59, 0, 1)); const frame = easeInOut(map(this.frameCounter, 0, 59, 0, 1));
switch (this.zoomDirection) { switch (this.zoomDirection) {
case 1: { case 1:
this.scale = map(frame, 0, 1, 1, maxZoomScale); {
this.scale = map(frame, 0, 1, 1, this.maxScale);
} }
break; break;
case -1: { case -1:
this.scale = map(frame, 0, 1, maxZoomScale, 1); {
this.scale = map(frame, 0, 1, this.maxScale, 1);
} }
break; break;
} }
@@ -263,7 +287,10 @@ export class ZoomableDoodler extends Doodler {
} }
events: Map<string, TouchEventCallback[]> = new Map(); 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); let events = this.events.get(eventName);
if (!events) events = this.events.set(eventName, []).get(eventName)!; if (!events) events = this.events.set(eventName, []).get(eventName)!;
events.push(cb); events.push(cb);