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:
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