Setting data inside LinkDrawn event

GoJS
1

EDIT : please see this sample app that reproduces the issue Microsoft OneDrive - Access files anywhere. Create docs with free Office Online.

Drawing a line from one node to another was working just fine up until now. But I have changed my link template to take advantage of binding for some properties like arrowFrom, arrowTo, etc…

 dia.linkTemplate =
      $(go.Link,  // the whole link panel
        {
          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) })
        // )
      );

Since I did that, this is what I get when drawing a link :

image

I have the following LinkDrawn event

 dia.addDiagramListener('LinkDrawn', (e: go.DiagramEvent) => {
      e.subject.data.transitionCode = '';
      e.subject.data.parsingOrder = 0;
      e.subject.data.arrowheadTo = 'Standard';
      e.subject.data.arrowheadFrom = 'Standard';
      e.subject.data.lineType = null;
      e.subject.data.color = 'Black';
    });

The code is hit when drawing the link and all properties are set. Yet it does not look right.

If I don’t use the binding and use a hardcoded value for fromArrow and toArrow, it works just fine.

Note that I’m using the Angular wrapper. Don’t know if it makes a difference.

EDIT

Actually I noticed that if I don’t bind arrowFrom and arrowTo I don’t get this black square and this is why I thought these two properties were the problem. However if I change this line :

e.subject.data.color = 'Black';
to
e.subject.data.color = 'Red';

the line drawn is still black. So in the end I think the problem is not related to the arrow head binding but it is more related to how I handle the linkDrawn event because it seems no binding is updated at all ! Am I doing something wrong here ?

And by the way, this is what the data looks like when the event is fired :

image

In the beginning the data properties are missing. I guess because javascript just add them, it does not crash. But could it be that they should be already present on the data ? If so, how ?

2

When you are updating data properties, you should always do so with calls to Model.set. You may also want to provide some default values for the arrowheads in case those data properties aren’t set.

$(go.Shape,  // arrowhead
  { toArrow: 'Standard' },
  new go.Binding('toArrow', 'arrowheadTo'))
3

Yes, I had the same issue in my other ticket and it fixed it. However for this one I still have the black square showing when binding toArrow and fromArrow, even if I change the code to :

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

         e.diagram.model.set(this.selectedNode.part.data, 'arrowheadTo', 'Circle');

        e.diagram.model.set(this.selectedNode.part.data, 'arrowheadFrom', 'Circle');

    });

Is this not the correct way ? I tried using a transaction too, but no luck. Would be great to get an error message in the console instead of a black square in place of the link.

4

Oh, I figured it out. I had to do this instead :

  e.diagram.model.set(e.subject.part.data, 'fromArrow', 'Circle');
   e.diagram.model.set(e.subject.part.data, 'toArrow', 'Circle');

I was using this.selectedNode (not sure why that doesn’t work though as it didn’t raise any error) Again, better error feedback would be great.

5

It’s JavaScript, so referring to a non-existent property will just get you undefined.

For errors that we can check for, use the go-debug.js library rather than the go.js library.

1 Like