getAngle command errors when image made small

[bencote]

I can get the getAngle command to throw an error when I scale the image very small on the map. In the code below, the slice command error because the matrix3d style is empty. I wrapped it in a try/catch to suppress the error but i still consider the code to be broken...

                getAngle: function getAngle() {
                    try {
                        var unit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'deg';
                        var matrix = this.getElement().style[L.DomUtil.TRANSFORM].split('matrix3d')[1].slice(1, -1).split(',');
                        var row0x = matrix[0];
                        var row0y = matrix[1];
                        var row1x = matrix[4];
                        var row1y = matrix[5];
                        var determinant = row0x * row1y - row0y * row1x;
                        var angle = L.TrigUtil.calcAngle(row0x, row0y, 'rad');
                        if (determinant < 0) {
                            angle += angle < 0 ? Math.PI : -Math.PI;
                        }
                        if (angle < 0) {
                            angle = 2 * Math.PI + angle;
                        }
                        return unit === 'deg' ? Math.round(L.TrigUtil.radiansToDegrees(angle)) : L.Util.formatNum(angle, 2);
                    }
                    catch {
                        return 0;
                    }
                },

Describe the bug:
debug output:

TypeError: Cannot read properties of undefined (reading 'slice')
at NewClass.getAngle (DistortableImageOverlay.js:355:28)
at NewClass._reset (DistortableImageOverlay.js:493:1)
at NewClass.setBounds (ImageOverlay.js:144:9)
at NewClass._initImageDimensions (DistortableImageOverlay.js:140:15)
at HTMLImageElement. (DistortableImageOverlay.js:47:36)
at HTMLImageElement.handler (DomEvent.js:108:13)

Reproduce the behavior:
Steps to reproduce the behavior. (ex. 1. Go to... 2. Click on... 3. See error...)

Browser, version, and operating system:

• Browser [e.g. chrome, safari] -
• Version [e.g. 22] -
• Platform: [e.g. iOS, windows] -

[Swarnlataaa]

It seems that the slice method is throwing an error because the matrix3d style is empty. Wrapping the code in a try/catch block is currently suppressing the error, but the code is still considered broken since it relies on accessing a property of an undefined value.

To address the issue, you can modify the code to handle the case when the matrix3d style is empty or undefined.

[andelatunjic]

I'm also getting this slice error in DistortableImageOverlay.js file.

TypeError: Cannot read properties of undefined (reading 'slice')
at NewClass.getAngle (DistortableImageOverlay.js:321:1)
at NewClass._reset (DistortableImageOverlay.js:457:1)
at NewClass.setBounds (ImageOverlay.js:144:1)
at NewClass._initImageDimensions (DistortableImageOverlay.js:128:1)
at HTMLImageElement.eval (DistortableImageOverlay.js:40:1)
at HTMLImageElement.handler (DomEvent.js:108:1)

getAngle(unit = 'deg') {
var matrix = this.getElement().style[L.DomUtil.TRANSFORM]
.split('matrix3d')[1]
.slice(1, -1)
.split(',');
......
},

At the end matrix is not undefined and my code will work just fine, but this error is annoying because it'll pop up every time. Is there something I could do in my code to prevent this?