Lock objects on panning

[timoostrich]

Hey fabric developers!

I want to lock all objects when/before panning.

You can see the problem here (scroll to the bottom): http://fabricjs.com/fabric-intro-part-5

When using alt + click for panning while the mouse hovers an object, the canvas is moved and the object is pushed, too. When the end of the canvas is reached, the object is moved even more.

I tried to deactivate all objects and save their current state and restore it after panning, but once the click is fired it's already too late. Preventing default did not work either.

At the moment I am using a workaround:
I am adding a DIV above the canvas, once the user presses the alt key, so the clicks do not reach the canvas.
That way the canvas can be panned easily. You can try it here (you need to zoom first: https://lettering.org/lettering-generator/)

I wonder what I can do to get the desired behaviour: When panning, all objects are locked and don't move a single pixel. :)

Any ideas? Thanks in advance!

[timoostrich]

Looks like this simple problem is harder than I thought.
Am I the only one who needs to look objects when panning (on mobile touch devices)?

[zhe-he]

move canvas

[lock canvas]:

const d = lockCanvas({
    down: () => {}, 
    move: () => {},
    up: () => {}
});

// dispose
// d();

function lockCanvas(o) {
    const { down, move, up } = o;
    const fn = (options) => {
            canvas._discardActiveObject();
            canvas["_target"] = undefined;
            const lastSelection = canvas.selection;
            canvas.selection = false;
            let target = options.target;
  
            let { x: startX, y: startY } = options.scenePoint;

            down({ x: startX, y: startY }, options);
            const mouseMove = (opt: TPointerEventInfo<TPointerEvent>) => {
                let { x, y } = opt.scenePoint;
                
                move({ startX, startY, x, y }, opt);
               canvas.requestRenderAll();
            };
            const mouseUp = (opt: TPointerEventInfo<TPointerEvent>) => {
                canvas.off("mouse:move", mouseMove);
                canvas.off("mouse:up", mouseUp);

                canvas.selection = lastSelection;
                let { x, y } = opt.scenePoint;
                up({ startX, startY, x, y }, opt);
            };
            canvas.on("mouse:move", mouseMove);
            canvas.on("mouse:up", mouseUp);
        });
    }

canvas.on("mouse:down:before", fn);
return () => {
    canvas.off("mouse:down:before", fn)
}