bimatter-viewer-react 0.1.3 → 0.2.0

package/README.md

@@ -175,7 +175,7 @@ function App() {
 
 `Shift + Left Click` - Multi-select element
 
-`Ctrl + Left Click` - Unselect element
+`Ctrl + Left Click` - Toggle element selection
 
 `Shift + Drag Right` - Select elements fully inside rectangle
 
@@ -193,7 +193,7 @@ function App() {
 
 `I` - Isolate selected elements
 
-# Viewer API:
+## Viewer API
 
 ```ts
 viewerRef.current?.camera.fitCamera();
@@ -213,6 +213,11 @@ viewerRef.current?.selector.removeSelected(0, [10]);
 viewerRef.current?.selector.resetSelection();
 viewerRef.current?.selector.getSelected();
 
+viewerRef.current?.colors.setColor(0, [10, 20], "#ff3355");
+viewerRef.current?.colors.clearColor(0, [10]);
+viewerRef.current?.colors.clearModelColors(0);
+viewerRef.current?.colors.clearAllColors();
+
 viewerRef.current?.properties.getModelProps();
 viewerRef.current?.properties.getModelStructure();
 viewerRef.current?.utils.getUserDevice();
@@ -267,6 +272,54 @@ function App() {
 }
 ```
 
+## Colorize Elements
+
+Use `viewerRef.current.colors` to apply temporary color overrides to model elements. The color is applied by `modelID` and element ids:
+
+```tsx
+viewerRef.current?.colors.setColor(0, [10, 20, 30], "#ff3355");
+viewerRef.current?.colors.clearColor(0, [10, 20]);
+viewerRef.current?.colors.clearModelColors(0);
+viewerRef.current?.colors.clearAllColors();
+```
+
+Example with current selection:
+
+```tsx
+import { useRef, useState } from "react";
+import {
+    Viewer,
+    type ViewerApi,
+    type ViewerSelection,
+} from "bimatter-viewer-react";
+
+function App() {
+    const viewerRef = useRef<ViewerApi>(null);
+    const [selected, setSelected] = useState<ViewerSelection>({});
+
+    function colorizeSelected() {
+        Object.entries(selected).forEach(([modelID, ids]) => {
+            viewerRef.current?.colors.setColor(Number(modelID), ids, "#ff3355");
+        });
+    }
+
+    return (
+        <>
+            <button onClick={colorizeSelected}>Colorize selected</button>
+            <button onClick={() => viewerRef.current?.colors.clearAllColors()}>
+                Clear colors
+            </button>
+            <Viewer
+                ref={viewerRef}
+                modelUrls={["/models/model.bmt"]}
+                selected={selected}
+                onSelectedChange={setSelected}
+            />
+        </>
+    );
+}
+```
+
 ## Controlled Selection
 
 Selection can be controlled by your app state, including Zustand, Redux, or local React state.

package/lib/Colors/useElementColors.d.ts

@@ -0,0 +1,15 @@
+import { DataTexture, type ColorRepresentation } from "three";
+import type { GeometryIndexApi } from "../GeometryUtils/useGeometryIndex";
+export declare const MAX_ELEMENT_COLOR_PALETTE_SIZE = 256;
+export type ViewerElementColorsApi = {
+    applyStoredColors: () => void;
+    clearAllColors: () => void;
+    clearColor: (modelID: number, ids: number[]) => void;
+    clearModelColors: (modelID: number) => void;
+    setColor: (modelID: number, ids: number[], color: ColorRepresentation) => void;
+};
+export type ViewerElementColors = {
+    colorPaletteTexture: DataTexture;
+    colorUtils: ViewerElementColorsApi;
+};
+export declare function useElementColors(geometryIndex: GeometryIndexApi): ViewerElementColors;

package/lib/GeometryUtils/useGeometryIndex.d.ts

@@ -31,5 +31,6 @@ export type GeometryIndex = {
 };
 export type GeometryIndexApi = {
     buildIndex: () => GeometryIndex;
+    resetIndex: () => void;
 };
 export default function useGeometryIndex(modelRef: ViewerModelRef): GeometryIndexApi;

package/lib/Model.d.ts

@@ -1,10 +1,14 @@
 import type { BmtModelData } from "./Loaders/BmtLoader";
-import { Matrix4 } from "three";
+import { Matrix4, type DataTexture } from "three";
 type ModelProps = {
+    colorPaletteTexture: DataTexture;
     coordinationMatrix?: Matrix4 | null;
     modelID: number;
     data: BmtModelData;
 };
+export declare function parseModelMatrix(matrix?: string): Matrix4 | null;
 export declare function getModelCoordinationMatrix(data: BmtModelData): Matrix4 | null;
-declare function Model({ coordinationMatrix, modelID, data }: ModelProps): import("react/jsx-runtime").JSX.Element;
-export default Model;
+export declare function getModelCoordinationMatrixSource(data: BmtModelData): string | undefined;
+declare function Model({ colorPaletteTexture, coordinationMatrix, modelID, data, }: ModelProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Model>;
+export default _default;

package/lib/SelectableMesh.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import { Matrix4 } from "three";
+import { Matrix4, type DataTexture } from "three";
 import type { BmtGeomData, BmtMaterialData } from "./Loaders/BmtLoader";
 type SelectableMeshProps = {
+    colorPaletteTexture: DataTexture;
     data: BmtGeomData;
     material: BmtMaterialData;
     meshMatrix: Matrix4;
 };
-export declare const SelectableMesh: React.MemoExoticComponent<({ material, data, meshMatrix, }: SelectableMeshProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const SelectableMesh: React.MemoExoticComponent<({ colorPaletteTexture, material, data, meshMatrix, }: SelectableMeshProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/lib/api/ViewerApi.d.ts

@@ -1,3 +1,4 @@
+import type { ColorRepresentation } from "three";
 import type { SelectedStore, UserDevice, ViewerGridAxesVisibility, ViewerGridAxisSide, ViewerStoreApi } from "../store/ViewerStore";
 import { type ViewerPropertiesApi } from "./ViewerPropertiesApi";
 export type ViewerSelection = Record<number, number[]>;
@@ -18,6 +19,12 @@ export type ViewerSelectorApi = {
     resetSelection: (modelID?: number) => void;
     setSelected: (modelID: number, ids: number[], reset?: boolean) => void;
 };
+export type ViewerColorsApi = {
+    clearAllColors: () => void;
+    clearColor: (modelID: number, ids: number[]) => void;
+    clearModelColors: (modelID: number) => void;
+    setColor: (modelID: number, ids: number[], color: ColorRepresentation) => void;
+};
 export type ViewerUtilsApi = {
     getGridAxesVisibility: () => ViewerGridAxesVisibility;
     getShowNavCube: () => boolean;
@@ -37,6 +44,7 @@ export type ViewerCameraApi = {
 };
 export type ViewerApi = {
     camera: ViewerCameraApi;
+    colors: ViewerColorsApi;
     geometryUtils: ViewerGeometryUtilsApi;
     properties: ViewerPropertiesApi;
     selector: ViewerSelectorApi;
@@ -44,6 +52,7 @@ export type ViewerApi = {
 };
 export type ViewerSceneApi = {
     camera: ViewerCameraApi;
+    colors: ViewerColorsApi;
     geometryUtils: ViewerGeometryUtilsApi;
 };
 export declare function serializeSelected(selected: SelectedStore): ViewerSelection;

package/lib/api/loader.d.ts

@@ -5,10 +5,13 @@ declare class ViewerLoaderApi {
     coordinationMatrix: string | undefined;
     private bmtLoader;
     private ifcLoader;
+    private loadedModelCount;
+    private nextModelID;
     private initLoaders;
     private getBmtLoader;
     private getIfcLoader;
     private loadBmtModel;
+    private resetCoordinationMatrixState;
     resetCoordinationMatrix(): void;
     loadModel(sources: ViewerModelSource | ViewerModelSource[]): Promise<ViewerLoadedModels>;
 }

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Viewer } from "./Viewer";
 export type { ViewerModelsData, ViewerProps } from "./Viewer";
-export type { ViewerApi, ViewerCameraApi, ViewerGeometryUtilsApi, ViewerSelection, ViewerSelectorApi, ViewerUtilsApi, } from "./api/ViewerApi";
+export type { ViewerApi, ViewerCameraApi, ViewerColorsApi, ViewerGeometryUtilsApi, ViewerSelection, ViewerSelectorApi, ViewerUtilsApi, } from "./api/ViewerApi";
 export type { ViewerPropertiesApi } from "./api/ViewerPropertiesApi";
 export { BMTLoader } from "./Loaders/BmtLoader";
 export type { BmtModelGeometryData, BmtGeomData, BmtIndexArray, BmtMaterialData, BmtElementProps, BmtModelData, BmtModelProps, BmtModelStructure, BmtModelStructureNode, BmtPropertyRecord, BmtPropertySet, BmtPropertyValue, } from "./Loaders/BmtLoader";