diff --git a/bundle.js b/bundle.js index 503e180..5d21220 100644 --- a/bundle.js +++ b/bundle.js @@ -410,16 +410,25 @@ class Doodler { } 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) { for (const d of this.draggables){ if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) { d.beingDragged = true; + d.onDragStart?.call(null); } else d.beingDragged = false; } } offClick(e) { for (const d of this.draggables){ d.beingDragged = false; + d.onDragEnd?.call(null); } } uiElements = new Map(); diff --git a/canvas.ts b/canvas.ts index 1130c71..ca5a152 100644 --- a/canvas.ts +++ b/canvas.ts @@ -222,17 +222,31 @@ export class Doodler { 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) { for (const d of this.draggables) { if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) { d.beingDragged = true; + d.onDragStart?.call(null); } else d.beingDragged = false; } } - + offClick(e:MouseEvent){ for (const d of this.draggables) { d.beingDragged = false; + d.onDragEnd?.call(null); } } @@ -296,6 +310,8 @@ type Draggable = { style?: IStyle & { shape: 'square' | 'circle' }; beingDragged?: boolean; id: string; + onDragStart?: () => void; + onDragEnd?: () => void; } type uiDrawing = {