--- a/wp/wp-admin/js/image-edit.js Fri Sep 05 18:40:08 2025 +0200
+++ b/wp/wp-admin/js/image-edit.js Fri Sep 05 18:52:52 2025 +0200
@@ -143,17 +143,12 @@
* @return {void}
*/
init : function(postid) {
- var t = this, old = $('#image-editor-' + t.postid),
- x = t.intval( $('#imgedit-x-' + postid).val() ),
- y = t.intval( $('#imgedit-y-' + postid).val() );
+ var t = this, old = $('#image-editor-' + t.postid);
if ( t.postid !== postid && old.length ) {
t.close(t.postid);
}
- t.hold.w = t.hold.ow = x;
- t.hold.h = t.hold.oh = y;
- t.hold.xy_ratio = x / y;
t.hold.sizer = parseFloat( $('#imgedit-sizer-' + postid).val() );
t.postid = postid;
$('#imgedit-response-' + postid).empty();
@@ -189,6 +184,29 @@
},
/**
+ * Calculate the image size and save it to memory.
+ *
+ * @since 6.7.0
+ *
+ * @memberof imageEdit
+ *
+ * @param {number} postid The post ID.
+ *
+ * @return {void}
+ */
+ calculateImgSize: function( postid ) {
+ var t = this,
+ x = t.intval( $( '#imgedit-x-' + postid ).val() ),
+ y = t.intval( $( '#imgedit-y-' + postid ).val() );
+
+ t.hold.w = t.hold.ow = x;
+ t.hold.h = t.hold.oh = y;
+ t.hold.xy_ratio = x / y;
+ t.hold.sizer = parseFloat( $( '#imgedit-sizer-' + postid ).val() );
+ t.currentCropSelection = null;
+ },
+
+ /**
* Toggles the wait/load icon in the editor.
*
* @since 2.9.0
@@ -278,14 +296,16 @@
* Navigate popup menu by arrow keys.
*
* @since 6.3.0
+ * @since 6.7.0 Added the event parameter.
*
* @memberof imageEdit
*
+ * @param {Event} event The key or click event.
* @param {HTMLElement} el The current element.
*
* @return {boolean} Always returns false.
*/
- browsePopup : function(el) {
+ browsePopup : function(event, el) {
var $el = $( el );
var $collection = $( el ).parent( '.imgedit-popup-menu' ).find( 'button' );
var $index = $collection.index( $el );
@@ -298,14 +318,14 @@
if ( $next === $last ) {
$next = 0;
}
- var $target = false;
+ var target = false;
if ( event.keyCode === 40 ) {
- $target = $collection.get( $next );
+ target = $collection.get( $next );
} else if ( event.keyCode === 38 ) {
- $target = $collection.get( $prev );
+ target = $collection.get( $prev );
}
- if ( $target ) {
- $target.focus();
+ if ( target ) {
+ target.focus();
event.preventDefault();
}
@@ -525,7 +545,7 @@
for ( n in history ) {
i = history[n];
if ( i.hasOwnProperty('c') ) {
- op[n] = { 'c': { 'x': i.c.x, 'y': i.c.y, 'w': i.c.w, 'h': i.c.h } };
+ op[n] = { 'c': { 'x': i.c.x, 'y': i.c.y, 'w': i.c.w, 'h': i.c.h, 'r': i.c.r } };
} else if ( i.hasOwnProperty('r') ) {
op[n] = { 'r': i.r.r };
} else if ( i.hasOwnProperty('f') ) {
@@ -860,6 +880,7 @@
if ( 'undefined' === typeof this.hold.sizer ) {
this.init( postid );
}
+ this.calculateImgSize( postid );
this.initCrop(postid, img, parent);
this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 0, 'width': img.innerWidth(), 'height': img.innerHeight() } );
@@ -909,8 +930,6 @@
var t = this,
selW = $('#imgedit-sel-width-' + postid),
selH = $('#imgedit-sel-height-' + postid),
- selX = $('#imgedit-start-x-' + postid),
- selY = $('#imgedit-start-y-' + postid),
$image = $( image ),
$img;
@@ -945,13 +964,16 @@
*
* @return {void}
*/
- parent.children().on( 'mousedown, touchstart', function(e){
- var ratio = false, sel, defRatio;
+ parent.children().on( 'mousedown touchstart', function(e) {
+ var ratio = false,
+ sel = t.iasapi.getSelection(),
+ cx = t.intval( $( '#imgedit-crop-width-' + postid ).val() ),
+ cy = t.intval( $( '#imgedit-crop-height-' + postid ).val() );
- if ( e.shiftKey ) {
- sel = t.iasapi.getSelection();
- defRatio = t.getSelRatio(postid);
- ratio = ( sel && sel.width && sel.height ) ? sel.width + ':' + sel.height : defRatio;
+ if ( cx && cy ) {
+ ratio = t.getSelRatio( postid );
+ } else if ( e.shiftKey && sel && sel.width && sel.height ) {
+ ratio = sel.width + ':' + sel.height;
}
t.iasapi.setOptions({
@@ -1000,11 +1022,17 @@
* @return {void}
*/
onSelectChange: function(img, c) {
- var sizer = imageEdit.hold.sizer;
- selW.val( imageEdit.round(c.width / sizer) );
- selH.val( imageEdit.round(c.height / sizer) );
- selX.val( imageEdit.round(c.x1 / sizer) );
- selY.val( imageEdit.round(c.y1 / sizer) );
+ var sizer = imageEdit.hold.sizer,
+ oldSel = imageEdit.currentCropSelection;
+
+ if ( oldSel != null && oldSel.width == c.width && oldSel.height == c.height ) {
+ return;
+ }
+
+ selW.val( Math.min( imageEdit.hold.w, imageEdit.round( c.width / sizer ) ) );
+ selH.val( Math.min( imageEdit.hold.h, imageEdit.round( c.height / sizer ) ) );
+
+ t.currentCropSelection = c;
}
});
},
@@ -1022,7 +1050,11 @@
* @return {boolean}
*/
setCropSelection : function(postid, c) {
- var sel;
+ var sel,
+ selW = $( '#imgedit-sel-width-' + postid ),
+ selH = $( '#imgedit-sel-height-' + postid ),
+ sizer = this.hold.sizer,
+ hold = this.hold;
c = c || 0;
@@ -1037,7 +1069,15 @@
return false;
}
- sel = { 'x': c.x1, 'y': c.y1, 'w': c.width, 'h': c.height };
+ // adjust the selection within the bounds of the image on 100% scale
+ var excessW = hold.w - ( Math.round( c.x1 / sizer ) + parseInt( selW.val() ) );
+ var excessH = hold.h - ( Math.round( c.y1 / sizer ) + parseInt( selH.val() ) );
+ var x = Math.round( c.x1 / sizer ) + Math.min( 0, excessW );
+ var y = Math.round( c.y1 / sizer ) + Math.min( 0, excessH );
+
+ // use 100% scaling to prevent rounding errors
+ sel = { 'r': 1, 'x': x, 'y': y, 'w': selW.val(), 'h': selH.val() };
+
this.setDisabled($('.imgedit-crop', '#imgedit-panel-' + postid), 1);
$('#imgedit-selection-' + postid).val( JSON.stringify(sel) );
},
@@ -1165,6 +1205,11 @@
}
this.closePopup(t);
this.addStep({ 'r': { 'r': angle, 'fw': this.hold.h, 'fh': this.hold.w }}, postid, nonce);
+
+ // Clear the selection fields after rotating.
+ $( '#imgedit-sel-width-' + postid ).val( '' );
+ $( '#imgedit-sel-height-' + postid ).val( '' );
+ this.currentCropSelection = null;
},
/**
@@ -1187,6 +1232,11 @@
}
this.closePopup(t);
this.addStep({ 'f': { 'f': axis, 'fw': this.hold.w, 'fh': this.hold.h }}, postid, nonce);
+
+ // Clear the selection fields after flipping.
+ $( '#imgedit-sel-width-' + postid ).val( '' );
+ $( '#imgedit-sel-height-' + postid ).val( '' );
+ this.currentCropSelection = null;
},
/**
@@ -1219,10 +1269,11 @@
}
// Clear the selection fields after cropping.
- $('#imgedit-sel-width-' + postid).val('');
- $('#imgedit-sel-height-' + postid).val('');
- $('#imgedit-start-x-' + postid).val('0');
- $('#imgedit-start-y-' + postid).val('0');
+ $( '#imgedit-sel-width-' + postid ).val( '' );
+ $( '#imgedit-sel-height-' + postid ).val( '' );
+ $( '#imgedit-start-x-' + postid ).val( '0' );
+ $( '#imgedit-start-y-' + postid ).val( '0' );
+ this.currentCropSelection = null;
},
/**
@@ -1312,6 +1363,8 @@
img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
+ this.currentCropSelection = null;
+
if ( false === this.validateNumeric( el ) ) {
return;
}
@@ -1335,18 +1388,19 @@
if ( x2 > imgw ) {
x1 = 0;
x2 = imgw;
- elX.val( Math.round( x2 / sizer ) );
+ elX.val( Math.min( this.hold.w, Math.round( x2 / sizer ) ) );
}
if ( y2 > imgh ) {
y1 = 0;
y2 = imgh;
- elY.val( Math.round( y2 / sizer ) );
+ elY.val( Math.min( this.hold.h, Math.round( y2 / sizer ) ) );
}
ias.setSelection( x1, y1, x2, y2 );
ias.update();
this.setCropSelection(postid, ias.getSelection());
+ this.currentCropSelection = ias.getSelection();
}
},