Zoom to a specific element

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

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

    x: elementMid.x - currentViewbox.width / 2,
    y: elementMid.y - currentViewbox.height / 2,
    width: currentViewbox.width,
    height: currentViewbox.height

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

1 Like