Fabric.js: Panning breaks selection

[nickasd]

When following the official tutorial for panning the canvas (http://fabricjs.com/fabric-intro-part-5#pan_zoom), selecting objects does not work anymore.

Version

2.0.0-rc.4

Test Case

http://jsfiddle.net/h0asdmkr/6/

Steps to reproduce

1. While holding the ALT key, click to the right of the square and drag the canvas so the square ends up in the upper left corner.
2. Try to select the square.

Expected Behavior

The square should be selectable.

Actual Behavior

The square is not selected.

[samael205]

I think that all elements aren't selectable. Try to select with Click & Drag

[nickasd]

If you click the square before panning the canvas, it gets selected. After panning, clicking it doesn't achieve the same.

[samael205]

You need to setCoords of all objects when you do MouseUp Fiddle

[nickasd]

Thanks, that solved the problem.

Perhaps it would be useful to add a method that does the canvas panning and updates all the coordinates? Even just mentioning the need for setCoords in that tutorial would be helpful for many people in my opinion.

[asturur]

I think i accidentally removed the setViewportMethod from the demo, let me see if i can fix it today.
Thanks for reporting.

Did you find the demo clear, apart the selection problem?
Did it enabled you to make your own panning or zooming control?

[nickasd]

It would be great if you could update it.

I found the tutorial very clear. I tried to implement panning and zooming a year ago or so and gave up because I couldn't get it to work. I guess this part of the tutorial didn't exist yet back then or maybe I just had the same problem with the selection not working. Everything's perfect now and the examples are very straightforward, thanks!

[asturur]

i wrote it one week ago.

2018-02-01 9:53 GMT+01:00 Nicolas Kick [e-mail]:

It would be great if you could update it.

I found the tutorial very clear. I tried to implement panning and zooming
a year ago or so and gave up because I couldn't get it to work. I guess
this part of the tutorial didn't exist yet back then or maybe I just had
the same problem with the selection not working. Everything's perfect now
and the examples are very straightforward, thanks!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/kangax/fabric.js/issues/4660#issuecomment-362199186,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI4QGNDs43zrXc4MZd9rKB33eDgNtYCks5tQXtsgaJpZM4Rz0aj
.

[Aubron]

Adding onto this @asturur

Just in the 'clarity of the docs' department, I was assuming that canvas.selection = false would disable object selection, but it doesn't (it just disables multi-selection), and if you're implementing any kind of viewport bounds, you'll end up moving the object. As far as I can tell, disabling object selection can't be done in .on('mouse:down') in any way, including stopPropagation, preventDefault, canvas.discardActiveObject(), etc.

Example: Try and perform a pan by alt+click+drag-ing the yellow rect, if you pan beyond the viewport bounds, you end up actually moving the rect.

http://jsfiddle.net/9c1y3af3/

Viewport bounds seems like a pretty common application here, so it might be worth demonstrating how to prevent object selection on mousedown.

[asturur]

it can t be done on mousedown, that is why we have that api discussion about different event firing.

[nickasd]

It would be great if this snippet could be added to the "Zoom and pan" tutorial:

for (let object of canvas.getObjects()) {
    object.setCoords();
}

This is what fixes object selection after panning and is probably what was needed in #4912.

[asturur]

but setViewport(matrix) already does it.
I will add it to the demo, why not.
The demo was build on static canvas for semplicity ( no selection )

[nickasd]

If you mean that setViewport(...) can be used instead of this.viewportTransform[4] and so on, then perhaps the tutorial should be updated. I had no idea this method existed and don't know what exactly the vpt parameter should be.

[RealVidy]

For others that might run into the same issue, the doc has not been updated.
You fix this by adding this.setViewportTransform(this.viewportTransform) in the 'mouse:move' callback, under

this.viewportTransform[4] += evt.clientX - this.lastPosX;
this.viewportTransform[5] += evt.clientY - this.lastPosY;

Cheers

[Nico321]

Even if this issue is quite old, I think there is another issue with the selection when using the selection key (default: SHIFT) to select multiple objects. After panning you are able to add new elements to the selection. But SHIFT-clicking an already selected element does not deselect it. However, it seems that you are able to deselect it by clicking on its "original" position which might be a empty space or even a different object.

this.setViewportTransform(this.viewportTransform) does not help.

I modified the existing fiddle by just adding a new object: fiddle

[TheMangoTrain]

Although there's tangents on this topic, the original post title isn't explicit enough; it should be renamed "Panning breaks ability to select objects".

[asturur]

I changed the demo to be always selectable and i introduced setViewportTransform.