[WIP] Handle group transformation with skew and rotate + scale

[asturur]

This is a WIP.
it is fully working excluding when we involve flipping in transformations.

I upload a demo as soon as i have time.
The strange thing is that everything works fine, but when i REGROUP items after ungrouping some flipping appears.

closes #726
closes #2515
closes #2297
closes #833

[asturur]

_CONTROL BOXES WILL BE FIXED LATER_
Usual demo here:
http://www.deltalink.it/andreab/fabric/kitchensink.html

// clear canvas
canvas.clear();

// remove currently selected object
canvas.remove(canvas.getActiveObject());

// add red rectangle
canvas.add(new fabric.Rect({
  width: 50,
  height: 50,
  left: 50,
  top: 50,
  fill: 'rgb(255,255,0)'
}));

// add red rectangle
canvas.add(new fabric.Rect({
  width: 50,
  height: 50,
  left: 50,
  top: 50,
  fill: 'rgb(255,0,255)'
}));

// add red rectangle
canvas.add(new fabric.Rect({
  width: 50,
  height: 50,
  left: 50,
  top: 50,
  fill: 'rgb(0,0,255)'
}));

// add red rectangle
canvas.add(new fabric.Rect({
  width: 50,
  height: 50,
  left: 50,
  top: 50,
  fill: 'rgb(0,255,0)'
}));

-Create 4 rectangle ( free code given :) )
-move them, scale, rotate, skew them at will
-group them with mouse selection
-rotate group
-destroy group clicking outside
-regroup
-scale, skew, rotate [optionally flip group] at will
-destroy group clicking outside
everything is ok.

if you flip group and destroy group, everythings looks fine.
click every single object, still everything fine.
Regroup the objects and they will get some bad change.

it involves flipping and negative scaling, but i cannot figure out why.
Any help is appreciated.

[asturur]

issues described here no loger exist.

[asturur]

controlboxes fixed, active group now behaves very good. Also adding an object to an already transformed active group looks fine.

[kangax]

@asturur what else is left?

[asturur]

Code needs optimizations and caching. But this we can do later after we are sure everything is working properly. Transformations now more general and work in most situation. Any i could test.

Also in drawBorders, drawControls you can check i added a "sign" var. Consider this var as a temp patch because i could not figure out what was happening with negative scaling. comment the code if necessary, i will then correct and squeeze commits

[asturur]

If it is green you can merge @kangax.
I did not notice any regression with final code, but i had many while coding. So i would be suprised if there is none.
I'm very satisfied with those changes!

[asturur]

ready to merge

[kangax]

Can we move all these calls into 1 method?

[asturur]

if you mean object.set(options) , no it does not work. Scale is often negative and is triggering an automatic flip change that creates a random flip when regrouping the objects.
I think is part of optmization possible, but as of now it would just stop it from working.

[asturur]

Wait, i found some glitches!

[asturur]

This is working in group:

This is working alone:

the second gif "looks" good, but corners coordinates are handled differently and then are not clickable anymore.
But if @kangax like more the new behaviour, fixing corner coords is easy. It is just a matter of choice.

[uimos]

This is cool. I have one question, will this work with image object?

[asturur]

of course. it works with any object. try it on:

http://www.deltalink.it/andreab/fabric/kitchensink.html

images must be added by execute tab or using the load json tab.

[VictorHagsand]

Any timeframe for this great fix?

[asturur]

i hope weekend!

[VictorHagsand]

Sounds great, this is a very needed fix, great job on it : )
Any one know anything about when this might show up in a release?

[asturur]

@kangax ready to merge.

[uimos]

Thanks for the update. Do I need to initial something in code so that the skewing will work? Currently I'm on version 1.6.0-rc.1 but not able to get the skewing work.

[asturur]

skew by pressing shift button and using middle controls on side. or by code using skewX and skewY properties

[uimos]

Hi @asturur , pressing shift didn't work in my code though. I tried to use jsfiddle (I manually upload 1.6.0-rc.1 js file), the shift key work. but the coordinate seem off for me. I still not sure why it work in jsfiddle but not my code though. hmm.

Here is the sample:
http://jsfiddle.net/uimos/wxte50gg/