Where is the documentation for setting a Cytoscape node label width to the width of the label text?

Question

Where is the documentation for setting a Cytoscape node label width to the width of the label text?

41 Views Asked by Eric G At 14 February 2024 at 18:27

One can set the width of the node to label and the node width will be based on the label text. However, I cannot locate any documentation for this behavior. I happened across it with other google searches.

I do now see with the code snippet that this feature is deprecated...? Has it been replaced with a new, modern method...?

I am also wondering if it is possible to base the size of the node on the background svg image and where this might be documented, if possible.

const cy = cytoscape({
  container: document.getElementById("chart"),

  elements: [
    {
      data: { id: "a", custom: "\uf3c5" }
    }
  ],

  style: [
    {
      selector: "node",
      style: {
        width: "label",
        "background-color": "#666",
        "text-valign": "center",
        "text-halign": "center",
        shape: "round-rectangle",
        label: "hello node width based on me"
      }
    }
  ],

  layout: {
    name: "grid",
    rows: 1
  }
});

.chart {
  color: red;
  width: 1000px;
  height: 400px;
  background-color: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>

<div class="chart" id="chart">
</div>

Original Q&A

There are 1 best solutions below

**Stephan T.** · Accepted Answer · 2024-02-21T11:31:35.073000

The documentation you are looking for no longer exists. Using width: 'label', has been deprecated since Sep 14, 2020.

As you can see here, the main contributer of cytoscape.js deprecated this feature.

There are ways to still get a similar result, as can be seen in this StackOverflow answer:

{
    selector: 'node',
    style: {
        'width': (node) => { node.data('label') * magicNumber; },
        'height': (node) => { node.data('label') * magicNumber; },
    }
}

Below, I added an MRE with a working solution:

const cy = cytoscape({
  container: document.getElementById("chart"),

  elements: [{
    data: {
      id: "a",
      custom: "\uf3c5",
      name: "hello node width based on me"
    }
  }],

  style: [{
    selector: "node",
    style: {
      "width": (node) => {
        const ctx = document.createElement('canvas').getContext("2d");
        const fStyle = node.pstyle('font-style').strValue;
        const size = node.pstyle('font-size').pfValue + 'px';
        const family = node.pstyle('font-family').strValue;
        const weight = node.pstyle('font-weight').strValue;

        ctx.font = fStyle + ' ' + weight + ' ' + size + ' ' + family;
        return ctx.measureText(node.data('name')).width;
      },
      "background-color": "#666",
      "text-valign": "center",
      "text-halign": "center",
      "shape": "round-rectangle",
      "label": "data(name)",

    }
  }],

  layout: {
    name: "grid",
    rows: 1,
  }
});

cy.unbind('layoutready');
cy.bind('layoutready', function() {
  cy.fit();
  cy.center();
});

body {
  font-family: helvetica;
  font-size: 14px;
}

#chart {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
}

<!DOCTYPE>
<html>

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js">
  </script>
</head>

<body>
  <div class="chart" id="chart"></div>
</body>

</html>

Where is the documentation for setting a Cytoscape node label width to the width of the label text?

There are 1 best solutions below

Related Questions in CYTOSCAPE.JS

Trending Questions

Popular # Hahtags

Popular Questions