Selection area

GoJS
1

Hi ,

I need to reduce the selection area.

Any idea

  myFullDiagram.nodeTemplateMap.add("Field",
                     GO(go.Node, go.Panel.Auto, { locationSpot: go.Spot.Center },
                            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                               new go.Binding("text", "key"),
                         GO(go.Shape, "RoundedRectangle",
                         { fill: null, portId: "", toLinkable: true, stroke: null }),
                         GO(go.Panel, go.Panel.Vertical,
                           GO(go.Panel, go.Panel.Auto,
                           GO(go.Shape, "RoundedRectangle",
                         { fill: FieldColor, stroke: null }),
                             GO(go.Panel, go.Panel.Horizontal,
                             GO(go.Picture,
                                 new go.Binding("source", "category", nodeTypeImage), { width: 20, height: 20 }),
                                 GO(go.TextBlock, textStyle(),
                                 { text: 'Field' },
                                 new go.Binding("text", "text").makeTwoWay())
                             )),
                             GO(go.Panel, go.Panel.Vertical, { margin: new go.Margin(5, 0, 0, 0) },
                                  GO(go.TextBlock, { wrap: go.TextBlock.WrapFit, font: smallfont }, new go.Binding("text", "counter1")),
                                  GO(go.TextBlock, { wrap: go.TextBlock.WrapFit, font: smallfont }, new go.Binding("text", "counter2")),
                                  GO(go.TextBlock, { wrap: go.TextBlock.WrapFit, font: smallfont }, new go.Binding("text", "counter3")),
                                  GO(go.TextBlock, { isMultiline: true, font: smallfont }, new go.Binding("text", "counter4"))
                             )
                         )));
2

Your template is confusingly indented, so I’m not sure, but I think you can set the name: on the FieldColor Shape, and then refer to that name as the selectionObjectName: on the Node itself.

3

I simplify my template like that


 myFullDiagram.nodeTemplateMap.add("Asset",
                                          GO(go.Node, go.Panel.Vertical, { locationSpot: go.Spot.Center },
                                                 new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                                                      new go.Binding("text", "key"),
                                                       GO(go.Panel, go.Panel.Auto,
                                                           GO(go.Shape, "RoundedRectangle",
                                                              { fill: assetColor, stroke: null }),
                                                           GO(go.Panel, go.Panel.Horizontal,
                                                                GO(go.Picture,
                                                                       new go.Binding("source", "category", nodeTypeImage), { width: 20, height: 20 }),
                                                                GO(go.TextBlock, textStyle(),
                                                                  { text: 'Asset' },
                                                                  new go.Binding("text", "text").makeTwoWay())
                                                              ))
                                                         ,
                                                         GO(go.TextBlock, { margin: new go.Margin(5, 0, 0, 0), font: smallfont }, new go.Binding("text", "counter1"))
                                                     )
                                           );

I just want the selected area is the panel with the rounded rectangle and not the text ‘counter1’ = field 7

4

That looks much cleaner and simpler and faster.

You just need to assign a name to the Auto Panel, and set Node.selectionObjectName to be that name.

5

Thanks a lot