How to position shapes around groups

GoJS
1

Hi there,
I am trying to create diagram where I have five groups as you can see in the image attached here. (Groups are rectangles with yellow border)
I am trying to add five more rectangles around these groups on top, left, right and bottom position of the groups but I am not able to get the result I want.
These rectangles are shown in the image with gray and orange fill.

gojs-rectangles
gojs-rectangles421×518 4.41 KB

If this is possible to achieve can you please provide me demo example?

thanks in advance

2

What should happen when the user scrolls or pans?
Or when the user zooms in or out?
Or when the Div element changes size?

3

Hi Walter
Please see edited post

4

Do you expect a variable number of nodes in each of those five groups? How will they be positioned? What if there isn’t enough room for them? Will users be able to move those nodes?

5

Yes I plan to set node numbers using variable and that is why I mentioned the outer rectangles i want will have height and width coming from variable too.

I plan to control the position of nodes in from node data

const nodeDataArray = [
{ key: “G1”, isGroup: true, pos: “0 0”, size: “0 0” },
{ key: “G2”, isGroup: true, pos: “0 60”, size: “0 0” },
{ key: “G3”, isGroup: true, pos: “0 120”, size: “0 0” },
{ key: “G4”, isGroup: true, pos: “0 180”, size: “0 0” },

]

Users will not be able move any nodes in the group

6

Here’s one possibility:

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

  <script src="https://unpkg.com/gojs"></script>
  <script src="https://unpkg.com/gojs/extensions/TableLayout.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      allowCopy: false, allowMove: false, allowMove: false,
      layout: new TableLayout(),
      "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();
        }
      }
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.groupTemplate =
  $(go.Group, "Auto",
    { column: 1, stretch: go.GraphObject.Fill },
    new go.Binding("row"),
    $(go.Shape, { fill: null, stroke: "gold", strokeWidth: 2 }),
    $(go.Placeholder, { padding: 5, alignment: go.Spot.TopLeft })
  );

myDiagram.nodeTemplateMap.add("Rectangle",
  $(go.Part,
    { selectable: true, stretch: go.GraphObject.Fill },
    new go.Binding("row"),
    new go.Binding("rowSpan"),
    new go.Binding("column", "col"),
    new go.Binding("columnSpan", "colSpan"),
    $(go.Shape, { stretch: go.GraphObject.Fill },
    new go.Binding("fill", "color"),
    new go.Binding("width"),
    new go.Binding("height"))
  ))

myDiagram.model = new go.GraphLinksModel(
[
  { category: "Rectangle", row: 0, col: 0, colSpan: 3, color: "gray", height: 20 },
  { category: "Rectangle", row: 1, col: 0, rowSpan: 8, color: "lightgreen", width: 20 },
  { category: "Rectangle", row: 1, col: 2, rowSpan: 8, color: "lightgreen", width: 20 },
  { category: "Rectangle", row: 9, col: 0, colSpan: 3, color: "slateblue", height: 20 },
  { category: "Rectangle", row: 10, col: 1, color: "pink", height: 20 },
  { key: "G1", isGroup: true, text: "G1", row: 1 },
  { key: "G2", isGroup: true, text: "G2", row: 2 },
  { key: "G3", isGroup: true, text: "G3", row: 3 },
  { key: 1, text: "Alpha", color: "lightblue", group: "G1" },
  { key: 2, text: "Beta", color: "orange", group: "G1" },
  { key: 3, text: "Gamma", color: "lightgreen", group: "G1" },
  { key: 4, text: "Delta", color: "pink", group: "G2" },
  { key: 5, text: "Epsilon", color: "yellow", group: "G3" },
]);
  </script>
</body>
</html>

The result:
image

7

Thanks Walter I need to integrate few things in this that I will try and thanks for your response