Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: a href clickable #16

Open
mafar opened this issue Sep 3, 2018 · 8 comments
Open

Feature Request: a href clickable #16

mafar opened this issue Sep 3, 2018 · 8 comments

Comments

@mafar
Copy link

mafar commented Sep 3, 2018

Is it possible to add list of links as node label
considering node is a rectangular shape , and text is inside it
which is clickable ?

 <ul>
  <li><a href="#1">Coffee</a></li>
  <li><a href="#1">Tea</a></li>
  <li><a href="#1">Milk</a></li>
</ul>
@mafar mafar changed the title Feature Request Feature Request: a href clickable Sep 6, 2018
stalniy pushed a commit to stalniy/cytoscape-node-html-label that referenced this issue Nov 19, 2019
This option allows to click on links in labels.

Relates to kaluginserg#16
stalniy pushed a commit to stalniy/cytoscape-node-html-label that referenced this issue Nov 19, 2019
This option allows to click on links in labels.

Relates to kaluginserg#16
@stalniy
Copy link

stalniy commented Nov 19, 2019

the only thing which blocks clicking on links is pointer-events: none on the parent div.
I created a PR which allows to disable this behavior

stalniy pushed a commit to stalniy/cytoscape-node-html-label that referenced this issue Dec 2, 2019
This option allows to click on links in labels.

Relates to kaluginserg#16
@stalniy
Copy link

stalniy commented Dec 2, 2019

@karlludwigweise
Copy link

I still can't get this to work with enablePointerEvents: true on version 1.2.0.

@mgaebler
Copy link

mgaebler commented Sep 9, 2020

Actually the click itself works if the label isn't stacked on a node, for instance if it's centered over a node. But if it does, the click event won't be fired.

@aledwassell
Copy link
Contributor

I've been having a look at using event.stopPropagation(); on the anchor tag but I'm having no luck with that, another solution to this is to somehow introduce another overlay where hyperlinks can be stored and then prevent tap events on the note behind it.

@josejulio
Copy link
Collaborator

Or maybe attaching a click handler on the node itself to forward the click to the html element?
The downsides are that we could possibly lose the ability to click the node itself.

PRs that solve this issue are welcome :)

@aledwassell
Copy link
Contributor

I wonder if we could detect mouseover on the anchor/button and tell Cytoscape to ignore tap/tapselect on the node. Not sure how to implement this cleanly.

@josejulio
Copy link
Collaborator

I wonder if we could detect mouseover on the anchor/button and tell Cytoscape to ignore tap/tapselect on the node. Not sure how to implement this cleanly.

I did the other way around in Kiali, as the node gets the event:

cy.on('tap', (event: Cy.EventObject) => {
      // Check if we clicked a label, if so stop processing the event right away.
      if (event.originalEvent) {
        const element = document.elementFromPoint(event.originalEvent.clientX, event.originalEvent.clientY);
        const realTargetId = findRelatedNode(element);
        if (realTargetId) {
          const realTarget = cy.$id(realTargetId);
          if (realTarget) {
            event.preventDefault();
            realTarget.trigger('tap');
            return;
          }
        }
      }

IIRC, the findRelatedNode gets the id of my html element container. It could probably be changed to having the lib itself adds in the cy.scratch the related DOM element of the html label.

https://github.com/kiali/kiali-ui/blob/master/src/components/CytoscapeGraph/CytoscapeGraph.tsx#L326-L338

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants