Grabbing doesn't work (for all Cropper types)

[DirkBroenink]

I have a Classic Cropper.

For some reason the Grabber doesn't work. It's not showing as a 'Grabbing' cursor (though I can override it to be). And it's not actually grabbing and moving the image.

I've tried other Cropper types as well.

Is it possible that some other component is overriding the settings?

This is the code.

  methods: {
    changeImage({ coordinates, canvas }) {
            console.log(coordinates, canvas);
        },

    uploadImage(e) {
      const image = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(image);
      reader.onload = e =>{
          this.previewImage = e.target.result;
          console.log(this.previewImage);
      };
    },
....
}

<template>
    <div>
        <Cropper
          :src="previewImage"
          @change="changeImage"
        />
      <input type="file" accept="image/jpeg" @change=uploadImage>
    </div>
</template>

<style>
.cropper {
    height: 250px;
  width: 250px;
    background: #AAA;
}

.vue-rectangle-stencil--movable {
  cursor: grabbing;
}
</style>

[Norserium]

@DirkBroenink, hello! I don't get what do you want to get? Do you want to change the cursor that appears when you move a mouse pointer on the stencil? It's pretty simple.

[DirkBroenink]

Hi @Norserium ,

That's a quick answer!

I've been able to change the cursor, thanks. However the grabbing does not actually work. If I click and try to move the image it doesn't move the image. All other functionality of the component actually works.

[Norserium]

@DirkBroenink, could you record a video? I assume you can't move image, because it's not zoomed. However, if you set image-restriction="none" then you will be able to move it.

[DirkBroenink]

https://user-images.githubusercontent.com/4138715/158014173-6dc0a7f6-8c6e-4e74-b33b-7e661fce7e6d.mp4

First I resize the selection window, which works fine.

As you can see inside the selection window the cursor is not correct. And it doesn't respond when I click on it and try to drag the selection window.

Zooming the image works fine.

Edit: Excuse me, when I said 'move the image' before I meant moving the selection screen.

[Norserium]

@DirkBroenink, it looks that you have a some sort of unusual configuration. Could you reproduce this issue in the codesandbox? Could you provide more code? Do you have any errors in the console?

[DirkBroenink]

Hi, thanks for your answer.

I created a project from scratch and was able to keep all functionality and get your component to work as well. So probably it was an issue caused by one of the components that I installed during testing but wasn't using anymore.

[Norserium]

All's well that ends well. But still I can't even imagine what it can be.

Is this issue resolved?

[DirkBroenink]

I still don't know what it could be. I had tried quite some different components for trying to achieve what in the end I managed to achieve with your component. Perhaps one of those components changed some CSS significantly. I am just guessing and quite new to Vue. You can close this issue I think.

[Norserium]

@DirkBroenink, all right, I close issue then.