Hi Walter) I’m trying to create a node from two panels. It is necessary that the bottom panel is under the top. I don’t quite understand how to do this. Can you give me some advice? The image shows what I have now ((
const createNodeTemplate = () => $(
go.Node,
go.Panel.Vertical,
{
selectionObjectName: MAIN_SHAPE_NAME,
resizable: true,
resizeObjectName: TEXT_BLOCK_HEADER_NAME,
locationSpot: go.Spot.Center,
},
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
$(
go.Panel,
go.Panel.Vertical,
makeSourceHeaderPanel(),
makeSourceBodyPanel(),
),
);
makeSourceHeaderPanel
const TextBlockSettings: Partial<go.TextBlock> = {
cursor: 'move',
isMultiline: true,
overflow: go.TextBlock.OverflowEllipsis,
textAlign: 'center',
name: TEXT_BLOCK_HEADER_NAME,
width: 100,
click: shapeClick,
};
const panelSettings: Partial<go.Panel> = {
margin: 0,
padding: 0,
};
const makeSourceHeaderShape = () => new go.Shape('RoundedRectangle', ShapeSettings);
const makeSourceHeaderBody = () => new go.TextBlock(TextBlockSettings);
export const makeSourceHeaderPanel = () => new go.Panel(go.Panel.Auto, panelSettings)
.add(makeSourceHeaderShape())
.add(makeSourceHeaderBody());
makeSourceBodyPanel
const ShapeSettings: Partial<go.Shape> = {
fill: 'white',
opacity: 1,
stroke: 'blue',
strokeWidth: 2,
strokeDashArray: [8, 4],
};
const TextBlockSettings: Partial<go.TextBlock> = {
cursor: 'move',
isMultiline: true,
overflow: go.TextBlock.OverflowEllipsis,
textAlign: 'center',
name: TEXT_BLOCK_BODY_NAME,
width: 100,
click: shapeClick,
};
const panelSettings: Partial<go.Panel> = {
alignment: new go.Spot(0.5, 0, 0, -10),
margin: 0,
padding: 0,
};
const makeSourceBodyShape = () => new go.Shape('RoundedRectangle', ShapeSettings);
const makeSourceBody = () => new go.TextBlock('body_text', TextBlockSettings);
export const makeSourceBodyPanel = () => new go.Panel(go.Panel.Auto, panelSettings).add(makeSourceBodyShape()).add(makeSourceBody());