Modify Movable & Linkable Node Area

GoJS
1

Hello, I am currently implementing nodes on a diagram using GoJS version 2.3.12.
These nodes can be repositioned by dragging their central portion, and by dragging the edge, they can be linked to other nodes.

I am seeking advice on how to adjust the “movable area” and “linkable area” for these nodes.

The specifications of the current nodes are illustrated on the left side of the image below.

gojs-forum
gojs-forum1742×533 40.2 KB

Could you please provide guidance on the steps to modify the “movable area” and “linkable area” as depicted on the right side of the image?

Your assistance in this matter would be greatly appreciated.
Thank you very much for your consideration.

2

How have you defined your node template?
Did you declare the background/border Shape to be the port and to be linkable?

If so, you can add a transparent Shape in front of that, with the size that you want.

Alternatively you can make the TextBlock that non-port object.

3

Thank you for your reply.
The node template is as follows.

const nodeTemplate = $(
    go.Node,
    "Auto",
    {
        resizable: true,
        isShadowed: true,
        shadowOffset: new go.Point(3, 3),
        shadowBlur: 10,
        shadowColor: "rgba(0, 0, 0, 0.5)",
    },
    $(
        go.Shape,
        "RoundedRectangle",
        {
            fill: "#4DC0B2",
            stroke: "#37AB9D",
            strokeWidth: 1,
            shadowVisible: true,
            portId: "",
            cursor: "pointer",
            alignment: go.Spot.Center,
            fromLinkable: true,
            fromLinkableSelfNode: false,
            fromLinkableDuplicates: false,
            toLinkable: true,
            toLinkableSelfNode: false,
            toLinkableDuplicates: false,
            margin: 5,
        },
        new go.Binding("fill", "style", (style) => style.fillColor),
        new go.Binding("stroke", "style", (style) => style.edgeColor),
        new go.Binding("strokeWidth", "style", (style) => style.edgeWeight),
    ),
    $(
        go.TextBlock,
        {
            name: "TEXTLABEL",
            editable: true,
            isMultiline: true,
            shadowVisible: false,
            overflow: go.TextBlock.OverflowEllipsis,
        },
        new go.Binding("text", "label").makeTwoWay(),
        new go.Binding("font", "style", (style) => style.font),
        new go.Binding("stroke", "style", (style) => style.fontColor),
        new go.Binding("isUnderline", "style", (style) => style.underline),
        new go.Binding("textAlign", "style", (style) => style.textAlign),
    ),
    new go.Binding("position", "position", go.Point.parse).makeTwoWay(
        go.Point.stringify,
    ),
    new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(
        go.Size.stringify,
    ),
);

Where do I add the transparent Shape?
Also, I wish to keep the behavior of TextBlocks and Shapes already set up after adding it (e.g. editable text, resizable Shapes, linkable Shape features).

4

As the second element, behind the TextBlock. Set its fill to “transparent” and its strokeWidth to zero. Have it stretch to Fill, but give it a margin so that it doesn’t completely fill the area, thereby allowing a convenient margin for the port Shape to be exposed to the mouse/finger for drawing a new link.

5

Thank you, Walter.

As you suggested, I added a shape with transparent set to fill between the shape and the TextBlock as follows (I wanted to align the draggable area exactly with the shape of the first element, so this is how I described it.).

$(
        go.Shape,
        "RoundedRectangle",
        {
            fill: "transparent",
            strokeWidth: 0,
        },
        new go.Binding("desiredSize", "size", (size: string) => {
            const sizeObj = go.Size.parse(size);
            const width = Math.max(sizeObj.width - 30, 0);
            const height = Math.max(sizeObj.height - 30, 0);
            return new go.Size(width, height);
        }),
)

My problem is completely solved. Thank you very much for your help.