abstract-3d 2.3.5 → 2.3.8

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

@@ -1,8 +1,7 @@
 import React from "react";
-import { createSVG } from "abstract-image";
 import { ThreeEvent, useFrame } from "@react-three/fiber";
 import type { Group } from "three";
-import { Group as Group_1, Material, Mesh } from "../../abstract-3d.js";
+import { Group as Group_1 } from "../../abstract-3d.js";
 import { MaterialState, ReactMaterial } from "./react-material.js";
 import { ReactMesh } from "./react-mesh.js";
 
@@ -126,40 +125,33 @@ export function ReactGroup({
           useAlphaTest={useAlphaTest}
         />
       ))}
-      {g.meshes?.map((m, i) => (
-        <ReactMesh key={`mesh_${i}`} mesh={m}>
-          <ReactMaterial
-            material={getMaterial(m)}
-            id={id}
-            selectedIds={selectedIds}
-            isText={m.geometry.type === "Text"}
-            hoveredId={hoveredId || hoveredIdExternal}
+      {g.meshes?.map((m, i) => {
+        const hoveredIdFinal = hoveredId || hoveredIdExternal;
+        return (
+          <ReactMesh
+            key={`mesh_${i}`}
+            mesh={m}
             materialStateImages={materialStateImages}
-            disabled={disabled}
-            state={materialState}
             useAlphaTest={useAlphaTest}
-          />
-        </ReactMesh>
-      ))}
+            id={id}
+            hoveredId={hoveredIdFinal}
+            materialState={materialState}
+            selectedIds={selectedIds}
+          >
+            {m.geometry.type === "Image" ? undefined : (
+              <ReactMaterial
+                material={m.material}
+                id={id}
+                selectedIds={selectedIds}
+                isText={m.geometry.type === "Text"}
+                hoveredId={hoveredIdFinal}
+                disabled={disabled}
+                materialState={materialState}
+              />
+            )}
+          </ReactMesh>
+        );
+      })}
     </group>
   );
 }
-
-function getMaterial(mesh: Mesh): Material {
-  if(mesh.geometry.type !== "Image") {
-    return mesh.material;
-  }
-
-  switch(mesh.geometry.image.type) {
-    case "AbstractImage": {
-      const svg = createSVG(mesh.geometry.image.image);
-      const svgUrl = `data:image/svg+xml,${svg}`;
-      return {
-        ...mesh.material,
-        imageUrl: svgUrl,
-      };
-    }
-    default:
-      return mesh.material;
-  }
-}

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

@@ -0,0 +1,149 @@
+import React, { useEffect } from "react";
+import { suspend } from "suspend-react";
+import { createSVG } from "abstract-image";
+import { CanvasTexture, DoubleSide, PlaneGeometry, SRGBColorSpace, type Texture, TextureLoader } from "three";
+import { Material, Image as A3dImage } from "../../abstract-3d.js";
+import { ERROR_IMG_KEY, getColor, materialDefaults, MaterialState } from "./react-material.js";
+
+export const planeGeometry = new PlaneGeometry();
+
+export enum MinificationFilter {
+  Nearest = 1003,
+  Linear = 1006,
+  LinearMipmap = 1008,
+}
+
+export enum MagnificationFilter {
+  Nearest = 1003,
+  Linear = 1006,
+}
+
+export type TextureFilter = {
+  readonly min: MinificationFilter;
+  readonly mag: MagnificationFilter;
+};
+
+const filter: TextureFilter = { min: MinificationFilter.LinearMipmap, mag: MagnificationFilter.Linear };
+
+export function ImageMesh({
+  image,
+  materialStateImages,
+  material,
+  id,
+  useAlphaTest,
+  hoveredId,
+  selectedIds,
+  materialState,
+}: {
+  readonly image: A3dImage;
+  readonly material: Material;
+  readonly id: string | undefined;
+  readonly materialStateImages: Record<string, string> | undefined;
+  readonly hoveredId: string | undefined;
+  readonly selectedIds: Record<string, 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.image.type === "AbstractImage"
+      ? `data:image/svg+xml,${createSVG(image.image.image)}`
+      : image.image.url;
+
+  const texture = suspend(urlIsSvg(url) ? loadSvg(url, filter) : loadNormal(url, filter), [url]) as Texture | null;
+  useEffect(() => {
+    return () => {
+      if (texture) {
+        texture.dispose();
+      }
+    };
+  }, [texture]);
+
+  return (
+    <mesh
+      geometry={planeGeometry}
+      scale={[image.size.x, image.size.y, 1]}
+      position={[image.pos.x, image.pos.y, image.pos.z]}
+      rotation={[image.rot?.x ?? 0, image.rot?.y ?? 0, image.rot?.z ?? 0]}
+      castShadow
+      receiveShadow
+    >
+      <meshBasicMaterial
+        color={getColor(selectedIds, id, hoveredId, material)}
+        side={DoubleSide}
+        alphaTest={useAlphaTest ?? true ? 0.8 : undefined}
+        map={texture}
+        {...(material.opacity !== undefined && material.opacity < 1 ? { opacity: material.opacity } : materialDefaults)}
+        transparent
+      />
+    </mesh>
+  );
+}
+
+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> {
+  const maxSize = 4096;
+
+  return new Promise((res) => {
+    const img = new Image();
+
+    // eslint-disable-next-line consistent-return
+    img.onload = (): 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);
+    };
+
+    img.onerror = () => 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,38 +1,10 @@
-import React, { useEffect } from "react";
-import { suspend } from "suspend-react";
-import {
-  BackSide,
-  CanvasTexture,
-  type Color,
-  DoubleSide,
-  FrontSide,
-  type MaterialParameters,
-  SRGBColorSpace,
-  type Texture,
-  TextureLoader,
-} from "three";
+import React from "react";
+import { BackSide, DoubleSide, FrontSide, type MaterialParameters } from "three";
 import { Material } from "../../abstract-3d.js";
 import { shade } from "../../utils.js";
-import { mx_gradient_float } from "three/src/nodes/materialx/lib/mx_noise.js";
 
 const decreasedOpacity = 0.125;
 
-export enum MinificationFilter {
-  Nearest = 1003,
-  Linear = 1006,
-  LinearMipmap = 1008,
-};
-
-export enum MagnificationFilter {
-  Nearest = 1003,
-  Linear = 1006,
-}
-
-export type TextureFilter = {
-  readonly min: MinificationFilter;
-  readonly mag: MagnificationFilter;
-}
-
 export type MaterialState = "Accept" | "Error" | "Warning";
 export const ERROR_IMG_KEY = "error";
 
@@ -42,40 +14,29 @@ export function ReactMaterial({
   selectedIds,
   hoveredId,
   disabled,
-  materialStateImages,
-  state,
+  materialState,
   isText,
   isHotSpot,
   drawBackOnly,
-  useAlphaTest,
 }: {
   readonly material: Material;
   readonly id?: string;
   readonly hoveredId?: string | undefined;
   readonly selectedIds?: Record<string, boolean> | undefined;
   readonly disabled?: boolean;
-  readonly materialStateImages?: Record<string, string>;
-  readonly state?: MaterialState | undefined;
+  readonly materialState?: MaterialState | undefined;
   readonly isText: boolean;
   readonly isHotSpot?: boolean;
   readonly drawBackOnly?: boolean;
-  readonly useAlphaTest?: boolean;
 }): React.JSX.Element {
-  const mat =
-    !state || material.imageUrl === "UrlImage"
-      ? material
-      : state === "Accept"
-      ? acceptMat
-      : state === "Error"
-      ? errorMar
-      : warningMat;
-  const color = selectedIds?.[id]
-    ? hoveredId === id
-      ? shade(-0.4, selectMat.normal)
-      : selectMat.normal
-    : hoveredId === id
-    ? shade(-0.4, mat.normal)
-    : mat.normal;
+  const mat = !materialState
+    ? material
+    : materialState === "Accept"
+    ? acceptMat
+    : materialState === "Error"
+    ? errorMar
+    : warningMat;
+  const color = getColor(selectedIds, id, hoveredId, mat);
   const colorText = selectedIds?.[id]
     ? hoveredId === id
       ? shade(-0.4, textSelectMat.normal)
@@ -84,17 +45,6 @@ export function ReactMaterial({
     ? shade(-0.4, mat.normal)
     : mat.normal;
   const opacity = material.opacity !== undefined ? material.opacity : materialDefaults.opacity!;
-  if (material.imageUrl) {
-    return (
-      <TextureMaterial
-        url={state === "Error" ? materialStateImages?.[ERROR_IMG_KEY] ?? material.imageUrl : material.imageUrl}
-        color={color}
-        material={mat}
-        useAlphaTest={useAlphaTest}
-        filter={{ mag: MagnificationFilter.Linear, min: MinificationFilter.LinearMipmap }}
-      />
-    );
-  }
   if (isText) {
     return (
       <meshBasicMaterial
@@ -137,114 +87,31 @@ export function ReactMaterial({
     />
   );
 }
-const materialDefaults: MaterialParameters = { transparent: false, depthWrite: true, depthTest: true, opacity: 1.0 };
-
-function TextureMaterial({
-  url,
-  color,
-  material,
-  useAlphaTest = true,
-  filter = {
-    min: MinificationFilter.LinearMipmap,
-    mag: MagnificationFilter.Linear
-  },
-}: {
-  readonly url: string;
-  readonly color: string | Color | undefined;
-  readonly material: Material;
-  readonly useAlphaTest?: boolean;
-  readonly filter?: TextureFilter;
-}): React.JSX.Element {
-  const texture = suspend(urlIsSvg(url) ? loadSvg(url, filter) : loadNormal(url, filter), [url]) as Texture | null;
-  useEffect(() => {
-    return () => {
-      if (texture) {
-        texture.dispose();
-      }
-    };
-  }, [texture]);
-
-  return (
-    <meshBasicMaterial
-      color={color}
-      side={DoubleSide}
-      alphaTest={useAlphaTest ? 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> {
-  const maxSize = 4096;
-  
-  return new Promise((res) => {
-    const img = new Image();
-
-    // eslint-disable-next-line consistent-return
-    img.onload = ((): 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);
-    });
-
-    img.onerror = () => 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();
+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 };
 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(
+  selectedIds: Record<string, boolean> | undefined,
+  id: string | undefined,
+  hoveredId: string | undefined,
+  mat: Material
+): string | undefined {
+  return selectedIds?.[id ?? ""]
+    ? hoveredId === id
+      ? shade(-0.4, selectMat.normal)
+      : selectMat.normal
+    : hoveredId === id
+    ? shade(-0.4, mat.normal)
+    : mat.normal;
+}

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

@@ -41,6 +41,10 @@ import {
   equals,
 } from "../../abstract-3d.js";
 import { exhaustiveCheck } from "ts-exhaustive-check";
+import { ImageMesh, planeGeometry } from "./react-image.js";
+import { MaterialState } from "./react-material.js";
+
+// dummy
 
 extend({
   SphereGeometry,
@@ -64,7 +68,6 @@ const boxGeometry = new BoxGeometry();
 const cylinderGeometry = new CylinderGeometry(1, 1, 1, CYLINDER_SEGMENTS, 1);
 const cylinderGeometryOpen = new CylinderGeometry(1, 1, 1, CYLINDER_SEGMENTS, 1, true);
 const coneGeometry = new ConeGeometry(1, 1, 16, 1);
-const planeGeometry = new PlaneGeometry();
 const sphereGeometry = new SphereGeometry(1, 12, 12);
 export const euler = new Euler();
 export const vector3 = new Vector3();
@@ -73,9 +76,21 @@ export const quaternion = new Quaternion();
 export function ReactMesh({
   mesh,
   children,
+  id,
+  hoveredId,
+  selectedIds,
+  materialStateImages,
+  materialState,
+  useAlphaTest,
 }: {
   readonly mesh: Mesh;
   readonly children?: React.JSX.Element;
+  readonly id?: string | undefined;
+  readonly hoveredId?: string | undefined;
+  readonly selectedIds?: Record<string, boolean> | undefined;
+  readonly materialStateImages?: Record<string, string> | undefined;
+  readonly materialState?: MaterialState | undefined;
+  readonly useAlphaTest?: boolean | undefined;
 }): React.JSX.Element {
   switch (mesh.geometry.type) {
     case "Box": {
@@ -185,21 +200,19 @@ export function ReactMesh({
         );
       }
     }
-    case "Image": {
-      const { pos, size, rot } = mesh.geometry;
+    case "Image":
       return (
-        <mesh
-          geometry={planeGeometry}
-          scale={[size.x, size.y, 1]}
-          position={[pos.x, pos.y, pos.z]}
-          rotation={[rot?.x ?? 0, rot?.y ?? 0, rot?.z ?? 0]}
-          castShadow
-          receiveShadow
-        >
-          {children}
-        </mesh>
+        <ImageMesh
+          image={mesh.geometry}
+          materialStateImages={materialStateImages}
+          useAlphaTest={useAlphaTest}
+          id={id}
+          hoveredId={hoveredId}
+          selectedIds={selectedIds}
+          materialState={materialState}
+          material={mesh.material}
+        />
       );
-    }
     case "Plane": {
       const { pos, size, rot, holes } = mesh.geometry;
       const filteredHoles = holes?.filter((h) => !holeIsZero(h));

package/src/renderers/svg/svg-encoding.ts

@@ -173,6 +173,8 @@ export type EmbededImage =
   | { readonly type: "url"; readonly url: string }
   | { readonly type: "svg"; readonly svg: string };
 
+export const rawSvgPrefix = "data:image/svg+xml,";
+
 export const svgImage = (
   p: Vec2,
   size: Vec2,
@@ -183,11 +185,11 @@ export const svgImage = (
 ): string => {
   const matrix = svgTrsMatrix(p, rot, scale);
 
-  return `<g transform="${matrix}">${
+  return `<g transform="${matrix}">
+  ${background ? `<rect width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" fill="${background}"/>` : ""}
+  ${
     data.type === "url"
-      ? `${
-          background ? `<rect width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" fill="${background}"/>` : ""
-        }<image width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" href="${data.url}"/>`
+      ? `<image width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" href="${data.url}"/>`
       : `<svg width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}">${data.svg}</svg>`
   }</g>`;
 };

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

@@ -1,7 +1,7 @@
 import { createSVG } from "abstract-image";
 import { Image, Vec2, Vec3, vec2Scale, vec3TransRot, vec3RotCombine, vec3Zero, vec3 } from "../../../abstract-3d.js";
 import { zElem, zOrderElement, SvgOptions } from "./shared.js";
-import { svgImage } from "../svg-encoding.js";
+import { EmbededImage, rawSvgPrefix, svgImage } from "../svg-encoding.js";
 import { exhaustiveCheck } from "ts-exhaustive-check";
 
 export function image(
@@ -29,7 +29,27 @@ export function image(
       const img = svgImage(point(v4.x, v4.y), i.size, rot, { type: "svg", svg }, opts.background, scale);
       return [zElem(img, (v2.z + v4.z) / 2)];
     }
+    case "Url": {
+      const imageData = opts.imageDataByUrl?.[i.image.url];
+      const image: EmbededImage | undefined = imageData?.startsWith(rawSvgPrefix)
+        ? {
+            type: "svg",
+            svg: decodeURIComponent(imageData.slice(rawSvgPrefix.length)).replace(
+              /^\s*(<\?xml[^>]*\?>\s*)?(<!DOCTYPE[^>]*>\s*)?/i,
+              ""
+            ),
+          }
+        : i.image.url
+        ? { type: "url", url: imageData ?? i.image.url }
+        : undefined;
+
+      if (image) {
+        const img = svgImage(point(v4.x, v4.y), i.size, rot, image, opts.background);
+        return [zElem(img, (v2.z + v4.z) / 2)];
+      }
+      return [];
+    }
     default:
-      return exhaustiveCheck(i.image.type);
+      return exhaustiveCheck(i.image);
   }
 }

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

@@ -12,7 +12,7 @@ import {
   Hole,
 } from "../../../abstract-3d.js";
 import { gray, black, zElem, zOrderElement, SvgOptions } from "./shared.js";
-import { EmbededImage, svgImage, svgPolygon } from "../svg-encoding.js";
+import { svgPolygon } from "../svg-encoding.js";
 import { rgbGrayScale } from "../../../utils.js";
 
 export function plane(
@@ -34,24 +34,6 @@ export function plane(
   const v3 = vec3tr(half.x, half.y);
   const v4 = vec3tr(-half.x, half.y);
 
-  const imageData = material.imageUrl ? opts.imageDataByUrl?.[material.imageUrl] : undefined;
-  const image: EmbededImage | undefined = imageData?.startsWith(rawSvgPrefix)
-    ? {
-        type: "svg",
-        svg: decodeURIComponent(imageData.slice(rawSvgPrefix.length)).replace(
-          /^\s*(<\?xml[^>]*\?>\s*)?(<!DOCTYPE[^>]*>\s*)?/i,
-          ""
-        ),
-      }
-    : material.imageUrl
-    ? { type: "url", url: imageData ?? material.imageUrl }
-    : undefined;
-
-  if (image) {
-    const img = svgImage(point(v4.x, v4.y), p.size, rot, image, opts.background);
-    return [zElem(img, (v2.z + v4.z) / 2)];
-  }
-
   const points = [point(v1.x, v1.y), point(v2.x, v2.y), point(v3.x, v3.y), point(v4.x, v4.y)];
 
   const [strokeColor, fill, strokeThickness] = opts.only_stroke
@@ -64,5 +46,3 @@ export function plane(
     ),
   ];
 }
-
-const rawSvgPrefix = "data:image/svg+xml,";