Project

General

Profile

Actions
Copy link

Bug #103389

closed

Multiple configured coverAreas not correctly displayed in image manipulation modal

Added by Chris Müller 9 months ago. Updated 5 months ago.

Status:
Closed
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2024-03-13
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
12
PHP Version:
8.3
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

The following cover areas are defined in a custom page field:

'columns' => [
    'crop' => [
        'config' => [
            'cropVariants' => [
                'desktop_wide' => [
                    'title' => 'Desktop wide',
                    'allowedAspectRatios' => [
                        'default' => [
                            'title' => 'Default',
                            'value' => 1920 / 680,
                        ],
                    ],
                    'selectedRatio' => 'default',
                    'coverAreas' => [
                        [
                            'x' => 0,
                            'y' => 0,
                            'width' => 1,
                            'height' => 0.25,
                        ],
                        [
                            'x' => 0.2,
                            'y' => 0.35,
                            'width' => 0.25,
                            'height' => 0.5,
                        ],
                    ],
                ],
                'desktop' => [
                    'title' => 'Desktop',
                    'allowedAspectRatios' => [
                        'default' => [
                            'title' => 'Default',
                            'value' => 1370 / 680,
                        ],
                    ],
                    'selectedRatio' => 'default',
                    'coverAreas' => [
                        [
                            'x' => 0,
                            'y' => 0,
                            'width' => 1,
                            'height' => 0.25,
                        ],
                        [
                            'x' => 0.08,
                            'y' => 0.35,
                            'width' => 0.45,
                            'height' => 0.5,
                        ],
                    ],
                ],
                'small' => [
                    'title' => 'Tablet / Smartphone',
                    'allowedAspectRatios' => [
                        'default' => [
                            'title' => 'Default',
                            'value' => 16 / 9,
                        ],
                    ],
                    'selectedRatio' => 'default',
                ],
            ],
        ],
    ],
],

However, the cover areas in the UI are displayed like that:

Desktop wide:

Desktop:

Tablet/Smartphone:

Mind the duplicated cover areas, best seen in "Desktop wide" and "Desktop" for the second defined cover area. Additionally, the "Tablet/Smartphone" crop variant should have no cover areas displayed.

It looks like all defined cover areas are combined for each crop variant.

TYPO3 v12.4.12

Files

Download all files
desktop-wide.png (679 KB) desktop-wide.png Chris Müller, 2024-03-13 13:16
desktop.png (690 KB) desktop.png Chris Müller, 2024-03-13 13:16
tablet.png (737 KB) tablet.png Chris Müller, 2024-03-13 13:16
Actions
Copy link
 #1

Updated by Chris Müller 9 months ago

In the payload of the "Open Editor" button the cover areas are passed correctly:

{
    "cropVariants": {
        "desktop_wide": {
            "id": "desktop_wide",
            "title": "Desktop wide",
            "cropArea": {
                "x": 0,
                "y": 0.10170383527399512,
                "width": 1,
                "height": 0.6296296296296295
            },
            "allowedAspectRatios": {
                "default": {
                    "id": "default",
                    "title": "Default",
                    "value": 2.823529411764706
                }
            },
            "selectedRatio": "default",
            "focusArea": null,
            "coverAreas": [
                {
                    "x": 0,
                    "y": 0,
                    "width": 1,
                    "height": 0.25
                },
                {
                    "x": 0.2,
                    "y": 0.35,
                    "width": 0.25,
                    "height": 0.5
                }
            ]
        },
        "desktop": {
            "id": "desktop",
            "title": "Desktop",
            "cropArea": {
                "x": 0,
                "y": 0.00018511075673567726,
                "width": 1,
                "height": 0.8824006488240065
            },
            "allowedAspectRatios": {
                "default": {
                    "id": "default",
                    "title": "Default",
                    "value": 2.014705882352941
                }
            },
            "selectedRatio": "default",
            "focusArea": null,
            "coverAreas": [
                {
                    "x": 0,
                    "y": 0,
                    "width": 1,
                    "height": 0.25
                },
                {
                    "x": 0.08,
                    "y": 0.35,
                    "width": 0.45,
                    "height": 0.5
                }
            ]
        },
        "small": {
            "id": "small",
            "title": "Tablet \/ Smartphone",
            "cropArea": {
                "x": 0,
                "y": 0,
                "width": 1,
                "height": 1
            },
            "allowedAspectRatios": {
                "default": {
                    "id": "default",
                    "title": "Default",
                    "value": 1.7777777777777777
                }
            },
            "selectedRatio": "default",
            "focusArea": null,
            "coverAreas": null
        }
    },
    "image": 4908
}
Actions
Copy link
 #2

Updated by Chris Müller 9 months ago · Edited

Initially, for "Desktop wide" in HTML three cover areas are defined instead of the two configured:

<div class="cropper-cover-area t3js-cropper-cover-area" style="height:50%;left:20%;top:35%;width:25%;"></div>
<div class="cropper-cover-area t3js-cropper-cover-area" style="height:25%;left:0%;top:0%;width:100%;"></div>
<div class="cropper-cover-area t3js-cropper-cover-area" style="height:50%;left:8%;top:35%;width:45%;"></div>

After switching to "Desktop" four are defined:

<div class="cropper-cover-area t3js-cropper-cover-area" style="height:25%;left:0%;top:0%;width:100%;"></div>
<div class="cropper-cover-area t3js-cropper-cover-area" style="height:50%;left:20%;top:35%;width:25%;"></div>
<div class="cropper-cover-area t3js-cropper-cover-area" style="height:25%;left:0%;top:0%;width:100%;"></div>
<div class="cropper-cover-area t3js-cropper-cover-area" style="height:50%;left:8%;top:35%;width:45%;"></div>

As it looks, every time another crop variant is selected, the latest <div class="cropper-cover-area"> is removed, and the new ones added. Seems, more than one cropper-cover-area is not removed, although multiple are defined.

Actions
Copy link
 #3

Updated by Chris Müller 9 months ago

  • Subject changed from coverAreas seem to be merged for different cropVariants to Multiple configured coverAreas not correctly displayed in image manipulation modal
Actions
Copy link
 #4

Updated by Chris Müller 9 months ago · Edited

I assume, this line is responsible:

this.cropBox?.querySelector(this.coverAreaSelector)?.remove();

https://github.com/TYPO3/typo3/blob/12.4/Build/Sources/TypeScript/backend/image-manipulation.ts#L493

With querySelector only one cover area is removed from DOM? Using querySelectorAll and iterating over the results may be the fix.

Actions
Copy link
 #5

Updated by Gerrit Code Review 6 months 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/+/84489

Actions
Copy link
 #6

Updated by Gerrit Code Review 6 months 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/+/84489

Actions
Copy link
 #7

Updated by Gerrit Code Review 6 months 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/+/84489

Actions
Copy link
 #8

Updated by Gerrit Code Review 5 months ago

Patch set 4 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/+/84489

Actions
Copy link
 #9

Updated by Gerrit Code Review 5 months ago

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

Actions
Copy link
 #10

Updated by Anonymous 5 months ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100
Actions
Copy link
 #11

Updated by Gerrit Code Review 5 months ago

  • Status changed from Resolved to Under Review

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

Actions
Copy link
 #12

Updated by Anonymous 5 months ago

  • Status changed from Under Review to Resolved
Actions
Copy link
 #13

Updated by Benni Mack 5 months ago

  • Status changed from Resolved to Closed
Actions
Copy link

Also available in: Atom PDF