Дайте два разных вида кромок и оставьте одну несъемную с ее собственными особенностями - PullRequest
Новая
       23

Дайте два разных вида кромок и оставьте одну несъемную с ее собственными особенностями

0 голосов
/ 25 мая 2020

Я здесь пытаюсь создать несъемные края. например, у меня есть край между a и b , и когда я нажимаю на один из них, край должен быть все еще виден, и его цвет также не изменится на красный. когда я нажимаю на node b , тогда только одно ребро должно быть создано для node c с красным цветом и то же самое для c node и т. д. ...

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

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",
          "visibility": "hidden", 
          "line-color": "#61bffc",
        }
      },
      {
        selector: ".fixededge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle",
          "line-color": "#61bffc",
        }
      },
      {
        selector: ".visible",
        style: {
          "visibility": "visible"
        }
      },
      {
        selector: "edge.visible",
        style: {
          "visibility": "visible",
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }
        
      }, {
        data: {
          id: "b"
        }
      }, {
        data: {
          id: "c"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        },
        classes:["visible"]
      }, {
        data: {
          id: "bc",
          source: "b",
          target: "c"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

  cy.on("click", "node", function(event) {
    let connectedEdges = event.target.connectedEdges().style('line-color', 'red');
    connectedEdges.toggleClass("visible");
  });
});
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 Ответ

3 голосов
/ 25 мая 2020

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

Вы должны уточнить, в какой области могут быть рассмотрены классы, как вы это делаете. это узел может иметь класс fixedEdge . Хотя вам придется вручную добавить это к узлу, все же лучше вместо этого просто написать что-то вроде этого: 

{
    selector: "edge.fixed",
    style: {
      "line-color": "#61bffc",
      "target-arrow-color": "#61bffc",
    }
},
{
    selector: "edge.visible",
    style: {
      "visibility": "visible",
    }
}

Основное отличие вашего кода - это простое предложение if в обработчике событий. Используя функцию hasClass () , вы можете запросить наличие .fixed и просто игнорировать следующий переключатель класса. Также я добавил класс .fixed в список классов ребер: 

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",
          "visibility": "hidden",
          "line-color": "red",
          "target-arrow-color": "red",
        }
      },
      {
        selector: "edge.fixed",
        style: {
          "line-color": "#61bffc",
          "target-arrow-color": "#61bffc",
        }
      },
      {
        selector: "edge.visible",
        style: {
          "visibility": "visible",
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }

      }, {
        data: {
          id: "b"
        }
      }, {
        data: {
          id: "c"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        },
        classes: ["visible", "fixed"]
      }, {
        data: {
          id: "bc",
          source: "b",
          target: "c"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

  cy.on("click", "node", function(event) {
    event.target.connectedEdges().each(function(edge) {
      if (!edge.hasClass("fixed")) {
        edge.toggleClass("visible");
      }
    });
  });
});
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>
...