Add pressure property to fabric.util.getPointer

[arcatdmz]

I am interested in adding pressure support to fabric.js, and as its first step, this pull request allows custom BaseBrush subclasses to access pressure data.

To do so, this pull request implements the following three changes.

1. use PointerEvent instead of MouseEvent or TouchEvent whenever possible so that the pressure value can be retrieved from PointerEvent.pressure
2. as a fallback, retrieve the pressure value from Touch.force
3. update the return value of the fabric.util.getPointer method to include the pressure value

• Touch: https://developer.mozilla.org/en-US/docs/Web/API/Touch
• PointerEvent: https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

With these small changes, I hope I can start implementing a custom brush (as well as a custom path) that shows strokes of changing widths according to the pressure values.

[arcatdmz]

I've updated some code to address eslint and Node.js-related issues, and the only remaining issue seems to come from the unit tests that expect MouseEvent but PointerEvent.

I'm not sure whether I should modify existing tests, as opposed to adding new tests as recommended in the contributing guide.
I haven't played with QUnit before, which is another blocking issue.

[asturur]

Hi @arcatdmz , thanks for starting this.
We can do this, but i would like to see it differently.

I would like to see a PR that adds pointer events, like you did, whitout adding pressure yet.
I do not know pointerEvents very good or i would have started long ago.

Also i would like pointerEvents to not be enable immediately by default but with a boolean that is new Canvas(.., { enablePointerEvents: true }). Otherwise switching from mouse to pointer without changing major version of fabric seems bad for other devs.

Then in another PR i would introduce the pressure in a way that makes sense ( personally i do not like to see it in the getPointer function that should be completely geometric )

We also needs tests here and there, at least a couple, to see that events fire correctly

What is the equivalent for mouseUp in pointers?

[arcatdmz]

Hi @asturur , thanks for your quick and warm response.
I agree that a separate PR that enables optional PointerEvent handling is reasonable, and will do that.

PointerEvent extends MouseEvent, so what we need to do is basically just adding pointer* event handlers instead of mouse* event handlers.

The equivalent for mouseup is pointerup.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerup_event

Once I add another PR, I'll close this PR.

[arcatdmz]

I'm closing this PR and moving to #5589.

Meanwhile, for those interested in working code capable of getting pressure values, you could use the master branch of arch-inc/fabric.js for now.