diff --git a/js/imageWidgetCrop.js b/js/imageWidgetCrop.js index 5e4b5f8..c5aec4e 100644 --- a/js/imageWidgetCrop.js +++ b/js/imageWidgetCrop.js @@ -22,10 +22,11 @@ var $this = $(this); var $values = $this.siblings(cropperValuesSelector); var data = $this.cropper('getData'); - $values.find('.crop-x').val(Math.round(data.x)); - $values.find('.crop-y').val(Math.round(data.y)); - $values.find('.crop-width').val(Math.round(data.width)); - $values.find('.crop-height').val(Math.round(data.height)); + var delta = $(cropperSelector).data('original-height') / $(cropperSelector).prop('naturalHeight'); + $values.find('.crop-x').val(Math.round(data.x * delta)); + $values.find('.crop-y').val(Math.round(data.y * delta)); + $values.find('.crop-width').val(Math.round(data.width * delta)); + $values.find('.crop-height').val(Math.round(data.height * delta)); $values.find('.crop-applied').val(1); Drupal.imageWidgetCrop.updateCropSummaries($this); } @@ -58,7 +59,8 @@ $verticalTabsMenuItem.click(function () { var tabId = $(this).find('a').attr('href'); var $cropper = $(tabId).find(cropperSelector); - Drupal.imageWidgetCrop.initializeCropper($cropper, $cropper.data('ratio')); + var ratio = Drupal.imageWidgetCrop.getRatio($cropper); + Drupal.imageWidgetCrop.initializeCropper($cropper, ratio); }); $reset.on('click', function (e) { @@ -70,22 +72,44 @@ }; /** + * Get ratio data and determine if an available ratio or free crop. + * + * @param {Object} $element - Element to initialize cropper on its children. + */ + Drupal.imageWidgetCrop.getRatio = function ($element) { + var ratio = $element.data('ratio'); + var regex = /:/; + + if ((regex.exec(ratio)) !== null) { + var int = ratio.split(":"); + if ($.isArray(int) && ($.isNumeric(int[0]) && $.isNumeric(int[1]))) { + return int[0] / int[1]; + } else { + return "NaN"; + } + } else { + return ratio; + } + }; + + /** * Initialize cropper on an element. * * @param {Object} $element - Element to initialize cropper on. - * @param {string} ratio - The ratio of the image. + * @param {number} ratio - The ratio of the image. */ Drupal.imageWidgetCrop.initializeCropper = function ($element, ratio) { var data = null; var $values = $element.siblings(cropperValuesSelector); var options = cropperOptions; + var delta = $(cropperSelector).data('original-height') / $(cropperSelector).prop('naturalHeight'); if (parseInt($values.find('.crop-applied').val()) === 1) { data = { - x: parseInt($values.find('.crop-x').val()), - y: parseInt($values.find('.crop-y').val()), - width: parseInt($values.find('.crop-width').val()), - height: parseInt($values.find('.crop-height').val()), + x: Math.round(parseInt($values.find('.crop-x').val()) / delta), + y: Math.round(parseInt($values.find('.crop-y').val()) / delta), + width: Math.round(parseInt($values.find('.crop-width').val()) / delta), + height: Math.round(parseInt($values.find('.crop-height').val()) / delta), rotate: 0, scaleX: 1, scaleY: 1 @@ -93,10 +117,9 @@ } options.data = data; - // @TODO: eval() is evil. - options.aspectRatio = eval(ratio); + options.aspectRatio = ratio; - $element.cropper(cropperOptions); + $element.cropper(options); }; /** @@ -106,7 +129,8 @@ */ Drupal.imageWidgetCrop.initializeCropperOnChildren = function ($element) { var visibleCropper = $element.find(cropperSelector + ':visible'); - Drupal.imageWidgetCrop.initializeCropper($(visibleCropper), $(visibleCropper).data('ratio')); + var ratio = Drupal.imageWidgetCrop.getRatio($(visibleCropper)); + Drupal.imageWidgetCrop.initializeCropper($(visibleCropper), ratio); }; /** diff --git a/src/ImageWidgetCropManager.php b/src/ImageWidgetCropManager.php index aef2f77..45687af 100644 --- a/src/ImageWidgetCropManager.php +++ b/src/ImageWidgetCropManager.php @@ -223,47 +223,22 @@ class ImageWidgetCropManager { throw new \RuntimeException('This image file is nos valid.'); } - $delta = $this->getThumbnailCalculatedProperties($image)['delta']; - - // Get Center coordinate of crop zone. + // Get Center coordinate of crop zone on original image. $axis_coordinate = $this->getAxisCoordinates( ['x' => $properties['x'], 'y' => $properties['y']], ['width' => $properties['width'], 'height' => $properties['height']] ); - // Calculate coordinates (position & sizes) of crop zone. - $crop_coordinates = $this->getCoordinates([ - 'width' => $properties['width'], - 'height' => $properties['height'], - 'x' => $axis_coordinate['x'], - 'y' => $axis_coordinate['y'], - ], $delta); + // Calculate coordinates (position & sizes) of crop zone on original image. + $crop_coordinates['width'] = $properties['width']; + $crop_coordinates['height'] = $properties['height']; + $crop_coordinates['x'] = $axis_coordinate['x']; + $crop_coordinates['y'] = $axis_coordinate['y']; return $crop_coordinates; } /** - * Calculate all coordinates for apply crop into original picture. - * - * @param array $properties - * All properties returned by the crop plugin (js), - * and the size of thumbnail image. - * @param int $delta - * The calculated difference between original height and thumbnail height. - * - * @return array - * Coordinates (x & y or width & height) of crop. - */ - public function getCoordinates(array $properties, $delta) { - $original_coordinates = []; - foreach ($properties as $key => $coordinate) { - $original_coordinates[$key] = round($coordinate * $delta); - } - - return $original_coordinates; - } - - /** * Get one effect instead of ImageStyle. * * @param \Drupal\image\Entity\ImageStyle $image_style diff --git a/src/Plugin/Field/FieldWidget/ImageCropWidget.php b/src/Plugin/Field/FieldWidget/ImageCropWidget.php index e417e46..07453f0 100644 --- a/src/Plugin/Field/FieldWidget/ImageCropWidget.php +++ b/src/Plugin/Field/FieldWidget/ImageCropWidget.php @@ -12,7 +12,6 @@ use Drupal\Core\Config\Entity\ConfigEntityStorage; use Drupal\Core\Field\FieldDefinitionInterface; use Drupal\Core\Field\FieldItemListInterface; use Drupal\Core\Form\FormStateInterface; -use Drupal\Core\Image\Image; use Drupal\Core\Render\ElementInfoManagerInterface; use Drupal\crop\Entity\Crop; use Drupal\image\Plugin\Field\FieldWidget\ImageWidget; @@ -207,10 +206,9 @@ class ImageCropWidget extends ImageWidget { $crop_type_id = $crop_type->id(); $label = $crop_type->label(); if (in_array($crop_type_id, $element['#crop_list'])) { - $thumb_properties = []; + $original_properties = []; $has_ratio = $crop_type->getAspectRatio(); $ratio = !empty($has_ratio) ? $has_ratio : t('NaN'); - $ratio = str_replace(':', '/', $ratio); $container[$crop_type_id] = [ '#type' => 'details', @@ -228,7 +226,12 @@ class ImageCropWidget extends ImageWidget { $container[$crop_type_id][$element_wrapper_name]['image'] = [ '#theme' => 'image_style', '#style_name' => $element['#crop_preview_image_style'], - '#attributes' => ['data-ratio' => [$ratio], 'data-name' => [$crop_type_id]], + '#attributes' => [ + 'data-ratio' => $ratio, + 'data-name' => $crop_type_id, + 'data-original-width' => $element['#default_value']['width'], + 'data-original-height' => $element['#default_value']['height'] + ], '#uri' => $variables['uri'], '#weight' => -10, ]; @@ -263,7 +266,7 @@ class ImageCropWidget extends ImageWidget { if (!empty($crop)) { // Only if the crop already exist pre-populate, // all cordinates values. - $crop_properties = self::getCropProperties($crop); + $original_properties = self::getCropProperties($crop); /** @var \Drupal\Core\Image\Image $image */ $image = \Drupal::service('image.factory')->get($file->getFileUri()); @@ -271,14 +274,12 @@ class ImageCropWidget extends ImageWidget { throw new \RuntimeException('This image file is nos valid'); } - $thumb_properties = self::getThumbnailCropProperties($image, $crop_properties); - // Element to track whether cropping is applied or not. $container[$crop_type_id][$element_wrapper_name]['values']['crop_applied']['#value'] = 1; } } - self::getCropFormElement($element, $element_wrapper_name, $thumb_properties, $edit, $crop_type_id); + self::getCropFormElement($element, $element_wrapper_name, $original_properties, $edit, $crop_type_id); // Stock Original File Values. $element['file-uri'] = [ @@ -310,8 +311,6 @@ class ImageCropWidget extends ImageWidget { 'y' => ['label' => t('Y coordinate'), 'value' => NULL], 'width' => ['label' => t('Width'), 'value' => NULL], 'height' => ['label' => t('Height'), 'value' => NULL], - 'thumb-w' => ['label' => t('Thumbnail Width'), 'value' => NULL], - 'thumb-h' => ['label' => t('Thumbnail Height'), 'value' => NULL], ]; } @@ -325,29 +324,32 @@ class ImageCropWidget extends ImageWidget { * Get all crop zone properties (x, y, height, width), */ public static function getCropProperties(Crop $crop) { + $anchor = $crop->anchor(); + $size = $crop->size(); return [ - 'anchor' => $crop->anchor(), - 'size' => $crop->size() + 'x' => $anchor['x'], + 'y' => $anchor['y'], + 'height' => $size['height'], + 'width' => $size['width'] ]; } /** * Update crop elements of crop into the form widget. * - * @param array $thumb_properties - * All properties calculate for apply to, - * thumbnail image in UI. + * @param array $original_properties + * All properties calculate for apply to. * @param bool $edit * Context of this form. * * @return array * Populate all crop elements into the form. */ - public static function getCropFormProperties(array $thumb_properties, $edit) { + public static function getCropFormProperties(array $original_properties, $edit) { $crop_elements = self::setCoordinatesElement(); - if (!empty($thumb_properties) && $edit) { + if (!empty($original_properties) && $edit) { foreach ($crop_elements as $properties => $value) { - $crop_elements[$properties]['value'] = $thumb_properties[$properties]; + $crop_elements[$properties]['value'] = $original_properties[$properties]; } } @@ -361,9 +363,8 @@ class ImageCropWidget extends ImageWidget { * All form elements of widget. * @param string $element_wrapper_name * Name of element contains all crop properties. - * @param array $thumb_properties - * All properties calculate for apply to, - * thumbnail image in UI. + * @param array $original_properties + * All properties calculate for apply to. * @param bool $edit * Context of this form. * @param string $crop_type_id @@ -372,8 +373,8 @@ class ImageCropWidget extends ImageWidget { * @return array|NULL * Populate all crop elements into the form. */ - public static function getCropFormElement(array &$element, $element_wrapper_name, array $thumb_properties, $edit, $crop_type_id) { - $crop_properties = self::getCropFormProperties($thumb_properties, $edit); + public static function getCropFormElement(array &$element, $element_wrapper_name, array $original_properties, $edit, $crop_type_id) { + $crop_properties = self::getCropFormProperties($original_properties, $edit); // Generate all cordinates elements into the form when, // process is active. @@ -425,47 +426,6 @@ class ImageCropWidget extends ImageWidget { } /** - * Calculate properties of thumbnail preview. - * - * @param Image $image - * Image object to represent uploaded image file. - * @param array $original_crop - * All properties returned by the crop plugin (js), - * and the size of thumbnail image. - * @param string $preview - * An array of values for the contained properties of image_crop widget. - * - * @return array - * All properties (x, y, crop height, crop width, - * thumbnail height, thumbnail width), to apply the real crop - * into thumbnail preview. - */ - public static function getThumbnailCropProperties(Image $image, array $original_crop, $preview = 'crop_thumbnail') { - $crop_thumbnail = []; - - $thumbnail_properties = ImageWidgetCropManager::getThumbnailCalculatedProperties($image, $preview); - if (!isset($thumbnail_properties) || empty($thumbnail_properties)) { - throw new \RuntimeException('Impossible to retrives thumbnail properties'); - } - - $delta = $thumbnail_properties['delta']; - - // Get the Crop selection Size (into Uploaded image) &, - // calculate selection for Thumbnail. - $crop_thumbnail['height'] = round($original_crop['size']['height'] / $delta); - $crop_thumbnail['width'] = round($original_crop['size']['width'] / $delta); - - // Calculate the Top-Left corner for Thumbnail. - // Get the real thumbnail sizes. - $crop_thumbnail['thumb-w'] = $thumbnail_properties['thumbnail_width']; - $crop_thumbnail['thumb-h'] = $thumbnail_properties['thumbnail_height']; - $crop_thumbnail['x'] = round($original_crop['anchor']['x'] / $delta); - $crop_thumbnail['y'] = round($original_crop['anchor']['y'] / $delta); - - return $crop_thumbnail; - } - - /** * Verify if ImageStyle is correctly configured. * * @param array $styles