@vitrosoftware/common-ui-ts 1.1.238 → 1.1.239

package/src/controls/BimViewer/js/bim-viewer.js

@@ -1,11 +1,11 @@
-import { BIMModel, BIMCommon, BIMAnnotation } from '/resource/bimViewer/js/bim-viewer-models.js?version=1.1.238';
+import { BIMModel, BIMCommon, BIMAnnotation } from '/resource/bimViewer/js/bim-viewer-models.js?version=1.1.239';
 
 import {
     Viewer, XKTLoaderPlugin, NavCubePlugin, SectionPlanesPlugin, math, BCFViewpointsPlugin, AnnotationsPlugin,
     ContextMenu, TreeViewPlugin, StoreyViewsPlugin, AngleMeasurementsPlugin, CameraMemento, DistanceMeasurementsPlugin,
     GLTFLoaderPlugin, utils, FastNavPlugin, MetaObject, parsers
 }
-    from '/resource/bimViewer/js/xeokit/xeokit-sdk.es.js?version=1.1.238';
+    from '/resource/bimViewer/js/xeokit/xeokit-sdk.es.js?version=1.1.239';
 
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -33,6 +33,8 @@ const setSceneObjectsVisible = (scene, objectIds, visible) => {
     viewer.scene.fire("vitroObjectsVisibility", { objectIds, visible });
 };
 
+
+
 const setSceneObjectsXRay = (scene, objectIds, xrayed) => {
     scene.setObjectsXRayed(objectIds, xrayed);
     viewer.scene.fire("vitroObjectsXRayed", { objectIds, xrayed });
@@ -46,7 +48,7 @@ const setSceneAllObjectsVisible = (scene, visible) => {
         scene.setObjectsVisible(scene.objectIds, visible);
     }
 
-    scene.fire("vitroAllObjectsVisibility", visible);
+    scene.fire("vitroAllObjectsVisibility", { visible : visible });
 };
 
 const setSceneAllObjectsXRay = (scene, xrayed) => {
@@ -57,9 +59,40 @@ const setSceneAllObjectsXRay = (scene, xrayed) => {
         scene.setObjectsXRayed(scene.objectIds, xrayed);
     }
 
-    scene.fire("vitroAllObjectsXRayed", xrayed);
+    scene.fire("vitroAllObjectsXRayed", { xrayed: xrayed });
+};
+
+
+const setModelAllObjectsVisible = (model, visible) => {
+    const objectIds = model.entityList.map(m => m.id);
+
+    if (!visible) {
+        model.scene.setObjectsVisible(objectIds, visible);
+    }
+    else {
+        model.scene.setObjectsVisible(objectIds, visible);
+    }
+
+    model.scene.fire("vitroAllObjectsVisibility", { model: model, visible: visible });
+};
+
+const setModelAllObjectsXRay = (model, xrayed) => {
+    const objectIds = model.entityList.map(m => m.id);
+
+    if (!xrayed) {
+        model.scene.setObjectsXRayed(objectIds, xrayed);
+    }
+    else {
+        model.scene.setObjectsXRayed(objectIds, xrayed);
+    }
+
+    model.scene.fire("vitroAllObjectsXRayed", { model: model, visible: visible });
 };
-
+
+const setModelObjectsVisible = (model, objectIds, visible) => {
+    model.scene.setObjectsVisible(objectIds, visible);
+    model.scene.fire("vitroObjectsVisibility", { model, objectIds, visible });
+};
 
 const treeViewContextMenu = new ContextMenu({
 
@@ -669,7 +702,7 @@ class VitroTreeViewPlugin extends TreeViewPlugin
         this._onCanvasBoundary = viewer.scene.canvas.on("boundary", culledSmallModelList);
         this._onCameraMatrix = viewer.scene.camera.on("matrix", culledSmallModelList);
 
-        this._onSceneTick = viewer.scene.on("reloadSmallScenes", () =>
+        this._onReloadSmallScenes = viewer.scene.on("reloadSmallScenes", () =>
         {
             culledSmallModelList();
         });
@@ -715,6 +748,17 @@ class VitroTreeViewPlugin extends TreeViewPlugin
         this.isXRay = false;
         this.xrayedEntityMap = {};
 
+        this.requiredEntityMap = {};
+
+        var addRequiredEntity = (entityId, required) => {
+            if (required) {
+                this.requiredEntityMap[entityId] = true;
+            } else {
+                delete this.requiredEntityMap[entityId];
+            }
+        };
+
+
         var addXrayedEntity = (entityId, xrayed) => {
             const a = xrayed;
 
@@ -734,52 +778,104 @@ class VitroTreeViewPlugin extends TreeViewPlugin
         };
 
         this._onObjectXRayed = this.scene.on("objectXRayed", (entity) => {
-            const a = entity.xrayed;
-            const b = this.isXRay;
-            const c = this.xrayedEntityMap[entity.id];
-            
-            addXrayedEntity(entity.id, entity.xrayed);
+            if (entity.model == this.largeModel) {
+                const a = entity.xrayed;
+                const b = this.isXRay;
+                const c = this.xrayedEntityMap[entity.id];
 
-            if ((a && !b && !c) || (a && b && c)) {
-                culledSmallModelList();
+                addXrayedEntity(entity.id, entity.xrayed);
+
+                if ((a && !b && !c) || (a && b && c)) {
+                    culledSmallModelList();
+                }
             }
         });
 
-        this._onTreeObjectVisibility = this.scene.on("vitroObjectsXRayed", (data) => {
-            data.objectIds.forEach(objectId => addXrayedEntity(objectId, data.xrayed));
-            culledSmallModelList();
+        this._onVitroClearObjectsRequired = this.scene.on("vitroClearObjectsRequired", (cfg) => {
+            if (!cfg.model || cfg.model == this.largeModel) {
+                this.requiredEntityMap = {};
+            }
         });
 
-        this._onTreeObjectVisibility = this.scene.on("vitroAllObjectsXRayed", (xrayed) => {
-
-            this.xrayedEntityMap = {};
-            this.isXRay = xrayed;
+        this._onVitroObjectsRequired = this.scene.on("vitroObjectsRequired", (cfg) => {
+            if (!cfg.model || cfg.model == this.largeModel) {
+                cfg.objectIds.forEach(objectId => addRequiredEntity(objectId, true));
+            }
+        });
 
-            culledSmallModelList();
+        this._onVitroObjectsXRayed = this.scene.on("vitroObjectsXRayed", (cfg) => {
+            if (!cfg.model || cfg.model == this.largeModel) {
+                cfg.objectIds.forEach(objectId => addXrayedEntity(objectId, cfg.xrayed));
+                culledSmallModelList();
+            }
         });
 
-        this._onObjectVisibility = this.scene.on("objectVisibility", (entity) => {
-            addInvisibleEntity(entity.id, entity.visible);
+        this._onVitroAllObjectsXRayed = this.scene.on("vitroAllObjectsXRayed", (cfg) => {
+            if (!cfg.model || cfg.model == this.largeModel) {
+                this.xrayedEntityMap = {};
+                this.isXRay = cfg.xrayed;
 
-            if (!entity.visible) {
                 culledSmallModelList();
             }
         });
 
-        this._onTreeObjectVisibility = this.scene.on("vitroObjectsVisibility", (data) => {
-            data.objectIds.forEach(objectId => addInvisibleEntity(objectId, data.visible));
-            culledSmallModelList();
+        this._onObjectVisibility = this.scene.on("objectVisibility", (entity) => {
+            if (entity.model == this.largeModel) {
+                addInvisibleEntity(entity.id, entity.visible);
+
+                if (!entity.visible) {
+                    culledSmallModelList();
+                }
+            }
         });
 
-        this._onTreeObjectVisibility = this.scene.on("vitroAllObjectsVisibility", (visible) => {
+        this._onVitroObjectsVisibility = this.scene.on("vitroObjectsVisibility", (cfg) => {
+            if (!cfg.model || cfg.model == this.largeModel) {
+                cfg.objectIds.forEach(objectId => addInvisibleEntity(objectId, cfg.visible));
+                culledSmallModelList();
+            }   
+        });
 
-            this.visibilityEntityMap = {};
-            this.isVisible = visible;
+        this._onVitroAllObjectsVisibility = this.scene.on("vitroAllObjectsVisibility", (cfg) => {
+            if (!cfg.model || cfg.model == this.largeModel)
+            {
+                this.visibilityEntityMap = {};
+                this.isVisible = cfg.visible;
 
-            culledSmallModelList();
+                culledSmallModelList();
+            }            
         });
     }
 
+    destroy() {
+        this.destroyed = true;
+        this.startSmallLoad = false;
+
+        this.viewer.scene.canvas.off(this._onCanvasBoundary);
+        this.viewer.scene.canvas.off(this._onCameraMatrix);
+        this.viewer.scene.off(this._onReloadSmallScenes);
+        this.viewer.scene.off(this._onSceneTick);
+
+        this.viewer.scene.input.off(this._onSceneMouseDown);
+        this.viewer.scene.input.off(this._onSceneMouseUp);
+        this.viewer.scene.input.off(this._onSceneMouseMove);
+
+        this.scene.off(this._onObjectXRayed);
+        this.scene.off(this._onVitroObjectsXRayed);
+        this.scene.off(this._onVitroAllObjectsXRayed);
+        this.scene.off(this._onObjectVisibility);
+        this.scene.off(this._onVitroObjectsVisibility);
+        this.scene.off(this._onVitroAllObjectsVisibility);
+
+        this.scene.off(this._onVitroClearObjectsRequired);
+        this.scene.off(this._onVitroObjectsRequired);
+
+
+        this.deleteModels();
+
+        super.destroy();
+    }
+
     culledModels() {
         if (this.controller) {
             this.controller.abort();
@@ -851,6 +947,8 @@ class VitroTreeViewPlugin extends TreeViewPlugin
             sceneOptions.xrayMode = this.isXRay ? 1 : 0;
             sceneOptions.xrayedEntityIdList = Object.keys(this.xrayedEntityMap);
             sceneOptions.sectionPlanes = [];
+            
+            sceneOptions.requiredEntityIdList = Object.keys(this.requiredEntityMap);
 
             viewer.scene._sectionPlanesState.sectionPlanes.forEach((plane) => {
                 var sectionPlane = {};
@@ -861,203 +959,899 @@ class VitroTreeViewPlugin extends TreeViewPlugin
                 sceneOptions.sectionPlanes.push(sectionPlane);
             });
 
-            BIMCommon.GetSmallModel(this.viewer.scene, BIMCommon.ModelList, sceneOptions, this.controller.signal, this.loadSmallPart.bind(this));
+            BIMCommon.GetSmallModel(this.viewer.scene, this.largeModel.ModelList, sceneOptions, this.controller.signal, this.loadSmallPart.bind(this));
         }
     }
 }
 
 /*! jquery-dialogextend 2.0.3 2014-07-08 */
-(function(){var i;i=jQuery,i.widget("ui.dialogExtend",{version:"2.0.0",modes:{},options:{closable:!0,dblclick:!1,titlebar:!1,icons:{close:"ui-icon-closethick",restore:"ui-icon-newwin"},load:null,beforeRestore:null,restore:null},_create:function(){return this._state="normal",i(this.element[0]).data("ui-dialog")||i.error("jQuery.dialogExtend Error : Only jQuery UI Dialog element is accepted"),this._verifyOptions(),this._initStyles(),this._initButtons(),this._initTitleBar(),this._setState("normal"),this._on("load",function(i){return console.log("test",i)}),this._trigger("load")},_setState:function(t){return i(this.element[0]).removeClass("ui-dialog-"+this._state).addClass("ui-dialog-"+t),this._state=t},_verifyOptions:function(){var t,e,o;!this.options.dblclick||this.options.dblclick in this.modes||(i.error("jQuery.dialogExtend Error : Invalid <dblclick> value '"+this.options.dblclick+"'"),this.options.dblclick=!1),this.options.titlebar&&"none"!==(e=this.options.titlebar)&&"transparent"!==e&&(i.error("jQuery.dialogExtend Error : Invalid <titlebar> value '"+this.options.titlebar+"'"),this.options.titlebar=!1),o=[];for(t in this.modes)this["_verifyOptions_"+t]?o.push(this["_verifyOptions_"+t]()):o.push(void 0);return o},_initStyles:function(){var t,e,o;i(".dialog-extend-css").length||(e="",e+='<style class="dialog-extend-css" type="text/css">',e+=".ui-dialog .ui-dialog-titlebar-buttonpane>a { float: right; }",e+=".ui-dialog .ui-dialog-titlebar-restore { width: 19px; height: 18px; }",e+=".ui-dialog .ui-dialog-titlebar-restore span { display: block; margin: 1px; }",e+=".ui-dialog .ui-dialog-titlebar-restore:hover,",e+=".ui-dialog .ui-dialog-titlebar-restore:focus { padding: 0; }",e+=".ui-dialog .ui-dialog-titlebar ::selection { background-color: transparent; }",e+="</style>",i(e).appendTo("body")),o=[];for(t in this.modes)o.push(this["_initStyles_"+t]());return o},_initButtons:function(){var t,e,o,n,a,l=this;n=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar"),t=i('<div class="ui-dialog-titlebar-buttonpane"></div>').appendTo(n),t.css({position:"absolute",top:"50%",right:"0.3em","margin-top":"-10px",height:"18px"}),n.find(".ui-dialog-titlebar-close").css({position:"relative","float":"right",top:"auto",right:"auto",margin:0}).find(".ui-icon").removeClass("ui-icon-closethick").addClass(this.options.icons.close).end().appendTo(t).end(),t.append('<a class="ui-dialog-titlebar-restore ui-corner-all ui-state-default" href="#"><span class="ui-icon '+this.options.icons.restore+'" title="restore">restore</span></a>').find(".ui-dialog-titlebar-restore").attr("role","button").mouseover(function(){return i(this).addClass("ui-state-hover")}).mouseout(function(){return i(this).removeClass("ui-state-hover")}).focus(function(){return i(this).addClass("ui-state-focus")}).blur(function(){return i(this).removeClass("ui-state-focus")}).end().find(".ui-dialog-titlebar-close").toggle(this.options.closable).end().find(".ui-dialog-titlebar-restore").hide().click(function(i){return i.preventDefault(),l.restore()}).end(),a=this.modes;for(o in a)e=a[o],this._initModuleButton(o,e);return n.dblclick(function(){return l.options.dblclick?"normal"!==l._state?l.restore():l[l.options.dblclick]():void 0}).select(function(){return!1})},_initModuleButton:function(t,e){var o,n=this;return o=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-buttonpane"),o.append('<a class="ui-dialog-titlebar-'+t+' ui-corner-all ui-state-default" href="#" title="'+t+'"><span class="ui-icon '+this.options.icons[t]+'">'+t+"</span></a>").find(".ui-dialog-titlebar-"+t).attr("role","button").mouseover(function(){return i(this).addClass("ui-state-hover")}).mouseout(function(){return i(this).removeClass("ui-state-hover")}).focus(function(){return i(this).addClass("ui-state-focus")}).blur(function(){return i(this).removeClass("ui-state-focus")}).end().find(".ui-dialog-titlebar-"+t).toggle(this.options[e.option]).click(function(i){return i.preventDefault(),n[t]()}).end()},_initTitleBar:function(){var t;switch(this.options.titlebar){case!1:return 0;case"none":return i(this.element[0]).dialog("option","draggable")&&(t=i("<div />").addClass("ui-dialog-draggable-handle").css("cursor","move").height(5),i(this.element[0]).dialog("widget").prepend(t).draggable("option","handle",t)),i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").find(".ui-dialog-title").html("&nbsp;").end().css({"background-color":"transparent","background-image":"none",border:0,position:"absolute",right:0,top:0,"z-index":9999}).end();case"transparent":return i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").css({"background-color":"transparent","background-image":"none",border:0});default:return i.error("jQuery.dialogExtend Error : Invalid <titlebar> value '"+this.options.titlebar+"'")}},state:function(){return this._state},restore:function(){return this._trigger("beforeRestore"),this._restore(),this._toggleButtons(),this._trigger("restore")},_restore:function(){return"normal"!==this._state?(this["_restore_"+this._state](),this._setState("normal"),i(this.element[0]).dialog("widget").focus()):void 0},_saveSnapshot:function(){return"normal"===this._state?(this.original_config_resizable=i(this.element[0]).dialog("option","resizable"),this.original_config_draggable=i(this.element[0]).dialog("option","draggable"),this.original_size_height=i(this.element[0]).dialog("widget").outerHeight(),this.original_size_width=i(this.element[0]).dialog("option","width"),this.original_size_maxHeight=i(this.element[0]).dialog("option","maxHeight"),this.original_position_mode=i(this.element[0]).dialog("widget").css("position"),this.original_position_left=i(this.element[0]).dialog("widget").offset().left-i("body").scrollLeft(),this.original_position_top=i(this.element[0]).dialog("widget").offset().top-i("body").scrollTop(),this.original_titlebar_wrap=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").css("white-space")):void 0},_loadSnapshot:function(){return{config:{resizable:this.original_config_resizable,draggable:this.original_config_draggable},size:{height:this.original_size_height,width:this.original_size_width,maxHeight:this.original_size_maxHeight},position:{mode:this.original_position_mode,left:this.original_position_left,top:this.original_position_top},titlebar:{wrap:this.original_titlebar_wrap}}},_toggleButtons:function(t){var e,o,n,a,l,s;n=t||this._state,i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-restore").toggle("normal"!==n).css({right:"1.4em"}).end(),a=this.modes;for(o in a)e=a[o],i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-"+o).toggle(n!==e.state&&this.options[e.option]);l=this.modes,s=[];for(o in l)e=l[o],e.state===n?s.push(i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-restore").insertAfter(i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-"+o)).end()):s.push(void 0);return s}})}).call(this),function(){var i;i=jQuery,i.extend(!0,i.ui.dialogExtend.prototype,{modes:{collapse:{option:"collapsable",state:"collapsed"}},options:{collapsable:!1,icons:{collapse:"ui-icon-triangle-1-s"},beforeCollapse:null,collapse:null},collapse:function(){var t,e;return t=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").height()+15,this._trigger("beforeCollapse"),"normal"!==this._state&&this._restore(),this._saveSnapshot(),e=i(this.element[0]).dialog("widget").position(),i(this.element[0]).dialog("option",{resizable:!1,height:t,maxHeight:t,position:[e.left-i(document).scrollLeft(),e.top-i(document).scrollTop()]}).on("dialogclose",this._collapse_restore).hide().dialog("widget").find(".ui-dialog-buttonpane:visible").hide().end().find(".ui-dialog-titlebar").css("white-space","nowrap").end().find(".ui-dialog-content"),this._setState("collapsed"),this._toggleButtons(),this._trigger("collapse")},_restore_collapsed:function(){var t;return t=this._loadSnapshot(),i(this.element[0]).show().dialog("widget").find(".ui-dialog-buttonpane:hidden").show().end().find(".ui-dialog-titlebar").css("white-space",t.titlebar.wrap).end().find(".ui-dialog-content").dialog("option",{resizable:t.config.resizable,height:t.size.height,maxHeight:t.size.maxHeight}).off("dialogclose",this._collapse_restore)},_initStyles_collapse:function(){var t;return i(".dialog-extend-collapse-css").length?void 0:(t="",t+='<style class="dialog-extend-collapse-css" type="text/css">',t+=".ui-dialog .ui-dialog-titlebar-collapse { width: 19px; height: 18px; }",t+=".ui-dialog .ui-dialog-titlebar-collapse span { display: block; margin: 1px; }",t+=".ui-dialog .ui-dialog-titlebar-collapse:hover,",t+=".ui-dialog .ui-dialog-titlebar-collapse:focus { padding: 0; }",t+="</style>",i(t).appendTo("body"))},_collapse_restore:function(){return i(this).dialogExtend("restore")}})}.call(this),function(){var i;i=jQuery,i.extend(!0,i.ui.dialogExtend.prototype,{modes:{maximize:{option:"maximizable",state:"maximized"}},options:{maximizable:!1,icons:{maximize:"ui-icon-extlink"},beforeMaximize:null,maximize:null},maximize:function(){var t,e;return t=i(window).height()-11,e=i(window).width()-11,this._trigger("beforeMaximize"),"normal"!==this._state&&this._restore(),this._saveSnapshot(),i(this.element[0]).dialog("option","draggable")&&i(this.element[0]).dialog("widget").draggable("option","handle",null).find(".ui-dialog-draggable-handle").css("cursor","text").end(),i(this.element[0]).dialog("widget").css("position","fixed").find(".ui-dialog-content").show().dialog("widget").find(".ui-dialog-buttonpane").show().end().find(".ui-dialog-content").dialog("option",{resizable:!1,draggable:!1,height:t,width:e,position:{my:"left top",at:"left top",of:window}}),this._setState("maximized"),this._toggleButtons(),this._trigger("maximize")},_restore_maximized:function(){var t;return t=this._loadSnapshot(),i(this.element[0]).dialog("widget").css("position",t.position.mode).find(".ui-dialog-titlebar").css("white-space",t.titlebar.wrap).end().find(".ui-dialog-content").dialog("option",{resizable:t.config.resizable,draggable:t.config.draggable,height:t.size.height,width:t.size.width,maxHeight:t.size.maxHeight,position:{my:"left top",at:"left+"+t.position.left+" top+"+t.position.top,of:window}}),i(this.element[0]).dialog("option","draggable")?i(this.element[0]).dialog("widget").draggable("option","handle",i(this.element[0]).dialog("widget").find(".ui-dialog-draggable-handle").length?i(this.element[0]).dialog("widget").find(".ui-dialog-draggable-handle"):".ui-dialog-titlebar").find(".ui-dialog-draggable-handle").css("cursor","move"):void 0},_initStyles_maximize:function(){var t;return i(".dialog-extend-maximize-css").length?void 0:(t="",t+='<style class="dialog-extend-maximize-css" type="text/css">',t+=".ui-dialog .ui-dialog-titlebar-maximize { width: 19px; height: 18px; }",t+=".ui-dialog .ui-dialog-titlebar-maximize span { display: block; margin: 1px; }",t+=".ui-dialog .ui-dialog-titlebar-maximize:hover,",t+=".ui-dialog .ui-dialog-titlebar-maximize:focus { padding: 0; }",t+="</style>",i(t).appendTo("body"))}})}.call(this),function(){var i;i=jQuery,i.extend(!0,i.ui.dialogExtend.prototype,{modes:{minimize:{option:"minimizable",state:"minimized"}},options:{minimizable:!1,minimizeLocation:"left",icons:{minimize:"ui-icon-minus"},beforeMinimize:null,minimize:null},minimize:function(){var t,e,o;return this._trigger("beforeMinimize"),"normal"!==this._state&&this._restore(),o=200,i("#dialog-extend-fixed-container").length?e=i("#dialog-extend-fixed-container"):(e=i('<div id="dialog-extend-fixed-container"></div>').appendTo("body"),e.css({position:"fixed",bottom:1,left:1,right:1,"z-index":9999})),this._toggleButtons("minimized"),t=i(this.element[0]).dialog("widget").clone().children().remove().end(),i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").clone(!0,!0).appendTo(t),t.css({"float":this.options.minimizeLocation,margin:1}),e.append(t),i(this.element[0]).data("dialog-extend-minimize-controls",t),i(this.element[0]).dialog("option","draggable")&&t.removeClass("ui-draggable"),t.css({height:"auto",width:o,position:"static"}),i(this.element[0]).on("dialogbeforeclose",this._minimize_restoreOnClose).dialog("widget").hide(),this._setState("minimized"),this._trigger("minimize")},_restore_minimized:function(){return i(this.element[0]).dialog("widget").show(),i(this.element[0]).off("dialogbeforeclose",this._minimize_restoreOnClose),i(this.element[0]).data("dialog-extend-minimize-controls").remove(),i(this.element[0]).removeData("dialog-extend-minimize-controls")},_initStyles_minimize:function(){var t;return i(".dialog-extend-minimize-css").length?void 0:(t="",t+='<style class="dialog-extend-minimize-css" type="text/css">',t+=".ui-dialog .ui-dialog-titlebar-minimize { width: 19px; height: 18px; }",t+=".ui-dialog .ui-dialog-titlebar-minimize span { display: block; margin: 1px; }",t+=".ui-dialog .ui-dialog-titlebar-minimize:hover,",t+=".ui-dialog .ui-dialog-titlebar-minimize:focus { padding: 0; }",t+="</style>",i(t).appendTo("body"))},_verifyOptions_minimize:function(){var t;return!this.options.minimizeLocation||"left"!==(t=this.options.minimizeLocation)&&"right"!==t?(i.error("jQuery.dialogExtend Error : Invalid <minimizeLocation> value '"+this.options.minimizeLocation+"'"),this.options.minimizeLocation="left"):void 0},_minimize_restoreOnClose:function(){return i(this).dialogExtend("restore")}})}.call(this);window.initBimViewer = function(context) {function showPropertyInspector(pickResult) {
-    //var metaObject;
-    //var model = getPickResultModel(pickResult);
-    var objectId = pickResult.entity.id;
-
-    collapseSidebarIssueDetail();
-    collapseSidebarNotes();
-    $('#btnToggleSidebarNotes').removeClass('toggled');
+(function(){var i;i=jQuery,i.widget("ui.dialogExtend",{version:"2.0.0",modes:{},options:{closable:!0,dblclick:!1,titlebar:!1,icons:{close:"ui-icon-closethick",restore:"ui-icon-newwin"},load:null,beforeRestore:null,restore:null},_create:function(){return this._state="normal",i(this.element[0]).data("ui-dialog")||i.error("jQuery.dialogExtend Error : Only jQuery UI Dialog element is accepted"),this._verifyOptions(),this._initStyles(),this._initButtons(),this._initTitleBar(),this._setState("normal"),this._on("load",function(i){return console.log("test",i)}),this._trigger("load")},_setState:function(t){return i(this.element[0]).removeClass("ui-dialog-"+this._state).addClass("ui-dialog-"+t),this._state=t},_verifyOptions:function(){var t,e,o;!this.options.dblclick||this.options.dblclick in this.modes||(i.error("jQuery.dialogExtend Error : Invalid <dblclick> value '"+this.options.dblclick+"'"),this.options.dblclick=!1),this.options.titlebar&&"none"!==(e=this.options.titlebar)&&"transparent"!==e&&(i.error("jQuery.dialogExtend Error : Invalid <titlebar> value '"+this.options.titlebar+"'"),this.options.titlebar=!1),o=[];for(t in this.modes)this["_verifyOptions_"+t]?o.push(this["_verifyOptions_"+t]()):o.push(void 0);return o},_initStyles:function(){var t,e,o;i(".dialog-extend-css").length||(e="",e+='<style class="dialog-extend-css" type="text/css">',e+=".ui-dialog .ui-dialog-titlebar-buttonpane>a { float: right; }",e+=".ui-dialog .ui-dialog-titlebar-restore { width: 19px; height: 18px; }",e+=".ui-dialog .ui-dialog-titlebar-restore span { display: block; margin: 1px; }",e+=".ui-dialog .ui-dialog-titlebar-restore:hover,",e+=".ui-dialog .ui-dialog-titlebar-restore:focus { padding: 0; }",e+=".ui-dialog .ui-dialog-titlebar ::selection { background-color: transparent; }",e+="</style>",i(e).appendTo("body")),o=[];for(t in this.modes)o.push(this["_initStyles_"+t]());return o},_initButtons:function(){var t,e,o,n,a,l=this;n=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar"),t=i('<div class="ui-dialog-titlebar-buttonpane"></div>').appendTo(n),t.css({position:"absolute",top:"50%",right:"0.3em","margin-top":"-10px",height:"18px"}),n.find(".ui-dialog-titlebar-close").css({position:"relative","float":"right",top:"auto",right:"auto",margin:0}).find(".ui-icon").removeClass("ui-icon-closethick").addClass(this.options.icons.close).end().appendTo(t).end(),t.append('<a class="ui-dialog-titlebar-restore ui-corner-all ui-state-default" href="#"><span class="ui-icon '+this.options.icons.restore+'" title="restore">restore</span></a>').find(".ui-dialog-titlebar-restore").attr("role","button").mouseover(function(){return i(this).addClass("ui-state-hover")}).mouseout(function(){return i(this).removeClass("ui-state-hover")}).focus(function(){return i(this).addClass("ui-state-focus")}).blur(function(){return i(this).removeClass("ui-state-focus")}).end().find(".ui-dialog-titlebar-close").toggle(this.options.closable).end().find(".ui-dialog-titlebar-restore").hide().click(function(i){return i.preventDefault(),l.restore()}).end(),a=this.modes;for(o in a)e=a[o],this._initModuleButton(o,e);return n.dblclick(function(){return l.options.dblclick?"normal"!==l._state?l.restore():l[l.options.dblclick]():void 0}).select(function(){return!1})},_initModuleButton:function(t,e){var o,n=this;return o=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-buttonpane"),o.append('<a class="ui-dialog-titlebar-'+t+' ui-corner-all ui-state-default" href="#" title="'+t+'"><span class="ui-icon '+this.options.icons[t]+'">'+t+"</span></a>").find(".ui-dialog-titlebar-"+t).attr("role","button").mouseover(function(){return i(this).addClass("ui-state-hover")}).mouseout(function(){return i(this).removeClass("ui-state-hover")}).focus(function(){return i(this).addClass("ui-state-focus")}).blur(function(){return i(this).removeClass("ui-state-focus")}).end().find(".ui-dialog-titlebar-"+t).toggle(this.options[e.option]).click(function(i){return i.preventDefault(),n[t]()}).end()},_initTitleBar:function(){var t;switch(this.options.titlebar){case!1:return 0;case"none":return i(this.element[0]).dialog("option","draggable")&&(t=i("<div />").addClass("ui-dialog-draggable-handle").css("cursor","move").height(5),i(this.element[0]).dialog("widget").prepend(t).draggable("option","handle",t)),i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").find(".ui-dialog-title").html("&nbsp;").end().css({"background-color":"transparent","background-image":"none",border:0,position:"absolute",right:0,top:0,"z-index":9999}).end();case"transparent":return i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").css({"background-color":"transparent","background-image":"none",border:0});default:return i.error("jQuery.dialogExtend Error : Invalid <titlebar> value '"+this.options.titlebar+"'")}},state:function(){return this._state},restore:function(){return this._trigger("beforeRestore"),this._restore(),this._toggleButtons(),this._trigger("restore")},_restore:function(){return"normal"!==this._state?(this["_restore_"+this._state](),this._setState("normal"),i(this.element[0]).dialog("widget").focus()):void 0},_saveSnapshot:function(){return"normal"===this._state?(this.original_config_resizable=i(this.element[0]).dialog("option","resizable"),this.original_config_draggable=i(this.element[0]).dialog("option","draggable"),this.original_size_height=i(this.element[0]).dialog("widget").outerHeight(),this.original_size_width=i(this.element[0]).dialog("option","width"),this.original_size_maxHeight=i(this.element[0]).dialog("option","maxHeight"),this.original_position_mode=i(this.element[0]).dialog("widget").css("position"),this.original_position_left=i(this.element[0]).dialog("widget").offset().left-i("body").scrollLeft(),this.original_position_top=i(this.element[0]).dialog("widget").offset().top-i("body").scrollTop(),this.original_titlebar_wrap=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").css("white-space")):void 0},_loadSnapshot:function(){return{config:{resizable:this.original_config_resizable,draggable:this.original_config_draggable},size:{height:this.original_size_height,width:this.original_size_width,maxHeight:this.original_size_maxHeight},position:{mode:this.original_position_mode,left:this.original_position_left,top:this.original_position_top},titlebar:{wrap:this.original_titlebar_wrap}}},_toggleButtons:function(t){var e,o,n,a,l,s;n=t||this._state,i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-restore").toggle("normal"!==n).css({right:"1.4em"}).end(),a=this.modes;for(o in a)e=a[o],i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-"+o).toggle(n!==e.state&&this.options[e.option]);l=this.modes,s=[];for(o in l)e=l[o],e.state===n?s.push(i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-restore").insertAfter(i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-"+o)).end()):s.push(void 0);return s}})}).call(this),function(){var i;i=jQuery,i.extend(!0,i.ui.dialogExtend.prototype,{modes:{collapse:{option:"collapsable",state:"collapsed"}},options:{collapsable:!1,icons:{collapse:"ui-icon-triangle-1-s"},beforeCollapse:null,collapse:null},collapse:function(){var t,e;return t=i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").height()+15,this._trigger("beforeCollapse"),"normal"!==this._state&&this._restore(),this._saveSnapshot(),e=i(this.element[0]).dialog("widget").position(),i(this.element[0]).dialog("option",{resizable:!1,height:t,maxHeight:t,position:[e.left-i(document).scrollLeft(),e.top-i(document).scrollTop()]}).on("dialogclose",this._collapse_restore).hide().dialog("widget").find(".ui-dialog-buttonpane:visible").hide().end().find(".ui-dialog-titlebar").css("white-space","nowrap").end().find(".ui-dialog-content"),this._setState("collapsed"),this._toggleButtons(),this._trigger("collapse")},_restore_collapsed:function(){var t;return t=this._loadSnapshot(),i(this.element[0]).show().dialog("widget").find(".ui-dialog-buttonpane:hidden").show().end().find(".ui-dialog-titlebar").css("white-space",t.titlebar.wrap).end().find(".ui-dialog-content").dialog("option",{resizable:t.config.resizable,height:t.size.height,maxHeight:t.size.maxHeight}).off("dialogclose",this._collapse_restore)},_initStyles_collapse:function(){var t;return i(".dialog-extend-collapse-css").length?void 0:(t="",t+='<style class="dialog-extend-collapse-css" type="text/css">',t+=".ui-dialog .ui-dialog-titlebar-collapse { width: 19px; height: 18px; }",t+=".ui-dialog .ui-dialog-titlebar-collapse span { display: block; margin: 1px; }",t+=".ui-dialog .ui-dialog-titlebar-collapse:hover,",t+=".ui-dialog .ui-dialog-titlebar-collapse:focus { padding: 0; }",t+="</style>",i(t).appendTo("body"))},_collapse_restore:function(){return i(this).dialogExtend("restore")}})}.call(this),function(){var i;i=jQuery,i.extend(!0,i.ui.dialogExtend.prototype,{modes:{maximize:{option:"maximizable",state:"maximized"}},options:{maximizable:!1,icons:{maximize:"ui-icon-extlink"},beforeMaximize:null,maximize:null},maximize:function(){var t,e;return t=i(window).height()-11,e=i(window).width()-11,this._trigger("beforeMaximize"),"normal"!==this._state&&this._restore(),this._saveSnapshot(),i(this.element[0]).dialog("option","draggable")&&i(this.element[0]).dialog("widget").draggable("option","handle",null).find(".ui-dialog-draggable-handle").css("cursor","text").end(),i(this.element[0]).dialog("widget").css("position","fixed").find(".ui-dialog-content").show().dialog("widget").find(".ui-dialog-buttonpane").show().end().find(".ui-dialog-content").dialog("option",{resizable:!1,draggable:!1,height:t,width:e,position:{my:"left top",at:"left top",of:window}}),this._setState("maximized"),this._toggleButtons(),this._trigger("maximize")},_restore_maximized:function(){var t;return t=this._loadSnapshot(),i(this.element[0]).dialog("widget").css("position",t.position.mode).find(".ui-dialog-titlebar").css("white-space",t.titlebar.wrap).end().find(".ui-dialog-content").dialog("option",{resizable:t.config.resizable,draggable:t.config.draggable,height:t.size.height,width:t.size.width,maxHeight:t.size.maxHeight,position:{my:"left top",at:"left+"+t.position.left+" top+"+t.position.top,of:window}}),i(this.element[0]).dialog("option","draggable")?i(this.element[0]).dialog("widget").draggable("option","handle",i(this.element[0]).dialog("widget").find(".ui-dialog-draggable-handle").length?i(this.element[0]).dialog("widget").find(".ui-dialog-draggable-handle"):".ui-dialog-titlebar").find(".ui-dialog-draggable-handle").css("cursor","move"):void 0},_initStyles_maximize:function(){var t;return i(".dialog-extend-maximize-css").length?void 0:(t="",t+='<style class="dialog-extend-maximize-css" type="text/css">',t+=".ui-dialog .ui-dialog-titlebar-maximize { width: 19px; height: 18px; }",t+=".ui-dialog .ui-dialog-titlebar-maximize span { display: block; margin: 1px; }",t+=".ui-dialog .ui-dialog-titlebar-maximize:hover,",t+=".ui-dialog .ui-dialog-titlebar-maximize:focus { padding: 0; }",t+="</style>",i(t).appendTo("body"))}})}.call(this),function(){var i;i=jQuery,i.extend(!0,i.ui.dialogExtend.prototype,{modes:{minimize:{option:"minimizable",state:"minimized"}},options:{minimizable:!1,minimizeLocation:"left",icons:{minimize:"ui-icon-minus"},beforeMinimize:null,minimize:null},minimize:function(){var t,e,o;return this._trigger("beforeMinimize"),"normal"!==this._state&&this._restore(),o=200,i("#dialog-extend-fixed-container").length?e=i("#dialog-extend-fixed-container"):(e=i('<div id="dialog-extend-fixed-container"></div>').appendTo("body"),e.css({position:"fixed",bottom:1,left:1,right:1,"z-index":9999})),this._toggleButtons("minimized"),t=i(this.element[0]).dialog("widget").clone().children().remove().end(),i(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").clone(!0,!0).appendTo(t),t.css({"float":this.options.minimizeLocation,margin:1}),e.append(t),i(this.element[0]).data("dialog-extend-minimize-controls",t),i(this.element[0]).dialog("option","draggable")&&t.removeClass("ui-draggable"),t.css({height:"auto",width:o,position:"static"}),i(this.element[0]).on("dialogbeforeclose",this._minimize_restoreOnClose).dialog("widget").hide(),this._setState("minimized"),this._trigger("minimize")},_restore_minimized:function(){return i(this.element[0]).dialog("widget").show(),i(this.element[0]).off("dialogbeforeclose",this._minimize_restoreOnClose),i(this.element[0]).data("dialog-extend-minimize-controls").remove(),i(this.element[0]).removeData("dialog-extend-minimize-controls")},_initStyles_minimize:function(){var t;return i(".dialog-extend-minimize-css").length?void 0:(t="",t+='<style class="dialog-extend-minimize-css" type="text/css">',t+=".ui-dialog .ui-dialog-titlebar-minimize { width: 19px; height: 18px; }",t+=".ui-dialog .ui-dialog-titlebar-minimize span { display: block; margin: 1px; }",t+=".ui-dialog .ui-dialog-titlebar-minimize:hover,",t+=".ui-dialog .ui-dialog-titlebar-minimize:focus { padding: 0; }",t+="</style>",i(t).appendTo("body"))},_verifyOptions_minimize:function(){var t;return!this.options.minimizeLocation||"left"!==(t=this.options.minimizeLocation)&&"right"!==t?(i.error("jQuery.dialogExtend Error : Invalid <minimizeLocation> value '"+this.options.minimizeLocation+"'"),this.options.minimizeLocation="left"):void 0},_minimize_restoreOnClose:function(){return i(this).dialogExtend("restore")}})}.call(this);window.initBimViewer = function(context) {const EVENT_SEARCH_ISSUE_LIST = 'vitro.search.issue.list';
+const EVENT_ISSUE_LIST_REFRESH = 'vitro.issue.list.refresh';
+const EVENT_ISSUE_LIST_SELECT_ITEM = 'vitro.issue.list.select.item';
+const PANE_LEFT_MIN_WIDTH = 150;
+const PANE_RIGHT_MIN_WIDTH = 200;
 
-    setPropertyBDSets(objectId);
+var notesDescriptionVisibleList = {};
 
-    return false;
+BIMAnnotation.GetNote = (callback) => {
+    callback([]);
 }
 
-function getPickResultModel(pickResult) {
-    var modelId = getPickResultModelId(pickResult);
-    if (modelId) {
-        if (window.model.id == modelId) {
-            return window.model;
-        } else if (window.model2 && window.model2.id == modelId) {
-            return window.model2;
-        } else {
-            return false;
-        }
-    } else {
-        return false;
-    }
-}
+function saveNote(pickResult) {
 
-function getPickResultModelId(pickResult) {
-    if (pickResult.entity.model && pickResult.entity.model.id) {
-        return pickResult.entity.model.id;
-    } else if (pickResult.entity._owner && pickResult.entity._owner.id) {
-        return pickResult.entity._owner.id;
-    } else {
-        return false;
-    }
 }
 
-function getPropertyValue(property) {
-    if (property.valueBool != null && property.valueBool != undefined) {
-        return property.valueBool;
-    }
-    else if (property.valueInt != null && property.valueInt != undefined) {
-        return property.valueInt;
-    }
-    else if (property.valueText != null && property.valueText != undefined) {
-        return property.valueText;
-    }
-    else if (property.valueReal != null && property.valueReal != undefined) {
-        const normalized = property.valueReal.replace(',', '.').trim();
-        const num = Number(normalized);
-        if (!isNaN(num)) {
-            if (Math.abs(num) < 1) {
-                return Number(num.toPrecision(3));
-            } else {
-                return Number(num.toFixed(2));
-            }
-        }
-        return property.valueReal;
-    }
-}
+function createMarkupData(pickResult) {
+    let markup = {};
+    markup.worldPos = [];
+    markup.worldPos.push(pickResult._worldPos[0]);
+    markup.worldPos.push(pickResult._worldPos[1]);
+    markup.worldPos.push(pickResult._worldPos[2]);
 
-function convertProperty(data) {
-    let groups = [];
+    var eye = viewer.camera.eye;
+    markup.eye = [];
+    markup.eye.push(eye[0]);
+    markup.eye.push(eye[1]);
+    markup.eye.push(eye[2]);
 
-    for (let property of data) {
-        let existingGroups = groups.filter(group => group.name == property.groupName);
-        if (existingGroups.length > 0) {
-            existingGroups[0].properties.push({ name: property.name, value: getPropertyValue(property) });
-        }
-        else {
-            let newGroup = {
-                name: property.groupName,
-                properties: [],
-            };
-            newGroup.properties.push({ name: property.name, value: getPropertyValue(property) });
+    var look = viewer.camera.look;
+    markup.look = [];
+    markup.look.push(look[0]);
+    markup.look.push(look[1]);
+    markup.look.push(look[2]);
 
+    var up = viewer.camera.up;
+    markup.up = [];
+    markup.up.push(up[0]);
+    markup.up.push(up[1]);
+    markup.up.push(up[2]);
 
-            groups.push(newGroup);
-        }
+    if (pickResult.entity && pickResult.entity.id) {
+        markup.entity = pickResult.entity.id;
     }
 
-    return groups;
+    return markup;
 }
 
-function setPropertyBDSets(id) {
-    const html = [];
+function addIssue(itemId, data) {
+    context.onCreateIssue(itemId, data);
 
-    html.push('<div class="element-attributes">');
-    html.push('</div>');
+    hidePropInspector();
+    expandSidebarIssueDetail();
+}
 
-    viewer.scene.canvas.spinner.processes++;
+function createAnnotationByClick(pickResult) {
+    let data = createMarkupData(pickResult);
+
+    if (data.entity) {
+        viewer.scene.canvas.spinner.processes++;
+
+        const callback = (modelInfo, status, jqXHR) => {
+
+            const itemId = modelInfo?.itemId ? modelInfo?.itemId : context.file.id;
+
+            addIssue(itemId, data);
 
-    BIMModel.GetPropertyList(id,
-        (data) => {
-            const propertySets = convertProperty(data);
-            addPropertySet(propertySets, html);
-            viewer.scene.canvas.spinner.processes--;
-        },
-        (error) => {
             viewer.scene.canvas.spinner.processes--;
-        }
-    );
+        };
 
-    $('#propInspector .prop-inspector-content')[0].innerHTML = html.join("");
-    $('.xeokit-accordion-container').accordion({
-        collapsible: true,
-        heightStyle: "content"
-    });
-    showPropInspector();
-}
+        const error = () => {
+            viewer.scene.canvas.spinner.processes--;
+        };
 
-function addPropertySet(propertySets, html) {
-    if (!propertySets || propertySets.length == 0) {
-        html.push('<p class="subtitle">No properties sets found.</p>');
+        BIMModel.GetModel(data.entity, callback, error);
     }
     else {
-        html.push('<div class="xeokit-accordion">');
-        for (let i = 0, len = propertySets.length; i < len; i++) {
-            const propertySet = propertySets[i];
-            const properties = propertySet.properties || propertySet.p || [];
-            if (properties.length > 0) {
-                html.push('<div class="xeokit-accordion-container">' +
-                    '<h3><span>' + (propertySet.name ? propertySet.name : propertySet.propertySetName) + '</span></h3>' +
-                    '<div class="xeokit-accordion-panel">' +
-                    '<table class="xeokit-table"><tbody>'
-                );
-                for (let i = 0, len = properties.length; i < len; i++) {
-                    const property = properties[i];
-                    html.push('<tr><td class="td1">' + (property.Name || property.name || property.label) + ':</td><td class="td2">' + (property.v || property.Value || property.value) + '</td></tr>');
-                }
-                html.push('</tbody></table>' +
-                    '</div>' +
-                    '</div>');
-            } else {
-                html.push('<p class="subtitle">No properties sets found.</p>');
-            }
-        }
-        html.push('</div>');
+        addIssue(context.file.id, data);
     }
-    $('#propInspector .prop-inspector-content')[0].innerHTML = html.join("");
-    $('.xeokit-accordion-container').accordion({
-        collapsible: true,
-        heightStyle: "content"
-    });
-    showPropInspector();
 }
 
-function setPropertySets(metaObject, dictionaryName = []) {
-    const html = [];
-    var propertySets = metaObject.propertySets || metaObject.ps;
-
-    html.push('<div class="element-attributes">');
-    if (!metaObject) {
-        html.push('<p class="subsubtitle">No object selected</p>');
-    } else {
-        html.push('<table class="xeokit-table">');
-        html.push('<tr><td class="td1">Name:</td><td class="td2">' + metaObject.name + '</td></tr>');
-        if (metaObject.type) {
-            html.push('<tr><td class="td1">Class:</td><td class="td2">' + metaObject.type + '</td></tr>');
-        }
-        html.push('<tr><td class="td1">UUID:</td><td class="td2">' + metaObject.id + '</td></tr>');
-        html.push('</table>');
+function bindBtnToggleCreateNotes() {
+    $(document).on('click', '#btnCreateNotes', function () {
+        $(this).toggleClass('toggled');
 
-        addPropertySet(propertySets, html);
-    }
-    $('#propInspector .prop-inspector-content')[0].innerHTML = html.join("");
-    $('.xeokit-accordion-container').accordion({
-        collapsible: true,
-        heightStyle: "content"
+        if ($(this).hasClass('toggled')) {
+            $('#btnCreateSectionPlan').removeClass('toggled');
+            disableSectionPlanByClick();
+            disableAngleMeasurementsByClick();
+            disableDistanceMeasurementsByClick();
+            showAnnotationMarkers();
+            $('#btnToggleNotes').removeClass('show');
+            collapseSidebarNotes();
+            $('#btnToggleSidebarNotes').removeClass('toggled');
+            annotationByClick = true;
+        } else {
+            annotationByClick = false;
+            collapseSidebarIssueDetail();
+        }
+    });
+}
+
+function bindBtnToggleSidebarNotes() {
+    $(document).on('click', '#btnToggleSidebarNotes', function () {
+        $(this).toggleClass('toggled');
+
+        if ($(this).hasClass('toggled')) {
+            $('#btnCreateNotes').removeClass('toggled');
+            annotationByClick = false;
+            if (!$('.sidebar').is(':visible')) {
+                initSidebarNotes();
+                expandSidebarNotes();
+            }
+        } else {
+            collapseSidebarNotes();
+        }
+    });
+}
+
+function bindSidebarNotesClose() {
+    $('.sidebar-close').on('click', function () {
+        $('#btnToggleSidebarNotes').removeClass('toggled');
+        collapseSidebarNotes();
+    });
+}
+
+function expandSidebarNotes() {
+    hidePropInspector();
+    collapseSidebarIssueDetail();
+
+    $('#sidebarWrap').show();
+    $('#navCubeCanvas').css('right', $('#sidebarWrap').width() + 10);
+    $('#sectionPlanesOverviewCanvas').css('right', $('#sidebarWrap').width() + 10);
+    var body = $('body');
+    var bodyScrollWidth = body[0].offsetWidth - body[0].scrollWidth;
+    var vScrollWidth = bodyScrollWidth ? bodyScrollWidth : 0;
+    $('.sidebar').css('right', (vScrollWidth + 'px')).show("slide", { direction: "right" }, 200);
+    body.addClass('sidebar-expanded');
+}
+
+function getMarkupData(item) {
+
+    let markup = JSON.parse(item.fieldValueMap.markup);
+    var options = {
+        id: item.fieldValueMap.item_id,
+        creator: item.insUserName,
+        worldPos: markup.worldPos,
+        eye: markup.eye, // need for camera fly on sidebar click
+        look: markup.look,  // need for camera fly on sidebar click
+        up: markup.up,  // need for camera fly on sidebar click
+        occludable: false,
+        markerShown: true,
+        labelShown: false,
+        version: '',
+        fileVersionPath: '',
+        values: {
+            glyph: item.fieldValueMap.item_id,
+            title: item.fieldValueMap.name,
+            description: item.fieldValueMap.description,
+            markerBGColor: item.fieldValueMap.task_status?.fieldValueMap?.color || '#2d9cdb',
+            imageSrc: ''
+        }
+    };
+
+    if (markup.entity) {
+        options.entity = viewer.scene.objects[markup.entity];
+    }
+
+    return options;
+}
+
+function bindUpdatePage() {
+    if (context.deleteIssueEvent) {
+        window.addEventListener(context.deleteIssueEvent, updatePage);
+    }
+
+    if (context.updateIssueEvent) {
+        window.addEventListener(context.updateIssueEvent, updatePage);
+    }
+}
+
+bindUpdatePage();
+
+function updatePage(e) {
+    if (e.type === context.updateIssueEvent) {
+        const item = e.detail.itemList[0];
+        if (item.fieldValueMap?.markup) {
+            const data = getMarkupData(item);
+            annotations.destroyAnnotation(item.fieldValueMap.item_id);
+            createNote(data);
+            setTimeout(function () {
+                if (isNoteDescriptionVisible(data.id)) {
+                    annotations.annotations[data.id].setLabelShown(true);
+                } else {
+                    annotations.annotations[data.id].setLabelShown(false);
+                }
+            }, 10);
+        }
+        
+        if (!$('#btnToggleSidebarNotes').hasClass('toggled')) {
+            refreshIssueList();
+        }
+    }
+
+    if (e.type === context.deleteIssueEvent) {
+
+        let item = e.detail.itemList[0];
+        annotations.destroyAnnotation(item.fieldValueMap.item_id);
+        refreshIssueList();
+        if (isNoteDescriptionVisible(item.fieldValueMap.item_id)) {
+            removeFromNotesDescriptionVisibleList(item.fieldValueMap.item_id);
+        }
+    }
+}
+
+function refreshIssueList() {
+    const event = new CustomEvent(EVENT_ISSUE_LIST_REFRESH, { detail: {} });
+    window.dispatchEvent(event);
+}
+
+function goToNoteMarker(issue) {
+    if (!$('#btnCreateNotes').hasClass('toggled')) {
+        hideNotesDescription();
+        clearNotesDesriptionVisibleList();
+        addToNotesDescriptionVisibleList(issue.id);
+        var annotation = annotations.annotations[issue.id];
+        viewer.cameraFlight.flyTo(annotation);
+        annotation.occludable = false;
+        annotation.setLabelShown(true);
+        highlightSidebarNote(issue.id);
+    }
+}
+
+function onIssueShowMoreClick(issue) {
+    const listId = issue.item.listId;
+    const itemId = {
+        id: issue.item.id,
+        contentTypeId: issue.item.contentTypeId,
+        listId: listId,
+        parentId: issue.item.parentId,
+        siteId: issue.item.siteId
+    };
+
+    let event = new CustomEvent('vitro.item.changed', {
+        detail: {
+            itemIdList: [itemId],
+            listId: listId
+        }
+    });
+    window.dispatchEvent(event);
+    collapseSidebarNotes();
+    hidePropInspector();
+    expandSidebarIssueDetail();
+    $('#btnToggleSidebarNotes').removeClass('toggled');
+}
+
+function collapseSidebarNotes() {
+    $('#sidebarWrap').hide();
+    $('#navCubeCanvas').css('right', 10);
+    $('#sectionPlanesOverviewCanvas').css('right', 10);
+    $('.sidebar').hide();
+    $('body').removeClass('sidebar-expanded');
+}
+
+function initSidebarNotes() {
+    context.initIssueList(goToNoteMarker, onIssueShowMoreClick);
+}
+
+function expandSidebarIssueDetail() {
+    $('#issueDetail').show();
+    $('#navCubeCanvas').css('right', $('#issueDetail').width() + 10);
+    $('#sectionPlanesOverviewCanvas').css('right', $('#issueDetail').width() + 10);
+    $('body').addClass('sidebar-expanded');
+}
+
+function collapseSidebarIssueDetail() {
+    $('#issueDetail').hide();
+    $('#navCubeCanvas').css('right', 10);
+    $('#sectionPlanesOverviewCanvas').css('right', 10);
+    $('body').removeClass('sidebar-expanded');
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Load Annotations
+//------------------------------------------------------------------------------------------------------------------
+function createSidebarNotesItemHeader(noteData) {
+
+}
+
+function hidePropInspector() {
+    $('#propInspector').hide();
+    setPositionNavCubeCanvas(0);
+    setPositionSectionPlanesOverviewCanvas(0);
+}
+
+function onAnnotationsMarkerClickedHandler(annotation) {
+    showNoteDesc(annotation.id);
+    if (annotation.getLabelShown()) {
+        removeFromNotesDescriptionVisibleList(annotation.id);
+    } else {
+        addToNotesDescriptionVisibleList(annotation.id);
+    }
+    annotation.occludable = false;
+    annotation.setLabelShown(!annotation.getLabelShown());
+    viewer.cameraFlight.flyTo(annotation);
+}
+
+function doGetNoteOptions(noteId, creator, pickResult, glyph, title, description, imageSrc, bgColor) {
+    var options = {
+        id: noteId,
+        creator: creator,
+        pickResult: pickResult,
+        worldPos: pickResult.worldPos,
+        eye: viewer.camera.eye, // need for camera fly on sidebar click
+        look: viewer.camera.look,  // need for camera fly on sidebar click
+        up: viewer.camera.up,  // need for camera fly on sidebar click
+        occludable: false,
+        markerShown: true,
+        labelShown: false,
+        version: fileVersion,
+        fileVersionPath: fileVersionPath,
+        values: {
+            glyph: glyph,
+            title: title,
+            description: description,
+            markerBGColor: bgColor,
+            imageSrc: imageSrc
+        }
+    };
+
+    if (pickResult.entity && pickResult.entity.id) {
+        options.entity = pickResult.entity.id;
+    }
+
+    return options;
+}
+
+function bindToggleNotesDescription() {
+    $(document).on('click', '#btnToggleNotesDescription', function () {
+        $(this).toggleClass('show');
+        if ($(this).hasClass('show')) {
+            hideNotesDescription();
+        } else {
+            showNotesDescription();
+        }
+    });
+}
+
+function hideNotesDescription() {
+    if (annotations?.annotations) {
+        $.each(annotations.annotations, function () {
+            this.setLabelShown(false);
+        });
+    }
+    clearNotesDesriptionVisibleList();
+}
+
+function addToNotesDescriptionVisibleList(itemKey) {
+    if (!notesDescriptionVisibleList.hasOwnProperty(itemKey)) {
+        notesDescriptionVisibleList[itemKey] = true;
+    }
+}
+
+function removeFromNotesDescriptionVisibleList(itemKey) {
+    if (notesDescriptionVisibleList.hasOwnProperty(itemKey)) {
+        delete notesDescriptionVisibleList[itemKey];
+    }
+}
+
+function clearNotesDesriptionVisibleList() {
+    notesDescriptionVisibleList = {};
+}
+
+function isNoteDescriptionVisible(itemKey) {
+    return notesDescriptionVisibleList.hasOwnProperty(itemKey);
+}
+
+function showNotesDescription() {
+    if (annotations?.annotations) {
+        $.each(annotations.annotations, function () {
+            addToNotesDescriptionVisibleList(this.id);
+            this.occludable = false;
+            this.setLabelShown(true);
+        });
+    }
+}
+
+function initIssueDetailResizable() {
+    initResizable($('#issueDetail'), 'w', PANE_RIGHT_MIN_WIDTH, onIssueDetailResizeHandler, onIssueDetailResizeEndHandler);
+}
+
+function addToTreeView(model, sceneModelId) {
+    if (treeView && treeView._rootNodes.length > 0) {
+        const callback = (metaObjects, status, jqXHR) => {
+            const metaModel = viewer.metaScene.metaModels[sceneModelId];
+
+            treeView.addObjectsToMetaModel(metaObjects, metaModel);
+            treeView.addModel(sceneModelId);
+
+            viewer.scene.canvas.spinner.processes--;
+        };
+
+        const error = () => {
+            viewer.scene.canvas.spinner.processes--;
+        };
+
+        BIMModel.GetElementChildList(model.FileItemId, model.FileVersion, "-1", false, null, callback, error);
+    }
+}
+
+function bindBtnAddModel() {
+    $(document).on('click', '#btnAddModel', function () {
+        context.showItemSelectDialog().then(itemIdList => {
+            itemIdList.forEach(itemId =>
+            {
+                BIMCommon.GetFileItem(itemId, undefined, function (modelId) {
+                    context.getItem(modelId).then(itemAttach => {
+
+                        context.getItem(itemId).then(item =>
+                        {
+                            context.addItem(item);
+                        });
+
+                        const filePath = context.getFilePath(itemAttach.id);
+                        const fileName = context.file.fieldValueMap?.name;
+                        const model = new BIMCommon.VitroModel(itemId, undefined, filePath, fileName);
+
+                        BIMCommon.ModelList.push(model);
+
+                        const sceneModel = doLoadModel(viewer, xktLoader, model, false);
+                        addToTreeView(model, sceneModel.id);
+
+                        $('#btnToggleCompare').hide();
+                    })
+
+                }, function () {
+                    alert("The file is being processed");
+        });
+
+            })
+    });
+    });
+}
+
+function bindUpdateDocumentMarkupList() {
+    window.addEventListener(EVENT_SEARCH_ISSUE_LIST, updateDocumentMarkupList);
+}
+
+function updateDocumentMarkupList(e) {
+    annotations.clear();
+    if (e.detail.issueList && e.detail.issueList.length) {
+        e.detail.issueList.map(issue => {
+            let data = getMarkupData(issue.item);
+            data.occludable = false;
+            annotations.createAnnotation(data);
+        });
+    }
+}
+
+bindUpdateDocumentMarkupList();
+
+function highlightSidebarNote(noteId) {
+    var noteWrap = $('#vitro-issue-tile-' + noteId);
+
+    if (!noteWrap.position()) {
+        setTimeout(() => {
+            highlightSidebarNote(noteId);
+        }, 500);
+
+        return;
+    }
+
+    selectIssueListItem(noteId);
+}
+
+function selectIssueListItem(itemId) {
+    const event = new CustomEvent(EVENT_ISSUE_LIST_SELECT_ITEM, { detail: { itemId: itemId } });
+    window.dispatchEvent(event);
+}
+
+function setSettings(settings) {
+    const settingsString = settings ? JSON.stringify(settings) : '';
+    context.setSettingsToLocalStorage(settingsString);
+}
+
+function getSettings() {
+    const settings = context.getSettingsFromLocalStorage();
+    return settings ? JSON.parse(settings) : {};
+}
+
+function setPaneRightSettings(width) {
+    const settings = getSettings();
+    settings.rightPaneWidth = width;
+    setSettings(settings);
+}
+
+function setPaneLeftSettings(width) {
+    const settings = getSettings();
+    settings.leftPaneWidth = width;
+    setSettings(settings);
+}
+
+function initPaneWidth() {
+    const settings = getSettings();
+    setWidthPaneRight(settings.rightPaneWidth);
+    setWidthPaneLeft(settings.leftPaneWidth);
+}
+
+function setWidthPaneRight(width) {
+    if (width) {
+        $('#sidebarWrap').width(width);
+        $('#issueDetail').width(width);
+        $('#propInspector').width(width);
+    }
+}
+
+function setWidthPaneLeft(width) {
+    if (width) {
+        $('#treeViewContainerWrap').width(width);
+        $('#storeyViewsSidebar').width(width);
+    }
+}
+
+function setPositionSectionPlanesOverviewCanvas(width) {
+    $('#sectionPlanesOverviewCanvas').css('right', width + 10);
+}
+
+function setPositionNavCubeCanvas(width) {
+    $('#navCubeCanvas').css('right', width + 10);
+}
+
+function initResizable(element, handles, minWidth, resizeHadler, onResizeEndHadler) {
+    element.resizable({
+        handles: handles,
+        minWidth: minWidth,
+        resize: function (event, ui) {
+            if (typeof resizeHadler === 'function') {
+                resizeHadler(element.width());
+            }
+        },
+        stop: function (event, ui) {
+            if (typeof onResizeEndHadler === 'function') {
+                onResizeEndHadler(event, ui);
+            }
+        }
+    });
+}
+
+function onIssueDetailResizeHandler(width) {
+    onPaneRightResizeHandler(width);
+};
+
+function onPaneRightResizeHandler(width) {
+    setPositionNavCubeCanvas(width);
+    setPositionSectionPlanesOverviewCanvas(width);
+}
+
+function onIssueDetailResizeEndHandler(event, ui) {
+    $('#propInspector').width(ui.size.width);
+    $('#sidebarWrap').width(ui.size.width);
+    setPaneRightSettings(ui.size.width);
+}
+
+function initTreeViewPanelResizable() {
+    initResizable($('#treeViewContainerWrap'), 'e', PANE_LEFT_MIN_WIDTH, false, onTreeViewResizeEndHandler);
+}
+
+function onTreeViewResizeEndHandler(event, ui) {
+    const width = ui.size.width - $('#treeViewContainerWrap > .ui-resizable-handle').width();
+    $('#storeyViewsSidebar').width(width);
+    setPaneLeftSettings(width);
+}
+
+function initStoreyViewResizable() {
+    initResizable($('#storeyViewsSidebar'), 'e', PANE_LEFT_MIN_WIDTH, false, onStoreyViewResizeEndHandler);
+}
+
+function onStoreyViewResizeEndHandler(event, ui) {
+    $('#treeViewContainerWrap').width(ui.size.width);
+    setPaneLeftSettings(ui.size.width);
+}
+
+function initPropertySetsResizable() {
+    initResizable($('#propInspector'), 'w', PANE_RIGHT_MIN_WIDTH, onPropsInspectorResizeHandler, onPropsInspectorResizeEndHandler);
+}
+
+function onPropsInspectorResizeHandler(width) {
+    onPaneRightResizeHandler(width);
+};
+
+function onPropsInspectorResizeEndHandler(event, ui) {
+    $('#issueDetail').width(ui.size.width);
+    $('#sidebarWrap').width(ui.size.width);
+    setPaneRightSettings(ui.size.width);
+}
+
+function initSidebarResizable() {
+    initResizable($('#sidebarWrap'), 'w', PANE_RIGHT_MIN_WIDTH, onIssueListResizeHandler, onIssueListResizeEndHandler);
+}
+
+function onIssueListResizeHandler(width) {
+    onPaneRightResizeHandler(width);
+}
+
+function onIssueListResizeEndHandler(event, ui) {
+    $('#issueDetail').width(ui.size.width);
+    $('#propInspector').width(ui.size.width);
+    setPaneRightSettings(ui.size.width);
+}
+
+function getPaneRightPosition(width) {
+    return ($('body').width() - width);
+}
+
+function showPropInspector() {
+    $('#propInspector').show();
+    const width = $('#propInspector').width();
+    setPositionNavCubeCanvas(width);
+    setPositionSectionPlanesOverviewCanvas(width);
+}                        
+//------------------------------------------------------------------------------------------------------------------
+// MAIN Viewer
+//------------------------------------------------------------------------------------------------------------------
+
+
+//------------------------------------------------------------------------------------------------------------------
+// Create a Viewer
+//------------------------------------------------------------------------------------------------------------------
+const viewer = new Viewer({
+    canvasId: "xeokitCanvas",
+    transparent: true
+});
+//------------------------------------------------------------------------------------------------------------------
+// Arrange the camera
+//------------------------------------------------------------------------------------------------------------------
+function setCameraSetting(viewer) {
+    viewer.camera.eye = [-5.02, 2.22, 15.09];
+    viewer.camera.look = [4.97, 2.79, 9.89];
+    viewer.camera.up = [-0.05, 0.99, 0.02];
+    viewer.camera.project.fov = 70;
+
+    viewer.camera.zoom(5);
+
+    viewer.cameraControl.followPointer = true;
+}
+
+setCameraSetting(viewer);
+
+// For TreeView
+function setViewerSetting(viewer) {
+    viewer.scene.xrayMaterial.fill = true;
+    viewer.scene.xrayMaterial.fillAlpha = 0.1;
+    viewer.scene.xrayMaterial.fillColor = [0, 0, 0];
+    viewer.scene.xrayMaterial.edgeAlpha = 0.3;
+    viewer.scene.xrayMaterial.edgeColor = [0, 0, 0];
+
+    viewer.scene.highlightMaterial.fill = true;
+    viewer.scene.highlightMaterial.edges = true;
+    viewer.scene.highlightMaterial.fillAlpha = 0.1;
+    viewer.scene.highlightMaterial.edgeAlpha = 0.1;
+    viewer.scene.highlightMaterial.edgeColor = [1, 1, 0];
+
+    viewer.scene.selectedMaterial.fill = true;
+    viewer.scene.selectedMaterial.edges = true;
+    viewer.scene.selectedMaterial.fillColor = [0.8627, 0.9333, 1.0];
+    viewer.scene.selectedMaterial.fillAlpha = 0.5;
+    viewer.scene.selectedMaterial.edgeAlpha = 0.6;
+    viewer.scene.selectedMaterial.edgeColor = [0, 1, 1];
+}
+
+setViewerSetting(viewer);
+
+//------------------------------------------------------------------------------------------------------------------
+// NavCube
+//------------------------------------------------------------------------------------------------------------------
+
+const navCube = new NavCubePlugin(viewer, {
+    canvasId: "navCubeCanvas",
+    visible: true,           // Initially visible (default)
+    cameraFly: true,         // Fly camera to each selected axis/diagonal
+    cameraFitFOV: 45,        // How much field-of-view the scene takes once camera has fitted it to view
+    cameraFlyDuration: 0.5   // How long (in seconds) camera takes to fly to each new axis/diagonal
+});
+
+//------------------------------------------------------------------------------------------------------------------
+// Add a XKTLoaderPlugin - we'll use this to load the model geometry and IFC metadata
+//------------------------------------------------------------------------------------------------------------------
+
+const xktLoader = new XKTLoaderPlugin(viewer);
+
+
+xktLoader.globalizeObjectIds = false; // For multiple models in TreeView
+
+
+//------------------------------------------------------------------------------------------------------------------
+// Load Model
+//------------------------------------------------------------------------------------------------------------------
+function doLoadModel(viewer, xktLoader, srcModel, isMain) {
+    const model = xktLoader.load({
+        id: Date.now(),
+        src: srcModel.FilePath,
+        edges: true,
+        backfaces: true,
     });
-    showPropInspector();
+
+    srcModel.id = model.id;
+
+    model.vitroModel = srcModel;
+    model.isLarge = true;
+    model.isMain = isMain;
+
+    model.on('loaded', () => {
+        if (isMain) {
+            ViewFitAll(viewer);
+            //------------------------------------------------------------------------------------------------------------------
+            // Load Small Scene
+            //------------------------------------------------------------------------------------------------------------------
+            model.vitroModelLoader = new VitroXKTLoaderPlugin(viewer);
+
+            model.vitroModelLoader.largeModel = model;
+            model.vitroModelLoader.startSmallLoad = true;
+
+            $('#btnToggleSectionPlan').addClass('toggled');
+        }
+        else {
+            viewer.scene.fire("reloadSmallScenes");
+        }
+
+        //------------------------------------------------------------------------------------------------------------------
+        // Create some Annotations
+        //------------------------------------------------------------------------------------------------------------------
+        //loadAnnotations();
+    });
+
+    if (isPointCloud(srcModel.FileName)) {
+        var navPlugin = viewer._plugins.find((p) => p.id == 'FastNav');
+
+        if (navPlugin) {
+            navPlugin.hideTransparentObjects = false;
+        }
+    }
+
+    return model;
 }
 
-function bindPropInspectorClose() {
-    $('.prop-inspector-close').on('click', function () {
-        hidePropInspector();
-    })
+function isPointCloud(filename) {
+    const ext = filename.split('.').pop().toLowerCase();
+    return ext === 'las' || ext === 'laz';
+}
+
+function ViewFitAll(viewer) {
+    const aabb = viewer.scene.getAABB({});
+    const diag = math.getAABB3Diag(aabb);
+
+    if (diag > viewer.camera.perspective.far) {
+        viewer.camera.perspective.far = diag;
+    }
+
+    viewer.cameraFlight.flyTo({
+        projection: "perspective",
+        aabb: aabb,
+        duration: 0.5
+    });
 }
 
 //------------------------------------------------------------------------------------------------------------------
-// PropertySets resizable
+// FastNavPlugin
 //------------------------------------------------------------------------------------------------------------------
-function initPropertySetsResizable() {
-    $('#propInspector').resizable({
-        handles: "w",
-        minWidth: 150
+
+function initFastNavPlugin(viewer) {
+    const fastNavPlugin = new FastNavPlugin(viewer, {
+        hideEdges: true,                   // Don't show edges while we interact (default is true)
+        hideSAO: true,                     // Don't show ambient shadows while we interact (default is true)
+        hideColorTexture: true,            // No color textures while we interact (default is true)
+        hidePBR: true,                     // No physically-based rendering while we interact (default is true)
+        hideTransparentObjects: true,      // Hide transparent objects while we interact (default is false)
+        scaleCanvasResolution: true,       // Scale canvas resolution while we interact (default is false)
+        scaleCanvasResolutionFactor: 0.5,  // Factor by which we scale canvas resolution when we interact (default is 0.6)
+        delayBeforeRestore: true,          // When we stop interacting, delay before restoring normal render (default is true)
+        delayBeforeRestoreSeconds: 1,      // The delay duration, in seconds (default is 0.5)
+        hideTempObj: false,
+        maxTreeDepth: 20,
     });
-}
-var angleMeasurementsData = [
+}
+
+initFastNavPlugin(viewer);
+//------------------------------------------------------------------------------------------------------------------
+//
+//------------------------------------------------------------------------------------------------------------------
+function showXeokitSpinner() {
+    $('.sk-fading-circle').parent().css('visibility', 'visible');
+}
+
+function hideXeokitSpinner() {
+    $('.sk-fading-circle').parent().css('visibility', 'hidden');
+}
+
+
+//------------------------------------------------------------------------------------------------------------------
+// MAIN Viewer END
+//------------------------------------------------------------------------------------------------------------------
+
+
+function initButtonSet() {
+    bindBtnToggleSidebarNotes();
+    bindSidebarNotesClose();
+    bindDeleteNoteEventHandler();
+
+    bindBtnToggleSidebarTreeView();
+
+    fixNotesTextareaBlur();
+
+    bindBtnToggleCreateNotes();
+    bindBtnCreateSectionPlan();
+    bindBtnClearSectionPlan();
+    bindBtnToggleSectionPlan();
+    bindToggleNotes();
+    bindToggleNotesDescription();
+
+    bindBtnCreateAngleMeasurements();
+    bindBtnToggleAngleMeasurements();
+
+    initTreeViewPanelResizable();
+    initSidebarResizable();
+    initIssueDetailResizable();
+
+    bindBtnToggleSidebarStoreyViews();
+
+    bindBtnSaveBCFViewpointJSON();
+    bindBtnLoadBCFViewpointJSON();
+
+    bindBtnCreateDistanceMeasurements();
+    bindBtnToggleDistanceMeasurements();
+
+    bindPropInspectorClose();
+    initPropertySetsResizable();
+    bindBtnAddModel();
+}
+
+initButtonSet();
+
+
+
+
+//------------------------------------------------------------------------------------------------------------------
+// Compare
+//------------------------------------------------------------------------------------------------------------------
+
+function setStyleDisplay(id, style_Display) {
+    const el = document.getElementById(id);
+    if (el) {
+        el.style.display = style_Display;}
+};
+
+
+viewer.on('vitroCompareStatus', (status) => {
+    const style_Display = status ? 'none' : '';
+
+    setStyleDisplay('btnCreateNotes', style_Display);
+    setStyleDisplay('btnToggleNotes', style_Display);
+    setStyleDisplay('btnToggleNotesDescription', style_Display);
+    setStyleDisplay('btnToggleSidebarNotes', style_Display);
+    setStyleDisplay('btnCreateSectionPlan', style_Display);
+    setStyleDisplay('btnClearSectionPlan', style_Display);
+    setStyleDisplay('btnToggleSectionPlan', style_Display);
+    setStyleDisplay('btnToggleSidebarTreeView', style_Display);
+    setStyleDisplay('btnCreateAngleMeasurements', style_Display);
+    setStyleDisplay('btnToggleAngleMeasurements', style_Display);
+    setStyleDisplay('btnCreateDistanceMeasurements', style_Display);
+    setStyleDisplay('btnToggleDistanceMeasurements', style_Display);
+    // setDisplay('btnToggleSidebarStoreyViews', style_Display);
+    // setDisplay('btnSaveBCFViewpointJSON', style_Display);
+    // setDisplay('btnLoadBCFViewpointJSON', style_Display);
+    setStyleDisplay('btnAddModel', style_Display);
+
+    if (status) {
+        delContextMenu(viewer);
+        closeTreeView();
+        clearSectionPanes();
+    }
+    else {
+        addContextMenu(viewer);
+    }
+});
+
+
+var angleMeasurementsData = [
 
 ];
 var bcfData = {};
@@ -1075,55 +1869,18 @@ var fileVersionPath = undefined;
 // TODO - PATH!!!
 const modelPathDefault = '';
 const modelPathConverted = '../BIM/assets/models/converted/';
-//------------------------------------------------------------------------------------------------------------------
-// Create a Viewer
-//------------------------------------------------------------------------------------------------------------------
-const viewer = new Viewer({
-    canvasId: "xeokitCanvas",
-    transparent: true
-});
-
-//------------------------------------------------------------------------------------------------------------------
-// Arrange the camera
-//------------------------------------------------------------------------------------------------------------------
-
-viewer.camera.eye = [-5.02, 2.22, 15.09];
-viewer.camera.look = [4.97, 2.79, 9.89];
-viewer.camera.up = [-0.05, 0.99, 0.02];
-viewer.camera.project.fov = 70;
 
-viewer.camera.zoom(5);
 
-viewer.cameraControl.followPointer = true;
-
-// For TreeView
-viewer.scene.xrayMaterial.fill = true;
-viewer.scene.xrayMaterial.fillAlpha = 0.1;
-viewer.scene.xrayMaterial.fillColor = [0, 0, 0];
-viewer.scene.xrayMaterial.edgeAlpha = 0.3;
-viewer.scene.xrayMaterial.edgeColor = [0, 0, 0];
-
-viewer.scene.highlightMaterial.fill = true;
-viewer.scene.highlightMaterial.edges = true;
-viewer.scene.highlightMaterial.fillAlpha = 0.1;
-viewer.scene.highlightMaterial.edgeAlpha = 0.1;
-viewer.scene.highlightMaterial.edgeColor = [1, 1, 0];
-
-viewer.scene.selectedMaterial.fill = true;
-viewer.scene.selectedMaterial.edges = true;
-viewer.scene.selectedMaterial.fillAlpha = 0.5;
-viewer.scene.selectedMaterial.edgeAlpha = 0.6;
-viewer.scene.selectedMaterial.edgeColor = [0, 1, 1];
 
 //----------------------------------------------------------------------------------------------------------------------
 // Create a tree view
 //----------------------------------------------------------------------------------------------------------------------
 
 var treeView = new VitroTreeViewPlugin(viewer, {
-			containerElement: document.getElementById("treeViewContainer"),
-			autoExpandDepth: 1,
-			hierarchy: "containment",
-			autoAddModels: false,
+    containerElement: document.getElementById("treeViewContainer"),
+    autoExpandDepth: 1,
+    hierarchy: "containment",
+    autoAddModels: false,
 });
 
 //------------------------------------------------------------------------------------------------------------------
@@ -1266,7 +2023,7 @@ const objectContextMenu = new ContextMenu({
 
                             });
                         };
-                    
+
 
                         processByChildIdList(entity.id, event);
                     }
@@ -1386,47 +2143,44 @@ const objectContextMenu = new ContextMenu({
     enabled: true
 });
 
-viewer.cameraControl.on("rightClick", function (e) {
-
-    var hit = viewer.scene.pick({
-        canvasPos: e.canvasPos
-    });
+function addContextMenu(viewer) {
+    viewer.cameraControl.vitroAddContextMenu = viewer.cameraControl.on("rightClick", function (e) {
 
-    if (hit && hit.entity.isObject) {
+        var hit = viewer.scene.pick({
+            canvasPos: e.canvasPos
+        });
 
-        objectContextMenu.context = { // Must set context before showing menu
-            viewer: viewer,
-            treeViewPlugin: treeView,
-            entity: hit.entity
-        };
+        if (hit && hit.entity.isObject) {
 
-        objectContextMenu.show(e.event.pageX, e.event.pageY);
+            objectContextMenu.context = { // Must set context before showing menu
+                viewer: viewer,
+                treeViewPlugin: treeView,
+                entity: hit.entity
+            };
 
-    } else {
+            objectContextMenu.show(e.event.pageX, e.event.pageY);
 
-        canvasContextMenu.context = { // Must set context before showing menu
-            viewer: viewer,
-            treeViewPlugin: treeView,
-        };
+        } else {
 
-        canvasContextMenu.show(e.event.pageX, e.event.pageY);
-    }
+            canvasContextMenu.context = { // Must set context before showing menu
+                viewer: viewer,
+                treeViewPlugin: treeView,
+            };
 
-    e.event.preventDefault();
-});
+            canvasContextMenu.show(e.event.pageX, e.event.pageY);
+        }
 
+        e.event.preventDefault();
+    });
+}
 
-//------------------------------------------------------------------------------------------------------------------
-// NavCube
-//------------------------------------------------------------------------------------------------------------------
+function delContextMenu(viewer) {
+    if (viewer.cameraControl.vitroAddContextMenu) {
+        viewer.cameraControl.off(viewer.cameraControl.vitroAddContextMenu);
+    }
+}
 
-const navCube = new NavCubePlugin(viewer, {
-    canvasId: "navCubeCanvas",
-    visible: true,           // Initially visible (default)
-    cameraFly: true,         // Fly camera to each selected axis/diagonal
-    cameraFitFOV: 45,        // How much field-of-view the scene takes once camera has fitted it to view
-    cameraFlyDuration: 0.5   // How long (in seconds) camera takes to fly to each new axis/diagonal
-});
+addContextMenu(viewer);
 
 //------------------------------------------------------------------------------------------------------------------
 // Add a SectionPlanesPlugin - we'll use this to create cross-section planes
@@ -1437,14 +2191,7 @@ const sectionPlanes = new SectionPlanesPlugin(viewer, {
     overviewVisible: true
 });
 
-//------------------------------------------------------------------------------------------------------------------
-// Add a XKTLoaderPlugin - we'll use this to load the model geometry and IFC metadata
-//------------------------------------------------------------------------------------------------------------------
-
-const xktLoader = new XKTLoaderPlugin(viewer);
-
 
-xktLoader.globalizeObjectIds = false; // For multiple models in TreeView
 
 //------------------------------------------------------------------------------------------------------------------
 // Add a BCFViewpointsPlugin - we'll use this to load the BCF viewpoint
@@ -1464,13 +2211,7 @@ function getRequestParams() {
     return vars;
 }
 
-function showXeokitSpinner() {
-    $('.sk-fading-circle').parent().css('visibility', 'visible');
-}
 
-function hideXeokitSpinner() {
-    $('.sk-fading-circle').parent().css('visibility', 'hidden');
-}
 
 var isModelAddedToTreeView = false;
 
@@ -1488,15 +2229,16 @@ function openSidebarTreeView() {
     // $(window).trigger('resize');
 }
 
+
+
 function addModelToTreeView() {
 
-	viewer.scene.canvas.spinner.processes++;
+    viewer.scene.canvas.spinner.processes++;
 
-    const callback = (metaObjects, status, jqXHR) =>
-    {
+    const callback = (metaObjects, status, jqXHR) => {
         const metaModel = viewer.metaScene.metaModels[viewer.scene.modelIds[0]];
 
-	    treeView.addObjectsToMetaModel(metaObjects, metaModel);
+        treeView.addObjectsToMetaModel(metaObjects, metaModel);
         treeView.addModel(viewer.scene.modelIds[0]);
 
         $('body').addClass('treeview-expanded');
@@ -1547,102 +2289,25 @@ annotations.on("markerClicked", (annotation) => {
     onAnnotationsMarkerClickedHandler(annotation);
 });
 
-function onAnnotationsMarkerClickedHandler(annotation) {
-    //console.log('annotation', annotation.id);
-    showNoteDesc(annotation.id);
-
-    if (prevAnnotationClicked) {
-        prevAnnotationClicked.setLabelShown(false);
-    }
-    annotation.setLabelShown(true);
-    viewer.cameraFlight.flyTo(annotation);
-    prevAnnotationClicked = annotation;
-}
-
-//------------------------------------------------------------------------------------------------------------------
-// Load Model
-//------------------------------------------------------------------------------------------------------------------
-function doLoadModel(srcModel, isMain) {
-    const model = xktLoader.load({
-        id: Date.now(),
-        src: srcModel.FilePath,
-        edges: true,
-        backfaces: true,
-    });
-
-    srcModel.id = model.id;
-
-    model.vitroModel = srcModel;
-    model.isLarge = true;
-    model.on('loaded', () => {
-        if (isMain) {
-            modelOnLoaded();
-            //------------------------------------------------------------------------------------------------------------------
-            // Load Small Scene
-            //------------------------------------------------------------------------------------------------------------------
-            model.vitroModelLoader = new VitroXKTLoaderPlugin(viewer);
-
-            model.vitroModelLoader.largeModel = model;
-            model.vitroModelLoader.startSmallLoad = true;
-
-            $('#btnToggleSectionPlan').addClass('toggled');
-        }
-        else {
-            viewer.scene.fire("reloadSmallScenes");
-        }
-
-        //------------------------------------------------------------------------------------------------------------------
-        // Create some Annotations
-        //------------------------------------------------------------------------------------------------------------------
-        loadAnnotations();
-    });
-
-    window.model = model;
-
-    if (isPointCloud(srcModel.FileName)) {
-        var navPlugin = viewer._plugins.find((p) => p.id == 'FastNav');
+function onAnnotationsMarkerClickedHandler(annotation) {
+    //console.log('annotation', annotation.id);
+    showNoteDesc(annotation.id);
 
-        if (navPlugin) {
-            navPlugin.hideTransparentObjects = false;
-        }
+    if (prevAnnotationClicked) {
+        prevAnnotationClicked.setLabelShown(false);
     }
-
-    return model;
+    annotation.setLabelShown(true);
+    viewer.cameraFlight.flyTo(annotation);
+    prevAnnotationClicked = annotation;
 }
 
-function isPointCloud(filename) {
-    const ext = filename.split('.').pop().toLowerCase();
-    return ext === 'las' || ext === 'laz';
-}
 
 function getDisableCacheStr() {
     var dt = new Date();
     return "?rev=" + dt.getTime();
 }
 
-function modelOnLoaded() {
-
-
-
-    //----------------------------------------------------------------------------------------------------------
-    // Angle Measurements
-    //----------------------------------------------------------------------------------------------------------
-    const angleMeasurements = createAngleMeasurements(angleMeasurementsData);
-
-    //----------------------------------------------------------------------------------------------------------
-    // Storey Views
-    //----------------------------------------------------------------------------------------------------------
-    // ????????! ???? ?? initStoreyViews ????? ?????? SectionPlane -> ???????? ?????? ?????? ????? ????????? ? "??????????" ????
-    // ?? ??? ????? ?????? ??????? ????? ??????????? ???????? ??????????? SectionPlane
-    initStoreyViews();
-
-    //----------------------------------------------------------------------------------------------------------
-    // Distance Measurements
-    //----------------------------------------------------------------------------------------------------------
-    const distanceMeasurements = createDistanceMeasurements(distanceMeasurementsData);
 
-    ViewFitAll(viewer);
-}
 
 //------------------------------------------------------------------------------------------------------------------
 // Clear SectionPlanes
@@ -1726,29 +2391,29 @@ function initDlg(pickResult) {
         buttons: [{
             text: "Save",
             "id": "btnSaveConfirm",
-            click: function() {
+            click: function () {
                 saveNote(pickResult);
                 closeDlg();
             },
         }, {
             text: "Cancel",
             "id": "btnSaveCancel",
-            click: function() {
+            click: function () {
                 closeDlg();
             }
         }],
-        close: function() {
+        close: function () {
             closeDlg();
         },
-        open: function(event, ui ) {
+        open: function (event, ui) {
             disableXeokitClickEvent();
         }
     });
 
     var saveLabel = document.webL10n.get('save');
     var cancelLabel = document.webL10n.get('cancel');
-    $("#btnSaveConfirm").html('<span class="ui-button-text">'+ saveLabel +'</span>')
-    $("#btnSaveCancel").html('<span class="ui-button-text">'+ cancelLabel +'</span>')
+    $("#btnSaveConfirm").html('<span class="ui-button-text">' + saveLabel + '</span>')
+    $("#btnSaveCancel").html('<span class="ui-button-text">' + cancelLabel + '</span>')
 }
 
 function disableXeokitClickEvent() {
@@ -1767,15 +2432,15 @@ function getDlgElm() {
 
 function closeDlg() {
     resetDlgForm();
-    $(this).dialog( "close" );
-    $(this).dialog( "destroy" );
+    $(this).dialog("close");
+    $(this).dialog("destroy");
     getDlgElm().remove();
     annotationByClick = true;
 }
 
 function createDlgElm() {
     var addNoteLabel = document.webL10n.get('note_add');
-    var div = $('<div id="dialog-form" title="'+ addNoteLabel + '" style="display: none;"/>');
+    var div = $('<div id="dialog-form" title="' + addNoteLabel + '" style="display: none;"/>');
     var title = $('<input id="dlgNoteTitle" />');
     var txtArea = $('<textarea id="dlgNoteTxt"></textarea>');
 
@@ -1788,7 +2453,7 @@ function createDlgElm() {
 
 function createDeleteDlgElm() {
     var noteConfirmDeleteMessage = document.webL10n.get('note_delete_confirm');
-    var div = $('<div id="dialog-form" title="'+ noteConfirmDeleteMessage + '" style="display: none;"/>');
+    var div = $('<div id="dialog-form" title="' + noteConfirmDeleteMessage + '" style="display: none;"/>');
     $('body').append(div);
 }
 
@@ -1805,7 +2470,7 @@ function doAddNote(noteOptions) {
     notes.push(noteOptions);
     createNote(noteOptions);
 
-    if($('.sidebar').is(':visible')) {
+    if ($('.sidebar').is(':visible')) {
         initSidebarNotes();
         highlightSidebarNote(noteOptions.id);
     }
@@ -1867,7 +2532,7 @@ function doGetNoteOptions(noteId, creator, pickResult, glyph, title, description
         }
     };
 
-    if(pickResult.entity && pickResult.entity.id) {
+    if (pickResult.entity && pickResult.entity.id) {
         options.entity = pickResult.entity.id;
     }
 
@@ -1888,14 +2553,14 @@ function clearSidebarNotes() {
 }
 
 function createSidebarNotes() {
-    $.each(notes, function(index, note) {
+    $.each(notes, function (index, note) {
         var noteElm = createSidebarNotesItem(note);
         $('.sidebar-content').append(noteElm);
     });
 }
 
 function createSidebarNotesItem(noteData) {
-    var noteWrap = $('<div class="sidebar-note-wrap" id="noteWrap-'+noteData.id+'" />');
+    var noteWrap = $('<div class="sidebar-note-wrap" id="noteWrap-' + noteData.id + '" />');
 
     var noteHeader = createSidebarNotesItemHeader(noteData);
     var noteBody = createSidebarNotesItemBody(noteData);
@@ -1921,10 +2586,10 @@ function createSidebarNotesItemBody(noteData) {
         statusText = document.webL10n.get('note_status_default');
     }
     var status = $('<span class="sidebar-note-status-mark" style="background-color:' + noteContent.values.markerBGColor + '"></span><span class="sidebar-note-status-text">' + statusText + '</span>');
-    var expandLabel=document.webL10n.get('note_expand');
-    var collapseLabel=document.webL10n.get('note_collapse');
+    var expandLabel = document.webL10n.get('note_expand');
+    var collapseLabel = document.webL10n.get('note_collapse');
     var expandBtnExpand = $('<a class="btn-expand">' + expandLabel + '</a>');
-    var expandBtnCollapse = $('<a class="btn-collapse">'+ collapseLabel + '</a>');
+    var expandBtnCollapse = $('<a class="btn-collapse">' + collapseLabel + '</a>');
     bindOnClickTextareaExpand(expandBtnExpand);
     bindOnClickTextareaCollapse(expandBtnCollapse);
     expandBtnWrapInner.append(status);
@@ -1935,7 +2600,7 @@ function createSidebarNotesItemBody(noteData) {
     noteBody.append(noteTextarea);
     noteBody.append(expandBtnWrap);
 
-    if(noteContent.values.imageSrc) {
+    if (noteContent.values.imageSrc) {
         var noteImage = $('<div class="sidebar-note-img-wrap"><img src="' + noteContent.values.imageSrc + '" /><div>');
         noteBody.append(noteImage);
     }
@@ -1944,11 +2609,11 @@ function createSidebarNotesItemBody(noteData) {
 }
 
 function bindTextareaHandlers(textarea, noteData) {
-    textarea.on('focus', function() {
+    textarea.on('focus', function () {
         doTextareaOnFocus($(this));
     });
 
-    textarea.on('change', function() {
+    textarea.on('change', function () {
         doNoteOnChange($(this), noteData);
     });
 }
@@ -1966,12 +2631,12 @@ function doNoteOnChange(textarea, noteData) {
     var noteTitle = noteData.values.title;
     var noteDesc = textarea.val();
 
-    BIMAnnotation.UpdateNote(noteId, noteTitle, noteDesc, function() {
+    BIMAnnotation.UpdateNote(noteId, noteTitle, noteDesc, function () {
         var date = getCurrentDate();
         var user = '';
 
-        $.each(notes, function(index, val) {
-            if(val.id == noteId) {
+        $.each(notes, function (index, val) {
+            if (val.id == noteId) {
                 notes[index]['values']['description'] = noteDesc;
                 notes[index]['date'] = date;
             }
@@ -1980,7 +2645,7 @@ function doNoteOnChange(textarea, noteData) {
 }
 
 function bindOnClickTextareaExpand(btnElm) {
-    btnElm.on('click', function() {
+    btnElm.on('click', function () {
         doTextareaExpand(btnElm);
         $(this).closest('.sidebar-note-expand-btn').removeClass('collapsed');
     });
@@ -1992,7 +2657,7 @@ function doTextareaExpand(btnElm) {
 }
 
 function bindOnClickTextareaCollapse(btnElm) {
-    btnElm.on('click', function() {
+    btnElm.on('click', function () {
         doTextareaCollapse(btnElm);
         $(this).closest('.sidebar-note-expand-btn').addClass('collapsed');
     });
@@ -2022,7 +2687,7 @@ function createSidebarNotesItemHeader(noteData) {
     var titleContainer = $('<div class="note-title-container"></div>');
 
     var noteTitle = $('<div class="sidebar-note-title">' + noteData.values.title + '</div>');
-    noteTitle.on('click', function() {
+    noteTitle.on('click', function () {
         goToNoteMarker($(this));
     });
 
@@ -2075,13 +2740,13 @@ function goToCommentList(noteId) {
 }
 
 function bindSidebarNotesBtnDelete(btn) {
-    btn.on('click', function(e) {
+    btn.on('click', function (e) {
         $(document).trigger('deleteNote', [$(this)]);
     });
 }
 
 function bindDeleteNoteEventHandler() {
-    $(document).on('deleteNote', function(e, item) {
+    $(document).on('deleteNote', function (e, item) {
 
         createDeleteDlgElm();
 
@@ -2094,7 +2759,7 @@ function bindDeleteNoteEventHandler() {
             buttons: [{
                 text: "Confirm",
                 "id": "btnDeleteConfirm",
-                click: function() {
+                click: function () {
                     var id = item.attr('id') ? item.attr('id') : item.data('id');
                     BIMAnnotation.DeleteNote(id, deleteNote);
                     closeDlg();
@@ -2102,7 +2767,7 @@ function bindDeleteNoteEventHandler() {
             }, {
                 text: "Cancel",
                 "id": "btnDeleteCancel",
-                click: function() {
+                click: function () {
                     closeDlg();
                 }
             }],
@@ -2113,28 +2778,28 @@ function bindDeleteNoteEventHandler() {
 
         var confirmLabel = document.webL10n.get('confirm');
         var cancelLabel = document.webL10n.get('cancel');
-        $("#btnDeleteConfirm").html('<span class="ui-button-text">'+ confirmLabel +'</span>')
-        $("#btnDeleteCancel").html('<span class="ui-button-text">'+ cancelLabel +'</span>')
+        $("#btnDeleteConfirm").html('<span class="ui-button-text">' + confirmLabel + '</span>')
+        $("#btnDeleteCancel").html('<span class="ui-button-text">' + cancelLabel + '</span>')
     });
 }
 
 function deleteNote(id) {
-    notes = jQuery.grep(notes, function(elm, index) {
+    notes = jQuery.grep(notes, function (elm, index) {
         return (elm.id != id);
     });
 
     annotations.destroyAnnotation(id);
 
-    if($('.sidebar').is(':visible')) {
+    if ($('.sidebar').is(':visible')) {
         initSidebarNotes();
     }
 }
 
 function fixNotesTextareaBlur() {
-    $('#xeokitCanvas').on('click', function() {
-        if($('.sidebar-content').is(':visible')) {
+    $('#xeokitCanvas').on('click', function () {
+        if ($('.sidebar-content').is(':visible')) {
             var textareas = $('.sidebar-content').find('textarea');
-            if(textareas.length) {
+            if (textareas.length) {
                 textareas.trigger('blur');
             }
         }
@@ -2166,7 +2831,7 @@ function doHighlightSidebarNote(noteWrap) {
 }
 
 function showNoteDesc(noteId) {
-    if(!$('.sidebar').is(':visible')) {
+    if (!$('.sidebar').is(':visible')) {
         $('#btnToggleSidebarNotes').addClass('toggled');
         initSidebarNotes();
         expandSidebarNotes();
@@ -2178,9 +2843,9 @@ function showNoteDesc(noteId) {
 // Toolbar
 //------------------------------------------------------------------------------------------------------------------
 function bindToggleNotes() {
-    $(document).on('click', '#btnToggleNotes', function() {
+    $(document).on('click', '#btnToggleNotes', function () {
         $(this).toggleClass('show');
-        if($(this).hasClass('show')) {
+        if ($(this).hasClass('show')) {
             hideAnnotationMarkers();
         } else {
             showAnnotationMarkers();
@@ -2197,11 +2862,11 @@ function showAnnotationMarkers() {
 }
 
 function bindBtnToggleSidebarNotes() {
-    $(document).on('click', '#btnToggleSidebarNotes', function() {
+    $(document).on('click', '#btnToggleSidebarNotes', function () {
         $(this).toggleClass('toggled');
 
-        if($(this).hasClass('toggled')) {
-            if(!$('.sidebar').is(':visible')) {
+        if ($(this).hasClass('toggled')) {
+            if (!$('.sidebar').is(':visible')) {
                 initSidebarNotes();
                 expandSidebarNotes();
             }
@@ -2226,7 +2891,7 @@ function expandSidebarNotes() {
 }
 
 function bindSidebarNotesClose() {
-    $('.sidebar-close').on('click', function() {
+    $('.sidebar-close').on('click', function () {
         $('#navCubeCanvas').css('right', 10);
         $('#sectionPlanesOverviewCanvas').css('right', $('#sidebarWrap').width() + 10);
         $('.sidebar').hide();
@@ -2235,10 +2900,10 @@ function bindSidebarNotesClose() {
 }
 
 function bindBtnCreateAngleMeasurements() {
-    $(document).on('click', '#btnCreateAngleMeasurements', function() {
+    $(document).on('click', '#btnCreateAngleMeasurements', function () {
         $(this).toggleClass('toggled');
 
-        if($(this).hasClass('toggled')) {
+        if ($(this).hasClass('toggled')) {
             $('#btnCreateNotes').removeClass('toggled');
             annotationByClick = false;
 
@@ -2269,10 +2934,10 @@ function disableAngleMeasurementsByClick() {
 
 /* *** Вариант реализации, если необходима возможность создавать SectionPlan по клику *** */
 function bindBtnToggleCreateNotes() {
-    $(document).on('click', '#btnCreateNotes', function() {
+    $(document).on('click', '#btnCreateNotes', function () {
         $(this).toggleClass('toggled');
 
-        if($(this).hasClass('toggled')) {
+        if ($(this).hasClass('toggled')) {
             $('#btnCreateSectionPlan').removeClass('toggled');
             disableSectionPlanByClick();
             disableAngleMeasurementsByClick();
@@ -2287,10 +2952,10 @@ function bindBtnToggleCreateNotes() {
 }
 
 function bindBtnCreateSectionPlan() {
-    $(document).on('click', '#btnCreateSectionPlan', function() {
+    $(document).on('click', '#btnCreateSectionPlan', function () {
         $(this).toggleClass('toggled');
 
-        if($(this).hasClass('toggled')) {
+        if ($(this).hasClass('toggled')) {
             $('#btnCreateNotes').removeClass('toggled');
             $('#btnToggleSectionPlan').addClass('toggled');
             annotationByClick = false;
@@ -2310,10 +2975,10 @@ function bindBtnClearSectionPlan() {
 }
 
 function bindBtnToggleSectionPlan() {
-    $(document).on('click', '#btnToggleSectionPlan', function() {
+    $(document).on('click', '#btnToggleSectionPlan', function () {
         $(this).toggleClass('toggled');
 
-        if($(this).hasClass('toggled')) {
+        if ($(this).hasClass('toggled')) {
             enableSectionPlan();
         } else {
             disableSectionPlan();
@@ -2327,7 +2992,7 @@ function bindBtnToggleSectionPlan() {
 function enableSectionPlanByClick() {
     sectionPlanByClick = true;
 
-    if(lastVisibleSectionPlanId) {
+    if (lastVisibleSectionPlanId) {
         sectionPlanes.showControl(lastVisibleSectionPlanId); // Shows the 3D editing gizmo for a SectionPlane.
     }
 
@@ -2335,7 +3000,7 @@ function enableSectionPlanByClick() {
 }
 
 function enableSectionPlan() {
-    if(lastVisibleSectionPlanId) {
+    if (lastVisibleSectionPlanId) {
         sectionPlanes.showControl(lastVisibleSectionPlanId); // Shows the 3D editing gizmo for a SectionPlane.
     }
 
@@ -2359,27 +3024,30 @@ function disableSectionPlan() {
 }
 
 function bindBtnToggleSidebarTreeView() {
-    $(document).on('click', '#btnToggleSidebarTreeView', function() {
+    $(document).on('click', '#btnToggleSidebarTreeView', function () {
         $(this).toggleClass('toggled');
 
-        if($(this).hasClass('toggled')) {
+        if ($(this).hasClass('toggled')) {
             openSidebarTreeView();
         } else {
-            $('#treeViewContainerWrap').hide();
-            $('body').removeClass('treeview-expanded');
+            closeTreeView();
             // $(window).trigger('resize');
         }
     });
 }
 
+function closeTreeView() {
+    $('#treeViewContainerWrap').hide();
+    $('#btnToggleSidebarTreeView').removeClass('toggled');
+    $('body').removeClass('treeview-expanded');
+}
+
 function bindBtnToggleSidebarStoreyViews() {
-    $(document).on('click', '#btnToggleSidebarStoreyViews', function() {
+    $(document).on('click', '#btnToggleSidebarStoreyViews', function () {
         $(this).toggleClass('toggled');
 
-        if($(this).hasClass('toggled')) {
-            $('#treeViewContainerWrap').hide();
-            $('#btnToggleSidebarTreeView').removeClass('toggled');
-            $('body').removeClass('treeview-expanded');
+        if ($(this).hasClass('toggled')) {
+            closeTreeView();
 
             $('#storeyViewsSidebar').show();
         } else {
@@ -2425,7 +3093,7 @@ function initSidebarResizable() {
     $('#sidebarWrap').resizable({
         handles: "w",
         minWidth: 150,
-        resize: function(event, ui) {
+        resize: function (event, ui) {
             $('#navCubeCanvas').css('right', $('#sidebarWrap').width() + 10);
             $('#sectionPlanesOverviewCanvas').css('right', $('#sidebarWrap').width() + 10);
         }
@@ -2446,7 +3114,7 @@ const angleMeasurements = new AngleMeasurementsPlugin(viewer);
 
 function createAngleMeasurements(angleMeasurementsData) {
     var angleMeasurements = [];
-    $.each(angleMeasurementsData,function(index,value){
+    $.each(angleMeasurementsData, function (index, value) {
         angleMeasurements.push(createAngleMeasurementItem(value));
     });
 
@@ -2479,10 +3147,10 @@ function createAngleMeasurementItem(angleMeasurementItemData) {
 //------------------------------------------------------------------------------------------------------------------
 
 function bindBtnToggleAngleMeasurements() {
-    $(document).on('click', '#btnToggleAngleMeasurements', function() {
+    $(document).on('click', '#btnToggleAngleMeasurements', function () {
         $(this).toggleClass('toggled');
 
-        if($(this).hasClass('toggled')) {
+        if ($(this).hasClass('toggled')) {
             $('#btnCreateAngleMeasurements').removeClass('toggled');
             disableAngleMeasurementsByClick();
             disableAngleMeasurements();
@@ -2493,13 +3161,13 @@ function bindBtnToggleAngleMeasurements() {
 }
 
 function enableAngleMeasurements() {
-    $.each(angleMeasurements.measurements, function(index) {
+    $.each(angleMeasurements.measurements, function (index) {
         this.visible = true;
     });
 }
 
 function disableAngleMeasurements() {
-    $.each(angleMeasurements.measurements, function(index) {
+    $.each(angleMeasurements.measurements, function (index) {
         this.visible = false;
     });
 }
@@ -2595,388 +3263,61 @@ function createStoreyMapsMenu() {
                 const storey = storeyViewsPlugin.storeys[storeyMap.storeyId];
                 worldPos[idx] = (storey.aabb[idx] + storey.aabb[3 + idx]) / 2;
 
-                viewer.cameraFlight.flyTo({
-                    eye: worldPos,
-                    up: viewer.camera.worldUp,
-                    look: math.addVec3(worldPos, viewer.camera.worldForward, []),
-                    projection: "perspective",
-                    duration: 1.5
-                }, () => {
-                    viewer.cameraControl.navMode = "firstPerson";
-                    viewer.cameraControl.followPointer = false;
-                });
-            } else {
-                cameraMemento.restoreCamera(viewer.scene, () => {
-                    viewer.cameraControl.navMode = "planView";
-                });
-            }
-        };
-    }
-}
-
-//------------------------------------------------------------------------------------------------------------------
-// BCF Viewpoint JSON
-//------------------------------------------------------------------------------------------------------------------
-function bindBtnSaveBCFViewpointJSON() {
-    $('#btnSaveBCFViewpointJSON').on('click', function() {
-        saveBCFViewpointJSON();
-    });
-}
-
-function saveBCFViewpointJSON() {
-    const viewpoint = bcfViewpoints.getViewpoint({ // Options
-        spacesVisible: false, // Don't force IfcSpace types visible in viewpoint (default)
-        spaceBoundariesVisible: false, // Don't show IfcSpace boundaries in viewpoint (default)
-        openingsVisible: false // Don't force IfcOpening types visible in viewpoint (default)
-    });
-
-    const viewpointStr = JSON.stringify(viewpoint, null, 4);
-
-    // TODO -> save JSON
-    alert(viewpointStr); // Only for Test
-    console.log(viewpointStr); // Only for Test
-}
-
-function bindBtnLoadBCFViewpointJSON() {
-    $('#btnLoadBCFViewpointJSON').on('click', function() {
-        loadBCFViewpointJSON();
-    });
-}
-
-function getBCFViewpoint() {
-    return bcfData; // Return Test-data from bcf.data.js
-}
-
-function loadBCFViewpointJSON() {
-    const bcfViewpoint = getBCFViewpoint();
-    bcfViewpoints.setViewpoint(bcfViewpoint);
-}
-
-//------------------------------------------------------------------------------------------------------------------
-// Compare Models
-//------------------------------------------------------------------------------------------------------------------
-let compareModelsResult;
-let viewerSceneObjectsNewBeforeCompare;
-
-function bindBtnCompareOneOverOne() {
-    $(document).on('click', '#btnCompareOneOverOne', function() {
-        if($('#btnCompareSideBySide').hasClass('toggled')) {
-            $('#btnCompareSideBySide').removeClass('toggled');
-            doRemoveComparison();
-        }
-        if(!$(this).hasClass('toggled')) {
-            compareModels(false);
-        }
-        $(this).addClass('toggled');
-    });
-}
-
-function bindBtnCompareSideBySide() {
-    $(document).on('click', '#btnCompareSideBySide', function() {
-        if($('#btnCompareOneOverOne').hasClass('toggled')) {
-            $('#btnCompareOneOverOne').removeClass('toggled');
-            doRemoveComparison();
-        }
-        if(!$(this).hasClass('toggled')) {
-            compareModels(true);
-        }
-        $(this).addClass('toggled');
-    });
-
-}
-function bindBtnClearComparison() {
-    $(document).on('click', '#btnClearComparison', function() {
-        $('#btnCompareOneOverOne').removeClass('toggled');
-        $('#btnCompareSideBySide').removeClass('toggled');
-        $('#btnToggleCompare').removeClass('toggled');
-
-        doRemoveComparison();
-
-    });
-}
-
-function doRemoveComparison() {
-    if (model2) {
-        model2.destroy();
-    }
-    $('.comparison-popup-wrap').dialog( "destroy" );
-    restoreObjectColorsAfterCompare();
-}
-
-function restoreObjectColorsAfterCompare() {
-    if (compareModelsResult && compareModelsResult['new'] && compareModelsResult['new'].length) {
-        for (let i = 0; i < compareModelsResult['new'].length; i++) {
-            if(viewer.scene.objects[compareModelsResult['new'][i]]) {
-                viewer.scene.objects[compareModelsResult['new'][i]].colorize = viewerSceneObjectsNewBeforeCompare[compareModelsResult['new'][i]].colorize;
-            }
-        }
-    }
-
-    compareModelsResult = false;
-    viewerSceneObjectsNewBeforeCompare = false;
-}
-
-function compareModels(isSideBySide) {
-
-    var fileItem = BIMCommon.FileItem.FileVersionList[0];
-
-    var disableCacheStr = getDisableCacheStr();
-    var compareModelUrl = fileItem.ModelPath;
-    var modelUrl = compareModelUrl + disableCacheStr;
-    var metaModelDataUrl = fileItem.MetaModelDataPath + disableCacheStr;
-
-    var settings = {
-        id: Date.now(),
-        src: modelUrl,
-        edges: true,
-        performance: true,
-        position: [0, 0, 0]
-    };
-
-    if (isSideBySide) {
-        settings.position = [-55, 0, 0];
-    }
-
-    window.model2 = xktLoader.load(settings);
-    window.model2.on('loaded', () => {
-        viewer.scene.canvas.spinner.processes++;
-        doCompareModels(isSideBySide);
-    });
-}
-
-function doCompareModels(isSideBySide) {
-    BIMModel.Compare(function (result) {
-        var objResult = JSON.parse(result);
-        compareModelsResult = objResult;
-        viewerSceneObjectsNewBeforeCompare = {};
-
-        if (compareModelsResult['new'] && compareModelsResult['new'].length) {
-            for (let i = 0; i < compareModelsResult['new'].length; i++) {
-                viewerSceneObjectsNewBeforeCompare[compareModelsResult['new'][i]] = Object.assign({}, viewer.scene.objects[compareModelsResult['new'][i]]);
-            }
-        }
-
-        window.objResult = objResult;
-
-        highlightModelsDifference(objResult, isSideBySide);
-        createComparisonResultPopup();
-
-        $('#btnAddModel').hide();
-
-        viewer.scene.canvas.spinner.processes--;
-    },
-    function () {
-        viewer.scene.canvas.spinner.processes--;
-    });
-}
-
-function createComparisonResultPopup() {
-    var popupTitle = document.webL10n.get('version_changes');
-    var labelAll = document.webL10n.get('version_changes_all');
-    var labelAdded = document.webL10n.get('version_changes_added');
-    var labelRemoved = document.webL10n.get('version_changes_removed');
-
-    var countAdded  = compareModelsResult['new'].length ? compareModelsResult['new'].length : 0;
-    var countRemoved  = compareModelsResult['old']['unique'].length ? compareModelsResult['old']['unique'].length : 0;
-
-    var popupWrap = $('<div class="comparison-popup-wrap"/>');
-
-    var header = createComparisonResultPopupHeader(countAdded, labelAdded, countRemoved, labelRemoved);
-
-    var allItemsList = $('<ul class="list-items"/>');
-
-    if (countAdded) {
-        var addedItemsList = getComparisonResultAddedItemsListElm(allItemsList);
-    }
-
-    if (countRemoved) {
-        var removedItemsList = getComparisonResultRemovedItemsListElm(allItemsList);
-    }
-
-    var body = $('<div class="comparison-popup-body"/>');
-    var ukWrapRelative = $('<div class="uk-position-relative"/>');
-
-    var ukTabHeader = $('<ul uk-tab="swiping: false" class="uk-tab">' +
-        '<li class="uk-active"><a href="#" aria-expanded="true">'+labelAll+'</a></li>' +
-        (countAdded ? '<li class=""><a href="#" aria-expanded="false">'+labelAdded+'</a></li>' : '') +
-        (countRemoved ? '<li class=""><a href="#" aria-expanded="false">'+labelRemoved+'</a></li>' : '') +
-        '</ul>');
-
-    ukWrapRelative.append(ukTabHeader);
-
-    var ukSwitcher = $('<ul class="uk-switcher"/>');
-
-    var liAllElm = $('<li class="uk-active"/>');
-    if (countAdded || countRemoved) {
-        liAllElm.append(allItemsList);
-    }
-    ukSwitcher.append(liAllElm);
-
-    var liAddedElm = $('<li/>');
-    if (countAdded) {
-        liAddedElm.append(addedItemsList);
-    }
-    ukSwitcher.append(liAddedElm);
-
-    var liRemovedElm = $('<li/>');
-    if (countRemoved) {
-        liRemovedElm.append(removedItemsList);
-    }
-
-    ukSwitcher.append(liRemovedElm);
-    ukWrapRelative.append(ukSwitcher);
-    body.append(ukWrapRelative);
-    popupWrap.append(header).append(body);
-    initComparisonResultPopup(popupWrap, popupTitle);
-}
-
-function getComparisonResultAddedItemsListElm(allItemsList) {
-    var cssClass = 'item-added';
-    return getComparisonResulItemsListElm(window.model.customMeta, compareModelsResult['new'], cssClass, allItemsList);
-}
-
-function getComparisonResultRemovedItemsListElm(allItemsList) {
-    var cssClass = 'item-removed';
-    return getComparisonResulItemsListElm(window.model2.customMeta, compareModelsResult['old']['unique'], cssClass, allItemsList);
-}
-
-function getComparisonResulItemsListElm(arCustomMeta, resultData, cssClass, allItemsList) {
-    var itemsList = $('<ul class="list-items">');
-    for (var i = 0; i < resultData.length; i++) {
-        var objId = arCustomMeta[resultData[i]]['id'];
-        var objName = arCustomMeta[resultData[i]]['name'];
-        var item = $('<li class="' + cssClass + '"><span class="name">' + objName + '</span><span class="props">' + ' [ ' + objId + ' ]' + '</span></li>');
-        item.data('objId', objId);
-        item.on('click', function () {
-            goToObject($(this).data('objId'));
-        });
-        allItemsList.append(item.clone(true));
-        itemsList.append(item);
-    }
-
-    return itemsList;
-}
-
-function initComparisonResultPopup(popupWrap, popupTitle) {
-    var toolbarHeight = $('.toolbar').height();
-
-    popupWrap.dialog({
-        title: popupTitle,
-        classes: {
-            "ui-dialog": "ui-dialog-comparison"
-        },
-        maxHeight: ($(window).height()-toolbarHeight),
-        height: ($(window).height()-toolbarHeight),
-        position: {
-            my: 'right top',
-            at: 'right top',
-            of: '.canvas-wrap',
-        }
-    }).dialogExtend({
-        closable: false,
-        collapsable: true,
-        maximizable: true,
-        minimizable: true,
-        dblclick: "maximize",
-        titlebar: "transparent",
-        minimizeLocation: "left",
-    });
-}
-
-function createComparisonResultPopupHeader(countAdded, labelAdded, countRemoved, labelRemoved) {
-    var header = $('<div class="comparison-popup-head">' +
-        '<div class="comparison-popup-head-item added"><div class="count uk-text-large uk-text-bold">'+countAdded+'</div><div class="label uk-text-bold">'+labelAdded+'</div></div>' +
-        '<div class="comparison-popup-head-item removed"><div class="count uk-text-large uk-text-bold">'+countRemoved+'</div><div class="label uk-text-bold">'+labelRemoved+'</div></div>'
-        + '</div>');
-
-    return header;
-}
-
-// Gltf
-function highlightModelsDifference(result, isSideBySide) {
-    var color, arObjId;
-
-    if (result['old']['unique'].length) {
-        arObjId = result['old']['unique'];
-        var opacity = 0.4; // TODO: old Model unique-objects opacity
-        if (isSideBySide) {
-            color = [1.0, 0.0, 0.8];
-        } else {
-            color = [0.9, 0.9, 0.9]; // TODO: old Model unique-objects color -> gray
-            setOpacityArObject(window.model, arObjId, opacity);
-        }
-        colorizeArObject(window.model2, arObjId, color); // TODO: old Model unique-objects change color
-    }
-
-    // Make old Model not unique-objects unvisible
-    if (result['old']['notUnique'].length && !isSideBySide) {
-        arObjId = result['old']['notUnique'];
-        setVisibilityArObject(window.model2, arObjId, false);
-    }
-
-    if (result['new'].length) {
-        arObjId = result['new'];
-        color = [1.0, 0.0, 0.8]; // TODO: new Model unique-objects color
-        colorizeArObject(window.model, arObjId, color);
-    }
-}
-
-function colorizeArObject(arObjId, color) {
-    viewer.scene.setObjectsColorized(arObjId, color);
-}
-
-function highlightArObject(arObjId, isHighlight) {
-    viewer.scene.setObjectsHighlighted(arObjId, isHighlight);
-}
-
-function setOpacityArObject(arObjId, opacity) {
-    viewer.scene.setObjectsOpacity(arObjId, opacity);
+                viewer.cameraFlight.flyTo({
+                    eye: worldPos,
+                    up: viewer.camera.worldUp,
+                    look: math.addVec3(worldPos, viewer.camera.worldForward, []),
+                    projection: "perspective",
+                    duration: 1.5
+                }, () => {
+                    viewer.cameraControl.navMode = "firstPerson";
+                    viewer.cameraControl.followPointer = false;
+                });
+            } else {
+                cameraMemento.restoreCamera(viewer.scene, () => {
+                    viewer.cameraControl.navMode = "planView";
+                });
+            }
+        };
+    }
 }
 
-function setVisibilityArObject(arObjId, isVisible) {
-    viewer.scene.setObjectsVisible(arObjId, isVisible);
+//------------------------------------------------------------------------------------------------------------------
+// BCF Viewpoint JSON
+//------------------------------------------------------------------------------------------------------------------
+function bindBtnSaveBCFViewpointJSON() {
+    $('#btnSaveBCFViewpointJSON').on('click', function () {
+        saveBCFViewpointJSON();
+    });
 }
 
-function setVisibilityObject(objId, isVisible) {
-    viewer.scene.setObjectsVisible([objId], isVisible);
-}
+function saveBCFViewpointJSON() {
+    const viewpoint = bcfViewpoints.getViewpoint({ // Options
+        spacesVisible: false, // Don't force IfcSpace types visible in viewpoint (default)
+        spaceBoundariesVisible: false, // Don't show IfcSpace boundaries in viewpoint (default)
+        openingsVisible: false // Don't force IfcOpening types visible in viewpoint (default)
+    });
 
-function colorizeObject(objId, color) {
-    viewer.scene.setObjectsColorized([objId], color);
-}
+    const viewpointStr = JSON.stringify(viewpoint, null, 4);
 
-function highlightObject(objId, isHighlight) {
-    viewer.scene.setObjectsHighlighted([objId], isHighlight);
+    // TODO -> save JSON
+    alert(viewpointStr); // Only for Test
+    console.log(viewpointStr); // Only for Test
 }
 
-function setOpacityObject(objId, opacity) {
-    viewer.scene.setObjectsOpacity([objId], opacity);
+function bindBtnLoadBCFViewpointJSON() {
+    $('#btnLoadBCFViewpointJSON').on('click', function () {
+        loadBCFViewpointJSON();
+    });
 }
 
-function goToObject(objId) {
-    const scene = viewer.scene;
-    var entity = viewer.scene.objects[objId];
-    viewer.scene.setObjectsSelected(viewer.scene.selectedObjectIds, false);
-
-    if (entity) {
-        entity.selected = true;
-        viewer.cameraFlight.flyTo(entity);
-    }
+function getBCFViewpoint() {
+    return bcfData; // Return Test-data from bcf.data.js
 }
 
-function ViewFitAll(viewer) {
-    const aabb = viewer.scene.getAABB({});
-    const diag = math.getAABB3Diag(aabb);
-
-    if (diag > viewer.camera.perspective.far) {
-        viewer.camera.perspective.far = diag;
-    }
-
-    viewer.cameraFlight.flyTo({
-        projection: "perspective",
-        aabb: aabb,
-        duration: 0.5
-    });
+function loadBCFViewpointJSON() {
+    const bcfViewpoint = getBCFViewpoint();
+    bcfViewpoints.setViewpoint(bcfViewpoint);
 }
 
 //------------------------------------------------------------------------------------------------------------------
@@ -2989,7 +3330,7 @@ const distanceMeasurements = new DistanceMeasurementsPlugin(viewer);
 //------------------------------------------------------------------------------------------------------------------
 function createDistanceMeasurements(distanceMeasurementsData) {
     var angleMeasurements = [];
-    $.each(distanceMeasurementsData,function(index,value){
+    $.each(distanceMeasurementsData, function (index, value) {
         angleMeasurements.push(createDistanceMeasurementItem(value));
     });
 
@@ -3018,10 +3359,10 @@ function createDistanceMeasurementItem(measurement) {
 //------------------------------------------------------------------------------------------------------------------
 
 function bindBtnCreateDistanceMeasurements() {
-    $(document).on('click', '#btnCreateDistanceMeasurements', function() {
+    $(document).on('click', '#btnCreateDistanceMeasurements', function () {
         $(this).toggleClass('toggled');
 
-        if($(this).hasClass('toggled')) {
+        if ($(this).hasClass('toggled')) {
             $('#btnCreateNotes').removeClass('toggled');
             annotationByClick = false;
 
@@ -3032,367 +3373,692 @@ function bindBtnCreateDistanceMeasurements() {
             enableDistanceMeasurements();
             $('#btnToggleDistanceMeasurements').removeClass('toggled');
 
-            enableDistanceMeasurementsByClick();
+            enableDistanceMeasurementsByClick();
+
+        } else {
+            disableDistanceMeasurementsByClick();
+        }
+    });
+}
+
+function enableDistanceMeasurementsByClick() {
+    distanceMeasurementsByClick = true;
+    distanceMeasurements.control.activate();
+}
+
+function disableDistanceMeasurementsByClick() {
+    distanceMeasurements.control.deactivate();
+    distanceMeasurementsByClick = false;
+}
+
+function bindBtnToggleDistanceMeasurements() {
+    $(document).on('click', '#btnToggleDistanceMeasurements', function () {
+        $(this).toggleClass('toggled');
+
+        if ($(this).hasClass('toggled')) {
+            $('#btnCreateDistanceMeasurements').removeClass('toggled');
+            disableDistanceMeasurementsByClick();
+            disableDistanceMeasurements();
+        } else {
+            enableDistanceMeasurements();
+        }
+    });
+}
+
+function enableDistanceMeasurements() {
+    $.each(distanceMeasurements.measurements, function (index) {
+        this.visible = true;
+    });
+}
+
+function disableDistanceMeasurements() {
+    $.each(distanceMeasurements.measurements, function (index) {
+        this.visible = false;
+    });
+}
+
+
+
+//------------------------------------------------------------------------------------------------------------------
+//
+//------------------------------------------------------------------------------------------------------------------
+
+function showPropertyInspector(pickResult) {
+    //var metaObject;
+    //var model = getPickResultModel(pickResult);
+    var objectId = pickResult.entity.id;
+
+    collapseSidebarIssueDetail();
+    collapseSidebarNotes();
+    $('#btnToggleSidebarNotes').removeClass('toggled');
+
+    setPropertyBDSets(objectId);
+
+    return false;
+}
+
+function getPickResultModel(pickResult) {
+    var modelId = getPickResultModelId(pickResult);
+    if (modelId) {
+        if (window.model.id == modelId) {
+            return window.model;
+        } else if (window.model2 && window.model2.id == modelId) {
+            return window.model2;
+        } else {
+            return false;
+        }
+    } else {
+        return false;
+    }
+}
+
+function getPickResultModelId(pickResult) {
+    if (pickResult.entity.model && pickResult.entity.model.id) {
+        return pickResult.entity.model.id;
+    } else if (pickResult.entity._owner && pickResult.entity._owner.id) {
+        return pickResult.entity._owner.id;
+    } else {
+        return false;
+    }
+}
+
+function getPropertyValue(property) {//todo: use in compare
+    if (!property) {
+        return '-';
+    }
+
+    if (property.valueBool != null && property.valueBool != undefined) {
+        return property.valueBool;
+    }
+    else if (property.valueInt != null && property.valueInt != undefined) {
+        return property.valueInt;
+    }
+    else if (property.valueText != null && property.valueText != undefined) {
+        return property.valueText;
+    }
+    else if (property.valueReal != null && property.valueReal != undefined) {
+        const normalized = property.valueReal.replace(',', '.').trim();
+        const num = Number(normalized);
+        if (!isNaN(num)) {
+            if (Math.abs(num) < 1) {
+                return Number(num.toPrecision(3));
+            } else {
+                return Number(num.toFixed(2));
+            }
+        }
+        return property.valueReal;
+    }
+}
+
+function convertProperty(data) {
+    let groups = [];
+
+    for (let property of data) {
+        let existingGroups = groups.filter(group => group.name == property.groupName);
+        if (existingGroups.length > 0) {
+            existingGroups[0].properties.push({ name: property.name, value: getPropertyValue(property) });
+        }
+        else {
+            let newGroup = {
+                name: property.groupName,
+                properties: [],
+            };
+            newGroup.properties.push({ name: property.name, value: getPropertyValue(property) });
+
+
+            groups.push(newGroup);
+        }
+    }
+
+    return groups;
+}
+
+function setPropertyBDSets(id) {
+    const html = [];
+
+    html.push('<div class="element-attributes">');
+    html.push('</div>');
+
+    viewer.scene.canvas.spinner.processes++;
+
+    BIMModel.GetPropertyList(id,
+        (data) => {
+            const propertySets = convertProperty(data);
+            addPropertySet(propertySets, html);
+            viewer.scene.canvas.spinner.processes--;
+        },
+        (error) => {
+            viewer.scene.canvas.spinner.processes--;
+        }
+    );
+
+    $('#propInspector .prop-inspector-content')[0].innerHTML = html.join("");
+    $('.xeokit-accordion-container').accordion({
+        collapsible: true,
+        heightStyle: "content"
+    });
+    showPropInspector();
+}
+
+function addPropertySet(propertySets, html) {
+    if (!propertySets || propertySets.length == 0) {
+        html.push('<p class="subtitle">No properties sets found.</p>');
+    }
+    else {
+        html.push('<div class="xeokit-accordion">');
+        for (let i = 0, len = propertySets.length; i < len; i++) {
+            const propertySet = propertySets[i];
+            const properties = propertySet.properties || propertySet.p || [];
+            if (properties.length > 0) {
+                html.push('<div class="xeokit-accordion-container">' +
+                    '<h3><span>' + (propertySet.name ? propertySet.name : propertySet.propertySetName) + '</span></h3>' +
+                    '<div class="xeokit-accordion-panel">' +
+                    '<table class="xeokit-table"><tbody>'
+                );
+                for (let i = 0, len = properties.length; i < len; i++) {
+                    const property = properties[i];
+                    html.push('<tr><td class="td1">' + (property.Name || property.name || property.label) + ':</td><td class="td2">' + (property.v || property.Value || property.value) + '</td></tr>');
+                }
+                html.push('</tbody></table>' +
+                    '</div>' +
+                    '</div>');
+            } else {
+                html.push('<p class="subtitle">No properties sets found.</p>');
+            }
+        }
+        html.push('</div>');
+    }
+    $('#propInspector .prop-inspector-content')[0].innerHTML = html.join("");
+    $('.xeokit-accordion-container').accordion({
+        collapsible: true,
+        heightStyle: "content"
+    });
+    showPropInspector();
+}
+
+function setPropertySets(metaObject, dictionaryName = []) {
+    const html = [];
+    var propertySets = metaObject.propertySets || metaObject.ps;
 
-        } else {
-            disableDistanceMeasurementsByClick();
+    html.push('<div class="element-attributes">');
+    if (!metaObject) {
+        html.push('<p class="subsubtitle">No object selected</p>');
+    } else {
+        html.push('<table class="xeokit-table">');
+        html.push('<tr><td class="td1">Name:</td><td class="td2">' + metaObject.name + '</td></tr>');
+        if (metaObject.type) {
+            html.push('<tr><td class="td1">Class:</td><td class="td2">' + metaObject.type + '</td></tr>');
         }
+        html.push('<tr><td class="td1">UUID:</td><td class="td2">' + metaObject.id + '</td></tr>');
+        html.push('</table>');
+
+        addPropertySet(propertySets, html);
+    }
+    $('#propInspector .prop-inspector-content')[0].innerHTML = html.join("");
+    $('.xeokit-accordion-container').accordion({
+        collapsible: true,
+        heightStyle: "content"
     });
+    showPropInspector();
 }
 
-function enableDistanceMeasurementsByClick() {
-    distanceMeasurementsByClick = true;
-    distanceMeasurements.control.activate();
+function bindPropInspectorClose() {
+    $('.prop-inspector-close').on('click', function () {
+        hidePropInspector();
+    })
 }
 
-function disableDistanceMeasurementsByClick() {
-    distanceMeasurements.control.deactivate();
-    distanceMeasurementsByClick = false;
+//------------------------------------------------------------------------------------------------------------------
+// PropertySets resizable
+//------------------------------------------------------------------------------------------------------------------
+function initPropertySetsResizable() {
+    $('#propInspector').resizable({
+        handles: "w",
+        minWidth: 150
+    });
 }
 
-function bindBtnToggleDistanceMeasurements() {
-    $(document).on('click', '#btnToggleDistanceMeasurements', function() {
-        $(this).toggleClass('toggled');
+viewer.on('vitroCompareStatus', (status) => {
+    if (status) {
+        $('#propInspector').hide();
+    }
+});
+//------------------------------------------------------------------------------------------------------------------
+// Do action wherever we click on an object
+//------------------------------------------------------------------------------------------------------------------
 
-        if($(this).hasClass('toggled')) {
-            $('#btnCreateDistanceMeasurements').removeClass('toggled');
-            disableDistanceMeasurementsByClick();
-            disableDistanceMeasurements();
-        } else {
-            enableDistanceMeasurements();
-        }
-    });
-}
+viewer.scene.input.on("mouseclicked", (coords) => {
 
-function enableDistanceMeasurements() {
-    $.each(distanceMeasurements.measurements, function(index) {
-        this.visible = true;
+    const pickResult = viewer.scene.pick({
+        canvasPos: coords,
+        pickSurface: true,  // <<------ This causes picking to find the intersection point on the entity
+        //includeEntities: true,
     });
-}
 
-function disableDistanceMeasurements() {
-    $.each(distanceMeasurements.measurements, function(index) {
-        this.visible = false;
-    });
-}
+    if (pickResult) {
+        if ($('#btnCreateNotes').hasClass('toggled')) {
+            createAnnotationByClick(pickResult);
+        }
+        createSectionPlaneByClick(pickResult);
+    }
+});
 
 //------------------------------------------------------------------------------------------------------------------
-// FastNavPlugin
+// Show Object Properties on Click
 //------------------------------------------------------------------------------------------------------------------
+viewer.cameraControl.on("picked", (pickResult) => {
+    if (!pickResult.entity) {
+        return;
+    }
 
-const fastNavPlugin = new FastNavPlugin(viewer, {
-    hideEdges: true,                   // Don't show edges while we interact (default is true)
-    hideSAO: true,                     // Don't show ambient shadows while we interact (default is true)
-    hideColorTexture: true,            // No color textures while we interact (default is true)
-    hidePBR: true,                     // No physically-based rendering while we interact (default is true)
-    hideTransparentObjects: true,      // Hide transparent objects while we interact (default is false)
-    scaleCanvasResolution: true,       // Scale canvas resolution while we interact (default is false)
-    scaleCanvasResolutionFactor: 0.5,  // Factor by which we scale canvas resolution when we interact (default is 0.6)
-    delayBeforeRestore: true,          // When we stop interacting, delay before restoring normal render (default is true)
-    delayBeforeRestoreSeconds: 1,      // The delay duration, in seconds (default is 0.5)
-    hideTempObj: false,
-    maxTreeDepth: 20,
+    if (pickResult.entity.id && !$('#btnCreateNotes').hasClass('toggled')) {
+        showPropertyInspector(pickResult);
+    }
 });
 
+/*viewer.cameraControl.on("pickedNothing", () => {
+    return false;
+});*/
+
 //------------------------------------------------------------------------------------------------------------------
-//
-//------------------------------------------------------------------------------------------------------------------
-
-const EVENT_SEARCH_ISSUE_LIST = 'vitro.search.issue.list';
-const EVENT_ISSUE_LIST_REFRESH = 'vitro.issue.list.refresh';
-const EVENT_ISSUE_LIST_SELECT_ITEM = 'vitro.issue.list.select.item';
-const PANE_LEFT_MIN_WIDTH = 150;
-const PANE_RIGHT_MIN_WIDTH = 200;
 
-var notesDescriptionVisibleList = {};
+window.viewer = viewer;
 
-BIMAnnotation.GetNote = (callback) => {
-    callback([]);
-}
+let version = context.fileVersionList.find(x => x.id === context.versionId);
+let versionStr = version ? version.name : null;
 
-function saveNote(pickResult) {
+BIMCommon.GetFileItem(context.file.id, versionStr, function (modelId) {
 
-}
+    context.getItem(modelId).then(item => {
+        var filePath = context.getFilePath(item.id);
+        var fileName = context.file.fieldValueMap?.name;
 
-function createMarkupData(pickResult) {
-    let markup = {};
-    markup.worldPos = [];
-    markup.worldPos.push(pickResult._worldPos[0]);
-    markup.worldPos.push(pickResult._worldPos[1]);
-    markup.worldPos.push(pickResult._worldPos[2]);
+        document.title += " - " + fileName;
+        //fileVersion = '';
+        //fileVersionPath = filePath;
+        hideXeokitSpinner();
 
-    var eye = viewer.camera.eye;
-    markup.eye = [];
-    markup.eye.push(eye[0]);
-    markup.eye.push(eye[1]);
-    markup.eye.push(eye[2]);
+        const model = new BIMCommon.VitroModel(context.file.id, versionStr, filePath, fileName);
 
-    var look = viewer.camera.look;
-    markup.look = [];
-    markup.look.push(look[0]);
-    markup.look.push(look[1]);
-    markup.look.push(look[2]);
+        BIMCommon.ModelList.push(model);
 
-    var up = viewer.camera.up;
-    markup.up = [];
-    markup.up.push(up[0]);
-    markup.up.push(up[1]);
-    markup.up.push(up[2]);
+        window.model = doLoadModel(viewer, xktLoader, model, true);
+        window.model.ModelList = BIMCommon.ModelList;
 
-    if (pickResult.entity && pickResult.entity.id) {
-        markup.entity = pickResult.entity.id;
-    }
+    })
+    
+}, function () {
+    alert("The file is being processed");
+});
 
-    return markup;
-}
+var userLocale =
+    navigator.languages && navigator.languages.length
+        ? navigator.languages[0]
+        : navigator.language;
 
-function addIssue(itemId, data) {
-    context.onCreateIssue(itemId, data);
+document.webL10n.setLanguage(userLocale, function () {
+    document.webL10n.translate();
+});
+
+//------------------------------------------------------------------------------------------------------------------
+// Compare Models
+//------------------------------------------------------------------------------------------------------------------
+const add = 'add';
+const del = 'del';
+const changeA = 'changeA';
+const changeB = 'changeB';
+const change = 'change';
+const property = 'property';
+const geometry = 'geometry';
+const CSS_CLASS_SELECTED = 'vitro-selected';
+const CSS_CLASS_ACTIVE = 'uk-active';
+const EVENT_FILTER_CHANGE_TYPE = 'vitro.changeType';
+const EVENT_COMPARE_TREE_ITEM_SLECT = 'vitro.compare.tree.item.select';
 
-    hidePropInspector();
-    expandSidebarIssueDetail();
-}
+let compareModelsResult;
+let isCompareSideBySide;
+let compareObjList;
+let viewerCompare;
 
-function createAnnotationByClick(pickResult) {
-    let data = createMarkupData(pickResult);
+function bindBtnCompareOneOverOne() {
+    $(document).on('click', '#btnCompareOneOverOne', function () {
+        if ($('#btnCompareSideBySide').hasClass('toggled')) {
+            resetCanvasWrapWidth();
+            $('#btnCompareSideBySide').removeClass('toggled');
+            doRemoveComparison();
+        }
+        if (!$(this).hasClass('toggled')) {
+            compareModels(false);
+        }
+        $(this).addClass('toggled');
+    });
+}
 
-    if (data.entity) {
-        viewer.scene.canvas.spinner.processes++;
+function bindBtnCompareSideBySide() {
+    $(document).on('click', '#btnCompareSideBySide', function () {
+        if ($('#btnCompareOneOverOne').hasClass('toggled')) {
+            resetCanvasWrapWidth();
+            $('#btnCompareOneOverOne').removeClass('toggled');
+            doRemoveComparison();
+        }
+        if (!$(this).hasClass('toggled')) {
+            compareModels(true);
+        }
+        $(this).addClass('toggled');
+    });
+}
 
-        const callback = (modelInfo, status, jqXHR) => {
+function bindBtnClearComparison() {
+    $(document).on('click', '#btnClearComparison', function () {
+        $('#btnCompareOneOverOne').removeClass('toggled');
+        $('#btnCompareSideBySide').removeClass('toggled');
+        $('#btnToggleCompare').removeClass('toggled');
 
-            const itemId = modelInfo?.itemId ? modelInfo?.itemId : context.file.id;
+        removeCompareLabel();
+        doRemoveComparison();
+        resetCanvasWrapWidth();
+        window.removeEventListener('resize', onWindowResizeCompareDialog);
+    });
+}
 
-            addIssue(itemId, data);
+function doRemoveComparison() {
+    if (isCompareSideBySide) {
+        const left = document.getElementById("xeokitCanvas");
+        const right = document.getElementById("xeokitCompareCanvas");
 
-            viewer.scene.canvas.spinner.processes--;
-        };
+        left.style.width = "100%";
+        right.style.display = "none";
 
-        const error = () => {
-            viewer.scene.canvas.spinner.processes--;
-        };
+        offSyncCamera(viewer);
+        offSyncCamera(viewerCompare);
 
-        BIMModel.GetModel(data.entity, callback, error);
-    }
-    else {
-        addIssue(context.file.id, data);
+        viewerCompare.destroy();
     }
-}
 
+    setSceneAllObjectsVisible(viewer.scene, true);
 
+    if (window.model2) {
+        window.model2.vitroModelLoader.startSmallLoad = false;
 
-function bindBtnToggleCreateNotes() {
-    $(document).on('click', '#btnCreateNotes', function () {
-        $(this).toggleClass('toggled');
+        if (!window.model2.destroyed) {
+            window.model2.destroy();
 
-        if ($(this).hasClass('toggled')) {
-            $('#btnCreateSectionPlan').removeClass('toggled');
-            disableSectionPlanByClick();
-            disableAngleMeasurementsByClick();
-            disableDistanceMeasurementsByClick();
-            showAnnotationMarkers();
-            $('#btnToggleNotes').removeClass('show');
-            collapseSidebarNotes();
-            $('#btnToggleSidebarNotes').removeClass('toggled');
-            annotationByClick = true;
-        } else {
-            annotationByClick = false;
-            collapseSidebarIssueDetail();
+            if (window.model2.vitroModelLoader && !window.model2.vitroModelLoader.destroyed) {
+                window.model2.vitroModelLoader.destroy();
+                window.model2.vitroModelLoader = undefined
+            }
         }
-    });
+
+        window.model2 = undefined
+    }
+
+    $('.comparison-popup-wrap').dialog("destroy");
+    $('.property-comparison-popup-wrap').dialog("destroy");
+    restoreObjectColorsAfterCompare();
+
+    viewer.fire('vitroCompareStatus', false);
 }
 
-function bindBtnToggleSidebarNotes() {
-    $(document).on('click', '#btnToggleSidebarNotes', function () {
-        $(this).toggleClass('toggled');
+function restoreObjectColorsAfterCompare() {
+    viewer.scene.modelIds.forEach((modelId) => {
+        const m = viewer.scene.models[modelId];
 
-        if ($(this).hasClass('toggled')) {
-            $('#btnCreateNotes').removeClass('toggled');
-            annotationByClick = false;
-            if (!$('.sidebar').is(':visible')) {
-                initSidebarNotes();
-                expandSidebarNotes();
-            }
-        } else {
-            collapseSidebarNotes();
+        if (m.loadedVitroCompare) {
+            var list = Object.keys(m.loadedVitroCompare);
+
+            list.forEach(key => {
+                viewer.scene.off(m.loadedVitroCompare[key]);
+                m.loadedVitroCompare[key] = false;
+            });
         }
+
+        m.colorize = undefined;
+        m.opacity = undefined;
     });
+
+    compareModelsResult = false;
 }
 
-function bindSidebarNotesClose() {
-    $('.sidebar-close').on('click', function () {
-        $('#btnToggleSidebarNotes').removeClass('toggled');
-        collapseSidebarNotes();
+function compareModels(isSideBySide) {
+    isCompareSideBySide = isSideBySide;
+    showDlgCompare();
+}
+
+function doCompareModels(isSideBySide) {
+    runCompare({
+        filters: getServerFiltersFromUI(),
+        sideBySide: !!isSideBySide,
+        createWindow: true,
+        resetSkip: true
     });
 }
 
-function expandSidebarNotes() {
-    hidePropInspector();
-    collapseSidebarIssueDetail();
+function createComparisonResultPopupWindow() {
+    window.BIMModel = BIMModel; // todo: delete. It is only for test
 
-    $('#sidebarWrap').show();
-    $('#navCubeCanvas').css('right', $('#sidebarWrap').width() + 10);
-    $('#sectionPlanesOverviewCanvas').css('right', $('#sidebarWrap').width() + 10);
-    var body = $('body');
-    var bodyScrollWidth = body[0].offsetWidth - body[0].scrollWidth;
-    var vScrollWidth = bodyScrollWidth ? bodyScrollWidth : 0;
-    $('.sidebar').css('right', (vScrollWidth + 'px')).show("slide", { direction: "right" }, 200);
-    body.addClass('sidebar-expanded');
-}
+    var popupTitle = document.webL10n.get('version_changes');
+    var labelList = 'Список'; // document.webL10n.get('version_changes_all'); // TODO - translation
+    var labelTree = 'Дерево'; // TODO - translation
+    var labelTreeContentHeader = 'Название'; // TODO - translation
+    var labelTreeContentHeaderCount = 'Кол-во'; // TODO - translation
+    var labelAdded = document.webL10n.get('version_changes_added');
+    var labelRemoved = document.webL10n.get('version_changes_removed');
+    var labelChanged = document.webL10n.get('version_changes_changed');
 
-function getMarkupData(item) {
+    var popupWrap = $('<div class="comparison-popup-wrap"/>');
 
-    let markup = JSON.parse(item.fieldValueMap.markup);
-    var options = {
-        id: item.fieldValueMap.item_id,
-        creator: item.insUserName,
-        worldPos: markup.worldPos,
-        eye: markup.eye, // need for camera fly on sidebar click
-        look: markup.look,  // need for camera fly on sidebar click
-        up: markup.up,  // need for camera fly on sidebar click
-        occludable: false,
-        markerShown: true,
-        labelShown: false,
-        version: '',
-        fileVersionPath: '',
-        values: {
-            glyph: item.fieldValueMap.item_id,
-            title: item.fieldValueMap.name,
-            description: item.fieldValueMap.description,
-            markerBGColor: item.fieldValueMap.task_status?.fieldValueMap?.color || '#2d9cdb',
-            imageSrc: ''
-        }
-    };
+    const popupTitleElm = createComparisonResultPopupTitle(popupTitle);
+    var header = createComparisonResultPopupHeader(labelAdded, labelRemoved, labelChanged);
+    const search = createSearch();
 
-    if (markup.entity) {
-        options.entity = viewer.scene.objects[markup.entity];
-    }
+    var compareListContentElm = $('<ul class="list-items" id="compareListContent"/>');
 
-    return options;
+    var body = $('<div class="comparison-popup-body"/>');
+    var ukWrapRelative = $('<div class="uk-position-relative"/>');
+
+    var ukTabHeader = $('<ul uk-tab="swiping: false" class="uk-tab"/>');
+    const tabHeaderItemList = $('<li class="uk-active" id="compareList"><a href="#" aria-expanded="true">' + labelList + '</a></li>');
+    const tabHeaderItemTree = $('<li id="compareTree"><a href="#" aria-expanded="false">' + labelTree + '</a></li>');
+
+    tabHeaderItemTree.on('click', function () { initCompareTreeView(); });
+
+    ukTabHeader.append(tabHeaderItemList).append(tabHeaderItemTree);
+    ukWrapRelative.append(ukTabHeader);
+
+    var ukSwitcher = $('<ul class="uk-switcher"/>');
+
+    var liListElm = $('<li class="uk-active"/>');
+    liListElm.append(compareListContentElm);
+    ukSwitcher.append(liListElm);
+
+    var liTreeElm = $('<li/>');
+    const treeContentHeader = $('<div class="vitro-compare-tree-header"/>');
+    treeContentHeader.html('<span>' + labelTreeContentHeader + '</span><span>' + labelTreeContentHeaderCount + '</span>');
+    const treeContent = $('<div id="compareTreeContent"/>');
+    liTreeElm.append(treeContentHeader).append(treeContent);
+    ukSwitcher.append(liTreeElm);
+
+    ukWrapRelative.append(ukSwitcher);
+    body.append(ukWrapRelative);
+
+    popupWrap.append(popupTitleElm).append(header).append(search).append(body);
+
+    initComparisonResultPopup(popupWrap, popupTitle);
+
+    return popupWrap;
 }
 
-function bindUpdatePage() {
-    if (context.deleteIssueEvent) {
-        window.addEventListener(context.deleteIssueEvent, updatePage);
+function fillComparisonResultList(compareModelsResult) {
+    var $list = $('#compareListContent');
+    if (!$list.length) {
+        createComparisonResultPopupWindow();
+        $list = $('#compareListContent');
     }
 
-    if (context.updateIssueEvent) {
-        window.addEventListener(context.updateIssueEvent, updatePage);
+    const compareListContent = getCompareListContent(compareModelsResult);
+    $list.empty();
+    if (compareListContent && compareListContent.length) {
+        $list.append(compareListContent);
     }
 }
 
-bindUpdatePage();
+function initCompareTreeView() {
+    context.initCompareTreeView();
+}
 
-function updatePage(e) {
-    if (e.type === context.updateIssueEvent) {
-        const item = e.detail.itemList[0];
-        if (item.fieldValueMap?.markup) {
-            const data = getMarkupData(item);
-            annotations.destroyAnnotation(item.fieldValueMap.item_id);
-            createNote(data);
-            setTimeout(function () {
-                if (isNoteDescriptionVisible(data.id)) {
-                    annotations.annotations[data.id].setLabelShown(true);
-                } else {
-                    annotations.annotations[data.id].setLabelShown(false);
-                }
-            }, 10);
-        }
-        
-        if (!$('#btnToggleSidebarNotes').hasClass('toggled')) {
-            refreshIssueList();
-        }
-    }
+function getComparisonResultAddedItemsListElm(compareModelsResult) {
+    var cssClass = 'item-added';
+    var addResult = compareModelsResult?.filter(e => e.changeType === add);
 
-    if (e.type === context.deleteIssueEvent) {
+    return getComparisonResulItemsListElm(addResult, cssClass);
+}
 
-        let item = e.detail.itemList[0];
-        annotations.destroyAnnotation(item.fieldValueMap.item_id);
-        refreshIssueList();
-        if (isNoteDescriptionVisible(item.fieldValueMap.item_id)) {
-            removeFromNotesDescriptionVisibleList(item.fieldValueMap.item_id);
-        }
-    }
+function getComparisonResultRemovedItemsListElm(compareModelsResult) {
+    var cssClass = 'item-removed';
+    var delResult = compareModelsResult?.filter(e => e.changeType === del);
+
+    return getComparisonResulItemsListElm(delResult, cssClass);
 }
 
-function refreshIssueList() {
-    const event = new CustomEvent(EVENT_ISSUE_LIST_REFRESH, { detail: {} });
-    window.dispatchEvent(event);
+function getComparisonResultChangedItemsListElm(compareModelsResult) {
+    var cssClass = 'item-changed';
+    var changeResult = compareModelsResult?.filter(e => e.changeType === change);
+
+    return getComparisonResulItemsListElm(changeResult, cssClass);
 }
 
-function goToNoteMarker(issue) {
-    if (!$('#btnCreateNotes').hasClass('toggled')) {
-        hideNotesDescription();
-        clearNotesDesriptionVisibleList();
-        addToNotesDescriptionVisibleList(issue.id);
-        var annotation = annotations.annotations[issue.id];
-        viewer.cameraFlight.flyTo(annotation);
-        annotation.occludable = false;
-        annotation.setLabelShown(true);
-        highlightSidebarNote(issue.id);
+function getComparisonResulItemsListElm(resultData, cssClass) {
+    const itemsList = [];
+
+    for (let i = 0; i < resultData.length; i++) {
+        const obj = resultData[i];
+        const objName = obj.name;
+        const objUuid = obj.uuid;
+
+        const item = $('<li class="' + cssClass + '"><span class="name">' + objName + '</span><span class="props">[ ' + objUuid + ' ]</span></li>');
+
+        item.data('obj', obj);
+
+        item.on('click', function () {
+            const data = $(this).data('obj');
+            onComparisonResulItemClick(data);
+            selectListItem($(this));
+        });
+
+        itemsList.push(item);
     }
+
+    return itemsList;
 }
 
-function onIssueShowMoreClick(issue) {
-    const listId = issue.item.listId;
-    const itemId = {
-        id: issue.item.id,
-        contentTypeId: issue.item.contentTypeId,
-        listId: listId,
-        parentId: issue.item.parentId,
-        siteId: issue.item.siteId
-    };
+function initComparisonResultPopup(popupWrap, popupTitle) {
+    var toolbarHeight = $('.toolbar').height();
 
-    let event = new CustomEvent('vitro.item.changed', {
-        detail: {
-            itemIdList: [itemId],
-            listId: listId
+    popupWrap.dialog({
+        title: popupTitle,
+        classes: {
+            "ui-dialog": "ui-dialog-comparison"
+        },
+        maxHeight: ($(window).height() - toolbarHeight),
+        height: ($(window).height() - toolbarHeight),
+        width: 434,
+        position: {
+            my: 'right top',
+            at: 'right top',
+            of: '.canvas-wrap',
+        },
+        open: function (event, ui) {
+            onResizeCompareDialog();
+            window.removeEventListener('resize', onWindowResizeCompareDialog);
+            window.addEventListener('resize', onWindowResizeCompareDialog);
+        },
+        resize: function (event, ui) {
+            onResizeCompareDialog();
+        },
+        resizeStop: function (event, ui) {
+            onResizeCompareDialog();
         }
+    }).dialogExtend({
+        closable: false
     });
-    window.dispatchEvent(event);
-    collapseSidebarNotes();
-    hidePropInspector();
-    expandSidebarIssueDetail();
-    $('#btnToggleSidebarNotes').removeClass('toggled');
 }
 
-function collapseSidebarNotes() {
-    $('#sidebarWrap').hide();
-    $('#navCubeCanvas').css('right', 10);
-    $('#sectionPlanesOverviewCanvas').css('right', 10);
-    $('.sidebar').hide();
-    $('body').removeClass('sidebar-expanded');
-}
+function createComparisonResultPopupHeader(labelAdded, labelRemoved, labelChanged) {
+    const header = $('<div class="comparison-popup-head"/>');
+    const added = $('<div id="btnCompareFilterAdd" class="comparison-popup-head-item added ' + CSS_CLASS_SELECTED + '"><div class="count">' + 0 + '</div><div class="label">' + labelAdded + '</div></div>');
+    bindOnClickBtnCompareFilterHandler(added);
+    const changed = $('<div id="btnCompareFilterDel" class="comparison-popup-head-item removed ' + CSS_CLASS_SELECTED + '"><div class="count">' + 0 + '</div><div class="label">' + labelRemoved + '</div></div>');
+    bindOnClickBtnCompareFilterHandler(changed);
+    const deleted = $('<div id="btnCompareFilterChange" class="comparison-popup-head-item changed ' + CSS_CLASS_SELECTED + '"><div class="count">' + 0 + '</div><div class="label">' + labelChanged + '</div></div>');
+    bindOnClickBtnCompareFilterHandler(deleted);
+    header.append(added).append(changed).append(deleted);
 
-function initSidebarNotes() {
-    context.initIssueList(goToNoteMarker, onIssueShowMoreClick);
+    return header;
 }
 
-function expandSidebarIssueDetail() {
-    $('#issueDetail').show();
-    $('#navCubeCanvas').css('right', $('#issueDetail').width() + 10);
-    $('#sectionPlanesOverviewCanvas').css('right', $('#issueDetail').width() + 10);
-    $('body').addClass('sidebar-expanded');
+function setComparisonCounts(addedCount, removedCount, changedCount) {
+    $('#btnCompareFilterAdd .count').text(addedCount);
+    $('#btnCompareFilterDel .count').text(removedCount);
+    $('#btnCompareFilterChange .count').text(changedCount);
 }
 
-function collapseSidebarIssueDetail() {
-    $('#issueDetail').hide();
-    $('#navCubeCanvas').css('right', 10);
-    $('#sectionPlanesOverviewCanvas').css('right', 10);
-    $('body').removeClass('sidebar-expanded');
-}
 
-//------------------------------------------------------------------------------------------------------------------
-// Load Annotations
-//------------------------------------------------------------------------------------------------------------------
-function createSidebarNotesItemHeader(noteData) {
+function highlightModelsDifference(idList, isSideBySide) {
+    const colorGray = [0.9529, 0.9529, 0.9529];
+    const colorDel = [0.8549, 0.3843, 0.4157];
+    const colorAdd = [0.6078, 0.8824, 0.7294];
+    const colorChange = [0.9137, 0.9373, 0.4588];
+
+    if (!idList) {
+        return;
+    }
+
+    const addIds = idList[add];
+    const delIds = idList[del];
+    const changeAIds = idList[changeA];
+    const changeBIds = idList[changeB];
+
+    setComparisonCounts(addIds?.length ?? 0, delIds?.length ?? 0, changeAIds?.length ?? 0 + changeBIds?.length ?? 0);
+
+    if (window.model2 && delIds) {
+        withObjectIdsForModel(window.model2, delIds,
+            entity => { entity.opacity = 1.0; entity.colorize = colorDel },
+            entity => { entity.colorize = colorGray },
+            'onModelBColorize');
+    }
 
+    if (window.model && addIds) {
+        withObjectIdsForModel(window.model, addIds,
+            entity => { entity.opacity = 1.0; entity.colorize = colorAdd },
+            entity => { entity.colorize = colorGray },
+            'onModelAColorize');
+        if (!isSideBySide) {
+            setModelAllObjectsVisible(window.model, false);
+            setModelObjectsVisible(window.model, addIds, true);
+        }
+    }
+    if (window.model && changeAIds) {
+        withObjectIdsForModel(window.model, changeAIds,
+            entity => { entity.opacity = 1.0; entity.colorize = colorChange },
+            undefined,
+            'onChangeModelAColorize');
+    }
+    if (window.model2 && changeBIds) {
+        withObjectIdsForModel(window.model2, changeBIds,
+            entity => { entity.opacity = 1.0; entity.colorize = colorChange },
+            undefined,
+            'onChangeModelBColorize');
+    }
 }
 
-function hidePropInspector() {
-    $('#propInspector').hide();
-    setPositionNavCubeCanvas(0);
-    setPositionSectionPlanesOverviewCanvas(0);
+function withObjectIdsForModel(model, callback, callbackOther, propertyName) {
+    withObjectIds(model, callback, callbackOther, propertyName);
+
+    if (model.vitroModelLoader && model.vitroModelLoader.smallModelList) {
+        model.vitroModelLoader.smallModelList.forEach(m => {
+            withObjectIds(m, callback, callbackOther, propertyName);
+        });
+    }
 }
 
 //------------------------------------------------------------------------------------------------------------------
@@ -3468,6 +4134,8 @@ function bindBtnDoCompare() {
             hideDlgCompare();
             hideDlgOverlay();
             doCompare();
+
+            viewer.fire('vitroCompareStatus', true);
         }
     });
 }
@@ -3564,9 +4232,6 @@ function initCompare() {
     checkIsAllowedCompare();
 }
 
-var compareObjList;
-var isCompareSideBySide;
-
 function getCompareObjList() {
     return {
         modelAVersion: getModelAVersion(),
@@ -3592,65 +4257,124 @@ function showDlgCompare() {
     $('.compare-dlg-wrap').show();
 }
 
-function compareModels(isSideBySide) {
-    isCompareSideBySide = isSideBySide;
-    showDlgCompare();
+
+
+function highlightArObject(arObjId, isHighlight) {
+    viewer.scene.setObjectsHighlighted(arObjId, isHighlight);
+}
+
+function setOpacityArObject(arObjId, opacity) {
+    viewer.scene.setObjectsOpacity(arObjId, opacity);
+}
+
+function setVisibilityArObject(arObjId, isVisible) {
+    viewer.scene.setObjectsVisible(arObjId, isVisible);
+}
+
+function setVisibilityObject(objId, isVisible) {
+    viewer.scene.setObjectsVisible([objId], isVisible);
+}
+
+function colorizeObject(objId, color) {
+    viewer.scene.setObjectsColorized([objId], color);
+}
+
+function highlightObject(objId, isHighlight) {
+    viewer.scene.setObjectsHighlighted([objId], isHighlight);
+}
+
+function setOpacityObject(objId, opacity) {
+    viewer.scene.setObjectsOpacity([objId], opacity);
+}
+
+function goToObjectByAABB(objId, modelList) {
+    var callback = (aabb) =>
+    {
+        viewer.scene.canvas.spinner.processes--;
+        viewer.cameraFlight.flyTo(aabb);
+    }
+    var error = () =>
+    {
+        viewer.scene.canvas.spinner.processes--;
+    }
+
+    viewer.scene.canvas.spinner.processes++;
+
+    BIMModel.GetAABB(objId, modelList, callback, error);
+}
+
+function goToObject(objId, objIdB) {
+    var entity = window.model.objects[objId];
+    var entityB = window.model2.objects[objIdB];
+
+    if (entity) {
+        entity.scene.scene.viewer.cameraFlight.flyTo(entity);
+    }
+    else if (entityB) {
+        entityB.scene.scene.viewer.cameraFlight.flyTo(entityB);
+    }
+    else if (objId || objIdB) {
+        var id = objId ? objId : objIdB;
+
+        goToObjectByAABB(id, window.model.ModelList.concat(window.model2.ModelList));
+    }
 }
 
-function doCompareModels(isSideBySide) {
+function selectObject(objId, objIdB) {
+    const onModelASelected = 'onModelASelected';
+    const onModelBSelected = 'onModelBSelected';
 
-    BIMModel.Compare(function (objResult) {
+    var entity = window.model.objects[objId];
+    var entityB = window.model2.objects[objIdB];
 
-        compareModelsResult = objResult;
-        viewerSceneObjectsNewBeforeCompare = {};
+    window.model.scene.fire("vitroClearObjectsRequired", { model: window.model });
+    window.model2.scene.fire("vitroClearObjectsRequired", { model: window.model2 });
 
-        if (compareModelsResult['new'] && compareModelsResult['new'].length) {
-            for (let i = 0; i < compareModelsResult['new'].length; i++) {
-                viewerSceneObjectsNewBeforeCompare[compareModelsResult['new'][i]] = Object.assign({}, viewer.scene.objects[compareModelsResult['new'][i]]);
-            }
-        }
 
-        window.objResult = objResult;
+    window.model.selected = false;
+    window.model2.selected = false;
 
-        highlightModelsDifference(objResult, isSideBySide);
-        createComparisonResultPopup();
-        viewer.scene.canvas.spinner.processes--;
-    },
-    function () {
-        viewer.scene.canvas.spinner.processes--;
-    });
-}
+    if (window.model && window.model.loadedVitroCompare && window.model.loadedVitroCompare[onModelASelected]) {
+        window.model.scene.off(window.model.loadedVitroCompare.onModelASelected);
+    }
 
-function getComparisonResultAddedItemsListElm(allItemsList) {
-    var cssClass = 'item-added';
-    return getComparisonResulItemsListElm(window.model2, compareModelsResult['new'], cssClass, allItemsList);
-}
+    if (window.model2 && window.model2.loadedVitroCompare && window.model2.loadedVitroCompare[onModelBSelected]) {
+        window.model2.scene.off(window.model2.loadedVitroCompare.onModelBSelected);
+    }
 
-function getComparisonResultRemovedItemsListElm(allItemsList) {
-    var cssClass = 'item-removed';
-    return getComparisonResulItemsListElm(window.model, compareModelsResult['old']['unique'], cssClass, allItemsList);
-}
-
-function getComparisonResulItemsListElm(sceneModel, resultData, cssClass, allItemsList) {
-    var itemsList = $('<ul class="list-items">');
-    for (var i = 0; i < resultData.length; i++) {
-        var objId = resultData[i].id;
-        var objName = resultData[i].name;
-        var objUuid = resultData[i].uuid;
-        var item = $('<li class="' + cssClass + '"><span class="name">' + objName + '</span><span class="props">' + ' [ ' + objUuid + ' ]' + '</span></li>');
-        item.data('objId', objId);
-        item.data('modelId', sceneModel.id);
-        item.on('click', function () {
-            goToObject($(this).data('modelId'), $(this).data('objId'));
-        });
-        allItemsList.append(item.clone(true));
-        itemsList.append(item);
+    if (entityB) {
+        entityB.selected = true;
     }
+    else if (objIdB) {
+        window.model2.scene.fire("vitroObjectsRequired", { model: window.model2, objectIds: [objIdB] });
 
-    return itemsList;
+        withObjectIds(window.model2, [objIdB], entity => { entity.selected = true }, undefined, onModelBSelected);
+    }
+
+    if (entity) {
+        entity.selected = true;
+    }
+    else if (objId) {
+        window.model.scene.fire("vitroObjectsRequired", { model: window.model, objectIds: [objId] });
+
+        withObjectIds(window.model, [objId], entity => { entity.selected = true }, undefined, onModelASelected);
+    }
+}
+
+
+function withObjectIdsByModel(sceneModel, dbObjIds, callback) {
+    let changed = false;
+    for (let i = 0, len = dbObjIds.length; i < len; i++) {
+        const id = dbObjIds[i];
+        let entity = sceneModel.objects[id];
+        if (entity) {
+            changed = callback(entity) || changed;
+        }
+    }
+    return changed;
 }
 
-function withObjects(sceneModel, dbObjs, callback) {
+function withObjectsByModel(sceneModel, dbObjs, callback) {
     let changed = false;
     for (let i = 0, len = dbObjs.length; i < len; i++) {
         const id = dbObjs[i].id;
@@ -3662,77 +4386,86 @@ function withObjects(sceneModel, dbObjs, callback) {
     return changed;
 }
 
-function colorizeArObject(sceneModel, dbObjs, color) {
-    withObjects(sceneModel, dbObjs, entity => {
+/*function colorizeArObject(arObjId, color) {
+    viewer.scene.setObjectsColorized(arObjId, color);
+}*/
+
+
+function colorizeArObjectByModel(model, dbObjs, color) {
+    withObjectsByModel(model, dbObjs, entity => {
         entity.colorize = color;
     });
 }
 
+function withObjectIds(sceneModel, dbObjIds, callback, callbackOther, propertyName) {
+    let changed = false;
+
+    if (callbackOther) {
+        sceneModel._entityList.forEach(entity => {
+            callbackOther(entity);
+        });
+    }
+    if (dbObjIds && dbObjIds.length) {
+        withObjectIdsByModel(sceneModel, dbObjIds, entity => {
+            callback(entity);
+        });
+    }
+
+    if ((!model.largeModel) && ((dbObjIds && dbObjIds.length) || callbackOther)) {
+        if (!sceneModel.loadedVitroCompare) {
+            sceneModel.loadedVitroCompare = {};
+        }
+
+        sceneModel.loadedVitroCompare[propertyName] = sceneModel.scene.on("modelLoaded", (modelId) => {
+            const model = sceneModel.scene.models[modelId];
+            if (model && (model.largeModel == sceneModel || model == sceneModel)) {
+                if (callbackOther) {
+                    model._entityList.forEach(entity => {
+                        callbackOther(entity);
+                    });
+                }
+                if (dbObjIds && dbObjIds.length) {
+                    withObjectIdsByModel(model, dbObjIds, entity => {
+                        callback(entity);
+                    });
+                }
+            }
+        });
+    }
+
+    return changed;
+}
+
 function highlightArObject(sceneModel, dbObjs, highlighted) {
-    withObjects(sceneModel, dbObjs, entity => {
+    withObjectsByModel(sceneModel, dbObjs, entity => {
         entity.highlighted = highlighted;
     });
 }
 
 function setOpacityArObject(sceneModel, dbObjs, opacity) {
-    withObjects(sceneModel, dbObjs, entity => {
+    withObjectsByModel(sceneModel, dbObjs, entity => {
         entity.opacity = opacity;
     });
 }
 
 function setVisibilityArObject(sceneModel, dbObjs, visible) {
-    withObjects(sceneModel, dbObjs, entity => {
+    withObjectsByModel(sceneModel, dbObjs, entity => {
         entity.visible = visible;
     });
 }
 
-function goToObject(modelId, objId) {
-    const scene = viewer.scene;
-    const sceneModel = scene.models[modelId];
-    var entity = sceneModel.objects[objId];
-
-    window.model.selected = false;
-    window.model2.selected = false;
-
-    if (entity) {
-        entity.selected = true;
-        viewer.cameraFlight.flyTo(entity);
-    }
-}
-
 function doCompare() {
-    const versionA = compareObjList.modelAVersion;
     const versionB = compareObjList.modelBVersion;
-
-    BIMCommon.GetFileItem(context.file.id, versionB, function (modelId) {
-
-        context.getItem(modelId).then(item => {
-            var filePath = context.getFilePath(item.id);
-            var settings = {
-                id: Date.now(),
-                src: filePath,
-                edges: true,
-                performance: true,
-                position: [0, 0, 0]
-            };
-
-            if (isCompareSideBySide) {
-                settings.position = [-55, 0, 0];
-            }
-
+    const itemId = context.file.id;
+    BIMCommon.GetFileItem(itemId, versionB, function (modelId) {
+        context.getItem(modelId).then(itemAttach => {
             BIMCommon.FileCompareVersion = versionB;
-            window.model2 = xktLoader.load(settings);
-            window.model2.on('loaded', () => {
-                var vitroModelLoader = new VitroXKTLoaderPlugin(viewer);
 
-                window.model2.SmallSceneLoader = vitroModelLoader;
-                vitroModelLoader.version = BIMCommon.FileCompareVersion;
-                vitroModelLoader.startSmallLoad = true;
-                vitroModelLoader.position = settings.position;
+            const filePath = context.getFilePath(itemAttach.id);
+            const fileName = context.file.fieldValueMap?.name;
+            const model = new BIMCommon.VitroModel(itemId, versionB, filePath, fileName);
 
-                viewer.scene.canvas.spinner.processes++;
-                doCompareModels(isCompareSideBySide);
-            });
+            loadModel(model);
         })
 
     }, function () {
@@ -3740,464 +4473,703 @@ function doCompare() {
     });
 }
 
-
-function doRemoveComparison() {
-    if (model2) {
-        model2.destroy();
-        window.model2.SmallSceneLoader.startSmallLoad = false;
-        window.model2.SmallSceneLoader.deleteModels();
-        window.model2.SmallSceneLoader.destroy();
+function areEqual(arr1, arr2) {
+    if (arr1.length !== arr2.length) return false;
+    for (let i = 0; i < arr1.length; i++) {
+        if (arr1[i] !== arr2[i]) return false;
     }
-    $('.comparison-popup-wrap').dialog("destroy");
-    restoreObjectColorsAfterCompare();
+    return true;
 }
 
+function onCameraSync(fromViewer, toViewer) {
+    fromViewer.camera.cameraSync =  fromViewer.camera.on("matrix", () => {
+        if (!areEqual(toViewer.camera.eye, fromViewer.camera.eye)) {
+            toViewer.camera.eye = fromViewer.camera.eye.slice();
+        }
+        if (!areEqual(toViewer.camera.look, fromViewer.camera.look)) {
+            toViewer.camera.look = fromViewer.camera.look.slice();
+        }
+        if (!areEqual(toViewer.camera.up, fromViewer.camera.up)) {
+            toViewer.camera.up = fromViewer.camera.up.slice();
+        }
+    });
+}
 
-function onAnnotationsMarkerClickedHandler(annotation) {
-    showNoteDesc(annotation.id);
-    if (annotation.getLabelShown()) {
-        removeFromNotesDescriptionVisibleList(annotation.id);
-    } else {
-        addToNotesDescriptionVisibleList(annotation.id);
-    }
-    annotation.occludable = false;
-    annotation.setLabelShown(!annotation.getLabelShown());
-    viewer.cameraFlight.flyTo(annotation);
+
+function offSyncCamera(viewer) {
+    viewer.camera.off(viewer.camera.cameraSync);
 }
 
-function doGetNoteOptions(noteId, creator, pickResult, glyph, title, description, imageSrc, bgColor) {
-    var options = {
-        id: noteId,
-        creator: creator,
-        pickResult: pickResult,
-        worldPos: pickResult.worldPos,
-        eye: viewer.camera.eye, // need for camera fly on sidebar click
-        look: viewer.camera.look,  // need for camera fly on sidebar click
-        up: viewer.camera.up,  // need for camera fly on sidebar click
-        occludable: false,
-        markerShown: true,
-        labelShown: false,
-        version: fileVersion,
-        fileVersionPath: fileVersionPath,
-        values: {
-            glyph: glyph,
-            title: title,
-            description: description,
-            markerBGColor: bgColor,
-            imageSrc: imageSrc
-        }
-    };
+function loadModel(vitroModel) {
+    let xktCompareLoader;
 
-    if (pickResult.entity && pickResult.entity.id) {
-        options.entity = pickResult.entity.id;
+    if (isCompareSideBySide) {
+        viewerCompare = new Viewer({
+            canvasId: "xeokitCompareCanvas",
+            transparent: true
+        });
+
+        setViewerSetting(viewerCompare);
+        setCameraSetting(viewerCompare);
+
+        xktCompareLoader = new XKTLoaderPlugin(viewerCompare);
+        initFastNavPlugin(viewerCompare);
+
+        const left = document.getElementById("xeokitCanvas");
+        const right = document.getElementById("xeokitCompareCanvas");
+
+        left.style.width = "50%";
+        right.style.width = "50%";
+        right.style.display = "block";
+
+        onCameraSync(viewer, viewerCompare);
+        onCameraSync(viewerCompare, viewer);
+    }
+    else {
+        viewerCompare = viewer;
+        xktCompareLoader = xktLoader;
     }
 
-    return options;
-}
+    window.model2 = doLoadModel(viewerCompare, xktCompareLoader, vitroModel, true);
+    window.model2.ModelList = [];
+    window.model2.ModelList.push(vitroModel);
 
-function bindToggleNotesDescription() {
-    $(document).on('click', '#btnToggleNotesDescription', function () {
-        $(this).toggleClass('show');
-        if ($(this).hasClass('show')) {
-            hideNotesDescription();
-        } else {
-            showNotesDescription();
+    window.model2.on('loaded', () => {
+        if (isCompareSideBySide) {
+            viewer.scene.fire("reloadSmallScenes");
         }
     });
+
+    doCompareModels(isCompareSideBySide);
 }
 
-function hideNotesDescription() {
-    if (annotations?.annotations) {
-        $.each(annotations.annotations, function () {
-            this.setLabelShown(false);
-        });
+//------------------------------------------------------------------------------------------------------------------
+// compare property and geometry
+//------------------------------------------------------------------------------------------------------------------
+
+function comparePropertyAndGeometrySync(uuid, type) {
+    let propertyResult = null;
+    let geometryResult = null;
+
+    viewer.scene.canvas.spinner.processes++;
+
+    if (type.property) {
+        BIMModel.CompareProperty(null, uuid, function (result) {
+            propertyResult = result;
+        }, function () { }, false); // async: false
     }
-    clearNotesDesriptionVisibleList();
-}
 
-function addToNotesDescriptionVisibleList(itemKey) {
-    if (!notesDescriptionVisibleList.hasOwnProperty(itemKey)) {
-        notesDescriptionVisibleList[itemKey] = true;
+    if (type.geometry) {
+        BIMModel.CompareGeometry(null, uuid, function (result) {
+            geometryResult = result;
+        }, function () { }, false); // async: false
     }
-}
 
-function removeFromNotesDescriptionVisibleList(itemKey) {
-    if (notesDescriptionVisibleList.hasOwnProperty(itemKey)) {
-        delete notesDescriptionVisibleList[itemKey];
+    viewer.scene.canvas.spinner.processes--;
+
+    const popupWrap = createPopupContainer();
+
+    const propertyGroupListWrap = $('<div class="vitro-property-group-list-wrap"/>');
+
+    if (propertyResult) {
+        const groupsContainer = createGroupsContainer(propertyResult);
+        propertyGroupListWrap.append(groupsContainer);
     }
-}
 
-function clearNotesDesriptionVisibleList() {
-    notesDescriptionVisibleList = {};
+    if (geometryResult) {
+        const geometryContainer = createGeometryBlock(geometryResult);
+        propertyGroupListWrap.append(geometryContainer);
+    }
+
+    popupWrap.append(propertyGroupListWrap);    
+
+    //const propertyComparePopupFooter = createPropertyComparisonPopupFooter();    
+
+    //popupWrap.append(propertyComparePopupFooter);
+
+    var compareElementTitle = document.webL10n.get('compare_element_label');
+
+    initPropertyComparisonPopup(popupWrap, compareElementTitle);
 }
 
-function isNoteDescriptionVisible(itemKey) {
-    return notesDescriptionVisibleList.hasOwnProperty(itemKey);
+function createPropertyComparisonPopupFooter() {
+    const propertyComparePopupFooter = $('<div class="vitro-property-compare-popup-footer"/>');
+    const modelAName = $('<div class="vitro-model-a-name"/>');
+    const modelBName = $('<div class="vitro-model-b-name"/>');
+
+    const modelAInfo = getModelInfo(window.model);
+    const modelBInfo = getModelInfo(window.model2);
+
+    modelAName.append(modelAInfo);
+    modelBName.append(modelBInfo);
+    propertyComparePopupFooter.append(modelAName);
+    propertyComparePopupFooter.append(modelBName);
+
+    return propertyComparePopupFooter;
 }
 
-function showNotesDescription() {
-    if (annotations?.annotations) {
-        $.each(annotations.annotations, function () {
-            addToNotesDescriptionVisibleList(this.id);
-            this.occludable = false;
-            this.setLabelShown(true);
-        });
+function createGeometryBlock(geometryDiff) {
+    const geometryContainer = $('<div class="property-groups-container property-groups-container-geometry"/>');
+
+    if (geometryDiff) {
+        // --- offset ---
+        const offsetProps = [];
+        if (geometryDiff.offset) {
+            if (geometryDiff.offset.X !== 0) {
+                offsetProps.push({ name: 'X', value: geometryDiff.offset.X.toFixed(6) });
+            }
+            if (geometryDiff.offset.Y !== 0) {
+                offsetProps.push({ name: 'Y', value: geometryDiff.offset.Y.toFixed(6) });
+            }
+            if (geometryDiff.offset.Z !== 0) {
+                offsetProps.push({ name: 'Z', value: geometryDiff.offset.Z.toFixed(6) });
+            }
+        }
+
+        if (offsetProps.length > 0) {
+            const offsetGroupHeaderLabel = document.webL10n.get('offset_element_label');
+            const offsetGroup = getGeometryGroup(offsetGroupHeaderLabel, offsetProps);
+
+            geometryContainer.append(offsetGroup);
+        }
+
+        // --- Size ---
+        const sizeProps = [];
+        if (geometryDiff.size) {
+            if (geometryDiff.size.X !== 0) {
+                sizeProps.push({ name: 'X', value: geometryDiff.size.X.toFixed(6) });
+            }
+            if (geometryDiff.size.Y !== 0) {
+                sizeProps.push({ name: 'Y', value: geometryDiff.size.Y.toFixed(6) });
+            }
+            if (geometryDiff.size.Z !== 0) {
+                sizeProps.push({ name: 'Z', value: geometryDiff.size.Z.toFixed(6) });
+            }
+        }
+
+        if (sizeProps.length > 0) {
+            const sizeGroupHeaderLabel = document.webL10n.get('size_element_label');
+            const sizeGroup = getGeometryGroup(sizeGroupHeaderLabel, sizeProps);
+            geometryContainer.append(sizeGroup);
+        }
     }
+
+    return geometryContainer;
 }
 
-function initIssueDetailResizable() {
-    initResizable($('#issueDetail'), 'w', PANE_RIGHT_MIN_WIDTH, onIssueDetailResizeHandler, onIssueDetailResizeEndHandler);
+function getGeometryGroup(groupHeaderLabel, propList) {
+    const group = $('<div class="property-group"/>');
+    const groupHeader = getGroupTitle(groupHeaderLabel);
+    group.append(groupHeader);
+    const propListWrap = $('<div class="property-list"/>');
+    propList.forEach(prop => {
+        propListWrap.append('<div class="property-item"><span class="property-name">' + prop.name + '</span> <span class="property-value">' + prop.value + '</span></div>');
+    });
+    group.append(propListWrap);
+
+    return group;
 }
 
-function addToTreeView(model, sceneModelId) {
-    if (treeView && treeView._rootNodes.length > 0) {
-        const callback = (metaObjects, status, jqXHR) => {
-            const metaModel = viewer.metaScene.metaModels[sceneModelId];
+function getGroupTitle(label) {
+    const sizeGroupHeader = $(`<div class="property-group-title">${label}</div>`);
+    sizeGroupHeader.on('click', onClickGroupHeader);
+    return sizeGroupHeader;
+}
 
-            treeView.addObjectsToMetaModel(metaObjects, metaModel);
-            treeView.addModel(sceneModelId);
+function createPropertyComparisonWindow(compareResult) {
+    const popupWrap = createPopupContainer();
+    const groupsContainer = createGroupsContainer(compareResult);
 
-            viewer.scene.canvas.spinner.processes--;
-        };
+    popupWrap.append(groupsContainer);
+    initPropertyComparisonPopup(popupWrap, 'Сравнение свойств');
+}
 
-        const error = () => {
-            viewer.scene.canvas.spinner.processes--;
-        };
+function createPopupContainer() {
+    return $('<div class="property-comparison-popup-wrap"/>');
+}
 
-        BIMModel.GetElementChildList(model.FileItemId, model.FileVersion, "-1", false, null, callback, error);
+function createGroupsContainer(compareResult) {
+    const groupsContainer = $('<div class="property-groups-container"/>');
+    const groupedProperties = groupAllProperties(compareResult);
+
+    for (const groupName in groupedProperties) {
+        const groupElement = createGroupElement(groupName, groupedProperties[groupName], compareResult);
+        groupsContainer.append(groupElement);
     }
+
+    return groupsContainer;
 }
 
-function bindBtnAddModel() {
-    $(document).on('click', '#btnAddModel', function () {
-        context.showItemSelectDialog().then(itemIdList => {
-            itemIdList.forEach(itemId =>
-            {
-                BIMCommon.GetFileItem(itemId, undefined, function (modelId) {
-                    context.getItem(modelId).then(itemAttach => {
+function groupAllProperties(compareResult) {
+    const allProperties = new Set();
 
-                        context.getItem(itemId).then(item =>
-                        {
-                            context.addItem(item);
-                        });
+    addPropertiesFromSection(compareResult[del], allProperties);
+    addPropertiesFromSection(compareResult[add], allProperties);
+    addChangedProperties(compareResult[change][property], allProperties);
 
-                        const filePath = context.getFilePath(itemAttach.id);
-                        const fileName = context.file.fieldValueMap?.name;
-                        const model = new BIMCommon.VitroModel(itemId, undefined, filePath, fileName);
+    return groupPropertiesByName(allProperties);
+}
 
-                        BIMCommon.ModelList.push(model);
+function addPropertiesFromSection(properties, allProperties) {
+    if (!properties) return;
 
-                        const sceneModel = doLoadModel(model, false);
-                        addToTreeView(model, sceneModel.id);
+    properties.forEach(prop => {
+        allProperties.add(`${prop.groupName}|${prop.name}`);
+    });
+}
 
-                        $('#btnToggleCompare').hide();
-                    })
+function addChangedProperties(changedProperties, allProperties) {
+    if (!changedProperties) return;
 
-                }, function () {
-                    alert("The file is being processed");
-        });
+    changedProperties.forEach(pair => {
+        allProperties.add(`${pair.a.groupName}|${pair.a.name}`);
+    });
+}
 
-            })
+function groupPropertiesByName(allProperties) {
+    const grouped = {};
+    allProperties.forEach(propKey => {
+        const [groupName, propName] = propKey.split('|');
+        if (!grouped[groupName]) grouped[groupName] = [];
+        if (!grouped[groupName].includes(propName)) {
+            grouped[groupName].push(propName);
+        }
     });
+    return grouped;
+}
+
+function createGroupElement(groupName, properties, compareResult) {
+    const groupHeader = createGroupHeader(groupName);
+    const groupElement = $('<div class="property-group"/>').append(groupHeader);
+
+    const propertiesList = $('<div class="properties-list"/>');
+
+    properties.forEach(propName => {
+        propertiesList.append(createPropertyElement(propName, groupName, compareResult));
     });
+
+    return groupElement.append(propertiesList);
 }
 
-function bindUpdateDocumentMarkupList() {
-    window.addEventListener(EVENT_SEARCH_ISSUE_LIST, updateDocumentMarkupList);
+function createGroupHeader(groupName) {
+    const curentGroupName = groupName || document.webL10n.get('ungrouped_label');
+    const groupHeader = $(`<div class="group-header">${curentGroupName}</div>`);
+
+    groupHeader.on('click', onClickGroupHeader);
+    return groupHeader;
 }
 
-function updateDocumentMarkupList(e) {
-    annotations.clear();
-    if (e.detail.issueList && e.detail.issueList.length) {
-        e.detail.issueList.map(issue => {
-            let data = getMarkupData(issue.item);
-            data.occludable = false;
-            annotations.createAnnotation(data);
-        });
-    }
+function onClickGroupHeader(e) {
+    $(this).toggleClass('collapsed');
 }
 
-bindUpdateDocumentMarkupList();
+function createPropertyElement(propName, groupName, compareResult) {
+    const propElement = $('<div class="property-item"/>')
+        .append(`<div class="property-name">${propName}</div>`);
 
-function highlightSidebarNote(noteId) {
-    var noteWrap = $('#vitro-issue-tile-' + noteId);
+    const modelAInfo = getModelInfo(window.model);
+    const modelBInfo = getModelInfo(window.model2);
 
-    if (!noteWrap.position()) {
-        setTimeout(() => {
-            highlightSidebarNote(noteId);
-        }, 500);
+    const valueA = findProperty(compareResult, propName, groupName, 'a');
+    const valueB = findProperty(compareResult, propName, groupName, 'b');
 
-        return;
-    }
+    propElement.append(
+        createValueElement(modelAInfo, valueA, 'model-a'),
+        createValueElement(modelBInfo, valueB, 'model-b')
+    );
 
-    selectIssueListItem(noteId);
+    return propElement;
 }
 
-function selectIssueListItem(itemId) {
-    const event = new CustomEvent(EVENT_ISSUE_LIST_SELECT_ITEM, { detail: { itemId: itemId } });
-    window.dispatchEvent(event);
+function getModelInfo(model) {
+    return `<span>${model.ModelList[0].FileName}</span><span>[v${model.ModelList[0].FileVersion}]</span>`;
 }
 
-function setSettings(settings) {
-    const settingsString = settings ? JSON.stringify(settings) : '';
-    context.setSettingsToLocalStorage(settingsString);
+function findProperty(compareResult, propName, groupName, modelType) {
+    if (modelType === 'a') {
+        return findInDeleteOrChange(compareResult, propName, groupName, 'a');
+    } else {
+        return findInAddOrChange(compareResult, propName, groupName, 'b');
+    }
 }
 
-function getSettings() {
-    const settings = context.getSettingsFromLocalStorage();
-    return settings ? JSON.parse(settings) : {};
+function findInDeleteOrChange(compareResult, propName, groupName, modelType) {
+    const inDelete = compareResult[del]?.find(
+        p => p.name === propName && p.groupName === groupName
+    );
+    if (inDelete) return inDelete;
+
+    const inChange = compareResult[change]?.[property]?.find(
+        pair => pair[modelType].name === propName && pair[modelType].groupName === groupName
+    );
+    return inChange ? inChange[modelType] : null;
 }
 
-function setPaneRightSettings(width) {
-    const settings = getSettings();
-    settings.rightPaneWidth = width;
-    setSettings(settings);
+function findInAddOrChange(compareResult, propName, groupName, modelType) {
+    const inAdd = compareResult[add]?.find(
+        p => p.name === propName && p.groupName === groupName
+    );
+    if (inAdd) return inAdd;
+    const inChange = compareResult[change]?.[property]?.find(
+        pair => pair[modelType].name === propName && pair[modelType].groupName === groupName
+    );
+    return inChange ? inChange[modelType] : null;
 }
 
-function setPaneLeftSettings(width) {
-    const settings = getSettings();
-    settings.leftPaneWidth = width;
-    setSettings(settings);
+function createValueElement(modelInfo, property, cssClass) {
+    const value = property ? getPropertyValue(property) : '-';
+    return $(`
+        <div class="property-value ${cssClass}">
+            <span class="model-name">${modelInfo}</span>
+            <span class="value">${value}</span>
+        </div>
+    `);
 }
 
-function initPaneWidth() {
-    const settings = getSettings();
-    setWidthPaneRight(settings.rightPaneWidth);
-    setWidthPaneLeft(settings.leftPaneWidth);
+function initPropertyComparisonPopup(popupWrap, title) {
+    const toolbarHeight = $('.toolbar').height();
+    const offsetLeft = 16 + 'px';
+    const offsetTop = 118 + 'px';
+
+    popupWrap.dialog({
+        title: title,
+        classes: { "ui-dialog": "ui-dialog-comparison-left" },
+        width: 506,
+        maxHeight: ($(window).height() - toolbarHeight),
+        height: 458,
+        position: { my: 'left top', at: 'left top', of: $('.canvas-wrap') },
+        open: function (event, ui) {
+            $('.ui-dialog-comparison-left').css('left', offsetLeft).css('top', offsetTop);
+        }
+    }).dialogExtend({
+        closable: true
+    });
 }
 
-function setWidthPaneRight(width) {
-    if (width) {
-        $('#sidebarWrap').width(width);
-        $('#issueDetail').width(width);
-        $('#propInspector').width(width);
+function createCompareModelLabel() {
+    if (isCompareModeSideBySide()) {
+        removeCompareLabelModeOneOverOne();
+        createCompareModelLabelSideBySide();
+    } else {
+        removeCompareLabelModeSideBySide();
+        createCompareModelLabelOneOverOne();
     }
 }
 
-function setWidthPaneLeft(width) {
-    if (width) {
-        $('#treeViewContainerWrap').width(width);
-        $('#storeyViewsSidebar').width(width);
-    }
+function isCompareModeSideBySide() {
+    return $('#btnCompareSideBySide').hasClass('toggled');
 }
 
-function setPositionSectionPlanesOverviewCanvas(width) {
-    $('#sectionPlanesOverviewCanvas').css('right', width + 10);
+function createCompareModelLabelSideBySide() {
+    const compareLabelModelA = $('<div class="vitro-compare-label-model-a">');
+    const compareLabelModelB = $('<div class="vitro-compare-label-model-b">');
+    const modelAInfo = getModelInfo(window.model);
+    const modelBInfo = getModelInfo(window.model2);
+    compareLabelModelA.append(modelAInfo);
+    compareLabelModelB.append(modelBInfo);
+    $('.canvas-wrap').append(compareLabelModelA).append(compareLabelModelB);
 }
 
-function setPositionNavCubeCanvas(width) {
-    $('#navCubeCanvas').css('right', width + 10);
+function createCompareModelLabelOneOverOne() {
+    const compareLabel = $('<div class="vitro-compare-label-one-over-one">');
+    const modelAInfo = $('<span/>').append(getModelInfo(window.model));
+    const modelBInfo = $('<span/>').append(getModelInfo(window.model2));
+    const sep = $('<span class="vitro-separator">/')
+    compareLabel.append(modelAInfo).append(sep).append(modelBInfo);
+    $('.canvas-wrap').append(compareLabel);
 }
 
-function initResizable(element, handles, minWidth, resizeHadler, onResizeEndHadler) {
-    element.resizable({
-        handles: handles,
-        minWidth: minWidth,
-        resize: function (event, ui) {
-            if (typeof resizeHadler === 'function') {
-                resizeHadler(element.width());
-            }
-        },
-        stop: function (event, ui) {
-            if (typeof onResizeEndHadler === 'function') {
-                onResizeEndHadler(event, ui);
-            }
-        }
+function createSearch() {
+    const searchWrap = $('<div class="vitro-search-wrap"/>');
+    const label = "Поиск";
+    const searchInput = $('<input id="compareSearch" class="vitro-search-input" placeholder="' + label +'"/>');
+    searchWrap.append(searchInput);
+
+    let searchTimer = null;
+    searchInput.on('input', function () {
+        clearTimeout(searchTimer);
+        searchTimer = setTimeout(() => {
+            reloadCompareWithFilters(true);
+        }, 300);
     });
+
+    return searchWrap;
 }
 
-function onIssueDetailResizeHandler(width) {
-    onPaneRightResizeHandler(width);
-};
+function createComparisonResultPopupTitle(popupTitle) {
+    const title = $('<div class="vitro-compare-popup-title"/>');
+    const label = $('<span class="vitro-title"/>').text(popupTitle);
+    //const btn = $('<a id="btnDownloadCompareResult" class="vitro-button"/>');// TODO ADD
+    //btn.on('click', onDownloadCompareResult);
+    title.append(label);
+    //title.append(btn);
 
-function onPaneRightResizeHandler(width) {
-    setPositionNavCubeCanvas(width);
-    setPositionSectionPlanesOverviewCanvas(width);
+    return title;
 }
 
-function onIssueDetailResizeEndHandler(event, ui) {
-    $('#propInspector').width(ui.size.width);
-    $('#sidebarWrap').width(ui.size.width);
-    setPaneRightSettings(ui.size.width);
+function onDownloadCompareResult() {
+    // TODO 
+    alert('Download compare result'); // TODO - remove
 }
 
-function initTreeViewPanelResizable() {
-    initResizable($('#treeViewContainerWrap'), 'e', PANE_LEFT_MIN_WIDTH, false, onTreeViewResizeEndHandler);
+function removeCompareLabel() {
+    removeCompareLabelModeSideBySide();
+    removeCompareLabelModeOneOverOne();
 }
 
-function onTreeViewResizeEndHandler(event, ui) {
-    const width = ui.size.width - $('#treeViewContainerWrap > .ui-resizable-handle').width();
-    $('#storeyViewsSidebar').width(width);
-    setPaneLeftSettings(width);
+function removeCompareLabelModeSideBySide() {
+    $('.vitro-compare-label-model-a').remove();
+    $('.vitro-compare-label-model-b').remove();
 }
 
-function initStoreyViewResizable() {
-    initResizable($('#storeyViewsSidebar'), 'e', PANE_LEFT_MIN_WIDTH, false, onStoreyViewResizeEndHandler);
+function removeCompareLabelModeOneOverOne() {
+    $('.vitro-compare-label-one-over-one').remove();
 }
 
-function onStoreyViewResizeEndHandler(event, ui) {
-    $('#treeViewContainerWrap').width(ui.size.width);
-    setPaneLeftSettings(ui.size.width);
+function onResizeCompareDialog() {
+    $('.canvas-wrap').width($(window).width()-$('.ui-dialog-comparison').outerWidth());
 }
 
-function initPropertySetsResizable() {
-    initResizable($('#propInspector'), 'w', PANE_RIGHT_MIN_WIDTH, onPropsInspectorResizeHandler, onPropsInspectorResizeEndHandler);
+function resetCanvasWrapWidth() {
+    $('.canvas-wrap').css("width", "100%");
 }
 
-function onPropsInspectorResizeHandler(width) {
-    onPaneRightResizeHandler(width);
-};
+function onWindowResizeCompareDialog() {
+    const dialog = $('.ui-dialog-comparison');
+    const canvasNewWidth = $(window).width() - dialog.outerWidth();
+    dialog.css('left', canvasNewWidth);
+    $('.canvas-wrap').width(canvasNewWidth);
+}
 
-function onPropsInspectorResizeEndHandler(event, ui) {
-    $('#issueDetail').width(ui.size.width);
-    $('#sidebarWrap').width(ui.size.width);
-    setPaneRightSettings(ui.size.width);
+function selectListItem(itemElm) {
+    itemElm.parent().find('.' + CSS_CLASS_SELECTED).removeClass(CSS_CLASS_SELECTED);
+    itemElm.addClass(CSS_CLASS_SELECTED);
 }
 
-function initSidebarResizable() {
-    initResizable($('#sidebarWrap'), 'w', PANE_RIGHT_MIN_WIDTH, onIssueListResizeHandler, onIssueListResizeEndHandler);
+function bindOnClickBtnCompareFilterHandler($btn) {
+    $btn.on('click', function () {
+        $(this).toggleClass(CSS_CLASS_SELECTED);
+        reloadCompareWithFilters(true);
+    });
 }
 
-function onIssueListResizeHandler(width) {
-    onPaneRightResizeHandler(width);
+function onClickBtnCompareFilterHandler(itemElm) {
+    itemElm.toggleClass(CSS_CLASS_SELECTED);
+    const changeTypeList = getChangeTypeList();
+    //if ($('#compareList').hasClass(CSS_CLASS_ACTIVE)) {
+        const compareListContent = getCompareListContent(compareModelsResult, changeTypeList);
+        $('#compareListContent').empty().append(compareListContent);
+    //} else {
+        // TODO - Tree
+        const event = new CustomEvent(EVENT_FILTER_CHANGE_TYPE, { detail: { changeTypeList: changeTypeList } });
+        window.dispatchEvent(event);
+    //}
 }
 
-function onIssueListResizeEndHandler(event, ui) {
-    $('#issueDetail').width(ui.size.width);
-    $('#propInspector').width(ui.size.width);
-    setPaneRightSettings(ui.size.width);
+function getChangeTypeList() {
+    const changeListType = [];
+    if ($('#btnCompareFilterAdd').hasClass(CSS_CLASS_SELECTED)) {
+        changeListType.push(add);
+    }
+    if ($('#btnCompareFilterDel').hasClass(CSS_CLASS_SELECTED)) {
+        changeListType.push(del);
+    }
+    if ($('#btnCompareFilterChange').hasClass(CSS_CLASS_SELECTED)) {
+        changeListType.push(change);
+    }
+
+    return changeListType;
 }
 
-function getPaneRightPosition(width) {
-    return ($('body').width() - width);
+function getCompareListContent(compareModelsResult, changeTypeList) {
+    let compareList = [];
+    if (isChangeContentTypeAll(changeTypeList) || changeTypeList?.includes(add)) {
+        const addedItemsList = getComparisonResultAddedItemsListElm(compareModelsResult);
+        compareList = [...addedItemsList];
+    }
+
+    if (isChangeContentTypeAll(changeTypeList) || changeTypeList?.includes(del)) {
+        const removedItemsList = getComparisonResultRemovedItemsListElm(compareModelsResult);
+        compareList = [...compareList, ...removedItemsList];
+    }
+
+    if (isChangeContentTypeAll(changeTypeList) || changeTypeList?.includes(change)) {
+        const changedItemsList = getComparisonResultChangedItemsListElm(compareModelsResult);
+        compareList = [...compareList, ...changedItemsList];
+    }
+
+    return compareList;
 }
 
-function showPropInspector() {
-    $('#propInspector').show();
-    const width = $('#propInspector').width();
-    setPositionNavCubeCanvas(width);
-    setPositionSectionPlanesOverviewCanvas(width);
-}                        
-//------------------------------------------------------------------------------------------------------------------
-// Do action wherever we click on an object
-//------------------------------------------------------------------------------------------------------------------
+function isChangeContentTypeAll(changeTypeList) {
+    return !changeTypeList?.length || (changeTypeList.includes(add) && changeTypeList.includes(del) && changeTypeList.includes(change));
+}
 
-viewer.scene.input.on("mouseclicked", (coords) => {
 
-    const pickResult = viewer.scene.pick({
-        canvasPos: coords,
-        pickSurface: true,  // <<------ This causes picking to find the intersection point on the entity
-        //includeEntities: true,
-    });
 
-    if (pickResult) {
-        if ($('#btnCreateNotes').hasClass('toggled')) {
-            createAnnotationByClick(pickResult);
-        }
-        createSectionPlaneByClick(pickResult);
-    }
-});
+function onComparisonResulItemClick(data) {
+    selectObject(data.idA, data.idB);
+    goToObject(data.idA, data.idB);
+    $('.property-comparison-popup-wrap').dialog("destroy");
 
-//------------------------------------------------------------------------------------------------------------------
-// Show Object Properties on Click
-//------------------------------------------------------------------------------------------------------------------
-viewer.cameraControl.on("picked", (pickResult) => {
-    if (!pickResult.entity) {
-        return;
+    if (data.changeType === 'change') {
+        comparePropertyAndGeometrySync(data.uuid, {
+            property: data.isPropertyChanged,
+            geometry: data.isGeometryChanged
+        });
     }
+}
 
-    if (pickResult.entity.id && !$('#btnCreateNotes').hasClass('toggled')) {
-        showPropertyInspector(pickResult);
+function onTreeItemSelect(e) {
+    const data = compareModelsResult?.find(item => item.uuid === e.detail.itemId);
+    if (data) {
+        onComparisonResulItemClick(data);
     }
-});
+}
 
-/*viewer.cameraControl.on("pickedNothing", () => {
-    return false;
-});*/
+function bindOnTreeItemSelect() {
+    window.addEventListener(EVENT_COMPARE_TREE_ITEM_SLECT, onTreeItemSelect);
+}
 
+//------------------------------------------------------------------------------------------------------------------
+// init
 //------------------------------------------------------------------------------------------------------------------
 
-window.viewer = viewer;
-
-let version = context.fileVersionList.find(x => x.id === context.versionId);
-let versionStr = version ? version.name : null;
+bindBtnCompareOneOverOne();
+bindBtnCompareSideBySide();
+bindBtnClearComparison();
 
-BIMCommon.GetFileItem(context.file.id, versionStr, function (modelId) {
+initCompare();
+bindSelectList();
+bindOnTreeItemSelect();
 
-    context.getItem(modelId).then(item => {
-        var filePath = context.getFilePath(item.id);
-        var fileName = context.file.fieldValueMap?.name;
+let compareFilters = {
+    IsGeometry: null,
+    SearchTerm: "",
+    ChangeTypeList: [],
+    Skip: 0,
+    Take: 500
+};
 
-        document.title += " - " + fileName;
-        fileVersion = '';
-        fileVersionPath = filePath;
-        hideXeokitSpinner();
+function getServerFiltersFromUI() {
+    const changeTypes = [];
 
-        const model = new BIMCommon.VitroModel(context.file.id, versionStr, filePath, fileName);
+    if ($('#btnCompareFilterAdd').hasClass(CSS_CLASS_SELECTED)) changeTypes.push(add);
+    if ($('#btnCompareFilterDel').hasClass(CSS_CLASS_SELECTED)) changeTypes.push(del);
+    if ($('#btnCompareFilterChange').hasClass(CSS_CLASS_SELECTED)) changeTypes.push(change);
 
-        BIMCommon.ModelList.push(model);
+    if (changeTypes.length == 0) {
+        $('#btnCompareFilterAdd').addClass(CSS_CLASS_SELECTED);
+        $('#btnCompareFilterDel').addClass(CSS_CLASS_SELECTED);
+        $('#btnCompareFilterChange').addClass(CSS_CLASS_SELECTED);
 
-        doLoadModel(model, true);
-    })
-    
-}, function () {
-    alert("The file is being processed");
-});
+        changeTypes.push(add)
+        changeTypes.push(del)
+        changeTypes.push(change)
+    }
 
-function init() {
-    bindBtnToggleSidebarNotes();
-    bindSidebarNotesClose();
-    bindDeleteNoteEventHandler();
+    const searchTerm = ($('#compareSearch').val() || '').trim();
 
-    bindBtnToggleSidebarTreeView();
+    compareFilters.ChangeTypeList = changeTypes;
+    compareFilters.SearchTerm = searchTerm || "";
 
-    fixNotesTextareaBlur();
+    return compareFilters;
+}
 
-    bindBtnToggleCreateNotes();
-    bindBtnCreateSectionPlan();
-    bindBtnClearSectionPlan();
-    bindBtnToggleSectionPlan();
-    bindToggleNotes();
-    bindToggleNotesDescription();
+function runCompare(opts) {
+    var filters = opts.filters || getServerFiltersFromUI();
+    var sideBySide = !!opts.sideBySide;
+    var createWindow = !!opts.createWindow;
+    var resetSkip = (typeof opts.resetSkip === 'undefined') ? true : !!opts.resetSkip;
 
-    bindBtnCreateAngleMeasurements();
-    bindBtnToggleAngleMeasurements();
+    if (resetSkip) {
+        compareFilters.Skip = 0;
+    }
+    if (createWindow) {
+        createComparisonResultPopupWindow();
+    }
 
-    initTreeViewPanelResizable();
-    initSidebarResizable();
-    initIssueDetailResizable();
-    initStoreyViewResizable();
-    initPaneWidth();
+    viewer.scene.canvas.spinner.processes++;
 
-    bindBtnToggleSidebarStoreyViews();
+    BIMModel.CompareElementId(
+        function (idList) {
+            try {
+                restoreObjectColorsAfterCompare();
+                highlightModelsDifference(idList, sideBySide);
+            } finally {
+                viewer.scene.canvas.spinner.processes--;
+            }
+        },
+        function () {
+            viewer.scene.canvas.spinner.processes--;
+        },
+        filters,
+        true
+    );
 
-    bindBtnSaveBCFViewpointJSON();
-    bindBtnLoadBCFViewpointJSON();
+    viewer.scene.canvas.spinner.processes++;
 
-    bindBtnCreateDistanceMeasurements();
-    bindBtnToggleDistanceMeasurements();
+    BIMModel.Compare(
+        function (data) {
+            try {
+                var incoming = Array.isArray(data) ? data : [];
+                if (compareFilters.Skip > 0 && Array.isArray(compareModelsResult)) {
+                    compareModelsResult = (compareModelsResult || []).concat(incoming);
+                } else {
+                    compareModelsResult = incoming;
+                }
 
-    bindPropInspectorClose();
-    initPropertySetsResizable();
+                fillComparisonResultList(compareModelsResult);
+                updateComparisonListAndTree(compareModelsResult);
 
-    bindBtnCompareOneOverOne();
-    bindBtnCompareSideBySide();
-    bindBtnClearComparison();
+                if (typeof createCompareModelLabel === 'function') {
+                    createCompareModelLabel();
+                }
+            } finally {
+                viewer.scene.canvas.spinner.processes--;
+            }
+        },
+        function () {
+            viewer.scene.canvas.spinner.processes--;
+        },
+        filters,
+        true
+    );
+}
 
-    bindBtnAddModel();
 
-    initCompare();
-    bindSelectList();
+function reloadCompareWithFilters(resetSkip) {
+    runCompare({
+        filters: getServerFiltersFromUI(),
+        sideBySide: !!isCompareSideBySide,
+        createWindow: false,
+        resetSkip: (typeof resetSkip === 'undefined') ? true : !!resetSkip
+    });
 }
 
-init();
+function attachCompareInfiniteScroll() {
+    const $list = $('#compareListContent');
+    if (!$list.length) return;
 
-var userLocale =
-    navigator.languages && navigator.languages.length
-        ? navigator.languages[0]
-        : navigator.language;
+    $list.off('scroll.vitroCompare').on('scroll.vitroCompare', function () {
+        const el = this;
+        const nearBottom = (el.scrollTop + el.clientHeight) >= (el.scrollHeight - 50);
+        if (nearBottom) {
+            // увеличиваем Skip и догружаем
+            compareFilters.Skip += compareFilters.Take;
+            reloadCompareWithFilters(false);
+        }
+    });
+}
 
-document.webL10n.setLanguage(userLocale, function () {
-    document.webL10n.translate();
-});
-}
+function updateComparisonListAndTree(data) {
+    // Список
+    const $list = $('#compareListContent');
+    if ($list.length) {
+        $list.empty().append(getCompareListContent(data));
+    }
+    // Дерево — если уже инициализировано
+    if ($('#compareTree').hasClass('uk-active') || $('#compareTreeContent').children().length) {
+        initCompareTreeView(data, getChangeTypeList());
+    }
+}}