Identify the actual event source for a node

GoJS
#1

Hi,

Can I identify the actual event source for node, for eg. If I have a node with two panels in it, then on click event of node can I determine which panel is actually clicked. I have to have both the events handled (node click and panel click).

Another thing I would like to know, is that in go.js how can I know the general name for properties or functions, for eg. I want to update properties of a node if some action is performed on diagram, let’s say I want to set isLayoutPositioned property to false for a node if it is dragged to a certain position, I handled it in SelectionMoved event of diagram and in that I wote:

myDiagram.addDiagramListener(“SelectionMoved”, function (e) {
if(e.diagram.selection.Eh.value instanceof go.Node)
e.diagram.selection.Eh.value.isLayoutPositioned = false;

            });

So, my question is that do I have to use selection.Eh or is there any general property name for Eh ? How to identify these property names, where in the API documentation I can find that.

Please bear with me if my questions are very basic or foolish, as I am newbie for on javascript as well as go.js.

Thanks

#2

The “click” event is defined for every GraphObject, so you can put an event handler on each of your panels as well as on the node as a whole. For example, your situation but with shapes substituting for your panels:

myDiagram.nodeTemplate = $(go.Node, "Vertical", { background: "lightgray" }, { click: function(e, obj) { alert("clicked on Node " + obj.toString() + " at " + e.targetObject); } }, $(go.Shape, "Circle", { width: 40, height: 40 }, { click: function(e, obj) { alert("clicked on circle " + obj.toString()); } }), $(go.Shape, "Triangle", { width: 40, height: 40 }, { click: function(e, obj) { alert("clicked on triangle " + obj.toString()); e.handled = true; } }) );
When the user clicks on the circle, they get the “clicked on circle” alert and the “clicked on Node” alert. Notice also that you can find the GraphObject where the event actually occurred by looking at the InputEvent.targetObject property.

When the user clicks on the triangle, they get the “clicked on triangle” alert, but that’s all because the event handler sets InputEvent.handled = true.

When the user clicks on the Node without clicking on either the circle or the triangle, they only get the “clicked on Node” alert.

#3

For your other question, please realize that almost all JavaScript libraries are “minimized” in order to make the library a smaller download. The minification process uses very short names for everything – typically just two letters long. But because everything is visible in JavaScript, there is no way to prevent programmers from referring to these internal data members and properties and methods.

We recommend that programmers only use the documented API, http://gojs.net/latest/api. In your case the value of Diagram.selection, http://gojs.net/latest/api/symbols/Diagram.html#selection, is a Set. I’m guessing that your code is ignoring all but the first selected Part, so it could be written as:

myDiagram.addDiagramListener("SelectionMoved", function(e) { var n = e.diagram.selection.first(); if (n instanceof go.Node) n.isLayoutPositioned = false; });
But more generally it should be written as:

myDiagram.addDiagramListener("SelectionMoved", function(e) { e.diagram.selection.each(function(p) { if (p instanceof go.Node) p.isLayoutPositioned = false; }); });
As a separate comment, depending on the kind of Layout that you have as the Diagram.layout, you might not like the results that you get by setting Part.isLayoutPositioned to false. Such Nodes will not be moved by future layouts, but their positions might conflict with nodes and links that are still being laid out.

#4

Thanks…for clarifying the queries so well.