[Bug]: Erratic behavior of paper scroller when adjusting paper

What happened?

Hi everybody (Roman :) ),

So I am trying to use the paper scroller's autoResizePaper functionality and it "kinda" works but it seems to behave quite erratically. Here is a quick test file (set up for the Test case 3 from below it):

import { dia, shapes, ui } from '@clientio/rappid';

export default function init() {
    let el = document.getElementById('app');
    let paperEl = el.querySelector('.paper');
    let navigatorEl = el.querySelector('.navigator');

    let graph = new dia.Graph();
    let paper = new dia.Paper({
        async: true,
        gridSize: 10,
        drawGrid: {
            name: 'mesh',
            args: {
                color: '#eee'
            }
        },
        width: 2000,
        height: 1000,
        background: {
            color: '#fff'
        },
        sorting: dia.Paper.sorting.APPROX,
        model: graph,
    });
    let paperScroller = new ui.PaperScroller({
        autoResizePaper: true,
        scrollWhileDragging: true,
        baseWidth: 500,
        baseHeight: 200,
        contentOptions: {
            minWidth: 2000,
            minHeight: 1000,
            allowNewOrigin: 'any'
        },
        paper
    });

    paperEl.appendChild(paperScroller.el);
    paperScroller.render();
    
    let nav = new ui.Navigator({
        paperScroller,
        width: 300,
        height: 300,
        zoomOptions: { max: 2, min: 0.5 },
        padding: 20,
        paperOptions: {
            async: true
        }
    });
    
    navigatorEl.appendChild(nav.el);
    nav.render();

    let rectangle = new shapes.standard.Rectangle();
    rectangle.resize(220, 60);
    rectangle.position(50, 100);
    rectangle.attr('label/text', 'Rectangle');
    rectangle.attr('body/fill', 'lightblue');
    rectangle.addTo(graph);

    let circle = new shapes.standard.Circle();
    circle.resize(60, 60);
    circle.position(500, 100);
    circle.attr('label/text', 'Circle');
    circle.attr('body/fill', 'orange');
    circle.addTo(graph);
}

Case 1:
- paper size is 2000 x 2000, no sizes set on the paper scroller

Dragging the circle upwards to the top-edge of the paper moves it close to the center of the paper, below the rectangle.

- changing the paper size to 2000 x 1000
Kinda same result.

There seems to be a jump after the paper scroller adjust the paper which moves the visible area and that causes the element to appear at incorrect x/y.

Case 2:
- paper size is 2000 x 1000, paper scroller baseWidth and baseHeight are 2000 and 1000, so same as the paper
Jump still occurs. Seems like it is there always on first adjust.

Case 3:
- paper size is 2000 x 1000, paper scroller baseWidth: 500, baseHeight: 200, contentOptions: { minWidth: 2000, minHeight: 1000, allowNewOrigin: ‘any’ }

This is probably the worst case of these three. Huge jumps sometimes with big distances. Sometimes moving the element a bit puts it to turbo-speed. Sometimes I “lose” the circle from the navigator. Navigator doesn’t show the correct size.

E.g. these result can be produced imgur (pls excuse the circle label saying 'Rectangle', copy & paste & didn't realize)

Am I doing something wrong? Am I not setting something that should be set or setting something that should be set? I can't see anything very obvious and imho this setup should work.

Is this a bug on the paperscroller?

Version

jointjs+ 3.7

What browsers are you seeing the problem on?

Chrome

What operating system are you seeing the problem on?

Mac

Start with the ui.PaperScroller autoResizePaper behavior and its interaction with ui.Navigator, reproducing the provided three cases in Chrome using the test file from the issue. Compare paper size, scroll position, element coordinates, and navigator bounds while dragging; the bug is done when resizing causes no unexpected jumps or lost elements and the navigator remains accurate.