abstract-3d 0.1.26 → 0.2.0

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

@@ -1,4 +1,5 @@
 import * as A3D from "../../../abstract-3d";
+import { color } from "../color";
 import { dxf3DFACE } from "../dxf-encoding";
 
 const chunkSize = 4;
@@ -8,10 +9,11 @@ export function dxfPolygon(s: A3D.Shape, m: A3D.Material, parentPos: A3D.Vec3, p
   const pos = A3D.vec3TransRot(s.pos, parentPos, parentRot);
   const rot = A3D.vec3RotCombine(parentRot, s.rot ?? A3D.vec3Zero);
   const points = s.points.map((p) => A3D.vec3TransRot(A3D.vec3(p.x, p.y, 0), pos, rot));
+  const mat = color(m.normal);
   let i = 0;
   if (points.length >= chunkSize) {
     for (i; i < points.length; i += chunkSize) {
-      polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 3]!, m.dxf);
+      polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 3]!, mat);
     }
   }
 
@@ -19,13 +21,13 @@ export function dxfPolygon(s: A3D.Shape, m: A3D.Material, parentPos: A3D.Vec3, p
     const lastArrayLength = points.length - i;
     switch (lastArrayLength) {
       case 1:
-        polygonString += dxf3DFACE(points[i - 2]!, points[i - 1]!, points[i]!, points[i]!, m.dxf);
+        polygonString += dxf3DFACE(points[i - 2]!, points[i - 1]!, points[i]!, points[i]!, mat);
         break;
       case 2:
-        polygonString += dxf3DFACE(points[i - 1]!, points[i]!, points[i + 1]!, points[i + 1]!, m.dxf);
+        polygonString += dxf3DFACE(points[i - 1]!, points[i]!, points[i + 1]!, points[i + 1]!, mat);
         break;
       case 3:
-        polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 2]!, m.dxf);
+        polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 2]!, mat);
         break;
       default:
         break;

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

@@ -18,7 +18,7 @@ export const ReactDimensions = React.memo(
     readonly sceneCenter: A3d.Vec3 | undefined;
   }): JSX.Element => {
     const dimensionMaterial = React.useMemo(
-      () => (dimensions?.material ? <ReactMaterial material={dimensions?.material} /> : <></>),
+      () => (dimensions?.material ? <ReactMaterial isText={true} material={dimensions?.material} /> : <></>),
       []
     );
     return (

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

@@ -121,6 +121,7 @@ export function ReactGroup({
             material={m.material}
             id={id}
             selectedId={selectedId}
+            isText={m.geometry.type === "Text"}
             hoveredId={hoveredId || hoveredIdExternal}
             materialStateImages={materialStateImages}
             disabled={disabled}

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

@@ -101,7 +101,7 @@ export function ReactHotSpot({
         })}
       >
         <ReactMesh mesh={h.mesh}>
-          <ReactMaterial id={h.id} material={h.mesh.material} hoveredId={hoveredId} />
+          <ReactMaterial id={h.id} isText={false} material={h.mesh.material} hoveredId={hoveredId} />
         </ReactMesh>
       </group>
       {hotSpotTexts && text && (

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

@@ -2,6 +2,7 @@ import React from "react";
 import { Color, DoubleSide, MaterialParameters, SRGBColorSpace, Texture, TextureLoader } from "three";
 import { suspend } from "suspend-react";
 import * as A3d from "../../abstract-3d";
+import { shade } from "../shared";
 
 const decreasedOpacity = 0.2;
 
@@ -16,6 +17,7 @@ export function ReactMaterial({
   disabled,
   materialStateImages,
   state,
+  isText,
 }: {
   readonly material: A3d.Material;
   readonly id?: string;
@@ -24,16 +26,24 @@ export function ReactMaterial({
   readonly disabled?: boolean;
   readonly materialStateImages?: Record<string, string>;
   readonly state?: MaterialState | undefined;
+  readonly isText: boolean;
 }): JSX.Element {
   const mat =
     !state || material.image?.type === "UrlImage"
       ? material
       : state === "Accept"
-      ? acceptMaterial
+      ? acceptMat
       : state === "Error"
-      ? errorMaterial
-      : warningMaterial;
-  const color = selectedId === id ? mat.selected : hoveredId === id ? mat.hover : mat.normal;
+      ? errorMar
+      : warningMat;
+  const color =
+    selectedId === id
+      ? hoveredId === id
+        ? shade(-0.4, selectMat.normal)
+        : selectMat.normal
+      : hoveredId === id
+      ? shade(-0.4, mat.normal)
+      : mat.normal;
   const opacity = material.opacity !== undefined ? material.opacity : materialDefaults.opacity!;
   if (material.image?.type === "UrlImage") {
     return (
@@ -44,51 +54,27 @@ export function ReactMaterial({
       />
     );
   }
-
-  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)}
-        />
-      );
+  if (isText) {
+    return (
+      <meshBasicMaterial
+        color={color}
+        side={DoubleSide}
+        transparent
+        {...(opacity < 1 ? { opacity } : materialDefaults)}
+      />
+    );
   }
+  return (
+    <meshStandardMaterial
+      color={color}
+      roughness={mat.roughness}
+      metalness={mat.metalness}
+      side={DoubleSide}
+      {...(opacity < 1 || disabled
+        ? { transparent: true, opacity: disabled ? opacity * decreasedOpacity : opacity }
+        : materialDefaults)}
+    />
+  );
 }
 
 function TextureMaterial({
@@ -131,29 +117,7 @@ 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,
-};
+const acceptMat: A3d.Material = { normal: "rgb(0,148,91)", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
+const selectMat: A3d.Material = { normal: "rgb(14,82,184)", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
+const errorMar: A3d.Material = { normal: "#b82f3a", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
+const warningMat: A3d.Material = { normal: "rgb(240, 197, 48)", opacity: 1.0, metalness: 0.5, roughness: 0.5 };

package/src/renderers/shared.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import {
   Vec3,
   View,
@@ -56,8 +57,142 @@ export function parseRgb(color: string): { readonly r: number; readonly g: numbe
   return rgb;
 }
 
-export function rgbGray(color: string): string {
+export function parseColorString(s: string): { readonly r: number; readonly g: number; readonly b: number } {
+  if (s.startsWith("#")) {
+    if (s.length === 9) {
+      return {
+        // a: parseInt(s.slice(1, 3), 16),
+        r: parseInt(s.slice(3, 5), 16),
+        g: parseInt(s.slice(5, 7), 16),
+        b: parseInt(s.slice(7, 9), 16),
+      };
+    }
+    return { r: parseInt(s.slice(1, 3), 16), g: parseInt(s.slice(3, 5), 16), b: parseInt(s.slice(5, 7), 16) };
+  }
+  if (s.startsWith("rgb")) {
+    const [r, g, b, _a] = s.split("(")[1]?.split(")")[0]?.split(",") ?? [];
+    return { r: Number(r ?? 0), g: Number(g ?? 0), b: Number(b ?? 0) };
+  }
+  if (s === "white") {
+    return white;
+  }
+  if (s === "black") {
+    return black;
+  }
+  return white;
+}
+
+const white = { r: 255, g: 255, b: 255 };
+const black = { r: 0, g: 0, b: 0 };
+
+export function rgbGrayScale(color: string): string {
   const parts = color.split("(")[1]?.slice(0, -1).split(",");
   const c = Number(parts?.[0] ?? 416) * 0.3 + Number(parts?.[1] ?? 212) * 0.587 + Number(parts?.[2] ?? 1100) * 0.114;
   return `rgb(${c},${c},${c})`;
 }
+
+/**
+ * This will take a HEX or RGB web color. pSBC can shade it darker or lighter,
+ * or blend it with a second color, and can also pass it right thru but convert
+ * from Hex to RGB (Hex2RGB) or RGB to Hex (RGB2Hex).
+ * All without you even knowing what color format you are using.
+ *
+ * @param {number} p - From 0 to 1 Percentage float (Required).
+ * @param {string} from - The starting color in HEX or RGB format.
+ * @param {string} [to] - The ending color in HEX or RGB format, optional.
+ * @returns {string|null} Either Hex or RGB color. Null if invalid color or percentage number.
+ */
+
+export function shade(p: number, from: string, to?: string): string | undefined {
+  if (
+    typeof p !== "number" ||
+    p < -1 ||
+    p > 1 ||
+    typeof from !== "string" ||
+    (from[0] !== "r" && from[0] !== "#") ||
+    (to && typeof to !== "string")
+  ) {
+    return undefined; // ErrorCheck
+  }
+
+  const sbcRip = (d: string): Record<number, number> | null => {
+    const l = d.length;
+    const RGB: Record<number, number> = {};
+
+    if (l > 9) {
+      const dArr = d.split(",");
+      if (dArr.length < 3 || dArr.length > 4) return null; // ErrorCheck
+      RGB[0] = i(dArr[0].split("(")[1]);
+      RGB[1] = i(dArr[1]);
+      RGB[2] = i(dArr[2]);
+      RGB[3] = dArr[3] ? parseFloat(dArr[3]) : -1;
+    } else {
+      if (l === 8 || l === 6 || l < 4) return null; // ErrorCheck
+      if (l < 6) {
+        d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (l > 4 ? String(d[4]) + d[4] : ""); // 3 or 4 digit
+      }
+      const dInt = i(d.slice(1), 16);
+      RGB[0] = (dInt >> 16) & 255;
+      RGB[1] = (dInt >> 8) & 255;
+      RGB[2] = dInt & 255;
+      RGB[3] = -1;
+
+      if (l === 9 || l === 5) {
+        RGB[3] = r((RGB[2] / 255) * 10000) / 10000;
+        RGB[2] = RGB[1];
+        RGB[1] = RGB[0];
+        RGB[0] = (dInt >> 24) & 255;
+      }
+    }
+    return RGB;
+  };
+
+  const i = parseInt;
+  const r = Math.round;
+
+  let h = from.length > 9;
+  h = typeof to === "string" ? (to.length > 9 ? true : to === "c" ? !h : false) : h;
+  const b = p < 0;
+  p = b ? p * -1 : p;
+  to = to && to !== "c" ? to : b ? "#000000" : "#FFFFFF";
+
+  const f = sbcRip(from);
+  const t = sbcRip(to);
+  if (!f || !t) {
+    return undefined; // ErrorCheck
+  }
+
+  if (h) {
+    return (
+      "rgb" +
+      (f[3] > -1 || t[3] > -1 ? "a(" : "(") +
+      r((t[0] - f[0]) * p + f[0]) +
+      "," +
+      r((t[1] - f[1]) * p + f[1]) +
+      "," +
+      r((t[2] - f[2]) * p + f[2]) +
+      (f[3] < 0 && t[3] < 0
+        ? ")"
+        : "," + (f[3] > -1 && t[3] > -1 ? r(((t[3] - f[3]) * p + f[3]) * 10000) / 10000 : t[3] < 0 ? f[3] : t[3]) + ")")
+    );
+  }
+
+  return (
+    "#" +
+    (
+      0x100000000 +
+      r((t[0] - f[0]) * p + f[0]) * 0x1000000 +
+      r((t[1] - f[1]) * p + f[1]) * 0x10000 +
+      r((t[2] - f[2]) * p + f[2]) * 0x100 +
+      (f[3] > -1 && t[3] > -1
+        ? r(((t[3] - f[3]) * p + f[3]) * 255)
+        : t[3] > -1
+        ? r(t[3] * 255)
+        : f[3] > -1
+        ? r(f[3] * 255)
+        : 255)
+    )
+      .toString(16)
+      .slice(1, f[3] > -1 || t[3] > -1 ? undefined : -2)
+  );
+}

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

@@ -63,6 +63,12 @@ export const EDGE_CURVE = (VERTEX_POINT_FROM: number, VERTEX_POINT_TO: number, L
 export const ORIENTED_EDGE = (EDGE_CURVE: number, m: MutableStep): number =>
   mutate(`ORIENTED_EDGE('',*,*,#${EDGE_CURVE},.F.)`, m);
 
+export const SURFACE_CURVE = (CIRCLE: number, PCURVE1: number, PCURVE2: number, m: MutableStep): number =>
+  mutate(`SURFACE_CURVE('',#${CIRCLE},(#${PCURVE1},#${PCURVE2}),.PCURVE_S1.)`, m);
+
+export const SEAM_CURVE = (LINE: number, PCURVE1: number, PCURVE2: number, m: MutableStep): number =>
+  mutate(`SEAM_CURVE('',#${LINE},(#${PCURVE1},#${PCURVE2}),.PCURVE_S1.)`, m);
+
 export const ADVANCED_FACE = (
   faceRef: number,
   planeOrPcurveRef: number,
@@ -73,8 +79,8 @@ export const ADVANCED_FACE = (
 export const OPEN_SHELL = (ADVANCED_FACE: number, m: MutableStep): number =>
   mutate(`OPEN_SHELL('',(#${ADVANCED_FACE}))`, m);
 
-export const FACE_BOUND = (EDGE_CURVE: number, m: MutableStep): number =>
-  mutate(`FACE_BOUND('',#${EDGE_CURVE},.T.)`, m);
+export const FACE_BOUND = (EDGE_CURVE: number, type: "T" | "F", m: MutableStep): number =>
+  mutate(`FACE_BOUND('',#${EDGE_CURVE},.${type}.)`, m);
 
 export const EDGE_LOOP = (ORIENTED_EDGE: ReadonlyArray<number>, m: MutableStep): number =>
   mutate(`EDGE_LOOP('',(${ORIENTED_EDGE.map((af) => `#${af}`).join(",")}))`, m);
@@ -82,14 +88,17 @@ export const EDGE_LOOP = (ORIENTED_EDGE: ReadonlyArray<number>, m: MutableStep):
 export const PLANE = (AXIS2_PLACEMENT_3D: number, m: MutableStep): number =>
   mutate(`PLANE('',#${AXIS2_PLACEMENT_3D})`, m);
 
-export const PCURVE = (CYLINDRICAL_SURFACE: number, DEFINITIONAL_REPRESENTATION: number, m: MutableStep): number =>
-  mutate(`PCURVE('',#${CYLINDRICAL_SURFACE},#${DEFINITIONAL_REPRESENTATION})`, m);
+export const PCURVE = (
+  CYLINDRICAL_SURFACE_or_PLANE: number,
+  DEFINITIONAL_REPRESENTATION: number,
+  m: MutableStep
+): number => mutate(`PCURVE('',#${CYLINDRICAL_SURFACE_or_PLANE},#${DEFINITIONAL_REPRESENTATION})`, m);
 
 export const CYLINDRICAL_SURFACE = (AXIS2_PLACEMENT_3D: number, m: MutableStep): number =>
   mutate(`CYLINDRICAL_SURFACE('',#${AXIS2_PLACEMENT_3D},2.)`, m);
 
-export const DEFINITIONAL_REPRESENTATION = (LINE: number, VECTOR: number, m: MutableStep): number =>
-  mutate(`DEFINITIONAL_REPRESENTATION('',(#${LINE}),#${VECTOR})`, m);
+export const DEFINITIONAL_REPRESENTATION = (LINEorCircle: number, m: MutableStep): number =>
+  mutate(`DEFINITIONAL_REPRESENTATION('',(#${LINEorCircle}),#7)`, m);
 
 export const SHELL_BASED_SURFACE_MODEL = (OPEN_SHELL: number, m: MutableStep): number =>
   mutate(`SHELL_BASED_SURFACE_MODEL('',(#${OPEN_SHELL}))`, m);

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

@@ -80,6 +80,7 @@ export function stepBox(b: Box, mat: Material, parentPos: Vec3, parentRot: Vec3,
               ],
               m
             ),
+            "T",
             m
           ),
           PLANE(AXIS2_PLACEMENT_3D(c0, d3, d1, m), m),
@@ -97,6 +98,7 @@ export function stepBox(b: Box, mat: Material, parentPos: Vec3, parentRot: Vec3,
               ],
               m
             ),
+            "T",
             m
           ),
           PLANE(AXIS2_PLACEMENT_3D(c0, d6, d4, m), m),
@@ -114,6 +116,7 @@ export function stepBox(b: Box, mat: Material, parentPos: Vec3, parentRot: Vec3,
               ],
               m
             ),
+            "T",
             m
           ),
           PLANE(AXIS2_PLACEMENT_3D(c0, d4, d3, m), m),
@@ -131,6 +134,7 @@ export function stepBox(b: Box, mat: Material, parentPos: Vec3, parentRot: Vec3,
               ],
               m
             ),
+            "T",
             m
           ),
           PLANE(AXIS2_PLACEMENT_3D(c0, d1, d6, m), m),
@@ -148,6 +152,7 @@ export function stepBox(b: Box, mat: Material, parentPos: Vec3, parentRot: Vec3,
               ],
               m
             ),
+            "T",
             m
           ),
           PLANE(AXIS2_PLACEMENT_3D(c0, d2, d1, m), m),
@@ -165,6 +170,7 @@ export function stepBox(b: Box, mat: Material, parentPos: Vec3, parentRot: Vec3,
               ],
               m
             ),
+            "T",
             m
           ),
           PLANE(AXIS2_PLACEMENT_3D(c0, d5, d4, m), m),