How to implement scroll?

[lanyusan]

Let's say I have a canvas with a fixed size of the screen and some nodes that when fulled rendered would run out of the canvas.

How do I measure the fully rendered size so I can custom place scroll bars with proportional size and location?

Or is there a better way / Konva way to implement scroll bar?

Thanks in advance.

Edit: I have checked the scrollbar samples, which all have fixed fully rendered size. My case here is that new nodes might be added by users.

[lavrton]

Did you check this demo https://konvajs.org/docs/sandbox/Canvas_Scrolling.html#page-title ?

[lanyusan]

Yes I did. If my understanding is correct, the size of the canvas that can hold all the nodes must be known in advance, according to the examples.

My case is that the size is NOT known in advance.

Or rather, I posted this question to Pixi, which would give a bigger picture of my use case. I would appreciate if you can help on this.

I am evaluating canvas libraries for a project to implement some sort of virtual canvas with endless size both vertical and horizontal.

I am asking if pixi Konva has some best practices or built in mechanisms to support it.

Basically it is a virtual canvas with its own coordinate system and it could grow vertically and also horizontally endlessly. The actual screen is considered a sliding window to display a portion of the virtual canvas. A sliding window position, size and scale data structure would be maintained to decide what of the virtual canvas would be mapped to physical canvas and rendered.

Is there a best practice or Pixi Konva way to do it and to make scrolling performant?

Apology if it is too generic and conceptual. If you are familiar with Figma, basically the idea is the same to Figma's canvas, which could be extended endlessly by further scrolling when it reaches edges or dragging canvas objects further towards edges.

Thanks in advance.

[lavrton]

All of this is possible with Konva. Konva is just drawing shapes. And it is up to you to define positions and logic for these shapes. So, you need to use a power of math to calculate bounding boxes, define some possible limits, set scaling, etc. Konva is not doing that work automatically.

[lanyusan]

Yes I figured that my app should recalculate overall bonding box when a shape is added / removed / rotated/ scaled.