cytoscape-popper
Version:
A Cytoscape.js extension for Popper.js
165 lines (133 loc) • 3.42 kB
HTML
<html>
<head>
<title>cytoscape-popper + FloatingUI 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>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://unpkg.com/@floating-ui/core@1.5.0"></script>
<script src="https://unpkg.com/@floating-ui/dom@1.5.3"></script>
<script src="cytoscape-popper.js"></script>
<style>
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
.popper-div { /* just an example */
border: 1px solid red;
background: #fff;
z-index: 9999;
padding: 0.25em;
pointer-events: none;
width: max-content;
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
function popperFactory(ref, content, opts) {
// see https://floating-ui.com/docs/computePosition#options
const popperOptions = {
// matching the default behaviour from Popper@2
// https://floating-ui.com/docs/migration#configure-middleware
middleware: [
FloatingUIDOM.flip(),
FloatingUIDOM.shift({limiter: FloatingUIDOM.limitShift()})
],
...opts,
}
function update() {
FloatingUIDOM.computePosition(ref, content, popperOptions).then(({x, y}) => {
Object.assign(content.style, {
left: `${x}px`,
top: `${y}px`,
});
});
}
update();
return { update };
}
document.addEventListener('DOMContentLoaded', function () {
cytoscape.use(cytoscapePopper(popperFactory));
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
style: {
'content': 'data(id)'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
}
],
elements: {
nodes: [
{ data: { id: 'a' } },
{ data: { id: 'b' } }
],
edges: [
{ data: { id: 'ab', source: 'a', target: 'b' } }
]
},
layout: {
name: 'grid'
}
});
var a = cy.getElementById('a');
var b = cy.getElementById('b');
var ab = cy.getElementById('ab');
var makeDiv = function(text){
var div = document.createElement('div');
div.classList.add('popper-div');
div.innerHTML = text;
document.body.appendChild( div );
return div;
};
var popperA = a.popper({
content: function(){ return makeDiv('Sticky position div'); },
});
var updateA = function(){
popperA.update();
};
a.on('position', updateA);
cy.on('pan zoom resize', updateA);
var popperB = b.popper({
content: function(){ return makeDiv('One time position div'); },
});
var popperAB = ab.popper({
content: function(){ return makeDiv('Sticky position div'); },
});
var updateAB = function(){
popperAB.update();
};
ab.connectedNodes().on('position', updateAB);
cy.on('pan zoom resize', updateAB);
});
</script>
</head>
<body>
<h1>cytoscape-popper + FloatingUI demo</h1>
<div id="cy"></div>
</body>
</html>