abstract-3d 2.7.33 → 2.8.0

package/src/renderers/dxf/dxf-encoding/dxf-triangle.ts

@@ -4,20 +4,8 @@ import type { DxfColor } from "./dxf-color.js";
 import type { Handle } from "./dxf-common.js";
 import { dxfEncSolid } from "./dxf-solid.js";
 
-export const dxfEnc3DFaceTriangle = (
-  vec1: Vec3,
-  vec2: Vec3,
-  vec3: Vec3,
-  col: DxfColor,
-  handleRef: Handle,
-  blockRefHandle?: string
-): string => dxfEnc3DFace(vec1, vec2, vec3, vec3, col, handleRef, blockRefHandle);
+export const dxfEnc3DFaceTriangle = (vec1: Vec3, vec2: Vec3, vec3: Vec3, col: DxfColor, handleRef: Handle, blockRefHandle?: string): string =>
+  dxfEnc3DFace(vec1, vec2, vec3, vec3, col, handleRef, blockRefHandle);
 
-export const dxfEncSolidTriangle = (
-  vec1: Vec3,
-  vec2: Vec3,
-  vec3: Vec3,
-  col: DxfColor,
-  handleRef: Handle,
-  blockRefHandle?: string
-): string => dxfEncSolid(vec1, vec2, vec3, vec3, col, handleRef, blockRefHandle);
+export const dxfEncSolidTriangle = (vec1: Vec3, vec2: Vec3, vec3: Vec3, col: DxfColor, handleRef: Handle, blockRefHandle?: string): string =>
+  dxfEncSolid(vec1, vec2, vec3, vec3, col, handleRef, blockRefHandle);

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

@@ -1,15 +1,6 @@
-import {
-  type Box,
-  type Material,
-  type Vec3,
-  vec3,
-  vec3RotCombine,
-  vec3Scale,
-  vec3TransRot,
-  vec3Zero,
-} from "../../../abstract-3d.js";
-import type { Handle } from "../dxf-encoding/dxf-common.js";
+import { type Box, type Material, type Vec3, vec3, vec3RotCombine, vec3Scale, vec3TransRot, vec3Zero } from "../../../abstract-3d.js";
 import { dxfEnc3DFace } from "../dxf-encoding/dxf-3dface.js";
+import type { Handle } from "../dxf-encoding/dxf-common.js";
 
 export function dxfBox(b: Box, m: Material, parentPos: Vec3, parentRot: Vec3, handleRef: Handle): string {
   const pos = vec3TransRot(b.pos, parentPos, parentRot);

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

@@ -1,23 +1,8 @@
-import {
-  type Cone,
-  type Material,
-  type Vec3,
-  vec3,
-  vec3RotCombine,
-  vec3TransRot,
-  vec3Zero,
-} from "../../../abstract-3d.js";
+import { type Cone, type Material, type Vec3, vec3, vec3RotCombine, vec3TransRot, vec3Zero } from "../../../abstract-3d.js";
 import type { Handle } from "../dxf-encoding/dxf-common.js";
 import { dxfEnc3DFaceTriangle } from "../dxf-encoding/dxf-triangle.js";
 
-export function dxfCone(
-  c: Cone,
-  m: Material,
-  sides: number,
-  parentPos: Vec3,
-  parentRot: Vec3,
-  handleRef: Handle
-): string {
+export function dxfCone(c: Cone, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3, handleRef: Handle): string {
   let dxfString = "";
   const pos = vec3TransRot(c.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
@@ -37,8 +22,7 @@ export function dxfCone(
     if (i !== 0) {
       const prevBot = botVec3Array[i - 1]!;
       dxfString +=
-        dxfEnc3DFaceTriangle(botPos, prevBot, currBot, m.normal, handleRef) +
-        dxfEnc3DFaceTriangle(currBot, prevBot, topPos, m.normal, handleRef);
+        dxfEnc3DFaceTriangle(botPos, prevBot, currBot, m.normal, handleRef) + dxfEnc3DFaceTriangle(currBot, prevBot, topPos, m.normal, handleRef);
     }
     currentAngle += angleStep;
   }

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

@@ -1,27 +1,10 @@
-import {
-  type Cylinder,
-  type Material,
-  type Vec3,
-  equals,
-  vec3,
-  vec3RotCombine,
-  vec3Scale,
-  vec3TransRot,
-  vec3Zero,
-} from "../../../abstract-3d.js";
-import type { Handle } from "../dxf-encoding/dxf-common.js";
+import { type Cylinder, type Material, type Vec3, equals, vec3, vec3RotCombine, vec3Scale, vec3TransRot, vec3Zero } from "../../../abstract-3d.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";
 import { dxfPlane } from "./dxf-plane.js";
 
-export function dxfCylinder(
-  c: Cylinder,
-  m: Material,
-  sides: number,
-  parentPos: Vec3,
-  parentRot: Vec3,
-  handleRef: Handle
-): string {
+export function dxfCylinder(c: Cylinder, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3, handleRef: Handle): string {
   const pos = vec3TransRot(c.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
   const vec3tr = (x: number, y: number, z: number): Vec3 => vec3TransRot(vec3(x, y, z), pos, rot);
@@ -47,8 +30,7 @@ export function dxfCylinder(
     if (i !== 0 && prevBot && prevTop) {
       if (!c.open) {
         dxfString +=
-          dxfEnc3DFaceTriangle(botPos, prevBot, currBot, m.normal, handleRef) +
-          dxfEnc3DFaceTriangle(topPos, prevTop, currTop, m.normal, handleRef);
+          dxfEnc3DFaceTriangle(botPos, prevBot, currBot, m.normal, handleRef) + dxfEnc3DFaceTriangle(topPos, prevTop, currTop, m.normal, handleRef);
       }
       dxfString += dxfEnc3DFace(currBot, prevBot, prevTop, currTop, m.normal, handleRef);
     }

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

@@ -1,11 +1,4 @@
-import {
-  type Dimension,
-  dimensionIsOfTypeMesh,
-  type Vec3,
-  vec3Length,
-  vec3Sub,
-  vec3TransRot,
-} from "../../../abstract-3d.js";
+import { type Dimension, dimensionIsOfTypeMesh, type Vec3, vec3Length, vec3Sub, vec3TransRot } from "../../../abstract-3d.js";
 import type { Handle } from "../dxf-encoding/dxf-common.js";
 import { type DxfDimensionDefinition, dxfEncDimension } from "../dxf-encoding/dxf-dimension.js";
 

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

@@ -1,19 +1,9 @@
+import type { AbstractImage, Component } from "abstract-image";
+import { type ImageMesh, type Vec3, vec2Scale, vec3, vec3Add, vec3Rot, vec3RotCombine, vec3TransRot, vec3Zero } from "../../../abstract-3d.js";
+import type { DxfDynamicColor } from "../dxf-encoding/dxf-color.js";
 import { DEFAULT_CIRCLE_SIDE_COUNT, type Handle } from "../dxf-encoding/dxf-common.js";
 import { dxfEncLine } from "../dxf-encoding/dxf-line.js";
 import { dxfEncLwPolyline } from "../dxf-encoding/dxf-lwpolyline.js";
-import type { AbstractImage, Component } from "abstract-image";
-import type { DxfDynamicColor } from "../dxf-encoding/dxf-color.js";
-import {
-  type ImageMesh,
-  type Vec3,
-  vec2Scale,
-  vec3,
-  vec3Add,
-  vec3Rot,
-  vec3RotCombine,
-  vec3TransRot,
-  vec3Zero,
-} from "../../../abstract-3d.js";
 
 export function dxfImage(i: ImageMesh, parentPos: Vec3, parentRot: Vec3, handleRef: Handle): string {
   const half = vec2Scale(i.size, 0.5);

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,13 +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 { type Polygon, type Material, type Vec3, vec3RotCombine, vec3TransRot, vec3Zero } from "../../../abstract-3d.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;

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

@@ -1,14 +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 { type Shape, type Material, type Vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3 } from "../../../abstract-3d.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;

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);
-  const perspectiveRef = useRef<any>(undefined);
-  const orthographicRef = useRef<any>(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)));
 
@@ -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";

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;
 }