Console.error appears, while adding new links to diagram using ports

#1

Hi.

I’ve got an issue. Whenever I add link to diagram, using ports pinned to nodes console.error appears as follows:
error

My makePort function:

function makePort(name, align, spot, output, input) {
      const horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
      return $(go.Shape, 'Circle',
          {
            stroke: 'transparent',
            fill: 'transparent',
            strokeWidth: 2.5,
            width: 15,
            height: 15,
            alignment: align,
            stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
            portId: name,
            fromSpot: spot,
            toSpot: spot,
            fromLinkable: output,
            toLinkable: input,
            cursor: 'pointer',
            mouseEnter: ((e, port) => {
              if (!e.diagram.isReadOnly) {
                // @ts-ignore
                port.stroke = 'white';
                // @ts-ignore
                port.fill = 'black';
              }
            }),
            mouseLeave: ((e, port) => {
              // @ts-ignore
              port.fill = 'transparent';
              // @ts-ignore
              port.stroke = 'transparent';
            })})
    }

And my node template

this.diagram.nodeTemplateMap.add('WorkflowStatus',
      $(go.Node, 'Spot',
        {
          selectionAdorned: false,
        },
        // two way location binding
        new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
        {
          locationSpot: go.Spot.Center,
        },
        $(go.Panel, 'Auto',
          $(go.Shape, 'RoundedRectangle',
            {
              strokeWidth: 0,
              height: 35,
              minSize: new go.Size(150, 35),
            },
            new go.Binding('fill', 'color')),
          {
            cursor: 'pointer'
          },
          $(go.TextBlock, '',
            {
              editable: true,
              font: 'bold 11pt Lato, Helvetica, Arial, sans-serif',
              stroke: 'black',
            },
            new go.Binding('text').makeTwoWay(), {margin: 7}),
        ),
        makePort('left', go.Spot.Left, go.Spot.Left, true, true),
        makePort('right', go.Spot.Right, go.Spot.Right, true, true),
        makePort('bottom', go.Spot.Bottom, go.Spot.Bottom, true, true),
        makePort('top', go.Spot.Top, go.Spot.Top, true, true
        )));
#2

(BTW, format your code by surrounding it with separate lines of triple backquotes.)

Could you try using go-debug.js and see if there are any warnings or errors in the console before your situation happens?

1 Like
#3

So when I try to load diagram within the debug mode, console.error apears:
image

this.diagram = $(go.Diagram, 'myDiagramDiv',
     {
       'undoManager.isEnabled': true,
       LinkDrawn: this.showLinkLabel,
       LinkRelinked: this.showLinkLabel,
     },
   );
#4

OK, so you now know the problem and can figure out the solution…

Maybe we should do that type check in the go.js runtime too. EDIT: I just confirmed that it always checks that the second argument to Diagram.addDiagramListener is a function. So you’ve probably been ignoring error messages for a while.

#5

Thanks a lot!