Select a single element in order to see object properties." - return; - }; - - domNode.innerHTML = ""; - - oid = oid[0]; - - if (oid.indexOf(':') !== -1) { - oid = oid.split(':'); - var o = models[oid[0]].model.objects[oid[1]]; - - renderAttributes(o); - - o.getIsDefinedBy(function(isDefinedBy){ - if (isDefinedBy.getType() == "IfcRelDefinesByProperties") { - isDefinedBy.getRelatingPropertyDefinition(function(pset){ - if (pset.getType() == "IfcPropertySet") { - renderPSet(pset); - } - }); - } - }); - } else { - var o = models["1"].model.objects[oid]; - renderAttributes(o); - o.properties.forEach(function(pset) { - renderPSet(pset); - }); - } - }; - - self.setSelected([]); - }; - - MetaDataRenderer.prototype = Object.create(EventHandler.prototype); - - return MetaDataRenderer; - -}); \ No newline at end of file +import EventHandler from './EventHandler'; +import * as Request from './Request'; +import Utils from './Utils'; + +class Row { + constructor(args) { + this.args = args; + this.num_names = 0; + this.num_values = 0; + } + setName(name) { + if (this.num_names++ > 0) { + this.args.name.appendChild(document.createTextNode(" ")); + } + this.args.name.appendChild(document.createTextNode(name)); + } + + setValue(value) { + if (this.num_values++ > 0) { + this.args.value.appendChild(document.createTextNode(", ")); + } + this.args.value.appendChild(document.createTextNode(value)); + } +} + +class Section { + constructor(args) { + this.args = args; + + this.div = document.createElement("div"); + this.nameh = document.createElement("h3"); + this.table = document.createElement("table"); + + this.tr = document.createElement("tr"); + this.table.appendChild(this.tr); + + this.nameth = document.createElement("th"); + this.valueth = document.createElement("th"); + + this.nameth.appendChild(document.createTextNode("Name")); + this.valueth.appendChild(document.createTextNode("Value")); + this.tr.appendChild(this.nameth); + this.tr.appendChild(this.valueth); + + this.div.appendChild(this.nameh); + this.div.appendChild(this.table); + + args.domNode.appendChild(this.div); + + this.setSelected([]); + } + + setName(name) { + this.nameh.appendChild(document.createTextNode(name)); + } + + addRow() { + const tr = document.createElement("tr"); + this.table.appendChild(tr); + const nametd = document.createElement("td"); + const valuetd = document.createElement("td"); + tr.appendChild(nametd); + tr.appendChild(valuetd); + return new Row({ name: nametd, value: valuetd }); + } +} + + +function loadModelFromSource(src) { + return new Promise((resolve, reject) => { + Request.make({ url: src }).then((xml) => { + const json = Utils.XmlToJson(xml, { 'Name': 'name', 'id': 'guid' }); + + const psets = Utils.FindNodeOfType(json, "properties")[0]; + const project = Utils.FindNodeOfType(json, "decomposition")[0].children[0]; + const types = Utils.FindNodeOfType(json, "types")[0]; + + const objects = {}; + const typeObjects = {}; + const properties = {}; + psets.children.forEach((pset) => { + properties[pset.guid] = pset; + }); + + const visitObject = (parent, node) => { + const props = []; + const o = (parent && parent.ObjectPlacement) ? objects : typeObjects; + + if (node["xlink:href"]) { + if (!o[parent.guid]) { + const p = Utils.Clone(parent); + p.GlobalId = p.guid; + o[p.guid] = p; + o[p.guid].properties = []; + } + const g = node["xlink:href"].substr(1); + const p = properties[g]; + if (p) { + o[parent.guid].properties.push(p); + } else if (typeObjects[g]) { + // If not a pset, it is a type, so concatenate type props + o[parent.guid].properties = o[parent.guid].properties.concat(typeObjects[g].properties); + } + } + node.children.forEach((n) => { + visitObject(node, n); + }); + }; + + visitObject(null, types); + visitObject(null, project); + + resolve({ model: { objects: objects, source: 'XML' } }); + }); + }); +} + +export default class MetaDataRenderer extends EventHandler { + constructor(args) { + super(); + this.args = args; + + this.models = {}; + this.domNode = document.getElementById(this.args.domNode); + } + + addModel(args) { + return new Promise((resolve, reject) => { + if (args.model) { + this.models[args.id] = args.model; + resolve(args.model); + } else { + loadModelFromSource(args.src).then((m) => { + this.models[args.id] = m; + resolve(m); + }); + } + }); + } + + renderAttributes(elem) { + const s = new Section({ domNode: this.domNode }); + s.setName(elem.type || elem.getType()); + + ["GlobalId", "Name", "OverallWidth", "OverallHeight", "Tag"].forEach((k) => { + let v = elem[k]; + if (typeof (v) === 'undefined') { + const fn = elem["get" + k]; + if (fn) { + v = fn.apply(elem); + } + } + if (typeof (v) !== 'undefined') { + const r = s.addRow(); + r.setName(k); + r.setValue(v); + } + }); + return s; + } + + renderPSet(pset) { + const s = new Section({ domNode: this.domNode }); + if (pset.name && pset.children) { + s.setName(pset.name); + pset.children.forEach((v) => { + const r = s.addRow(); + r.setName(v.name); + r.setValue(v.NominalValue); + }); + } else { + pset.getName((name) => { + s.setName(name); + }); + const render = (prop, index, row) => { + const r = row || s.addRow(); + prop.getName((name) => { + r.setName(name); + }); + if (prop.getNominalValue) { + prop.getNominalValue((value) => { + r.setValue(value._v); + }); + } + if (prop.getHasProperties) { + prop.getHasProperties((prop, index) => { + render(prop, index, r); + }); + } + }; + pset.getHasProperties(render); + } + return s; + } + + setSelected(oid) { + if (oid.length !== 1) { + this.domNode.innerHTML = "
Select a single element in order to see object properties."; + return; + } + + this.domNode.innerHTML = ""; + + oid = oid[0]; + + if (oid.indexOf(':') !== -1) { + oid = oid.split(':'); + const o = this.models[oid[0]].model.objects[oid[1]]; + + this.renderAttributes(o); + + o.getIsDefinedBy((isDefinedBy) => { + if (isDefinedBy.getType() == "IfcRelDefinesByProperties") { + isDefinedBy.getRelatingPropertyDefinition((pset) => { + if (pset.getType() == "IfcPropertySet") { + this.renderPSet(pset); + } + }); + } + }); + } else { + const o = this.models["1"].model.objects[oid]; + this.renderAttributes(o); + o.properties.forEach((pset) => { + this.renderPSet(pset); + }); + } + } + +} diff --git a/bimsurfer/src/Notifier.js b/bimsurfer/src/Notifier.js index beb8f97..938e79d 100644 --- a/bimsurfer/src/Notifier.js +++ b/bimsurfer/src/Notifier.js @@ -1,35 +1,29 @@ -define(function() { - - function Notifier() { - this.setSelector = function(selector) { - console.log('setSelector', arguments); - }; +export default class Notifier { + setSelector(selector) { + console.log('setSelector', arguments); + } - this.clear = function() { - console.log('clear', arguments); - }; + clear() { + console.log('clear', arguments); + } - this.resetStatus = function(){ - console.log('status', arguments); - }; + resetStatus() { + console.log('status', arguments); + } - this.resetStatusQuick = function(){ - console.log('status', arguments); - }; + resetStatusQuick() { + console.log('status', arguments); + } - this.setSuccess = function(status, timeToShow) { - console.log('success', arguments); - }; - - this.setInfo = function(status, timeToShow) { - console.log('info', arguments); - }; + setSuccess(status, timeToShow) { + console.log('success', arguments); + } - this.setError = function(error) { - console.log('error', arguments); - }; - }; - - return Notifier; - -}); \ No newline at end of file + setInfo(status, timeToShow) { + console.log('info', arguments); + } + + setError(error) { + console.log('error', arguments); + } +} diff --git a/bimsurfer/src/PreloadQuery.js b/bimsurfer/src/PreloadQuery.js index 858129e..9631559 100644 --- a/bimsurfer/src/PreloadQuery.js +++ b/bimsurfer/src/PreloadQuery.js @@ -1,4 +1,4 @@ -define({ +const PreloadQuery = { defines: { Representation: { type: "IfcProduct", @@ -32,51 +32,53 @@ define({ } }, queries: [ - { + { type: "IfcProject", includes: [ "IsDecomposedByDefine", "ContainsElementsDefine" ] - }, - { - type: "IfcRepresentation", - includeAllSubtypes: true - }, - { - type: "IfcProductRepresentation" - }, - { - type: "IfcPresentationLayerWithStyle" - }, - { - type: "IfcProduct", - includeAllSubtypes: true - }, - { - type: "IfcProductDefinitionShape" - }, - { - type: "IfcPresentationLayerAssignment" - }, - { - type: "IfcRelAssociatesClassification", - includes: [ - { - type: "IfcRelAssociatesClassification", - field: "RelatedObjects" - }, - { - type: "IfcRelAssociatesClassification", - field: "RelatingClassification" - } - ] - }, - { - type: "IfcSIUnit" - }, - { - type: "IfcPresentationLayerAssignment" - } + }, + { + type: "IfcRepresentation", + includeAllSubtypes: true + }, + { + type: "IfcProductRepresentation" + }, + { + type: "IfcPresentationLayerWithStyle" + }, + { + type: "IfcProduct", + includeAllSubtypes: true + }, + { + type: "IfcProductDefinitionShape" + }, + { + type: "IfcPresentationLayerAssignment" + }, + { + type: "IfcRelAssociatesClassification", + includes: [ + { + type: "IfcRelAssociatesClassification", + field: "RelatedObjects" + }, + { + type: "IfcRelAssociatesClassification", + field: "RelatingClassification" + } + ] + }, + { + type: "IfcSIUnit" + }, + { + type: "IfcPresentationLayerAssignment" + } ] -}); +}; + +export default PreloadQuery; \ No newline at end of file diff --git a/bimsurfer/src/Request.js b/bimsurfer/src/Request.js index e361234..28e43a6 100644 --- a/bimsurfer/src/Request.js +++ b/bimsurfer/src/Request.js @@ -1,25 +1,17 @@ -define(function() { - - function make(args) { - return new Promise(function (resolve, reject) { - var xhr = new XMLHttpRequest(); - xhr.open(args.method || "GET", args.url, true); - xhr.onload = function (e) { - console.log(args.url, xhr.readyState, xhr.status) - if (xhr.readyState === 4) { - if (xhr.status === 200) { - resolve(xhr.responseXML); - } else { - reject(xhr.statusText); - } - } - }; - xhr.send(null); - }); - } - - return { - 'Make': make - }; - -}); \ No newline at end of file +export function make(args) { + return new Promise(function (resolve, reject) { + const xhr = new XMLHttpRequest(); + xhr.open(args.method || "GET", args.url, true); + xhr.onload = (e) => { + console.log(args.url, xhr.readyState, xhr.status); + if (xhr.readyState === 4) { + if (xhr.status === 200) { + resolve(xhr.responseXML); + } else { + reject(xhr.statusText); + } + } + }; + xhr.send(null); + }); +} diff --git a/bimsurfer/src/StaticTreeRenderer.js b/bimsurfer/src/StaticTreeRenderer.js index e82ab00..ab21dca 100644 --- a/bimsurfer/src/StaticTreeRenderer.js +++ b/bimsurfer/src/StaticTreeRenderer.js @@ -1,158 +1,158 @@ -define(["./EventHandler", "./Request", "./Utils"], function(EventHandler, Request, Utils) { - - function StaticTreeRenderer(args) { - - var self = this; - EventHandler.call(this); - - var TOGGLE = self.TOGGLE = 0; - var SELECT = self.SELECT = 1; - var SELECT_EXCLUSIVE = self.SELECT_EXCLUSIVE = 2; - var DESELECT = self.DESELECT = 3; - - var fromXml = false; - - var domNodes = {}; - var selectionState = {}; - - this.getOffset = function(elem) { - var reference = document.getElementById(args['domNode']); - var y = 0; - while (true) { - y += elem.offsetTop; - if (elem == reference) { - break; - } - elem = elem.offsetParent; - } - return y; - }; - - this.setSelected = function(ids, mode) { - if (mode == SELECT_EXCLUSIVE) { - self.setSelected(self.getSelected(true), DESELECT); - } - - ids.forEach(function(id) { - var s = null; - if (mode == TOGGLE) { - s = selectionState[id] = !selectionState[id]; - } else if (mode == SELECT || mode == SELECT_EXCLUSIVE) { - s = selectionState[id] = true; - } else if (mode == DESELECT) { - s = selectionState[id] = false; - } - - domNodes[id].className = s ? "label selected" : "label"; - }); - - var desiredViewRange = self.getSelected().map(function(id) { - return self.getOffset(domNodes[id]); - }); - - if (desiredViewRange.length) { - desiredViewRange.sort() - desiredViewRange = [desiredViewRange[0], desiredViewRange[desiredViewRange.length-1]]; - - var domNode = document.getElementById(args['domNode']); - var currentViewRange = [domNode.scrollTop, domNode.scrollTop + domNode.offsetHeight]; - - if (!(desiredViewRange[0] >= currentViewRange[0] && desiredViewRange[1] <= currentViewRange[1])) { - if ( (desiredViewRange[1] - desiredViewRange[0]) > (currentViewRange[1] - currentViewRange[0]) ) { - domNode.scrollTop = desiredViewRange[0]; - } else { - var l = parseInt((desiredViewRange[1] + desiredViewRange[0]) / 2. - (currentViewRange[1] - currentViewRange[0]) / 2., 10); - l = Math.max(l, 0); - l = Math.min(l, domNode.scrollHeight - domNode.offsetHeight); - domNode.scrollTop = l; - } - } - } - - this.fire("selection-changed", [self.getSelected(true)]) - }; - - this.getSelected = function(b) { - b = typeof(b) === 'undefined' ? true: !!b; - var l = []; - Object.keys(selectionState).forEach(function (k) { - if (!!selectionState[k] === b) { - l.push(k); - } - }); - return l; - }; - - var models = []; - - this.addModel = function(args) { - models.push(args); - if (args.src) { - fromXml = true; - } - }; - - this.qualifyInstance = function(modelId, id) { - if (fromXml) { - return id; - } else { - return modelId + ":" + id; - } - }; - - this.build = function() { - var build = function(modelId, d, n) { - var qid = self.qualifyInstance(modelId, fromXml ? n.guid : n.id); - var label = document.createElement("div"); - var children = document.createElement("div"); - - label.className = "label"; - label.appendChild(document.createTextNode(n.name || n.guid)); - d.appendChild(label); - children.className = "children"; - d.appendChild(children); - domNodes[qid] = label; - - label.onclick = function(evt) { - evt.stopPropagation(); - evt.preventDefault(); - self.setSelected([qid], evt.shiftKey ? TOGGLE : SELECT_EXCLUSIVE); - self.fire("click", [qid, self.getSelected(true)]); - return false; - }; - - for (var i = 0; i < (n.children || []).length; ++i) { - var child = n.children[i]; - if (fromXml) { - if (child["xlink:href"]) continue; - if (child.type === "IfcOpeningElement") continue; - } - var d2 = document.createElement("div"); - d2.className = "item"; - children.appendChild(d2); - build(modelId, d2, child); - } - } - models.forEach(function(m) { - var d = document.createElement("div"); - d.className = "item"; - if (m.tree) { - build(m.id, d, m.tree); - } else if (m.src) { - Request.Make({url: m.src}).then(function(xml) { - var json = Utils.XmlToJson(xml, {'Name': 'name', 'id': 'guid'}); - var project = Utils.FindNodeOfType(json.children[0], "decomposition")[0].children[0]; - build(m.id || i, d, project); - }); - } - document.getElementById(args['domNode']).appendChild(d); - }); - } - - }; - - StaticTreeRenderer.prototype = Object.create(EventHandler.prototype); - - return StaticTreeRenderer; - -}); \ No newline at end of file +import EventHandler from './EventHandler'; +import * as Request from './Request'; +import Utils from './Utils'; + +export default class StaticTreeRenderer extends EventHandler { + constructor(args) { + super(); + + this.args = args; + this.TOGGLE = 0; + this.SELECT = 1; + this.SELECT_EXCLUSIVE = 2; + this.DESELECT = 3; + + this.fromXml = false; + + this.domNodes = {}; + this.selectionState = {}; + this.models = []; + } + + getOffset(elem) { + const reference = document.getElementById(this.args.domNode); + let y = 0; + + while (true) { + y += elem.offsetTop; + if (elem == reference) { + break; + } + elem = elem.offsetParent; + } + return y; + } + + setSelected(ids, mode) { + if (mode == this.SELECT_EXCLUSIVE) { + this.setSelected(this.getSelected(true), this.DESELECT); + } + + ids.forEach((id) => { + let s = null; + + if (mode == this.TOGGLE) { + s = this.selectionState[id] = !this.selectionState[id]; + } else if (mode == this.SELECT || mode == this.SELECT_EXCLUSIVE) { + s = this.selectionState[id] = true; + } else if (mode == this.DESELECT) { + s = this.selectionState[id] = false; + } + + this.domNodes[id].className = s ? "label selected" : "label"; + }); + + let desiredViewRange = this.getSelected().map((id) => { + return this.getOffset(this.domNodes[id]); + }); + + if (desiredViewRange.length) { + desiredViewRange.sort(); + desiredViewRange = [desiredViewRange[0], desiredViewRange[desiredViewRange.length - 1]]; + + const domNode = document.getElementById(this.args.domNode); + let currentViewRange = [domNode.scrollTop, domNode.scrollTop + domNode.offsetHeight]; + + if (!(desiredViewRange[0] >= currentViewRange[0] && desiredViewRange[1] <= currentViewRange[1])) { + if ((desiredViewRange[1] - desiredViewRange[0]) > (currentViewRange[1] - currentViewRange[0])) { + domNode.scrollTop = desiredViewRange[0]; + } else { + let l = parseInt((desiredViewRange[1] + desiredViewRange[0]) / 2.0 - (currentViewRange[1] - currentViewRange[0]) / 2.0, 10); + + l = Math.max(l, 0); + l = Math.min(l, domNode.scrollHeight - domNode.offsetHeight); + domNode.scrollTop = l; + } + } + } + + this.fire("selection-changed", [this.getSelected(true)]); + } + + getSelected(b) { + b = typeof (b) === 'undefined' ? true : !!b; + const l = []; + Object.keys(this.selectionState).forEach((k) => { + if (!!this.selectionState[k] === b) { + l.push(k); + } + }); + return l; + } + + addModel(args) { + this.models.push(args); + if (args.src) { + this.fromXml = true; + } + } + + qualifyInstance(modelId, id) { + if (this.fromXml) { + return id; + } else { + return modelId + ":" + id; + } + } + + build() { + const build = (modelId, d, n) => { + const qid = this.qualifyInstance(modelId, this.fromXml ? n.guid : n.id); + const label = document.createElement("div"); + const children = document.createElement("div"); + + label.className = "label"; + label.appendChild(document.createTextNode(n.name || n.guid)); + d.appendChild(label); + children.className = "children"; + d.appendChild(children); + this.domNodes[qid] = label; + + label.onclick = (evt) => { + evt.stopPropagation(); + evt.preventDefault(); + this.setSelected([qid], evt.shiftKey ? this.TOGGLE : this.SELECT_EXCLUSIVE); + this.fire("click", [qid, this.getSelected(true)]); + return false; + }; + + for (let i = 0; i < (n.children || []).length; ++i) { + const child = n.children[i]; + if (this.fromXml) { + if (child["xlink:href"]) { continue; } + if (child.type === "IfcOpeningElement") { continue; } + } + const d2 = document.createElement("div"); + d2.className = "item"; + children.appendChild(d2); + build(modelId, d2, child); + } + }; + + this.models.forEach((m) => { + const d = document.createElement("div"); + d.className = "item"; + if (m.tree) { + build(m.id, d, m.tree); + } else if (m.src) { + Request.make({ url: m.src }).then((xml) => { + const json = Utils.XmlToJson(xml, { 'Name': 'name', 'id': 'guid' }); + const project = Utils.FindNodeOfType(json.children[0], "decomposition")[0].children[0]; + build(m.id || i, d, project); + }); + } + document.getElementById(this.args.domNode).appendChild(d); + }); + } + +} diff --git a/bimsurfer/src/Utils.js b/bimsurfer/src/Utils.js index 9cb2f6f..65633bd 100644 --- a/bimsurfer/src/Utils.js +++ b/bimsurfer/src/Utils.js @@ -1,86 +1,99 @@ -define(function() { - - var xmlToJson = function(node, attributeRenamer) { - if (node.nodeType === node.TEXT_NODE) { - var v = node.nodeValue; - if (v.match(/^\s+$/) === null) { - return v; - } - } else if (node.nodeType === node.ELEMENT_NODE || - node.nodeType === node.DOCUMENT_NODE) - { - var json = {type: node.nodeName, children: []}; - - if (node.nodeType === node.ELEMENT_NODE) { - for (var j = 0; j < node.attributes.length; j++) { - var attribute = node.attributes[j]; - var nm = attributeRenamer[attribute.nodeName] || attribute.nodeName; - json[nm] = attribute.nodeValue; - } - } - - for (var i = 0; i < node.childNodes.length; i++) { - var item = node.childNodes[i]; - var j = xmlToJson(item, attributeRenamer); - if (j) json.children.push(j); - } - - return json; - } - }; - - var clone = function(ob) { - return JSON.parse(JSON.stringify(ob)); - }; - - var guidChars = [["0",10],["A",26],["a",26],["_",1],["$",1]].map(function(a) { - var li = []; - var st = a[0].charCodeAt(0); - var en = st + a[1]; - for (var i = st; i < en; ++i) { - li.push(i); - } - return String.fromCharCode.apply(null, li); - }).join(""); - - var b64 = function(v, len) { - var r = (!len || len == 4) ? [0,6,12,18] : [0,6]; - return r.map(function(i) { - return guidChars.substr(parseInt(v / (1 << i)) % 64, 1) - }).reverse().join(""); - }; - - var compressGuid = function(g) { - var bs = [0,2,4,6,8,10,12,14,16,18,20,22,24,26,28,30].map(function(i) { - return parseInt(g.substr(i, 2), 16); - }); - return b64(bs[0], 2) + [1, 4, 7, 10, 13].map(function(i) { - return b64((bs[i] << 16) + (bs[i+1] << 8) + bs[i+2]); - }).join(""); - }; - - var findNodeOfType = function(m, t) { - var li = []; - var _ = function(n) { - if (n.type === t) li.push(n); - (n.children || []).forEach(function(c) {_(c);}); - } - _(m); - return li; - }; - - var timeout = function(dt) { - return new Promise(function (resolve, reject) { - setTimeout(resolve, dt); - }); - }; - - return { - 'XmlToJson': xmlToJson, - 'Clone': clone, - 'CompressGuid': compressGuid, - 'FindNodeOfType': findNodeOfType, - 'Delay': timeout - }; - -}); \ No newline at end of file +const xmlToJson = function (node, attributeRenamer) { + if (node.nodeType === node.TEXT_NODE) { + const v = node.nodeValue; + if (v.match(/^\s+$/) === null) { + return v; + } + } else if (node.nodeType === node.ELEMENT_NODE || + node.nodeType === node.DOCUMENT_NODE) { + const json = { + type: node.nodeName, + children: [] + }; + + if (node.nodeType === node.ELEMENT_NODE) { + for (let j = 0; j < node.attributes.length; j++) { + const attribute = node.attributes[j]; + const nm = attributeRenamer[attribute.nodeName] || attribute.nodeName; + json[nm] = attribute.nodeValue; + } + } + + for (let i = 0; i < node.childNodes.length; i++) { + const item = node.childNodes[i]; + const j = xmlToJson(item, attributeRenamer); + if (j) { + json.children.push(j); + } + } + + return json; + } +}; + +const clone = function (ob) { + return JSON.parse(JSON.stringify(ob)); +}; + +const guidChars = [ + ["0", 10], + ["A", 26], + ["a", 26], + ["_", 1], + ["$", 1] +].map(function (a) { + let li = []; + const st = a[0].charCodeAt(0); + const en = st + a[1]; + for (let i = st; i < en; ++i) { + li.push(i); + } + return String.fromCharCode.apply(null, li); +}).join(""); + +const b64 = function (v, len) { + const r = (!len || len == 4) ? [0, 6, 12, 18] : [0, 6]; + return r.map(function (i) { + return guidChars.substr(parseInt(v / (1 << i)) % 64, 1); + }).reverse().join(""); +}; + +const compressGuid = function (g) { + const bs = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30].map(function (i) { + return parseInt(g.substr(i, 2), 16); + }); + return b64(bs[0], 2) + [1, 4, 7, 10, 13].map(function (i) { + return b64((bs[i] << 16) + (bs[i + 1] << 8) + bs[i + 2]); + }).join(""); +}; + +const findNodeOfType = function (m, t) { + let li = []; + const _ = function (n) { + if (n.type === t) { + li.push(n); + } + (n.children || []).forEach(function (c) { + _(c); + }); + }; + + _(m); + return li; +}; + +const timeout = function (dt) { + return new Promise(function (resolve, reject) { + setTimeout(resolve, dt); + }); +}; + +const Utils = { + 'XmlToJson': xmlToJson, + 'Clone': clone, + 'CompressGuid': compressGuid, + 'FindNodeOfType': findNodeOfType, + 'Delay': timeout +}; + +export default Utils; \ No newline at end of file diff --git a/bimsurfer/src/index.js b/bimsurfer/src/index.js new file mode 100644 index 0000000..72bc3a2 --- /dev/null +++ b/bimsurfer/src/index.js @@ -0,0 +1,4 @@ +export { default as BimSurfer } from "./BimSurfer.js"; +export { default as BimServerModelLoader } from "./BimServerModelLoader.js"; +export { default as StaticTreeRenderer } from "./StaticTreeRenderer.js"; +export { default as MetaDataRenderer } from "./MetaDataRenderer.js"; diff --git a/bimsurfer/src/xeoViewer/controls/bimCameraControl.js b/bimsurfer/src/xeoViewer/controls/bimCameraControl.js index 0d9410f..53ae7f9 100644 --- a/bimsurfer/src/xeoViewer/controls/bimCameraControl.js +++ b/bimsurfer/src/xeoViewer/controls/bimCameraControl.js @@ -1,6 +1,4 @@ -define(["../../../lib/xeogl"], function () { - - "use strict"; +import 'xeogl'; /** @@ -974,7 +972,6 @@ define(["../../../lib/xeogl"], function () { this._defaultDragAction = value; } } - } + } } }); -}); diff --git a/bimsurfer/src/xeoViewer/effects/highlightEffect.js b/bimsurfer/src/xeoViewer/effects/highlightEffect.js index bd81d39..3467ea0 100644 --- a/bimsurfer/src/xeoViewer/effects/highlightEffect.js +++ b/bimsurfer/src/xeoViewer/effects/highlightEffect.js @@ -1,6 +1,4 @@ -define(["../../../lib/xeogl"], function () { - - "use strict"; +import 'xeogl'; xeogl.HighlightEffect = xeogl.Component.extend({ @@ -110,4 +108,4 @@ define(["../../../lib/xeogl"], function () { } }); -}); + diff --git a/bimsurfer/src/xeoViewer/entities/bimModel.js b/bimsurfer/src/xeoViewer/entities/bimModel.js index e2305bb..3377ec0 100644 --- a/bimsurfer/src/xeoViewer/entities/bimModel.js +++ b/bimsurfer/src/xeoViewer/entities/bimModel.js @@ -1,6 +1,4 @@ -define(["../../../lib/xeogl"], function () { - - "use strict"; +import 'xeogl'; /** Custom xeoEngine component that represents a BIMSurfer model within a xeoEngine scene. @@ -31,4 +29,3 @@ define(["../../../lib/xeogl"], function () { this.collection.add(object); } }); -}); diff --git a/bimsurfer/src/xeoViewer/entities/bimObject.js b/bimsurfer/src/xeoViewer/entities/bimObject.js index 13ac7fe..0a71f63 100644 --- a/bimsurfer/src/xeoViewer/entities/bimObject.js +++ b/bimsurfer/src/xeoViewer/entities/bimObject.js @@ -1,6 +1,4 @@ -define(["../../../lib/xeogl"], function () { - - "use strict"; +import 'xeogl'; /** Custom xeoEngine component that represents a BIMSurfer object within a xeoEngine scene. @@ -160,4 +158,3 @@ define(["../../../lib/xeogl"], function () { } } }); -}); diff --git a/bimsurfer/src/xeoViewer/helpers/bimBoundaryHelper.js b/bimsurfer/src/xeoViewer/helpers/bimBoundaryHelper.js index 5ba4e9b..8535843 100644 --- a/bimsurfer/src/xeoViewer/helpers/bimBoundaryHelper.js +++ b/bimsurfer/src/xeoViewer/helpers/bimBoundaryHelper.js @@ -1,6 +1,4 @@ -define(["../../../lib/xeogl"], function () { - - "use strict"; +import 'xeogl'; /** Custom xeoEngine component that shows a wireframe box representing an non axis-aligned 3D boundary. @@ -96,5 +94,3 @@ define(["../../../lib/xeogl"], function () { }; }; - -}); diff --git a/bimsurfer/src/xeoViewer/utils/collection.js b/bimsurfer/src/xeoViewer/utils/collection.js index b2f9555..4177e6d 100644 --- a/bimsurfer/src/xeoViewer/utils/collection.js +++ b/bimsurfer/src/xeoViewer/utils/collection.js @@ -141,9 +141,7 @@ @param [cfg.components] {{Array of String|Component}} Array of {{#crossLink "Component"}}{{/crossLink}} IDs or instances. @extends Component */ -define(["../../../lib/xeogl"], function () { - - "use strict"; +import 'xeogl'; xeogl.Collection = xeogl.Component.extend({ @@ -476,5 +474,3 @@ define(["../../../lib/xeogl"], function () { this.clear(); } }); - -}); diff --git a/bimsurfer/src/xeoViewer/xeoViewer.js b/bimsurfer/src/xeoViewer/xeoViewer.js index 65084a5..88fc40d 100644 --- a/bimsurfer/src/xeoViewer/xeoViewer.js +++ b/bimsurfer/src/xeoViewer/xeoViewer.js @@ -1,42 +1,36 @@ -define([ - "../DefaultMaterials", - "../EventHandler", - "../Utils", - "../../lib/xeogl", - "./controls/bimCameraControl", - "./entities/bimModel", - "./entities/bimObject", - "./helpers/bimBoundaryHelper", - "./effects/highlightEffect", - "./utils/collection" -], function (DefaultMaterials, EventHandler, Utils) { - - "use strict"; - - function xeoViewer(cfg) { - - // Distance to WebGL's far clipping plane. - const FAR_CLIP = 5000; - - // Create xeoViewer - - EventHandler.call(this); - - var self = this; - - var domNode = document.getElementById(cfg.domNode); - var canvas = document.createElement("canvas"); - - domNode.appendChild(canvas); - - // Create a Scene - var scene = self.scene = new xeogl.Scene({ // http://xeoengine.org/docs/classes/Scene.html - canvas: canvas, +import 'xeogl'; + +import DefaultMaterials from '../DefaultMaterials'; +import EventHandler from '../EventHandler'; +import Utils from '../Utils'; +import './controls/bimCameraControl'; +import './entities/bimModel'; +import './entities/bimObject'; +import './helpers/bimBoundaryHelper'; +import './effects/highlightEffect'; +import './utils/collection'; + +export default class xeoViewer extends EventHandler { + constructor(cfg) { + // Create xeoViewer + super(); + + // Distance to WebGL's far clipping plane. + const FAR_CLIP = 5000; + + const domNode = document.getElementById(cfg.domNode); + const canvas = document.createElement("canvas"); + + domNode.appendChild(canvas); + + // Create a Scene + this.scene = new xeogl.Scene({ // http://xeoengine.org/docs/classes/Scene.html + canvas: canvas, transparent: true - }); + }); - // Redefine default light sources; - var lights = [ + // Redefine default light sources; + this.lights = [ { type: "ambient", params: { @@ -54,1431 +48,1420 @@ define([ } } ]; - scene.lights.lights = buildLights(lights); + this.scene.lights.lights = this.buildLights(this.lights); + + // Attached to all objects to fit the model inside the view volume + this.scale = new xeogl.Scale(this.scene, { + xyz: [1, 1, 1] + }); + + // Provides user input + this.input = this.scene.input; + + // Using the scene's default camera + this.camera = this.scene.camera; + this.camera.project.far = FAR_CLIP; + + // Flies cameras to objects + this.cameraFlight = new xeogl.CameraFlightAnimation(this.scene, { // http://xeoengine.org/docs/classes/CameraFlightAnimation.html + fitFOV: 25, + duration: 1 + }); + + // Registers loaded xeoEngine components for easy destruction + this.collection = new xeogl.Collection(this.scene); // http://xeoengine.org/docs/classes/Collection.html + + // Shows a wireframe box at the given boundary + this.boundaryHelper = new xeogl.BIMBoundaryHelper(this.scene, this, { color: cfg.selectionBorderColor }); + + this.highlightEffect = new xeogl.HighlightEffect(this.scene, { color: cfg.selectionColor }); + + // Models mapped to their IDs + this.models = {}; + + // Objects mapped to IDs + this.objects = {}; + + this.objects_by_guid = {}; - // Attached to all objects to fit the model inside the view volume - var scale = new xeogl.Scale(scene, { - xyz: [1, 1, 1] - }); + // For each RFC type, a map of objects mapped to their IDs + this.rfcTypes = {}; - // Provides user input - var input = scene.input; + // Objects that are currently visible, mapped to IDs + this.visibleObjects = {}; - // Using the scene's default camera - var camera = scene.camera; - camera.project.far = FAR_CLIP; + // Lazy-generated array of visible object IDs, for return by #getVisibility() + this.visibleObjectList = null; - // Flies cameras to objects - var cameraFlight = new xeogl.CameraFlightAnimation(scene, { // http://xeoengine.org/docs/classes/CameraFlightAnimation.html - fitFOV: 25, - duration: 1 - }); + // Array of objects RFC types hidden by default + this.hiddenTypes = ["IfcOpeningElement", "IfcSpace"]; - // Registers loaded xeoEngine components for easy destruction - var collection = new xeogl.Collection(scene); // http://xeoengine.org/docs/classes/Collection.html + // Objects that are currently selected, mapped to IDs + this.selectedObjects = {}; - // Shows a wireframe box at the given boundary - var boundaryHelper = new xeogl.BIMBoundaryHelper(scene, self, {color: cfg.selectionBorderColor}); + // Lazy-generated array of selected object IDs, for return by #getSelection() + this.selectedObjectList = null; - var highlightEffect = new xeogl.HighlightEffect(scene, {color: cfg.selectionColor}); + // Bookmark of initial state to reset to - captured with #saveReset(), applied with #reset(). + this.resetBookmark = null; - // Models mapped to their IDs - var models = {}; + // Component for each projection type, + // to swap on the camera when we switch projection types + this.projections = { - // Objects mapped to IDs - var objects = {}; - - var objects_by_guid = {}; + persp: this.camera.project, // Camera has a xeogl.Perspective by default - // For each RFC type, a map of objects mapped to their IDs - var rfcTypes = {}; + ortho: new xeogl.Ortho(this.scene, { + scale: 1.0, + near: 0.1, + far: FAR_CLIP + }) + }; + + // The current projection type + this.projectionType = "persp"; + + //----------------------------------------------------------------------------------------------------------- + // Camera notifications + //----------------------------------------------------------------------------------------------------------- + + + // Fold xeoEngine's separate events for view and projection updates + // into a single "camera-changed" event, deferred to fire on next scene tick. - // Objects that are currently visible, mapped to IDs - var visibleObjects = {}; + let cameraUpdated = false; - // Lazy-generated array of visible object IDs, for return by #getVisibility() - var visibleObjectList = null; + this.camera.on("projectMatrix", () => { + cameraUpdated = true; + }); - // Array of objects RFC types hidden by default - var hiddenTypes = ["IfcOpeningElement", "IfcSpace"]; + this.camera.on("viewMatrix", () => { + cameraUpdated = true; + }); - // Objects that are currently selected, mapped to IDs - var selectedObjects = {}; + this.scene.on("tick", () => { - // Lazy-generated array of selected object IDs, for return by #getSelection() - var selectedObjectList = null; + /** + * Fired on the iteration of each "game loop" for this xeoViewer. + * @event tick + * @param {String} sceneID The ID of this Scene. + * @param {Number} startTime The time in seconds since 1970 that this xeoViewer was instantiated. + * @param {Number} time The time in seconds since 1970 of this "tick" event. + * @param {Number} prevTime The time of the previous "tick" event from this xeoViewer. + * @param {Number} deltaTime The time in seconds since the previous "tick" event from this xeoViewer. + */ + this.fire("tick"); - // Bookmark of initial state to reset to - captured with #saveReset(), applied with #reset(). - var resetBookmark = null; + if (cameraUpdated) { - // Component for each projection type, - // to swap on the camera when we switch projection types - var projections = { + /** + * Fired whenever this xeoViewer's camera changes. + * @event camera-changed + * @params New camera state, same as that got with #getCamera. + */ + this.fire("camera-changed", [this.getCamera()]); + cameraUpdated = false; + } + }); + + //----------------------------------------------------------------------------------------------------------- + // Camera control + //----------------------------------------------------------------------------------------------------------- + + this.cameraControl = new xeogl.BIMCameraControl(this.scene, { + camera: this.camera + }); - persp: camera.project, // Camera has a xeogl.Perspective by default + this.cameraControl.on("pick", (hit) => { + // Get BIM object ID from entity metadata + const entity = hit.entity; + + if (!entity.meta) { + return; + } - ortho: new xeogl.Ortho(scene, { - scale: 1.0, - near: 0.1, - far: FAR_CLIP - }) - }; + const objectId = entity.meta.objectId || entity.id; - // The current projection type - var projectionType = "persp"; + if (objectId === undefined) { + return; + } + + const selected = !!this.selectedObjects[objectId]; // Object currently selected? + const shiftDown = this.scene.input.keyDown[this.input.KEY_SHIFT]; // Shift key down? + + this.setSelection({ + ids: [objectId], + selected: !selected, // Picking an object toggles its selection status + clear: !shiftDown // Clear selection first if shift not down + }); + }); + + this.cameraControl.on("nopick", (hit) => { + this.setSelection({ + clear: true + }); + }); + } + + /** + * Sets the default behaviour of mouse and touch drag input + * + * @method setDefaultDragAction + * @param {String} action ("pan" | "orbit") + */ + setDefaultDragAction(action) { + this.cameraControl.defaultDragAction = action; + } + + /** + * Sets the global scale for models loaded into the viewer. + * + * @method setScale + * @param {Number} s Scale factor. + */ + setScale(s) { + this.scale.xyz = [s, s, s]; + } + + /** + * Notifies the viewer that a task (such as loading a model) has started. Use #taskFinished + * to signal that the task has finished. + * + * Whenever the number of tasks is greater than zero, the viewer will display a spinner, + * and reduce rendering speed so as to allow scene updates to happen faster. + */ + taskStarted() { + this.scene.canvas.spinner.processes++; + this.scene.ticksPerRender = 15; // Tweak this if necessary + } + + /** + * Signals that a task has finished (see #taskStarted). + */ + taskFinished() { + const spinner = this.scene.canvas.spinner; + if (spinner.processes === 0) { + return; + } + spinner.processes--; + if (spinner.processes === 0) { + this.scene.ticksPerRender = 1; // Back to max speed, one render per tick + this.fire("loading-finished"); + } + } + + /** + * Loads random objects into the viewer for testing. + * + * Subsequent calls to #reset will then set the viewer to the state right after the model was loaded. + * + * @method loadRandom + * @param {*} params Parameters + * @param {Number} [params.numEntities=200] Number of entities to create. + * @param {Number} [params.size=200] Size of model on every axis. + * @param {Float32Array} [params.center] Center point of model. + */ + loadRandom(params) { + + params = params || {}; + + this.clear(); + + const geometry = new xeogl.BoxGeometry(this.scene, { + id: "geometry.test" + }); + + this.collection.add(geometry); + + const modelId = "test"; + const roid = "test"; + let oid; + let type; + let objectId; + let translate; + let scale; + let matrix; + let types = Object.keys(DefaultMaterials); + + const numEntities = params.numEntities || 200; + const size = params.size || 200; + const halfSize = size / 2; + const centerX = params.center ? params.center[0] : 0; + const centerY = params.center ? params.center[1] : 0; + const centerZ = params.center ? params.center[2] : 0; + + this.createModel(modelId); + + for (let i = 0; i < numEntities; i++) { + objectId = "object" + i; + oid = objectId; + translate = xeogl.math.translationMat4c( + (Math.random() * size - halfSize) + centerX, + (Math.random() * size - halfSize) + centerY, + (Math.random() * size - halfSize) + centerZ); + scale = xeogl.math.scalingMat4c(Math.random() * 32 + 0.2, Math.random() * 32 + 0.2, Math.random() * 10 + 0.2); + matrix = xeogl.math.mulMat4(translate, scale, xeogl.math.mat4()); + type = types[Math.round(Math.random() * types.length)]; + this.createObject(modelId, roid, oid, objectId, ["test"], type, matrix); + } - //----------------------------------------------------------------------------------------------------------- - // Camera notifications - //----------------------------------------------------------------------------------------------------------- - - (function () { - - // Fold xeoEngine's separate events for view and projection updates - // into a single "camera-changed" event, deferred to fire on next scene tick. - - var cameraUpdated = false; - - camera.on("projectMatrix", - function () { - cameraUpdated = true; - }); - - camera.on("viewMatrix", - function () { - cameraUpdated = true; - }); - - scene.on("tick", - function () { - - /** - * Fired on the iteration of each "game loop" for this xeoViewer. - * @event tick - * @param {String} sceneID The ID of this Scene. - * @param {Number} startTime The time in seconds since 1970 that this xeoViewer was instantiated. - * @param {Number} time The time in seconds since 1970 of this "tick" event. - * @param {Number} prevTime The time of the previous "tick" event from this xeoViewer. - * @param {Number} deltaTime The time in seconds since the previous "tick" event from this xeoViewer. - */ - self.fire("tick"); - - if (cameraUpdated) { - - /** - * Fired whenever this xeoViewer's camera changes. - * @event camera-changed - * @params New camera state, same as that got with #getCamera. - */ - self.fire("camera-changed", [self.getCamera()]); - cameraUpdated = false; - } - }); - })(); - - //----------------------------------------------------------------------------------------------------------- - // Camera control - //----------------------------------------------------------------------------------------------------------- - - var cameraControl = new xeogl.BIMCameraControl(scene, { - camera: camera - }); - - cameraControl.on("pick", - function (hit) { - - // Get BIM object ID from entity metadata - - var entity = hit.entity; - - if (!entity.meta) { - return; - } - - var objectId = entity.meta.objectId || entity.id; - - if (objectId === undefined) { - return; - } - - var selected = !!selectedObjects[objectId]; // Object currently selected? - var shiftDown = scene.input.keyDown[input.KEY_SHIFT]; // Shift key down? - - self.setSelection({ - ids: [objectId], - selected: !selected, // Picking an object toggles its selection status - clear: !shiftDown // Clear selection first if shift not down - }); - }); - - cameraControl.on("nopick", - function (hit) { - self.setSelection({ - clear: true - }); - }); - - /** - * Sets the default behaviour of mouse and touch drag input - * - * @method setDefaultDragAction - * @param {String} action ("pan" | "orbit") - */ - this.setDefaultDragAction = function (action) { - cameraControl.defaultDragAction = action; - }; - - /** - * Sets the global scale for models loaded into the viewer. - * - * @method setScale - * @param {Number} s Scale factor. - */ - this.setScale = function (s) { - scale.xyz = [s, s, s]; - }; - - /** - * Notifies the viewer that a task (such as loading a model) has started. Use #taskFinished - * to signal that the task has finished. - * - * Whenever the number of tasks is greater than zero, the viewer will display a spinner, - * and reduce rendering speed so as to allow scene updates to happen faster. - */ - this.taskStarted = function() { - scene.canvas.spinner.processes++; - scene.ticksPerRender = 15; // Tweak this if necessary - }; - - /** - * Signals that a task has finished (see #taskStarted). - */ - this.taskFinished = function() { - var spinner = scene.canvas.spinner; - if (spinner.processes === 0) { - return; - } - spinner.processes--; - if (spinner.processes === 0) { - scene.ticksPerRender = 1; // Back to max speed, one render per tick - } - }; - - /** - * Loads random objects into the viewer for testing. - * - * Subsequent calls to #reset will then set the viewer to the state right after the model was loaded. - * - * @method loadRandom - * @param {*} params Parameters - * @param {Number} [params.numEntities=200] Number of entities to create. - * @param {Number} [params.size=200] Size of model on every axis. - * @param {Float32Array} [params.center] Center point of model. - */ - this.loadRandom = function (params) { - - params = params || {}; - - this.clear(); - - var geometry = new xeogl.BoxGeometry(scene, { - id: "geometry.test" - }); - - collection.add(geometry); - - var modelId = "test"; - var roid = "test"; - var oid; - var type; - var objectId; - var translate; - var scale; - var matrix; - var types = Object.keys(DefaultMaterials); - - var numEntities = params.numEntities || 200; - var size = params.size || 200; - var halfSize = size / 2; - var centerX = params.center ? params.center[0] : 0; - var centerY = params.center ? params.center[1] : 0; - var centerZ = params.center ? params.center[2] : 0; - - this.createModel(modelId); - - for (var i = 0; i < numEntities; i++) { - objectId = "object" + i; - oid = objectId; - translate = xeogl.math.translationMat4c( - (Math.random() * size - halfSize) + centerX, - (Math.random() * size - halfSize) + centerY, - (Math.random() * size - halfSize) + centerZ); - scale = xeogl.math.scalingMat4c(Math.random() * 32 + 0.2, Math.random() * 32 + 0.2, Math.random() * 10 + 0.2); - matrix = xeogl.math.mulMat4(translate, scale, xeogl.math.mat4()); - type = types[Math.round(Math.random() * types.length)]; - this.createObject(modelId, roid, oid, objectId, ["test"], type, matrix); - } - - // Set camera just to establish the up vector as +Z; the following - // call to viewFit() will arrange the eye and target positions properly. - this.setCamera({ - eye: [0,0,0], - target: [centerX, centerY, centerZ], - up: [0,0,1] - }); - - this.viewFit(); - - this.saveReset(); - }; - - /** - * Creates a geometry. - * - * @method createGeometry - * @param geometryId - * @param positions - * @param normals - * @param colors - * @param indices - * @returns {xeogl.Geometry} The new geometry - * @private - */ - this.createGeometry = function (geometryId, positions, normals, colors, indices) { - var geometry = new xeogl.Geometry(scene, { // http://xeoengine.org/docs/classes/Geometry.html - id: "geometry." + geometryId, - primitive: "triangles", - positions: positions, - normals: normals, - colors: colors, - indices: indices - }); - - collection.add(geometry); - - return geometry; - }; - - - /** - * Creates a model. - * - * @param modelId - * @returns {xeogl.BIMModel} The new model - * @private - */ - this.createModel = function (modelId) { - - if (models[modelId]) { - console.log("Model with id " + modelId + " already exists, won't recreate"); - return; - } - - var model = new xeogl.BIMModel(scene, {}); - - models[modelId] = model; - - collection.add(model); - - return model; - }; - - /** - * Creates an object. - * @param [modelId] Optional model ID - * @param roid - * @param oid - * @param objectId - * @param geometryIds - * @param type - * @param matrix - * @returns {xeogl.BIMObject} The new object - * @private - */ - this.createObject = function (modelId, roid, oid, objectId, geometryIds, type, matrix) { - - if (modelId) { - var model = models[modelId]; - if (!model) { - console.log("Can't create object - model not found: " + modelId); - return; - } - objectId = modelId + ":" + objectId; - } - - if (objects[objectId]) { - console.log("Object with id " + objectId + " already exists, won't recreate"); - return; - } - - var object = new xeogl.BIMObject(scene, { - id: objectId, - geometryIds: geometryIds, - matrix: matrix - }); - - object.transform.parent = scale; // Apply model scaling - - this._addObject(type, object); - - if (model) { - model.collection.add(object); - } - - // Hide objects of certain types by default - if (hiddenTypes.indexOf(type) !== -1) { - object.visibility.visible = false; - } - - return object; - }; - - /** - * Inserts an object into this viewer - * - * @param {String} type - * @param {xeogl.Entity | xeogl.BIMObject} object - * @private - */ - this._addObject = function (type, object) { - var guid; - if (object.id.indexOf("#") !== -1) { - guid = Utils.CompressGuid(object.id.split("#")[1].substr(8, 36).replace(/-/g, "")); - } - collection.add(object); - - // Register object against ID - objects[object.id] = object; - if (guid) { - (objects_by_guid[guid] || (objects_by_guid[guid] = [])).push(object); - } - - // Register object against IFC type - var types = (rfcTypes[type] || (rfcTypes[type] = {})); - types[object.id] = object; - - var color = DefaultMaterials[type] || DefaultMaterials["DEFAULT"]; - - if (!guid) { - object.material.diffuse = [color[0], color[1], color[2]]; - } - object.material.specular = [0, 0, 0]; - - if (color[3] < 1) { // Transparent object - object.material.opacity = color[3]; - object.modes.transparent = true; - } - if (object.material.opacity < 1) { // Transparent object - object.modes.transparent = true; - } - }; - - /** - * Loads glTF model. - * - * Subsequent calls to #reset will then set the viewer to the state right after the model was loaded. - * - * @param src - */ - this.loadglTF = function (src) { - - this.clear(); - - var model = new xeogl.GLTFModel(scene, { - src: src - }); - - collection.add(model); - - models[model.id] = model; - - model.on("loaded", - function () { - - // TODO: viewFit, but boundaries not yet ready on Model Entities - - model.iterate(function (component) { - if (component.isType("xeogl.Entity")) { - self._addObject("DEFAULT", component); - } - }); - - self.saveReset(); - }); - - return model; - }; - - /** - * Destroys a model and all its objects. - * - * @param modelId - */ - this.destroyModel = function (modelId) { - - var model = models[modelId]; - - if (!model) { - console.warn("Can't destroy model - model not found: " + modelId); - return; - } - - model.collection.iterate(function (component) { - component.destroy(); - }); - - model.destroy(); - - delete models[modelId]; - }; - - /** - * Clears the viewer. - * - * Subsequent calls to #reset will then set the viewer this clear state. - */ - this.clear = function () { - - var list = []; - - collection.iterate( - function (component) { - list.push(component); - }); - - while (list.length) { - list.pop().destroy(); - } - - objects = {}; - rfcTypes = {}; - visibleObjects = {}; - visibleObjectList = null; - selectedObjects = {}; - selectedObjectList = null; - - this.saveReset(); - }; - - /** - * Sets the visibility of objects specified by IDs or IFC types. - * If IFC types are specified, this will affect existing objects as well as subsequently loaded objects of these types - * - * @param params - * @param params.ids IDs of objects or IFC types to update. - * @param params.color Color to set. - */ - this.setVisibility = function (params) { - - var changed = false; // Only fire "visibility-changed" when visibility updates are actually made - params = params || {}; - - var ids = params.ids; - var types = params.types; - - if (!ids && !types) { - console.error("Param expected: ids or types"); - return; - } - - ids = ids || []; - types = types || []; - - //var recursive = !!params.recursive; - var visible = params.visible !== false; - - var i; - var len; - var id; - var objectId; - var object; - - if (params.clear) { - for (objectId in visibleObjects) { - if (visibleObjects.hasOwnProperty(objectId)) { - delete visibleObjects[objectId]; - changed = true; - } - } - } - - for (i = 0, len = types.length; i < len; i++) { - var type = types[i]; - var typedict = rfcTypes[type] || {}; - - Object.keys(typedict).forEach(function (id) { - var object = typedict[id]; - object.visibility.visible = visible; - changed = true; - }); - - var index = hiddenTypes.indexOf(type); - - if (index !== -1 && visible) { - hiddenTypes.splice(index, 1); // remove type from array - } else if (index === -1 && !visible) { - hiddenTypes.push(type); // add type to array + // Set camera just to establish the up vector as +Z; the following + // call to viewFit() will arrange the eye and target positions properly. + this.setCamera({ + eye: [0, 0, 0], + target: [centerX, centerY, centerZ], + up: [0, 0, 1] + }); + + this.viewFit(); + + this.saveReset(); + } + + /** + * Creates a geometry. + * + * @method createGeometry + * @param geometryId + * @param positions + * @param normals + * @param colors + * @param indices + * @returns {xeogl.Geometry} The new geometry + * @private + */ + createGeometry(geometryId, positions, normals, colors, indices) { + const geometry = new xeogl.Geometry(this.scene, { // http://xeoengine.org/docs/classes/Geometry.html + id: "geometry." + geometryId, + primitive: "triangles", + positions: positions, + normals: normals, + colors: colors, + indices: indices + }); + + this.collection.add(geometry); + + return geometry; + } + + + /** + * Creates a model. + * + * @param modelId + * @returns {xeogl.BIMModel} The new model + * @private + */ + createModel(modelId) { + + if (this.models[modelId]) { + console.log("Model with id " + modelId + " already exists, won't recreate"); + return; + } + + const model = new xeogl.BIMModel(this.scene, {}); + + this.models[modelId] = model; + + this.collection.add(model); + + return model; + } + + /** + * Creates an object. + * @param [modelId] Optional model ID + * @param roid + * @param oid + * @param objectId + * @param geometryIds + * @param type + * @param matrix + * @returns {xeogl.BIMObject} The new object + * @private + */ + createObject(modelId, roid, oid, objectId, geometryIds, type, matrix) { + let model; + + if (modelId) { + model = this.models[modelId]; + if (!model) { + console.log("Can't create object - model not found: " + modelId); + return; + } + objectId = modelId + ":" + objectId; + } + + if (this.objects[objectId]) { + console.log("Object with id " + objectId + " already exists, won't recreate"); + return; + } + + const object = new xeogl.BIMObject(this.scene, { + id: objectId, + geometryIds: geometryIds, + matrix: matrix + }); + + object.transform.parent = this.scale; // Apply model scaling + + this._addObject(type, object); + + if (model) { + model.collection.add(object); + } + + // Hide objects of certain types by default + if (this.hiddenTypes.indexOf(type) !== -1) { + object.visibility.visible = false; + } + + return object; + } + + /** + * Inserts an object into this viewer + * + * @param {String} type + * @param {xeogl.Entity | xeogl.BIMObject} object + * @private + */ + _addObject(type, object) { + let guid; + if (object.id.indexOf("#") !== -1) { + guid = Utils.CompressGuid(object.id.split("#")[1].substr(8, 36).replace(/-/g, "")); + } + this.collection.add(object); + + // Register object against ID + this.objects[object.id] = object; + if (guid) { + (this.objects_by_guid[guid] || (this.objects_by_guid[guid] = [])).push(object); + } + + // Register object against IFC type + const types = (this.rfcTypes[type] || (this.rfcTypes[type] = {})); + types[object.id] = object; + + const color = DefaultMaterials[type] || DefaultMaterials.DEFAULT; + + if (!guid) { + object.material.diffuse = [color[0], color[1], color[2]]; + } + object.material.specular = [0, 0, 0]; + + if (color[3] < 1) { // Transparent object + object.material.opacity = color[3]; + object.modes.transparent = true; + } + if (object.material.opacity < 1) { // Transparent object + object.modes.transparent = true; + } + } + + /** + * Loads glTF model. + * + * Subsequent calls to #reset will then set the viewer to the state right after the model was loaded. + * + * @param src + */ + loadglTF(src) { + + this.clear(); + + const model = new xeogl.GLTFModel(this.scene, { + src: src + }); + + this.collection.add(model); + + this.models[model.id] = model; + + model.on("loaded", () => { + + // TODO: viewFit, but boundaries not yet ready on Model Entities + + model.iterate((component) => { + if (component.isType("xeogl.Entity")) { + this._addObject("DEFAULT", component); } - } - - for (i = 0, len = ids.length; i < len; i++) { - id = ids[i]; - var fn = function(object) { - object.visibility.visible = visible; - changed = true; - } - var object_ = objects[id]; - if (!object_) objects_by_guid[id].forEach(fn) - else fn(object_); - } - - if (changed) { - visibleObjectList = Object.keys(visibleObjects); - - /** - * Fired whenever objects become invisible or invisible - * @event visibility-changed - * @params Array of IDs of all currently-visible objects. - */ - this.fire("visibility-changed", [visibleObjectList]); - } - }; - - /** - * Returns array of IDs of objects that are currently visible - */ - this.getVisibility = function () { - if (visibleObjectList) { - return visibleObjectList; - } - visibleObjectList = Object.keys(visibleObjects); - return visibleObjectList; - }; - - /** - * Select or deselect some objects. - * - * @param params - * @param params.ids IDs of objects. - * @param params.selected Whether to select or deselect the objects - * @param params.clear Whether to clear selection state prior to updating - */ - this.setSelection = function (params) { - - params = params || {}; - - var changed = false; // Only fire "selection-changed" when selection actually changes - var selected = !!params.selected; - var objectId; - var object; - - if (params.clear) { - for (objectId in selectedObjects) { - if (selectedObjects.hasOwnProperty(objectId)) { - object = selectedObjects[objectId]; - // object.highlighted = false; - delete selectedObjects[objectId]; - changed = true; - } - } - } - - var ids = params.ids; - - if (ids) { - - for (var i = 0, len = ids.length; i < len; i++) { - - var fn = function(object) { - - var objectId = object.id; - - if (!!selectedObjects[objectId] !== selected) { - changed = true; - } - - if (selected) { - selectedObjects[objectId] = object; - } else { - if (selectedObjects[objectId]) { - delete selectedObjects[objectId]; - } - } - - selectedObjectList = null; // Now needs lazy-rebuild - - } - - objectId = ids[i]; - var object_ = objects[objectId]; - if (!object_) objects_by_guid[objectId].forEach(fn) - else fn(object_); - - } - } - - if (changed) { - - selectedObjectList = Object.keys(selectedObjects); - - // Show boundary around selected objects - setBoundaryState({ - ids: selectedObjectList, - show: selectedObjectList.length > 0 - }); - - /** - * Fired whenever this xeoViewer's selection state changes. - * @event selection-changed - * @params Array of IDs of all currently-selected objects. - */ - this.fire("selection-changed", [selectedObjectList]); - } - }; - - /** - * Returns array of IDs of objects that are currently selected - */ - this.getSelection = function () { - if (selectedObjectList) { - return selectedObjectList; - } - selectedObjectList = Object.keys(selectedObjects); - return selectedObjectList; - }; - - /** - * Sets the color of objects specified by IDs or IFC types. - * - * @param params - * @param params.ids IDs of objects to update. - * @param params.types IFC type of objects to update. - * @param params.color Color to set. - */ - this.setColor = function (params) { - - params = params || {}; - - var ids = params.ids; - var types = params.types; - - if (!ids && !types) { - console.error("Param expected: ids or types"); - return; - } - - ids = ids || []; - types = types || []; - - var color = params.color; - - if (!color) { - console.error("Param expected: 'color'"); - return; - } - - var objectId; - var object; - - for (i = 0, len = types.length; i < len; i++) { - var typedict = rfcTypes[types[i]] || {}; - Object.keys(typedict).forEach(function (id) { - var object = typedict[id]; - self._setObjectColor(object, color); - }); - } - - for (var i = 0, len = ids.length; i < len; i++) { - - objectId = ids[i]; - object = objects[objectId] || objects_by_guid[objectId]; - - if (!object) { - // No return on purpose to continue changing color of - // other potentially valid object identifiers. - console.error("Object not found: '" + objectId + "'"); - } else { - this._setObjectColor(object, color); - } - } - }; - - this._setObjectColor = function (object, color) { - - var material = object.material; - material.diffuse = [color[0], color[1], color[2]]; - - var opacity = (color.length > 3) ? color[3] : 1; - if (opacity !== material.opacity) { - material.opacity = opacity; - object.modes.transparent = opacity < 1; - } - }; - - /** - * Sets the opacity of objects specified by IDs of IFC types. - * - * @param params - * @param params.ids IDs of objects to update. - * @param params.types IFC type of objects to update. - * @param params.opacity Opacity to set. - */ - this.setOpacity = function (params) { - - params = params || {}; - - var ids = params.ids; - var types = params.types; - - if (!ids && !types) { - console.error("Param expected: ids or types"); - return; - } - - ids = ids || []; - types = types || []; - - var opacity = params.opacity; - - if (opacity === undefined) { - console.error("Param expected: 'opacity'"); - return; - } - - var objectId; - var object; - - for (i = 0, len = types.length; i < len; i++) { - var typedict = rfcTypes[types[i]] || {}; - Object.keys(typedict).forEach(function (id) { - var object = typedict[id]; - self._setObjectOpacity(object, opacity); - }); - } - - for (var i = 0, len = ids.length; i < len; i++) { - - objectId = ids[i]; - object = objects[objectId] || objects_by_guid[objectId]; - - if (!object) { - // No return on purpose to continue changing opacity of - // other potentially valid object identifiers. - console.error("Object not found: '" + objectId + "'"); - } else { - this._setObjectOpacity(object, opacity); - } - } - }; - - this._setObjectOpacity = function (object, opacity) { + }); + + this.saveReset(); + }); + + return model; + } - var material = object.material; - - if (opacity !== material.opacity) { - material.opacity = opacity; - object.modes.transparent = opacity < 1; - } - }; + /** + * Destroys a model and all its objects. + * + * @param modelId + */ + destroyModel(modelId) { - /** - * Sets camera state. - * - * @param params - */ - this.setCamera = function (params) { + const model = this.models[modelId]; - params = params || {}; + if (!model) { + console.warn("Can't destroy model - model not found: " + modelId); + return; + } - // Set projection type + model.collection.iterate((component) => { + component.destroy(); + }); - var type = params.type; + model.destroy(); - if (type && type !== projectionType) { + delete this.models[modelId]; + } - var projection = projections[type]; + /** + * Clears the viewer. + * + * Subsequent calls to #reset will then set the viewer this clear state. + */ + clear() { - if (!projection) { - console.error("Unsupported camera projection type: " + type); - } else { - camera.project = projection; - projectionType = type; - } - } + const list = []; - // Set camera position + this.collection.iterate((component) => { + list.push(component); + }); - if (params.animate) { + while (list.length) { + list.pop().destroy(); + } - cameraFlight.flyTo({ - eye: params.eye, - look: params.target, - up: params.up, - fitFOV: params.fitFOV, - duration: params.duration - }); + this.objects = {}; + this.rfcTypes = {}; + this.visibleObjects = {}; + this.visibleObjectList = null; + this.selectedObjects = {}; + this.selectedObjectList = null; + + this.saveReset(); + } + + /** + * Sets the visibility of objects specified by IDs or IFC types. + * If IFC types are specified, this will affect existing objects as well as subsequently loaded objects of these types + * + * @param params + * @param params.ids IDs of objects or IFC types to update. + * @param params.color Color to set. + */ + setVisibility(params) { + + let changed = false; // Only fire "visibility-changed" when visibility updates are actually made + params = params || {}; + + let ids = params.ids; + let types = params.types; + + if (!ids && !types) { + console.error("Param expected: ids or types"); + return; + } - } else { + ids = ids || []; + types = types || []; - if (params.eye) { - camera.view.eye = params.eye; - } + //const recursive = !!params.recursive; + const visible = params.visible !== false; - if (params.target) { - camera.view.look = params.target; - cameraControl.rotatePos = camera.view.look; // Rotate about target initially - } + let i; + let len; + let id; + let objectId; - if (params.up) { - camera.view.up = params.up; - } - } + if (params.clear) { + for (objectId in this.visibleObjects) { + if (this.visibleObjects.hasOwnProperty(objectId)) { + delete this.visibleObjects[objectId]; + changed = true; + } + } + } - // Set camera FOV angle, only if currently perspective + for (i = 0, len = types.length; i < len; i++) { + const type = types[i]; + const typedict = this.rfcTypes[type] || {}; - if (params.fovy) { - if (projectionType !== "persp") { - console.error("Ignoring update to 'fovy' for current '" + projectionType + "' camera"); - } else { - camera.project.fovy = params.fovy; - } - } + Object.keys(typedict).forEach((id) => { + const object = typedict[id]; + object.visibility.visible = visible; + changed = true; + }); - // Set camera view volume size, only if currently orthographic + const index = this.hiddenTypes.indexOf(type); - if (params.scale) { - if (projectionType !== "ortho") { - console.error("Ignoring update to 'scale' for current '" + projectionType + "' camera"); - } else { - camera.project.scale = params.scale; - } - } - }; + if (index !== -1 && visible) { + this.hiddenTypes.splice(index, 1); // remove type from array + } else if (index === -1 && !visible) { + this.hiddenTypes.push(type); // add type to array + } + } - /** - * Gets camera state. - * - * @returns {{type: string, eye: (*|Array.
-
+
- A {{#crossLink "Component"}}Component{{/crossLink}} can be included in more than one Collection. +
- {{#crossLink "Component"}}Components{{/crossLink}} can be added to a Collection by instance, ID or type. +
- A Collection supports iteration over its {{#crossLink "Component"}}Components{{/crossLink}}. +
- A {{#crossLink "Model"}}Model{{/crossLink}} stores the {{#crossLink "Component"}}Components{{/crossLink}} it has loaded in a Collection. +
- A {{#crossLink "CollectionBoundary"}}CollectionBoundary{{/crossLink}} provides a World-space {{#crossLink "Boundary3D"}}{{/crossLink}} that encloses a Collection. +
+ ## Examples
+ -
+
- [Adding Entities to a Collection](../../examples/#collections_Collection_creating_add) +
- [Adding components types to a Collection](../../examples/#collections_Collection_creating_type) +
- [Iterating a Collection](../../examples/#boundaries_Collection_iterating) +
- [Visualizing World-space boundary of a Collection](../../examples/#boundaries_CollectionBoundary) +
- [Visualizing World-space boundaries of a hierarchy of Collections](../../examples/#boundaries_CollectionBoundary_hierarchy) +
Select a single element in order to see object properties."; + return; + } + + this.domNode.innerHTML = ""; + + oid = oid[0]; + + if (oid.indexOf(':') !== -1) { + oid = oid.split(':'); + var o = this.models[oid[0]].model.objects[oid[1]]; + + this.renderAttributes(o); + + o.getIsDefinedBy(function (isDefinedBy) { + if (isDefinedBy.getType() == "IfcRelDefinesByProperties") { + isDefinedBy.getRelatingPropertyDefinition(function (pset) { + if (pset.getType() == "IfcPropertySet") { + _this3.renderPSet(pset); + } + }); + } + }); + } else { + var _o = this.models["1"].model.objects[oid]; + this.renderAttributes(_o); + _o.properties.forEach(function (pset) { + _this3.renderPSet(pset); + }); + } + } + }]); + return MetaDataRenderer; +}(EventHandler); + +exports.BimSurfer = BimSurfer; +exports.BimServerModelLoader = BimServerModelLoader; +exports.StaticTreeRenderer = StaticTreeRenderer; +exports.MetaDataRenderer = MetaDataRenderer; + +Object.defineProperty(exports, '__esModule', { value: true }); + +}))); diff --git a/docs/example_BIMServer.html b/docs/example_BIMServer.html index 97d54c6..4a395e6 100644 --- a/docs/example_BIMServer.html +++ b/docs/example_BIMServer.html @@ -9,12 +9,14 @@ - - - + + + + + - - - diff --git a/docs/example_glTF.html b/docs/example_glTF.html index 3895b9d..a467854 100644 --- a/docs/example_glTF.html +++ b/docs/example_glTF.html @@ -2,115 +2,14 @@ -
@@ -139,5 +38,84 @@
+
+
\ No newline at end of file
diff --git a/docs/example_testModel.html b/docs/example_testModel.html
index 1d6a369..afe1818 100644
--- a/docs/example_testModel.html
+++ b/docs/example_testModel.html
@@ -2,66 +2,12 @@
-
@@ -83,6 +29,39 @@
+
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..f4d907d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+ "name": "bimsurfer",
+ "description": "The first open source WebGL based IFC viewer",
+ "organization": "OpenSource BIM",
+ "main": "build/bimsurfer.umd.js",
+ "module": "bimsurfer/src/index.js",
+ "version": "0.0.44",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/opensourceBIM/BIMsurfer"
+ },
+ "bugs": {
+ "url": "https://github.com/opensourceBIM/BIMsurfer/issues"
+ },
+ "scripts": {
+ "build": "rollup -c"
+ },
+ "dependencies": {
+ },
+ "devDependencies": {
+ "babel-core": "^6.26.0",
+ "babel-plugin-external-helpers": "^6.22.0",
+ "babel-preset-env": "^1.6.1",
+ "rollup": "^0.50.0",
+ "rollup-plugin-babel": "^3.0.2",
+ "rollup-plugin-commonjs": "^8.2.3",
+ "rollup-plugin-ignore": "^1.0.3",
+ "rollup-plugin-node-builtins": "^2.1.2",
+ "rollup-plugin-node-globals": "^1.1.0",
+ "rollup-plugin-node-resolve": "^3.0.0"
+ },
+ "readmeFilename": "README.markdown",
+ "license": "MIT"
+}
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..596faf6
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,32 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import builtins from 'rollup-plugin-node-builtins';
+import babel from 'rollup-plugin-babel';
+
+export default [{
+ input: 'bimsurfer/src/index.js',
+ name: 'bimsurfer',
+ output: {
+ file: 'build/bimsurfer.umd.js',
+ format: 'umd'
+ },
+ external: ['bimserverapi', 'xeogl'],
+ globals: {
+ bimserverapi: 'BimServerClient'
+ },
+ plugins: [
+ resolve({
+ jsnext: true,
+ main: true,
+ preferBuiltins: true,
+ browser: true
+ }),
+ commonjs({
+ sourceMap: false
+ }),
+ builtins(),
+ babel({
+ exclude: ['node_modules/**']
+ })
+ ]
+}];
\ No newline at end of file