@equinor/esv-intersection 3.0.1 → 3.0.4

package/src/layers/CalloutCanvasLayer.ts

@@ -1,338 +0,0 @@
-import { ScaleLinear } from 'd3-scale';
-
-import { CanvasLayer } from './base/CanvasLayer';
-import { OnUpdateEvent, Annotation, OnRescaleEvent, BoundingBox } from '../interfaces';
-import { calcSize, isOverlapping, getOverlapOffset } from '../utils';
-import { LayerOptions } from './base/Layer';
-
-const DEFAULT_MIN_FONT_SIZE = 7;
-const DEFAULT_MAX_FONT_SIZE = 11;
-const DEFAULT_FONT_SIZE_FACTOR = 7;
-
-const DEFAULT_OFFSET_MIN = 20;
-const DEFAULT_OFFSET_MAX = 120;
-const DEFAULT_OFFSET_FACTOR = 19;
-
-const Location = {
-  topleft: 'topleft',
-  topright: 'topright',
-  bottomleft: 'bottomleft',
-  bottomright: 'bottomright',
-};
-
-export type Point = {
-  x: number;
-  y: number;
-};
-
-export type Callout = {
-  title: string;
-  label: string;
-  color: string;
-  pos: Point;
-  group: string;
-  alignment: string;
-  boundingBox: BoundingBox;
-  dx: number;
-  dy: number;
-};
-
-export interface CalloutOptions<T extends Annotation[]> extends LayerOptions<T> {
-  minFontSize?: number;
-  maxFontSize?: number;
-  fontSizeFactor?: number;
-  offsetMin?: number;
-  offsetMax?: number;
-  offsetFactor?: number;
-}
-
-export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
-  rescaleEvent: OnRescaleEvent;
-  xRatio: number;
-  callouts: Callout[];
-  groupFilter: string[] = null;
-  minFontSize: number;
-  maxFontSize: number;
-  fontSizeFactor: number;
-  offsetMin: number;
-  offsetMax: number;
-  offsetFactor: number;
-
-  constructor(id?: string, options?: CalloutOptions<T>) {
-    super(id, options);
-    this.minFontSize = options.minFontSize || DEFAULT_MIN_FONT_SIZE;
-    this.maxFontSize = options.maxFontSize || DEFAULT_MAX_FONT_SIZE;
-    this.fontSizeFactor = options.fontSizeFactor || DEFAULT_FONT_SIZE_FACTOR;
-    this.offsetMin = options.offsetMin || DEFAULT_OFFSET_MIN;
-    this.offsetMax = options.offsetMax || DEFAULT_OFFSET_MAX;
-    this.offsetFactor = options.offsetFactor || DEFAULT_OFFSET_FACTOR;
-  }
-
-  setGroupFilter(filter: string[]): void {
-    this.groupFilter = filter;
-    this.callouts = undefined;
-    this.render();
-  }
-
-  onUpdate(event: OnUpdateEvent<T>): void {
-    super.onUpdate(event);
-
-    this.callouts = undefined;
-
-    this.render();
-  }
-
-  onRescale(event: OnRescaleEvent): void {
-    super.onRescale(event);
-    const isPanning = this.rescaleEvent && this.rescaleEvent.xRatio === event.xRatio;
-    this.rescaleEvent = event;
-
-    this.render(isPanning);
-  }
-
-  render(isPanning = false): void {
-    requestAnimationFrame(() => {
-      this.clearCanvas();
-
-      if (!this.data || !this.rescaleEvent || !this.referenceSystem) {
-        return;
-      }
-
-      const { xScale, yScale, xBounds } = this.rescaleEvent;
-
-      const fontSize = calcSize(this.fontSizeFactor, this.minFontSize, this.maxFontSize, xScale);
-
-      if (!isPanning || !this.callouts) {
-        const { data, ctx, groupFilter } = this;
-        const { calculateDisplacementFromBottom } = this.referenceSystem.options;
-        const isLeftToRight = calculateDisplacementFromBottom ? xBounds[0] < xBounds[1] : xBounds[0] > xBounds[1];
-        const scale = 0;
-
-        ctx.font = `bold ${fontSize}px arial`;
-        const filtered = data.filter((d: Annotation) => !groupFilter || 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) => {
-        const { pos, title, color } = callout;
-        const x = xScale(pos.x);
-        const y = yScale(pos.y);
-
-        const calloutBB = {
-          x,
-          y,
-          width: callout.boundingBox.width,
-          height: fontSize,
-          offsetX: callout.dx,
-          offsetY: callout.dy,
-        };
-
-        this.renderCallout(title, callout.label, calloutBB, color, callout.alignment);
-      });
-    });
-  }
-
-  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: string = 'arial',
-    fontStyle: string = 'normal',
-  ): void {
-    const { ctx } = this;
-    ctx.font = `${fontStyle} ${fontSize}px ${font}`;
-    ctx.fillStyle = color;
-    ctx.fillText(title, x, y);
-  }
-
-  private renderPoint(x: number, y: number, radius: number = 3): void {
-    const { ctx } = this;
-    ctx.beginPath();
-    ctx.moveTo(x, y);
-    ctx.arc(x, y, radius, 0, Math.PI * 2);
-    ctx.fill();
-  }
-
-  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;
-    this.renderAnnotation(title, label, x, y, height, color);
-    this.renderPoint(dotX, dotY);
-    this.renderLine(x, y, width, dotX, dotY, color, placeLeft);
-  }
-
-  private renderLine = (x: number, y: number, width: number, dotX: number, dotY: number, color: string, placeLeft: boolean = true): void => {
-    const { ctx } = this;
-    const textX = placeLeft ? x : x + width;
-    const inverseTextX = placeLeft ? x + width : x;
-    const textY = y + 2;
-
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 1;
-
-    ctx.beginPath();
-    ctx.moveTo(dotX, dotY);
-    ctx.lineTo(textX, textY);
-    ctx.lineTo(inverseTextX, textY);
-
-    ctx.stroke();
-  };
-
-  private getPosition(boundingBox: BoundingBox, location: string): Point {
-    const { x, y, offsetX, offsetY, width } = boundingBox;
-    switch (location) {
-      case Location.topleft:
-        return {
-          x: x - width - offsetX,
-          y: y - offsetY,
-        };
-      case Location.topright:
-        return {
-          x: x + offsetX,
-          y: y - offsetY,
-        };
-      case Location.bottomleft:
-        return {
-          x: x - width - offsetX,
-          y: y + offsetY,
-        };
-      case Location.bottomright:
-        return {
-          x: x + offsetX,
-          y: y + offsetY,
-        };
-      default:
-        return {
-          x,
-          y,
-        };
-    }
-  }
-
-  // Calculates position of a list of annotations
-  positionCallouts(
-    annotations: Annotation[],
-    isLeftToRight: boolean,
-    xScale: ScaleLinear<number, number>,
-    yScale: ScaleLinear<number, number>,
-    _scale: number,
-    fontSize: number,
-    offset: number = 20,
-  ): Callout[] {
-    if (annotations.length === 0) {
-      return [];
-    }
-    const alignment = isLeftToRight ? Location.topleft : Location.topright;
-
-    const nodes = annotations.map((a) => {
-      const pos = a.pos ? a.pos : this.referenceSystem.project(a.md);
-      return {
-        title: a.title,
-        label: a.label,
-        color: a.color,
-        pos: { x: pos[0], y: pos[1] },
-        group: a.group,
-        alignment,
-        boundingBox: this.getAnnotationBoundingBox(a.title, a.label, pos, xScale, yScale, fontSize),
-        dx: offset,
-        dy: offset,
-      };
-    });
-
-    const top = [nodes[nodes.length - 1]];
-    const bottom: Callout[] = [];
-
-    // Initial best effort
-    this.chooseTopOrBottomPosition(nodes, bottom, top);
-
-    // Adjust position for top set
-    this.adjustTopPositions(top);
-
-    // Adjust position for bottom set
-    this.adjustBottomPositions(bottom);
-
-    return nodes;
-  }
-
-  getAnnotationBoundingBox(
-    title: string,
-    label: string,
-    pos: number[],
-    xScale: ScaleLinear<number, number>,
-    yScale: ScaleLinear<number, number>,
-    height: number,
-  ): { x: number; y: number; width: number; height: number } {
-    const { ctx } = this;
-    const ax1 = xScale(pos[0]);
-    const ay1 = yScale(pos[1]);
-
-    const labelWidth = ctx.measureText(label).width;
-    const titleWidth = ctx.measureText(title).width;
-    const width = Math.max(labelWidth, titleWidth);
-
-    const bbox = {
-      x: ax1,
-      y: ay1,
-      width,
-      height: height * 2 + 4,
-    };
-    return bbox;
-  }
-
-  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;
-        bottom.push(node);
-        if (i > 0) {
-          top.unshift(nodes[--i]);
-        }
-      } else {
-        top.unshift(node);
-      }
-    }
-  }
-
-  adjustTopPositions(top: Callout[]): void {
-    for (let i = top.length - 2; i >= 0; --i) {
-      const currentNode = top[i];
-      for (let j = top.length - 1; j > i; --j) {
-        const prevNode = top[j];
-        const overlap = getOverlapOffset(currentNode.boundingBox, prevNode.boundingBox);
-        if (overlap) {
-          currentNode.dy += overlap.dy;
-          currentNode.boundingBox.y -= overlap.dy;
-        }
-      }
-    }
-  }
-
-  adjustBottomPositions(bottom: Callout[]): void {
-    for (let i = bottom.length - 2; i >= 0; --i) {
-      const currentNode = bottom[i];
-      for (let j = bottom.length - 1; j > i; --j) {
-        const prevNode = bottom[j];
-        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,45 +0,0 @@
-import { Mesh, MeshMaterial, IPoint, Renderer, Texture, WRAP_MODES } from 'pixi.js';
-import { ComplexRopeGeometry } from './ComplexRopeGeometry';
-
-export type ComplexRopeSegment = {
-  points: IPoint[];
-  diameter: number;
-};
-
-/**
- * The ComplexRope allows you to draw a texture across several segments of points and then manipulate these points
- */
-export class ComplexRope extends Mesh {
-  /**
-   * re-calculate vertices by rope segment-points each frame
-   * @member {boolean}
-   */
-  public autoUpdate: boolean;
-
-  /**
-   * @param texture - The texture to use on the rope.
-   * @param segments - An array of segments with points and diaeter to construct this rope.
-   * @param {number} textureScale - Optional. Adjust interval of repeated texture
-   */
-  constructor(texture: Texture, segments: ComplexRopeSegment[], textureScale = 0) {
-    const ropeGeometry = new ComplexRopeGeometry(segments, textureScale);
-    const meshMaterial = new MeshMaterial(texture);
-
-    // attempt to set UV wrapping, will fail on non-power of two textures
-    texture.baseTexture.wrapMode = WRAP_MODES.REPEAT;
-
-    super(ropeGeometry, meshMaterial);
-
-    this.autoUpdate = true;
-  }
-
-  _render(renderer: Renderer): void {
-    const geometry: ComplexRopeGeometry = this.geometry as ComplexRopeGeometry;
-
-    if (this.autoUpdate) {
-      geometry.update();
-    }
-
-    super._render(renderer);
-  }
-}

package/src/layers/CustomDisplayObjects/ComplexRopeGeometry.ts

@@ -1,190 +0,0 @@
-import { MeshGeometry } from 'pixi.js';
-import { sum, max } from 'd3-array';
-import { ComplexRopeSegment } from './ComplexRope';
-
-/**
- * RopeGeometry allows you to draw a geometry across several several segments of points and then manipulate these points.
- */
-export class ComplexRopeGeometry extends MeshGeometry {
-  /** An array of segments with points and diameter that determine the rope. */
-  private segments: ComplexRopeSegment[];
-
-  /** Rope texture scale. */
-  private readonly textureScale: number; // TODO unused?
-
-  /**
-   * @param segments - An array of segments with points and diameter to construct this rope.
-   * @param textureScale - scaling factor for repeated texture. To create a tiling rope
-   *     set baseTexture.wrapMode to PIXI.WRAP_MODES.REPEAT and use a power of two texture.
-   */
-  constructor(segments: ComplexRopeSegment[], textureScale = 0) {
-    const pointCount = sum(segments, (segment) => segment.points.length);
-
-    // eslint-disable-next-line no-magic-numbers
-    super(new Float32Array(pointCount * 4), new Float32Array(pointCount * 4), new Uint16Array((pointCount - 1) * 6));
-
-    this.segments = segments;
-    this.textureScale = textureScale;
-
-    this.build();
-  }
-
-  /**
-   * The max width (i.e., thickness) of the rope.
-   * @readonly
-   */
-  get width(): number {
-    return max(this.segments, (segment) => segment.diameter);
-  }
-
-  /** Refreshes Rope indices and uvs */
-  private build(): void {
-    const segments = this.segments;
-
-    if (!segments) {
-      return;
-    }
-
-    const vertexBuffer = this.getBuffer('aVertexPosition');
-    const uvBuffer = this.getBuffer('aTextureCoord');
-    const indexBuffer = this.getIndex();
-
-    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) {
-      return;
-    }
-
-    // if the number of points has changed we will need to recreate the arraybuffers
-    if (vertexBuffer.data.length / 4 !== pointCount) {
-      vertexBuffer.data = new Float32Array(pointCount * 4);
-      uvBuffer.data = new Float32Array(pointCount * 4);
-      indexBuffer.data = new Uint16Array((pointCount - 1) * 6); // eslint-disable-line no-magic-numbers
-    }
-
-    const uvs = uvBuffer.data;
-    const indices = indexBuffer.data;
-
-    uvs[0] = 0;
-    uvs[1] = 0;
-    uvs[2] = 0;
-    uvs[3] = 1;
-
-    const segmentCount = segments.length;
-    const maxDiameter = max(segments, (segment) => segment.diameter);
-
-    let amount = 0;
-    let uvIndex = 0;
-    let indicesIndex = 0;
-    let indexCount = 0;
-
-    for (let i = 0; i < segmentCount; i++) {
-      let prev = segments[i].points[0];
-      const textureWidth = maxDiameter;
-      const radius = segments[i].diameter / maxDiameter / 2;
-
-      const total = segments[i].points.length; // - 1;
-
-      for (let j = 0; j < total; j++) {
-        // time to do some smart drawing!
-
-        // calculate pixel distance from previous point
-        const dx = prev.x - segments[i].points[j].x;
-        const dy = prev.y - segments[i].points[j].y;
-        const distance = Math.sqrt(dx * dx + dy * dy);
-
-        prev = segments[i].points[j];
-        amount += distance / textureWidth;
-
-        uvs[uvIndex] = amount;
-        uvs[uvIndex + 1] = 0.5 - radius;
-
-        uvs[uvIndex + 2] = amount;
-        uvs[uvIndex + 3] = 0.5 + radius;
-        uvIndex += 4;
-      }
-
-      for (let j = 0; j < total - 1; j++) {
-        indices[indexCount++] = indicesIndex;
-        indices[indexCount++] = indicesIndex + 1;
-        indices[indexCount++] = indicesIndex + 2;
-
-        indices[indexCount++] = indicesIndex + 2;
-        indices[indexCount++] = indicesIndex + 1;
-        indices[indexCount++] = indicesIndex + 3;
-        indicesIndex += 2;
-      }
-      indicesIndex += 2;
-    }
-
-    // ensure that the changes are uploaded
-    uvBuffer.update();
-    indexBuffer.update();
-
-    this.updateVertices();
-  }
-
-  /** refreshes vertices of Rope mesh */
-  public updateVertices(): void {
-    const segments = this.segments;
-    const pointCount = sum(segments, (segment) => segment.points.length);
-
-    if (pointCount < 1) {
-      return;
-    }
-
-    const segmentCount = segments.length;
-    let lastIndex = 0;
-    for (let i = 0; i < segmentCount; i++) {
-      let lastPoint = segments[i].points[0];
-      let nextPoint;
-      let perpX = 0;
-      let perpY = 0;
-
-      const vertices = this.buffers[0].data;
-      const total = segments[i].points.length;
-      let index = 0;
-      for (let j = 0; j < total; j++) {
-        const point = segments[i].points[j];
-        index = lastIndex + j * 4;
-
-        if (j < segments[i].points.length - 1) {
-          nextPoint = segments[i].points[j + 1];
-        } else {
-          nextPoint = point;
-        }
-
-        perpY = -(nextPoint.x - lastPoint.x);
-        perpX = nextPoint.y - lastPoint.y;
-
-        const perpLength = Math.sqrt(perpX * perpX + perpY * perpY);
-        const num = segments[i].diameter / 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;
-      }
-      lastIndex = index + 4;
-    }
-
-    this.buffers[0].update();
-  }
-
-  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
-
-    // build() sets indicies and uvs and then calls this.updateVertices()
-    this.build();
-  }
-}

package/src/layers/CustomDisplayObjects/FixedWidthSimpleRope.ts

@@ -1,41 +0,0 @@
-import { IPoint, Mesh, MeshMaterial, Renderer, RopeGeometry, Texture, WRAP_MODES } from 'pixi.js';
-import { FixedWidthSimpleRopeGeometry } from './FixedWidthSimpleRopeGeometry';
-
-/**
- * The rope allows you to draw a texture across several points and then manipulate these points
- * Width of rope is given in constructor
- */
-export class FixedWidthSimpleRope extends Mesh {
-  /**
-   * re-calculate vertices by rope points each frame
-   * @member {boolean}
-   */
-  public autoUpdate: boolean;
-
-  /**
-   * 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 width - Width of rope
-   */
-  constructor(texture: Texture, points: IPoint[], width: number) {
-    const ropeGeometry = new FixedWidthSimpleRopeGeometry(points, width);
-    const meshMaterial = new MeshMaterial(texture);
-
-    texture.baseTexture.wrapMode = WRAP_MODES.REPEAT;
-
-    super(ropeGeometry, meshMaterial);
-
-    this.autoUpdate = true;
-  }
-
-  _render(renderer: Renderer): void {
-    const geometry: RopeGeometry = this.geometry as RopeGeometry;
-
-    if (this.autoUpdate) {
-      geometry.update();
-    }
-
-    super._render(renderer);
-  }
-}