CODEWITHSUNDEEP
cytoscape.js
Károly Ozsvárt
Károly Ozsvárt

Reputation: 1091

"Setting a `style` bypass at element creation is deprecated" when specifying style along with data for a node

Using cytoscape.js, I am setting the style of a node while defining it.

Shortened example below:

window.addEventListener('DOMContentLoaded', function(){
  var cy = window.cy = cytoscape({
    elements: {
      nodes: [
        { data: { id: 'a', name: 'apple' }, style: { 'background-color': 'darkgreen' } },
      ]
    }
  });
});

(I have a default style for a node that is a different color)

This works fine, but when I run my code, the browser console shows the following warning:

Setting a `style` bypass at element creation is deprecated

What does it mean and what is the correct (non-deprecated) way to set it?

Thank you in advance!

Upvotes: 3

Views: 888

Answers (1)

Stephan T.
Stephan T.

Reputation: 6074

The correct way of doing this would be to use the cytoscape stylesheet, as can be seen in every example in the docs:

var cy = (window.cy = cytoscape({
  container: document.getElementById("cy"),
  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: "node",
      css: {
        "label": "data(id)",
        "text-valign": "center",
        "text-halign": "center",
        "background-color": "data(color)"
      }
    },
    {
      selector: "edge",
      css: {
        "line-fill": "radial-gradient",
        "line-gradient-stop-colors": "red green blue",
        "line-gradient-stop-positions": "25 50 75"
      }
    }
  ],
  elements: {
    nodes: [{
        data: {
          id: "a",
          color: "#2763c4"
        }
      },
      {
        data: {
          id: "b",
          color: "#37a32d"
        }
      },
      {
        data: {
          id: "c",
          color: "#37a32d"
        }
      }
    ],
    edges: [{
        data: {
          source: "a",
          target: "b"
        }
      },
      {
        data: {
          source: "a",
          target: "c"
        }
      }
    ]
  },
  layout: {
    name: "dagre"
  }
}));

cy.ready(function() {
  cy.dblclick();
});

var nid = 0;
cy.bind('dblclick', function(evt) {
  console.log('dblclick');
  cy.add({
    group: 'nodes',
    data: {
      id: nid,
      faveColor: 'red'
    },
    position: {
      x: evt.x,
      y: evt.y
    }
  });
  nid++;
});

cy.bind('click', 'node', function(evt) {
  console.log('node clicked: ', evt.target.id());
});
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  float: right;
  position: absolute;
}
<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
  </script>
  <!-- cyposcape dagre -->
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
  <script src="https://unpkg.com/cytoscape-dblclick/dist/index.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

Upvotes: 5

Related Questions