cytoscape-canvas
Version:
A Cytoscape extension to enable drawing over and under a graph
109 lines (100 loc) • 2.9 kB
HTML
<html>
<head>
<title>cytoscape-canvas.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/cytoscape-canvas/dist/cytoscape-canvas.js"></script>
<!-- for testing with local version-->
<!-- <script src="src/cytoscape-canvas.js"></script> -->
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
const background = new Image();
background.onload = () => {
const cy = cytoscape({
container: document.getElementById("cy"),
style: [
{
selector: "node",
css: {
label: "data(name)",
},
},
{
selector: "edge",
css: {
"curve-style": "bezier",
"target-arrow-shape": "triangle",
},
},
],
elements: {
nodes: [
{ data: { id: "j", name: "Jerry" }, position: { x: 150, y: 50 } },
{ data: { id: "e", name: "Elaine" }, position: { x: 600, y: 50 } },
{ data: { id: "k", name: "Kramer" }, position: { x: 150, y: 400 } },
{ data: { id: "g", name: "George" }, position: { x: 600, y: 400 } },
],
edges: [
{ data: { source: "j", target: "e" } },
{ data: { source: "j", target: "k" } },
{ data: { source: "e", target: "j" } },
{ data: { source: "k", target: "g" } },
],
},
layout: {
name: "preset",
},
});
const bottomLayer = cy.cyCanvas({
zIndex: -1,
});
const canvas = bottomLayer.getCanvas();
const ctx = canvas.getContext("2d");
cy.on("render cyCanvas.resize", (evt) => {
bottomLayer.resetTransform(ctx);
bottomLayer.clear(ctx);
bottomLayer.setTransform(ctx);
ctx.save();
// Draw a background
ctx.drawImage(background, 0, 0);
// Draw text that follows the model
ctx.font = "24px Helvetica";
ctx.fillStyle = "black";
ctx.fillText("This text follows the model", 200, 300);
// Draw shadows under nodes
ctx.shadowColor = "black";
ctx.shadowBlur = 25 * cy.zoom();
ctx.fillStyle = "white";
cy.nodes().forEach((node) => {
const pos = node.position();
ctx.beginPath();
ctx.arc(pos.x, pos.y, 10, 0, 2 * Math.PI, false);
ctx.fill();
});
ctx.restore();
// Draw text that is fixed in the canvas
bottomLayer.resetTransform(ctx);
ctx.save();
ctx.font = "24px Helvetica";
ctx.fillStyle = "red";
ctx.fillText("This text is fixed", 200, 200);
ctx.restore();
});
};
// Preload images
background.src = "https://files.classcraft.com/classcraft-assets/images/event_scroll_middle.jpg";
</script>
</head>
<body>
<div id="cy" />
</body>
</html>