Auto Resize My Node


#1

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

myDiagram.nodeTemplateMap.add("SubProc", 
        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(
                            diagramStyle.SubProcessNodeTable_MarginTop,
                            diagramStyle.SubProcessNodeTable_MarginRight,
                            diagramStyle.SubProcessNodeTable_MarginBottom,
                            diagramStyle.SubProcessNodeTable_MarginLeft),
                        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()),
                    GD(go.Picture,
                        {
                            cursor: "pointer",
                            source: diagramStyle.SubProcessNodeIcon_Src,
                            background: "transparent",
                            desiredSize: new go.Size(24, 24),
                            margin: new go.Margin(
                                diagramStyle.SubProcessNodeIcon_MarginTop,
                                diagramStyle.SubProcessNodeIcon_MarginRight,
                                diagramStyle.SubProcessNodeIcon_MarginBottom,
                                diagramStyle.SubProcessNodeIcon_MarginLeft),
                            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
Capture1

i want to be like this :
Capture3


#2

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"
    Shape
    Panel, "Table"
        TextBlock, column: 0, maxSize: new go.Size(100, NaN)
        Picture, column: 1
    ... ports

#3

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


#4

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


#5

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


#6

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

Node, "Auto"
    Shape
    Panel, "Horizontal"
        Panel, "Table"
            TextBlock
            Picture
    ... 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.


#7

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


#8

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


#9

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


#10


#11

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


#12

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


#13

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


#14

Try this template:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", { fill: "beige", stroke: "gray" }),
        $(go.Panel, "Table",
          { margin: 6 },
          $(go.TextBlock,
            { 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:
image