Search code examples
javascriptcssbackground-imagecytoscape.js

How to use background images outside of nodes in cytoscape.js

I need to set three images as the background of node and wrote the following snippet. In the middle is the main image, and the left and right are auxiliary images.

I expect the two left-right images are out of node border area and near to the node border. I tried to set the expected position with background-position-x. But the images are clipped when move out of the node border.

I tried "background-clip": "none" and "background-clip": ["none", "none", "none"], but both are not helpful.

Any ideas to resolved it ? Thanks.

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),

    ready: function() {
    },

    style: [{
        selector: "node",
        style: {
            "border-color": "#B0B0B0",
            "border-width": "1px",
            "border-style": "solid",
            "background-color": "#FFF",
            "background-fit": "none",
            "font-size": "12px",
            "text-max-width": "120px",
            "text-wrap": "ellipsis",
            "text-events": "yes",
            "text-margin-y": "5px",
            "min-zoomed-font-size": "7px",
            "text-halign": "center",
            "text-valign": "bottom",
            "background-image": ['https://js.cytoscape.org/img/cytoscape-logo.svg','https://upload.wikimedia.org/wikipedia/commons/6/6d/Windows_Settings_app_icon.png','https://www.flaticon.com/premium-icon/icons/svg/1688/1688124.svg'],
            "background-width": ["24px", "20px", "20px"],
            "background-height": ["24px", "20px", "20px"],
            "background-position-x": ["12px", "-15px", "40px"],
            "background-position-y": ["12px", "14px", "14px"],
            // "background-clip": ["none", "none", "none"],
            "background-clip": "none",
            width: "48px",
            height: "48px",
            padding: "0px",

        }
      },
    ],

    elements: [{
        group: "nodes",
        data: {
          id: "n0"
        }
      },
    ],
  }));
  
});
body {
  font-family: helvetica;
  font-size: 14px;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
}
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

<!--polyfills are needed for this extension for old browsers like IE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/shim.min.js"></script>

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

</body>

Solution

  • From https://js.cytoscape.org/#style/background-image :

    To put an image outside of the bounds of a node’s body, it is necessary to specify background-clip: none and bounds-expansion: n for images that go n pixels beyond the bounding box of the node. Note that values of n should be relatively small for performance.