@equinor/esv-intersection 3.0.1 → 3.0.4

package/src/layers/SeismicCanvasLayer.ts

@@ -1,46 +0,0 @@
-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> {
-  onMount(event: OnMountEvent): void {
-    super.onMount(event);
-  }
-
-  onUpdate(event: OnUpdateEvent<SeismicCanvasData>): void {
-    super.onUpdate(event);
-
-    this.clearCanvas();
-
-    this.render();
-  }
-
-  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

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

@@ -1,102 +0,0 @@
-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();
-    }
-  }
-
-  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}`,
-    );
-  }
-
-  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;
-    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');
-  }
-
-  onUnmount(): void {
-    super.onUnmount();
-    this.canvas.remove();
-    this.canvas = null;
-  }
-
-  onResize(event: OnResizeEvent): void {
-    const { ctx } = this;
-    const { width, height } = event;
-
-    ctx.canvas.setAttribute('width', `${width}px`);
-    ctx.canvas.setAttribute('height', `${height}px`);
-  }
-
-  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

@@ -1,70 +0,0 @@
-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>;
-
-  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);
-  }
-
-  onUnmount(): void {
-    super.onUnmount();
-    this.elm.remove();
-    this.elm = null;
-  }
-
-  onResize(event: OnResizeEvent): void {
-    if (!this.elm) {
-      return;
-    }
-    super.onResize(event);
-    this.elm.style('height', `${event.height}px`).style('width', `${event.width}px`);
-  }
-
-  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

@@ -1,217 +0,0 @@
-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 [];
-  }
-}