cytoscape.jscytoscapecytoscape-web

Border-Shadow and decrease the size of parent element css in cytoscape


I have a following image:

enter image description here

I am trying to add border shadow to the rectangle shape. Is that possible in cytoscape? Also, the parent elements are Customers and order. Can I decrease the size of customers and order parent element?

Here's is the link to the code and the working example: https://stackblitz.com/edit/angular-kpnys1?file=src%2Fapp%2Fdemo_test.json


Solution

  • Decreasing the parent size:

    This is a styling issue, cytoscape.js applies padding to parent elements, if you want your parent element to be as small as possible, you'll have to adjust the padding in the :parent style:

    {
        selector: ":parent",
        css: {
            ...
            "padding": "0px"  \\ remove padding completely, parent almost touching inner nodes
        }
    },
    

    Border shadow

    This was a little tricky, cytoscape.js only provides a normal border (like "border": "1px solid black"). You can use these styles:

    None of this provides us with the ability to apply a one sided border. As an alternative, I used the ghost styles:

    If you adjust it a little bit, you can use the x offset and a nice opacity value to achieve this box shadow:

    ghost: "yes",
    "ghost-opacity": 0.5,
    "ghost-offset-x": 1
    

    Here is a working stackblitz with both changes applied.