@equinor/esv-intersection 3.0.8 → 3.0.10

package/src/layers/WellborePathLayer.ts

@@ -29,7 +29,7 @@ export interface WellborepathLayerOptions<T extends [number, number][]> extends
 }
 
 export class WellborepathLayer<T extends [number, number][]> extends SVGLayer<T> {
-  rescaleEvent: OnRescaleEvent;
+  rescaleEvent: OnRescaleEvent | undefined;
 
   constructor(id?: string, options?: WellborepathLayerOptions<T>) {
     super(id, options);
@@ -78,52 +78,54 @@ export class WellborepathLayer<T extends [number, number][]> extends SVGLayer<T>
   }
 
   private renderWellborePath(data: [number, number][]): string {
-    const { xScale, yScale } = this.rescaleEvent;
-    const transformedData: [number, number][] = data.map((d) => [xScale(d[0]), yScale(d[1])]);
+    if (this.rescaleEvent != null) {
+      const { xScale, yScale } = this.rescaleEvent;
+      const transformedData: [number, number][] = data.map((d) => [xScale(d[0]), yScale(d[1])]);
 
-    // TODO: Might be a good idea to move something like this to a shared function in a base class
-    let curveFactory;
-    const { curveType, tension } = this.options as WellborepathLayerOptions<T>;
-    switch (curveType) {
-      default:
-      case 'curveCatmullRom':
-        curveFactory = curveCatmullRom.alpha(tension || CURVE_CATMULL_ROM_ALPHA);
-        break;
-      case 'curveLinear':
-        curveFactory = curveLinear;
-        break;
-      case 'curveBasis':
-        curveFactory = curveBasis;
-        break;
-      case 'curveBasisClosed':
-        curveFactory = curveBasisClosed;
-        break;
-      case 'curveBundle':
-        curveFactory = curveBundle.beta(tension || CURVE_BUNDLE_BETA);
-        break;
-      case 'curveCardinal':
-        curveFactory = curveCardinal.tension(tension || CURVE_CARDINAL_TENSION);
-        break;
-      case 'curveMonotoneX':
-        curveFactory = curveMonotoneX;
-        break;
-      case 'curveMonotoneY':
-        curveFactory = curveMonotoneY;
-        break;
-      case 'curveNatural':
-        curveFactory = curveNatural;
-        break;
-      case 'curveStep':
-        curveFactory = curveStep;
-        break;
-      case 'curveStepAfter':
-        curveFactory = curveStepAfter;
-        break;
-      case 'curveStepBefore':
-        curveFactory = curveStepBefore;
-        break;
+      // TODO: Might be a good idea to move something like this to a shared function in a base class
+      let curveFactory;
+      const { curveType, tension } = this.options as WellborepathLayerOptions<T>;
+      switch (curveType) {
+        default:
+        case 'curveCatmullRom':
+          curveFactory = curveCatmullRom.alpha(tension || CURVE_CATMULL_ROM_ALPHA);
+          break;
+        case 'curveLinear':
+          curveFactory = curveLinear;
+          break;
+        case 'curveBasis':
+          curveFactory = curveBasis;
+          break;
+        case 'curveBasisClosed':
+          curveFactory = curveBasisClosed;
+          break;
+        case 'curveBundle':
+          curveFactory = curveBundle.beta(tension || CURVE_BUNDLE_BETA);
+          break;
+        case 'curveCardinal':
+          curveFactory = curveCardinal.tension(tension || CURVE_CARDINAL_TENSION);
+          break;
+        case 'curveMonotoneX':
+          curveFactory = curveMonotoneX;
+          break;
+        case 'curveMonotoneY':
+          curveFactory = curveMonotoneY;
+          break;
+        case 'curveNatural':
+          curveFactory = curveNatural;
+          break;
+        case 'curveStep':
+          curveFactory = curveStep;
+          break;
+        case 'curveStepAfter':
+          curveFactory = curveStepAfter;
+          break;
+        case 'curveStepBefore':
+          curveFactory = curveStepBefore;
+          break;
+      }
+      return line().curve(curveFactory)(transformedData) ?? '';
     }
-
-    return line().curve(curveFactory)(transformedData);
+    return '';
   }
 }

package/src/layers/base/CanvasLayer.ts

@@ -3,9 +3,9 @@ import { OnMountEvent, OnUpdateEvent, OnResizeEvent, OnRescaleEvent } from '../.
 import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
 
 export abstract class CanvasLayer<T> extends Layer<T> {
-  ctx: CanvasRenderingContext2D;
-  elm: HTMLElement;
-  canvas: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D | undefined;
+  elm: HTMLElement | undefined;
+  canvas: HTMLCanvasElement | undefined;
 
   onOpacityChanged(_opacity: number): void {
     if (this.canvas) {
@@ -36,7 +36,7 @@ export abstract class CanvasLayer<T> extends Layer<T> {
     const isVisible = visible || this.isVisible;
     const visibility = isVisible ? 'visible' : 'hidden';
     const interactive = this.interactive ? 'auto' : 'none';
-    this.canvas.setAttribute(
+    this.canvas?.setAttribute(
       'style',
       `position:absolute;pointer-events:${interactive};z-index:${this.order};opacity:${this.opacity};visibility:${visibility}`,
     );
@@ -45,8 +45,8 @@ export abstract class CanvasLayer<T> extends Layer<T> {
   override onMount(event: OnMountEvent): void {
     super.onMount(event);
     const { elm } = event;
-    const width = event.width || parseInt(elm.getAttribute('width'), 10) || DEFAULT_LAYER_WIDTH;
-    const height = event.height || parseInt(elm.getAttribute('height'), 10) || DEFAULT_LAYER_HEIGHT;
+    const width = event.width || parseInt(elm?.getAttribute('width') ?? '', 10) || DEFAULT_LAYER_WIDTH;
+    const height = event.height || parseInt(elm?.getAttribute('height') ?? '', 10) || DEFAULT_LAYER_HEIGHT;
     this.elm = elm;
     let canvas: HTMLCanvasElement;
     if (!this.canvas) {
@@ -59,21 +59,21 @@ export abstract class CanvasLayer<T> extends Layer<T> {
     this.canvas.setAttribute('height', `${height}px`);
     this.canvas.setAttribute('class', 'canvas-layer');
     this.updateStyle();
-    this.ctx = this.canvas.getContext('2d');
+    this.ctx = this.canvas.getContext('2d') ?? undefined;
   }
 
   override onUnmount(): void {
     super.onUnmount();
-    this.canvas.remove();
-    this.canvas = null;
+    this.canvas?.remove();
+    this.canvas = undefined;
   }
 
   override onResize(event: OnResizeEvent): void {
     const { ctx } = this;
     const { width, height } = event;
 
-    ctx.canvas.setAttribute('width', `${width}px`);
-    ctx.canvas.setAttribute('height', `${height}px`);
+    ctx?.canvas.setAttribute('width', `${width}px`);
+    ctx?.canvas.setAttribute('height', `${height}px`);
   }
 
   override onUpdate(event: OnUpdateEvent<T>): void {
@@ -81,22 +81,22 @@ export abstract class CanvasLayer<T> extends Layer<T> {
   }
 
   resetTransform(): void {
-    this.ctx.resetTransform();
+    this.ctx?.resetTransform();
   }
 
   setTransform(event: OnRescaleEvent): void {
     this.resetTransform();
     const flippedX = event.xBounds[0] > event.xBounds[1];
     const flippedY = event.yBounds[0] > event.yBounds[1];
-    this.ctx.translate(event.xScale(0), event.yScale(0));
-    this.ctx.scale(event.xRatio * (flippedX ? -1 : 1), event.yRatio * (flippedY ? -1 : 1));
+    this.ctx?.translate(event.xScale(0), event.yScale(0));
+    this.ctx?.scale(event.xRatio * (flippedX ? -1 : 1), event.yRatio * (flippedY ? -1 : 1));
   }
 
   clearCanvas(): void {
     const { ctx, canvas } = this;
-    ctx.save();
-    ctx.resetTransform();
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.restore();
+    ctx?.save();
+    ctx?.resetTransform();
+    ctx?.clearRect(0, 0, canvas?.width ?? 0, canvas?.height ?? 0);
+    ctx?.restore();
   }
 }

package/src/layers/base/HTMLLayer.ts

@@ -4,13 +4,13 @@ import { OnMountEvent, OnResizeEvent } from '../../interfaces';
 import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
 
 export abstract class HTMLLayer<T> extends Layer<T> {
-  elm: Selection<HTMLElement, unknown, null, undefined>;
+  elm: Selection<HTMLDivElement, unknown, null, undefined> | undefined;
 
   override onMount(event: OnMountEvent): void {
     super.onMount(event);
     const { elm } = event;
-    const width = event.width || parseInt(elm.getAttribute('width'), 10) || DEFAULT_LAYER_WIDTH;
-    const height = event.height || parseInt(elm.getAttribute('height'), 10) || DEFAULT_LAYER_HEIGHT;
+    const width = event.width || parseInt(elm?.getAttribute('width') ?? '', 10) || DEFAULT_LAYER_WIDTH;
+    const height = event.height || parseInt(elm?.getAttribute('height') ?? '', 10) || DEFAULT_LAYER_HEIGHT;
 
     if (!this.elm) {
       this.elm = select(elm).append('div');
@@ -30,8 +30,8 @@ export abstract class HTMLLayer<T> extends Layer<T> {
 
   override onUnmount(): void {
     super.onUnmount();
-    this.elm.remove();
-    this.elm = null;
+    this.elm?.remove();
+    this.elm = undefined;
   }
 
   override onResize(event: OnResizeEvent): void {

package/src/layers/base/Layer.ts

@@ -26,12 +26,12 @@ export abstract class Layer<T> {
   private _order: number;
   protected _options: LayerOptions<T>;
   private loading: boolean;
-  private _element?: HTMLElement;
+  private _element: HTMLElement | undefined;
   private _opacity: number;
-  private _referenceSystem?: IntersectionReferenceSystem = null;
-  private _data?: T;
+  private _referenceSystem: IntersectionReferenceSystem | undefined;
+  private _data: T | undefined;
   private _visible: boolean;
-  private _interactive: boolean = false;
+  private _interactive = false;
 
   constructor(id?: string, options?: LayerOptions<T>) {
     this._id = id || `layer-${Math.floor(Math.random() * 1000)}`;
@@ -41,7 +41,7 @@ export abstract class Layer<T> {
       ...opts,
     };
     this.loading = false;
-    this._element = null;
+    this._element = undefined;
     this._opacity = opts.layerOpacity || 1;
     this._visible = true;
     this._interactive = opts.interactive || false;
@@ -49,7 +49,7 @@ export abstract class Layer<T> {
     if (options && options.data) {
       this.setData(options.data);
     }
-    this._referenceSystem = options && options.referenceSystem;
+    this._referenceSystem = options?.referenceSystem;
 
     this.onMount = this.onMount.bind(this);
     this.onUnmount = this.onUnmount.bind(this);
@@ -65,7 +65,7 @@ export abstract class Layer<T> {
     return this._id;
   }
 
-  get element(): HTMLElement {
+  get element(): HTMLElement | undefined {
     return this._element;
   }
 
@@ -112,19 +112,19 @@ export abstract class Layer<T> {
     return this._interactive;
   }
 
-  get referenceSystem(): IntersectionReferenceSystem {
+  get referenceSystem(): IntersectionReferenceSystem | undefined {
     return this._referenceSystem;
   }
 
-  set referenceSystem(referenceSystem: IntersectionReferenceSystem) {
+  set referenceSystem(referenceSystem: IntersectionReferenceSystem | undefined) {
     this._referenceSystem = referenceSystem;
   }
 
-  get data(): T {
+  get data(): T | undefined {
     return this.getData();
   }
 
-  set data(data: T) {
+  set data(data: T | undefined) {
     this.setData(data);
   }
 
@@ -132,14 +132,14 @@ export abstract class Layer<T> {
     return this._visible;
   }
 
-  getData(): T {
+  getData(): T | undefined {
     return this._data;
   }
 
-  setData(data: T): void {
+  setData(data: T | undefined): void {
     this._data = data;
     // should not be called when there is no visual element to work with
-    if (this.element) {
+    if (this.element && data != null) {
       this.onUpdate({ data });
     }
   }
@@ -148,10 +148,10 @@ export abstract class Layer<T> {
    * Clears data and (optionally) the reference system
    * @param includeReferenceSystem - (optional) if true also removes reference system, default is true
    */
-  clearData(includeReferenceSystem: boolean = true): void {
-    this._data = null;
+  clearData(includeReferenceSystem = true): void {
+    this._data = undefined;
     if (includeReferenceSystem) {
-      this.referenceSystem = null;
+      this.referenceSystem = undefined;
     }
     this.onUpdate({});
   }
@@ -168,7 +168,7 @@ export abstract class Layer<T> {
   }
 
   onUnmount(event?: OnUnmountEvent): void {
-    if (this._options.onUnmount) {
+    if (this._options.onUnmount && event != null) {
       this._options.onUnmount(event, this);
     }
   }

package/src/layers/base/PixiLayer.ts

@@ -9,9 +9,9 @@ import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
 // The plugin we are trying to avoid:
 // https://github.com/pixijs/pixijs/blob/dev/packages/ticker/src/TickerPlugin.ts
 export class PixiRenderApplication {
-  stage: Container;
+  stage: Container | undefined;
 
-  renderer: IRenderer<HTMLCanvasElement>;
+  renderer: IRenderer<HTMLCanvasElement> | undefined;
 
   constructor(pixiRenderOptions?: IRendererOptionsAuto) {
     const options = {
@@ -29,15 +29,15 @@ export class PixiRenderApplication {
   }
 
   destroy() {
-    this.stage.destroy({
+    this.stage?.destroy({
       children: true,
       texture: true,
       baseTexture: true,
     });
-    this.stage = null;
+    this.stage = undefined;
 
     // Get renderType and clContext before we destroy the renderer
-    const renderType = this.renderer.type;
+    const renderType = this.renderer?.type;
     const glContext = this.renderer instanceof Renderer ? this.renderer?.gl : undefined;
 
     /**
@@ -50,21 +50,23 @@ export class PixiRenderApplication {
       glContext?.getExtension('WEBGL_lose_context')?.loseContext();
     }
 
-    this.renderer.destroy(true);
-    this.renderer = null;
+    this.renderer?.destroy(true);
+    this.renderer = undefined;
   }
 
   get view() {
-    return this.renderer.view;
+    return this.renderer?.view;
   }
 
   render() {
-    this.renderer.render(this.stage);
+    if (this.stage != null) {
+      this.renderer?.render(this.stage);
+    }
   }
 }
 
 export abstract class PixiLayer<T> extends Layer<T> {
-  private pixiViewContainer: HTMLElement;
+  private pixiViewContainer: HTMLElement | undefined;
   private ctx: PixiRenderApplication;
   private container: Container;
 
@@ -74,7 +76,7 @@ export abstract class PixiLayer<T> extends Layer<T> {
     this.ctx = ctx;
 
     this.container = new Container();
-    this.ctx.stage.addChild(this.container);
+    this.ctx.stage?.addChild(this.container);
   }
 
   render(): void {
@@ -95,16 +97,18 @@ export abstract class PixiLayer<T> extends Layer<T> {
   override onMount(event: OnMountEvent) {
     super.onMount(event);
 
-    this.pixiViewContainer = this.element.querySelector('#webgl-layer');
+    this.pixiViewContainer = this.element?.querySelector('#webgl-layer') ?? undefined;
 
     if (!this.pixiViewContainer) {
       this.pixiViewContainer = document.createElement('div');
       this.pixiViewContainer.setAttribute('id', `${this.id}`);
       this.pixiViewContainer.setAttribute('class', 'webgl-layer');
 
-      this.pixiViewContainer.appendChild(this.ctx.view);
+      if (this.ctx.view != null) {
+        this.pixiViewContainer.appendChild(this.ctx.view);
+      }
 
-      this.element.appendChild(this.pixiViewContainer);
+      this.element?.appendChild(this.pixiViewContainer);
 
       this.updateStyle();
     }
@@ -114,15 +118,15 @@ export abstract class PixiLayer<T> extends Layer<T> {
     super.onUnmount(event);
 
     this.clearLayer();
-    this.ctx.stage.removeChild(this.container);
+    this.ctx.stage?.removeChild(this.container);
     this.container.destroy();
-    this.pixiViewContainer.remove();
+    this.pixiViewContainer?.remove();
     this.pixiViewContainer = undefined;
   }
 
   override onResize(event: OnResizeEvent): void {
     super.onResize(event);
-    this.ctx.renderer.resize(event.width, event.height);
+    this.ctx.renderer?.resize(event.width, event.height);
   }
 
   override onRescale(event: OnRescaleEvent): void {
@@ -156,7 +160,7 @@ export abstract class PixiLayer<T> extends Layer<T> {
       .map((pair) => pair.join(':'))
       .join(';');
 
-    this.pixiViewContainer.setAttribute('style', styles);
+    this.pixiViewContainer?.setAttribute('style', styles);
   }
 
   override setVisibility(visible: boolean, layerId?: string): void {
@@ -184,7 +188,7 @@ export abstract class PixiLayer<T> extends Layer<T> {
     }
   }
 
-  renderType(): RENDERER_TYPE {
-    return this.ctx.renderer.type;
+  renderType(): RENDERER_TYPE | undefined {
+    return this.ctx.renderer?.type;
   }
 }

package/src/layers/base/SVGLayer.ts

@@ -4,13 +4,13 @@ import { OnMountEvent, OnResizeEvent } from '../../interfaces';
 import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
 
 export abstract class SVGLayer<T> extends Layer<T> {
-  elm: Selection<SVGElement, unknown, null, undefined>;
+  elm: Selection<SVGSVGElement, unknown, null, undefined> | undefined;
 
   override onMount(event: OnMountEvent): void {
     super.onMount(event);
     const { elm } = event;
-    const width = event.width || parseInt(elm.getAttribute('width'), 10) || DEFAULT_LAYER_WIDTH;
-    const height = event.height || parseInt(elm.getAttribute('height'), 10) || DEFAULT_LAYER_HEIGHT;
+    const width = event.width || parseInt(elm.getAttribute('width') ?? '', 10) || DEFAULT_LAYER_WIDTH;
+    const height = event.height || parseInt(elm.getAttribute('height') ?? '', 10) || DEFAULT_LAYER_HEIGHT;
     if (!this.elm) {
       this.elm = select(elm).append('svg');
       this.elm.attr('id', `${this.id}`);
@@ -23,8 +23,8 @@ export abstract class SVGLayer<T> extends Layer<T> {
 
   override onUnmount(): void {
     super.onUnmount();
-    this.elm.remove();
-    this.elm = null;
+    this.elm?.remove();
+    this.elm = undefined;
   }
 
   override onResize(event: OnResizeEvent): void {

package/src/utils/arc-length.ts

@@ -16,15 +16,8 @@ export class ArcLength {
    * @param {Number} minDepth Min recursive depth before accepting solution
    * @param {Number} maxDepth Max recursive depth
    */
-  static bisect(
-    func: fx,
-    minLimit: number = 0,
-    maxLimit: number = 1,
-    tolerance: number = 0.005,
-    minDepth: number = 4,
-    maxDepth: number = 10,
-  ): number {
-    const calcRec = (a: number, b: number, aVal: number[], bVal: number[], span: number, tolerance: number, depth: number = 0): number => {
+  static bisect(func: fx, minLimit = 0, maxLimit = 1, tolerance = 0.005, minDepth = 4, maxDepth = 10): number {
+    const calcRec = (a: number, b: number, aVal: number[], bVal: number[], span: number, tolerance: number, depth = 0): number => {
       const mid = (a + b) / 2;
       const midVal = func(mid) as number[];
       const spanA = Vector2.distance(aVal, midVal);
@@ -51,7 +44,7 @@ export class ArcLength {
    * @param {Number} maxLimit Max limit
    * @param {Number} segments Number of segments
    */
-  static trapezoid(func: fx, minLimit: number = 0, maxLimit: number = 1, segments: number = 1000): number {
+  static trapezoid(func: fx, minLimit = 0, maxLimit = 1, segments = 1000): number {
     let length = 0;
     let lastPos = func(minLimit) as number[];
     const step = (maxLimit - minLimit) / (segments - 1);

package/src/utils/binary-search.ts

@@ -11,10 +11,10 @@ export class BinarySearch {
     while (i > il && i < ih) {
       const v = values[i];
       const v1 = values[i + 1];
-      if (v <= searchValue && v1 >= searchValue) {
+      if (v != null && v1 != null && v <= searchValue && v1 >= searchValue) {
         return i;
       }
-      if (searchValue < v) {
+      if (v != null && searchValue < v) {
         ih = i;
       } else {
         il = i;

package/src/utils/color.ts

@@ -1,4 +1,4 @@
-import { color, Color } from 'd3-color';
+import { color } from 'd3-color';
 
 const RADIX_SIXTEEN = 16;
 const HEX_STRING_LENGTH = 6;
@@ -6,10 +6,14 @@ const HEX_STRING_LENGTH = 6;
  * Convert color string to number
  */
 export function convertColor(colorStr: string): number {
-  const c: Color = color(colorStr);
-  const d: string = c.formatHex();
-  const n: number = parseInt(d.replace('#', '0x'));
-  return n;
+  const c = color(colorStr);
+  if (c != null) {
+    const d: string = c?.formatHex();
+    const n: number = parseInt(d.replace('#', '0x'));
+    return n;
+  } else {
+    throw Error(`Could not format string ${colorStr} to hex code.`);
+  }
 }
 
 export function colorToCSSColor(color: number | string): string {

package/src/utils/root-finder.ts

@@ -15,7 +15,7 @@ export class RootFinder {
    * @param {Number} minLimit Min limit of result
    * @param {Number} maxLimit Max limit of result
    */
-  static newton(func: fx, precision: number = 0.01, maxIterations: number = 1000, start = 0.5, minLimit = 0, maxLimit = 1): number {
+  static newton(func: fx, precision = 0.01, maxIterations = 1000, start = 0.5, minLimit = 0, maxLimit = 1): number | undefined {
     const h = 0.0001;
     let t = start;
     for (let i = 0; i < maxIterations; i++) {
@@ -26,7 +26,7 @@ export class RootFinder {
       const d = (func(t + h) - v) / h;
       t = t - v / d;
     }
-    return null;
+    return undefined;
   }
 
   /**
@@ -38,7 +38,7 @@ export class RootFinder {
    * @param {Number} minLimit Min limit of result
    * @param {Number} maxLimit Max limit of result
    */
-  static bisect(func: fx, precision: number = 0.01, maxIterations: number = 1000, start = 0.5, minLimit = 0, maxLimit = 1): number {
+  static bisect(func: fx, precision = 0.01, maxIterations = 1000, start = 0.5, minLimit = 0, maxLimit = 1): number {
     let tl = minLimit;
     let th = maxLimit;
     let t = start;
@@ -68,7 +68,7 @@ export class RootFinder {
    * @param {Number} minLimit Min limit of result
    * @param {Number} maxLimit Max limit of result
    */
-  static findRoot(func: fx, precision: number = 0.01, maxIterations: number = 1000, start = 0.5, minLimit = 0, maxLimit = 1): number {
+  static findRoot(func: fx, precision = 0.01, maxIterations = 1000, start = 0.5, minLimit = 0, maxLimit = 1): number {
     let t = RootFinder.newton(func, precision, maxIterations, start);
     if (t == null) {
       t = RootFinder.bisect(func, precision, maxIterations, start, minLimit, maxLimit);

package/src/utils/text.ts

@@ -7,7 +7,7 @@ const DEFAULT_HORIZONTAL_PADDING = 4;
 const DEFAULT_VERTICAL_PADDING = 2;
 
 export function pixelsPerUnit(x: ScaleLinear<number, number>): number {
-  const [min] = x.domain();
+  const [min] = x.domain() as [number, number];
   return Math.abs(x(min + 1));
 }
 
@@ -42,14 +42,14 @@ export function isOverlapping(
   return true;
 }
 
-export function getOverlap(r1: BoundingBox, r2: BoundingBox): { dx: number; dy: number } {
+export function getOverlap(r1: BoundingBox, r2: BoundingBox): { dx: number; dy: number } | undefined {
   const r1x2 = r1.x + r1.width;
   const r2x2 = r2.x + r2.width;
   const r1y2 = r1.y + r1.height;
   const r2y2 = r2.y + r2.height;
 
   if (r2.x > r1x2 || r2.y > r1y2 || r2x2 < r1.x || r2y2 < r1.y) {
-    return null;
+    return undefined;
   }
 
   const dx = Math.max(0, Math.min(r1.x + r1.width, r2.x + r2.width) - Math.max(r1.x, r2.x));
@@ -67,14 +67,14 @@ export function getOverlapOffset(
   r2: BoundingBox,
   horizontalPadding = DEFAULT_HORIZONTAL_PADDING,
   verticalPadding = DEFAULT_VERTICAL_PADDING,
-): { dx: number; dy: number } {
+): { dx: number; dy: number } | undefined {
   const r1x2 = r1.x + r1.width;
   const r2x2 = r2.x + r2.width;
   const r1y2 = r1.y + r1.height;
   const r2y2 = r2.y + r2.height;
 
   if (r2.x - horizontalPadding > r1x2 || r2.y - verticalPadding > r1y2 || r2x2 + horizontalPadding < r1.x || r2y2 + verticalPadding < r1.y) {
-    return null;
+    return undefined;
   }
 
   const dx = r1.x + r1.width - r2.x + horizontalPadding;