bimatter-viewer-react 0.1.4 → 0.3.0

package/README.md

@@ -4,10 +4,12 @@ React viewer for Bimatter `.bmt` models and `.ifc` models.
 
 All about us you can see on our website [Bimatter](https://bimatter.ru/)
 
-Vanila js viewer core: [bimatter-viewer](https://www.npmjs.com/package/bimatter-viewer?activeTab=code)
+[Demo viewer](https://rkaeplive.github.io/bimatter-viewer-react/)
 
 [GitHub](https://github.com/rkaeplive/bimatter-viewer-react)
 
+Vanila js viewer core: [bimatter-viewer](https://www.npmjs.com/package/bimatter-viewer?activeTab=code)
+
 Write your issuse here: [GitHub](https://github.com/rkaeplive/bimatter-viewer-react/issues)
 
 ## License
@@ -175,7 +177,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,10 +195,16 @@ function App() {
 
 `I` - Isolate selected elements
 
-# Viewer API:
+### Clipping
+
+`P` - Create clipping plane by model intersection
+
+## Viewer API
 
 ```ts
 viewerRef.current?.camera.fitCamera();
+viewerRef.current?.camera.getIntersection();
+viewerRef.current?.camera.getIntersection(true);
 
 viewerRef.current?.geometryUtils.showAll();
 viewerRef.current?.geometryUtils.showByIds([1, 2, 3]);
@@ -212,10 +220,30 @@ viewerRef.current?.selector.addSelected(0, [30]);
 viewerRef.current?.selector.removeSelected(0, [10]);
 viewerRef.current?.selector.resetSelection();
 viewerRef.current?.selector.getSelected();
+viewerRef.current?.selector.setSelectionColor("#1194bd");
+viewerRef.current?.selector.getSelectionColor();
+viewerRef.current?.selector.setPreselectionColor("#68c6e3");
+viewerRef.current?.selector.getPreselectionColor();
+
+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?.clipping.createPlane();
+viewerRef.current?.clipping.createClippingRectangle();
+viewerRef.current?.clipping.toggle();
+viewerRef.current?.clipping.setActive(true);
+viewerRef.current?.clipping.setEdgesActive(true);
+viewerRef.current?.clipping.setHelpersActive(true);
+viewerRef.current?.clipping.deleteAllPlanes();
 
 viewerRef.current?.properties.getModelProps();
 viewerRef.current?.properties.getModelStructure();
 viewerRef.current?.utils.getUserDevice();
+viewerRef.current?.utils.getDefaultHotkeysEnabled();
+viewerRef.current?.utils.setDefaultHotkeysEnabled(false);
+viewerRef.current?.utils.toggleDefaultHotkeys();
 viewerRef.current?.utils.getShowStats();
 viewerRef.current?.utils.setShowStats(true);
 viewerRef.current?.utils.getShowNavCube();
@@ -267,6 +295,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/Camera/useCameraUtils.d.ts

@@ -0,0 +1,28 @@
+import { type Intersection, type Object3D, type Plane, type Vector3 } from "three";
+import type { ViewerModelRef } from "../types";
+export declare const CLIPPING_PLANE_EPSILON = 0.000001;
+export type CameraClippingSource = {
+    getActive: () => boolean;
+    getPlanes: () => Plane[];
+};
+export type CameraIntersectionOptions = {
+    event?: MouseEvent | PointerEvent;
+    filter?: (intersection: Intersection<Object3D>) => boolean;
+    object?: Object3D | Object3D[] | null;
+    recursive?: boolean;
+    respectClipping?: boolean;
+};
+export type ViewerCameraGetIntersection = {
+    (first: true): Intersection<Object3D> | null;
+    (first?: false): Intersection<Object3D>[];
+};
+export type CameraUtilsApi = {
+    getActiveClippingPlanes: () => Plane[];
+    getIntersection: {
+        (first: true, options?: CameraIntersectionOptions): Intersection<Object3D> | null;
+        (first?: false, options?: CameraIntersectionOptions): Intersection<Object3D>[];
+    };
+    setClippingSource: (source: CameraClippingSource | null) => void;
+};
+export declare function isPointVisibleByClippingPlanes(point: Vector3, planes: Plane[]): boolean;
+export default function useCameraUtils(modelRef: ViewerModelRef): CameraUtilsApi;

package/lib/Loaders/BmtLoader.d.ts

@@ -1,5 +1,5 @@
 import pako from "pako";
-import type { ModelGridsData } from "../ModelGrids";
+import type { ModelGridsData } from "../utils/ModelGrids";
 export type BmtIndexArray = Uint16Array | Uint32Array;
 export interface BmtMaterialData {
     r: number;

package/lib/Loaders/IFCLoader/IfcGrid.d.ts

@@ -1,5 +1,5 @@
 import { IfcAPI } from "web-ifc";
-import type { ModelGridData } from "../../ModelGrids";
+import type { ModelGridData } from "../../utils/ModelGrids";
 type IfcRawValue = boolean | null | number | string | undefined | IfcRawValue[] | {
     value: IfcRawValue;
 };

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/Selector/SelectionBox.d.ts

@@ -1,5 +1,5 @@
 import type { MutableRefObject } from "react";
-import { Camera, Object3D, Vector2 } from "three";
+import { Camera, Object3D, Vector2, type Plane } from "three";
 export type ClientRectSelection = {
     minX: number;
     minY: number;
@@ -34,9 +34,10 @@ export type SelectionBoxProfile = {
 export declare const MIN_BOX_SIZE = 6;
 export declare function getClientSelectionRect(start: Vector2, end: Vector2): ClientRectSelection;
 export declare function getSelectionBoxMode(start: Vector2, end: Vector2): SelectionBoxMode;
-export declare function getBoxSelectedIds({ model, camera, domElement, rect, mode, profile, }: {
+export declare function getBoxSelectedIds({ model, camera, clippingPlanes, domElement, rect, mode, profile, }: {
     model: Object3D | null;
     camera: Camera;
+    clippingPlanes?: Plane[];
     domElement: HTMLElement;
     rect: ClientRectSelection;
     mode: SelectionBoxMode;

package/lib/Selector/useSelector.d.ts

@@ -1,3 +1,3 @@
-import type { GeometryIndexApi } from "../GeometryUtils/useGeometryIndex";
+import type { CameraUtilsApi } from "../Camera/useCameraUtils";
 import type { ViewerControlsRef, ViewerModelRef } from "../types";
-export default function useSelector(modelRef: ViewerModelRef, controlRef: ViewerControlsRef, geometryIndex: GeometryIndexApi): void;
+export default function useSelector(modelRef: ViewerModelRef, controlRef: ViewerControlsRef, cameraUtils: CameraUtilsApi): void;

package/lib/api/ViewerApi.d.ts

@@ -1,5 +1,10 @@
+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 { ViewerCameraGetIntersection } from "../Camera/useCameraUtils";
+export type { ViewerClippingApi } from "../utils/ClippingUtils";
+export type { ViewerCameraGetIntersection } from "../Camera/useCameraUtils";
 export type ViewerSelection = Record<number, number[]>;
 export type ViewerGeometryUtilsApi = {
     getAllIds: () => number[];
@@ -13,19 +18,32 @@ export type ViewerGeometryUtilsApi = {
 };
 export type ViewerSelectorApi = {
     addSelected: (modelID: number, ids: number[]) => void;
+    getPreselectionColor: () => ColorRepresentation;
+    getSelectionColor: () => ColorRepresentation;
     getSelected: () => ViewerSelection;
     removeSelected: (modelID: number, ids: number[]) => void;
     resetSelection: (modelID?: number) => void;
+    setPreselectionColor: (color: ColorRepresentation) => void;
+    setSelectionColor: (color: ColorRepresentation) => 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 = {
+    getDefaultHotkeysEnabled: () => boolean;
     getGridAxesVisibility: () => ViewerGridAxesVisibility;
     getShowNavCube: () => boolean;
     getShowGridAxes: () => boolean;
     getShowStats: () => boolean;
     getUserDevice: () => UserDevice;
     setGridAxesVisibility: (gridAxesVisibility: Partial<ViewerGridAxesVisibility>) => void;
+    setDefaultHotkeysEnabled: (enabled: boolean) => void;
     setGridAxisVisibility: (side: ViewerGridAxisSide, visible: boolean) => void;
+    toggleDefaultHotkeys: () => void;
     setShowNavCube: (showNavCube: boolean) => void;
     setShowGridAxes: (showGridAxes: boolean) => void;
     setShowStats: (showStats: boolean) => void;
@@ -34,9 +52,12 @@ export type ViewerUtilsApi = {
 };
 export type ViewerCameraApi = {
     fitCamera: () => void;
+    getIntersection: ViewerCameraGetIntersection;
 };
 export type ViewerApi = {
     camera: ViewerCameraApi;
+    clipping: ViewerClippingApi;
+    colors: ViewerColorsApi;
     geometryUtils: ViewerGeometryUtilsApi;
     properties: ViewerPropertiesApi;
     selector: ViewerSelectorApi;
@@ -44,6 +65,8 @@ export type ViewerApi = {
 };
 export type ViewerSceneApi = {
     camera: ViewerCameraApi;
+    clipping: ViewerClippingApi;
+    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,16 +1,16 @@
 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, ViewerCameraGetIntersection, ViewerClippingApi, 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";
 export { IFCLoader } from "./Loaders/IFCLoader/IFCLoader";
 export type { IfcLoadedModels, IfcModelSource, } from "./Loaders/IFCLoader/IFCLoader";
-export { ModelGrids } from "./ModelGrids";
-export type { ModelGridAxis, ModelGridData, ModelGridPoint, ModelGridsProps, ModelGridsData, } from "./ModelGrids";
+export { ModelGrids } from "./utils/ModelGrids";
+export type { ModelGridAxis, ModelGridData, ModelGridPoint, ModelGridsProps, ModelGridsData, } from "./utils/ModelGrids";
 export { loader } from "./api/loader";
 export type { ViewerLoadedModels, ViewerModelSource } from "./api/loader";
-export { NavigationCube } from "./NavigationCube";
+export { NavigationCube } from "./utils/NavigationCube";
 export { createViewerStore } from "./store/ViewerStore";
 export { ViewerStoreProvider } from "./store/ViewerStoreProvider";
 export { useViewerStore, useViewerStoreApi } from "./store/useViewerStore";