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;