WIP: Integration xeokit-viewer 1.2.7 [ci skip]

frontend/package.json

@@ -63,7 +63,7 @@
     "@uirouter/angular": "^4.0.0",
     "@uirouter/core": "^5.0.23",
     "@xeokit/xeokit-sdk": "^0.5.1",
-    "@xeokit/xeokit-viewer": "^1.2.1",
+    "@xeokit/xeokit-viewer": "^1.2.7",
     "URIjs": "^1.14.1",
     "amdefine": "^1.0.0",
     "angular-dragula": "^1.2.8",

frontend/src/app/init-vendors.js

@@ -84,3 +84,9 @@ require('expose-loader?URI!URIjs');
 require('URIjs/src/URITemplate');
 
 require("expose-loader?I18n!../vendor/i18n");
+
+// Adding InspireTree temporarily here
+require("expose-loader?InspireTree!../../node_modules/inspire-tree/dist/inspire-tree.min.js");
+require("expose-loader?InspireTreeDOM!../../node_modules/inspire-tree-dom/dist/inspire-tree-dom.min.js");
+
+

frontend/src/app/modules/ifc_models/ifc-viewer.component.ts

@@ -36,12 +36,23 @@ import {XeokitServer} from "./xeokit-server";
 @Component({
   selector: 'ifc-viewer',
   template: `
-  <canvas [id]="'xeokit-model-canvas-' + ifcModelId" class="xeokit-model-canvas"></canvas>
+<div id="myWrapper">
+
+    <nav id="myExplorer" class="active"></nav>
+    <div id="myContent">
+        <div id="myToolbar"></div>
+        <canvas id="myCanvas"></canvas>
+<!--        <canvas [id]="'xeokit-model-canvas-' + ifcModelId" class="xeokit-model-canvas"></canvas>-->
+    </div>
+</div>
+
+<canvas id="myNavCubeCanvas"></canvas>
+<canvas id="mySectionPlanesOverviewCanvas"></canvas>
 `,
-  styleUrls: [
-    '../../../../node_modules/inspire-tree-dom/dist/inspire-tree-light.css'
+  styles: [
+    // '../../../../node_modules/inspire-tree-dom/dist/inspire-tree-light.css'
   ],
-  encapsulation: ViewEncapsulation.None
+  // encapsulation: ViewEncapsulation.None
 })
 export class IFCViewerComponent implements OnInit, OnDestroy {
   @Input() public ifcModelId:string;
@@ -49,9 +60,15 @@ export class IFCViewerComponent implements OnInit, OnDestroy {
   @Input() public metadataFileUrl:string;
 
   ngOnInit():void {
-    import('@xeokit/xeokit-viewer/src/ViewerUI').then((XeokitViewerModule:any) => {
+    import('@xeokit/xeokit-viewer/dist/main').then((XeokitViewerModule:any) => {
       let server = new XeokitServer();
-      // let viewer = new XeokitViewerModule.XeokitViewer(this.ifcModelId, this.xktFileUrl, this.metadataFileUrl);
+      let viewerUI = new XeokitViewerModule.ViewerUI(server, {
+        canvasElement: document.getElementById("myCanvas"), // WebGL canvas
+        explorerElement: document.getElementById("myExplorer"), // Left panel
+        toolbarElement: document.getElementById("myToolbar"), // Toolbar
+        navCubeCanvasElement: document.getElementById("myNavCubeCanvas"),
+        sectionPlanesOverviewCanvasElement: document.getElementById("mySectionPlanesOverviewCanvas")
+      });
     });
   }
 

frontend/src/app/modules/ifc_models/xeokit-server.js

@@ -1,5 +1,4 @@
-import {utils} from "/node_modules/@xeokit/xeokit-sdk/src/viewer/scene/utils.js";
-
+import {utils} from "@xeokit/xeokit-sdk/src/viewer/scene/utils"
 /**
  * Default server client which loads content via HTTP from the file system.
  */

frontend/src/app/modules/ifc_models/xeokit.d.ts

@@ -1 +1,3 @@
 declare module '@xeokit/xeokit-viewer/src/ViewerUI';
+declare module '@xeokit/xeokit-viewer/node_modules/@xeokit/xeokit-sdk/src/viewer/scene/utils';
+declare module '@xeokit/xeokit-viewer/dist/main';

modules/ifc_models/app/controllers/ifc_models/ifc_models_controller.rb

@@ -126,8 +126,8 @@ module ::IFCModels
             load: ifc_model.is_default
           }
         end,
-        xkt_attachment_ids: Hash[@ifc_models.map { |ifc_model| [@ifc_model.id, @ifc_model.xkt_attachment.id] }],
-        metadata_attachment_ids: Hash[@ifc_models.map { |ifc_model| [@ifc_model.id, @ifc_model.metadata_attachment.id] }]
+        xkt_attachment_ids: Hash[@ifc_models.map { |ifc_model| [ifc_model.id, ifc_model.xkt_attachment.id] }],
+        metadata_attachment_ids: Hash[@ifc_models.map { |ifc_model| [ifc_model.id, ifc_model.metadata_attachment.id] }]
       }
     end
 

modules/ifc_models/app/views/ifc_models/ifc_models/show_defaults.html.erb

@@ -36,7 +36,6 @@ See doc/COPYRIGHT.rdoc for more details.
   <%= stylesheet_link_tag "ifc_models/ifc_models", media: 'all' %>
 <% end %>
 
-
 <%= toolbar title: t('ifc_models.label_default_ifc_models') do %>
   <li class="toolbar-item">
     <%= link_to(ifc_models_project_ifc_models_path(@project), class: 'button', accesskey: accesskey(:edit)) do %>
@@ -45,8 +44,10 @@ See doc/COPYRIGHT.rdoc for more details.
   </li>
 <% end %>
 
-
 <% content_for :header_tags do %>
+  <%#= javascript_include_tag "/frontend/node_modules/inspire-tree/dist/inspire-tree.min.js.gz" %>
+  <%#= javascript_include_tag "/frontend/node_modules/inspire-tree-dom/dist/inspire-tree-dom.min.js.gz" %>
+  <%#= stylesheet_link_tag "/frontend/node_modules/inspire-tree-dom/dist/inspire-tree-dark.min.css.gz" %>
   <%= include_gon(nonce: content_security_policy_script_nonce) %>
 <% end %>