Users can't grab shapes and move them easily

GoJS
1

The default GoJS behavior of a node only allows a user to grab and move a shape by clicking on the text. This is a very small target and our users complain they don’t have enough space to grab and move a shape. Meanwhile, they have too much space to drag and connect. We want to increase the area of the node so it can be grabbed from a larger surface area. I am assuming this can be done but I don’t seem to know the search criteria leading me to the solution. Here is a diagram of our goal:

image
image970×548 10.9 KB

2

You just need to add a “transparent” Shape that is not part of the port and that occupies the area that you want. There are lots of ways of doing that. Here’s one:

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center, width: 100, height: 60 },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Shape,
      { fill: "white", portId: "",
        fromLinkable: true, toLinkable: true, cursor: "pointer" },
      new go.Binding("fill", "color")),
    $(go.Shape, { stretch: go.GraphObject.Fill, margin: 8, fill: "cyan", strokeWidth: 0 }),
    $(go.TextBlock,
      new go.Binding("text"))
  );

image

Note that for expository purposes I made that second Shape’s Shape.fill cyan just so you can see the area it covers. Presumably you would use “transparent” instead.

3

Thank you!!