Add support for PixiJS@7

[mrshlle]

Hello,

I try to use this overlay and add it to a map on an ionic+angular app.

I install it through npm and import it as follow

...
import * as PIXI from 'pixi.js'
import 'leaflet-pixi-overlay'
import L from "leaflet"
...

To test, I have just made a copy of the triangle example and only changed the map element, which is already created and called with this like

...
pixiOverlay.addTo(this.map);
...

After doing this, when I open the map, I got the ERROR TypeError: setting getter-only property "resolution" error, located on the 257th line of the L.PixiOverlay.js file

...
if (!this._renderer.size || this._renderer.size.x !== size.x || this._renderer.size.y !== size.y) {
  if (this._renderer.gl) {
    this._renderer.resolution = this.options.resolution;  // <-- here
    if (this._renderer.rootRenderTarget) {
      this._renderer.rootRenderTarget.resolution = this.options.resolution;
    }
  }
...

Here the versions of the dependencies :

• "leaflet": "^1.9.3"
• "leaflet-pixi-overlay": "^1.8.2"
• "pixi.js": "7.0.4"

And Angular v14, Ionic v6

[mrshlle]

After some tries to make it work, it appears that pixi.js needed to be downgrade. With v6.5.8, everything is fine, just the following warning :

PixiJS Deprecation Warning: Option transparent is deprecated, please use backgroundAlpha instead.
Deprecated since v6.0.0

[manubb]

Thanks for reporting. I haven't upgraded the lib for supporting PixiJS@7. Will try to do it by the end of the year.

[na-ji]

We might want to re-open this issue then, to have at least one issue tracking the support of pixi.js v7+

[manubb]

I have released leaflet-pixi-overlay@1.8.4 that should support last version of pixi. Can you check if everything is fine ?

[nigelPam]

I have tried out 1.8.4, and it works fine with PIXI 7.1.2. The main issue was the transparency, which you have fixed. The other issue is the loading. I am now using the PIXI.Assets.load().

I am using Vue3, which introduces a lot of other issues, but sorted out await/async for the loading in Vue3. I try to have a very light touch on Vue3, otherwise everything falls apart.

BTW, I am also using the d3 quadtree, seems to work very week and very fast.

[nigelPam]

Dont weant to reopen, but v7 deprecates renderer.plugins.interaction - just a warning at present, it probably has various implications. as the interaction manager is deprecated.

I doubt this is a 5 min job.

https://github.com/pixijs/pixijs/wiki/v7-Migration-Guide

Let me open a new issue.