paper.getFitToContentArea() is not returning correct values with TreeLayoutView

[pfalcon64]

Introduction

I have adapted the orgChart sample. The paperScroller doesn't behave as I'd like, so I modified it to work with just the paper class. The only fiddly bit was that I had to apply:

        this.paper.transformToFitContent({
            padding: {
                top: 16,
                bottom: 16,
                left: 16,
                right: 16
            },
            useModelGeometry: true,
            verticalAlign: 'top',
            horizontalAlign: 'left',
            scaleGrid: 1
        });

When all drawing was done so it recentred the content on the paper. The result is what I wanted to see:

I have a resize event on my (angular) component which is triggered when the user resizes the browser. While most users operate full screen, they will frequently play with the zooming levels with this tool to see less/more text on screen. As such I have to respond to events and reformat my content accordingly.

The Paper class has an event tailored for this which I adapted as follows:

                const _Size = this.paper.getFitToContentArea({
                    padding: {
                        top: 16,
                        bottom: 16,
                        left: 16,
                        right: 16
                    },
                    useModelGeometry: true
                });

                _Size.height = Math.max(_Size.height, window.innerHeight - 124 - this.getScrollbarWidth());
                _Size.width = Math.max(_Size.width, $('#MainGridParent').width() - this.getScrollbarWidth());
                this.paper.setDimensions(_Size.width, _Size.height);

The seems to work as designed, but there are two edge cases with the TreeLayoutView that are wrong. The first is when the browser is too narrow:

Notice that my code requested a 16px padding on the right - but this is ignored by the dimensions returned by getFitToContentArea().

Similarly when I make the window height smaller:

The scrollbar does not appear until I clip the middle of the tree. I checked the height returned - and it reflects the middle of the chart, not the bottom! This sample is trivial, but my intention is to load some large trees into this view, where the height calculation will be a real problem if its not correct.

I can manually handle the padding problem, but the height calculation is a problem. Is this a bug, or should I be using a different function to calculate the paper size?

Steps to reproduce

1- Rework the orgChart demo to operate without a PaperScroller.

2- call paper.getFitToContentArea() to get the dimensions of the content (include passing in the parameters.

Restrictions & Constraints

No response

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

JointJS+

[kumilingus]

Notice that my code requested a 16px padding on the right - but this is ignored by the dimensions returned by getFitToContentArea().

You need to use the allowNewOrigin: any if you want the origin be other than 0,0. e.g. If your content starts at 5,5 your padding is 16, the new origin (top-left paper corner) should be -9,-9.

I can manually handle the padding problem, but the height calculation is a problem. Is this a bug, or should I be using a different function to calculate the paper size?

The problem may be that in the first step you change the paper transformation (using transformToFitContent()) and when you resize the window you only change the paper size to its content, but do not account for any transformation (especially translate).

Could you try without transforming the paper first (without calling the transformToFit())?

[pfalcon64]

Thanks, that did the trick!

      const _Size = this.paper.getFitToContentArea({
        padding: {
            top: 16,
            bottom: 16,
            left: 16,
            right: 16
        },
        allowNewOrigin: 'any',
        useModelGeometry: true
    });

With the allowNewOrigin: 'any' in place, both of the reported issues go away! Thanks