abstract-3d 2.7.32 → 2.8.0

package/src/renderers/dxf/dxf-geometries/dxf-plane.ts

@@ -1,27 +1,11 @@
-import {
-  type Plane,
-  type Material,
-  type Vec3,
-  vec2Scale,
-  vec3,
-  vec3TransRot,
-  vec3RotCombine,
-  vec3Zero,
-} from "../../../abstract-3d.js";
-import type { Handle } from "../dxf-encoding/dxf-common.js";
+import { type Plane, type Material, type Vec3, vec2Scale, vec3, vec3TransRot, vec3RotCombine, vec3Zero } from "../../../abstract-3d.js";
 import { dxfEnc3DFace } from "../dxf-encoding/dxf-3dface.js";
+import type { Handle } from "../dxf-encoding/dxf-common.js";
 
 export function dxfPlane(p: Plane, m: Material, parentPos: Vec3, parentRot: Vec3, handleRef: Handle): string {
   const half = vec2Scale(p.size, 0.5);
   const pos = vec3TransRot(p.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
   const vec3tr = (x: number, y: number): Vec3 => vec3TransRot(vec3(x, y, 0), pos, rot);
-  return dxfEnc3DFace(
-    vec3tr(-half.x, -half.y),
-    vec3tr(half.x, -half.y),
-    vec3tr(half.x, half.y),
-    vec3tr(-half.x, half.y),
-    m.normal,
-    handleRef
-  );
+  return dxfEnc3DFace(vec3tr(-half.x, -half.y), vec3tr(half.x, -half.y), vec3tr(half.x, half.y), vec3tr(-half.x, half.y), m.normal, handleRef);
 }

package/src/renderers/dxf/dxf-geometries/dxf-polygon.ts

@@ -1,6 +1,6 @@
 import { type Polygon, type Material, type Vec3, vec3RotCombine, vec3TransRot, vec3Zero } from "../../../abstract-3d.js";
-import type { Handle } from "../dxf-encoding/dxf-common.js";
 import { dxfEnc3DFace } from "../dxf-encoding/dxf-3dface.js";
+import type { Handle } from "../dxf-encoding/dxf-common.js";
 import { dxfEnc3DFaceTriangle } from "../dxf-encoding/dxf-triangle.js";
 
 const QUAD_STRIDE = 4;
@@ -13,20 +13,13 @@ export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot:
   const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
   const points = p.points.map((p) => vec3TransRot(p, pos, rot));
   let i = 0;
-  while((points.length - i) >= QUAD_STRIDE) {
+  while (points.length - i >= QUAD_STRIDE) {
     const vec1 = points[i];
     const vec2 = points[i + 1];
     const vec3 = points[i + 2];
     const vec4 = points[i + 3];
-    if(vec1 && vec2 && vec3 && vec4) {
-      polygonString += dxfEnc3DFace(
-        vec1,
-        vec2,
-        vec3,
-        vec4,
-        col,
-        handleRef
-      );
+    if (vec1 && vec2 && vec3 && vec4) {
+      polygonString += dxfEnc3DFace(vec1, vec2, vec3, vec4, col, handleRef);
     }
     i += QUAD_STRIDE;
   }
@@ -38,7 +31,7 @@ export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot:
         const vec1 = points[i];
         const vec2 = points[i - 1];
         const vec3 = points[i - 2];
-        if(vec1 && vec2 && vec3) {
+        if (vec1 && vec2 && vec3) {
           polygonString += dxfEnc3DFaceTriangle(vec3, vec2, vec1, col, handleRef);
         }
         break;
@@ -47,14 +40,8 @@ export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot:
         const vec1 = points[i];
         const vec2 = points[i - 1];
         const vec3 = points[i + 1];
-        if(vec1 && vec2 && vec3) {
-          polygonString += dxfEnc3DFaceTriangle(
-            vec2,
-            vec1,
-            vec3,
-            col,
-            handleRef
-          );
+        if (vec1 && vec2 && vec3) {
+          polygonString += dxfEnc3DFaceTriangle(vec2, vec1, vec3, col, handleRef);
         }
         break;
       }
@@ -62,14 +49,8 @@ export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot:
         const vec1 = points[i];
         const vec2 = points[i + 1];
         const vec3 = points[i + 2];
-        if(vec1 && vec2 && vec3) {
-          polygonString += dxfEnc3DFaceTriangle(
-            vec1,
-            vec2,
-            vec3,
-            col,
-            handleRef
-          );
+        if (vec1 && vec2 && vec3) {
+          polygonString += dxfEnc3DFaceTriangle(vec1, vec2, vec3, col, handleRef);
         }
         break;
       }

package/src/renderers/dxf/dxf-geometries/dxf-shape.ts

@@ -1,6 +1,6 @@
 import { type Shape, type Material, type Vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3 } from "../../../abstract-3d.js";
-import type { Handle } from "../dxf-encoding/dxf-common.js";
 import { dxfEnc3DFace } from "../dxf-encoding/dxf-3dface.js";
+import type { Handle } from "../dxf-encoding/dxf-common.js";
 import { dxfEnc3DFaceTriangle } from "../dxf-encoding/dxf-triangle.js";
 
 const QUAD_STRIDE = 4;
@@ -18,7 +18,7 @@ export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Ve
       const p2 = points[i + 1];
       const p3 = points[i + 2];
       const p4 = points[i + 3];
-      if(p1 && p2 && p3 && p4) {
+      if (p1 && p2 && p3 && p4) {
         polygonString += dxfEnc3DFace(p1, p2, p3, p4, m.normal, handleRef);
       }
     }
@@ -31,7 +31,7 @@ export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Ve
         const p1 = points[i - 2];
         const p2 = points[i - 1];
         const p3 = points[i];
-        if(p1 && p2 && p3) {
+        if (p1 && p2 && p3) {
           polygonString += dxfEnc3DFaceTriangle(p1, p2, p3, m.normal, handleRef);
         }
         break;
@@ -40,7 +40,7 @@ export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Ve
         const p1 = points[i - 1];
         const p2 = points[i];
         const p3 = points[i + 1];
-        if(p1 && p2 && p3) {
+        if (p1 && p2 && p3) {
           polygonString += dxfEnc3DFaceTriangle(p1, p2, p3, m.normal, handleRef);
         }
         break;
@@ -49,7 +49,7 @@ export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Ve
         const p1 = points[i];
         const p2 = points[i + 1];
         const p3 = points[i + 2];
-        if(p1 && p2 && p3) {
+        if (p1 && p2 && p3) {
           polygonString += dxfEnc3DFaceTriangle(p1, p2, p3, m.normal, handleRef);
         }
         break;

package/src/renderers/dxf/dxf.ts

@@ -20,22 +20,17 @@ import {
   vec3TransRot,
   vec3Zero,
 } from "../../abstract-3d.js";
-import {
-  DEFAULT_CIRCLE_SIDE_COUNT,
-  type DxfOrigin,
-  type Handle,
-  dxfBuild,
-  dxfHandleInit,
-} from "./dxf-encoding/dxf-common.js";
 import { type Optional, calculateVisibleViews } from "../../utils.js";
-import { dxfPlane } from "./dxf-geometries/dxf-plane.js";
+import { dxfBuild } from "./dxf-encoding/dxf-build.js";
+import { DEFAULT_CIRCLE_SIDE_COUNT, type DxfOrigin, type Handle, dxfHandleInit } from "./dxf-encoding/dxf-common.js";
+import type { DxfDimensionDefinition } from "./dxf-encoding/dxf-dimension.js";
 import { dxfBox } from "./dxf-geometries/dxf-box.js";
-import { dxfCylinder } from "./dxf-geometries/dxf-cylinder.js";
 import { dxfCone } from "./dxf-geometries/dxf-cone.js";
-import { dxfPolygon } from "./dxf-geometries/dxf-polygon.js";
-import { dxfImage } from "./dxf-geometries/dxf-image.js";
+import { dxfCylinder } from "./dxf-geometries/dxf-cylinder.js";
 import { dxfDimension } from "./dxf-geometries/dxf-dimension.js";
-import type { DxfDimensionDefinition } from "./dxf-encoding/dxf-dimension.js";
+import { dxfImage } from "./dxf-geometries/dxf-image.js";
+import { dxfPlane } from "./dxf-geometries/dxf-plane.js";
+import { dxfPolygon } from "./dxf-geometries/dxf-polygon.js";
 
 export type DxfOptions = {
   readonly view: View;
@@ -106,8 +101,7 @@ const renderInternal = (
   const [size] = sizeBoundsForCameraPos(scene.size_deprecated, unitCenter, unitRot);
   const bounds = bounds3FromPosAndSize(unitCenter, size);
   const dxfOriginOffset = originOffsetFromBounds(bounds, options.origin);
-  const pos =
-    options.origin === "SameAsScene" ? vec3Zero : vec3NegateY(vec3Add(unitCenter, vec3Add(offset, dxfOriginOffset)));
+  const pos = options.origin === "SameAsScene" ? vec3Zero : vec3NegateY(vec3Add(unitCenter, vec3Add(offset, dxfOriginOffset)));
   const visibleViews = calculateVisibleViews(options.view, scene.rotation_deprecated);
   return {
     groups: scene.groups.reduce((a, c) => a + dxfGroup(c, pos, unitRot, options, handleRef), ""),
@@ -244,10 +238,7 @@ export const renderOld = (scene: Scene, options?: Optional<DxfOptions>): string
   const viewRotation = rotationForCameraPos(opts.view);
   const unitRot = vec3RotCombine(viewRotation, scene.rotation_deprecated ?? vec3Zero);
   const bounds = bounds3FromPosAndSize(center, scene.size_deprecated);
-  const offset = vec3Sub(
-    opts.origin === "Center" ? vec3Zero : vec3(Math.abs(bounds.min.x), Math.abs(bounds.min.y), -bounds.max.z),
-    center
-  );
+  const offset = vec3Sub(opts.origin === "Center" ? vec3Zero : vec3(Math.abs(bounds.min.x), Math.abs(bounds.min.y), -bounds.max.z), center);
   const dimensionsPos = vec3TransRot(center, offset, unitRot);
   const visibleViews = calculateVisibleViews(opts.view, scene.rotation_deprecated);
 
@@ -264,11 +255,5 @@ export const renderOld = (scene: Scene, options?: Optional<DxfOptions>): string
     opts,
     handleRef
   );
-  return dxfBuild(
-    dxfGroup(groupRoot, center, unitRot, opts, handleRef),
-    dimensions,
-    bounds2,
-    scene.size_deprecated,
-    center
-  );
+  return dxfBuild(dxfGroup(groupRoot, center, unitRot, opts, handleRef), dimensions, bounds2, scene.size_deprecated, center);
 };

package/src/renderers/react/react-camera.tsx

@@ -1,4 +1,3 @@
-import React, { useLayoutEffect, useRef, useState } from "react";
 import {
   type GizmoHelperProps,
   PerspectiveCamera,
@@ -10,8 +9,10 @@ import {
   GizmoViewport,
 } from "@react-three/drei";
 import { type ThreeEvent, useThree } from "@react-three/fiber";
-import { exhaustiveCheck } from "ts-exhaustive-check";
+import React, { useLayoutEffect, useRef, useState } from "react";
+import type { OrthographicCamera as ThreeOrthographicCamera, PerspectiveCamera as ThreePerspectiveCamera } from "three";
 import { Vector3 } from "three";
+import { exhaustiveCheck } from "ts-exhaustive-check";
 import type { View, Scene, Vec3 } from "../../abstract-3d.js";
 import { vec3 } from "../../abstract-3d.js";
 
@@ -44,6 +45,9 @@ export type ControlsHelper = (Viewcube | Viewport) & {
 type Viewcube = { readonly type: "Viewcube"; readonly viewcubeProps: GenericProps };
 type Viewport = { readonly type: "Viewport"; readonly viewportProps: GizmoViewportProps };
 
+type RefInstance<C> = C extends React.ForwardRefExoticComponent<infer P> ? (P extends React.RefAttributes<infer R> ? R : never) : never;
+type OrbitControlsInstance = RefInstance<typeof OrbitControls>;
+
 export function ReactCamera({
   useAnimations: _useAnimations,
   camera,
@@ -63,9 +67,10 @@ export function ReactCamera({
   readonly bufferZones?: BufferZones;
   readonly fitPadding?: number;
 }): React.JSX.Element {
-  const [controls, setControls] = useState<any | null>(null);
-  const perspectiveRef = useRef<any | undefined>(undefined);
-  const orthographicRef = useRef<any | undefined>(undefined);
+  // oxlint-disable-next-line typescript/no-redundant-type-constituents -- oxlint's type-aware checker resolves OrbitControlsInstance (a conditional type over a forward-ref component) as `any`; tsc resolves it correctly and the `| null` is not actually redundant
+  const [controls, setControls] = useState<OrbitControlsInstance | null>(null);
+  const perspectiveRef = useRef<ThreePerspectiveCamera | undefined>(undefined);
+  const orthographicRef = useRef<ThreeOrthographicCamera | undefined>(undefined);
 
   const initialDistRef = useRef<number | null>(null);
   const initialTargetRef = useRef(new Vector3());
@@ -76,18 +81,18 @@ export function ReactCamera({
   const invalidate = useThree(({ invalidate }) => invalidate);
 
   const resetZoomOnGizmoClick = (): void => {
-    if (!controls || initialDistRef.current == null || (!perspectiveRef.current && !orthographicRef.current)) {
+    if (!controls || initialDistRef.current === null || (!perspectiveRef.current && !orthographicRef.current)) {
       return;
     }
 
-    const newCamera = camera.type === "Perspective" ? perspectiveRef.current : orthographicRef.current;
+    const newCamera = (camera.type === "Perspective" ? perspectiveRef.current : orthographicRef.current)!;
     const target = initialTargetRef.current.clone();
 
     controls.target.copy(target);
 
     const dist = initialDistRef.current;
     const dir = newCamera.position.clone().sub(target).normalize();
-    newCamera.fov = initialFovRef.current;
+    (newCamera as ThreePerspectiveCamera).fov = initialFovRef.current!;
     newCamera.zoom = 1;
     newCamera.position.copy(target.clone().add(dir.multiplyScalar(dist)));
 
@@ -115,7 +120,7 @@ export function ReactCamera({
     const screenW = size.x;
     const screenH = size.y;
 
-    const fov = camera.type === "Perspective" ? camera.fov ?? 45 : 45;
+    const fov = camera.type === "Perspective" ? (camera.fov ?? 45) : 45;
 
     // Buffer zones in CSS pixels
     const bufLeft = bufferZones.left ?? 0;
@@ -128,7 +133,9 @@ export function ReactCamera({
     const canvasW = canvasSize.width;
     const canvasH = canvasSize.height;
 
-    if (canvasW === 0 || canvasH === 0) return;
+    if (canvasW === 0 || canvasH === 0) {
+      return;
+    }
 
     // Usable area in CSS pixels
     const usableW = Math.max(1, canvasW - bufLeft - bufRight);
@@ -145,19 +152,13 @@ export function ReactCamera({
       initialDistRef.current = dist;
 
       // Fit scene into the usable area
-      let sceneHalfW: number;
-      let sceneHalfH: number;
-
       const padFactor = 1 + fitPadding;
-      if (sceneAspect > usableAspect) {
-        // Scene wider than usable area — constrain by width
-        sceneHalfW = (screenW / 2) * padFactor;
-        sceneHalfH = (screenW / 2 / usableAspect) * padFactor;
-      } else {
-        // Scene taller — constrain by height
-        sceneHalfH = (screenH / 2) * padFactor;
-        sceneHalfW = ((usableAspect * screenH) / 2) * padFactor;
-      }
+      const { sceneHalfW, sceneHalfH } =
+        sceneAspect > usableAspect
+          ? // Scene wider than usable area — constrain by width
+            { sceneHalfW: (screenW / 2) * padFactor, sceneHalfH: (screenW / 2 / usableAspect) * padFactor }
+          : // Scene taller — constrain by height
+            { sceneHalfH: (screenH / 2) * padFactor, sceneHalfW: ((usableAspect * screenH) / 2) * padFactor };
 
       // World units per CSS pixel in the usable area
       const wpp = (sceneHalfW * 2) / usableW;
@@ -207,7 +208,7 @@ export function ReactCamera({
   return (
     <>
       <PerspectiveCamera
-        ref={perspectiveRef}
+        ref={perspectiveRef as unknown as React.RefObject<ThreePerspectiveCamera | null>}
         near={camera.near}
         far={camera.far}
         fov={camera.type === "Perspective" ? camera.fov : 75}
@@ -216,7 +217,7 @@ export function ReactCamera({
         makeDefault={camera.type === "Perspective"}
       />
       <OrthographicCamera
-        ref={orthographicRef}
+        ref={orthographicRef as unknown as React.RefObject<ThreeOrthographicCamera | null>}
         up={[0, 1, 0]}
         near={camera.near}
         far={camera.far}
@@ -274,10 +275,10 @@ export function ReactCamera({
 
 const ControlsWrapper = (
   props: OrbitControlsProps & {
-    setControls: (controls: any) => void;
+    setControls: (controls: OrbitControlsInstance) => void;
   }
 ): React.JSX.Element => {
-  const ref = useRef<any>(null);
+  const ref = useRef<OrbitControlsInstance>(null);
 
   useLayoutEffect(() => {
     if (!ref.current) {

package/src/renderers/react/react-dimension.tsx

@@ -64,13 +64,7 @@ export function ReactDimension({
 }
 
 const DimensionMeshes = React.memo(
-  ({
-    meshes,
-    children,
-  }: {
-    readonly meshes: ReadonlyArray<Mesh>;
-    readonly children: React.JSX.Element;
-  }): React.JSX.Element => (
+  ({ meshes, children }: { readonly meshes: ReadonlyArray<Mesh>; readonly children: React.JSX.Element }): React.JSX.Element => (
     <>
       {meshes.map((m, i) => (
         <ReactMesh key={i} mesh={m}>

package/src/renderers/react/react-group.tsx

@@ -1,13 +1,13 @@
-import React from "react";
+import { Html } from "@react-three/drei";
 import type { ThreeEvent } from "@react-three/fiber";
 import { useFrame } from "@react-three/fiber";
+import React from "react";
 import type { Group } from "three";
 import type { Group as Group_1 } from "../../abstract-3d.js";
+import { ImageMaterial } from "./react-image-material.js";
 import type { MaterialState } from "./react-material.js";
 import { ReactMaterial } from "./react-material.js";
 import { ReactMesh } from "./react-mesh.js";
-import { ImageMaterial } from "./react-image-material.js";
-import { Html } from "@react-three/drei";
 import type { ReactPopover } from "./react-types.js";
 
 export function ReactGroup({
@@ -58,12 +58,7 @@ export function ReactGroup({
     e: ThreeEvent<MouseEvent>
   ) => void;
   readonly getTooltips?: (id: string) => ReadonlyArray<ReactPopover>;
-  readonly createGroupKey?: (
-    g: Group_1,
-    idx: number,
-    rootData: Record<string, string> | undefined,
-    id: string
-  ) => string;
+  readonly createGroupKey?: (g: Group_1, idx: number, rootData: Record<string, string> | undefined, id: string) => string;
 }): React.JSX.Element {
   const ref = React.useRef<Group>(undefined!);
   useFrame(({ invalidate }, delta) => {
@@ -82,6 +77,7 @@ export function ReactGroup({
     }
   });
   const [hovered, setHovered] = React.useState<boolean>(false);
+  // oxlint-disable-next-line typescript/prefer-nullish-coalescing -- `id && ...includes(id)` can legitimately be `false`, which must fall through to hoveredParent
   const hoveredFinal = hovered || (id && hoveredIdsExternal?.includes(id)) || !!hoveredParent;
   const selected = selectedIds?.[id ?? ""];
 
@@ -174,13 +170,7 @@ export function ReactGroup({
         id &&
         getTooltips &&
         getTooltips(id).map((p) => (
-          <Html
-            key={p.id}
-            position={[p.pos.x, p.pos.y, p.pos.z]}
-            center
-            pointerEvents="none"
-            style={{ pointerEvents: "none" }}
-          >
+          <Html key={p.id} position={[p.pos.x, p.pos.y, p.pos.z]} center pointerEvents="none" style={{ pointerEvents: "none" }}>
             {p.content}
           </Html>
         ))}

package/src/renderers/react/react-hotspot.tsx

@@ -1,10 +1,10 @@
-import React from "react";
 import { Html } from "@react-three/drei";
+import type { ThreeEvent } from "@react-three/fiber";
+import React from "react";
 import type { Box, HotSpot } from "../../abstract-3d.js";
 import { vec3Scale, vec3Zero } from "../../abstract-3d.js";
-import { ReactMesh } from "./react-mesh.js";
 import { ReactMaterial } from "./react-material.js";
-import type { ThreeEvent } from "@react-three/fiber";
+import { ReactMesh } from "./react-mesh.js";
 
 export interface HotSpotInfo {
   readonly replaceId: string;
@@ -97,13 +97,7 @@ export function ReactHotSpot({
           <ReactMaterial isText={false} isHotSpot={true} material={h.mesh.material} hovered={hovered} />
         </ReactMesh>
         <ReactMesh mesh={{ ...h.mesh, geometry: { ...geo, size: vec3Scale(geo.size, 1.0125) } }}>
-          <ReactMaterial
-            isText={false}
-            isHotSpot={true}
-            drawBackOnly={true}
-            material={{ normal: "rgb(0, 0, 0)", opacity: 1.0 }}
-            hovered={hovered}
-          />
+          <ReactMaterial isText={false} isHotSpot={true} drawBackOnly={true} material={{ normal: "rgb(0, 0, 0)", opacity: 1.0 }} hovered={hovered} />
         </ReactMesh>
       </group>
       {hotSpotTexts && text && (

package/src/renderers/react/react-image-material.tsx

@@ -1,6 +1,6 @@
+import { createSVG } from "abstract-image";
 import React from "react";
 import { suspend } from "suspend-react";
-import { createSVG } from "abstract-image";
 import { CanvasTexture, DoubleSide, PlaneGeometry, SRGBColorSpace, type Texture, TextureLoader } from "three";
 import type { Material, Image as A3dImage } from "../../abstract-3d.js";
 import type { MaterialState } from "./react-material.js";
@@ -48,15 +48,15 @@ export function ImageMaterial({
     materialState === "Error" && materialStateImages?.[ERROR_IMG_KEY]
       ? materialStateImages[ERROR_IMG_KEY]
       : image.type === "AbstractImage"
-      ? `data:image/svg+xml,${createSVG(image.image)}`
-      : image.url;
+        ? `data:image/svg+xml,${createSVG(image.image)}`
+        : image.url;
   const texture = suspend(urlIsSvg(url) ? loadSvg(url, filter) : loadNormal(url, filter), [url]) as Texture | null;
 
   return (
     <meshBasicMaterial
       color={getColor(selected, hovered, material, selectMat)}
       side={DoubleSide}
-      alphaTest={useAlphaTest ?? true ? 0.8 : undefined}
+      alphaTest={(useAlphaTest ?? true) ? 0.8 : undefined}
       map={texture}
       {...(material.opacity !== undefined && material.opacity < 1 ? { opacity: material.opacity } : materialDefaults)}
       transparent
@@ -77,8 +77,7 @@ function loadSvg(url: string, filter: TextureFilter): Promise<Texture | null> {
     const maxSize = 512;
     const img = new Image();
 
-    // eslint-disable-next-line consistent-return
-    img.onload = (): void => {
+    img.addEventListener("load", (): void => {
       const canvas = document.createElement("canvas");
       const imgW = img.naturalWidth;
       const imgH = img.naturalHeight;
@@ -108,9 +107,9 @@ function loadSvg(url: string, filter: TextureFilter): Promise<Texture | null> {
 
       res(texture);
       textureCache.set(url, texture);
-    };
+    });
 
-    img.onerror = () => res(null);
+    img.addEventListener("error", () => res(null));
     img.src = url;
   });
 }

package/src/renderers/react/react-material.tsx

@@ -27,15 +27,9 @@ export function ReactMaterial({
   readonly isHotSpot?: boolean;
   readonly drawBackOnly?: boolean;
 }): React.JSX.Element {
-  const mat = !materialState
-    ? material
-    : materialState === "Accept"
-    ? acceptMat
-    : materialState === "Error"
-    ? errorMar
-    : warningMat;
+  const mat = !materialState ? material : materialState === "Accept" ? acceptMat : materialState === "Error" ? errorMar : warningMat;
 
-  const opacity = material.opacity !== undefined ? material.opacity : materialDefaults.opacity!;
+  const opacity = material.opacity ?? materialDefaults.opacity!;
   if (isText) {
     return (
       <meshBasicMaterial
@@ -92,17 +86,6 @@ const textSelectMat: Material = { normal: "rgb(0, 26, 65)", opacity: 1.0, metaln
 const errorMar: Material = { normal: "#b82f3a", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
 const warningMat: Material = { normal: "rgb(240, 197, 48)", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
 
-export function getColor(
-  selected: boolean | undefined,
-  hovered: boolean | undefined,
-  mat: Material,
-  selectedMat: Material
-): string | undefined {
-  return selected
-    ? hovered
-      ? shade(-0.4, selectedMat.normal)
-      : selectedMat.normal
-    : hovered
-    ? shade(-0.4, mat.normal)
-    : mat.normal;
+export function getColor(selected: boolean | undefined, hovered: boolean | undefined, mat: Material, selectedMat: Material): string | undefined {
+  return selected ? (hovered ? shade(-0.4, selectedMat.normal) : selectedMat.normal) : hovered ? shade(-0.4, mat.normal) : mat.normal;
 }