@equinor/esv-intersection 3.0.0-beta.4 → 3.0.0-beta.5

package/dist/interfaces.d.ts

@@ -75,7 +75,7 @@ export interface Trajectory {
     points: number[][];
     offset: number;
 }
-export declare type BoundingBox = {
+export type BoundingBox = {
     x: number;
     y: number;
     width: number;

package/dist/layers/CalloutCanvasLayer.d.ts

@@ -2,11 +2,11 @@ import { ScaleLinear } from 'd3-scale';
 import { CanvasLayer } from './base/CanvasLayer';
 import { OnUpdateEvent, Annotation, OnRescaleEvent, BoundingBox } from '../interfaces';
 import { LayerOptions } from './base/Layer';
-export declare type Point = {
+export type Point = {
     x: number;
     y: number;
 };
-export declare type Callout = {
+export type Callout = {
     title: string;
     label: string;
     color: string;

package/dist/layers/CustomDisplayObjects/ComplexRope.d.ts

@@ -1,5 +1,5 @@
 import { Mesh, IPoint, Renderer, Texture } from 'pixi.js';
-export declare type ComplexRopeSegment = {
+export type ComplexRopeSegment = {
     points: IPoint[];
     diameter: number;
 };

package/dist/layers/GeomodelCanvasLayer.d.ts

@@ -2,7 +2,7 @@ import { SurfaceData, SurfaceLine } from '../datautils';
 import { OnUpdateEvent, OnRescaleEvent } from '../interfaces';
 import { LayerOptions } from './base';
 import { CanvasLayer } from './base/CanvasLayer';
-declare type SurfacePaths = {
+type SurfacePaths = {
     color: string;
     path: Path2D;
 };

package/dist/layers/ImageCanvasLayer.d.ts

@@ -10,7 +10,7 @@ export interface OnImageLayerUpdateEvent<T> extends OnUpdateEvent<T> {
     x?: number;
     y?: number;
 }
-export declare type OnImageLayerRescaleEvent<T> = OnImageLayerUpdateEvent<T> & OnRescaleEvent;
+export type OnImageLayerRescaleEvent<T> = OnImageLayerUpdateEvent<T> & OnRescaleEvent;
 export declare class ImageLayer<T> extends CanvasLayer<T> {
     img: HTMLImageElement;
     onMount(event: OnMountEvent): void;

package/dist/layers/ReferenceLineLayer.d.ts

@@ -0,0 +1,29 @@
+import { CanvasLayer, LayerOptions } from './base';
+import { OnUpdateEvent, OnRescaleEvent, OnMountEvent } from '../interfaces';
+import { ScaleLinear } from 'd3-scale';
+export type ReferenceLineType = 'wavy' | 'dashed' | 'solid';
+export type ReferenceLine = {
+    text?: string;
+    lineType: ReferenceLineType;
+    color: string;
+    depth: number;
+    lineWidth?: number;
+    textColor?: string;
+    fontSize?: string;
+};
+export interface ReferenceLineLayerOptions extends LayerOptions<ReferenceLine[]> {
+}
+export declare class ReferenceLineLayer extends CanvasLayer<ReferenceLine[]> {
+    yScale: ScaleLinear<number, number, never> | null;
+    xScale: ScaleLinear<number, number, never> | null;
+    onMount(event: OnMountEvent): void;
+    onUpdate(event: OnUpdateEvent<ReferenceLine[]>): void;
+    onRescale(event: OnRescaleEvent): void;
+    private drawDashed;
+    private drawSolid;
+    private drawWavy;
+    private drawText;
+    private setCtxLineStyle;
+    private setCtxLineWidth;
+    private render;
+}

package/dist/layers/SeismicCanvasLayer.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="offscreencanvas" />
 import { CanvasLayer } from './base/CanvasLayer';
 import { OnUpdateEvent, OnMountEvent, OnRescaleEvent } from '../interfaces';
-export declare type SeismicCanvasDataOptions = {
+export type SeismicCanvasDataOptions = {
     x: number;
     y: number;
     width: number;
     height: number;
 };
-export declare type SeismicCanvasData = {
+export type SeismicCanvasData = {
     image: CanvasImageSource | OffscreenCanvas;
     options: SeismicCanvasDataOptions;
 };

package/dist/layers/index.d.ts

@@ -13,3 +13,4 @@ export * from './ImageCanvasLayer';
 export * from './SchematicLayer';
 export * from './SeismicCanvasLayer';
 export * from './WellborePathLayer';
+export * from './ReferenceLineLayer';

package/dist/layers/schematicInterfaces.d.ts

@@ -2,7 +2,7 @@ export declare function assertNever(x: never): never;
 /**
  * The closure type of the outline
  */
-export declare type OutlineClosure = 'None' | 'TopAndBottom' | 'Top' | 'Bottom';
+export type OutlineClosure = 'None' | 'TopAndBottom' | 'Top' | 'Bottom';
 export interface HoleSize {
     kind: 'hole';
     id: string;
@@ -58,7 +58,7 @@ export interface CementPlug {
     referenceIds: string[];
 }
 export declare const isCementPlug: (item: PAndA) => item is CementSqueeze;
-export declare type PAndA = PAndASymbol | CementSqueeze | CementPlug;
+export type PAndA = PAndASymbol | CementSqueeze | CementPlug;
 interface BaseCompletion {
     id: string;
     diameter: number;
@@ -75,7 +75,7 @@ export interface CompletionSymbol extends BaseCompletion {
     kind: 'completionSymbol';
     symbolKey: string;
 }
-export declare type Completion = Tubing | Screen | CompletionSymbol;
+export type Completion = Tubing | Screen | CompletionSymbol;
 export declare const foldCompletion: <T>(fScreen: (obj: Screen) => T, fTubing: (obj: Tubing) => T, fSymbol: (obj: CompletionSymbol) => T) => (completion: Completion) => T;
 export interface Cement {
     kind: 'cement';
@@ -89,7 +89,7 @@ export interface Cement {
 /**
  * 'Open hole' and 'Open hole screen' are not included as they are not visualized and also not included in the ruleset
  */
-export declare type PerforationSubKind = 'Perforation' | 'Open hole gravel pack' | 'Open hole frac pack' | 'Cased hole frac pack' | 'Cased hole gravel pack' | 'Cased hole fracturation';
+export type PerforationSubKind = 'Perforation' | 'Open hole gravel pack' | 'Open hole frac pack' | 'Cased hole frac pack' | 'Cased hole gravel pack' | 'Cased hole fracturation';
 export interface Perforation {
     kind: 'perforation';
     subKind: PerforationSubKind;

package/dist/utils/arc-length.d.ts

@@ -1,5 +1,5 @@
 import { Vector } from 'curve-interpolator/dist/src/interfaces';
-declare type fx = (n: number) => Vector;
+type fx = (n: number) => Vector;
 export declare class ArcLength {
     /**
      * Calculate using an adaptive bisect method

package/dist/utils/root-finder.d.ts

@@ -1,4 +1,4 @@
-declare type fx = (n: number) => number;
+type fx = (n: number) => number;
 export declare class RootFinder {
     /**
      * Find root using newthons method

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "@equinor/esv-intersection",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "description": "Intersection component package with testing and automatic documentation.",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "browser": "dist/index.umd.js",
+  "type": "module",
+  "exports": {
+    "import": "./dist/index.esm.js",
+    "require": "./dist/index.js",
+    "browser": "./dist/index.umd.js"
+  },
   "files": [
-    "dist"
+    "dist/*",
+    "src/*",
+    "!test/*"
   ],
   "types": "dist/index.d.ts",
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "rollup -c",
+    "build": "rollup -c --bundleConfigAsCjs",
     "prepub": "npm run build",
     "pub": "npm publish --access=public",
     "prepub-beta": "npm run build",
@@ -42,40 +47,40 @@
   },
   "homepage": "https://github.com/equinor/esv-intersection#readme",
   "devDependencies": {
-    "@babel/core": "^7.19.1",
-    "@babel/preset-env": "^7.19.1",
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addon-docs": "^6.5.12",
-    "@storybook/addon-storysource": "^6.5.12",
-    "@storybook/html": "^6.5.12",
+    "@rollup/plugin-commonjs": "^23.0.5",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.2.0",
+    "@storybook/addon-docs": "^6.5.14",
+    "@storybook/addon-storysource": "^6.5.14",
+    "@storybook/html": "^6.5.14",
     "@types/d3": "^7.4.0",
-    "@types/jest": "^29.0.2",
+    "@types/jest": "^29.2.4",
     "@types/mock-raf": "^1.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
-    "babel-jest": "^29.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "babel-jest": "^29.3.1",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.23.1",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.4",
-    "jest": "^29.0.3",
+    "eslint-plugin-storybook": "^0.6.8",
+    "jest": "^29.3.1",
     "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.0.3",
+    "jest-environment-jsdom": "^29.3.1",
     "mock-raf": "^1.0.1",
-    "pixi.js": "^6.5.8",
     "pixi-dashed-line": "^1.4.2",
-    "prettier": "^2.7.1",
+    "pixi.js": "^6.5.8",
+    "prettier": "^2.8.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.34.0",
-    "storybook-dark-mode": "^1.1.2",
-    "tslib": "^2.4.0",
-    "typedoc": "^0.23.14",
-    "typescript": "^4.8.3"
+    "rollup": "^3.7.4",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "storybook-dark-mode": "^2.0.4",
+    "tslib": "^2.4.1",
+    "typedoc": "^0.23.22",
+    "typescript": "^4.9.4"
   },
   "jest": {
     "setupFiles": [
@@ -93,14 +98,14 @@
     ]
   },
   "peerDependencies": {
-    "pixi.js": "^6.5.8",
-    "pixi-dashed-line": "^1.4.2"
+    "pixi-dashed-line": "^1.4.2",
+    "pixi.js": "^6.5.8"
   },
   "dependencies": {
     "@equinor/videx-math": "^1.1.0",
     "@equinor/videx-vector2": "^1.0.44",
     "curve-interpolator": "2.0.8",
-    "d3-array": "^3.2.0",
+    "d3-array": "^3.2.1",
     "d3-axis": "^3.0.0",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",

package/src/components/axis.ts

@@ -0,0 +1,247 @@
+import { axisRight, axisBottom } from 'd3-axis';
+import { BaseType, Selection } from 'd3-selection';
+import { ScaleLinear, scaleLinear } from 'd3-scale';
+import { OnResizeEvent, OnRescaleEvent } from '../interfaces';
+
+export type Options = {
+  offsetX: number;
+  offsetY: number;
+  visible: boolean;
+};
+
+export class Axis {
+  private mainGroup: Selection<SVGElement, unknown, null, undefined>;
+  private _scaleX: ScaleLinear<number, number>;
+  private _scaleY: ScaleLinear<number, number>;
+  private _showLabels = true;
+  private _labelXDesc: string;
+  private _labelYDesc: string;
+  private _unitOfMeasure: string;
+  private _offsetX: number = 0;
+  private _offsetY: number = 0;
+  private _flipX = false;
+  private _flipY = false;
+  private visible: boolean = true;
+
+  constructor(
+    mainGroup: Selection<SVGElement, unknown, null, undefined>,
+    showLabels = true,
+    labelXDesc: string,
+    labelYDesc: string,
+    unitOfMeasure: string,
+    options?: Options,
+  ) {
+    this.mainGroup = mainGroup;
+    this._showLabels = showLabels;
+    this._labelXDesc = labelXDesc;
+    this._labelYDesc = labelYDesc;
+    this._unitOfMeasure = unitOfMeasure;
+    if (options && options.offsetX) {
+      this._offsetX = options.offsetX;
+    }
+    if (options && options.offsetX) {
+      this._offsetY = options.offsetY;
+    }
+    if (options && options.visible) {
+      this.visible = options.visible;
+    }
+    this.mainGroup.style('pointer-events', 'none');
+
+    this._scaleX = scaleLinear().domain([0, 1]).range([0, 1]);
+    this._scaleY = scaleLinear().domain([0, 1]).range([0, 1]);
+  }
+
+  private renderLabelx(): Selection<BaseType, unknown, null, undefined> {
+    const { _labelXDesc: labelXDesc, _unitOfMeasure: unitOfMeasure, _showLabels, _scaleX: scaleX } = this;
+    const [, width] = scaleX.range();
+    const gx = this.renderGx();
+
+    let labelx = gx.select('text.axis-labelx');
+    if (_showLabels) {
+      if (labelx.empty()) {
+        labelx = gx
+          .append('text')
+          .attr('class', 'axis-labelx')
+          .attr('fill', 'rgba(0,0,0,0.3)')
+          .style('text-anchor', 'middle')
+          .style('font-weight', '800')
+          .style('font-size', '10px')
+          .text(`${labelXDesc} (${unitOfMeasure})`);
+      }
+    } else {
+      labelx.remove();
+    }
+    labelx.attr('transform', `translate(${width / 2},-4)`);
+    return labelx;
+  }
+
+  private renderLabely(): Selection<BaseType, unknown, null, undefined> {
+    const { _labelYDesc: labelYDesc, _unitOfMeasure: unitOfMeasure, _showLabels, _scaleY } = this;
+    const [, height] = _scaleY.range();
+    const gy = this.renderGy();
+
+    let labely = gy.select('text.axis-labely');
+    if (_showLabels) {
+      if (labely.empty()) {
+        labely = gy
+          .append('text')
+          .attr('class', 'axis-labely')
+          .attr('fill', 'rgba(0,0,0,0.3)')
+          .style('text-anchor', 'middle')
+          .style('font-weight', '800')
+          .style('font-size', '10px')
+          .text(`${labelYDesc} (${unitOfMeasure})`);
+      }
+      labely.attr('transform', `translate(-10,${height / 2})rotate(90)`);
+    } else {
+      labely.remove();
+    }
+    return labely;
+  }
+
+  private renderGy(): Selection<BaseType, unknown, null, undefined> {
+    const { _scaleX, _scaleY } = this;
+    const yAxis = axisRight(_scaleY) as (selection: Selection<SVGSVGElement, unknown, null, undefined>) => void;
+    const [, width] = _scaleX.range();
+    const gy = this.createOrGet('y-axis');
+    gy.call(yAxis);
+    gy.attr('transform', `translate(${width},0)`);
+
+    return gy;
+  }
+
+  private renderGx(): Selection<BaseType, unknown, null, undefined> {
+    const { _scaleX, _scaleY } = this;
+    const xAxis = axisBottom(_scaleX) as (selection: Selection<SVGSVGElement, unknown, null, undefined>) => void;
+    const [, height] = _scaleY.range();
+
+    const gx = this.createOrGet('x-axis');
+    gx.attr('transform', `translate(0 ${height})`);
+    gx.call(xAxis);
+    return gx;
+  }
+
+  private createOrGet = (name: string): Selection<BaseType, unknown, null, undefined> => {
+    const { mainGroup } = this;
+    let res = mainGroup.select(`g.${name}`);
+    if (res.empty()) {
+      res = mainGroup.append('g').attr('class', name);
+    }
+    return res;
+  };
+
+  render(): void {
+    this.renderLabelx();
+    this.renderLabely();
+  }
+
+  onResize(event: OnResizeEvent): void {
+    this.mainGroup.attr('height', `${event.height}px`).attr('width', `${event.width}px`);
+  }
+
+  onRescale(event: OnRescaleEvent): void {
+    const { _scaleX, _scaleY, offsetX, offsetY } = this;
+    const { xScale, yScale } = event;
+    const xBounds = xScale.domain();
+    const yBounds = yScale.domain();
+
+    const xRange = xScale.range();
+    const yRange = yScale.range();
+
+    _scaleX.domain([xBounds[0] - offsetX, xBounds[1] - offsetX]).range(xRange);
+    _scaleY.domain([yBounds[0] - offsetY, yBounds[1] - offsetY]).range(yRange);
+    this.flipX(this._flipX);
+    this.flipY(this._flipY);
+
+    if (this.visible) {
+      this.render();
+    }
+  }
+
+  show(): Axis {
+    this.visible = true;
+    this.mainGroup.attr('visibility', 'visible');
+    this.render();
+    return this;
+  }
+
+  hide(): Axis {
+    this.visible = false;
+    this.mainGroup.attr('visibility', 'hidden');
+    return this;
+  }
+
+  flipX(flipX: boolean): Axis {
+    this._flipX = flipX;
+    const domain = this._scaleX.domain();
+    const flip = flipX ? -1 : 1;
+    this._scaleX.domain([flip * domain[0], flip * domain[1]]);
+    return this;
+  }
+
+  flipY(flipY: boolean): Axis {
+    this._flipY = flipY;
+    const domain = this._scaleY.domain();
+    const flip = flipY ? -1 : 1;
+    this._scaleY.domain([flip * domain[0], flip * domain[1]]);
+    return this;
+  }
+
+  showLabels(): Axis {
+    this._showLabels = true;
+    this.render();
+    return this;
+  }
+
+  hideLabels(): Axis {
+    this._showLabels = false;
+    this.render();
+    return this;
+  }
+
+  setLabelX(label: string): Axis {
+    this._labelXDesc = label;
+    return this;
+  }
+
+  setLabelY(label: string): Axis {
+    this._labelYDesc = label;
+    return this;
+  }
+
+  setUnitOfMeasure(uom: string): Axis {
+    this._unitOfMeasure = uom;
+    return this;
+  }
+
+  setLabels(labelX: string, labelY: string, unitOfMeasure: string): Axis {
+    this._labelXDesc = labelX;
+    this._labelYDesc = labelY;
+    this._unitOfMeasure = unitOfMeasure;
+    return this;
+  }
+
+  get offsetX(): number {
+    return this._offsetX;
+  }
+
+  set offsetX(offset: number) {
+    this._offsetX = offset;
+  }
+
+  get offsetY(): number {
+    return this._offsetY;
+  }
+
+  set offsetY(offset: number) {
+    this._offsetY = offset;
+  }
+
+  get scaleX(): ScaleLinear<number, number> {
+    return this._scaleX.copy();
+  }
+
+  get scaleY(): ScaleLinear<number, number> {
+    return this._scaleY.copy();
+  }
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './axis';

package/src/constants.ts

@@ -0,0 +1,17 @@
+export const DEFAULT_LAYER_WIDTH = 200;
+export const DEFAULT_LAYER_HEIGHT = 300;
+
+export const HORIZONTAL_AXIS_MARGIN = 40;
+export const VERTICAL_AXIS_MARGIN = 30;
+
+export const EXAGGERATED_DIAMETER = 100;
+export const HOLE_OUTLINE = 0.6;
+export const SCREEN_OUTLINE = 0.3;
+
+export const SHOE_WIDTH = 8;
+export const SHOE_LENGTH = 16;
+
+export const DEFAULT_TEXTURE_SIZE = 64;
+
+// Surface lines are drawn as LINES and not TRIANGLE_STRIP so width can only be 1
+export const SURFACE_LINE_WIDTH = 1;