search

kinimesi / cytoscape-svg

A Cytoscape.js extension to export the current graph view as an SVG.
https://kinimesi.github.io/cytoscape-svg
GNU General Public License v3.0
35 stars 5 forks source link

Cytoscape svg not rendering images #1

Closed KevinZhou1 closed 5 years ago

KevinZhou1 commented 5 years ago

Hello, when we use cytoscape svg, not all images are being rendered for each node. Has this issue been seen before?

kinimesi commented 5 years ago

Not rendered in the exported SVG or in Cytoscape canvas?

It shouldn't interfere with Cytoscape canvas. Can you provide a reproducible demo, please?

KevinZhou1 commented 5 years ago

It is not rendered in the exported svg. We are doing the following to save the svg:

SELECTED_PROJECT TOO_MANY_PROJECT TERMINAL_PROJECT DEFAULT_PROJECT var svg = document.createElement("a"); document.body.appendChild(svg); svg.style = "display: none"; svg.href = URL.createObjectURL(new Blob([this.cy.svg({full: true, scale: 0.5})], {type: 'image/svg+xml'})); svg.download = this.state.downloadName; svg.click(); window.URL.revokeObjectURL(svg.href); svg.parentNode.removeChild(svg);

It is working but is not displaying the images correctly on some of the nodes, specifically we have different node images that represent whether a node is selected, terminal, or have many dependencies. Although we can see it on the canvas, we cannot see it when we export it as svg.

The first two icons (png) are not working (highlighted yellow and have the kg symbol), the bottom two are appearing in the svg. I have also tried switching theses nodes images around no matter what, I could not get them to appear. Let me know if there is anything else I can provide.

kinimesi commented 5 years ago

It should be fixed with https://github.com/kinimesi/canvas2svg/commit/29d64b69dd91a9928ce02a0ecc20e391aaeaea15 and https://github.com/kinimesi/cytoscape-svg/commit/96da5633e4c0aededab4aae759172aad65c9412d

Can you test it with the master branch and verify please?

KevinZhou1 commented 5 years ago

Thank you so much ! It is working now. My team greatly appreciates your efforts

KevinZhou1 commented 5 years ago

When can npm be updated to include the latest code? In order to fix the bug, I have to manually clone and copy it to the node_modules folder since npm still fetches the older one

kinimesi commented 5 years ago

Released as v0.2.0

PS: you can directly add the GitHub repository to your package.json as well instead of manual copying. Related NPM doc.

{  
"dependencies": {
    "cytoscape-svg": "kinimesi/cytoscape-svg#master"
 }
}