CODEWITHSUNDEEP
fabricjsaframe
J. Barca
J. Barca

Reputation: 555

Fabric.js, manually triggering mouse:enter/leave, mouse:move

I am currently working on a way to proxy synthetic events emitted from an A-Frame plane containing a fabric.js-initialised canvas texture. The goal is to allow the user to drag and drop fabric items as if they were interacting with a 2D canvas. All of the logic is handled so now I just want to be able to, for example, programatically grab and item under 0,0, drag it to 10, 10 and let go of it.

When I inspected the event parameter in a 'mouse:out' handler I noticed the object had an 'e' parameter which was a MouseEvent instance. So I tried something like this:

let eventOptions = {
  clientX,
  clientY,
  bubbles: true,
  button: 1
}

let fabricCanvas = this.components.draw.fabricCanvas
let e = new MouseEvent(event.type, eventOptions)
fabricCanvas.trigger(aFrameEvtToFabricEvt[event.type], { e })

That didn't seem to work. Nor did providing eventOptions as the second param of the trigger method. Nor did calling the private handler methods on fabric canvas i.e. _onMouseMove.

Is there any way to achieve this otherwise?

Upvotes: 1

Views: 1420

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14741

So fabricCanvas gets the event from an element that is overlaid on the canvas and trigger some event listeners.

The best thing would be forward the events directly to the listeners, with the right pattern. mousedown, mousemove, mouseup.

let eventOptions = {
  clientX,
  clientY,
  bubbles: true,
  button: 1
}

if this event is correct, just exec

fabricCanvas._onMouseDown(e)
fabricCanvas._onMouseMove(eAnotherPoint)
fabricCanvas._onMouseUp(eAnotherPoint)

This should work

Please check what kind of button/buttons/which is using fabric to understand left/right/middle click.

Upvotes: 2

Related Questions