PixelsCommander / Propeller

JavaScript library to rotate elements with mouse or touch gestures. Supports inertia and stepwise rotation. Optimized for better performance.
http://pixelscommander.com/polygon/propeller/
409 stars 58 forks source link

Wrong drag point when parent element is translated #13

Open antoniobrandao opened 9 years ago

antoniobrandao commented 9 years ago

If the parent element has a translate3d position defined (for example than (100, 100, 0)), the interaction coordinates are still calculated as if the parent element is at (0, 0, 0).

In the examples page, if I apply the following CSS to one of the DIVs with the class "example" (which are parent to Propeller instances, the drag point is still calculated from the original TOP / LEFT as if the parent isn't translated.

<td class="example" style="
    position: absolute;
    transform: translate3d(100px, 100px, 1px);
    width: 397px;
    height: 402px;

In my case I need to have a translate3d position defined in the parent element and still be able to rotate the Propeller instance inside it. But the translate3d applied to the parent doesn't seem to be taken into consideration in the calculations. Any thoughts?

PixelsCommander commented 9 years ago

Seems that p.getViewOffset and p.addOffset methods should be fixed in order to respect transform/translate. I am going to have a b.trip for the rest of the week, so can not do it asap, you may try to fix it yourself. Let me know if any help needed on this road.

antoniobrandao commented 9 years ago

I could try, but I'm in a tight deadline until the end of the next week - for now I hacked a very dirty fix which depends on my app - but I could try later..