Panel under other

GoJS
1

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 ((
Screenshot from 2023-09-29 09-56-07

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());
2

It looks like you have an extra Vertical panel that you don’t need. Does your template work as expected if you structure it like this?

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),
  makeSourceHeaderPanel(),
  makeSourceBodyPanel()
);
3

Yes, It still work, but bottom panel upper then top panel. I wanna use zOrder param, but it work only in Part

4

Ah, I misunderstood.

The z-ordering of element in a Panel is determined the order it is added to the Panel. If you want the larger Panel rendered on top (z-order-wise), you’ll want to declare it second in the Node template. Then you can set your Node (a Vertical Panel) to isOpposite: true, such that the first element (the smaller Panel) is rendered at the bottom.