Is it possible to make some part unselectable in a group?

GoJS
1

There’s a group containing nodes but user can only drag the handle to move that group. I didn’t find any example to show such feature.

Is it possible to make some part unselectable in a node?

2

You could set or bind the Part.selectable property. Although I believe that a change in that value from true to false might not change the value of Part.isSelected from true to false.

$(go.Node, . . .,
  new go.Binding("selectable", "containingGroup", function(g) { return g === null; }).ofObject(),
        . . .
3

I want to make some part(area) in a group unselectable, not the whole group. Is it possible? Like the window in the Windows OS, the user can just drag from the title bar to move the window.

4

I answered above assuming you were asking about how to make Nodes unselectable if they were members of a Group, and selectable if they were top-level Nodes.

OK, you’re asking a different question. Sure – just make sure there’s nothing there where the user does a mouse-down which would pick the GraphObject and thus select the Group. For example:

    myDiagram.groupTemplate =
      $(go.Group, "Vertical",
        $(go.TextBlock, new go.Binding("text")),
        $(go.Panel, "Auto",
          $(go.Shape, { fill: null }),
          $(go.Placeholder)
        )
      );
1 Like
5

Sorry, I may not explain the question well…

Actually, the question is that I don’t want to drag the empty space inside the group border to move/select the group.

6

That’s exactly what I answered and what the example demonstrates.

7

Got it… If the background is set to null, the area will be unselectable…

But is it possible that I still want to set the background?

8

“Selectable” means whether the user can toggle the value of Part.isSelected.

“Pickable” means whether a mouse/finger event can be caught. You can control that by setting/binding GraphObject.pickable. GraphObject | GoJS API

9

To achieve something like this example:

myDiagram.groupTemplate =
      $(go.Group, "Vertical",
        $(go.TextBlock, new go.Binding("text")),
        $(go.Panel, "Auto",
          $(go.Shape, { fill: null }),
          $(go.Placeholder)
        )
      );

Can I still fill the shape with value other than null ?

10

Yes, but then you need to set pickable to false.

That property applies to the whole object, so if you want to make one area of a Shape be pickable and another area be not pickable, but both areas be filled, then you really need to use two separate Shapes.

11

Once I set pickable to false, the whole group will be unpickable… How do I still get some shapes pickable?

12

It’s a GraphObject property, not a Part or Group property.

13

I see… that could solve the problem.

But there’s still a question, if I set pickable to false, diagram.findPartAt() will ignore the object, how can I check if some point is inside a group?

14

Well, it’s either one way or the other – an InputEvent at a particular point in document coordinates either “hits” a GraphObject or not. For most atomic objects, that’s controlled by pickable. For Shapes, it is additionally influenced by the Shape.geometry, which obviously need not occupy the full rectangular area of the bounds. And it is further influenced by setting a property of Brush type to null instead of some CSS color string or Brush object.

15

So if pickable is false, there’s no way to make diagram.findPartAt() to check its bounds.

Currently, I set a model binding of pickable. If I want to check the bounds, I set model binding to true. After the check, model binding is set back to false. Don’t know if there’s other good way to do so…