@equinor/esv-intersection 3.0.9 → 3.0.11

package/src/layers/CalloutCanvasLayer.ts

@@ -47,10 +47,10 @@ export interface CalloutOptions<T extends Annotation[]> extends LayerOptions<T>
 }
 
 export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
-  rescaleEvent: OnRescaleEvent;
-  xRatio: number;
-  callouts: Callout[];
-  groupFilter: string[] = null;
+  rescaleEvent: OnRescaleEvent | undefined;
+  xRatio: number | undefined;
+  callouts: Callout[] = [];
+  groupFilter: string[] = [];
   minFontSize: number;
   maxFontSize: number;
   fontSizeFactor: number;
@@ -60,25 +60,23 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
   constructor(id?: string, options?: CalloutOptions<T>) {
     super(id, options);
-    this.minFontSize = options.minFontSize || DEFAULT_MIN_FONT_SIZE;
-    this.maxFontSize = options.maxFontSize || DEFAULT_MAX_FONT_SIZE;
-    this.fontSizeFactor = options.fontSizeFactor || DEFAULT_FONT_SIZE_FACTOR;
-    this.offsetMin = options.offsetMin || DEFAULT_OFFSET_MIN;
-    this.offsetMax = options.offsetMax || DEFAULT_OFFSET_MAX;
-    this.offsetFactor = options.offsetFactor || DEFAULT_OFFSET_FACTOR;
+    this.minFontSize = options?.minFontSize || DEFAULT_MIN_FONT_SIZE;
+    this.maxFontSize = options?.maxFontSize || DEFAULT_MAX_FONT_SIZE;
+    this.fontSizeFactor = options?.fontSizeFactor || DEFAULT_FONT_SIZE_FACTOR;
+    this.offsetMin = options?.offsetMin || DEFAULT_OFFSET_MIN;
+    this.offsetMax = options?.offsetMax || DEFAULT_OFFSET_MAX;
+    this.offsetFactor = options?.offsetFactor || DEFAULT_OFFSET_FACTOR;
   }
 
   setGroupFilter(filter: string[]): void {
     this.groupFilter = filter;
-    this.callouts = undefined;
+    this.callouts = [];
     this.render();
   }
 
   override onUpdate(event: OnUpdateEvent<T>): void {
     super.onUpdate(event);
-
-    this.callouts = undefined;
-
+    this.callouts = [];
     this.render();
   }
 
@@ -102,14 +100,14 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
       const fontSize = calcSize(this.fontSizeFactor, this.minFontSize, this.maxFontSize, xScale);
 
-      if (!isPanning || !this.callouts) {
+      if (!isPanning || this.callouts.length <= 0) {
         const { data, ctx, groupFilter } = this;
         const { calculateDisplacementFromBottom } = this.referenceSystem.options;
         const isLeftToRight = calculateDisplacementFromBottom ? xBounds[0] < xBounds[1] : xBounds[0] > xBounds[1];
         const scale = 0;
 
-        ctx.font = `bold ${fontSize}px arial`;
-        const filtered = data.filter((d: Annotation) => !groupFilter || groupFilter.includes(d.group));
+        ctx != null && (ctx.font = `bold ${fontSize}px arial`);
+        const filtered = data.filter((d: Annotation) => groupFilter.length <= 0 || groupFilter.includes(d.group));
         const offset = calcSize(this.offsetFactor, this.offsetMin, this.offsetMax, xScale);
         this.callouts = this.positionCallouts(filtered, isLeftToRight, xScale, yScale, scale, fontSize, offset);
       }
@@ -138,27 +136,24 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     this.renderText(label, x, y, fontSize, color);
   };
 
-  private renderText(
-    title: string,
-    x: number,
-    y: number,
-    fontSize: number,
-    color: string,
-    font: string = 'arial',
-    fontStyle: string = 'normal',
-  ): void {
+  private renderText(title: string, x: number, y: number, fontSize: number, color: string, font = 'arial', fontStyle = 'normal'): void {
     const { ctx } = this;
-    ctx.font = `${fontStyle} ${fontSize}px ${font}`;
-    ctx.fillStyle = color;
-    ctx.fillText(title, x, y);
+    if (ctx != null) {
+      ctx.font = `${fontStyle} ${fontSize}px ${font}`;
+      ctx.fillStyle = color;
+      ctx.fillText(title, x, y);
+    }
   }
 
-  private renderPoint(x: number, y: number, radius: number = 3): void {
+  private renderPoint(x: number, y: number, radius = 3): void {
     const { ctx } = this;
-    ctx.beginPath();
-    ctx.moveTo(x, y);
-    ctx.arc(x, y, radius, 0, Math.PI * 2);
-    ctx.fill();
+
+    if (ctx != null) {
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.arc(x, y, radius, 0, Math.PI * 2);
+      ctx.fill();
+    }
   }
 
   private renderCallout(title: string, label: string, boundingBox: BoundingBox, color: string, location: string): void {
@@ -172,25 +167,27 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     this.renderLine(x, y, width, dotX, dotY, color, placeLeft);
   }
 
-  private renderLine = (x: number, y: number, width: number, dotX: number, dotY: number, color: string, placeLeft: boolean = true): void => {
+  private renderLine = (x: number, y: number, width: number, dotX: number, dotY: number, color: string, placeLeft = true): void => {
     const { ctx } = this;
     const textX = placeLeft ? x : x + width;
     const inverseTextX = placeLeft ? x + width : x;
     const textY = y + 2;
 
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 1;
+    if (ctx != null) {
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
 
-    ctx.beginPath();
-    ctx.moveTo(dotX, dotY);
-    ctx.lineTo(textX, textY);
-    ctx.lineTo(inverseTextX, textY);
+      ctx.beginPath();
+      ctx.moveTo(dotX, dotY);
+      ctx.lineTo(textX, textY);
+      ctx.lineTo(inverseTextX, textY);
 
-    ctx.stroke();
+      ctx.stroke();
+    }
   };
 
   private getPosition(boundingBox: BoundingBox, location: string): Point {
-    const { x, y, offsetX, offsetY, width } = boundingBox;
+    const { x, y, offsetX = 0, offsetY = 0, width } = boundingBox;
     switch (location) {
       case Location.topleft:
         return {
@@ -228,7 +225,7 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     yScale: ScaleLinear<number, number>,
     _scale: number,
     fontSize: number,
-    offset: number = 20,
+    offset = 20,
   ): Callout[] {
     if (annotations.length === 0) {
       return [];
@@ -236,12 +233,12 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     const alignment = isLeftToRight ? Location.topleft : Location.topright;
 
     const nodes = annotations.map((a) => {
-      const pos = a.pos ? a.pos : this.referenceSystem.project(a.md);
+      const pos = a.pos ? a.pos : this.referenceSystem?.project(a.md!)!;
       return {
         title: a.title,
         label: a.label,
         color: a.color,
-        pos: { x: pos[0], y: pos[1] },
+        pos: { x: pos?.[0]!, y: pos?.[1]! },
         group: a.group,
         alignment,
         boundingBox: this.getAnnotationBoundingBox(a.title, a.label, pos, xScale, yScale, fontSize),
@@ -250,7 +247,7 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
       };
     });
 
-    const top = [nodes[nodes.length - 1]];
+    const top = [nodes[nodes.length - 1]!];
     const bottom: Callout[] = [];
 
     // Initial best effort
@@ -274,11 +271,11 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
     height: number,
   ): { x: number; y: number; width: number; height: number } {
     const { ctx } = this;
-    const ax1 = xScale(pos[0]);
-    const ay1 = yScale(pos[1]);
+    const ax1 = xScale(pos[0]!);
+    const ay1 = yScale(pos[1]!);
 
-    const labelWidth = ctx.measureText(label).width;
-    const titleWidth = ctx.measureText(title).width;
+    const labelWidth = ctx?.measureText(label).width ?? 0;
+    const titleWidth = ctx?.measureText(title).width ?? 0;
     const width = Math.max(labelWidth, titleWidth);
 
     const bbox = {
@@ -292,15 +289,15 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
   chooseTopOrBottomPosition(nodes: Callout[], bottom: Callout[], top: Callout[]): void {
     for (let i = nodes.length - 2; i >= 0; --i) {
-      const node = nodes[i];
-      const prevNode = top[0];
+      const node = nodes[i]!;
+      const prevNode = top[0]!;
 
       const overlap = isOverlapping(node.boundingBox, prevNode.boundingBox);
       if (overlap) {
         node.alignment = node.alignment === Location.topleft ? Location.bottomright : Location.bottomleft;
         bottom.push(node);
         if (i > 0) {
-          top.unshift(nodes[--i]);
+          top.unshift(nodes[--i]!);
         }
       } else {
         top.unshift(node);
@@ -310,9 +307,9 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
   adjustTopPositions(top: Callout[]): void {
     for (let i = top.length - 2; i >= 0; --i) {
-      const currentNode = top[i];
+      const currentNode = top[i]!;
       for (let j = top.length - 1; j > i; --j) {
-        const prevNode = top[j];
+        const prevNode = top[j]!;
         const overlap = getOverlapOffset(currentNode.boundingBox, prevNode.boundingBox);
         if (overlap) {
           currentNode.dy += overlap.dy;
@@ -324,9 +321,9 @@ export class CalloutCanvasLayer<T extends Annotation[]> extends CanvasLayer<T> {
 
   adjustBottomPositions(bottom: Callout[]): void {
     for (let i = bottom.length - 2; i >= 0; --i) {
-      const currentNode = bottom[i];
+      const currentNode = bottom[i]!;
       for (let j = bottom.length - 1; j > i; --j) {
-        const prevNode = bottom[j];
+        const prevNode = bottom[j]!;
         const overlap = getOverlapOffset(prevNode.boundingBox, currentNode.boundingBox);
         if (overlap) {
           currentNode.dy += overlap.dy;

package/src/layers/CustomDisplayObjects/ComplexRopeGeometry.ts

@@ -28,7 +28,7 @@ export class ComplexRopeGeometry extends MeshGeometry {
    * @readonly
    */
   get width(): number {
-    return max(this.segments, (segment) => segment.diameter);
+    return max(this.segments, (segment) => segment.diameter)!;
   }
 
   /** Refreshes Rope indices and uvs */
@@ -66,7 +66,7 @@ export class ComplexRopeGeometry extends MeshGeometry {
     uvs[3] = 1;
 
     const segmentCount = segments.length;
-    const maxDiameter = max(segments, (segment) => segment.diameter);
+    const maxDiameter = max(segments, (segment) => segment.diameter)!;
 
     let amount = 0;
     let uvIndex = 0;
@@ -74,21 +74,21 @@ export class ComplexRopeGeometry extends MeshGeometry {
     let indexCount = 0;
 
     for (let i = 0; i < segmentCount; i++) {
-      let prev = segments[i].points[0];
+      let prev = segments[i]?.points[0]!;
       const textureWidth = maxDiameter;
-      const radius = segments[i].diameter / maxDiameter / 2;
+      const radius = segments[i]?.diameter! / maxDiameter / 2;
 
-      const total = segments[i].points.length; // - 1;
+      const total = segments[i]?.points.length!; // - 1;
 
       for (let j = 0; j < total; j++) {
         // time to do some smart drawing!
 
         // calculate pixel distance from previous point
-        const dx = prev.x - segments[i].points[j].x;
-        const dy = prev.y - segments[i].points[j].y;
+        const dx = prev.x - segments[i]?.points[j]?.x!;
+        const dy = prev.y - segments[i]?.points[j]?.y!;
         const distance = Math.sqrt(dx * dx + dy * dy);
 
-        prev = segments[i].points[j];
+        prev = segments[i]?.points[j]!;
         amount += distance / textureWidth;
 
         uvs[uvIndex] = amount;
@@ -131,20 +131,20 @@ export class ComplexRopeGeometry extends MeshGeometry {
     const segmentCount = segments.length;
     let lastIndex = 0;
     for (let i = 0; i < segmentCount; i++) {
-      let lastPoint = segments[i].points[0];
+      let lastPoint = segments[i]?.points[0]!;
       let nextPoint;
       let perpX = 0;
       let perpY = 0;
 
-      const vertices = this.buffers[0].data;
-      const total = segments[i].points.length;
+      const vertices = this.buffers[0]?.data;
+      const total = segments[i]?.points.length!;
       let index = 0;
       for (let j = 0; j < total; j++) {
-        const point = segments[i].points[j];
+        const point = segments[i]?.points[j]!;
         index = lastIndex + j * 4;
 
-        if (j < segments[i].points.length - 1) {
-          nextPoint = segments[i].points[j + 1];
+        if (j < segments[i]?.points.length! - 1) {
+          nextPoint = segments[i]?.points[j + 1]!;
         } else {
           nextPoint = point;
         }
@@ -153,7 +153,7 @@ export class ComplexRopeGeometry extends MeshGeometry {
         perpX = nextPoint.y - lastPoint.y;
 
         const perpLength = Math.sqrt(perpX * perpX + perpY * perpY);
-        const num = segments[i].diameter / 2;
+        const num = segments[i]?.diameter! / 2;
 
         perpX /= perpLength;
         perpY /= perpLength;
@@ -161,16 +161,19 @@ export class ComplexRopeGeometry extends MeshGeometry {
         perpX *= num;
         perpY *= num;
 
-        vertices[index] = point.x + perpX;
-        vertices[index + 1] = point.y + perpY;
-        vertices[index + 2] = point.x - perpX;
-        vertices[index + 3] = point.y - perpY;
+        if (vertices != null) {
+          vertices[index] = point.x + perpX;
+          vertices[index + 1] = point.y + perpY;
+          vertices[index + 2] = point.x - perpX;
+          vertices[index + 3] = point.y - perpY;
+        }
+
         lastPoint = point;
       }
       lastIndex = index + 4;
     }
 
-    this.buffers[0].update();
+    this.buffers[0]?.update();
   }
 
   public update(): void {

package/src/layers/CustomDisplayObjects/FixedWidthSimpleRopeGeometry.ts

@@ -8,7 +8,6 @@ export class FixedWidthSimpleRopeGeometry extends MeshGeometry {
    * @param {PIXI.Point[]} [points] - An array of PIXI.Point objects to construct this rope.
    */
   constructor(points: IPoint[], width = 200) {
-    // eslint-disable-next-line no-magic-numbers
     super(new Float32Array(points.length * 4), new Float32Array(points.length * 4), new Uint16Array((points.length - 1) * 6));
     /**
      * An array of points that determine the rope
@@ -66,17 +65,17 @@ export class FixedWidthSimpleRopeGeometry extends MeshGeometry {
     uvs[2] = 0;
     uvs[3] = 1;
     let amount = 0;
-    let prev = points[0];
+    let prev = points[0]!;
     const total = points.length; // - 1;
     for (let i = 0; i < total; i++) {
       // time to do some smart drawing!
       const index = i * 4;
 
       // calculate pixel distance from previous point
-      const dx = prev.x - points[i].x;
-      const dy = prev.y - points[i].y;
+      const dx = prev.x - points[i]?.x!;
+      const dy = prev.y - points[i]?.y!;
       const distance = Math.sqrt(dx * dx + dy * dy);
-      prev = points[i];
+      prev = points[i]!;
       amount += distance / this._width;
 
       uvs[index] = amount;
@@ -107,17 +106,17 @@ export class FixedWidthSimpleRopeGeometry extends MeshGeometry {
     if (points.length < 1) {
       return;
     }
-    let lastPoint = points[0];
+    let lastPoint = points[0]!;
     let nextPoint;
     let perpX = 0;
     let perpY = 0;
-    const vertices = this.buffers[0].data;
+    const vertices = this.buffers[0]?.data!;
     const total = points.length;
     for (let i = 0; i < total; i++) {
-      const point = points[i];
+      const point = points[i]!;
       const index = i * 4;
       if (i < points.length - 1) {
-        nextPoint = points[i + 1];
+        nextPoint = points[i + 1]!;
       } else {
         nextPoint = point;
       }
@@ -140,7 +139,7 @@ export class FixedWidthSimpleRopeGeometry extends MeshGeometry {
       vertices[index + 3] = point.y - perpY;
       lastPoint = point;
     }
-    this.buffers[0].update();
+    this.buffers[0]?.update();
   }
 
   public update(): void {

package/src/layers/CustomDisplayObjects/UniformTextureStretchRopeGeometry.ts

@@ -55,14 +55,14 @@ export class UniformTextureStretchRopeGeometry extends MeshGeometry {
     const total = points.length; // - 1;
 
     let totalLength = 0;
-    let prevPoint = points[0];
+    let prevPoint = points[0]!;
 
     for (let i = 0; i < total; i++) {
-      const dx = prevPoint.x - points[i].x;
-      const dy = prevPoint.y - points[i].y;
+      const dx = prevPoint.x - points[i]?.x!;
+      const dy = prevPoint.y - points[i]?.y!;
       const distance = Math.sqrt(dx * dx + dy * dy);
 
-      prevPoint = points[i];
+      prevPoint = points[i]!;
       totalLength += distance;
     }
 
@@ -75,18 +75,18 @@ export class UniformTextureStretchRopeGeometry extends MeshGeometry {
     uvs[3] = 1;
 
     let amount = 0;
-    let prev = points[0];
+    let prev = points[0]!;
 
     for (let i = 0; i < total; i++) {
       // time to do some smart drawing!
       const index = i * 4;
 
       // calculate pixel distance from previous point
-      const dx = prev.x - points[i].x;
-      const dy = prev.y - points[i].y;
+      const dx = prev.x - points[i]?.x!;
+      const dy = prev.y - points[i]?.y!;
       const distance = Math.sqrt(dx * dx + dy * dy);
 
-      prev = points[i];
+      prev = points[i]!;
 
       // strech texture on distance/length instead of point/points.length to get a more correct strech
       amount += distance / totalLength;
@@ -127,20 +127,20 @@ export class UniformTextureStretchRopeGeometry extends MeshGeometry {
       return;
     }
 
-    let lastPoint = points[0];
+    let lastPoint = points[0]!;
     let nextPoint;
     let perpX = 0;
     let perpY = 0;
 
-    const vertices = this.buffers[0].data;
+    const vertices = this.buffers[0]?.data!;
     const total = points.length;
 
     for (let i = 0; i < total; i++) {
-      const point = points[i];
+      const point = points[i]!;
       const index = i * 4;
 
       if (i < points.length - 1) {
-        nextPoint = points[i + 1];
+        nextPoint = points[i + 1]!;
       } else {
         nextPoint = point;
       }
@@ -165,7 +165,7 @@ export class UniformTextureStretchRopeGeometry extends MeshGeometry {
       lastPoint = point;
     }
 
-    this.buffers[0].update();
+    this.buffers[0]?.update();
   }
 
   public update(): void {

package/src/layers/GeomodelCanvasLayer.ts

@@ -12,7 +12,7 @@ type SurfacePaths = {
 };
 
 export class GeomodelCanvasLayer<T extends SurfaceData> extends CanvasLayer<T> {
-  rescaleEvent: OnRescaleEvent;
+  rescaleEvent: OnRescaleEvent | undefined;
 
   surfaceAreasPaths: SurfacePaths[] = [];
 
@@ -69,65 +69,72 @@ export class GeomodelCanvasLayer<T extends SurfaceData> extends CanvasLayer<T> {
   }
 
   generateSurfaceAreasPaths(): void {
-    this.surfaceAreasPaths = this.data.areas.reduce((acc: SurfacePaths[], s: SurfaceArea) => {
-      const polygons = this.createPolygons(s.data);
-      const mapped: SurfacePaths[] = polygons.map((polygon: number[]) => ({
-        color: this.colorToCSSColor(s.color),
-        path: this.generatePolygonPath(polygon),
-      }));
-      acc.push(...mapped);
-      return acc;
-    }, []);
+    this.surfaceAreasPaths =
+      this.data?.areas.reduce((acc: SurfacePaths[], s: SurfaceArea) => {
+        const polygons = this.createPolygons(s.data);
+        const mapped: SurfacePaths[] = polygons.map((polygon: number[]) => ({
+          color: this.colorToCSSColor(s.color),
+          path: this.generatePolygonPath(polygon),
+        }));
+        acc.push(...mapped);
+        return acc;
+      }, []) ?? [];
   }
 
   generateSurfaceLinesPaths(): void {
-    this.surfaceLinesPaths = this.data.lines.reduce((acc: SurfacePaths[], l: SurfaceLine) => {
-      const lines = this.generateLinePaths(l);
-      const mapped: SurfacePaths[] = lines.map((path: Path2D) => ({ color: this.colorToCSSColor(l.color), path }));
-      acc.push(...mapped);
-      return acc;
-    }, []);
+    this.surfaceLinesPaths =
+      this.data?.lines.reduce((acc: SurfacePaths[], l: SurfaceLine) => {
+        const lines = this.generateLinePaths(l);
+        const mapped: SurfacePaths[] = lines.map((path: Path2D) => ({ color: this.colorToCSSColor(l.color), path }));
+        acc.push(...mapped);
+        return acc;
+      }, []) ?? [];
   }
 
   drawPolygonPath = (color: string, path: Path2D): void => {
     const { ctx } = this;
-    ctx.fillStyle = color;
-    ctx.fill(path);
+    if (ctx != null) {
+      ctx.fillStyle = color;
+      ctx.fill(path);
+    }
   };
 
   drawLinePath = (color: string, path: Path2D): void => {
     const { ctx } = this;
-    ctx.strokeStyle = color;
-    ctx.stroke(path);
+
+    if (ctx != null) {
+      ctx.strokeStyle = color;
+      ctx.stroke(path);
+    }
   };
 
   createPolygons = (data: number[][]): number[][] => {
     const polygons: number[][] = [];
-    let polygon: number[] = null;
+    let polygon: number[] = [];
 
     // Start generating polygons
     for (let i = 0; i < data.length; i++) {
       // Generate top of polygon as long as we have valid values
-      const topIsValid = !!data[i][1];
+      const topIsValid = !!data[i]?.[1];
       if (topIsValid) {
         if (polygon === null) {
           polygon = [];
         }
-        polygon.push(data[i][0], data[i][1]);
+        polygon.push(data[i]?.[0]!, data[i]?.[1]!);
       }
 
       const endIsReached = i === data.length - 1;
       if (!topIsValid || endIsReached) {
-        if (polygon) {
+        if (polygon.length > 0) {
           // Generate bottom of polygon
           for (let j: number = !topIsValid ? i - 1 : i; j >= 0; j--) {
-            if (!data[j][1]) {
+            if (!data[j]?.[1]) {
               break;
             }
-            polygon.push(data[j][0], data[j][2] || this.maxDepth);
+            polygon.push(data[j]?.[0]!, data[j]?.[2] || this.maxDepth);
           }
           polygons.push(polygon);
-          polygon = null;
+          polygon = [];
         }
       }
     }
@@ -138,9 +145,9 @@ export class GeomodelCanvasLayer<T extends SurfaceData> extends CanvasLayer<T> {
   generatePolygonPath = (polygon: number[]): Path2D => {
     const path = new Path2D();
 
-    path.moveTo(polygon[0], polygon[1]);
+    path.moveTo(polygon[0]!, polygon[1]!);
     for (let i = 2; i < polygon.length; i += 2) {
-      path.lineTo(polygon[i], polygon[i + 1]);
+      path.lineTo(polygon[i]!, polygon[i + 1]!);
     }
     path.closePath();
 
@@ -152,22 +159,22 @@ export class GeomodelCanvasLayer<T extends SurfaceData> extends CanvasLayer<T> {
     const { data: d } = s;
 
     let penDown = false;
-    let path = null;
+    let path: Path2D | undefined;
     for (let i = 0; i < d.length; i++) {
-      if (d[i][1]) {
-        if (penDown) {
-          path.lineTo(d[i][0], d[i][1]);
+      if (d[i]?.[1]) {
+        if (penDown && path) {
+          path.lineTo(d[i]?.[0]!, d[i]?.[1]!);
         } else {
           path = new Path2D();
-          path.moveTo(d[i][0], d[i][1]);
+          path.moveTo(d[i]?.[0]!, d[i]?.[1]!);
           penDown = true;
         }
-      } else if (penDown) {
+      } else if (penDown && path) {
         paths.push(path);
         penDown = false;
       }
     }
-    if (penDown) {
+    if (penDown && path) {
       paths.push(path);
     }