Drag nodes - dimensioning links error

GoJS
1

Hey guys,

I am having a small issue with dimensioning links. Let’s suppose we have 1 node, with a dimensioning link from the top left to the top right, everything is rendered correctly. When I’m trying to move this node, similar to this demo Allow Users to Drag Links and Reconnect Them on Drop | GoJS Diagramming Library, I’m getting the following exception:

image
image706×227 9.13 KB

I tried getting at the bottom of this, but I couldn’t do much, any idea what might cause this? I suspect I’m missing some kind of configuration on the dimensioning link

2

Ah, that’s an interesting combination of features.

OK, first change the link template(s) that are DimensioningLinks so that they are not movable.

    myDiagram.linkTemplateMap.add('Dimensioning',
      new DimensioningLink({ movable: false })
        . . .

(Alternatively, you could modify the DimensioningLink constructor so that they are all not movable by default.)

Second, override DraggingTool.mayDragLink to also check for whether the link is movable:

    myDiagram = new go.Diagram('myDiagramDiv', {
      'draggingTool.dragsLink': true,
      'draggingTool.mayDragLink': function(link) {
        if (!link.movable) return false;
        return this.diagram && this.diagram.allowRelink;
      },
      . . .
1 Like
3

Hi Walter,

Thank you for the suggestion, unfortunately I am still getting the same error. Here is the configuration for the diagram and the dimensioning links, maybe this will help:

this.diagram = new go.Diagram(htmlId, {
      contentAlignment: go.Spot.Center,
      grid: new go.Panel('Grid', { gridCellSize: this.cellSize }).add(
        new go.Shape('LineH', {
          stroke: '#D0E5F9',
        }),
        new go.Shape('LineV', {
          stroke: '#D0E5F9',
        })
      ),
      initialAutoScale: go.AutoScale.Uniform,
      'grid.visible': true,
      'animationManager.isEnabled': false,
      'undoManager.isEnabled': true,
      'draggingTool.dragsLink': true,
      'draggingTool.mayDragLink': (link: DimensioningLink) => {
        if (!link.movable) return false;
        return this.diagram && this.diagram.allowRelink;
      },
      'relinkingTool.isUnconnectedLinkValid': true,
      'linkingTool.isUnconnectedLinkValid': true,
      'draggingTool.isGridSnapEnabled': true,
      'draggingTool.gridSnapCellSpot': go.Spot.TopLeft,
      'resizingTool.isGridSnapEnabled': true,
      'resizingTool.cellSize': this.cellSize,
      'draggingTool.gridSnapCellSize': this.cellSize,
      'draggingTool.isCopyEnabled': false,
      'toolManager.mouseWheelBehavior': go.WheelMode.Zoom,
      'padding': new go.Margin(this.gridPadding),
      minScale: 0.03,
      maxScale: 8,
      model: new go.GraphLinksModel({
        linkKeyProperty: 'key',
      }),
    });

export const measurementLinkTemplate = new DimensioningLink({
  layerName: NodeLayers.Measurements,
  movable: false,
})
  .bind('fromSpot', 'fromSpot', go.Spot.parse)
  .bind('toSpot', 'toSpot', go.Spot.parse)
  .bind('direction')
  .bind('extension')
  .bind('inset')
  .bind('gap')
  .bind('decimalSeparator')
  .bind('unit')
  .bind('visible')

Hopefully this helps, let me know if there is anything else I can provide.

4

Another thing that might be helpful, let’s suppose we have 2 nodes this time, and additionally to the previous example we have a dimensioning link between the first node and the second node. If I drag one of these nodes, I get an additional error, similar to the one above:

image
image762×412 17.6 KB

I hope this helps as well, and thank you for the quick reply!

5

DraggingTool.mayDragLink is a method, so you cannot define it as an arrow function and still refer to the correct value for this.

    'draggingTool.mayDragLink': function(link) {  // method override must be a function
      if (!link.movable) return false;
      return this.diagram && this.diagram.allowRelink;
    },

Did you add decimalSeparator and unit as properties of your modification of the DimensioningLink class? They are not ones that we defined, yet they are the targets of Bindings.

I cannot reproduce the error you are getting.

6

The function won’t get to that point anyway, because link.movable is false, so that’s not an issue. We added decimalSeparator and unit to extend DimensioningLinks, but even if I comment those 2 bindings, nothing is changed.

7

So what can I do to reproduce the exception?

8

I am not quite sure, I will try to simplify the implementation for the dimensioning link and the diagram. The error is coming from go.js implementation though, when trying to change the location of a point in the dimensioning link. I was hoping the console error would be helpful for you to point me in the right direction :)

9

You are using the debug version of the library, which is helpful.

I’m guessing that your code is incorrectly trying to modify the Point.x or y value of a Point that is owned by a GraphObject. Although JavaScript does not have support for structured heap-allocated objects that are copied by value, we’ve tried to treat Point, Size, Rect, Margin, and Spot as if they were. In this case maybe you are doing something like:

someGraphObject.segmentOffset.x = 17
10

From the console error that graph object is for sure a dimensioning link. I will investigate further but if you have any other ideas, please let me know. Thanks!