WIP: Incorporate Xeokit-Viewer 1.2.9 [ci skip]

- No InspireTree
- No FontAwesome
- Working Xeokit Server implementation
- CSS based height of viewer canvas

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.7",
+    "@xeokit/xeokit-viewer": "^1.2.9",
     "URIjs": "^1.14.1",
     "amdefine": "^1.0.0",
     "angular-dragula": "^1.2.8",
@@ -91,8 +91,6 @@
     "glob": "^7.1.4",
     "hammerjs": "^2.0.8",
     "happypack": "^5.0.1",
-    "inspire-tree": "^5.0.1",
-    "inspire-tree-dom": "^4.0.4",
     "jquery": "^3.4.1",
     "jquery-ui": "git+https://github.com/jquery/jquery-ui.git#74f8a0ac952f6f45f773312292baef1c26d81300",
     "jquery-ujs": "^1.2.2",

frontend/src/app/init-vendors.js

@@ -84,9 +84,3 @@ 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

@@ -32,48 +32,52 @@ import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from '@angular/c
 import {DynamicBootstrapper} from "app/globals/dynamic-bootstrapper";
 
 import {XeokitServer} from "./xeokit-server";
+import {GonService} from "core-app/modules/common/gon/gon.service";
 
 @Component({
   selector: 'ifc-viewer',
   template: `
 <div id="myWrapper">
-
-    <nav id="myExplorer" class="active"></nav>
-    <div id="myContent">
+    <div id="myContent" class="ifc-model-viewer-container">
         <div id="myToolbar"></div>
-        <canvas id="myCanvas"></canvas>
+        <canvas id="myCanvas" class="xeokit-model-canvas"></canvas>
 <!--        <canvas [id]="'xeokit-model-canvas-' + ifcModelId" class="xeokit-model-canvas"></canvas>-->
     </div>
 </div>
 
 <canvas id="myNavCubeCanvas"></canvas>
 <canvas id="mySectionPlanesOverviewCanvas"></canvas>
-`,
-  styles: [
-    // '../../../../node_modules/inspire-tree-dom/dist/inspire-tree-light.css'
-  ],
-  // encapsulation: ViewEncapsulation.None
+`
 })
 export class IFCViewerComponent implements OnInit, OnDestroy {
   @Input() public ifcModelId:string;
   @Input() public xktFileUrl:string;
   @Input() public metadataFileUrl:string;
 
+  constructor(private Gon:GonService) {
+  }
+
   ngOnInit():void {
     import('@xeokit/xeokit-viewer/dist/main').then((XeokitViewerModule:any) => {
       let server = new XeokitServer();
       let viewerUI = new XeokitViewerModule.ViewerUI(server, {
         canvasElement: document.getElementById("myCanvas"), // WebGL canvas
-        explorerElement: document.getElementById("myExplorer"), // Left panel
+        explorerElement: jQuery(".xeokit-tree-panel")[0], // Left panel
         toolbarElement: document.getElementById("myToolbar"), // Toolbar
         navCubeCanvasElement: document.getElementById("myNavCubeCanvas"),
         sectionPlanesOverviewCanvasElement: document.getElementById("mySectionPlanesOverviewCanvas")
       });
+
+      viewerUI.on("queryPicked", (event:any) => {
+        const entity = event.entity; // Entity
+        const metaObject = event.metaObject; // MetaObject
+      });
+      viewerUI.loadProject(this.Gon.get('ifc_models', 'projects') as any [0]["id"]);
     });
   }
 
-  ngOnDestroy():void {
-  }
+  // tslint:disable-next-line:no-empty
+  ngOnDestroy():void {}
 }
 DynamicBootstrapper.register({
   selector: 'ifc-viewer', cls: IFCViewerComponent

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

@@ -18,10 +18,8 @@ class XeokitServer {
    * @param done
    * @param error
    */
-  getProjects(_done, _error) {
-    const url = this._dataDir + "/projects/index.json";
-    console.log("Loading database manifest: " + url);
-    utils.loadJSON(url, done, error);
+  getProjects(done, _error) {
+    done(window.gon.ifc_models.projects);
   }
 
   /**
@@ -30,8 +28,8 @@ class XeokitServer {
    * @param done
    * @param error
    */
-  getProject(_projectId, _done, _error) {
-    window.gon.ifc_models.models;
+  getProject(_projectId, done, _error) {
+    done({ models: window.gon.ifc_models.models });
   }
 
   /**

modules/ifc_models/app/assets/stylesheets/ifc_models/ifc_models.sass

@@ -1,30 +1,236 @@
+@import "fonts/openproject_icon_definitions"
+
+// The IFC viewer shall fill the viewport to the bottom.
+// This is different to how we style #content else where.
+.controller-ifc_models\/ifc_models.action-show_defaults
+  #content
+    display: flex
+    flex-direction: column
+    height: 100%
+
 .xeokit-tree-panel
-  padding-top: 25px
-  pointer-events: all
-  height: 100%
-  overflow-y: scroll
-  position: absolute
-  background-color: rgba(0, 0, 0, 0.1)
-  color: black
-  top: 0
-  z-index: 200000
-  float: left
-  left: 0
-  font-family: 'Roboto', sans-serif
-  font-size: 15px
-  user-select: none
-  -ms-user-select: none
-  -moz-user-select: none
-  -webkit-user-select: none
-  width: 350px
+  color: white
+  min-width: 320px
+
+  ul.components
+    padding: 20px 0
+    border-bottom: 1px solid #47748b
+
+  //ul
+  //  p
+  //    color: #fff
+  //    padding: 10px
+  //
+  //  li
+  //    a
+  //      padding: 0
+  //      font-size: 1.1em
+  //      display: block
+  //    &:hover
+  //      color: #7386D5
+  //      background: #fff
+  //
+  //  &.active > a, a[aria-expanded="true"]
+  //    color: #fff
+  //    background: #6d7fcc
+
+  label
+    color: white
 
 .xeokit-model-canvas
   width: 100%
   height: 100%
+  background: #ebebeb
 
 .ifc-model-viewer-container
+  flex-grow: 1
   position: relative
   width: 100%
-  height: 70vH
+  height: 100%
   border-top: 1px solid gray
-  border-bottom: 1px solid gray
+  border-bottom: 1px solid gray
+
+#myWrapper
+  height: 100%
+
+#myToolbar
+  position: fixed
+  width: 100%
+  align-items: center
+  justify-content: center
+  padding: 6px
+  height: 60px
+
+  // Use our own icon font instead of including Xeokit's FontAwesome
+  .fa-home::before
+    font-family: "openproject-icon-font" !important
+    @include icon-mixin-home
+
+#myNavCubeCanvas
+  position: absolute
+  width: 200px
+  height: 200px
+  bottom: 0
+  right: 0
+  z-index: 200000
+
+#mySectionPlanesOverviewCanvas
+  position: absolute
+  width: 250px
+  height: 250px
+  top: 300px
+  right: 50px
+  z-index: 200000
+
+/*  Tabs    */
+.xeokit-toolbar
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+
+.xeokit-btn-group
+  position: relative
+  display: inline-flex
+  vertical-align: middle
+  margin-right: .7rem !important
+
+.xeokit-btn
+  position: relative
+  flex: 1 1 auto
+  color: #007bff
+  background-color: transparent
+  text-align: center
+  vertical-align: middle
+  border: 1px solid #007bff
+  padding: .375rem .75rem
+  border-radius: .25rem
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
+  -webkit-appearance: button
+  overflow: visible
+  margin: 0
+  box-sizing: border-box
+  align-items: flex-start
+
+  &.disabled
+    opacity: .55
+
+  &.active
+    color: #fff
+    background-color: #007bff
+    border-color: #007bff
+
+.xeokit-tabs
+  line-height: 1.5
+  margin-bottom: 1.5em
+  padding: 0
+
+  &::before
+    display: table
+    content: ''
+    clear: both
+
+  &::after
+    display: table
+    content: ''
+    clear: both
+
+  .xeokit-tab
+    display: inline
+
+    &.active
+      .xeokit-tab-button
+        border-bottom: 2px solid white
+
+      .xeokit-tab-content
+        display: block
+
+  .xeokit-tab-button
+    background-color: transparent
+    color: #ffffff
+    display: inline-block
+    font-weight: bold
+    padding: 0.75em 5px
+    text-decoration: none
+    &:hover
+      color: #477dca
+      border-bottom: 2px solid white
+  
+    &:focus
+      outline: none
+
+  .xeokit-tab-content
+    display: none
+    padding: 1.5em 10px
+    width: 100%
+    height: 100%
+    float: left
+
+  .xeokit-btn-group
+    flex-wrap: wrap
+    justify-content: flex-start
+    margin-bottom: 10px
+
+  .xeokit-btn
+    position: relative
+    flex: 1 1 auto
+    color: #ffffff
+    background-color: transparent
+    text-align: center
+    vertical-align: middle
+    border: 1px solid #ffffff
+    padding: .375rem .75rem
+    border-radius: .25rem
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
+    -webkit-appearance: button
+    overflow: visible
+    margin: 0
+    box-sizing: border-box
+    align-items: flex-start
+
+    &.disabled
+      opacity: .55
+
+  &.active
+    .xeokit-tab-button
+      background-color: transparent
+      border: 1px solid #dcdcdc
+      border-bottom-color: #7386D5
+      margin-bottom: -1px
+
+.xeokit-objectsTab
+  ul
+    list-style: none
+    padding-left: 1.75em
+    li
+      border-bottom-left-radius: 0.75em
+      border-top-left-radius: 0.75em
+      margin: 2px 0
+      position: relative
+      a
+        background-color: #eee
+        border-radius: 50%
+        color: #000
+        display: inline-block
+        height: 1.5em
+        left: -1.5em
+        position: absolute
+        text-align: center
+        text-decoration: none
+        width: 1.5em
+        &:active
+          top: 1px
+    
+      a.plus
+        background-color: #ded
+    
+      a.minus
+        background-color: #eee
+    
+      span
+        display: inline-block
+
+  .top-right
+    font-size: small
+    position: fixed
+    right: 1em
+    top: 1em

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

@@ -119,12 +119,14 @@ module ::IFCModels
 
     def provision_gon
       gon.ifc_models = {
+        projects: [{ id: @project.identifier, name: @project.name }],
         models: @ifc_models.map do |ifc_model|
-          {
-            id: ifc_model.id,
-            name: ifc_model.title,
-            load: ifc_model.is_default
-          }
+          model = {}
+          model[:id] = ifc_model.id
+          model[:name] = ifc_model.title
+          model[:default] = ifc_model.is_default
+
+          model
         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] }]

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

@@ -1 +1 @@
-<div id="xeokit-tree-panel" class="treePanel xeokit-tree-panel"></div>
+<div class="xeokit-tree-panel active"></div>

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

@@ -45,9 +45,6 @@ See doc/COPYRIGHT.rdoc for more details.
 <% 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 %>