Zoom in on BPMN canvas

We have used BPMN in our Javascript (MERN) based project, and applied certain customizations in components and design. Now, when I opened the diagram page, I want that it should zoom in a little bit, and the position of the canvas should be at the start of the flow by default i.e. the portion of the start of the flow should be zoomed in for better visibility.

I tried using CSS, and canvas.viewBox() for this, but then my diagram vanished from the canvas. Can someone please assist?

static async renderDiagramCanvas(diagramXML) {
    const modeler = ModelerService.getModeler();
    await modeler.importXML(diagramXML);

    const canvas = modeler.get("canvas");
    canvas.zoom("fit-viewport", "auto");
    canvas.zoom(0.6);
  }

Current Scenario:
For example:
We have a diagram similar to below image:

Sometimes due to complexity of the flow, much zoomed out image gives issue, so we want that following part of the flow should be zoomed in on canvas by default:
image
(Intended :white_check_mark:)

So the area with start event should be zoomed in by default.

But currently a central part of flow is zoomed in:
image
(Not intended :x: )

@philippfromme can you please assist, this is urgently required!!

canvas.viewbox(...) is a better fit for this purpose. Please share your attempt of using it or refer to the documentation in the code.

1 Like

Thanks a lot, this helped, because earlier I was using:

canvas.viewbox({ x: 0, y: 0 });

which disappeared the diagram from canvas, but now by taking out the di bounds of the start event, and using viewbox works well.

Working code:

const elementRegistry = modeler.get("elementRegistry");

    // Find the first Start Event dynamically
    const startEvents = elementRegistry
      .filter(element => element.type === "bpmn:StartEvent" &&
        element.businessObject.$parent.$type !== "bpmn:SubProcess");

    if (startEvents?.length) {
      const mainStartEvent = startEvents[0]; // The first valid Start Event
      // const bbox = canvas.getBoundingBox(mainStartEvent);
      const { x, y, width, height } = mainStartEvent.businessObject.di.bounds;

      // Set viewport to focus on the main Start Event
      canvas.viewbox({
        x: x + 500, // Adjust offset as needed
        y: y + 500,
        width: width + 200,
        height: height + 200
      });
      canvas.zoom(0.5);
    } else {
      canvas.zoom(0.5);
    }