Help with Node Design using PanelExpanderButton

GoJS
1

Hello,

I am currently working on a project using GoJS version 2.3.12 along with gojs-react version 1.1.2.
I am trying to design a node using the PanelExpanderButton, and I would appreciate your guidance on how to modify the code to achieve the desired functionality.

Below is a sample based on the minimal example:

  const roundedRectangleParams = {
    parameter1: 2, // set the rounded corner
    spot1: go.Spot.TopLeft,
    spot2: go.Spot.BottomRight // make content 
  };


  myDiagram.nodeTemplate = $(
    go.Node,
    "Auto",
    {
      resizable: true,
      locationSpot: go.Spot.Top,
      shadowVisible: true,
      shadowBlur: 1,
      shadowOffset: new go.Point(0, 1),
      shadowColor: 'rgba(0, 0, 0, .14)',
      selectionAdornmentTemplate: new go.Adornment('Auto')
      .add(
        new go.Shape('RoundedRectangle', { fill: null, stroke: '#7986cb', strokeWidth: 3 }).set(roundedRectangleParams),
        new go.Placeholder()
      ) // end Adornment
    },
    new go.Binding("desiredSize", "size", go.Size.parse, go.Size.stringify),
    // node background
    $(go.Shape, "RoundedRectangle",
    { name: 'SHAPE', fill: 'white', strokeWidth: 5, stroke: "gray",
    }
    ).set(roundedRectangleParams),

    // inner contents
    $(go.Panel, "Vertical",
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle",
          {
            fill: "red",
            stroke: null,
          },
          new go.Binding("desiredSize", "size", go.Size.parse, go.Size.stringify)
        ),
        $(go.Panel, "Horizontal", {margin: 8},
          $(go.TextBlock, {
            editable: true,
            overflow: go.TextBlock.OverflowEllipsis,
            font: 'bold 14px sans-serif',
            text: "node name",
            alignment: go.Spot.Left,
            },
            new go.Binding("text", "text")
          ),
          $("PanelExpanderButton", {
            background: "#FFFFFF",
            alignment: go.Spot.Right,
            },"COLLAPSIBLE"
          )
        ),
      ),

      // only visible when info is expanded
      $(go.Panel, "Vertical", {
          name: "COLLAPSIBLE",
          margin: 8,
          defaultAlignment: go.Spot.Left,
          visible: false,
          height: 100
        },
        $(go.TextBlock, {
          text: "additional information 1",
        }),
        $(go.TextBlock, {
            text: "additional information 2",
        })
      )
    )
  )

  myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: 'Alpha', color: "rgba(2, 128, 128, 1)", size: "(150, 50)", bShowInferMon: false},
      { key: 2, text: 'Beta', color: "rgba(2, 128, 128, 1)", size: "(150, 50)", bShowInferMon: false},
      { key: 3, text: 'Gamma', color: "rgba(2, 128, 128, 1)", size: "(150, 50)" , bShowInferMon: false},
      { key: 4, text: 'Delta', color: "rgba(2, 128, 128, 1)", size: "(150, 50)", bShowInferMon: false }
    ],
    [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 2 },
      { from: 3, to: 4 },
      { from: 4, to: 1 }
    ]
  );

The actual behavior is demonstrated in the following screenshots:

Figure 1: Before pressing the PanelExpanderButton

image

Figure 2: After pressing the PanelExpanderButton

image

  1. Adjusting the Size of the Red Rectangle Area
    I want the panel to appear at the bottom of the node when the PanelExpanderButton is pressed. However, the top area of the panel is being resized awkwardly, causing the text to be misaligned. Can you help me correct this so that when the PanelExpanderButton is pressed, the size of the top panel is adjusted appropriately and the TextBlock is centered in that panel?

  2. Border Visibility
    Currently, the gray border is hidden behind the red panel. Is it possible to bring this border to the front? Alternatively, can I adjust the width and height of the internal red panel to account for the border’s width?

Thank you in advance for your assistance.

2

Try this. The code requires GoJS version 3.0.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/release/go-debug.js"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv", {
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

const roundedRectangleParams = {
  parameter1: 2, // set the rounded corner
  spot1: go.Spot.TopLeft,
  spot2: go.Spot.BottomRight // make content 
};

myDiagram.nodeTemplate =
  new go.Node("Auto", {
      resizable: true,
      locationSpot: go.Spot.Top,
      selectionAdornmentTemplate:
        new go.Adornment('Auto')
          .add(
            new go.Shape('RoundedRectangle', { fill: null, stroke: '#7986cb', strokeWidth: 3 })
              .set(roundedRectangleParams),
            new go.Placeholder()
          ) // end Adornment
    })
    .bindTwoWay("desiredSize", "size", go.Size.parse, go.Size.stringify)
    .add(
      new go.Shape("RoundedRectangle", {
          parameter1: 2,
          fill: "white", stroke: "gray", strokeWidth: 5
        })
        .set(roundedRectangleParams),
      new go.Panel("Table", { stretch: go.Stretch.Fill, margin: 2 })
        .add(
          new go.Panel("Auto", { row: 0, stretch: go.Stretch.Fill })
            .add(
              new go.Shape("RoundedRectangle", { fill: "red", strokeWidth: 0 })
                .set(roundedRectangleParams)
                .bind("fill", "color"),
              new go.Panel("Horizontal", { margin: 4 })
                .add(
                  new go.TextBlock({
                      editable: true,
                      overflow: go.TextBlock.OverflowEllipsis,
                      font: 'bold 14px sans-serif',
                      text: "node name",
                      alignment: go.Spot.Left,
                      margin: 2
                    })
                    .bindTwoWay("text"),
                  go.GraphObject.build("PanelExpanderButton", {
                    background: "white", alignment: go.Spot.Right
                  })
                )
            ),
          new go.Panel("Vertical", {
              row: 1,
              name: "COLLAPSIBLE",
              visible: false,
              margin: 8,
              defaultAlignment: go.Spot.Left,
              //height: 100
            })
            .add(
              new go.TextBlock("additional information 1"),
              new go.TextBlock("additional information 2")
            )
        )
    );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "red" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>
3

Thank you for your response.
I tried the code you provided, and it achieved the desired results.

However, we are currently using GoJS version 2.3.12, and due to development constraints, we cannot update to the latest version immediately. I believe the key part of the code you suggested is stretch: go.Stretch.Fill, but it seems this is not supported in GoJS version 2.3.12.

Do you have any workarounds for this issue?

4

Use go.GraphObject.Fill.

5

I resolved the issue by using go.GraphObject.Fill.
Thank you very much for your help!