@vaadin/bundles 25.3.0-alpha13 → 25.3.0-alpha14

package/vendors-node_modules_vaadin_map_node_modules_ol_render_canvas_Executor_js.js

@@ -52,6 +52,245 @@ function linearRingLength(flatCoordinates, offset, end, stride) {
 }
 
 
+/***/ }),
+
+/***/ "./node_modules/@vaadin/map/node_modules/ol/geom/flat/lineoffset.js":
+/*!**************************************************************************!*\
+  !*** ./node_modules/@vaadin/map/node_modules/ol/geom/flat/lineoffset.js ***!
+  \**************************************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "offsetLineString": () => (/* binding */ offsetLineString),
+/* harmony export */   "removeOffsetCycles": () => (/* binding */ removeOffsetCycles)
+/* harmony export */ });
+/* harmony import */ var _coordinate_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../coordinate.js */ "./node_modules/@vaadin/map/node_modules/ol/coordinate.js");
+
+
+/**
+ * Offsets a line string to the left / right along its segments direction.
+ * Offset is applied to each segment of the line in the direciton of the segment normal (positive offset goes "right" relative to the line direction).
+ * For very sharp angles between segments, the function falls back to offsetting along the segment normal direction to avoid excessively long miters.
+ *
+ * Coordinates and the offset should be in the same units — either pixels or the same spatial reference system as the input line coordinates.
+ *
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} start Start index.
+ * @param {number} end End index.
+ * @param {number} stride Stride.
+ * @param {number} offset Offset distance along the segment normal direction.
+ *   Positive values offset to the right relative to the direction of the line.
+ *   Negative values offset to the left.
+ * @param {boolean} isClosedRing If coordinates build a closed circle (in this the first and the last coordinate offsets will consider previous / next ring coordinate)
+ * @param {Array<number>} [dest] Destination coordinate array. If not provided a new one will be created
+ * @param {number} [destinationStride] Stride of destination coordinates. If unspecified, assumed to be same as the source coordinates stride.
+ * @return {Array<number>} Result flat coordinates of the offset line.
+ */
+function offsetLineString(
+  flatCoordinates,
+  start,
+  end,
+  stride,
+  offset,
+  isClosedRing,
+  dest,
+  destinationStride,
+) {
+  dest = dest ?? [];
+  destinationStride = destinationStride ?? stride;
+
+  const secondPointX = flatCoordinates[start + stride];
+  const secondPointY = flatCoordinates[start + stride + 1];
+  const secondToLastPointX = flatCoordinates[end - 2 * stride];
+  const secondToLastPointY = flatCoordinates[end - 2 * stride + 1];
+  let x, y, prevX, prevY, nextX, nextY, offsetX, offsetY;
+
+  let i = 0;
+  for (let j = start; j < end; j += stride) {
+    // 1. Detect previous and next coordinates of a current vertex
+    prevX = x;
+    prevY = y;
+    nextX = undefined;
+    nextY = undefined;
+    if (j + stride < end) {
+      nextX = flatCoordinates[j + stride];
+      nextY = flatCoordinates[j + stride + 1];
+    }
+    // First coordinate of a closed ring -> previous coordinate is the second to last one
+    if (isClosedRing && j === start) {
+      prevX = secondToLastPointX;
+      prevY = secondToLastPointY;
+    }
+    // Last coordinate of a closed ring -> next coordinate is the second vertex of a line string (the last one is same as the first one for a closed ring)
+    if (isClosedRing && j === end - stride) {
+      nextX = secondPointX;
+      nextY = secondPointY;
+    }
+
+    // 2. Current vertex to offset
+    x = flatCoordinates[j];
+    y = flatCoordinates[j + 1];
+
+    // 3. Offset the vertex
+    [offsetX, offsetY] = offsetLineVertex(
+      x,
+      y,
+      prevX,
+      prevY,
+      nextX,
+      nextY,
+      offset,
+    );
+    dest[i++] = offsetX;
+    dest[i++] = offsetY;
+
+    // 4. Copy over other dimension values if any
+    for (let k = 2; k < destinationStride; k++) {
+      dest[i++] = flatCoordinates[j + k];
+    }
+  }
+
+  if (dest.length != i) {
+    dest.length = i;
+  }
+  return dest;
+}
+
+/**
+ * Computes the offset of a single vertex of a line string.
+ *
+ * The function calculates a new vertex coordinate offset along the normal/miter direction of the line at this vertex.
+ * Offset is applied along the segment normal (positive offset goes "right" relative to the line direction).
+ * It handles first and last vertices (caps) as well as joins between two segments (mitering).
+ * For very sharp angles, the function falls back to offsetting along the segment normal direction to avoid excessively long miters.
+ *
+ * Coordinates and the offset should be in the same units — either pixels or the same spatial reference system as the input line coordinates.
+ *
+ * @param {number} x Vertex x-coordinate.
+ * @param {number} y Vertex y-coordinate.
+ * @param {number|undefined} prevX Previous vertex x-coordinate.
+ *   Pass undefined if computing the offset for the first vertex (no previous vertex).
+ * @param {number|undefined} prevY Previous vertex y-coordinate.
+ *   Pass undefined if computing the offset for the first vertex (no previous vertex).
+ * @param {number|undefined} nextX Next vertex x-coordinate.
+ *   Pass undefined if computing the offset for the last vertex (no next vertex).
+ * @param {number|undefined} nextY Next vertex y-coordinate.
+ *   Pass undefined if computing the offset for the last vertex (no next vertex).
+ * @param {number} offset Offset distance along the segment normal direction.
+ *   Positive values offset to the right relative to the direction from previous to next vertex.
+ *   Negative values offset to the left.
+ * @return {import("../../coordinate.js").Coordinate} Offset vertex coordinate as `[x, y]`.
+ */
+function offsetLineVertex(x, y, prevX, prevY, nextX, nextY, offset) {
+  // Compute segment direction
+  let nx, ny;
+  if (prevX !== undefined && prevY !== undefined) {
+    nx = x - prevX;
+    ny = y - prevY;
+  } else if (nextX !== undefined && nextY !== undefined) {
+    nx = nextX - x;
+    ny = nextY - y;
+  } else {
+    // no next, no previous point given -> just assume some default (horizontal) direction
+    nx = 1;
+    ny = 0;
+  }
+
+  // Normalize -> tangent
+  const len = Math.hypot(nx, ny);
+  const tx = nx / len;
+  const ty = ny / len;
+
+  // Rotate tangent 90° -> normal
+  nx = -ty;
+  ny = tx;
+
+  // First / last vertex -> offset the point in the direction of the normal vector
+  if (prevX === undefined || prevY === undefined) {
+    return [x + nx * offset, y + ny * offset];
+  }
+  if (nextX === undefined || nextY === undefined) {
+    return [x + nx * offset, y + ny * offset];
+  }
+
+  // Compute join angle - angle between 2 segments of the vertex.
+  const joinAngle = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_0__.angleBetween)([x, y], [prevX, prevY], [nextX, nextY]);
+
+  // Avoid huge or infinite miter joins for very sharp angles, offset in the segment direction in this case.
+  if (Math.cos(joinAngle) > 0.998) {
+    return [x + tx * offset, y + ty * offset];
+  }
+
+  // Compute join offset direction.
+  // We rotate the normal vector by half of the join angle.
+  // This gives the direction of the miter at the vertex.
+  const cos = Math.cos(joinAngle / 2);
+  const sin = Math.sin(joinAngle / 2);
+
+  // Rotate the normal vector (nx, ny) by half of the join angle.
+  // bx/by = bisector direction before normalization
+  const bx = sin * nx + cos * ny;
+  const by = -cos * nx + sin * ny;
+
+  // Scale the bisector so that moving along it preserves the correct offset distance.
+  // Dividing by sin(half of angle) converts the bisector into the true miter vector.
+  // (This expands the miter for sharp angles and shortens it for wide ones.)
+  const dx = bx * (1 / sin);
+  const dy = by * (1 / sin);
+
+  // Offset final vertex along miter direction
+  return [x + dx * offset, y + dy * offset];
+}
+
+/**
+ * Removes self-intersection loops (cycles) from an offset line.
+ * When a polyline is offset, sharp turns can create self-intersecting loops.
+ * This function detects those crossings and splices out the looped portions,
+ * replacing them with the intersection point.
+ *
+ * @param {Array<number>} coords Flat offset coordinates (modified in-place).
+ * @param {number} stride Coordinate stride (typically 2).
+ * @param {boolean} [closedLine] Whether the original line is closed (first vertex === last vertex).
+ *   When true, the first and last offset segments are not compared against each other to avoid
+ *   false loop detection at the closure point.
+ * @return {Array<number>} The cleaned coordinate array.
+ */
+function removeOffsetCycles(coords, stride, closedLine = false) {
+  for (let i = 0, ii = coords.length - 2; i < ii; i += stride) {
+    const jMax =
+      closedLine && i === 0
+        ? coords.length - 3 * stride
+        : coords.length - 2 * stride;
+    for (let j = jMax; j > i + stride; j -= stride) {
+      const p1x = coords[i];
+      const p1y = coords[i + 1];
+      const p2x = coords[i + stride];
+      const p2y = coords[i + stride + 1];
+      const p3x = coords[j];
+      const p3y = coords[j + 1];
+      const p4x = coords[j + stride];
+      const p4y = coords[j + stride + 1];
+      const d = (p4y - p3y) * (p2x - p1x) - (p4x - p3x) * (p2y - p1y);
+      if (d === 0) {
+        continue;
+      }
+      const t = ((p4x - p3x) * (p1y - p3y) - (p4y - p3y) * (p1x - p3x)) / d;
+      const u = ((p2x - p1x) * (p1y - p3y) - (p2y - p1y) * (p1x - p3x)) / d;
+      if (t > 0 && t < 1 && u > 0 && u < 1) {
+        const ix = p1x + t * (p2x - p1x);
+        const iy = p1y + t * (p2y - p1y);
+        coords[i + stride] = ix;
+        coords[i + stride + 1] = iy;
+        coords.splice(i + 2 * stride, j - i - stride);
+        break;
+      }
+    }
+  }
+  return coords;
+}
+
+
 /***/ }),
 
 /***/ "./node_modules/@vaadin/map/node_modules/ol/geom/flat/textpath.js":
@@ -72,6 +311,17 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+let segmenter;
+/**
+ * @return {Intl.Segmenter} A grapheme segmenter.
+ */
+function getSegmenter() {
+  if (!segmenter) {
+    segmenter = new Intl.Segmenter(undefined, {granularity: 'grapheme'});
+  }
+  return segmenter;
+}
+
 /**
  * @param {Array<number>} flatCoordinates Path to put text on.
  * @param {number} offset Start offset of the `flatCoordinates`.
@@ -179,7 +429,8 @@ function drawTextOnPath(
   // rendering across line segments
   text = text.replace(/\n/g, ' '); // ensure rendering in single-line as all calculations below don't handle multi-lines
 
-  for (let i = 0, ii = text.length; i < ii; ) {
+  const segments = Array.from(getSegmenter().segment(text), (s) => s.segment);
+  for (let i = 0, ii = segments.length; i < ii;) {
     advance();
     let angle = Math.atan2(y2 - y1, x2 - x1);
     if (reverse) {
@@ -198,7 +449,8 @@ function drawTextOnPath(
     let charLength = 0;
     for (; i < ii; ++i) {
       const index = reverse ? ii - i - 1 : i;
-      const len = scale * measureAndCacheTextWidth(font, text[index], cache);
+      const len =
+        scale * measureAndCacheTextWidth(font, segments[index], cache);
       if (
         offset + stride < end &&
         segmentM + segmentLength < startM + charLength + len / 2
@@ -210,9 +462,9 @@ function drawTextOnPath(
     if (i === iStart) {
       continue;
     }
-    const chars = reverse
-      ? text.substring(ii - iStart, ii - i)
-      : text.substring(iStart, i);
+    const chars = (
+      reverse ? segments.slice(ii - i, ii - iStart) : segments.slice(iStart, i)
+    ).join('');
     interpolate =
       segmentLength === 0
         ? 0
@@ -241,11 +493,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _array_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../array.js */ "./node_modules/@vaadin/map/node_modules/ol/array.js");
 /* harmony import */ var _extent_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../extent.js */ "./node_modules/@vaadin/map/node_modules/ol/extent.js");
 /* harmony import */ var _geom_flat_length_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../geom/flat/length.js */ "./node_modules/@vaadin/map/node_modules/ol/geom/flat/length.js");
+/* harmony import */ var _geom_flat_lineoffset_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../geom/flat/lineoffset.js */ "./node_modules/@vaadin/map/node_modules/ol/geom/flat/lineoffset.js");
 /* harmony import */ var _geom_flat_textpath_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../geom/flat/textpath.js */ "./node_modules/@vaadin/map/node_modules/ol/geom/flat/textpath.js");
 /* harmony import */ var _geom_flat_transform_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../geom/flat/transform.js */ "./node_modules/@vaadin/map/node_modules/ol/geom/flat/transform.js");
 /* harmony import */ var _transform_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../transform.js */ "./node_modules/@vaadin/map/node_modules/ol/transform.js");
-/* harmony import */ var _canvas_ZIndexContext_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../canvas/ZIndexContext.js */ "./node_modules/@vaadin/map/node_modules/ol/render/canvas/ZIndexContext.js");
 /* harmony import */ var _canvas_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../canvas.js */ "./node_modules/@vaadin/map/node_modules/ol/render/canvas.js");
+/* harmony import */ var _canvas_ZIndexContext_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../canvas/ZIndexContext.js */ "./node_modules/@vaadin/map/node_modules/ol/render/canvas/ZIndexContext.js");
 /* harmony import */ var _Instruction_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Instruction.js */ "./node_modules/@vaadin/map/node_modules/ol/render/canvas/Instruction.js");
 /* harmony import */ var _TextBuilder_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TextBuilder.js */ "./node_modules/@vaadin/map/node_modules/ol/render/canvas/TextBuilder.js");
 /**
@@ -262,6 +515,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /**
  * @typedef {import('../../structs/RBush.js').Entry<import('../../Feature.js').FeatureLike>} DeclutterEntry
  */
@@ -280,7 +534,7 @@ __webpack_require__.r(__webpack_exports__);
  */
 
 /**
- * @typedef {{0: CanvasRenderingContext2D, 1: import('../../size.js').Size, 2: import("../canvas.js").Label|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement, 3: ImageOrLabelDimensions, 4: number, 5: Array<*>, 6: Array<*>}} ReplayImageOrLabelArgs
+ * @typedef {{0: CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, 1: import('../../size.js').Size, 2: import("../canvas.js").Label|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement, 3: ImageOrLabelDimensions, 4: number, 5: Array<*>, 6: Array<*>}} ReplayImageOrLabelArgs
  */
 
 /**
@@ -821,7 +1075,7 @@ class Executor {
 
   /**
    * @private
-   * @param {CanvasRenderingContext2D} context Context.
+   * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context Context.
    */
   fill_(context) {
     const alignAndScale = this.alignAndScaleFill_;
@@ -833,7 +1087,6 @@ class Executor {
       if (alignAndScale !== 1) {
         context.scale(alignAndScale, alignAndScale);
       }
-      context.rotate(this.viewRotation_);
     }
     context.fill();
     if (alignAndScale) {
@@ -843,7 +1096,7 @@ class Executor {
 
   /**
    * @private
-   * @param {CanvasRenderingContext2D} context Context.
+   * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context Context.
    * @param {Array<*>} instruction Instruction.
    */
   setStrokeStyle_(context, instruction) {
@@ -899,7 +1152,7 @@ class Executor {
 
   /**
    * @private
-   * @param {CanvasRenderingContext2D} context Context.
+   * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context Context.
    * @param {import('../../size.js').Size} scaledCanvasSize Scaled canvas size
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {Array<*>} instructions Instructions array.
@@ -944,8 +1197,10 @@ class Executor {
     const ii = instructions.length; // end of instructions
     let d = 0; // data index
     let dd; // end of per-instruction data
+    const offsetCoords = [];
     let anchorX,
       anchorY,
+      lineOffsetPx,
       /** @type {import('../../style/Style.js').DeclutterMode} */
       declutterMode,
       prevX,
@@ -1020,10 +1275,11 @@ class Executor {
           break;
         case _Instruction_js__WEBPACK_IMPORTED_MODULE_7__["default"].CIRCLE:
           d = /** @type {number} */ (instruction[1]);
+          lineOffsetPx = /** @type {number} */ instruction[2] ?? 0;
           const x1 = pixelCoordinates[d];
           const y1 = pixelCoordinates[d + 1];
-          const x2 = pixelCoordinates[d + 2];
-          const y2 = pixelCoordinates[d + 3];
+          const x2 = pixelCoordinates[d + 2] - lineOffsetPx;
+          const y2 = pixelCoordinates[d + 3] - lineOffsetPx;
           const dx = x2 - x1;
           const dy = y2 - y1;
           const r = Math.sqrt(dx * dx + dy * dy);
@@ -1260,6 +1516,7 @@ class Executor {
           declutterMode = instruction[14] || 'declutter';
 
           const textKeepUpright = /** @type {boolean} */ (instruction[15]);
+          const offsetX = /** @type {number} */ (instruction[16]);
           const textState = this.textStates[textKey];
           const font = textState.font;
           const textScale = [
@@ -1309,7 +1566,8 @@ class Executor {
                   label = this.createLabel(chars, textKey, '', strokeKey);
                   anchorX =
                     /** @type {number} */ (part[2]) +
-                    (textScale[0] < 0 ? -strokeWidth : strokeWidth);
+                    (textScale[0] < 0 ? -strokeWidth : strokeWidth) -
+                    offsetX;
                   anchorY =
                     baseline * label.height +
                     ((0.5 - baseline) * 2 * strokeWidth * textScale[1]) /
@@ -1356,7 +1614,7 @@ class Executor {
                   part = parts[c]; // x, y, anchorX, rotation, chunk
                   chars = /** @type {string} */ (part[4]);
                   label = this.createLabel(chars, textKey, fillKey, '');
-                  anchorX = /** @type {number} */ (part[2]);
+                  anchorX = /** @type {number} */ (part[2]) - offsetX;
                   anchorY = baseline * label.height - offsetY;
                   const dimensions = this.calculateImageOrLabelDimensions_(
                     label.width,
@@ -1431,17 +1689,47 @@ class Executor {
         case _Instruction_js__WEBPACK_IMPORTED_MODULE_7__["default"].MOVE_TO_LINE_TO:
           d = /** @type {number} */ (instruction[1]);
           dd = /** @type {number} */ (instruction[2]);
-          x = pixelCoordinates[d];
-          y = pixelCoordinates[d + 1];
+          lineOffsetPx = /** @type {number|undefined} */ (instruction[3]);
+
+          let lineCoords, lineStart, lineEnd;
+          if (lineOffsetPx) {
+            const isClosedRing =
+              /** @type {boolean|undefined} */ (instruction[4]) ?? false;
+            const isClosedLine =
+              isClosedRing ||
+              (Math.abs(pixelCoordinates[d] - pixelCoordinates[dd - 2]) <
+                1e-6 &&
+                Math.abs(pixelCoordinates[d + 1] - pixelCoordinates[dd - 1]) <
+                  1e-6);
+            (0,_geom_flat_lineoffset_js__WEBPACK_IMPORTED_MODULE_10__.offsetLineString)(
+              pixelCoordinates,
+              d,
+              dd,
+              2,
+              lineOffsetPx,
+              isClosedLine,
+              offsetCoords,
+            );
+            (0,_geom_flat_lineoffset_js__WEBPACK_IMPORTED_MODULE_10__.removeOffsetCycles)(offsetCoords, 2, isClosedLine);
+            lineCoords = offsetCoords;
+            lineStart = 0;
+            lineEnd = lineCoords.length;
+          } else {
+            lineCoords = pixelCoordinates;
+            lineStart = d;
+            lineEnd = dd;
+          }
+          x = lineCoords[lineStart];
+          y = lineCoords[lineStart + 1];
           context.moveTo(x, y);
           prevX = (x + 0.5) | 0;
           prevY = (y + 0.5) | 0;
-          for (d += 2; d < dd; d += 2) {
-            x = pixelCoordinates[d];
-            y = pixelCoordinates[d + 1];
+          for (let k = lineStart + 2; k < lineEnd; k += 2) {
+            x = lineCoords[k];
+            y = lineCoords[k + 1];
             roundX = (x + 0.5) | 0;
             roundY = (y + 0.5) | 0;
-            if (d == dd - 2 || roundX !== prevX || roundY !== prevY) {
+            if (k == lineEnd - 2 || roundX !== prevX || roundY !== prevY) {
               context.lineTo(x, y);
               prevX = roundX;
               prevY = roundY;
@@ -1459,6 +1747,9 @@ class Executor {
               context.stroke();
               pendingStroke = 0;
             }
+          } else if (pendingStroke && instruction[1]) {
+            context.stroke();
+            pendingStroke = 0;
           }
 
           /** @type {import("../../colorlike.js").ColorLike} */
@@ -1466,6 +1757,10 @@ class Executor {
           ++i;
           break;
         case _Instruction_js__WEBPACK_IMPORTED_MODULE_7__["default"].SET_STROKE_STYLE:
+          if (pendingFill && instruction[1]) {
+            this.fill_(context);
+            pendingFill = 0;
+          }
           if (pendingStroke) {
             context.stroke();
             pendingStroke = 0;
@@ -1496,7 +1791,7 @@ class Executor {
   }
 
   /**
-   * @param {CanvasRenderingContext2D} context Context.
+   * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context Context.
    * @param {import('../../size.js').Size} scaledCanvasSize Scaled canvas size.
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
@@ -1525,7 +1820,7 @@ class Executor {
   }
 
   /**
-   * @param {CanvasRenderingContext2D} context Context.
+   * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context Context.
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
    * @param {FeatureCallback<T>} [featureCallback] Feature callback.
@@ -1576,7 +1871,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/** @typedef {CanvasRenderingContext2D & {globalAlpha: any}} ZIndexContextProxy */
+/** @typedef {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D & {globalAlpha: any}} ZIndexContextProxy */
 
 /**
  * @extends {CanvasRenderingContext2D}
@@ -1598,6 +1893,14 @@ class ZIndexContext {
      */
     this.offset_ = 0;
 
+    /**
+     * Name of the method last accessed on the proxy, pushed together with its
+     * arguments when the method is actually called.
+     * @private
+     * @type {string|symbol}
+     */
+    this.pendingMethod_;
+
     /**
      * @private
      * @type {ZIndexContextProxy}
@@ -1605,14 +1908,11 @@ class ZIndexContext {
     this.context_ = /** @type {ZIndexContextProxy} */ (
       new Proxy((0,_dom_js__WEBPACK_IMPORTED_MODULE_0__.getSharedCanvasContext2D)(), {
         get: (target, property) => {
-          if (
-            typeof (/** @type {*} */ ((0,_dom_js__WEBPACK_IMPORTED_MODULE_0__.getSharedCanvasContext2D)())[property]) !==
-            'function'
-          ) {
+          if (typeof (/** @type {*} */ (target)[property]) !== 'function') {
             // we only accept calling functions on the proxy, not accessing properties
             return undefined;
           }
-          this.push_(property);
+          this.pendingMethod_ = property;
           return this.pushMethodArgs_;
         },
         set: (target, property, value) => {
@@ -1637,13 +1937,13 @@ class ZIndexContext {
   }
 
   /**
-   * @private
+   * Pushes the method name captured at access time together with the arguments
+   * passed at call time. Reused across all proxied method calls.
    * @param {...*} args Args.
-   * @return {ZIndexContext} This.
+   * @private
    */
   pushMethodArgs_ = (...args) => {
-    this.push_(args);
-    return this;
+    this.push_(this.pendingMethod_, args);
   };
 
   /**
@@ -1666,7 +1966,7 @@ class ZIndexContext {
   }
 
   /**
-   * @param {CanvasRenderingContext2D} context Context.
+   * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context Context.
    */
   draw(context) {
     this.instructions_.forEach((instructionsAtIndex) => {
@@ -1679,11 +1979,9 @@ class ZIndexContext {
         const instructionAtIndex = instructionsAtIndex[++i];
         if (typeof (/** @type {*} */ (context)[property]) === 'function') {
           /** @type {*} */ (context)[property](...instructionAtIndex);
+        } else if (typeof instructionAtIndex === 'function') {
+          /** @type {*} */ (context)[property] = instructionAtIndex(context);
         } else {
-          if (typeof instructionAtIndex === 'function') {
-            /** @type {*} */ (context)[property] = instructionAtIndex(context);
-            continue;
-          }
           /** @type {*} */ (context)[property] = instructionAtIndex;
         }
       }