[Bug]: ui.Navigator doesn't respect provided size

[Alexander Nestorov]

What happened?

I have an ui.Navigator instance with the following configuration:

new ui.Navigator({
    width: 150,
    height: 100,
    padding: 0,
    zoomOptions: {
      max: 2,
      min: 0.2,
    },
});

and I'd expect the following things to happen:

1. The .joint-navigator element should have width: 150px, height: 100px and padding: 0px
2. The .joint-navigator > .joint-paper element should have width: 150px and height: 100px

But this is not the case.

The .joint-navigator always has width: 150px and height: 100px (good). But if I:

• zoom out all the way to 0.2, the .joint-navigator > .joint-paper element has width: 150px and height: 73px.
• zoom in all the way to 2.0, the .joint-navigator > .joint-paper element has width: 118px and height: 100px.

So there is some sort of relation between the zoom level of the PaperScroller and the size of the .joint-navigator > .joint-paper element.

I'm not sure if this is an actual bug on an undocumented behaviour. Anyhow, is there a way I can force the .joint-navigator > .joint-paper element to always have the size I specified in the constructor options?

Version

3.6.1

What browsers are you seeing the problem on?

Chrome, Safari

What operating system are you seeing the problem on?

Mac

[Roman Bruckner]

Hi @alexandernst, could you please provide steps to reproduce?
I am looking at the KitchenSink and don't see anything as descibed.

[Alexander Nestorov]

Sure, give me ~15min

[Alexander Nestorov]

I managed to create a simple demo that reproduces the size bug: https://codesandbox.io/s/rappid-navigator-bug-jj5x8q?file=/src/index.js . The size of the .joint-navigator is width: 150px and height: 100px, but the size of the .joint-navigator > .joint-paper is width: 100px and height: 100px.

I'm having trouble creating a demo that reproduces the bug that happens when I zoom in / out. I think I might need a little bit more time to create a demo that reproduces it.

Just in case this helps, I'm already debugging in my local, and I found out this:

The Navigator subscribes to the resize event.

... and when a resize happens, it updates the size of the minimap:

The size itself is calculated based on the ratio of the size of the source paper and the size of the navigator (the size that was provided in the constructor options).

---

I also noticed that the Navigator demo exposes this same bug: https://resources.jointjs.com/docs/rappid/v3.6/ui.Navigator.html

Notice how the .joint-navigator has width: 300px; height: 200px; padding: 10px;, but the .joint-navigator > .joint-paper has width: 280px; height: 168px;. Taking into account the padding (10px), the size of .joint-navigator > .joint-paper should be width: 280px, height: 180px.

[Roman Bruckner]

The size of the paper inside of the navigator is driven by the paper inside the paper scroller. In the example from documentation:

• the main paper has size 800 x 240.
• the paper inside the navigator is 280 x 84.
• the ratio of the width of the main paper and the navigator paper is 800 / 240 = 2.857142857142857
• so the ratio of the height: 240 / 84 = 2.857142857142857
• that means the both papers have the same ratio of sides
• that also means that the paper navigator is just uniformly scaled down to fit within the navigator size 300 x 200 or 280 x 180 respectively if you deduct the padding

I don't see anything wrong here either.

[Alexander Nestorov]

Oh, I see. Hmm 🤔 but then the width and height constructor options are named in a confusing way. They act as maxWidth and maxHeight.

My confusion happens because I was expecting the "rendered area" of the navigator to always have the width and height I specified in the constructor options. This would allow me to style it with a border and put it "on top" of other navigators, creating a stacked effect (check example).

But because of how the navigator is currently sized this is not possible because the .joint-navigator element is bigger than the .joint-navigator > .joint-paper element, which creates a "non-navigable" white space (marked in yellow):

Is there a way I can "force" the .joint-navigator > .joint-paper to cover the entire size of the navigator element instead of keeping the ratio of the paper?

[Roman Bruckner]

Well, it's not paperWidth and paperHeight. It's width and height of the navigator - the container for a miniature of the paper.

If you don't want the "non-navigable" white space there, you have 3 options:

1. hide the border of the navigator paper in CSS
2. make sure that the main paper width and height ratio and the navigator one is the same. use no navigator padding.
3. use useContentBBox navigator option

[Alexander Nestorov]

Oh, I see. I think this will work for my use case! Thank you :)