abstract-3d 3.1.1 → 4.0.0-beta.0

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

@@ -1,202 +0,0 @@
-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 type { ReactPopover } from "./react-types.js";
-
-export const ReactGroup = React.memo(ReactGroupBase, groupPropsEqual);
-
-function ReactGroupBase({
-  g,
-  materialStateImages,
-  hoveredIdsExternal,
-  selectedIds,
-  relationsActive,
-  activeComponents,
-  useAlphaTest,
-  id,
-  rootData,
-  hoveredParent,
-  onClickGroup,
-  onHoverGroup,
-  onContextMenuGroup,
-  createGroupKey,
-  getTooltips,
-}: ReactGroupProps): React.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 [hovered, setHovered] = React.useState<boolean>(false);
-  // Stable so the memoized child groups below can skip rendering
-  const onChildHoverGroup = React.useCallback<NonNullable<ReactGroupProps["onHoverGroup"]>>(
-    (hId, rData, data, e) => {
-      setHovered(hId !== undefined);
-      onHoverGroup?.(hId, rData, data, e);
-    },
-    [onHoverGroup]
-  );
-  // 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 ?? ""];
-
-  const materialState = activeComponents?.[id ?? ""];
-  const disabled = relationsActive && 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, e);
-            }
-          },
-          onPointerOver: (e) => {
-            e.stopPropagation();
-            document.body.style.cursor = "pointer";
-            if (onHoverGroup) {
-              onHoverGroup(id, rootData, g.data, e);
-            }
-            setHovered(true);
-          },
-          onPointerOut: (e) => {
-            document.body.style.cursor = "auto";
-            setHovered(false);
-            if (onHoverGroup) {
-              onHoverGroup(undefined, undefined, undefined, e);
-            }
-          },
-          onContextMenu: (e) => {
-            if (onContextMenuGroup) {
-              e.stopPropagation();
-              onContextMenuGroup(id, rootData, g.data, e.nativeEvent.x, e.nativeEvent.y, e);
-            }
-          },
-        })}
-    >
-      {g.groups?.map((g, i) => (
-        <ReactGroup
-          key={createGroupKey ? createGroupKey(g, i, rootData, id ?? "") : i}
-          g={g}
-          selectedIds={selectedIds}
-          relationsActive={relationsActive}
-          activeComponents={activeComponents}
-          materialStateImages={materialStateImages}
-          hoveredIdsExternal={hoveredIdsExternal}
-          hoveredParent={hoveredFinal}
-          onClickGroup={onClickGroup}
-          onHoverGroup={onChildHoverGroup}
-          onContextMenuGroup={onContextMenuGroup}
-          getTooltips={getTooltips}
-          id={id}
-          rootData={rootData}
-          createGroupKey={createGroupKey}
-          useAlphaTest={useAlphaTest}
-        />
-      ))}
-      {g.meshes?.map((m, i) => (
-        <ReactMesh key={i} mesh={m}>
-          {m.geometry.type === "Image" ? (
-            <ImageMaterial
-              image={m.geometry.image}
-              materialStateImages={materialStateImages}
-              material={m.material}
-              useAlphaTest={useAlphaTest}
-              hovered={hoveredFinal}
-              materialState={materialState}
-              selected={selected}
-            />
-          ) : (
-            <ReactMaterial
-              material={m.material}
-              selected={selected}
-              isText={m.geometry.type === "Text"}
-              hovered={hoveredFinal}
-              disabled={disabled}
-              materialState={materialState}
-            />
-          )}
-        </ReactMesh>
-      ))}
-      {hovered &&
-        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" }}>
-            {p.content}
-          </Html>
-        ))}
-    </group>
-  );
-}
-
-export type ReactGroupProps = {
-  readonly g: Group_1;
-  readonly materialStateImages?: Record<string, string>;
-  readonly hoveredIdsExternal: ReadonlyArray<string> | undefined;
-  readonly hoveredParent?: boolean;
-  readonly selectedIds: Record<string, boolean> | undefined;
-  /** Relations are active, e.g. to pick one to insert a component on, so only the groups whose material state is Accept can be clicked */
-  readonly relationsActive: boolean;
-  readonly useAlphaTest?: 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,
-    e: ThreeEvent<MouseEvent>
-  ) => void;
-  readonly onHoverGroup?: (
-    id: string | undefined,
-    rootData: Record<string, string> | undefined,
-    data: Record<string, string> | undefined,
-    e: ThreeEvent<MouseEvent>
-  ) => void;
-  readonly onContextMenuGroup?: (
-    id: string,
-    rootData: Record<string, string> | undefined,
-    data: Record<string, string> | undefined,
-    left: number,
-    top: number,
-    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;
-};
-
-/** Shallow compare, except that selectedIds and activeComponents are only read at the group's own id (nested groups share it). */
-export function groupPropsEqual(prev: ReactGroupProps, next: ReactGroupProps): boolean {
-  const id = next.id ?? "";
-  if (prev.selectedIds?.[id] !== next.selectedIds?.[id] || prev.activeComponents?.[id] !== next.activeComponents?.[id]) {
-    return false;
-  }
-  const keys = Object.keys(next) as Array<keyof ReactGroupProps>;
-  return (
-    keys.length === Object.keys(prev).length &&
-    keys.every((key) => key === "selectedIds" || key === "activeComponents" || Object.is(prev[key], next[key]))
-  );
-}

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

@@ -1,139 +0,0 @@
-import { createSVG } from "abstract-image";
-import React from "react";
-import { suspend } from "suspend-react";
-import { CanvasTexture, DoubleSide, FrontSide, PlaneGeometry, SRGBColorSpace, type Texture, TextureLoader } from "three";
-import type { Material, Image as A3dImage } from "../../abstract-3d.js";
-import type { MaterialState } from "./react-material.js";
-import { ERROR_IMG_KEY, getColor, materialDefaults, selectMat } from "./react-material.js";
-
-export const planeGeometry = new PlaneGeometry();
-
-// oxlint-disable-next-line no-redeclare -- value + type share a name, the standard enum-replacement pattern (erasableSyntaxOnly forbids enum)
-export const MinificationFilter = {
-  Nearest: 1003,
-  Linear: 1006,
-  LinearMipmap: 1008,
-} as const;
-export type MinificationFilter = (typeof MinificationFilter)[keyof typeof MinificationFilter];
-
-// oxlint-disable-next-line no-redeclare -- value + type share a name, the standard enum-replacement pattern (erasableSyntaxOnly forbids enum)
-export const MagnificationFilter = {
-  Nearest: 1003,
-  Linear: 1006,
-} as const;
-export type MagnificationFilter = (typeof MagnificationFilter)[keyof typeof MagnificationFilter];
-
-export type TextureFilter = {
-  readonly min: MinificationFilter;
-  readonly mag: MagnificationFilter;
-};
-
-const filter: TextureFilter = { min: MinificationFilter.LinearMipmap, mag: MagnificationFilter.Linear };
-const textureCache: Map<string, Texture | null> = new Map();
-
-export function ImageMaterial({
-  image,
-  materialStateImages,
-  material,
-  useAlphaTest,
-  hovered,
-  selected,
-  materialState,
-}: {
-  readonly image: A3dImage;
-  readonly material: Material;
-  readonly materialStateImages: Record<string, string> | undefined;
-  readonly hovered: boolean;
-  readonly selected: boolean | undefined;
-  readonly useAlphaTest: boolean | undefined;
-  readonly materialState: MaterialState | undefined;
-}): React.JSX.Element {
-  const url =
-    materialState === "Error" && materialStateImages?.[ERROR_IMG_KEY]
-      ? materialStateImages[ERROR_IMG_KEY]
-      : image.type === "AbstractImage"
-        ? `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={material.backfaceCulling ? FrontSide : DoubleSide}
-      alphaTest={(useAlphaTest ?? true) ? 0.8 : undefined}
-      map={texture}
-      {...(material.opacity !== undefined && material.opacity < 1 ? { opacity: material.opacity } : materialDefaults)}
-      transparent
-    />
-  );
-}
-
-function urlIsSvg(url: string): boolean {
-  return url.startsWith("data:image/svg+xml") || url.endsWith(".svg") || url.includes(".svg?");
-}
-
-function loadSvg(url: string, filter: TextureFilter): Promise<Texture | null> {
-  if (textureCache.has(url)) {
-    return Promise.resolve(textureCache.get(url) ?? null);
-  }
-
-  return new Promise((res) => {
-    const maxSize = 512;
-    const img = new Image();
-
-    img.addEventListener("load", (): void => {
-      const canvas = document.createElement("canvas");
-      const imgW = img.naturalWidth;
-      const imgH = img.naturalHeight;
-      const width = imgW >= imgH ? maxSize : maxSize * (imgW / imgH);
-      const height = imgH >= imgW ? maxSize : maxSize * (imgH / imgW);
-
-      canvas.width = width;
-      canvas.height = height;
-
-      const ctx = canvas.getContext("2d");
-      if (!ctx) {
-        return res(null);
-      }
-
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.imageSmoothingEnabled = true;
-      ctx.imageSmoothingQuality = "high";
-      ctx.drawImage(img, 0, 0, width, height);
-
-      const texture = new CanvasTexture(canvas);
-      texture.colorSpace = SRGBColorSpace;
-      texture.minFilter = filter.min;
-      texture.magFilter = filter.mag;
-      texture.generateMipmaps = filter.min === MinificationFilter.LinearMipmap;
-      texture.anisotropy = 4;
-      texture.needsUpdate = true;
-
-      res(texture);
-      textureCache.set(url, texture);
-    });
-
-    img.addEventListener("error", () => res(null));
-    img.src = url;
-  });
-}
-
-function loadNormal(url: string, filter: TextureFilter): Promise<Texture | null> {
-  return new Promise((res) =>
-    textureLoader.load(
-      url,
-      (data) => {
-        data.colorSpace = SRGBColorSpace;
-        data.minFilter = filter.min;
-        data.magFilter = filter.mag;
-        data.generateMipmaps = filter.min === MinificationFilter.LinearMipmap;
-        data.anisotropy = 4;
-        res(data);
-      },
-      undefined,
-      () => res(null)
-    )
-  );
-}
-
-const textureLoader = new TextureLoader();

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

@@ -1,91 +0,0 @@
-import React from "react";
-import { BackSide, DoubleSide, FrontSide, type MaterialParameters } from "three";
-import type { Material } from "../../abstract-3d.js";
-import { shade } from "../../utils.js";
-
-const decreasedOpacity = 0.125;
-
-export type MaterialState = "Accept" | "Error" | "Warning";
-export const ERROR_IMG_KEY = "error";
-
-export function ReactMaterial({
-  material,
-  selected,
-  hovered,
-  disabled,
-  materialState,
-  isText,
-  isRelation,
-  drawBackOnly,
-}: {
-  readonly material: Material;
-  readonly hovered?: boolean | undefined;
-  readonly selected?: boolean;
-  readonly disabled?: boolean;
-  readonly materialState?: MaterialState | undefined;
-  readonly isText: boolean;
-  readonly isRelation?: boolean;
-  readonly drawBackOnly?: boolean;
-}): React.JSX.Element {
-  const mat = !materialState ? material : materialState === "Accept" ? acceptMat : materialState === "Error" ? errorMar : warningMat;
-
-  const opacity = material.opacity ?? materialDefaults.opacity!;
-  if (isText) {
-    return (
-      <meshBasicMaterial
-        key={`mesh_material_text`}
-        color={getColor(selected, hovered, mat, textSelectMat)}
-        side={FrontSide}
-        transparent
-        {...(opacity < 1 ? { opacity } : materialDefaults)}
-      />
-    );
-  }
-  if (isRelation) {
-    return (
-      <meshBasicMaterial
-        key="mesh_material_relation"
-        color={getColor(selected, hovered, mat, selectMat)}
-        side={drawBackOnly === true ? BackSide : DoubleSide}
-        depthTest={true}
-        depthWrite={true}
-        transparent={false}
-        opacity={1.0}
-      />
-    );
-  }
-  return (
-    <meshStandardMaterial
-      key={`mesh_material_standard_${mat.normal}_${mat.metalness}_${mat.opacity}_${mat.roughness}_${material.backfaceCulling}`}
-      color={getColor(selected, hovered, mat, selectMat)}
-      roughness={mat.roughness}
-      metalness={mat.metalness}
-      side={material.backfaceCulling ? FrontSide : DoubleSide}
-      {...(opacity < 1 || disabled
-        ? {
-            transparent: true,
-            depthWrite: false,
-            opacity: disabled ? opacity * decreasedOpacity : opacity,
-            depthTest: true,
-          }
-        : materialDefaults)}
-    />
-  );
-}
-
-export const materialDefaults: MaterialParameters = {
-  transparent: false,
-  depthWrite: true,
-  depthTest: true,
-  opacity: 1.0,
-};
-
-const acceptMat: Material = { normal: "rgb(0,148,91)", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
-export const selectMat: Material = { normal: "rgb(14,82,184)", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
-const textSelectMat: Material = { normal: "rgb(0, 26, 65)", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
-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;
-}