Zoom to a specific element

Developers
1

I am trying to zoom and center on a specific element. I have tried the solutions from previous posts like:

Neither of which has worked for me, the view does not appear to change when the zoom function is called. Here is my code:

viewer = new BpmnModeler(options);
viewer.importXML(toImport, (err) => {
    const canvas = viewer.get('canvas');
    const elementRegistry = viewer.get('elementRegistry');
    const element = elementRegistry.get('MyTaskId');
    canvas.zoom(1.0, element);
    // OR
    canvas.zoom(1.0, {x : element.x, y : element.y});
});

Any help would be appreciated.

1 Like
2

Have you had a look at how this functionality is implemented in diagram-js SearchPad?

Simply scrolling to the given element, keeping the current zoom as is can be accomplished using the following code snippet:

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
  });
}
1 Like
3

I did see that, and I ended up creating me own function that did something similar. Thanks!

1 Like