[Cytoscape-discuss] change cytoscape.js option after initialize toon

[Aaron Bossert]

I have created a series of radio buttons to allow users to change specific settings such as boxSelectionEnabled dynamically. When i test the functionality, however, I get weird behavior. With box selection for example, when the radio button is clicked, zooming becomes disabled as does panning.

I have tried a couple of ways to alter the setting...but none seem to be working correctly:

cy._private[optionVariable] = valueVariable;

cy[optionVariable](valueVariable);

Given that I want to be able to avoid simply using a long chain of if/else if's for each setting, I have been trying to use a variable...but have had no luck...even though, when I dump the cy._private object to the console, the settings seem to be correctly set in the event listener for the changed radio buttons and such.

Any help would be greatly appreciated.

--
Aaron

[Aaron]

Ok, so I found the zoom issue...user-error on my part.  I had forgotten to set the zoomingEnabled value.

Still, though I am having trouble setting the options after initialization.

Here is the cityscape init:

var cy = window.cy = cytoscape({

      container: document.getElementById('viz_main'),

      elements: data,

      pixelRatio: 'auto',

      boxSelectionEnabled: $('input:radio[name=boxSelectionEnabled]:checked').val(),

      hideEdgesOnViewport: $('input:radio[name=hideEdgesOnViewport]:checked').val(),

      hideLabelsOnViewport: $('input:radio[name=hideLabelsOnViewport]:checked').val(),

      textureOnViewport: $('input:radio[name=textureOnViewport]:checked').val(),

      motionBlur: $('input:radio[name=motionBlur]:checked').val(),

      selectionType: $("#selectionType").val()

    });

and here is the event listener...

$("#graphSettings :input").on('change',function(event) {

      var k,v;

      

      // First, retrieve the changed setting and value

      if($(this).attr('type') == 'radio') {

        k = $(this).attr('name');

        v = $('input[name=\''+$(this).attr('name')+'\']:checked').val();

        v = (v.toLowerCase() == 'true');

      }

      else if($(this).attr('data-cysetting') !== undefined) {

        k = $(this).attr('data-cysetting');

        v = $(this).val();

      }

      else {

        k = $(this).attr('id');

        v = $(this).val();

      }

      

      // Then, alter the setting based on the type of setting

      if($(this).hasClass('cyOption')) {

        console.log(cy);

        cy[k](v);

      }

      else if($(this).hasClass('cyEdgeType')) {

        var edgeType = $('#curve-style').val();

        var edgeTypesObject = {

          'bezier': {

            'curve-style': 'bezier',

            'control-point-step-size': 40

          },

          'unbundled-bezier': {

            'curve-style': 'unbundled-bezier',

            'control-point-distances': 120,

            'control-point-weights': 0.1

          },

          'multi-unbundled-bezier': {

            'curve-style': 'unbundled-bezier',

            'control-point-distances': 120,

            'control-point-weights': 0.1

          },

          'haystack': {

            'curve-style': 'haystack',

            'haystack-radius': 0.5

          },

          'segments': {

            'curve-style': 'segments',

            'segment-distances': '40 -40',

            'segment-weights': '0.25 0.75'

          }

        };

        

        cy.style().selector('edge').style(edgeTypesObject[edgeType]).update();

      }

      else if($(this).hasClass('cyNodeStyle')) {

        if($(this).attr('id') == 'min-zoomed-font-size') {

          cy.style().selector('node').style('min-zoomed-font-size',$('#min-zoomed-font-size').val()).update();

        }

        else if($(this).attr('name') == 'showLabelOnHoverOnly') {

          if($('input[name=\'showLabelOnHoverOnly\']:checked').val() == 'true') {

            cy.style().selector('node').style('min-zoomed-font-size',100).update();

          }

          else {

            cy.style().selector('node').style('min-zoomed-font-size',$('#min-zoomed-font-size').val()).update();

          }

        }

        else {

          cy.style().selector('node').style(k,v).update();

        }

      }

      else if($(this).hasClass('cyEdgeStyle')) {

        cy.style().selector('edge').style(k,v).update();

      }

      else if($(this).hasClass('nodeSize')) {

        var min = cy.nodes().minDegree();

        var max = cy.nodes().maxDegree();

        cy.batch(function() {

          cy.style().selector('node').style('width',"mapData(degree,"+min+","+max+", "+$("#minNodeSize").val()+", "+$("#maxNodeSize").val()+")").update();

          cy.style().selector('node').style('height',"mapData(degree,"+min+","+max+", "+$("#minNodeSize").val()+", "+$("#maxNodeSize").val()+")").update();

        });

      }

    });

again, any help at all would be greatly appreciated!!!

[Aaron]

My sincere apologies for persistence...but I am really stuck with this.  Can someone take a look and see if there is something obvious I am missing?

[Max Franz]

Have you tried using your browser's debugger? You seem to have an issue with your code's logic; the Cytoscape.js enable/disable functions just switch boolean values.

Here's a debugger tutorial: https://developer.chrome.com/extensions/tut_debugging

In future, please post your questions to Stackoverflow.  There are links on the top of the website for that: js.cytoscape.org

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

[Aaron Bossert]

Thanks...just posted to stack overflow...

--

Aaron