How to automatically change the width of a preview edge according to the zoom level in cytoscape.js-edgehandles?

Question

I am using cytoscape.js and the edgehandles extension (https://github.com/cytoscape/cytoscape.js-edgehandles). Currently I am automatically resizing the line width of my edge using the event 'zoom':

cy.on('zoom', function (evt) {
    let zoomFactor = cy.zoom()
    let newFontSize = defaut_font_size.general * 1 / zoomFactor;
    cy.filter("node[type='main-WP'][parent !^= 'compound']").style({
        "font-size": newFontSize,
    });
    cy.edges().style({
        'width': (0.3 * newFontSize),
    });
});

How can I achieve something similar on the classes (.eh-preview, .eh-ghost-edge)?

Answer 1

You can give a function for a style. The drawback is the functions are not JSON serializable. So If you need to import/export a graph with cy.json() you should also apply the function styles.

cy.style().selector('edge.eh-preview')
  .style({
    'width': () => {
      let zoomFactor = cy.zoom()
      let newFontSize = defaut_font_size.general * 1 / zoomFactor;
      return (0.3 * newFontSize);
    },
  }).update();