Initial import of NODEDC BIM Viewer

2026-06-04 13:25:42 +03:00
commit 9aaf82862f
2075 changed files with 3592575 additions and 0 deletions
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>xeokit-bim-viewer</title>
+    <style>
+      html,
+      body {
+        touch-action: none;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+      }
+
+      .heading {
+        text-align: center;
+      }
+
+      .container {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .project-selector {
+        margin: 20px 0;
+        padding: 8px;
+        font-size: 16px;
+        min-width: 200px;
+      }
+
+      .model-selector {
+        margin: 20px 0;
+        padding: 8px;
+        font-size: 16px;
+        min-width: 200px;
+      }
+
+      .viewer {
+        width: 80%;
+        height: 80%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script>
+      let bimViewerComponent = null;
+      let select = null;
+      let modelSelect = null;
+      let projectModels = new Map();
+      let isProgrammaticModelChange = false;
+
+      document.addEventListener('DOMContentLoaded', async () => {
+        select = document.getElementById('projectSelector');
+        modelSelect = document.getElementById('modelSelector');
+        bimViewerComponent = document.querySelector("xeokit-bim-viewer");
+        
+        try {
+          const response = await fetch('./app/data/projects/index.json');
+          const projectsData = await response.json();
+          
+          if (projectsData.projects) {
+            projectsData.projects.forEach(project => {
+              const option = document.createElement('option');
+              option.value = project.id;
+              option.textContent = project.name;
+              select.appendChild(option);
+            });
+          }
+
+          await Promise.all(projectsData.projects.map(async (project) => {
+            try {
+              const projectResponse = await fetch(`./app/data/projects/${project.id}/index.json`);
+              const projectData = await projectResponse.json();
+              projectModels.set(project.id, projectData.models || []);
+            } catch (error) {
+              console.error(`Error loading models for project ${project.id}:`, error);
+              projectModels.set(project.id, []);
+            }
+          }));
+
+          if (select.value) {
+            const initialProjectId = select.value;
+            const initialModels = projectModels.get(initialProjectId) || [];
+            
+            initialModels.forEach(model => {
+              const option = document.createElement('option');
+              option.value = model.id;
+              option.textContent = model.name;
+              modelSelect.appendChild(option);
+            });
+            
+            if (initialModels.length > 0) {
+              const firstModel = initialModels[0];
+              modelSelect.value = firstModel.id;
+              bimViewerComponent.setAttribute('projectId', initialProjectId);
+              setTimeout(() => {
+                bimViewerComponent.setAttribute('modelId', firstModel.id);
+              }, 500);
+            }
+            modelSelect.disabled = false;
+          }
+        } catch (error) {
+          console.error('Error loading projects data:', error);
+        }
+
+        select.addEventListener('change', onProjectChange);
+        modelSelect.addEventListener('change', onModelChange);
+      });
+
+      async function onProjectChange() {
+        const newProjectId = select.value;
+        modelSelect.disabled = true;
+        modelSelect.innerHTML = '';
+        
+        isProgrammaticModelChange = true;
+        bimViewerComponent.setAttribute('projectId', newProjectId);
+        
+        const models = projectModels.get(newProjectId) || [];
+        
+        models.forEach(model => {
+          const option = document.createElement('option');
+          option.value = model.id;
+          option.textContent = model.name;
+          modelSelect.appendChild(option);
+        });
+        
+        if (models.length > 0) {
+          const firstModel = models[0];
+          modelSelect.value = firstModel.id;
+          bimViewerComponent.setAttribute('modelId', firstModel.id);
+        }
+        
+        modelSelect.disabled = false;
+        setTimeout(() => {
+          isProgrammaticModelChange = false;
+        }, 0);
+      }
+
+      function onModelChange() {
+        if (isProgrammaticModelChange) return;
+        
+        const selectedModelId = modelSelect.value;
+        if (selectedModelId) {
+          bimViewerComponent.setAttribute('modelId', selectedModelId);
+        } else {
+          bimViewerComponent.removeAttribute('modelId');
+        }
+      }
+
+      function onObjectSelected(event) {
+        console.log(`name: ${event.detail.name}, id: ${event.detail.id}`);
+      }
+    </script>
+    <script type="module">
+      import { BimViewerWebComponent } from "./dist/xeokit-bim-viewer.es.js";
+  
+      BimViewerWebComponent.register();
+    </script>
+
+    <h1 class="heading">My BIM Viewer</h1>
+    <div class="container">
+      <select id="projectSelector" class="project-selector">
+      </select>
+      <select id="modelSelector" class="model-selector" disabled>
+      </select>
+      <xeokit-bim-viewer
+        class="viewer"
+        dataDir="./app/data/"
+        tab="models"
+        configs="showSpaces:true"
+        onobjectselected="onObjectSelected(event)"
+        >
+      </xeokit-bim-viewer>
+    </div>
+  </body>
+</html>