Veritcal panel not resize

@ahmetgundogdu wrote:

Hello,
my node template:

    this.diagram.nodeTemplateMap.add("",
        goMake(go.Node, "Spot",
            {
                locationObjectName: "Shape",
                locationSpot: go.Spot.Center,
                selectable: true,
                selectionAdornmentTemplate: this.nodeSelectionAdornmentTemplate,
                selectionObjectName: "Shape",
                resizeObjectName: "Shape",
                rotateObjectName: "Shape",
                resizeAdornmentTemplate: this.nodeResizeAdornmentTemplate,
                resizable: this.props.config.nodeConfig.resizable,
                rotatable: true,
                rotateAdornmentTemplate: this.nodeRotateAdornmentTemplate,
            },
            new go.Binding("location", "", this.bindShapeLocation).makeTwoWay(this.converterShapeLocation),
            new go.Binding("isActionable", "", this.bindShapeLock).makeTwoWay(),
            goMake(go.Panel, "Auto",
                goMake(go.Panel, "Vertical",
                    {
                        //defaultStretch: go.GraphObject.Horizontal,
                        fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides,
                        portId: "",
                        fromLinkable: true,
                        fromLinkableSelfNode: true,
                        fromLinkableDuplicates: true,
                        toLinkable: true,
                        toLinkableSelfNode: true,
                        toLinkableDuplicates: true,
                    },
                    goMake(go.Panel, "Viewbox", {
                        name: "Shape",
                        _isGuideObject: true,

                    },
                        new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize),
                        new go.Binding("angle", "", this.bindShapeAngle).makeTwoWay(this.converterShapeAngle),
                        goMake(go.Panel, "Position",
                            {
                                itemTemplate:
                                    goMake(go.Panel,
                                        goMake(go.Shape, "RoundedRectangle",
                                            {
                                                fill: "transparent",
                                                isGeometryPositioned: true,
                                                //geometryStretch: go.GraphObject.Fill,
                                            },
                                            new go.Binding("stroke", "", this.bindPanelItemBorderColor.bind(this)).makeTwoWay(),
                                            new go.Binding("fill", "", this.bindPanelItemColor.bind(this)).makeTwoWay(),
                                            new go.Binding("geometry", "", this.bindShapeGeometry.bind(this)),
                                            new go.Binding("strokeWidth", "", this.bindPanelItemBorderThickness.bind(this)),
                                            //new go.Binding("angle", "", this.bindPanelItemRotate.bind(this)),
                                            new go.Binding("strokeDashArray", "", this.bindPanelItemBorderType.bind(this)).makeTwoWay(),
                                        )
                                    )
                            },
                            new go.Binding("itemArray", "", this.bindPanelItemArray.bind(this))
                        )
                    ),
                    goMake(go.TextBlock,
                        {
                            name: "textBlock",
                            editable: true,  // editing the text automatically updates the model data
                            cursor: "move",  // visual hint that the user can do something with this node label
                            //margin: new go.Margin(5, 10, 5, 10),
                        },
                        new go.Binding("text", "", this.bindShapeText).makeTwoWay(this.converterShapeText),
                        new go.Binding("stroke", "", this.bindShapeTextColor).makeTwoWay(),
                        new go.Binding("font", "", this.bindShapeTextFont).makeTwoWay(),
                        new go.Binding("isUnderline", "", this.bindShapeTextUnderline).makeTwoWay(),
                        new go.Binding("background", "", this.bindShapeTextBackgroundColor).makeTwoWay(),
                        new go.Binding("angle", "", this.bindShapeTextAngle).makeTwoWay(),
                        new go.Binding("textAlign", "", this.bindShapeTextAlignment).makeTwoWay(),
                    ),
                ),
                goMake(go.Shape,  // provide interior area where the user can grab the node
                    {
                        //_isGuideObject: true,
                        fill: "transparent",
                        stroke: "smokewihte",
                        opacity: 0,
                        cursor: "move",
                        position: new go.Point(0, 0),
                        click: function (e: any, obj: go.Shape) {
                            obj.part.rotateAdornmentTemplate.visible = true;
                            if (obj.diagram.lastInput.shift) {
                                obj.cursor = "pointer";
                            }
                        },
                        mouseEnter: function (e: any, obj: go.Shape) {
                            if (obj.diagram.lastInput.shift) {
                                obj.diagram.currentCursor = "pointer";
                            }
                            else if (!obj.diagram.lastInput.control) {
                                obj.fill = "white";
                                obj.opacity = 0.2;
                                obj.cursor = "move";
                            }
                        },
                        mouseLeave: function (e: any, obj: go.Shape) { obj.opacity = 0; obj.cursor = "pointer"; },

                    },
                    new go.Binding("desiredSize", "", (sourceData: IFlowItemBase) => {
                        return new go.Size(sourceData.nodeConfig.size.width - (sourceData.nodeConfig.size.width / 2), sourceData.nodeConfig.size.height - (sourceData.nodeConfig.size.height / 2))
                    }).makeTwoWay(),
                )
            ),
        )
    );

the resulting image:

error_textblocks.png933x644 23.3 KB

I want the text boxes to be single line and the vertical panel to expand according to the box.

I tried a few methods and values but didn’t succeed

Posts: 4

Participants: 2

Read full topic