Link drawing area on node

GoJS
1

I can’t seem to figure this up. I have a node like on picture

image

What I want to achieve is

  • Be able to activate line drawing only outside of red area.
  • Clicking on inside of it would move the node around.
  • Also line connecting the node needs to follow the node borders.

Currently entire node is activating line drawing, so I cannot move it around.

My Code:

var groupTemplate =
    $(go.Node, "Vertical",
        { defaultStretch: go.GraphObject.Horizontal },
        {
            //fromSpot: go.Spot.RightSide, toSpot: go.Spot.LeftSide
            portId: "",
            fromLinkable: true,
            toLinkable: true,
            fromEndSegmentLength: 20,
            toEndSegmentLength: 20,
            cursor: "pointer"
        },
        $(go.Panel, "Auto",
            $(go.Shape, "RoundedTopRectangle",
                {
                    fill: "#C2C2C2",
                    stroke: "#C2C2C2",
                    //height: 25,
                },
                new go.Binding("fill", "lightgray")),
            $(go.TextBlock,
                {
                    margin: new go.Margin(4, 20, 4, 20),
                    textAlign: "center",
                    font: "10pt Roboto",
                },
                new go.Binding("text", "header"))
        ),
        $(go.Panel, "Auto",
            { minSize: new go.Size(NaN, 70) },
            $(go.Shape, "RoundedBottomRectangle",
                {
                    fill: "white",
                    stroke: "#C2C2C2"
                }),
            $(go.TextBlock,
                {
                    stroke: "#C2C2C2",
                    width: 120
                },
                { margin: new go.Margin(2, 2, 0, 2), textAlign: "center" },
                new go.Binding("text", "lsabel"))
        )
    );
2

You have made the whole Node be a port by setting its portId to a string. You have made the whole port linkable (i.e. mouse-down and drag starts the LinkingTool) by setting fromLinkable or toLinkable on the whole Node without setting those properties to false on any contained objects. That is understandable because the area that you want to be non-linkable does not correspond to the area of any of the objects in the current template.

So you are going to have to add such an object to the template. It will need to have the size and position that you have sketched in red, but it will need to be completely transparent. (Not invisible, because then it’s as if it weren’t there at all.) And of course you will need to set that new transparent Shape to be not-fromLinkable and not-toLinkable. Something like:

Node, "Spot", { fromLinkable: true, toLinkable: true, ... }
    Panel, "Vertical"
        Panel, "Auto", ...
        Panel, "Auto", ...
    Shape, { fill: "transparent", strokeWidth: 0, fromLinkable: false, toLinkable: false }
3

Excellent, worked like a charm! Thanks!