Cleanup: Remove #my* DOM IDs and now obsolete entry component.

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

@@ -1,28 +0,0 @@
-import {Component, ElementRef, Input, OnInit} from '@angular/core';
-import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper";
-
-@Component({
-  selector: 'ifc-viewer-entry',
-  template: `
-    <ifc-viewer [ifcModelId]="ifcModelId"
-                [xktFileUrl]="xktFileUrl"
-                [metadataFileUrl]="metadataFileUrl"></ifc-viewer>
-  `
-})
-export class IFCViewerEntryComponent implements OnInit {
-  constructor(readonly elementRef:ElementRef) {
-  }
-
-  public ifcModelId:string;
-  public xktFileUrl:string;
-  public metadataFileUrl:string;
-
-  ngOnInit() {
-    const element = this.elementRef.nativeElement;
-    this.ifcModelId = element.dataset.ifcModelId;
-    this.xktFileUrl = element.dataset.xktFileUrl;
-    this.metadataFileUrl = element.dataset.metadataFileUrl;
-  }
-}
-
-DynamicBootstrapper.register({ selector: 'ifc-viewer-entry', cls: IFCViewerEntryComponent });

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

@@ -28,7 +28,7 @@
 
 /// <reference path="xeokit.d.ts" />
 
-import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, ElementRef, Input, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
 import {DynamicBootstrapper} from "app/globals/dynamic-bootstrapper";
 
 import {XeokitServer} from "./xeokit-server";
@@ -37,16 +37,13 @@ import {GonService} from "core-app/modules/common/gon/gon.service";
 @Component({
   selector: 'ifc-viewer',
   template: `
-<div id="myWrapper">
-    <div id="myContent" class="ifc-model-viewer-container">
-        <div id="myToolbar"></div>
-        <canvas id="myCanvas" class="xeokit-model-canvas"></canvas>
-<!--        <canvas [id]="'xeokit-model-canvas-' + ifcModelId" class="xeokit-model-canvas"></canvas>-->
-    </div>
+<div class="ifc-model-viewer-container">
+    <div class="xeokit-toolbar-container"></div>
+    <canvas class="xeokit-model-canvas"></canvas>
 </div>
 
-<canvas id="myNavCubeCanvas"></canvas>
-<canvas id="mySectionPlanesOverviewCanvas"></canvas>
+<canvas class="xeokit-nav-cube-canvas"></canvas>
+<canvas class="xeokit-section-planes-overview-canvas"></canvas>
 `
 })
 export class IFCViewerComponent implements OnInit, OnDestroy {
@@ -54,18 +51,21 @@ export class IFCViewerComponent implements OnInit, OnDestroy {
   @Input() public xktFileUrl:string;
   @Input() public metadataFileUrl:string;
 
-  constructor(private Gon:GonService) {
+  constructor(private Gon:GonService,
+              private elementRef:ElementRef) {
   }
 
   ngOnInit():void {
+    const element = jQuery(this.elementRef.nativeElement as HTMLElement);
+
     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
+        canvasElement: element.find(".xeokit-model-canvas")[0], // WebGL canvas
         explorerElement: jQuery(".xeokit-tree-panel")[0], // Left panel
-        toolbarElement: document.getElementById("myToolbar"), // Toolbar
-        navCubeCanvasElement: document.getElementById("myNavCubeCanvas"),
-        sectionPlanesOverviewCanvasElement: document.getElementById("mySectionPlanesOverviewCanvas")
+        toolbarElement: element.find(".xeokit-toolbar-container")[0], // Toolbar
+        navCubeCanvasElement: element.find(".xeokit-nav-cube-canvas")[0],
+        sectionPlanesOverviewCanvasElement: element.find(".xeokit-section-planes-overview-canvas")[0]
       });
 
       viewerUI.on("queryPicked", (event:any) => {

frontend/src/app/modules/ifc_models/openproject-ifc-models.module.ts

@@ -28,21 +28,17 @@
 
 import {NgModule} from "@angular/core";
 import {IFCViewerComponent} from "core-app/modules/ifc_models/ifc-viewer.component";
-import {IFCViewerEntryComponent} from "core-app/modules/ifc_models/ifc-viewer-entry.component";
 
 @NgModule({
   providers: [
   ],
   declarations: [
-    IFCViewerEntryComponent,
     IFCViewerComponent
   ],
   exports: [
-    IFCViewerEntryComponent,
     IFCViewerComponent
   ],
   entryComponents: [
-    IFCViewerEntryComponent,
     IFCViewerComponent
   ]
 })

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

@@ -34,10 +34,7 @@
   border-top: 1px solid gray
   border-bottom: 1px solid gray
 
-#myWrapper
-  height: 100%
-
-#myToolbar
+.xeokit-toolbar-container
   position: fixed
   width: 100%
   align-items: center
@@ -60,7 +57,7 @@
     @include icon-mixin-modules
 
 
-#myNavCubeCanvas
+.xeokit-nav-cube-canvas
   position: absolute
   width: 200px
   height: 200px
@@ -68,7 +65,7 @@
   right: 0
   z-index: 200000
 
-#mySectionPlanesOverviewCanvas
+.xeokit-section-planes-overview-canvas
   position: absolute
   width: 250px
   height: 250px

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

@@ -57,6 +57,6 @@ See doc/COPYRIGHT.rdoc for more details.
 
 <% if @ifc_model.converted? %>
 <div class="ifc-model-viewer-container">
-  <ifc-viewer-entry></ifc-viewer-entry>
+  <ifc-viewer></ifc-viewer>
 </div>
 <% end %>

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

@@ -62,6 +62,6 @@ See doc/COPYRIGHT.rdoc for more details.
 
 <% if @default_ifc_models.map(&:converted?).uniq == [true] %>
 <div class="ifc-model-viewer-container">
-  <ifc-viewer-entry></ifc-viewer-entry>
+  <ifc-viewer></ifc-viewer>
 </div>
 <% end %>