@equinor/esv-intersection 4.0.0 → 4.1.0

package/src/control/IntersectionReferenceSystem.ts

@@ -77,9 +77,13 @@ export class IntersectionReferenceSystem {
     this.getTrajectory = this.getTrajectory.bind(this);
   }
 
-  private setPath(path: number[][], options: ReferenceSystemOptions = {}): void {
+  private setPath(
+    path: number[][],
+    options: ReferenceSystemOptions = {},
+  ): void {
     this.options = { ...defaultOptions, ...options };
-    const { arcDivisions, tension, calculateDisplacementFromBottom } = this.options;
+    const { arcDivisions, tension, calculateDisplacementFromBottom } =
+      this.options;
 
     this.path = path;
 
@@ -94,11 +98,17 @@ export class IntersectionReferenceSystem {
         options.trajectoryInterpolator ||
         new ExtendedCurveInterpolator(
           path.map((d: number[]) => [d[0]!, d[1]!]),
-          { tension: tension || TENSION, arcDivisions: arcDivisions || ARC_DIVISIONS },
+          {
+            tension: tension || TENSION,
+            arcDivisions: arcDivisions || ARC_DIVISIONS,
+          },
         ),
       curtain:
         options.curtainInterpolator ||
-        new ExtendedCurveInterpolator(this.projectedPath, { tension: tension || TENSION, arcDivisions: arcDivisions || ARC_DIVISIONS }),
+        new ExtendedCurveInterpolator(this.projectedPath, {
+          tension: tension || TENSION,
+          arcDivisions: arcDivisions || ARC_DIVISIONS,
+        }),
     };
 
     const trajVector = this.getTrajectoryVector();
@@ -122,7 +132,13 @@ export class IntersectionReferenceSystem {
   project(length: number): number[] {
     const { curtain } = this.interpolators;
     const { calculateDisplacementFromBottom } = this.options;
-    const cl = clamp(calculateDisplacementFromBottom ? this.length - (length - this._offset) : length - this._offset, 0, this.length);
+    const cl = clamp(
+      calculateDisplacementFromBottom
+        ? this.length - (length - this._offset)
+        : length - this._offset,
+      0,
+      this.length,
+    );
     const p = curtain.getPointAtArcLength(cl, this.options);
     return p as number[];
   }
@@ -146,11 +162,19 @@ export class IntersectionReferenceSystem {
    * @param endMd in MD
    * @param includeStartEnd guarantee to include the starting and end points
    */
-  getCurtainPath(startMd: number, endMd: number, includeStartEnd = false): MDPoint[] {
+  getCurtainPath(
+    startMd: number,
+    endMd: number,
+    includeStartEnd = false,
+  ): MDPoint[] {
     if (!this._curtainPathCache) {
       const points: MDPoint[] = [];
       let prevAngle = Math.PI * 2; // Always add first point
-      for (let i = this._offset; i <= this.length + this._offset; i += CURTAIN_SAMPLING_INTERVAL) {
+      for (
+        let i = this._offset;
+        i <= this.length + this._offset;
+        i += CURTAIN_SAMPLING_INTERVAL
+      ) {
         const point = this.project(i);
         const angle = Math.atan2(point[1]!, point[0]!);
 
@@ -165,11 +189,13 @@ export class IntersectionReferenceSystem {
 
     if (includeStartEnd) {
       const startPoint = { point: this.project(startMd), md: startMd };
-      const pointsBetween = this._curtainPathCache.filter((p) => p.md > startMd && p.md < endMd);
+      const pointsBetween = this._curtainPathCache.filter(
+        p => p.md > startMd && p.md < endMd,
+      );
       const endPoint = { point: this.project(endMd), md: endMd };
       return [startPoint, ...pointsBetween, endPoint];
     }
-    return this._curtainPathCache.filter((p) => p.md >= startMd && p.md <= endMd);
+    return this._curtainPathCache.filter(p => p.md >= startMd && p.md <= endMd);
   }
 
   /**
@@ -177,7 +203,9 @@ export class IntersectionReferenceSystem {
    */
   unproject(displacement: number): number | undefined {
     const { normalizedLength, calculateDisplacementFromBottom } = this.options;
-    const displacementFromStart = calculateDisplacementFromBottom ? this.displacement - displacement : displacement;
+    const displacementFromStart = calculateDisplacementFromBottom
+      ? this.displacement - displacement
+      : displacement;
     const length = normalizedLength || this.length;
 
     if (displacementFromStart < 0) {
@@ -187,7 +215,11 @@ export class IntersectionReferenceSystem {
       return length + (displacementFromStart - this.displacement);
     }
 
-    const ls = this.interpolators.curtain.getIntersectsAsPositions(displacementFromStart, 0, 1);
+    const ls = this.interpolators.curtain.getIntersectsAsPositions(
+      displacementFromStart,
+      0,
+      1,
+    );
     if (ls && ls.length) {
       return ls[0]! * length + this._offset;
     }
@@ -221,8 +253,14 @@ export class IntersectionReferenceSystem {
     const extensionStart = from < 0 ? -from : 0;
     const extensionEnd = to > 1 ? to - 1 : 0;
 
-    const refStart = this.interpolators.trajectory.getPointAt(0) as [number, number];
-    const refEnd = this.interpolators.trajectory.getPointAt(1) as [number, number];
+    const refStart = this.interpolators.trajectory.getPointAt(0) as [
+      number,
+      number,
+    ];
+    const refEnd = this.interpolators.trajectory.getPointAt(1) as [
+      number,
+      number,
+    ];
 
     let p0: [number, number];
     let p3: [number, number];
@@ -243,7 +281,10 @@ export class IntersectionReferenceSystem {
     }
 
     if (extensionEnd) {
-      p3 = [refEnd[0] + this.endVector[0]! * extensionEnd * this.displacement, refEnd[1] + this.endVector[1]! * extensionEnd * this.displacement];
+      p3 = [
+        refEnd[0] + this.endVector[0]! * extensionEnd * this.displacement,
+        refEnd[1] + this.endVector[1]! * extensionEnd * this.displacement,
+      ];
     }
     const points = [];
     const tl = to - from;
@@ -255,15 +296,26 @@ export class IntersectionReferenceSystem {
       points.push(p0);
       for (let i = 1; i < preSteps; i++) {
         const f = (i / preSteps) * extensionStart * this.displacement;
-        points.push([p0[0] - this.startVector[0]! * f, p0[1] - this.startVector[1]! * f]);
+        points.push([
+          p0[0] - this.startVector[0]! * f,
+          p0[1] - this.startVector[1]! * f,
+        ]);
       }
     }
-    const curvePoints = this.interpolators.trajectory.getPoints(curveSteps - 1, null, t0, t1) as number[][]; // returns steps + 1 points
+    const curvePoints = this.interpolators.trajectory.getPoints(
+      curveSteps - 1,
+      null,
+      t0,
+      t1,
+    ) as number[][]; // returns steps + 1 points
     points.push(...curvePoints);
     if (p3!) {
       for (let i = 1; i < postSteps - 1; i++) {
         const f = (i / postSteps) * extensionEnd * this.displacement;
-        points.push([p2[0] + this.endVector[0]! * f, p2[1] + this.endVector[1]! * f]);
+        points.push([
+          p2[0] + this.endVector[0]! * f,
+          p2[1] + this.endVector[1]! * f,
+        ]);
       }
       points.push(p3);
     }
@@ -279,34 +331,56 @@ export class IntersectionReferenceSystem {
     endExtensionLength = DEFAULT_END_EXTEND_LENGTH,
   ): Trajectory {
     if (!isFinite(startExtensionLength) || startExtensionLength < 0.0) {
-      throw new Error('Invalid parameter, getExtendedTrajectory() must be called with a valid and positive startExtensionLength parameter');
+      throw new Error(
+        'Invalid parameter, getExtendedTrajectory() must be called with a valid and positive startExtensionLength parameter',
+      );
     }
     if (!isFinite(endExtensionLength) || endExtensionLength < 0.0) {
-      throw new Error('Invalid parameter, getExtendedTrajectory() must be called with a valid and positive endExtensionLength parameter');
+      throw new Error(
+        'Invalid parameter, getExtendedTrajectory() must be called with a valid and positive endExtensionLength parameter',
+      );
     }
 
-    const totalLength = this.displacement + startExtensionLength + endExtensionLength;
-    const startExtensionNumPoints = Math.floor((startExtensionLength / totalLength) * numPoints);
-    const curveSteps = Math.max(Math.ceil((this.displacement / totalLength) * numPoints), 1);
-    const endExtensionNumPoints = numPoints - curveSteps - startExtensionNumPoints;
+    const totalLength =
+      this.displacement + startExtensionLength + endExtensionLength;
+    const startExtensionNumPoints = Math.floor(
+      (startExtensionLength / totalLength) * numPoints,
+    );
+    const curveSteps = Math.max(
+      Math.ceil((this.displacement / totalLength) * numPoints),
+      1,
+    );
+    const endExtensionNumPoints =
+      numPoints - curveSteps - startExtensionNumPoints;
 
     const points = [];
 
-    const refStart = new Vector2(this.interpolators.trajectory.getPointAt(0.0) as number[]);
+    const refStart = new Vector2(
+      this.interpolators.trajectory.getPointAt(0.0) as number[],
+    );
     const startVec = new Vector2(this.startVector);
-    const startExtensionStepLength = startExtensionLength / startExtensionNumPoints;
+    const startExtensionStepLength =
+      startExtensionLength / startExtensionNumPoints;
     for (let i = startExtensionNumPoints; i > 0; i--) {
       const f = i * startExtensionStepLength;
       const point = refStart.add(startVec.scale(f));
       points.push(point.toArray());
     }
 
-    const curveStepPoints = this.interpolators.trajectory.getPoints(curveSteps, null, 0.0, 1.0) as number[][];
+    const curveStepPoints = this.interpolators.trajectory.getPoints(
+      curveSteps,
+      null,
+      0.0,
+      1.0,
+    ) as number[][];
     points.push(...curveStepPoints);
 
-    const refEnd = new Vector2(this.interpolators.trajectory.getPointAt(1.0) as number[]);
+    const refEnd = new Vector2(
+      this.interpolators.trajectory.getPointAt(1.0) as number[],
+    );
     const endVec = new Vector2(this.endVector);
-    const endExtensionStepLength = endExtensionLength / (endExtensionNumPoints - 1); // -1 so last point is at end of extension
+    const endExtensionStepLength =
+      endExtensionLength / (endExtensionNumPoints - 1); // -1 so last point is at end of extension
     for (let i = 1; i < endExtensionNumPoints; i++) {
       const f = i * endExtensionStepLength;
       const point = refEnd.add(endVec.scale(f));
@@ -329,7 +403,9 @@ export class IntersectionReferenceSystem {
 
     const trajectoryVec = IntersectionReferenceSystem.getDirectionVector(
       this.interpolators.trajectory,
-      calculateDisplacementFromBottom ? THRESHOLD_DIRECTION_DISTANCE : 1 - THRESHOLD_DIRECTION_DISTANCE,
+      calculateDisplacementFromBottom
+        ? THRESHOLD_DIRECTION_DISTANCE
+        : 1 - THRESHOLD_DIRECTION_DISTANCE,
       calculateDisplacementFromBottom ? 0 : 1,
     );
     return trajectoryVec;
@@ -361,7 +437,11 @@ export class IntersectionReferenceSystem {
    * @param from number between 0 and 1
    * @param to number between 0 and 1
    */
-  static getDirectionVector(interpolator: CurveInterpolator, from: number, to: number): number[] {
+  static getDirectionVector(
+    interpolator: CurveInterpolator,
+    from: number,
+    to: number,
+  ): number[] {
     const p1 = interpolator.getPointAt(to);
     const p2 = interpolator.getPointAt(from);
 

package/src/control/LayerManager.ts

@@ -17,7 +17,9 @@ export class LayerManager {
   private layers: Layer<unknown>[] = [];
 
   private _axis: Axis | undefined;
-  private _svgContainer: Selection<HTMLDivElement, unknown, null, undefined> | undefined;
+  private _svgContainer:
+    | Selection<HTMLDivElement, unknown, null, undefined>
+    | undefined;
 
   /**
    * Handles layers and axis also holds a zoom and pan handler object
@@ -25,16 +27,30 @@ export class LayerManager {
    * @param scaleOptions
    * @param axisOptions
    */
-  constructor(container: HTMLElement, scaleOptions?: ScaleOptions, axisOptions?: AxisOptions) {
+  constructor(
+    container: HTMLElement,
+    scaleOptions?: ScaleOptions,
+    axisOptions?: AxisOptions,
+  ) {
     this.container = container;
     this.layerContainer = document.createElement('div');
     this.layerContainer.className = 'layer-container';
     this.container.appendChild(this.layerContainer);
-    this.adjustToSize(+(this.container.getAttribute('width') ?? 0), +(this.container.getAttribute('height') ?? 0));
-    this._zoomPanHandler = new ZoomPanHandler(container, (event) => this.rescale(event));
+    this.adjustToSize(
+      +(this.container.getAttribute('width') ?? 0),
+      +(this.container.getAttribute('height') ?? 0),
+    );
+    this._zoomPanHandler = new ZoomPanHandler(container, event =>
+      this.rescale(event),
+    );
     if (scaleOptions) {
       const { xMin, xMax, yMin, yMax, xBounds, yBounds } = scaleOptions;
-      if (xMin !== undefined && xMax !== undefined && yMin !== undefined && yMax !== undefined) {
+      if (
+        xMin !== undefined &&
+        xMax !== undefined &&
+        yMin !== undefined &&
+        yMax !== undefined
+      ) {
         this._zoomPanHandler.setBounds([xMin, xMax], [yMin, yMax]);
       }
       if (xBounds && yBounds) {
@@ -56,7 +72,7 @@ export class LayerManager {
    * @param layers array of layers
    */
   addLayers(layers: Layer<unknown>[]): LayerManager {
-    layers.forEach((layer) => this.addLayer(layer));
+    layers.forEach(layer => this.addLayer(layer));
     return this;
   }
 
@@ -72,7 +88,7 @@ export class LayerManager {
    * @param includeReferenceSystem - (optional) if true also removes reference system, default is true
    */
   clearAllData(includeReferenceSystem = true): LayerManager {
-    this.layers.forEach((l) => l.clearData(includeReferenceSystem));
+    this.layers.forEach(l => l.clearData(includeReferenceSystem));
     return this;
   }
 
@@ -81,7 +97,10 @@ export class LayerManager {
    * @param layer Layer
    * @param params extra params to pass to the onUpdate method
    */
-  addLayer(layer: Layer<unknown>, params?: LayerOptions<unknown>): LayerManager {
+  addLayer(
+    layer: Layer<unknown>,
+    params?: LayerOptions<unknown>,
+  ): LayerManager {
     this.layers.push(layer);
     this.initLayer(layer, params);
 
@@ -93,10 +112,10 @@ export class LayerManager {
    * @param layerId name of layer
    */
   removeLayer(layerId: string): LayerManager {
-    const layer = this.layers.find((l) => l.id === layerId);
+    const layer = this.layers.find(l => l.id === layerId);
     if (layer) {
       layer.onUnmount();
-      this.layers = this.layers.filter((l) => l.id !== layerId);
+      this.layers = this.layers.filter(l => l.id !== layerId);
     }
 
     return this;
@@ -107,17 +126,22 @@ export class LayerManager {
    */
   removeAllLayers(): LayerManager {
     const { layers } = this;
-    layers.forEach((layer) => {
+    layers.forEach(layer => {
       this.removeLayer(layer.id);
     });
     return this;
   }
 
   getLayer(layerId: string): Layer<unknown> | undefined {
-    return this.layers.find((l) => l.id === layerId || l.getInternalLayerIds().includes(layerId));
+    return this.layers.find(
+      l => l.id === layerId || l.getInternalLayerIds().includes(layerId),
+    );
   }
 
-  initLayer(layer: Layer<unknown>, params?: LayerOptions<unknown>): LayerManager {
+  initLayer(
+    layer: Layer<unknown>,
+    params?: LayerOptions<unknown>,
+  ): LayerManager {
     const event: OnMountEvent = {
       elm: this.layerContainer,
     };
@@ -127,7 +151,12 @@ export class LayerManager {
     layer.onRescale(rescaleEvent);
 
     if (this._svgContainer) {
-      const highestZIndex = this.layers.length > 0 ? this.layers.reduce((max, layers) => (max.order > layers.order ? max : layers)).order : 1;
+      const highestZIndex =
+        this.layers.length > 0
+          ? this.layers.reduce((max, layers) =>
+              max.order > layers.order ? max : layers,
+            ).order
+          : 1;
       this._svgContainer.style('z-index', `${highestZIndex + 1}`);
     }
 
@@ -160,8 +189,14 @@ export class LayerManager {
    * @param height (required)
    */
   adjustToSize(width: number, height: number): void {
-    const layersWidth = Math.max(this._axis ? width - HORIZONTAL_AXIS_MARGIN : width, 0);
-    const layersHeight = Math.max(this._axis ? height - VERTICAL_AXIS_MARGIN : height, 0);
+    const layersWidth = Math.max(
+      this._axis ? width - HORIZONTAL_AXIS_MARGIN : width,
+      0,
+    );
+    const layersHeight = Math.max(
+      this._axis ? height - VERTICAL_AXIS_MARGIN : height,
+      0,
+    );
 
     if (this._axis) {
       const resizeEvent = { width, height };
@@ -169,7 +204,7 @@ export class LayerManager {
     }
     if (this.layers) {
       const resizeEvent = { width: layersWidth, height: layersHeight };
-      this.layers.forEach((layer) => layer.onResize(resizeEvent));
+      this.layers.forEach(layer => layer.onResize(resizeEvent));
     }
     if (this._zoomPanHandler) {
       this._zoomPanHandler.adjustToSize(layersWidth, layersHeight, true);
@@ -177,7 +212,7 @@ export class LayerManager {
   }
 
   setReferenceSystem(irs: IntersectionReferenceSystem): void {
-    this.layers.forEach((layer) => (layer.referenceSystem = irs));
+    this.layers.forEach(layer => (layer.referenceSystem = irs));
   }
 
   showAxis(): LayerManager {
@@ -204,7 +239,9 @@ export class LayerManager {
     if (this._axis) {
       this._axis.offsetX = x;
       this._axis.offsetY = y;
-      const gridLayers = this.layers.filter((l: Layer<unknown>): l is GridLayer<unknown> => l instanceof GridLayer);
+      const gridLayers = this.layers.filter(
+        (l: Layer<unknown>): l is GridLayer<unknown> => l instanceof GridLayer,
+      );
       gridLayers.forEach((l: GridLayer<unknown>) => {
         l.offsetX = x;
         l.offsetY = y;
@@ -216,7 +253,9 @@ export class LayerManager {
   setXAxisOffset(x: number): LayerManager {
     if (this._axis) {
       this._axis.offsetX = x;
-      const gridLayers = this.layers.filter((l: Layer<unknown>): l is GridLayer<unknown> => l instanceof GridLayer);
+      const gridLayers = this.layers.filter(
+        (l: Layer<unknown>): l is GridLayer<unknown> => l instanceof GridLayer,
+      );
       gridLayers.forEach((l: GridLayer<unknown>) => {
         l.offsetX = x;
       });
@@ -227,7 +266,9 @@ export class LayerManager {
   setYAxisOffset(y: number): LayerManager {
     if (this._axis) {
       this._axis.offsetY = y;
-      const gridLayers = this.layers.filter((l: Layer<unknown>): l is GridLayer<unknown> => l instanceof GridLayer);
+      const gridLayers = this.layers.filter(
+        (l: Layer<unknown>): l is GridLayer<unknown> => l instanceof GridLayer,
+      );
       gridLayers.forEach((l: GridLayer<unknown>) => {
         l.offsetY = y;
       });
@@ -272,7 +313,9 @@ export class LayerManager {
       this._axis.onRescale(event);
     }
     if (this.layers) {
-      this.layers.forEach((layer) => (layer.isVisible === true ? layer.onRescale(event) : {}));
+      this.layers.forEach(layer =>
+        layer.isVisible === true ? layer.onRescale(event) : {},
+      );
     }
   }
 
@@ -285,11 +328,20 @@ export class LayerManager {
       .style('z-index', '10')
       .style('pointer-events', 'none');
 
-    const svg = this._svgContainer.append('svg').attr('height', `${container.offsetHeight}px`).attr('width', `${container.offsetWidth}px`);
+    const svg = this._svgContainer
+      .append('svg')
+      .attr('height', `${container.offsetHeight}px`)
+      .attr('width', `${container.offsetWidth}px`);
 
     const showLabels = true;
 
-    const axis = new Axis(svg, showLabels, options.xLabel, options.yLabel, options.unitOfMeasure);
+    const axis = new Axis(
+      svg,
+      showLabels,
+      options.xLabel,
+      options.yLabel,
+      options.unitOfMeasure,
+    );
 
     return axis;
   };

package/src/control/MainController.ts

@@ -30,13 +30,25 @@ export class Controller {
    * @param options.referenceSystem (optional) sets reference system, takes priority over path if both are supplied
    */
   constructor(options: ControllerOptions) {
-    const { container, axisOptions, scaleOptions, referenceSystem, layers, path } = options;
-
-    this._referenceSystem = referenceSystem || (path && new IntersectionReferenceSystem(path));
+    const {
+      container,
+      axisOptions,
+      scaleOptions,
+      referenceSystem,
+      layers,
+      path,
+    } = options;
+
+    this._referenceSystem =
+      referenceSystem || (path && new IntersectionReferenceSystem(path));
 
     this._overlay = overlay(this, container);
 
-    this.layerManager = new LayerManager(this._overlay.elm.node() as HTMLElement, scaleOptions, axisOptions);
+    this.layerManager = new LayerManager(
+      this._overlay.elm.node() as HTMLElement,
+      scaleOptions,
+      axisOptions,
+    );
     if (layers) {
       this.layerManager.addLayers(layers);
       this.setOverlayZIndex(layers);
@@ -136,8 +148,15 @@ export class Controller {
   adjustToSize(width: number, height: number): Controller {
     this.layerManager.adjustToSize(width, height);
 
-    const dimensions = { width: Math.max(width - HORIZONTAL_AXIS_MARGIN, 0), height: Math.max(height - VERTICAL_AXIS_MARGIN, 0) };
-    this.overlay.elm.dispatch('resize', { detail: dimensions, bubbles: true, cancelable: true });
+    const dimensions = {
+      width: Math.max(width - HORIZONTAL_AXIS_MARGIN, 0),
+      height: Math.max(height - VERTICAL_AXIS_MARGIN, 0),
+    };
+    this.overlay.elm.dispatch('resize', {
+      detail: dimensions,
+      bubbles: true,
+      cancelable: true,
+    });
 
     return this;
   }
@@ -149,7 +168,12 @@ export class Controller {
    * @param  displ - displacement
    * @param  duration - duration of transition
    */
-  setViewport(cx?: number, cy?: number, displacement?: number, duration?: number): Controller {
+  setViewport(
+    cx?: number,
+    cy?: number,
+    displacement?: number,
+    duration?: number,
+  ): Controller {
     this.zoomPanHandler.setViewport(cx, cy, displacement, duration);
     return this;
   }
@@ -263,7 +287,12 @@ export class Controller {
   }
 
   private getHighestZIndex(layers: Layer<unknown>[]): number {
-    const highestZIndex = layers.length > 0 ? layers.reduce((max, layers) => (max.order > layers.order ? max : layers)).order : 1;
+    const highestZIndex =
+      layers.length > 0
+        ? layers.reduce((max, layers) =>
+            max.order > layers.order ? max : layers,
+          ).order
+        : 1;
     return highestZIndex;
   }