Hyperlink and Textblock

#1

In my diagram, I have few nodes for which hyperlinks are available and few nodes do not have
hyperlinks.

The functionality I am looking for is when cursor is moved to textblock of node,
i need to show the underlined text if hyperlink is available and it should be clickable to navigate
to the site

For other nodes, there should not be any impact.

With hyperlinks.js, i am facing issue
and instead of that implemented my own functionality using
on textblock mouseEnter, mouseLeave and click event. It is working as expected but with following issues

The node which has hyperlink and its text is clicked, i can open the window
but i don’t want that node to get selected due to this click event. And also node selected
event should not fire.

How to achieve this ?

#2

Do you still want the node to be selectable and do you want the node to be selected if the user clicks on the node somewhere other than on the “HyperlinkText” object?

#3

Yes. If node is clicked somewhere else apart from text, the it should be selected and raise - the default nodeselected event ( on node selected, in separate panel display detail information about node)

Only when node has some hyperlink information available and the text should behave like opening link in new tab. In that case any other previously selected node should remain active and not to select the node whose link is clicked. (it should also possible that the node is already selected and clicking on its text open the link in new tab but that node remain selected)

#4

The node is selected due to the ClickSelectingTool.standardMouseSelect method. You will need to override this method so that in your particular case it does not select the node if it wasn’t selected before.

Here is its definition:

  public standardMouseSelect(): void {
    const diagram = this.diagram;
    if (!diagram.allowSelect) return;
    const e = diagram.lastInput;
    const curobj = diagram.findPartAt(e.documentPoint, false);  // to select containing Group if Part.canSelect() is false
    if (curobj !== null) {
      if (e.meta || e.control) {  // toggle the part's selection
        diagram.raiseDiagramEvent('ChangingSelection', diagram.selection);
        let part = curobj;
        while (part !== null && !part.canSelect()) part = part.containingGroup;
        if (part !== null) part.isSelected = !part.isSelected;
        diagram.raiseDiagramEvent('ChangedSelection', diagram.selection);
      } else if (e.shift) {  // add the part to the selection
        if (!curobj.isSelected) {
          diagram.raiseDiagramEvent('ChangingSelection', diagram.selection);
          let part = curobj;
          while (part !== null && !part.canSelect()) part = part.containingGroup;
          if (part !== null) part.isSelected = true;
          diagram.raiseDiagramEvent('ChangedSelection', diagram.selection);
        }
      } else {
        if (!curobj.isSelected) {
          let part = curobj;
          while (part !== null && !part.canSelect()) part = part.containingGroup;
          if (part !== null) diagram.select(part);  // also raises ChangingSelection/Finished
        }
      }
    } else if (e.left && !(e.meta || e.control) && !e.shift) {
      // left click on background with no modifier: clear selection
      diagram.clearSelection();  // also raises ChangingSelection/Finished
    }
  }
#5

Do i need to set any thing else ? I added following code -
diagram.toolManager.clickSelectingTool.standardMouseSelect = function () {
// Code provided by you.
}

The behavior is same like without having this code. When clicked on hyperlink text node , it is selecting that node also.

#6

What I quoted above is the standard definition of that method. So using it unmodified will indeed get you the exact same behavior. You’ll need to modify it to do what you want, and apply that method to the ToolManager.clickSelectingTool, as you have done.
https://gojs.net/latest/intro/extensions.html#ToolsAndLayouts

Basically you’ll want to call Diagram.findObjectAt to see if the mouse was clicked on your “HyperlinkText” object (which depending on how you set it up might be arbitrarily complex, and also is why I couldn’t write this code for you). If it is, I think you just want to return. Otherwise continue with the rest of the standard definition of that method.

#7

As my textblock is inside a panel control, with mouse enter the parameter received is TextBlock object for which i can get the text property.
What i need here the complete node data object whose url property i need to check to show underline for text and click event handling.
How to get the node data associated here?

#8

someObject.part.data

#9

ok. Thanks. The above things worked.

Now, in my code “ObjectSingleClicked” event is also handled in diagrams. When this one gets triggered my node is selected and i do show popup. Closing the popup the item remains selected.
When user click on same node popup gets opened.

With above code, when user clicks on another nodes text block, the node doesn’t get selected (previous one remains active) but function set to “ObjectSingleClicked” gets fired and the popup opens record of node which was selected previously.

How i can avoid “ObjectSingleClicked” gets triggered ?

I replaced “ObjectSingleClicked” when “ChangedSelection” but then clicking on same node doesn’t popup again. It opens only first time. As second click doesn’t change selection it is not invoked which is correct. So how i avoid when the function you provided just returns without selecting current node do not trigger ObjectSingleSelected.

#10

If the user clicks on any pickable GraphObject with the primary/left mouse button, the Diagram must raise the “ObjectSingleClicked” DiagramEvent. https://gojs.net/latest/intro/events.html#ObjectSingleClicked

Whether you choose to listen to that event, or whether you choose to respond to that event, is up to you to decide.

So, if you don’t want to do anything, don’t do anything. Or remove that listener.

I think you understand the difference between clicking and selecting, but in case someone else reads this, please read https://gojs.net/latest/intro/events.html#ClickingAndSelecting