CODEWITHSUNDEEP
javascripteventscanvas
Snr Naldo
Snr Naldo

Reputation: 113

Create a mousemove event for a canvas library

I am working on a canvas library and I have the following class:

export default class Layer {

constructor(ypcanvas) {
    this.ypcanvas = ypcanvas;
    this.container = ypcanvas.container;
    this.can = document.createElement("canvas");
    this.ctx = this.can.getContext("2d");
}}

(This is just a little excerpt of the Layer class)

You can import the class and then create a new Layer like this:

let layer = new Layer(ypcanvas);

How could i accomplish an event like the following:

layer.on('mouseout', function () { });

or 

layer.mousedown(function () { })

Or somethign equivalent to that, so that the user of my library can just call that event without having to addEventListener the layer canvas.

Thx in advance.

Upvotes: 0

Views: 91

Answers (2)

ZER0
ZER0

Reputation: 25332

Assuming you're going to add the canvas somehow to the document tree – otherwise you should describe more in details your system –, you can just proxy the lister to the canvas:

export default class Layer {

 constructor(ypcanvas) {
    this.ypcanvas = ypcanvas;
    this.container = ypcanvas.container;
    this.can = document.createElement("canvas");
    this.ctx = this.can.getContext("2d");
  }

  on(type, lister) {
    this.can.addEventListener(type, lister);
  }

  off(type,lister) {
    this.can.removeEventListener(type, lister);
  }
}

If instead it's just a memory canvas, then you have to implement a coordinates system and z-index to emit the right event from the physical canvas based on the layer copied – and that is indeed more complicated.

However, it's still the same principle: if you don't want that the final user adds the events to the canvas, you have to do it yourself at a certain point.

Upvotes: 1

messerbill
messerbill

Reputation: 5639

You can do something like this:

class MyLibClass {

  constructor(elementId) {
    this.elementId = elementId
  }

  mouseDown(callback) {
    document.getElementById(this.elementId).addEventListener("mousedown", callback)  
  }

}
new MyLibClass("lib").mouseDown(() => alert("hey"))
#lib {
  width: 100px;
  height: 100px;
  background: blue;
}
<div id="lib"></div>

Upvotes: 1

Related Questions