@equinor/esv-intersection 3.0.0-beta.6 → 3.0.0

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

@@ -0,0 +1,57 @@
+import * as PIXI from 'pixi.js';
+/** Define the dash: [dash length, gap size, dash size, gap size, ...] */
+export declare type Dashes = number[];
+export interface DashLineOptions {
+    dash?: Dashes;
+    width?: number;
+    color?: number;
+    alpha?: number;
+    scale?: number;
+    useTexture?: boolean;
+    useDots?: boolean;
+    cap?: PIXI.LINE_CAP;
+    join?: PIXI.LINE_JOIN;
+    alignment?: number;
+}
+export declare class DashLine {
+    graphics: PIXI.Graphics;
+    /** current length of the line */
+    lineLength: number;
+    /** cursor location */
+    cursor: PIXI.Point;
+    /** desired scale of line */
+    scale: number;
+    private activeTexture;
+    private start;
+    private dashSize;
+    private dash;
+    private useTexture;
+    private options;
+    static dashTextureCache: Record<string, PIXI.Texture>;
+    /**
+     * Create a DashLine
+     * @param graphics
+     * @param [options]
+     * @param [options.useTexture=false] - use the texture based render (useful for very large or very small dashed lines)
+     * @param [options.dashes=[10,5] - an array holding the dash and gap (eg, [10, 5, 20, 5, ...])
+     * @param [options.width=1] - width of the dashed line
+     * @param [options.alpha=1] - alpha of the dashed line
+     * @param [options.color=0xffffff] - color of the dashed line
+     * @param [options.cap] - add a PIXI.LINE_CAP style to dashed lines (only works for useTexture: false)
+     * @param [options.join] - add a PIXI.LINE_JOIN style to the dashed lines (only works for useTexture: false)
+     * @param [options.alignment] - The alignment of any lines drawn (0.5 = middle, 1 = outer, 0 = inner)
+     */
+    constructor(graphics: PIXI.Graphics, options?: DashLineOptions);
+    /** resets line style to enable dashed line (useful if lineStyle was changed on graphics element) */
+    setLineStyle(): void;
+    private static distance;
+    moveTo(x: number, y: number): this;
+    lineTo(x: number, y: number, closePath?: boolean): this;
+    closePath(): void;
+    drawCircle(x: number, y: number, radius: number, points?: number, matrix?: PIXI.Matrix): this;
+    drawEllipse(x: number, y: number, radiusX: number, radiusY: number, points?: number, matrix?: PIXI.Matrix): this;
+    drawPolygon(points: PIXI.Point[] | number[], matrix?: PIXI.Matrix): this;
+    drawRect(x: number, y: number, width: number, height: number, matrix?: PIXI.Matrix): this;
+    private adjustLineStyle;
+    private static getTexture;
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@equinor/esv-intersection",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0",
   "description": "Intersection component package with testing and automatic documentation.",
   "type": "module",
   "exports": {
-    "import": "./dist/index.esm.js",
-    "require": "./dist/index.js",
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.cjs",
     "browser": "./dist/index.umd.js"
   },
   "files": [
@@ -16,19 +16,19 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "rollup -c --bundleConfigAsCjs",
+    "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 && jest",
-    "test:watch": "jest --watchAll",
+    "test": "tsc --project tsconfig.test.json && 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": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "prettier": "prettier --write --config .prettierrc \"**/*.ts\" "
   },
   "repository": {
@@ -47,69 +47,44 @@
   },
   "homepage": "https://github.com/equinor/esv-intersection#readme",
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.18.6",
-    "@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",
+    "@storybook/addon-storysource": "^7.0.0-beta.25",
+    "@storybook/html-vite": "^7.0.0-beta.25",
     "@types/d3": "^7.4.0",
-    "@types/jest": "^29.2.4",
     "@types/mock-raf": "^1.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
-    "babel-jest": "^29.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.29.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.8",
-    "jest": "^29.3.1",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.3.1",
+    "eslint-plugin-storybook": "^0.6.10",
     "mock-raf": "^1.0.1",
-    "pixi-dashed-line": "^1.4.2",
-    "pixi.js": "^6.5.8",
-    "prettier": "^2.8.1",
+    "pixi.js": "^7.1.0",
+    "prettier": "^2.8.2",
     "rimraf": "^3.0.2",
-    "rollup": "^3.7.4",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "storybook-dark-mode": "^2.0.4",
+    "storybook": "^7.0.0-beta.25",
+    "storybook-dark-mode": "^2.0.5",
     "tslib": "^2.4.1",
-    "typedoc": "^0.23.22",
-    "typescript": "^4.9.4"
-  },
-  "jest": {
-    "setupFiles": [
-      "jest-canvas-mock"
-    ],
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ],
-    "testEnvironment": "jsdom",
-    "transformIgnorePatterns": [
-      "/node_modules/(?!d3)"
-    ]
+    "typedoc": "^0.23.24",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vite-plugin-dts": "^1.7.1",
+    "vitest": "^0.27.1",
+    "vitest-canvas-mock": "^0.2.2"
   },
   "peerDependencies": {
-    "pixi-dashed-line": "^1.4.2",
-    "pixi.js": "^6.5.8"
+    "pixi.js": "^7.1.0"
   },
   "dependencies": {
     "@equinor/videx-math": "^1.1.0",
     "@equinor/videx-vector2": "^1.0.44",
-    "curve-interpolator": "2.0.8",
+    "curve-interpolator": "3.0.1",
     "d3-array": "^3.2.1",
     "d3-axis": "^3.0.0",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
-    "d3-shape": "^3.1.0",
-    "d3-zoom": "^3.0.0"
+    "d3-shape": "^3.2.0",
+    "d3-zoom": "^3.0.0",
+    "jest-canvas-mock": "^2.4.0"
   }
 }

package/src/datautils/schematicShapeGenerator.ts

@@ -46,7 +46,6 @@ export interface CasingRenderObject {
     leftPath: Point[];
     rightPath: Point[];
     pathPoints: Point[];
-    polygon: IPoint[];
   }[];
 }
 
@@ -63,10 +62,6 @@ export const getEndLines = (
   };
 };
 
-export const makeTubularPolygon = (rightPath: Point[], leftPath: Point[]): Point[] => {
-  return [...leftPath, ...rightPath.map<Point>((d) => d.clone()).reverse()];
-};
-
 export const overlaps = (top1: number, bottom1: number, top2: number, bottom2: number): boolean => top1 <= bottom2 && top2 <= bottom1;
 
 export const strictlyOverlaps = (top1: number, bottom1: number, top2: number, bottom2: number): boolean => top1 < bottom2 && top2 < bottom1;
@@ -567,7 +562,7 @@ export const prepareCasingRenderObject = (
   const sections = getCasingIntervalsWithWindows(casing).map((casingInterval: CasingInterval) => {
     const pathPoints = getPathPoints(casingInterval.start, casingInterval.end);
     const { leftPath, rightPath } = createTubularRenderingObject(exaggeratedRadius, pathPoints);
-    return { kind: casingInterval.kind, leftPath, rightPath, pathPoints, polygon: makeTubularPolygon(leftPath, rightPath) };
+    return { kind: casingInterval.kind, leftPath, rightPath, pathPoints };
   });
 
   return {
@@ -943,8 +938,7 @@ const createSubkindOpenHoleGravelPackTexture = {
  * Yellow gravel. Yellow frac lines from hole OD into formation
  */
 const createSubkindOpenHoleFracPackTexture = {
-  packing: (perforation: Perforation, perfShape: ComplexRopeSegment, perforationOptions: PerforationOptions) => {
-    console.log({ perforation });
+  packing: (_perforation: Perforation, perfShape: ComplexRopeSegment, perforationOptions: PerforationOptions) => {
     const { canvas, ctx } = createPerforationCanvas(perfShape, perforationOptions);
     drawPacking(canvas, ctx, perforationOptions);
     return createPerforationTexture(canvas);

package/src/layers/SchematicLayer.ts

@@ -1,7 +1,7 @@
 import { max } from 'd3-array';
 import { scaleLinear, ScaleLinear } from 'd3-scale';
-import { Graphics, groupD8, IPoint, Point, Rectangle, RENDERER_TYPE, SimpleRope, Texture } from 'pixi.js';
-import { DashLine } from 'pixi-dashed-line';
+import { Graphics, groupD8, IPoint, Point, Rectangle, SimpleRope, Texture } from 'pixi.js';
+import { DashLine } from '../vendor/pixi-dashed-line';
 import { LayerOptions, PixiLayer, PixiRenderApplication } from '.';
 import { DEFAULT_TEXTURE_SIZE, EXAGGERATED_DIAMETER, HOLE_OUTLINE, SCREEN_OUTLINE } from '../constants';
 import {
@@ -56,7 +56,6 @@ import {
   createScreenTexture,
   createTubingTexture,
   createTubularRenderingObject,
-  makeTubularPolygon,
   prepareCasingRenderObject,
   createCementPlugTexture,
   createComplexRopeSegmentsForPerforation,
@@ -264,12 +263,6 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     this.addChild(polygon);
   };
 
-  protected drawBigTexturedPolygon = (coords: Point[], t: Texture): Graphics => {
-    const polygon = new Graphics().beginTextureFill({ texture: t }).drawPolygon(coords).endFill();
-    this.addChild(polygon);
-    return polygon;
-  };
-
   protected drawRope(path: Point[], texture: Texture, tint?: number): void {
     if (path.length === 0) {
       return null;
@@ -632,14 +625,9 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     const { exaggerationFactor, holeOptions } = this.options as SchematicLayerOptions<T>;
     const exaggeratedDiameter = holeObject.diameter * exaggerationFactor;
     const { rightPath, leftPath } = createTubularRenderingObject(exaggeratedDiameter / 2, pathPoints);
+    const texture = this.getHoleTexture(holeOptions, exaggeratedDiameter, maxHoleDiameter);
 
-    if (this.renderType() === RENDERER_TYPE.CANVAS) {
-      const polygonCoords = makeTubularPolygon(leftPath, rightPath);
-      this.drawBigPolygon(polygonCoords, convertColor(holeOptions.firstColor));
-    } else {
-      const texture = this.getHoleTexture(holeOptions, exaggeratedDiameter, maxHoleDiameter);
-      this.drawHoleRope(pathPoints, texture, maxHoleDiameter);
-    }
+    this.drawHoleRope(pathPoints, texture, maxHoleDiameter);
 
     this.drawOutline(leftPath, rightPath, convertColor(holeOptions.lineColor), HOLE_OUTLINE * exaggerationFactor, 'TopAndBottom', 0);
   };
@@ -759,13 +747,10 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
 
     casingRenderObject.sections.forEach((section, index, list) => {
       const outlineClosureType = SchematicLayer.getOutlineClosureType(index, list.length - 1);
-      // Pixi.js-legacy handles SimpleRope and advanced render methods poorly
-      if (this.renderType() === RENDERER_TYPE.CANVAS) {
-        this.drawBigPolygon(section.polygon, casingSolidColorNumber);
-      } else {
-        const texture = this.createCasingTexture(casingRenderObject.referenceDiameter);
-        this.drawRope(section.pathPoints, texture, casingSolidColorNumber);
-      }
+
+      const texture = this.createCasingTexture(casingRenderObject.referenceDiameter);
+      this.drawRope(section.pathPoints, texture, casingSolidColorNumber);
+
       if (section.kind === 'casing-window') {
         this.drawCasingWindowOutline(section.leftPath, section.rightPath, casingOptions, casingRenderObject.casingWallWidth);
       } else {
@@ -843,14 +828,10 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
 
     const pathPoints = this.getZFactorScaledPathForPoints(start, end);
     const { leftPath, rightPath } = createTubularRenderingObject(exaggeratedDiameter / 2, pathPoints);
-    const polygon = makeTubularPolygon(leftPath, rightPath);
 
     const texture = this.getScreenTexture();
-    if (this.renderType() === RENDERER_TYPE.CANVAS) {
-      this.drawBigTexturedPolygon(polygon, texture);
-    } else {
-      this.drawCompletionRope(pathPoints, texture, exaggeratedDiameter);
-    }
+
+    this.drawCompletionRope(pathPoints, texture, exaggeratedDiameter);
     this.drawOutline(leftPath, rightPath, convertColor(screenOptions.lineColor), SCREEN_OUTLINE * exaggerationFactor, 'TopAndBottom');
   }
 
@@ -859,15 +840,9 @@ export class SchematicLayer<T extends SchematicData> extends PixiLayer<T> {
     const exaggeratedDiameter = exaggerationFactor * diameter;
 
     const pathPoints = this.getZFactorScaledPathForPoints(start, end);
-    const { leftPath, rightPath } = createTubularRenderingObject(exaggeratedDiameter / 2, pathPoints);
-    const polygon = makeTubularPolygon(leftPath, rightPath);
-
     const texture = this.getTubingTexture(tubingOptions);
-    if (this.renderType() === RENDERER_TYPE.CANVAS) {
-      this.drawBigTexturedPolygon(polygon, texture);
-    } else {
-      this.drawCompletionRope(pathPoints, texture, exaggeratedDiameter);
-    }
+
+    this.drawCompletionRope(pathPoints, texture, exaggeratedDiameter);
   }
 
   private getTubingTexture(tubingOptions: TubingOptions): Texture {

package/src/layers/base/PixiLayer.ts

@@ -1,4 +1,4 @@
-import { AbstractRenderer, Application, autoDetectRenderer, Container, DisplayObject, IRendererOptionsAuto, Renderer, RENDERER_TYPE } from 'pixi.js';
+import { IRenderer, Application, autoDetectRenderer, Container, DisplayObject, IRendererOptionsAuto, Renderer, RENDERER_TYPE } from 'pixi.js';
 import { Layer, LayerOptions } from './Layer';
 import { OnMountEvent, OnRescaleEvent, OnResizeEvent, OnUnmountEvent } from '../../interfaces';
 import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
@@ -11,7 +11,7 @@ import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
 export class PixiRenderApplication {
   stage: Container;
 
-  renderer: AbstractRenderer;
+  renderer: IRenderer<HTMLCanvasElement>;
 
   constructor(pixiRenderOptions?: IRendererOptionsAuto) {
     const options = {
@@ -24,7 +24,7 @@ export class PixiRenderApplication {
       preserveDrawingBuffer: true,
       ...pixiRenderOptions,
     };
-    this.renderer = autoDetectRenderer(options);
+    this.renderer = autoDetectRenderer<HTMLCanvasElement>(options);
     this.stage = new Container();
   }
 
@@ -68,7 +68,7 @@ export abstract class PixiLayer<T> extends Layer<T> {
   private ctx: PixiRenderApplication;
   private container: Container;
 
-  constructor(ctx: Application | PixiRenderApplication, id?: string, options?: LayerOptions<T>) {
+  constructor(ctx: Application<HTMLCanvasElement> | PixiRenderApplication, id?: string, options?: LayerOptions<T>) {
     super(id, options);
 
     this.ctx = ctx;