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

post init

Browse Source
This commit is contained in:
Emmaline Autumn 2023-10-26 01:14:35 -06:00
parent 95afbf9bd3
commit 65a34f960c
3 changed files with 96 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
canvas.ts
View File

@ -2,13 +2,20 @@
import { Constants } from "./geometry/constants.ts";
import { Vector } from "./geometry/vector.ts";
import { postInit } from "./postInit.ts";
import { ZoomableDoodler } from "./zoomableCanvas.ts";
export const init = (opt: IDoodlerOptions, zoomable: boolean) => {
export const init = (
opt: IDoodlerOptions,
zoomable: boolean,
postInit?: postInit,
) => {
if (window.doodler) {
throw "Doodler has already been initialized in this window";
}
window.doodler = zoomable ? new ZoomableDoodler(opt) : new Doodler(opt);
window.doodler = zoomable
? new ZoomableDoodler(opt, postInit)
: new Doodler(opt, postInit);
window.doodler.init();
};
@ -49,7 +56,7 @@ export class Doodler {
canvas,
bg,
framerate,
}: IDoodlerOptions) {
}: IDoodlerOptions, postInit?: postInit) {
if (!canvas) {
canvas = document.createElement("canvas");
document.body.append(canvas);
@ -66,6 +73,8 @@ export class Doodler {
const ctx = canvas.getContext("2d");
if (!ctx) throw "Unable to initialize Doodler: Canvas context not found";
this.ctx = ctx;
postInit?.(this.ctx);
}
init() {

1
postInit.ts Normal file
View File

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

139
zoomableCanvas.ts
View File

@ -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);