From 2f0df8b4681f284f36ff2c2792deaef7c175002f Mon Sep 17 00:00:00 2001 From: Titouan Galopin Date: Tue, 30 Nov 2021 18:51:20 +0100 Subject: [PATCH 1/3] [Cropperjs] Rely on Stimulus values instead of custom attributes --- src/Cropperjs/Form/CropperType.php | 64 +++++----- .../Resources/assets/src/controller.ts | 93 +++++++------- .../Resources/assets/test/controller.test.ts | 111 +++++++++++----- src/Cropperjs/Tests/Form/CropperTypeTest.php | 118 +++++++++--------- 4 files changed, 218 insertions(+), 168 deletions(-) diff --git a/src/Cropperjs/Form/CropperType.php b/src/Cropperjs/Form/CropperType.php index 1baaf5e638f..ab8b783a5fb 100644 --- a/src/Cropperjs/Form/CropperType.php +++ b/src/Cropperjs/Form/CropperType.php @@ -34,38 +34,38 @@ public function buildForm(FormBuilderInterface $builder, array $options) 'error_bubbling' => true, 'attr' => [ 'data-controller' => trim(($options['attr']['data-controller'] ?? '').' symfony--ux-cropperjs--cropper'), - 'data-public-url' => $options['public_url'], - 'data-view-mode' => $options['view_mode'], - 'data-drag-mode' => $options['drag_mode'], - 'data-aspect-ratio' => $options['aspect_ratio'] ?: false, - 'data-initial-aspect-ratio' => $options['initial_aspect_ratio'] ?: false, - 'data-responsive' => $options['responsive'], - 'data-restore' => $options['restore'], - 'data-check-cross-origin' => $options['check_cross_origin'], - 'data-check-orientation' => $options['check_orientation'], - 'data-modal' => $options['modal'], - 'data-guides' => $options['guides'], - 'data-center' => $options['center'], - 'data-highlight' => $options['highlight'], - 'data-background' => $options['background'], - 'data-auto-crop' => $options['auto_crop'], - 'data-auto-crop-area' => $options['auto_crop_area'], - 'data-movable' => $options['movable'], - 'data-rotatable' => $options['rotatable'], - 'data-scalable' => $options['scalable'], - 'data-zoomable' => $options['zoomable'], - 'data-zoom-on-touch' => $options['zoom_on_touch'], - 'data-zoom-on-wheel' => $options['zoom_on_wheel'], - 'data-wheel-zoom-ratio' => $options['wheel_zoom_ratio'], - 'data-crop-box-movable' => $options['crop_box_movable'], - 'data-crop-box-resizable' => $options['crop_box_resizable'], - 'data-toggle-drag-mode-on-dblclick' => $options['toggle_drag_mode_on_dblclick'], - 'data-min-container-width' => $options['min_container_width'], - 'data-min-container-height' => $options['min_container_height'], - 'data-min-canvas-width' => $options['min_canvas_width'], - 'data-min-canvas-height' => $options['min_canvas_height'], - 'data-min-crop-box-width' => $options['min_crop_box_width'], - 'data-min-crop-box-height' => $options['min_crop_box_height'], + 'data-symfony--ux-cropperjs--cropper-public-url-value' => $options['public_url'], + 'data-symfony--ux-cropperjs--cropper-view-mode-value' => $options['view_mode'], + 'data-symfony--ux-cropperjs--cropper-drag-mode-value' => $options['drag_mode'], + 'data-symfony--ux-cropperjs--cropper-aspect-ratio-value' => $options['aspect_ratio'] ?: false, + 'data-symfony--ux-cropperjs--cropper-initial-aspect-ratio-value' => $options['initial_aspect_ratio'] ?: false, + 'data-symfony--ux-cropperjs--cropper-responsive-value' => $options['responsive'], + 'data-symfony--ux-cropperjs--cropper-restore-value' => $options['restore'], + 'data-symfony--ux-cropperjs--cropper-check-cross-origin-value' => $options['check_cross_origin'], + 'data-symfony--ux-cropperjs--cropper-check-orientation-value' => $options['check_orientation'], + 'data-symfony--ux-cropperjs--cropper-modal-value' => $options['modal'], + 'data-symfony--ux-cropperjs--cropper-guides-value' => $options['guides'], + 'data-symfony--ux-cropperjs--cropper-center-value' => $options['center'], + 'data-symfony--ux-cropperjs--cropper-highlight-value' => $options['highlight'], + 'data-symfony--ux-cropperjs--cropper-background-value' => $options['background'], + 'data-symfony--ux-cropperjs--cropper-auto-crop-value' => $options['auto_crop'], + 'data-symfony--ux-cropperjs--cropper-auto-crop-area-value' => $options['auto_crop_area'], + 'data-symfony--ux-cropperjs--cropper-movable-value' => $options['movable'], + 'data-symfony--ux-cropperjs--cropper-rotatable-value' => $options['rotatable'], + 'data-symfony--ux-cropperjs--cropper-scalable-value' => $options['scalable'], + 'data-symfony--ux-cropperjs--cropper-zoomable-value' => $options['zoomable'], + 'data-symfony--ux-cropperjs--cropper-zoom-on-touch-value' => $options['zoom_on_touch'], + 'data-symfony--ux-cropperjs--cropper-zoom-on-wheel-value' => $options['zoom_on_wheel'], + 'data-symfony--ux-cropperjs--cropper-wheel-zoom-ratio-value' => $options['wheel_zoom_ratio'], + 'data-symfony--ux-cropperjs--cropper-crop-box-movable-value' => $options['crop_box_movable'], + 'data-symfony--ux-cropperjs--cropper-crop-box-resizable-value' => $options['crop_box_resizable'], + 'data-symfony--ux-cropperjs--cropper-toggle-drag-mode-on-dblclick-value' => $options['toggle_drag_mode_on_dblclick'], + 'data-symfony--ux-cropperjs--cropper-min-container-width-value' => $options['min_container_width'], + 'data-symfony--ux-cropperjs--cropper-min-container-height-value' => $options['min_container_height'], + 'data-symfony--ux-cropperjs--cropper-min-canvas-width-value' => $options['min_canvas_width'], + 'data-symfony--ux-cropperjs--cropper-min-canvas-height-value' => $options['min_canvas_height'], + 'data-symfony--ux-cropperjs--cropper-min-crop-box-width-value' => $options['min_crop_box_width'], + 'data-symfony--ux-cropperjs--cropper-min-crop-box-height-value' => $options['min_crop_box_height'], ], ]) ; diff --git a/src/Cropperjs/Resources/assets/src/controller.ts b/src/Cropperjs/Resources/assets/src/controller.ts index 3e15fe043f9..ae59f6b79f3 100644 --- a/src/Cropperjs/Resources/assets/src/controller.ts +++ b/src/Cropperjs/Resources/assets/src/controller.ts @@ -11,68 +11,75 @@ import { Controller } from '@hotwired/stimulus'; import Cropper from 'cropperjs'; +import CropEvent = Cropper.CropEvent; + +export default class CropperController extends Controller { + static values = { + publicUrl: String, + viewMode: Number, + dragMode: String, + responsive: Boolean, + restore: Boolean, + checkCrossOrigin: Boolean, + checkOrientation: Boolean, + modal: Boolean, + guides: Boolean, + center: Boolean, + highlight: Boolean, + background: Boolean, + autoCrop: Boolean, + autoCropArea: Number, + movable: Boolean, + rotatable: Boolean, + scalable: Boolean, + zoomable: Boolean, + zoomOnTouch: Boolean, + zoomOnWheel: Boolean, + wheelZoomRatio: Number, + cropBoxMovable: Boolean, + cropBoxResizable: Boolean, + toggleDragModeOnDblclick: Boolean, + minContainerWidth: Number, + minContainerHeight: Number, + minCanvasWidth: Number, + minCanvasHeight: Number, + minCropBoxWidth: Number, + minCropBoxHeight: Number, + aspectRatio: Number, + initialAspectRatio: Number, + }; -export default class extends Controller { connect() { // Create image view const img = document.createElement('img'); img.classList.add('cropperjs-image'); - img.src = this.element.getAttribute('data-public-url'); + img.src = (this as any).publicUrlValue; + + const parent = (this.element as HTMLInputElement).parentNode; + if (!parent) { + throw new Error('Missing parent node for Cropperjs'); + } - const parent = this.element.parentNode; parent.appendChild(img); // Build the cropper - const options = { - viewMode: parseInt(this.element.getAttribute('data-view-mode')), - dragMode: this.element.getAttribute('data-drag-mode'), - responsive: this.element.hasAttribute('data-responsive'), - restore: this.element.hasAttribute('data-restore'), - checkCrossOrigin: this.element.hasAttribute('data-check-cross-origin'), - checkOrientation: this.element.hasAttribute('data-check-orientation'), - modal: this.element.hasAttribute('data-modal'), - guides: this.element.hasAttribute('data-guides'), - center: this.element.hasAttribute('data-center'), - highlight: this.element.hasAttribute('data-highlight'), - background: this.element.hasAttribute('data-background'), - autoCrop: this.element.hasAttribute('data-auto-crop'), - autoCropArea: parseFloat(this.element.getAttribute('data-auto-crop-area')), - movable: this.element.hasAttribute('data-movable'), - rotatable: this.element.hasAttribute('data-rotatable'), - scalable: this.element.hasAttribute('data-scalable'), - zoomable: this.element.hasAttribute('data-zoomable'), - zoomOnTouch: this.element.hasAttribute('data-zoom-on-touch'), - zoomOnWheel: this.element.hasAttribute('data-zoom-on-wheel'), - wheelZoomRatio: parseFloat(this.element.getAttribute('data-wheel-zoom-ratio')), - cropBoxMovable: this.element.hasAttribute('data-crop-box-movable'), - cropBoxResizable: this.element.hasAttribute('data-crop-box-resizable'), - toggleDragModeOnDblclick: this.element.hasAttribute('data-toggle-drag-mode-on-dblclick'), - minContainerWidth: parseInt(this.element.getAttribute('data-min-container-width')), - minContainerHeight: parseInt(this.element.getAttribute('data-min-container-height')), - minCanvasWidth: parseInt(this.element.getAttribute('data-min-canvas-width')), - minCanvasHeight: parseInt(this.element.getAttribute('data-min-canvas-height')), - minCropBoxWidth: parseInt(this.element.getAttribute('data-min-crop-box-width')), - minCropBoxHeight: parseInt(this.element.getAttribute('data-min-crop-box-height')), - }; - - if (this.element.getAttribute('data-aspect-ratio')) { - options.aspectRatio = parseFloat(this.element.getAttribute('data-aspect-ratio')); - } - - if (this.element.getAttribute('data-initial-aspect-ratio')) { - options.initialAspectRatio = parseFloat(this.element.getAttribute('data-initial-aspect-ratio')); + let options: any = {}; + for (let name in CropperController.values) { + if ((this as any)['has' + name.charAt(0).toUpperCase() + name.slice(1) + 'Value']) { + options[name] = (this as any)[name + 'Value']; + } } const cropper = new Cropper(img, options); img.addEventListener('crop', (event) => { - this.element.value = JSON.stringify(event.detail); + (this.element as HTMLInputElement).value = JSON.stringify((event as CropEvent).detail); }); this._dispatchEvent('cropperjs:connect', { cropper, options, img }); } - _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) { + _dispatchEvent(name: string, payload: any = null, canBubble = false, cancelable = false) { const userEvent = document.createEvent('CustomEvent'); userEvent.initCustomEvent(name, canBubble, cancelable, payload); diff --git a/src/Cropperjs/Resources/assets/test/controller.test.ts b/src/Cropperjs/Resources/assets/test/controller.test.ts index 9274efc1d5d..f6e87924569 100644 --- a/src/Cropperjs/Resources/assets/test/controller.test.ts +++ b/src/Cropperjs/Resources/assets/test/controller.test.ts @@ -17,8 +17,51 @@ import CropperjsController from '../src/controller'; // Controller used to check the actual controller was properly booted class CheckController extends Controller { connect() { - this.element.addEventListener('cropperjs:connect', () => { + this.element.addEventListener('cropperjs:connect', (event: any) => { this.element.classList.add('connected'); + + expect(event.detail.cropper.options).toStrictEqual({ + viewMode: 1, + dragMode: 'move', + initialAspectRatio: 2, + aspectRatio: 1, + data: null, + preview: '', + responsive: true, + restore: true, + checkCrossOrigin: true, + checkOrientation: true, + modal: true, + guides: true, + center: true, + highlight: true, + background: true, + autoCrop: true, + autoCropArea: 0.1, + movable: true, + rotatable: true, + scalable: true, + zoomable: true, + zoomOnTouch: true, + zoomOnWheel: true, + wheelZoomRatio: 0.2, + cropBoxMovable: true, + cropBoxResizable: true, + toggleDragModeOnDblclick: true, + minCanvasWidth: 3, + minCanvasHeight: 4, + minCropBoxWidth: 5, + minCropBoxHeight: 6, + minContainerWidth: 1, + minContainerHeight: 2, + ready: null, + cropstart: null, + cropmove: null, + cropend: null, + crop: null, + zoom: null, + publicUrl: 'https://symfony.com/logos/symfony_black_02.png' + }); }); } } @@ -30,7 +73,7 @@ const startStimulus = () => { }; describe('CropperjsController', () => { - let container; + let container: any; beforeEach(() => { container = mountDOM(` @@ -38,38 +81,38 @@ describe('CropperjsController', () => { + data-cropperjs-public-url-value="https://symfony.com/logos/symfony_black_02.png" + data-cropperjs-view-mode-value="1" + data-cropperjs-drag-mode-value="move" + data-cropperjs-aspect-ratio-value="1" + data-cropperjs-initial-aspect-ratio-value="2" + data-cropperjs-responsive-value="data-responsive" + data-cropperjs-restore-value="data-restore" + data-cropperjs-check-cross-origin-value="data-check-cross-origin" + data-cropperjs-check-orientation-value="data-check-orientation" + data-cropperjs-modal-value="data-modal" + data-cropperjs-guides-value="data-guides" + data-cropperjs-center-value="data-center" + data-cropperjs-highlight-value="data-highlight" + data-cropperjs-background-value="data-background" + data-cropperjs-auto-crop-value="data-auto-crop" + data-cropperjs-auto-crop-area-value="0.1" + data-cropperjs-movable-value="data-movable" + data-cropperjs-rotatable-value="data-rotatable" + data-cropperjs-scalable-value="data-scalable" + data-cropperjs-zoomable-value="data-zoomable" + data-cropperjs-zoom-on-touch-value="data-zoom-on-touch" + data-cropperjs-zoom-on-wheel-value="data-zoom-on-wheel" + data-cropperjs-wheel-zoom-ratio-value="0.2" + data-cropperjs-crop-box-movable-value="data-crop-box-movable" + data-cropperjs-crop-box-resizable-value="data-crop-box-resizable" + data-cropperjs-toggle-drag-mode-on-dblclick-value="data-toggle-drag-mode-on-dblclick" + data-cropperjs-min-container-width-value="1" + data-cropperjs-min-container-height-value="2" + data-cropperjs-min-canvas-width-value="3" + data-cropperjs-min-canvas-height-value="4" + data-cropperjs-min-crop-box-width-value="5" + data-cropperjs-min-crop-box-height-value="6" /> `); }); diff --git a/src/Cropperjs/Tests/Form/CropperTypeTest.php b/src/Cropperjs/Tests/Form/CropperTypeTest.php index b716b557357..7cd8e780430 100644 --- a/src/Cropperjs/Tests/Form/CropperTypeTest.php +++ b/src/Cropperjs/Tests/Form/CropperTypeTest.php @@ -78,38 +78,38 @@ public function testRenderFull() '
'. ''. + 'data-symfony--ux-cropperjs--cropper-public-url-value="/public/url.jpg" '. + 'data-symfony--ux-cropperjs--cropper-view-mode-value="1" '. + 'data-symfony--ux-cropperjs--cropper-drag-mode-value="move" '. + 'data-symfony--ux-cropperjs--cropper-aspect-ratio-value="'.(2000 / 1800).'" '. + 'data-symfony--ux-cropperjs--cropper-initial-aspect-ratio-value="'.(2000 / 1800).'" '. + 'data-symfony--ux-cropperjs--cropper-responsive-value="data-responsive" '. + 'data-symfony--ux-cropperjs--cropper-restore-value="data-restore" '. + 'data-symfony--ux-cropperjs--cropper-check-cross-origin-value="data-check-cross-origin" '. + 'data-symfony--ux-cropperjs--cropper-check-orientation-value="data-check-orientation" '. + 'data-symfony--ux-cropperjs--cropper-modal-value="data-modal" '. + 'data-symfony--ux-cropperjs--cropper-guides-value="data-guides" '. + 'data-symfony--ux-cropperjs--cropper-center-value="data-center" '. + 'data-symfony--ux-cropperjs--cropper-highlight-value="data-highlight" '. + 'data-symfony--ux-cropperjs--cropper-background-value="data-background" '. + 'data-symfony--ux-cropperjs--cropper-auto-crop-value="data-auto-crop" '. + 'data-symfony--ux-cropperjs--cropper-auto-crop-area-value="0.1" '. + 'data-symfony--ux-cropperjs--cropper-movable-value="data-movable" '. + 'data-symfony--ux-cropperjs--cropper-rotatable-value="data-rotatable" '. + 'data-symfony--ux-cropperjs--cropper-scalable-value="data-scalable" '. + 'data-symfony--ux-cropperjs--cropper-zoomable-value="data-zoomable" '. + 'data-symfony--ux-cropperjs--cropper-zoom-on-touch-value="data-zoom-on-touch" '. + 'data-symfony--ux-cropperjs--cropper-zoom-on-wheel-value="data-zoom-on-wheel" '. + 'data-symfony--ux-cropperjs--cropper-wheel-zoom-ratio-value="0.2" '. + 'data-symfony--ux-cropperjs--cropper-crop-box-movable-value="data-crop-box-movable" '. + 'data-symfony--ux-cropperjs--cropper-crop-box-resizable-value="data-crop-box-resizable" '. + 'data-symfony--ux-cropperjs--cropper-toggle-drag-mode-on-dblclick-value="data-toggle-drag-mode-on-dblclick" '. + 'data-symfony--ux-cropperjs--cropper-min-container-width-value="1" '. + 'data-symfony--ux-cropperjs--cropper-min-container-height-value="2" '. + 'data-symfony--ux-cropperjs--cropper-min-canvas-width-value="3" '. + 'data-symfony--ux-cropperjs--cropper-min-canvas-height-value="4" '. + 'data-symfony--ux-cropperjs--cropper-min-crop-box-width-value="5" '. + 'data-symfony--ux-cropperjs--cropper-min-crop-box-height-value="6" />'. '
'. ''. ''. @@ -142,33 +142,33 @@ public function testRenderNoOptions() '
'. ''. + 'data-symfony--ux-cropperjs--cropper-public-url-value="/public/url.jpg" '. + 'data-symfony--ux-cropperjs--cropper-view-mode-value="0" '. + 'data-symfony--ux-cropperjs--cropper-drag-mode-value="crop" '. + 'data-symfony--ux-cropperjs--cropper-responsive-value="data-responsive" '. + 'data-symfony--ux-cropperjs--cropper-restore-value="data-restore" '. + 'data-symfony--ux-cropperjs--cropper-check-cross-origin-value="data-check-cross-origin" '. + 'data-symfony--ux-cropperjs--cropper-check-orientation-value="data-check-orientation" '. + 'data-symfony--ux-cropperjs--cropper-modal-value="data-modal" '. + 'data-symfony--ux-cropperjs--cropper-guides-value="data-guides" '. + 'data-symfony--ux-cropperjs--cropper-center-value="data-center" '. + 'data-symfony--ux-cropperjs--cropper-highlight-value="data-highlight" '. + 'data-symfony--ux-cropperjs--cropper-background-value="data-background" '. + 'data-symfony--ux-cropperjs--cropper-auto-crop-value="data-auto-crop" '. + 'data-symfony--ux-cropperjs--cropper-auto-crop-area-value="0.8" '. + 'data-symfony--ux-cropperjs--cropper-rotatable-value="data-rotatable" '. + 'data-symfony--ux-cropperjs--cropper-zoom-on-touch-value="data-zoom-on-touch" '. + 'data-symfony--ux-cropperjs--cropper-zoom-on-wheel-value="data-zoom-on-wheel" '. + 'data-symfony--ux-cropperjs--cropper-wheel-zoom-ratio-value="0.1" '. + 'data-symfony--ux-cropperjs--cropper-crop-box-movable-value="data-crop-box-movable" '. + 'data-symfony--ux-cropperjs--cropper-crop-box-resizable-value="data-crop-box-resizable" '. + 'data-symfony--ux-cropperjs--cropper-toggle-drag-mode-on-dblclick-value="data-toggle-drag-mode-on-dblclick" '. + 'data-symfony--ux-cropperjs--cropper-min-container-width-value="200" '. + 'data-symfony--ux-cropperjs--cropper-min-container-height-value="100" '. + 'data-symfony--ux-cropperjs--cropper-min-canvas-width-value="0" '. + 'data-symfony--ux-cropperjs--cropper-min-canvas-height-value="0" '. + 'data-symfony--ux-cropperjs--cropper-min-crop-box-width-value="0" '. + 'data-symfony--ux-cropperjs--cropper-min-crop-box-height-value="0" />'. '
'. ''. ''. From e3327ebb41f4f5d7cf8a013228cd12ac3a17fded Mon Sep 17 00:00:00 2001 From: Titouan Galopin Date: Tue, 30 Nov 2021 19:35:29 +0100 Subject: [PATCH 2/3] WIP --- src/Cropperjs/Tests/Form/CropperTypeTest.php | 70 ++++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/src/Cropperjs/Tests/Form/CropperTypeTest.php b/src/Cropperjs/Tests/Form/CropperTypeTest.php index 7cd8e780430..7f14e9bdebb 100644 --- a/src/Cropperjs/Tests/Form/CropperTypeTest.php +++ b/src/Cropperjs/Tests/Form/CropperTypeTest.php @@ -83,27 +83,27 @@ public function testRenderFull() 'data-symfony--ux-cropperjs--cropper-drag-mode-value="move" '. 'data-symfony--ux-cropperjs--cropper-aspect-ratio-value="'.(2000 / 1800).'" '. 'data-symfony--ux-cropperjs--cropper-initial-aspect-ratio-value="'.(2000 / 1800).'" '. - 'data-symfony--ux-cropperjs--cropper-responsive-value="data-responsive" '. - 'data-symfony--ux-cropperjs--cropper-restore-value="data-restore" '. - 'data-symfony--ux-cropperjs--cropper-check-cross-origin-value="data-check-cross-origin" '. - 'data-symfony--ux-cropperjs--cropper-check-orientation-value="data-check-orientation" '. - 'data-symfony--ux-cropperjs--cropper-modal-value="data-modal" '. - 'data-symfony--ux-cropperjs--cropper-guides-value="data-guides" '. - 'data-symfony--ux-cropperjs--cropper-center-value="data-center" '. - 'data-symfony--ux-cropperjs--cropper-highlight-value="data-highlight" '. - 'data-symfony--ux-cropperjs--cropper-background-value="data-background" '. - 'data-symfony--ux-cropperjs--cropper-auto-crop-value="data-auto-crop" '. + 'data-symfony--ux-cropperjs--cropper-responsive-value="data-symfony--ux-cropperjs--cropper-responsive-value" '. + 'data-symfony--ux-cropperjs--cropper-restore-value="data-symfony--ux-cropperjs--cropper-restore-value" '. + 'data-symfony--ux-cropperjs--cropper-check-cross-origin-value="data-symfony--ux-cropperjs--cropper-check-cross-origin-value" '. + 'data-symfony--ux-cropperjs--cropper-check-orientation-value="data-symfony--ux-cropperjs--cropper-check-orientation-value" '. + 'data-symfony--ux-cropperjs--cropper-modal-value="data-symfony--ux-cropperjs--cropper-modal-value" '. + 'data-symfony--ux-cropperjs--cropper-guides-value="data-symfony--ux-cropperjs--cropper-guides-value" '. + 'data-symfony--ux-cropperjs--cropper-center-value="data-symfony--ux-cropperjs--cropper-center-value" '. + 'data-symfony--ux-cropperjs--cropper-highlight-value="data-symfony--ux-cropperjs--cropper-highlight-value" '. + 'data-symfony--ux-cropperjs--cropper-background-value="data-symfony--ux-cropperjs--cropper-background-value" '. + 'data-symfony--ux-cropperjs--cropper-auto-crop-value="data-symfony--ux-cropperjs--cropper-auto-crop-value" '. 'data-symfony--ux-cropperjs--cropper-auto-crop-area-value="0.1" '. - 'data-symfony--ux-cropperjs--cropper-movable-value="data-movable" '. - 'data-symfony--ux-cropperjs--cropper-rotatable-value="data-rotatable" '. - 'data-symfony--ux-cropperjs--cropper-scalable-value="data-scalable" '. - 'data-symfony--ux-cropperjs--cropper-zoomable-value="data-zoomable" '. - 'data-symfony--ux-cropperjs--cropper-zoom-on-touch-value="data-zoom-on-touch" '. - 'data-symfony--ux-cropperjs--cropper-zoom-on-wheel-value="data-zoom-on-wheel" '. + 'data-symfony--ux-cropperjs--cropper-movable-value="data-symfony--ux-cropperjs--cropper-movable-value" '. + 'data-symfony--ux-cropperjs--cropper-rotatable-value="data-symfony--ux-cropperjs--cropper-rotatable-value" '. + 'data-symfony--ux-cropperjs--cropper-scalable-value="data-symfony--ux-cropperjs--cropper-scalable-value" '. + 'data-symfony--ux-cropperjs--cropper-zoomable-value="data-symfony--ux-cropperjs--cropper-zoomable-value" '. + 'data-symfony--ux-cropperjs--cropper-zoom-on-touch-value="data-symfony--ux-cropperjs--cropper-zoom-on-touch-value" '. + 'data-symfony--ux-cropperjs--cropper-zoom-on-wheel-value="data-symfony--ux-cropperjs--cropper-zoom-on-wheel-value" '. 'data-symfony--ux-cropperjs--cropper-wheel-zoom-ratio-value="0.2" '. - 'data-symfony--ux-cropperjs--cropper-crop-box-movable-value="data-crop-box-movable" '. - 'data-symfony--ux-cropperjs--cropper-crop-box-resizable-value="data-crop-box-resizable" '. - 'data-symfony--ux-cropperjs--cropper-toggle-drag-mode-on-dblclick-value="data-toggle-drag-mode-on-dblclick" '. + 'data-symfony--ux-cropperjs--cropper-crop-box-movable-value="data-symfony--ux-cropperjs--cropper-crop-box-movable-value" '. + 'data-symfony--ux-cropperjs--cropper-crop-box-resizable-value="-symfony--ux-cropperjs--cropper-crop-box-resizable-value" '. + 'data-symfony--ux-cropperjs--cropper-toggle-drag-mode-on-dblclick-value="data-symfony--ux-cropperjs--cropper-toggle-drag-mode-on-dblclick-value" '. 'data-symfony--ux-cropperjs--cropper-min-container-width-value="1" '. 'data-symfony--ux-cropperjs--cropper-min-container-height-value="2" '. 'data-symfony--ux-cropperjs--cropper-min-canvas-width-value="3" '. @@ -145,24 +145,24 @@ public function testRenderNoOptions() 'data-symfony--ux-cropperjs--cropper-public-url-value="/public/url.jpg" '. 'data-symfony--ux-cropperjs--cropper-view-mode-value="0" '. 'data-symfony--ux-cropperjs--cropper-drag-mode-value="crop" '. - 'data-symfony--ux-cropperjs--cropper-responsive-value="data-responsive" '. - 'data-symfony--ux-cropperjs--cropper-restore-value="data-restore" '. - 'data-symfony--ux-cropperjs--cropper-check-cross-origin-value="data-check-cross-origin" '. - 'data-symfony--ux-cropperjs--cropper-check-orientation-value="data-check-orientation" '. - 'data-symfony--ux-cropperjs--cropper-modal-value="data-modal" '. - 'data-symfony--ux-cropperjs--cropper-guides-value="data-guides" '. - 'data-symfony--ux-cropperjs--cropper-center-value="data-center" '. - 'data-symfony--ux-cropperjs--cropper-highlight-value="data-highlight" '. - 'data-symfony--ux-cropperjs--cropper-background-value="data-background" '. - 'data-symfony--ux-cropperjs--cropper-auto-crop-value="data-auto-crop" '. + 'data-symfony--ux-cropperjs--cropper-responsive-value="data-symfony--ux-cropperjs--cropper-responsive-value" '. + 'data-symfony--ux-cropperjs--cropper-restore-value="data-symfony--ux-cropperjs--cropper-restore-value" '. + 'data-symfony--ux-cropperjs--cropper-check-cross-origin-value="data-symfony--ux-cropperjs--cropper-check-cross-origin-value" '. + 'data-symfony--ux-cropperjs--cropper-check-orientation-value="data-symfony--ux-cropperjs--cropper-check-orientation-value" '. + 'data-symfony--ux-cropperjs--cropper-modal-value="data-symfony--ux-cropperjs--cropper-modal-value" '. + 'data-symfony--ux-cropperjs--cropper-guides-value="data-symfony--ux-cropperjs--cropper-guides-value" '. + 'data-symfony--ux-cropperjs--cropper-center-value="data-symfony--ux-cropperjs--cropper-center-value" '. + 'data-symfony--ux-cropperjs--cropper-highlight-value="data-symfony--ux-cropperjs--cropper-highlight-value" '. + 'data-symfony--ux-cropperjs--cropper-background-value="data-symfony--ux-cropperjs--cropper-background-value" '. + 'data-symfony--ux-cropperjs--cropper-auto-crop-value="data-symfony--ux-cropperjs--cropper-auto-crop-value" '. 'data-symfony--ux-cropperjs--cropper-auto-crop-area-value="0.8" '. - 'data-symfony--ux-cropperjs--cropper-rotatable-value="data-rotatable" '. - 'data-symfony--ux-cropperjs--cropper-zoom-on-touch-value="data-zoom-on-touch" '. - 'data-symfony--ux-cropperjs--cropper-zoom-on-wheel-value="data-zoom-on-wheel" '. + 'data-symfony--ux-cropperjs--cropper-rotatable-value="data-symfony--ux-cropperjs--cropper-rotatable-value" '. + 'data-symfony--ux-cropperjs--cropper-zoom-on-touch-value="data-symfony--ux-cropperjs--cropper-zoom-on-touch-value" '. + 'data-symfony--ux-cropperjs--cropper-zoom-on-wheel-value="data-symfony--ux-cropperjs--cropper-zoom-on-wheel-value" '. 'data-symfony--ux-cropperjs--cropper-wheel-zoom-ratio-value="0.1" '. - 'data-symfony--ux-cropperjs--cropper-crop-box-movable-value="data-crop-box-movable" '. - 'data-symfony--ux-cropperjs--cropper-crop-box-resizable-value="data-crop-box-resizable" '. - 'data-symfony--ux-cropperjs--cropper-toggle-drag-mode-on-dblclick-value="data-toggle-drag-mode-on-dblclick" '. + 'data-symfony--ux-cropperjs--cropper-crop-box-movable-value="data-symfony--ux-cropperjs--cropper-crop-box-movable-value" '. + 'data-symfony--ux-cropperjs--cropper-crop-box-resizable-value="-symfony--ux-cropperjs--cropper-crop-box-resizable-value" '. + 'data-symfony--ux-cropperjs--cropper-toggle-drag-mode-on-dblclick-value="data-symfony--ux-cropperjs--cropper-toggle-drag-mode-on-dblclick-value" '. 'data-symfony--ux-cropperjs--cropper-min-container-width-value="200" '. 'data-symfony--ux-cropperjs--cropper-min-container-height-value="100" '. 'data-symfony--ux-cropperjs--cropper-min-canvas-width-value="0" '. From 5ad7e32c1c3c625275321fd589002a63b1e2d90e Mon Sep 17 00:00:00 2001 From: Ryan Weaver Date: Sun, 5 Dec 2021 22:14:23 -0500 Subject: [PATCH 3/3] Putting all Cropper.js options under cropper_options --- src/Cropperjs/CHANGELOG.md | 2 + src/Cropperjs/Form/CropperType.php | 130 +----------------- src/Cropperjs/README.md | 60 ++------ .../Resources/assets/src/controller.ts | 42 +----- .../Resources/assets/test/controller.test.ts | 95 +++---------- src/Cropperjs/Tests/Form/CropperTypeTest.php | 94 +------------ 6 files changed, 49 insertions(+), 374 deletions(-) diff --git a/src/Cropperjs/CHANGELOG.md b/src/Cropperjs/CHANGELOG.md index 3f0d735f7ec..0cbd60d917a 100644 --- a/src/Cropperjs/CHANGELOG.md +++ b/src/Cropperjs/CHANGELOG.md @@ -5,6 +5,8 @@ - Support for `stimulus` version 2 was removed and support for `@hotwired/stimulus` version 3 was added. See the [@symfony/stimulus-bridge CHANGELOG](https://github.com/symfony/stimulus-bridge/blob/main/CHANGELOG.md#300) for more details. +- The individual Cropper.js options in `CropperType` were moved under + a single `cropper_options` option. - Support added for Symfony 6 ## 1.3 diff --git a/src/Cropperjs/Form/CropperType.php b/src/Cropperjs/Form/CropperType.php index ab8b783a5fb..3f5987b8e7f 100644 --- a/src/Cropperjs/Form/CropperType.php +++ b/src/Cropperjs/Form/CropperType.php @@ -35,37 +35,7 @@ public function buildForm(FormBuilderInterface $builder, array $options) 'attr' => [ 'data-controller' => trim(($options['attr']['data-controller'] ?? '').' symfony--ux-cropperjs--cropper'), 'data-symfony--ux-cropperjs--cropper-public-url-value' => $options['public_url'], - 'data-symfony--ux-cropperjs--cropper-view-mode-value' => $options['view_mode'], - 'data-symfony--ux-cropperjs--cropper-drag-mode-value' => $options['drag_mode'], - 'data-symfony--ux-cropperjs--cropper-aspect-ratio-value' => $options['aspect_ratio'] ?: false, - 'data-symfony--ux-cropperjs--cropper-initial-aspect-ratio-value' => $options['initial_aspect_ratio'] ?: false, - 'data-symfony--ux-cropperjs--cropper-responsive-value' => $options['responsive'], - 'data-symfony--ux-cropperjs--cropper-restore-value' => $options['restore'], - 'data-symfony--ux-cropperjs--cropper-check-cross-origin-value' => $options['check_cross_origin'], - 'data-symfony--ux-cropperjs--cropper-check-orientation-value' => $options['check_orientation'], - 'data-symfony--ux-cropperjs--cropper-modal-value' => $options['modal'], - 'data-symfony--ux-cropperjs--cropper-guides-value' => $options['guides'], - 'data-symfony--ux-cropperjs--cropper-center-value' => $options['center'], - 'data-symfony--ux-cropperjs--cropper-highlight-value' => $options['highlight'], - 'data-symfony--ux-cropperjs--cropper-background-value' => $options['background'], - 'data-symfony--ux-cropperjs--cropper-auto-crop-value' => $options['auto_crop'], - 'data-symfony--ux-cropperjs--cropper-auto-crop-area-value' => $options['auto_crop_area'], - 'data-symfony--ux-cropperjs--cropper-movable-value' => $options['movable'], - 'data-symfony--ux-cropperjs--cropper-rotatable-value' => $options['rotatable'], - 'data-symfony--ux-cropperjs--cropper-scalable-value' => $options['scalable'], - 'data-symfony--ux-cropperjs--cropper-zoomable-value' => $options['zoomable'], - 'data-symfony--ux-cropperjs--cropper-zoom-on-touch-value' => $options['zoom_on_touch'], - 'data-symfony--ux-cropperjs--cropper-zoom-on-wheel-value' => $options['zoom_on_wheel'], - 'data-symfony--ux-cropperjs--cropper-wheel-zoom-ratio-value' => $options['wheel_zoom_ratio'], - 'data-symfony--ux-cropperjs--cropper-crop-box-movable-value' => $options['crop_box_movable'], - 'data-symfony--ux-cropperjs--cropper-crop-box-resizable-value' => $options['crop_box_resizable'], - 'data-symfony--ux-cropperjs--cropper-toggle-drag-mode-on-dblclick-value' => $options['toggle_drag_mode_on_dblclick'], - 'data-symfony--ux-cropperjs--cropper-min-container-width-value' => $options['min_container_width'], - 'data-symfony--ux-cropperjs--cropper-min-container-height-value' => $options['min_container_height'], - 'data-symfony--ux-cropperjs--cropper-min-canvas-width-value' => $options['min_canvas_width'], - 'data-symfony--ux-cropperjs--cropper-min-canvas-height-value' => $options['min_canvas_height'], - 'data-symfony--ux-cropperjs--cropper-min-crop-box-width-value' => $options['min_crop_box_width'], - 'data-symfony--ux-cropperjs--cropper-min-crop-box-height-value' => $options['min_crop_box_height'], + 'data-symfony--ux-cropperjs--cropper-options-value' => json_encode($options['cropper_options']), ], ]) ; @@ -85,107 +55,11 @@ public function configureOptions(OptionsResolver $resolver) { $resolver->setRequired('public_url'); $resolver->setAllowedTypes('public_url', 'string'); - - $resolver->setDefined([ - 'view_mode', - 'drag_mode', - 'aspect_ratio', - 'initial_aspect_ratio', - 'responsive', - 'restore', - 'check_cross_origin', - 'check_orientation', - 'modal', - 'guides', - 'center', - 'highlight', - 'background', - 'auto_crop', - 'auto_crop_area', - 'movable', - 'rotatable', - 'scalable', - 'zoomable', - 'zoom_on_touch', - 'zoom_on_wheel', - 'wheel_zoom_ratio', - 'crop_box_movable', - 'crop_box_resizable', - 'toggle_drag_mode_on_dblclick', - 'min_container_width', - 'min_container_height', - 'min_canvas_width', - 'min_canvas_height', - 'min_crop_box_width', - 'min_crop_box_height', - ]); - - $resolver->setAllowedTypes('view_mode', ['int']); - $resolver->setAllowedTypes('drag_mode', ['string']); - $resolver->setAllowedTypes('aspect_ratio', ['double', 'null']); - $resolver->setAllowedTypes('initial_aspect_ratio', ['double', 'null']); - $resolver->setAllowedTypes('responsive', ['bool']); - $resolver->setAllowedTypes('restore', ['bool']); - $resolver->setAllowedTypes('check_cross_origin', ['bool']); - $resolver->setAllowedTypes('check_orientation', ['bool']); - $resolver->setAllowedTypes('modal', ['bool']); - $resolver->setAllowedTypes('guides', ['bool']); - $resolver->setAllowedTypes('center', ['bool']); - $resolver->setAllowedTypes('highlight', ['bool']); - $resolver->setAllowedTypes('background', ['bool']); - $resolver->setAllowedTypes('auto_crop', ['bool']); - $resolver->setAllowedTypes('auto_crop_area', ['float']); - $resolver->setAllowedTypes('movable', ['bool']); - $resolver->setAllowedTypes('rotatable', ['bool']); - $resolver->setAllowedTypes('scalable', ['bool']); - $resolver->setAllowedTypes('zoomable', ['bool']); - $resolver->setAllowedTypes('zoom_on_touch', ['bool']); - $resolver->setAllowedTypes('zoom_on_wheel', ['bool']); - $resolver->setAllowedTypes('wheel_zoom_ratio', ['float']); - $resolver->setAllowedTypes('crop_box_movable', ['bool']); - $resolver->setAllowedTypes('crop_box_resizable', ['bool']); - $resolver->setAllowedTypes('toggle_drag_mode_on_dblclick', ['bool']); - $resolver->setAllowedTypes('min_container_width', ['int']); - $resolver->setAllowedTypes('min_container_height', ['int']); - $resolver->setAllowedTypes('min_canvas_width', ['int']); - $resolver->setAllowedTypes('min_canvas_height', ['int']); - $resolver->setAllowedTypes('min_crop_box_width', ['int']); - $resolver->setAllowedTypes('min_crop_box_height', ['int']); + $resolver->setDefault('cropper_options', []); $resolver->setDefaults([ 'label' => false, 'data_class' => Crop::class, - 'view_mode' => 0, - 'drag_mode' => 'crop', - 'initial_aspect_ratio' => null, - 'aspect_ratio' => null, - 'responsive' => true, - 'restore' => true, - 'check_cross_origin' => true, - 'check_orientation' => true, - 'modal' => true, - 'guides' => true, - 'center' => true, - 'highlight' => true, - 'background' => true, - 'auto_crop' => true, - 'auto_crop_area' => 0.8, - 'movable' => false, - 'rotatable' => true, - 'scalable' => false, - 'zoomable' => false, - 'zoom_on_touch' => true, - 'zoom_on_wheel' => true, - 'wheel_zoom_ratio' => 0.1, - 'crop_box_movable' => true, - 'crop_box_resizable' => true, - 'toggle_drag_mode_on_dblclick' => true, - 'min_container_width' => 200, - 'min_container_height' => 100, - 'min_canvas_width' => 0, - 'min_canvas_height' => 0, - 'min_crop_box_width' => 0, - 'min_crop_box_height' => 0, ]); } diff --git a/src/Cropperjs/README.md b/src/Cropperjs/README.md index 5e6949830aa..6b193a47f25 100644 --- a/src/Cropperjs/README.md +++ b/src/Cropperjs/README.md @@ -44,7 +44,9 @@ class HomeController extends AbstractController $form = $this->createFormBuilder(['crop' => $crop]) ->add('crop', CropperType::class, [ 'public_url' => '/public/url/to/the/image.jpg', - 'aspect_ratio' => 2000 / 1500, + 'cropper_options' => [ + 'aspectRatio' => 2000 / 1500, + ], ]) ->getForm() ; @@ -68,49 +70,7 @@ class HomeController extends AbstractController } ``` -You can pass the following options to the `CropperType` field: - -```php -$form = $this->createFormBuilder(['crop' => $crop]) - ->add('crop', CropperType::class, [ - 'public_url' => '/public/url/to/the/image.jpg', - 'view_mode' => 1, - 'drag_mode' => 'move', - 'initial_aspect_ratio' => 2000 / 1800, - 'aspect_ratio' => 2000 / 1800, - 'responsive' => true, - 'restore' => true, - 'check_cross_origin' => true, - 'check_orientation' => true, - 'modal' => true, - 'guides' => true, - 'center' => true, - 'highlight' => true, - 'background' => true, - 'auto_crop' => true, - 'auto_crop_area' => 0.1, - 'movable' => true, - 'rotatable' => true, - 'scalable' => true, - 'zoomable' => true, - 'zoom_on_touch' => true, - 'zoom_on_wheel' => true, - 'wheel_zoom_ratio' => 0.2, - 'crop_box_movable' => true, - 'crop_box_resizable' => true, - 'toggle_drag_mode_on_dblclick' => true, - 'min_container_width' => 200, - 'min_container_height' => 100, - 'min_canvas_width' => 0, - 'min_canvas_height' => 0, - 'min_crop_box_width' => 0, - 'min_crop_box_height' => 0, - ]) - ->getForm() -; -``` - -These options are associated to [the Cropper.js options](https://github.com/fengyuanchen/cropperjs/blob/master/README.md#options). +These `cropper_options` can be any [the Cropper.js option](https://github.com/fengyuanchen/cropperjs/blob/main/README.md#options). Once created in PHP, a crop form is a normal form, meaning you can display it using Twig as you would normally with any form: @@ -130,14 +90,22 @@ import { Controller } from '@hotwired/stimulus'; export default class extends Controller { connect() { + this.element.addEventListener('cropperjs:pre-connect', this._onPreConnect); this.element.addEventListener('cropperjs:connect', this._onConnect); } disconnect() { // You should always remove listeners when the controller is disconnected to avoid side effects + this.element.removeEventListener('cropperjs:pre-connect', this._onConnect); this.element.removeEventListener('cropperjs:connect', this._onConnect); } + _onPreConnect(event) { + // The cropper has not yet been created and options can be modified + console.log(event.detail.options); + console.log(event.detail.img); + } + _onConnect(event) { // The cropper was just created and you can access details from the event console.log(event.detail.cropper); @@ -158,7 +126,9 @@ Then in your form, add your controller as an HTML attribute: $form = $this->createFormBuilder(['crop' => $crop]) ->add('crop', CropperType::class, [ 'public_url' => '/public/url/to/the/image.jpg', - 'aspect_ratio' => 2000 / 1800, + 'cropper_options' => [ + 'aspectRatio' => 2000 / 1800, + ], 'attr' => ['data-controller' => 'mycropper'], ]) ->getForm() diff --git a/src/Cropperjs/Resources/assets/src/controller.ts b/src/Cropperjs/Resources/assets/src/controller.ts index ae59f6b79f3..0240ef7a6c1 100644 --- a/src/Cropperjs/Resources/assets/src/controller.ts +++ b/src/Cropperjs/Resources/assets/src/controller.ts @@ -16,37 +16,7 @@ import CropEvent = Cropper.CropEvent; export default class CropperController extends Controller { static values = { publicUrl: String, - viewMode: Number, - dragMode: String, - responsive: Boolean, - restore: Boolean, - checkCrossOrigin: Boolean, - checkOrientation: Boolean, - modal: Boolean, - guides: Boolean, - center: Boolean, - highlight: Boolean, - background: Boolean, - autoCrop: Boolean, - autoCropArea: Number, - movable: Boolean, - rotatable: Boolean, - scalable: Boolean, - zoomable: Boolean, - zoomOnTouch: Boolean, - zoomOnWheel: Boolean, - wheelZoomRatio: Number, - cropBoxMovable: Boolean, - cropBoxResizable: Boolean, - toggleDragModeOnDblclick: Boolean, - minContainerWidth: Number, - minContainerHeight: Number, - minCanvasWidth: Number, - minCanvasHeight: Number, - minCropBoxWidth: Number, - minCropBoxHeight: Number, - aspectRatio: Number, - initialAspectRatio: Number, + options: Object, }; connect() { @@ -62,14 +32,10 @@ export default class CropperController extends Controller { parent.appendChild(img); - // Build the cropper - let options: any = {}; - for (let name in CropperController.values) { - if ((this as any)['has' + name.charAt(0).toUpperCase() + name.slice(1) + 'Value']) { - options[name] = (this as any)[name + 'Value']; - } - } + const options = this.optionsValue; + this._dispatchEvent('cropperjs:pre-connect', { options, img }); + // Build the cropper const cropper = new Cropper(img, options); img.addEventListener('crop', (event) => { diff --git a/src/Cropperjs/Resources/assets/test/controller.test.ts b/src/Cropperjs/Resources/assets/test/controller.test.ts index f6e87924569..6027c9e0f9f 100644 --- a/src/Cropperjs/Resources/assets/test/controller.test.ts +++ b/src/Cropperjs/Resources/assets/test/controller.test.ts @@ -14,54 +14,14 @@ import { getByTestId, waitFor } from '@testing-library/dom'; import { clearDOM, mountDOM } from '@symfony/stimulus-testing'; import CropperjsController from '../src/controller'; +let cropper: Cropper|null = null; + // Controller used to check the actual controller was properly booted class CheckController extends Controller { connect() { this.element.addEventListener('cropperjs:connect', (event: any) => { this.element.classList.add('connected'); - - expect(event.detail.cropper.options).toStrictEqual({ - viewMode: 1, - dragMode: 'move', - initialAspectRatio: 2, - aspectRatio: 1, - data: null, - preview: '', - responsive: true, - restore: true, - checkCrossOrigin: true, - checkOrientation: true, - modal: true, - guides: true, - center: true, - highlight: true, - background: true, - autoCrop: true, - autoCropArea: 0.1, - movable: true, - rotatable: true, - scalable: true, - zoomable: true, - zoomOnTouch: true, - zoomOnWheel: true, - wheelZoomRatio: 0.2, - cropBoxMovable: true, - cropBoxResizable: true, - toggleDragModeOnDblclick: true, - minCanvasWidth: 3, - minCanvasHeight: 4, - minCropBoxWidth: 5, - minCropBoxHeight: 6, - minContainerWidth: 1, - minContainerHeight: 2, - ready: null, - cropstart: null, - cropmove: null, - cropend: null, - crop: null, - zoom: null, - publicUrl: 'https://symfony.com/logos/symfony_black_02.png' - }); + cropper = event.detail.cropper; }); } } @@ -72,6 +32,14 @@ const startStimulus = () => { application.register('cropperjs', CropperjsController); }; +const dataToJsonAttribute = (data: any) => { + const container = document.createElement('div'); + container.dataset.foo = JSON.stringify(data); + + // returns the now-escaped string, ready to be used in an HTML attribute + return container.outerHTML.match(/data-foo="(.+)"/)[1] +} + describe('CropperjsController', () => { let container: any; @@ -81,44 +49,19 @@ describe('CropperjsController', () => { + data-cropperjs-public-url-value="https://symfony.com/logos/symfony_black_02.png" + data-cropperjs-options-value="${dataToJsonAttribute({ + viewMode: 1, + dragMode: "move" + })}" + > `); }); afterEach(() => { clearDOM(); + cropper = null; }); it('connect', async () => { @@ -126,5 +69,7 @@ describe('CropperjsController', () => { startStimulus(); await waitFor(() => expect(getByTestId(container, 'input')).toHaveClass('connected')); + expect(cropper.options.viewMode).toBe(1); + expect(cropper.options.dragMode).toBe('move'); }); }); diff --git a/src/Cropperjs/Tests/Form/CropperTypeTest.php b/src/Cropperjs/Tests/Form/CropperTypeTest.php index 7f14e9bdebb..5e1bc6ff478 100644 --- a/src/Cropperjs/Tests/Form/CropperTypeTest.php +++ b/src/Cropperjs/Tests/Form/CropperTypeTest.php @@ -34,37 +34,10 @@ public function testRenderFull() ->add('photo', CropperType::class, [ 'public_url' => '/public/url.jpg', 'attr' => ['data-controller' => 'mycropper'], - 'view_mode' => 1, - 'drag_mode' => 'move', - 'initial_aspect_ratio' => 2000 / 1800, - 'aspect_ratio' => 2000 / 1800, - 'responsive' => true, - 'restore' => true, - 'check_cross_origin' => true, - 'check_orientation' => true, - 'modal' => true, - 'guides' => true, - 'center' => true, - 'highlight' => true, - 'background' => true, - 'auto_crop' => true, - 'auto_crop_area' => 0.1, - 'movable' => true, - 'rotatable' => true, - 'scalable' => true, - 'zoomable' => true, - 'zoom_on_touch' => true, - 'zoom_on_wheel' => true, - 'wheel_zoom_ratio' => 0.2, - 'crop_box_movable' => true, - 'crop_box_resizable' => true, - 'toggle_drag_mode_on_dblclick' => true, - 'min_container_width' => 1, - 'min_container_height' => 2, - 'min_canvas_width' => 3, - 'min_canvas_height' => 4, - 'min_crop_box_width' => 5, - 'min_crop_box_height' => 6, + 'cropper_options' => [ + 'viewMode' => 1, + 'dragMode' => 'move', + ], ]) ->getForm() ; @@ -79,37 +52,7 @@ public function testRenderFull() ''. + 'data-symfony--ux-cropperjs--cropper-options-value="{"viewMode":1,"dragMode":"move"}" />'. ''. ''. ''. @@ -143,32 +86,7 @@ public function testRenderNoOptions() ''. + 'data-symfony--ux-cropperjs--cropper-options-value="[]" />'. ''. ''. ''.