Multiple Viewports

[VedankNaik]

I've implemented Multiple Viewports sample. Is it possible to add more than 2 viewports?
I want 4 viewports in this arrangement

[pmconne]

The @itwin/core-frontend package supports any number of viewports in any arrangement. e.g., in addition to a grid, you could have viewports floating on top of other viewports, at opposite corners of the page, or whatever else you want.
@NancyMcCallB and/or @bsteinbk can tell you what constraints the ui packages place upon that freedom.

[VedankNaik]

Yes similar to sample which synchronizes 2 viewports I wanted to sync other viewports too.

[pmconne]

It should be very easy for you to modify the 2-way sync to sync 4 viewports instead.

[VedankNaik]

Following Multiple Viewports sample I tried the following changes in sync part of code:
public static connectViewports(selectedVp: Viewport, unselectedVp: Viewport[]) { const [vp1, vp2] = [unselectedVp[0], unselectedVp[1]]; MultiViewportApi.twoWaySync.connect(selectedVp, vp1); MultiViewportApi.twoWaySync.connect(selectedVp, vp2); }

selectedVp contains viewport which is currently selected by user, vp1 and vp2 contains other viewports. This still syncs two viewports for me. Am I doing it wrong?

[pmconne]

You are using TwoWayViewportSync, which only syncs 2 viewports. If you call connect repeatedly, it severs the previous connection.

Look at the implementation of TwoWayViewportSync. It sets up event listeners such that whenever a change occurs in one viewport, the same change gets propagated to the other viewport.
You need to write something very similar. The difference is that whenever a change occurs in one viewport, it must be propagated to the 3 other viewports. Most of the code would remain the same.

Really, TwoWayViewportSync could be generalized and replaced with a MultiViewportSync API accepting a list of 2 or more viewports. If you have success, that would be a nice PR.

[pmconne]

Multi-viewport synchronization added in #3614.

[VedankNaik]

Thanks for the update @pmconne.

How do I display different models in different viewports? Currently all viewports are displaying same connection. How do I establish connection with different models?

[pmconne]

DIfferent iModels or different models?
I can tell you how to do either using the APIs in @itwin/core-frontend, that's easy.
I suspect you are asking how to do it using the ui packages, which I cannot help with.
Please post a new, more specific question with relevant code etc.

[VedankNaik]

Ok I'll post new question. Can you tell me what is difference between imodel and model?

Thanks.

[pmconne]

An iModel is comprised of many models.
A model is comprised of many elements.