Fixed Avatar Editor - avatar resets after move + cancel

[Jon W]

Noticed a very annoying bug (cost me several hours of work because I thought it was me being slow) when editing avatars.

To replicate:

1. Open the Avatar Editor (i.e., go to Account > Personal Details > Avatar);
2. If you avatar is perfectly square, upload an avatar that is not perfectly square and click the 'Close' button;
   OR
   If your avatar is not perfectly square, drag the avatar to any position other than the top-left.
3. Without refreshing the page, load the Avatar Editor again -- the avatar will have moved from the position you dragged it to.

This is due to the following pieces of code in avatar_editor.js:
In the __construct method:

this.cropX = this.$outputX.val();
this.cropY = this.$outputY.val();

In the updateEditor method:

// reset the crop position
this.cropX = ajaxData.cropX * -1;
this.cropY = ajaxData.cropY * -1;
this.$outputX.val(ajaxData.cropX);
this.$outputY.val(ajaxData.cropY);

Note that in the former this.cropX and this.cropY are the same values as this.$outputX.val and this.$outputY.val, respectively, whereas in the latter the values are inverted.
As a result, in the updateEditor function the setPosition method is called without inverting the values:

this.setPosition(this.cropX, this.cropY, false);

However, in the resetForm method, the inverse values are used:

this.setPosition(this.cropX * -1, this.cropY * -1, false);

... and this produces the above bug.
To fix, replace the code in the __construct method with:

this.cropX = this.$outputX.val() * -1;
this.cropY = this.$outputY.val() * -1;

and the code in the resetForm method with:

this.setPosition(this.cropX, this.cropY, false);

Note that the above fix will be included in my Avatar Essentials add-on that I will be releasing shortly...

 

[Mike]

Very sneaky - fixed now.