Initialize node data when dragging from palette

I’m trying to generate data property of a node which is created by dragging a node from the palette to the diagram. I do it in the function below (taken from Angular Basic sample)

 public diagramModelChange(changes: go.IncrementalData): void {
    this.skipsDiagramUpdate = true;

    this.hasChanged = changes !== null;

    // initialize node data
    if (changes.modifiedNodeData.length) {
      changes.modifiedNodeData[0].stepDefinitionCode = 'generated';

    this.diagramNodeData = DataSyncService.syncNodeData(changes, this.diagramNodeData);
    this.diagramLinkData = DataSyncService.syncLinkData(changes, this.diagramLinkData);
    this.diagramModelData = DataSyncService.syncModelData(changes, this.diagramModelData) as any;

the stepDefinitionCode is set but when reaching the inspector code, the value is an empty string (as definied in the palette below :

  public paletteNodeData: Array<go.ObjectData> = [

    { key: 'PaletteTaskNode', color1: 'white', color2: 'green', figure: 'RoundedRectangle', label: 'Task', stepDefinitionCode: '' },



How come the model is not properly updated ? Is this the right place for doing this ?

Definitely not there – never involve external frameworks unless you have to.

Implement an “ExternalObjectsDropped” DiagramEvent listener. There are examples in the samples.

that sounds like the right thing to do. However when I do this :

dia.addDiagramListener('ExternalObjectsDropped', (e: go.DiagramEvent) => {

i can’t make sense of the event value :

Can I find the added node in the event ?

Here’s the documentation:

The dropped Parts are in the e.subject collection.

well, maybe it is, but I don’t see anything that looks like a node here :


It’s not clear how to access the dropped node and set its data from this event. And I didn’t find any sample that clearly shows how to achieve that. Am I missing something here ?

It’s a collection because the user may have dropped multiple parts (nodes and links).

$(go.Diagram, . . .,
    "ExternalObjectsDropped": function(e) {
      e.subject.each(function(p) { console.log(p.toString()); });
    . . .

ok, I got it now. Thanks.