search

MrBlenny / react-flow-chart

🌊 A flexible, stateless, declarative flow chart library for react.
https://mrblenny.github.io/react-flow-chart/index.html
MIT License
1.46k stars 306 forks source link

The inner canvas goes out of the viewport #224

Open Kousal opened 3 years ago

Kousal commented 3 years ago

@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.div position: 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.div position: 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.

image

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 commented 2 years ago

@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.