WIP: Incorporate Xeokit-Viewer 1.2.9 [ci skip]

- No InspireTree
- No FontAwesome
- Working Xeokit Server implementation
- CSS based height of viewer canvas
pull/7924/head
Wieland Lindenthal 5 years ago
parent bb2a74d4ce
commit cdc2ad6369
  1. 4
      frontend/package.json
  2. 6
      frontend/src/app/init-vendors.js
  3. 28
      frontend/src/app/modules/ifc_models/ifc-viewer.component.ts
  4. 10
      frontend/src/app/modules/ifc_models/xeokit-server.js
  5. 246
      modules/ifc_models/app/assets/stylesheets/ifc_models/ifc_models.sass
  6. 12
      modules/ifc_models/app/controllers/ifc_models/ifc_models_controller.rb
  7. 2
      modules/ifc_models/app/views/ifc_models/ifc_models/_panels.html.erb
  8. 3
      modules/ifc_models/app/views/ifc_models/ifc_models/show_defaults.html.erb

@ -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",

@ -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");

@ -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

@ -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 });
}
/**

@ -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

@ -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] }]

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

@ -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 %>

Loading…
Cancel
Save