Need some help with minZoom, maxZoom and few other things

[pivanov]

Hey,

First of all great component 👍

I had some questions:

1. Is it possible to set min and max zoom?
2. Can we set not to translateX (left and right) more than 10px offset. For example if we have svg with size 50x100 I want to avoid the user to be able to move svg to the left more than 10px offset (is the same for the right position and is the same for translateY.
3. Do you have any plans to add double tap to zoom?
4. Can we set for example the initial scale (scale={1.5}) and the initial position of the svg like {top: 20, left: 50} and this should be the initial state of the svg.

Hope you will understand what I mean :) if not please let me know and I will try to explain more.

Thanks in advance :)

[msand]

Hello,

I'm happy to hear 😄

Yes it is, scale and translate can be constrained already from before, and now I've added double tap and initial{Top,Left,Zoom} support:

class SvgRoot extends Component {
  render() {
    const { transform, width, height } = this.props;
    return (
      <Svg width={width} height={height}>
        <G transform={transform}>
          <Rect
            y="0"
            x="0"
            width="100"
            height="100"
            fill="none"
            strokeWidth="1"
            stroke="red"
          />
          <Rect
            y="5"
            x="5"
            width="90"
            height="90"
            fill="blue"
            strokeWidth="3"
            stroke="black"
          />
        </G>
      </Svg>
    );
  }
}

export default class SimpleConstrained extends Component {
  render() {
    const { width, height } = this.props;
    return (
      <ZoomableSvg
        align="mid"
        vbWidth={100}
        vbHeight={100}
        width={width}
        height={height}
        meetOrSlice="meet"
        svgRoot={SvgRoot}
        initialTop={-20}
        initialLeft={-50}
        initialZoom={0.5}
        doubleTapThreshold={300}
        childProps={{ width, height }}
        constrain={{
          combine: 'dynamic',
          scaleExtent: [1 / 5, 5],
          translateExtent: [[-10, -10], [110, 110]],
        }}
      />
    );
  }
}