Limit the start of a link creation to only a portion of the node

GoJS
1

Let’s say that I have a node which is a 100x100 Rectangle. I’ve set fromLinkable and toLinkable to true.

Now, I can start creating a link from anywhere in the node. What if I wanted to restrict the link creation part of it to just say, the bottom right corner?

At first, I tried doing this by creating a Panel with two Rectangles, the first being the outer large one, and then an inner Rectangle, placing it at the bottom right corner. The inner Rectangle has fromLinkable set to true, and the outer Rectangle doesn’t.

This limits link creation from the bottom right corner only. Great! However, if I move the mouse around the node as a whole, the origin of the link doesn’t revolve around the node as before anymore. It revolves only around the inner Rectangle, as shown below:

How do I get the link to be created only from one portion of the node, but then have the link actually attach to the node instead of the inner Rectangle?

2

You should have the port object be the object with which the link routes will connect with. That might be the whole Node or might be a Panel inside the Node.

You will add the smaller object to that Panel that is a port. But you will set GraphObject.fromLinkable and GraphObject.toLinkable to false on the big Shape within the port Panel:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Panel, "Spot",
          { width: 100, height: 100, portId: "", fromLinkable: true, toLinkable: true },
          $(go.Shape,
            { fill: "white", fromLinkable: false, toLinkable: false },
            new go.Binding("fill", "color")),
          $(go.Shape,
            {
              fill: "gray", cursor: "pointer",
              width: 22, height: 22, alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.BottomRight
            })
        ),
        $(go.TextBlock, ...)
    )

That prevents the big Shape from acting as a starting point for drawing new links.

3

Hey Walter,
That little box for me is part of a hover adornment. Setting makeTwoWay() did not do much for the adornment, unfortunately.

How should I adapt it for an adornment?

4

The definition of the TextBlock has nothing to do with your question, which only deals with what is defined to be a port at which the user can start drawing a new link. I have updated the example code, above.

Your problem description seemed to be quite descriptive and precise (that’s good!) so I am surprised it has anything to do with Adornments, since it did not mention them. My answer assumed you only wanted to change the visual tree of your node template.

5

Hey Walter,
I didn’t quite understand your reply there.

Let me reiterate on the behaviour that I have right now:
On mouseHover, I show an adornment, which is the grey box in the bottom right corner.

Now, what I’d like to have is - create a link only from the small grey box which attaches to the node only. If I click on anywhere else on the node (other than the grey box), I should be able to drag it around.

In your solution which you’ve mentioned earlier, places the box as a part of the node, rather than an hover adornment.

6

Hey Walter,
I got the expected behaviour by adding an empty placeholder in my adornment, as follows:

$$(go.Panel, "Spot",
     $$(go.Shape, {stroke: null, fill: "transparent"}),
     $$(go.Placeholder)
),

What I understand is that I’ve just created an empty overlay over the entire node, which prevents the node from getting the touch events as long as the adornment is active. I verified this by setting fill=red, and the entire node was overlaid with red.

Is this the right approach? What do you think of this technique?

7

I’m not sure I understand your requirements well enough to comment, but the idea is certainly useful in some situations.