Where to override redrawing a link when one of its linked nodes is moved

GoJS
1

Hi,

i have 3 questions regarding links, and the relinkingtool;

1.
in our application our users are able to move the points of a link so they can draw any shape of links they want. In the default behaviour the link points are all being recomputed when a node is moved, as you can see below.

Screen Shot 2016-02-23 at 12.47.37.png984×508 17.2 KB

Screen Shot 2016-02-23 at 12.47.48.png972×494 25.4 KB

I would like to change this behaviour to only recompute the last point, so the rest of the link’s shape remains intact. Like seen below.

Screen Shot 2016-02-23 at 12.47.37.png984×508 17.2 KB

Screen Shot 2016-02-23 at 12.48.21.png976×494 17.7 KB

Could you point me in the right direction of where i should do this? I couldn’t find it in the documentation.

2.
How do i change the links handles? i would like to add a transparent area around them to make it easier to click on it.

Edit Q2

I found out where to change to handles, but what i can’t get is to have a clickable area around the handle. I tried creating a panel with two shapes, one visible and one transparent, but when i do that, i get an error from the LinkReshapingTool.reshape function. It says the point normally passed to the function is undefined. Any ideas on this?

3.
When a link’s point is dragged in line with the two neighbouring spots, it gets automatically deleted. Where, when and how is this done?

Thanks,
Tim

2

  1. I think you want to set Link.adjusting to go.Link.End. But note that the default routing for Orthogonal links results in 6 points in the route (Link.points). The bottom screenshot shows a link with 7 points, which would need to be added, either explicitly or automatically by overriding Link.computePoints. (See the updated documentation in 1.6: Page Not Found -- Northwoods Software)

  2. Add another Shape to your Link template that is thick but transparent. For example, take a look at the two Shapes in the Flow Chart’s link template that have GraphObject.isPanelMain set to true. One is transparent and wide (and also used for highlighting), and one is narrow and what everyone normally sees.

  3. That’s all implemented by the LinkReshapingTool.

3

1.

[quote=“walter, post:2, topic:6607”] I think you want to set
Link.adjusting to go.Link.End. But note that the default routing
for Orthogonal links results in 6 points in the route (Link.points).
The bottom screenshot shows a link with 7 points, which would need
to be added, either explicitly or automatically by overriding
Link.computePoints. (See the updated documentation in 1.6:
Page Not Found -- Northwoods Software) [/quote]

adjusting to go.Link.End was exactly what i wanted. Note that i have
the routing set to Normal, not Orthogonal.

2.

I understand what you mean and i also already did that for the links to make it easier to click on them, but it doesn’t work for the handles. How would i do this for the handles?

I used this construction for the linkingtool handlearchetypes, but it doesn’t work for the linkreshapingtool handlearchetypes

$(go.Panel, 'Table', { segmentIndex: segmentIndex, isPanelMain: true },
  $(go.Panel, 'Table', { row: 0, column: 0,}, 
    $(go.Shape, 'Diamond', { width: 10, height: 10, fill: '#ADD8E6', stroke: '#66B4F3' })
  ),
  $(go.Panel, 'Table', { row: 0, column: 0,}, 
    $(go.Shape, 'Circle', { width: 30, height: 30, fill: 'transparent', stroke: 'transparent' })
  ) 
);

When is set it for the reshapingtool handlearchetypes i get this error

Uncaught Error:  value is not an instance of Point: undefined

3.

Ok thanks

4

If you are talking about the handles used to reshape (i.e. manually re-route) a Link, those are defined on the LinkReshapingTool: LinkReshapingTool | GoJS API. For example, the Draggable Link sample, Draggable Link, changes those handles as follows:

  "linkReshapingTool.handleArchetype":
      $(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),

The LinkingTool is used for drawing a new Link, not for reshaping an existing Link.

5

Yes i know, and like i said, my approach works for the linkingtool handlearchetypes, but not for the linkreshapingtool handlearchetypes.

$(go.Panel, 'Table', { segmentIndex: segmentIndex, isPanelMain: true },
  $(go.Panel, 'Table', { row: 0, column: 0,}, 
    $(go.Shape, 'Diamond', { width: 10, height: 10, fill: '#ADD8E6', stroke: '#66B4F3' })
  ),
  $(go.Panel, 'Table', { row: 0, column: 0,}, 
    $(go.Shape, 'Circle', { width: 30, height: 30, fill: 'transparent', stroke: 'transparent' })
  ) 
);

From what i understand you can only set a single shape to be the handlearchetype in the relinkingtool, because every other way i’ve tried results in the error: value is not an instance of Point: undefined. Is this correct?

6

Oh, I see what you mean now. Yes, that appears to be a bug with the LinkReshapingTool. We’ll have to figure out how to fix it.

7

OK, this will be fixed in version 1.5.23 and in the next 1.6 release. Thanks for reporting the bug.