Hi, I am getting few issues while adding a new node and a link dynamically on a button click while working with GOJS with angular 8.
Using model.addNodeData() method but it is creating the node above the previous one.
Adding the code below :
1. Init Diagram method
public initDiagram() : go.Diagram{
debugger;
const $ = go.GraphObject.make;
const dia = $(go.Diagram, {
'undoManager.isEnabled': true, // must be set to allow for model change listening
// 'undoManager.maxHistoryLength': 0, // uncomment disable undo/redo functionality
model: $(go.GraphLinksModel,
{
linkToPortIdProperty: 'toPort',
linkFromPortIdProperty: 'fromPort',
linkKeyProperty: 'key' // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
}
)
});
// define the Node template
dia.nodeTemplate =
$(go.Node, 'Auto',
{
toLinkable: true, fromLinkable: true
},
$(go.Shape, {width: 120, height: 35, strokeWidth : 0},
new go.Binding('figure','figure'),
new go.Binding('fill', 'color'),
new go.Binding("location", "loc", go.Point.parse),
),
$(go.Panel, "Table",
{defaultAlignment : go.Spot.Left, margin : 4},
$(go.RowColumnDefinition, {row : 2, column : 2}),
$(go.TextBlock,
{row : 0, column : 0},
{isMultiline: true },
new go.Binding('text', 'key'),
new go.Binding('stroke','stroke')
),
$(go.TextBlock,
{row : 1, column : 0 },
new go.Binding('text', 'desc'),
new go.Binding('stroke','stroke')
),
{ click: function(e, obj) {
console.log('called');
} }
),
);
return dia;
}
2. Default values of nodeDataArray (diagramNodeData) and method
public diagramNodeData : Array<go.ObjectData> = [
{ key: '1', desc : '2', stroke : 'white', color: '#1d1b1bb8', figure: "Rectangle", loc : "0 0"}
];
public diagramLinkData : Array<go.ObjectData> = [];
@ViewChild(‘myDiagram’, { static: true }) public myDiagramComponent: DiagramComponent;
public diagramDivClassName: string = ‘myDiagramDiv’;
public diagramModelData = { prop: ‘value’ };
public skipsDiagramUpdate = false;
// When the diagram model changes, update app data to reflect those changes
public diagramModelChange = function(changes: go.IncrementalData) {
debugger;
// when setting state here, be sure to set skipsDiagramUpdate: true since GoJS already has this update
// (since this is a GoJS model changed listener event function)
// this way, we don't log an unneeded transaction in the Diagram's undoManager history
this.skipsDiagramUpdate = true;
this.diagramNodeData = DataSyncService.syncNodeData(changes, this.diagramNodeData);
this.diagramLinkData = DataSyncService.syncLinkData(changes, this.diagramLinkData);
this.diagramModelData = DataSyncService.syncModelData(changes, this.diagramModelData);
};
- Added a listener for changedSelection and called a modify modify diagram method to call this.myDiagramComponent.diagram.model.addNodeData(data); myDiagramComponent is an element from ViewChild. I guess its working but it is showing one above the another and data array is also showing two elements.
ngAfterViewInit(){
const canvasComponent : CanvasComponent = this;
this.myDiagramComponent.diagram.addDiagramListener('ChangedSelection',(e)=>{
console.log('called while changed selection' + e);
if (e.diagram.selection.count === 0) {
canvasComponent.selectedNode = null;
}
const node = e.diagram.selection.first();
if (node instanceof go.Node) {
canvasComponent.selectedNode = node;
} else {
canvasComponent.selectedNode = null;
}
console.log(canvasComponent.selectedNode);
this.modifyDiagram(e)
this.trasferEventToConfigurationScreen(canvasComponent.selectedNode);
})
}
trasferEventToConfigurationScreen(selectedNode){
this.selectedNodeEvent.emit(selectedNode);
}
modifyDiagram(e){
debugger;
let data = { key: '3', desc : '4', stroke : 'white', color: 'red', figure: "Circle", loc : "0 -50"}
this.myDiagramComponent.diagram.model.addNodeData(data);
let val = this.myDiagramComponent.diagram.model as go.GraphLinksModel;
val.addLinkData({ key: 1, from: ‘1’, to: ‘3’ })
console.log(this.diagramNodeData);
}