Canvas.zoom('fit-viewport') not working as expected

Hi,

I have tried for a number of days to get canvas.zoom to work.

The diagram returned is not zoomed to fit in the container, no matter what I have done. When I use a scaling factor, the diagram shrinks to the middle of the viewport.

Any help would be appreciated.

Thanks

My code is as follows:

import React, { useEffect, useState } from “react”;
import Viewer from “bpmn-js/lib/NavigatedViewer”;
import “bpmn-js/dist/assets/diagram-js.css”;
import “bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css”;
import axios from “axios”;

function App() {
const [diagram, setDiagram] = useState("");
const container = document.getElementById(“container”);
const url =
https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/master/colors/resources/pizza-collaboration.bpmn”;

useEffect(() => {
const fetchData = async () => {
axios
.get(url)
.then((resp) => {
setDiagram(resp.data);
})
.catch((error) => {
console.log(error);
});
};
fetchData();
}, []);

if (diagram.length > 0) {
const viewer = new Viewer({
container,
keyboard: {
bindTo: document
}
});
viewer
.importXML(diagram)
.then(({ warnings }) => {
if (warnings.length) {
console.log(“Warnings”, warnings);
}
})
.catch((err) => {
console.log(“error”, err.message);
});
viewer.get(‘canvas’).zoom(‘fit-viewport’);
}

return (


<div
id=“container”
style={{
border: “1px solid #000000”,
height: “50vh”,
width: “80vw”,
margin: “auto”
}}
>


);
}
export default App;

The code snippet you posted is not formatted correctly. To share code examples that illustrate your problem, please adhere to the following rules:

  • Do not post screenshots of your code
  • Focus your snippets on the few lines that matter for the topic at hand
  • Format your code

Please update your post according to these rules. We may not be able to help you otherwise. In extreme cases we may also close your topic if we regard it as spam.

Hint: To share complete setups, create and link a CodeSandbox. This way, we can inspect the problem at hand in action and, thus, can help you in a timely and more effective manner.

Thanks :heart:

Please consider that the importXML method is asynchronous, so this piece of code has to be inside the then block.

viewer.importXML(diagram)
  .then(({ warnings }) => {
      // ...

      viewer.get(‘canvas’).zoom(‘fit-viewport’);
  });

However, I really recommend to update your request with the actions @barmac mentioned.

Thanks Niklas

I have updated my code as per your suggestion but am finding that the viewer.get method is being called twice - can you think why that may be happening?

Please share your code in a readable and understandable manner. Otherwise, we can’t help you. Thanks!