Показывать идентификатор края при нажатии - PullRequest
Новая
       37

Показывать идентификатор края при нажатии

1 голос
/ 28 мая 2020

Чего я здесь пытаюсь достичь с помощью cytoscape. js Библиотека, которая, когда я нажимаю на край, вместо наведения будет отображаться идентификатор этого края.

например, идентификатор ab должен отображаться только тогда, когда я нажимаю на край. Я не хочу отображать идентификаторы узлов при щелчке.

Заранее спасибо за помощь.

Есть ли документация с большим количеством примеров, чем cytoscape. js? 

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"
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }
      }, {
        data: {
          id: "b"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

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

    ele.tippy = tippy(ref, { // tippy options:
      content: () => {
        let content = document.createElement('div');

        content.innerHTML = ele.id();

        return content;
      },
      trigger: 'manual' // probably want manual mode
    });
  }

  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());

});
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;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
  font-weight: bold;
}
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <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>

1 Ответ

4 голосов
/ 28 мая 2020

Это основная c cytoscape. js функциональность. Вы используете эти две строки в качестве триггера события: 

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());

Если вы посмотрите на код, вы заметите две вещи:

  • Вы вызываете .bind () функция на cy.elements () , таким образом вызывая привязку для каждого элемента в cytoscape. js graph
  • Вы используете мышь -over и mouse-out событие для запуска всплывающей подсказки

Простое исправление будет следующим: 

cy.nodes().unbind('mouseover');
cy.nodes().bind('mouseover', (event) => event.target.tippy.show());

cy.nodes().unbind('mouseout');
cy.nodes().bind('mouseout', (event) => event.target.tippy.hide());


cy.edges().unbind('mousedown');
cy.edges().bind('mousedown ', (event) => event.target.tippy.show());

cy.edges().unbind('mouseup');
cy.edges().bind('mouseup', (event) => event.target.tippy.hide());

В вашем коде, это будет выглядеть так: 

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"
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }
      }, {
        data: {
          id: "b"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

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

    ele.tippy = tippy(ref, { // tippy options:
      content: () => {
        let content = document.createElement('div');

        content.innerHTML = ele.id();

        return content;
      },
      trigger: 'manual' // probably want manual mode
    });
  }

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

  cy.nodes().unbind('mouseover');
  cy.nodes().bind('mouseover', (event) => event.target.tippy.show());

  cy.nodes().unbind('mouseout');
  cy.nodes().bind('mouseout', (event) => event.target.tippy.hide());


  cy.edges().unbind('mousedown');
  cy.edges().bind('mousedown', (event) => event.target.tippy.show());

  cy.edges().unbind('mouseup');
  cy.edges().bind('mouseup', (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;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
  font-weight: bold;
}
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <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>
...