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

Question

I have a following image:

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

question from:https://stackoverflow.com/questions/66047675/border-shadow-and-decrease-the-size-of-parent-element-css-in-cytoscape

Answer 1

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:

• border-width : The size of the node’s border.
• border-style : The style of the node’s border; may be solid, dotted, dashed, or double.
• border-color : The colour of the node’s border.
• border-opacity : The opacity of the node’s border.

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

• ghost : Whether to use the ghost effect; may be yes or no.
• ghost-offset-x : The horizontal offset used to position the ghost effect.
• ghost-offset-y : The vertical offset used to position the ghost effect.
• ghost-opacity : The opacity of the ghost effect.

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.