Selecting shape by 'name' on hover

GoJS
#1

Hello!

I am trying to select a shape once I hover over a node. I am following https://gojs.net/latest/learn/graphobject.html. It is saying that a node is also a panel / graph object. I am able to use the “obj” variable used in mouse over, however it returns null. What am I doing incorrect?

https://pastebin.com/vECcbJZg

You can see the mouse over on lines 9-12 and the shapes I am trying to select on lines 91 & 123

Thank you!

#2

Ah, thanks for providing the template. The issue is that the named object is in an Panel.itemTemplate, not in the Node template.

The item template is copied for each value in the Panel.itemArray. So in your case each copy will include a Shape with the name “validport”. That makes it very ambiguous which Shape Panel.findObject should return. (Or there might be none if the Array is empty.)

So you need to find a particular Panel that was copied for an Array item, and then you can call findObject on that. Maybe call:
https://gojs.net/latest/api/symbols/Panel.html#elt
or:
https://gojs.net/latest/api/symbols/Panel.html#findItemPanelForData
or some other way.

#3

Hi Walter,

I do want every panel/shape that has the name “valid port” and change it’s fill. If Panel.findObject can return an array of all shapes with “validport” that would be great!

For testing purposes, as you say if I were to move the hover onto the panel it self, it is able to find the shapes just fine. I then try adding the property “name” with the value of “portPanel” to the itemTemplate on lines 84 & 113 and tried doing obj.findObject(“portPanel”) on the node. But it is still returning null.

Edit:
I have changed template a bit to the following and was able to find the panel holding the template but am unable to find things nested within:
https://pastebin.com/JfEdhqSr

#4

Well, it so happens that your objects named “validport” happen to be inside ports, so, assuming this is declared on your Node:

  mouseHover: function(e, node) {
    node.ports.each(function(port) {
      var shape = port.findObject("validport");
      if (shape) { ... }
    });
  }
#5

Oh let me give this a try!

I think I also edited my last post with a new pastebin as you were replying.

#6

Ah that worked walter, thank you!

I am so glad I don’t have to do nested searches thank you!