Enlarge the click area on the end point when relink

GoJS
1

Hi,

We are using a relinkable link. The behavior is when selecting a link, the end points of it are highlighted. Then if user select on the endpoint, he should be able to relink the link to any other node. This functionality works fine with help from your sample and document. However, it is very easy to move connected node mistakenly if the cursor is not on the end point accurately. Hence, my question is how should I enlarge the action area of the endpoint? I don’t want to increase the size of endpoint but just want to increase the clickable area of the end point. In this way, user will be easier to select end point correctly on a link. Thanks in advance.

Look at the picture below, only the area in red is clickable. I would like to increase this area.

Regards,
Chuan

2

Customize the relinking handle to be larger, as documented at RelinkingTool | GoJS API.

Maybe something like this when initializing the Diagram:

          "relinkingTool.toHandleArchetype":
            $(go.Panel,
              {
                background: "transparent",
                segmentIndex: -1,
                cursor: "pointer"
              },
              $(go.Shape, "Diamond",
                {
                  margin: 4, width: 8, height: 8,
                  fill: "lightblue", stroke: "dodgerblue"
                })
            ),

Do something similar for the RelinkingTool.fromHandleArchetype, if you want.

In version 1.7 we will include an extensions/Templates.js file which shows the definitions of all of the predefined templates and tool archetypes.

3

Thanks it works. And margin does everything here. One thing I don’t understand is why I cannot change margin directly. There is no effect by doing that on default toHandleArchetype

i.e. diagram.toolManager.relinkingTool.toHandleArchetype.margin = 4;

4

GraphObject.margin reserves space around the object in the coordinate system of the containing Panel. Note that it was essential to set the Panel.background to some non-null value. Just setting Shape.background would only affect the background of the Shape, but it would not extend beyond it into the margin.

http://gojs.net/latest/intro/panels.html

5

I see. The panel for end point is null by default. Thanks.

6

Here’s the relevant code from extensions/Templates.js in version 1.7:

// Set up RelinkingTool's default handle archetypes
function setupRelinkingToolHandles(tool /* : go.RelinkingTool */) {
  var h = new go.Shape();
  h.figure = 'Diamond';
  h.desiredSize = new go.Size(8, 8);
  h.fill = 'lightblue';
  h.stroke = 'dodgerblue';
  h.cursor = 'pointer';
  h.segmentIndex = 0;

  tool.fromHandleArchetype = h;

  h = new go.Shape();
  h.figure = 'Diamond';
  h.desiredSize = new go.Size(8, 8);
  h.fill = 'lightblue';
  h.stroke = 'dodgerblue';
  h.cursor = 'pointer';
  h.segmentIndex = -1;

  tool.toHandleArchetype = h;
}

Note that the handles are not Panels.

7

Thanks. Is that available for licensed customer to download now?

8

It will be there in the next beta release.