Auto Resize My Node


i have a node, i want to auto resize node when user type a large name for that.
here is my template :

        GD(go.Node, "Auto", nodeStyle(),
                selectionAdorned: true
            GD(go.Shape, "RoundedRectangle",
                    name: "NodeShape",
                    fill: GD(go.Brush, "Linear", { 0: diagramStyle.SubProcessNode_GradiantColor1, 1: diagramStyle.SubProcessNode_GradiantColor2 }),
                    strokeWidth: diagramStyle.SubProcessNode_BorderWidth, stroke: diagramStyle.SubProcessNode_BorderColor,
                    height: diagramStyle.SubProcessNode_Height                   
                new go.Binding("figure", "figure")),
            GD(go.Panel, "Horizontal",
                GD(go.Panel, "Table",
                        maxSize: new go.Size(diagramStyle.SubProcessNode_MaxWidth, NaN),
                        minSize: new go.Size(diagramStyle.SubProcessNode_MinWidth, NaN),
                        margin: new go.Margin(
                        defaultAlignment: go.Spot.Right
                    GD(go.TextBlock, taskTextStyle(),
                            wrap: go.TextBlock.WrapFit,
                            editable: true,
                            minSize: new go.Size(10, 16)
                        new go.Binding("text").makeTwoWay()),
                            cursor: "pointer",
                            source: diagramStyle.SubProcessNodeIcon_Src,
                            background: "transparent",
                            desiredSize: new go.Size(24, 24),
                            margin: new go.Margin(
                            click: openPropDialog

            // four named ports, one on each side:
            makePort("T", go.Spot.Top, go.Spot.TopSide, true, true),
            makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
            makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
            makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, true)

now when i’m typing large name, rectangle not resize and text display over my icon

i want to be like this :


I cannot read your unformatted code, so I do not know how your node is defined. Please read Code Formatting

Your node should be structured like:

Node, "Auto"
    Panel, "Table"
        TextBlock, column: 0, maxSize: new go.Size(100, NaN)
        Picture, column: 1
    ... ports


i correct my code formatting,
can u correct my code? i want to create node like second picture.


Thanks. Just change your node template to be what I outlined.


i’m really sorry but i did not understand what exactly to change,
i’m new in gojs :(


You can see that your current node template is structured as:

Node, "Auto"
    Panel, "Horizontal"
        Panel, "Table"
    ... ports

The “Horizontal” Panel isn’t accomplishing anything, so I suggest removing it. You need to set maximum size for the TextBlock, and you need to set the column for the Picture.


i change that, text did not display over picture,
but only show three line on my text and my shape and node did not resize and like overflow hidden did show continuation of text


If you want to set the height for your nodes, you need to set that on the Node, not on the Shape.


I want my height automaticly increse when my text is large text and wrap to multiple lines



Then you should remove the height setting on the Shape or any Panel.


When i remove height from my shape my default height is too high, i want my default height be specify size and when text grow height grow

I want default height be like below pic and grow when text grow


Well, something that you have set (or bound) is causing that to happen. I have no way of telling what you have done.


Try this template:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", { fill: "beige", stroke: "gray" }),
        $(go.Panel, "Table",
          { margin: 6 },
            { column: 0, minSize: new go.Size(50, NaN), maxSize: new go.Size(100, NaN),
              textAlign: "center", margin: new go.Margin(0, 4, 0, 0), editable: true },
            new go.Binding("text").makeTwoWay()),
          $(go.Shape, // or go.Picture
            { column: 1, width: 24, height: 24 })

For example: