Hello, I have developed a Whiteboard application in vue where users can draw. The drawing is done using SVG paths. Currently, the EventHandlers are being used to enable drawing when the mouse is clicked. However, I want to remove these handlers once the mouse is released. The desired functionality is that clicking on the Whiteboard enables drawing and not clicking stops the drawing process. Currently, it creates an endless line with just one click.
I hope this explanation makes sense :)
Thank you
main() {
let whiteboard = document.getElementById("whiteboard");
const color = "black";
let test2 = event => {
this.createSvgElement(whiteboard, color);
this.setup(event);
}
whiteboard.addEventListener("mousedown", test2);
},
createSvgElement(w, c){
this.whiteboard.removeEventListener("mousedown", this);
this.whiteboard = w;
this.segments = [];
this.points = [];
this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.path.setAttributeNS(null, "stroke", c);
this.path.setAttributeNS(null, "stroke-width", "2");
this.path.setAttributeNS(null, "fill", "transparent");
},
setup(event){
this.whiteboard.addEventListener("mousemove", e => {
const [x, y] = this.pos(e);
this.points.push({ x, y });
const test = this.path.getAttributeNS(null, "d");
this.path.setAttributeNS(null, "d", test + ` L${x},${y}`);
});
this.whiteboard.addEventListener("mouseleave", e =>{
this.whiteboard.removeEventListener("mousemove", this);
this.whiteboard.removeEventListener("mouseup", this);
this.whiteboard.removeEventListener("mouseleave", this);
});
this.whiteboard.addEventListener("mouseup", e =>{
this.whiteboard.removeEventListener("mousemove", this);
this.whiteboard.removeEventListener("mouseup", this);
this.whiteboard.removeEventListener("mouseleave", this);
});
},
pos(e){
const rect = this.whiteboard.getBoundingClientRect();
return [e.clientX - rect.left, e.clientY - rect.top];
},