//canvas listeners
this.target.addEventListener("mousedown", (e) => {
this.handleMouseDown(e);
});
window.addEventListener("mousemove", (e) => {
this.handleMouseMove(e);
});
window.addEventListener("mouseup", (e) => {
this.handleMouseUp(e);
});
handleMouseDown(e) {
this.clicked = true;
this.selectSL(e.offsetX, e.offsetY);
}
let canvasXOffset = this.target.getBoundingClientRect().left - document.getElementsByTagName("html")[0].getBoundingClientRect().left;let canvasYOffset = this.target.getBoundingClientRect().top - document.getElementsByTagName("html")[0].getBoundingClientRect().top;
handleMouseMove(e) {
if (this.clicked) {
let canvasXOffset = this.target.getBoundingClientRect().left - document.getElementsByTagName("html")[0].getBoundingClientRect().left;
let canvasYOffset = this.target.getBoundingClientRect().top - document.getElementsByTagName("html")[0].getBoundingClientRect().top; let canvasX = e.pageX - canvasXOffset;
let canvasY = e.pageY - canvasYOffset;
//constrain coordinates
if (canvasX > this.width) { canvasX = this.width }
if (canvasX < 0) { canvasX = 0 }
if (canvasY > this.height) { canvasY = this.height }
if (canvasY < 0) { canvasY = 0 }
this.selectSL(canvasX, canvasY);
}
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript String Methods

How To Secure Your NGINX Server (2022)

JavaScript Algorithm: Record Collection

A universal story inspiring millions of children.

JavaScript Object Manipulation

Complete Vue.js 3 Guide [11/10]

HOW TO BUILD NEXT-GEN FHIR APPS

Better Line Tool for Pixel Art

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tom Cantwell

Tom Cantwell

More from Medium

Introduce Solidity

CRUD operation with Spring JPQL

‘Script Communication in Unity using GetComponent’

Adding Pickup Feature to ShopeeFood App