[V2] Get dynamic zoom + translatable selection at the same time

[golden-kiwi]

cropperjs version: 2.0.0

When I set dynamic on cropper-selection I can no longer drag the selection, only the image+selection together

I would like to have all these at the same time:

• dynamic zoom (on mouse wheel or zoom button click)
• translatable selection (on mouse click and drag)
• translatable image (on mouse click and drag)

Here's an example:

<cropper-canvas background>
  <cropper-image rotatable scalable skewable translatable></cropper-image>
  <cropper-shade hidden></cropper-shade>
  <cropper-handle action="move" plain></cropper-handle>
  <!-- either -->
  <cropper-selection initial-coverage="0.5" movable resizable zoomable dynamic> <!-- dynamic zoom but selection not translatable-->
  <!-- or -->
  <cropper-selection initial-coverage="0.5" movable resizable zoomable> <!-- no dynamic zoom but selection is translatable-->
    <cropper-grid role="grid" covered></cropper-grid>
    <cropper-crosshair centered></cropper-crosshair>
    <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
    <cropper-handle action="n-resize"></cropper-handle>
    <cropper-handle action="e-resize"></cropper-handle>
    <cropper-handle action="s-resize"></cropper-handle>
    <cropper-handle action="w-resize"></cropper-handle>
    <cropper-handle action="ne-resize"></cropper-handle>
    <cropper-handle action="nw-resize"></cropper-handle>
    <cropper-handle action="se-resize"></cropper-handle>
    <cropper-handle action="sw-resize"></cropper-handle>
  </cropper-selection>
</cropper-canvas>

Based on:

• Desired dynamic zoom: https://fengyuanchen.github.io/cropperjs/v2/api/cropper-selection.html#dynamic
• Desired selection translation: https://fengyuanchen.github.io/cropperjs/v2/api/cropper-selection.html#limit-boundaries
• Default template: https://github.com/fengyuanchen/cropperjs/blob/main/packages/cropperjs/src/template.ts

[fengyuanchen]

You can prevent image transforming when the action is move, reference the following Vue SFC demo code:

<template>
  <cropper-canvas 
    background
    @action="onCropperCanvasAction"
  >
    <cropper-image
      src="/cropperjs/v2/picture.jpg"
      alt="Picture"
      rotatable
      scalable
      skewable
      translatable
      @transform="onCropperImageTransform"
    />
   <cropper-handle 
      action="move" 
      plain
    />
    <cropper-selection
      initial-coverage="0.5"
      movable
      resizable
      outlined
      dynamic
    >
      <cropper-handle
        action="move"
        theme-color="rgba(255, 255, 255, 0.35)"
      />
    </cropper-selection>
  </cropper-canvas>
</template>

<script>
export default {
  data() {
    return {
      action: 'none',
    };
  },
  methods: {
    onCropperCanvasAction(event) {
      this.action = event.detail.action;
    },
    onCropperImageTransform(event) {
      if (this.action === 'move') {
        event.preventDefault();
      }
    },
  },
};
</script>

[golden-kiwi]

Hi and thanks for the suggestion!

With your changes it's not exactly what's needed:

• yes the zoom is dynamic
• yes the selection is movable
• but the image is not movable (a click & drag outside of the selection will move the selection → it should move the image instead)

Do you have an idea to have all 3 at the same time?