feat:export viewer as webcomponent

* Add rootDOMNode parameter to allow using bim-viewer inside shadowRoot

* Add bim-viewer custom web component

* add a static method to register the web component, optionally with a custom name

* ShadowRoot related changes

* :Fix typos

* Remove rollup terser from dev config

* Mutual containerElement for BimViewer and Explorers

* Update example

* Fix iframe issue with not valid input id

* Add 'parentNode' config param to SectionTool

* Handle camera pivot

* Add support for positioning on window scroll

* Handle rotation pivot element

* Add support for horizontally scrolled positions

* Fix icons not displaying

* Add HTML attributes replacing query params

* Add custom event attribute 'onObjectSelected'

* Expose bimViewer instance in web component

* Remove pivot substitute

* Add HTML attributes

* Update example

* fix: behavior of explorer panel on scroll

* Prevent page from scrolling when mouse is over viewer canvas

* Update web coponent example

* Move rollup stuff to devdependencies

* Upgrade xeokit

Author: annawilczura

index.js

@@ -1,8 +1,6 @@
 import {Server} from "./src/server/Server.js";
 import {BIMViewer} from "./src/BIMViewer.js";
 import {LocaleService} from "@xeokit/xeokit-sdk/dist/xeokit-sdk.es.js";
+import BimViewerWebComponent from "./src/webComponent/webComponent.js";
 
-export {BIMViewer};
-export {Server};
-export {LocaleService};
-
+export { BIMViewer, Server, LocaleService, BimViewerWebComponent };

package-lock.json

@@ -1,6 +1,7 @@
 {
   "name": "@xeokit/xeokit-bim-viewer",
   "version": "2.6.1",
+  "type": "module",
   "description": "BIM viewer built on xeokit",
   "main": "dist/xeokit-bim-viewer.min.es.js",
   "files": [
@@ -56,18 +57,21 @@
   },
   "homepage": "https://github.com/xeokit/xeokit-bim-viewer#readme",
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.2.1",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-url": "^8.0.2",
+    "auto-changelog": "^2.4.0",
     "autoprefixer": "^9.8.6",
     "copyfiles": "^2.4.1",
     "esdoc": "^1.1.0",
     "esdoc-standard-plugin": "^1.0.0",
     "puppeteer": "^10.1.0",
-    "rollup": "^2.70.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "auto-changelog": "^2.4.0"
+    "rollup": "^4.39.0",
+    "rollup-plugin-import-css": "^3.5.8"
   },
   "dependencies": {
-    "@xeokit/xeokit-sdk": "2.6.69",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@xeokit/xeokit-sdk": "^2.6.75",
     "http-server": "^13.0.2"
   }
 }

package.json

@@ -1,20 +1,24 @@
 import {nodeResolve} from '@rollup/plugin-node-resolve';
-import {terser} from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
+import css from "rollup-plugin-import-css";
+import url from "@rollup/plugin-url";
 
 export default {
     input: './index.js',
     output: [{
         file: './dist/xeokit-bim-viewer.min.es.js',
         format: 'es',
         name: 'bundle'
-    },
-    {
-        file: './dist/xeokit-bim-viewer.min.umd.js',
-        format: 'umd',
-        name: 'bundle'
-    }],
+    },],
     plugins: [
+        css(),
         nodeResolve(),
-         terser()
+        terser(),
+        url(
+            {
+                include: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
+                limit: 1024 * 1024,
+            }
+        )
     ]
 }

rollup.config.js

@@ -1,19 +1,22 @@
 import {nodeResolve} from '@rollup/plugin-node-resolve';
-import {terser} from "rollup-plugin-terser";
+import css from "rollup-plugin-import-css";
+import url from "@rollup/plugin-url";
 
 export default {
     input: './index.js',
     output: [{
         file: './dist/xeokit-bim-viewer.es.js',
         format: 'es',
         name: 'bundle'
-    },
-    {
-        file: './dist/xeokit-bim-viewer.umd.js',
-        format: 'umd',
-        name: 'bundle'
-    }],
+    },],
     plugins: [
-        nodeResolve()
+        css(),
+        nodeResolve(),
+        url(
+            {
+                include: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
+                limit: 1024 * 1024,
+            }
+        ),
     ]
 }

rollup.dev.config.js

@@ -187,6 +187,7 @@ class BIMViewer extends Controller {
      * @param {Boolean} [cfg.enableEditModels=false] Set ````true```` to show "Add", "Edit" and "Delete" options in the Models tab's context menu.
      * @param {Boolean} [cfg.enableMeasurements=true] Set ````true```` to enable distance and angle measurements with the BIMViewer.
      * @param {Boolean} [cfg.keyboardEventsElement] Optional reference to HTML element on which key events should be handled. Defaults to the HTML Document.
+     * @param {Node | undefined} [cfg.containerElement] Optional reference of an existing DOM Node (e.g. ShadowRoot), which encapsulates all HTML elements related to viewer plugins, defaults to ````document.body````. 
      */
     constructor(server, cfg = {}) {
 
@@ -250,6 +251,7 @@ class BIMViewer extends Controller {
 
         super(null, cfg, server, viewer);
 
+        this._containerElement = cfg.containerElement || document.body;
         this._configs = {};
 
         this._enableAddModels = !!cfg.enableEditModels;
@@ -271,7 +273,7 @@ class BIMViewer extends Controller {
         this._initCanvasContextMenus();
 
         explorerElement.innerHTML = createExplorerTemplate(cfg);
-        toolbarElement.innerHTML = createToolbarTemplate({enableMeasurements: this._enableMeasurements});
+        toolbarElement.innerHTML = createToolbarTemplate({ enableMeasurements: this._enableMeasurements });
         if (this._enablePropertiesInspector) {
             inspectorElement.innerHTML = createInspectorTemplate();
         }
@@ -291,31 +293,35 @@ class BIMViewer extends Controller {
             unloadModelsButtonElement: explorerElement.querySelector(".xeokit-unloadAllModels"),
             addModelButtonElement: explorerElement.querySelector(".xeokit-addModel"), // Can be undefined
             modelsElement: explorerElement.querySelector(".xeokit-models"),
-            enableEditModels: this._enableAddModels
+            enableEditModels: this._enableAddModels,
+            containerElement: this._containerElement
         });
 
         this._objectsExplorer = new ObjectsExplorer(this, {
             enableMeasurements: this._enableMeasurements,
             objectsTabElement: explorerElement.querySelector(".xeokit-objectsTab"),
             showAllObjectsButtonElement: explorerElement.querySelector(".xeokit-showAllObjects"),
             hideAllObjectsButtonElement: explorerElement.querySelector(".xeokit-hideAllObjects"),
-            objectsElement: explorerElement.querySelector(".xeokit-objects")
+            objectsElement: explorerElement.querySelector(".xeokit-objects"),
+            containerElement: this._containerElement
         });
 
         this._classesExplorer = new ClassesExplorer(this, {
             enableMeasurements: this._enableMeasurements,
             classesTabElement: explorerElement.querySelector(".xeokit-classesTab"),
             showAllClassesButtonElement: explorerElement.querySelector(".xeokit-showAllClasses"),
             hideAllClassesButtonElement: explorerElement.querySelector(".xeokit-hideAllClasses"),
-            classesElement: explorerElement.querySelector(".xeokit-classes")
+            classesElement: explorerElement.querySelector(".xeokit-classes"),
+            containerElement: this._containerElement
         });
 
         this._storeysExplorer = new StoreysExplorer(this, {
             enableMeasurements: this._enableMeasurements,
             storeysTabElement: explorerElement.querySelector(".xeokit-storeysTab"),
             showAllStoreysButtonElement: explorerElement.querySelector(".xeokit-showAllStoreys"),
             hideAllStoreysButtonElement: explorerElement.querySelector(".xeokit-hideAllStoreys"),
-            storeysElement: explorerElement.querySelector(".xeokit-storeys")
+            storeysElement: explorerElement.querySelector(".xeokit-storeys"),
+            containerElement: this._containerElement
         });
 
         if (this._enablePropertiesInspector) {
@@ -411,7 +417,8 @@ class BIMViewer extends Controller {
             counterElement: toolbarElement.querySelector(".xeokit-section-counter"),
             menuButtonElement: toolbarElement.querySelector(".xeokit-section-menu-button"),
             menuButtonArrowElement: toolbarElement.querySelector(".xeokit-section-menu-button-arrow"),
-            active: false
+            active: false,
+            containerElement: this._containerElement
         });
 
         if (this._enableMeasurements) {
@@ -465,7 +472,7 @@ class BIMViewer extends Controller {
             this._marqueeSelectionTool,
             this._sectionTool,
             this._enableMeasurements ? this._measureDistanceTool : null,
-            this._enableMeasurements ? this._measureAngleTool: null
+            this._enableMeasurements ? this._measureAngleTool : null
         ]);
 
         explorerElement.querySelector(".xeokit-showAllObjects").addEventListener("click", (event) => {
@@ -606,7 +613,7 @@ class BIMViewer extends Controller {
         this.viewer.cameraControl.dollyProximityThreshold = 30.0;
 
         const cameraPivotElement = document.createRange().createContextualFragment("<div class='xeokit-camera-pivot-marker'></div>").firstChild;
-        document.body.appendChild(cameraPivotElement);
+        this._containerElement.appendChild(cameraPivotElement);
         this.viewer.cameraControl.pivotElement = cameraPivotElement;
 
         scene.camera.perspective.near = 0.01;
@@ -627,11 +634,13 @@ class BIMViewer extends Controller {
 
         this._canvasContextMenu = new CanvasContextMenu(this, {
             hideOnAction: true,
-            enableMeasurements: this._enableMeasurements
+            enableMeasurements: this._enableMeasurements,
+            parentNode: this._containerElement
         });
         this._objectContextMenu = new ObjectContextMenu(this, {
             hideOnAction: true,
-            enableMeasurements: this._enableMeasurements
+            enableMeasurements: this._enableMeasurements,
+            parentNode: this._containerElement
         });
 
         const getCanvasPosFromEvent = function (event) {

src/BIMViewer.js

@@ -3,11 +3,11 @@ import {Controller} from "./Controller.js";
 /** @private */
 class BusyModal extends Controller {
 
-    constructor(parent, cfg = {}) {
+    constructor(parent, cfg = {}, rootDOMNode = document) {
 
         super(parent, cfg);
 
-        const busyModalBackdropElement = cfg.busyModalBackdropElement || document.body;
+        const busyModalBackdropElement = cfg.busyModalBackdropElement || rootDOMNode;
 
         if (!busyModalBackdropElement) {
             throw "Missing config: busyModalBackdropElement";

src/BusyModal.js

@@ -189,7 +189,8 @@ class CanvasContextMenu extends ContextMenu {
                         ]
                     }
                 ] : []
-            ]
+            ],
+            parentNode: cfg.parentNode
         });
     }
 }

src/contextMenus/CanvasContextMenu.js

@@ -150,7 +150,8 @@ class ModelsContextMenu extends ContextMenu {
         super({
             hideOnAction: cfg.hideOnAction,
             context: cfg.context,
-            items: items
+            items: items,
+            parentNode: cfg.parentNode
         });
     }
 }

src/contextMenus/ModelsContextMenu.js

@@ -25,6 +25,7 @@ class ClassesExplorer extends Controller {
             throw "Missing config: classesElement";
         }
 
+        this._containerElement = cfg.containerElement;
         this._classesTabElement = cfg.classesTabElement;
         this._showAllClassesButtonElement = cfg.showAllClassesButtonElement;
         this._hideAllClassesButtonElement = cfg.hideAllClassesButtonElement;
@@ -45,7 +46,8 @@ class ClassesExplorer extends Controller {
 
         this._treeViewContextMenu = new TreeViewContextMenu(this.bimViewer, {
             hideOnAction: true,
-            enableMeasurements: cfg.enableMeasurements
+            enableMeasurements: cfg.enableMeasurements,
+            parentNode: cfg.containerElement
         });
 
         this._treeView.on("contextmenu", (e) => {