panBy()

in src/components/ZoomableSVGGroup.js [288:329]

• 31 lines of code
• 3 McCabe index (conditional complexity)

  panBy(clientX, clientY, event) {
    const { width, height, panLimit } = this.props;
    const {
      matrix: prevMatrix,
      dragX: prevDragX,
      dragY: prevDragY,
      scale,
    } = this.state;

    const dx = clientX - prevDragX;
    const dy = clientY - prevDragY;
    const newX = prevMatrix[4] + dx;
    const newY = prevMatrix[5] + dy;

    // check that we aren't passing the panLimit
    // TODO this feels a little janky in practice
    // This doesn't work well for data that exceeds the canvas size. The limit
    // here assumes the data fits in side of the canvas at scale >= 1. Ideally,
    // the pan limit would hault at (width|height / 2) + border node position.
    // It is probably better to have unlimited panning than to prematurely block
    // panning and hide data.

    if (
      (Math.abs(newX / scale)) > (width * panLimit) ||
      (Math.abs(newY / scale)) > (height * panLimit)
    ) {
      return;
    }

    this.setState({
      dragX: clientX,
      dragY: clientY,
      matrix: [
        prevMatrix[0],
        prevMatrix[1],
        prevMatrix[2],
        prevMatrix[3],
        newX,
        newY,
      ],
    }, () => this.props.onPan(event, newX, newY));
  }