We are currently working on a new web application to replace a legacy .NET application that used GoDiagram for it’s canvas functions. Our goal is to keep the two application compatible until all the old application functionality is transitioned to the new application. This application keeps the location of nodes in our own custom canvas object. When we load diagrams created with GoDiagram on the web canvas, all nodes are in same position as it was saved on the .NET app. I have set up two-way binding on the location of nodes in the templates. The problem is once a node is moved by few pixels (using mouse), the location is updated on the node, however there is a large difference between the original point and updated point values. For example, a node location maybe 50,100 but when its moved, the location point x/y values are in thousands. In some instances, the values are negative.
Are there any guidelines/suggestoins as to how we can convert the original locations to new coordinates for the GoJS and if there is a way to convert the updated values in GoJS back to coordinates compatible with GoDiagram?
Those results are very surprising. What is the value of Diagram.position at the time? Or, before moving any nodes, look at the value of Node.location on each of the nodes to make sure they really are where you think they should be.
In general the measurement of text will be different between the platforms, so anything which depends on the size of text might be slightly differently sized. But there shouldn’t be any huge differences.
Thanks for quick reply. Here is what see now:
The diagram I am loading contains two nodes with locations of Point(97,308) Point(428,301) as defined in the model. In the template the location is defined as:
new go.Binding(‘location’, ‘’, (canvasNode: DataflowCanvasNode) => {
// tslint:disable-next-line: no-console
console.log(canvasNode.location.toString());
return canvasNode.location;
}).makeTwoWay(),
Once the diagram is loaded this is what is displayed for these two: Point(970.0000000000002,3080.000000000001) Point(4280.000000000001,3009.9999999999995)
This is how I display them:
this.diagram.addDiagramListener(‘ObjectSingleClicked’, (e) => {
// tslint:disable-next-line: no-console
this.diagram.nodes.each((n: any) => { console.log(n.key + ': ’ + n.location.toString()); });
});
One thing I see is that even when these values change after loading, the model is not updated! However if I move any one of the nodes the location is updated for just that node with these values.
this how the diagram is initialized:
public create(element: ElementRef, model: go.Model): Observable<go.Diagram> {
return this.templates.getNodeTemplate().first()
.pipe(map((nodeTemplate) => {
const diagram: go.Diagram = $(go.Diagram, element.nativeElement, {
commandHandler: new go.CommandHandler(),
initialContentAlignment: go.Spot.Center,
‘undoManager.isEnabled’: true, // enable undo & redo
});
// Add a layer for nodes to keep links behind nodes.
const foregroundLayer: go.Layer = diagram.findLayer('Foreground');
diagram.addLayerBefore($(go.Layer, { name: 'Nodes' }), foregroundLayer);
diagram.toolManager.dragSelectingTool.isPartialInclusion = true;
diagram.toolManager.dragSelectingTool.box =
$(go.Part,
{ layerName: 'Tool' },
$(go.Shape, 'Rectangle',
{ name: 'SHAPE', fill: null, stroke: 'dodgerblue', strokeWidth: 2 })
);
diagram.linkTemplate = this.templates.getLinkTemplate();
diagram.nodeTemplate = nodeTemplate;
if (model) {
diagram.model = model;
}
diagram.grid.gridCellSize = new go.Size(24, 24);
diagram.toolManager.panningTool.isEnabled = false;
// selection of canvas items should use intercept instead of contains
diagram.toolManager.dragSelectingTool.isPartialInclusion = true;
return diagram;
}));
}
model is set using GraphLinksModel:
this._goModel = new go.GraphLinksModel(this._canvasModel.nodes, this._canvasModel.edges);
Array of nodes and edges. They are either empty arrays if user is creating a new diagram or they are loaded by nodes/edges objects. Binding is done through the templates.
Thanks Walter,
These objects have no reference to DOM and are pure POJOs. However I think I resolved my issue to a point by revising how location point was created and converting the x/y using ParsInt. You can consider this issue close. I have another issue for compatibility, but I have to research it.
