@equinor/esv-intersection 3.0.4 → 3.0.7

package/src/layers/CalloutCanvasLayer.ts

@@ -0,0 +1,338 @@
+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();
+  }
+
+  override onUpdate(event: OnUpdateEvent<T>): void {
+    super.onUpdate(event);
+
+    this.callouts = undefined;
+
+    this.render();
+  }
+
+  override 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

@@ -0,0 +1,44 @@
+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.
+   */
+  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;
+
+    super(ropeGeometry, meshMaterial);
+
+    this.autoUpdate = true;
+  }
+
+  override _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

@@ -0,0 +1,184 @@
+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[];
+
+  /**
+   * @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);
+
+    // 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.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

@@ -0,0 +1,41 @@
+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;
+  }
+
+  override _render(renderer: Renderer): void {
+    const geometry: RopeGeometry = this.geometry as RopeGeometry;
+
+    if (this.autoUpdate) {
+      geometry.update();
+    }
+
+    super._render(renderer);
+  }
+}