@equinor/esv-intersection 3.0.4 → 3.0.6

package/dist/vendor/pixi-dashed-line/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/vendor/pixi-dashed-line/index.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,IAAI,MAAM,SAAS,CAAC;AAEhC,yEAAyE;AACzE,MAAM,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;AAE9B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,qBAAa,QAAQ;IACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;IAExB,iCAAiC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,sBAAsB;IACtB,MAAM,aAAoB;IAE1B,4BAA4B;IAC5B,KAAK,SAAK;IAEV,OAAO,CAAC,KAAK,CAAa;IAE1B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,IAAI,CAAW;IAEvB,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,OAAO,CAAkB;IAGjC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAM;IAE3D;;;;;;;;;;;;OAYG;gBACS,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAE,eAAoB;IAUlE,oGAAoG;IACpG,YAAY;IAwBZ,OAAO,CAAC,MAAM,CAAC,QAAQ;IAIvB,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAQlC,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI;IA8EvD,SAAS;IAIT,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAK,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI;IAyBzF,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,SAAK,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI;IAwB5G,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI;IA0CxE,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI;IAuCzF,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,MAAM,CAAC,UAAU;CAgC1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/esv-intersection",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Intersection component package with testing and automatic documentation.",
   "type": "module",
   "exports": {
@@ -17,19 +17,22 @@
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "vite build",
-    "prepub": "npm run build",
-    "pub": "npm publish --access=public",
-    "prepub-beta": "npm run build",
-    "pub-beta": "npm publish --tag=beta --access=public",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx src test",
-    "test": "tsc --project tsconfig.test.json && vitest",
+    "lint:eslint": "eslint --ext .js,.jsx,.ts,.tsx src test",
+    "lint:tsc": "tsc -b",
+    "lint": "run-p lint:tsc lint:eslint",
+    "test": "vitest",
     "test:watch": "vitest --watch",
     "predocs": "rimraf docs_out",
     "docs": "typedoc --out docs_out src",
     "postdocs": "copyfiles images/* docs_out && copyfiles .nojekyll docs_out",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prettier": "prettier --write --config .prettierrc \"**/*.ts\" "
+    "prepare": "husky install",
+    "version": "changeset version && npm install --package-lock-only",
+    "release": "npm run build && changeset publish"
+  },
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown"
   },
   "repository": {
     "type": "git",
@@ -47,29 +50,33 @@
   },
   "homepage": "https://github.com/equinor/esv-intersection#readme",
   "devDependencies": {
-    "@storybook/addon-storysource": "^7.0.7",
-    "@storybook/html-vite": "^7.0.7",
+    "@changesets/cli": "^2.26.1",
+    "@storybook/addon-storysource": "^7.0.18",
+    "@storybook/html-vite": "^7.0.18",
     "@types/d3": "^7.4.0",
     "@types/mock-raf": "^1.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.39.0",
+    "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.6.12",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
     "mock-raf": "^1.0.1",
+    "npm-run-all": "^4.1.5",
     "pixi.js": "^7.2.3",
     "prettier": "^2.8.8",
-    "rimraf": "^5.0.0",
-    "storybook": "^7.0.7",
+    "rimraf": "^5.0.1",
+    "storybook": "^7.0.18",
     "storybook-dark-mode": "^3.0.0",
-    "tslib": "^2.5.0",
-    "typedoc": "^0.24.6",
+    "tslib": "^2.5.3",
+    "typedoc": "^0.24.8",
     "typescript": "^5.0.2",
-    "vite": "^4.3.4",
+    "vite": "^4.3.9",
     "vite-plugin-dts": "^2.3.0",
-    "vitest": "^0.30.0",
+    "vitest": "^0.31.4",
     "vitest-canvas-mock": "^0.2.2"
   },
   "peerDependencies": {
@@ -79,7 +86,7 @@
     "@equinor/videx-math": "^1.1.0",
     "@equinor/videx-vector2": "^1.0.44",
     "curve-interpolator": "3.1.1",
-    "d3-array": "^3.2.3",
+    "d3-array": "^3.2.4",
     "d3-axis": "^3.0.0",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",

package/src/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "parserOptions": {
+    "project": "./src/tsconfig.json"
+  }
+}

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/control/ExtendedCurveInterpolator.ts

@@ -0,0 +1,155 @@
+import Vector2 from '@equinor/videx-vector2';
+import { clamp } from '@equinor/videx-math';
+import { CurveInterpolator } from 'curve-interpolator';
+import { Vector } from 'curve-interpolator/dist/src/core/interfaces';
+import { CurveInterpolatorOptions } from 'curve-interpolator/dist/src/curve-interpolator';
+
+import { RootFinder } from '../utils/root-finder';
+import { ArcLength } from '../utils/arc-length';
+import { BinarySearch } from '../utils/binary-search';
+
+export class ExtendedCurveInterpolator extends CurveInterpolator {
+  arcLengthLookup: number[] = [];
+
+  constructor(points: Vector[], options?: CurveInterpolatorOptions) {
+    super(points, options);
+    this.findTForArcLength = this.findTForArcLength.bind(this);
+    this.findTByRootForArcLength = this.findTByRootForArcLength.bind(this);
+    this.findApproxTForArcLength = this.findApproxTForArcLength.bind(this);
+    this.findTQuickForArcLength = this.findTQuickForArcLength.bind(this);
+    this.generateArcLengthLookup = this.generateArcLengthLookup.bind(this);
+    this.getArcLength = this.getArcLength.bind(this);
+    this.getQuickArcLength = this.getQuickArcLength.bind(this);
+    this.getPointAtArcLength = this.getPointAtArcLength.bind(this);
+    this.getPointAt = this.getPointAt.bind(this);
+  }
+
+  /**
+   * Function which finds t value for arc length
+   * @param {Number} arcLength Target arc length
+   * @param {Number} tolerance Tolerance for result
+   * @param {Number} iterations Max number of iterations to use
+   */
+  findTForArcLength(arcLength: number, options?: { approxT?: boolean; quickT?: boolean; normalizedLength?: number }): number {
+    // TODO: Ideally the CurveInterpolator should be able to provide t for curve length
+    let t;
+    if (options?.approxT) {
+      t = this.findApproxTForArcLength(arcLength, options?.normalizedLength);
+    } else if (options?.quickT) {
+      t = this.findTQuickForArcLength(arcLength);
+    } else {
+      t = this.findTByRootForArcLength(arcLength);
+    }
+    return t;
+  }
+
+  /**
+   * Function which finds t value for arc length by finding root
+   * @param {Number} arcLength Target arc length
+   * @param {Number} tolerance Tolerance for result
+   * @param {Number} iterations Max number of iterations to use
+   */
+  findTByRootForArcLength(arcLength: number, tolerance = 0.01, iterations = 100): number {
+    if (arcLength <= 0) {
+      return 0.0;
+    }
+    if (arcLength >= this.length) {
+      return 1.0;
+    }
+    const t = RootFinder.findRoot((x) => arcLength - this.getQuickArcLength(0, x), tolerance, iterations, arcLength / this.length);
+    return t;
+  }
+
+  /**
+   * Function which finds t value for arc length by simple approximation
+   * @param {Number} arcLength Target arclength
+   */
+  findApproxTForArcLength(arcLength: number, normalizedLength?: number): number {
+    const t = arcLength / (normalizedLength || this.length);
+    return t;
+  }
+
+  /**
+   * Function which finds t value for arc length using lookup table
+   * @param {Number} arcLength Target arclength
+   */
+  findTQuickForArcLength(arcLength: number): number {
+    if (this.arcLengthLookup.length === 0) {
+      this.generateArcLengthLookup();
+    }
+    const index = BinarySearch.search(this.arcLengthLookup, arcLength);
+    const v1 = this.arcLengthLookup[index];
+    const v2 = this.arcLengthLookup[index + 1];
+    const t = (index + (arcLength - v1) / (v2 - v1)) / this.arcLengthLookup.length;
+    return t;
+  }
+
+  generateArcLengthLookup(segments: number = 1000): void {
+    let lastPos = this.getPointAt(0);
+    let length = 0;
+    for (let i = 0; i < segments; i++) {
+      const pos = this.getPointAt(i / (segments - 1));
+      const delta = Vector2.distance(lastPos as number[], pos as number[]);
+      length += delta;
+      this.arcLengthLookup.push(length);
+      lastPos = pos;
+    }
+  }
+
+  /**
+   * Function calculating length along curve using interpolator.
+   * @param {Number} from t at start (default = 0)
+   * @param {Number} to t at end (default = 1)
+   */
+  getArcLength(from = 0, to = 1): number {
+    if (from === 0 && to === 1) {
+      return this.length;
+    }
+    const tolerance = 0.002;
+    return ArcLength.bisect((t: number) => this.getPointAt(t), from, to, tolerance);
+  }
+
+  /**
+   * Function calculating length along curve using interpolator.
+   * @param {Number} from t at start (default = 0)
+   * @param {Number} to t at end (default = 1)
+   */
+  getQuickArcLength(from = 0, to = 1): number {
+    let fromLength = 0;
+    let toLength = this.length;
+    if (this.arcLengthLookup.length === 0) {
+      this.generateArcLengthLookup();
+    }
+
+    if (from !== 0) {
+      const fromIndex = Math.floor(from * this.arcLengthLookup.length);
+      const fromLl = this.arcLengthLookup[fromIndex];
+      const fromLh = this.arcLengthLookup[fromIndex + 1];
+      fromLength = fromLl + ((from * this.arcLengthLookup.length) % this.arcLengthLookup.length) * (fromLh - fromLl);
+    }
+
+    if (to !== 1) {
+      const toIndex = Math.floor(to * this.arcLengthLookup.length);
+      const toLl = this.arcLengthLookup[toIndex];
+      const toLh = this.arcLengthLookup[toIndex + 1];
+      toLength = toLl + ((from * this.arcLengthLookup.length) % this.arcLengthLookup.length) * (toLh - toLl);
+    }
+
+    const totalLength = toLength - fromLength;
+    return totalLength;
+  }
+
+  /**
+   * Function getting a point at curve length.
+   * @param {Number} arcLength
+   */
+  getPointAtArcLength(arcLength: number, options?: { approxT?: boolean; quickT?: boolean; normalizedLength?: number }): Vector {
+    const t = this.findTForArcLength(arcLength, options);
+    return this.getPointAt(t);
+  }
+
+  override getPointAt(t: number): Vector {
+    const tl = clamp(t, 0, 1);
+    return super.getPointAt(tl);
+  }
+}