aliasio / raphael.freetransform Goto Github PK

My sets need to respond to clicks and drags with different actions. Is there a way to specify a threshold or something? When I click on a set, I get a 'drag start' event, no matter how carefully I click.

Hi

Thanks, ElbertF, for the great work!!! It helps so much...

I am trying to rotate an image using the 'self' option. it rotates to the wrong direction, and too slowly.

It works great with axisX.

Here is a fiddler: http://jsfiddle.net/yag2j/

Thanks again

I'm experiencing an issue using Raphael.FreeTransform together with Raphael.JSON (specifically the fromJSON method).

If a serialised element contains a transformation then applying FreeTransform does not seem to work correctly (the handles are not shown in the right place). Please see http://jsfiddle.net/webseed/HT47T/7/ for an example where a single rotation (-45 deg.) is applied to the transformation matrix before free transform is applied.

Another question...
I have created a text with raphael and i have associate a function at the click (text.click(function()..) that add free transform library..but the text is "insensitive" at the click..(only few point are sensibile to click).why?!..
Thanks

does free transform support changing the rotation pivot point?

I noticed that the scale function doesn't work as it should when you use the bbox corners to scale the object, in combination with keepRatio ( see attached image for the settings ), after you rotate the object.

Does anyone know how to fix this?

Thanks

You might check aswell the other methods and let them return this;
best regards,
Ph

Hi,
Thank you for making such a wonderful product.

The issue I have with it is that on tabs and ipads the touch event work only once (probably due to toFront function which uses appendChild and then strips the element from all the touch events).

Can there be a workaround for the same?

I'm using this solution to handle my set' dragging:

start = function() {
        entity.oBB = entity.getBBox();
        entity2.oBB = entity2.getBBox();
    },

    move = function(dx, dy) {
        var bb = entity.getBBox();
        entity.translate(entity.oBB.x - bb.x + dx, entity.oBB.y - bb.y + dy);
        entity2.translate(entity.oBB.x - bb.x + dx, entity.oBB.y - bb.y + dy);
    },

    up = function() {
        console.log(name, ' dropped!');
    };

entity.drag(move, start, up);

Now, when i create a FreeTransform for that set (entity and entity2 both are sets; set2 moves relative to set), the control (handle) seems to appear at the (0, 0) point. And when i drag sets somewhere, handle does not.

Hi Elbert,

I perform various transformations (scaling, rotating, moving) on Raphael-Objects and want to export that for importing it later.

Afterwards, I save the current matrix of that object. Because I need to remove and add that object again on the paper, but I want it to have the same position, size and rotation as before.

But when I apply the previous Matrix (or transformString) to the new Object (what works excellent, because it has the previous look) AND add freeTransform, it looks like the freeTransform is applied to the original, untransformed object?! It "jumps" back to the original size, scale rotation the second I add freeTransform.

Is it because of the method I add the previous matrix to the object? Doesn't freeTransform look for an existing matrix?

I tried several ways, like matrix.toTransformString (and applying this to Object.transform) or copying the whole transform-Atribute and adding it afterwards.

Please, could you give me a hint, how to fix this?

Thanks in advance and cheers, Christian

Found

TypeError: c is undefined

error while trying to execute

var ft = paper.freeTransform(entity, {drag: false, dragRotate: false});
ft.unplug();

FEATURE REQUEST

A context menu which will be triggered by user click / touch on self / center

1.-) remove the object (not handles)
2.-) clone the object
3.-) change stroke color
4.-) change stroke style
5.-) change stroke width
6.-) change background color
7.-) change background opacity
8.-) change stroke color opacity

Thank you for your time and attention...

I have a question of Raphael..how can I underline a text?...there is an attribute to set??....I know this is not the right forum, but if someone could help me ...Thanks

Right, firstly... It may well not be your code!

Basically I'm using a combination of escobar5's Pan & Zoom library: https://github.com/escobar5/raphael-pan-zoom and your own. It could be either (or neither) at fault.

The behaviour I'm getting is that if I zoom in slightly and select an element to drag around, if I start to drag it starts to adjust both the pan of the svg and drag the element around. Now, is this just an event propagating further up the chain than it should, or something else?

If you want to try my example for yourself: https://github.com/Siyfion/javascript_playground

I have a need to modify some other objects that are not in the set that is being managed by freeTransform. for example, I have a complex shape that is connected to other shapes by an SVG path ( a bezier curve ). Therefore, when I drag my shape, I need to update my curves manually.

I was doing this before without the FreeTransform plugin, but I can't get it to work now.

I am using the callback facility to capture the drag events, and then I am trying to update my curve, but the set I am dragging (or the elements inside it) do not show any updated values for attr("x") or attr("y"). The elements themselves are moving when I drag them, but the Raphael attr's are not changing.

Any hints on what is going on?

if set scale config to true, the program will break.

<!DOCTYPE html>
<html>
<head>
  <title>index</title>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="/javascripts/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="/javascripts/raphael.js"></script>
  <script type="text/javascript" src="/javascripts/raphael.free_transform.js"></script>
  <script>
    $(document).ready(function() {
      var paper = Raphael("paper");
      var subject = paper.image("http://kai7.cn/images/4906a740bc137ca67b78946785fbdf8b8c4aeeec.png", 10, 10, 410, 246);
      var ft = paper.freeTransform(subject, { scale:false});
    });
  </script>
</head>
<body >
  <div id="paper" style="width:500px;height:750px;border:1px solid gray"></div>
</body>
</html>

When you create a path with the fill of type url, the freetransform does not behave as it does when you fill the type of image.

Here's the fiddle.
http://jsfiddle.net/6eUbS/

Any ideas of how to deal with this?

On line 576 there's a typo. It should be a comma to continue the var declaration.

 rotate    = ft.attrs.rotate - ft.offset.rotate;
 scale     = {

Thanks for the great plugin :)

I just discovered an issue with an existing project i'm working on.

1. I have a canvas, where I manually append SVG and text elements. When I click on them, I would initialize freeTransform for the first time. When this happens the position of the objects are altered by a small amount.
2. when I click outside the canvas , i'll deselect the object by calling .unplug(). The position of the original object that was wrapped is not reset to the state before freeTransform was applied to it.

I suppose for (1), the altered position is due to freeTransform's bounding box wrapping the actual object being plugged, but logically the wrapped object shouldn't be affected.

For (2), I notice that in .unplug(), you're basically just calling hideHandles() again before removing a reference to it.

This may seem like a small issue, but I'm actually using freeTransform to modify, save, load and resume modifying the objects on my canvas. It's a huge problem for me when the object has scaling and translation, which causes the original position to be offset by a great deal.

When the raphael object has some rotation and it's keepRatio is true, and when scaling is performed, it causes unexpected behaviour

the sample can be checked on http://jsfiddle.net/uBs96/4/

Just try to scale the rectangle

Using the following settings:

{
draw: [ "bbox" ],
scale: [ "bboxCorners", "bboxSides" ],
range: { scale: [ 25, 999999 ] }
},

Shrinking the object beyond its minimum scale causes the whole object to move along the axis it was scaled on, rather than just staying as it is.

thanks,
Kris

It breaks in IE7, when the object is image. Example http://jsfiddle.net/Ef83k/44/

Chrome browser working well.

But it happened only IE browser.

Case of IE8, when zoom in, changed X,Y value.

Case of IE9, It doesn't working at all.(nothing in the browser)

Plaease check this link : http://jsfiddle.net/9zu4U/151/

Hi,

I am trying to implement dragging and scaling in boundaries, which works quite good for dragging. But not for scaling. There are 2 problems I found in my example ( http://jsfiddle.net/Eywr9/4/ ):

1. If I scale down / up and reach the boundary the aspect ratio changes!
2. When I come to the boundary of scale range, the object starts dragging. This is not good, because the boundary-settings don't work here anymore.

Thanks!

Kind regards,
Stephan

I do not know if this is a known issue so I keep it short (if wished for, I can submit more detailed infos).

When I place the Raphael paper in a container (e.g. a div) then I get the following faulty console output and the script, of course, does not work:

Error: Invalid value for attribute cx="NaN"
Error: Invalid value for attribute cy="NaN"
Error: Problem parsing d="M500,200LNaN,NaN"

It seems like this is a positioning issue on the rotating / resizing handles.

Edit:
The boundary does not seem to work proper either.

I have an issue when using a Raphael Set, with the freeTransform. See the example code here: https://gist.github.com/3135492

Essentially if you use the scaling adorners to "invert" the set, the set seems to go back to the default position (which it shouldn't) and the adorning elements get really messed up.

Let me also say what a fantastic library this is, so thanks!

EDIT: This actually seems to have the same effect when using a "standard" element... FYI I've tried this on both Chrome and FireFox on Ubuntu.

Hi Elbert,

could you give me a hint, where in your sourcecode I could change the handle-Icons to use Images, instad of Cirlces? I need to add little icons for scaling and moving.

Thanks in advance and cheers,
Christian

I have a complex object with texts and a special way to rotate it. I still want to use freeTransforma on it, but this doesn't look that easy to implement. I want to use a proxy (the surface of the object, defined by a simple rectangle) and delegate freeTransform events to the complex object.
How can I do that? I've been trying to come up with a solution myself, reading freeTransform code without success. Maybe you can give me some hints (exact codeparts or subject's methods I could overwrite)?

Hi,

I use - paper.freeTransform(rect).setOpts({ keepRatio: true }); - which scaling the element by keeping it's ratio.

I want to change to black circle - the Disk which i use to resize and scale to another icon/image/shape that i'll choose.

How can i make it possible ?

BR,
Hezi.

Is there a way that I can do reflection with this? [Vertical / Horizontal]

Like this? [element.attr({
transform: "s1-1"
});]

You have the following at line 35
var
paper = this;
bbox = subject.getBBox(true)
;

When defining paper = this
the simi-column breaks the var so bbox becomes a global variable rather then local to Freetransfoem

it should be
var
paper = this,
bbox = subject.getBBox(true)
;

Hi,

I tried to make a rotation only in one direction from 0 till 270 degrees.
When I set the rotate range from 0 till 270 the rotation is jumping after 180 degrees.

Is this a bug or a feature? How can I fix this.

Thanks.

I guess I should just create my own manipulation handels, but maybe I'm just missing a simple thing here. How would you transform a simple line or an arrow? Using one rotation handle sometimes strange (line gets finner when longer, dotted rotation line confuses[btw, how can i remove that dotted rotation line?]).
Which options would you use for a simple "1D" object?

I am testing an application I did with this plugin on Mobile Safari for an iPad.

The dragging on the elements work well, but when trying to scale and rotate the element using the handles it simply doesn't work in my application. On the example (http://elbertf.com/raphael/free_transform/) it works sometimes, 1 out of 5 tries.

I went through the plugin code and the code on the example and I couldn't find any differences.

Am I setting up something wrong? How can I solve this issue?

I could be wrong about this, but I believe that the FreeTransform library throws an exception on line 725 if the element that it has been attached to is a set that contains another set. Probably nothing that a bit of recursion couldn't solve.

I'm getting an error thrown from Raphael using the following code concept. The axis handles work fine, but dragging either the rectangle or the center handle has an issue. [Error: TypeError: node is null.]

var r = paper.rect(-50,-50,100,100,4).attr({fill: "#AAA"});
var ft = paper.freeTransform(r, {});

ft.hideHandles();
r.mouseover(function(e) {
ft.showHandles();
});

I'm new..
I use raphael and freeTransform's library in my application.
the previous version of freeTransform work well (I use internet explorer 9 for test but also whit chrome works) and I can add in my raphael object the freeTransform with the following code..
var ft = raphaelPaper.freeTransform(rect);
ft.setOpts({ keepRatio: true });
ft.setOpts({ scale: true });
ft.setOpts({ showBBox: true });
ft.setOpts({ showBBoxHandles: true });
My raphael's object(img,rect, path,set) add the freeTransform and I see the box and the cornes handles.
But with the new version of freeTransform howcan I add the box and the corners handles like in the demo http://elbertf.com/raphael/free_transform/?
I set ft.setOpts({draw:true} but with the new version of freeTransform i have a problem every time that in freeTransform code present an ...."indexOf"
How the freeTransform manages the external box, corners handles and circle handles?!
thanks for help! :-) and thanks Elbert for the direction and the good works!! :-)

I'm hoping you can explain what's going on.

First case: when I first call freetransform, the handles load and I can drag and scale my shape. Not only can I drag using the center handle, but by clicking anywhere on the shape. Fantastic.

Second case: After calling freetransform, I immediately call hideHandles. I capture mousedown events and focus on a single selected shape at a time. So on mousedown, I showHandles. It drags using the center handle, but I can no longer drag by clicking the shape.

Any idea why that's the case?

I've just tried the following JavaScript:

var paper;

$(document).ready(function () {    
    paper = Raphael("drawArea", 90 * 8.3, 90 * 11.7);    
    var rect = paper.rect(200, 200, 100, 100).attr('fill', '#f00');
});

function allowEdit() {

    paper.forEach(function (el) {
        var ft = paper.freeTransform(el);
        ft.setOpts({ distance: 1.6 })
        ft.setOpts({ rotate: ['axisX'] });
        ft.setOpts({ scale: ['bboxCorners', 'bboxSides'] });
        ft.setOpts({ draw: 'bbox' });
    });
}

Where allowEdit() is triggered by a button press and it seems to get stuck in an infinite loop... Not sure why, something to do with ShowHandles()/HideHandles() perhaps?

Is it possible to know when the transformation ends?

It will great to have an option, that will change a way how elements will resize. By turning this option on, resizing feature will be like this:

• handles will be positioned at the edges or corners of element's boundary box;
• by dragging handles, element will be resized not from its center in both directions, but from opposite edge/corner, like in most graphic editors.

Just warning that the plugin uses translate and scale Raphael deprecated methods.

Thanks for the effort,
Tomas

Hi,

I noticed that the rotation anchor is positioned incorrectly when it is constrained to the bounds of its container.

For example, if I rotate the object 45 degrees anti-clockwise and move it so that the horizontal rotation anchor would go off the right-hand side of the container, it is constrained on the X axis but the Y is unchanged, so the rotation angle is now too steep (and the anchor is no longer perpendicular to the other anchor)

cheers
Kris

I want to be able to drag via "self" and scale and rotate with "axisX". This configuration works on my laptop as expected. However on the iPhone/iPad I can never get a handle to respond, even when I set "size" to something huge like 40px and give it some distance. Drag, scale and rotate will only work when bound to self.

Any thoughts? Thanks for the great library.

I use raphael and free Transform... In my applications I have a set formed by a path and a text..I wish that when I drag the set both path and text drag together, but when rotate and scale only the path must be rotate and scale...any idea?!..
I thought to exclude the text from set in start function and so the function move work only in the set(the set formed only by path).then add again the text to the set in up function..but seems that no works.

I'm trying to save the values of a transformed object so I can serialize the object to and from a database.

I'm only trying to save the properties necessary to recreate the object and I don't want to store the object as a transform (ie I want the post-tranform properties).

I'm using the following to export a serializable json object for a rectangle:
var ftAttr = rect.ft.attrs; //the freetransform attributes
var json = {
type: "rectangle",
shapeType: shapeType,
points: [{x: ftAttr.x + ftAttr.translate.x, y: ftAttr.y + ftAttr.translate.y}],
height: ftAttr.size.y * ftAttr.scale.y,
width: ftAttr.size.x * ftAttr.scale.x,
rotation: ftAttr.rotate
};

This code works just fine if I move the object or rotate it. But if I scale it in any direction, the object moves up if the scaling is "downward" and vice versa.

I think part of the problem is the x/y translate. I've notice in the demo (http://alias.io/raphael/free_transform/), the x/y translate values change fluently regardless if you scale using the left handles or the right side handles. If I scale using the left side handles so that the x translate says 75 and then move to the right handle and scale, the translate still says 75 and moves the same as if I was using the left handle.

I assume this is an error? The translate should only change if the "anchor" element (in an un-rotated rectangle this is the top left corner) changes.

Or am I missing something?

Great project, running very smoothly on chrome but seems to be very laggy on firefox.

I'm using free.transform & rapheljs 2.1.0,

Chrome and FF unplug the element great, but when i'm trying to unplug with IE9, it's keeping the .circles on while i'm exporting from SVG.

Any ideas ?

BR,
Hezi.

Please take a look at this example of the issue here.

Essentially, when I move the element around, I expect the clip-rect / clip-path to stay positioned relative to the object being moved around, not in it's absolute position. Is this intended? I can see that a matrix transformation is being applied to the clip-rect when the element is moved, if this is removed, it functions as I would expect. Perhaps this could be a configurable option?

Also, this example highlights the "100%" height / width issue, although that could well be me still missing something!?

What's the best approach to adding and removing graphical objects to a group after the FreeTransform on that group has been constructed? (So that the new items can be rotated too).