@equinor/esv-intersection 3.1.9 → 4.1.0

package/src/layers/CalloutCanvasLayer.ts

@@ -1,7 +1,12 @@
 import { ScaleLinear } from 'd3-scale';
 
 import { CanvasLayer } from './base/CanvasLayer';
-import { OnUpdateEvent, Annotation, OnRescaleEvent, BoundingBox } from '../interfaces';
+import {
+  OnUpdateEvent,
+  Annotation,
+  OnRescaleEvent,
+  BoundingBox,
+} from '../interfaces';
 import { calcSize, isOverlapping, getOverlapOffset } from '../utils';
 import { LayerOptions } from './base/Layer';
 
@@ -46,7 +51,9 @@ export type Callout = {
   dy: number;
 };
 
-export interface CalloutOptions<T extends Annotation[]> extends LayerOptions<T> {
+export interface CalloutOptions<
+  T extends Annotation[],
+> extends LayerOptions<T> {
   minFontSize?: number;
   maxFontSize?: number;
   fontSizeFactor?: number;
@@ -98,8 +105,12 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
       this.backgroundColor = DEFAULT_BACKGROUND_COLOR;
     }
 
-    this.backgroundPadding = options?.backgroundPadding || DEFAULT_BACKGROUND_PADDING;
-    this.backgroundBorderRadius = getValueOrDefault(options?.backgroundBorderRadius, DEFAULT_BACKGROUND_BORDER_RADIUS);
+    this.backgroundPadding =
+      options?.backgroundPadding || DEFAULT_BACKGROUND_PADDING;
+    this.backgroundBorderRadius = getValueOrDefault(
+      options?.backgroundBorderRadius,
+      DEFAULT_BACKGROUND_BORDER_RADIUS,
+    );
   }
 
   setGroupFilter(filter: string[]): void {
@@ -116,7 +127,8 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
   override onRescale(event: OnRescaleEvent): void {
     super.onRescale(event);
-    const isPanning = this.rescaleEvent && this.rescaleEvent.xRatio === event.xRatio;
+    const isPanning =
+      this.rescaleEvent && this.rescaleEvent.xRatio === event.xRatio;
     this.rescaleEvent = event;
 
     this.render(isPanning);
@@ -132,21 +144,45 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
       const { xScale, yScale, xBounds } = this.rescaleEvent;
 
-      const fontSize = calcSize(this.fontSizeFactor, this.minFontSize, this.maxFontSize, xScale);
+      const fontSize = calcSize(
+        this.fontSizeFactor,
+        this.minFontSize,
+        this.maxFontSize,
+        xScale,
+      );
 
       if (!isPanning || this.callouts.length <= 0) {
         const { data, ctx, groupFilter } = this;
-        const { calculateDisplacementFromBottom } = this.referenceSystem.options;
-        const isLeftToRight = calculateDisplacementFromBottom ? xBounds[0] < xBounds[1] : xBounds[0] > xBounds[1];
+        const { calculateDisplacementFromBottom } =
+          this.referenceSystem.options;
+        const isLeftToRight = calculateDisplacementFromBottom
+          ? xBounds[0] < xBounds[1]
+          : xBounds[0] > xBounds[1];
         const scale = 0;
 
         ctx != null && (ctx.font = `bold ${fontSize}px arial`);
-        const filtered = data.filter((d: Annotation) => groupFilter.length <= 0 || groupFilter.includes(d.group));
-        const offset = calcSize(this.offsetFactor, this.offsetMin, this.offsetMax, xScale);
-        this.callouts = this.positionCallouts(filtered, isLeftToRight, xScale, yScale, scale, fontSize, offset);
+        const filtered = data.filter(
+          (d: Annotation) =>
+            groupFilter.length <= 0 || groupFilter.includes(d.group),
+        );
+        const offset = calcSize(
+          this.offsetFactor,
+          this.offsetMin,
+          this.offsetMax,
+          xScale,
+        );
+        this.callouts = this.positionCallouts(
+          filtered,
+          isLeftToRight,
+          xScale,
+          yScale,
+          scale,
+          fontSize,
+          offset,
+        );
       }
 
-      this.callouts.forEach((callout) => {
+      this.callouts.forEach(callout => {
         const { pos, title, color } = callout;
         const x = xScale(pos.x);
         const y = yScale(pos.y);
@@ -160,12 +196,24 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
           offsetY: callout.dy,
         };
 
-        this.renderCallout(title, callout.label, calloutBB, color, callout.alignment);
+        this.renderCallout(
+          title,
+          callout.label,
+          calloutBB,
+          color,
+          callout.alignment,
+        );
       });
     });
   }
 
-  private renderBackground(title: string, label: string, x: number, y: number, fontSize: number): void {
+  private renderBackground(
+    title: string,
+    label: string,
+    x: number,
+    y: number,
+    fontSize: number,
+  ): void {
     const { ctx } = this;
 
     if (ctx == null) {
@@ -209,12 +257,27 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     }
   }
 
-  private renderAnnotation = (title: string, label: string, x: number, y: number, fontSize: number, color: string): void => {
+  private renderAnnotation = (
+    title: string,
+    label: string,
+    x: number,
+    y: number,
+    fontSize: number,
+    color: string,
+  ): void => {
     this.renderText(title, x, y - fontSize, fontSize, color, 'arial', 'bold');
     this.renderText(label, x, y, fontSize, color);
   };
 
-  private renderText(title: string, x: number, y: number, fontSize: number, color: string, font = 'arial', fontStyle = 'normal'): void {
+  private renderText(
+    title: string,
+    x: number,
+    y: number,
+    fontSize: number,
+    color: string,
+    font = 'arial',
+    fontStyle = 'normal',
+  ): void {
     const { ctx } = this;
     if (ctx != null) {
       ctx.font = `${fontStyle} ${fontSize}px ${font}`;
@@ -223,7 +286,12 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     }
   }
 
-  private measureTextWidth(title: string, fontSize: number, font = 'arial', fontStyle = 'normal'): number {
+  private measureTextWidth(
+    title: string,
+    fontSize: number,
+    font = 'arial',
+    fontStyle = 'normal',
+  ): number {
     const { ctx } = this;
 
     if (ctx == null) {
@@ -246,12 +314,19 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     }
   }
 
-  private renderCallout(title: string, label: string, boundingBox: BoundingBox, color: string, location: string): void {
+  private renderCallout(
+    title: string,
+    label: string,
+    boundingBox: BoundingBox,
+    color: string,
+    location: string,
+  ): void {
     const pos = this.getPosition(boundingBox, location);
     const { x, y } = pos;
     const { height, width, x: dotX, y: dotY } = boundingBox;
 
-    const placeLeft = location === Location.topright || location === Location.bottomright;
+    const placeLeft =
+      location === Location.topright || location === Location.bottomright;
 
     if (this.backgroundActive) {
       this.renderBackground(title, label, x, y, height);
@@ -262,7 +337,15 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     this.renderLine(x, y, width, dotX, dotY, color, placeLeft);
   }
 
-  private renderLine = (x: number, y: number, width: number, dotX: number, dotY: number, color: string, placeLeft = true): void => {
+  private renderLine = (
+    x: number,
+    y: number,
+    width: number,
+    dotX: number,
+    dotY: number,
+    color: string,
+    placeLeft = true,
+  ): void => {
     const { ctx } = this;
     const textX = placeLeft ? x : x + width;
     const inverseTextX = placeLeft ? x + width : x;
@@ -327,7 +410,7 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     }
     const alignment = isLeftToRight ? Location.topleft : Location.topright;
 
-    const nodes = annotations.map((a) => {
+    const nodes = annotations.map(a => {
       const pos = a.pos ? a.pos : this.referenceSystem?.project(a.md!)!;
       return {
         title: a.title,
@@ -336,7 +419,14 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
         pos: { x: pos?.[0]!, y: pos?.[1]! },
         group: a.group,
         alignment,
-        boundingBox: this.getAnnotationBoundingBox(a.title, a.label, pos, xScale, yScale, fontSize),
+        boundingBox: this.getAnnotationBoundingBox(
+          a.title,
+          a.label,
+          pos,
+          xScale,
+          yScale,
+          fontSize,
+        ),
         dx: offset,
         dy: offset,
       };
@@ -382,14 +472,21 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     return bbox;
   }
 
-  chooseTopOrBottomPosition(nodes: Callout[], bottom: Callout[], top: Callout[]): void {
+  chooseTopOrBottomPosition(
+    nodes: Callout[],
+    bottom: Callout[],
+    top: Callout[],
+  ): void {
     for (let i = nodes.length - 2; i >= 0; --i) {
       const node = nodes[i]!;
       const prevNode = top[0]!;
 
       const overlap = isOverlapping(node.boundingBox, prevNode.boundingBox);
       if (overlap) {
-        node.alignment = node.alignment === Location.topleft ? Location.bottomright : Location.bottomleft;
+        node.alignment =
+          node.alignment === Location.topleft
+            ? Location.bottomright
+            : Location.bottomleft;
         bottom.push(node);
         if (i > 0) {
           top.unshift(nodes[--i]!);
@@ -405,7 +502,10 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
       const currentNode = top[i]!;
       for (let j = top.length - 1; j > i; --j) {
         const prevNode = top[j]!;
-        const overlap = getOverlapOffset(currentNode.boundingBox, prevNode.boundingBox);
+        const overlap = getOverlapOffset(
+          currentNode.boundingBox,
+          prevNode.boundingBox,
+        );
         if (overlap) {
           currentNode.dy += overlap.dy;
           currentNode.boundingBox.y -= overlap.dy;
@@ -419,7 +519,10 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
       const currentNode = bottom[i]!;
       for (let j = bottom.length - 1; j > i; --j) {
         const prevNode = bottom[j]!;
-        const overlap = getOverlapOffset(prevNode.boundingBox, currentNode.boundingBox);
+        const overlap = getOverlapOffset(
+          prevNode.boundingBox,
+          currentNode.boundingBox,
+        );
         if (overlap) {
           currentNode.dy += overlap.dy;
           currentNode.boundingBox.y += overlap.dy;

package/src/layers/CustomDisplayObjects/ComplexRope.ts

@@ -1,8 +1,8 @@
-import { Mesh, MeshMaterial, IPoint, Renderer, Texture, WRAP_MODES } from 'pixi.js';
+import { Mesh, Point, Texture } from 'pixi.js';
 import { ComplexRopeGeometry } from './ComplexRopeGeometry';
 
 export type ComplexRopeSegment = {
-  points: IPoint[];
+  points: Point[];
   diameter: number;
 };
 
@@ -22,23 +22,21 @@ export class ComplexRope extends Mesh {
    */
   constructor(texture: Texture, segments: ComplexRopeSegment[]) {
     const ropeGeometry = new ComplexRopeGeometry(segments);
-    const meshMaterial = new MeshMaterial(texture);
 
     // attempt to set UV wrapping, will fail on non-power of two textures
-    texture.baseTexture.wrapMode = WRAP_MODES.REPEAT;
+    texture.source.addressMode = 'repeat';
 
-    super(ropeGeometry, meshMaterial);
+    super({ geometry: ropeGeometry, texture });
 
     this.autoUpdate = true;
-  }
-
-  override _render(renderer: Renderer): void {
-    const geometry: ComplexRopeGeometry = this.geometry as ComplexRopeGeometry;
 
-    if (this.autoUpdate) {
-      geometry.update();
-    }
+    this.onRender = () => {
+      const geometry: ComplexRopeGeometry = this
+        .geometry as ComplexRopeGeometry;
 
-    super._render(renderer);
+      if (this.autoUpdate) {
+        geometry.update();
+      }
+    };
   }
 }

package/src/layers/CustomDisplayObjects/ComplexRopeGeometry.ts

@@ -13,10 +13,14 @@ export class ComplexRopeGeometry extends MeshGeometry {
    * @param segments - An array of segments with points and diameter to construct this rope.
    */
   constructor(segments: ComplexRopeSegment[]) {
-    const pointCount = sum(segments, (segment) => segment.points.length);
+    const pointCount = sum(segments, segment => segment.points.length);
 
-    // @ts-expect-error Temporary fix until pixi.js is updated
-    super(new Float32Array(pointCount * 4), new Float32Array(pointCount * 4), new Uint16Array((pointCount - 1) * 6));
+    super({
+      positions: new Float32Array(pointCount * 4),
+      uvs: new Float32Array(pointCount * 4),
+      indices: new Uint32Array((pointCount - 1) * 6),
+      shrinkBuffersToFit: true,
+    });
 
     this.segments = segments;
 
@@ -28,7 +32,7 @@ export class ComplexRopeGeometry extends MeshGeometry {
    * @readonly
    */
   get width(): number {
-    return max(this.segments, (segment) => segment.diameter)!;
+    return max(this.segments, segment => segment.diameter)!;
   }
 
   /** Refreshes Rope indices and uvs */
@@ -39,11 +43,11 @@ export class ComplexRopeGeometry extends MeshGeometry {
       return;
     }
 
-    const vertexBuffer = this.getBuffer('aVertexPosition');
-    const uvBuffer = this.getBuffer('aTextureCoord');
+    const vertexBuffer = this.getBuffer('aPosition');
+    const uvBuffer = this.getBuffer('aUV');
     const indexBuffer = this.getIndex();
 
-    const pointCount = sum(segments, (segment) => segment.points.length);
+    const pointCount = sum(segments, segment => segment.points.length);
 
     // if too few points, or texture hasn't got UVs set yet just move on.
     if (pointCount < 1) {
@@ -52,11 +56,8 @@ export class ComplexRopeGeometry extends MeshGeometry {
 
     // if the number of points has changed we will need to recreate the arraybuffers
     if (vertexBuffer.data.length / 4 !== pointCount) {
-      // @ts-expect-error Temporary fix until pixi.js is updated
       vertexBuffer.data = new Float32Array(pointCount * 4);
-      // @ts-expect-error Temporary fix until pixi.js is updated
       uvBuffer.data = new Float32Array(pointCount * 4);
-      // @ts-expect-error Temporary fix until pixi.js is updated
       indexBuffer.data = new Uint16Array((pointCount - 1) * 6);
     }
 
@@ -69,7 +70,7 @@ export class ComplexRopeGeometry extends MeshGeometry {
     uvs[3] = 1;
 
     const segmentCount = segments.length;
-    const maxDiameter = max(segments, (segment) => segment.diameter)!;
+    const maxDiameter = max(segments, segment => segment.diameter)!;
 
     let amount = 0;
     let uvIndex = 0;
@@ -125,7 +126,7 @@ export class ComplexRopeGeometry extends MeshGeometry {
   /** refreshes vertices of Rope mesh */
   public updateVertices(): void {
     const segments = this.segments;
-    const pointCount = sum(segments, (segment) => segment.points.length);
+    const pointCount = sum(segments, segment => segment.points.length);
 
     if (pointCount < 1) {
       return;
@@ -182,7 +183,7 @@ export class ComplexRopeGeometry extends MeshGeometry {
   public update(): void {
     // TODO: Possible optimiztion to be had here
     // Figure out if/when it is enough to only update verticies with this.updateVertices()
-    // See PIXI.SimpleRope.update() for ideas
+    // See MeshRope.update() for ideas
 
     // build() sets indicies and uvs and then calls this.updateVertices()
     this.build();

package/src/layers/CustomDisplayObjects/FixedWidthSimpleRope.ts

@@ -1,4 +1,4 @@
-import { IPoint, Mesh, MeshMaterial, Renderer, RopeGeometry, Texture, WRAP_MODES } from 'pixi.js';
+import { Point, Mesh, RopeGeometry, Texture } from 'pixi.js';
 import { FixedWidthSimpleRopeGeometry } from './FixedWidthSimpleRopeGeometry';
 
 /**
@@ -15,27 +15,24 @@ export class FixedWidthSimpleRope extends Mesh {
   /**
    * Note: The wrap mode of the texture is set to REPEAT if `textureScale` is positive.
    * @param texture - The texture to use on the rope. (attempt to set UV wrapping, will fail on non-power of two textures)
-   * @param points - An array of {@link PIXI.Point} objects to construct this rope.
+   * @param points - An array of {@link Point} objects to construct this rope.
    * @param width - Width of rope
    */
-  constructor(texture: Texture, points: IPoint[], width: number) {
+  constructor(texture: Texture, points: Point[], width: number) {
     const ropeGeometry = new FixedWidthSimpleRopeGeometry(points, width);
-    const meshMaterial = new MeshMaterial(texture);
 
-    texture.baseTexture.wrapMode = WRAP_MODES.REPEAT;
+    texture.source.addressMode = 'repeat';
 
-    super(ropeGeometry, meshMaterial);
+    super({ geometry: ropeGeometry, texture });
 
     this.autoUpdate = true;
-  }
-
-  override _render(renderer: Renderer): void {
-    const geometry: RopeGeometry = this.geometry as RopeGeometry;
 
-    if (this.autoUpdate) {
-      geometry.update();
-    }
+    this.onRender = () => {
+      const geometry: RopeGeometry = this.geometry as RopeGeometry;
 
-    super._render(renderer);
+      if (this.autoUpdate) {
+        geometry.update();
+      }
+    };
   }
 }

package/src/layers/CustomDisplayObjects/FixedWidthSimpleRopeGeometry.ts

@@ -1,18 +1,21 @@
-import { IPoint, MeshGeometry } from 'pixi.js';
+import { Point, MeshGeometry } from 'pixi.js';
 
 export class FixedWidthSimpleRopeGeometry extends MeshGeometry {
-  public points: IPoint[];
+  public points: Point[];
   _width: number;
   /**
    * @param {number} [width=200] - The width (i.e., thickness) of the rope.
-   * @param {PIXI.Point[]} [points] - An array of PIXI.Point objects to construct this rope.
+   * @param {Point[]} [points] - An array of Point objects to construct this rope.
    */
-  constructor(points: IPoint[], width = 200) {
-    // @ts-expect-error Temporary fix until pixi.js is updated
-    super(new Float32Array(points.length * 4), new Float32Array(points.length * 4), new Uint16Array((points.length - 1) * 6));
+  constructor(points: Point[], width = 200) {
+    super({
+      positions: new Float32Array(points.length * 4),
+      uvs: new Float32Array(points.length * 4),
+      indices: new Uint32Array((points.length - 1) * 6),
+    });
     /**
      * An array of points that determine the rope
-     * @member {PIXI.Point[]}
+     * @member {Point[]}
      */
     this.points = points;
     /**
@@ -45,20 +48,18 @@ export class FixedWidthSimpleRopeGeometry extends MeshGeometry {
     if (!points) {
       return;
     }
-    const vertexBuffer = this.getBuffer('aVertexPosition');
-    const uvBuffer = this.getBuffer('aTextureCoord');
+    const vertexBuffer = this.getBuffer('aPosition');
+    const uvBuffer = this.getBuffer('aUV');
     const indexBuffer = this.getIndex();
+
     // if too little points, or texture hasn't got UVs set yet just move on.
     if (points.length < 1) {
       return;
     }
     // if the number of points has changed we will need to recreate the arraybuffers
     if (vertexBuffer.data.length / 4 !== points.length) {
-      // @ts-expect-error Temporary fix until pixi.js is updated
       vertexBuffer.data = new Float32Array(points.length * 4);
-      // @ts-expect-error Temporary fix until pixi.js is updated
       uvBuffer.data = new Float32Array(points.length * 4);
-      // @ts-expect-error Temporary fix until pixi.js is updated
       indexBuffer.data = new Uint16Array((points.length - 1) * 6);
     }
     const uvs = uvBuffer.data;

package/src/layers/CustomDisplayObjects/UniformTextureStretchRope.ts

@@ -1,4 +1,4 @@
-import { IPoint, Mesh, MeshMaterial, Renderer, Texture } from 'pixi.js';
+import { Point, Mesh, Texture } from 'pixi.js';
 import { UniformTextureStretchRopeGeometry } from './UniformTextureStretchRopeGeometry';
 
 /**
@@ -13,27 +13,26 @@ export class UniformTextureStretchRope extends Mesh {
 
   /**
    * @param texture - The texture to use on the rope.
-   * @param points - An array of {@link PIXI.Point} objects to construct this rope.
+   * @param points - An array of {@link Point} objects to construct this rope.
    */
-  constructor(texture: Texture, points: IPoint[]) {
-    const ropeGeometry = new UniformTextureStretchRopeGeometry(points, texture.height);
-    const meshMaterial = new MeshMaterial(texture);
+  constructor(texture: Texture, points: Point[]) {
+    const ropeGeometry = new UniformTextureStretchRopeGeometry(
+      points,
+      texture.height,
+    );
 
-    super(ropeGeometry, meshMaterial);
+    super({ geometry: ropeGeometry, texture });
 
     this.autoUpdate = true;
-  }
-
-  override _render(renderer: Renderer): void {
-    const geometry: UniformTextureStretchRopeGeometry = this.geometry as UniformTextureStretchRopeGeometry;
 
-    // TODO: Possible optimiztion here
-    // Find correct check for when to update geometry
-    if (this.autoUpdate || geometry._width !== this.shader.texture.height) {
-      geometry._width = this.shader.texture.height;
-      geometry.update();
-    }
+    this.onRender = () => {
+      const geometry: UniformTextureStretchRopeGeometry = this
+        .geometry as UniformTextureStretchRopeGeometry;
 
-    super._render(renderer);
+      if (this.autoUpdate || geometry._width !== this.shader?.texture.height) {
+        geometry._width = this.shader?.texture.height ?? 0;
+        geometry.update();
+      }
+    };
   }
 }

package/src/layers/CustomDisplayObjects/UniformTextureStretchRopeGeometry.ts

@@ -1,12 +1,12 @@
 import { MeshGeometry } from 'pixi.js';
-import type { IPoint } from 'pixi.js';
+import type { Point } from 'pixi.js';
 
 /**
  * UniformTextureStretchRopeGeometry allows you to draw a geometry across several points and then manipulate these points.
  */
 export class UniformTextureStretchRopeGeometry extends MeshGeometry {
   /** An array of points that determine the rope. */
-  public points: IPoint[];
+  public points: Point[];
 
   /**
    * The width (i.e., thickness) of the rope.
@@ -16,11 +16,14 @@ export class UniformTextureStretchRopeGeometry extends MeshGeometry {
 
   /**
    * @param width - The width (i.e., thickness) of the rope.
-   * @param points - An array of PIXI.Point objects to construct this rope.
+   * @param points - An array of Point objects to construct this rope.
    */
-  constructor(points: IPoint[], width = 200) {
-    // @ts-expect-error Temporary fix until pixi.js is updated
-    super(new Float32Array(points.length * 4), new Float32Array(points.length * 4), new Uint16Array((points.length - 1) * 6));
+  constructor(points: Point[], width = 200) {
+    super({
+      positions: new Float32Array(points.length * 4),
+      uvs: new Float32Array(points.length * 4),
+      indices: new Uint32Array((points.length - 1) * 6),
+    });
 
     this.points = points;
     this._width = width;
@@ -36,8 +39,8 @@ export class UniformTextureStretchRopeGeometry extends MeshGeometry {
       return;
     }
 
-    const vertexBuffer = this.getBuffer('aVertexPosition');
-    const uvBuffer = this.getBuffer('aTextureCoord');
+    const vertexBuffer = this.getBuffer('aPosition');
+    const uvBuffer = this.getBuffer('aUV');
     const indexBuffer = this.getIndex();
 
     // if too few points, or texture hasn't got UVs set yet just move on.
@@ -47,11 +50,8 @@ export class UniformTextureStretchRopeGeometry extends MeshGeometry {
 
     // if the number of points has changed we will need to recreate the arraybuffers
     if (vertexBuffer.data.length / 4 !== points.length) {
-      // @ts-expect-error Temporary fix until pixi.js is updated
       vertexBuffer.data = new Float32Array(points.length * 4);
-      // @ts-expect-error Temporary fix until pixi.js is updated
       uvBuffer.data = new Float32Array(points.length * 4);
-      // @ts-expect-error Temporary fix until pixi.js is updated
       indexBuffer.data = new Uint16Array((points.length - 1) * 6);
     }
 

package/src/layers/GeomodelCanvasLayer.ts

@@ -59,8 +59,12 @@ export class GeomodelCanvasLayer<T extends SurfaceData> extends CanvasLayer<T> {
 
     requestAnimationFrame(() => {
       this.clearCanvas();
-      this.surfaceAreasPaths.forEach((p: SurfacePaths) => this.drawPolygonPath(p.color, p.path));
-      this.surfaceLinesPaths.forEach((l: SurfacePaths) => this.drawLinePath(l.color, l.path));
+      this.surfaceAreasPaths.forEach((p: SurfacePaths) =>
+        this.drawPolygonPath(p.color, p.path),
+      );
+      this.surfaceLinesPaths.forEach((l: SurfacePaths) =>
+        this.drawLinePath(l.color, l.path),
+      );
     });
   }
 
@@ -85,7 +89,10 @@ export class GeomodelCanvasLayer<T extends SurfaceData> extends CanvasLayer<T> {
     this.surfaceLinesPaths =
       this.data?.lines.reduce((acc: SurfacePaths[], l: SurfaceLine) => {
         const lines = this.generateLinePaths(l);
-        const mapped: SurfacePaths[] = lines.map((path: Path2D) => ({ color: this.colorToCSSColor(l.color), path }));
+        const mapped: SurfacePaths[] = lines.map((path: Path2D) => ({
+          color: this.colorToCSSColor(l.color),
+          path,
+        }));
         acc.push(...mapped);
         return acc;
       }, []) ?? [];