Scroll to the first element in a (Autoscrollable : true) paper.

[jibinjoy8897]

Introduction

We have used directLayout and autoResize:true for graph.(graph only has positive coordinates allowNewOrigin: 'positive')
We have used diagram save positions as per user input.

Query:
Suppose if user changes the element positions and again regenerates diagram with saved positions.I want to scroll to the first element that appears on scroll from (0,0).

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

You can find the most top-left point of your graph and tell the paper scroller to position this point to its top-left corner.

const graphTopLeftPoint = graph.getBBox().topLeft();
paperScroller.positionPoint(graphTopLeftPoint, 0, 0, { padding: 20 });

[kumilingus]

I don't understand. Perhaps sharing some pictures will help.

[jibinjoy8897]

Please refer the gif.I am saving the table node positions and opening the ER diagram again to see my saved diagram. Even after the changing the position of the $case table.The scroll still remains in its constant position after rerender.
Expected behaviour : Scroll to show the first element ($case table) on initial render of paper.

[kumilingus]

Please provide the exact steps to reproduce (in case of Kitchen Sink for instance).
It seems like you not calling the code provided, or calling it at wrong moment, or reset the scroll position later in the code.
The code provided can be called anytime and it scroll to the top-left most element (you can add a button that calls the code for testing purposes).

[jibinjoy8897]

Please refer code given below:
// Paper settings

const paper = new dia.Paper({
model: graph,
gridSize: 5,
interactive: { addLinkFromMagnet: false },
defaultConnector: {
name: 'straight',
args: { cornerType: 'line', cornerPreserveAspectRatio: true }, // bevelled path
},
async: true,
frozen: true,
sorting: dia.Paper.sorting.APPROX,
cellViewNamespace: shapes,
routerNamespace: routerNamespace,
defaultRouter: {
name: 'rightAngle',
},
anchorNamespace: anchorNamespace,
defaultAnchor: { name: 'customAnchor' },
snapLinks: true,
linkPinning: false,
magnetThreshold: 'onleave',
highlighting: {
connecting: {
name: 'addClass',
options: {
className: 'column-connected',
},
},
},
defaultLink: () => new SolidLink(),
validateConnection: function (srcView, srcMagnet, tgtView, tgtMagnet) {
return srcMagnet !== tgtMagnet;
},
});

// Paper Scroller settings

class MyPaperScroller extends ui.PaperScroller {
computeRequiredPadding(...args) {
const { right, bottom } = super.computeRequiredPadding(...args);
return {
left: 0,
top: 0,
right,
bottom,
};
}
}

const scroller = new MyPaperScroller({
  paper: paper,
  autoResizePaper: true,
  scrollWhileDragging: true,
  cursor: 'grab',
  padding: 0,
  contentOptions: {
    allowNewOrigin: false,
  },
});

// Scroll and display settings

const graphTopLeftPoint = graph.getBBox().topLeft();
scroller.positionPoint(graphTopLeftPoint, 0, 0, { padding: 0 });
document.querySelector('.paper-container').append(scroller.render().el);

In current code i have also added save position of nodes in any positive co-ordinate.
I think change need to be done on this line [ const graphTopLeftPoint = graph.getBBox().topLeft();]

Query:
My requirement is not simply to get the scroll to view the top left part of graph.getBBox().
It needs to check whether there are elements present in view port of the top left part of graph.getBBox(),if not move scroll to the closest element from that position.

[kumilingus]

In HTML, you can not set scrollbar first and then append the element. Try to append the scroller first and then set the scrollbar position.

Also please learn how to write markdown on GitHub. It's very hard to read you questions. Thank you.