CODEWITHSUNDEEP
htmlsvgjointjs
JohnnyD
JohnnyD

Reputation: 477

JointJS diagram drawn in hidden div has wrong scale

I'm rendering a JointJS diagram in a div with visibility hidden. When I set the visibility to visible the shapes in the diagram are massive.

I can see in the code that each node is being scaled by calling:

box = this.node.getBBox()

But this is returning an empty object (presumably because the node is hidden). The width/height are then defaulted to zero. Later on the node is being scaled as follows:

scalable.attr('transform', 'scale(' + (size.width / (scalableBbox.width || 1)) + ',' + (size.height / (scalableBbox.height || 1)) + ')');

Since the returned scalableBbox has width 0 the result of (size.width / (scalableBbox.width || 1)) is the width and the node is therefore scaled to its width * width / 1. The same happens for the height.

This seems wrong!

Is there any way to render a JointJS diagram in an invisible div or is there a way to redraw the diagram once the div becomes visible?

Upvotes: 2

Views: 344

Answers (1)

devoups
devoups

Reputation: 107

You can remove the scalable class from your element shape to avoid this issue.

The scale feature is only used during resize: documentation

You can define your own shape without scalable element: tutorial

Upvotes: 1

Related Questions