bimatter-viewer-react 0.0.1 → 0.0.3

package/README.md

@@ -1,73 +1,240 @@
-# React + TypeScript + Vite
+# bimatter-viewer-react
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+React viewer for Bimatter `.bmt` model.
 
-Currently, two official plugins are available:
+All about us you can see on our website [Bimatter](https://bimatter.ru/)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+Vanila js viewer core: [bimatter-viewer](https://www.npmjs.com/package/bimatter-viewer?activeTab=code)
 
-## React Compiler
+Write your issuse here: [GitHub](https://github.com/rkaeplive/bimatter-viewer/issues)
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Create A New React + Vite + TypeScript Project
 
-## Expanding the ESLint configuration
+```bash
+npm create vite@latest bimatter-viewer-demo -- --template react-ts
+cd bimatter-viewer-demo
+npm install
+```
+
+Install the viewer:
+
+```bash
+npm install bimatter-viewer-react
+```
+
+`react` and `react-dom` come with the Vite React template. Three.js, React Three Fiber, Drei, and BVH support are installed with `bimatter-viewer-react`.
+
+## Basic Usage
+
+Put your `.bmt` files in `public/models`:
+
+```text
+public/
+  models/
+    architecture.bmt
+    structure.bmt
+```
+
+Then replace `src/App.tsx`:
+
+```tsx
+import { Viewer } from "bimatter-viewer-react";
+
+function App() {
+    return (
+        <Viewer
+            modelUrls={["/models/architecture.bmt", "/models/structure.bmt"]}
+        />
+    );
+}
+
+export default App;
+```
+
+Replace `src/index.css` or add global sizing:
+
+```css
+html,
+body,
+#root {
+    height: 100%;
+    margin: 0;
+}
+```
+
+Run the app:
+
+```bash
+npm run dev
+```
+
+## Loader API
+
+You can load models yourself and pass parsed data to the viewer:
+
+```tsx
+import { useEffect, useState } from "react";
+import { loader, Viewer, 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;
+
+    return <Viewer modelsData={modelsData} />;
+}
+```
+
+`loader.loadModel` accepts paths or browser `File` objects:
+
+```ts
+await loader.loadModel(["/models/model.bmt"]);
+await loader.loadModel(files);
+```
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+`.ifc` files are recognized but not parsed yet.
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+## Viewer API
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+Use `ref` to call viewer actions:
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```tsx
+import { useRef } from "react";
+import { Viewer, type ViewerApi } from "bimatter-viewer-react";
+
+function App() {
+    const viewerRef = useRef<ViewerApi>(null);
+
+    return (
+        <>
+            <button onClick={() => viewerRef.current?.camera.fitCamera()}>
+                Fit
+            </button>
+            <button
+                onClick={() => viewerRef.current?.geometryUtils.hideSelected()}
+            >
+                Hide selected
+            </button>
+            <button
+                onClick={() =>
+                    viewerRef.current?.geometryUtils.isolateSelected()
+                }
+            >
+                Isolate selected
+            </button>
+            <button onClick={() => viewerRef.current?.geometryUtils.showAll()}>
+                Show all
+            </button>
+
+            <Viewer ref={viewerRef} modelUrls={["/models/model.bmt"]} />
+        </>
+    );
+}
+```
+
+Available API groups:
+
+```ts
+viewerRef.current?.camera.fitCamera();
+
+viewerRef.current?.geometryUtils.showAll();
+viewerRef.current?.geometryUtils.showByIds([1, 2, 3]);
+viewerRef.current?.geometryUtils.hideByIds([1, 2, 3]);
+viewerRef.current?.geometryUtils.hideSelected();
+viewerRef.current?.geometryUtils.isolateByIds([1, 2, 3]);
+viewerRef.current?.geometryUtils.isolateSelected();
+viewerRef.current?.geometryUtils.resetIsolation();
+viewerRef.current?.geometryUtils.getAllIds();
+
+viewerRef.current?.selector.setSelected(0, [10, 20], true);
+viewerRef.current?.selector.addSelected(0, [30]);
+viewerRef.current?.selector.removeSelected(0, [10]);
+viewerRef.current?.selector.resetSelection();
+viewerRef.current?.selector.getSelected();
+
+viewerRef.current?.utils.getUserDevice();
+viewerRef.current?.utils.getShowStats();
+viewerRef.current?.utils.setShowStats(true);
+```
+
+## Controlled Selection
+
+Selection can be controlled by your app state, including Zustand, Redux, or local React state.
+
+```tsx
+import { useState } from "react";
+import { Viewer, type ViewerSelection } from "bimatter-viewer-react";
+
+function App() {
+    const [selected, setSelected] = useState<ViewerSelection>({});
+
+    return (
+        <Viewer
+            modelUrls={["/models/model.bmt"]}
+            selected={selected}
+            onSelectedChange={setSelected}
+        />
+    );
+}
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+Selection format:
+
+```ts
+const selected = {
+    0: [101, 102],
+    1: [205],
+};
+```
+
+The key is `modelID`; the value is an array of element ids.
+
+## Stats And Profiling
+
+Enable FPS stats and console timing logs:
+
+```tsx
+<Viewer modelUrls={["/models/model.bmt"]} showStats />
+```
+
+Or via API:
+
+```ts
+viewerRef.current?.utils.setShowStats(true);
+```
+
+When enabled, the viewer logs timing for selection, hide, isolate, show, and reset actions.
+
+## File Upload Example
+
+```tsx
+import { useState } from "react";
+import { Viewer, loader, type ViewerLoadedModels } from "bimatter-viewer-react";
+
+function App() {
+    const [modelsData, setModelsData] = useState<ViewerLoadedModels>();
+
+    async function onFilesChange(files: FileList | null) {
+        if (!files?.length) return;
+        setModelsData(await loader.loadModel(Array.from(files)));
+    }
+
+    return (
+        <>
+            <input
+                accept=".bmt,.ifc"
+                multiple
+                type="file"
+                onChange={(event) => onFilesChange(event.target.files)}
+            />
+            {modelsData && <Viewer modelsData={modelsData} />}
+        </>
+    );
+}
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bimatter-viewer-react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
@@ -23,16 +23,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.6.1",
     "pako": "^2.1.0",
+    "three": "^0.184.0",
+    "three-mesh-bvh": "^0.9.9",
     "zustand": "^5.0.13"
   },
   "peerDependencies": {
-    "@react-three/drei": "^10.7.7",
-    "@react-three/fiber": "^9.6.1",
     "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "three": "^0.184.0",
-    "three-mesh-bvh": "^0.9.9"
+    "react-dom": "^19.2.5"
   },
   "devDependencies": {
     "@react-three/drei": "^10.7.7",