The inner canvas goes out of the viewport

[Kousal]

@MrBlenny This project is great and gives a lot of useful features.
I face difficulty when I use custom Inner and Outer canvas. Main purpose of the custom canvas is that I don't want my canvas to be too large, I want the canvas within my window viewport. I use the below Custom canvas componets.

const CanvasInnerCustom = styled.divposition: relative; left: 0px; top: 0px; outline: 1px dashed rgba(0,0,0,0.1); width: 80vw; height: 70vh; overflow: scroll; cursor: not-allowed; as any

const CanvasOuterCustom = styled.divposition: relative; background-size: 10px 10px; background-color: #D3D3D3; background-image: linear-gradient(90deg,hsla(0,0%,100%,.1) 1px,transparent 0), linear-gradient(180deg,hsla(0,0%,100%,.1) 1px,transparent 0); width: 80vw; height:70vh; overflow: scroll; cursor: not-allowed; as any

To begin with it works perfect. However, when I zoom in and zoom our repeatedly, my inner canvas gets displaced and moves out of my view.

Can someone suggest how to achieve this ? or is it a new features that is not achievable with the current version of react-flow-chart

[NaeemHHassan]

@Kousal override callback onZoomCanvas as
onZoomCanvas: ({ config, data }) => { if (data.scale < config.zoom.minScale) return setState({ ...state }); const chart = { ...state }; chart.offset = getOffset(config, { x: data.positionX, y: data.positionY }) chart.scale = data.scale setState(chart); }
I've solved this issue by doing this. Hope so it helps.