В Cytoscape. js, используя HTML в метках узлов, как я могу обрабатывать события для определенного элемента DOM в метке HTML? - PullRequest
Новая
       6

В Cytoscape. js, используя HTML в метках узлов, как я могу обрабатывать события для определенного элемента DOM в метке HTML?

2 голосов
/ 13 февраля 2020

Я использую Cytoscape. js с расширением cytoscape-node- html -label для рисования сложного узла HTML. Моя цель - показать всплывающую подсказку, когда пользователь наводит указатель мыши на определенную область в этом узле HTML. Однако я не могу получить доступ к событиям мыши вообще. Я могу прослушивать события мыши по всему узлу, используя функциональность Cytoscapes: 

cy.on('mouseover', 'node', function(evt){
   var node = evt.target;
});

Но попытка использовать обычные события jQuery для элемента HTML внутри метки узла (у них есть уникальные идентификаторы) не работа. Событие не срабатывает. Я думаю, это потому, что это HTML каким-то образом нарисовано на холсте, и расширение не реализует эту функциональность. Я попытался: 

$('#' + id_of_elem).hover(function(evt){
   ...
});

Расширение предлагает возможность включить события указателя, но это ничего не меняет. Я настраиваю расширение следующим образом: 

cy.nodeHtmlLabel([{
        query: '.machineNode',
        valign: 'center',
        halign: 'center',
        valignBox: 'center',
        halignBox: 'center',
        tpl: function(data) {
            return [HTML code here];
        }
      }
    ], {
      enablePointerEvents: true
    });

У кого-нибудь есть идеи, как достичь sh моей цели? Альтернативные идеи приветствуются. Как вы думаете, есть способ реализовать события?

1 Ответ

2 голосов
/ 14 февраля 2020

Я считаю, что вы можете достичь того, чего хотите, с помощью других расширений cytoscape. Вот исполняемый код, который строит простой граф из 2 узлов и 1 ребра. Расширения Cytoscape-popper, popper и tippy используются для создания всплывающего окна HTML (текст + кнопка) при срабатывании события «наведение мыши». На кнопку можно нажать, чтобы запустить код javascript. Он также имеет текст всплывающей подсказки, когда указатель мыши находится над ним. 

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),
    style: [
      {
        selector: "node",
        style: {
          content: "data(id)"
        }
      },
      {
        selector: "edge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle"
        }
      },
      {
        selector: 'node.game_mkr',
        style: {
          shape: 'octagon',
          width: 25,
          height: 25,
          'background-color': 'magenta',
          label: 'Game Marker',
          'font-size': 14,
          'text-background-color': 'white',
          'text-background-padding': '2px',
          'text-background-opacity': 0.85,

        }
      }
    ],
    
    elements: {
      nodes: [
        {
          data: {
            id: "a",
            text: "For gaming"
          },
          classes: "game_mkr"
        },
        {
          data: {
            id: "b",
            text: "For work"
          }
        }
      ],
      edges: [
        {
          data: {
            id: "ab",
            source: "a",
            target: "b",
            text: "Sample edge"
          }
        }
      ],
      
    },

    layout: {
      name: "grid"
    }
  }));

  function makePopper(ele) {
    let ref = ele.popperRef(); // used only for positioning

    ele.tippy = tippy(ref, {
      // tippy options:
      content: () => {
        let contentdiv = document.createElement("div");
        let ctent = "<strong>ID: </strong>";
        ctent += "<b>"+ele.id()+"</b>";
        ctent += "<br/><button type='button' onclick='alert(\"Hello.\")' title='"+ ele.data().text +"'>Click Me!</button>";
        contentdiv.innerHTML = ctent;

        return contentdiv;
      },
      arrow: true,
      allowHTML: true,
      interactive: true,
      duration: [100, 1000],
      trigger: "manual" //when use program to handle
    });
  }

  cy.ready(function() {
    cy.elements().forEach(function(ele) {
      makePopper(ele);
    });
  });

  cy.elements().unbind("mouseover");
  cy.elements().bind("mouseover", event => event.target.tippy.show());

  cy.elements().unbind("mouseout");
  cy.elements().bind("mouseout", event => event.target.tippy.hide());
  
//  cy.elements().unbind("click");
//  cy.elements().bind("click", event => {event.target.tippy.show()});

//let insta = event.target.tippy;
//console.log(insta)

//  cy.elements().unbind("mouseover");
//  cy.elements().bind("mouseover", event => event.target.tippy.hide());
  
});
body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
<head>

  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.4/cytoscape-popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@4.0.1/umd/index.all.min.js"></script>

  <link rel="stylesheet" href="https://unpkg.com/tippy.js@4.0.1/index.css" />
</head>

<body>
  <div id="cy"></div>
</body>
...