V2: `actionstart`, `actionmove` and `actionend` are not triggered on scale

[abdul-alhasany]

Describe the bug When using CopperCanvase events actionstart, actionmove and actionend they are not triggered on scale. It seems that only action event is working with scale. I am scaling using mousewheel and have not tested using touch. I have tested all events with move action and they are working as expected.

To Reproduce This is the code I am using (vue)

<template>
  <cropper-canvas
    ref="cropperCanvas"
    background
    class="min-h-[100px]"
    @action="onAction"
    @actionmove="onActionStart"
  >
    <cropper-image
      ref="cropperImage"
      :src="imageSrc"
      initial-center-size="cover"
      scalable
      translatable
      @transform="onCropperImageTransform"
    />
    <cropper-handle action="move" plain />
  </cropper-canvas>
</template>

<script setup lang="ts">
import type CropperCanvas from "@cropper/element-canvas";
import type CropperImage from "@cropper/element-image";
import "cropperjs";
defineProps({
  /**
   * Source of the image to be cropped
   */
  imageSrc: {
    type: String,
    required: true,
  },
});

const cropperImage = ref<CropperImage>();
const cropperCanvas = ref<CropperCanvas>();

const onAction = (event: CustomEvent) => {
// Works fine
  console.log("Action", event.detail.action);
};

const onActionStart = (event: CustomEvent) => {
// Does not work
  console.log("Action start");
};
</script>

Expected behavior Events to be triggered on scale action.

Desktop (please complete the following information):

• OS: [Windows]
• Browser [chrome]
• Version [latest]

Additional context actionstart documentation state that event.detail.action is the same as action event which led me to conclude that it should trigger the same for all actions.

[fengyuanchen]

Actually, it is not support for that. I will fix the docs soon:

Same as the action event, except for the "scale" option.

[abdul-alhasany]

Thanks for the response.

What is the reason that they are not called like the rest of events?

The issue I am having is that when setting boundaries limit, translate works but I am unable to make it work 100% with scale.

There is always some pixels of the image left outside the canvas because scale stops before it reaches the boundaries due to the calculations. I wanted to change the logic to make the image fit the canvas if the scale is smaller that the canvas, but not sure how to do it.

I tried to to use some methods like $setTransform, $moveTo inside transform event, but this causes a recursive loop and it did not work

[fengyuanchen]

Why? A wheel action does not trigger *down/move/up events as others.

[abdul-alhasany]

The direction of the wheel movement can be calculated using event.deltaY. up: less than 0, down: bigger than 0 and move anytime it is moving.