Using "contain:outside" throws TypeError: Window.getComputedStyle: Argument 1 is not an object

[Jeroen-Cox]

Describe the bug

I'm using your library and I want to use the contain:outside setting. Whenever I zoom in and out I get an error in the console: TypeError: Window.getComputedStyle: Argument 1 is not an object

Your environment

• Version of panzoom: 4.5.1
• Browser and browser version: Firefox 110.0.1
• Using Vue 2

Expected behavior

No errors in console.

Actual behavior

One zoom in/out results in 99+ errors thrown ini the console.

Steps to reproduce

Vue.prototype.$panzoom = Panzoom(this.$refs.panZoom, { maxScale: 1, origin: '0,0', contain: 'outside' })

[timmywil]

Thanks for opening an issue. Please provide a small test case from codepen.io or jsbin.com. At first glance, make sure that this.$refs.panZoom is never undefined.

[Jeroen-Cox]

Hi, I have added undefined/null checks everywhere with respect to this.$refs.panZoom. From what I see in your code I feel the problem is in the getDimensions(elem) function. The constrainXY, constrainScale and zoomToPoint functions never pass the elem parameter to the getDimensions function.

[timmywil]

I think you mean that the constrain functions and zoomToPoint don't get passed elem (because they all do pass elem to getDimensions, but the former is unnecessary because elem is in scope. Just note that whatever you pass to Panzoom() will always and forever set what elem is. So, if this.$refs.panZoom is undefined in Panzoom(this.$refs.panZoom), there's no changing that later. The answer is to wait to instantiate Panzoom until this.$refs.panZoom is defined.

Hope that helps. If not, please make a small example.