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

added drag start and end events

Browse Source
This commit is contained in:
Emma 2023-02-08 01:20:37 -07:00
parent 0d6717896e
commit 880c0be4f1
2 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
bundle.js
View File

@ -410,16 +410,25 @@ class Doodler {
} }
this.draggables = this.draggables.filter((d)=>d.point !== point); this.draggables = this.draggables.filter((d)=>d.point !== point);
} }
addDragEvents({ onDragEnd , onDragStart , point }) {
const d = this.draggables.find((d)=>d.point === point);
if (d) {
d.onDragEnd = onDragEnd;
d.onDragStart = onDragStart;
}
}
onClick(e) { onClick(e) {
for (const d of this.draggables){ for (const d of this.draggables){
if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) { if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) {
d.beingDragged = true; d.beingDragged = true;
d.onDragStart?.call(null);
} else d.beingDragged = false; } else d.beingDragged = false;
} }
} }
offClick(e) { offClick(e) {
for (const d of this.draggables){ for (const d of this.draggables){
d.beingDragged = false; d.beingDragged = false;
d.onDragEnd?.call(null);
} }
} }
uiElements = new Map(); uiElements = new Map();

18
canvas.ts
View File

@ -222,17 +222,31 @@ export class Doodler {
this.draggables = this.draggables.filter(d => d.point !== point); this.draggables = this.draggables.filter(d => d.point !== point);
} }
addDragEvents({
onDragEnd,
onDragStart,
point
}: {point: Vector, onDragEnd: () => void, onDragStart: () => void}) {
const d = this.draggables.find(d =>d.point === point);
if (d) {
d.onDragEnd = onDragEnd;
d.onDragStart = onDragStart;
}
}
onClick(e: MouseEvent) { onClick(e: MouseEvent) {
for (const d of this.draggables) { for (const d of this.draggables) {
if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) { if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) {
d.beingDragged = true; d.beingDragged = true;
d.onDragStart?.call(null);
} else d.beingDragged = false; } else d.beingDragged = false;
} }
} }
offClick(e:MouseEvent){ offClick(e:MouseEvent){
for (const d of this.draggables) { for (const d of this.draggables) {
d.beingDragged = false; d.beingDragged = false;
d.onDragEnd?.call(null);
} }
} }
@ -296,6 +310,8 @@ type Draggable = {
style?: IStyle & { shape: 'square' | 'circle' }; style?: IStyle & { shape: 'square' | 'circle' };
beingDragged?: boolean; beingDragged?: boolean;
id: string; id: string;
onDragStart?: () => void;
onDragEnd?: () => void;
} }
type uiDrawing = { type uiDrawing = {