How can I make the shapes adjust to the text, so that if the text is long, the shape resizes to accommodate the new length?
provide: {
flowchart: (diagram: Diagram) => {
diagram.nodeTemplateMap.add(
'Start',
$(
Node,
'Table',
nodeStyle(),
$(
Panel,
'Auto',
$(
Shape,
'Circle',
{
fill: '#2EAF80',
stroke: '#2EAF80',
strokeWidth: 3.5
},
new Binding('figure', 'figure')
),
$(
TextBlock,
textStyleStart(),
{
margin: 8,
wrap: Wrap.Fit,
editable: false
},
new Binding('text').makeTwoWay()
)
),
makePort('T', Spot.Top, Spot.MiddleTop, true, false),
makePort('L', Spot.Left, Spot.MiddleLeft, true, false),
makePort('R', Spot.Right, Spot.MiddleRight, true, false),
makePort('B', Spot.Bottom, Spot.MiddleBottom, true, false)
)
);
diagram.nodeTemplateMap.add(
'Question',
$(
Node,
'Table',
nodeStyle(),
$(
Panel,
'Auto',
$(
Shape,
'RoundedRectangle',
{
fill: '#FFF',
stroke: '#005450',
strokeWidth: 3.5
},
new Binding('figure', 'figure')
),
$(
TextBlock,
textStyleRegular(),
{
margin: 8,
wrap: TextBlock.WrapFit,
editable: true
},
new Binding('text').makeTwoWay()
)
),
makePort('T', Spot.Top, Spot.MiddleTop, true, true),
makePort('L', Spot.Left, Spot.MiddleLeft, true, true),
makePort('R', Spot.Right, Spot.MiddleRight, true, true),
makePort('B', Spot.Bottom, Spot.MiddleBottom, true, true)
)
);
diagram.nodeTemplateMap.add(
'Option',
$(
Node,
'Table',
nodeStyle(),
$(
Panel,
'Auto',
$(
Shape,
'Capsule',
{
desiredSize: new Size(80, 40),
fill: '#FFF',
stroke: '#00AAA1',
strokeWidth: 3.5
},
new Binding('figure', 'figure')
),
$(
TextBlock,
textStyleRegular(),
{
margin: 8,
wrap: TextBlock.WrapFit,
editable: true
},
new Binding('text').makeTwoWay()
)
),
makePort('T', Spot.Top, Spot.MiddleTop, true, true),
makePort('L', Spot.Left, Spot.MiddleLeft, true, true),
makePort('R', Spot.Right, Spot.MiddleRight, true, true),
makePort('B', Spot.Bottom, Spot.MiddleBottom, true, true)
)
);
diagram.nodeTemplateMap.add(
'Message',
$(
Node,
'Table',
nodeStyle(),
$(
Panel,
'Auto',
$(
Shape,
'RoundedRectangle',
{
fill: '#FFF',
stroke: '#FFC776',
strokeWidth: 3.5
},
new Binding('figure', 'figure')
),
$(
TextBlock,
textStyleRegular(),
{
margin: 8,
wrap: TextBlock.WrapFit,
editable: true
},
new Binding('text').makeTwoWay()
)
),
makePort('T', Spot.Top, Spot.MiddleTop, true, true),
makePort('L', Spot.Left, Spot.MiddleLeft, true, true),
makePort('R', Spot.Right, Spot.MiddleRight, true, true),
makePort('B', Spot.Bottom, Spot.MiddleBottom, true, true)
)
);
diagram.nodeTemplateMap.add(
'Template',
$(
Node,
'Table',
nodeStyle(),
$(
Panel,
'Auto',
$(
Shape,
'MultiProcess',
{
desiredSize: new Size(80, 40),
fill: '#FFF',
stroke: '#5493C4',
strokeWidth: 3.5
},
new Binding('figure', 'figure')
),
$(
TextBlock,
textStyleRegular(),
{
margin: 8,
wrap: TextBlock.WrapFit,
editable: true
},
new Binding('text').makeTwoWay()
)
),
makePort('T', Spot.Top, Spot.MiddleTop, true, true),
makePort('L', Spot.Left, Spot.MiddleLeft, true, true),
makePort('R', Spot.Right, Spot.MiddleRight, true, true),
makePort('B', Spot.Bottom, Spot.MiddleBottom, true, true)
)
);
diagram.nodeTemplateMap.add(
'Validation',
$(
Node,
'Table',
nodeStyle(),
$(
Panel,
'Auto',
$(
Shape,
'Cylinder1',{ fromLinkable: true, toLinkable: true },
{
desiredSize: new Size(80, 40),
fill: '#FFF',
stroke: '#2F9ECA',
strokeWidth: 3.5
},
new Binding('figure', 'figure')
),
$(
TextBlock,
textStyleRegular(),
{
margin: 8,
wrap: TextBlock.WrapFit,
editable: true
},
new Binding('text').makeTwoWay()
)
),
makePort('T', Spot.Top, Spot.MiddleTop, true, true),
makePort('L', Spot.Left, Spot.MiddleLeft, true, true),
makePort('R', Spot.Right, Spot.MiddleRight, true, true),
)
);
diagram.nodeTemplateMap.add(
'Process',
$(
Node,
'Table',
nodeStyle(),
$(
Panel,
'Auto',
$(
Shape,
'Procedure',
{
desiredSize: new Size(90, 38),
fill: '#FFF',
stroke: '#558D8A',
strokeWidth: 3.5
},
new Binding('figure', 'figure')
),
$(
TextBlock,
textStyleRegular(),
{
margin: 8,
wrap: TextBlock.WrapFit,
editable: true
},
new Binding('text').makeTwoWay()
)
),
makePort('T', Spot.Top, Spot.MiddleTop, true, true),
makePort('L', Spot.Left, Spot.MiddleLeft, true, true),
makePort('R', Spot.Right, Spot.MiddleRight, true, true),
makePort('B', Spot.Bottom, Spot.MiddleBottom, true, true)
)
);
diagram.nodeTemplateMap.add(
'Variable',
$(
Node,
'Table',
nodeStyle(),
$(
Panel,
'Auto',
$(
Shape,
// 'Borders',
'Rectangle',
{
desiredSize: new Size(NaN, 40),
fill: '#FFF',
stroke: '#00AAA1',
strokeWidth: 3.5,
},
new Binding('figure', 'figure'),
new Binding('fill', 'color')
),
$(
TextBlock,
textStyleRegular(),
{
margin: 8,
wrap: TextBlock.WrapFit,
editable: true
},
new Binding('text').makeTwoWay()
)
),
makePort('T', Spot.Top, Spot.MiddleTop, true, true),
makePort('L', Spot.Left, Spot.MiddleLeft, true, true),
makePort('R', Spot.Right, Spot.MiddleRight, true, true),
makePort('B', Spot.Bottom, Spot.MiddleBottom, true, true)
)
);
diagram.nodeTemplateMap.add(
'End',
$(
Node,
'Table',
nodeStyle(),
$(
Panel,
'Auto',
$(
Shape,
'Circle',
{
fill: '#C64747',
stroke: '#C64747',
strokeWidth: 3.5
},
new Binding('figure', 'figure')
),
$(
TextBlock,
textStyleStart(),
{
margin: 8,
wrap: Wrap.Fit,
editable: false
},
new Binding('text').makeTwoWay()
)
),
makePort('T', Spot.Top, Spot.MiddleTop, false, true),
makePort('L', Spot.Left, Spot.MiddleLeft, false, true),
makePort('R', Spot.Right, Spot.MiddleRight, false, true),
makePort('B', Spot.Bottom, Spot.MiddleBottom, false, true)
)
);
diagram.nodeTemplateMap.add(
'Loop',
$(
Node,
'Table',
nodeStyle(),
$(
Panel,
'Auto',
$(
Shape,
'BpmnActivityLoop',
{
fill: '#e6b2b8',
stroke: '#e6b2b8',
strokeWidth: 3.5
},
new Binding('figure', 'figure')
),
$(
TextBlock,
textStyleRegular(),
{
margin: 8,
wrap: Wrap.Fit,
editable: false
},
new Binding('text')
)
),
makePort('T', Spot.Top, Spot.MiddleTop, false, true),
makePort('L', Spot.Left, Spot.MiddleLeft, false, true),
makePort('R', Spot.Right, Spot.MiddleRight, false, true),
makePort('B', Spot.Bottom, Spot.MiddleBottom, false, true)
)
);
diagram.groupTemplate = new Group('Vertical', {
selectionObjectName: 'PANEL', // selection handle goes around shape, not label
ungroupable: true, // enable Ctrl-Shift-G to ungroup a selected Group
}).add(
new TextBlock({
//alignment: go.Spot.Right,
font: 'bold 19px sans-serif',
isMultiline: false, // don't allow newlines in text
editable: true // allow in-place editing by user
})
.bindTwoWay('text', 'key')
.bind('stroke', 'color'),
new Panel('Auto', { name: 'PANEL' })
.add(
new Shape('Roundedrectangle', {
// the rectangular shape around the members
fill: 'rgba(128,128,128,0.2)',
stroke: 'gray',
strokeWidth: 1,
portId: '',
cursor: 'pointer', // the Shape is the port, not the whole Node
// allow all kinds of links from and to this port
// fromLinkable: true,
// fromLinkableSelfNode: true,
// fromLinkableDuplicates: true,
// toLinkable: true,
// toLinkableSelfNode: true,
// toLinkableDuplicates: true
}),
new go.Placeholder({ margin: 10, background: 'transparent' })
)
);
// Validación para permitir solo un enlace
diagram.toolManager.linkingTool.linkValidation = function (fromNode, fromPort, toNode, toPort, link) {
if (['Start', 'Message', 'Group', 'Option', 'Process', 'Variable'].includes(fromNode.category)) {
return fromNode.findLinksOutOf().count === 0;
}
return true; // Permitir enlaces para otras categorías
};
diagram.toolManager.relinkingTool.linkValidation = function (fromNode, fromPort, toNode, toPort, link) {
if (['Start', 'Message', 'Group', 'Option', 'Process', 'Variable'].includes(fromNode.category)) {
return fromNode.findLinksOutOf().count === 0 || fromNode.findLinksOutOf().first() === link;
}
return true; // Permitir relink para otras categorías
};
diagram.linkTemplate = $(
Link,
{
routing: Routing.AvoidsNodes,
curve: Curve.JumpOver,
corner: 5,
toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
mouseEnter: (e, link: any) =>
(link.findObject('HIGHLIGHT').stroke = 'rgba(30,144,255,0.2)'),
mouseLeave: (e, link: any) =>
(link.findObject('HIGHLIGHT').stroke = 'transparent'),
selectionAdorned: false,
// context-click creates an editable link label
contextClick: (e, link) => {
e.diagram.model.commit((m) => {
m.set(link.data, 'text', 'Label');
});
}
},
new Binding('points').makeTwoWay(),
$(
Shape, // the highlight shape, normally transparent
{
isPanelMain: true,
strokeWidth: 8,
stroke: 'transparent',
name: 'HIGHLIGHT'
}
),
$(
Shape, // the link path shape
{ isPanelMain: true, stroke: 'gray', strokeWidth: 2 },
new Binding('stroke', 'isSelected', (sel) =>
sel ? 'dodgerblue' : 'gray'
).ofObject()
),
$(
Shape, // the arrowhead
{ toArrow: 'standard', strokeWidth: 0, fill: 'gray' }
),
$(
Panel,
'Auto', // the link label, normally not visible
{
visible: false,
segmentIndex: 2,
segmentFraction: 0.5
},
new Binding('visible', 'text', (t) => typeof t === 'string' && t.length > 0),
$(
Shape,
'RoundedRectangle', // the label shape
{ fill: '#F8F8F8', strokeWidth: 0 }
),
$(
TextBlock,
{
name: 'LABEL',
textAlign: 'center',
font: '10pt helvetica, arial, sans-serif',
stroke: '#333333',
editable: true
},
new Binding('text').makeTwoWay()
),
)
);
}
}