feat(util): transform utils

[ShaMan123]

Making transformations easier and accessible
Added the following utils:
2. sendPointToPlane
3. transformPointRelativeToCanvas
4. sendObjectToPlane

https://codesandbox.io/s/fabric-app-forked-bipwk

TODO

• tests

[ShaMan123]

Is this normal?

click to expand test results

ok 98 fabric.util > transformPoint
not ok 99 fabric.util > getTransformMatrixByObject
  ---
  message: failed
  severity: failed
  actual  : [
  3.000000000000001,
  6,
  6,
  7.999999999999999,
  27,
  42
]
  expected: [
  3,
  6,
  6,
  8,
  27,
  42
]
  stack: |
        at Object.<anonymous> (C:\Users\DELL\Desktop\DEV\fabric.js\test\unit\util.js:864:12)
        at runTest (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2411:35)
        at Test.run (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2394:9)
        at C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2645:16
        at processTaskQueue (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:1966:26)
        at C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:1970:13
  ...
  ---
  message: failed
  severity: failed
  actual  : [
  1.0000000000000002,
  2,
  3,
  3.9999999999999996,
  5,
  6
]
  expected: [
  1,
  2,
  3,
  4,
  5,
  6
]
  stack: |
        at Object.<anonymous> (C:\Users\DELL\Desktop\DEV\fabric.js\test\unit\util.js:866:12)
        at runTest (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2411:35)
        at Test.run (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2394:9)
        at C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2645:16
        at processTaskQueue (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:1966:26)
        at C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:1970:13
  ...
not ok 100 fabric.util > calcTransformationBetweenObjectPlanes
  ---
  message: failed
  severity: failed
  actual  : [
  3.0000000000000004,
  4,
  9,
  7.999999999999999,
  25,
  16
]
  expected: [
  3.000000000000001,
  4,
  9,
  7.999999999999999,
  25,
  16
]
  stack: |
        at Object.<anonymous> (C:\Users\DELL\Desktop\DEV\fabric.js\test\unit\util.js:938:12)
        at runTest (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2411:35)
        at Test.run (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2394:9)
        at C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2645:16
        at processTaskQueue (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:1966:26)
        at C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:1970:13
  ...
ok 101 fabric.util > transformPointBetweenObjectPlanes
ok 102 fabric.util > transformPointRelativeToCanvas
not ok 103 fabric.util > sendObjectToPlane
  ---
  message: failed
  severity: failed
  actual  : [
  -20.99999999999999,
  13.000000000000005,
  -14.999999999999988,
  9,
  -21.999999999999993,
  11.000000000000002
]
  expected: [
  -20.999999999999993,
  13,
  -14.999999999999996,
  9,
  -21.999999999999996,
  11
]
  stack: |
        at Object.<anonymous> (C:\Users\DELL\Desktop\DEV\fabric.js\test\unit\util.js:1061:12)
        at runTest (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2411:35)
        at Test.run (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2394:9)
        at C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2645:16
        at processTaskQueue (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:1966:26)
        at C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:1970:13
  ...
  ---
  message: failed
  severity: failed
  actual  : [
  18.00000000000002,
  10.000000000000036,
  12.000000000000009,
  6.000000000000018,
  16.00000000000001,
  6.000000000000014
]
  expected: [
  18,
  10,
  12,
  6,
  16,
  6.0000000000000036
]
  stack: |
        at Object.<anonymous> (C:\Users\DELL\Desktop\DEV\fabric.js\test\unit\util.js:1063:12)
        at runTest (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2411:35)
        at Test.run (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2394:9)
        at C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:2645:16
        at processTaskQueue (C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:1966:26)
        at C:\Users\DELL\Desktop\DEV\fabric.js\node_modules\qunit\qunit\qunit.js:1970:13
  ...
ok 104 fabric.util > makeBoundingBoxFromPoints

[ShaMan123]

This is ready and tested!
We simply need to understand the small diff in outcomes

[ShaMan123]

I am a bit confused regarding transformPoint util.
I'll run a test to make sure I didn't confuse the order of transformations

EDIT
I was confused. fixed now.

[asturur]

Merging this and fixing the unit test with a commit later.

[ShaMan123]

Now I think sendObjectToPlane and sendChildToPlane are pretty much the same.
For the sake of consistency I think of removing sendObjectToPlane (the clipPath issue) and renaming sendChildToPlane to sendObjectToPlane

[asturur]

do you want to make the change now or later?

[ShaMan123]

now, I'm refactoring

[ShaMan123]

I have refactored this PR heavily because of the clip path (and other orphans) not aware of the fact they have parents.
It's sad.
It was a good util but clip path broke it.
It still has a vulnerability getPlaneMatrix that I don't like, see my comment.
I was thinking to fix it by adding a parent property to clip path but then I remembered you said there is an option for objects to share a clip path so I backed off.
Now it is more generic and is basically the minions demo into a util.

[ShaMan123]

Maybe we can mark an object as a clipPath so then we can throw an error from calcPlaneMatrix
Here for example

fabric.js/src/shapes/object.class.js

Line 1146 in 23ae1a7

if (this.clipPath) {

[ShaMan123]

and I'm not sure about transformPointRelativeToCanvas as well, isn't Canvas.getPointer the right thing to use?

I looked around and encountered _normalizePointer which is a combination of transformPointRelativeToCanvas and sendPointToPlane and restorePointerVpt which is exactly what transformPointRelativeToCanvas does
Then I saw isTargetTransparent accepts a global pointer which is very confusing IMO and should conform to canvas coordinate system.

So I think what I want is a reversed function for Canvas.getPointer

[ShaMan123]

so all in all I think to remove transformPointRelativeToCanvas and standardize Canvas.getPointer
Thoughts?

[asturur]

imho you are aiming at a moving target.
clipPath is full of edge cases, and probably should be simplified and not drive our efforts.

We should examine, does forbidding to share clipPaths block real use cases or make them extremely complicated?
if yes, can it be solved adding the clipPath to a group?

I have experienced many time following a refactor idea and the get stopped at the end by something it couldn't work because of requirement x.

Are you satisfied with this PR? should i merge it?
I would like to start looking at the group myself and extract the first parts to merge.

[ShaMan123]

I am pretty satisified, perhaps I'll rework this in the future