gthmb/jquery-free-transform

provides simple controls that allows you to move/rotate/scale a DOM element. kinda like a simple version of the free transform tool in Flash or Photoshop.

jquery-free-transform's Issues

Feature request: Options to toggle scale, move and rotate

It would be nice to be able to disable certain parts of the control. If all you want is rotation, one could set the options: scale:false, move:false

Project name incorrect in source header

Your source header is incorrect saying:

• Matrix.js v1.0

instead of:

• jquery-freetrans.js v1.0

What are X and Y values after scaling?

I am trying to recreate the transformed object to a svg element, so I am not sure what x and y position returns after scaling the object.

prevent error

function _setOptions(data, opts) {
if (opts == null || opts == undefined) return;
delete opts._p;

ReferenceError: event is not defined

I get that error report from firebug and this is the line.

It said it is on line 7.
I call the this plugin function after some events like click and drag was initiated!

How to set the 'ft-rotator' position?

How to set the 'ft-rotator' position?
Thank to telling me.

Method "update" is required.

Elements may be changed by other scripts, in this case needed some UPDATE method which will update position and size of contols boxes;

Set values from matrix string?

I really like your library, it's exactly what I need. However, it would be nice to be able to set the attributes from a css-like string, without having to fiddle about with matrices externally. I mean sth. like this:

$('mydiv').freetrans({
transform: "matrix(2, 0, 0, 2, 0, 0)"
});

Is that possible?

Callback functions

Are there any callback functions to listen on, like drag/scale/rotate-stop?

Controls on wrong position

Hi, when i manualy rotate the object and then change it's rotation with script ( for example with button onlick) the points in corners goes to wrong position.
You can test it here
http://jsfiddle.net/xUtq6/
just manualy rotate the cat and than click on the button...

Enhancement

Just for fun I've forked and enhanced your jsfiddle a little bit: http://jsfiddle.net/98hGA/4/

Now you the appropriate cursors shows up depending on what little box you are hovering over before resizing and grab/grabbing cursors show up for dragging.

[question] Browser support?

Touch ain't working on iPad simulator and since developing on a mac not IE available for testing. As matrix.js relies on canvas I guess no IE below 9 ?http://caniuse.com/#search=canvas

Maintain aspect ratio option

Hello

I would like to know if it's possible to add an option for the resizing action to maintain aspect ratio (without having to press a key)

Thank you!

License?

I would love to use your library within a software package distributed under both GFDL and Creative Commons Attribution-ShareAlike (by-sa) License. As you do not have a license plate, I have to ask for your permission first.

Would it be ok to include, use and distribute in such a context?

Congratulations!

excellent plugin jonathan green, I have not seen anything like the web.
also wanted to ask you a question, how to make a "margin" element to the controls, I have not managed to do :( if you could help me would be very grateful.
 

Greetings from Chile

Image flipping

Hi,
I cant seem to force the flipping of an image as soon as freetransform function is running.
I'm trying to do that with CSS (scaleX(-1)), can anyone point me to a solution ?
Thanks

Move limit within parent div

How to limit movement within the parent div?

After re-sizing the element position center of parent

I need to align the element center of parent div when i click the button. Before re-sizing this working fine but after re-sizing having trouble. Can you please help me for fix this?

See the fiddle:
http://jsfiddle.net/mpanuraj/xUtq6/3/

Scale from centre

It would be great to have the option to scale the element but maintain the central position.

What are x and y?

I'm hoping you can provide some clarity on the data object for me. scalex, scaley, and angle are clear enough, but I can't figure out what positions x and y are relative to. When the object isn't scaled or rotated, they give the position of the top left corner, but I'm not clear how the rotation and scale interact with them.

Ultimately, I'm trying to figure out how—given the properties from the plugin—I can recreate the transformation with the correct position.

Thanks!

containment?

Hello
i am using this nice feature, but i need to insert containment for drag & resize.
is it possible?

Doesn't work with mobile phones

This plugin does not work with mobile phone browsers. It would be nice if it did!

Ipad Gestures

Your library do everything I planned to create saving me tons of time.
I only needed to add the Ipad gestures(rotate/pinch).
I'm sending the code I added inside _init function, if you want to add/test it.

$(container).bind('gesturestart', function(evt) {

            evt.stopPropagation();

            var data = sel.data('freetrans'),
                cen = _getBounds(data._p.divs.controls).center,
                pressang = evt.originalEvent.rotation,
                startscale = evt.originalEvent.scale,
                tempScaleX = data.scalex,tempScaleY = data.scaley,
                firstAngle = true;

            rot = Number(data.angle);

            var change = _noSelect(function(evt) {

                if(firstAngle){
                    firstAngle=false;
                    if(Math.abs(evt.originalEvent.rotation)>30){
                        pressang = evt.originalEvent.rotation;
                    }
                }

                var ang = evt.originalEvent.rotation,
                    d = rot + ang - pressang,
                    newscale = evt.originalEvent.scale;

                data.angle = d;
                data._p.rad = d*rad;

                data.scalex = tempScaleX + newscale - startscale
                data.scaley = tempScaleY + newscale - startscale

                data._p.cwid = data._p.wid * data.scalex;
                data._p.chgt = data._p.hgt * data.scaley;

                _draw(sel, data);
            });

            var end = function(evt) {
                $(document).unbind('gesturechange.freetrans', change);
                $(document).unbind('gestureend.freetrans', end);
            };

            $(document).bind('gesturechange.freetrans', change);
            $(document).bind('gestureend.freetrans', end);
        });

Transformations reset after re-enabling the plugin

I tried to do add simple "select" functionality. I achieved that by calling .freetrans('destroy') on previously selected element and .freetrans() on new one. That works fine except that all transformations are wiped after selecting same shape for the second time.

Here's an example: http://jsfiddle.net/9hz8y99z/1/

SVG Elements Support

Hi,

Firstly thank you for taking the time to create this awesome script.
I have a quick question, Does it support free-transform for svg elements? I am working with svg.js for rendering and manipulating svg and looking for a transform tool for it.

Thanks,
Praney

Fix position for zoom!

I am trying to use this along with the jQuery Pan Zoom plugin. If the parent div is at a zoom other than 1 this free transform plugin doesn't perform as expected.

I got the same issue when using jQueryUI draggable with zoom but to fix it I used :

$(".selector").draggable({
drag: function(evt,ui)
{
var zoom = currentZoom; // current zoom value;

        ui.position.top = Math.round(ui.position.top / zoom);
        ui.position.left = Math.round(ui.position.left / zoom);
    }
});

How can I fix it with this plugin?
Can someone please help?

Thanks in Advance,
Praney

bug margin ft-control

hello master!
I have a problem, fix it and wanted to know how long checks out the element with margin. but when manipulated (resized) scaling jumps more pixels than normal, how I can fix it?

http://jsfiddle.net/66Bna/402/

getBounds Documentation

In the readme, the following line:

var b = $('mydiv').getBounds();

should be:

var b = $('mydiv').freetrans('getBounds');

How to make turn on / turn off?

How to make turn on / turn off?