geosolutions-it#9830: Support for IFC as a further 3D model

Description:
- Edit testConfig file by adding a proxies property in testConfig to enable using web-ifc test
- Replace fetch with axios in fetching ifc file via url
- Edit unit test of "Model-test" file due to testConfig edits

build/testConfig.js

@@ -23,9 +23,12 @@ module.exports = ({browsers = [ 'ChromeHeadless' ], files, path, testFile, singl
     files: [
         ...files,
         // add all assets needed for Cesium library
-        { pattern: './node_modules/cesium/Build/CesiumUnminified/**/*', included: false }
+        { pattern: './node_modules/cesium/Build/CesiumUnminified/**/*', included: false },
+        { pattern: './node_modules/web-ifc/**/*', included: false }
     ],
-
+    proxies: {
+        "/web-ifc/": "/base/node_modules/web-ifc/"
+    },
     plugins: [
         require('karma-chrome-launcher'),
         'karma-webpack',

web/client/api/Model.js

@@ -5,6 +5,8 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import axios from 'axios';
+
 // extract the tile format from the uri
 function getFormat(uri) {
     const parts = uri.split(/\./g);
@@ -100,7 +102,6 @@ export const ifcDataToJSON = ({ data, ifcApi }) => {
 
 export const getWebIFC = () => import('web-ifc')
     .then(WebIFC => {
-        window.WebIFC = WebIFC;
         const ifcApi = new WebIFC.IfcAPI();
         ifcApi.SetWasmPath('./web-ifc/'); // eslint-disable-line
         return ifcApi.Init().then(() => ifcApi); // eslint-disable-line
@@ -116,12 +117,12 @@ export const getWebIFC = () => import('web-ifc')
  * @
  */
 export const getCapabilities = (url) => {
-    return fetch(url)
-        .then((res) => res.arrayBuffer())
-        .then((data) => {
+    return axios.get(url, {
+        responseType: 'arraybuffer'
+    })
+        .then(({ data }) => {
             return getWebIFC()
                 .then((ifcApi) => {
-                    window.ifcApi = ifcApi;
                     let modelID = ifcApi.OpenModel(new Uint8Array(data));   // eslint-disable-line
                     // const { extent, center } = ifcDataToJSON({ ifcApi, data });
                     let capabilities = extractCapabilities(ifcApi, modelID, url);

web/client/api/__tests__/Model-test.jsx

@@ -6,38 +6,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { getCapabilities } from '../Model';
-import axios from '../../libs/ajax';
 import expect from 'expect';
-import MockAdapter from "axios-mock-adapter";
-let mockAxios;
 
 describe('Test Model API for ifc models', () => {
-    beforeEach(done => {
-        mockAxios = new MockAdapter(axios);
-        setTimeout(done);
-    });
-
-    afterEach(done => {
-        mockAxios.restore();
-        setTimeout(done);
-    });
     it('should extract capabilities from ifc model', (done) => {
-        mockAxios.onGet().reply(200);
-        getCapabilities('/ifcModel.ifc').then(({ bbox, format, version, properties, modelData }) => {
+        getCapabilities('base/web/client/test-resources/ifcModels/ifcModel.ifc').then(({ bbox, format, version, properties, modelData }) => {
             try {
                 expect(modelData).toBeTruthy();
                 expect(format).toBeTruthy();
                 expect(format).toBe('ifc');
                 expect(version).toBeTruthy();
                 expect(version).toBe('IFC4');
                 expect(properties).toBeTruthy();
-                expect(properties).toBe({});
+                expect(properties).toEqual({});
                 expect(bbox).toBeTruthy();
                 expect(bbox.crs).toBe('EPSG:4326');
-                expect(Math.floor(bbox.bounds.minx)).toBe(0);
-                expect(Math.floor(bbox.bounds.miny)).toBe(0);
-                expect(Math.ceil(bbox.bounds.maxx)).toBe(0);
-                expect(Math.ceil(bbox.bounds.maxy)).toBe(0);
+                expect(Math.round(bbox.bounds.minx)).toBe(0);
+                expect(Math.round(bbox.bounds.miny)).toBe(0);
+                expect(Math.round(bbox.bounds.maxx)).toBe(0);
+                expect(Math.round(bbox.bounds.maxy)).toBe(0);
             } catch (e) {
                 done(e);
             }

web/client/components/map/cesium/plugins/ModelLayer.js

@@ -8,6 +8,7 @@
 
 import * as Cesium from 'cesium';
 import isEqual from 'lodash/isEqual';
+import axios from 'axios';
 import Layers from '../../../../utils/cesium/Layers';
 import { ifcDataToJSON, getWebIFC } from '../../../../api/Model';     // todo: change path to MODEL
 
@@ -31,20 +32,6 @@ const updatePrimitivesVisibility = (primitives, visibilityOption) => {
         primitive.show = visibilityOption;
     }
 };
-const updateOpacity = (primitives, opacityOption, map) => {
-    for (let i = 0; i < primitives.length; i++) {
-        const primitive = primitives.get(i);
-        let geomInstances = primitive.geometryInstances;
-        geomInstances?.forEach(geomInstance => {
-            let instanceAttributes = primitive.getGeometryInstanceAttributes(geomInstance.id);
-            let cloneColor = Cesium.Color.fromBytes(instanceAttributes.color[0], instanceAttributes.color[1], instanceAttributes.color[2], instanceAttributes.color[3]);
-            cloneColor.alpha = (geomInstance?.originalOpacity || 1 ) * opacityOption;
-            instanceAttributes.color = Cesium.ColorGeometryInstanceAttribute.fromColor(cloneColor).value;
-        });
-
-    }
-    map.scene.requestRender();
-};
 const getGeometryInstances = ({
     meshes
 }) => {
@@ -146,9 +133,10 @@ const createLayer = (options, map) => {
     }
     let primitives = new Cesium.PrimitiveCollection({ destroyPrimitives: true });
 
-    fetch(options.url)
-        .then((res) => res.arrayBuffer())
-        .then((data) => {
+    axios(options.url, {
+        responseType: 'arraybuffer'
+    })
+        .then(({ data }) => {
             return getWebIFC()
                 .then((ifcApi) => {
                     const { meshes, center } = ifcDataToJSON({ ifcApi, data });
@@ -161,7 +149,6 @@ const createLayer = (options, map) => {
                 });
         });
     map.scene.primitives.add(primitives);
-    window.MapScene = map.scene;
     return {
         detached: true,
         primitives,
@@ -183,13 +170,10 @@ const createLayer = (options, map) => {
 
 Layers.registerType('model', {
     create: createLayer,
-    update: (layer, newOptions, oldOptions, map) => {
+    update: (layer, newOptions, oldOptions) => {
         if (layer?.primitives && !isEqual(newOptions?.center, oldOptions?.center)) {
             updatePrimitivesPosition(layer?.primitives, newOptions?.center);
         }
-        // if (layer?.primitives && !isEqual(newOptions?.opacity, oldOptions?.opacity)) {
-        //     updateOpacity(layer?.primitives, newOptions?.opacity, map);
-        // }
         return null;
     }
 });