I’m currently adding curve shape support to the shapes.meshery.io website. Before finalizing the PR, I wanted to verify that my implementation works correctly in its actual target environment Kanvas .
Specifically, I want to ensure that the coordinates generated by my solution are Cytoscape-compatible and understand the correct process for importing these shapes into Kanvas . I tried searching for documentation or guides on validating Cytoscape polygon compatibility and importing custom shapes into Kanvas, but couldn’t find any clear references.
Could someone point me to the relevant documentation or explain the recommended workflow for testing and importing custom shapes into Kanvas?
For now I have been testing cytoscape compatibility using an html file that created just for testing cytoscape compatibility. Below are the contents for the same file :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cytoscape Polygon Test</title>
<script src="https://unpkg.com/cytoscape@3.26.0/dist/cytoscape.min.js"></script>
<style>
#cy {
width: 600px;
height: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h3>Cytoscape Polygon Compatibility Test</h3>
<div id="cy"></div>
<script>
const polygonPoints = `
-0.9994 -0.4939 -0.9852 -0.4936 -0.9444 -0.4927 -0.8801 -0.4914 -0.7951 -0.4897 -0.6925 -0.4876 -0.5751 -0.4852 -0.446 -0.4826 -0.308 -0.4798 -0.1641 -0.4769 -0.0173 -0.4739 0.1295 -0.4709 0.2734 -0.468 0.4114 -0.4652 0.5406 -0.4625 0.6579 -0.4601 0.7606 -0.4581 0.8455 -0.4563 0.9099 -0.455 0.9506 -0.4542 0.9649 -0.4539 0.9649 -0.4539 0.9672 -0.4435 0.9733 -0.4139 0.9813 -0.368 0.9895 -0.3085 0.9963 -0.2379 1 -0.159 0.9988 -0.0745 0.9912 0.0129 0.9753 0.1006 0.9495 0.1857 0.912 0.2657 0.8613 0.3379 0.7956 0.3994 0.7131 0.4477 0.6123 0.4801 0.4914 0.4939 0.3487 0.4863 0.1825 0.4546 -0.0088 0.3963 -0.227 0.3085 -0.227 0.3085 -0.344 0.1945 -0.4485 0.0919 -0.5413 0 -0.6231 -0.0818 -0.6946 -0.154 -0.7565 -0.2172 -0.8095 -0.272 -0.8542 -0.3191 -0.8913 -0.359 -0.9216 -0.3923 -0.9457 -0.4196 -0.9644 -0.4415 -0.9782 -0.4587 -0.988 -0.4716 -0.9944 -0.4808 -0.998 -0.4871 -0.9997 -0.491 -1 -0.493 -0.9997 -0.4937 -0.9994 -0.4939
`;
const cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{
data: { id: 'poly' },
position: { x: 300, y: 300 }
}
],
style: [
{
selector: 'node',
style: {
'shape': 'polygon',
'shape-polygon-points': polygonPoints,
'background-color': '#4f46e5',
'border-width': 2,
'border-color': '#1e1b4b',
'width': 200,
'height': 200
}
}
]
});
</script>
</body>
</html>
Is this the correct way of testing ? If it is I just need to know how to import the shape in kanvas.
1 Like
Lee
December 21, 2025, 12:29pm
3
Yes, testing like this works fine.
-0.9994 -0.4939 -0.9852 -0.4936 -0.9444 -0.4927 -0.8801 -0.4914 -0.7951 -0.4897 -0.6925 -0.4876 -0.5751 -0.4852 -0.446 -0.4826 -0.308 -0.4798 -0.1641 -0.4769 -0.0173 -0.4739 0.1295 -0.4709 0.2734 -0.468 0.4114 -0.4652 0.5406 -0.4625 0.6579 -0.4601 0.7606 -0.4581 0.8455 -0.4563 0.9099 -0.455 0.9506 -0.4542 0.9649 -0.4539 0.9649 -0.4539 0.9672 -0.4435 0.9733 -0.4139 0.9813 -0.368 0.9895 -0.3085 0.9963 -0.2379 1 -0.159 0.9988 -0.0745 0.9912 0.0129 0.9753 0.1006 0.9495 0.1857 0.912 0.2657 0.8613 0.3379 0.7956 0.3994 0.7131 0.4477 0.6123 0.4801 0.4914 0.4939 0.3487 0.4863 0.1825 0.4546 -0.0088 0.3963 -0.227 0.3085 -0.227 0.3085 -0.344 0.1945 -0.4485 0.0919 -0.5413 0 -0.6231 -0.0818 -0.6946 -0.154 -0.7565 -0.2172 -0.8095 -0.272 -0.8542 -0.3191 -0.8913 -0.359 -0.9216 -0.3923 -0.9457 -0.4196 -0.9644 -0.4415 -0.9782 -0.4587 -0.988 -0.4716 -0.9944 -0.4808 -0.998 -0.4871 -0.9997 -0.491 -1 -0.493 -0.9997 -0.4937 -0.9994 -0.4939
this is one of the polygon points I used for testing generated using the changes I made to the shapes.meshery.io in my PR
