@vitrosoftware/common-ui-ts 1.1.108 → 1.1.110

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vitrosoftware/common-ui-ts",
-    "version": "1.1.108",
+    "version": "1.1.110",
     "description": "vitro software common ui ts",
     "author": "",
     "license": "MIT",

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

@@ -2,6 +2,7 @@
 {
     FileItemId: undefined,
     FileVersion: undefined,
+    FileCompareVersion: undefined,
 
     GetFileItem: function (itemId, version, callback, error) {
         var webRelativeUrl = BIMCommon.CreateWebServerUrl();        
@@ -333,14 +334,16 @@
 
         var webRelativeUrl = BIMCommon.CreateWebServerUrl();
 
-        var obj = {};
-        obj.source = window.model1DataUrl;
-        obj.compared = window.model2DataUrl;
-        var jsonString = JSON.stringify(obj);
+        var paramObj = {};
+        paramObj.itemId = BIMCommon.FileItemId;
+        paramObj.version = BIMCommon.FileVersion;
+		paramObj.comparedVersion = BIMCommon.FileCompareVersion;
+
+        var jsonString = JSON.stringify(paramObj);
 
         $.ajax({
             type: "POST",
-            url: webRelativeUrl + "/_vti_bin/Vitro/Viewer/BIM/BIMWebService.svc/CompareModel",
+            url: webRelativeUrl + "/bimViewer/api/ModelElement/Compare",
             data: jsonString,
             contentType: "application/json; charset=utf-8",
             dataType: "json",

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.108';
+import { BIMModel, BIMCommon, BIMAnnotation } from '/resource/bimViewer/js/bim-viewer-models.js?version=1.1.110';
 
 import {
     Viewer, XKTLoaderPlugin, NavCubePlugin, SectionPlanesPlugin, math, BCFViewpointsPlugin, AnnotationsPlugin,
     ContextMenu, TreeViewPlugin, StoreyViewsPlugin, AngleMeasurementsPlugin, CameraMemento, DistanceMeasurementsPlugin,
     GLTFLoaderPlugin, utils, FastNavPlugin, MetaObject
 }
-    from '/resource/bimViewer/js/xeokit/xeokit-sdk.es.js?version=1.1.108';
+    from '/resource/bimViewer/js/xeokit/xeokit-sdk.es.js?version=1.1.110';
 
 
 const processByChildIdList = (treeViewNode, event) => {
@@ -623,7 +623,9 @@ class VitroTreeViewPlugin extends TreeViewPlugin
         switchElement.addEventListener('click', this._switchCollapseHandler);
 	}
 }
-window.initBimViewer = function(context) {var angleMeasurementsData = [
+
+/*! 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) {var angleMeasurementsData = [
 
 ];
 var bcfData = {};
@@ -2294,14 +2296,14 @@ function compareModels(isSideBySide) {
 
 function doCompareModels(isSideBySide) {
 
-        BIMModel.Compare(function(result) {
+    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]]);
+        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]]);
             }
         }
 
@@ -2311,7 +2313,7 @@ function doCompareModels(isSideBySide) {
         createComparisonResultPopup();
         viewer.scene.canvas.spinner.processes--;
     },
-    function() {
+    function () {
         viewer.scene.canvas.spinner.processes--;
     });
 }
@@ -2388,12 +2390,12 @@ function getComparisonResultRemovedItemsListElm(allItemsList) {
 
 function getComparisonResulItemsListElm(arCustomMeta, resultData, cssClass, allItemsList) {
     var itemsList = $('<ul class="list-items">');
-    for (var i=0; i < resultData.length; i++) {
+    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>');
+        var item = $('<li class="' + cssClass + '"><span class="name">' + objName + '</span><span class="props">' + ' [ ' + objId + ' ]' + '</span></li>');
         item.data('objId', objId);
-        item.on('click', function() {
+        item.on('click', function () {
             goToObject($(this).data('objId'));
         });
         allItemsList.append(item.clone(true));
@@ -2442,7 +2444,7 @@ function createComparisonResultPopupHeader(countAdded, labelAdded, countRemoved,
 function highlightModelsDifference(result, isSideBySide) {
     var color, arObjId;
 
-    if(result['old']['unique'].length) {
+    if (result['old']['unique'].length) {
         arObjId = result['old']['unique'];
         var opacity = 0.4; // TODO: old Model unique-objects opacity
         if (isSideBySide) {
@@ -2479,7 +2481,6 @@ function highlightModelsDifference(result, isSideBySide) {
     });
 }*/
 
-
 function colorizeArObject(arObjId, color) {
     viewer.scene.setObjectsColorized(arObjId, color);
 }
@@ -2517,7 +2518,7 @@ function goToObject(objId) {
     var entity = viewer.scene.objects[objId];
     viewer.scene.setObjectsSelected(viewer.scene.selectedObjectIds, false);
 
-    if(entity) {
+    if (entity) {
         entity.selected = true;
         viewer.cameraFlight.flyTo(entity);
     }
@@ -3143,33 +3144,372 @@ function hidePropInspector() {
     $('#propInspector').hide();
 }
 
-function compareModels(isSideBySide) {
+//------------------------------------------------------------------------------------------------------------------
+// Compare dialog
+//------------------------------------------------------------------------------------------------------------------
+function bindSelect(select) {
+    $(select).click(function (e) {
+        let input = $(select).children()[0];
+        if (e.target.localName == 'li') {
+            let value = $(e.target).attr('value');
+            let text = $(e.target).text();
+            $(input).val(text);
+            $(input).data('value', value);
+            input.dispatchEvent(new CustomEvent('change', { detail: { value: value } }));
+            $(select).removeClass('active');
+        }
+        else if (e.currentTarget == select && !$(select).hasClass('active') && !$(select).hasClass('readonly')) {
+            $(select).addClass('active');
+        } else {
+            $(select).removeClass('active');
+        }
+    });
 
-    var version = context.fileVersionList[0];
+    $(document).click(function (e) {
+        if (!Array.from($(select).children()).includes(e.target)) {
+            $(select).removeClass('active');
+        }
+    });
+}
 
-    var disableCacheStr = getDisableCacheStr();
-    var compareModelUrl = context.getFilePath(context.file.id, version.name);
-    var modelUrl = compareModelUrl + disableCacheStr;
+function bindSelectList() {
+    $('.select').each(function (i, item) {
+        bindSelect(item);
+    });
+}
 
-    var settings = {
-        id: Date.now(),
-        src: modelUrl,
-        edges: true,
-        performance: true,
-        position: [0, 0, 0]
+function hideDlgOverlay() {
+    $('.dlg-overlay').hide();
+}
+
+function hideDlgCompare() {
+    $('.compare-dlg-wrap').hide();
+}
+
+function toggleCompareButtons() {
+    $('#btnCompareOneOverOne').removeClass('toggled');
+    $('#btnCompareSideBySide').removeClass('toggled');
+    $('#btnToggleCompare').removeClass('toggled');
+}
+
+function bindBtnCompareDlgClose() {
+    $('.compare-dlg-header .close').click(function () {
+        hideDlgOverlay();
+        hideDlgCompare();
+        toggleCompareButtons();
+    });
+}
+
+function bindBtnCompareCancel() {
+    $('#btnCompareCancel').click(function () {
+        hideDlgOverlay();
+        hideDlgCompare();
+        toggleCompareButtons();
+    });
+}
+
+function bindBtnDoCompare() {
+    $('#btnDoCompare').click(function () {
+        if ($(this).hasClass('disabled')) {
+            return false;
+        } else {
+            compareObjList = getCompareObjList();
+            hideDlgCompare();
+            hideDlgOverlay();
+            doCompare();
+        }
+    });
+}
+
+function bindCompareDlgVersionChange() {
+    bindCompareDlgDcoAVersionChange();
+    bindCompareDlgDcoBVersionChange();
+}
+
+function showComparisonWarning() {
+    $('.compare-dlg_warning').text(context.createLocale('app.viewer.bim.compare.warning')).show();
+}
+
+function hideComparisonWarning() {
+    $('.compare-dlg_warning').text('').hide();
+}
+
+function isEqualComparisonDocs() {
+    if (compareObjList.modelAVersion == compareObjList.modelBVersion) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+function checkIsAllowedCompare() {
+    if (isEqualComparisonDocs()) {
+        showComparisonWarning();
+        $('#btnDoCompare').addClass('disabled');
+    } else {
+        hideComparisonWarning();
+        $('#btnDoCompare').removeClass('disabled');
+    }
+}
+
+function bindCompareDlgDcoAVersionChange() {
+    $('#docAVersion').on('change', function () {
+        compareObjList.modelAVersion = getModelAVersion();
+        checkIsAllowedCompare();
+    });
+}
+
+function bindCompareDlgDcoBVersionChange() {
+    $('#docBVersion').on('change', function () {
+        compareObjList.modelBVersion = getModelBVersion();
+        checkIsAllowedCompare();
+    });
+}
+
+function initVersionSelectValues() {
+    let version = context.fileVersionList.find(item => item.id == context.versionId);
+    let currentVersion = `v${version.name}`;
+    if (currentVersion != $('#docAVersion').val()) {
+        $('#docAVersion').val(currentVersion);
+        let currentVersionArray = version.name.split('.');
+        let versionMinor = currentVersionArray[1];
+        let versionMajor = currentVersionArray[0];
+        if (versionMinor > 1) {
+            $('#docBVersion').val(`v${versionMajor}.${--versionMinor}`);
+        } else {
+            $('#docBVersion').val(currentVersion);
+        }
+    }
+}
+
+function initCompare() {
+    $('#docAVersionList').html(null);
+    $('#docBVersionList').html(null);
+
+    bindBtnCompareCancel();
+    bindBtnCompareDlgClose();
+    bindBtnDoCompare();
+    bindCompareDlgVersionChange();
+
+    let fileName = context.file.fieldValueMap.name;
+    $('div.compare-dlg_doc-a_name').text(fileName);
+    $('div.compare-dlg_doc-b_name').text(fileName);
+
+    $.each(context.fileVersionList, function (i, item) {
+        let value = 'v' + item.name;
+        $('#docAVersionList').append($('<li>', {
+            value: value,
+            text: value,
+        }));
+        $('#docBVersionList').append($('<li>', {
+            value: value,
+            text: value,
+        }));
+    });
+
+    initVersionSelectValues();
+
+    compareObjList = getCompareObjList();
+    checkIsAllowedCompare();
+}
+
+var compareObjList;
+var isCompareSideBySide;
+
+function getCompareObjList() {
+    return {
+        modelAVersion: getModelAVersion(),
+        modelBVersion: getModelBVersion(),
     };
+}
 
-    if (isSideBySide) {
-        settings.position = [-55, 0, 0];
+function getModelAVersion() {
+    const docAVersionValue = $("#docAVersion").val();
+    const modelAVersion = docAVersionValue.substring(1);
+    return modelAVersion;
+}
+
+function getModelBVersion() {
+    const docBVersionValue = $("#docBVersion").val();
+    const modelBVersion = docBVersionValue.substring(1);
+    return modelBVersion;
+}
+
+function showDlgCompare() {
+    initVersionSelectValues();
+    $('.dlg-overlay').show();
+    $('.compare-dlg-wrap').show();
+}
+
+function compareModels(isSideBySide) {
+    isCompareSideBySide = isSideBySide;
+    showDlgCompare();
+}
+
+function doCompareModels(isSideBySide) {
+
+    BIMModel.Compare(function (objResult) {
+
+        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();
+        viewer.scene.canvas.spinner.processes--;
+    },
+    function () {
+        viewer.scene.canvas.spinner.processes--;
+    });
+}
+
+function getComparisonResultAddedItemsListElm(allItemsList) {
+    var cssClass = 'item-added';
+    return getComparisonResulItemsListElm(window.model2, compareModelsResult['new'], cssClass, allItemsList);
+}
+
+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);
     }
 
-    window.model2 = xktLoader.load(settings);
-    window.model2.on('loaded', () => {
-        viewer.scene.canvas.spinner.processes++;
-        doCompareModels(isSideBySide);
+    return itemsList;
+}
+
+// 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.model, 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.model, arObjId, false);
+    }
+
+    if (result['new'].length) {
+        arObjId = result['new'];
+        color = [1.0, 0.0, 0.8]; // TODO: new Model unique-objects color
+        colorizeArObject(window.model2, arObjId, color);
+    }
+}
+
+function withObjects(sceneModel, dbObjs, callback) {
+    let changed = false;
+    for (let i = 0, len = dbObjs.length; i < len; i++) {
+        const id = dbObjs[i].id;
+        let entity = sceneModel.objects[id];
+        if (entity) {
+            changed = callback(entity) || changed;
+        }
+    }
+    return changed;
+}
+
+function colorizeArObject(sceneModel, dbObjs, color) {
+    withObjects(sceneModel, dbObjs, entity => {
+        entity.colorize = color;
     });
 }
-
+
+function highlightArObject(sceneModel, dbObjs, highlighted) {
+    withObjects(sceneModel, dbObjs, entity => {
+        entity.highlighted = highlighted;
+    });
+}
+
+function setOpacityArObject(sceneModel, dbObjs, opacity) {
+    withObjects(sceneModel, dbObjs, entity => {
+        entity.opacity = opacity;
+    });
+}
+
+function setVisibilityArObject(sceneModel, dbObjs, visible) {
+    withObjects(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];
+            }
+
+            BIMCommon.FileCompareVersion = versionB;
+            window.model2 = xktLoader.load(settings);
+            window.model2.on('loaded', () => {
+                viewer.scene.canvas.spinner.processes++;
+                doCompareModels(isCompareSideBySide);
+            });
+        })
+
+    }, function () {
+        alert("The file is being processed");
+    });
+}
 //------------------------------------------------------------------------------------------------------------------
 // Do action wherever we click on an object
 //------------------------------------------------------------------------------------------------------------------
@@ -3272,6 +3612,9 @@ function init() {
     bindBtnCompareOneOverOne();
     bindBtnCompareSideBySide();
     bindBtnClearComparison();
+
+    initCompare();
+    bindSelectList();
 }
 
 init();