kinimesi / cytoscape-svg Goto Github PK

View Code? Open in Web Editor NEW

32.0 2.0 5.0 158 KB

A Cytoscape.js extension to export the current graph view as an SVG.

Home Page: https://kinimesi.github.io/cytoscape-svg

License: GNU General Public License v3.0

HTML 45.54% JavaScript 54.46%

cytoscapejs cytoscapejs-extension svg

cytoscape-svg's Introduction

cytoscape-svg

Description

Export the current graph view as an SVG image. (demo)

The exported SVG can be saved as a PDF with svg2pdf.js libary. See an example in demo.html

Dependencies

Cytoscape.js ^3.2.0
canvas2svg

Usage instructions

Download the library:

via npm: npm install cytoscape-svg,
via bower: bower install cytoscape-svg, or
via direct download in the repository (probably from a tag).

Import the library as appropriate for your project:

ES import:

import cytoscape from 'cytoscape';
import svg from 'cytoscape-svg';

cytoscape.use( svg );

CommonJS require:

let cytoscape = require('cytoscape');
let svg = require('cytoscape-svg');

cytoscape.use( svg ); // register extension

AMD:

require(['cytoscape', 'cytoscape-svg'], function( cytoscape, svg ){
  svg( cytoscape ); // register extension
});

Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

API

cy.svg(options)

options: the export options
- full: Whether to export the current viewport view (false, default) or the entire graph (true).
- scale: This value specifies a positive number that scales the size of the resultant image.
- bg: The background color of the SVG (transparent by default).

Build targets

npm run test : Run Mocha tests in ./test
npm run build : Build ./src/** into cytoscape-svg.js
npm run watch : Automatically build on changes with live reloading (N.b. you must already have an HTTP server running)
npm run dev : Automatically build on changes with live reloading with webpack dev server
npm run lint : Run eslint on the source

N.b. all builds use babel, so modern ES features can be used in the src.

Publishing instructions

This project is set up to automatically be published to npm and bower. To publish:

Build the extension : npm run build:release
Commit the build : git commit -am "Build for release"
Bump the version number and tag: npm version major|minor|patch
Push to origin: git push && git push --tags
Publish to npm: npm publish .
If publishing to bower for the first time, you'll need to run bower register cytoscape-svg https://github.com/kinimesi/cytoscape-svg.git
Make a new release for Zenodo.

cytoscape-svg's People

Contributors

Stargazers

Watchers

Forkers

dbrnz hnakamur johan-lecuyer tone-row drawfund-founder

cytoscape-svg's Issues

Add element's id in SVG

Hi !

After exporting the graph to svg, we observe that there is no id for the different elements which makes their selection difficult.
Would it be possible to include specific identifiers for each of them ?

Shape and color issues

First, thank you for this, it looks like there are some style features that this (or the libraries it uses) fails to render as expected. Is there a supported style reference list? If there is I would evaluate changing my styles in order to get a good svg output.

I was surprised both by what it renders well, and just as surprised by the rest.

Here is an example cytoscape.js view

and the svg output

'edge-text-rotation': 'autorotate' breaks colors

As soon as I display any labels using 'edge-text-rotation': 'autorotate', the SVG loses all colors and just becomes black and white. See the attached image of a correctly displayed and an incorrectly displayed image. As soon as I remove the edge text rotation, it works again.

Selector

  {
      'selector': 'edge',
      'css':
      {
        'z-compound-depth': 'bottom',
        'width': 2.0,
        'edge-text-rotation': 'autorotate',
        'label': function(edge)
        {
          return "bla";
        },
}

Export to PDF

Hey, thanks for this great package; it still works well for me. I would also like to export as PDF, specifically a PDF that contains only the SVG file. I assume this should be relatively easy, but I failed to do it myself. I mostly tried using https://github.com/yWorks/svg2pdf.js.

Export nodeHTML content

Hi,

I am using the plugin cytoscape-node-html-label to display information in nodes. When I export the graph using your library I loose the content of those nodes. Is there any way to export those information ?

Many thanks in advance,

David

Cannot download .svg picture

Hi I tried using the cytoscape-svg library to download my network in .svg format but it didnt work. I had the below error:

Below is the code which I have:

     const downloadPng = (cyToDownload, picFormat) => {
        if (picFormat == 'png') {
          const png = cyToDownload.png()
          var a = document.createElement("a"); //Create <a>
          a.href = png
          a.download = "local_network.png"; //File name Here
          a.click(); //Download file
        } 

        else if (picFormat == 'jpg') {
        const jpg = cyToDownload.jpg()
        var a = document.createElement("a"); //Create <a>
        a.href = jpg
        a.download = "local_network.jpg"; //File name Here
        a.click(); //Download file
        } 

        else if (picFormat == 'svg') {
        console.log("download func called")
        const svgPic = cyToDownload.svg()
        console.log(svgPic)
        var a = document.createElement("a"); //Create <a>
        a.href = svgPic
        a.download = "local_network.svg"; //File name Here
        a.click(); //Download file
        }
  }

So my functions to download my network in png and jpg work, so I don't know why it can't download the network in .svg format. Could I get some help please?

Thank you
Jonathan

Background color (not fixed ?)

background color

Is there a way to set the background color? My application has a black background but the SVG gets exported with a white background.

border not exported

when i add to the node element an image background with
'background-image': svgpin_Url,

where earlier i have:

const svg_pin =  '<svg width="400" height="5" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M 90 0 v 1 h 220 v -1 z" fill="black"></path></svg>';
const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin);

then when the svg is exported, the border line of the node is not exported anymore.

Cytoscape svg not rendering images

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

Error: Attempted to apply path command to node g

Hello,

I am using the SVG plugin with default options and it doesn't work, throwing the following error:

Please advise.
Best Regards
Alexander

Ability to drag and drop svg images

Is it possible to drag and drop the svg node images after the svg has been made?