classcraft / cytoscape.js-canvas Goto Github PK
View Code? Open in Web Editor NEWA Cytoscape extension to enable drawing over and under a graph
License: MIT License
A Cytoscape extension to enable drawing over and under a graph
License: MIT License
It might be good to mention in the readme that this extension can be used to place a canvas under or over Cytoscape. The intro sentence makes it sound like it's just for the under case, until you see later that you can set the z-index.
i just paste the demo code, in my project but nothing happen, no error, background not rendered
Could you post a demo of how the notification badge works? thanks
Hi. I'm trying to render a graph from cytoscape into a canvas using Node.js but to get as PNG I need a browser context which actually I cannot have because I'm using it with Node.js (headless).
So I'm wondering if this extension works with package canvas so that way I can render the graph and store it into a file.
Thanks in advance
Any background image is not exported by cy.png()
and friends. Is this because Cytoscape.js is not aware of the extension's canvas??
Hi,
Do you happen to know, if this extension can be used with dashs cytoscape extension?
https://dash.plotly.com/cytoscape
Im aware that you probably are not too familiar with dash, but I figured asking wouldn't hurt ๐
Thanks Volker
I've recently noticed some confusing behaviour when using the canvas extension to draw a shape behind an element. When the page is loaded while the devicePixelRatio of the window is not equal to one the element and associated shape are "out of line".
I notice this on normal displays with chrome and firefox when the resolution is increased by pressing "CMD =" (before the page is loaded) and on retina displays with chrome, firefox and safari.
If the resolution is decreased on a retina display by pressing "CMD -" until devicePixelRatio equals one the element and share can be made to line up on chrome and firefox (after reloading the page).
Safari does not change the devicePixelRatio when zooming the browser window instead it only shows the expected result when the devicePixelRatio is equal to one.
From what I could gather from the code the canvas extension does take the value of devicePixelRatio into account when calculating the dimensions of the canvas element.
How should I handle this issue? @maxkfranz @ANault
For your connivance I've created a demo based off this repo for you to try out:
https://github.com/wrnrlr/debug-canvas
Just clone and open the demo
What are the plans for the future of cytoscape-canvas? It looks like the API was removed in b404982#diff-e87e7733693f3468c9750b957e64b300L54, so it is entirely non-backwards-compatible. Will the API be replaced with something new?
If you substitute in the newest minified version of the Cytoscape js library it will not render in the same way (the background image is missing).
Suggested action: Readme update to reflect limiting the max version supported
Is there a way to add a on click event listener with some meta that can tell me what element has been clicked, so we can have some interactivity with the elements.
Hi,
I'm using cytoscape.js + cytoscape.js-canvas in a VS code extension. VS Code now strongly recommends a CSP policy: https://code.visualstudio.com/updates/v1_38#_warning-when-creating-webview-without-a-content-security-policy
cytoscape.js has the changes as of cytoscape/cytoscape.js#2318, it would be great if canvas had similar changes made.
I'll try and start this myself.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.