Project

General

Profile

Actions

Bug #92897

closed

focusArea not draggable in cropper

Added by Andreas Kienast over 3 years ago. Updated over 1 year ago.

Status:
Closed
Priority:
Must have
Assignee:
-
Category:
Image Cropping
Target version:
Start date:
2020-11-21
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
11
PHP Version:
Tags:
Complexity:
no-brainer
Is Regression:
Sprint Focus:

Description

It seems the focusArea is not draggable anymore since the migration of the cropping library as done in #91958. This issue can be split in two parts:

  • the cropper's dragstart event is triggered for the focusArea as well but dragend is not, resulting in a locked state
  • moving the focusArea is cought by a global pointerdown event, which can be circumvented only by pressing the ctrl key

The latter point deserves a ReST file!


Files


Related issues 2 (0 open2 closed)

Related to TYPO3 Core - Task #91958: Replace deprecated cropper with cropperjsClosedAndreas Kienast2020-08-09

Actions
Related to TYPO3 Core - Bug #95204: Aspect Ratio in image cropping not initialized correctlyClosed2021-09-13

Actions
Actions #1

Updated by Andreas Kienast over 3 years ago

  • Related to Task #91958: Replace deprecated cropper with cropperjs added
Actions #2

Updated by Gerrit Code Review over 3 years ago

  • Status changed from In Progress to Under Review

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

Actions #3

Updated by Gerrit Code Review about 3 years ago

Patch set 2 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

Actions #4

Updated by Gerrit Code Review about 3 years ago

Patch set 3 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

Actions #5

Updated by Riccardo De Contardi almost 3 years ago

  • Category set to Image Cropping
Actions #6

Updated by Jochen Roth over 2 years ago

  • Related to Bug #95204: Aspect Ratio in image cropping not initialized correctly added
Actions #7

Updated by Andreas Kienast over 2 years ago

  • Status changed from Under Review to New
Actions #8

Updated by Jonas Eberle over 2 years ago

Confirmed in current master (11.5.1+)

Actions #9

Updated by JAKOTA Design Group GmbH about 2 years ago

  • File 069e2ccd65fa43ee71263d2372c5be3d3e9cce18.patch added

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.

Actions #10

Updated by JAKOTA Design Group GmbH about 2 years ago

  • Target version set to next-patchlevel
  • Complexity changed from nightmare to no-brainer

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

Actions #11

Updated by JAKOTA Design Group GmbH about 2 years ago

  • File deleted (069e2ccd65fa43ee71263d2372c5be3d3e9cce18.patch)
Actions #12

Updated by JAKOTA Design Group GmbH about 2 years ago

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

Actions #13

Updated by Andreas Kienast about 2 years ago

Thank you for your patch file. I'll give it a try and upload it to Gerrit if it works well.

Actions #14

Updated by Gerrit Code Review about 2 years ago

  • Status changed from New to Under Review

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

Actions #15

Updated by Andreas Kienast about 2 years ago

I've uploaded your patch. Since it's yours, feel free to ping me to set you as the patch author. I need your name and your email address for this.

Actions #16

Updated by Gerrit Code Review about 2 years ago

Patch set 2 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

Actions #17

Updated by Gerrit Code Review about 2 years ago

Patch set 3 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

Actions #18

Updated by Gerrit Code Review about 2 years ago

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

Actions #19

Updated by Andreas Fernandez about 2 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100
Actions #20

Updated by Benni Mack over 1 year ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF