Круглый мускул не работает после перемещения

Question

Я делаю редактор изображений с Fabricjs. Я сделал ручку (синий круг), когда вы нажмете на нее, спрячьте выбранный объект.

Все работает хорошо .... НО: После перемещения объекта я не могу нажать на синий круг

Во время движения контролирует и границы должны быть скрыты.

My fiddle

var canvas = new fabric.Canvas('c', { hoverCursor: 'pointer', selection: false }); 
var blue = new fabric.Circle({ radius: 15, fill: '#00f', top: 300, left: 300 });  // Circle to hide/remove the object 
var red = new fabric.Circle({ radius: 50, fill: '#f00', top: 100, left: 100 }); 
var white = new fabric.Circle({ radius: 50, fill: '#ccc', top: 300, left: 100 }); 
blue.hasControls = blue.hasBorders = false; 
blue.visible = false; 
blue.name = "blue"; 
canvas.add(white, red, blue); 

var selObj; 

canvas.on({ 
    'mouse:down' : setHanlde, 
    'mouse:up' : setHanlde, 
    'object:moving' : moving, 
    'object:rotating' : updatePosition, 
    'object:scaling' : updatePosition, 
    'selection:cleared' : hideHandle, 
}); 


function setHanlde(e) { 
    obj = e.target; 
    obj.hasControls = obj.hasBorders = true; 
    if(obj.name != "blue") { 
     selObj = obj; 
     obj.setCoords(); 
     blue.setLeft(obj.oCoords.tr.x); 
     blue.setTop(obj.oCoords.tr.y); 
     blue.visible = true; 
    } else { 
     // hide/remove object 
     selObj.visible = false; 
     blue.visible = false; 
     canvas.deactivateAll().renderAll(); 
     hideHandles(); 
    } 
    canvas.renderAll(); 
} 

function updatePosition() { 
    selObj.setCoords(); 
    blue.setLeft(selObj.oCoords.tr.x); 
    blue.setTop(selObj.oCoords.tr.y); 
} 

function moving(e) { 
    e.target.hasControls = e.target.hasBorders = false; 
    blue.visible = false; 
} 

function hideHandle() { 
    blue.visible = false;  
} 

Answer 1

Я обновил свою скрипку.
Теперь он должен работать:
jsfiddle

var canvas = new fabric.Canvas('c', { hoverCursor: 'pointer', selection: false }); 
var blue = new fabric.Circle({ radius: 15, fill: '#00f', top: 300, left: 300 });  // Circle to hide/remove the object 
var red = new fabric.Circle({ radius: 50, fill: '#f00', top: 100, left: 100 }); 
var white = new fabric.Circle({ radius: 50, fill: '#ccc', top: 300, left: 100 }); 
blue.hasControls = blue.hasBorders = false; 
blue.visible = false; 
blue.name = "blue"; 
canvas.add(white, red, blue); 

var selObj; 

canvas.on({ 
    'mouse:down' : setHanlde, 
    'mouse:up' : setHanlde, 
    'object:moving' : moving, 
    'object:rotating' : updatePosition, 
    'object:scaling' : updatePosition, 
    'selection:cleared' : hideHandle, 
    'object:modified' : updatePosition 
}); 


function setHanlde(e) { 
    obj = e.target; 
    e.target.hasControls = e.target.hasBorders = true; 
    if(obj.name != "blue") { 
     selObj = obj; 
     obj.setCoords(); 
     blue.setLeft(obj.oCoords.tr.x); 
     blue.setTop(obj.oCoords.tr.y); 
     blue.visible = true; 
    } else { 
     // hide/remove object 
     selObj.visible = false; 
     blue.visible = false; 
     canvas.deactivateAll().renderAll(); 
     hideHandles(); 
    } 
    canvas.renderAll(); 
} 

function updatePosition() { 
    selObj.setCoords(); 
    blue.setLeft(selObj.oCoords.tr.x); 
    blue.setTop(selObj.oCoords.tr.y); 
    blue.setCoords(); 
} 

function moving(e) { 
    e.target.hasControls = e.target.hasBorders = false; 
    blue.visible = false; 
} 

function hideHandle() { 
    blue.visible = false;  
}