onDragStart/onDragEnd events

[Nightliss]

Is your feature request related to a problem? Please describe.

I'm in need to do some stuff when the user starts drag/touch action. The only events I found are onInteractionStart and onInteractionEnd but they contain wheel/zoom event which I don't want to include.

Describe the solution you'd like

Either couple of new props like onDragStart/onDragEnd/onTouchStart/onTouchEnd or add type: Drag/Touch/Wheel arg to existing onInteraction events.

[ValentinH]

Hi,

I prefer the option to add a new type parameter to the existing callbacks.
Would you like to submit a PR for it?

[Nightliss]

Hey, I have managed to make it work with a Cropper ref:

useEffect(() => {
    const { current: cropper } = cropperRef

    if (!cropper) {
      return
    }

    // https://github.com/ValentinH/react-easy-crop/blob/main/src/Cropper.tsx#L526
    cropper.onDragStart = ({ x, y }) => {
      cropper.dragStartPosition = { x, y }
      cropper.dragStartCrop = { ...cropper.props.crop }
      cropper.props.onInteractionStart?.()

      setIsDragging(true)
    }

    // https://github.com/ValentinH/react-easy-crop/blob/main/src/Cropper.tsx#L559
    cropper.onDragStopped = () => {
      cropper.isTouching = false
      cropper.cleanEvents()
      cropper.emitCropData()
      cropper.props.onInteractionEnd?.()

      setIsDragging(false)
    }
  }, [])

It seems to work fine so I'm content with this workaround.

Would you like to submit a PR for it?

Never really did that 😅 plus I'm really time constrained at the moment.

[ValentinH]

Alright, thanks for sharing the workaround.

I'm keeping this issue opened if someone else is interested to work on this.

[github-actions]

🚀 Issue was released in v6.2.0 🚀