How to identify which object is been clicked on in grab mode?

[henryhu712]

In normal status, I can track the 'mouse:down' event to find out which object is been clicked. But in grab mode, all objects in canvas are not clickable. How can I know which object is being clicked in grab mode?

[taqimustafa]

I think you can identify the grabbed object in Object:Selected Event http://fabricjs.com/events/

[sameerxanand]

canvas.getActiveObject() - Returns the currently active object.

If you wanted to do something if the active / selected object is of a specific type, you can do:

canvas.getActiveObject().get('type') - Returns the object type.

See these docs:

http://fabricjs.com/docs/fabric.Canvas.html#getActiveObject http://fabricjs.com/docs/fabric.Object.html#get

[taqimustafa]

Active Doesn't mean that the object is grabbed ?

[sameerxanand]

Actually, I thought you aren't able to click on anything in grab mode.. You're just panning around the canvas. In that case, you are right about using events.

[benjick]

Anyone solved this in a nice way?

[cmawhorter]

This seems like a fabric.js question/issue more than a fabricjs-viewport issue.

As @anans21 mentions getActiveObject returns the selected object but it doesn't work correctly multiple objects selected (and the fabric devs have expressed that they have no intention of fixing it IIRC.)

[sameerxanand]

You need to use getActiveGroup to get the selected objects.

[benjick]

getActiveGroup works for multiple (would be nice it was available when only one was selected as well) but there is no activeObject/Group in grab mode

[sameerxanand]

You can also make an object clickable in grab mode by setting the objects' selectable property to true.

if (canvas.getActiveGroup()) {
    canvas.getActiveGroup().forEachObject(function(obj) {
        // Do something with the selected objects...
    });
} else {
    var object = canvas.getActiveObject();
    // Do something with the selected object...
}

[sameerxanand]

This is how you make objects selectable in grab mode. My above post shows how to get the selected objects, or object if only one object is selected.

if (canvas.isGrabMode) {
    canvas.selection = false;
    canvas.forEachObject(function(obj) {
        obj.selectable = true;
    });
}

Setting canvas.selection to true will enable clicking and dragging your mouse over object(s) to select them.. But my assumption is that you wouldn't want that since you're in grab mode.

[cmawhorter]

Oops. Ignore my comments I forgot grab mode was panning and not interactive mode.

On Tue, Jun 16, 2015 at 12:41 PM, Sameer Anand [email protected] wrote:

This is how you make objects selectable in grab mode. My above post shows how to get the selected objects, or object if only one object is selected.

if (canvas.isGrabMode) { canvas.selection = true; canvas.forEachObject(function(obj) { obj.selectable = true; }); }

— Reply to this email directly or view it on GitHub https://github.com/rstgroup/fabricjs-viewport/issues/23#issuecomment-112543473 .