abstract-3d 0.1.2

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

@@ -0,0 +1,208 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useEffect, useRef, useState } from "react";
+// import { OrbitControls, OrbitControlsProps } from "@react-three/drei/core/OrbitControls";
+// import { GizmoHelper, GizmoHelperProps } from "@react-three/drei/core/GizmoHelper";
+// import { GizmoViewcube } from "@react-three/drei/core/GizmoViewcube";
+// import { OrthographicCamera } from "@react-three/drei/core/OrthographicCamera";
+// import { PerspectiveCamera } from "@react-three/drei/core/PerspectiveCamera";
+// import { GizmoViewport } from "@react-three/drei/core/GizmoViewport";
+import {
+  GizmoHelperProps,
+  PerspectiveCamera,
+  OrthographicCamera,
+  OrbitControlsProps,
+  OrbitControls,
+  GizmoHelper,
+  GizmoViewcube,
+  GizmoViewport,
+} from "@react-three/drei";
+import { Vector3 } from "three";
+import { ThreeEvent, useFrame, useThree } from "@react-three/fiber";
+import { exhaustiveCheck } from "ts-exhaustive-check";
+import { View, Scene, Vec3, vec3 } from "../../abstract-3d";
+
+export type Camera = A3dPerspectiveCamera | A3dOrthographicCamera;
+export type CameraType = Camera["type"];
+
+export type A3dPerspectiveCamera = {
+  readonly type: "Perspective";
+  readonly near?: number;
+  readonly far?: number;
+  readonly fov?: number;
+};
+export type A3dOrthographicCamera = { readonly type: "Orthographic"; readonly near?: number; readonly far?: number };
+
+export type ControlsHelper = (Viewcube | Viewport) & { readonly props: Pick<GizmoHelperProps, "alignment" | "margin"> };
+type Viewcube = { readonly type: "Viewcube"; readonly viewcubeProps: GenericProps };
+type Viewport = { readonly type: "Viewport"; readonly viewportProps: GizmoViewportProps };
+
+const ControlsWrapper = (
+  props: OrbitControlsProps & { readonly setControls: (r: React.MutableRefObject<any>) => void }
+): JSX.Element => {
+  const ref = useRef<any>();
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    props.setControls(ref.current);
+  }, [ref.current]);
+  return <OrbitControls {...props} makeDefault ref={ref} />;
+};
+
+export function ReactCamera({
+  useAnimations,
+  camera,
+  view,
+  scene,
+  controlsHelper,
+  orbitContolsProps,
+}: {
+  readonly useAnimations: boolean;
+  readonly camera: Camera;
+  readonly view: View;
+  readonly scene: Scene;
+  readonly controlsHelper?: ControlsHelper;
+  readonly orbitContolsProps?: OrbitControlsProps;
+}): JSX.Element {
+  const [controls, setControls] = useState<any | null>(null);
+  const perspectiveRef = useRef<any | undefined>(undefined);
+  const orthographicRef = useRef<any | undefined>(undefined);
+  const viewPortAspect = useThree(({ viewport: { aspect } }) => aspect);
+
+  useEffect(() => {
+    const [posX, posY, posZ, size, sceneAspect] = (() => {
+      switch (view) {
+        case "front":
+          return [0, 0, 1, scene.size, scene.size.x / scene.size.y];
+        case "back":
+          return [0, 0, -1, scene.size, scene.size.x / scene.size.y];
+        case "top":
+          return [0, 1, 0, vec3(scene.size.x, scene.size.z, scene.size.y), scene.size.x / scene.size.z];
+        case "bottom":
+          return [0, -1, 0, vec3(scene.size.x, scene.size.z, scene.size.y), scene.size.x / scene.size.z];
+        case "right":
+          return [1, 0, 0, vec3(scene.size.z, scene.size.y, scene.size.x), scene.size.z / scene.size.y];
+        case "left":
+          return [-1, 0, 0, vec3(scene.size.z, scene.size.y, scene.size.x), scene.size.z / scene.size.y];
+        default:
+          return exhaustiveCheck(view);
+      }
+    })();
+
+    const dist = cameraDist(size, camera.type === "Perspective" ? camera.fov ?? 45 : 45);
+
+    if (camera.type === "Orthographic" && orthographicRef.current) {
+      const [left, right, top, bottom] =
+        sceneAspect > viewPortAspect
+          ? [-size.x / 2, size.x / 2, size.x / 2 / viewPortAspect, -size.x / 2 / viewPortAspect]
+          : [(-viewPortAspect * size.y) / 2, (viewPortAspect * size.y) / 2, size.y / 2, -size.y / 2];
+      orthographicRef.current.position.setX(posX * dist);
+      orthographicRef.current.position.setY(posY * dist);
+      orthographicRef.current.position.setZ(posZ * dist);
+      orthographicRef.current.left = left;
+      orthographicRef.current.right = right;
+      orthographicRef.current.bottom = bottom;
+      orthographicRef.current.top = top;
+      orthographicRef.current.updateProjectionMatrix();
+    } else if (camera.type === "Perspective" && perspectiveRef.current) {
+      perspectiveRef.current.position.setX(posX * dist);
+      perspectiveRef.current.position.setY(posY * dist);
+      perspectiveRef.current.position.setZ(posZ * dist);
+      perspectiveRef.current.updateProjectionMatrix();
+    }
+  }, [camera, viewPortAspect]);
+  // const prevScene = React.useRef(scene)
+  // useEffect(() => {
+  //   prevScene.current = scene;
+  // }, [scene]);
+
+  useFrame(() => {
+    // if (useAnimations && camera && prevScene.current !== scene) {
+    //   const [, , z] = cameraDist(scene);
+    //   vector3.set(camera.position.x, camera.position.y, z);
+    //   camera.position.lerp(vector3, 0.12);
+    //   ref.current.enabled = false;
+    //   invalidate();
+    // } else {
+    //   ref.current.enabled = true;
+    // }
+  });
+  return (
+    <>
+      <PerspectiveCamera
+        ref={perspectiveRef}
+        near={camera.near}
+        far={camera.far}
+        fov={camera.type === "Perspective" ? camera.fov : 75}
+        aspect={viewPortAspect}
+        manual={true}
+        makeDefault={camera.type === "Perspective"}
+      />
+      <OrthographicCamera
+        ref={orthographicRef}
+        up={[0, 1, 0]}
+        near={camera.near}
+        far={camera.far}
+        manual={true}
+        makeDefault={camera.type === "Orthographic"}
+      />
+      <ControlsWrapper {...orbitContolsProps} setControls={(c) => setControls(c.current)} />
+      {(() => {
+        switch (controlsHelper?.type) {
+          case "Viewcube":
+            return (
+              <GizmoHelper
+                {...controlsHelper.props}
+                onTarget={() => controls?.target as Vector3}
+                onUpdate={() => controls?.update?.()}
+              >
+                <GizmoViewcube {...(controlsHelper.viewcubeProps as any)} />
+              </GizmoHelper>
+            );
+          case "Viewport":
+            return (
+              <GizmoHelper
+                {...controlsHelper.props}
+                onTarget={() => controls?.target as Vector3}
+                onUpdate={() => controls?.update?.()}
+              >
+                <GizmoViewport {...(controlsHelper.viewportProps as any)} />
+              </GizmoHelper>
+            );
+          case undefined:
+          default:
+            return <></>;
+        }
+      })()}
+    </>
+  );
+}
+
+type GizmoViewportProps = JSX.IntrinsicElements["group"] & {
+  readonly axisColors?: readonly [string, string, string];
+  readonly axisScale?: readonly [number, number, number];
+  readonly labels?: readonly [string, string, string];
+  readonly axisHeadScale?: number;
+  readonly labelColor?: string;
+  readonly hideNegativeAxes?: boolean;
+  readonly hideAxisHeads?: boolean;
+  readonly disabled?: boolean;
+  readonly font?: string;
+  readonly onClick?: (e: ThreeEvent<MouseEvent>) => null;
+};
+
+type GenericProps = {
+  readonly font?: string;
+  readonly opacity?: number;
+  readonly color?: string;
+  readonly hoverColor?: string;
+  readonly textColor?: string;
+  readonly strokeColor?: string;
+  readonly onClick?: (e: ThreeEvent<MouseEvent>) => null;
+  readonly faces?: ReadonlyArray<string>;
+};
+
+export const cameraDist = (size: Vec3, fov: number): number =>
+  size.z * 0.5 + (size.x > size.y ? size.x : size.y) / (1 / 2 / Math.tan((Math.PI * fov) / 180 / 2));

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

@@ -0,0 +1,76 @@
+import { useFrame } from "@react-three/fiber";
+import React from "react";
+import { Group } from "three";
+import * as A3d from "../../abstract-3d";
+import { ReactMaterial } from "./react-material";
+import { ReactMesh } from "./react-mesh";
+
+export const ReactDimensions = React.memo(
+  ({
+    dimensions,
+    showDimensions,
+  }: {
+    readonly dimensions: A3d.Dimensions | undefined;
+    readonly showDimensions: boolean;
+  }): JSX.Element => {
+    const dimensionMaterial = React.useMemo(
+      () => (dimensions?.material ? <ReactMaterial material={dimensions?.material} /> : <></>),
+      []
+    );
+    return (
+      <>
+        {dimensions?.dimensions.map((dimension, i) => (
+          <ReactDimension key={i} d={dimension} visible={showDimensions}>
+            {dimensionMaterial}
+          </ReactDimension>
+        ))}
+      </>
+    );
+  }
+);
+
+export function ReactDimension({
+  d,
+  visible,
+  children,
+}: {
+  readonly d: A3d.Dimension;
+  readonly visible: boolean;
+  readonly children: JSX.Element;
+}): JSX.Element {
+  const ref = React.useRef<Group>(undefined!);
+  useFrame(({ camera }) => {
+    ref.current.visible =
+      visible &&
+      ((): boolean => {
+        const cameraPositions = {
+          [camera.position.x >= 0 ? "right" : "left"]: true,
+          [camera.position.y >= 0 ? "top" : "bottom"]: true,
+          [camera.position.z >= 0 ? "front" : "back"]: true,
+        };
+        if (d.views.every((cp) => cameraPositions[cp])) {
+          ref.current.position.set(d.pos.x, d.pos.y, d.pos.z);
+          ref.current.rotation.set(d.rot.x, d.rot.y, d.rot.z);
+          return true;
+        }
+        return false;
+      })();
+  });
+  return (
+    <group ref={ref}>
+      <DimensionMeshes meshes={d.meshes}>{children}</DimensionMeshes>
+    </group>
+  );
+}
+
+const DimensionMeshes = React.memo(
+  ({ meshes, children }: { readonly meshes: ReadonlyArray<A3d.Mesh>; readonly children: JSX.Element }): JSX.Element => (
+    <>
+      {meshes.map((m, i) => (
+        <ReactMesh key={i} mesh={m}>
+          {children}
+        </ReactMesh>
+      ))}
+    </>
+  )
+);

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

@@ -0,0 +1,133 @@
+import React from "react";
+import { Group } from "three";
+import { useFrame } from "@react-three/fiber";
+import * as A3d from "../../abstract-3d";
+import { MaterialState, ReactMaterial } from "./react-material";
+import { ReactMesh } from "./react-mesh";
+
+export function ReactGroup({
+  g,
+  materialStateImages,
+  hoveredId,
+  hoveredIdExternal,
+  selectedId,
+  hotSpotsActive,
+  activeComponents,
+  id,
+  rootData,
+  onClickGroup,
+  onContextMenuGroup,
+  setHoveredId,
+  createGroupKey,
+}: {
+  readonly g: A3d.Group;
+  readonly materialStateImages?: Record<string, string>;
+  readonly hoveredId: string | undefined;
+  readonly hoveredIdExternal: string | undefined;
+  readonly selectedId: string | undefined;
+  readonly hotSpotsActive: boolean;
+  readonly activeComponents: Record<string, MaterialState> | undefined;
+  readonly id: string | undefined;
+  readonly rootData: Record<string, string> | undefined;
+  readonly onClickGroup?: (
+    id: string | undefined,
+    rootData: Record<string, string> | undefined,
+    data: Record<string, string> | undefined
+  ) => void;
+  readonly onContextMenuGroup?: (
+    id: string,
+    rootData: Record<string, string> | undefined,
+    data: Record<string, string> | undefined,
+    left: number,
+    top: number
+  ) => void;
+  readonly setHoveredId: (id: string | undefined) => void;
+  readonly createGroupKey?: (
+    g: A3d.Group,
+    idx: number,
+    rootData: Record<string, string> | undefined,
+    id: string
+  ) => string;
+}): JSX.Element {
+  const ref = React.useRef<Group>(undefined!);
+  useFrame(({ invalidate }, delta) => {
+    if (g.animation) {
+      invalidate();
+      ref.current.rotation.x += (g.animation.transform.rot.x / g.animation.duration) * 1000 * delta;
+      ref.current.rotation.y += (g.animation.transform.rot.y / g.animation.duration) * 1000 * delta;
+      ref.current.rotation.z += (g.animation.transform.rot.z / g.animation.duration) * 1000 * delta;
+    } else {
+      ref.current.rotation.x = g.rot?.x ?? 0;
+      ref.current.rotation.y = g.rot?.y ?? 0;
+      ref.current.rotation.z = g.rot?.z ?? 0;
+      ref.current.position.x = g.pos.x;
+      ref.current.position.y = g.pos.y;
+      ref.current.position.z = g.pos.z;
+    }
+  });
+  const materialState = activeComponents?.[id ?? ""];
+  const disabled = hotSpotsActive && materialState !== "Accept";
+  return (
+    <group
+      rotation={[g.rot?.x ?? 0, g.rot?.y ?? 0, g.rot?.z ?? 0]}
+      position={[g.pos.x, g.pos.y, g.pos.z]}
+      ref={ref}
+      {...(id &&
+        !disabled && {
+          onClick: (e) => {
+            if (onClickGroup) {
+              e.stopPropagation();
+              onClickGroup(id, rootData, g.data);
+            }
+          },
+          onPointerOver: (e) => {
+            e.stopPropagation();
+            document.body.style.cursor = "pointer";
+            setHoveredId(id);
+          },
+          onPointerOut: (_e) => {
+            document.body.style.cursor = "auto";
+            setHoveredId(undefined);
+          },
+          onContextMenu: (e) => {
+            if (onContextMenuGroup) {
+              e.stopPropagation();
+              onContextMenuGroup(id, rootData, g.data, e.nativeEvent.x, e.nativeEvent.y);
+            }
+          },
+        })}
+    >
+      {g.groups?.map((g, i) => (
+        <ReactGroup
+          key={createGroupKey ? createGroupKey(g, i, rootData, id ?? "") : i}
+          g={g}
+          selectedId={selectedId}
+          hotSpotsActive={hotSpotsActive}
+          activeComponents={activeComponents}
+          materialStateImages={materialStateImages}
+          hoveredId={hoveredId}
+          hoveredIdExternal={hoveredIdExternal}
+          onClickGroup={onClickGroup}
+          onContextMenuGroup={onContextMenuGroup}
+          setHoveredId={setHoveredId}
+          id={id}
+          rootData={rootData}
+          createGroupKey={createGroupKey}
+        />
+      ))}
+      {g.meshes?.map((m, i) => (
+        <ReactMesh key={`mesh_${i}`} mesh={m}>
+          <ReactMaterial
+            material={m.material}
+            id={id}
+            selectedId={selectedId}
+            hoveredId={hoveredId || hoveredIdExternal}
+            materialStateImages={materialStateImages}
+            disabled={disabled}
+            state={materialState}
+          />
+        </ReactMesh>
+      ))}
+    </group>
+  );
+}

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

@@ -0,0 +1,116 @@
+import React from "react";
+// import { Html } from "@react-three/drei/web/Html";
+import { Html } from "@react-three/drei";
+import * as A3d from "../../abstract-3d";
+import { ReactMesh } from "./react-mesh";
+import { ReactMaterial } from "./react-material";
+
+export interface HotSpotInfo {
+  readonly replaceId: string;
+  readonly replaceFromId: string;
+  readonly replaceOutlet: string;
+  readonly replaceToId: string;
+  readonly replaceInlet: string;
+}
+
+export const ReactHotSpots = React.memo(
+  ({
+    hotSpots,
+    showHotSpotTexts,
+    hotSpotTexts,
+    hotSpotZAdjPos,
+    activeHotSpots,
+    hoveredId,
+    onClickHotSpot,
+    setHoveredId,
+  }: {
+    readonly hotSpots?: ReadonlyArray<A3d.HotSpot>;
+    readonly showHotSpotTexts: boolean;
+    readonly hotSpotZAdjPos: number;
+    readonly hotSpotTexts?: Record<string, string>;
+    readonly activeHotSpots: Record<string, HotSpotInfo> | undefined;
+    readonly hoveredId: string | undefined;
+    readonly onClickHotSpot?: (hotSpot: HotSpotInfo) => void;
+    readonly setHoveredId: (id: string | undefined) => void;
+  }): JSX.Element => {
+    return (
+      <>
+        {hotSpots?.map((h) => (
+          <ReactHotSpot
+            key={h.id}
+            h={h}
+            hotSpotZAdjPos={hotSpotZAdjPos}
+            activeHotSpots={activeHotSpots}
+            hotSpotTexts={hotSpotTexts}
+            hoveredId={hoveredId}
+            onClickHotSpot={onClickHotSpot}
+            setHoveredId={setHoveredId}
+            showHotSpotTexts={showHotSpotTexts}
+          />
+        ))}
+      </>
+    );
+  }
+);
+
+export function ReactHotSpot({
+  h,
+  hotSpotZAdjPos,
+  showHotSpotTexts,
+  hotSpotTexts,
+  activeHotSpots,
+  hoveredId,
+  onClickHotSpot,
+  setHoveredId,
+}: {
+  readonly h: A3d.HotSpot;
+  readonly hotSpotZAdjPos: number;
+  readonly showHotSpotTexts: boolean;
+  readonly hotSpotTexts?: Record<string, string>;
+  readonly activeHotSpots: Record<string, HotSpotInfo> | undefined;
+  readonly hoveredId: string | undefined;
+  readonly onClickHotSpot?: (hotSpot: HotSpotInfo) => void;
+  readonly setHoveredId: (id: string | undefined) => void;
+}): JSX.Element {
+  const hotSpot = activeHotSpots ? activeHotSpots[h.id] : undefined;
+  const hsPos = h.mesh.geometry.type === "Box" ? h.mesh.geometry.pos : A3d.vec3Zero;
+  const text = hotSpotTexts?.[h.id];
+  return (
+    <>
+      <group
+        visible={hotSpot !== undefined}
+        {...(hotSpot && {
+          onClick: (e) => {
+            if (onClickHotSpot) {
+              e.stopPropagation();
+              onClickHotSpot(hotSpot);
+            }
+          },
+          onPointerOver: (e) => {
+            e.stopPropagation();
+            document.body.style.cursor = "pointer";
+            setHoveredId(h.id);
+          },
+          onPointerOut: (_e) => {
+            document.body.style.cursor = "auto";
+            setHoveredId(undefined);
+          },
+          onContextMenu: (e) => {
+            e.stopPropagation();
+          },
+        })}
+      >
+        <ReactMesh mesh={h.mesh}>
+          <ReactMaterial id={h.id} material={h.mesh.material} hoveredId={hoveredId} />
+        </ReactMesh>
+      </group>
+      {hotSpotTexts && text && (
+        <Html position={[hsPos.x, hsPos.y, hotSpotZAdjPos]} center>
+          <div className={`air-states-container ${showHotSpotTexts ? "" : "air-states-container-hidden"}`}>
+            <span className="air-states-text">{text}</span>
+          </div>
+        </Html>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,159 @@
+import React from "react";
+import { Color, DoubleSide, MaterialParameters, SRGBColorSpace, Texture, TextureLoader } from "three";
+import { suspend } from "suspend-react";
+import * as A3d from "../../abstract-3d";
+
+const decreasedOpacity = 0.2;
+
+export type MaterialState = "Accept" | "Error" | "Warning";
+export const ERROR_IMG_KEY = "error";
+
+export function ReactMaterial({
+  material,
+  id = "",
+  selectedId,
+  hoveredId,
+  disabled,
+  materialStateImages,
+  state,
+}: {
+  readonly material: A3d.Material;
+  readonly id?: string;
+  readonly hoveredId?: string | undefined;
+  readonly selectedId?: string | undefined;
+  readonly disabled?: boolean;
+  readonly materialStateImages?: Record<string, string>;
+  readonly state?: MaterialState | undefined;
+}): JSX.Element {
+  const mat =
+    !state || material.image?.type === "UrlImage"
+      ? material
+      : state === "Accept"
+      ? acceptMaterial
+      : state === "Error"
+      ? errorMaterial
+      : warningMaterial;
+  const color = selectedId === id ? mat.selected : hoveredId === id ? mat.hover : mat.normal;
+  const opacity = material.opacity !== undefined ? material.opacity : materialDefaults.opacity!;
+  if (material.image?.type === "UrlImage") {
+    return (
+      <TextureMaterial
+        url={state === "Error" ? materialStateImages?.[ERROR_IMG_KEY] ?? material.image.url : material.image.url}
+        color={color}
+        material={mat}
+      />
+    );
+  }
+
+  switch (mat.type) {
+    case "Basic":
+      return (
+        <meshBasicMaterial
+          color={color}
+          side={DoubleSide}
+          transparent
+          {...(opacity < 1 ? { opacity } : materialDefaults)}
+        />
+      );
+    case "Phong":
+      return (
+        <meshPhongMaterial
+          color={color}
+          shininess={(mat.shininess ?? 70) * 2}
+          side={DoubleSide}
+          {...(opacity < 1 || disabled
+            ? { transparent: true, opacity: disabled ? opacity * decreasedOpacity : opacity }
+            : materialDefaults)}
+        />
+      );
+    // return (
+    //   <meshStandardMaterial
+    //     color={color}
+    //     roughness={0.45}
+    //     metalness={0.55}
+    //     side={DoubleSide}
+    //     {...(mat.opacity < 1 || disabled
+    //       ? { transparent: true, opacity: disabled ? mat.opacity * decreasedOpacity : mat.opacity }
+    //       : materialDefaults)}
+    //   />
+    // );
+    case "Lambert":
+    default:
+      return (
+        <meshLambertMaterial
+          color={color}
+          side={DoubleSide}
+          {...(opacity < 1 || disabled
+            ? { transparent: true, opacity: disabled ? opacity * decreasedOpacity : opacity }
+            : materialDefaults)}
+        />
+      );
+  }
+}
+
+function TextureMaterial({
+  url,
+  color,
+  material,
+}: {
+  readonly url: string;
+  readonly color: string | Color | undefined;
+  readonly material: A3d.Material;
+}): JSX.Element {
+  const texture = suspend(
+    new Promise((res) =>
+      textureLoader.load(
+        url,
+        (data) => {
+          data.colorSpace = SRGBColorSpace;
+          res(data);
+        },
+        undefined,
+        () => res(null)
+      )
+    ),
+    [url]
+  ) as Texture | null;
+
+  return (
+    <meshBasicMaterial
+      color={color}
+      side={DoubleSide}
+      alphaTest={0.8}
+      map={texture}
+      {...(material.opacity !== undefined && material.opacity < 1 ? { opacity: material.opacity } : materialDefaults)}
+      transparent
+    />
+  );
+}
+
+const textureLoader = new TextureLoader();
+
+const materialDefaults: MaterialParameters = { transparent: false, opacity: 1.0, depthWrite: true, depthTest: true };
+
+const acceptMaterial: A3d.Material = {
+  type: "Phong",
+  normal: "rgb(0,148,91)",
+  hover: "rgb(1,88,55)",
+  selected: "rgb(1,88,55)",
+  opacity: 1.0,
+  shininess: 50,
+};
+
+const errorMaterial: A3d.Material = {
+  type: "Phong",
+  normal: "#b82f3a",
+  hover: "#991c31",
+  selected: "#991c31",
+  opacity: 1.0,
+  shininess: 50,
+};
+
+const warningMaterial: A3d.Material = {
+  type: "Phong",
+  normal: "rgb(240, 197, 48)",
+  hover: "rgb(221, 181, 38)",
+  selected: "rgb(182, 147, 20)",
+  opacity: 1.0,
+  shininess: 50,
+};