Export with all data set to a graph

[SebastianOpriel]

Hey,

i use cytoscape-clipboard to copy and paste nodes. When i set different style-values to the graph programmatically like

ele.style('background-image', "foo.jpg");

then this style isn't copied, but it's necessary to do a nice copy/paste. This is due to the usage of cy.JSON() at the cliboard-extension. I see no possibility to change this behavior by myself, because i don't want to touch the cytoscape.js lib itself (and modify the cy.JSON()-method).

Does anyone have a solution for this problem, or might it be a feature for a future release?

best regards Bastian

[maxkfranz]

The problem is that style bypasses are not serialisable, because they're not part of the element's state proper.

If you use the stylesheet, serialising the style for each element becomes unneccessary.

If for some reason you absolutely need per-element manual values (e.g. the user sets colour via a colour picker), set those values in data() instead and use a data() mapper in your stylesheet. That way, the state is serialised -- because it's part of the model rather than just the view.

As an aside, you lose out on several performance optimisations if you use bypasses via ele.style().

[SebastianOpriel]

Thanks a lot @maxkfranz The mapper solved my problem. And yes unfortunately i need to do these kind of unpretty things due to the existing application where Cytoscape should be used.

For those who run also in this problem: Setup the graph with styling and a mapper for the value of the background-image eg.:

[...]
style: [
  {
    selector: "node",
    style: {
      "label": "data(label)",
      "font-size": "0.7em",
      "background-fit": "contain",
      "background-image": "data(background)",
     }
[...]

Everytime you add a node, set the background

var label = "myNode";
var x = y = 0;
var background = "foo.jpg";
cy.add({
  group: "nodes",
  data: {label:label,background:background},
  renderedPosition: {x: x, y: y}
})

Greetings Bastian