Hello Walter, I spent many hours navigating through lots of examples and I can’t find what I’m looking for because the solutions are too complex and I know that in our team we need a simple solution out of the box.
Basically, we like the go.GridLayout and the default flow left-to-right, top-to-bottom and how the Diagram re-draws on window resize, that’s perfect.
The issue is that the Link shape from the last Node on the row to the first Node on the next row down crosses over other Nodes etc etc, it doesn’t look right (Serpentine Layout Links looks great). I won’t write more explanation to save you reading time, you’ll know what I mean.
Thank you so much! we should be purchasing a license soon, we’re still configuring our domain environment etc, it’s a brand new internal React/TS app.
import * as go from 'gojs';
/**
* GoJs Diagram initialization method, which is passed to the ReactDiagram component.
*/
export default (props: any) => {
return () => {
const { externalObjectsDropped, selectionChanged } = props;
const $ = go.GraphObject.make;
// set your license key here before creating the diagram: go.Diagram.licenseKey = "...";
const diagram = $(go.Diagram, {
isTreePathToChildren: false, // links go from child to parent
layout: $(go.GridLayout),
'undoManager.isEnabled': true, // must be set to allow for model change listening
// 'undoManager.maxHistoryLength': 0, // uncomment disable undo/redo functionality
'clickCreatingTool.archetypeNodeData': {
text: 'new node',
color: 'lightblue',
},
model: new go.GraphLinksModel({
linkKeyProperty: 'key', // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
}),
allowDrop: true,
maxSelectionCount: 1,
});
const docletTitle = $(go.TextBlock, new go.Binding('text', 'title'));
const docletTags = $(go.TextBlock, new go.Binding('text', 'tags'));
const docletSummary = $(
go.TextBlock,
new go.Binding('text', 'summary')
);
const docletMetadata = $(
go.TextBlock,
new go.Binding('text', 'metadata')
);
const nodeTemplate = $(
go.Node,
new go.Binding('visible', 'visible'),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(
go.Point.stringify
),
'Auto',
{ selectionChanged },
$(
go.Shape,
new go.Binding('figure', 'fig'),
new go.Binding('fill', 'color')
),
$(go.Panel, 'Vertical', [
docletTitle,
docletTags,
docletSummary,
docletMetadata,
])
);
const linkTemplate = $(
go.Link,
{
routing: go.Link.AvoidsNodes,
selectable: false,
},
$(go.Shape, { strokeWidth: 2, stroke: 'black' })
);
function handleDrop() {
externalObjectsDropped(diagram);
}
diagram.linkTemplateMap.add('', linkTemplate);
diagram.nodeTemplateMap.add('', nodeTemplate);
diagram.addDiagramListener('ExternalObjectsDropped', handleDrop);
return diagram;
};
};
