CODEWITHSUNDEEP
fabricjs
Johan Hoeksma
Johan Hoeksma

Reputation: 3766

Circle mousedown not working after moving

I'm making a image editor with Fabricjs. I made a handle (blue circle) when you click it, its hide the selected object.

All is working well.... BUT: After moving the object i can't click the blue circle

During the movement the controls and border has to be hidden.

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;    
}

Upvotes: 1

Views: 1610

Answers (1)

Kienz
Kienz

Reputation: 3507

I have updated your fiddle.
Now it should work:
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;    
}

Upvotes: 1

Related Questions