@equinor/esv-intersection 3.0.4 → 3.0.6

package/src/layers/SeismicCanvasLayer.ts

@@ -0,0 +1,46 @@
+import { CanvasLayer } from './base/CanvasLayer';
+import { OnUpdateEvent, OnMountEvent, OnRescaleEvent } from '../interfaces';
+
+export type SeismicCanvasDataOptions = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type SeismicCanvasData = {
+  image: CanvasImageSource | OffscreenCanvas;
+  options: SeismicCanvasDataOptions;
+};
+
+export class SeismicCanvasLayer extends CanvasLayer<SeismicCanvasData> {
+  override onMount(event: OnMountEvent): void {
+    super.onMount(event);
+  }
+
+  override onUpdate(event: OnUpdateEvent<SeismicCanvasData>): void {
+    super.onUpdate(event);
+
+    this.clearCanvas();
+
+    this.render();
+  }
+
+  override onRescale(event: OnRescaleEvent): void {
+    super.onRescale(event);
+    this.setTransform(event);
+    this.render();
+  }
+
+  render(): void {
+    if (!this.data || !this.ctx || !this.data.image) {
+      return;
+    }
+    const { ctx } = this;
+    const { options, image } = this.data;
+
+    this.clearCanvas();
+
+    ctx.drawImage(image, options.x, options.y, options.width, options.height);
+  }
+}

package/src/layers/WellborePathLayer.ts

@@ -0,0 +1,129 @@
+import {
+  line,
+  curveCatmullRom,
+  curveLinear,
+  curveBasis,
+  curveBasisClosed,
+  curveBundle,
+  curveCardinal,
+  curveMonotoneX,
+  curveMonotoneY,
+  curveNatural,
+  curveStep,
+  curveStepAfter,
+  curveStepBefore,
+} from 'd3-shape';
+import { SVGLayer } from './base/SVGLayer';
+import { OnUpdateEvent, OnRescaleEvent } from '../interfaces';
+import { LayerOptions } from '..';
+
+const CURVE_CATMULL_ROM_ALPHA = 0.7;
+const CURVE_CARDINAL_TENSION = 0.9;
+const CURVE_BUNDLE_BETA = 1.0;
+
+export interface WellborepathLayerOptions<T extends [number, number][]> extends LayerOptions<T> {
+  stroke: string;
+  strokeWidth: string;
+  curveType?: string;
+  tension?: number;
+}
+
+export class WellborepathLayer<T extends [number, number][]> extends SVGLayer<T> {
+  rescaleEvent: OnRescaleEvent;
+
+  constructor(id?: string, options?: WellborepathLayerOptions<T>) {
+    super(id, options);
+    this.options = {
+      ...this.options,
+      ...options,
+    };
+    this.render = this.render.bind(this);
+  }
+
+  override onUpdate(event: OnUpdateEvent<T>): void {
+    super.onUpdate(event);
+    this.render();
+  }
+
+  override onRescale(event: OnRescaleEvent): void {
+    super.onRescale(event);
+    if (!this.elm) {
+      return;
+    }
+    this.rescaleEvent = event;
+    this.render();
+  }
+
+  render(): void {
+    const { strokeWidth, stroke } = this.options as WellborepathLayerOptions<T>;
+
+    if (!this.elm) {
+      return;
+    }
+    this.elm.select('g').remove();
+
+    const data = this.data || (this.referenceSystem && (this.referenceSystem.projectedPath as [number, number][]));
+    if (!data || !this.rescaleEvent) {
+      return;
+    }
+
+    this.elm
+      .append('g')
+      .attr('class', 'well-path')
+      .append('path')
+      .attr('d', this.renderWellborePath(data))
+      .attr('stroke-width', strokeWidth || '2px')
+      .attr('stroke', stroke || 'red')
+      .attr('fill', 'none');
+  }
+
+  private renderWellborePath(data: [number, number][]): string {
+    const { xScale, yScale } = this.rescaleEvent;
+    const transformedData: [number, number][] = data.map((d) => [xScale(d[0]), yScale(d[1])]);
+
+    // TODO: Might be a good idea to move something like this to a shared function in a base class
+    let curveFactory;
+    const { curveType, tension } = this.options as WellborepathLayerOptions<T>;
+    switch (curveType) {
+      default:
+      case 'curveCatmullRom':
+        curveFactory = curveCatmullRom.alpha(tension || CURVE_CATMULL_ROM_ALPHA);
+        break;
+      case 'curveLinear':
+        curveFactory = curveLinear;
+        break;
+      case 'curveBasis':
+        curveFactory = curveBasis;
+        break;
+      case 'curveBasisClosed':
+        curveFactory = curveBasisClosed;
+        break;
+      case 'curveBundle':
+        curveFactory = curveBundle.beta(tension || CURVE_BUNDLE_BETA);
+        break;
+      case 'curveCardinal':
+        curveFactory = curveCardinal.tension(tension || CURVE_CARDINAL_TENSION);
+        break;
+      case 'curveMonotoneX':
+        curveFactory = curveMonotoneX;
+        break;
+      case 'curveMonotoneY':
+        curveFactory = curveMonotoneY;
+        break;
+      case 'curveNatural':
+        curveFactory = curveNatural;
+        break;
+      case 'curveStep':
+        curveFactory = curveStep;
+        break;
+      case 'curveStepAfter':
+        curveFactory = curveStepAfter;
+        break;
+      case 'curveStepBefore':
+        curveFactory = curveStepBefore;
+        break;
+    }
+
+    return line().curve(curveFactory)(transformedData);
+  }
+}

package/src/layers/base/CanvasLayer.ts

@@ -0,0 +1,102 @@
+import { Layer } from './Layer';
+import { OnMountEvent, OnUpdateEvent, OnResizeEvent, OnRescaleEvent } from '../../interfaces';
+import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
+
+export abstract class CanvasLayer<T> extends Layer<T> {
+  ctx: CanvasRenderingContext2D;
+  elm: HTMLElement;
+  canvas: HTMLCanvasElement;
+
+  onOpacityChanged(_opacity: number): void {
+    if (this.canvas) {
+      this.updateStyle();
+    }
+  }
+
+  onOrderChanged(_order: number): void {
+    if (this.canvas) {
+      this.updateStyle();
+    }
+  }
+
+  onInteractivityChanged(_interactive: boolean): void {
+    if (this.canvas) {
+      this.updateStyle();
+    }
+  }
+
+  override setVisibility(visible: boolean): void {
+    super.setVisibility(visible);
+    if (this.canvas) {
+      this.updateStyle(visible);
+    }
+  }
+
+  updateStyle(visible?: boolean): void {
+    const isVisible = visible || this.isVisible;
+    const visibility = isVisible ? 'visible' : 'hidden';
+    const interactive = this.interactive ? 'auto' : 'none';
+    this.canvas.setAttribute(
+      'style',
+      `position:absolute;pointer-events:${interactive};z-index:${this.order};opacity:${this.opacity};visibility:${visibility}`,
+    );
+  }
+
+  override onMount(event: OnMountEvent): void {
+    super.onMount(event);
+    const { elm } = event;
+    const width = event.width || parseInt(elm.getAttribute('width'), 10) || DEFAULT_LAYER_WIDTH;
+    const height = event.height || parseInt(elm.getAttribute('height'), 10) || DEFAULT_LAYER_HEIGHT;
+    this.elm = elm;
+    let canvas: HTMLCanvasElement;
+    if (!this.canvas) {
+      canvas = document.createElement('canvas');
+      this.canvas = canvas;
+      event.elm.appendChild(canvas);
+    }
+    this.canvas.setAttribute('id', `${this.id}`);
+    this.canvas.setAttribute('width', `${width}px`);
+    this.canvas.setAttribute('height', `${height}px`);
+    this.canvas.setAttribute('class', 'canvas-layer');
+    this.updateStyle();
+    this.ctx = this.canvas.getContext('2d');
+  }
+
+  override onUnmount(): void {
+    super.onUnmount();
+    this.canvas.remove();
+    this.canvas = null;
+  }
+
+  override onResize(event: OnResizeEvent): void {
+    const { ctx } = this;
+    const { width, height } = event;
+
+    ctx.canvas.setAttribute('width', `${width}px`);
+    ctx.canvas.setAttribute('height', `${height}px`);
+  }
+
+  override onUpdate(event: OnUpdateEvent<T>): void {
+    super.onUpdate(event);
+  }
+
+  resetTransform(): void {
+    this.ctx.resetTransform();
+  }
+
+  setTransform(event: OnRescaleEvent): void {
+    this.resetTransform();
+    const flippedX = event.xBounds[0] > event.xBounds[1];
+    const flippedY = event.yBounds[0] > event.yBounds[1];
+    this.ctx.translate(event.xScale(0), event.yScale(0));
+    this.ctx.scale(event.xRatio * (flippedX ? -1 : 1), event.yRatio * (flippedY ? -1 : 1));
+  }
+
+  clearCanvas(): void {
+    const { ctx, canvas } = this;
+    ctx.save();
+    ctx.resetTransform();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.restore();
+  }
+}

package/src/layers/base/HTMLLayer.ts

@@ -0,0 +1,70 @@
+import { select, Selection } from 'd3-selection';
+import { Layer } from './Layer';
+import { OnMountEvent, OnResizeEvent } from '../../interfaces';
+import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
+
+export abstract class HTMLLayer<T> extends Layer<T> {
+  elm: Selection<HTMLElement, unknown, null, undefined>;
+
+  override onMount(event: OnMountEvent): void {
+    super.onMount(event);
+    const { elm } = event;
+    const width = event.width || parseInt(elm.getAttribute('width'), 10) || DEFAULT_LAYER_WIDTH;
+    const height = event.height || parseInt(elm.getAttribute('height'), 10) || DEFAULT_LAYER_HEIGHT;
+
+    if (!this.elm) {
+      this.elm = select(elm).append('div');
+      this.elm.attr('id', `${this.id}`);
+      this.elm.attr('class', 'html-layer');
+    }
+    const interactive = this.interactive ? 'auto' : 'none';
+    this.elm
+      .style('position', 'absolute')
+      .style('height', `${height}px`)
+      .style('width', `${width}px`)
+      .style('opacity', this.opacity)
+      .style('overflow', 'hidden')
+      .style('pointer-events', interactive)
+      .style('z-index', this.order);
+  }
+
+  override onUnmount(): void {
+    super.onUnmount();
+    this.elm.remove();
+    this.elm = null;
+  }
+
+  override onResize(event: OnResizeEvent): void {
+    if (!this.elm) {
+      return;
+    }
+    super.onResize(event);
+    this.elm.style('height', `${event.height}px`).style('width', `${event.width}px`);
+  }
+
+  override setVisibility(visible: boolean): void {
+    super.setVisibility(visible);
+    if (this.elm) {
+      this.elm.attr('visibility', visible ? 'visible' : 'hidden');
+    }
+  }
+
+  onOpacityChanged(opacity: number): void {
+    if (this.elm) {
+      this.elm.style('opacity', opacity);
+    }
+  }
+
+  onOrderChanged(order: number): void {
+    if (this.elm) {
+      this.elm.style('z-index', order);
+    }
+  }
+
+  onInteractivityChanged(shouldBeInteractive: boolean): void {
+    if (this.elm) {
+      const interactive = shouldBeInteractive ? 'auto' : 'none';
+      this.elm.style('pointer-events', interactive);
+    }
+  }
+}

package/src/layers/base/Layer.ts

@@ -0,0 +1,217 @@
+import { OnMountEvent, OnUnmountEvent, OnUpdateEvent, OnRescaleEvent, OnResizeEvent } from '../../interfaces';
+import { IntersectionReferenceSystem } from '../../control';
+
+const defaultOptions = {
+  order: 1,
+  layerOpacity: 1,
+  interactive: false,
+};
+
+export interface LayerOptions<T> {
+  order?: number;
+  layerOpacity?: number;
+  referenceSystem?: IntersectionReferenceSystem;
+  data?: T;
+  interactive?: boolean;
+
+  onMount?(event: OnMountEvent, layer: Layer<T>): void;
+  onUnmount?(event: OnUnmountEvent, layer: Layer<T>): void;
+  onUpdate?(event: OnUpdateEvent<T>, layer: Layer<T>): void;
+  onRescale?(event: OnRescaleEvent, layer: Layer<T>): void;
+  onResize?(event: OnResizeEvent, layer: Layer<T>): void;
+}
+
+export abstract class Layer<T> {
+  private _id: string;
+  private _order: number;
+  protected _options: LayerOptions<T>;
+  private loading: boolean;
+  private _element?: HTMLElement;
+  private _opacity: number;
+  private _referenceSystem?: IntersectionReferenceSystem = null;
+  private _data?: T;
+  private _visible: boolean;
+  private _interactive: boolean = false;
+
+  constructor(id?: string, options?: LayerOptions<T>) {
+    this._id = id || `layer-${Math.floor(Math.random() * 1000)}`;
+    const opts = options || defaultOptions;
+    this._order = opts.order || 1;
+    this._options = {
+      ...opts,
+    };
+    this.loading = false;
+    this._element = null;
+    this._opacity = opts.layerOpacity || 1;
+    this._visible = true;
+    this._interactive = opts.interactive || false;
+
+    if (options && options.data) {
+      this.setData(options.data);
+    }
+    this._referenceSystem = options && options.referenceSystem;
+
+    this.onMount = this.onMount.bind(this);
+    this.onUnmount = this.onUnmount.bind(this);
+    this.onUpdate = this.onUpdate.bind(this);
+    this.onRescale = this.onRescale.bind(this);
+    this.onResize = this.onResize.bind(this);
+    this.onOrderChanged = this.onOrderChanged.bind(this);
+    this.onOpacityChanged = this.onOpacityChanged.bind(this);
+    this.setVisibility = this.setVisibility.bind(this);
+  }
+
+  get id(): string {
+    return this._id;
+  }
+
+  get element(): HTMLElement {
+    return this._element;
+  }
+
+  get options(): LayerOptions<T> {
+    return this._options;
+  }
+
+  set options(options: LayerOptions<T>) {
+    this._options = options;
+  }
+
+  set isLoading(loading: boolean) {
+    this.loading = loading;
+  }
+
+  get isLoading(): boolean {
+    return this.loading;
+  }
+
+  set opacity(opacity: number) {
+    this._opacity = opacity;
+    this.onOpacityChanged(opacity);
+  }
+
+  get opacity(): number {
+    return this._opacity;
+  }
+
+  set order(order: number) {
+    this._order = order;
+    this.onOrderChanged(order);
+  }
+
+  get order(): number {
+    return this._order;
+  }
+
+  set interactive(shouldBeInteractive: boolean) {
+    this._interactive = shouldBeInteractive;
+    this.onInteractivityChanged(shouldBeInteractive);
+  }
+
+  get interactive(): boolean {
+    return this._interactive;
+  }
+
+  get referenceSystem(): IntersectionReferenceSystem {
+    return this._referenceSystem;
+  }
+
+  set referenceSystem(referenceSystem: IntersectionReferenceSystem) {
+    this._referenceSystem = referenceSystem;
+  }
+
+  get data(): T {
+    return this.getData();
+  }
+
+  set data(data: T) {
+    this.setData(data);
+  }
+
+  get isVisible(): boolean {
+    return this._visible;
+  }
+
+  getData(): T {
+    return this._data;
+  }
+
+  setData(data: T): void {
+    this._data = data;
+    // should not be called when there is no visual element to work with
+    if (this.element) {
+      this.onUpdate({ data });
+    }
+  }
+
+  /**
+   * Clears data and (optionally) the reference system
+   * @param includeReferenceSystem - (optional) if true also removes reference system, default is true
+   */
+  clearData(includeReferenceSystem: boolean = true): void {
+    this._data = null;
+    if (includeReferenceSystem) {
+      this.referenceSystem = null;
+    }
+    this.onUpdate({});
+  }
+
+  setVisibility(visible: boolean, _layerId?: string): void {
+    this._visible = visible;
+  }
+
+  onMount(event: OnMountEvent): void {
+    this._element = event.elm;
+    if (this._options.onMount) {
+      this._options.onMount(event, this);
+    }
+  }
+
+  onUnmount(event?: OnUnmountEvent): void {
+    if (this._options.onUnmount) {
+      this._options.onUnmount(event, this);
+    }
+  }
+
+  onResize(event: OnResizeEvent): void {
+    if (this._options.onResize) {
+      this._options.onResize(event, this);
+    }
+  }
+
+  onUpdate(event: OnUpdateEvent<T>): void {
+    if (event.data) {
+      this._data = event.data;
+    }
+    if (this._options.onUpdate) {
+      this._options.onUpdate(event, this);
+    }
+  }
+
+  onRescale(event: OnRescaleEvent): void {
+    this.optionsRescale(event);
+  }
+
+  optionsRescale(event: OnRescaleEvent): void {
+    if (this._options.onRescale) {
+      this._options.onRescale(event, this);
+    }
+  }
+
+  abstract onOpacityChanged(opacity: number): void;
+
+  abstract onOrderChanged(order: number): void;
+
+  abstract onInteractivityChanged(interactive: boolean): void;
+
+  /**
+   *
+   * Some layers might be built up of several internal layers that should individually be visibility-togglable.
+   * Reasons for having multiple internal layers might be tightly related data between layers or need for sharing render context
+   *
+   * @returns list of internal layer ids
+   */
+  getInternalLayerIds(): string[] {
+    return [];
+  }
+}