Raphael Freetransform toggle show / hidehandle, the object must be in front, and the object can be deleted

Question

UPDATE

I use Raphael Freetransform to show imgs from user load,
look for a long time how to act below things
1) click toggle showhandle``hidehandle ? resolved

2) Add a new button each time a new Freetransform object is created.
- Press the button that can be deleted.

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

use basic Raphael Freetransform 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 the user loads 2 img in the canvas, the 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 question 2)
if I create a div tag button, I cannot select 1 group (image and descriptor).

solve question 3)
if click , image can use toFront resoure , but the handle, how to be in 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; 

Answer 1

You cannot bind mousedown and work with the drag event at the same time.

Mouseover does not work because mousing over handles causes a mouseout on the object.

You can display the handles by clicking, release the mouse, and click again to drag. You can then hide the click descriptors if the drag did not happen using the FreeTransform callback function. I can give an example if this is what you need.

Edit

Sample 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(); }