Сделайте изображение внутри узла интерактивным в Cytoscape. js - PullRequest
Новая
       33

Сделайте изображение внутри узла интерактивным в Cytoscape. js

0 голосов
/ 10 июля 2020

Предположим, у меня есть следующий пример, который находится внизу, и у нас есть в узле небольшое изображение с его собственной функцией, которая находится в коде в классе ".icon". Я хочу сделать кликабельным только это изображение, а не область действия. После нажатия ссылка должна открыться в новой вкладке. На фотографии (Узел) вы можете увидеть небольшой значок «ЖУРНАЛ», только он должен быть активным. Возможно ли это в Cytoscape. js Библиотека? заранее спасибо за помощь image 

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: ".icon",
                style: {
                    "background-image":"url(https://ibb.co/mBmbhgK)",
                    "background-width": "20px",
                    "background-image-opacity": 1,
                    "background-height": "17px",
                    "background-position-x": "50%",
                    "background-position-y": "0",
                    "padding": "5px",
                    "background-clip": "none",
                    "background-fit": "none"
                }
            }
        ],
        elements: {
            nodes: [{
                data: {
                    id: "a",
                    herf:"https://www.w3schools.com/html/"
                },
                "classes": [ "icon"
                ]
            }, {
                data: {
                    id: "b"
                }
            }, {
                data: {
                    id: "c"
                }
            }],
            edges: [{
                data: {
                    id: "ab",
                    source: "a",
                    target: "b"
                }
            },{
                data: {
                    id: "bc",
                    source: "b",
                    target: "c"
                }
            } ]
        },
        layout: {
            name: "grid"
        }
    }));

    cy.edges().forEach(function (edge) {
        cy.remove(edge)
    })

    cy.on('tap', 'node[href]', function () {
        if (this.data('href')){
            try { // your browser may block popups
                window.open(this.data('href'));
            } catch (e) { // fall back on url change
                window.location.href = this.data('href');
            }
        }
    });

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

...