useMaxWidth flag doesn't really use the max width

[sidharthv96]

Description

These are the description and implementation of useMaxWidth.

When this flag is set to true, the height and width is set to 100% and is then scaled with the available space. If set to false, the absolute space required is used.

  if (useMaxWidth) {
    attrs.set('width', '100%');
    attrs.set('style', `max-width: ${width}px;`);
  } 

As we can see in the implementation, width is set as 100%, but an extra max-width attribute is added, which actually prevents the diagram from filling up the available space, as mentioned in the description.

Current implementation, where the diagram does not actually fill up the space.

After removing the max-width style.

If useMaxWidth = false, with viewport size smaller than the diagram.

So, useMaxWidth is mandatory for shrinking, but breaks growing (after the width of the diagram).

This could be the underlying reason for issues like this also.

Suggested Solutions

We need to handle this, maybe as a breaking change (by removing the max-width style), or by deprecating useMaxWidth, and adding a new responsive flag or something.

[knsv]

I think there are a few cases:

• You want the diagram not to be resized
• You want to use the existing space, limiting the size of the diagram to the constraints of the container.
• You don't want to resize the diagram unless it is bigger than the container. This is how useMaxWidth is supposed to work. When including diagrams on a web page/document this is a common preference.

I like the suggested responsive flag, let's call it 'scaling' with the legal values 'none', 'fit-container' and 'shrink-to-fit-container'.

I think the view box is set in inconsistent ways which could explain weird scaling for some diagrams.

[sidharthv96]

#5100 is another example. After I added the fix in #5102, the diagram will shrink only if the useMaxWidth is true.