WordPress.org
Get WordPress

Make WordPress Core

Ticket #32282: 32282.diff

File 32282.diff, 7.2 KB (added by johnillo, 4 years ago)

  • src/js/_enqueues/lib/image-edit.js 

    diff --git a/src/js/_enqueues/lib/image-edit.js b/src/js/_enqueues/lib/image-edit.js
index 099398b4e3..270c7eb46d 100644
    a b  
    107107         * @return {void}
    108108         */
    109109        init : function(postid) {
    110                 var t = this, old = $('#image-editor-' + t.postid),
    111                         x = t.intval( $('#imgedit-x-' + postid).val() ),
    112                         y = t.intval( $('#imgedit-y-' + postid).val() );
     110                var t = this, old = $('#image-editor-' + t.postid);
    113111
    114112                if ( t.postid !== postid && old.length ) {
    115113                        t.close(t.postid);
    116114                }
    117115
    118                 t.hold.w = t.hold.ow = x;
    119                 t.hold.h = t.hold.oh = y;
    120                 t.hold.xy_ratio = x / y;
    121116                t.hold.sizer = parseFloat( $('#imgedit-sizer-' + postid).val() );
    122117                t.postid = postid;
    123118                $('#imgedit-response-' + postid).empty();
    … …  
    141136                $( document ).on( 'image-editor-ui-ready', this.focusManager );
    142137        },
    143138
     139        /**
     140         * Calculate the image size and save it to memory.
     141         *
     142         * @since 5.8.0 - Fix cropping issues.
     143         *
     144         * @memberof imageEdit
     145         *
     146         * @param {number} postid The post ID.
     147         *
     148         * @return {void}
     149         */
     150        calculateImgSize: function (postid) {
     151                var t = this,
     152                        x = t.intval( $('#imgedit-x-' + postid).val() ),
     153                        y = t.intval( $('#imgedit-y-' + postid).val() );
     154                t.hold.w = t.hold.ow = x;
     155                t.hold.h = t.hold.oh = y;
     156                t.hold.xy_ratio = x / y;
     157                t.hold.sizer = parseFloat( $('#imgedit-sizer-' + postid).val() );
     158                t.currentCropSelection = null;
     159        },
     160
    144161        /**
    145162         * Toggles the wait/load icon in the editor.
    146163         *
    … …  
    328345                        for ( n in history ) {
    329346                                i = history[n];
    330347                                if ( i.hasOwnProperty('c') ) {
    331                                         op[n] = { 'c': { 'x': i.c.x, 'y': i.c.y, 'w': i.c.w, 'h': i.c.h } };
     348                                        op[n] = { 'c': { 'x': i.c.x, 'y': i.c.y, 'w': i.c.w, 'h': i.c.h, 'r': i.c.r } };
    332349                                } else if ( i.hasOwnProperty('r') ) {
    333350                                        op[n] = { 'r': i.r.r };
    334351                                } else if ( i.hasOwnProperty('f') ) {
    … …  
    661678                if ( 'undefined' === typeof this.hold.sizer ) {
    662679                        this.init( postid );
    663680                }
     681                this.calculateImgSize( postid );
    664682
    665683                this.initCrop(postid, img, parent);
    666684                this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 0, 'width': img.innerWidth(), 'height': img.innerHeight() } );
    … …  
    744762                                 *
    745763                                 * @return {void}
    746764                                 */
    747                                 parent.children().on( 'mousedown, touchstart', function(e){
    748                                         var ratio = false, sel, defRatio;
    749 
    750                                         if ( e.shiftKey ) {
    751                                                 sel = t.iasapi.getSelection();
    752                                                 defRatio = t.getSelRatio(postid);
    753                                                 ratio = ( sel && sel.width && sel.height ) ? sel.width + ':' + sel.height : defRatio;
     765                                parent.children().on( 'mousedown touchstart', function(e) {
     766                                        var ratio = false,
     767                                                sel = t.iasapi.getSelection(),
     768                                                cx = t.intval($('#imgedit-crop-width-' + postid).val()),
     769                                                cy = t.intval($('#imgedit-crop-height-' + postid).val());
     770
     771                                        if ( cx && cy ) {
     772                                                ratio = t.getSelRatio(postid);
     773                                        } else if ( e.shiftKey && sel && sel.width && sel.height ) {
     774                                                ratio = sel.width + ':' + sel.height;
    754775                                        }
    755776
    756777                                        t.iasapi.setOptions({
    … …  
    795816                         */
    796817                        onSelectChange: function(img, c) {
    797818                                var sizer = imageEdit.hold.sizer;
    798                                 selW.val( imageEdit.round(c.width / sizer) );
    799                                 selH.val( imageEdit.round(c.height / sizer) );
     819
     820                                var oldSel = imageEdit.currentCropSelection;
     821                                if (oldSel != null && oldSel.width == c.width && oldSel.height == c.height) {
     822                                        return;
     823                                }
     824
     825                                selW.val( Math.min(imageEdit.hold.w, imageEdit.round(c.width / sizer)) );
     826                                selH.val( Math.min(imageEdit.hold.h, imageEdit.round(c.height / sizer)) );
     827
     828                                t.currentCropSelection = c;
    800829                        }
    801830                });
    802831        },
    … …  
    814843         * @return {boolean}
    815844         */
    816845        setCropSelection : function(postid, c) {
    817                 var sel;
     846                var sel,
     847                        selW = $('#imgedit-sel-width-' + postid),
     848                        selH = $('#imgedit-sel-height-' + postid),
     849                        sizer = this.hold.sizer,
     850                        hold = this.hold;
    818851
    819852                c = c || 0;
    820853
    … …  
    827860                        return false;
    828861                }
    829862
    830                 sel = { 'x': c.x1, 'y': c.y1, 'w': c.width, 'h': c.height };
     863                // adjust the selection within the bounds of the image on 100% scale
     864                var excessW = hold.w - ( Math.round(c.x1 / sizer) + parseInt(selW.val()) );
     865                var excessH = hold.h - ( Math.round(c.y1 / sizer) + parseInt(selH.val()) );
     866                var x = Math.round( c.x1 / sizer ) + Math.min( 0, excessW );
     867                var y = Math.round( c.y1 / sizer ) + Math.min( 0, excessH );
     868
     869                // use 100% scaling to prevent rounding errors
     870                sel = { 'r': 1, 'x': x, 'y': y, 'w': selW.val(), 'h': selH.val() };
     871
    831872                this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 1);
    832873                $('#imgedit-selection-' + postid).val( JSON.stringify(sel) );
    833874        },
    … …  
    955996                }
    956997
    957998                this.addStep({ 'r': { 'r': angle, 'fw': this.hold.h, 'fh': this.hold.w }}, postid, nonce);
     999
     1000                // Clear the selection fields after rotating.
     1001                $('#imgedit-sel-width-' + postid).val('');
     1002                $('#imgedit-sel-height-' + postid).val('');
     1003                this.currentCropSelection = null;
    9581004        },
    9591005
    9601006        /**
    … …  
    9771023                }
    9781024
    9791025                this.addStep({ 'f': { 'f': axis, 'fw': this.hold.w, 'fh': this.hold.h }}, postid, nonce);
     1026
     1027                // Clear the selection fields after flipping.
     1028                $('#imgedit-sel-width-' + postid).val('');
     1029                $('#imgedit-sel-height-' + postid).val('');
     1030                this.currentCropSelection = null;
    9801031        },
    9811032
    9821033        /**
    … …  
    10111062                // Clear the selection fields after cropping.
    10121063                $('#imgedit-sel-width-' + postid).val('');
    10131064                $('#imgedit-sel-height-' + postid).val('');
     1065                this.currentCropSelection = null;
    10141066        },
    10151067
    10161068        /**
    … …  
    10981150                        img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
    10991151                        sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
    11001152
     1153                this.currentCropSelection = null;
     1154
    11011155                if ( false === this.validateNumeric( el ) ) {
    11021156                        return;
    11031157                }
    … …  
    11211175                        if ( x2 > imgw ) {
    11221176                                x1 = 0;
    11231177                                x2 = imgw;
    1124                                 elX.val( Math.round( x2 / sizer ) );
     1178                                elX.val( Math.min( this.hold.w, Math.round( x2 / sizer ) ) );
    11251179                        }
    11261180
    11271181                        if ( y2 > imgh ) {
    11281182                                y1 = 0;
    11291183                                y2 = imgh;
    1130                                 elY.val( Math.round( y2 / sizer ) );
     1184                                elY.val( Math.min( this.hold.h, Math.round( y2 / sizer ) ) );
    11311185                        }
    11321186
    11331187                        ias.setSelection( x1, y1, x2, y2 );
    11341188                        ias.update();
    11351189                        this.setCropSelection(postid, ias.getSelection());
     1190                        this.currentCropSelection = ias.getSelection();
    11361191                }
    11371192        },
    11381193

  • src/wp-admin/includes/image-edit.php 

    diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php
index a91f082bb6..0ebe794315 100644
    a b function image_edit_apply_changes( $image, $changes ) { 
    628628                                        $w    = $size['width'];
    629629                                        $h    = $size['height'];
    630630
    631                                         $scale = 1 / _image_get_preview_ratio( $w, $h ); // Discard preview scaling.
     631                                        $scale = isset($sel->r) ? $sel->r : 1 / _image_get_preview_ratio( $w, $h ); // Discard preview scaling.
    632632                                        $image->crop( $sel->x * $scale, $sel->y * $scale, $sel->w * $scale, $sel->h * $scale );
    633633                                } else {
    634                                         $scale = 1 / _image_get_preview_ratio( imagesx( $image ), imagesy( $image ) ); // Discard preview scaling.
     634                                        $scale = isset($sel->r) ? $sel->r : 1 / _image_get_preview_ratio( imagesx( $image ), imagesy( $image ) ); // Discard preview scaling.
    635635                                        $image = _crop_image_resource( $image, $sel->x * $scale, $sel->y * $scale, $sel->w * $scale, $sel->h * $scale );
    636636                                }
    637637                                break;