0

I would like to create nice curved edges in my Cotoscape.js graph using the unbundled-bezier style. According to the database I have to set the control-point-distance(s) automatically, so I came up with following code:

{
        selector: 'edge',
        css: {
            'curve-style': 'unbundled-bezier',
            'target-arrow-shape': 'triangle',
            'control-point-weights': '0.25 0.75.',
            'control-point-distance': function( ele ){
               console.log(ele.source().position());

               var pos1 = ele.source().position().y;
               var pos2 = ele.target().position().y;
               var str = '' + Math.abs(pos2-pos1) + 'px -' + Math.abs(pos2-pos1) + 'px';

                    console.log(pos1, pos2, str);
                    return str;
                }
            }
        }

My problem is, that the graph is rendered with straight lines ant the curvy line appears only when I click on some. Also, when I move the nodes the curve moves nicely with the node, but the node positions (ele.source().position().y) does not change

karlitos
  • 1,604
  • 3
  • 27
  • 59

1 Answers1

0

A style function ought to be a pure function. Yours is technically not: It depends on state outside of the edge's data.

The only way an arbitrary function could be used to specify style is if the function is continuously polled. That would be hacky and prohibitively expensive.

You must use a pure function if you want to use a custom function. Either rewrite your function to rely on only the edge's data or use a passthrough data() mapping and change the edge's data whenever you want to modify the edge.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • Thank you very much for the reply. " ... rewrite your function to rely on only the edge's data ..." - but what if the edge data is dependent on the nodes data (e.g. source/dest position) ? Could you please provide some example how to use the `data()` passthrough ? – karlitos Aug 15 '17 at 07:25