How to use the go.TreeLayout and can manually change the node location based on the node location data

Ebigbang · November 4, 2024, 8:53am

myDiagram = $(go.Diagram, eleID, {
			"initialContentAlignment": go.Spot.Center,
			//initialAutoScale: go.Diagram.Uniform,
			initialDocumentSpot: go.Spot.Center,
			initialViewportSpot: go.Spot.Center,
			"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
			minScale: 0.25,
			grid: $(go.Panel, "Grid",
					$(go.Shape, "LineH", { stroke: "#b5b5b6", strokeWidth: .5 }),
					$(go.Shape, "LineH", { stroke: "#b5b5b6", strokeWidth: 1.5, interval: 10 }),
					$(go.Shape, "LineV", { stroke: "#b5b5b6", strokeWidth: .5 }),
					$(go.Shape, "LineV", { stroke: "#b5b5b6", strokeWidth: 1.5, interval: 10 })
				),
			//"draggingTool.isGridSnapEnabled": true,	
			initialScale:0.4,
			maxScale: 6, //最大视图的放大比例
			hasHorizontalScrollbar: false, //纵向滚动条隐藏
			hasVerticalScrollbar: false, //横向滚动条隐藏
			contentAlignment: go.Spot.Center, //图形居中
			padding: 500, //内边距
			"ModelChanged": changeModel,//新增事件
			layout: $(go.TreeLayout, { isInitial: false, isOngoing: false } ),
			"InitialLayoutCompleted": function(e) {
     			 // if not all Nodes have real locations, force a layout to happen
				if (!e.diagram.nodes.all(function(n) { return n.location.isReal(); })) {
					e.diagram.layoutDiagram(true);
				}
			}
		});

by the way
How to record the bend position of the connection line on the data carrier and When loading, you can save the position and bend points of the connection line？
Thanks walter

walter · November 4, 2024, 1:48pm

You have already set Layout.isInitial and isOngoing to false, so if there is a Binding on each Node.location property from some data property in the model, then each node will be located as specified in the model data. (If no location is provided in the data, the node will not have a real location, so it cannot be shown anywhere.) If the Binding is TwoWay, then the model will be updated automatically whenever any user moves any nodes, so the saved model will have the updated node locations.

Presumably you have provided a command to explicitly perform a layout if the user wants it, by calling Diagram.layoutDiagram(true).

Some apps need to deal with new models that do not have location information on each node data object. If so, you’ll need to detect that just before loading the model (i.e. setting Diagram.model) and first set Layout.isInitial to true so that the desired layout is performed as part of the model loading process, or else set Layout.isInitial to false if all of the node data objects do have valid location values.

If you have a Binding on the Link.points property, when loading the model each link will get its route from the link data. (If no route is specified in the data, it will compute its normal route according to the Link’s properties and the connected ports’ properties.) If you make that Binding TwoWay, then the model will always have updated routes saved.

Ebigbang · November 5, 2024, 7:53am

Node positions can only be manually modified in the case of free layout

function nodeStyle() {
  return [
    {
      type: go.Panel.Spot,
      layerName: "Background",
      locationObjectName: "SHAPE",
      selectionObjectName: "SHAPE",
      locationSpot: go.Spot.Top,
       selectionObjectName: "ICON"
    },
    // new go.Binding("stroke"),
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
  ];

I exported the diagram and saved it to a local json file and saved the real data of the connection points
Why?

"linkDataArray": [
        {
            "key": "ded93cf2-4293-439e-972c-2eda9e30cb0e",
            "from": "9200000576822",
            "to": "e9fbd2fc-65b9-4ff3-a618-3e8ba0ca4fa6",
            "category": "variable",
            "layerName": "pointChart",
            "fromPort": "port",
            "toPort": "port",
            "points": [
                {
                    "x": 17.75,
                    "y": 535.3930908203125
                },
                {
                    "x": 7.75,
                    "y": 535.3930908203125
                },
                {
                    "x": 4,
                    "y": 535.3930908203125
                },
                {
                    "x": 4,
                    "y": 380
                },
                {
                    "x": -176.75,
                    "y": 380
                },
                {
                    "x": -186.75,
                    "y": 380
                }
            ]
        }]

export const line = ($) => {
  return $(go.Link, new go.Binding("layerName", "layerName"),
    {
      routing: go.Link.AvoidsNodes,
      curve: go.Link.JumpOver,
      reshapable: true,
      //curviness: 0,
      //relinkableFrom: true, relinkableTo: true,reshapable: true,
      //resegmentable: true,
      selectionAdorned: false, // Links are not adorned when selected so that their color remains visible.
      //shadowOffset: new go.Point(0, 0), shadowBlur: 5, shadowColor: "blue",
      //isReal : true,
    },
    $(go.Shape,
      { name: "SHAPE", strokeWidth: 1, stroke: 'black' }),
    // $(go.TextBlock, new go.Binding("text", "text"), { segmentOffset: new go.Point(0, -10),
    // segmentOrientation: go.Link.OrientUpright })
  );
}

The above is the cable data and template.

myDiagram.model.linkDataArray = JSONFILE.linkDataArray
The data exported by the assignment json cannot save the real position of the previous connection line, and the inflection point position cannot be saved.

How do I set it up to allow me to read locally saved JSON file data with the real location of the connection line displayed on GoJS?
Thanks ：）

walter · November 5, 2024, 10:59am

You must be saving the link data “points” Array in your code. Yes, that won’t work when loading a model, because when nodes are initialized, they will invalidate their connected link routes.

You only need to add this Binding to your link template.

     new go.Binding("points").makeTwoWay()

The model loading process will only assign the Link.points property after the Nodes have been measured and arranged.

Ebigbang · November 6, 2024, 1:52am

Added this data binding but it still doesn’t work.
I hope that effect

But it’s such an effect

export const line = ($) => {
  return $(go.Link, new go.Binding("points").makeTwoWay(),
    {
      routing: go.Link.AvoidsNodes,
      curve: go.Link.JumpOver,
    },
    $(go.Shape,
      { name: "SHAPE", strokeWidth: 1, stroke: 'black' }),
  );
}

What’s the problem?

{
    "key": "e9fbd2fc-65b9-4ff3-a618-3e8ba0ca4fa6-cc975787-b2a9-426f-9cd1-6a553809762f",
    "from": "e9fbd2fc-65b9-4ff3-a618-3e8ba0ca4fa6",
    "to": "cc975787-b2a9-426f-9cd1-6a553809762f",
    "category": "variable",
    "layerName": "pointChart",
    "fromPort": "port",
    "toPort": "input",
    "points": [
        {
            "x": -233.25,
            "y": 380
        },
        {
            "x": -243.25,
            "y": 380
        },
        {
            "x": -244,
            "y": 380
        },
        {
            "x": -244,
            "y": 380
        },
        {
            "x": -636.6150102556226,
            "y": 380
        },
        {
            "x": -636.6150102556226,
            "y": 570
        },
        {
            "x": -501.5,
            "y": 570
        },
        {
            "x": -511.5,
            "y": 570
        }
    ]
}

微信图片_20241106110033
The data source for this cable

walter · November 6, 2024, 9:54am

Are you loading a model by calling Model.fromJson and then setting Diagram.model? That is how all of the samples do it, especially those that save/load link routes via a TwoWay Binding on the Link.points property.

Ebigbang · November 7, 2024, 3:04am

Save to a local JSON file data carrier
let jsonData = myDiagram.model.toJson()

2.Load the data again

myDiagram.model.nodeDataArray = jsonData.nodeDataArray;
myDiagram.model.linkDataArray = jsonData.linkDataArray;

3.Binding Link.points data

export const line = ($) => {
  return $(go.Link, 
    {
      routing: go.Link.AvoidsNodes,
      curve: go.Link.JumpOver,
      reshapable: true,
      selectionAdorned: false,
    },new go.Binding("points").makeTwoWay(),
    $(go.Shape,
      { name: "SHAPE", strokeWidth: 1, stroke: 'black' }),
    // $(go.TextBlock, new go.Binding("text", "text"), { segmentOffset: new go.Point(0, -10),
    // segmentOrientation: go.Link.OrientUpright })
  );
}

I’ve set it all up according to these
But it didn’t take effect
My version is v2.1.38

walter · November 7, 2024, 3:16am

You need to replace the Diagram.model, not multiple model properties.

Ebigbang · November 7, 2024, 9:19am

replace the Diagram.model means :

myDiagram.model = go.Model.fromJson(jsonData)

it works.
However, when i move a node, all the connection line vertices disappear and are reconnected

myDiagram.layout =  $(go.Layout);

walter · November 7, 2024, 11:01am

Yes, the goal is to have the route of each link actually connect the link’s fromPort and toPort. So when a node is moved all connected links must be re-routed. To avoid continual routing computations, routes are invalidated — they are only recomputed at certain times.

The properties of a Link and its connected ports/Nodes affect how it is routed. Perhaps you want to set Link.adjusting. Link | GoJS API

walter · November 8, 2024, 12:32pm

A post was split to a new topic: How to achieve this layout?