Compare commits
3 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
ff463c6cee | ||
|
6530b928f5 | ||
|
32365812df |
33
canvas.ts
33
canvas.ts
@@ -37,6 +37,7 @@ export class Doodler {
|
||||
}
|
||||
|
||||
private draggables: Draggable[] = [];
|
||||
private clickables: Clickable[] = [];
|
||||
|
||||
constructor({
|
||||
width,
|
||||
@@ -222,12 +223,24 @@ export class Doodler {
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
addDragEvents({
|
||||
onDragEnd,
|
||||
onDragStart,
|
||||
point
|
||||
}: {point: Vector, onDragEnd: () => void, onDragStart: () => void}) {
|
||||
const d = this.draggables.find(d =>d.point === point);
|
||||
}: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void }) {
|
||||
const d = this.draggables.find(d => d.point === point);
|
||||
if (d) {
|
||||
d.onDragEnd = onDragEnd;
|
||||
d.onDragStart = onDragStart;
|
||||
@@ -235,15 +248,22 @@ export class Doodler {
|
||||
}
|
||||
|
||||
onClick(e: MouseEvent) {
|
||||
const mouse = new Vector(this.mouseX, this.mouseY)
|
||||
for (const d of this.draggables) {
|
||||
if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) {
|
||||
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){
|
||||
offClick(e: MouseEvent) {
|
||||
for (const d of this.draggables) {
|
||||
d.beingDragged = false;
|
||||
d.onDragEnd?.call(null);
|
||||
@@ -314,6 +334,11 @@ type Draggable = {
|
||||
onDragEnd?: () => void;
|
||||
}
|
||||
|
||||
type Clickable = {
|
||||
onClick: () => void;
|
||||
checkBound: (p: Vector) => boolean;
|
||||
}
|
||||
|
||||
type uiDrawing = {
|
||||
circle: () => void;
|
||||
square: () => void;
|
||||
|
@@ -56,9 +56,9 @@ export class Vector {
|
||||
return v;
|
||||
}
|
||||
}
|
||||
add(x: number, y: number, z: number): void;
|
||||
add(x: number, y: number): void;
|
||||
add(v: Vector): void;
|
||||
add(x: number, y: number, z: number): Vector;
|
||||
add(x: number, y: number): Vector;
|
||||
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): void;
|
||||
sub(v: Vector): void;
|
||||
sub(x: number, y: number, z: number): Vector;
|
||||
sub(x: number, y: number): Vector;
|
||||
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));
|
||||
|
Reference in New Issue
Block a user