bimatter-viewer-react 0.1.1 → 0.1.3

package/README.md

@@ -30,18 +30,26 @@ Install the viewer:
 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` or `.ifc` files in `public/models`:
 
 ```text
 public/
-  models/
+models/
     architecture.bmt
     structure.bmt
-    architecture.ifc
+```
+
+Replace `src/index.css` or add global sizing:
+
+```css
+html,
+body,
+#root {
+    height: 100%;
+    margin: 0;
+}
 ```
 
 Then replace `src/App.tsx`:
@@ -60,17 +68,6 @@ function App() {
 export default App;
 ```
 
-Replace `src/index.css` or add global sizing:
-
-```css
-html,
-body,
-#root {
-    height: 100%;
-    margin: 0;
-}
-```
-
 Run the app:
 
 ```bash
@@ -79,16 +76,18 @@ npm run dev
 
 ## IFC Models
 
-IFC loading is based on `web-ifc`. The WASM parser file must be available from the public assets folder:
-
 ```text
 public/
-  ifc-parser.wasm
-  models/
+    ifc-parser.wasm
+models/
     architecture.ifc
 ```
 
-For Vite apps, files in `public` are served from the app root, so `public/ifc-parser.wasm` is available as `/ifc-parser.wasm`. If you copy the file from `web-ifc`, rename `web-ifc.wasm` to `ifc-parser.wasm`.
+For loading ifc files you need to copy ifc parser wasm file into your public folder, you can take it from bimatter-viewer-react/public/ifc-parser.wasm or by command:
+
+```bash
+cp node_modules/bimatter-viewer-react/public/ifc-parser.wasm public/ifc-parser.wasm
+```
 
 After that, IFC models can be loaded the same way as BMT models:
 
@@ -140,45 +139,61 @@ await loader.loadModel(["/models/model.bmt", "/models/model.ifc"]);
 await loader.loadModel(files);
 ```
 
-# Viewer API
-
-Use `ref` to call viewer actions:
+## File Upload Example
 
 ```tsx
-import { useRef } from "react";
-import { Viewer, type ViewerApi } from "bimatter-viewer-react";
+import { useState } from "react";
+import { Viewer, loader, type ViewerLoadedModels } from "bimatter-viewer-react";
 
 function App() {
-    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)));
+    }
 
     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"]} />
+            <input
+                accept=".bmt,.ifc"
+                multiple
+                type="file"
+                onChange={(event) => onFilesChange(event.target.files)}
+            />
+            {modelsData && <Viewer modelsData={modelsData} />}
         </>
     );
 }
 ```
 
-## Available API groups:
+## HotKeys
+
+### Selection
+
+`Left Click` - Select element
+
+`Shift + Left Click` - Multi-select element
+
+`Ctrl + Left Click` - Unselect element
+
+`Shift + Drag Right` - Select elements fully inside rectangle
+
+`Shift + Drag Left` - Select elements intersected by rectangle
+
+`Ctrl + Drag Right` - Unselect elements fully inside rectangle
+
+`Ctrl + Drag Left` - Unselect elements intersected by rectangle
+
+### Visibility
+
+`C` - Clear hidden / isolated elements
+
+`H` - Hide selected elements
+
+`I` - Isolate selected elements
+
+# Viewer API:
 
 ```ts
 viewerRef.current?.camera.fitCamera();
@@ -214,29 +229,39 @@ viewerRef.current?.utils.setGridAxesVisibility({ top: false, bottom: true });
 viewerRef.current?.utils.setGridAxisVisibility("left", false);
 ```
 
-## File Upload Example
+## Geometry Utils
+
+Use `ref` to call viewer actions:
 
 ```tsx
-import { useState } from "react";
-import { Viewer, loader, type ViewerLoadedModels } from "bimatter-viewer-react";
+import { useRef } from "react";
+import { Viewer, type ViewerApi } 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)));
-    }
+    const viewerRef = useRef<ViewerApi>(null);
 
     return (
         <>
-            <input
-                accept=".bmt,.ifc"
-                multiple
-                type="file"
-                onChange={(event) => onFilesChange(event.target.files)}
-            />
-            {modelsData && <Viewer modelsData={modelsData} />}
+            <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"]} />
         </>
     );
 }
@@ -315,29 +340,3 @@ viewerRef.current?.utils.setGridAxesVisibility({
     top: false,
 });
 ```
-
-## HotKeys
-
-### Selection
-
-`Left Click` - Select element
-
-`Shift + Left Click` - Multi-select element
-
-`Ctrl + Left Click` - Unselect element
-
-`Shift + Drag Right` - Select elements fully inside rectangle
-
-`Shift + Drag Left` - Select elements intersected by rectangle
-
-`Ctrl + Drag Right` - Unselect elements fully inside rectangle
-
-`Ctrl + Drag Left` - Unselect elements intersected by rectangle
-
-### Visibility
-
-`C` - Clear hidden / isolated elements
-
-`H` - Hide selected elements
-
-`I` - Isolate selected elements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bimatter-viewer-react",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "PolyForm-Noncommercial-1.0.0",
   "type": "module",
   "main": "./lib/index.js",
@@ -10,10 +10,12 @@
     ".": {
       "types": "./lib/index.d.ts",
       "import": "./lib/index.js"
-    }
+    },
+    "./ifc-parser.wasm": "./public/ifc-parser.wasm"
   },
   "files": [
-    "lib"
+    "lib",
+    "public/ifc-parser.wasm"
   ],
   "scripts": {
     "dev": "vite",