TYPO3 Core

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/66794

Hi,

I don't have the time to come up with a proper fix.

But if anyone is interested in a workaround that works most of the time and is only mildly annoying. Here you go...

With this patch dragging the focus area is still not possible.
But if you click on it, it will then follow the mouse movements and a second click will release the area.

Sometimes, this won't work on the first try. In such a case you have to close and reopen the image editor. (Which is the mildly annoying part.)

Feel free to improve this.

Hi,

After thinking about this for some time I came up with a fix for this bug.

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts

Line 540 is

create: (): void => {
          this.scaleAndMoveFocusArea(this.currentCropVariant.focusArea);
        },

But needs to be:

create: (): void => {
          // To make the focusarea draggable cropper must be disabled by
          // register the same events as cropper does.
          // 
          // Copied from
          // https://github.com/fengyuanchen/cropperjs/blob/main/src/js/constants.js

const IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
          const IS_TOUCH_DEVICE = IS_BROWSER && window.document.documentElement ? 'ontouchstart' in window.document.documentElement : false;
          const HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in window : false;
          const EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
          const EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
          const EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;
          const EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;

// Disable cropper
          $(this.focusArea).on(EVENT_POINTER_DOWN, () => {
            this.cropper.disable();
          });

// Enable cropper
          $(this.focusArea).on(EVENT_POINTER_UP, () => {
            this.cropper.enable();
          });

this.scaleAndMoveFocusArea(this.currentCropVariant.focusArea);
        },

Thanks

If anyone knows how to get this into the main repro.

please do so.

This patch is against the main branch from
https://github.com/TYPO3/typo3

Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/73070

Applied in changeset fc95fe87f4d9816b1a63e8ae02b41099efde65a7.