@glyphcss/react 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -303,12 +303,14 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function GlyphMeshInner({
   id,
   polygons: polygonsProp,
+  src,
   geometry,
   size = 1,
   color,
   position,
   scale,
   rotation,
+  autoCenter = false,
   castShadow = false,
   receiveShadow = false,
   className,
@@ -318,11 +320,26 @@ function GlyphMeshInner({
   const { sceneRef } = useGlyphSceneContext();
   const meshRef = (0, import_react4.useRef)(null);
   const wrapperRef = (0, import_react4.useRef)(null);
+  const [loadedPolygons, setLoadedPolygons] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    if (!src) {
+      setLoadedPolygons(null);
+      return;
+    }
+    let cancelled = false;
+    (0, import_core.loadMesh)(src).then((result) => {
+      if (!cancelled) setLoadedPolygons(result.polygons);
+    }).catch(() => {
+      if (!cancelled) setLoadedPolygons([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
   const polygons = (0, import_react4.useMemo)(() => {
-    if (polygonsProp !== void 0) return polygonsProp;
-    if (geometry !== void 0) return (0, import_core.resolveGeometry)(geometry, { size, color });
-    return [];
-  }, [polygonsProp, geometry, size, color]);
+    const base = polygonsProp !== void 0 ? polygonsProp : src !== void 0 ? loadedPolygons ?? [] : geometry !== void 0 ? (0, import_core.resolveGeometry)(geometry, { size, color }) : [];
+    return autoCenter ? (0, import_core.recenterPolygons)(base) : base;
+  }, [polygonsProp, src, loadedPolygons, geometry, size, color, autoCenter]);
   const transform = (0, import_react4.useMemo)(() => ({
     id,
     position,
@@ -541,6 +558,7 @@ function GlyphPerspectiveCameraInner({
   rotX,
   rotY,
   distance,
+  perspective,
   zoom,
   stretch,
   center,
@@ -555,6 +573,7 @@ function GlyphPerspectiveCameraInner({
     if (rotX !== void 0) opts.rotX = rotX;
     if (rotY !== void 0) opts.rotY = rotY;
     if (distance !== void 0) opts.distance = distance;
+    if (perspective !== void 0) opts.perspective = perspective;
     if (zoom !== void 0) opts.zoom = zoom;
     if (stretch !== void 0) opts.stretch = stretch;
     if (center !== void 0) opts.center = center;
@@ -576,6 +595,10 @@ function GlyphPerspectiveCameraInner({
       camera.distance = distance;
       dirty = true;
     }
+    if (perspective !== void 0 && camera.perspective !== perspective) {
+      camera.perspective = perspective;
+      dirty = true;
+    }
     if (zoom !== void 0 && camera.zoom !== zoom) {
       camera.zoom = zoom;
       dirty = true;

package/dist/index.d.cts

@@ -43,6 +43,8 @@ declare const GlyphScene: react.MemoExoticComponent<typeof GlyphSceneInner>;
 interface GlyphMeshProps {
     id?: string;
     polygons?: Polygon[];
+    /** URL of an OBJ / GLB / glTF / VOX / STL mesh, fetched + parsed via `loadMesh`. */
+    src?: string;
     /**
      * Built-in geometry name. Resolved via `resolveGeometry` when neither
      * `polygons` nor `src` is provided.
@@ -57,6 +59,11 @@ interface GlyphMeshProps {
     position?: Vec3;
     scale?: number | Vec3;
     rotation?: Vec3;
+    /**
+     * Recenter the mesh's bounding-box center to the origin so it pivots around
+     * its own center (center only, no scaling — matches voxcss). Default false.
+     */
+    autoCenter?: boolean;
     /**
      * This mesh casts shadows onto `receiveShadow` surfaces.
      * Default false — opt-in, matching PolyMesh behaviour.
@@ -79,7 +86,7 @@ interface GlyphMeshProps {
     onClick?: (event: GlyphMouseEvent) => void;
     onWheel?: (event: GlyphWheelEvent) => void;
 }
-declare function GlyphMeshInner({ id, polygons: polygonsProp, geometry, size, color, position, scale, rotation, castShadow, receiveShadow, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
+declare function GlyphMeshInner({ id, polygons: polygonsProp, src, geometry, size, color, position, scale, rotation, autoCenter, castShadow, receiveShadow, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
 declare const GlyphMesh: react.MemoExoticComponent<typeof GlyphMeshInner>;
 
 interface GlyphGroundProps {
@@ -166,6 +173,9 @@ interface GlyphPerspectiveCameraProps {
     rotY?: number;
     /** Perspective distance (world units). Default 6. */
     distance?: number;
+    /** CSS-perspective distance in virtual pixels (matches voxcss). Larger =
+     *  flatter. Default 32000. Set 0 to disable (legacy orbit projection). */
+    perspective?: number;
     /** Camera zoom — absolute px per world unit (zoom=1 → BASE_TILE=50). Default 0.65. */
     zoom?: number;
     /** Extra horizontal stretch on top of cellAspect. Default 1.0. */
@@ -176,7 +186,7 @@ interface GlyphPerspectiveCameraProps {
     style?: CSSProperties;
     children?: ReactNode;
 }
-declare function GlyphPerspectiveCameraInner({ rotX, rotY, distance, zoom, stretch, center, className, style, children, }: GlyphPerspectiveCameraProps): react_jsx_runtime.JSX.Element;
+declare function GlyphPerspectiveCameraInner({ rotX, rotY, distance, perspective, zoom, stretch, center, className, style, children, }: GlyphPerspectiveCameraProps): react_jsx_runtime.JSX.Element;
 declare const GlyphPerspectiveCamera: react.MemoExoticComponent<typeof GlyphPerspectiveCameraInner>;
 
 interface GlyphCameraContextValue {

package/dist/index.d.ts

@@ -43,6 +43,8 @@ declare const GlyphScene: react.MemoExoticComponent<typeof GlyphSceneInner>;
 interface GlyphMeshProps {
     id?: string;
     polygons?: Polygon[];
+    /** URL of an OBJ / GLB / glTF / VOX / STL mesh, fetched + parsed via `loadMesh`. */
+    src?: string;
     /**
      * Built-in geometry name. Resolved via `resolveGeometry` when neither
      * `polygons` nor `src` is provided.
@@ -57,6 +59,11 @@ interface GlyphMeshProps {
     position?: Vec3;
     scale?: number | Vec3;
     rotation?: Vec3;
+    /**
+     * Recenter the mesh's bounding-box center to the origin so it pivots around
+     * its own center (center only, no scaling — matches voxcss). Default false.
+     */
+    autoCenter?: boolean;
     /**
      * This mesh casts shadows onto `receiveShadow` surfaces.
      * Default false — opt-in, matching PolyMesh behaviour.
@@ -79,7 +86,7 @@ interface GlyphMeshProps {
     onClick?: (event: GlyphMouseEvent) => void;
     onWheel?: (event: GlyphWheelEvent) => void;
 }
-declare function GlyphMeshInner({ id, polygons: polygonsProp, geometry, size, color, position, scale, rotation, castShadow, receiveShadow, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
+declare function GlyphMeshInner({ id, polygons: polygonsProp, src, geometry, size, color, position, scale, rotation, autoCenter, castShadow, receiveShadow, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
 declare const GlyphMesh: react.MemoExoticComponent<typeof GlyphMeshInner>;
 
 interface GlyphGroundProps {
@@ -166,6 +173,9 @@ interface GlyphPerspectiveCameraProps {
     rotY?: number;
     /** Perspective distance (world units). Default 6. */
     distance?: number;
+    /** CSS-perspective distance in virtual pixels (matches voxcss). Larger =
+     *  flatter. Default 32000. Set 0 to disable (legacy orbit projection). */
+    perspective?: number;
     /** Camera zoom — absolute px per world unit (zoom=1 → BASE_TILE=50). Default 0.65. */
     zoom?: number;
     /** Extra horizontal stretch on top of cellAspect. Default 1.0. */
@@ -176,7 +186,7 @@ interface GlyphPerspectiveCameraProps {
     style?: CSSProperties;
     children?: ReactNode;
 }
-declare function GlyphPerspectiveCameraInner({ rotX, rotY, distance, zoom, stretch, center, className, style, children, }: GlyphPerspectiveCameraProps): react_jsx_runtime.JSX.Element;
+declare function GlyphPerspectiveCameraInner({ rotX, rotY, distance, perspective, zoom, stretch, center, className, style, children, }: GlyphPerspectiveCameraProps): react_jsx_runtime.JSX.Element;
 declare const GlyphPerspectiveCamera: react.MemoExoticComponent<typeof GlyphPerspectiveCameraInner>;
 
 interface GlyphCameraContextValue {

package/dist/index.js

@@ -23,7 +23,7 @@ import {
   parseGltf,
   bakeSolidTextureSamples,
   bakeSolidTextureSampledPolygons,
-  loadMesh,
+  loadMesh as loadMesh2,
   createIsometricCamera,
   parseVox,
   polygonFaces,
@@ -213,8 +213,8 @@ function GlyphSceneInner({
 var GlyphScene = memo(GlyphSceneInner);
 
 // src/glyphcss/scene/GlyphMesh.tsx
-import { memo as memo2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
-import { resolveGeometry } from "@glyphcss/core";
+import { memo as memo2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState } from "react";
+import { resolveGeometry, recenterPolygons, loadMesh } from "@glyphcss/core";
 
 // src/glyphcss/scene/events.ts
 var MESH_REGISTRY = /* @__PURE__ */ new WeakMap();
@@ -259,12 +259,14 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 function GlyphMeshInner({
   id,
   polygons: polygonsProp,
+  src,
   geometry,
   size = 1,
   color,
   position,
   scale,
   rotation,
+  autoCenter = false,
   castShadow = false,
   receiveShadow = false,
   className,
@@ -274,11 +276,26 @@ function GlyphMeshInner({
   const { sceneRef } = useGlyphSceneContext();
   const meshRef = useRef2(null);
   const wrapperRef = useRef2(null);
+  const [loadedPolygons, setLoadedPolygons] = useState(null);
+  useEffect2(() => {
+    if (!src) {
+      setLoadedPolygons(null);
+      return;
+    }
+    let cancelled = false;
+    loadMesh(src).then((result) => {
+      if (!cancelled) setLoadedPolygons(result.polygons);
+    }).catch(() => {
+      if (!cancelled) setLoadedPolygons([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
   const polygons = useMemo2(() => {
-    if (polygonsProp !== void 0) return polygonsProp;
-    if (geometry !== void 0) return resolveGeometry(geometry, { size, color });
-    return [];
-  }, [polygonsProp, geometry, size, color]);
+    const base = polygonsProp !== void 0 ? polygonsProp : src !== void 0 ? loadedPolygons ?? [] : geometry !== void 0 ? resolveGeometry(geometry, { size, color }) : [];
+    return autoCenter ? recenterPolygons(base) : base;
+  }, [polygonsProp, src, loadedPolygons, geometry, size, color, autoCenter]);
   const transform = useMemo2(() => ({
     id,
     position,
@@ -365,7 +382,7 @@ function GlyphGroundInner({
 var GlyphGround = memo3(GlyphGroundInner);
 
 // src/glyphcss/scene/GlyphHotspot.tsx
-import { memo as memo4, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState } from "react";
+import { memo as memo4, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 function GlyphHotspotInner({
   id,
@@ -379,7 +396,7 @@ function GlyphHotspotInner({
   const hotspotRef = useRef3(null);
   const onClickRef = useRef3(onClick);
   onClickRef.current = onClick;
-  const [overlayEl, setOverlayEl] = useState(null);
+  const [overlayEl, setOverlayEl] = useState2(null);
   const atKey = useMemo4(() => at.join(","), [at]);
   const sizeKey = size ? size.join(",") : "";
   useEffect3(() => {
@@ -414,11 +431,11 @@ function GlyphHotspotInner({
 var GlyphHotspot = memo4(GlyphHotspotInner);
 
 // src/glyphcss/scene/useGlyphMesh.ts
-import { useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
 function useGlyphMesh(polygons, options) {
   const { sceneRef } = useGlyphSceneContext();
   const meshRef = useRef4(null);
-  const [loading] = useState2(false);
+  const [loading] = useState3(false);
   useEffect4(() => {
     const scene = sceneRef.current;
     if (!scene) return;
@@ -497,6 +514,7 @@ function GlyphPerspectiveCameraInner({
   rotX,
   rotY,
   distance,
+  perspective,
   zoom,
   stretch,
   center,
@@ -511,6 +529,7 @@ function GlyphPerspectiveCameraInner({
     if (rotX !== void 0) opts.rotX = rotX;
     if (rotY !== void 0) opts.rotY = rotY;
     if (distance !== void 0) opts.distance = distance;
+    if (perspective !== void 0) opts.perspective = perspective;
     if (zoom !== void 0) opts.zoom = zoom;
     if (stretch !== void 0) opts.stretch = stretch;
     if (center !== void 0) opts.center = center;
@@ -532,6 +551,10 @@ function GlyphPerspectiveCameraInner({
       camera.distance = distance;
       dirty = true;
     }
+    if (perspective !== void 0 && camera.perspective !== perspective) {
+      camera.perspective = perspective;
+      dirty = true;
+    }
     if (zoom !== void 0 && camera.zoom !== zoom) {
       camera.zoom = zoom;
       dirty = true;
@@ -897,7 +920,7 @@ export {
   inverseRotateVec3,
   isAxisAlignedSurfaceNormal,
   isVoxelCameraCullableNormalGroups,
-  loadMesh,
+  loadMesh2 as loadMesh,
   mergePolygons,
   normalFacesCamera,
   normalizeInvertMultiplier,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glyphcss/react",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "React components for the glyphcss ASCII polygon mesh rendering engine",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -40,8 +40,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@glyphcss/core": "^0.0.4",
-    "glyphcss": "^0.0.4"
+    "glyphcss": "^0.0.6",
+    "@glyphcss/core": "^0.0.6"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",