@vcmap/core 6.1.11 → 6.2.0-rc.2

package/src/util/featureconverter/vectorHeightInfo.ts

@@ -1,7 +1,7 @@
-import { Geometry, SimpleGeometry } from 'ol/geom.js';
+import type { Geometry, Point, SimpleGeometry } from 'ol/geom.js';
 import type { Coordinate } from 'ol/coordinate.js';
 import { Cartesian3, HeightReference } from '@vcmap-cesium/engine';
-import { GeometryLayout } from 'ol/geom/Geometry.js';
+import type { GeometryLayout } from 'ol/geom/Geometry.js';
 import type { Feature } from 'ol';
 import type VectorProperties from '../../layer/vectorProperties.js';
 import { is2DLayout } from '../geometryHelpers.js';
@@ -43,34 +43,34 @@ export type VectorHeightInfo<
       layout: L;
     }
   : T extends RelativeHeightReference
-  ? {
-      heightReference: T;
-      layout: L;
-      clampOrigin?: [number, number];
-      heightAboveGround?: number;
-      /**
-       * the level above or below mean sea level
-       */
-      groundLevel?: number;
-      /**
-       * true if not all z values are identical, e.g no height above ground was provided and no or only one storey was provided
-       */
-      perPositionHeight: boolean;
-    } & ExtrusionHeightInfo
-  : T extends HeightReference.NONE
-  ? {
-      heightReference: T;
-      layout: L;
-      /**
-       * the level above or below mean sea level (minZ value or ground_level or 0)
-       */
-      groundLevelOrMinHeight: number;
-      /**
-       * true if not all z values are identical, e.g no ground level was provided and no or only one storey was provided
-       */
-      perPositionHeight: boolean;
-    } & ExtrusionHeightInfo
-  : never;
+    ? {
+        heightReference: T;
+        layout: L;
+        clampOrigin?: [number, number];
+        heightAboveGround?: number;
+        /**
+         * the level above or below mean sea level
+         */
+        groundLevel?: number;
+        /**
+         * true if not all z values are identical, e.g no height above ground was provided and no or only one storey was provided
+         */
+        perPositionHeight: boolean;
+      } & ExtrusionHeightInfo
+    : T extends HeightReference.NONE
+      ? {
+          heightReference: T;
+          layout: L;
+          /**
+           * the level above or below mean sea level (minZ value or ground_level or 0)
+           */
+          groundLevelOrMinHeight: number;
+          /**
+           * true if not all z values are identical, e.g no ground level was provided and no or only one storey was provided
+           */
+          perPositionHeight: boolean;
+        } & ExtrusionHeightInfo
+      : never;
 
 export function isClampedHeightReference(
   heightReference: HeightReference,
@@ -389,3 +389,33 @@ export function mercatorToCartesianTransformerForHeightInfo(
     );
   };
 }
+
+/**
+ * Sets the correct height on the wgs84Coords depending on the height info
+ * @param geometry
+ * @param heightInfo
+ */
+export function getWgs84CoordinatesForPoint(
+  geometry: Point,
+  heightInfo: VectorHeightInfo,
+): Coordinate {
+  const transformer = mercatorToWgs84TransformerForHeightInfo(heightInfo);
+  const wgs84Coords = transformer(geometry.getCoordinates());
+  if (!isClampedHeightReference(heightInfo.heightReference)) {
+    // points get rendered at the top of the extrusion. we must add this to the Z value
+    const extrusionHeight = (
+      heightInfo as VectorHeightInfo<
+        RelativeHeightReference | HeightReference.NONE
+      >
+    ).storeyHeightsAboveGround.reduce(
+      (sum, currentValue) => sum + currentValue,
+      0,
+    );
+
+    if (extrusionHeight) {
+      wgs84Coords[2] += extrusionHeight;
+    }
+  }
+
+  return wgs84Coords;
+}

package/src/util/flight/flightAnchor.ts

@@ -1,4 +1,4 @@
-import { check, is, maybe, PatternFor } from '@vcsuite/check';
+import { check, is, maybe, ofType } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
 import type { Feature as GeojsonFeature, Point as GeojsonPoint } from 'geojson';
 import { type Coordinate, equals as coordinateEquals } from 'ol/coordinate.js';
@@ -27,7 +27,7 @@ export type FlightAnchor = FlightAnchorFeatureProperties & {
 
 type FlightAnchorOptions = Omit<FlightAnchor, 'changed' | 'destroy'>;
 
-const flightAnchorOptionsPattern: PatternFor<FlightAnchorOptions> = {
+const flightAnchorOptionsPattern = ofType<FlightAnchorOptions>({
   name: String,
   coordinate: [Number],
   heading: Number,
@@ -35,7 +35,7 @@ const flightAnchorOptionsPattern: PatternFor<FlightAnchorOptions> = {
   roll: Number,
   duration: Number,
   title: maybe(String),
-};
+});
 
 function isOptions(options: unknown): options is FlightAnchorOptions {
   return (
@@ -135,6 +135,7 @@ export function anchorFromViewpoint(
   }
 
   return fromOptions({
+    // eslint-disable-next-line @typescript-eslint/no-misused-spread
     ...viewpoint,
     coordinate: viewpoint.cameraPosition,
     duration: viewpoint.duration ?? 1,

package/src/util/flight/flightCollection.ts

@@ -1,7 +1,8 @@
 import Collection from '../collection.js';
-import { createFlightPlayer, FlightPlayer } from './flightPlayer.js';
+import type { FlightPlayer } from './flightPlayer.js';
+import { createFlightPlayer } from './flightPlayer.js';
 import VcsEvent from '../../vcsEvent.js';
-import FlightInstance from './flightInstance.js';
+import type FlightInstance from './flightInstance.js';
 import type VcsApp from '../../vcsApp.js';
 
 /**

package/src/util/flight/flightHelpers.ts

@@ -21,7 +21,7 @@ import type {
   FlightInstanceOptions,
 } from './flightInstance.js';
 import { vcsMetaVersion } from '../../layer/vectorProperties.js';
-import { FlightAnchorGeojsonFeature } from './flightAnchor.js';
+import type { FlightAnchorGeojsonFeature } from './flightAnchor.js';
 
 /**
  * exports a flight as GeoJson FeatureCollection

package/src/util/flight/flightInstance.ts

@@ -1,15 +1,18 @@
 import type { FeatureCollection, Point as GeojsonPoint } from 'geojson';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { check, oneOf } from '@vcsuite/check';
-import VcsObject, { VcsObjectOptions } from '../../vcsObject.js';
+import type { VcsObjectOptions } from '../../vcsObject.js';
+import VcsObject from '../../vcsObject.js';
 import VcsEvent from '../../vcsEvent.js';
 import { parseFlightOptionsFromGeoJson } from './flightHelpers.js';
 import { requestJson } from '../fetch.js';
-import {
+import type {
   FlightAnchor,
+  FlightAnchorGeojsonFeature,
+} from './flightAnchor.js';
+import {
   anchorFromGeojsonFeature,
   anchorToGeojsonFeature,
-  FlightAnchorGeojsonFeature,
 } from './flightAnchor.js';
 import IndexedCollection from '../indexedCollection.js';
 import { destroyCollection } from '../../vcsModuleHelpers.js';
@@ -54,7 +57,7 @@ class FlightInstance extends VcsObject {
 
   private _readyPromise: Promise<void> | null = null;
 
-  private _anchorListeners: Map<string, () => void> = new Map();
+  private _anchorListeners = new Map<string, () => void>();
 
   static getDefaultOptions(): FlightInstanceOptions {
     return {

package/src/util/flight/flightPlayer.ts

@@ -1,11 +1,11 @@
-import {
+import type {
   Cartesian3,
   CatmullRomSpline,
-  HeadingPitchRoll,
   LinearSpline,
   QuaternionSpline,
   Scene,
 } from '@vcmap-cesium/engine';
+import { HeadingPitchRoll } from '@vcmap-cesium/engine';
 import { getLogger } from '@vcsuite/logger';
 import { check } from '@vcsuite/check';
 import CesiumMap from '../../map/cesiumMap.js';

package/src/util/flight/flightRecorder.ts

@@ -0,0 +1,234 @@
+import type VcsApp from '../../vcsApp.js';
+import type Layer from '../../layer/layer.js';
+import CesiumMap from '../../map/cesiumMap.js';
+import CesiumTilesetLayer from '../../layer/cesiumTilesetLayer.js';
+import { type FlightPlayer } from './flightPlayer.js';
+
+export type FlightPathRecorderOptions = {
+  fps?: number;
+  highDefinition?: boolean;
+};
+
+async function getFlightFrames(
+  app: VcsApp,
+  player: FlightPlayer,
+  fps: number,
+  cancelToken: { cancelled: boolean },
+  maxNumberOfFrames = 100,
+): Promise<ImageBitmap[]> {
+  const scene = (app.maps.activeMap as CesiumMap).getScene()!;
+  const { canvas, globe } = scene;
+  let recordedTime = player.clock.currentTime - 1;
+  let numberOfFrames = Math.ceil(
+    (player.clock.endTime - player.clock.currentTime) * fps,
+  );
+  if (numberOfFrames > maxNumberOfFrames) {
+    numberOfFrames = maxNumberOfFrames;
+  }
+  const images = new Array<Promise<ImageBitmap>>(numberOfFrames);
+  const tilesetImpl = [...app.layers]
+    .filter(
+      (l: Layer): l is CesiumTilesetLayer =>
+        l instanceof CesiumTilesetLayer && l.active,
+    )
+    .flatMap((tileset) =>
+      tileset.getImplementationsForMap(app.maps.activeMap!),
+    );
+
+  const layerListeners = [
+    app.layers.stateChanged.addEventListener((layer) => {
+      if (layer instanceof CesiumTilesetLayer) {
+        const implementations = layer.getImplementationsForMap(
+          app.maps.activeMap!,
+        );
+        if (layer.active) {
+          tilesetImpl.push(...implementations);
+        } else {
+          implementations.forEach((impl) => {
+            tilesetImpl.splice(
+              tilesetImpl.findIndex((i) => i === impl),
+              1,
+            );
+          });
+        }
+      }
+    }),
+  ];
+
+  let currentFrame = 0;
+  await new Promise<void>((resolve) => {
+    const handler = scene.postRender.addEventListener(() => {
+      if (cancelToken.cancelled) {
+        handler();
+        return;
+      }
+
+      if (globe.tilesLoaded) {
+        if (tilesetImpl.some((impl) => !impl.cesium3DTileset?.tilesLoaded)) {
+          return;
+        }
+        if (player.clock.currentTime === recordedTime) {
+          return;
+        }
+
+        recordedTime = player.clock.currentTime;
+        images[currentFrame] = createImageBitmap(canvas);
+        if (player.clock.currentTime === player.clock.endTime) {
+          handler();
+          resolve();
+        }
+
+        let nextTick = player.clock.currentTime + 1 / fps;
+        if (nextTick >= player.clock.endTime) {
+          nextTick = player.clock.endTime;
+        }
+        player.goToTime(nextTick);
+        currentFrame += 1;
+        if (currentFrame >= numberOfFrames) {
+          handler();
+          resolve();
+        }
+      }
+    });
+  });
+
+  layerListeners.forEach((listener) => {
+    listener();
+  });
+
+  return Promise.all(images);
+}
+
+export function createFlightMovie(
+  app: VcsApp,
+  player: FlightPlayer,
+  options?: FlightPathRecorderOptions,
+): { start: () => Promise<Blob>; cancel: () => void } {
+  if (!(app.maps.activeMap instanceof CesiumMap)) {
+    throw new Error('No active Cesium map found');
+  }
+
+  const cancelToken = { cancelled: false };
+  const videoBitsPerSecond = options?.highDefinition ? 12000000 : 6000000;
+
+  const map = app.maps.activeMap;
+  const scene = map.getScene()!;
+  const { canvas } = scene;
+
+  const destinationCanvas = document.createElement('canvas');
+  destinationCanvas.width = canvas.width;
+  destinationCanvas.height = canvas.height;
+  const context = destinationCanvas.getContext('2d')!;
+
+  const stream = destinationCanvas.captureStream(options?.fps ?? 30);
+  const recorder = new MediaRecorder(stream, {
+    mimeType: 'video/webm',
+    videoBitsPerSecond,
+  });
+
+  const resetMapControls = app.maps.requestExclusiveMapControls(
+    { apiCalls: true, keyEvents: true, pointerEvents: true },
+    () => {},
+  );
+
+  const finished = new Promise<Blob>((resolve, reject) => {
+    const chunksBuffer: Blob[] = [];
+
+    recorder.ondataavailable = (event): void => {
+      if (event.data.size > 0) {
+        chunksBuffer.push(event.data);
+      }
+    };
+
+    recorder.onerror = reject;
+    recorder.onstop = (): void => {
+      resolve(new Blob(chunksBuffer, { type: 'video/webm' }));
+    };
+  });
+
+  const renderBuffer = (buffer: ImageBitmap[]): Promise<void> => {
+    let interval: ReturnType<typeof setInterval>;
+    const promise = new Promise<void>((resolve) => {
+      const frameDuration = 1000 / (options?.fps || 30);
+      let currentFrame = 0;
+      interval = setInterval(() => {
+        if (cancelToken.cancelled) {
+          resolve();
+        }
+        const image = buffer[currentFrame];
+        if (image) {
+          context.drawImage(image, 0, 0);
+          currentFrame += 1;
+          if (currentFrame >= buffer.length) {
+            resolve();
+          }
+        } else {
+          resolve();
+        }
+      }, frameDuration);
+    });
+
+    return promise
+      .then(() => {
+        clearInterval(interval);
+      })
+      .catch((err: unknown) => {
+        clearInterval(interval);
+        throw err;
+      });
+  };
+
+  const requestBuffer = async (): Promise<boolean> => {
+    const images = await getFlightFrames(
+      app,
+      player,
+      options?.fps ?? 30,
+      cancelToken,
+    );
+
+    map.getCesiumWidget()!.useDefaultRenderLoop = false;
+    if (recorder.state === 'paused') {
+      recorder.resume();
+    } else {
+      recorder.start();
+    }
+
+    await renderBuffer(images);
+    map.getCesiumWidget()!.useDefaultRenderLoop = true;
+    if (
+      player.clock.currentTime === player.clock.endTime ||
+      cancelToken.cancelled
+    ) {
+      return false;
+    }
+    recorder.pause();
+    recorder.requestData();
+    return true;
+  };
+
+  const reset = (): void => {
+    map.getCesiumWidget()!.useDefaultRenderLoop = true;
+    resetMapControls?.();
+  };
+
+  async function start(): Promise<Blob> {
+    let buffering = true;
+    while (buffering) {
+      // eslint-disable-next-line no-await-in-loop
+      buffering = await requestBuffer();
+    }
+    stream.getTracks().forEach((track) => {
+      track.stop();
+    });
+    reset();
+    return finished;
+  }
+
+  const cancel = (): void => {
+    cancelToken.cancelled = true;
+    reset();
+    recorder.stop();
+  };
+
+  return { start, cancel };
+}

package/src/util/flight/flightVisualizer.ts

@@ -1,9 +1,9 @@
+import type { Scene } from '@vcmap-cesium/engine';
 import {
   PrimitiveCollection,
   Camera,
   Cartesian3,
   HeadingPitchRoll,
-  Scene,
 } from '@vcmap-cesium/engine';
 import { createEmpty, isEmpty } from 'ol/extent.js';
 import Feature from 'ol/Feature.js';
@@ -18,7 +18,7 @@ import VcsCameraPrimitive from '../../cesium/cesiumVcsCameraPrimitive.js';
 import FlightInstance from './flightInstance.js';
 import type VcsApp from '../../vcsApp.js';
 import { getFlightPathCoordinatesFromInstance } from './flightHelpers.js';
-import LayerState from '../../layer/layerState.js';
+import type LayerState from '../../layer/layerState.js';
 import VcsEvent from '../../vcsEvent.js';
 import DeclarativeStyleItem from '../../style/declarativeStyleItem.js';
 import { markVolatile } from '../../vcsModule.js';

package/src/util/geometryHelpers.ts

@@ -1,12 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Scene } from '@vcmap-cesium/engine';
 import {
   HeightReference,
   sampleTerrainMostDetailed,
-  Scene,
 } from '@vcmap-cesium/engine';
 import { offset as offsetSphere } from 'ol/sphere.js';
 import type { Coordinate } from 'ol/coordinate.js';
 import { fromCircle } from 'ol/geom/Polygon.js';
-import { GeometryLayout } from 'ol/geom/Geometry.js';
+import type { GeometryLayout } from 'ol/geom/Geometry.js';
 import {
   Circle,
   type Geometry,
@@ -19,18 +20,8 @@ import {
   Polygon,
   SimpleGeometry,
 } from 'ol/geom.js';
-import { Feature } from 'ol';
 import Projection from './projection.js';
 import { mercatorToCartographic } from './math.js';
-import VectorProperties from '../layer/vectorProperties.js';
-import {
-  getHeightInfo,
-  isClampedHeightReference,
-  isRelativeHeightReference,
-  RelativeHeightReference,
-  VectorHeightInfo,
-} from './featureconverter/vectorHeightInfo.js';
-import { getSingleGeometriesFromGeometry } from './featureconverter/convert.js';
 
 export function getFlatCoordinatesFromSimpleGeometry(
   geometry: SimpleGeometry,
@@ -330,126 +321,3 @@ export async function from2Dto3DLayout(
     await drapeGeometryOnSurface(geometry, scene, heightReference);
   }
 }
-
-function setZCoordinate(geometry: Geometry, z: number): void {
-  const layout = geometry.getLayout();
-  const coordinates = geometry.getCoordinates() as any[];
-  const flatCoordinates = getFlatCoordinateReferences(geometry, coordinates);
-
-  flatCoordinates.forEach((c) => {
-    if (layout === 'XYM') {
-      c[3] = c[2];
-      c[2] = z;
-    } else {
-      c[2] = z;
-    }
-  });
-
-  geometry.setCoordinates(
-    coordinates,
-    layout === 'XYM' || layout === 'XYZM' ? 'XYZM' : 'XYZ',
-  );
-}
-
-export async function createAbsoluteFeature(
-  feature: Feature,
-  vectorProperties: VectorProperties,
-  scene: Scene,
-): Promise<Feature | null> {
-  const clone = feature.clone();
-  const geometry = clone.getGeometry();
-  if (!geometry) {
-    return null;
-  }
-
-  const altitudeMode = vectorProperties.getAltitudeMode(clone);
-  let groundLevel = vectorProperties.getGroundLevel(clone);
-
-  if (altitudeMode === HeightReference.NONE) {
-    if (groundLevel != null) {
-      setZCoordinate(geometry, groundLevel);
-    } else if (is2DLayout(geometry.getLayout())) {
-      await from2Dto3DLayout(geometry, scene, HeightReference.CLAMP_TO_GROUND);
-    }
-  } else if (isClampedHeightReference(altitudeMode)) {
-    if (groundLevel != null) {
-      setZCoordinate(geometry, groundLevel);
-    } else {
-      await drapeGeometryOnSurface(
-        geometry,
-        scene,
-        altitudeMode !== HeightReference.CLAMP_TO_TERRAIN
-          ? HeightReference.CLAMP_TO_GROUND
-          : HeightReference.CLAMP_TO_TERRAIN,
-      );
-    }
-  } else if (isRelativeHeightReference(altitudeMode)) {
-    const singleGeometries = getSingleGeometriesFromGeometry(geometry);
-    await Promise.all(
-      singleGeometries.map(async (singleGeometry) => {
-        const heightInfo = getHeightInfo(
-          clone,
-          singleGeometry,
-          vectorProperties,
-        ) as VectorHeightInfo<RelativeHeightReference>;
-
-        ({ groundLevel } = heightInfo);
-        if (heightInfo.clampOrigin) {
-          const cartographics = [
-            mercatorToCartographic(heightInfo.clampOrigin),
-          ];
-          if (
-            heightInfo.heightReference === HeightReference.RELATIVE_TO_TERRAIN
-          ) {
-            await sampleTerrainMostDetailed(
-              scene.terrainProvider,
-              cartographics,
-            );
-          } else {
-            await scene.sampleHeightMostDetailed(cartographics);
-          }
-          groundLevel = cartographics[0].height;
-        }
-
-        const coordinates = singleGeometry.getCoordinates() as any[];
-        const flatCoordinates = getFlatCoordinateReferences(
-          singleGeometry,
-          coordinates,
-        );
-        const { heightAboveGround } = heightInfo;
-        const setCoordinate =
-          heightAboveGround == null
-            ? (c: Coordinate): void => {
-                c[2] += groundLevel as number;
-              }
-            : (c: Coordinate): void => {
-                c[2] = (groundLevel as number) + heightAboveGround;
-              };
-        flatCoordinates.forEach(setCoordinate);
-        singleGeometry.setCoordinates(coordinates, 'XYZ');
-      }),
-    );
-
-    if (geometry instanceof MultiPoint) {
-      geometry.setCoordinates(
-        singleGeometries.map((g) => g.getCoordinates() as Coordinate),
-      );
-    } else if (geometry instanceof MultiPolygon) {
-      geometry.setCoordinates(
-        singleGeometries.map((g) => g.getCoordinates() as Coordinate[][]),
-      );
-    } else if (geometry instanceof MultiLineString) {
-      geometry.setCoordinates(
-        singleGeometries.map((g) => g.getCoordinates() as Coordinate[]),
-      );
-    } else if (geometry instanceof GeometryCollection) {
-      geometry.setGeometries(singleGeometries);
-    }
-  }
-
-  clone.set('olcs_altitudeMode', 'absolute');
-  clone.unset('olcs_groundLevel');
-  clone.unset('olcs_heightAboveGround');
-
-  return clone;
-}

package/src/util/hiddenObjects.ts

@@ -1,9 +1,8 @@
 import type GlobalHider from '../layer/globalHider.js';
-import makeOverrideCollection, {
-  OverrideCollection,
-} from './overrideCollection.js';
+import type { OverrideCollection } from './overrideCollection.js';
+import makeOverrideCollection from './overrideCollection.js';
 import Collection from './collection.js';
-import { moduleIdSymbol } from '../moduleIdSymbol.js';
+import type { moduleIdSymbol } from '../moduleIdSymbol.js';
 
 export type HiddenObject = {
   id: string;

package/src/util/indexedCollection.ts

@@ -9,7 +9,7 @@ class IndexedCollection<T> extends Collection<T> {
     iterable: Iterable<F>,
     uniqueKey?: keyof F | false,
   ): IndexedCollection<F> {
-    const collection: IndexedCollection<F> = new IndexedCollection(uniqueKey);
+    const collection = new IndexedCollection<F>(uniqueKey);
 
     if (iterable) {
       for (const i of iterable) {

package/src/util/isMobile.ts

@@ -1,11 +1,12 @@
 /**
  * returns true if we are on a mobile device including tablets
  */
-// eslint-disable-next-line import/prefer-default-export
+
 export function isMobile(): boolean {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const agent =
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     navigator.userAgent || navigator.vendor || (window.opera as string);
   return (
     /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(

package/src/util/layerCollection.ts

@@ -17,6 +17,12 @@ import { destroyCollection } from '../vcsModuleHelpers.js';
  */
 export const maxZIndex = Number.MAX_SAFE_INTEGER;
 
+/**
+ * The largest integer zindex which can be safely assigned to a layer - 50
+ * You should use this for built-in layers that should render on top
+ */
+export const maxZIndexMin50 = maxZIndex - 50;
+
 export type LayerCollectionOptions = {
   vectorClusterGroupCollection?: VectorClusterGroupCollection;
   destroyVectorClusterGroupCollection?: boolean;
@@ -34,11 +40,10 @@ class LayerCollection extends IndexedCollection<Layer> {
    * Creates a LayerCollection from an iterable of layers, such as an Array.
    * @param  iterable
    */
-  static from(iterable: Iterable<Layer>): LayerCollection {
+  static from(iterable?: Iterable<Layer>): LayerCollection {
     const collection = new LayerCollection();
 
     if (iterable) {
-      // eslint-disable-next-line no-restricted-syntax
       for (const layer of iterable) {
         collection.add(layer);
       }