Node has two shapes but resize feature is working for first shape only

GoJS
1

My node contains two shapes, each designed using geometry string.
I have assigned resize property to the node.
When I try to resize the node only first shape is getting resized.

FYI:
multiple shapes are used inside the node so that we can gain the control of each shape independently.
Example: first shape can be filled with RED and second with GREEN.

2

I assume you have read the section about the ResizingTool in GoJS Tools -- Northwoods Software.

The ResizingTool can only resize one GraphObject at a time. However that object can be arbitrarily complex, because it can be a Panel containing as many Shapes or TextBlocks or nested Panels that you like.

For example, in the Draggable Link sample, the node template specifies the Part.resizeObjectName to refer to an Auto Panel containing a Shape that surrounds a TextBlock.

So you should put the RED and the GREEN Shapes inside a Panel. What kind of Panel depends on what kind of relationship you want the Shapes to have relative to each other. Read about the kinds of Panels at GoJS Panels -- Northwoods Software.

3

Hi,
I can color independently. My problem is resizing the individual shapes.
Lets take an example.
In the example : GoJS Panels -- Northwoods Software
I assigned resize property to the panel.
When I tries to resize the panel only one rectangle in side the node is getting resized.
My requirement is to resize all the rectangles inside that node.

4

Which example did you modify in GoJS Panels -- Northwoods Software ?

For example, when I add { resizable: true } to this example:

  diagram.add(
    $(go.Part, go.Panel.Horizontal,  // or "Horizontal"
      { resizable: true },
      { position: new go.Point(0, 0), background: "lightgray" },
      $(go.Shape, { width: 30, fill: "lightgreen", height: 100 }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Top }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Center }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Bottom }),
      $(go.Shape, { width: 30, fill: "lightgreen", stretch: go.GraphObject.Fill })
    ));

One can resize the Panel easily, and all elements with vertical stretch have their heights automatically resized. (Resizing horizontally is not supposed to modify the widths of any elements of a “Vertical” Panel.)

Note that elements that are not supposed to stretch vertically have their heights remain fixed, as expected.

5

Hi,
I referred same example.
I need your help in adjusting the height and width as the element is resized.
I tried the example by setting height = NaN and width = NaN but the rectangle size remained fixed.

6

The values of GraphObject.width and GraphObject.height are the respective properties of the GraphObject.desiredSize.

GraphObject.desiredSize defaults to NaN x NaN. If you don’t set or bind the desiredSize or width or height, and if you don’t otherwise constrain them, the width and height of a Shape will default to 100 x 100. That’s big enough to be obvious so that you know that you need to set or bind it, if you care.

Anyway, I have no idea of what you are doing and what you want to try to do. I can’t help you if you don’t provide concise but complete descriptions of your code, what results you are getting, and what differences you would like.

7

Hi,
got the solution.
I need to add “stretch: go.GraphObject.Fill” for all the shapes.

Thanks for your help