Raphael Freetransform toggle show/hidehandle, object be front, and object can be remove

Question

UPDATE

I'm using Raphael Freetransform to show imgs from user upload,
searching for a long time, how to do below thing
1) click toggle showhandle``hidehandle? solved

2) Add a new button each time new Freetransform object be create.
- Click the button object can be remove.

3) Raphael object can use toFront , Freetransform how to do it

use Raphael Freetransform basic coding:

var paper = Raphael($('.canvas')[0], 1000, 1000);
var r_img = paper.image('img/path'+file_type, 100, 100, 200, 200);
paper.freeTransform(r_img).setOpts({drag:'self', scale:true, rotate:true, draw:[ 'bbox' ], keepRatio: true});

after user upload 2 img in canvas, the output source code will be:

<image></image>
<image></image>
// 1st image handle
<path></path>
<circle></circle>
<path></path>
<circle></circle>
<path></path>
<rect></rect> // x8
// 2nd image handle
<path></path>
<circle></circle>
<path></path>
<circle></circle>
<path></path>
<rect></rect> // x8

solve the question 2)
if I create a div tag be button, I can't find 1 group(image and handle) be select.

solve the question 3)
if click, the image can use toFront resoure, but the handle how to be front too?

http://jsfiddle.net/Ls7FS/3/

    img.onload = function(){
    var img_width = this.width, img_height = this.height;
    var img_scale = img_width / 200;
    var new_height = img_height / img_scale;
    var ft, r_img = paper.image('img/'+path, 0, 0, 200, new_height), dragged = false;

    r_img.click(function(){
        // Toggle handles on click if no drag occurred
        if(!dragged){
            if( ft.handles.center === null){
                ft.showHandles();
                console.log('front');
                r_img.toFront();
                //r_img.remove();
            }else{
                ft.hideHandles();
            }
        }
    });
    ft = paper.freeTransform(r_img, {draw:[ 'bbox' ], keepRatio: true, size: 3 }, function(ft, events){
        if(events.indexOf('drag start') !== -1){
            dragged = false;
        }
        if(events.indexOf('drag') !== -1){
            dragged = true;
        }
    });
};
img.src = 'img/'+path;

Elbert Alias · Accepted Answer · 2013-03-29T23:09:42.620

You can't bind mousedown and have the drag event work at the same time.

Mouseover doesn't work either because mousing over the handles will trigger a mouseout on the object.

You can show handles on click, release the mouse and click again to drag. You can then hide handles on click if no dragging happened using FreeTransform's callback function. I can give you an example if this is what you're after.

Edit

Example code (http://jsfiddle.net/nNwx8/1/):

var
    paper = Raphael(0, 0, 500, 500),
    red   = paper.rect(200, 200, 100, 100).attr('fill', '#f00'),
    blue  = paper.rect(260, 260, 100, 100).attr('fill', '#00f')
    ;

register(red);
register(blue);

function register(el) {
    el.data('dragged', false);

    el.click(function() {
        // Toggle handles on click if no drag occurred
        if ( !this.data('dragged') ) {
            if ( this.freeTransform.handles.center === null ) {
                this.toFront();

                this.freeTransform.showHandles();
            } else {
                this.freeTransform.hideHandles();
            }
        }
    });

    paper.freeTransform(el, {}, function(ft, events) {
        if ( events.indexOf('drag start') !== -1 ) {
            el.data('dragged', false);
        }

        if ( events.indexOf('drag') !== -1 ) {
            el.data('dragged', true);
        }
    }).hideHandles();
}

Thanks, I use this, but can't hide(toggle) handle, http://jsfiddle.net/Ls7FS/2 add a `conosle.log` `ft.handles.center` always `null` (at first load) — vibskov, Mar 27 '13 at 10:51
If I tried make object to top of all by click, in raphael can use `toFront` if in Freetransform how to do the samething? If add a new div tag each time a Freetransform object be create, and click the tag how to find this Freetransform object(img, handle) and remove? I use r_img.remove() only the image be remove.. jsfiddle.net/Ls7FS/3 — vibskov, Mar 29 '13 at 21:20

Raphael Freetransform toggle show/hidehandle, object be front, and object can be remove

1 Answers1