CanvasInner shrinking to container width

[fenech]

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]

Based on your solution, this css worked for me:

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