Issue in restricting panning inside a whiteboard app on react native

Question

My main code:

const [pan] = useState(new Animated.ValueXY());
const panResponder: PanResponderInstance = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => {
      setShowInsertShapeMenu(false);
      return !moveCursor;
    },
    onMoveShouldSetPanResponder: (evt, gestureState) => {
      return (
        !moveCursor &&
        (Math.abs(gestureState.dx) > 2 || Math.abs(gestureState.dy) > 2)
      );
    },
    onPanResponderGrant: () => {
      pan.setOffset({
        x: pan.x._value,
        y: pan.y._value,
      });
    },
    onPanResponderMove: (evt, gestureState) => {
      if (evt.nativeEvent.touches.length === 2) {
        let dx =
          evt.nativeEvent.touches[0].pageX - evt.nativeEvent.touches[1].pageX;
        let dy =
          evt.nativeEvent.touches[0].pageY - evt.nativeEvent.touches[1].pageY;
        let distance = Math.sqrt(dx * dx + dy * dy);
        const newScale = distance / 400;
        if (
          newScale >= Hardcoded.minScalePan &&
          newScale <= Hardcoded.maxScalePan
        ) {
          setScale(newScale);
        }
      } else {
        const scaledDx = gestureState.dx / scale;
        const scaledDy = gestureState.dy / scale;

        pan.setValue({
          x: scaledDx,
          y: scaledDy,
        });
      }
    },
    onPanResponderRelease: () => {
      pan.flattenOffset();
    },
  });



UI:
 <View>
      <View
        ref={viewRef}
        style={{
          backgroundColor: "rgb(240, 240, 240)",
          height: '100%',
          width: "100%",
        }}
        {...panResponder.panHandlers}
      >
        <Animated.View
          style={{
            transform: [
              { translateX: pan.x },
              { translateY: pan.y },
              { scale: scale },
            ],
          }}
        >
          {children}
        </Animated.View>
      </View>
</View>

So basically using pan values i can move the whiteboard (just like in figma) or you can say can move the children inside Animated.View. Children is a list of shapes like rectangle, circle, etc. Now I want to restrict the pan movement to height: 1600 and width:1600. I have tried everything but is not able to achieve the intended functionality.

Thanks in advance for answering.

I tried by putting basic if conditions to check that new pan x > 0 and < 1600. Then only I set it. Same for pan y. Also tried asking chat GPT. but didn't got any solution from there.

Issue in restricting panning inside a whiteboard app on react native

0 Answers0