bimatter-viewer-react 0.6.11 → 0.7.1

package/README.md

@@ -114,46 +114,60 @@ You can also load mixed model lists:
 IFC spaces are loaded by default when the IFC contains room geometry, but they are hidden in the viewer by default. Disable loading them when room volumes are not needed:
 
 ```ts
-import { loader } from "bimatter-viewer-react";
-
-await loader.loadModel(["/models/architecture.ifc"], {
+await viewerRef.current?.models.loadModels(["/models/architecture.ifc"], {
+    clearViewer: true,
     useIfcSpace: false,
 });
 ```
 
 ## Loader API
 
-You can load models yourself and pass parsed data to the viewer:
+You can load models through the viewer API and keep parsed data in your app state:
 
 ```tsx
-import { useEffect, useState } from "react";
-import { loader, Viewer, type ViewerLoadedModels } from "bimatter-viewer-react";
+import { useState } from "react";
+import {
+    Viewer,
+    type ViewerApi,
+    type ViewerLoadedModels,
+} from "bimatter-viewer-react";
 
 function App() {
-    const [modelsData, setModelsData] = useState<ViewerLoadedModels>();
-
-    useEffect(() => {
-        loader
-            .loadModel(["/models/architecture.bmt", "/models/structure.bmt"])
-            .then(setModelsData);
-    }, []);
-
-    if (!modelsData) return null;
+    const [modelsData, setModelsData] = useState<ViewerLoadedModels>({});
+
+    function loadInitialModels(viewer: ViewerApi) {
+        void viewer.models.loadModels(
+            ["/models/architecture.bmt", "/models/structure.bmt"],
+            {
+                clearViewer: true,
+                onModelsDataChange: setModelsData,
+            },
+        );
+    }
 
-    return <Viewer modelsData={modelsData} />;
+    return <Viewer modelsData={modelsData} onReady={loadInitialModels} />;
 }
 ```
 
-`loader.loadModel` accepts paths or browser `File` objects:
+`viewer.models.loadModels` accepts paths or browser `File` objects:
 
 ```ts
-await loader.loadModel(["/models/model.bmt"]);
-await loader.loadModel(["/models/model.ifc"]);
-await loader.loadModel(["/models/model.ifc"], { useIfcSpace: false });
-await loader.loadModel(["/models/model.bmt"], { materialMode: "performance" });
-await loader.loadModel(["/models/model.bmt"], { useDoubleSideMaterial: true });
-await loader.loadModel(["/models/model.bmt", "/models/model.ifc"]);
-await loader.loadModel(files);
+await viewerRef.current?.models.loadModels(["/models/model.bmt"]);
+await viewerRef.current?.models.loadModels(["/models/model.ifc"]);
+await viewerRef.current?.models.loadModels(["/models/model.ifc"], {
+    useIfcSpace: false,
+});
+await viewerRef.current?.models.loadModels(["/models/model.bmt"], {
+    materialMode: "performance",
+});
+await viewerRef.current?.models.loadModels(["/models/model.bmt"], {
+    useDoubleSideMaterial: true,
+});
+await viewerRef.current?.models.loadModels([
+    "/models/model.bmt",
+    "/models/model.ifc",
+]);
+await viewerRef.current?.models.loadModels(files);
 ```
 
 `materialMode: "performance"` uses a cheaper unlit material. Use `"quality"` or omit it for the default lit material.
@@ -163,23 +177,28 @@ await loader.loadModel(files);
 Use `useWorker` to parse BMT and IFC models outside the main thread:
 
 ```ts
-const models = await loader.loadModel(["/models/model.ifc"], {
-    chunk: 200,
-    useWorker: true,
-    onProgress: (event) => {
-        console.log(event.phase, Math.round(event.progress * 100));
-    },
-    onChunk: (chunk) => {
-        // Optional: add chunk.geometry to your viewer state for progressive render.
-        console.log(chunk.modelID, chunk.geometryID);
+const models = await viewerRef.current?.models.loadModels(
+    ["/models/model.ifc"],
+    {
+        clearViewer: true,
+        chunk: 200,
+        onModelsDataChange: setModelsData,
+        useWorker: true,
+        onModelProgress: (event) => {
+            if (!event) return;
+            console.log(event.phase, Math.round(event.progress * 100));
+        },
+        onChunk: (chunk) => {
+            console.log(chunk.modelID, chunk.geometryID);
+        },
     },
-});
+);
 ```
 
 IFC worker loading uses the same parser wasm file. By default, `ifc-parser.wasm` is resolved relative to the app document base URL, so it works with Vite `base` paths like `/my-app/` when the file is in that app's `public` folder. Pass a custom `wasmPath` only when the file is hosted elsewhere:
 
 ```ts
-await loader.loadModel(["/models/model.ifc"], {
+await viewerRef.current?.models.loadModels(["/models/model.ifc"], {
     useWorker: true,
     wasmPath: "/ifc-parser.wasm",
 });
@@ -187,10 +206,10 @@ await loader.loadModel(["/models/model.ifc"], {
 
 For IFC, `chunk` controls how many geometries are packed before a streamed mesh is emitted. For BMT, chunks are read as they are already stored in the file.
 
-When you render chunks yourself in `onChunk`, set `collectWorkerChunks: false` to avoid keeping the same streamed geometry in the loader helper until the final result:
+When you render chunks yourself in `onChunk`, keep `collectWorkerChunks: false` to avoid keeping the same streamed geometry in the loader helper until the final result:
 
 ```ts
-await loader.loadModel(["/models/model.bmt"], {
+await viewerRef.current?.models.loadModels(["/models/model.bmt"], {
     collectWorkerChunks: false,
     useWorker: true,
     onChunk: (chunk) => {
@@ -202,15 +221,23 @@ await loader.loadModel(["/models/model.bmt"], {
 ## File Upload Example
 
 ```tsx
-import { useState } from "react";
-import { Viewer, loader, type ViewerLoadedModels } from "bimatter-viewer-react";
+import { useRef, useState } from "react";
+import {
+    Viewer,
+    type ViewerApi,
+    type ViewerLoadedModels,
+} from "bimatter-viewer-react";
 
 function App() {
-    const [modelsData, setModelsData] = useState<ViewerLoadedModels>();
+    const viewerRef = useRef<ViewerApi>(null);
+    const [modelsData, setModelsData] = useState<ViewerLoadedModels>({});
 
     async function onFilesChange(files: FileList | null) {
         if (!files?.length) return;
-        setModelsData(await loader.loadModel(Array.from(files)));
+        await viewerRef.current?.models.loadModels(Array.from(files), {
+            clearViewer: true,
+            onModelsDataChange: setModelsData,
+        });
     }
 
     return (
@@ -221,7 +248,7 @@ function App() {
                 type="file"
                 onChange={(event) => onFilesChange(event.target.files)}
             />
-            {modelsData && <Viewer modelsData={modelsData} />}
+            <Viewer ref={viewerRef} modelsData={modelsData} />
         </>
     );
 }

package/lib/Loaders/BmtLoader.d.ts

@@ -1,6 +1,6 @@
 import pako from "pako";
 import type { ModelGridsData } from "../utils/ModelGrids";
-import type { ViewerMaterialMode } from "../types";
+import type { ViewerMaterialMode, ViewerUploadMode } from "../types";
 export type BmtIndexArray = Uint16Array | Uint32Array;
 export interface BmtMaterialData {
     r: number;
@@ -54,6 +54,7 @@ export type BmtModelStructure = BmtModelStructureNode | BmtModelStructureNode[]
 export type BmtModelGeometryData = Record<number, BmtGeomData>;
 export type BmtModelRenderSettings = {
     materialMode?: ViewerMaterialMode;
+    uploadMode?: ViewerUploadMode;
     useDoubleSideMaterial?: boolean;
 };
 export interface BmtModelData {

package/lib/Model.d.ts

@@ -7,11 +7,12 @@ type ModelProps = {
     modelID: number;
     data: BmtModelData;
     materialMode?: ViewerMaterialMode;
+    onUploadComplete?: (uploadedItemCount: number) => void;
     useWebGPU?: boolean;
 };
 export declare function parseModelMatrix(matrix?: string): Matrix4 | null;
 export declare function getModelCoordinationMatrix(data: BmtModelData): Matrix4 | null;
 export declare function getModelCoordinationMatrixSource(data: BmtModelData): string | undefined;
-declare function Model({ colorPaletteTexture, coordinationMatrix, modelID, data, materialMode: materialModeOverride, useWebGPU, }: ModelProps): import("react/jsx-runtime").JSX.Element;
+declare function Model({ colorPaletteTexture, coordinationMatrix, modelID, data, materialMode: materialModeOverride, onUploadComplete, useWebGPU, }: ModelProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Model>;
 export default _default;

package/lib/ModelUploadQueue.d.ts

@@ -0,0 +1,24 @@
+import { type RefObject } from "react";
+import { type DataTexture, type Group, type Matrix4 } from "three";
+import type { BmtGeomData, BmtMaterialData } from "./Loaders/BmtLoader";
+import type { ViewerMaterialMode, ViewerUploadMode } from "./types";
+export type UploadMeshData = {
+    data: BmtGeomData;
+    isIfcSpace: boolean;
+    key: string;
+    material: BmtMaterialData;
+    meshMatrix: Matrix4;
+    modelID: number;
+};
+type ModelUploadQueueProps = {
+    colorPaletteTexture: DataTexture;
+    groupRef: RefObject<Group | null>;
+    items: UploadMeshData[];
+    materialMode: ViewerMaterialMode;
+    onUploadComplete?: (uploadedItemCount: number) => void;
+    uploadMode: ViewerUploadMode;
+    useDoubleSideMaterial: boolean;
+    useWebGPU: boolean;
+};
+export declare function ModelUploadQueue({ colorPaletteTexture, groupRef, items, materialMode, onUploadComplete, uploadMode, useDoubleSideMaterial, useWebGPU, }: ModelUploadQueueProps): null;
+export {};

package/lib/SelectableMesh.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Matrix4, type DataTexture } from "three";
+import { Matrix4, MeshBasicMaterial, MeshLambertMaterial, type ColorRepresentation, type DataTexture, type Material } from "three";
 import type { BmtGeomData, BmtMaterialData } from "./Loaders/BmtLoader";
 import type { ViewerMaterialMode } from "./types";
 export type SelectableMeshProps = {
@@ -11,4 +11,9 @@ export type SelectableMeshProps = {
     meshMatrix: Matrix4;
     useDoubleSideMaterial?: boolean;
 };
+export type SelectableMaterial = MeshBasicMaterial | MeshLambertMaterial;
+export declare function createSelectableMaterial({ colorPaletteTexture, material, materialMode, preselectionColor, useDoubleSideMaterial, }: Pick<SelectableMeshProps, "colorPaletteTexture" | "material" | "materialMode" | "useDoubleSideMaterial"> & {
+    preselectionColor: ColorRepresentation;
+}): MeshBasicMaterial | MeshLambertMaterial;
+export declare function updateSelectableMaterialPreselectionColor(material: Material, preselectionColor: ColorRepresentation): void;
 export declare const SelectableMesh: React.MemoExoticComponent<({ colorPaletteTexture, material, materialMode, data, isIfcSpace, meshMatrix, useDoubleSideMaterial, }: SelectableMeshProps) => import("react/jsx-runtime").JSX.Element>;

package/lib/WebGpuSelectableMesh.d.ts

@@ -1,3 +1,19 @@
 import React from "react";
+import { type ColorRepresentation, type Material } from "three";
+import { MeshBasicNodeMaterial, MeshLambertNodeMaterial } from "three/webgpu";
 import type { SelectableMeshProps } from "./SelectableMesh";
+type NodeSelectableMaterial = (MeshBasicNodeMaterial | MeshLambertNodeMaterial) & Material & {
+    colorNode?: unknown;
+    defaultAttributeValues?: Record<string, number[]>;
+    opacityNode?: unknown;
+};
+export declare function createWebGpuSelectableMaterial({ colorPaletteTexture, material, materialMode, preselectionColor, selectionColor, useDoubleSideMaterial, }: Pick<SelectableMeshProps, "colorPaletteTexture" | "material" | "materialMode" | "useDoubleSideMaterial"> & {
+    preselectionColor: ColorRepresentation;
+    selectionColor: ColorRepresentation;
+}): NodeSelectableMaterial;
+export declare function updateWebGpuSelectableMaterialColors(material: Material, { preselectionColor, selectionColor, }: {
+    preselectionColor: ColorRepresentation;
+    selectionColor: ColorRepresentation;
+}): void;
 export declare const WebGpuSelectableMesh: React.MemoExoticComponent<({ colorPaletteTexture, material, materialMode, data, isIfcSpace, meshMatrix, useDoubleSideMaterial, }: SelectableMeshProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/api/loader.d.ts

@@ -1,6 +1,6 @@
 import { type BmtModelData } from "../Loaders/BmtLoader";
 import { type BmtWorkerGeometryChunk, type IfcWorkerGeometryChunk, type WorkerProgressEvent } from "../workers";
-import type { ViewerMaterialMode } from "../types";
+import type { ViewerMaterialMode, ViewerUploadMode } from "../types";
 export type ViewerModelSource = string | File;
 export type ViewerLoadedModels = Record<number, BmtModelData>;
 export type ViewerLoaderWorkerChunk = (BmtWorkerGeometryChunk | IfcWorkerGeometryChunk) & {
@@ -14,6 +14,7 @@ export type ViewerLoadModelOptions = {
     onChunk?: (chunk: ViewerLoaderWorkerChunk) => void;
     onProgress?: (progress: WorkerProgressEvent) => void;
     streamGeometryChunks?: boolean;
+    uploadMode?: ViewerUploadMode;
     useDoubleSideMaterial?: boolean;
     useIfcSpace?: boolean;
     useWorker?: boolean;

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Viewer } from "./Viewer";
 export type { ViewerModelsData, ViewerProps } from "./Viewer";
-export type { ViewerMaterialMode } from "./types";
+export type { ViewerMaterialMode, ViewerUploadMode } from "./types";
 export type { ViewerApi, ViewerCameraApi, ViewerCameraGetIntersection, ViewerClippingApi, ViewerColorsApi, ViewerBmtConverterOptions, ViewerConverterApi, ViewerDimensionsApi, ViewerGeometryUtilsApi, ViewerLoadModelsOptions, ViewerModelsApi, ViewerSelection, ViewerSelectorApi, ViewerUtilsApi, } from "./api/ViewerApi";
 export type { ViewerModelLevel, ViewerModelLevelsByModel, ViewerPropertiesApi, ViewerPropertiesExcelOptions, } from "./api/ViewerPropertiesApi";
 export { BMTLoader } from "./Loaders/BmtLoader";