Bug #92897
closedfocusArea not draggable in cropper
100%
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 butdragend
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
Updated by Andreas Kienast almost 4 years ago
- Related to Task #91958: Replace deprecated cropper with cropperjs added
Updated by Gerrit Code Review almost 4 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
Updated by Gerrit Code Review almost 4 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
Updated by Gerrit Code Review almost 4 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
Updated by Jochen Roth about 3 years ago
- Related to Bug #95204: Aspect Ratio in image cropping not initialized correctly added
Updated by Andreas Kienast about 3 years ago
- Status changed from Under Review to New
Updated by JAKOTA Design Group GmbH almost 3 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.
Updated by JAKOTA Design Group GmbH almost 3 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
Updated by JAKOTA Design Group GmbH almost 3 years ago
- File deleted (
069e2ccd65fa43ee71263d2372c5be3d3e9cce18.patch)
Updated by JAKOTA Design Group GmbH almost 3 years ago
- File 6a642f57ca3725f262b5a010f6192ebe52442c8b.patch 6a642f57ca3725f262b5a010f6192ebe52442c8b.patch added
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
Updated by Andreas Kienast almost 3 years ago
Thank you for your patch file. I'll give it a try and upload it to Gerrit if it works well.
Updated by Gerrit Code Review almost 3 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
Updated by Andreas Kienast almost 3 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.
Updated by Gerrit Code Review almost 3 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
Updated by Gerrit Code Review almost 3 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
Updated by Gerrit Code Review almost 3 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
Updated by Andreas Fernandez almost 3 years ago
- Status changed from Under Review to Resolved
- % Done changed from 0 to 100
Applied in changeset fc95fe87f4d9816b1a63e8ae02b41099efde65a7.