Centering/zooming view to a specific element

Developers
6

A simple solution for centering a given element, keeping the zoom level as-is is:

function centerElement(elementId) {
  // assuming we center on a shape.
  // for connections we must compute the bounding box
  // based on the connection's waypoints
  var bbox = elementRegistry.get(elementId);

  var currentViewbox = canvas.viewbox();

  var elementMid = {
    x: bbox.x + bbox.width / 2,
    y: bbox.y + bbox.height / 2
  };

  canvas.viewbox({
    x: elementMid.x - currentViewbox.width / 2,
    y: elementMid.y - currentViewbox.height / 2,
    width: currentViewbox.width,
    height: currentViewbox.height
  });
}