Resize multiple shapes in a node proportionally

GoJS
1

Hi I am having multiple shapes in a node for instance consider the example here, but unlike what is done there I want all the three circles to resize by the same amout just by resizing the node or panel.

I have also gone through this link, but here the problem is when you try to make a shape resizable by removing its height and width property then it grows to some random size and while resizing the node vertically it covers the whole height of the node. I don’t want that I need the shapes to remain of a particular size initially and when I try to resize the node then all of them should resize proportionally just like what happens in case of a single shape.

Please help me on that.

2

Use a “Viewbox” Panel.
http://gojs.net/latest/intro/panels.html

3

Hi Viewbox panel in working fine but there is one problem, the shapes are not resizing properly, now you have to stretch both width and height to resize the shape. I want that the shapes should resize even if the user stretches only width or height. As it happens if there is just one shape.

4

So are you resizing a Viewbix Panel containing your original Panel holding multiple Shapes?

Your description is very ambiguous – is there a reason you cannot include screenshots of before and after?

5

I am using the example used for Viewbox at http://gojs.net/latest/intro/panels.html3 and what is happening is this

Viewport.png680×521 16 KB

I want that the shape should resize when I stretch it horizontally or vertically so that there is no empty space. In the above example if you stretch both height and width then it works fine but doesn’t works good when you stretch either of them as shown in above image.

I am using this example

diagram.add(
$(go.Part, go.Panel.Viewbox, // or “Viewbox”
{ position: new go.Point(0, 0), background: “lightgray”,
width: 80, height: 80, resizable: true },
$(go.Panel, “Auto”,
$(go.Shape, “Ellipse”, { fill: “lightgreen” }),
$(go.Panel, “Vertical”,
$(go.Picture, { source: “images/120x160.png” }),
$(go.TextBlock, “a 120x160 kitten”)
)
)
));

6

What’s wrong with not using a Viewbox and just resizing the Auto Panel?

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          background: "lightgray",
          width: 80, height: 80, resizable: true
        },
        $(go.Shape, "Ellipse", { fill: "lightgreen" }),
        $(go.Panel, "Vertical",
          $(go.Picture, { source: "images/120x160.png" }),
          $(go.TextBlock, "a 120x160 kitten")
        )
     );