Support Rotation of image with library

[hartbert95]

Cases:

1. The Zooming is working fine for the 0 deg rotation rendered image
2. Once i rotate the image, the lens location is still stick to the same

Problem:

1. How to integrate library with the rotated image？

[wittlock]

Could you perhaps post a small example that is showing the odd behavior that I can experiment with to find a solution? I'm not quite sure I understand what it is you're asking for, but if I can run it and see it for myself that would help.

[rendlp]

I believe what OP means is that when a image is rotated, the calculation which calculates the cursor location is off. This messes up the lens + cursor relationship (I am facing a similar issue).

For example, if I rotate a image 180 degrees, the function which calculates the cursor position is now flipped. So if I zoom in on a 180 degree rotated image and move my cursor to the top right, the lens will move to the bottom left instead.

I'm not 100% sure, but I believe this issue is related to setZoomPosition().

[rendlp]

For image rotation I took a vanilla JS approach.

Here is the CSS code example:

public rotateImage180(rotate180: any) {
    rotate180 = document.querySelectorAll('#image-div');
    let i: any = null;
    for (i = 0; i < rotate180.length; i++) {
      rotate180[i].style = `
        transform: rotateY(0deg) rotate(180deg);
        transition: ease-in .3s;
        transform-origin: center center;
        padding: 8px;`;
    }
  }

And another:

public rotateImageRight(rightRotate: any) {
    rightRotate = document.querySelectorAll('#image-div');
    let i: any = null;
    for (i = 0; i < rightRotate.length; i++) {
      rightRotate[i].style = `
        transform: rotateY(0deg) rotate(90deg);
        transition: ease-in .3s;
        transform-origin: center center;
        margin-left: 170px;
        margin-right: 150px;
        padding: 6px;`;
    }
  }

[rendlp]

I believe I have narrowed the issue down to the following chunk of code:

private calculateImageAndLensPosition() {
        let lensLeftMod = 0;
        let lensTopMod = 0;

        if (this.enableLens) {
            lensLeftMod = this.lensLeft = this.latestMouseLeft - this.lensWidth / 2;
            lensTopMod = this.lensTop = this.latestMouseTop - this.lensHeight / 2;
        }

        this.fullImageLeft = (this.latestMouseLeft * -this.xRatio) - lensLeftMod;
        this.fullImageTop = (this.latestMouseTop * -this.yRatio) - lensTopMod;
    }

When calculateImageAndLensPosition() is called, the following section will execute if the zoom lens has been enabled:

 if (this.enableLens) {
            lensLeftMod = this.lensLeft = this.latestMouseLeft - this.lensWidth / 2;
            lensTopMod = this.lensTop = this.latestMouseTop - this.lensHeight / 2;
        }

This will calculate the top and left position of the user's mouse if the zoom lens has been enabled. However, if the image and/or image container has been rotated by any degree, the calculation parameters will not adjust for this change and will inversely calculate the user's mouse position.

I have created a temporary fix/hack by implementing the following changes to my own code:

public rotateImage180(rotateLens180: any, rotateImg180: any) {
    rotateLens180 = document.querySelectorAll('.ngxImageZoomFull');
    rotateImg180 = document.querySelectorAll('.ngxImageZoomThumbnail');
    let i: any = null;
    for (i = 0; i < rotateImg180.length; i++) {
      rotateLens180[i].style = `
        transform: rotateY(0deg) rotate(-180deg);`;
      rotateImg180[i].style = `
        transform: rotateY(0deg) rotate(-180deg);
        transition: ease-in .3s;
        transform-origin: center center;`;
    }
  }

I do not think this is a good long-term solution so I will continue researching other possibilities in the meantime. If you have any recommendations they would be much appreciated!

Thanks

EDIT: Grammar fixes + code clean up