@equinor/esv-intersection 3.1.8 → 4.0.0

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,22 @@ 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[]) {
+  constructor(texture: Texture, points: Point[]) {
     const ropeGeometry = new UniformTextureStretchRopeGeometry(points, texture.height);
-    const meshMaterial = new MeshMaterial(texture);
 
-    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/GeomodelLayerV2.ts

@@ -77,11 +77,10 @@ export class GeomodelLayerV2<T extends SurfaceData> extends PixiLayer<T> {
 
   generateAreaPolygon = (s: SurfaceArea): void => {
     const g = new Graphics();
-    g.lineStyle(1, s.color as number, 1);
-    g.beginFill(s.color as number);
     const polygons = this.createPolygons(s.data);
-    polygons.forEach((polygon: number[]) => g.drawPolygon(polygon));
-    g.endFill();
+    polygons.forEach((polygon: number[]) => g.poly(polygon));
+    g.setStrokeStyle({ width: 1, color: s.color as number, alpha: 1 });
+    g.fill({ color: s.color as number });
     this.addChild(g);
   };
 
@@ -90,7 +89,7 @@ export class GeomodelLayerV2<T extends SurfaceData> extends PixiLayer<T> {
     const { data: d } = s;
 
     const alignment = 0.5;
-    g.lineStyle(SURFACE_LINE_WIDTH, s.color as number, 1, alignment, true);
+    g.setStrokeStyle({ width: SURFACE_LINE_WIDTH, color: s.color as number, alpha: 1, alignment });
 
     let penDown = false;
     for (let i = 0; i < d.length; i++) {

package/src/layers/SchematicLayer.ts

@@ -1,6 +1,6 @@
 import { max } from 'd3-array';
 import { scaleLinear, ScaleLinear } from 'd3-scale';
-import { Graphics, groupD8, IPoint, Point, Rectangle, SimpleRope, Texture } from 'pixi.js';
+import { Assets, Graphics, groupD8, Point, Rectangle, MeshRope, Texture } from 'pixi.js';
 import { DashLine } from '../vendor/pixi-dashed-line';
 import { LayerOptions, PixiLayer, PixiRenderApplication } from '.';
 import { DEFAULT_TEXTURE_SIZE, EXAGGERATED_DIAMETER, HOLE_OUTLINE, SCREEN_OUTLINE } from '../constants';
@@ -186,14 +186,14 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     this.textureSymbolCacheArray = null;
   }
 
-  public override onUpdate(event: OnUpdateEvent<T>): void {
+  public override async onUpdate(event: OnUpdateEvent<T>): Promise<void> {
     super.onUpdate(event);
     this.clearLayer();
-    this.preRender();
+    await this.preRender();
     this.render();
   }
 
-  public override onRescale(event: OnRescaleEvent): void {
+  public override async onRescale(event: OnRescaleEvent): Promise<void> {
     const shouldRecalculate = this.scalingFactors.zFactor !== event.zFactor;
 
     this.scalingFactors = { height: event.height, zFactor: event.zFactor, yScale: event.yScale };
@@ -205,13 +205,13 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     this.setContainerScale(event.xRatio * (flippedX ? -1 : 1), yRatio * (flippedY ? -1 : 1));
     if (shouldRecalculate) {
       this.clearLayer();
-      this.preRender();
+      await this.preRender();
     }
 
     this.render();
   }
 
-  public override setVisibility(isVisible: boolean, layerId: string) {
+  public override async setVisibility(isVisible: boolean, layerId: string) {
     if (layerId === this.id) {
       super.setVisibility(isVisible, layerId);
       return;
@@ -225,7 +225,7 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     if (keyFound) {
       this.internalLayerVisibility[keyFound as keyof InternalLayerVisibility] = isVisible;
       this.clearLayer();
-      this.preRender();
+      await this.preRender();
       this.render();
     }
   }
@@ -254,11 +254,10 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     return path.map((p) => new Point(p.point[0], y(p.point[1]!)));
   };
 
-  protected drawBigPolygon = (coords: IPoint[], color = 0x000000) => {
+  protected drawBigPolygon = (coords: Point[], color = 0x000000) => {
     const polygon = new Graphics();
-    polygon.beginFill(color);
-    polygon.drawPolygon(coords);
-    polygon.endFill();
+    polygon.poly(coords);
+    polygon.fill(color);
 
     this.addChild(polygon);
   };
@@ -268,7 +267,7 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
       return undefined;
     }
 
-    const rope: SimpleRope = new SimpleRope(texture, path, 1);
+    const rope: MeshRope = new MeshRope({ texture, points: path, textureScale: 1 });
     rope.tint = tint || rope.tint;
     this.addChild(rope);
   }
@@ -296,7 +295,6 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     const startPointLeft = leftPathReverse[0]!;
 
     const line = new Graphics();
-    line.lineStyle(lineWidth, lineColor, undefined, lineAlignment);
     line.moveTo(startPointRight.x, startPointRight.y);
     rightPath.forEach((p: Point) => line.lineTo(p.x, p.y));
 
@@ -310,6 +308,8 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
       line.lineTo(startPointRight.x, startPointRight.y);
     }
 
+    line.stroke({ width: lineWidth, color: lineColor, alignment: lineAlignment });
+
     this.addChild(line);
   }
 
@@ -329,11 +329,11 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     const [dashedAlignment, solidAlignment] = flippedPaths ? [1, 0] : [0, 1];
 
     const graphics = new Graphics();
-    graphics.lineStyle(lineWidth, convertColor(lineColor), undefined, solidAlignment);
 
     const startPointLinePath = linePath[0]!;
     graphics.moveTo(startPointLinePath.x, startPointLinePath.y);
     linePath.forEach((p: Point) => graphics.lineTo(p.x, p.y));
+    graphics.setStrokeStyle({ width: lineWidth, color: convertColor(lineColor), alignment: solidAlignment });
 
     const dashedLine = new DashLine(graphics, {
       dash: [windowOptions.dashLength, windowOptions.spaceLength],
@@ -353,7 +353,7 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
 
   private perforationRopeAndTextureReferences: { rope: ComplexRope; texture: Texture }[] = [];
 
-  public preRender(): void {
+  public async preRender(): Promise<void> {
     if (!this.data || !this.referenceSystem) {
       return;
     }
@@ -361,7 +361,7 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     const { exaggerationFactor = 1 } = this.options as SchematicLayerOptions<T>;
     const { holeSizes, casings, cements, completion, symbols, pAndA, perforations } = this.data;
 
-    this.updateSymbolCache(symbols);
+    await this.updateSymbolCache(symbols);
 
     holeSizes.sort((a: HoleSize, b: HoleSize) => b.diameter - a.diameter);
     const maxHoleDiameter =
@@ -420,12 +420,16 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     );
 
     this.perforationRopeAndTextureReferences.forEach(({ rope, texture }) => {
-      rope.destroy({
-        children: true,
-        texture: true,
-        baseTexture: true,
-      });
-      texture.destroy(true);
+      if (!rope.destroyed) {
+        rope.destroy({
+          children: true,
+          texture: true,
+          textureSource: true,
+        });
+      }
+      if (texture) {
+        texture.destroy(true);
+      }
     });
     this.perforationRopeAndTextureReferences = [];
 
@@ -524,7 +528,7 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     }
   }
 
-  private updateSymbolCache(symbols: { [key: string]: string }) {
+  private async updateSymbolCache(symbols: { [key: string]: string }) {
     if (!this.textureSymbolCacheArray) {
       this.textureSymbolCacheArray = {};
     }
@@ -533,11 +537,12 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     }
 
     const existingKeys = Object.keys(this.textureSymbolCacheArray);
-    Object.entries(symbols).forEach(([key, symbol]: [string, string]) => {
+    const promises = Object.entries(symbols).map(async ([key, symbol]: [string, string]) => {
       if (!existingKeys.includes(key) && this.textureSymbolCacheArray) {
-        this.textureSymbolCacheArray[key] = Texture.from(symbol);
+        this.textureSymbolCacheArray[key] = await Assets.load(symbol);
       }
     });
+    await Promise.all(promises);
   }
 
   private drawCementPlug(cementPlug: CementPlug, casings: Casing[], completion: Completion[], holes: HoleSize[]) {
@@ -610,8 +615,8 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
   }
 
   private getSymbolTexture(symbolKey: string, diameter: number): Texture | undefined {
-    const baseTexture = this.textureSymbolCacheArray?.[symbolKey]?.baseTexture;
-    return baseTexture ? new Texture(baseTexture, undefined, new Rectangle(0, 0, 0, diameter), undefined, groupD8.MAIN_DIAGONAL) : undefined;
+    const baseTexture = this.textureSymbolCacheArray?.[symbolKey]?.source;
+    return baseTexture ? new Texture({ source: baseTexture, orig: new Rectangle(0, 0, 0, diameter), rotate: groupD8.MAIN_DIAGONAL }) : undefined;
   }
 
   private drawHoleSize = (maxHoleDiameter: number, holeObject: HoleSize): void => {
@@ -639,7 +644,7 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
       return undefined;
     }
 
-    const rope: SimpleRope = new SimpleRope(texture, path, maxHoleDiameter / DEFAULT_TEXTURE_SIZE);
+    const rope: MeshRope = new MeshRope({ texture, points: path, textureScale: maxHoleDiameter / DEFAULT_TEXTURE_SIZE });
 
     this.addChild(rope);
   }
@@ -655,10 +660,13 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
       this.holeTextureCache = createHoleBaseTexture(holeOptions, width, height);
     }
 
-    const baseTexture = this.holeTextureCache.baseTexture;
+    const baseTexture = this.holeTextureCache.source;
     const sidePadding = (height - textureDiameter) / 2;
     const frame = new Rectangle(0, sidePadding, width, textureDiameter);
-    const texture = new Texture(baseTexture, frame);
+    const texture = new Texture({
+      source: baseTexture,
+      frame,
+    });
 
     return texture;
   }
@@ -761,7 +769,10 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
 
   private createCasingTexture(diameter: number): Texture {
     const textureWidthPO2 = 16;
-    return new Texture(Texture.WHITE.baseTexture, undefined, new Rectangle(0, 0, textureWidthPO2, diameter));
+    return new Texture({
+      source: Texture.WHITE.source,
+      orig: new Rectangle(0, 0, textureWidthPO2, diameter),
+    });
   }
 
   private drawShoe(casingEnd: number, casingRadius: number): void {

package/src/layers/base/PixiLayer.ts

@@ -1,4 +1,4 @@
-import { IRenderer, Application, autoDetectRenderer, Container, DisplayObject, IRendererOptionsAuto, Renderer, RENDERER_TYPE } from 'pixi.js';
+import { autoDetectRenderer, AutoDetectOptions, Container, ContainerChild, Renderer, RendererType } from 'pixi.js';
 import { Layer, LayerOptions } from './Layer';
 import { OnMountEvent, OnRescaleEvent, OnResizeEvent, OnUnmountEvent } from '../../interfaces';
 import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
@@ -11,9 +11,9 @@ import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
 export class PixiRenderApplication {
   stage: Container | undefined;
 
-  renderer: IRenderer<HTMLCanvasElement> | undefined;
+  renderer: Renderer<HTMLCanvasElement> | undefined;
 
-  constructor(pixiRenderOptions?: IRendererOptionsAuto) {
+  async init(pixiRenderOptions?: Partial<AutoDetectOptions>) {
     const options = {
       width: DEFAULT_LAYER_WIDTH,
       height: DEFAULT_LAYER_HEIGHT,
@@ -24,38 +24,12 @@ export class PixiRenderApplication {
       preserveDrawingBuffer: true,
       ...pixiRenderOptions,
     };
-    this.renderer = autoDetectRenderer<HTMLCanvasElement>(options);
+    this.renderer = await autoDetectRenderer(options);
     this.stage = new Container();
   }
 
-  destroy() {
-    this.stage?.destroy({
-      children: true,
-      texture: true,
-      baseTexture: true,
-    });
-    this.stage = undefined;
-
-    // Get renderType and clContext before we destroy the renderer
-    const renderType = this.renderer?.type;
-    const glContext = this.renderer instanceof Renderer ? this.renderer?.gl : undefined;
-
-    /**
-     * WebGL v2 does supposedly not have WEBGL_lose_context
-     * so Pixi.js does not use it to "clean up" on v2.
-     *
-     * Cleaning up our self since it still seems to work and fix issue with lingering context
-     */
-    if (renderType === RENDERER_TYPE.WEBGL && glContext) {
-      glContext?.getExtension('WEBGL_lose_context')?.loseContext();
-    }
-
-    this.renderer?.destroy(true);
-    this.renderer = undefined;
-  }
-
-  get view() {
-    return this.renderer?.view;
+  get canvas() {
+    return this.renderer?.canvas;
   }
 
   render() {
@@ -70,11 +44,10 @@ export abstract class PixiLayer<T> extends Layer<T> {
   private ctx: PixiRenderApplication;
   private container: Container;
 
-  constructor(ctx: Application<HTMLCanvasElement> | PixiRenderApplication, id?: string, options?: LayerOptions<T>) {
+  constructor(ctx: PixiRenderApplication, id?: string, options?: LayerOptions<T>) {
     super(id, options);
 
     this.ctx = ctx;
-
     this.container = new Container();
     this.ctx.stage?.addChild(this.container);
   }
@@ -83,7 +56,7 @@ export abstract class PixiLayer<T> extends Layer<T> {
     this.ctx.render();
   }
 
-  addChild(child: DisplayObject) {
+  addChild(child: ContainerChild) {
     this.container.addChild(child);
   }
 
@@ -104,8 +77,8 @@ export abstract class PixiLayer<T> extends Layer<T> {
       this.pixiViewContainer.setAttribute('id', `${this.id}`);
       this.pixiViewContainer.setAttribute('class', 'webgl-layer');
 
-      if (this.ctx.view != null) {
-        this.pixiViewContainer.appendChild(this.ctx.view);
+      if (this.ctx.canvas != null) {
+        this.pixiViewContainer.appendChild(this.ctx.canvas);
       }
 
       this.element?.appendChild(this.pixiViewContainer);
@@ -188,7 +161,7 @@ export abstract class PixiLayer<T> extends Layer<T> {
     }
   }
 
-  renderType(): RENDERER_TYPE | undefined {
+  renderType(): RendererType | undefined {
     return this.ctx.renderer?.type;
   }
 }

package/src/utils/vectorUtils.ts

@@ -1,8 +1,8 @@
-import { IPoint, Point } from 'pixi.js';
+import { Point } from 'pixi.js';
 import Vector2 from '@equinor/videx-vector2';
 
-export const pointToVector = (p: IPoint): Vector2 => new Vector2(p.x, p.y);
-export const pointToArray = (p: IPoint): [number, number] => [p.x, p.y];
+export const pointToVector = (p: Point): Vector2 => new Vector2(p.x, p.y);
+export const pointToArray = (p: Point): [number, number] => [p.x, p.y];
 export const vectorToPoint = (v: Vector2): Point => new Point(v[0], v[1]);
 export const vectorToArray = (v: Vector2): [number, number] => [v[0] ?? 0, v[1] ?? 0];
 export const arrayToPoint = (a: number[]): Point => new Point(a[0], a[1]);
@@ -27,7 +27,7 @@ export const convertToUnitVector = (p: Point): Point => {
   return vectorToPoint(pointToVector(p).normalize());
 };
 
-export const createNormals = (points: IPoint[]): Vector2[] => {
+export const createNormals = (points: Point[]): Vector2[] => {
   if (points.length < 2) {
     return [new Vector2(0)];
   }
@@ -53,12 +53,12 @@ export const createNormals = (points: IPoint[]): Vector2[] => {
 };
 
 // TODO check if this can be simplified and return Vector/number[]
-export const offsetPoint = (point: IPoint, vector: Vector2, offset: number): Point => {
+export const offsetPoint = (point: Point, vector: Vector2, offset: number): Point => {
   const p = pointToVector(point);
   return vectorToPoint(p.add(vector.scale(offset)));
 };
 
-export const offsetPoints = (points: IPoint[], vectors: Vector2[], offset: number): Point[] => {
+export const offsetPoints = (points: Point[], vectors: Vector2[], offset: number): Point[] => {
   if (points.length !== vectors.length) {
     throw new Error('Number of vectors does not match number of points');
   }