Merge pull request #12180 from MoonE/text-builder-geometry-widths

Fix rendering of MultiPolygon text styles

src/ol/render/canvas/TextBuilder.js

@@ -232,7 +232,7 @@ class CanvasTextBuilder extends CanvasBuilder {
       }
       this.endGeometry(feature);
     } else {
-      const geometryWidths = textState.overflow ? null : [];
+      let geometryWidths = textState.overflow ? null : [];
       switch (geometryType) {
         case GeometryType.POINT:
         case GeometryType.MULTI_POINT:
@@ -275,6 +275,21 @@ class CanvasTextBuilder extends CanvasBuilder {
       if (end === begin) {
         return;
       }
+      if (
+        geometryWidths &&
+        (end - begin) / 2 !== flatCoordinates.length / stride
+      ) {
+        let beg = begin / 2;
+        geometryWidths = geometryWidths.filter((w, i) => {
+          const keep =
+            coordinates[(beg + i) * 2] === flatCoordinates[i * stride] &&
+            coordinates[(beg + i) * 2 + 1] === flatCoordinates[i * stride + 1];
+          if (!keep) {
+            --beg;
+          }
+          return keep;
+        });
+      }
 
       this.saveTextStates_();
 

test/spec/ol/render/canvas/textbuilder.test.js

@@ -320,4 +320,50 @@ describe('ol.render.canvas.TextBuilder', function () {
     expect(builder.instructions.length).to.be(3);
     executeInstructions(builder, 1, 2);
   });
+
+  it('generates a matching geometry widths array for multipolygons', function () {
+    const feature = new Feature(
+      new MultiPolygon([
+        [
+          [
+            [-180, -90],
+            [-180, 90],
+            [-50, 90],
+            [-50, -90],
+            [-180, -90],
+          ],
+        ],
+        [
+          [
+            [-50, -90],
+            [-50, 90],
+            [70, 90],
+            [70, -90],
+            [-50, -90],
+          ],
+        ],
+        [
+          [
+            [70, -90],
+            [70, 90],
+            [180, 90],
+            [180, -90],
+            [70, -90],
+          ],
+        ],
+      ])
+    );
+    const builder = new TextBuilder(1, [-50, -90, 70, 90], 1, 1);
+    builder.setTextStyle(
+      new Text({
+        text: 'text',
+      })
+    );
+    builder.drawText(feature.getGeometry(), feature);
+    expect(builder.coordinates).to.have.length(2);
+    expect(builder.instructions).to.have.length(3);
+    const geometryWidths = builder.instructions[1][24];
+    expect(geometryWidths).to.have.length(1);
+    expect(geometryWidths[0]).to.be(120);
+  });
 });