CODEWITHSUNDEEP
javascripteventscanvaslistenerfabricjs
ronIDX
ronIDX

Reputation: 768

FabricJS - Avoid triggering "canvas.on('mouse:up', function() { ... })" after object end moving

Using FabricJS I'm making a canvas with the possibility to add rectangle. Once a rectangle is added to canvas, it can be dragged in any position.

My problem is that when I stop dragging a rectangle, the event:

canvas.on('mouse:up', function(element) { ... });

is triggered, but this is an unwanted behavior.

How can I trigger the event:

canvas.on('mouse:up', function(element) { ... });

only when is effectively clicked the left button mouse, and not also when I end dragging object?

Upvotes: 1

Views: 3718

Answers (2)

milahu
milahu

Reputation: 3609

adding mouse:move listeners should be avoided
cos the move event is fired on every pixel
see the fabric.js event inspector sample

in most cases, you only need to compare
the two click positions of mousedown and mouseup

fabricjs_obj
.on('mousedown', function (event) {
    event.target.dragStart = event.pointer
})

fabricjs_obj
.on('mouseup', function (event) {
    const a = event.target.dragStart
    const b = event.pointer
    const obj = event.target
    if (a.x != b.x || a.y != b.y) {
        console.log('obj dragged: '+obj)
        return // stop event handler
    }
    console.log('obj clicked: '+obj)
    // process click event
})

Upvotes: 0

bcr
bcr

Reputation: 3811

You could do something like this:

var _isDragging = false;
var _isMouseDown = false;

canvas.on('mouse:down', function () {
    _isMouseDown = true;
    // other stuff
});

canvas.on('mouse:move', function () {
    _isDragging = _isMouseDown;
    // other stuff
})

canvas.on('mouse:up', function(element) {
    _isMouseDown = false;
    var isDragEnd = _isDragging;
    _isDragging = false;
    if (isDragEnd) {
        // code for drag complete
    } else {
        // code for no drag mouse up
    }
    // code for both
});

Upvotes: 4

Related Questions