CODEWITHSUNDEEP
javascriptresponsivejointjs
jsanchezs
jsanchezs

Reputation: 2070

Responsive joint js diagram

Im using joint js library to create a diagram inside html, but i need it to be responsive as mi site.Thing is, i have it inside a div with a java class that open down and closes up with this code :

$('.open-down-up').click(function(){
  var nameMore = $(this).attr("name");
  var valMore = $(this).attr("value");
  if(valMore == 0){
      $(this).find('span').empty();
      $(this).find('span').append("▼");
      $('div[id='+nameMore+']').slideDown("normal");
      $(this).attr("value","1");
  }else if(valMore == 1){
      $(this).find('span').empty();
      $(this).find('span').append("►");
      var n = nameMore.indexOf("process_process");
      $('div[id='+nameMore+']').slideUp("normal", function(){
          var n = nameMore.indexOf("process_process");
          if(n > -1){
              hide_panel_all();
          }
      });
      $(this).attr("value","0");
  }
});

SO, i already tried things like :

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
 el: $('#modelCanvas'),
 gridSize: 10,
 height: $('#modelCanvas').height(),
 width: $('#modelCanvas').width(),
 gridSize: 1,
 model: graph,
});

But it doesn't work...any idea or approach i can apply ??

Thanks in advance.

Upvotes: 1

Views: 1196

Answers (1)

jsanchezs
jsanchezs

Reputation: 2070

I found a way so it may be helpfull for someone who need it (for a resizing responsive):

It's necessary to scale the entire paper along with the window, so, we create a javascript event on it:

window.onresize = function(event) {
        paper.setDimensions($('#your_div_id').width());
        paper.scaleContentToFit({minScaleX: 0.3, minScaleY: 0.3, maxScaleX: 1 , maxScaleY: 1});

};

Using joint js properties whe resize the canvas along with the div based on that event but only affecting width, then set a max scale for X and Y axis. You can of course, adapt it of make conditions on it as you may need.

Hope it helps as for me !

Upvotes: 6

Related Questions