@vitrosoftware/common-ui-ts 1.1.74 → 1.1.77

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

@@ -0,0 +1,2697 @@
+import { BIMModel, BIMCommon, BIMAnnotation } from '/resource/bimViewer/js/bim-viewer-models.js';
+
+import {
+    Viewer, XKTLoaderPlugin, NavCubePlugin, SectionPlanesPlugin, math, BCFViewpointsPlugin, AnnotationsPlugin,
+    ContextMenu, TreeViewPlugin, StoreyViewsPlugin, AngleMeasurementsPlugin, CameraMemento, DistanceMeasurementsPlugin,
+    GLTFLoaderPlugin, utils
+}
+    from '/resource/bimViewer/js/xeokit/xeokit-sdk.es.js';
+import { VitroTreeViewPlugin } from "/resource/bimViewer/js/xeokit/VitroTreeViewPlugin.js";
+import { VitroFastNavPlugin } from "/resource/bimViewer/js/xeokit/VitroFastNavPlugin.js";window.initBimViewer = function(context) {var angleMeasurementsData = [
+
+];
+var bcfData = {};
+var distanceMeasurementsData = [
+
+];
+
+var notes = [];
+var srcModel = undefined;
+var srcMetaModelData = undefined;
+var fileVersion = undefined;
+var fileVersionPath = undefined;
+
+//------------------------------------------------------------------------------------------------------------------
+// Import the modules we need for this example
+//------------------------------------------------------------------------------------------------------------------
+// TODO - PATH!!!
+const modelPathDefault = '';
+const modelPathConverted = '../BIM/assets/models/converted/';
+//------------------------------------------------------------------------------------------------------------------
+// Create a Viewer
+//------------------------------------------------------------------------------------------------------------------
+const viewer = new Viewer({
+    canvasId: "xeokitCanvas",
+    transparent: true
+});
+
+//------------------------------------------------------------------------------------------------------------------
+// Arrange the camera
+//------------------------------------------------------------------------------------------------------------------
+
+const camera = viewer.camera;
+// TODO
+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,
+		});
+
+//------------------------------------------------------------------------------------------------------------------
+// Create two ContextMenus - one for right-click on empty space, the other for right-click on an Entity
+//------------------------------------------------------------------------------------------------------------------
+
+const canvasContextMenu = new ContextMenu({
+    enabled: true,
+    context: {
+        viewer: viewer
+    },
+    items: [
+        [
+            {
+                getTitle: function (context) { return document.webL10n.get('hide_all') },
+                getEnabled: function (context) {
+                    return (context.viewer.scene.numVisibleObjects > 0);
+                },
+                doAction: function (context) {
+                    context.viewer.scene.setObjectsVisible(context.viewer.scene.visibleObjectIds, false);
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('show_all') },
+                getEnabled: function (context) {
+                    const scene = context.viewer.scene;
+                    return (scene.numVisibleObjects < scene.numObjects);
+                },
+                doAction: function (context) {
+                    const scene = context.viewer.scene;
+                    scene.setObjectsVisible(scene.objectIds, true);
+                    scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                    scene.setObjectsSelected(scene.selectedObjectIds, false);
+                }
+            }
+        ],
+        [
+            {
+                getTitle: function (context) { return document.webL10n.get('view_fit_all') },
+                doAction: function (context) {
+                    context.viewer.cameraFlight.flyTo({
+                        aabb: context.viewer.scene.getAABB()
+                    });
+                }
+            }
+        ]
+    ]
+});
+
+const objectContextMenu = new ContextMenu({
+    items: [
+        [
+            {
+                getTitle: function (context) { return document.webL10n.get('inspect_properties') },
+                doAction: function (context) {
+                    if(context.entity && context.entity.id) {
+                        showPropertyInspector(context);
+                    }
+                }
+            },
+        ],
+        [
+            {
+                getTitle: function (context) { return document.webL10n.get('view_fit') },
+                doAction: function (context) {
+                    const viewer = context.viewer;
+                    const scene = viewer.scene;
+                    const entity = context.entity;
+                    viewer.cameraFlight.flyTo({
+                        aabb: entity.aabb,
+                        duration: 0.5
+                    }, () => {
+                        setTimeout(function () {
+                            scene.setObjectsHighlighted(scene.highlightedObjectIds, false);
+                        }, 500);
+                    });
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('view_fit_all') },
+                doAction: function (context) {
+                    ViewFitAll(context.viewer);
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('show_in_tree') },
+                doAction: function (context) {
+                    const objectId = context.entity.id;
+
+					context.treeViewPlugin.showInTree(objectId);
+                }
+            }
+        ],
+        [
+            {
+                getTitle: function (context) { return document.webL10n.get('hide') },
+                getEnabled: function (context) {
+                    return context.entity.visible;
+                },
+                doAction: function (context) {
+                    context.entity.visible = false;
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('hide_others') },
+                doAction: function (context) {
+                    const viewer = context.viewer;
+                    const scene = viewer.scene;
+                    const entity = context.entity;
+                    const metaObject = viewer.metaScene.metaObjects[entity.id];
+                    if (!metaObject) {
+                        return;
+                    }
+                    scene.setObjectsVisible(scene.visibleObjectIds, false);
+                    scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                    scene.setObjectsSelected(scene.selectedObjectIds, false);
+                    scene.setObjectsHighlighted(scene.highlightedObjectIds, false);
+                    metaObject.withMetaObjectsInSubtree((metaObject) => {
+                        const entity = scene.objects[metaObject.id];
+                        if (entity) {
+                            entity.visible = true;
+                        }
+                    });
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('hide_all') },
+                getEnabled: function (context) {
+                    return (context.viewer.scene.numVisibleObjects > 0);
+                },
+                doAction: function (context) {
+                    context.viewer.scene.setObjectsVisible(context.viewer.scene.visibleObjectIds, false);
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('show_all') },
+                getEnabled: function (context) {
+                    const scene = context.viewer.scene;
+                    return (scene.numVisibleObjects < scene.numObjects);
+                },
+                doAction: function (context) {
+                    const scene = context.viewer.scene;
+                    scene.setObjectsVisible(scene.objectIds, true);
+                }
+            }
+        ],
+        [
+            {
+                getTitle: function (context) { return document.webL10n.get('x_ray') },
+                getEnabled: function (context) {
+                    return (!context.entity.xrayed);
+                },
+                doAction: function (context) {
+                    context.entity.xrayed = true;
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('x_ray_undo') },
+                getEnabled: function (context) {
+                    return context.entity.xrayed;
+                },
+                doAction: function (context) {
+                    context.entity.xrayed = false;
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('x_ray_others') },
+                doAction: function (context) {
+                    const viewer = context.viewer;
+                    const scene = viewer.scene;
+                    const entity = context.entity;
+                    const metaObject = viewer.metaScene.metaObjects[entity.id];
+                    if (!metaObject) {
+                        return;
+                    }
+                    scene.setObjectsVisible(scene.objectIds, true);
+                    scene.setObjectsXRayed(scene.objectIds, true);
+                    scene.setObjectsSelected(scene.selectedObjectIds, false);
+                    scene.setObjectsHighlighted(scene.highlightedObjectIds, false);
+                    metaObject.withMetaObjectsInSubtree((metaObject) => {
+                        const entity = scene.objects[metaObject.id];
+                        if (entity) {
+                            entity.xrayed = false;
+                        }
+                    });
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('x_ray_reset') },
+                getEnabled: function (context) {
+                    return (context.viewer.scene.numXRayedObjects > 0);
+                },
+                doAction: function (context) {
+                    context.viewer.scene.setObjectsXRayed(context.viewer.scene.xrayedObjectIds, false);
+                }
+            }
+        ],
+        [
+            {
+                getTitle: function (context) { return document.webL10n.get('select') },
+                getEnabled: function (context) {
+                    return (!context.entity.selected);
+                },
+                doAction: function (context) {
+                    context.entity.selected = true;
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('deselect') },
+                getEnabled: function (context) {
+                    return context.entity.selected;
+                },
+                doAction: function (context) {
+                    context.entity.selected = false;
+                }
+            },
+            {
+                getTitle: function (context) { return document.webL10n.get('clear_selection') },
+                getEnabled: function (context) {
+                    return (context.viewer.scene.numSelectedObjects > 0);
+                },
+                doAction: function (context) {
+                    context.viewer.scene.setObjectsSelected(context.viewer.scene.selectedObjectIds, false);
+                }
+            }
+        ]
+    ],
+    enabled: true
+});
+
+viewer.cameraControl.on("rightClick", function (e) {
+
+    var hit = viewer.scene.pick({
+        canvasPos: e.canvasPos
+    });
+
+    if (hit && hit.entity.isObject) {
+
+        objectContextMenu.context = { // Must set context before showing menu
+            viewer: viewer,
+            treeViewPlugin: treeView,
+            entity: hit.entity
+        };
+
+        objectContextMenu.show(e.event.pageX, e.event.pageY);
+
+    } else {
+
+        canvasContextMenu.context = { // Must set context before showing menu
+            viewer: viewer
+        };
+
+        canvasContextMenu.show(e.event.pageX, e.event.pageY);
+    }
+
+    e.event.preventDefault();
+});
+
+
+//------------------------------------------------------------------------------------------------------------------
+// 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 SectionPlanesPlugin - we'll use this to create cross-section planes
+//------------------------------------------------------------------------------------------------------------------
+
+const sectionPlanes = new SectionPlanesPlugin(viewer, {
+    overviewCanvasId: "sectionPlanesOverviewCanvas",
+    overviewVisible: true
+});
+
+//------------------------------------------------------------------------------------------------------------------
+// Add a GLTFModelsPlugin - we'll use this to load the model geometry and IFC metadata
+//------------------------------------------------------------------------------------------------------------------
+
+const xktLoader = new XKTLoaderPlugin(viewer);
+const gltfLoader = new GLTFLoaderPlugin(viewer);
+
+
+xktLoader.globalizeObjectIds = false; // For multiple models in TreeView
+
+//------------------------------------------------------------------------------------------------------------------
+// Add a BCFViewpointsPlugin - we'll use this to load the BCF viewpoint
+//------------------------------------------------------------------------------------------------------------------
+
+const bcfViewpoints = new BCFViewpointsPlugin(viewer);
+
+//------------------------------------------------------------------------------------------------------------------
+// Load the XKT model and IFC metadata
+//------------------------------------------------------------------------------------------------------------------
+
+function getRequestParams() {
+    var vars = {};
+    window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, (m, key, value) => {
+        vars[key] = value;
+    });
+    return vars;
+}
+
+function showXeokitSpinner() {
+    $('.sk-fading-circle').parent().css('visibility', 'visible');
+}
+
+function hideXeokitSpinner() {
+    $('.sk-fading-circle').parent().css('visibility', 'hidden');
+}
+
+var isModelAddedToTreeView = false;
+
+function openSidebarTreeView() {
+    if (!isModelAddedToTreeView) {
+        addModelToTreeView();
+    }
+    else {
+        $('body').addClass('treeview-expanded');
+        $('#treeViewContainerWrap').show();
+        $('#storeyViewsSidebar').hide();
+        $('#btnToggleSidebarStoreyViews').removeClass('toggled');
+    }
+
+    // $(window).trigger('resize');
+}
+
+function addModelToTreeView() {
+
+	viewer.scene.canvas.spinner.processes++;
+
+    const callback = (metaObjects, status, jqXHR) =>
+    {
+		const metaModel = viewer.metaScene.metaModels[window.model.id];
+
+	    treeView.addObjectsToMetaModel(metaObjects, metaModel);
+        treeView.addModel(window.model.id);
+
+        $('body').addClass('treeview-expanded');
+        $('#treeViewContainerWrap').show();
+        $('#storeyViewsSidebar').hide();
+        $('#btnToggleSidebarStoreyViews').removeClass('toggled');
+
+        isModelAddedToTreeView = true;
+
+        viewer.scene.canvas.spinner.processes--;
+
+    };
+
+    const error = () => {
+        viewer.scene.canvas.spinner.processes--;
+    };
+
+    BIMModel.GetChildList(-1, false, null, callback, error);
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Create an AnnotationsPlugin, with which we'll create annotations
+//------------------------------------------------------------------------------------------------------------------
+
+const annotations = new AnnotationsPlugin(viewer, {
+
+    markerHTML: "<div class='annotation-marker' style='background-color: {{markerBGColor}};'>{{glyph}}</div>",
+    labelHTML: "<div class='annotation-label' style='background-color: {{labelBGColor}};'>\
+        <div class='annotation-title'>{{title}}</div>\
+        <div class='annotation-desc'>{{description}}</div>\
+        </div>",
+
+    values: {
+        markerBGColor: "red",
+        labelBGColor: "white",
+        glyph: "X",
+        title: "Untitled",
+        description: "No description"
+    }
+});
+
+var prevAnnotationClicked = null;
+
+//------------------------------------------------------------------------------------------------------------------
+// Annotation onClick
+//------------------------------------------------------------------------------------------------------------------
+annotations.on("markerClicked", (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() {
+    var disableCacheStr = getDisableCacheStr();
+    var modelUrl = srcModel;// + disableCacheStr; //VitroDelete
+    var metaModelDataUrl = srcMetaModelData + disableCacheStr;
+
+
+    window.model = xktLoader.load({
+        id: Date.now(),
+        src: modelUrl,
+        edges: true,
+        backfaces: true,
+    });
+
+	window.model.on('loaded', () => {
+		modelOnLoaded();
+	});
+
+
+
+    const vitroFastNavPlugin = new VitroFastNavPlugin(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,
+	});
+
+	$('#btnToggleSectionPlan').addClass('toggled');
+}
+
+function getDisableCacheStr() {
+    var dt = new Date();
+    return "?rev=" + dt.getTime();
+}
+
+function modelOnLoaded() {
+
+	window.model.fileVersion = fileVersion;
+	window.model.filename = srcModel.substring(srcModel.lastIndexOf('/') + 1).replace('.xkt', '');
+    //------------------------------------------------------------------------------------------------------------------
+    // Create some Annotations
+    //------------------------------------------------------------------------------------------------------------------
+    loadAnnotations();
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Custom Colorize Entity
+    //------------------------------------------------------------------------------------------------------------------
+    viewer.scene.setObjectsColorized(['2O2Fr$t4X7Zf8NOew3FLPP'], [1.0, 0.0, 0.8]); // entityId, color
+
+    //----------------------------------------------------------------------------------------------------------
+    // Angle Measurements
+    //----------------------------------------------------------------------------------------------------------
+    const angleMeasurements = createAngleMeasurements(angleMeasurementsData);
+
+    //----------------------------------------------------------------------------------------------------------
+    // Storey Views
+    //----------------------------------------------------------------------------------------------------------
+    // Внимание! Если до initStoreyViews будет вызван SectionPlane -> картинки планов этажей будут сгенерены в "обрезанном" виде
+    // на них будет только видимая часть оставленная секущими плоскостями SectionPlane
+    initStoreyViews();
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load predefined SectionPlanes
+    //------------------------------------------------------------------------------------------------------------------
+    createSectionPlane();
+
+    //----------------------------------------------------------------------------------------------------------
+    // Distance Measurements
+    //----------------------------------------------------------------------------------------------------------
+    const distanceMeasurements = createDistanceMeasurements(distanceMeasurementsData);
+
+    ViewFitAll(viewer);
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Create a couple of cross-section planes
+//------------------------------------------------------------------------------------------------------------------
+function createSectionPlane() {}
+
+//------------------------------------------------------------------------------------------------------------------
+// Clear SectionPlanes
+//------------------------------------------------------------------------------------------------------------------
+function clearSectionPanes() {
+    sectionPlanes.clear();
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Load Annotations
+//------------------------------------------------------------------------------------------------------------------
+function loadAnnotations() {
+    // TODO -> ajax reqest - get Notes
+    // for Test - notes -> get data from notes.data.php
+
+    BIMAnnotation.GetNote(function (data) {
+
+        if (data && data.length > 0) {
+            var noteList = JSON.parse(data);
+                $.each(noteList, function (key, note) {
+                notes.push(note);
+            });
+            $.each(notes, function (key, val) {
+                val.entity = viewer.scene.objects[val.entity];
+                annotations.createAnnotation(val);
+            });
+        }
+    });
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Only for test
+//------------------------------------------------------------------------------------------------------------------
+var annotationCounter = notes.length + 1; // TODO
+var sectionPlaneCounter = 1; // TODO
+
+//------------------------------------------------------------------------------------------------------------------
+//
+//------------------------------------------------------------------------------------------------------------------
+var annotationByClick = false;
+var sectionPlanByClick = false;
+var angleMeasurementsByClick = false;
+var distanceMeasurementsByClick = false;
+var lastVisibleSectionPlanId = false;
+
+//------------------------------------------------------------------------------------------------------------------
+// Create annotation by click
+//------------------------------------------------------------------------------------------------------------------
+function createAnnotationByClick(pickResult) {
+    if (annotationByClick && pickResult) {
+        addNote(pickResult);
+    }
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Create SectionPlane by click
+//------------------------------------------------------------------------------------------------------------------
+function createSectionPlaneByClick(pickResult) {
+    if (sectionPlanByClick && pickResult && pickResult.worldNormal) { // Disallow SectionPlanes on point clouds, because points don't have normals
+
+        const sectionPlane = sectionPlanes.createSectionPlane({
+            pos: pickResult.worldPos,
+            dir: math.mulVec3Scalar(pickResult.worldNormal, -1)
+        });
+
+        sectionPlanes.showControl(sectionPlane.id);
+        sectionPlaneCounter++;
+    }
+}
+
+
+
+//------------------------------------------------------------------------------------------------------------------
+// Add Note
+//------------------------------------------------------------------------------------------------------------------
+var dialog, form;
+
+function addNote(pickResult) {
+    initDlg(pickResult);
+}
+
+function initDlg(pickResult) {
+    createDlgElm();
+
+    dialog = getDlgElm().dialog({
+        autoOpen: true,
+        height: 310,
+        width: 420,
+        modal: true,
+        resizable: true,
+        buttons: [{
+            text: "Save",
+            "id": "btnSaveConfirm",
+            click: function() {
+                saveNote(pickResult);
+                closeDlg();
+            },
+        }, {
+            text: "Cancel",
+            "id": "btnSaveCancel",
+            click: function() {
+                closeDlg();
+            }
+        }],
+        close: function() {
+            closeDlg();
+        },
+        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>')
+}
+
+function disableXeokitClickEvent() {
+    annotationByClick = false;
+    $('#dlgNoteTitle').focus();
+}
+
+function resetDlgForm() {
+    $('#dlgNoteTitle').val('');
+    $('#dlgNoteTxt').val('');
+}
+
+function getDlgElm() {
+    return $("#dialog-form");
+}
+
+function closeDlg() {
+    resetDlgForm();
+    $(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 title = $('<input id="dlgNoteTitle" />');
+    var txtArea = $('<textarea id="dlgNoteTxt"></textarea>');
+
+    div.append(title);
+    div.append(txtArea);
+    $('body').append(div);
+
+    return div;
+}
+
+function createDeleteDlgElm() {
+    var noteConfirmDeleteMessage = document.webL10n.get('note_delete_confirm');
+    var div = $('<div id="dialog-form" title="'+ noteConfirmDeleteMessage + '" style="display: none;"/>');
+    $('body').append(div);
+}
+
+function saveNote(pickResult) {
+
+    var noteTitle = $('#dlgNoteTitle').val();
+    var noteTxt = $('#dlgNoteTxt').val();
+
+    var noteOptions = getNoteOptions(pickResult, noteTxt, noteTitle);
+    BIMAnnotation.SaveNote(noteOptions, doAddNote);
+}
+
+function doAddNote(noteOptions) {
+    notes.push(noteOptions);
+    createNote(noteOptions);
+
+    if($('.sidebar').is(':visible')) {
+        initSidebarNotes();
+        highlightSidebarNote(noteOptions.id);
+    }
+}
+
+function createNote(noteOptions) {
+    const annotation = annotations.createAnnotation(noteOptions);
+    annotationCounter++;
+}
+
+function getNoteOptions(pickResult, noteTxt, noteTitle) {
+
+    var noteId = 0;
+    var creator = '';
+    var glyph = getNoteGlyph();
+    var imageSrc = false;
+    var bgColor = getNoteBgColor();
+    var options = doGetNoteOptions(noteId, creator, pickResult, glyph, noteTitle, noteTxt, imageSrc, bgColor);
+
+    return options;
+}
+
+function getNoteBgColor() {
+    var bgColor = "2d9cdb";
+    return bgColor;
+}
+
+function getNoteGlyph() {
+    var glyph = "";
+    return glyph;
+}
+
+function getCurrentDate() {
+    var dateStr = new Date(Date.now());
+    var currentDate = dateStr.toLocaleDateString("ru-RU") + ' ' + dateStr.getHours() + ':' + dateStr.getMinutes();
+    return currentDate;
+}
+
+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: true,
+        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;
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Sidebar Notes
+//------------------------------------------------------------------------------------------------------------------
+
+function initSidebarNotes() {
+    clearSidebarNotes();
+    createSidebarNotes();
+}
+
+function clearSidebarNotes() {
+    $('.sidebar-note-wrap').remove();
+}
+
+function createSidebarNotes() {
+    $.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 noteHeader = createSidebarNotesItemHeader(noteData);
+    var noteBody = createSidebarNotesItemBody(noteData);
+
+    noteWrap.append(noteHeader);
+    noteWrap.append(noteBody);
+
+    return noteWrap;
+}
+
+function createSidebarNotesItemBody(noteData) {
+    var noteContent = noteData;
+
+    var noteBody = $('<div class="sidebar-note-body" />');
+    var noteTextarea = $('<textarea data-id="' + noteData.id + '"></textarea>');
+    bindTextareaHandlers(noteTextarea, noteData);
+    noteTextarea.val(noteContent.values.description);
+
+    var expandBtnWrap = $('<div class="sidebar-note-expand-wrap"/>');
+    var expandBtnWrapInner = $('<div class="sidebar-note-expand-btn collapsed"/>');
+    var statusText = noteContent.values.status;
+    if (!statusText) {
+        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 expandBtnExpand = $('<a class="btn-expand">' + expandLabel + '</a>');
+    var expandBtnCollapse = $('<a class="btn-collapse">'+ collapseLabel + '</a>');
+    bindOnClickTextareaExpand(expandBtnExpand);
+    bindOnClickTextareaCollapse(expandBtnCollapse);
+    expandBtnWrapInner.append(status);
+    expandBtnWrapInner.append(expandBtnExpand);
+    expandBtnWrapInner.append(expandBtnCollapse);
+
+    expandBtnWrap.append(expandBtnWrapInner);
+    noteBody.append(noteTextarea);
+    noteBody.append(expandBtnWrap);
+
+    if(noteContent.values.imageSrc) {
+        var noteImage = $('<div class="sidebar-note-img-wrap"><img src="' + noteContent.values.imageSrc + '" /><div>');
+        noteBody.append(noteImage);
+    }
+
+    return noteBody;
+}
+
+function bindTextareaHandlers(textarea, noteData) {
+    textarea.on('focus', function() {
+        doTextareaOnFocus($(this));
+    });
+
+    textarea.on('change', function() {
+        doNoteOnChange($(this), noteData);
+    });
+}
+
+function doTextareaOnFocus(textarea) {
+    $('.sidebar-note-wrap').removeClass('active');
+    var wrap = textarea.closest('.sidebar-note-wrap');
+    wrap.addClass('active');
+    autosize(textarea);
+    wrap.find('.sidebar-note-expand-btn').removeClass('collapsed');
+}
+
+function doNoteOnChange(textarea, noteData) {
+    var noteId = textarea.data('id');
+    var noteTitle = noteData.values.title;
+    var noteDesc = textarea.val();
+
+    BIMAnnotation.UpdateNote(noteId, noteTitle, noteDesc, function() {
+        var date = getCurrentDate();
+        var user = '';
+
+        $.each(notes, function(index, val) {
+            if(val.id == noteId) {
+                notes[index]['values']['description'] = noteDesc;
+                notes[index]['date'] = date;
+            }
+        });
+    });
+}
+
+function bindOnClickTextareaExpand(btnElm) {
+    btnElm.on('click', function() {
+        doTextareaExpand(btnElm);
+        $(this).closest('.sidebar-note-expand-btn').removeClass('collapsed');
+    });
+}
+
+function doTextareaExpand(btnElm) {
+    var textarea = btnElm.closest('.sidebar-note-body').find('textarea');
+    autosize(textarea);
+}
+
+function bindOnClickTextareaCollapse(btnElm) {
+    btnElm.on('click', function() {
+        doTextareaCollapse(btnElm);
+        $(this).closest('.sidebar-note-expand-btn').addClass('collapsed');
+    });
+}
+
+function doTextareaCollapse(btnElm) {
+    var textarea = btnElm.closest('.sidebar-note-body').find('textarea');
+    autosize.destroy(textarea);
+}
+
+function createSidebarNotesItemHeader(noteData) {
+    var noteContent = noteData;
+
+    var noteHeader = $('<div class="sidebar-note-header" />');
+    var noteName = $('<div class="sidebar-note-name" />');
+    noteName.html(noteContent.creator);
+    var noteDate = $('<div class="sidebar-note-date" />');
+
+    var dateStr = getCurrentDate();
+    if (noteContent.date) {
+        var date = new Date(noteContent.date);
+        dateStr = date.toLocaleDateString("ru-RU") + ' ' + date.getHours() + ':' + date.getMinutes();
+    }
+
+    noteDate.html(dateStr);
+
+    var titleContainer = $('<div class="note-title-container"></div>');
+
+    var noteTitle = $('<div class="sidebar-note-title">' + noteData.values.title + '</div>');
+    noteTitle.on('click', function() {
+        goToNoteMarker($(this));
+    });
+
+    var noteId = $('<div class="sidebar-note-id"></div>');
+    var goToCommentListLabel = document.webL10n.get('note_go_to_comment_list');
+    var noteIdButton = $('<a title="' + goToCommentListLabel + '">' + '#' + noteData.values.glyph + '</a>');
+
+    if (noteData.version) {
+        var noteFileVersionLabel = document.webL10n.get('note_file_version');
+        var noteIdFileVersion = $('<a class="fileVersionPath">' + noteFileVersionLabel + ':' + ' ' + noteData.version + '</a>');
+        noteId.append(noteIdFileVersion);
+        noteIdFileVersion.on('click', function () {
+            window.open(noteData.fileVersionPath);
+        });
+    }
+
+    noteId.append(noteIdButton);
+    noteIdButton.on('click', function () {
+        goToCommentList(noteData.values.glyph);
+    });
+    titleContainer.append(noteTitle);
+
+    var noteConfirmDeleteMessage = document.webL10n.get('note_delete');
+    var deleteBtn = $('<a title="' + noteConfirmDeleteMessage + '" class="sidebar-note-btn-delete"><span>' + noteConfirmDeleteMessage + '</span></a>');
+    deleteBtn.data('id', noteData.id);
+    bindSidebarNotesBtnDelete(deleteBtn);
+
+    noteHeader.append(noteName);
+    noteHeader.append(noteDate);
+    noteHeader.append(noteId);
+    noteHeader.append(titleContainer);
+    noteHeader.append(deleteBtn);
+
+    return noteHeader;
+}
+
+function goToNoteMarker(noteTitle) {
+    var sidebarNoteWrap = noteTitle.closest('.sidebar-note-wrap');
+    var sidebarNoteWrapId = sidebarNoteWrap.attr('id');
+    var noteId = sidebarNoteWrapId.replace("noteWrap-", "");
+    console.log('noteId', noteId);
+
+    var annotation = annotations.annotations[noteId];
+    console.log('annotation', annotation);
+    viewer.cameraFlight.flyTo(annotation);
+}
+
+function goToCommentList(noteId) {
+    BIMAnnotation.GoToCommentList(noteId);
+}
+
+function bindSidebarNotesBtnDelete(btn) {
+    btn.on('click', function(e) {
+        $(document).trigger('deleteNote', [$(this)]);
+    });
+}
+
+function bindDeleteNoteEventHandler() {
+    $(document).on('deleteNote', function(e, item) {
+
+        createDeleteDlgElm();
+
+        dialog = getDlgElm().dialog({
+            autoOpen: true,
+            height: 130,
+            width: 280,
+            modal: true,
+            resizable: true,
+            buttons: [{
+                text: "Confirm",
+                "id": "btnDeleteConfirm",
+                click: function() {
+                    var id = item.attr('id') ? item.attr('id') : item.data('id');
+                    BIMAnnotation.DeleteNote(id, deleteNote);
+                    closeDlg();
+                },
+            }, {
+                text: "Cancel",
+                "id": "btnDeleteCancel",
+                click: function() {
+                    closeDlg();
+                }
+            }],
+            close: function () {
+                closeDlg();
+            }
+        });
+
+        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>')
+    });
+}
+
+function deleteNote(id) {
+    notes = jQuery.grep(notes, function(elm, index) {
+        return (elm.id != id);
+    });
+
+    annotations.destroyAnnotation(id);
+
+    if($('.sidebar').is(':visible')) {
+        initSidebarNotes();
+    }
+}
+
+function fixNotesTextareaBlur() {
+    $('#xeokitCanvas').on('click', function() {
+        if($('.sidebar-content').is(':visible')) {
+            var textareas = $('.sidebar-content').find('textarea');
+            if(textareas.length) {
+                textareas.trigger('blur');
+            }
+        }
+    });
+}
+
+function highlightSidebarNote(noteId) {
+    $('.sidebar-note-wrap').removeClass('active');
+    var notetWrap = $('#noteWrap-' + noteId);
+    notetWrap.addClass('active');
+    autosize(notetWrap.find('textarea'));
+    notetWrap.find('.sidebar-note-expand-btn').removeClass('collapsed');
+    var sidebarContent = $('.sidebar-content');
+    var sidebarOffsetTop = parseInt(sidebarContent[0].offsetTop);
+    var sidebarScrollTop = parseInt(sidebarContent[0].scrollTop);
+    sidebarContent.animate({
+        scrollTop: notetWrap.position().top - sidebarOffsetTop + sidebarScrollTop
+    }, 1000);
+}
+
+function showNoteDesc(noteId) {
+    if(!$('.sidebar').is(':visible')) {
+        $('#btnToggleSidebarNotes').addClass('toggled');
+        initSidebarNotes();
+        expandSidebarNotes();
+    }
+    highlightSidebarNote(noteId);
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Toolbar
+//------------------------------------------------------------------------------------------------------------------
+function bindToggleNotes() {
+    $(document).on('click', '#btnToggleNotes', function() {
+        $(this).toggleClass('show');
+        if($(this).hasClass('show')) {
+            hideAnnotationMarkers();
+        } else {
+            showAnnotationMarkers();
+        }
+    });
+}
+
+function hideAnnotationMarkers() {
+    $('body').addClass('hide-annotations');
+}
+
+function showAnnotationMarkers() {
+    $('body').removeClass('hide-annotations');
+}
+
+function bindBtnToggleSidebarNotes() {
+    $(document).on('click', '#btnToggleSidebarNotes', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            if(!$('.sidebar').is(':visible')) {
+                initSidebarNotes();
+                expandSidebarNotes();
+            }
+        } else {
+            $('#navCubeCanvas').css('right', 10);
+            $('#sectionPlanesOverviewCanvas').css('right', 10);
+            $('.sidebar').hide();
+            $('body').removeClass('sidebar-expanded');
+        }
+    });
+}
+
+function expandSidebarNotes() {
+    $('#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 bindSidebarNotesClose() {
+    $('.sidebar-close').on('click', function() {
+        $('#navCubeCanvas').css('right', 10);
+        $('#sectionPlanesOverviewCanvas').css('right', $('#sidebarWrap').width() + 10);
+        $('.sidebar').hide();
+        $('#btnToggleSidebarNotes').removeClass('toggled');
+    });
+}
+
+function bindBtnCreateAngleMeasurements() {
+    $(document).on('click', '#btnCreateAngleMeasurements', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            $('#btnCreateNotes').removeClass('toggled');
+            annotationByClick = false;
+
+            $('#btnCreateSectionPlan').removeClass('toggled');
+            disableSectionPlanByClick();
+            disableDistanceMeasurementsByClick();
+
+            enableAngleMeasurements();
+            $('#btnToggleAngleMeasurements').removeClass('toggled');
+
+            enableAngleMeasurementsByClick();
+
+        } else {
+            disableAngleMeasurementsByClick();
+        }
+    });
+}
+
+function enableAngleMeasurementsByClick() {
+    angleMeasurementsByClick = true;
+    angleMeasurements.control.activate();
+}
+
+function disableAngleMeasurementsByClick() {
+    angleMeasurements.control.deactivate();
+    angleMeasurementsByClick = false;
+}
+
+/* *** Вариант реализации, если необходима возможность создавать SectionPlan по клику *** */
+function bindBtnToggleCreateNotes() {
+    $(document).on('click', '#btnCreateNotes', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            $('#btnCreateSectionPlan').removeClass('toggled');
+            disableSectionPlanByClick();
+            disableAngleMeasurementsByClick();
+            disableDistanceMeasurementsByClick();
+            showAnnotationMarkers();
+            $('#btnToggleNotes').removeClass('show');
+            annotationByClick = true;
+        } else {
+            annotationByClick = false;
+        }
+    });
+}
+
+function bindBtnCreateSectionPlan() {
+    $(document).on('click', '#btnCreateSectionPlan', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            $('#btnCreateNotes').removeClass('toggled');
+            $('#btnToggleSectionPlan').addClass('toggled');
+            annotationByClick = false;
+            disableAngleMeasurementsByClick();
+            disableDistanceMeasurementsByClick();
+            enableSectionPlanByClick();
+        } else {
+            disableSectionPlanByClick();
+        }
+    });
+}
+
+function bindBtnClearSectionPlan() {
+    $(document).on('click', '#btnClearSectionPlan', function () {
+        clearSectionPanes();
+    });
+}
+
+function bindBtnToggleSectionPlan() {
+    $(document).on('click', '#btnToggleSectionPlan', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            enableSectionPlan();
+        } else {
+            disableSectionPlan();
+            sectionPlanByClick = false;
+            $('#btnCreateSectionPlan').removeClass('toggled');
+        }
+    });
+}
+/* *** */
+
+function enableSectionPlanByClick() {
+    sectionPlanByClick = true;
+
+    if(lastVisibleSectionPlanId) {
+        sectionPlanes.showControl(lastVisibleSectionPlanId); // Shows the 3D editing gizmo for a SectionPlane.
+    }
+
+    sectionPlanes.setOverviewVisible(true); // Shows #sectionPlanesOverviewCanvas
+}
+
+function enableSectionPlan() {
+    if(lastVisibleSectionPlanId) {
+        sectionPlanes.showControl(lastVisibleSectionPlanId); // Shows the 3D editing gizmo for a SectionPlane.
+    }
+
+    sectionPlanes.setOverviewVisible(true); // Shows #sectionPlanesOverviewCanvas
+}
+
+function disableSectionPlanByClick() {
+    sectionPlanByClick = false;
+
+    lastVisibleSectionPlanId = sectionPlanes.getShownControl();
+
+    sectionPlanes.hideControl(); // Hides the 3D SectionPlane editing gizmo if shown.
+    sectionPlanes.setOverviewVisible(false); // Hides #sectionPlanesOverviewCanvas
+}
+
+function disableSectionPlan() {
+    lastVisibleSectionPlanId = sectionPlanes.getShownControl();
+
+    sectionPlanes.hideControl(); // Hides the 3D SectionPlane editing gizmo if shown.
+    sectionPlanes.setOverviewVisible(false); // Hides #sectionPlanesOverviewCanvas
+}
+
+function bindBtnToggleSidebarTreeView() {
+    $(document).on('click', '#btnToggleSidebarTreeView', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            openSidebarTreeView();
+        } else {
+            $('#treeViewContainerWrap').hide();
+            $('body').removeClass('treeview-expanded');
+            // $(window).trigger('resize');
+        }
+    });
+}
+
+function bindBtnToggleSidebarStoreyViews() {
+    $(document).on('click', '#btnToggleSidebarStoreyViews', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            $('#treeViewContainerWrap').hide();
+            $('#btnToggleSidebarTreeView').removeClass('toggled');
+            $('body').removeClass('treeview-expanded');
+
+            $('#storeyViewsSidebar').show();
+        } else {
+            $('#storeyViewsSidebar').hide();
+        }
+    });
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Mouse over entities to highlight them
+//------------------------------------------------------------------------------------------------------------------
+
+var lastEntity = null;
+
+viewer.cameraControl.on("hover", function (pickResult) {
+    if (pickResult) {
+        if (!lastEntity || pickResult.entity.id !== lastEntity.id) {
+            if (lastEntity) {
+                lastEntity.highlighted = false;
+            }
+            lastEntity = pickResult.entity;
+            pickResult.entity.highlighted = true;
+        }
+    } else {
+        if (lastEntity) {
+            lastEntity.highlighted = false;
+            lastEntity = null;
+        }
+    }
+});
+
+//------------------------------------------------------------------------------------------------------------------
+// TreeView Panel resizable
+//------------------------------------------------------------------------------------------------------------------
+function initTreeViewPanelResizable() {
+    $('#treeViewContainerWrap').resizable({
+        handles: "e",
+        minWidth: 150
+    });
+}
+
+function initSidebarResizable() {
+    $('#sidebarWrap').resizable({
+        handles: "w",
+        minWidth: 150,
+        resize: function(event, ui) {
+            $('#navCubeCanvas').css('right', $('#sidebarWrap').width() + 10);
+            $('#sectionPlanesOverviewCanvas').css('right', $('#sidebarWrap').width() + 10);
+        }
+    });
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// AngleMeasurementsPlugin
+//------------------------------------------------------------------------------------------------------------------
+//------------------------------------------------------------------------------------------------------------------
+// Create a AngleMeasurementsPlugin, with which we'll create AngleMeasurements
+//------------------------------------------------------------------------------------------------------------------
+const angleMeasurements = new AngleMeasurementsPlugin(viewer);
+
+//------------------------------------------------------------------------------------------------------------------
+// 1. Load Predefined AngleMeasurements (from assets/data/angle.measurements.data.js)
+//------------------------------------------------------------------------------------------------------------------
+
+function createAngleMeasurements(angleMeasurementsData) {
+    var angleMeasurements = [];
+    $.each(angleMeasurementsData,function(index,value){
+        angleMeasurements.push(createAngleMeasurementItem(value));
+    });
+
+    return angleMeasurements;
+}
+
+function createAngleMeasurementItem(angleMeasurementItemData) {
+    var angleMeasurementsItem = angleMeasurements.createMeasurement({
+        id: angleMeasurementItemData.id,
+        origin: {
+            entity: viewer.scene.objects[angleMeasurementItemData.origin.entity],
+            worldPos: angleMeasurementItemData.origin.worldPos
+        },
+        corner: {
+            entity: viewer.scene.objects[angleMeasurementItemData.corner.entity],
+            worldPos: angleMeasurementItemData.corner.worldPos
+        },
+        target: {
+            entity: viewer.scene.objects[angleMeasurementItemData.target.entity],
+            worldPos: angleMeasurementItemData.target.worldPos
+        },
+        visible: true
+    });
+
+    return angleMeasurementsItem;
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// 2. Create AngleMeasurements by Click
+//------------------------------------------------------------------------------------------------------------------
+
+function bindBtnToggleAngleMeasurements() {
+    $(document).on('click', '#btnToggleAngleMeasurements', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            $('#btnCreateAngleMeasurements').removeClass('toggled');
+            disableAngleMeasurementsByClick();
+            disableAngleMeasurements();
+        } else {
+            enableAngleMeasurements();
+        }
+    });
+}
+
+function enableAngleMeasurements() {
+    $.each(angleMeasurements.measurements, function(index) {
+        this.visible = true;
+    });
+}
+
+function disableAngleMeasurements() {
+    $.each(angleMeasurements.measurements, function(index) {
+        this.visible = false;
+    });
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// StoreyViews
+//------------------------------------------------------------------------------------------------------------------
+const storeyViewsPlugin = new StoreyViewsPlugin(viewer);
+
+function initStoreyViews() {
+    // Make all doors transparent
+    viewer.scene.setObjectsOpacity(viewer.metaScene.getObjectIDsByType("IfcDoor"), 0.3);
+    createStoreyMapsMenu();
+}
+
+function createStoreyMapsMenu() {
+
+    const cameraMemento = new CameraMemento(); // Saves 3D perspective camera to restore
+    cameraMemento.saveCamera(viewer.scene);
+
+    const storeyDiv = document.getElementById("storeyViewsContainer");
+    const storeyIds = Object.keys(storeyViewsPlugin.storeys);
+
+    const canStandOnTypes = { // IFC types we can stand on in first-person mode
+        IfcSlab: true,
+        IfcStair: true,
+        IfcFloor: true,
+        IfcFooting: true
+    };
+
+    for (var i = 0, len = storeyIds.length; i < len; i++) {
+
+        const storeyId = storeyIds[i];
+
+        const storeyMap = storeyViewsPlugin.createStoreyMap(storeyId, {
+            format: "png",
+            width: 300,
+            useObjectStates: true
+        });
+
+        const img = document.createElement("img");
+        img.src = storeyMap.imageData;
+        img.style.border = "1px solid #000000";
+        img.style.background = "lightblue";
+        img.style.width = storeyMap.width + "px";
+        img.style.height = storeyMap.height + "px";
+        img.style.opacity = 0.8;
+
+        storeyDiv.appendChild(img);
+
+        img.onmouseenter = () => {
+            img.style.cursor = "default";
+        };
+
+        img.onmousemove = (e) => {
+            img.style.cursor = "default";
+            const imagePos = [e.offsetX, e.offsetY];
+            const pickResult = storeyViewsPlugin.pickStoreyMap(storeyMap, imagePos, {});
+            if (pickResult) {
+                const entity = pickResult.entity;
+                const metaObject = viewer.metaScene.metaObjects[entity.id];
+                if (metaObject) {
+                    if (canStandOnTypes[metaObject.type]) {
+                        img.style.cursor = "pointer";
+                    }
+                }
+            }
+        };
+
+        img.onmouseleave = (e) => {
+            img.style.cursor = "default";
+        };
+
+        const worldPos = math.vec3();
+
+        img.onclick = (e) => {
+            const imagePos = [e.offsetX, e.offsetY];
+            const pickResult = storeyViewsPlugin.pickStoreyMap(storeyMap, imagePos, {
+                pickSurface: true
+            });
+
+            if (pickResult) {
+                worldPos.set(pickResult.worldPos);
+
+                //pickResult.entity.highlighted = true;
+
+                // Set camera vertical position at the mid point of the storey's vertical
+                // extents - note how this is adapts to whichever of the X, Y or Z axis is
+                // designated the World's "up" axis
+
+                const camera = viewer.scene.camera;
+                const idx = camera.xUp ? 0 : (camera.yUp ? 1 : 2); // Find the right axis for "up"
+                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;
+
+    getJSON(compareModelUrl, metaModelDataUrl, function(data) {
+
+        window.model2DataUrl = metaModelDataUrl;
+
+        var settings = {
+            id: Date.now(),
+            src: modelUrl,
+            metaModelJSON: data,
+            edges: true,
+            performance: true,
+            position: [0, 0, 0]
+        };
+
+        if (isSideBySide) {
+            settings.position = [-55, 0, 0];
+        }
+
+        var model2 = undefined;
+        if (srcModel.endsWith('.xkt')) {
+            model2 = xktLoader.load(settings);
+        } else {
+            model2 = gltfLoader.load(settings);
+        }
+
+        var metaObj = data.metaObjects;
+        var result = [];
+        for (var id in metaObj) {
+            if (!metaObj.hasOwnProperty(id)) continue;
+            result[metaObj[id].id] = metaObj[id];
+        }
+        window.model2 = model2;
+        window.model2.customMeta = result;
+
+        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();
+        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(arObjId, opacity);
+        }
+        colorizeArObject(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(arObjId, false);
+    }
+
+    if (result['new'].length) {
+        arObjId = result['new'];
+        color = [1.0, 0.0, 0.8]; // TODO: new Model unique-objects color
+        colorizeArObject(arObjId, color);
+    }
+}
+
+// Xkt
+/*function highlightModelsDifference(result) {
+    var color = [1.0, 0.0, 0.8];
+    $.each(result, function(modelId, arObj) {
+        if(arObj.length > 0) {
+            $.each(arObj, function(index, obj) {
+                colorizeObject(obj.id, 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);
+}
+
+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 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 ViewFitAll(viewer) {
+    viewer.cameraFlight.flyTo({
+        projection: "perspective",
+        aabb: viewer.scene.getAABB({}),
+        duration: 0.5
+    });
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Distance Measurements Plugin
+//------------------------------------------------------------------------------------------------------------------
+const distanceMeasurements = new DistanceMeasurementsPlugin(viewer);
+
+//------------------------------------------------------------------------------------------------------------------
+// Preload Distance Measurements
+//------------------------------------------------------------------------------------------------------------------
+function createDistanceMeasurements(distanceMeasurementsData) {
+    var angleMeasurements = [];
+    $.each(distanceMeasurementsData,function(index,value){
+        angleMeasurements.push(createDistanceMeasurementItem(value));
+    });
+
+    return angleMeasurements;
+}
+
+function createDistanceMeasurementItem(measurement) {
+    distanceMeasurements.createMeasurement({
+        id: measurement.id, // TODO
+        origin: {
+            entity: viewer.scene.objects[measurement.origin.entity],
+            worldPos: measurement.origin.worldPos
+        },
+        target: {
+            entity: viewer.scene.objects[measurement.target.entity],
+            worldPos: measurement.target.worldPos
+        },
+        visible: measurement.visible,
+        wireVisible: measurement.wireVisible
+    });
+}
+
+
+//------------------------------------------------------------------------------------------------------------------
+// Distance Measurements by Click
+//------------------------------------------------------------------------------------------------------------------
+
+function bindBtnCreateDistanceMeasurements() {
+    $(document).on('click', '#btnCreateDistanceMeasurements', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            $('#btnCreateNotes').removeClass('toggled');
+            annotationByClick = false;
+
+            $('#btnCreateSectionPlan').removeClass('toggled');
+            disableSectionPlanByClick();
+            disableAngleMeasurementsByClick();
+
+            enableDistanceMeasurements();
+            $('#btnToggleDistanceMeasurements').removeClass('toggled');
+
+            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;
+    });
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// PropertySets
+//------------------------------------------------------------------------------------------------------------------
+function showPropertyInspector(pickResult) {
+    var metaObject;
+    var model = getPickResultModel(pickResult);
+	var objectId = pickResult.entity.id;
+
+    if (model && model.customMeta) {
+
+
+        if (model.customMeta[objectId]) {
+            metaObject = window.model.customMeta[objectId];
+        } else if (pickResult.entity._parentNode && pickResult.entity._parentNode.id && model.customMeta[pickResult.entity._parentNode.id]) {
+            metaObject = window.model.customMeta[pickResult.entity._parentNode.id];
+        }
+
+        if(metaObject) {
+            setPropertySets(metaObject, model.dictionaryName);
+        } else {
+            return false;
+        }
+    } else {
+		setPropertyBDSets(pickResult.entity.id, model.fileVersion);
+
+        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 setPropertyBDSets(id, version) {
+    const html = [];
+
+    html.push('<div class="element-attributes">');
+    html.push('</div>');
+
+	BIMModel.GetPropertyList(id,
+		(propertySets) => {
+			addPropertySet(propertySets, html);
+		});
+
+
+    $('#propInspector .prop-inspector-content')[0].innerHTML = html.join("");
+    $('.xeokit-accordion-container').accordion({
+        collapsible: true,
+        heightStyle: "content"
+    });
+    $('#propInspector').show();
+}
+
+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"
+	});
+	$('#propInspector').show();
+}
+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>');
+
+		addPropertySet(propertySets, html);
+    }
+    $('#propInspector .prop-inspector-content')[0].innerHTML = html.join("");
+    $('.xeokit-accordion-container').accordion({
+        collapsible: true,
+        heightStyle: "content"
+    });
+    $('#propInspector').show();
+}
+
+function bindPropInspectorClose() {
+    $('.prop-inspector-close').on('click', function() {
+        $('#propInspector').hide();
+    })
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// PropertySets resizable
+//------------------------------------------------------------------------------------------------------------------
+function initPropertySetsResizable() {
+    $('#propInspector').resizable({
+        handles: "w",
+        minWidth: 150
+    });
+}
+
+//------------------------------------------------------------------------------------------------------------------
+//
+//------------------------------------------------------------------------------------------------------------------
+
+BIMCommon.GetFileItem = (callback) => {
+
+    const item = {
+        ModelPath: context.filePath,
+        SiteId: context.file.siteId,
+        ListId: context.file.listId,
+        UniqueId: context.file.id,
+        FileVersionList: [],
+        Path: context.filePath,
+        ...context.file
+    };
+   
+    if (callback) {
+        callback(item);
+    }
+}
+
+BIMCommon.CreateWebServerUrl = () => {
+    return 'http://79.143.70.197/Design';
+};
+
+BIMAnnotation.GetNote = (callback) => {
+    callback([]);
+}
+
+BIMModel.GetParentIdList = (elementId, recurse, isGeometry, callback) => {
+    context.getParentIdList(elementId).then(res => {
+        if (callback) {
+            callback(res);
+        }
+    })
+}
+
+BIMModel.GetPropertyList = (elementId, callback) => {
+
+    const getValue = (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) {
+            return property.ValueReal;
+        }
+    }
+
+    context.getPropertyList(elementId).then(res => {
+        let groups = [];
+
+        for (let property of res) {
+            let existingGroups = groups.filter(group => group.name == property.GroupName);
+            if (existingGroups.length > 0) {
+                existingGroups[0].properties.push({ name: property.Name, value: getValue(property) });
+            }
+            else {
+                let newGroup = {
+                    name: property.GroupName,
+                    properties: [],
+                };
+                newGroup.properties.push({ name: property.Name, value: getValue(property) });
+
+
+                groups.push(newGroup);
+            }
+        }
+
+        callback(groups);
+    })
+}
+
+BIMModel.GetChildList = (elementId, recurse, isGeometry, callback) => {
+    let data = {
+        recurse: recurse,
+        isGeometry: isGeometry
+    }
+    context.getChildList(elementId, data).then(res => {
+        if (callback) {
+            callback(res);
+        }
+    });
+}
+
+BIMModel.GetChildIdList = (elementId, recurse, isGeometry, callback) => {
+    let data = {
+        recurse: recurse,
+        isGeometry: isGeometry
+    };
+    context.getChildIdList(elementId, data).then(res => {
+        if (callback) {
+            callback(res);
+        }
+    });
+}
+
+function saveNote(pickResult) {
+
+}
+
+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]);
+
+    var eye = viewer.camera.eye;
+    markup.eye = [];
+    markup.eye.push(eye[0]);
+    markup.eye.push(eye[1]);
+    markup.eye.push(eye[2]);
+
+    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]);
+
+    return markup;
+}
+
+function createAnnotationByClick(pickResult) {
+    let data = createMarkupData(pickResult);
+    context.onCreateIssue(data);
+    hidePropInspector();
+    expandSidebarIssueDetail();
+}
+
+function bindBtnToggleCreateNotes() {
+    $(document).on('click', '#btnCreateNotes', function () {
+        $(this).toggleClass('toggled');
+
+        if ($(this).hasClass('toggled')) {
+            $('#btnCreateSectionPlan').removeClass('toggled');
+            disableSectionPlanByClick();
+            disableAngleMeasurementsByClick();
+            disableDistanceMeasurementsByClick();
+            showAnnotationMarkers();
+            $('#btnToggleNotes').removeClass('show');
+            collapseSidebarNotes();
+            $('#btnToggleSidebarNotes').removeClass('toggled');
+            annotationByClick = true;
+        } else {
+            annotationByClick = false;
+        }
+    });
+}
+
+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 {
+            $('#navCubeCanvas').css('right', 10);
+            $('#sectionPlanesOverviewCanvas').css('right', 10);
+            $('.sidebar').hide();
+            $('body').removeClass('sidebar-expanded');
+        }
+    });
+}
+
+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: true,
+        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 && markup.entity.id) {
+        options.entity = markup.entity.id;
+    }
+
+    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) {
+
+        let item = e.detail.itemList[0];
+        let data = getMarkupData(item);
+        annotations.destroyAnnotation(item.fieldValueMap.item_id);
+        createNote(data);
+
+        const itemId = {
+            id: item.id,
+            contentTypeId: item.contentTypeId,
+            listId: item.listId,
+            parentId: item.parentId,
+            siteId: item.siteId
+        };
+
+        let event = new CustomEvent('vitro.item.changed', {
+            detail: {
+                itemIdList: [itemId],
+                listId: item.listId
+            }
+        });
+        window.dispatchEvent(event);
+    }
+
+    if (e.type === context.deleteIssueEvent) {
+
+        let item = e.detail.itemList[0];
+        annotations.destroyAnnotation(item.fieldValueMap.item_id);
+
+        if ($('.sidebar').is(':visible')) {
+            initSidebarNotes();
+        }
+    }
+}
+
+function goToNoteMarker(issue) {
+    var annotation = annotations.annotations[issue.id];
+    console.log('annotation', annotation);
+    viewer.cameraFlight.flyTo(annotation);
+    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() {
+    $('#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');
+}
+
+function showPropertyInspector(pickResult) {
+    var metaObject;
+    var model = getPickResultModel(pickResult);
+    var objectId = pickResult.entity.id;
+
+    collapseSidebarIssueDetail();
+    collapseSidebarNotes();
+    $('#btnToggleSidebarNotes').removeClass('toggled');
+
+    if (model && model.customMeta) {
+
+
+        if (model.customMeta[objectId]) {
+            metaObject = window.model.customMeta[objectId];
+        } else if (pickResult.entity._parentNode && pickResult.entity._parentNode.id && model.customMeta[pickResult.entity._parentNode.id]) {
+            metaObject = window.model.customMeta[pickResult.entity._parentNode.id];
+        }
+
+        if (metaObject) {
+            setPropertySets(metaObject, model.dictionaryName);
+        } else {
+            return false;
+        }
+    } else {
+        setPropertyBDSets(pickResult.entity.id, model.fileVersion);
+
+        return false;
+    }
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Load Annotations
+//------------------------------------------------------------------------------------------------------------------
+function loadAnnotations() {
+    context.getIssueList().then(issueList => {
+        issueList.map(issue => {
+            let data = getMarkupData(issue.item);
+            data.entity = viewer.scene.objects[data.entity];
+            annotations.createAnnotation(data);
+        })
+    })
+}
+function highlightSidebarNote(noteId) {
+    var noteWrap = $('#vitro-issue-tile-' + noteId);
+
+    if (!noteWrap.position()) {
+        setTimeout(() => {
+            highlightSidebarNote(noteId);
+        }, 500);
+
+        return;
+    }
+
+    doHighlightSidebarNote(noteWrap);
+}
+
+function doHighlightSidebarNote(noteWrap) {
+    var sidebarContent = $('.sidebar-content');
+    sidebarContent.children().removeClass('vitro-active');
+    noteWrap.addClass('vitro-active');
+    var sidebarOffsetTop = parseInt(sidebarContent[0].offsetTop);
+    var sidebarScrollTop = parseInt(sidebarContent[0].scrollTop);
+    sidebarContent.animate({
+        scrollTop: noteWrap.position().top - sidebarOffsetTop + sidebarScrollTop
+    }, 1000);
+}
+
+function createSidebarNotesItemHeader(noteData) {
+
+}
+
+function hidePropInspector() {
+    $('#propInspector').hide();
+}
+
+//------------------------------------------------------------------------------------------------------------------
+// Do action wherever we click on an object
+//------------------------------------------------------------------------------------------------------------------
+
+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);
+    }
+});
+
+//------------------------------------------------------------------------------------------------------------------
+// Show Object Properties on Click
+//------------------------------------------------------------------------------------------------------------------
+viewer.cameraControl.on("picked", (pickResult) => {
+    if (!pickResult.entity) {
+        return;
+    }
+
+    if (pickResult.entity.id && !$('#btnCreateNotes').hasClass('toggled')) {
+        showPropertyInspector(pickResult);
+    }
+});
+
+/*viewer.cameraControl.on("pickedNothing", () => {
+    return false;
+});*/
+
+//------------------------------------------------------------------------------------------------------------------
+
+window.viewer = viewer;
+
+BIMCommon.GetFileItem(function (res) {
+    BIMCommon.FileItem = res;
+
+    var fileItem = BIMCommon.FileItem;
+
+    var versionList = BIMCommon.FileItem.FileVersionList;
+    if (versionList.length == 0) {
+        $('#btnToggleCompare').hide();
+    } else {
+        $('#btnToggleCompare').show();
+    }
+
+    var filePath = fileItem.Path;
+    var fileName = context.file.fieldValueMap?.name;
+
+    document.title += " - " + fileName;
+    
+    if (fileItem.FileVersion)
+    {
+        $('#fileVersion').text("[v" + fileItem.FileVersion + "]");
+    }
+    srcModel = fileItem.ModelPath;
+    srcMetaModelData = fileItem.MetaModelDataPath;
+    fileVersion = fileItem.FileVersion;
+    fileVersionPath = filePath;
+    hideXeokitSpinner();
+    doLoadModel();
+});
+
+function init() {
+    bindBtnToggleSidebarNotes();
+    bindSidebarNotesClose();
+    bindDeleteNoteEventHandler();
+
+    bindBtnToggleSidebarTreeView();
+
+    fixNotesTextareaBlur();
+
+    bindBtnToggleCreateNotes();
+    bindBtnCreateSectionPlan();
+    bindBtnClearSectionPlan();
+    bindBtnToggleSectionPlan();
+    bindToggleNotes();
+
+    bindBtnCreateAngleMeasurements();
+    bindBtnToggleAngleMeasurements();
+
+    initTreeViewPanelResizable();
+    initSidebarResizable();
+
+    bindBtnToggleSidebarStoreyViews();
+
+    bindBtnSaveBCFViewpointJSON();
+    bindBtnLoadBCFViewpointJSON();
+
+    bindBtnCreateDistanceMeasurements();
+    bindBtnToggleDistanceMeasurements();
+
+    bindPropInspectorClose();
+    initPropertySetsResizable();
+
+    bindBtnCompareOneOverOne();
+    bindBtnCompareSideBySide();
+    bindBtnClearComparison();
+}
+
+init();
+
+var userLocale =
+    navigator.languages && navigator.languages.length
+        ? navigator.languages[0]
+        : navigator.language;
+
+document.webL10n.setLanguage(userLocale, function () {
+    document.webL10n.translate();
+});
+}