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
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.