kinimesi / cytoscape-svg Goto Github PK

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

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 ?

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

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

Hello,

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

Attempted to apply path command to node g
| ctx.__applyCurrentDefaultPath | @ | cytoscape-svg.js:826
  | ctx.stroke | @ | cytoscape-svg.js:1000
  | drawBorder | @ | cytoscape.cjs.js:29898
  | push.ROFb.CRp$5.drawNode | @ | cytoscape.cjs.js:29972
  | push.ROFb.CRp$1.drawElement | @ | cytoscape.cjs.js:28547
  | push.ROFb.CRp$1.drawElements | @ | cytoscape.cjs.js:28708
  | CRp.bufferCanvasImage | @ | cytoscape-svg.js:197
  | CRp.svg | @ | cytoscape-svg.js:214
  | export | @ | cytoscape-chart.proxy.ts:501
  | (anonymous) | @ | cytoscape-chart.proxy.ts:440
  | (anonymous) | @ | tslib.es6.js:76
  | ZoneAwarePromise | @ | zone-evergreen.js:1387
  | __awaiter | @ | tslib.es6.js:72

Please advise.
Best Regards
Alexander

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

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

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";
        },
}

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.

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

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.