paper.fitToContent and baseWidth do not work as expected

[mwanagosos]

I'm using JointJS+ 3.5.
I have a paper that's very big.

new dia.Paper({
  width: 6000,
  height: 6000,
  // ...
});

I want to make it a lot smaller

new dia.Paper({
  width: 150,
  height: 150,
  // ...
});

and implement

this.app.paperScroller = new ui.PaperScroller({
  autoResizePaper: true,
  scrollWhileDragging: true,
  baseHeight: 1500,
  baseWidth: 1500,
  // ...
});

on the paper scroller with autoResizePaper and scrollWhileDragging.

I want the initial size of the graph to be 1500x1500. When an element is dragged outside of the paper, I want it to stretch by 150 only.
Unfortunately, it dragging an element outside of a paper makes it bigger by 1500 instead.
It happens even though the documentation states to use baseWidth and baseHeight if we want to auto-resize the paper by a value different that the width and height set in the Paper constructor.

Also, I have a lot of old JSON files with exported graphs. I still want to support them.
I'm doing

paper.fitToContent();

to crop the paper on the graphs imported through graph.fromJSON.
It seems to work fine until I move one of the blocks or call paperScroller.zoomToFit(). As soon as I do that, paper becomes very big again and paper.fitToContent() gets reverted.

Is there something I'm missing?

[kumilingus]

The PaperScroller view calls paper.fitToContent() internally. You can control the resizing with contentOptions option.

new ui.PaperScroller({

    // This is the size increment.
    // If one paper is not enough to cover the whole graph,
    // you lay more papers next to it until the whole graph fits. This one paper is the base.
    // Note: it's an equivalent of `gridWidth` and `gridHeight` of `fitToContent()` method
    baseWidth: 150,
    baseHeight: 150,

    contentOptions: {
        // This is the minimum paper size regardless of content size.
        minWidth: 1500,
        minHeight: 1500,
        
        /* ... any other option from fitToContent() */
    }
    
    /* ... any other option of PaperScroller */
});

[kumilingus]

The paperScroller never modifies the graph (positions of elements). It only changes the transformations (scale, translate) of the graph view i.e paper.

To move all cells to the middle of the current paper area use the code below.

const { x, y } =  paper.getArea().center().difference(graph.getBBox().center());
graph.translate(x, y);

[mwanagosos]

@kumilingus Thank you. This was the missing piece that helped me achieve the behavior I needed 👍

[mwanagosos]

By the way, I've been working on auto-resizing the paper to benefit more from having the Navigator.
Unfortunately, I've noticed a significant performance hit when using the Navigator with some of the bigger graphs. Is there a way to counter that?

[kumilingus]

@mwanagosos If the question is not related to #1680 please open a new discussion.

[mwanagosos]

I did that. Thanks a lot.