Click Event On Entire Node

GoJS
1

I am trying to capture the click event on a Node, regardless of where the user clicks on the node. But it seems to be very inconsistent. Here is my node template:
myDiagram.nodeTemplate =
$JF(go.Node, “Auto”,
// for sorting, have the Node.text be the data.name
new go.Binding(“text”, “sortvalue”),
// bind the Part.layerName to control the Node’s layer depending on whether it isSelected
new go.Binding(“layerName”, “isSelected”, function(sel) { return sel ? “Foreground” : “”; }).ofObject(),
//define click event
{ click: LoadNewMatter }, ///*alert("clicked on Node " + obj.toString() + " at " + e.targetObject); */} },
// define the node’s outer shape
$JF(go.Shape, “RoundedRectangle”,
{
name: “SHAPE”,
fill: graygrad, stroke: “black”,
portId: “”, fromLinkable: true, toLinkable: true, cursor: “pointer”
}),
// define the panel where the text will appear
$JF(go.Panel, “Table”,
{
maxSize: new go.Size(150, 999),
margin: new go.Margin(3, 3, 0, 3),
defaultAlignment: go.Spot.Left
},
$JF(go.RowColumnDefinition, { column: 2, width: 4 }),
$JF(go.TextBlock, // the name
{
row: 0, column: 0, columnSpan: 5,
font: “bold 9pt sans-serif”,
editable: false, isMultiline: false,
stroke: “white”, minSize: new go.Size(10, 14)
},
new go.Binding(“text”, “docketnum”).makeTwoWay()),

      $JF(go.TextBlock, textStyle(),
        {
          row: 1, column: 0, columnSpan: 5,
          editable: true, isMultiline: false,
          minSize: new go.Size(10, 14),
          margin: new go.Margin(0, 0, 0, 3)
        },
        new go.Binding("text", "relationshiptype").makeTwoWay()),
      
      $JF(go.TextBlock, textStyle(),
        { row: 2, column: 0, columnSpan: 5},
        new go.Binding("text", "filedata")),

      $JF(go.TextBlock, textStyle(),
        { row: 3, column: 0, columnSpan: 5},
        new go.Binding("text", "serialnum")),
      
      $JF(go.TextBlock, textStyle(),
        { row: 4, column: 0, columnSpan: 5},
        new go.Binding("text", "status")),

      $JF(go.TextBlock, textStyle(),
        { row: 5, column: 0, columnSpan: 5},
        new go.Binding("text", "patentnum")),

// $JF(go.TextBlock, textStyle(),
// { row: 6, column: 0, columnSpan: 5},
// new go.Binding(“text”, “launchurl”)),

      $JF("TreeExpanderButton",
        { row: 6, columnSpan: 99, alignment: go.Spot.Center })
    )  // end Table Panel
  );
2

What is inconsistent? Could you post a screenshot marked up with where you think it works and where you think it doesn’t?

Do you just need to set background: "transparent" on the Node?

3

So when the diagram first lays out or the user scrolls within the diagram to bring a node into view the cursor does not change to a pointer and the click event re-centers the diagram see image 1 and 2 below:

Image 1:

Image 2: Here you can see the Node (STJUDE.426) is no longer where the cursor was on the click in the first image.

Now moving the cursor back to the same node you can see the node is selected, indicated by the color change of the border and click event fires the appropriate routine image 3

Image 3:

4

There isn’t enough information for me to guess what’s going on.

Are you making all changes to a Diagram or to its Model within a transaction? (A transaction is not necessary when constructing a Model and then assigning Diagram.model.)

I’m curious though why there are links that cross over nodes. With TreeLayout, that should not happen unless you explicitly do something to cause that.

5

No, I am not making changes to the Diagram after the Data and Link information is supplied.
The reason we have links crossing over nodes is that any Node can have multiple parents that is why I was told to use GraphLinksModel. What other information would you need…
Can you guess why the first click on any node causes the centering of the diagram?

6

Well, with LayeredDigraphLayout it is also the case that links will not normally be routed to cross over nodes.

Do you get the same behavior on different browers and on different operating system platforms?

Do you get that odd behavior on all nodes all the time, until when?

How can we reproduce this problem?

7

I get the same behavior on IE and Chrome, windows 7,8,8.1
The behavior only occurs on the first click of a node after the initial render or scrolling within the diagram.

I can upload a file that has the resulting html markup from the code and you can test it locally?

Would that help?

8

Or you can mail it to us, GoJS at our domain nwoods.com.

Does any click “fix” the behavior? Or does it have to be on a node?

9

Email sent

Thanks