Translating canvas mouse position to JointJS matrix coordinates

07 Mar, 2017

If you need a way to convert the JointJS mouse position to the canvas matrix coordinates, this is a simple way to do it (in combination with an angular mouse wheel event):

angular.element("#paper").bind("mousewheel", function (event) {
  var svgPoint = this.paper.svg.createSVGPoint();
  svgPoint.x = event.offsetX;
  svgPoint.y = event.offsetY;

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

  console.log(svgPoint);
  console.log(pointTransformed);
});