ol 9.0.0-dev.1707154322322 → 9.0.0-dev.1707413332477

package/render/canvas/ExecutorGroup.js

@@ -17,7 +17,28 @@ import {transform2D} from '../../geom/flat/transform.js';
  * @const
  * @type {Array<import("../canvas.js").BuilderType>}
  */
-const ORDER = ['Polygon', 'Circle', 'LineString', 'Image', 'Text', 'Default'];
+export const ALL = [
+  'Polygon',
+  'Circle',
+  'LineString',
+  'Image',
+  'Text',
+  'Default',
+];
+
+/**
+ * @const
+ * @type {Array<import("../canvas.js").BuilderType>}
+ */
+export const DECLUTTER = ['Image', 'Text'];
+
+/**
+ * @const
+ * @type {Array<import("../canvas.js").BuilderType>}
+ */
+export const NON_DECLUTTER = ALL.filter(
+  (builderType) => !DECLUTTER.includes(builderType),
+);
 
 class ExecutorGroup {
   /**
@@ -31,6 +52,7 @@ class ExecutorGroup {
    * @param {!Object<string, !Object<import("../canvas.js").BuilderType, import("../canvas.js").SerializableInstructions>>} allInstructions
    * The serializable instructions.
    * @param {number} [renderBuffer] Optional rendering buffer.
+   * @param {boolean} [deferredRendering] Enable deferred rendering with renderDeferred().
    */
   constructor(
     maxExtent,
@@ -39,6 +61,7 @@ class ExecutorGroup {
     overlaps,
     allInstructions,
     renderBuffer,
+    deferredRendering,
   ) {
     /**
      * @private
@@ -72,7 +95,7 @@ class ExecutorGroup {
 
     /**
      * @private
-     * @type {!Object<string, !Object<import("../canvas.js").BuilderType, import("./Executor").default>>}
+     * @type {!Object<string, !Object<string, import("./Executor").default>>}
      */
     this.executorsByZIndex_ = {};
 
@@ -88,7 +111,18 @@ class ExecutorGroup {
      */
     this.hitDetectionTransform_ = createTransform();
 
-    this.createExecutors_(allInstructions);
+    /**
+     * @private
+     * @type {CanvasRenderingContext2D}
+     */
+    this.renderedContext_ = null;
+
+    /**
+     * @type {Array<Array<import("./ZIndexContext.js").default>>}
+     */
+    this.deferredZIndexContexts_ = [];
+
+    this.createExecutors_(allInstructions, deferredRendering);
   }
 
   /**
@@ -108,9 +142,10 @@ class ExecutorGroup {
   /**
    * Create executors and populate them using the provided instructions.
    * @private
-   * @param {!Object<string, !Object<import("../canvas.js").BuilderType, import("../canvas.js").SerializableInstructions>>} allInstructions The serializable instructions
+   * @param {!Object<string, !Object<string, import("../canvas.js").SerializableInstructions>>} allInstructions The serializable instructions
+   * @param {boolean} deferredRendering Enable deferred rendering.
    */
-  createExecutors_(allInstructions) {
+  createExecutors_(allInstructions, deferredRendering) {
     for (const zIndex in allInstructions) {
       let executors = this.executorsByZIndex_[zIndex];
       if (executors === undefined) {
@@ -125,6 +160,7 @@ class ExecutorGroup {
           this.pixelRatio_,
           this.overlaps_,
           instructions,
+          deferredRendering,
         );
       }
     }
@@ -258,8 +294,8 @@ class ExecutorGroup {
     for (i = zs.length - 1; i >= 0; --i) {
       const zIndexKey = zs[i].toString();
       executors = this.executorsByZIndex_[zIndexKey];
-      for (j = ORDER.length - 1; j >= 0; --j) {
-        builderType = ORDER[j];
+      for (j = ALL.length - 1; j >= 0; --j) {
+        builderType = ALL[j];
         executor = executors[builderType];
         if (executor !== undefined) {
           result = executor.executeHitDetection(
@@ -304,18 +340,19 @@ class ExecutorGroup {
   }
 
   /**
-   * @param {CanvasRenderingContext2D} context Context.
-   * @param {number} contextScale Scale of the context.
+   * @param {CanvasRenderingContext2D} targetContext Context.
+   * @param {import('../../size.js').Size} scaledCanvasSize Scale of the context.
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
    * @param {boolean} snapToPixel Snap point symbols and test to integer pixel.
    * @param {Array<import("../canvas.js").BuilderType>} [builderTypes] Ordered replay types to replay.
-   *     Default is {@link module:ol/render/replay~ORDER}
-   * @param {import("rbush").default} [declutterTree] Declutter tree.
+   *     Default is {@link module:ol/render/replay~ALL}
+   * @param {import("rbush").default|null} [declutterTree] Declutter tree.
+   *     When set to null, no decluttering is done, even when the executor group has a `ZIndexContext`.
    */
   execute(
-    context,
-    contextScale,
+    targetContext,
+    scaledCanvasSize,
     transform,
     viewRotation,
     snapToPixel,
@@ -326,14 +363,7 @@ class ExecutorGroup {
     const zs = Object.keys(this.executorsByZIndex_).map(Number);
     zs.sort(ascending);
 
-    // setup clipping so that the parts of over-simplified geometries are not
-    // visible outside the current extent when panning
-    if (this.maxExtent_) {
-      context.save();
-      this.clip(context, transform);
-    }
-
-    builderTypes = builderTypes ? builderTypes : ORDER;
+    builderTypes = builderTypes ? builderTypes : ALL;
     let i, ii, j, jj, replays, replay;
     if (declutterTree) {
       zs.reverse();
@@ -345,21 +375,62 @@ class ExecutorGroup {
         const builderType = builderTypes[j];
         replay = replays[builderType];
         if (replay !== undefined) {
+          const zIndexContext =
+            declutterTree === null ? undefined : replay.getZIndexContext();
+          const context = zIndexContext
+            ? zIndexContext.getContext()
+            : targetContext;
+          const requireClip =
+            this.maxExtent_ &&
+            builderType !== 'Image' &&
+            builderType !== 'Text';
+          if (requireClip) {
+            context.save();
+            // setup clipping so that the parts of over-simplified geometries are not
+            // visible outside the current extent when panning
+            this.clip(context, transform);
+          }
           replay.execute(
             context,
-            contextScale,
+            scaledCanvasSize,
             transform,
             viewRotation,
             snapToPixel,
             declutterTree,
           );
+          if (requireClip) {
+            context.restore();
+          }
+          if (zIndexContext) {
+            zIndexContext.offset();
+            const z = zs[i];
+            if (!this.deferredZIndexContexts_[z]) {
+              this.deferredZIndexContexts_[z] = [];
+            }
+            this.deferredZIndexContexts_[z].push(zIndexContext);
+          }
         }
       }
     }
 
-    if (this.maxExtent_) {
-      context.restore();
-    }
+    this.renderedContext_ = targetContext;
+  }
+
+  getDeferredZIndexContexts() {
+    return this.deferredZIndexContexts_;
+  }
+
+  getRenderedContext() {
+    return this.renderedContext_;
+  }
+
+  renderDeferred() {
+    this.deferredZIndexContexts_.forEach((zIndexContexts) => {
+      zIndexContexts.forEach((zIndexContext) => {
+        zIndexContext.draw(this.renderedContext_); // FIXME Pass clip to replay for temporarily enabling clip
+        zIndexContext.clear();
+      });
+    });
   }
 }
 

package/render/canvas/ImageBuilder.d.ts

@@ -67,7 +67,7 @@ declare class CanvasImageBuilder extends CanvasBuilder {
     private width_;
     /**
      * @private
-     * @type {"declutter"|"obstacle"|"none"|undefined}
+     * @type {import('../../style/Style.js').DeclutterMode}
      */
     private declutterMode_;
     /**

package/render/canvas/ImageBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBuilder.d.ts","sourceRoot":"","sources":["ImageBuilder.js"],"names":[],"mappings":";AAMA;IAUI;;;OAGG;IACH,2BAA8B;IAE9B;;;OAGG;IACH,eAAkB;IAElB;;;OAGG;IACH,yBAAiC;IAEjC;;;OAGG;IACH,iBAAyB;IAEzB;;;OAGG;IACH,iBAAyB;IAEzB;;;OAGG;IACH,gBAAwB;IAExB;;;OAGG;IACH,iBAAyB;IAEzB;;;OAGG;IACH,iBAAyB;IAEzB;;;OAGG;IACH,iBAAyB;IAEzB;;;OAGG;IACH,wBAAgC;IAEhC;;;OAGG;IACH,kBAA0B;IAE1B;;;OAGG;IACH,eAAuB;IAEvB;;;OAGG;IACH,eAAuB;IAEvB;;;OAGG;IACH,uBAA+B;IAE/B;;;;OAIG;IACH,gCAAwC;IA2I1C;;;OAGG;IACH,0BAHW,OAAO,sBAAsB,EAAE,OAAO,0BAsBhD;CACF;0BAzQyB,cAAc"}
+{"version":3,"file":"ImageBuilder.d.ts","sourceRoot":"","sources":["ImageBuilder.js"],"names":[],"mappings":";AAOA;IAUI;;;OAGG;IACH,2BAA8B;IAE9B;;;OAGG;IACH,eAAkB;IAElB;;;OAGG;IACH,yBAAiC;IAEjC;;;OAGG;IACH,iBAAyB;IAEzB;;;OAGG;IACH,iBAAyB;IAEzB;;;OAGG;IACH,gBAAwB;IAExB;;;OAGG;IACH,iBAAyB;IAEzB;;;OAGG;IACH,iBAAyB;IAEzB;;;OAGG;IACH,iBAAyB;IAEzB;;;OAGG;IACH,wBAAgC;IAEhC;;;OAGG;IACH,kBAA0B;IAE1B;;;OAGG;IACH,eAAuB;IAEvB;;;OAGG;IACH,eAAuB;IAEvB;;;OAGG;IACH,uBAA+B;IAE/B;;;;OAIG;IACH,gCAAwC;IAgK1C;;;OAGG;IACH,0BAHW,OAAO,sBAAsB,EAAE,OAAO,0BAsBhD;CACF;0BA/RyB,cAAc"}

package/render/canvas/ImageBuilder.js

@@ -3,6 +3,7 @@
  */
 import CanvasBuilder from './Builder.js';
 import CanvasInstruction from './Instruction.js';
+import {containsCoordinate} from '../../extent.js';
 
 class CanvasImageBuilder extends CanvasBuilder {
   /**
@@ -94,7 +95,7 @@ class CanvasImageBuilder extends CanvasBuilder {
 
     /**
      * @private
-     * @type {"declutter"|"obstacle"|"none"|undefined}
+     * @type {import('../../style/Style.js').DeclutterMode}
      */
     this.declutterMode_ = undefined;
 
@@ -109,12 +110,17 @@ class CanvasImageBuilder extends CanvasBuilder {
   /**
    * @param {import("../../geom/Point.js").default|import("../Feature.js").default} pointGeometry Point geometry.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
+   * @param {number} [index] Render order index.
    */
-  drawPoint(pointGeometry, feature) {
-    if (!this.image_) {
+  drawPoint(pointGeometry, feature, index) {
+    if (
+      !this.image_ ||
+      (this.maxExtent &&
+        !containsCoordinate(this.maxExtent, pointGeometry.getFlatCoordinates()))
+    ) {
       return;
     }
-    this.beginGeometry(pointGeometry, feature);
+    this.beginGeometry(pointGeometry, feature, index);
     const flatCoordinates = pointGeometry.getFlatCoordinates();
     const stride = pointGeometry.getStride();
     const myBegin = this.coordinates.length;
@@ -166,16 +172,32 @@ class CanvasImageBuilder extends CanvasBuilder {
   /**
    * @param {import("../../geom/MultiPoint.js").default|import("../Feature.js").default} multiPointGeometry MultiPoint geometry.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
+   * @param {number} [index] Render order index.
    */
-  drawMultiPoint(multiPointGeometry, feature) {
+  drawMultiPoint(multiPointGeometry, feature, index) {
     if (!this.image_) {
       return;
     }
-    this.beginGeometry(multiPointGeometry, feature);
+    this.beginGeometry(multiPointGeometry, feature, index);
     const flatCoordinates = multiPointGeometry.getFlatCoordinates();
-    const stride = multiPointGeometry.getStride();
+    const filteredFlatCoordinates = [];
+    for (
+      let i = 0, ii = flatCoordinates.length;
+      i < ii;
+      i += multiPointGeometry.getStride()
+    ) {
+      if (
+        !this.maxExtent ||
+        containsCoordinate(this.maxExtent, flatCoordinates.slice(i, i + 2))
+      ) {
+        filteredFlatCoordinates.push(
+          flatCoordinates[i],
+          flatCoordinates[i + 1],
+        );
+      }
+    }
     const myBegin = this.coordinates.length;
-    const myEnd = this.appendFlatPointCoordinates(flatCoordinates, stride);
+    const myEnd = this.appendFlatPointCoordinates(filteredFlatCoordinates, 2);
     this.instructions.push([
       CanvasInstruction.DRAW_IMAGE,
       myBegin,

package/render/canvas/Immediate.d.ts

@@ -249,6 +249,17 @@ declare class CanvasImmediateRenderer extends VectorContext {
      * @api
      */
     drawGeometry(geometry: import("../../geom/Geometry.js").default | import("../Feature.js").default): void;
+    /**
+     * Render a feature into the canvas.  Note that any `zIndex` on the provided
+     * style will be ignored - features are rendered immediately in the order that
+     * this method is called.  If you need `zIndex` support, you should be using an
+     * {@link module:ol/layer/Vector~VectorLayer} instead.
+     *
+     * @param {import("../../Feature.js").default} feature Feature.
+     * @param {import("../../style/Style.js").default} style Style.
+     * @api
+     */
+    drawFeature(feature: import("../../Feature.js").default, style: import("../../style/Style.js").default): void;
     /**
      * Render a GeometryCollection to the canvas.  Rendering is immediate and
      * uses the current styles appropriate for each geometry in the collection.

package/render/canvas/Immediate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Immediate.d.ts","sourceRoot":"","sources":["Immediate.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"Immediate.d.ts","sourceRoot":"","sources":["Immediate.js"],"names":[],"mappings":"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"}

package/render/canvas/LineStringBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineStringBuilder.d.ts","sourceRoot":"","sources":["LineStringBuilder.js"],"names":[],"mappings":";AAUA;IAWE;;;;;;;OAOG;IACH,6BAkBC;CAiHF;0BA7JyB,cAAc"}
+{"version":3,"file":"LineStringBuilder.d.ts","sourceRoot":"","sources":["LineStringBuilder.js"],"names":[],"mappings":";AAUA;IAWE;;;;;;;OAOG;IACH,6BAkBC;CAmHF;0BA/JyB,cAAc"}

package/render/canvas/LineStringBuilder.js

@@ -50,8 +50,9 @@ class CanvasLineStringBuilder extends CanvasBuilder {
   /**
    * @param {import("../../geom/LineString.js").default|import("../Feature.js").default} lineStringGeometry Line string geometry.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
+   * @param {number} [index] Render order index.
    */
-  drawLineString(lineStringGeometry, feature) {
+  drawLineString(lineStringGeometry, feature, index) {
     const state = this.state;
     const strokeStyle = state.strokeStyle;
     const lineWidth = state.lineWidth;
@@ -59,7 +60,7 @@ class CanvasLineStringBuilder extends CanvasBuilder {
       return;
     }
     this.updateStrokeStyle(state, this.applyStroke);
-    this.beginGeometry(lineStringGeometry, feature);
+    this.beginGeometry(lineStringGeometry, feature, index);
     this.hitDetectionInstructions.push(
       [
         CanvasInstruction.SET_STROKE_STYLE,
@@ -88,8 +89,9 @@ class CanvasLineStringBuilder extends CanvasBuilder {
   /**
    * @param {import("../../geom/MultiLineString.js").default|import("../Feature.js").default} multiLineStringGeometry MultiLineString geometry.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
+   * @param {number} [index] Render order index.
    */
-  drawMultiLineString(multiLineStringGeometry, feature) {
+  drawMultiLineString(multiLineStringGeometry, feature, index) {
     const state = this.state;
     const strokeStyle = state.strokeStyle;
     const lineWidth = state.lineWidth;
@@ -97,7 +99,7 @@ class CanvasLineStringBuilder extends CanvasBuilder {
       return;
     }
     this.updateStrokeStyle(state, this.applyStroke);
-    this.beginGeometry(multiLineStringGeometry, feature);
+    this.beginGeometry(multiLineStringGeometry, feature, index);
     this.hitDetectionInstructions.push(
       [
         CanvasInstruction.SET_STROKE_STYLE,

package/render/canvas/PolygonBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PolygonBuilder.d.ts","sourceRoot":"","sources":["PolygonBuilder.js"],"names":[],"mappings":";AAiBA;IAWE;;;;;;;OAOG;IACH,8BA0CC;IAuKD;;OAEG;IACH,6BASC;CACF;0BA/PyB,cAAc"}
+{"version":3,"file":"PolygonBuilder.d.ts","sourceRoot":"","sources":["PolygonBuilder.js"],"names":[],"mappings":";AAiBA;IAWE;;;;;;;OAOG;IACH,8BA0CC;IA0KD;;OAEG;IACH,6BASC;CACF;0BAlQyB,cAAc"}

package/render/canvas/PolygonBuilder.js

@@ -81,8 +81,9 @@ class CanvasPolygonBuilder extends CanvasBuilder {
   /**
    * @param {import("../../geom/Circle.js").default} circleGeometry Circle geometry.
    * @param {import("../../Feature.js").default} feature Feature.
+   * @param {number} [index] Render order index.
    */
-  drawCircle(circleGeometry, feature) {
+  drawCircle(circleGeometry, feature, index) {
     const state = this.state;
     const fillStyle = state.fillStyle;
     const strokeStyle = state.strokeStyle;
@@ -90,7 +91,7 @@ class CanvasPolygonBuilder extends CanvasBuilder {
       return;
     }
     this.setFillStrokeStyles_();
-    this.beginGeometry(circleGeometry, feature);
+    this.beginGeometry(circleGeometry, feature, index);
     if (state.fillStyle !== undefined) {
       this.hitDetectionInstructions.push([
         CanvasInstruction.SET_FILL_STYLE,
@@ -137,8 +138,9 @@ class CanvasPolygonBuilder extends CanvasBuilder {
   /**
    * @param {import("../../geom/Polygon.js").default|import("../Feature.js").default} polygonGeometry Polygon geometry.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
+   * @param {number} [index] Render order index.
    */
-  drawPolygon(polygonGeometry, feature) {
+  drawPolygon(polygonGeometry, feature, index) {
     const state = this.state;
     const fillStyle = state.fillStyle;
     const strokeStyle = state.strokeStyle;
@@ -146,7 +148,7 @@ class CanvasPolygonBuilder extends CanvasBuilder {
       return;
     }
     this.setFillStrokeStyles_();
-    this.beginGeometry(polygonGeometry, feature);
+    this.beginGeometry(polygonGeometry, feature, index);
     if (state.fillStyle !== undefined) {
       this.hitDetectionInstructions.push([
         CanvasInstruction.SET_FILL_STYLE,
@@ -180,8 +182,9 @@ class CanvasPolygonBuilder extends CanvasBuilder {
   /**
    * @param {import("../../geom/MultiPolygon.js").default} multiPolygonGeometry MultiPolygon geometry.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
+   * @param {number} [index] Render order index.
    */
-  drawMultiPolygon(multiPolygonGeometry, feature) {
+  drawMultiPolygon(multiPolygonGeometry, feature, index) {
     const state = this.state;
     const fillStyle = state.fillStyle;
     const strokeStyle = state.strokeStyle;
@@ -189,7 +192,7 @@ class CanvasPolygonBuilder extends CanvasBuilder {
       return;
     }
     this.setFillStrokeStyles_();
-    this.beginGeometry(multiPolygonGeometry, feature);
+    this.beginGeometry(multiPolygonGeometry, feature, index);
     if (state.fillStyle !== undefined) {
       this.hitDetectionInstructions.push([
         CanvasInstruction.SET_FILL_STYLE,

package/render/canvas/TextBuilder.d.ts

@@ -93,6 +93,10 @@ declare class CanvasTextBuilder extends CanvasBuilder {
      * @type {string}
      */
     private strokeKey_;
+    /**
+     * @type {import('../../style/Style.js').DeclutterMode}
+     */
+    declutterMode_: import('../../style/Style.js').DeclutterMode;
     /**
      * Data shared with an image builder for combined decluttering.
      * @private

package/render/canvas/TextBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextBuilder.d.ts","sourceRoot":"","sources":["TextBuilder.js"],"names":[],"mappings":"AAyBA;;;GAGG;AACH,yBAFU;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC;IAAC,KAAK,CAAC,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAC;IAAC,WAAW,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,CAAC,CAAA;CAAC,CAYzH;;AAEF;IAUI;;;OAGG;IACH,gBAAmB;IAEnB;;;OAGG;IACH,cAAe;IAEf;;;OAGG;IACH,qBAAqB;IAErB;;;OAGG;IACH,qBAAqB;IAErB;;;OAGG;IACH,4BAAoC;IAEpC;;;OAGG;IACH,sBAAsB;IAEtB;;;OAGG;IACH,uBAA0B;IAE1B;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,SAAS;MAEtC;IAGpB;;;OAGG;IACH,yBAA4B;IAE5B;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,WAAW;MAEtC;IAEtB;;;OAGG;IACH,mBAAsE;IAEtE;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,SAAS;MAEtC;IAEpB;;;OAGG;IACH,iBAAkB;IAElB;;;OAGG;IACH,iBAAkB;IAElB;;;OAGG;IACH,mBAAoB;IAEpB;;;;OAIG;IACH,gCAAwC;IAkT1C;;OAEG;IACH,wBAqCC;IAED;;;;OAIG;IACH,mBAkDC;IAED;;;OAGG;IACH,wBAHW,OAAO,qBAAqB,EAAE,OAAO,0BA6G/C;CACF;0BAjpByB,cAAc"}
+{"version":3,"file":"TextBuilder.d.ts","sourceRoot":"","sources":["TextBuilder.js"],"names":[],"mappings":"AAyBA;;;GAGG;AACH,yBAFU;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC;IAAC,KAAK,CAAC,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAC;IAAC,WAAW,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,CAAC,CAAA;CAAC,CAYzH;;AAEF;IAUI;;;OAGG;IACH,gBAAmB;IAEnB;;;OAGG;IACH,cAAe;IAEf;;;OAGG;IACH,qBAAqB;IAErB;;;OAGG;IACH,qBAAqB;IAErB;;;OAGG;IACH,4BAAoC;IAEpC;;;OAGG;IACH,sBAAsB;IAEtB;;;OAGG;IACH,uBAA0B;IAE1B;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,SAAS;MAEtC;IAGpB;;;OAGG;IACH,yBAA4B;IAE5B;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,WAAW;MAEtC;IAEtB;;;OAGG;IACH,mBAAsE;IAEtE;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,SAAS;MAEtC;IAEpB;;;OAGG;IACH,iBAAkB;IAElB;;;OAGG;IACH,iBAAkB;IAElB;;;OAGG;IACH,mBAAoB;IAEpB;;OAEG;IACH,gBAFU,OAAO,sBAAsB,EAAE,aAAa,CAEvB;IAE/B;;;;OAIG;IACH,gCAAwC;IAmT1C;;OAEG;IACH,wBAqCC;IAED;;;;OAIG;IACH,mBAoDC;IAED;;;OAGG;IACH,wBAHW,OAAO,qBAAqB,EAAE,OAAO,0BA8G/C;CACF;0BA1pByB,cAAc"}

package/render/canvas/TextBuilder.js

@@ -137,6 +137,11 @@ class CanvasTextBuilder extends CanvasBuilder {
      */
     this.strokeKey_ = '';
 
+    /**
+     * @type {import('../../style/Style.js').DeclutterMode}
+     */
+    this.declutterMode_ = undefined;
+
     /**
      * Data shared with an image builder for combined decluttering.
      * @private
@@ -159,8 +164,9 @@ class CanvasTextBuilder extends CanvasBuilder {
   /**
    * @param {import("../../geom/SimpleGeometry.js").default|import("../Feature.js").default} geometry Geometry.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
+   * @param {number} [index] Render order index.
    */
-  drawText(geometry, feature) {
+  drawText(geometry, feature, index) {
     const fillState = this.textFillState_;
     const strokeState = this.textStrokeState_;
     const textState = this.textState_;
@@ -182,7 +188,7 @@ class CanvasTextBuilder extends CanvasBuilder {
         geometryType == 'Polygon' ||
         geometryType == 'MultiPolygon')
     ) {
-      if (!intersects(this.getBufferedMaxExtent(), geometry.getExtent())) {
+      if (!intersects(this.maxExtent, geometry.getExtent())) {
         return;
       }
       let ends;
@@ -207,7 +213,7 @@ class CanvasTextBuilder extends CanvasBuilder {
           ends.push(endss[i][0]);
         }
       }
-      this.beginGeometry(geometry, feature);
+      this.beginGeometry(geometry, feature, index);
       const repeat = textState.repeat;
       const textAlign = repeat ? undefined : textState.textAlign;
       // No `justify` support for line placement.
@@ -344,7 +350,7 @@ class CanvasTextBuilder extends CanvasBuilder {
         }
       }
 
-      this.beginGeometry(geometry, feature);
+      this.beginGeometry(geometry, feature, index);
 
       // adjust padding for negative scale
       let padding = textState.padding;
@@ -386,7 +392,7 @@ class CanvasTextBuilder extends CanvasBuilder {
         this.textRotation_,
         [1, 1],
         NaN,
-        undefined,
+        this.declutterMode_,
         this.declutterImageWithText_,
         padding == defaultPadding
           ? defaultPadding
@@ -425,7 +431,7 @@ class CanvasTextBuilder extends CanvasBuilder {
         this.textRotation_,
         [scale, scale],
         NaN,
-        undefined,
+        this.declutterMode_,
         this.declutterImageWithText_,
         padding,
         !!textState.backgroundFill,
@@ -528,6 +534,7 @@ class CanvasTextBuilder extends CanvasBuilder {
       text,
       textKey,
       1,
+      this.declutterMode_,
     ]);
     this.hitDetectionInstructions.push([
       CanvasInstruction.DRAW_CHARS,
@@ -544,6 +551,7 @@ class CanvasTextBuilder extends CanvasBuilder {
       text,
       textKey,
       1 / pixelRatio,
+      this.declutterMode_,
     ]);
   }
 
@@ -656,6 +664,7 @@ class CanvasTextBuilder extends CanvasBuilder {
             : '|' + getUid(fillState.fillStyle)
           : '';
     }
+    this.declutterMode_ = textStyle.getDeclutterMode();
     this.declutterImageWithText_ = sharedData;
   }
 }

package/render/canvas/ZIndexContext.d.ts

@@ -0,0 +1,56 @@
+export default ZIndexContext;
+export type ZIndexContextProxy = CanvasRenderingContext2D & {
+    globalAlpha: any;
+};
+/**
+ * @module ol/render/canvas/ZIndexContext
+ */
+/** @typedef {CanvasRenderingContext2D & {globalAlpha: any}} ZIndexContextProxy */
+/**
+ * @extends {CanvasRenderingContext2D}
+ */
+declare class ZIndexContext {
+    /**
+     * @private
+     * @type {Array<Array<*>>}
+     */
+    private instructions_;
+    /**
+     * @type {number}
+     */
+    zIndex: number;
+    /**
+     * @private
+     * @type {number}
+     */
+    private offset_;
+    /**
+     * @type {ZIndexContextProxy}
+     */
+    context_: ZIndexContextProxy;
+    /**
+     * @private
+     * @param {...*} args Args.
+     * @return {ZIndexContext} This.
+     */
+    private pushMethodArgs_;
+    /**
+     * Get a proxy for CanvasRenderingContext2D which does not support getting state
+     * (e.g. `context.globalAlpha`, which will return `undefined`). To set state, if it relies on a
+     * previous state (e.g. `context.globalAlpha = context.globalAlpha / 2`), set a function,
+     * e.g. `context.globalAlpha = (context) => context.globalAlpha / 2`.
+     * @return {ZIndexContextProxy} Context.
+     */
+    getContext(): ZIndexContextProxy;
+    /**
+     * @param {CanvasRenderingContext2D} context Context.
+     */
+    draw(context: CanvasRenderingContext2D): void;
+    clear(): void;
+    /**
+     * Offsets the zIndex by the highest current zIndex. Useful for rendering multiple worlds or tiles, to
+     * avoid conflicting context.clip() or context.save()/restore() calls.
+     */
+    offset(): void;
+}
+//# sourceMappingURL=ZIndexContext.d.ts.map

package/render/canvas/ZIndexContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZIndexContext.d.ts","sourceRoot":"","sources":["ZIndexContext.js"],"names":[],"mappings":";iCAIc,wBAAwB,GAAG;IAAC,WAAW,EAAE,GAAG,CAAA;CAAC;AAJ3D;;GAEG;AAEH,kFAAkF;AAElF;;GAEG;AACH;IAEI;;;OAGG;IACH,sBAAuB;IACvB;;OAEG;IACH,QAFU,MAAM,CAED;IACf;;;OAGG;IACH,gBAAgB;IAEhB;;OAEG;IACH,UAFU,kBAAkB,CAuB3B;IAGH;;;;OAIG;IACH,wBAGE;IAEF;;;;;;OAMG;IACH,cAFY,kBAAkB,CAI7B;IAED;;OAEG;IACH,cAFW,wBAAwB,QAkBlC;IAED,cAIC;IAED;;;OAGG;IACH,eAGC;CACF"}