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

CanvasInner shrinking to container width #168

Open fenech opened 4 years ago

fenech commented 4 years ago

The CanvasInnerDefault component is defined as:

export const CanvasInnerDefault = styled.div<ICanvasInnerDefaultProps>`
  position: relative;
  outline: 1px dashed rgba(0,0,0,0.1);
  width: 10000px;
  height: 10000px;
  cursor: move;
` as any

In previous versions (I jumped from my own branch which was around ~0.0.8), the inner canvas was 10000px wide, so could be dragged horizontally by that distance. It was also possible to define the initial offset as e.g. { x: -5000, y: -5000 } to give the user more space to move in every direction.

In the current version (0.0.13) the CanvasInner component is rendered inside a <TransformComponent> which is display: flex. This means that it flex-shrinks to the width of the container.

A possible way to restore the original behaviour would be just to add flex-shrink: 0 to the CanvasInnerDefault component.

sezanzeb commented 4 years ago

Based on your solution, this css worked for me:

.react-transform-element > div {
  flex-shrink: 0;
}