Unique Custom Layout

GoJS
1

Hi,
I need to create a unuiqe layout like in the pictrue :

IMG_20230912_155000
IMG_20230912_1550001920×1440 180 KB

Note that i have 3 different type of nodes.
Nodes: 1,2,3
Nodes :4,5
Nodes: 6-13
Nodes type 1-3 should always positioned at the top with horizental layout. There could be more that 3 nodes of this type.
Nodes type 4-5 should be positioned under nodes type 1-3 and should be positioned horizentaly. There could be more that 2 nodes of this type.
Nodes 6-13, should be positioned as a “ring” connected to nodes 4-5.
I tried to put nodes 1-3 and 4-5 in groups with grid layout and nodes 6-13 in a group with circular layout but the auto layout does not count the links connectivity between the nodes, namely sometimes the layout put node 3 to the left of node 2 and and so on, so the links are getting “scrambled”.
How can i manualy create such custom layout, that are related to node type and the links between them ?
Regards,
Tany

2

For those horizontal chains, I suggest you use TreeLayout instead of GridLayout.

If nodes of type 4-5 are in a group, that group could be in the CircularLayout too.

image
image540×726 10.8 KB

<!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="go.js"></script>
  <script src="../extensions/TableLayout.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      layout: $(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,
    new go.Binding("row"),
    { margin: 25, layout: $(go.TreeLayout ) },
    new go.Binding("layout", "circular",
      c => $(go.CircularLayout,
        {
          spacing: 25,
          sorting: go.CircularLayout.Optimized,
          startAngle: 220, sweepAngle: 270,
          direction: go.CircularLayout.Counterclockwise
        })),
    $(go.Placeholder)
  ),

myDiagram.model = new go.GraphLinksModel(
[
  { key: -1, isGroup: true, row: 0 },
  { key: 1, text: "Alpha", color: "lightblue", group: -1 },
  { key: 2, text: "Beta", color: "lightblue", group: -1 },
  { key: 3, text: "Gamma", color: "lightblue", group: -1 },
  { key: -2, isGroup: true, row: 1 },
  { key: 4, text: "Delta", color: "lightgreen", group: -2 },
  { key: 5, text: "Epsilon", color: "lightgreen", group: -2 },
  { key: -3, isGroup: true, row: 2, circular: true },
  { key: 6, text: "Zeta", color: "orange", group: -3 },
  { key: 7, text: "Eta", color: "orange", group: -3 },
  { key: 8, text: "Theta", color: "orange", group: -3 },
  { key: 9, text: "Iota", color: "orange", group: -3 },
  { key: 10, text: "Kappa", color: "orange", group: -3 },
  { key: 11, text: "Lambda", color: "orange", group: -3 },
  { key: 12, text: "Mu", color: "orange", group: -3 },
  { key: 13, text: "Nu", color: "orange", group: -3 },
],
[
  { from: 1, to: 2 },
  { from: 2, to: 3 },
  { from: 1, to: 4 },
  { from: 3, to: 5 },
  { from: 4, to: 5 },
  { from: 5, to: 6 },
  { from: 6, to: 7 },
  { from: 7, to: 8 },
  { from: 8, to: 9 },
  { from: 9, to: 10 },
  { from: 10, to: 11 },
  { from: 11, to: 12 },
  { from: 12, to: 13 },
  { from: 13, to: 4 },
]);
  </script>
</body>
</html>
3

I imported the TableLayout.ts
But i wasnt able to init it.
I tried :
this.diagram.layout = this.GO(TableLayout)
OR
this.diagram.layout = new TableLayout();

Both didnt work.
Also
this.diagram.layout = new go.TableLayout();

producred compliation errors.

Please advice.

4

What sort of environment do you have and how are you importing TableLayout? What compilation errors are you seeing?

5

TableLayout is an extension, so it is not in the GoJS library, so its name is not in the “go” namespace.

Presumably you copied the TableLayout.ts file into your project, yes?

6

Yes, I impoerted the TableLayout.ts into my project

When i did
this.diagram.layout = new TableLayout()
i got a runtme error …TableLayout is not a constructor.

When i did
this.diagram.layout = this.GO(TableLayout)
i got GraphObject.make requires a class function…

But when i did :
this.diagram.layout = new go.Layout() as TableLayout
it passed compilation and i got no runtime errors, yet it looks like it does not work as a table layout.

7

This is correct:

assuming that you did something like:

import { TableLayout } from "./TableLayout.js";

as shown in the extensionsJSM/Table.html sample.

8

I’m using Typescript.
I imported from TableLayout.ts
Should i import from TableLayout.js ?

9

I think you can just write:

import { TableLayout } from "./TableLayout";

Of course you should use the correct path for your project.

10

OK,
It looks better,
I noticed that you used TreeLayout for node 1-3.
How can i increase the distance between them ?
I tried nodeSpacing: 100
but it didnt change.

11

Yes, the groups use a TreeLayout by default, unless data.circular is set to true.

But notice that the TreeLayout forms a tree structure going from left to right, forming different layers. So you need to set TreeLayout.layerSpacing to control the distance between layers, not TreeLayout.nodeSpacing which controls the distance between nodes in the same layer. TreeLayout | GoJS API

12

OK, will try

13

By the way how can make the circularLayout more eliphtic ? (yellow nodes)

14

Set CircularLayout.aspectRatio CircularLayout | GoJS API

15

OK,
How do i set the table layout row height?
Namley, how do i set

$(go.RowColumnDefinition…

Recall that i use diagram.layout = new TableLayout();

16

Normally the TableLayout computes the heights of the rows and the widths of the columns based on the Parts that it is laying out.

Just add any new RowColumnDefinitions to the TableLayout instance when using go.GraphObject.make. For example:

      new go.Diagram("myDiagramDiv",
        {
          layout: $(TableLayout,
            $(go.RowColumnDefinition, { row: 1, height: 22 }),  // fixed size column headers
            $(go.RowColumnDefinition, { column: 1, width: 22 }) // fixed size row headers
          ),
          . . .
17

I cannot, cause the diagram is already instanciated by other module
I get it and i set my layout by calling :
this.diagram.layout = new TableLayout();
Is it possible to set RowColumnDefinition after this line ?

18

The code I just gave you is exactly the same as:

this.diagram.layout = go.GraphObject.make(TableLayout,
            go.GraphObject.make(go.RowColumnDefinition, { row: 1, height: 22 }),  // fixed size column headers
            go.GraphObject.make(go.RowColumnDefinition, { column: 1, width: 22 }) // fixed size row headers
          );
19

OK,
Will try tommorow.
Thanks

20

Look good,
Thanks