[Bug]: Render white space between paper and scroller

[VictorPulzz]

Current versus expected behaviour

I get strange bug. I got white empty space when I render paper without any elements

Steps to reproduce

Check my code:

export function createScrollerBuilder(paper: dia.Paper, paperElement: Element): ui.PaperScroller {
  const scroller = new ui.PaperScroller({
    paper,
    scrollWhileDragging: true,
    padding: 0,
    baseWidth: 1000,
    baseHeight: 1000,
  });

  paperElement.appendChild(scroller.el);
  scroller.render().center();

  return scroller;
}



export function createPaperBuilder(graph: dia.Graph, namespace: unknown): dia.Paper {
  return new dia.Paper({
    cellViewNamespace: namespace,
    model: graph,
    async: true,
    width: PAPER_SIZE,
    height: PAPER_SIZE,
    sorting: dia.Paper.sorting.APPROX,
    gridSize: GRID_SIZE,
    drawGrid: {
      name: 'dot',
      color: PAPER_GRID_COLOR,
      thickness: 1,
    },
    interactive: PAPER_INTERACTIVE,
    background: {
      color: PAPER_BACKGROUND,
    },
    linkPinning: false,
    multiLinks: false,
    snapLinks: {
      radius: 10,
    },
    markAvailable: true,
    snapLabels: false,
    clickThreshold: 10,
    moveThreshold: 5,
    defaultLink: () => defaultLink,
    defaultAnchor: {
      name: 'perpendicular',
    },
    defaultConnectionPoint: {
      name: 'boundary',
      args: {
        offset: 2,
        sticky: true,
      },
    },
    defaultRouter: {
      name: 'manhattan',
      args: {
        padding: { vertical: 10, horizontal: 10 },
        step: GRID_SIZE,
      },
    },
    defaultConnector: {
      name: 'straight',
      args: {
        cornerType: 'cubic',
      },
    },
  })
}

Version

4.1.1

What browsers are you seeing the problem on?

Chrome

What operating system are you seeing the problem on?

Mac

[kumilingus]

Please provide steps to reproduce. I've tried your code and I see no issue.

[VictorPulzz]

Hellp @kumilingus maybe I'm doing something wrong. As I imagined the work I have a paper that has a grid like in figma, then I connect scroller to it and the whole paper starts to move within its block. But in the example, the scroller does not appear https://codepen.io/VictorPulzz/pen/RNPzrbo?editors=1010.

[VictorPulzz]

Locally I have scroll appears, But when rendering the panel or I let's say I moved maximally to the left and start zooming and make it smaller, I get a white empty space

[VictorPulzz]

@kumilingus Here simple example: https://github.com/VictorPulzz/jointjs-issue-with-scroll when I scroll all the way to the left and start zooming, this happens :( The same thing happens when I render my cells close to the edge of the screen and use the method:

scroller.centerContent({ useModelGeometry: true });

[MartinKanera]

Hello, try using the borderless option on PaperScroller.

const scroller = new ui.PaperScroller({
        paper,
        scrollWhileDragging: true,
        padding: 0,
        baseWidth: PAPER_SIZE,
        baseHeight: PAPER_SIZE,
        contentOptions: {
            useModelGeometry: true
        },
        borderless: true // add this
    });

[VictorPulzz]

@MartinKanera , I would honestly hug you! Thank you for helping, I was struggling with this bug... God bless you 😆