I am having a problem where links that have been reshaped do not reload using the stored points, but go back to the default routing points. Overall my implementation looks a lot like the Dynamic Ports sample, but using React, and the gojs-react npm component.

I am using model.toJson and model.fromJson, and storing in a database between reloads. I can see in the database that links in the links have points that update as I reshape the link. Here is a sample of the first link in the database:

  "linkDataArray": [
    {
      "id": "cf7ae4e7-1b9d-4a36-9985-8e6604a1f57c",
      "to": "ea4900e0-0817-4d4f-9fa7-d28ec88ff904",
      "from": "0bd4201f-be65-49dc-a1ee-96257a100879",
      "text": "FIRST",
      "points": [
        -114.14285278320312,
        22.5,
        -96.14285278320312,
        22.5,
        -55.33333396911621,
        22.5,
        -55.33333396911621,
        97.5,
        -51.857147216796875,
        97.5,
        -45.857147216796875,
        97.5
      ],
      "toPort": "_01",
      "fromPort": "01",
      "segmentIndex": {
        "class": "NaN"
      },
      "segmentFraction": 0.21681827187411645
    },

My link template does have the required binding, here it is in full:

	diagram.linkTemplate =
		goObject( CustomLink,
			{
				routing: go.Link.AvoidsNodes,
				corner: 8,
				curve: go.Link.JumpGap,
				reshapable: true,
				resegmentable: false,
				relinkableFrom: true,
				relinkableTo: true
			},
			new go.Binding( "points" ).makeTwoWay(),
			goObject( go.Shape, { stroke: "#2F4F4F", strokeWidth: 2 } ),
			goObject( go.Shape, { toArrow: "Feather" } ),
			goObject( go.Panel, "Auto",
				{ visible: false, _isLinkLabel: true, segmentIndex: NaN, segmentFraction: 0.5 }, // Default not visible
				new go.Binding( "visible", "text", text => !!text ),
				goObject( go.Shape, { stroke: "#2F4F4F", fill: '#ffffff', strokeWidth: 0.5 } ),
				goObject( go.Panel, "Horizontal", { margin: new go.Margin( 3, 3, 0, 3 ) }, // Panel needed for inner margins.
					goObject( go.TextBlock, "",  // the label text
						{
							textAlign: "center",
							font: "9pt helvetica, arial, sans-serif",
							stroke: "#2F4F4F",
							editable: true
						},
						new go.Binding( "text" ).makeTwoWay()
					),
				),
				new go.Binding( "segmentFraction" ).makeTwoWay()
			)
		)

The linkDataArray is then fed into the React component:

			<ReactDiagram
				ref={diagramRef}
				initDiagram={initDiagram}
				divClassName='diagram-component'
				nodeDataArray={nodes}
				linkDataArray={links}
				linkKeyProperty="id"
				onModelChange={onModelChange}
				skipsDiagramUpdate={skipsDiagramUpdate}
			/>

…but when the diagram is drawn all link reshapes are ignored and they are routed with the default path.

1 post - 1 participant

Read full topic

Is it possible and what is the proper approach to be able to move a node on a diagram canvas when holding a right button and draw a link from a node when holding the left button? I am trying to overcome a usability problem when there is a small area in the centre of a node which, when clicked, allows to move the node and if clicked outside of that area, allows to draw a link. This approach is not very useful, often times user expects the node to move but a link is being drawn or vice versa, the user expects to draw a link but the node is being moved. This limit between the centre area and the rest is somewhat blurry where right or left mouse click would strictly distinguish between those two actions.

4 posts - 2 participants

Read full topic

image1159×1510 81.2 KB

As shown in the above mockup, we have a rxJS component (shown in image with “vertical three ellipsis dot”). When user left click on it (not on mouse right click), a custom context menu opens with 3 options(shown in image). We want our three dot icon react component on each node.
How to render this RxJS component inside the GoJS node?

1 post - 1 participant

Read full topic

A picture is worth a thousand words:

I realize this fails because jumpGap is only applied to the straight segments, not to the curve.
Can anything be done about it?

4 posts - 2 participants

Read full topic

I’m using the overview zoom like in example https://gojs.net/latest/extensions/OverviewResizing.html
difference is I have the overview on a toggle to hide/show.

the first time I toggle to true, the overview comes up but is blank until I zoomed out. any suggestions?

This is how I’m setting up the overview

      myOverview = make(gojs.Overview, 'overviewContainer',
      {
        observed: myDiagram,
        contentAlignment: gojs.Spot.Center,
        'box.resizable': true,
        'resizingTool': new OverviewResizingTool()
      });

10 posts - 2 participants

Read full topic

Trying to achieve groups where the padding amount around members increase depending on how many members the group has. So in essence making Placeholder.padding bound to ...memberParts.count.

It seems making a Binding that depends on .memberParts.count does not cut it. It works when interactively working with the diagram, but when loading an existing diagram using .fromJson(), the counts are always zero. It is not until you poke the group that the padding gets calculated correctly.

I have already gotten around this using tips from other posts in this forum, with this code, which gives me a data property that I can bind to instead, which works fine:

	// Since memberParts.count do not update on load, we maintain our own counter...
	const updateGroupCount = g => {
		g.diagram.model.setDataProperty( g.data, 'count', g.memberParts.count )
	}

	diagram.groupTemplate =
		goObject( go.Group, "Horizontal",
			{
				ungroupable: true, // User can ungroup nodes from this
				avoidable: false, // Links can route across (otherwise we can't get in!)
				computesBoundsAfterDrag: true,
				mouseDrop( e, grp ) {
					const ok = ( grp !== null
						? grp.addMembers( grp.diagram.selection, true )
						: e.diagram.commandHandler.addTopLevelParts( e.diagram.selection, true ) )
					if( !ok ) e.diagram.currentTool.doCancel()
				},
				handlesDragDropForMembers: true,  // Don't need to define handlers on member Nodes and Links
				memberAdded: updateGroupCount,
				memberRemoved: updateGroupCount
			},

…but it seems a bit unnecessary to have to do this. Is counts not updating on model load the expected behaviour, or is this maybe a bug?

1 post - 1 participant

Read full topic

I want to add an icon where a link connects to a node. As shown below:

捕获.PNG810×541 74.3 KB

When a parent node has multiple child nodes, I need an icon that can only display but not click on the nodes where their link branches are separated.

Looking forward to your reply, thank you very much!

1 post - 1 participant

Read full topic

Hi,

We are using go js for building diagrams and we enabled relinking in our diagrams. So when user attempts to relink a link, the disconnected node, automatically moves to the bottom side of the diagram.

For instance, say initially the diagram is in below state:

Screenshot 2020-12-07 at 9.50.43 PM952×1358 30.8 KB

And after user attempts to relink “Start” node to “Select Radio Button”, the “Get Input Fields” node moves down.

Screenshot 2020-12-07 at 9.50.10 PM1027×1359 31.8 KB

But we to the “Get Input Fields” node to stay there itself. May be it can move to left or right but stay in the same layer where it was originally.

Is this even possible, if yes, is there any configuration to control this behaviour?

5 posts - 2 participants

Read full topic

Changes for 2.1.31

• Fixed a regression since 2.1.30 where the library might not load in React or Angular environments, and a TypeError would be thrown.
• Fixed dragging of links connected with snapped nodes when the grid cell size was not an integer, causing the links to slowly shift over time.
• Fixed rendering of background in images drawn by Diagram.makeImageData when the whole page has been scaled to be less than 100%.
• Fixed Diagram.delayInitialization when calling code that prompts the Diagram to update immediately afterwards.
• Fixed premature routing of links in Groups that start off collapsed (with Group.isSubGraphExpanded set or bound to false).
• Fixed an animation bug that might revert some routes when the initial animation was turned off.
• Link.computeAdjusting now only returns Link.End during animation only when routing is AvoidsNodes.
• Fixed a regression since 2.1.29 where an Overview would not update with a newly set Overview.observed Diagram and a newly displayed HTMLDivElement until some activity happened on that observed Diagram.

Previous version: GoJS version 2.1.30

2 posts - 1 participant

Read full topic

So in our go js diagrams, we want to support various A11Y aspects such as - keyboard navigation, text alternatives for non-text content etc., More can be found at https://www.w3.org/WAI/fundamentals/accessibility-principles/

So I was wondering, whether go js supports anything OOTB in this regard.

Thanks as always for any help or suggestions.

1 post - 1 participant

Read full topic

In our diagram we have a group node with go.TreeLayout, which can be expanded/ collapsed by clicking on a link. So when a few nodes are added to the group node, everything works fine. For instance, this is the original state of the diagram with a group node, “For Loop”:

Screenshot 2020-12-08 at 5.05.27 PM1371×1535 101 KB

Now when we move a node within the group node, followed by dragging the group node itself on the canvas, all the nodes/ edges within the group node are misaligned.

Say, we first moved “Start” node within the “For Loop” node and diagram’s state changes as below:

Screenshot 2020-12-08 at 5.08.49 PM1237×1593 62.2 KB

Now, when we drag the “For Loop” group node on the canvas, everything within the “For Loop” node misaligns as below:

Screenshot 2020-12-08 at 5.09.33 PM1592×1531 110 KB

FYI, Both diagram and group node are using go.TreeLayout. Also collapsing and re-expanding the group nodes realigns everything properly.

1 post - 1 participant

Read full topic

I have a diagram with allowVerticalScroll: false

If a user uses the select rubberband rectangle to select nodes, and gets too close to the top or bottom, the diagram will still scroll vertically.

Can I do anything about this?

4 posts - 3 participants

Read full topic

Could you please help me in formatting the link, actually I want to show the node link as shown below in image 1, but it is showing in wrong format like shown in image2.

Image 1

Image2- wrong format

6 posts - 2 participants

Read full topic

How to show tree structure whenever we hover on some node like below image

image663×614 67.7 KB

As you can see in above image whenever user hovers on small icon shown on top of “A” and bottom of “A”, need to show tree structure on hover. Same applies for all small icons which will show their respective tree structure.

Image used from below example, for reference

2 posts - 2 participants

Read full topic

I have faced the fact that the positions of the selection and link don’t change dynamically after the node has been moved.

I would expect they should redraw every time using new node coordinates right after the node has been moved to a new position, but they remain in place.

I have attached an example where “Alpha” node gets 1 pixel offset every 100ms to demonstrate the issue.

Please run the example in your browser, select the end of the link “To:” (arrow-shaped) and hold down the left mouse button to activate the selection and see the issue

Could you please provide me the solution for this issue or recommend some kind of workaround?

sample below

<!DOCTYPE html>
<html>
<head>
  <title>Link Shifting Tool</title>
  <!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
  <meta name="description" content="Allow the user to shift the end of a link that is connected with a rectangular node." />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://gojs.net/latest/release/go.js"></script>
  <script src="https://gojs.net/latest/extensions/LinkShiftingTool.js"></script>
  <script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
  <script id="code">
    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            "undoManager.isEnabled": true
          });
      myDiagram.toolManager.mouseDownTools.add($(LinkShiftingTool));

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          {
            fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides,
            fromLinkable: true, toLinkable: true,
            locationSpot: go.Spot.Center
          },
          new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, { fill: "lightgray" }),
          $(go.TextBlock, { margin: 10 },
            { fromLinkable: false, toLinkable: false },
            new go.Binding("text", "key"))
        );

      myDiagram.linkTemplate =
        $(go.Link,
          {
            reshapable: true, resegmentable: true,
            relinkableFrom: true, relinkableTo: true,
            adjusting: go.Link.Stretch
          },
          // remember the (potentially) user-modified route
          new go.Binding("points").makeTwoWay(),
          // remember any spots modified by LinkShiftingTool
          new go.Binding("fromSpot", "fromSpot", go.Spot.parse).makeTwoWay(go.Spot.stringify),
          new go.Binding("toSpot", "toSpot", go.Spot.parse).makeTwoWay(go.Spot.stringify),
          $(go.Shape),
          $(go.Shape, { toArrow: "Standard" })
        );

      myDiagram.model = new go.GraphLinksModel([
        { key: "Alpha", location: "0 0" },
        { key: "Beta", location: "0 200" }
      ], [
          { from: "Alpha", to: "Beta" }
        ]);

      myDiagram.addDiagramListener("InitialLayoutCompleted", function(e) {
        // select the Link in order to show its two additional Adornments, for shifting the ends
        myDiagram.links.first().isSelected = true;
      });
	  
      setInterval(() => {
        const node = myDiagram.findNodeForKey("Alpha");
        const location = node.location.x > 100
            ? new go.Point()
            : node.location.copy().offset(1, 0);
        node.location = location;
        }, 100);
    }
  </script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <p>
    This sample demonstrates the LinkShiftingTool, which is an extra tool
    that can be installed in the ToolManager to allow users to shift the end
    point of the link to be anywhere along the sides of the port with which it
    remains connected.
  </p>
  <p>
    This only looks good for ports that occupy the whole of a rectangular node.
    If you want to restrict the user's permitted sides, you can adapt the
    <code>LinkShiftingTool.doReshape</code> method to do what you want.
  </p>
</div>
</body>
</html>

2 posts - 2 participants

Read full topic

Hi, I’m trying to connect fixed sized and positioned nodes (from https://gojs.net/latest/samples/absolute.html) inside an already built table layout in html, such that nodes are connected from column to column (always from left to right) where each node in the previous column is connected to all the other nodes in the next column with specified nodes.

image1140×753 24 KB

As you can see I’m using the default layout & link, node templates with { routing: go.Link.AvoidsNodes, curve: go.Link.Bezier } and { portId: '', fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides } respectively, in order for linking nodes but avoid overlapping of links with each other and other nodes, but the problem is that whenever we have some densely packed configuration of nodes, the links don’t always take the most optimal path like e.g. below.

image1155×750 190 KB

So my question is that is there a pre-built or custom layout that we can use to populate links between such configurations of nodes such that links remain a bit more compact, and each link avoids other nodes and links as much as possible while keeping the diagram readable?

Thanks,
Ahmed.

9 posts - 2 participants

Read full topic

Hello Walter, I created Node with two elements (Picture and TextBlock). I want resize Picture and TextBlock separately and Node totally, I found example with Part.resizeObjectName, but I can resize only one object (textBlock or Picture). Can you help me, please?

2 posts - 2 participants

Read full topic

Hi, we want to achieve link functionality in our diagram as shown in the below figure-:

image515×667 66.9 KB

We have tried a few properties in our diagram to achieve the link functionality as shown in the above figure. Here are our code -:

$(go.Link,
{ selectable: true, selectionAdornmentTemplate: ProcesslinkSelectionAdornmentTemplate }, { relinkableFrom: true, relinkableTo: true, reshapable: true }, {
routing: go.Link.Orthogonal,
curve: go.Link.Bezier,
curviness: 0,
smoothness:1,
adjusting: go.Link.Stretch,
fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides,
},

From this code we are unable to achieve the expected output, Here is snippets of our output-:

The functionality we want to achieve-:

• 1. If Nodes are arranging vertically straight then links should follow a straight path.
• 2. If Nodes are arranging vertically but not in a straight line then the link should follow the curve path with the shortest path (As per defined figure).
• 3. If another node is drag-drop in b/w two connected nodes then the link should follow avoid nodes with curve path (with respective to drag-drop node).

2 posts - 2 participants

Read full topic

Please find the attached positioning format. which is in left side is in correct format, actually how do we move the node to keep it center?

PositioningIssue802×477 18.9 KB

6 posts - 2 participants

Read full topic

Hi, I would like to know how to Change Printer Properties in coding. I have installed Printers on Dropdown Button please see the attached image .

Thank you in advance

2 posts - 2 participants

Read full topic