Perspective XY container percent mode doesn't scale/position objects correctly

I try to draw some simple P&ID diagram in XY container with percent mode but as it shown in following, the object position calculate incorrectly.
I believe it is because the perspective calculate ans scale from top right corner of object instead of center.

Is there any trick to fix this problem?
Or is there any plan to fix this issue?

What happens when you design it on a large canvas, then scale it down?

Same as shown in gif.
For mobile I redesign a new page . But for desktop I need my drawing scale like vision between monitor range from 1600900 to 19201080.

They merge together when scale down and separating when scale up

I looks to me that the problem is related to the individual objects maintaining their aspect ratio. They would need to be allowed to distort to work in a pure percent-mode scaling in that container. You need another enclosing container to scale maintaining its aspect ratio, then the inner contents can scale without separating.

I don’t think this qualifies as a bug.

If you put in another container you will see similar problem.

(this response is assuming you have brought these over from Symbol Factory, which it appears you have)

As @pturmel suggested, the problem you’re encountering is that the individual pieces a re attempting to preserve their aspect ratio, which means that they well position themselves and scale according to the setting you have selected for them which by default is xMidYMid. This setting will preserve the aspect ratio of the symbol while using the smaller restrictive boundary as the “max” and the center of the component (mid/mid) as the center of the symbol.

In your video example, if you want the pieces to all remain connected while the screen size changes, you will need to set props.preserveAspectRatio to a value of none. The trade-off in removing the preservation of aspect ratio to maintain positional relevance is that the symbols will begin to stretch.

The “gaps” between my symbols are due to rounding differences while having symbols directly at one another’s edge. You should consider a bit of overlap to avoid these rounding errors.


Is there any way to achieve same result like vision relative mode with maintain aspect ratio check on?

Not with the current Symbols in Containers methodology. We have some major improvements to how users would complete this sort of View coming up in the near future, but it’s still wrapping up the design phase. Until the improvement is in place, I can’t think of a way to get symbols to stretch/scale as a View changes dimensions while also maintaining their aspect ratio.

1 Like