bimatter-viewer-react 0.5.11 → 0.5.12

package/README.md

@@ -268,6 +268,32 @@ Use `viewerRef.current.colors` to apply temporary color overrides to model eleme
 
 ```tsx
 viewerRef.current?.colors.setColor(0, [10, 20, 30], "#ff3355");
+viewerRef.current?.colors.rebuildByColors({
+    0: {
+        "#ff3355": [10, 20, 30],
+        "#3b82f6": [40, 50],
+    },
+    1: {
+        "#22c55e": [10, 20],
+    },
+});
+viewerRef.current?.colors.rebuildByColors(
+    {
+        0: {
+            "#ff3355": [10, 20, 30],
+            "#3b82f6": [40, 50],
+        },
+    },
+    "#d1d5db",
+);
+viewerRef.current?.colors.rebuildModelByColors(
+    0,
+    {
+        "#ff3355": [10, 20, 30],
+        "#3b82f6": [40, 50],
+    },
+    "#d1d5db",
+);
 viewerRef.current?.colors.clearColor(0, [10, 20]);
 viewerRef.current?.colors.clearModelColors(0);
 viewerRef.current?.colors.clearAllColors();
@@ -455,6 +481,56 @@ With `ofLevel(level)`, `toElements()` returns `{ elementID, props }[]` and `toEl
 
 `ofType()` accepts `IfcClass | string`, so TypeScript suggests IFC classes like `"IfcWall"` while still allowing custom type strings.
 
+## Using Colorize With Collectors
+
+Collectors can be used directly as color inputs. This is useful when you want to highlight elements by IFC type, level, or property value:
+
+```tsx
+const viewer = viewerRef.current;
+
+viewer?.colors.rebuildModelByColors(
+    0,
+    {
+        "#ff3355":
+            viewer.selector
+                .collector()
+                .ofModel(0)
+                .Where((element) => {
+                    return (
+                        viewer.properties.getParamValueByName(
+                            element.props,
+                            "System Name",
+                            "Mechanical",
+                        ) === "Mechanical Supply Air 2"
+                    );
+                })
+                .toElementsIds() ?? [],
+    },
+    "#d1d5db",
+);
+```
+
+You can also combine level filters with type filters:
+
+```tsx
+const viewer = viewerRef.current;
+const firstLevel = viewer?.properties.getAllModelLevels(0, true)[0];
+
+if (viewer && firstLevel) {
+    viewer.colors.rebuildModelByColors(
+        0,
+        {
+            "#3b82f6": viewer.selector
+                .collector()
+                .ofLevel(firstLevel)
+                .ofType("IfcWall")
+                .toElementsIds(),
+        },
+        "#d1d5db",
+    );
+}
+```
+
 ## Stats And Profiling
 
 Enable FPS stats and console timing logs:

package/lib/api/ViewerApi.d.ts

@@ -2,11 +2,13 @@ import type { ColorRepresentation } from "three";
 import type { SelectedStore, UserDevice, ViewerGridAxesVisibility, ViewerGridAxisSide, ViewerStoreApi } from "../store/ViewerStore";
 import { type ViewerPropertiesApi } from "./ViewerPropertiesApi";
 import type { ViewerClippingApi } from "../utils/ClippingUtils";
+import type { ViewerColorConfigByModel, ViewerModelColorConfig } from "../utils/ColorsUtils/useElementColors";
 import type { ViewerDimensionsApi } from "../utils/DimentionsUtils";
 import type { ViewerCameraGetIntersection } from "../Camera/useCameraUtils";
 import type { BmtConversionResult, BmtConverterOptions, BmtConverterSource } from "../Loaders/BmtConverter";
 import { FilteredElementsCollector } from "../Selector/FilteredElementsCollector";
 export type { ViewerClippingApi } from "../utils/ClippingUtils";
+export type { ViewerColorConfigByModel, ViewerModelColorConfig, } from "../utils/ColorsUtils/useElementColors";
 export type { ViewerDimensionsApi } from "../utils/DimentionsUtils";
 export type { ViewerCameraGetIntersection } from "../Camera/useCameraUtils";
 export type ViewerSelection = Record<number, number[]>;
@@ -42,6 +44,8 @@ export type ViewerColorsApi = {
     clearAllColors: () => void;
     clearColor: (modelID: number, ids: number[]) => void;
     clearModelColors: (modelID: number) => void;
+    rebuildByColors: (colorsByModel: ViewerColorConfigByModel, defaultColor?: ColorRepresentation) => void;
+    rebuildModelByColors: (modelID: number, colorsByIds: ViewerModelColorConfig, defaultColor?: ColorRepresentation) => void;
     setColor: (modelID: number, ids: number[], color: ColorRepresentation) => void;
 };
 export type ViewerUtilsApi = {

package/lib/api/ViewerPropertiesApi.d.ts

@@ -1,6 +1,6 @@
 import type { ViewerModelPropsStore, ViewerModelStructureStore, ViewerStoreApi } from "../store/ViewerStore";
 import { type ExportedExcelFile, type ModelPropertiesExcelOptions } from "../utils/ExportUtils";
-import type { BmtModelStructureNode, BmtPropertyRecord, BmtPropertySet, BmtPropertyValue } from "../Loaders/BmtLoader";
+import type { BmtElementProps, BmtModelStructureNode, BmtPropertyRecord, BmtPropertySet, BmtPropertyValue } from "../Loaders/BmtLoader";
 export type ViewerPropertiesExcelOptions = ModelPropertiesExcelOptions;
 type ViewerModelLevelValue = BmtModelStructureNode[] | BmtPropertyRecord | BmtPropertySet[] | BmtPropertyValue;
 export type ViewerModelLevel = Record<string, ViewerModelLevelValue | undefined> & {
@@ -15,6 +15,9 @@ export type ViewerPropertiesApi = {
     getAllModelLevels: (modelID: number, recursive?: boolean) => ViewerModelLevel[];
     getModelProps: () => ViewerModelPropsStore;
     getModelStructure: () => ViewerModelStructureStore;
+    getParamsByElement: (modelID: number, elementID: number) => BmtElementProps | undefined;
+    getParamValueByName: (elementParams: BmtElementProps | null | undefined, paramName: string, setName?: string) => BmtPropertyValue | undefined;
+    getParamValueByElement: (modelID: number, elementID: number, paramName: string, setName?: string) => BmtPropertyValue | undefined;
 };
 export declare function createViewerPropertiesApi(viewerStore: ViewerStoreApi): ViewerPropertiesApi;
 export {};