Workaround for Pixi MeshPipe error when changing vertex count near 200

re: #1636

This is a weird bug!
There is a crash in the Pixi MeshPipe code that occurs when we create a mesh and then
change its vertices from >200 to <200 or vice versa.
We will investigate this more, but for now if we detect this condition, just recreate the Mesh.

CHANGELOG.md

@@ -83,6 +83,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :bug: Bugfixes
 * [#1403], [#1580] Fix: Razed railways remain visible when historical objects are hidden
 * [#1493] Fix: When selecting multiple features, show 'multiple values' in the tag editor if not all features have the tag
+* [#1636] Workaround: Avoid crash in Pixi MeshPipe code when changing a polygon with mesh size around 200 vertices
 * [#1643] Fix: Click-drag in input text field should not affect background imagery offset
 * [iD#10573], [iD#10581] Fix: Unclickable Keyboard Shortcuts button when on last page of help content
 
@@ -126,6 +127,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#1623]: https://github.com/facebook/Rapid/issues/1623
 [#1629]: https://github.com/facebook/Rapid/issues/1629
 [#1630]: https://github.com/facebook/Rapid/issues/1630
+[#1636]: https://github.com/facebook/Rapid/issues/1636
 [#1637]: https://github.com/facebook/Rapid/issues/1637
 [#1638]: https://github.com/facebook/Rapid/issues/1638
 [#1642]: https://github.com/facebook/Rapid/issues/1642

modules/pixi/PixiFeaturePolygon.js

@@ -36,6 +36,7 @@ export class PixiFeaturePolygon extends AbstractFeature {
     this.type = 'polygon';
     this._ssrdata = null;
     this._bufferdata = null;
+    this._vertexCount = 0;  // we will watch these for Rapid#1636
 
     const lowRes = new PIXI.Sprite();
     lowRes.label = 'lowRes';
@@ -72,7 +73,7 @@ export class PixiFeaturePolygon extends AbstractFeature {
     strokes.visible = false;
     this.strokes = strokes;
 
-    this.container.addChild(lowRes, fill, mask, strokes);
+    this.container.addChild(lowRes, fill, strokes, mask);
 
     // Debug SSR
     // const debugSSR = new PIXI.Graphics();
@@ -212,7 +213,7 @@ export class PixiFeaturePolygon extends AbstractFeature {
 
     const lowRes = this.lowRes;
     const fill = this.fill;
-    const mask = this.mask;
+    let mask = this.mask;   // Rapid#1636, see below - we may need to replace the mask
     const maskSource = this.maskSource;
     const strokes = this.strokes;
 
@@ -394,6 +395,32 @@ export class PixiFeaturePolygon extends AbstractFeature {
 
         PIXI.buildContextBatches(graphicsContext, gpuContext);
 
+        // Rapid#1636 - A very weird bug!!
+        // There is a crash in the Pixi MeshPipe code that occurs when we create a mesh and then
+        //  change its vertices from >200 to <200 or vice versa.
+        // We will investigate this more, but for now if we detect this condition, just recreate the Mesh.
+
+        // console.log('id: ' + this.featureID
+        //  + ' coords: ' + this.geometry.outer.length
+        //  + ' indices: ' + gpuContext.geometryData.indices.length
+        //  + ' vertices: ' + gpuContext.geometryData.vertices.length
+        // );
+
+        const curr = gpuContext.geometryData.vertices.length;
+        const prev = this._vertexCount;
+        if (curr > 200 && prev <= 200 || curr <= 200 && prev > 200) {
+          this.container.removeChild(mask);
+          mask.destroy();
+
+          // console.log('REPLACING THE MASK');
+          mask = new PIXI.Mesh({ geometry: new PIXI.MeshGeometry() });
+          mask.label = 'mask';
+          mask.eventMode = 'static';
+          this.container.addChild(mask);
+          this.mask = mask;
+        }
+        this._vertexCount = curr;
+
         mask.geometry = new PIXI.MeshGeometry({
           indices:  new Uint32Array(gpuContext.geometryData.indices),
           positions: new Float32Array(gpuContext.geometryData.vertices),