How to scale jonitjs graphs?

Question

I noticed that jointjs do support zoom in/out as of http://www.jointjs.com/ But could not find any examples.

Please help me with the steps to zoom in/out the result graph created by jointjs within a <div>?

Cordeelia

Answer 1

Joint Paper has a method called scale().

I have this implementation for scaling (zooming) my graph:

var graphScale = 1;

var paperScale = function(sx, sy) {
     paper.scale(sx, sy);
};

var zoomOut = function() {
    graphScale -= 0.1;
    paperScale(graphScale, graphScale);
};

var zoomIn = function() {
    graphScale += 0.1;
    paperScale(graphScale, graphScale);
};

var resetZoom = function() {
    graphScale = 1;
    paperScale(graphScale, graphScale);
};

Maybe this is what you need?

Antimere

Answer 2

paper.$el.on('mousewheel DOMMouseScroll', function onMouseWheel(e) {
  //function onMouseWheel(e){
  e.preventDefault();
  e = e.originalEvent;

  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))) / 50;
  var offsetX = (e.offsetX || e.clientX - $(this).offset().left);

  var offsetY = (e.offsetY || e.clientY - $(this).offset().top);
  var p = offsetToLocalPoint(offsetX, offsetY);
  var newScale = V(paper.viewport).scale().sx + delta;
  console.log(' delta' + delta + ' ' + 'offsetX' + offsetX + 'offsety--' + offsetY + 'p' + p.x + 'newScale' + newScale)
  if (newScale > 0.4 && newScale < 2) {
    paper.setOrigin(0, 0);
    paper.scale(newScale, newScale, p.x, p.y);
  }
});

function offsetToLocalPoint(x, y) {
  var svgPoint = paper.svg.createSVGPoint();
  svgPoint.x = x;
  svgPoint.y = y;

  var pointTransformed = svgPoint.matrixTransform(paper.viewport.getCTM().inverse());
  return pointTransformed;
}

Interaction

Oh my goodness, I've been struggling with this for a while now (not too long, but long enough to get annoying), and that one line, setting the origin to (0, 0) before scaling, is all I needed. Thank you. There are some other flaws in the way it works, but you've saved me some grief. – Lashoh

What is V in V(paper.viewport) ? – Calcific

@Calcific : it is the Vectorizer library that is embedded within joint.js (you can find it easily). – Corissa