Compare commits
No commits in common. "3bf0c4587c629ede8cc87bfca0c6e8db514d9084" and "fbcffcde27f08692f985c14b0858f5c31f784b22" have entirely different histories.
3bf0c4587c
...
fbcffcde27
311
bundle.js
311
bundle.js
@ -239,28 +239,11 @@ class Vector {
|
||||
return Vector.dot(Vector.sub(a, b), Vector.sub(a, b));
|
||||
}
|
||||
}
|
||||
class OriginVector extends Vector {
|
||||
origin;
|
||||
get halfwayPoint() {
|
||||
return {
|
||||
x: this.mag() / 2 * Math.sin(this.heading()) + this.origin.x,
|
||||
y: this.mag() / 2 * Math.cos(this.heading()) + this.origin.y
|
||||
};
|
||||
}
|
||||
constructor(origin, p){
|
||||
super(p.x, p.y, p.z);
|
||||
this.origin = origin;
|
||||
}
|
||||
static from(origin, p) {
|
||||
const v = {
|
||||
x: p.x - origin.x,
|
||||
y: p.y - origin.y
|
||||
};
|
||||
return new OriginVector(origin, v);
|
||||
}
|
||||
}
|
||||
const easeInOut = (x)=>x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
|
||||
const map = (value, x1, y1, x2, y2)=>(value - x1) * (y2 - x2) / (y1 - x1) + x2;
|
||||
const init = (opt)=>{
|
||||
if (window.doodler) throw 'Doodler has already been initialized in this window';
|
||||
window.doodler = new Doodler(opt);
|
||||
window.doodler.init();
|
||||
};
|
||||
class Doodler {
|
||||
ctx;
|
||||
_canvas;
|
||||
@ -275,7 +258,6 @@ class Doodler {
|
||||
}
|
||||
draggables = [];
|
||||
clickables = [];
|
||||
dragTarget;
|
||||
constructor({ width , height , canvas , bg , framerate }){
|
||||
if (!canvas) {
|
||||
canvas = document.createElement('canvas');
|
||||
@ -287,13 +269,21 @@ class Doodler {
|
||||
canvas.height = height;
|
||||
this._canvas = canvas;
|
||||
const ctx = canvas.getContext('2d');
|
||||
console.log(ctx);
|
||||
if (!ctx) throw 'Unable to initialize Doodler: Canvas context not found';
|
||||
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)=>this.onDrag(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;
|
||||
@ -398,12 +388,6 @@ class Doodler {
|
||||
cb();
|
||||
this.ctx.restore();
|
||||
}
|
||||
drawScaled(scale, cb) {
|
||||
this.ctx.save();
|
||||
this.ctx.transform(scale, 0, 0, scale, 0, 0);
|
||||
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);
|
||||
}
|
||||
@ -452,12 +436,11 @@ class Doodler {
|
||||
unregisterClickable(cb) {
|
||||
this.clickables = this.clickables.filter((c)=>c.onClick !== cb);
|
||||
}
|
||||
addDragEvents({ onDragEnd , onDragStart , onDrag , point }) {
|
||||
addDragEvents({ onDragEnd , onDragStart , point }) {
|
||||
const d = this.draggables.find((d)=>d.point === point);
|
||||
if (d) {
|
||||
d.onDragEnd = onDragEnd;
|
||||
d.onDragStart = onDragStart;
|
||||
d.onDrag = onDrag;
|
||||
}
|
||||
}
|
||||
onClick(e) {
|
||||
@ -466,7 +449,6 @@ class Doodler {
|
||||
if (d.point.dist(mouse) <= d.radius) {
|
||||
d.beingDragged = true;
|
||||
d.onDragStart?.call(null);
|
||||
this.dragTarget = d;
|
||||
} else d.beingDragged = false;
|
||||
}
|
||||
for (const c of this.clickables){
|
||||
@ -480,19 +462,6 @@ class Doodler {
|
||||
d.beingDragged = false;
|
||||
d.onDragEnd?.call(null);
|
||||
}
|
||||
this.dragTarget = undefined;
|
||||
}
|
||||
onDrag(e) {
|
||||
this._canvas.getBoundingClientRect();
|
||||
this.mouseX = e.offsetX;
|
||||
this.mouseY = e.offsetY;
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
uiElements = new Map();
|
||||
uiDrawing = {
|
||||
@ -529,256 +498,10 @@ class Doodler {
|
||||
this.uiElements.delete(id);
|
||||
}
|
||||
}
|
||||
const maxZoomScale = 4;
|
||||
class ZoomableDoodler extends Doodler {
|
||||
scale = 1;
|
||||
dragging = false;
|
||||
origin = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
mouse = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
previousTouchLength;
|
||||
touchTimer;
|
||||
hasDoubleTapped = false;
|
||||
zooming = false;
|
||||
scaleAround = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
constructor(options){
|
||||
super(options);
|
||||
this._canvas.addEventListener('wheel', (e)=>{
|
||||
this.scaleAtMouse(e.deltaY < 0 ? 1.1 : .9);
|
||||
if (this.scale === 1) {
|
||||
this.origin.x = 0;
|
||||
this.origin.y = 0;
|
||||
}
|
||||
});
|
||||
this._canvas.addEventListener('dblclick', (e)=>{
|
||||
e.preventDefault();
|
||||
this.scale = 1;
|
||||
this.origin.x = 0;
|
||||
this.origin.y = 0;
|
||||
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
});
|
||||
this._canvas.addEventListener('mousedown', (e)=>{
|
||||
e.preventDefault();
|
||||
this.dragging = true;
|
||||
});
|
||||
this._canvas.addEventListener('mouseup', (e)=>{
|
||||
e.preventDefault();
|
||||
this.dragging = false;
|
||||
});
|
||||
this._canvas.addEventListener('mouseleave', (e)=>{
|
||||
this.dragging = false;
|
||||
});
|
||||
this._canvas.addEventListener('mousemove', (e)=>{
|
||||
const prev = this.mouse;
|
||||
this.mouse = {
|
||||
x: e.offsetX,
|
||||
y: e.offsetY
|
||||
};
|
||||
if (this.dragging && !this.dragTarget) this.drag(prev);
|
||||
});
|
||||
this._canvas.addEventListener('touchstart', (e)=>{
|
||||
e.preventDefault();
|
||||
if (e.touches.length === 1) {
|
||||
const t1 = e.touches.item(0);
|
||||
if (t1) {
|
||||
this.mouse = this.getTouchOffset({
|
||||
x: t1.clientX,
|
||||
y: t1.clientY
|
||||
});
|
||||
}
|
||||
} else {
|
||||
clearTimeout(this.touchTimer);
|
||||
}
|
||||
});
|
||||
this._canvas.addEventListener('touchend', (e)=>{
|
||||
if (e.touches.length !== 2) {
|
||||
this.previousTouchLength = undefined;
|
||||
}
|
||||
switch(e.touches.length){
|
||||
case 1:
|
||||
break;
|
||||
case 0:
|
||||
if (!this.zooming) {
|
||||
this.events.get('touchend')?.map((cb)=>cb(e));
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.dragging = e.touches.length === 1;
|
||||
clearTimeout(this.touchTimer);
|
||||
});
|
||||
this._canvas.addEventListener('touchmove', (e)=>{
|
||||
e.preventDefault();
|
||||
if (e.touches.length === 2) {
|
||||
const t1 = e.touches.item(0);
|
||||
const t2 = e.touches.item(1);
|
||||
if (t1 && t2) {
|
||||
const vect = OriginVector.from(this.getTouchOffset({
|
||||
x: t1.clientX,
|
||||
y: t1.clientY
|
||||
}), {
|
||||
x: t2.clientX,
|
||||
y: t2.clientY
|
||||
});
|
||||
if (this.previousTouchLength) {
|
||||
const diff = this.previousTouchLength - vect.mag();
|
||||
this.scaleAt(vect.halfwayPoint, diff < 0 ? 1.01 : .99);
|
||||
this.scaleAround = {
|
||||
...vect.halfwayPoint
|
||||
};
|
||||
}
|
||||
this.previousTouchLength = vect.mag();
|
||||
}
|
||||
}
|
||||
if (e.touches.length === 1) {
|
||||
this.dragging === true;
|
||||
const t11 = e.touches.item(0);
|
||||
if (t11) {
|
||||
const prev = this.mouse;
|
||||
this.mouse = this.getTouchOffset({
|
||||
x: t11.clientX,
|
||||
y: t11.clientY
|
||||
});
|
||||
this.drag(prev);
|
||||
}
|
||||
}
|
||||
});
|
||||
this._canvas.addEventListener('touchstart', (e)=>{
|
||||
if (e.touches.length !== 1) return false;
|
||||
if (!this.hasDoubleTapped) {
|
||||
this.hasDoubleTapped = true;
|
||||
setTimeout(()=>this.hasDoubleTapped = false, 300);
|
||||
return false;
|
||||
}
|
||||
console.log(this.mouse);
|
||||
if (this.scale > 1) {
|
||||
this.frameCounter = map(this.scale, maxZoomScale, 1, 0, 59);
|
||||
this.zoomDirection = -1;
|
||||
} else {
|
||||
this.frameCounter = 0;
|
||||
this.zoomDirection = 1;
|
||||
}
|
||||
if (this.zoomDirection > 0) this.scaleAround = {
|
||||
...this.mouse
|
||||
};
|
||||
this.events.get('doubletap')?.map((cb)=>cb(e));
|
||||
});
|
||||
}
|
||||
worldToScreen(x, y) {
|
||||
x = x * this.scale + this.origin.x;
|
||||
y = y * this.scale + this.origin.y;
|
||||
return {
|
||||
x,
|
||||
y
|
||||
};
|
||||
}
|
||||
screenToWorld(x, y) {
|
||||
x = (x - this.origin.x) / this.scale;
|
||||
y = (y - this.origin.y) / this.scale;
|
||||
return {
|
||||
x,
|
||||
y
|
||||
};
|
||||
}
|
||||
scaleAtMouse(scaleBy) {
|
||||
if (this.scale === 4 && scaleBy > 1) return;
|
||||
this.scaleAt({
|
||||
x: this.mouse.x,
|
||||
y: this.mouse.y
|
||||
}, scaleBy);
|
||||
}
|
||||
scaleAt(p, scaleBy) {
|
||||
this.scale = Math.min(Math.max(this.scale * scaleBy, 1), maxZoomScale);
|
||||
this.origin.x = p.x - (p.x - this.origin.x) * scaleBy;
|
||||
this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
|
||||
this.constrainOrigin();
|
||||
}
|
||||
drag(prev) {
|
||||
if (this.scale > 1) {
|
||||
const xOffset = this.mouse.x - prev.x;
|
||||
const yOffset = this.mouse.y - prev.y;
|
||||
this.origin.x += xOffset;
|
||||
this.origin.y += yOffset;
|
||||
this.constrainOrigin();
|
||||
}
|
||||
}
|
||||
constrainOrigin() {
|
||||
this.origin.x = Math.min(Math.max(this.origin.x, -this._canvas.width * this.scale + this._canvas.width), 0);
|
||||
this.origin.y = Math.min(Math.max(this.origin.y, -this._canvas.height * this.scale + this._canvas.height), 0);
|
||||
}
|
||||
draw() {
|
||||
this.ctx.setTransform(this.scale, 0, 0, this.scale, this.origin.x, this.origin.y);
|
||||
this.animateZoom();
|
||||
this.ctx.fillStyle = this.bg;
|
||||
this.ctx.fillRect(0, 0, this.width / this.scale, this.height / this.scale);
|
||||
super.draw();
|
||||
}
|
||||
getTouchOffset(p) {
|
||||
const { x , y } = this._canvas.getBoundingClientRect();
|
||||
const offsetX = p.x - x;
|
||||
const offsetY = p.y - y;
|
||||
return {
|
||||
x: offsetX,
|
||||
y: offsetY
|
||||
};
|
||||
}
|
||||
onDrag(e) {
|
||||
const d = {
|
||||
...e,
|
||||
movementX: e.movementX / this.scale,
|
||||
movementY: e.movementY / this.scale
|
||||
};
|
||||
super.onDrag(d);
|
||||
const { x , y } = this.screenToWorld(e.offsetX, e.offsetY);
|
||||
this.mouseX = x;
|
||||
this.mouseY = y;
|
||||
}
|
||||
zoomDirection = -1;
|
||||
frameCounter = 60;
|
||||
animateZoom() {
|
||||
if (this.frameCounter < 60) {
|
||||
const frame = easeInOut(map(this.frameCounter, 0, 59, 0, 1));
|
||||
switch(this.zoomDirection){
|
||||
case 1:
|
||||
{
|
||||
this.scale = map(frame, 0, 1, 1, maxZoomScale);
|
||||
}
|
||||
break;
|
||||
case -1:
|
||||
{
|
||||
this.scale = map(frame, 0, 1, maxZoomScale, 1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.origin.x = this.scaleAround.x - this.scaleAround.x * this.scale;
|
||||
this.origin.y = this.scaleAround.y - this.scaleAround.y * this.scale;
|
||||
this.constrainOrigin();
|
||||
this.frameCounter++;
|
||||
}
|
||||
}
|
||||
events = new Map();
|
||||
registerEvent(eventName, cb) {
|
||||
let events = this.events.get(eventName);
|
||||
if (!events) events = this.events.set(eventName, []).get(eventName);
|
||||
events.push(cb);
|
||||
}
|
||||
}
|
||||
const init = (opt, zoomable)=>{
|
||||
if (window.doodler) throw 'Doodler has already been initialized in this window';
|
||||
window.doodler = zoomable ? new ZoomableDoodler(opt) : new Doodler(opt);
|
||||
window.doodler.init();
|
||||
};
|
||||
init({
|
||||
width: 400,
|
||||
height: 400
|
||||
}, true);
|
||||
});
|
||||
new Vector(100, 300);
|
||||
const v = new Vector(30, 30);
|
||||
doodler.registerDraggable(v, 20);
|
||||
@ -788,7 +511,6 @@ img.hidden;
|
||||
document.body.append(img);
|
||||
const p = new Vector(200, 200);
|
||||
doodler.createLayer(()=>{
|
||||
doodler.drawScaled(1.5, ()=>{
|
||||
doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
|
||||
color: 'grey',
|
||||
weight: 2
|
||||
@ -805,7 +527,6 @@ doodler.createLayer(()=>{
|
||||
color: 'brown',
|
||||
weight: 4
|
||||
});
|
||||
});
|
||||
});
|
||||
document.addEventListener('keyup', (e)=>{
|
||||
e.preventDefault();
|
||||
|
||||
55
canvas.ts
55
canvas.ts
@ -3,15 +3,14 @@
|
||||
|
||||
import { Constants } from "./geometry/constants.ts";
|
||||
import { Vector } from "./geometry/vector.ts";
|
||||
import { ZoomableDoodler } from "./zoomableCanvas.ts";
|
||||
|
||||
export const init = (opt: IDoodlerOptions, zoomable: boolean) => {
|
||||
export const init = (opt: IDoodlerOptions) => {
|
||||
if (window.doodler) throw 'Doodler has already been initialized in this window'
|
||||
window.doodler = zoomable ? new ZoomableDoodler(opt) : new Doodler(opt);
|
||||
window.doodler = new Doodler(opt);
|
||||
window.doodler.init();
|
||||
}
|
||||
|
||||
export interface IDoodlerOptions {
|
||||
interface IDoodlerOptions {
|
||||
width: number;
|
||||
height: number;
|
||||
canvas?: HTMLCanvasElement;
|
||||
@ -22,12 +21,12 @@ export interface IDoodlerOptions {
|
||||
type layer = (ctx: CanvasRenderingContext2D, index: number) => void;
|
||||
|
||||
export class Doodler {
|
||||
protected ctx: CanvasRenderingContext2D;
|
||||
protected _canvas: HTMLCanvasElement;
|
||||
private ctx: CanvasRenderingContext2D;
|
||||
private _canvas: HTMLCanvasElement;
|
||||
|
||||
private layers: layer[] = [];
|
||||
|
||||
protected bg: string;
|
||||
private bg: string;
|
||||
private framerate: number;
|
||||
|
||||
get width() {
|
||||
@ -40,8 +39,6 @@ export class Doodler {
|
||||
private draggables: Draggable[] = [];
|
||||
private clickables: Clickable[] = [];
|
||||
|
||||
protected dragTarget?: Draggable;
|
||||
|
||||
constructor({
|
||||
width,
|
||||
height,
|
||||
@ -63,6 +60,7 @@ export class Doodler {
|
||||
this._canvas = canvas;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
console.log(ctx);
|
||||
if (!ctx) throw 'Unable to initialize Doodler: Canvas context not found';
|
||||
this.ctx = ctx;
|
||||
}
|
||||
@ -70,7 +68,16 @@ 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 => this.onDrag(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();
|
||||
}
|
||||
|
||||
@ -79,7 +86,7 @@ export class Doodler {
|
||||
this.timer = setInterval(() => this.draw(), 1000 / this.framerate);
|
||||
}
|
||||
|
||||
protected draw() {
|
||||
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)) {
|
||||
@ -189,13 +196,6 @@ export class Doodler {
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
||||
drawScaled(scale: number, cb: () => void) {
|
||||
this.ctx.save();
|
||||
this.ctx.transform(scale, 0, 0, scale, 0, 0);
|
||||
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) {
|
||||
@ -254,7 +254,7 @@ export class Doodler {
|
||||
onDragStart,
|
||||
onDrag,
|
||||
point
|
||||
}: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void, onDrag?: (movement: { x: number, y: number }) => void }) {
|
||||
}: { 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;
|
||||
@ -269,7 +269,6 @@ export class Doodler {
|
||||
if (d.point.dist(mouse) <= d.radius) {
|
||||
d.beingDragged = true;
|
||||
d.onDragStart?.call(null);
|
||||
this.dragTarget = d;
|
||||
} else d.beingDragged = false;
|
||||
}
|
||||
|
||||
@ -285,20 +284,6 @@ export class Doodler {
|
||||
d.beingDragged = false;
|
||||
d.onDragEnd?.call(null);
|
||||
}
|
||||
this.dragTarget = undefined;
|
||||
}
|
||||
|
||||
onDrag(e: MouseEvent) {
|
||||
const rect = this._canvas.getBoundingClientRect();
|
||||
this.mouseX = e.offsetX;
|
||||
this.mouseY = e.offsetY;
|
||||
// this.mouseX = e.clientX - rect.left;
|
||||
// this.mouseY = e.clientY - rect.top;
|
||||
|
||||
for (const d of this.draggables.filter(d => d.beingDragged)) {
|
||||
d.point.add(e.movementX, e.movementY)
|
||||
d.onDrag && d.onDrag({ x: e.movementX, y: e.movementY });
|
||||
}
|
||||
}
|
||||
|
||||
// UI Layer
|
||||
@ -363,7 +348,7 @@ type Draggable = {
|
||||
id: string;
|
||||
onDragStart?: () => void;
|
||||
onDragEnd?: () => void;
|
||||
onDrag?: (dragDistance: { x: number, y: number }) => void;
|
||||
onDrag?: (dragDistance?: {x: number, y: number}) => void;
|
||||
}
|
||||
|
||||
type Clickable = {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import { Constants } from "./constants.ts";
|
||||
|
||||
export class Vector implements Point {
|
||||
export class Vector {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
@ -278,34 +278,3 @@ export class Vector implements Point {
|
||||
return Vector.dot(Vector.sub(a, b), Vector.sub(a, b))
|
||||
}
|
||||
}
|
||||
|
||||
export class OriginVector extends Vector {
|
||||
origin: Point;
|
||||
|
||||
get halfwayPoint() {
|
||||
return {
|
||||
x: (this.mag()/2 * Math.sin(this.heading())) + this.origin.x,
|
||||
y: (this.mag()/2 * Math.cos(this.heading())) + this.origin.y
|
||||
}
|
||||
}
|
||||
|
||||
constructor(origin: Point, p: Point) {
|
||||
super(p.x, p.y, p.z);
|
||||
this.origin = origin;
|
||||
}
|
||||
|
||||
static from(origin: Point, p: Point) {
|
||||
const v = {
|
||||
x: p.x - origin.x,
|
||||
y: p.y - origin.y,
|
||||
};
|
||||
|
||||
return new OriginVector(origin, v);
|
||||
}
|
||||
}
|
||||
|
||||
export interface Point {
|
||||
x: number;
|
||||
y: number;
|
||||
z?: number;
|
||||
}
|
||||
|
||||
6
main.ts
6
main.ts
@ -5,7 +5,7 @@ import { Vector, initializeDoodler } from './mod.ts'
|
||||
initializeDoodler({
|
||||
width: 400,
|
||||
height: 400
|
||||
}, true);
|
||||
})
|
||||
|
||||
const movingVector = new Vector(100, 300);
|
||||
let angleMultiplier = 0;
|
||||
@ -41,10 +41,10 @@ doodler.createLayer(() => {
|
||||
|
||||
// doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20)
|
||||
|
||||
doodler.drawScaled(1.5, () => {doodler.line(p.copy().add(-8,10), p.copy().add(8,10), {color: 'grey', weight: 2})
|
||||
doodler.line(p.copy().add(-8,10), p.copy().add(8,10), {color: 'grey', weight: 2})
|
||||
doodler.line(p.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})})
|
||||
doodler.line(p, p.copy().add(0,-12), {color: 'brown', weight: 4})
|
||||
});
|
||||
|
||||
document.addEventListener('keyup', e => {
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
export const easeInOut = (x: number) =>
|
||||
x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
|
||||
@ -1,2 +0,0 @@
|
||||
export const map = (value: number, x1: number, y1: number, x2: number, y2: number) =>
|
||||
(value - x1) * (y2 - x2) / (y1 - x1) + x2;
|
||||
@ -1,271 +0,0 @@
|
||||
import { Doodler, IDoodlerOptions } from "./canvas.ts";
|
||||
import { OriginVector, Point } from "./geometry/vector.ts";
|
||||
import { easeInOut } from "./timing/EaseInOut.ts";
|
||||
import { map } from "./timing/Map.ts";
|
||||
|
||||
type TouchEventCallback = (e: TouchEvent) => void;
|
||||
const maxZoomScale = 4;
|
||||
|
||||
export class ZoomableDoodler extends Doodler {
|
||||
|
||||
private scale = 1;
|
||||
dragging = false;
|
||||
private origin: Point = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
mouse = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
private previousTouchLength?: number;
|
||||
|
||||
private touchTimer?: number;
|
||||
|
||||
private hasDoubleTapped = false;
|
||||
private zooming = false;
|
||||
scaleAround: Point = { x: 0, y: 0 };
|
||||
constructor(options: IDoodlerOptions) {
|
||||
super(options)
|
||||
|
||||
this._canvas.addEventListener('wheel', (e) => {
|
||||
this.scaleAtMouse(e.deltaY < 0 ? 1.1 : .9);
|
||||
if (this.scale === 1) {
|
||||
this.origin.x = 0
|
||||
this.origin.y = 0
|
||||
}
|
||||
})
|
||||
this._canvas.addEventListener('dblclick', (e) => {
|
||||
e.preventDefault();
|
||||
this.scale = 1;
|
||||
this.origin.x = 0;
|
||||
this.origin.y = 0;
|
||||
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
})
|
||||
this._canvas.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
this.dragging = true;
|
||||
})
|
||||
this._canvas.addEventListener('mouseup', (e) => {
|
||||
e.preventDefault();
|
||||
this.dragging = false;
|
||||
})
|
||||
this._canvas.addEventListener('mouseleave', (e) => {
|
||||
this.dragging = false;
|
||||
})
|
||||
this._canvas.addEventListener('mousemove', (e) => {
|
||||
const prev = this.mouse;
|
||||
this.mouse = {
|
||||
x: e.offsetX,
|
||||
y: e.offsetY
|
||||
}
|
||||
if (this.dragging && !this.dragTarget) this.drag(prev);
|
||||
})
|
||||
|
||||
this._canvas.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault();
|
||||
if (e.touches.length === 1) {
|
||||
const t1 = e.touches.item(0);
|
||||
if (t1) {
|
||||
this.mouse = this.getTouchOffset({
|
||||
x: t1.clientX,
|
||||
y: t1.clientY
|
||||
})
|
||||
}
|
||||
// this.touchTimer = setTimeout(() => {
|
||||
// this.dragging = true;
|
||||
// }, 100)
|
||||
} else {
|
||||
clearTimeout(this.touchTimer);
|
||||
}
|
||||
});
|
||||
this._canvas.addEventListener('touchend', (e) => {
|
||||
if (e.touches.length !== 2) {
|
||||
this.previousTouchLength = undefined;
|
||||
}
|
||||
|
||||
switch (e.touches.length) {
|
||||
case 1:
|
||||
break;
|
||||
case 0:
|
||||
if (!this.zooming) {
|
||||
this.events.get('touchend')?.map(cb => cb(e));
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
this.dragging = e.touches.length === 1;
|
||||
clearTimeout(this.touchTimer);
|
||||
});
|
||||
this._canvas.addEventListener('touchmove', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (e.touches.length === 2) {
|
||||
const t1 = e.touches.item(0);
|
||||
const t2 = e.touches.item(1);
|
||||
|
||||
if (t1 && t2) {
|
||||
const vect = OriginVector.from(
|
||||
this.getTouchOffset({
|
||||
x: t1.clientX,
|
||||
y: t1.clientY
|
||||
}),
|
||||
{
|
||||
x: t2.clientX,
|
||||
y: t2.clientY
|
||||
},
|
||||
)
|
||||
|
||||
if (this.previousTouchLength) {
|
||||
const diff = this.previousTouchLength - vect.mag();
|
||||
this.scaleAt(vect.halfwayPoint, diff < 0 ? 1.01 : .99);
|
||||
this.scaleAround = { ...vect.halfwayPoint }
|
||||
}
|
||||
this.previousTouchLength = vect.mag();
|
||||
}
|
||||
}
|
||||
|
||||
if (e.touches.length === 1) {
|
||||
this.dragging === true;
|
||||
const t1 = e.touches.item(0);
|
||||
if (t1) {
|
||||
const prev = this.mouse;
|
||||
this.mouse = this.getTouchOffset({
|
||||
x: t1.clientX,
|
||||
y: t1.clientY
|
||||
})
|
||||
this.drag(prev);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this._canvas.addEventListener('touchstart', (e) => {
|
||||
if (e.touches.length !== 1) return false;
|
||||
|
||||
if (!this.hasDoubleTapped) {
|
||||
this.hasDoubleTapped = true;
|
||||
setTimeout(() => this.hasDoubleTapped = false, 300);
|
||||
return false;
|
||||
}
|
||||
|
||||
// this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
// this.scale = 1;
|
||||
// this.origin.x = 0;
|
||||
// this.origin.y = 0;
|
||||
|
||||
console.log(this.mouse);
|
||||
|
||||
if (this.scale > 1) {
|
||||
this.frameCounter = map(this.scale, maxZoomScale, 1, 0, 59);
|
||||
this.zoomDirection = -1;
|
||||
} else {
|
||||
this.frameCounter = 0;
|
||||
this.zoomDirection = 1;
|
||||
}
|
||||
if (this.zoomDirection > 0)
|
||||
this.scaleAround = { ...this.mouse };
|
||||
|
||||
this.events.get('doubletap')?.map(cb => cb(e));
|
||||
})
|
||||
}
|
||||
|
||||
worldToScreen(x: number, y: number) {
|
||||
x = x * this.scale + this.origin.x;
|
||||
y = y * this.scale + this.origin.y;
|
||||
return { x, y };
|
||||
}
|
||||
screenToWorld(x: number, y: number) {
|
||||
x = (x - this.origin.x) / this.scale;
|
||||
y = (y - this.origin.y) / this.scale;
|
||||
return { x, y };
|
||||
}
|
||||
scaleAtMouse(scaleBy: number) {
|
||||
if (this.scale === 4 && scaleBy > 1) return;
|
||||
this.scaleAt({
|
||||
x: this.mouse.x,
|
||||
y: this.mouse.y
|
||||
}, scaleBy);
|
||||
}
|
||||
scaleAt(p: Point, scaleBy: number) {
|
||||
this.scale = Math.min(Math.max(this.scale * scaleBy, 1), maxZoomScale);
|
||||
this.origin.x = p.x - (p.x - this.origin.x) * scaleBy;
|
||||
this.origin.y = p.y - (p.y - this.origin.y) * scaleBy;
|
||||
this.constrainOrigin();
|
||||
}
|
||||
drag(prev: Point) {
|
||||
if (this.scale > 1) {
|
||||
const xOffset = this.mouse.x - prev.x;
|
||||
const yOffset = this.mouse.y - prev.y;
|
||||
this.origin.x += xOffset;
|
||||
this.origin.y += yOffset;
|
||||
this.constrainOrigin();
|
||||
}
|
||||
}
|
||||
constrainOrigin() {
|
||||
this.origin.x = Math.min(Math.max(this.origin.x, (-this._canvas.width * this.scale) + this._canvas.width), 0);
|
||||
this.origin.y = Math.min(Math.max(this.origin.y, (-this._canvas.height * this.scale) + this._canvas.height), 0);
|
||||
}
|
||||
|
||||
draw() {
|
||||
this.ctx.setTransform(this.scale, 0, 0, this.scale, this.origin.x, this.origin.y)
|
||||
this.animateZoom();
|
||||
this.ctx.fillStyle = this.bg;
|
||||
this.ctx.fillRect(0, 0, this.width/this.scale, this.height/this.scale);
|
||||
super.draw();
|
||||
}
|
||||
|
||||
getTouchOffset(p: Point) {
|
||||
const { x, y } = this._canvas.getBoundingClientRect();
|
||||
const offsetX = p.x - x;
|
||||
const offsetY = p.y - y;
|
||||
|
||||
return {
|
||||
x: offsetX,
|
||||
y: offsetY
|
||||
}
|
||||
}
|
||||
|
||||
onDrag(e: MouseEvent): void {
|
||||
const d = {
|
||||
...e,
|
||||
movementX: e.movementX/this.scale,
|
||||
movementY: e.movementY/this.scale
|
||||
}
|
||||
super.onDrag(d);
|
||||
const {x, y} = this.screenToWorld(e.offsetX, e.offsetY);
|
||||
this.mouseX = x;
|
||||
this.mouseY = y;
|
||||
}
|
||||
|
||||
zoomDirection = -1;
|
||||
frameCounter = 60;
|
||||
animateZoom() {
|
||||
if (this.frameCounter < 60) {
|
||||
const frame = easeInOut(map(this.frameCounter, 0, 59, 0, 1));
|
||||
switch (this.zoomDirection) {
|
||||
case 1: {
|
||||
this.scale = map(frame, 0, 1, 1, maxZoomScale);
|
||||
}
|
||||
break;
|
||||
case -1: {
|
||||
this.scale = map(frame, 0, 1, maxZoomScale, 1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.origin.x = this.scaleAround.x - (this.scaleAround.x * this.scale);
|
||||
this.origin.y = this.scaleAround.y - (this.scaleAround.y * this.scale);
|
||||
this.constrainOrigin();
|
||||
|
||||
this.frameCounter++;
|
||||
}
|
||||
}
|
||||
|
||||
events: Map<string, TouchEventCallback[]> = new Map();
|
||||
registerEvent(eventName: 'touchend' | 'touchstart' | 'touchmove' | 'doubletap', cb: TouchEventCallback) {
|
||||
let events = this.events.get(eventName);
|
||||
if (!events) events = this.events.set(eventName, []).get(eventName)!;
|
||||
events.push(cb);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user