@mapwhit/tilerenderer 0.47.1 → 0.48.0

package/src/symbol/get_anchors.js

@@ -17,7 +17,7 @@ function getAngleWindowSize(shapedText, glyphSize, boxScale) {
   return shapedText ? (3 / 5) * glyphSize * boxScale : 0;
 }
 
-function getLabelLength(shapedText, shapedIcon) {
+function getShapedLabelLength(shapedText, shapedIcon) {
   return Math.max(
     shapedText ? shapedText.right - shapedText.left : 0,
     shapedIcon ? shapedIcon.right - shapedIcon.left : 0
@@ -26,7 +26,7 @@ function getLabelLength(shapedText, shapedIcon) {
 
 function getCenterAnchor(line, maxAngle, shapedText, shapedIcon, glyphSize, boxScale) {
   const angleWindowSize = getAngleWindowSize(shapedText, glyphSize, boxScale);
-  const labelLength = getLabelLength(shapedText, shapedIcon);
+  const labelLength = getShapedLabelLength(shapedText, shapedIcon) * boxScale;
 
   let prevDistance = 0;
   const centerDistance = getLineLength(line) / 2;
@@ -45,11 +45,10 @@ function getCenterAnchor(line, maxAngle, shapedText, shapedIcon, glyphSize, boxS
 
       const anchor = new Anchor(x, y, b.angleTo(a), i);
       anchor._round();
-      if (angleWindowSize && !checkMaxAngle(line, anchor, labelLength, angleWindowSize, maxAngle)) {
-        return;
+      if (!angleWindowSize || checkMaxAngle(line, anchor, labelLength, angleWindowSize, maxAngle)) {
+        return anchor;
       }
-
-      return anchor;
+      return;
     }
 
     prevDistance += segmentDistance;
@@ -62,16 +61,16 @@ function getAnchors(line, spacing, maxAngle, shapedText, shapedIcon, glyphSize,
   // on the line.
 
   const angleWindowSize = getAngleWindowSize(shapedText, glyphSize, boxScale);
-
-  const labelLength = getLabelLength(shapedText, shapedIcon);
+  const shapedLabelLength = getShapedLabelLength(shapedText, shapedIcon);
+  const labelLength = shapedLabelLength * boxScale;
 
   // Is the line continued from outside the tile boundary?
   const isLineContinued = line[0].x === 0 || line[0].x === tileExtent || line[0].y === 0 || line[0].y === tileExtent;
 
   // Is the label long, relative to the spacing?
   // If so, adjust the spacing so there is always a minimum space of `spacing / 4` between label edges.
-  if (spacing - labelLength * boxScale < spacing / 4) {
-    spacing = labelLength * boxScale + spacing / 4;
+  if (spacing - labelLength < spacing / 4) {
+    spacing = labelLength + spacing / 4;
   }
 
   // Offset the first anchor by:
@@ -82,20 +81,10 @@ function getAnchors(line, spacing, maxAngle, shapedText, shapedIcon, glyphSize,
   const fixedExtraOffset = glyphSize * 2;
 
   const offset = !isLineContinued
-    ? ((labelLength / 2 + fixedExtraOffset) * boxScale * overscaling) % spacing
+    ? ((shapedLabelLength / 2 + fixedExtraOffset) * boxScale * overscaling) % spacing
     : ((spacing / 2) * overscaling) % spacing;
 
-  return resample(
-    line,
-    offset,
-    spacing,
-    angleWindowSize,
-    maxAngle,
-    labelLength * boxScale,
-    isLineContinued,
-    false,
-    tileExtent
-  );
+  return resample(line, offset, spacing, angleWindowSize, maxAngle, labelLength, isLineContinued, false, tileExtent);
 }
 
 function resample(

package/src/symbol/grid_index.js

@@ -1,3 +1,5 @@
+const { clamp } = require('../util/util');
+
 /**
  * GridIndex is a data structure for testing the intersection of
  * circles and rectangles in a 2d plane.
@@ -8,24 +10,21 @@
  * at least one cell. As long as the geometries are relatively
  * uniformly distributed across the plane, this greatly reduces
  * the number of comparisons necessary.
- *
- * @private
  */
 class GridIndex {
-  constructor(width, height, cellSize) {
-    const boxCells = (this.boxCells = []);
-    const circleCells = (this.circleCells = []);
+  #boxUid = 0;
+  #circleUid = 0;
 
+  constructor(width, height, cellSize) {
     // More cells -> fewer geometries to check per cell, but items tend
     // to be split across more cells.
     // Sweet spot allows most small items to fit in one cell
     this.xCellCount = Math.ceil(width / cellSize);
     this.yCellCount = Math.ceil(height / cellSize);
 
-    for (let i = 0; i < this.xCellCount * this.yCellCount; i++) {
-      boxCells.push([]);
-      circleCells.push([]);
-    }
+    const size = this.xCellCount * this.yCellCount;
+    this.boxCells = new Array(size);
+    this.circleCells = new Array(size);
     this.circleKeys = [];
     this.boxKeys = [];
     this.bboxes = [];
@@ -35,8 +34,6 @@ class GridIndex {
     this.height = height;
     this.xScale = this.xCellCount / width;
     this.yScale = this.yCellCount / height;
-    this.boxUid = 0;
-    this.circleUid = 0;
   }
 
   keysLength() {
@@ -44,33 +41,30 @@ class GridIndex {
   }
 
   insert(key, x1, y1, x2, y2) {
-    this._forEachCell(x1, y1, x2, y2, this._insertBoxCell, this.boxUid++);
+    const { boxCells } = this;
+    this.#forEachCell(x1, y1, x2, y2, insertBoxCell, this.#boxUid++);
     this.boxKeys.push(key);
-    this.bboxes.push(x1);
-    this.bboxes.push(y1);
-    this.bboxes.push(x2);
-    this.bboxes.push(y2);
+    this.bboxes.push(x1, y1, x2, y2);
+
+    function insertBoxCell(x1, y1, x2, y2, cellIndex, uid) {
+      (boxCells[cellIndex] ??= []).push(uid);
+    }
   }
 
   insertCircle(key, x, y, radius) {
+    const { circleCells } = this;
     // Insert circle into grid for all cells in the circumscribing square
     // It's more than necessary (by a factor of 4/PI), but fast to insert
-    this._forEachCell(x - radius, y - radius, x + radius, y + radius, this._insertCircleCell, this.circleUid++);
+    this.#forEachCell(x - radius, y - radius, x + radius, y + radius, insertCircleCell, this.#circleUid++);
     this.circleKeys.push(key);
-    this.circles.push(x);
-    this.circles.push(y);
-    this.circles.push(radius);
-  }
-
-  _insertBoxCell(x1, y1, x2, y2, cellIndex, uid) {
-    this.boxCells[cellIndex].push(uid);
-  }
+    this.circles.push(x, y, radius);
 
-  _insertCircleCell(x1, y1, x2, y2, cellIndex, uid) {
-    this.circleCells[cellIndex].push(uid);
+    function insertCircleCell(x1, y1, x2, y2, cellIndex, uid) {
+      (circleCells[cellIndex] ??= []).push(uid);
+    }
   }
 
-  _query(x1, y1, x2, y2, hitTest, predicate) {
+  #query(x1, y1, x2, y2, hitTest, predicate) {
     if (x2 < 0 || x1 > this.width || y2 < 0 || y1 > this.height) {
       return hitTest ? false : [];
     }
@@ -106,11 +100,73 @@ class GridIndex {
       hitTest,
       seenUids: { box: {}, circle: {} }
     };
-    this._forEachCell(x1, y1, x2, y2, this._queryCell, result, queryArgs, predicate);
+    this.#forEachCell(x1, y1, x2, y2, queryCell, result, queryArgs, predicate);
     return hitTest ? result.length > 0 : result;
+
+    function queryCell(x1, y1, x2, y2, cellIndex, result, queryArgs, predicate) {
+      const { seenUids } = queryArgs;
+      const boxCell = this.boxCells[cellIndex];
+      if (boxCell != null) {
+        const { bboxes } = this;
+        for (const boxUid of boxCell) {
+          if (!seenUids.box[boxUid]) {
+            seenUids.box[boxUid] = true;
+            const offset = boxUid * 4;
+            if (
+              x1 <= bboxes[offset + 2] &&
+              y1 <= bboxes[offset + 3] &&
+              x2 >= bboxes[offset + 0] &&
+              y2 >= bboxes[offset + 1] &&
+              (!predicate || predicate(this.boxKeys[boxUid]))
+            ) {
+              if (queryArgs.hitTest) {
+                result.push(true);
+                return true;
+              }
+              result.push({
+                key: this.boxKeys[boxUid],
+                x1: bboxes[offset],
+                y1: bboxes[offset + 1],
+                x2: bboxes[offset + 2],
+                y2: bboxes[offset + 3]
+              });
+            }
+          }
+        }
+      }
+      const circleCell = this.circleCells[cellIndex];
+      if (circleCell != null) {
+        const { circles } = this;
+        for (const circleUid of circleCell) {
+          if (!seenUids.circle[circleUid]) {
+            seenUids.circle[circleUid] = true;
+            const offset = circleUid * 3;
+            if (
+              circleAndRectCollide(circles[offset], circles[offset + 1], circles[offset + 2], x1, y1, x2, y2) &&
+              (!predicate || predicate(this.circleKeys[circleUid]))
+            ) {
+              if (queryArgs.hitTest) {
+                result.push(true);
+                return true;
+              }
+              const x = circles[offset];
+              const y = circles[offset + 1];
+              const radius = circles[offset + 2];
+              result.push({
+                key: this.circleKeys[circleUid],
+                x1: x - radius,
+                y1: y - radius,
+                x2: x + radius,
+                y2: y + radius
+              });
+            }
+          }
+        }
+      }
+    }
   }
 
-  _queryCircle(x, y, radius, hitTest, predicate) {
+  #queryCircle(x, y, radius, hitTest, predicate) {
     // Insert circle into grid for all cells in the circumscribing square
     // It's more than necessary (by a factor of 4/PI), but fast to insert
     const x1 = x - radius;
@@ -127,192 +183,130 @@ class GridIndex {
     const result = [];
     const queryArgs = {
       hitTest,
-      circle: { x: x, y: y, radius: radius },
+      circle: { x, y, radius },
       seenUids: { box: {}, circle: {} }
     };
-    this._forEachCell(x1, y1, x2, y2, this._queryCellCircle, result, queryArgs, predicate);
+    this.#forEachCell(x1, y1, x2, y2, queryCellCircle, result, queryArgs, predicate);
     return hitTest ? result.length > 0 : result;
-  }
-
-  query(x1, y1, x2, y2, predicate) {
-    return this._query(x1, y1, x2, y2, false, predicate);
-  }
 
-  hitTest(x1, y1, x2, y2, predicate) {
-    return this._query(x1, y1, x2, y2, true, predicate);
-  }
-
-  hitTestCircle(x, y, radius, predicate) {
-    return this._queryCircle(x, y, radius, true, predicate);
-  }
-
-  _queryCell(x1, y1, x2, y2, cellIndex, result, queryArgs, predicate) {
-    const seenUids = queryArgs.seenUids;
-    const boxCell = this.boxCells[cellIndex];
-    if (boxCell !== null) {
-      const bboxes = this.bboxes;
-      for (const boxUid of boxCell) {
-        if (!seenUids.box[boxUid]) {
-          seenUids.box[boxUid] = true;
-          const offset = boxUid * 4;
-          if (
-            x1 <= bboxes[offset + 2] &&
-            y1 <= bboxes[offset + 3] &&
-            x2 >= bboxes[offset + 0] &&
-            y2 >= bboxes[offset + 1] &&
-            (!predicate || predicate(this.boxKeys[boxUid]))
-          ) {
-            if (queryArgs.hitTest) {
+    function queryCellCircle(x1, y1, x2, y2, cellIndex, result, queryArgs, predicate) {
+      const { circle, seenUids } = queryArgs;
+      const boxCell = this.boxCells[cellIndex];
+      if (boxCell != null) {
+        const { bboxes } = this;
+        for (const boxUid of boxCell) {
+          if (!seenUids.box[boxUid]) {
+            seenUids.box[boxUid] = true;
+            const offset = boxUid * 4;
+            if (
+              circleAndRectCollide(
+                circle.x,
+                circle.y,
+                circle.radius,
+                bboxes[offset + 0],
+                bboxes[offset + 1],
+                bboxes[offset + 2],
+                bboxes[offset + 3]
+              ) &&
+              (!predicate || predicate(this.boxKeys[boxUid]))
+            ) {
               result.push(true);
               return true;
             }
-            result.push({
-              key: this.boxKeys[boxUid],
-              x1: bboxes[offset],
-              y1: bboxes[offset + 1],
-              x2: bboxes[offset + 2],
-              y2: bboxes[offset + 3]
-            });
           }
         }
       }
-    }
-    const circleCell = this.circleCells[cellIndex];
-    if (circleCell !== null) {
-      const circles = this.circles;
-      for (const circleUid of circleCell) {
-        if (!seenUids.circle[circleUid]) {
-          seenUids.circle[circleUid] = true;
-          const offset = circleUid * 3;
-          if (
-            this._circleAndRectCollide(circles[offset], circles[offset + 1], circles[offset + 2], x1, y1, x2, y2) &&
-            (!predicate || predicate(this.circleKeys[circleUid]))
-          ) {
-            if (queryArgs.hitTest) {
+
+      const circleCell = this.circleCells[cellIndex];
+      if (circleCell != null) {
+        const { circles } = this;
+        for (const circleUid of circleCell) {
+          if (!seenUids.circle[circleUid]) {
+            seenUids.circle[circleUid] = true;
+            const offset = circleUid * 3;
+            if (
+              circlesCollide(
+                circles[offset],
+                circles[offset + 1],
+                circles[offset + 2],
+                circle.x,
+                circle.y,
+                circle.radius
+              ) &&
+              (!predicate || predicate(this.circleKeys[circleUid]))
+            ) {
               result.push(true);
               return true;
             }
-            const x = circles[offset];
-            const y = circles[offset + 1];
-            const radius = circles[offset + 2];
-            result.push({
-              key: this.circleKeys[circleUid],
-              x1: x - radius,
-              y1: y - radius,
-              x2: x + radius,
-              y2: y + radius
-            });
           }
         }
       }
     }
   }
 
-  _queryCellCircle(x1, y1, x2, y2, cellIndex, result, queryArgs, predicate) {
-    const circle = queryArgs.circle;
-    const seenUids = queryArgs.seenUids;
-    const boxCell = this.boxCells[cellIndex];
-    if (boxCell !== null) {
-      const bboxes = this.bboxes;
-      for (const boxUid of boxCell) {
-        if (!seenUids.box[boxUid]) {
-          seenUids.box[boxUid] = true;
-          const offset = boxUid * 4;
-          if (
-            this._circleAndRectCollide(
-              circle.x,
-              circle.y,
-              circle.radius,
-              bboxes[offset + 0],
-              bboxes[offset + 1],
-              bboxes[offset + 2],
-              bboxes[offset + 3]
-            ) &&
-            (!predicate || predicate(this.boxKeys[boxUid]))
-          ) {
-            result.push(true);
-            return true;
-          }
-        }
-      }
-    }
+  query(x1, y1, x2, y2, predicate) {
+    return this.#query(x1, y1, x2, y2, false, predicate);
+  }
 
-    const circleCell = this.circleCells[cellIndex];
-    if (circleCell !== null) {
-      const circles = this.circles;
-      for (const circleUid of circleCell) {
-        if (!seenUids.circle[circleUid]) {
-          seenUids.circle[circleUid] = true;
-          const offset = circleUid * 3;
-          if (
-            this._circlesCollide(
-              circles[offset],
-              circles[offset + 1],
-              circles[offset + 2],
-              circle.x,
-              circle.y,
-              circle.radius
-            ) &&
-            (!predicate || predicate(this.circleKeys[circleUid]))
-          ) {
-            result.push(true);
-            return true;
-          }
-        }
-      }
-    }
+  hitTest(x1, y1, x2, y2, predicate) {
+    return this.#query(x1, y1, x2, y2, true, predicate);
   }
 
-  _forEachCell(x1, y1, x2, y2, fn, arg1, arg2, predicate) {
-    const cx1 = this._convertToXCellCoord(x1);
-    const cy1 = this._convertToYCellCoord(y1);
-    const cx2 = this._convertToXCellCoord(x2);
-    const cy2 = this._convertToYCellCoord(y2);
+  hitTestCircle(x, y, radius, predicate) {
+    return this.#queryCircle(x, y, radius, true, predicate);
+  }
+
+  #forEachCell(x1, y1, x2, y2, fn, ...args) {
+    const { xCellCount, yCellCount, xScale, yScale } = this;
+    const cx1 = cellX(x1);
+    const cy1 = cellY(y1);
+    const cx2 = cellX(x2);
+    const cy2 = cellY(y2);
 
     for (let x = cx1; x <= cx2; x++) {
       for (let y = cy1; y <= cy2; y++) {
-        const cellIndex = this.xCellCount * y + x;
-        if (fn.call(this, x1, y1, x2, y2, cellIndex, arg1, arg2, predicate)) return;
+        const cellIndex = xCellCount * y + x;
+        if (fn.call(this, x1, y1, x2, y2, cellIndex, ...args)) return;
       }
     }
-  }
 
-  _convertToXCellCoord(x) {
-    return Math.max(0, Math.min(this.xCellCount - 1, Math.floor(x * this.xScale)));
-  }
+    function cellX(x) {
+      return clamp(Math.floor(x * xScale), 0, xCellCount - 1);
+    }
 
-  _convertToYCellCoord(y) {
-    return Math.max(0, Math.min(this.yCellCount - 1, Math.floor(y * this.yScale)));
+    function cellY(y) {
+      return clamp(Math.floor(y * yScale), 0, yCellCount - 1);
+    }
   }
+}
 
-  _circlesCollide(x1, y1, r1, x2, y2, r2) {
-    const dx = x2 - x1;
-    const dy = y2 - y1;
-    const bothRadii = r1 + r2;
-    return bothRadii * bothRadii > dx * dx + dy * dy;
-  }
+module.exports = GridIndex;
 
-  _circleAndRectCollide(circleX, circleY, radius, x1, y1, x2, y2) {
-    const halfRectWidth = (x2 - x1) / 2;
-    const distX = Math.abs(circleX - (x1 + halfRectWidth));
-    if (distX > halfRectWidth + radius) {
-      return false;
-    }
+function circlesCollide(x1, y1, r1, x2, y2, r2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const bothRadii = r1 + r2;
+  return bothRadii * bothRadii > dx * dx + dy * dy;
+}
 
-    const halfRectHeight = (y2 - y1) / 2;
-    const distY = Math.abs(circleY - (y1 + halfRectHeight));
-    if (distY > halfRectHeight + radius) {
-      return false;
-    }
+function circleAndRectCollide(circleX, circleY, radius, x1, y1, x2, y2) {
+  const halfRectWidth = (x2 - x1) / 2;
+  const distX = Math.abs(circleX - (x1 + halfRectWidth));
+  if (distX > halfRectWidth + radius) {
+    return false;
+  }
 
-    if (distX <= halfRectWidth || distY <= halfRectHeight) {
-      return true;
-    }
+  const halfRectHeight = (y2 - y1) / 2;
+  const distY = Math.abs(circleY - (y1 + halfRectHeight));
+  if (distY > halfRectHeight + radius) {
+    return false;
+  }
 
-    const dx = distX - halfRectWidth;
-    const dy = distY - halfRectHeight;
-    return dx * dx + dy * dy <= radius * radius;
+  if (distX <= halfRectWidth || distY <= halfRectHeight) {
+    return true;
   }
-}
 
-module.exports = GridIndex;
+  const dx = distX - halfRectWidth;
+  const dy = distY - halfRectHeight;
+  return dx * dx + dy * dy <= radius * radius;
+}

package/src/symbol/mergelines.js

@@ -1,75 +1,78 @@
+const { Formatted } = require('../style-spec/expression/definitions/formatted');
+
 module.exports = function (features) {
-  const leftIndex = {};
-  const rightIndex = {};
+  const leftIndex = new Map();
+  const rightIndex = new Map();
   const mergedFeatures = [];
   let mergedIndex = 0;
 
-  function add(k) {
-    mergedFeatures.push(features[k]);
-    mergedIndex++;
-  }
-
-  function mergeFromRight(leftKey, rightKey, geom) {
-    const i = rightIndex[leftKey];
-    delete rightIndex[leftKey];
-    rightIndex[rightKey] = i;
-
-    mergedFeatures[i].geometry[0].pop();
-    mergedFeatures[i].geometry[0] = mergedFeatures[i].geometry[0].concat(geom[0]);
-    return i;
-  }
-
-  function mergeFromLeft(leftKey, rightKey, geom) {
-    const i = leftIndex[rightKey];
-    delete leftIndex[rightKey];
-    leftIndex[leftKey] = i;
-
-    mergedFeatures[i].geometry[0].shift();
-    mergedFeatures[i].geometry[0] = geom[0].concat(mergedFeatures[i].geometry[0]);
-    return i;
-  }
-
-  function getKey(text, geom, onRight) {
-    const point = onRight ? geom[0][geom[0].length - 1] : geom[0][0];
-    return `${text}:${point.x}:${point.y}`;
-  }
-
   for (let k = 0; k < features.length; k++) {
-    const feature = features[k];
-    const geom = feature.geometry;
-    const text = feature.text;
+    const { geometry, text: featureText } = features[k];
+    const text = featureText instanceof Formatted ? featureText.toString() : featureText;
 
     if (!text) {
       add(k);
       continue;
     }
 
-    const leftKey = getKey(text, geom);
-    const rightKey = getKey(text, geom, true);
+    const leftKey = getKey(text, geometry);
+    const rightKey = getKey(text, geometry, true);
 
-    if (leftKey in rightIndex && rightKey in leftIndex && rightIndex[leftKey] !== leftIndex[rightKey]) {
+    if (rightIndex.has(leftKey) && leftIndex.has(rightKey) && rightIndex.get(leftKey) !== leftIndex.get(rightKey)) {
       // found lines with the same text adjacent to both ends of the current line, merge all three
-      const j = mergeFromLeft(leftKey, rightKey, geom);
+      const j = mergeFromLeft(leftKey, rightKey, geometry);
       const i = mergeFromRight(leftKey, rightKey, mergedFeatures[j].geometry);
 
-      delete leftIndex[leftKey];
-      delete rightIndex[rightKey];
+      leftIndex.delete(leftKey);
+      rightIndex.delete(rightKey);
 
-      rightIndex[getKey(text, mergedFeatures[i].geometry, true)] = i;
+      rightIndex.set(getKey(text, mergedFeatures[i].geometry, true), i);
       mergedFeatures[j].geometry = null;
-    } else if (leftKey in rightIndex) {
+    } else if (rightIndex.has(leftKey)) {
       // found mergeable line adjacent to the start of the current line, merge
-      mergeFromRight(leftKey, rightKey, geom);
-    } else if (rightKey in leftIndex) {
+      mergeFromRight(leftKey, rightKey, geometry);
+    } else if (leftIndex.has(rightKey)) {
       // found mergeable line adjacent to the end of the current line, merge
-      mergeFromLeft(leftKey, rightKey, geom);
+      mergeFromLeft(leftKey, rightKey, geometry);
     } else {
       // no adjacent lines, add as a new item
       add(k);
-      leftIndex[leftKey] = mergedIndex - 1;
-      rightIndex[rightKey] = mergedIndex - 1;
+      leftIndex.set(leftKey, mergedIndex - 1);
+      rightIndex.set(rightKey, mergedIndex - 1);
     }
   }
 
   return mergedFeatures.filter(f => f.geometry);
+
+  function add(k) {
+    mergedFeatures.push(features[k]);
+    mergedIndex++;
+  }
+
+  function mergeFromRight(leftKey, rightKey, [geom]) {
+    const i = rightIndex.get(leftKey);
+    rightIndex.delete(leftKey);
+    rightIndex.set(rightKey, i);
+
+    const feature = mergedFeatures[i];
+    feature.geometry[0].pop();
+    feature.geometry[0].push(...geom);
+    return i;
+  }
+
+  function mergeFromLeft(leftKey, rightKey, [geom]) {
+    const i = leftIndex.get(rightKey);
+    leftIndex.delete(rightKey);
+    leftIndex.set(leftKey, i);
+
+    const feature = mergedFeatures[i];
+    feature.geometry[0].shift();
+    feature.geometry[0].unshift(...geom);
+    return i;
+  }
+
+  function getKey(text, [geom], onRight) {
+    const { x, y } = geom.at(onRight ? -1 : 0);
+    return `${text}:${x}:${y}`;
+  }
 };

package/src/symbol/opacity_state.js

@@ -1,4 +1,4 @@
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 
 class OpacityState {
   constructor() {