From f4a73f2f10263b1a23d7b7a693bbf3adb6351fbc Mon Sep 17 00:00:00 2001 From: Helmut Hummel Date: Tue, 7 Feb 2017 21:12:16 +0100 Subject: [PATCH] [BUGFIX] Eliminate gremlins in image cropper Refactor rendering to use two templates, a layout and a partial to be more flexible. Now also force the crop to be applied, even when the editor does not open the image manipulation. This is important when only one aspect ratio is allowed to not allow the editor to save an invalid state. Eliminate several quirks in the TypeScript code, among them: * reset state when closing the cropper * reset state when modal is dismissed * correctly initialize all previews * show correct size of crop area for big images * avoid accidental dismiss of the modal Last but not least add the accidentally removed form engine wizard html fields again. Resolves: #79764 Resolves: #79731 Resolves: #79753 Resolves: #79674 Releases: master Change-Id: I0a24d6418d6263b00c3fbf31901fd7c67e9fc97e Reviewed-on: https://review.typo3.org/51642 Tested-by: TYPO3com Reviewed-by: Frans Saris Tested-by: Frans Saris Reviewed-by: Georg Ringer Tested-by: Georg Ringer --- .../Public/Less/TYPO3/_element_cropper.less | 2 +- .../Form/Element/ImageManipulationElement.php | 45 +++-- .../Form/Wizard/ImageManipulationWizard.php | 6 +- .../Private/Layouts/ImageManipulation.html | 16 ++ .../ImageManipulation/ModalTitle.html | 9 + .../ImageManipulationElement.html | 61 ++++++ ...ping.html => ImageManipulationWizard.html} | 67 +------ .../Private/TypeScript/ImageManipulation.ts | 186 +++++++++++++----- .../Public/JavaScript/ImageManipulation.js | 182 ++++++++++++----- .../Imaging/ImageManipulation/Area.php | 21 ++ .../Imaging/ImageManipulation/CropVariant.php | 24 ++- .../CropVariantCollection.php | 42 +++- .../Imaging/ImageManipulation/Ratio.php | 16 ++ .../Imaging/ImageManipulation/AreaTest.php | 93 +++++++++ 14 files changed, 577 insertions(+), 193 deletions(-) create mode 100644 typo3/sysext/backend/Resources/Private/Layouts/ImageManipulation.html create mode 100644 typo3/sysext/backend/Resources/Private/Partials/ImageManipulation/ModalTitle.html create mode 100644 typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html rename typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/{ImageCropping.html => ImageManipulationWizard.html} (66%) create mode 100644 typo3/sysext/core/Tests/Unit/Imaging/ImageManipulation/AreaTest.php diff --git a/Build/Resources/Public/Less/TYPO3/_element_cropper.less b/Build/Resources/Public/Less/TYPO3/_element_cropper.less index 0404c0148477..853a93bc30ed 100644 --- a/Build/Resources/Public/Less/TYPO3/_element_cropper.less +++ b/Build/Resources/Public/Less/TYPO3/_element_cropper.less @@ -442,4 +442,4 @@ max-width: none !important; max-height: none !important; } -} \ No newline at end of file +} diff --git a/typo3/sysext/backend/Classes/Form/Element/ImageManipulationElement.php b/typo3/sysext/backend/Classes/Form/Element/ImageManipulationElement.php index 903affac09ad..3d2b9ff8cb3f 100644 --- a/typo3/sysext/backend/Classes/Form/Element/ImageManipulationElement.php +++ b/typo3/sysext/backend/Classes/Form/Element/ImageManipulationElement.php @@ -120,7 +120,9 @@ class ImageManipulationElement extends AbstractFormElement parent::__construct($nodeFactory, $data); // Would be great, if we could inject the view here, but since the constructor is in the interface, we can't $this->templateView = GeneralUtility::makeInstance(StandaloneView::class); - $this->templateView->setTemplatePathAndFilename(GeneralUtility::getFileAbsFileName('EXT:backend/Resources/Private/Templates/ImageManipulation/ImageCropping.html')); + $this->templateView->setLayoutRootPaths([GeneralUtility::getFileAbsFileName('EXT:backend/Resources/Private/Layouts/')]); + $this->templateView->setPartialRootPaths([GeneralUtility::getFileAbsFileName('EXT:backend/Resources/Private/Partials/ImageManipulation/')]); + $this->templateView->setTemplatePathAndFilename(GeneralUtility::getFileAbsFileName('EXT:backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html')); $this->uriBuilder = GeneralUtility::makeInstance(UriBuilder::class); } @@ -136,29 +138,30 @@ class ImageManipulationElement extends AbstractFormElement $parameterArray = $this->data['parameterArray']; $config = $this->populateConfiguration($parameterArray['fieldConf']['config']); - if ($config['readOnly']) { - $options = []; - $options['parameterArray'] = [ - 'fieldConf' => [ - 'config' => $parameterArray['fieldConf']['config'], - ], - 'itemFormElValue' => $parameterArray['itemFormElValue'], - ]; - $options['renderType'] = 'none'; - - // Early return in case the field is set to read only - return $this->nodeFactory->create($options)->render(); - } - $file = $this->getFile($this->data['databaseRow'], $config['file_field']); if (!$file) { // Early return in case we do not find a file return $resultArray; } - $config = $this->processConfiguration($config, $parameterArray['itemFormElValue'] ?? '{}'); + $config = $this->processConfiguration($config, $parameterArray['itemFormElValue'], $file); + + $fieldInformationResult = $this->renderFieldInformation(); + $fieldInformationHtml = $fieldInformationResult['html']; + $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldInformationResult, false); + + $fieldControlResult = $this->renderFieldControl(); + $fieldControlHtml = $fieldControlResult['html']; + $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldControlResult, false); + + $fieldWizardResult = $this->renderFieldWizard(); + $fieldWizardHtml = $fieldWizardResult['html']; + $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldWizardResult, false); $arguments = [ + 'fieldInformation' => $fieldInformationHtml, + 'fieldControl' => $fieldControlHtml, + 'fieldWizard' => $fieldWizardHtml, 'isAllowedFileExtension' => in_array(strtolower($file->getExtension()), GeneralUtility::trimExplode(',', strtolower($config['allowedExtensions'])), true), 'image' => $file, 'formEngine' => [ @@ -182,7 +185,8 @@ class ImageManipulationElement extends AbstractFormElement $arguments['formEngine']['validation'] = $this->getValidationDataAsJsonString(['required' => true]); } } - $resultArray['html'] = $this->templateView->renderSection('Element', $arguments); + $this->templateView->assignMultiple($arguments); + $resultArray['html'] = $this->templateView->render(); return $resultArray; } @@ -271,13 +275,18 @@ class ImageManipulationElement extends AbstractFormElement /** * @param array $config * @param string $elementValue + * @param File $file * @return array * @throws \TYPO3\CMS\Core\Imaging\ImageManipulation\InvalidConfigurationException */ - protected function processConfiguration(array $config, string $elementValue) + protected function processConfiguration(array $config, string &$elementValue, File $file) { $cropVariantCollection = CropVariantCollection::create($elementValue, $config['cropVariants']); + if (empty($config['readOnly'])) { + $cropVariantCollection = $cropVariantCollection->applyRatioRestrictionToSelectedCropArea($file); + } $config['cropVariants'] = $cropVariantCollection->asArray(); + $elementValue = (string)$cropVariantCollection; $config['allowedExtensions'] = implode(', ', GeneralUtility::trimExplode(',', $config['allowedExtensions'], true)); return $config; } diff --git a/typo3/sysext/backend/Classes/Form/Wizard/ImageManipulationWizard.php b/typo3/sysext/backend/Classes/Form/Wizard/ImageManipulationWizard.php index a176c5e62d0d..112d956bd0d9 100644 --- a/typo3/sysext/backend/Classes/Form/Wizard/ImageManipulationWizard.php +++ b/typo3/sysext/backend/Classes/Form/Wizard/ImageManipulationWizard.php @@ -40,7 +40,9 @@ class ImageManipulationWizard { if (!$templateView) { $templateView = GeneralUtility::makeInstance(StandaloneView::class); - $templateView->setTemplatePathAndFilename(GeneralUtility::getFileAbsFileName('EXT:backend/Resources/Private/Templates/ImageManipulation/ImageCropping.html')); + $templateView->setLayoutRootPaths([GeneralUtility::getFileAbsFileName('EXT:backend/Resources/Private/Layouts/')]); + $templateView->setPartialRootPaths([GeneralUtility::getFileAbsFileName('EXT:backend/Resources/Private/Partials/ImageManipulation/')]); + $templateView->setTemplatePathAndFilename(GeneralUtility::getFileAbsFileName('EXT:backend/Resources/Private/Templates/ImageManipulation/ImageManipulationWizard.html')); } $this->templateView = $templateView; } @@ -68,7 +70,7 @@ class ImageManipulationWizard 'image' => $image, 'cropVariants' => $queryParams['cropVariants'] ]; - $content = $this->templateView->renderSection('Cropper', $viewData); + $content = $this->templateView->renderSection('Main', $viewData); $response->getBody()->write($content); return $response; diff --git a/typo3/sysext/backend/Resources/Private/Layouts/ImageManipulation.html b/typo3/sysext/backend/Resources/Private/Layouts/ImageManipulation.html new file mode 100644 index 000000000000..05351ecbc8ba --- /dev/null +++ b/typo3/sysext/backend/Resources/Private/Layouts/ImageManipulation.html @@ -0,0 +1,16 @@ +
+ {fieldInformation -> f:format.raw()} +
+
+ +
+
+
+ {fieldControl -> f:format.raw()} +
+
+
+ {fieldWizard -> f:format.raw()} +
+
+
diff --git a/typo3/sysext/backend/Resources/Private/Partials/ImageManipulation/ModalTitle.html b/typo3/sysext/backend/Resources/Private/Partials/ImageManipulation/ModalTitle.html new file mode 100644 index 000000000000..f251983a5740 --- /dev/null +++ b/typo3/sysext/backend/Resources/Private/Partials/ImageManipulation/ModalTitle.html @@ -0,0 +1,9 @@ + + + + + : {image.properties.title} — {image.name}{image.name} + ({image.properties.width} × {image.properties.height}) + + + diff --git a/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html b/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html new file mode 100644 index 000000000000..61d526f6a8f5 --- /dev/null +++ b/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html @@ -0,0 +1,61 @@ + + + + +
+ + +
+ +
+ +
+ +
+ + +
+ + + +
+ + + + + + + + + +
{crop.width}px
{crop.height}px
+
+ +
+ + + + +
+

+ +
+ {config.allowedExtensions -> f:format.case(mode: 'upper')} +

+
+ + +
+ + diff --git a/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageCropping.html b/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationWizard.html similarity index 66% rename from typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageCropping.html rename to typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationWizard.html index 7a2a03dc7ea1..fd9e97ac1924 100644 --- a/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageCropping.html +++ b/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationWizard.html @@ -1,74 +1,20 @@ - -
- - -
- -
- -
- -
-
- - - -
- - - - - - - - - -
{crop.width}px
{crop.height}px
-
- -
- - -
-

- -
- {config.allowedExtensions -> f:format.case(mode: 'upper')} -

-
- - -
- - +

- {f:render(section: 'ModalTitle', arguments: _all)} + {f:render(partial: 'ModalTitle', section:'Main', arguments: _all)}

-
- +
+
@@ -175,9 +121,4 @@ - - {f:translate(id: 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.image-manipulation')} - : {f:if(condition:image.properties.title, then:image.properties.title, else:image.name)} - ({image.properties.width} × {image.properties.height}) - diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/ImageManipulation.ts b/typo3/sysext/backend/Resources/Private/TypeScript/ImageManipulation.ts index 722a0b39caa3..956aaa65402d 100644 --- a/typo3/sysext/backend/Resources/Private/TypeScript/ImageManipulation.ts +++ b/typo3/sysext/backend/Resources/Private/TypeScript/ImageManipulation.ts @@ -150,6 +150,8 @@ class ImageManipulation { private aspectRatioTrigger: JQuery; private cropperCanvas: JQuery; private cropInfo: JQuery; + private cropImageContainerSelector: string = '#t3js-crop-image-container'; + private cropImageSelector: string = '#t3js-crop-image'; private coverAreaSelector: string = '.t3js-cropper-cover-area'; private cropInfoSelector: string = '.t3js-cropper-info-crop'; private focusAreaSelector: string = '#t3js-cropper-focus-area'; @@ -173,6 +175,7 @@ class ImageManipulation { viewMode: 1, zoomable: false, }; + private resizeTimeout: number = 450; constructor() { // Silence is golden @@ -204,10 +207,12 @@ class ImageManipulation { } /** - * Initialize the cropper modal + * @method initializeCropperModal + * @desc Initialize the cropper modal and dispatch the cropper init + * @private */ private initializeCropperModal(): void { - const image: JQuery = this.currentModal.find('#t3js-crop-image'); + const image: JQuery = this.currentModal.find(this.cropImageSelector); ImagesLoaded(image, (): void => { const modal: JQuery = this.currentModal.find('.modal-dialog'); modal.css({marginLeft: 'auto', marginRight: 'auto'}); @@ -219,6 +224,11 @@ class ImageManipulation { }); } + /** + * @method show + * @desc Load the image and setup the modal UI + * @private + */ private show(): void { const modalTitle: string = this.trigger.data('modalTitle'); const imageUri: string = this.trigger.data('url'); @@ -236,10 +246,20 @@ class ImageManipulation { '.modal-content' ); this.currentModal.addClass('modal-dark'); + this.currentModal.on('hide.bs.modal', (e: JQueryEventObject): void => { + this.destroy(); + }); + // Do not dismiss the modal when clicking beside it to avoid data loss + this.currentModal.data('bs.modal').options.backdrop = 'static'; } + /** + * @method init + * @desc Initializes the cropper UI and sets up all the event indings for the UI + * @private + */ private init(): void { - const image: JQuery = this.currentModal.find('#t3js-crop-image'); + const image: JQuery = this.currentModal.find(this.cropImageSelector); const imageHeight: number = $(image).height(); const imageWidth: number = $(image).width(); const data: string = this.trigger.attr('data-crop-variants'); @@ -251,7 +271,7 @@ class ImageManipulation { // If we have data already set we assume an internal reinit eg. after resizing this.data = $.isEmptyObject(this.data) ? JSON.parse(data) : this.data; // Initialize our class members - this.currentModal.find('.cropper-image-container').css({height: imageHeight, width: imageWidth}); + this.currentModal.find(this.cropImageContainerSelector).css({height: imageHeight, width: imageWidth}); this.cropVariantTriggers = this.currentModal.find('.t3js-crop-variant-trigger'); this.activeCropVariantTrigger = this.currentModal.find('.t3js-crop-variant-trigger.is-active'); this.cropInfo = this.currentModal.find(this.cropInfoSelector); @@ -266,7 +286,7 @@ class ImageManipulation { /** * Assign EventListener to cropVariantTriggers */ - this.cropVariantTriggers.on('click', (e: JQueryEventObject): void => { + this.cropVariantTriggers.off('click').on('click', (e: JQueryEventObject): void => { /** * Is the current cropVariantTrigger is active, bail out. @@ -291,12 +311,12 @@ class ImageManipulation { /** * Assign EventListener to aspectRatioTrigger */ - this.aspectRatioTrigger.on('click', (e: JQueryEventObject): void => { + this.aspectRatioTrigger.off('click').on('click', (e: JQueryEventObject): void => { const ratioId: string = $(e.currentTarget).attr('data-option'); const temp: CropVariant = $.extend(true, {}, this.currentCropVariant); const ratio: Ratio = temp.allowedAspectRatios[ratioId]; - this.updateAspectRatio(ratio); - // Set data explicitly or updateAspectRatio upscales the crop + this.setAspectRatio(ratio); + // Set data explicitly or setAspectRatio upscales the crop this.setCropArea(temp.cropArea); this.currentCropVariant = $.extend(true, {}, temp, {selectedRatio: ratioId}); this.update(this.currentCropVariant); @@ -305,7 +325,7 @@ class ImageManipulation { /** * Assign EventListener to saveButton */ - this.saveButton.on('click', (): void => { + this.saveButton.off('click').on('click', (): void => { this.save(this.data); }); @@ -313,7 +333,7 @@ class ImageManipulation { * Assign EventListener to previewButton if preview url exists */ if (this.trigger.attr('data-preview-url')) { - this.previewButton.on('click', (): void => { + this.previewButton.off('click').on('click', (): void => { this.openPreview(this.data); }); } else { @@ -323,14 +343,14 @@ class ImageManipulation { /** * Assign EventListener to dismissButton */ - this.dismissButton.on('click', (): void => { - this.destroy(); + this.dismissButton.off('click').on('click', (): void => { + this.currentModal.modal('hide'); }); /** * Assign EventListener to resetButton */ - this.resetButton.on('click', (e: JQueryEventObject): void => { + this.resetButton.off('click').on('click', (e: JQueryEventObject): void => { const imageData: CropperImageData = this.cropper.cropper('getImageData'); const resetCropVariantString: string = $(e.currentTarget).attr('data-crop-variant'); e.preventDefault(); @@ -367,12 +387,30 @@ class ImageManipulation { })); } + /** + * @method cropBuiltHandler + * @desc Internal cropper handler. Called when the cropper has been instantiated + * @private + */ private cropBuiltHandler = (): void => { const imageData: CropperImageData = this.cropper.cropper('getImageData'); + + // Iterate over the crop variants and set up their respective preview + this.cropVariantTriggers.each((index: number, elem: Element): void => { + const cropVariantId: string = $(elem).attr('data-crop-variant-id'); + const cropArea: Area = this.convertRelativeToAbsoluteCropArea( + this.data[cropVariantId].cropArea, + imageData + ); + const variant: CropVariant = $.extend(true, {}, this.data[cropVariantId], {cropArea}); + this.updatePreviewThumbnail(variant, $(elem)); + }); + this.currentCropVariant.cropArea = this.convertRelativeToAbsoluteCropArea( this.currentCropVariant.cropArea, imageData ); + // Can't use .t3js-* as selector because it is an extraneous selector this.cropBox = this.currentModal.find('.cropper-crop-box'); this.setCropArea(this.currentCropVariant.cropArea); @@ -394,14 +432,20 @@ class ImageManipulation { } if (this.currentCropVariant.selectedRatio) { - this.updateAspectRatio(this.currentCropVariant.allowedAspectRatios[this.currentCropVariant.selectedRatio]); - // Set data explicitly or updateAspectRatio up-scales the crop + this.setAspectRatio(this.currentCropVariant.allowedAspectRatios[this.currentCropVariant.selectedRatio]); + // Set data explicitly or setAspectRatio up-scales the crop this.setCropArea(this.currentCropVariant.cropArea); this.currentModal.find(`[data-option='${this.currentCropVariant.selectedRatio}']`).addClass('active'); } + this.cropperCanvas.addClass('is-visible'); }; + /** + * @method cropMoveHandler + * @desc Internal cropper handler. Called when the cropping area is moving + * @private + */ private cropMoveHandler = (e: CropperEvent): void => { this.currentCropVariant.cropArea = $.extend(true, this.currentCropVariant.cropArea, { height: Math.floor(e.height), @@ -409,11 +453,16 @@ class ImageManipulation { x: Math.floor(e.x), y: Math.floor(e.y), }); - this.updatePreviewThumbnail(this.currentCropVariant); + this.updatePreviewThumbnail(this.currentCropVariant, this.activeCropVariantTrigger); this.updateCropVariantData(this.currentCropVariant); this.cropInfo.text(`${this.currentCropVariant.cropArea.width}×${this.currentCropVariant.cropArea.height} px`); }; + /** + * @method cropStartHandler + * @desc Internal cropper handler. Called when the cropping starts moving + * @private + */ private cropStartHandler = (): void => { if (this.currentCropVariant.focusArea) { this.focusArea.draggable('option', 'disabled', true); @@ -422,7 +471,9 @@ class ImageManipulation { }; /** - * + * @method cropEndHandler + * @desc Internal cropper handler. Called when the cropping ends moving + * @private */ private cropEndHandler = (): void => { if (this.currentCropVariant.focusArea) { @@ -444,7 +495,7 @@ class ImageManipulation { /** * Setting the aspect ratio cause a redraw of the crop area so we need to manually reset it to last data */ - this.updateAspectRatio(selectedRatio); + this.setAspectRatio(selectedRatio); this.setCropArea(temp.cropArea); this.currentCropVariant = $.extend(true, {}, temp, cropVariant); this.cropBox.find(this.coverAreaSelector).remove(); @@ -470,13 +521,14 @@ class ImageManipulation { // Init or reinit focusArea this.initCoverAreas(this.cropBox, this.currentCropVariant.coverAreas); } - this.updatePreviewThumbnail(this.currentCropVariant); + this.updatePreviewThumbnail(this.currentCropVariant, this.activeCropVariantTrigger); } /** * @method initFocusArea * @desc Initializes the focus area inside a container and registers the resizable and draggable interfaces to it - * @param container: JQuery + * @param {JQuery} container + * @private */ private initFocusArea(container: JQuery): void { this.focusArea = $('
'); @@ -494,7 +546,7 @@ class ImageManipulation { focusArea.x = (fLeft - left) / container.width(); focusArea.y = (fTop - top) / container.height(); - this.updatePreviewThumbnail(this.currentCropVariant); + this.updatePreviewThumbnail(this.currentCropVariant, this.activeCropVariantTrigger); if (this.checkFocusAndCoverAreasCollision(focusArea, coverAreas)) { this.focusArea.addClass('has-nodrop'); } else { @@ -541,7 +593,7 @@ class ImageManipulation { focusArea.width = this.focusArea.width() / container.width(); focusArea.x = (fLeft - left) / container.width(); focusArea.y = (fTop - top) / container.height(); - this.updatePreviewThumbnail(this.currentCropVariant); + this.updatePreviewThumbnail(this.currentCropVariant, this.activeCropVariantTrigger); if (this.checkFocusAndCoverAreasCollision(focusArea, coverAreas)) { this.focusArea.addClass('has-nodrop'); @@ -597,16 +649,18 @@ class ImageManipulation { /** * @method updatePreviewThumbnail * @desc Sync the croping (and focus area) to the preview thumbnail - * @param {CropVariant} cropVariant + * @param {CropVariant} cropVariant - The crop variant to preview in the thumbnail + * @param {JQuery} cropVariantTrigger - The crop variant element containing the thumbnail + * @private */ - private updatePreviewThumbnail(cropVariant: CropVariant): void { + private updatePreviewThumbnail(cropVariant: CropVariant, cropVariantTrigger: JQuery): void { let styles: any; const cropperPreviewThumbnailCrop: JQuery = - this.activeCropVariantTrigger.find('.t3js-cropper-preview-thumbnail-crop-area'); + cropVariantTrigger.find('.t3js-cropper-preview-thumbnail-crop-area'); const cropperPreviewThumbnailImage: JQuery = - this.activeCropVariantTrigger.find('.t3js-cropper-preview-thumbnail-crop-image'); + cropVariantTrigger.find('.t3js-cropper-preview-thumbnail-crop-image'); const cropperPreviewThumbnailFocus: JQuery = - this.activeCropVariantTrigger.find('.t3js-cropper-preview-thumbnail-focus-area'); + cropVariantTrigger.find('.t3js-cropper-preview-thumbnail-focus-area'); const imageData: CropperImageData = this.cropper.cropper('getImageData'); // Update the position/dimension of the crop area in the preview @@ -657,7 +711,7 @@ class ImageManipulation { width: ImageManipulation.toCssPercent(focusArea.width), }); this.currentCropVariant.focusArea = focusArea; - this.updatePreviewThumbnail(this.currentCropVariant); + this.updatePreviewThumbnail(this.currentCropVariant, this.activeCropVariantTrigger); this.updateCropVariantData(this.currentCropVariant); } @@ -665,6 +719,7 @@ class ImageManipulation { * @method updateCropVariantData * @desc Immutably updates the currently selected cropVariant data * @param {CropVariant} currentCropVariant - The cropVariant to immutably save + * @private */ private updateCropVariantData(currentCropVariant: CropVariant): void { const imageData: CropperImageData = this.cropper.cropper('getImageData'); @@ -673,26 +728,37 @@ class ImageManipulation { } /** - * @method updateAspectRatio - * @desc Updates the aspect ratio in the cropper - * @param {ratio} ratio ratio set in the cropper + * @method setAspectRatio + * @desc Sets the cropper to a specific ratio + * @param {ratio} ratio - The ratio value to apply + * @private */ - private updateAspectRatio(ratio: Ratio): void { + private setAspectRatio(ratio: Ratio): void { this.cropper.cropper('setAspectRatio', ratio.value); } /** * @method setCropArea - * @desc Updates the crop area in the cropper. The cropper will respect the selected ratio - * @param {cropArea} cropArea ratio set in the cropper + * @desc Sets the cropper to a specific crop area + * @param {cropArea} cropArea - The crop area to apply + * @private */ private setCropArea(cropArea: Area): void { - this.cropper.cropper('setData', { - height: cropArea.height, - width: cropArea.width, - x: cropArea.x, - y: cropArea.y, - }); + const currentRatio: Ratio = this.currentCropVariant.allowedAspectRatios[this.currentCropVariant.selectedRatio]; + if (currentRatio.value === 0) { + this.cropper.cropper('setData', { + height: cropArea.height, + width: cropArea.width, + x: cropArea.x, + y: cropArea.y, + }); + } else { + this.cropper.cropper('setData', { + height: cropArea.height, + x: cropArea.x, + y: cropArea.y, + }); + } } /** @@ -716,9 +782,11 @@ class ImageManipulation { } /** - * @param cropArea - * @param imageData - * @return {{height: number, width: number, x: number, y: number}} + * @method convertAbsoluteToRelativeCropArea + * @desc Converts a crop area from absolute pixel-based into relative length values + * @param {Area} cropArea - The crop area to convert from + * @param {CropperImageData} imageData - The image data + * @return {Area} */ private convertAbsoluteToRelativeCropArea(cropArea: Area, imageData: CropperImageData): Area { const {height, width, x, y}: Area = cropArea; @@ -731,8 +799,10 @@ class ImageManipulation { } /** - * @param cropArea - * @param imageData + * @method convertRelativeToAbsoluteCropArea + * @desc Converts a crop area from relative into absolute pixel-based length values + * @param {Area} cropArea - The crop area to convert from + * @param {CropperImageData} imageData - The image data * @return {{height: number, width: number, x: number, y: number}} */ private convertRelativeToAbsoluteCropArea(cropArea: Area, imageData: CropperImageData): Area { @@ -745,9 +815,16 @@ class ImageManipulation { }; } - private setPreviewImage(data: Object): void { + /** + * @method setPreviewImages + * @desc Updates the preview images in the editing section with the respective crop variants + * @param {Object} data - The internal crop variants state + */ + private setPreviewImages(data: Object): void { let $image: any = this.cropper; let imageData: CropperImageData = $image.cropper('getImageData'); + + // Iterate over the crop variants and set up their respective preview Object.keys(data).forEach((cropVariantId: string) => { const cropVariant: CropVariant = data[cropVariantId]; const cropData: Area = this.convertRelativeToAbsoluteCropArea(cropVariant.cropArea, imageData); @@ -795,7 +872,7 @@ class ImageManipulation { /** * @method openPreview - * @desc open a preview + * @desc Opens a preview view with the crop variants * @param {object} data - The whole data object containing all the cropVariants * @private */ @@ -816,9 +893,9 @@ class ImageManipulation { const cropVariants: string = ImageManipulation.serializeCropVariants(data); const hiddenField: JQuery = $(`#${this.trigger.attr('data-field')}`); this.trigger.attr('data-crop-variants', JSON.stringify(data)); - this.setPreviewImage(data); + this.setPreviewImages(data); hiddenField.val(cropVariants); - this.destroy(); + this.currentModal.modal('hide'); } /** @@ -828,19 +905,26 @@ class ImageManipulation { */ private destroy(): void { if (this.currentModal) { - this.currentModal.modal('hide'); this.cropper.cropper('destroy'); + this.cropper = null; this.currentModal = null; + this.data = null; } } + /** + * @method resizeEnd + * @desc Calls a function when the cropper has been resized + * @param {Function} fn - The function to call on resize completion + * @private + */ private resizeEnd(fn: Function): void { let timer: number; $(window).on('resize', (): void => { clearTimeout(timer); timer = setTimeout((): void => { fn(); - }, 450); + }, this.resizeTimeout); }); } } diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js b/typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js index fd6907c5046c..25ea3324f8a4 100644 --- a/typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js +++ b/typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js @@ -20,6 +20,8 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T var ImageManipulation = (function () { function ImageManipulation() { var _this = this; + this.cropImageContainerSelector = '#t3js-crop-image-container'; + this.cropImageSelector = '#t3js-crop-image'; this.coverAreaSelector = '.t3js-cropper-cover-area'; this.cropInfoSelector = '.t3js-cropper-info-crop'; this.focusAreaSelector = '#t3js-cropper-focus-area'; @@ -38,9 +40,23 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T viewMode: 1, zoomable: false, }; + this.resizeTimeout = 450; + /** + * @method cropBuiltHandler + * @desc Internal cropper handler. Called when the cropper has been instantiated + * @private + */ this.cropBuiltHandler = function () { var imageData = _this.cropper.cropper('getImageData'); + // Iterate over the crop variants and set up their respective preview + _this.cropVariantTriggers.each(function (index, elem) { + var cropVariantId = $(elem).attr('data-crop-variant-id'); + var cropArea = _this.convertRelativeToAbsoluteCropArea(_this.data[cropVariantId].cropArea, imageData); + var variant = $.extend(true, {}, _this.data[cropVariantId], { cropArea: cropArea }); + _this.updatePreviewThumbnail(variant, $(elem)); + }); _this.currentCropVariant.cropArea = _this.convertRelativeToAbsoluteCropArea(_this.currentCropVariant.cropArea, imageData); + // Can't use .t3js-* as selector because it is an extraneous selector _this.cropBox = _this.currentModal.find('.cropper-crop-box'); _this.setCropArea(_this.currentCropVariant.cropArea); // Check if new cropVariant has coverAreas @@ -59,13 +75,18 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T _this.scaleAndMoveFocusArea(_this.currentCropVariant.focusArea); } if (_this.currentCropVariant.selectedRatio) { - _this.updateAspectRatio(_this.currentCropVariant.allowedAspectRatios[_this.currentCropVariant.selectedRatio]); - // Set data explicitly or updateAspectRatio up-scales the crop + _this.setAspectRatio(_this.currentCropVariant.allowedAspectRatios[_this.currentCropVariant.selectedRatio]); + // Set data explicitly or setAspectRatio up-scales the crop _this.setCropArea(_this.currentCropVariant.cropArea); _this.currentModal.find("[data-option='" + _this.currentCropVariant.selectedRatio + "']").addClass('active'); } _this.cropperCanvas.addClass('is-visible'); }; + /** + * @method cropMoveHandler + * @desc Internal cropper handler. Called when the cropping area is moving + * @private + */ this.cropMoveHandler = function (e) { _this.currentCropVariant.cropArea = $.extend(true, _this.currentCropVariant.cropArea, { height: Math.floor(e.height), @@ -73,10 +94,15 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T x: Math.floor(e.x), y: Math.floor(e.y), }); - _this.updatePreviewThumbnail(_this.currentCropVariant); + _this.updatePreviewThumbnail(_this.currentCropVariant, _this.activeCropVariantTrigger); _this.updateCropVariantData(_this.currentCropVariant); _this.cropInfo.text(_this.currentCropVariant.cropArea.width + "\u00D7" + _this.currentCropVariant.cropArea.height + " px"); }; + /** + * @method cropStartHandler + * @desc Internal cropper handler. Called when the cropping starts moving + * @private + */ this.cropStartHandler = function () { if (_this.currentCropVariant.focusArea) { _this.focusArea.draggable('option', 'disabled', true); @@ -84,7 +110,9 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T } }; /** - * + * @method cropEndHandler + * @desc Internal cropper handler. Called when the cropping ends moving + * @private */ this.cropEndHandler = function () { if (_this.currentCropVariant.focusArea) { @@ -168,11 +196,13 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T $('.t3js-image-manipulation-trigger').off('click').click(triggerHandler); }; /** - * Initialize the cropper modal + * @method initializeCropperModal + * @desc Initialize the cropper modal and dispatch the cropper init + * @private */ ImageManipulation.prototype.initializeCropperModal = function () { var _this = this; - var image = this.currentModal.find('#t3js-crop-image'); + var image = this.currentModal.find(this.cropImageSelector); ImagesLoaded(image, function () { var modal = _this.currentModal.find('.modal-dialog'); modal.css({ marginLeft: 'auto', marginRight: 'auto' }); @@ -183,7 +213,13 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T }, 100); }); }; + /** + * @method show + * @desc Load the image and setup the modal UI + * @private + */ ImageManipulation.prototype.show = function () { + var _this = this; var modalTitle = this.trigger.data('modalTitle'); var imageUri = this.trigger.data('url'); var initCropperModal = this.initializeCropperModal.bind(this); @@ -192,10 +228,20 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T */ this.currentModal = Modal.loadUrl(modalTitle, Severity.notice, [], imageUri, initCropperModal, '.modal-content'); this.currentModal.addClass('modal-dark'); + this.currentModal.on('hide.bs.modal', function (e) { + _this.destroy(); + }); + // Do not dismiss the modal when clicking beside it to avoid data loss + this.currentModal.data('bs.modal').options.backdrop = 'static'; }; + /** + * @method init + * @desc Initializes the cropper UI and sets up all the event indings for the UI + * @private + */ ImageManipulation.prototype.init = function () { var _this = this; - var image = this.currentModal.find('#t3js-crop-image'); + var image = this.currentModal.find(this.cropImageSelector); var imageHeight = $(image).height(); var imageWidth = $(image).width(); var data = this.trigger.attr('data-crop-variants'); @@ -205,7 +251,7 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T // If we have data already set we assume an internal reinit eg. after resizing this.data = $.isEmptyObject(this.data) ? JSON.parse(data) : this.data; // Initialize our class members - this.currentModal.find('.cropper-image-container').css({ height: imageHeight, width: imageWidth }); + this.currentModal.find(this.cropImageContainerSelector).css({ height: imageHeight, width: imageWidth }); this.cropVariantTriggers = this.currentModal.find('.t3js-crop-variant-trigger'); this.activeCropVariantTrigger = this.currentModal.find('.t3js-crop-variant-trigger.is-active'); this.cropInfo = this.currentModal.find(this.cropInfoSelector); @@ -219,7 +265,7 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T /** * Assign EventListener to cropVariantTriggers */ - this.cropVariantTriggers.on('click', function (e) { + this.cropVariantTriggers.off('click').on('click', function (e) { /** * Is the current cropVariantTrigger is active, bail out. * Bootstrap doesn't provide this functionality when collapsing the Collaps panels @@ -241,12 +287,12 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T /** * Assign EventListener to aspectRatioTrigger */ - this.aspectRatioTrigger.on('click', function (e) { + this.aspectRatioTrigger.off('click').on('click', function (e) { var ratioId = $(e.currentTarget).attr('data-option'); var temp = $.extend(true, {}, _this.currentCropVariant); var ratio = temp.allowedAspectRatios[ratioId]; - _this.updateAspectRatio(ratio); - // Set data explicitly or updateAspectRatio upscales the crop + _this.setAspectRatio(ratio); + // Set data explicitly or setAspectRatio upscales the crop _this.setCropArea(temp.cropArea); _this.currentCropVariant = $.extend(true, {}, temp, { selectedRatio: ratioId }); _this.update(_this.currentCropVariant); @@ -254,14 +300,14 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T /** * Assign EventListener to saveButton */ - this.saveButton.on('click', function () { + this.saveButton.off('click').on('click', function () { _this.save(_this.data); }); /** * Assign EventListener to previewButton if preview url exists */ if (this.trigger.attr('data-preview-url')) { - this.previewButton.on('click', function () { + this.previewButton.off('click').on('click', function () { _this.openPreview(_this.data); }); } @@ -271,13 +317,13 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T /** * Assign EventListener to dismissButton */ - this.dismissButton.on('click', function () { - _this.destroy(); + this.dismissButton.off('click').on('click', function () { + _this.currentModal.modal('hide'); }); /** * Assign EventListener to resetButton */ - this.resetButton.on('click', function (e) { + this.resetButton.off('click').on('click', function (e) { var imageData = _this.cropper.cropper('getImageData'); var resetCropVariantString = $(e.currentTarget).attr('data-crop-variant'); e.preventDefault(); @@ -324,7 +370,7 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T /** * Setting the aspect ratio cause a redraw of the crop area so we need to manually reset it to last data */ - this.updateAspectRatio(selectedRatio); + this.setAspectRatio(selectedRatio); this.setCropArea(temp.cropArea); this.currentCropVariant = $.extend(true, {}, temp, cropVariant); this.cropBox.find(this.coverAreaSelector).remove(); @@ -347,12 +393,13 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T // Init or reinit focusArea this.initCoverAreas(this.cropBox, this.currentCropVariant.coverAreas); } - this.updatePreviewThumbnail(this.currentCropVariant); + this.updatePreviewThumbnail(this.currentCropVariant, this.activeCropVariantTrigger); }; /** * @method initFocusArea * @desc Initializes the focus area inside a container and registers the resizable and draggable interfaces to it - * @param container: JQuery + * @param {JQuery} container + * @private */ ImageManipulation.prototype.initFocusArea = function (container) { var _this = this; @@ -370,7 +417,7 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T var _c = _this.currentCropVariant, focusArea = _c.focusArea, coverAreas = _c.coverAreas; focusArea.x = (fLeft - left) / container.width(); focusArea.y = (fTop - top) / container.height(); - _this.updatePreviewThumbnail(_this.currentCropVariant); + _this.updatePreviewThumbnail(_this.currentCropVariant, _this.activeCropVariantTrigger); if (_this.checkFocusAndCoverAreasCollision(focusArea, coverAreas)) { _this.focusArea.addClass('has-nodrop'); } @@ -414,7 +461,7 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T focusArea.width = _this.focusArea.width() / container.width(); focusArea.x = (fLeft - left) / container.width(); focusArea.y = (fTop - top) / container.height(); - _this.updatePreviewThumbnail(_this.currentCropVariant); + _this.updatePreviewThumbnail(_this.currentCropVariant, _this.activeCropVariantTrigger); if (_this.checkFocusAndCoverAreasCollision(focusArea, coverAreas)) { _this.focusArea.addClass('has-nodrop'); } @@ -465,13 +512,15 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T /** * @method updatePreviewThumbnail * @desc Sync the croping (and focus area) to the preview thumbnail - * @param {CropVariant} cropVariant + * @param {CropVariant} cropVariant - The crop variant to preview in the thumbnail + * @param {JQuery} cropVariantTrigger - The crop variant element containing the thumbnail + * @private */ - ImageManipulation.prototype.updatePreviewThumbnail = function (cropVariant) { + ImageManipulation.prototype.updatePreviewThumbnail = function (cropVariant, cropVariantTrigger) { var styles; - var cropperPreviewThumbnailCrop = this.activeCropVariantTrigger.find('.t3js-cropper-preview-thumbnail-crop-area'); - var cropperPreviewThumbnailImage = this.activeCropVariantTrigger.find('.t3js-cropper-preview-thumbnail-crop-image'); - var cropperPreviewThumbnailFocus = this.activeCropVariantTrigger.find('.t3js-cropper-preview-thumbnail-focus-area'); + var cropperPreviewThumbnailCrop = cropVariantTrigger.find('.t3js-cropper-preview-thumbnail-crop-area'); + var cropperPreviewThumbnailImage = cropVariantTrigger.find('.t3js-cropper-preview-thumbnail-crop-image'); + var cropperPreviewThumbnailFocus = cropVariantTrigger.find('.t3js-cropper-preview-thumbnail-focus-area'); var imageData = this.cropper.cropper('getImageData'); // Update the position/dimension of the crop area in the preview cropperPreviewThumbnailCrop.css({ @@ -517,13 +566,14 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T width: ImageManipulation.toCssPercent(focusArea.width), }); this.currentCropVariant.focusArea = focusArea; - this.updatePreviewThumbnail(this.currentCropVariant); + this.updatePreviewThumbnail(this.currentCropVariant, this.activeCropVariantTrigger); this.updateCropVariantData(this.currentCropVariant); }; /** * @method updateCropVariantData * @desc Immutably updates the currently selected cropVariant data * @param {CropVariant} currentCropVariant - The cropVariant to immutably save + * @private */ ImageManipulation.prototype.updateCropVariantData = function (currentCropVariant) { var imageData = this.cropper.cropper('getImageData'); @@ -531,25 +581,37 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T this.data[currentCropVariant.id] = $.extend(true, {}, currentCropVariant, { cropArea: absoluteCropArea }); }; /** - * @method updateAspectRatio - * @desc Updates the aspect ratio in the cropper - * @param {ratio} ratio ratio set in the cropper + * @method setAspectRatio + * @desc Sets the cropper to a specific ratio + * @param {ratio} ratio - The ratio value to apply + * @private */ - ImageManipulation.prototype.updateAspectRatio = function (ratio) { + ImageManipulation.prototype.setAspectRatio = function (ratio) { this.cropper.cropper('setAspectRatio', ratio.value); }; /** * @method setCropArea - * @desc Updates the crop area in the cropper. The cropper will respect the selected ratio - * @param {cropArea} cropArea ratio set in the cropper + * @desc Sets the cropper to a specific crop area + * @param {cropArea} cropArea - The crop area to apply + * @private */ ImageManipulation.prototype.setCropArea = function (cropArea) { - this.cropper.cropper('setData', { - height: cropArea.height, - width: cropArea.width, - x: cropArea.x, - y: cropArea.y, - }); + var currentRatio = this.currentCropVariant.allowedAspectRatios[this.currentCropVariant.selectedRatio]; + if (currentRatio.value === 0) { + this.cropper.cropper('setData', { + height: cropArea.height, + width: cropArea.width, + x: cropArea.x, + y: cropArea.y, + }); + } + else { + this.cropper.cropper('setData', { + height: cropArea.height, + x: cropArea.x, + y: cropArea.y, + }); + } }; /** * @method checkFocusAndCoverAreas @@ -571,9 +633,11 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T }); }; /** - * @param cropArea - * @param imageData - * @return {{height: number, width: number, x: number, y: number}} + * @method convertAbsoluteToRelativeCropArea + * @desc Converts a crop area from absolute pixel-based into relative length values + * @param {Area} cropArea - The crop area to convert from + * @param {CropperImageData} imageData - The image data + * @return {Area} */ ImageManipulation.prototype.convertAbsoluteToRelativeCropArea = function (cropArea, imageData) { var height = cropArea.height, width = cropArea.width, x = cropArea.x, y = cropArea.y; @@ -585,8 +649,10 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T }; }; /** - * @param cropArea - * @param imageData + * @method convertRelativeToAbsoluteCropArea + * @desc Converts a crop area from relative into absolute pixel-based length values + * @param {Area} cropArea - The crop area to convert from + * @param {CropperImageData} imageData - The image data * @return {{height: number, width: number, x: number, y: number}} */ ImageManipulation.prototype.convertRelativeToAbsoluteCropArea = function (cropArea, imageData) { @@ -598,10 +664,16 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T y: y * imageData.naturalHeight, }; }; - ImageManipulation.prototype.setPreviewImage = function (data) { + /** + * @method setPreviewImages + * @desc Updates the preview images in the editing section with the respective crop variants + * @param {Object} data - The internal crop variants state + */ + ImageManipulation.prototype.setPreviewImages = function (data) { var _this = this; var $image = this.cropper; var imageData = $image.cropper('getImageData'); + // Iterate over the crop variants and set up their respective preview Object.keys(data).forEach(function (cropVariantId) { var cropVariant = data[cropVariantId]; var cropData = _this.convertRelativeToAbsoluteCropArea(cropVariant.cropArea, imageData); @@ -643,7 +715,7 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T ; /** * @method openPreview - * @desc open a preview + * @desc Opens a preview view with the crop variants * @param {object} data - The whole data object containing all the cropVariants * @private */ @@ -663,9 +735,9 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T var cropVariants = ImageManipulation.serializeCropVariants(data); var hiddenField = $("#" + this.trigger.attr('data-field')); this.trigger.attr('data-crop-variants', JSON.stringify(data)); - this.setPreviewImage(data); + this.setPreviewImages(data); hiddenField.val(cropVariants); - this.destroy(); + this.currentModal.modal('hide'); }; /** * @method destroy @@ -674,18 +746,26 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T */ ImageManipulation.prototype.destroy = function () { if (this.currentModal) { - this.currentModal.modal('hide'); this.cropper.cropper('destroy'); + this.cropper = null; this.currentModal = null; + this.data = null; } }; + /** + * @method resizeEnd + * @desc Calls a function when the cropper has been resized + * @param {Function} fn - The function to call on resize completion + * @private + */ ImageManipulation.prototype.resizeEnd = function (fn) { + var _this = this; var timer; $(window).on('resize', function () { clearTimeout(timer); timer = setTimeout(function () { fn(); - }, 450); + }, _this.resizeTimeout); }); }; return ImageManipulation; diff --git a/typo3/sysext/core/Classes/Imaging/ImageManipulation/Area.php b/typo3/sysext/core/Classes/Imaging/ImageManipulation/Area.php index e74af9bebecc..54388dd5e5c2 100644 --- a/typo3/sysext/core/Classes/Imaging/ImageManipulation/Area.php +++ b/typo3/sysext/core/Classes/Imaging/ImageManipulation/Area.php @@ -136,6 +136,27 @@ class Area ); } + /** + * @param Ratio $ratio + * @return Area + */ + public function applyRatioRestriction(Ratio $ratio): Area + { + if ($ratio->isFree()) { + return $this; + } + $expectedRatio = $ratio->getRatioValue(); + $newArea = clone $this; + if ($newArea->height * $expectedRatio > $newArea->width) { + $newArea->height = $newArea->width / $expectedRatio; + $newArea->y += ($this->height - $newArea->height) / 2; + } else { + $newArea->width = $newArea->height * $expectedRatio; + $newArea->x += ($this->width - $newArea->width) / 2; + } + return $newArea; + } + /** * @return bool */ diff --git a/typo3/sysext/core/Classes/Imaging/ImageManipulation/CropVariant.php b/typo3/sysext/core/Classes/Imaging/ImageManipulation/CropVariant.php index f84ec4b13a63..1645148ad7b5 100644 --- a/typo3/sysext/core/Classes/Imaging/ImageManipulation/CropVariant.php +++ b/typo3/sysext/core/Classes/Imaging/ImageManipulation/CropVariant.php @@ -15,6 +15,8 @@ namespace TYPO3\CMS\Core\Imaging\ImageManipulation; * The TYPO3 project - inspiring people to share! */ +use TYPO3\CMS\Core\Resource\FileInterface; + class CropVariant { /** @@ -76,8 +78,12 @@ class CropVariant $this->cropArea = $cropArea; if ($allowedAspectRatios) { $this->setAllowedAspectRatios(...$allowedAspectRatios); + if ($selectedRatio && isset($this->allowedAspectRatios[$selectedRatio])) { + $this->selectedRatio = $selectedRatio; + } else { + $this->selectedRatio = current($this->allowedAspectRatios)->getId(); + } } - $this->selectedRatio = $selectedRatio; $this->focusArea = $focusArea; if ($coverAreas !== null) { $this->setCoverAreas(...$coverAreas); @@ -158,6 +164,22 @@ class CropVariant return $this->focusArea; } + /** + * @param FileInterface $file + * @return CropVariant + */ + public function applyRatioRestrictionToSelectedCropArea(FileInterface $file): CropVariant + { + if (!$this->selectedRatio) { + return $this; + } + $newVariant = clone $this; + $newArea = $this->cropArea->makeAbsoluteBasedOnFile($file); + $newArea = $newArea->applyRatioRestriction($this->allowedAspectRatios[$this->selectedRatio]); + $newVariant->cropArea = $newArea->makeRelativeBasedOnFile($file); + return $newVariant; + } + /** * @param Ratio[] $ratios * @throws InvalidConfigurationException diff --git a/typo3/sysext/core/Classes/Imaging/ImageManipulation/CropVariantCollection.php b/typo3/sysext/core/Classes/Imaging/ImageManipulation/CropVariantCollection.php index c60b8681e4e7..7327a68727a8 100644 --- a/typo3/sysext/core/Classes/Imaging/ImageManipulation/CropVariantCollection.php +++ b/typo3/sysext/core/Classes/Imaging/ImageManipulation/CropVariantCollection.php @@ -15,6 +15,8 @@ namespace TYPO3\CMS\Core\Imaging\ImageManipulation; * The TYPO3 project - inspiring people to share! */ +use TYPO3\CMS\Core\Resource\FileInterface; + class CropVariantCollection { /** @@ -38,17 +40,17 @@ class CropVariantCollection */ public static function create(string $jsonString, array $tcaConfig = []): CropVariantCollection { - if (empty($jsonString) && empty($tcaConfig)) { + $persistedCollectionConfig = empty($jsonString) ? [] : json_decode($jsonString, true); + if (empty($persistedCollectionConfig) && empty($tcaConfig)) { return self::createEmpty(); } - $persistedCollectionConfig = json_decode($jsonString, true); - if (!is_array($persistedCollectionConfig)) { - $persistedCollectionConfig = []; - } try { if ($tcaConfig === []) { - $tcaConfig = $persistedCollectionConfig; + $tcaConfig = (array)$persistedCollectionConfig; } else { + if (!is_array($persistedCollectionConfig)) { + $persistedCollectionConfig = []; + } // Merge selected areas with crop tool configuration reset($persistedCollectionConfig); foreach ($tcaConfig as $id => &$cropVariantConfig) { @@ -91,6 +93,34 @@ class CropVariantCollection return $cropVariantsAsArray; } + /** + * @param FileInterface $file + * @return CropVariantCollection + */ + public function applyRatioRestrictionToSelectedCropArea(FileInterface $file): CropVariantCollection + { + $newCollection = clone $this; + foreach ($this->cropVariants as $id => $cropVariant) { + $newCollection->cropVariants[$id] = $cropVariant->applyRatioRestrictionToSelectedCropArea($file); + } + return $newCollection; + } + + public function __toString() + { + $filterNonPersistentKeys = function ($key) { + if (in_array($key, ['id', 'title', 'allowedAspectRatios', 'coverAreas'], true)) { + return false; + } + return true; + }; + $cropVariantsAsArray = []; + foreach ($this->cropVariants as $id => $cropVariant) { + $cropVariantsAsArray[$id] = array_filter($cropVariant->asArray(), $filterNonPersistentKeys, ARRAY_FILTER_USE_KEY); + } + return json_encode($cropVariantsAsArray); + } + /** * @param string $id * @return Area diff --git a/typo3/sysext/core/Classes/Imaging/ImageManipulation/Ratio.php b/typo3/sysext/core/Classes/Imaging/ImageManipulation/Ratio.php index e88f56a99baa..d13b41b8eaf8 100644 --- a/typo3/sysext/core/Classes/Imaging/ImageManipulation/Ratio.php +++ b/typo3/sysext/core/Classes/Imaging/ImageManipulation/Ratio.php @@ -79,4 +79,20 @@ class Ratio 'value' => $this->value, ]; } + + /** + * @return float + */ + public function getRatioValue(): float + { + return $this->value; + } + + /** + * @return bool + */ + public function isFree(): bool + { + return $this->value === 0.0; + } } diff --git a/typo3/sysext/core/Tests/Unit/Imaging/ImageManipulation/AreaTest.php b/typo3/sysext/core/Tests/Unit/Imaging/ImageManipulation/AreaTest.php new file mode 100644 index 000000000000..b3c0be4110b0 --- /dev/null +++ b/typo3/sysext/core/Tests/Unit/Imaging/ImageManipulation/AreaTest.php @@ -0,0 +1,93 @@ +getMockBuilder(ResourceStorage::class)->disableOriginalConstructor()->getMock(), + ['width' => 100, 'height' => 200] + ); + $relativeArea = $imageArea->makeRelativeBasedOnFile($imageFixture); + $expectedResult = [ + 'x' => 0.5, + 'y' => 0.25, + 'width' => 1.0, + 'height' => 0.5, + ]; + $this->assertSame($expectedResult, $relativeArea->asArray()); + } + + public function applyRatioRestrictsAreaToRespectRatioDataProvider() + { + return [ + [ + [0.0, 0.0, 1, 1], + 4 / 3 + ], + [ + [0.0, 0.0, 1, 1], + 3 / 4 + ], + [ + [0.1, 0.1, 0.2, 0.4], + 4 / 3, + ], + [ + [0.1, 0.1, 0.4, 0.2], + 1.0 + ], + ]; + } + + /** + * @param array $areaSize + * @param $ratio + * @test + * @dataProvider applyRatioRestrictsAreaToRespectRatioDataProvider + */ + public function applyRatioRestrictsAreaToRespectRatio(array $areaSize, $ratio) + { + $area = new Area(...$areaSize); + $ratioFixture = new Ratio('dummy', 'dummy', $ratio); + $areaData = $area->applyRatioRestriction($ratioFixture)->asArray(); + $this->assertSame($areaData['width'] / $areaData['height'], $ratio); + } + + /** + * @test + */ + public function applyRatioDoesNothingForFreeRatio() + { + $area = new Area(...[0.1, 0.1, 0.2, 0.4]); + $ratioFixture = new Ratio('dummy', 'dummy', 0.0); + $croppedArea = $area->applyRatioRestriction($ratioFixture); + $this->assertSame($area, $croppedArea); + } +} -- 2.20.1