@equinor/esv-intersection 3.0.4 → 3.0.7

package/src/layers/CustomDisplayObjects/FixedWidthSimpleRopeGeometry.ts

@@ -0,0 +1,149 @@
+import { IPoint, MeshGeometry } from 'pixi.js';
+
+export class FixedWidthSimpleRopeGeometry extends MeshGeometry {
+  public points: IPoint[];
+  _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.
+   */
+  constructor(points: IPoint[], width = 200) {
+    // eslint-disable-next-line no-magic-numbers
+    super(new Float32Array(points.length * 4), new Float32Array(points.length * 4), new Uint16Array((points.length - 1) * 6));
+    /**
+     * An array of points that determine the rope
+     * @member {PIXI.Point[]}
+     */
+    this.points = points;
+    /**
+     * The width (i.e., thickness) of the rope.
+     * @member {number}
+     * @readOnly
+     */
+    this._width = width;
+    /**
+     * Rope texture scale, if zero then the rope texture is stretched.
+     * @member {number}
+     * @readOnly
+     */
+    this.build();
+  }
+  /**
+   * The width (i.e., thickness) of the rope.
+   * @member {number}
+   * @readOnly
+   */
+  get width(): number {
+    return this._width;
+  }
+  /**
+   * Refreshes Rope indices and uvs
+   * @private
+   */
+  private build(): void {
+    const points = this.points;
+    if (!points) {
+      return;
+    }
+    const vertexBuffer = this.getBuffer('aVertexPosition');
+    const uvBuffer = this.getBuffer('aTextureCoord');
+    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) {
+      vertexBuffer.data = new Float32Array(points.length * 4);
+      uvBuffer.data = new Float32Array(points.length * 4);
+      // eslint-disable-next-line no-magic-numbers
+      indexBuffer.data = new Uint16Array((points.length - 1) * 6);
+    }
+    const uvs = uvBuffer.data;
+    const indices = indexBuffer.data;
+    uvs[0] = 0;
+    uvs[1] = 0;
+    uvs[2] = 0;
+    uvs[3] = 1;
+    let amount = 0;
+    let prev = points[0];
+    const total = points.length; // - 1;
+    for (let i = 0; i < total; i++) {
+      // time to do some smart drawing!
+      const index = i * 4;
+
+      // calculate pixel distance from previous point
+      const dx = prev.x - points[i].x;
+      const dy = prev.y - points[i].y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      prev = points[i];
+      amount += distance / this._width;
+
+      uvs[index] = amount;
+      uvs[index + 1] = 0;
+      uvs[index + 2] = amount;
+      uvs[index + 3] = 1;
+    }
+    let indexCount = 0;
+    for (let i = 0; i < total - 1; i++) {
+      const index = i * 2;
+      indices[indexCount++] = index;
+      indices[indexCount++] = index + 1;
+      indices[indexCount++] = index + 2;
+      indices[indexCount++] = index + 2;
+      indices[indexCount++] = index + 1;
+      indices[indexCount++] = index + 3;
+    }
+    // ensure that the changes are uploaded
+    uvBuffer.update();
+    indexBuffer.update();
+    this.updateVertices();
+  }
+  /**
+   * refreshes vertices of Rope mesh
+   */
+  public updateVertices(): void {
+    const points = this.points;
+    if (points.length < 1) {
+      return;
+    }
+    let lastPoint = points[0];
+    let nextPoint;
+    let perpX = 0;
+    let perpY = 0;
+    const vertices = this.buffers[0].data;
+    const total = points.length;
+    for (let i = 0; i < total; i++) {
+      const point = points[i];
+      const index = i * 4;
+      if (i < points.length - 1) {
+        nextPoint = points[i + 1];
+      } else {
+        nextPoint = point;
+      }
+      perpY = -(nextPoint.x - lastPoint.x);
+      perpX = nextPoint.y - lastPoint.y;
+      // eslint-disable-next-line no-magic-numbers
+      let ratio = (1 - i / (total - 1)) * 10;
+      if (ratio > 1) {
+        ratio = 1;
+      }
+      const perpLength = Math.sqrt(perpX * perpX + perpY * perpY);
+      const num = this._width / 2;
+      perpX /= perpLength;
+      perpY /= perpLength;
+      perpX *= num;
+      perpY *= num;
+      vertices[index] = point.x + perpX;
+      vertices[index + 1] = point.y + perpY;
+      vertices[index + 2] = point.x - perpX;
+      vertices[index + 3] = point.y - perpY;
+      lastPoint = point;
+    }
+    this.buffers[0].update();
+  }
+
+  public update(): void {
+    this.build();
+  }
+}

package/src/layers/CustomDisplayObjects/UniformTextureStretchRope.ts

@@ -0,0 +1,39 @@
+import { IPoint, Mesh, MeshMaterial, Renderer, Texture } from 'pixi.js';
+import { UniformTextureStretchRopeGeometry } from './UniformTextureStretchRopeGeometry';
+
+/**
+ * The UniformTextureStretchRope allows you to draw a texture across several points and then manipulate these points
+ */
+export class UniformTextureStretchRope extends Mesh {
+  /**
+   * re-calculate vertices by rope points each frame
+   * @member {boolean}
+   */
+  public autoUpdate: boolean;
+
+  /**
+   * @param texture - The texture to use on the rope.
+   * @param points - An array of {@link PIXI.Point} objects to construct this rope.
+   */
+  constructor(texture: Texture, points: IPoint[]) {
+    const ropeGeometry = new UniformTextureStretchRopeGeometry(points, texture.height);
+    const meshMaterial = new MeshMaterial(texture);
+
+    super(ropeGeometry, meshMaterial);
+
+    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();
+    }
+
+    super._render(renderer);
+  }
+}

package/src/layers/CustomDisplayObjects/UniformTextureStretchRopeGeometry.ts

@@ -0,0 +1,174 @@
+import { MeshGeometry } from 'pixi.js';
+import type { IPoint } 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[];
+
+  /**
+   * The width (i.e., thickness) of the rope.
+   * @readonly
+   */
+  _width: number;
+
+  /**
+   * @param width - The width (i.e., thickness) of the rope.
+   * @param points - An array of PIXI.Point objects to construct this rope.
+   */
+  constructor(points: IPoint[], width = 200) {
+    // eslint-disable-next-line no-magic-numbers
+    super(new Float32Array(points.length * 4), new Float32Array(points.length * 4), new Uint16Array((points.length - 1) * 6));
+
+    this.points = points;
+    this._width = width;
+
+    this.build();
+  }
+
+  /** Refreshes Rope indices and uvs */
+  private build(): void {
+    const points = this.points;
+
+    if (!points) {
+      return;
+    }
+
+    const vertexBuffer = this.getBuffer('aVertexPosition');
+    const uvBuffer = this.getBuffer('aTextureCoord');
+    const indexBuffer = this.getIndex();
+
+    // if too few 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) {
+      vertexBuffer.data = new Float32Array(points.length * 4);
+      uvBuffer.data = new Float32Array(points.length * 4);
+      indexBuffer.data = new Uint16Array((points.length - 1) * 6); // eslint-disable-line no-magic-numbers
+    }
+
+    const total = points.length; // - 1;
+
+    let totalLength = 0;
+    let prevPoint = points[0];
+
+    for (let i = 0; i < total; i++) {
+      const dx = prevPoint.x - points[i].x;
+      const dy = prevPoint.y - points[i].y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      prevPoint = points[i];
+      totalLength += distance;
+    }
+
+    const uvs = uvBuffer.data;
+    const indices = indexBuffer.data;
+
+    uvs[0] = 0;
+    uvs[1] = 0;
+    uvs[2] = 0;
+    uvs[3] = 1;
+
+    let amount = 0;
+    let prev = points[0];
+
+    for (let i = 0; i < total; i++) {
+      // time to do some smart drawing!
+      const index = i * 4;
+
+      // calculate pixel distance from previous point
+      const dx = prev.x - points[i].x;
+      const dy = prev.y - points[i].y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      prev = points[i];
+
+      // strech texture on distance/length instead of point/points.length to get a more correct strech
+      amount += distance / totalLength;
+
+      uvs[index] = amount;
+      uvs[index + 1] = 0;
+
+      uvs[index + 2] = amount;
+      uvs[index + 3] = 1;
+    }
+
+    let indexCount = 0;
+
+    for (let i = 0; i < total - 1; i++) {
+      const index = i * 2;
+
+      indices[indexCount++] = index;
+      indices[indexCount++] = index + 1;
+      indices[indexCount++] = index + 2;
+
+      indices[indexCount++] = index + 2;
+      indices[indexCount++] = index + 1;
+      indices[indexCount++] = index + 3;
+    }
+
+    // ensure that the changes are uploaded
+    uvBuffer.update();
+    indexBuffer.update();
+
+    this.updateVertices();
+  }
+
+  /** refreshes vertices of Rope mesh */
+  public updateVertices(): void {
+    const points = this.points;
+
+    if (points.length < 1) {
+      return;
+    }
+
+    let lastPoint = points[0];
+    let nextPoint;
+    let perpX = 0;
+    let perpY = 0;
+
+    const vertices = this.buffers[0].data;
+    const total = points.length;
+
+    for (let i = 0; i < total; i++) {
+      const point = points[i];
+      const index = i * 4;
+
+      if (i < points.length - 1) {
+        nextPoint = points[i + 1];
+      } else {
+        nextPoint = point;
+      }
+
+      perpY = -(nextPoint.x - lastPoint.x);
+      perpX = nextPoint.y - lastPoint.y;
+
+      const perpLength = Math.sqrt(perpX * perpX + perpY * perpY);
+      const num = this._width / 2;
+
+      perpX /= perpLength;
+      perpY /= perpLength;
+
+      perpX *= num;
+      perpY *= num;
+
+      vertices[index] = point.x + perpX;
+      vertices[index + 1] = point.y + perpY;
+      vertices[index + 2] = point.x - perpX;
+      vertices[index + 3] = point.y - perpY;
+
+      lastPoint = point;
+    }
+
+    this.buffers[0].update();
+  }
+
+  public update(): void {
+    this.updateVertices();
+  }
+}

package/src/layers/GeomodelCanvasLayer.ts

@@ -0,0 +1,176 @@
+import { SurfaceArea, SurfaceData, SurfaceLine } from '../datautils';
+import { OnUpdateEvent, OnRescaleEvent } from '../interfaces';
+import { colorToCSSColor } from '../utils/color';
+import { LayerOptions } from './base';
+import { CanvasLayer } from './base/CanvasLayer';
+
+const DEFAULT_MAX_DEPTH = 10000;
+
+type SurfacePaths = {
+  color: string;
+  path: Path2D;
+};
+
+export class GeomodelCanvasLayer<T extends SurfaceData> extends CanvasLayer<T> {
+  rescaleEvent: OnRescaleEvent;
+
+  surfaceAreasPaths: SurfacePaths[] = [];
+
+  surfaceLinesPaths: SurfacePaths[] = [];
+
+  maxDepth: number = DEFAULT_MAX_DEPTH;
+
+  constructor(id?: string, options?: LayerOptions<T>) {
+    super(id, options);
+    this.render = this.render.bind(this);
+    this.generateSurfaceAreasPaths = this.generateSurfaceAreasPaths.bind(this);
+    this.generateSurfaceLinesPaths = this.generateSurfaceLinesPaths.bind(this);
+    this.drawPolygonPath = this.drawPolygonPath.bind(this);
+    this.drawLinePath = this.drawLinePath.bind(this);
+    this.updatePaths = this.updatePaths.bind(this);
+  }
+
+  override onUpdate(event: OnUpdateEvent<T>): void {
+    super.onUpdate(event);
+    this.updatePaths();
+    this.render();
+  }
+
+  override onRescale(event: OnRescaleEvent): void {
+    this.rescaleEvent = event;
+    this.setTransform(this.rescaleEvent);
+    this.render();
+  }
+
+  updatePaths(): void {
+    if (!this.data) {
+      this.surfaceAreasPaths = [];
+      this.surfaceLinesPaths = [];
+    } else {
+      this.generateSurfaceAreasPaths();
+      this.generateSurfaceLinesPaths();
+    }
+  }
+
+  render(): void {
+    if (!this.ctx || !this.rescaleEvent) {
+      return;
+    }
+
+    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));
+    });
+  }
+
+  colorToCSSColor(color: number | string): string {
+    return colorToCSSColor(color);
+  }
+
+  generateSurfaceAreasPaths(): void {
+    this.surfaceAreasPaths = this.data.areas.reduce((acc: SurfacePaths[], s: SurfaceArea) => {
+      const polygons = this.createPolygons(s.data);
+      const mapped: SurfacePaths[] = polygons.map((polygon: number[]) => ({
+        color: this.colorToCSSColor(s.color),
+        path: this.generatePolygonPath(polygon),
+      }));
+      acc.push(...mapped);
+      return acc;
+    }, []);
+  }
+
+  generateSurfaceLinesPaths(): void {
+    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 }));
+      acc.push(...mapped);
+      return acc;
+    }, []);
+  }
+
+  drawPolygonPath = (color: string, path: Path2D): void => {
+    const { ctx } = this;
+    ctx.fillStyle = color;
+    ctx.fill(path);
+  };
+
+  drawLinePath = (color: string, path: Path2D): void => {
+    const { ctx } = this;
+    ctx.strokeStyle = color;
+    ctx.stroke(path);
+  };
+
+  createPolygons = (data: number[][]): number[][] => {
+    const polygons: number[][] = [];
+    let polygon: number[] = null;
+
+    // Start generating polygons
+    for (let i = 0; i < data.length; i++) {
+      // Generate top of polygon as long as we have valid values
+      const topIsValid = !!data[i][1];
+      if (topIsValid) {
+        if (polygon === null) {
+          polygon = [];
+        }
+        polygon.push(data[i][0], data[i][1]);
+      }
+
+      const endIsReached = i === data.length - 1;
+      if (!topIsValid || endIsReached) {
+        if (polygon) {
+          // Generate bottom of polygon
+          for (let j: number = !topIsValid ? i - 1 : i; j >= 0; j--) {
+            if (!data[j][1]) {
+              break;
+            }
+            polygon.push(data[j][0], data[j][2] || this.maxDepth);
+          }
+          polygons.push(polygon);
+          polygon = null;
+        }
+      }
+    }
+
+    return polygons;
+  };
+
+  generatePolygonPath = (polygon: number[]): Path2D => {
+    const path = new Path2D();
+
+    path.moveTo(polygon[0], polygon[1]);
+    for (let i = 2; i < polygon.length; i += 2) {
+      path.lineTo(polygon[i], polygon[i + 1]);
+    }
+    path.closePath();
+
+    return path;
+  };
+
+  generateLinePaths = (s: SurfaceLine): Path2D[] => {
+    const paths: Path2D[] = [];
+    const { data: d } = s;
+
+    let penDown = false;
+    let path = null;
+    for (let i = 0; i < d.length; i++) {
+      if (d[i][1]) {
+        if (penDown) {
+          path.lineTo(d[i][0], d[i][1]);
+        } else {
+          path = new Path2D();
+          path.moveTo(d[i][0], d[i][1]);
+          penDown = true;
+        }
+      } else if (penDown) {
+        paths.push(path);
+        penDown = false;
+      }
+    }
+    if (penDown) {
+      paths.push(path);
+    }
+
+    return paths;
+  };
+}