DirectGraph Layout not starting from origin(0,0) in autoResize:true ,borderless:true paperScroller

[jibinjoy8897]

Introduction

My current paper scroller settings
const scroller = new ui.PaperScroller({
paper,
cursor: 'grab',
inertia: { friction: 0.8 },
borderless: true,
autoResizePaper: true,
contentOptions: function () {
return {
useModelGeometry: true,
allowNewOrigin: 'positive',
};
},
});

Directed Graph

layout.DirectedGraph.layout(graph, {
graphlib: dagre.graphlib,
dagre: dagre,
setVertices: true,
rankDir: 'TB',
marginX: 100,
marginY: 100,
});

In this scenario,my diagram starts from a large offset from top and left (0,0).The customer wants it starting almost near 0,0(origin).Please suggest solution for the same.

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS+

[kumilingus]

Set marginX: 0 and marginY: 0.

[kumilingus]

Are you referring to the viewport <g/> transformation or the paper scroller padding this time?

[jibinjoy8897]

g tag.Paper scroller paper padding is fixed.Svg tag starts from 0,0 and is working perfectly

[kumilingus]

You can not use the borderless option if you don't want the paper to extend beyond the 0,0 origin.

[jibinjoy8897]

I do not want to paper to extend beyond (0,0).I just want my directedLayout to start near 0,0 without offset.Can you suggest a way to avoid the offset between svg and g tag?

[kumilingus]

I just told you.

You can not use the borderless option if you don't want the paper to extend beyond the 0,0 origin.

---

Here's an example:

const paperScroller = new ui.PaperScroller({
    paper,
    baseWidth: 1000,
    baseHeight: 1000,
    autoResizePaper: true,
    contentOptions: {
        // @ts-ignore to be fixed in the next version
        allowNewOrigin: false,
    }
});

DirectedGraph.layout(graph, {
    marginX: 0,
    marginY: 0
});

[jibinjoy8897]

I have implemented your code given above and the image shows the result.The svg is perfect and starts from 0,0(confirmed it by elements not able to move to the negative coordinates ie the grey area (paper scroller)outside the svg tag.

Issue:
In the image the scrolls have more space to the left and top to move.
How to align this paper(svg) to the paperScroller(grey area) with 0,0 (origin) and so that the scroll starts from the extreme top and left indicating the left most part of the paper is reached.

[kumilingus]

Unfortunately, I had no idea how to reproduce this. What "grouping tables" means.

[jibinjoy8897]

Grouping tables means dragging the tables from the right part of the extended canvas to the left ,just for trying to make the paper shrink in size.Please suggest a way to handle scroll jump in this scenario.

[jibinjoy8897]

Please see the gif after your code suggestion.Scroll Jumping can we seen when paper is shrinking.

[kumilingus]

Perhaps you can redefine the computeRequiredPadding() as follows:

class MyPaperScroller extends joint.ui.PaperScroller {

    computeRequiredPadding(...args) {
        const { right, bottom } = super.computeRequiredPadding(...args);
        return {
            left: 0,
            top: 0,
            right,
            bottom
        }
    }
}

[jibinjoy8897]

Scroll Jumping on the right is fixed after code change.But paper is not resizing properly in the bottom as shown in Gif

[kumilingus]

I am not able to reproduce this. Could you provide steps how to reproduce this in the Kitchen Sink application?

[jibinjoy8897]

Add restrictTranslate: true, in paper Options.The paper is not autoResizing after that

[kumilingus]

Yes, that is expected. If you set restrictTranslate to true, it will not allow elements to cross the paper boundary and therefore the paper size will not change.

You need to set the restrictTranslate as a function and only restrict the minus coordinates.