Taking action when dropping shape to diagram

GoJS
1

(Angular version)

When I drag a shape from my palette to the diagram canvas, I’d like to clear the label property from the data model of the shape (inherited from the one in the palette).

I have done that

 dia.addDiagramListener('ExternalObjectsDropped', (e: go.DiagramEvent) => {
      e.subject.each(p => {
      
        if (p instanceof go.Link) {
       
          p.data.label = '';
      
         e.diagram.model.commit((m) => {
                             m.set( how to access the node here ?  , 'label', '');
          });
        }
      });
    });

p.data.label is indeed cleared but this is not reflected on the screen. I think I need to update the link shape label in the commit method. But I can’t figure out how to access it from there. Any idea what I should do ?

2 
if (p instanceof go.Link) e.diagram.model.set(p.data, "label", "");

Note:
a) don’t execute transactions within a loop
b) in this case there is already a transaction ongoing, so you don’t need to execute one at all

3

It still doesn’t work. When I drag the link from the palette to the diagram and drop it, the label remains on the diagram.

This is the definition of my link template :

dia.linkTemplate =
      $(go.Link,  // the whole link panel
        {
          // a mouse-over highlights the link by changing the first main path shape's stroke:
          mouseEnter: (e, link: go.Link) => { link.path.stroke = 'rgba(0,90,156,0.3)'; },
          mouseLeave: (e, link: go.Link) => { link.path.stroke = 'transparent'; }
        },
        { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
        { relinkableFrom: true, relinkableTo: true, reshapable: true },
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4
        },
        new go.Binding('points').makeTwoWay(),
        $(go.Shape, { isPanelMain: true, stroke: 'transparent', strokeWidth: 8 }),  // thick undrawn path
        $(go.Shape, { isPanelMain: true },
          new go.Binding('stroke', 'color'),
          new go.Binding('strokeWidth', 'thickness'),
          new go.Binding('strokeDashArray', 'lineType')),
  
        $(go.Shape,  // the arrowhead
          new go.Binding('toArrow', 'arrowheadTo')),
     
        $(go.Shape,  // the arrowhead
          new go.Binding('fromArrow', 'arrowheadFrom')),
        $(go.TextBlock, new go.Binding('text', 'label'), { segmentOffset: new go.Point(0, -10) })
   
      );

And the drop event listener of the diagram

 dia.addDiagramListener('ExternalObjectsDropped', (e: go.DiagramEvent) => {
      e.subject.each(p => {
        if (p instanceof go.Node) {
          p.data.stepDefinitionCode = p.data.key;
        }
        if (p instanceof go.Link) {
          p.data.transitionCode = p.data.key;
          p.data.label = '';
          p.data.parsingOrder = 0;

          e.diagram.model.set(p.data, 'label', '')

        }
      });
    });

I can see p.data changes from “linear” (this is the label of the link in the palette) to an empty string, but the label still shows in the diagram :

image
image412×609 15.8 KB

4

As is well described in GoJS Using Models -- Northwoods Software and documented in other places, you cannot expect to modify some data property without at least notifying GoJS that the data has changed.

So you should never write:

    p.data.someProperty = someValue;

Instead you should write:

    model.set(p.data, "someProperty", someValue);
5

EDIT
forget my last reply, you were absolutely right ! I removed the line
p.data.label = ‘’;

and now it works ! Sorry about my misunderstanding.