Add enablePointerEvents to Canvas init option

[arcatdmz]

In response to discussions in #5587, this PR adds enablePointerEvents option to the Canvas constructor.

When the option is enabled by new Canvas(.., { enablePointerEvents: true }), PointerEvent is used instead of MouseEvent.
The use of PointerEvent opens up the potential to retrieve pen pressure information and implement a pressure-sensitive brush.

[asturur]

those can stay mouse i guess. Renaming this is gonna break application badly. Those are fabricJS events that devs uses, there is no reason to rename them

[arcatdmz]

makes sense -- let's keep the external API as same as possible. I found several other occurrences of the same issue and addressed that in 6c6f4de.

[asturur]

to me this looks like good.
I would try to merge it as it is. I want to check first if we can adapt UTs to run on both of them.

Current supported browsers are ie10+, edge, chrome, firefox, safari and a i think they all support pointer events in a way or another.

[arcatdmz]

Thank you @asturur for your timely feedback! I hope the rest of the tasks before merging wouldn't be tough on your side.

Regarding the next step toward pressure-sensitive brushes (#5587), I've looked into the mechanism on how pointer events are passed to free drawing brushes and found _onMouse*InDrawingMode methods defined in canvas_events.mixin.js.
e.g., https://github.com/fabricjs/fabric.js/blob/master/src/mixins/canvas_events.mixin.js#L523

They're calling this.freeDrawingBrush.onMouse*(pointer) methods where the pointer parameter is retrieved by calling getPointer method. (onMouseUp is a bit special since it has no parameter.)

Once the PR is accepted, how about adding the second (or the first for onMouseUp) parameter e.g., options which is an object like { pressure: [a pressure value ranging from 0 to 1] }?

[asturur]

i have been buys, getting back to this asap

[arcatdmz]

@asturur No hurries, but any updates on this? We'd like to move things forward to support pressure-sensitive brushes.

[asturur]

i jun i ll merge this asap. But i want to talk before you dive into brush changes. brush api can be improved

[arcatdmz]

@asturur Thanks for your reply, and I'm looking forward to the talk.

[asturur]

so i m merging this now, tomorrow giving it a run and see if i can extend tests somehow.

[asturur]

i wonder, should we work to remove touch related events, are those now unnecessary? what could support touch but not pointerevents that make sense to support?

[arcatdmz]

Thank you for merging the code!

I personally love the simplicity of PointerEvent, but it is unfortunately not supported on iOS Safari.
Given that iOS Safari (on an iPad Pro) is a great target for dealing with pressure-sensitive input, I think we still need to keep support for TouchEvent.
https://caniuse.com/#feat=pointer

[arcatdmz]

Another source for checking unsupported browsers:
https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

[asturur]

ios safari has so many limitations on canvas too.

pointer events can eventually take the place of mouse events when we are sure they work perfectly

[arcatdmz]

So, in the end, we would only need to support PointerEvent without looking at MouseEvent nor TouchEvent -- what a beautiful world!

Meanwhile, I think we still need to wait for some more time, and removing support for TouchEvent (or MouseEvent) sounds too early. In my particular case, iPad pencil support is very important (which was the initial motivation behind this issue.)

[asturur]

nothing of this is gonna happen soon.
pointerEvents are more supported where you have a mouse than touch, i wanted only to say this.
All desktop browser, IE10 included, support pointer events.

[asturur]

ohhh stupid Safari.

[dirkluijk]

There is actually a very good polyfill for PointerEvent: https://www.npmjs.com/package/pepjs. It only needs touch-action="none" to be present on the element to track the events.

Has that been tested in this PR?

I think the true profit of this PR would be to remove all the old Mouse and Touch events in favour of PointerEvent. That would make the Fabric.js code base a lot cleaner.

[asturur]

i would agree, but we need a solution for ie10 too that adds the msPointer prefix. if then safari polyfill works and can be embedded optionally we can remove touch and mouse all at once.

[dirkluijk]

IE10? Are you kidding me? 😄 (no offence here)
https://www.xfive.co/blog/stop-supporting-ie10-ie9-ie8/

+1 for removing touch and mouse events in the future.

[asturur]

Well, it has a canvas, supports es5 mostly, not supporting it is a choice not a necessity. So many people for small projects do want to still being able to run mostly everywhere.

I'm more like ios on latest iphones not supporting pointer events are you kidding me? :D

[dirkluijk]

I'm more like ios on latest iphones not supporting pointer events are you kidding me? :D

That's so true.

[hhyperstar]

@arcatdmz Has there been any more progress on this?

[asturur]

Pointer events have been merged and work great.
The event is passed raw to the brush and can be used.
What kind of progress are you looking for?

[hhyperstar]

Oh that's all I needed. Glad to see they're implemented!
I managed to make a pressure-sensitive brush, but I had to make a couple (very rough and probably not-too-safe) edits to underlying classes in Fabric in order to do it. I'd love to make it work without edits, if possible.

What do you mean that 'the event is passed raw to the brush?' I'm not sure I understand where it's being passed to.

[asturur]

you can extend the pencil brush and change the methods you need to.
Each brush exposes a mousedown,mousemove,mouseup that will receive as seconda argument an object, of which one of the properties it the event that generated it.
Raw as generated.
From there you can read pressure or whatever you need.