That didn’t work either… this is code for both Nodes, orange and white.
const dropDocletType = $(
go.Node,
'Spot', // Use 'Spot' as the main panel to position ports accurately
{ movable: false, locationSpot: go.Spot.Center },
$(go.Shape, 'RoundedRectangle', {
strokeWidth: 1,
stroke: '#ffc74c',
fill: '#ffc74c',
width: 150,
height: 30,
}),
$(
go.Panel,
'Vertical',
$(
go.TextBlock,
{
textAlign: 'center',
font: 'bold 10pt Barlow, sans-serif',
},
new go.Binding('text', 'text')
)
),
// Conditional Port for "prepend"
$(
go.Shape,
'Circle',
{
portId: 'prepend', // Assign a portId for linking
alignment: go.Spot.Bottom, // Align to the bottom of the node
desiredSize: new go.Size(8, 8),
fill: '#1776D2',
fromLinkable: false,
toLinkable: false,
visible: false,
},
new go.Binding('visible', 'text', (text: any) => text.includes('Prepend'))
),
// Conditional Port for "append"
$(
go.Shape,
'Circle',
{
portId: 'append', // Assign a portId for linking
alignment: go.Spot.Top, // Align to the top of the node
desiredSize: new go.Size(8, 8),
fill: '#1776D2',
fromLinkable: false,
toLinkable: false,
visible: false,
},
new go.Binding('visible', 'text', (text: any) => text.includes('Append'))
)
);
const docletTypeNodes = $(
go.Node,
'Spot', // Changed to 'Spot' to allow precise port positioning
{ movable: false, locationSpot: go.Spot.Center },
new go.Binding(
'copyable',
'',
(data: any) => data.state !== GoJsNodeState.Copied
),
// Main content of the node wrapped in an Auto Panel
$(
go.Panel,
'Auto',
$(
go.Shape,
'RoundedRectangle',
new go.Binding('fill', 'state', (state: any) =>
state === GoJsNodeState.Copied
? '#ccc'
: state === GoJsNodeState.Palette || state === GoJsNodeState.Diagram
? 'white'
: null
),
new go.Binding('stroke', 'state', (state: any) =>
state === GoJsNodeState.Copied
? '#ccc'
: state === GoJsNodeState.Palette || state === GoJsNodeState.Diagram
? '#1776D2'
: null
),
{
width: 200,
minSize: new go.Size(200, 35),
maxSize: new go.Size(200, 35),
strokeWidth: 1,
alignment: go.Spot.Center,
}
),
$(
go.Panel,
'Horizontal',
{ stretch: go.GraphObject.Horizontal, alignment: go.Spot.Left },
'Horizontal',
paletteIcon,
$(
go.TextBlock,
{
margin: new go.Margin(2, 10, 0, 5),
width: 135,
wrap: go.TextBlock.WrapDesiredSize,
textAlign: 'center',
font: 'bold 10pt Barlow, sans-serif',
},
new go.Binding('text', 'title')
),
$(
'Button',
new go.Binding(
'visible',
'state',
(state: any) => state === GoJsNodeState.Diagram
),
{
column: 1,
'ButtonBorder.figure': 'Circle',
},
$(go.Shape, 'XLine', {
width: 8,
height: 8,
fill: 'white',
click: (ev: any, obj: any) => {},
})
)
)
),
// Conditional Ports
$(
go.Shape,
'Circle',
{
portId: 'left',
alignment: new go.Spot(0, 0.5),
desiredSize: new go.Size(8, 8),
fill: '#1776D2',
fromLinkable: false,
toLinkable: true,
visible: false,
},
new go.Binding(
'visible',
'state',
(state: any) => state === GoJsNodeState.Diagram
)
),
$(
go.Shape,
'Circle',
{
portId: 'top',
alignment: go.Spot.TopCenter,
desiredSize: new go.Size(8, 8),
fill: '#1776D2',
fromLinkable: false,
toLinkable: false,
visible: false,
},
new go.Binding(
'visible',
'state',
(state: any) => state === GoJsNodeState.Diagram
)
),
$(
go.Shape,
'Circle',
{
portId: 'bottom',
alignment: go.Spot.BottomCenter,
desiredSize: new go.Size(8, 8),
fill: '#1776D2',
fromLinkable: false,
toLinkable: false,
visible: false,
},
new go.Binding(
'visible',
'state',
(state: any) => state === GoJsNodeState.Diagram
)
)
);