How to force user to click on the selectionObject to select the node?

GoJS
#1

Hi. I have a table-based node and I want to require the user to click on the selectionObject in order for the node to become selected. I tried exploring selectable and pickable options, but nothing seemed to give what I wanted. Currently, any click anywhere in the table results in selection. I want to ignore clicks on anything that’s not the selectionObject. How can I do this? As a corollary, I’d also like the node to be unselected when I click on anything that’s not the selectionObject.

Here’s a fiddle example: Edit fiddle - JSFiddle - Code Playground

thanks!

#2

If you set the Node.background: null, or don’t set it at all, I think you’ll get the behavior that you want. You have already set GraphObject.pickable to false on the TextBlocks.

But if you really want the background for the Node to be “gray”, this gets a lot more complicated, because that is unnatural – if it’s drawn the user can interact with it unless you set pickable to false.

I’m thinking that you could have the Panel with the two TextBlocks to be completely not pickable – it’s just that you need to make the gray background have a hole in it exactly where your lightgreen body elements are. Let me think about it after attending to other requests.

#3 
    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        { selectionObjectName: "BODY" },
        $(go.Panel, "Spot",
          { alignmentFocusName: "MAIN", background: "lightgray", pickable: false },
          $(go.Shape, { name: "MAIN", opacity: 0.0 },
            new go.Binding("desiredSize", "size", go.Size.parse)),
          $(go.TextBlock,
            { alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.BottomRight, margin: 8 },
            new go.Binding("text")),
          $(go.TextBlock,
            { alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.TopLeft },
            new go.Binding("text", "text2"))
        ),
        $(go.Shape,
          { isPanelMain: true, name: "BODY", fill: "lightgreen" },
          new go.Binding("fill", "color"),
          new go.Binding("desiredSize", "size", go.Size.parse)),
      );

with this data:

{ key: 1, text: "Alpha", color: "lightblue", text2: "at bottom right", size: "100 50" },

produces:

with what I believe is the non-interactive behavior that you’re looking for with the non-pickable Panel that has two TextBlocks and a lightgray background.

Note how the main element of the “Spot” Node is not the first element, so that it is in front of the nested “Spot” Panel. This requires setting GraphObject.isPanelMain to true.

In order to line up the nested “Spot” Panel with the Node’s main element, note how it uses the new-in-version-1.7 property Panel.alignmentFocusName, so that the default go.Spot.Center alignment focus is centered in the “MAIN” element rather than in the whole “Spot” Panel.

#4

Thanks so much. I actually would be happy with the null background, but I just had been using lightgray in my examples because I wanted to be able to see the extent of the table while I worked on it. In my real app I had switched lightgray to transparent thinking there would be no difference between transparent and undefined. Now that you pointed this out, the behavior makes lots more sense.