@equinor/esv-intersection 3.0.4 → 3.0.6

package/src/control/ZoomPanHandler.ts

@@ -0,0 +1,436 @@
+import { select, Selection } from 'd3-selection';
+import { scaleLinear, ScaleLinear } from 'd3-scale';
+import { zoom, zoomIdentity, ZoomBehavior, ZoomTransform } from 'd3-zoom';
+
+import { ZoomAndPanOptions, OnRescaleEvent } from '../interfaces';
+
+const DEFAULT_MIN_ZOOM_LEVEL = 0.1;
+const DEFAULT_MAX_ZOOM_LEVEL = 256;
+
+export type RescaleFunction = (event: OnRescaleEvent) => void;
+/**
+ * Handle zoom and pan for intersection layers
+ */
+export class ZoomPanHandler {
+  zoom: ZoomBehavior<Element, unknown> = null;
+  elm: HTMLElement = null;
+  container: Selection<HTMLElement, unknown, null, undefined> = null;
+  onRescale: RescaleFunction = null;
+  options: ZoomAndPanOptions = null;
+  xBounds: [number, number] = [0, 1];
+  yBounds: [number, number] = [0, 1];
+  translateBoundsX: [number, number] = [0, 1];
+  translateBoundsY: [number, number] = [0, 1];
+  scaleX: ScaleLinear<number, number> = null;
+  scaleY: ScaleLinear<number, number> = null;
+  _zFactor: number = 1;
+  _enableTranslateExtent: boolean;
+  currentTransform: ZoomTransform;
+
+  /**
+   * Constructor
+   * @param  elm, -
+   * @param  options - options
+   */
+  constructor(
+    elm: HTMLElement,
+    onRescale: RescaleFunction,
+    options: ZoomAndPanOptions = { maxZoomLevel: DEFAULT_MAX_ZOOM_LEVEL, minZoomLevel: DEFAULT_MIN_ZOOM_LEVEL },
+  ) {
+    this.container = select(elm);
+    this.options = options;
+
+    this.onRescale = onRescale;
+
+    this.onZoom = this.onZoom.bind(this);
+    this.calculateTransform = this.calculateTransform.bind(this);
+    this.applyTransform = this.applyTransform.bind(this);
+    this.recalculateZoomTransform = this.recalculateZoomTransform.bind(this);
+    this.rescale = this.rescale.bind(this);
+
+    this.adjustToSize = this.adjustToSize.bind(this);
+    this.setViewport = this.setViewport.bind(this);
+
+    this.currentStateAsEvent = this.currentStateAsEvent.bind(this);
+
+    this.updateTranslateExtent = this.updateTranslateExtent.bind(this);
+
+    this.scaleX = scaleLinear().domain(this.xBounds).range([0, 1]);
+    this.scaleY = scaleLinear().domain(this.yBounds).range([0, 1]);
+
+    this.init();
+  }
+
+  /**
+   * Getter returning width of target
+   * @returns  width
+   */
+  get width(): number {
+    return this.scaleX.range()[1];
+  }
+
+  /**
+   * Getter returning height of target
+   * @returns  height
+   */
+  get height(): number {
+    return this.scaleY.range()[1];
+  }
+
+  /**
+   * Getter which calculate span from x bounds
+   * @returns  x span
+   */
+  get xSpan(): number {
+    const { xBounds } = this;
+    const xspan: number = Math.abs(xBounds[1] - xBounds[0]);
+    return xspan;
+  }
+
+  /**
+   * Calculate span from y bounds
+   * @returns  y span
+   */
+  get ySpan(): number {
+    const { yBounds } = this;
+    const yspan: number = Math.abs(yBounds[1] - yBounds[0]);
+    return yspan;
+  }
+
+  /**
+   * Ratio between height and width
+   * @returns  ratio
+   */
+  get viewportRatio(): number {
+    const ratio: number = this.width / (this.height || 1);
+    return ratio;
+  }
+
+  /**
+   * x ratios screen to value ratio
+   * @returns  ratio
+   */
+  get xRatio(): number {
+    const domain: number[] = this.scaleX.domain();
+    const ratio: number = Math.abs(this.width / (domain[1] - domain[0]));
+    return ratio;
+  }
+
+  /**
+   * y scale screen to value ratio
+   * @returns  ratio
+   */
+  get yRatio(): number {
+    const domain: number[] = this.scaleY.domain();
+    const ratio: number = Math.abs(this.height / (domain[1] - domain[0]));
+    return ratio;
+  }
+
+  /**
+   * Get z-factor
+   * @returns  z-factor
+   */
+  get zFactor(): number {
+    return this._zFactor;
+  }
+
+  /**
+   * Set z factor
+   * @param  factor
+   */
+  set zFactor(factor: number) {
+    this._zFactor = factor;
+    this.recalculateZoomTransform();
+  }
+
+  /**
+   * Check if x is inverted (right to left is positive) from x bounds
+   * @returns  true if inverted
+   */
+  get isXInverted(): boolean {
+    return this.xBounds[1] < this.xBounds[0];
+  }
+
+  /**
+   * Check if y is inverted (bottom to top is positive) from y bounds
+   * @returns  true if inverted
+   */
+  get isYInverted(): boolean {
+    return this.yBounds[1] < this.yBounds[0];
+  }
+
+  /**
+   * Get if enable translate extent (pan limit)
+   * @returns  true if enabled
+   */
+  get enableTranslateExtent(): boolean {
+    return this._enableTranslateExtent;
+  }
+
+  /**
+   * Set enable translate extent (pan limit)
+   * @param  enabled - If should be enabled
+   */
+  set enableTranslateExtent(enabled: boolean) {
+    this._enableTranslateExtent = enabled;
+
+    this.updateTranslateExtent();
+  }
+
+  /**
+   * Update translate extent (pan limits)
+   */
+  updateTranslateExtent(): void {
+    const { width, xSpan, zFactor, enableTranslateExtent, translateBoundsX, translateBoundsY } = this;
+
+    let x1: number = -Infinity;
+    let y1: number = -Infinity;
+    let x2: number = +Infinity;
+    let y2: number = +Infinity;
+
+    if (enableTranslateExtent) {
+      const ppu: number = width / xSpan;
+
+      x1 = translateBoundsX[0] * ppu;
+      x2 = translateBoundsX[1] * ppu;
+      y1 = translateBoundsY[0] * ppu * zFactor;
+      y2 = translateBoundsY[1] * ppu * zFactor;
+    }
+
+    this.zoom.translateExtent([
+      [x1, y1],
+      [x2, y2],
+    ]);
+  }
+
+  /**
+   * Create an event object from current state
+   */
+  currentStateAsEvent(): OnRescaleEvent {
+    const { scaleX, scaleY, xBounds, yBounds, zFactor, viewportRatio, currentTransform, xRatio, yRatio, width, height } = this;
+
+    return {
+      xScale: scaleX.copy(),
+      yScale: scaleY.copy(),
+      xBounds: xBounds,
+      yBounds: yBounds,
+      zFactor: zFactor,
+      viewportRatio,
+      xRatio: xRatio,
+      yRatio: yRatio,
+      width: width,
+      height: height,
+      transform: Object.assign({}, currentTransform),
+    };
+  }
+
+  /**
+   * Update scale
+   */
+  rescale(): void {
+    const { currentStateAsEvent } = this;
+
+    this.onRescale(currentStateAsEvent());
+  }
+
+  /**
+   * Initialized handler
+   */
+  init(): void {
+    this.zoom = zoom().scaleExtent([this.options.minZoomLevel, this.options.maxZoomLevel]).on('zoom', this.onZoom);
+
+    this.container.call(this.zoom);
+  }
+
+  /**
+   * Handle zoom
+   */
+  onZoom(event: { transform: ZoomTransform }): void {
+    const { transform } = event;
+    if (!transform) {
+      return;
+    }
+
+    this.applyTransform(transform);
+    this.rescale();
+  }
+
+  /**
+   * Update scale
+   */
+  applyTransform(transform: ZoomTransform): void {
+    const { width, scaleX, scaleY, xSpan, xBounds, yBounds, zFactor } = this;
+
+    const { viewportRatio: ratio, isXInverted, isYInverted } = this;
+
+    const newWidth: number = width * transform.k;
+
+    const unitsPerPixels: number = xSpan / newWidth;
+
+    const newXSpan: number = xSpan / transform.k;
+    const newYSpan: number = newXSpan / zFactor / ratio;
+
+    const shiftx: number = unitsPerPixels * transform.x;
+    const shifty: number = (unitsPerPixels / zFactor) * transform.y;
+    const dx0: number = xBounds[0] - (isXInverted ? -shiftx : shiftx);
+    const dy0: number = yBounds[0] - (isYInverted ? -shifty : shifty);
+
+    scaleX.domain([dx0, dx0 + (isXInverted ? -newXSpan : newXSpan)]);
+    scaleY.domain([dy0, dy0 + (isYInverted ? -newYSpan : newYSpan)]);
+
+    this.currentTransform = transform;
+  }
+
+  /**
+   * Set new viewport
+   * @param  cx - center X pos
+   * @param  cy - center Y pos
+   * @param  displ
+   * @param  duration - duration of transition
+   * @returns  a merge of filter and payload
+   */
+  setViewport(cx?: number, cy?: number, displ?: number, duration?: number): void {
+    const { zoom, container, calculateTransform, scaleX, scaleY, isXInverted } = this;
+
+    if (isNaN(cx) || isNaN(displ)) {
+      const xd: number[] = scaleX.domain();
+      const dspan: number = xd[1] - xd[0];
+      if (isNaN(cx)) {
+        cx = xd[0] + dspan / 2 || 0;
+      }
+      if (isNaN(displ)) {
+        displ = Math.abs(dspan) || 1;
+      }
+    }
+
+    if (isNaN(cy)) {
+      const yd: number[] = scaleY.domain();
+      cy = yd[0] + (yd[1] - yd[0]) / 2 || 0;
+    }
+
+    const xdispl: number = isXInverted ? -displ : displ;
+
+    const dx0: number = cx - xdispl / 2;
+    const dx1: number = dx0 + xdispl;
+
+    const t: ZoomTransform = calculateTransform(dx0, dx1, cy);
+
+    if (Number.isFinite(duration) && duration > 0) {
+      zoom.transform(container.transition().duration(duration), t);
+    } else {
+      zoom.transform(container, t);
+    }
+  }
+
+  /**
+   * Set bounds
+   */
+  setBounds(xBounds: [number, number], yBounds: [number, number]): void {
+    this.xBounds = xBounds;
+    this.yBounds = yBounds;
+
+    this.recalculateZoomTransform();
+  }
+
+  /**
+   * Set bounds
+   */
+  setTranslateBounds(xBounds: [number, number], yBounds: [number, number]): void {
+    this.translateBoundsX = xBounds;
+    this.translateBoundsY = yBounds;
+
+    this.updateTranslateExtent();
+  }
+
+  /**
+   * Adjust zoom due to changes in size of target
+   * @param  force - force update even if size did not change
+   */
+  adjustToSize(width?: number | boolean, height?: number, force: boolean = false): void {
+    const { width: oldWidth, height: oldHeight, scaleX, scaleY, recalculateZoomTransform } = this;
+
+    let w = 0;
+    let h = 0;
+
+    if (typeof width === 'undefined' || typeof width === 'boolean') {
+      const { width: containerWidth, height: containerHeight } = this.container.node().getBoundingClientRect();
+      w = containerWidth;
+      h = containerHeight;
+    } else {
+      w = width;
+      h = height;
+    }
+
+    const newWidth: number = Math.max(1, w);
+    const newHeight: number = Math.max(1, h);
+
+    // exit early if nothing has changed
+    if (!force && oldWidth === newWidth && oldHeight === newHeight) {
+      return;
+    }
+
+    scaleX.range([0, newWidth]);
+    scaleY.range([0, newHeight]);
+
+    recalculateZoomTransform();
+    this.onRescale(this.currentStateAsEvent());
+  }
+
+  /**
+   * Calculate new transform
+   * @param  dx0
+   * @param  dx1
+   * @param  dy
+   * @returns  New transformation matrix
+   */
+  calculateTransform(dx0: number, dx1: number, dy: number): ZoomTransform {
+    const { scaleX, xSpan, xBounds, yBounds, zFactor, viewportRatio: ratio, isXInverted, isYInverted } = this;
+
+    const [rx1, rx2] = scaleX.range();
+    const displ: number = Math.abs(dx1 - dx0);
+    const k: number = xSpan / displ;
+    const unitsPerPixels: number = displ / (rx2 - rx1);
+
+    const dy0: number = dy - (isYInverted ? -displ : displ) / zFactor / ratio / 2;
+
+    const tx: number = (xBounds[0] - dx0) / (isXInverted ? -unitsPerPixels : unitsPerPixels);
+    const ty: number = (yBounds[0] - dy0) / ((isYInverted ? -unitsPerPixels : unitsPerPixels) / zFactor);
+
+    return zoomIdentity.translate(tx, ty).scale(k);
+  }
+
+  /**
+   * Recalcualate the transform
+   */
+  recalculateZoomTransform(): void {
+    const { scaleX, scaleY, container, calculateTransform, updateTranslateExtent } = this;
+
+    const [dx0, dx1] = scaleX.domain();
+    const [dy0, dy1] = scaleY.domain();
+
+    const dy: number = dy0 + (dy1 - dy0) / 2;
+
+    const transform: ZoomTransform = calculateTransform(dx0, dx1, dy);
+
+    updateTranslateExtent();
+
+    this.zoom.transform(container, transform);
+  }
+
+  setZoomLevelBoundary(zoomlevels: [number, number]): ZoomPanHandler {
+    this.zoom.scaleExtent(zoomlevels);
+    return this;
+  }
+
+  setMaxZoomLevel(zoomlevel: number): ZoomPanHandler {
+    const zoomLevels = this.zoom.scaleExtent();
+    this.zoom.scaleExtent([zoomLevels[0], zoomlevel]);
+    return this;
+  }
+
+  setMinZoomLevel(zoomlevel: number): ZoomPanHandler {
+    const zoomLevels = this.zoom.scaleExtent();
+    this.zoom.scaleExtent([zoomlevel, zoomLevels[1]]);
+    return this;
+  }
+}

package/src/control/index.ts

@@ -0,0 +1,5 @@
+export * from './interfaces';
+export * from './IntersectionReferenceSystem';
+export * from './LayerManager';
+export * from './MainController';
+export * from './ZoomPanHandler';

package/src/control/interfaces.ts

@@ -0,0 +1,42 @@
+import { IntersectionReferenceSystem } from './IntersectionReferenceSystem';
+import { ScaleOptions } from '../interfaces';
+import { Layer } from '../layers';
+
+export interface AxisOptions {
+  xLabel: string;
+  yLabel: string;
+  unitOfMeasure: string;
+}
+
+export interface ControllerOptions {
+  container: HTMLElement;
+  axisOptions?: AxisOptions;
+  scaleOptions?: ScaleOptions;
+  referenceSystem?: IntersectionReferenceSystem;
+  layers?: Layer<unknown>[];
+  path?: number[][];
+}
+
+interface OverlayEvent<T> {
+  target?: Element;
+  source: Element;
+  caller: T;
+}
+
+export interface OverlayResizeEvent<T> extends OverlayEvent<T> {
+  width: number;
+  height: number;
+}
+
+export interface OverlayMouseMoveEvent<T> extends OverlayEvent<T> {
+  x: number;
+  y: number;
+}
+
+export interface OverlayMouseExitEvent<T> extends OverlayEvent<T> {}
+
+export interface OverlayCallbacks<T> {
+  onMouseMove?(event: OverlayMouseMoveEvent<T>): void;
+  onMouseExit?(event: OverlayMouseExitEvent<T>): void;
+  onResize?(event: OverlayResizeEvent<T>): void;
+}

package/src/control/overlay.ts

@@ -0,0 +1,118 @@
+import { select, Selection, pointer, ContainerElement } from 'd3-selection';
+import { OverlayCallbacks } from './interfaces';
+
+export class Overlay<T> {
+  elm: Selection<Element, unknown, null, undefined>;
+  source: Element;
+  elements: { [propName: string]: Element } = {};
+  listeners: { [propName: string]: OverlayCallbacks<T> } = {};
+  enabled = true;
+
+  constructor(caller: T, container: HTMLElement) {
+    const con = select(container);
+    this.elm = con.append('div').attr('id', 'overlay').style('z-index', '11').style('position', 'absolute');
+
+    this.source = this.elm.node();
+
+    const { elm } = this;
+    elm.on('resize', (event) => {
+      const { width, height } = event.detail;
+      elm.style('width', `${width}px`).style('height', `${height}px`);
+
+      if (!this.enabled) {
+        return;
+      }
+
+      Object.keys(this.listeners).forEach((key: string) => {
+        const target = this.elements[key] || null;
+        const ops = this.listeners[key];
+        if (ops && ops.onResize) {
+          requestAnimationFrame(() =>
+            ops.onResize({
+              target,
+              source: this.source,
+              caller,
+              width,
+              height,
+            }),
+          );
+        }
+      });
+    });
+
+    elm.on('mousemove', (event) => {
+      if (!this.enabled) {
+        return;
+      }
+
+      const [mx, my] = pointer(event, this.elm.node() as ContainerElement);
+      Object.keys(this.listeners).forEach((key: string) => {
+        const target = this.elements[key] || null;
+        const ops = this.listeners[key];
+
+        if (ops && ops.onMouseMove) {
+          requestAnimationFrame(() =>
+            ops.onMouseMove({
+              x: mx,
+              y: my,
+              target,
+              source: this.source,
+              caller,
+            }),
+          );
+        }
+      });
+    });
+
+    elm.on('mouseout', () => {
+      if (!this.enabled) {
+        return;
+      }
+      Object.keys(this.listeners).forEach((key: string) => {
+        const target = this.elements[key] || null;
+        const ops = this.listeners[key];
+        if (ops && ops.onMouseExit) {
+          requestAnimationFrame(() =>
+            ops.onMouseExit({
+              target,
+              source: this.source,
+              caller,
+            }),
+          );
+        }
+      });
+    });
+  }
+
+  create(key: string, callbacks?: OverlayCallbacks<T>): HTMLElement {
+    const newElm = this.elm.append('div').style('position', 'relative').style('pointer-events', 'none').node();
+    this.elements[key] = newElm;
+    if (callbacks) {
+      this.listeners[key] = callbacks;
+    }
+    return newElm;
+  }
+
+  register(key: string, callbacks: OverlayCallbacks<T>): void {
+    this.listeners[key] = callbacks;
+  }
+
+  remove(key: string): void {
+    const el = this.elements[key];
+    if (el) {
+      select(el).remove();
+      delete this.elements[key];
+    }
+    delete this.listeners[key];
+  }
+
+  setZIndex(zIndex: number): void {
+    this.elm.style('z-index', zIndex);
+  }
+
+  destroy(): void {
+    this.source.remove();
+  }
+}
+
+export const overlay = <T>(caller: T, container: HTMLElement): Overlay<T> => new Overlay<T>(caller, container);

package/src/datautils/colortable.ts

@@ -0,0 +1,14 @@
+import { scaleLinear } from 'd3-scale';
+import { color } from 'd3-color';
+
+export function createColorTable(colorMap: string[], size: number): number[][] {
+  const colorDomain = colorMap.map((_v, i) => (i * size) / colorMap.length);
+  const colorScale = scaleLinear<string>().domain(colorDomain).range(colorMap);
+
+  const table = Array.from(new Array(size).keys()).map((i) => {
+    const rgb = color(colorScale(i)).rgb();
+    return [rgb.r, rgb.g, rgb.b];
+  });
+
+  return table;
+}

package/src/datautils/findsample.ts

@@ -0,0 +1,64 @@
+export function findIndexOfSample(data: number[][], pos: number): number {
+  let a = 0;
+  let b = data.length - 1;
+  const linearSearchLimit = 20;
+  let aPos = data[a][0];
+  let bPos = data[b][0];
+
+  while (b - a > linearSearchLimit) {
+    const splitAt = Math.floor((b + a) / 2);
+    const splitPos = data[splitAt][0];
+
+    if (pos >= aPos && pos < splitPos) {
+      b = splitAt;
+      bPos = data[b][0];
+    } else if (pos >= splitPos && pos <= bPos) {
+      a = splitAt;
+      aPos = data[a][0];
+    } else if (pos <= aPos && pos > splitPos) {
+      b = splitAt;
+      bPos = data[b][0];
+    } else if (pos <= splitPos && pos >= bPos) {
+      a = splitAt;
+      aPos = data[a][0];
+    } else {
+      return -1;
+    }
+  }
+
+  let index = -1;
+  for (let i = a; i < b; i++) {
+    const v1 = data[i][0];
+    const v2 = data[i + 1][0];
+    if (Math.min(v1, v2) <= pos && pos <= Math.max(v1, v2)) {
+      index = i;
+      break;
+    }
+  }
+
+  return index;
+}
+
+export function findSampleAtPos(data: number[][], pos: number, topLimit: number = null, bottomLimit: number = null): number {
+  let y: number = null;
+  const index = findIndexOfSample(data, pos);
+  if (index !== -1) {
+    const v1 = data[index][1];
+    const v2 = data[index + 1][1];
+    if (v2 && v2) {
+      const x1 = data[index][0];
+      const x2 = data[index + 1][0];
+      const span = x2 - x1;
+      const d = pos - x1;
+      const f = d / span;
+      y = v1 * (1 - f) + v2 * f;
+      if (topLimit && topLimit > y) {
+        y = topLimit;
+      }
+      if (bottomLimit && bottomLimit < y) {
+        y = bottomLimit;
+      }
+    }
+  }
+  return y;
+}

package/src/datautils/index.ts

@@ -0,0 +1,6 @@
+export * from './findsample';
+export * from './interfaces';
+export * from './picks';
+export * from './seismicimage';
+export * from './surfacedata';
+export * from './trajectory';