@abi-software/scaffoldvuer 0.1.54-beta.3 → 0.1.55

package/dist/scaffoldvuer.umd.js

@@ -96,10 +96,14 @@ return /******/ (function(modules) { // webpackBootstrap
 /************************************************************************/
 /******/ ({
 
-/***/ "0481":
-/***/ (function(module, exports, __webpack_require__) {
+/***/ "00f9":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_1_id_7c593a3d_prod_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("2678");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_1_id_7c593a3d_prod_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_1_id_7c593a3d_prod_lang_css___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
 
-// extracted by mini-css-extract-plugin
 
 /***/ }),
 
@@ -107,11 +111,9 @@ return /******/ (function(modules) { // webpackBootstrap
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__("dc50");
-
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-
 module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
@@ -224,12 +226,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 137);
+/******/ 	return __webpack_require__(__webpack_require__.s = 139);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 137:
+/***/ 139:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -302,25 +304,16 @@ row.install = function (Vue) {
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__("9b22");
-
 __webpack_require__("4933");
-
 __webpack_require__("97d3");
-
 __webpack_require__("2ff9");
-
 __webpack_require__("4ccb");
-
 __webpack_require__("9bb5");
-
 __webpack_require__("1a25");
-
 __webpack_require__("4362");
-
 function _iterableToArray(iter) {
   if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-
 module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
@@ -441,12 +434,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 131);
+/******/ 	return __webpack_require__(__webpack_require__.s = 133);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 131:
+/***/ 133:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -456,7 +449,7 @@ __webpack_require__.r(__webpack_exports__);
 var resize_event_ = __webpack_require__(16);
 
 // EXTERNAL MODULE: external "element-ui/lib/utils/scrollbar-width"
-var scrollbar_width_ = __webpack_require__(38);
+var scrollbar_width_ = __webpack_require__(39);
 var scrollbar_width_default = /*#__PURE__*/__webpack_require__.n(scrollbar_width_);
 
 // EXTERNAL MODULE: external "element-ui/lib/utils/util"
@@ -771,7 +764,7 @@ module.exports = __webpack_require__("8122");
 
 /***/ }),
 
-/***/ 38:
+/***/ 39:
 /***/ (function(module, exports) {
 
 module.exports = __webpack_require__("e62d");
@@ -883,7 +876,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 63);
+/******/ 	return __webpack_require__(__webpack_require__.s = 64);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -990,7 +983,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 29:
+/***/ 30:
 /***/ (function(module, exports) {
 
 module.exports = __webpack_require__("299c");
@@ -1004,14 +997,14 @@ module.exports = __webpack_require__("d010");
 
 /***/ }),
 
-/***/ 49:
+/***/ 50:
 /***/ (function(module, exports) {
 
 module.exports = __webpack_require__("e450");
 
 /***/ }),
 
-/***/ 63:
+/***/ 64:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1153,7 +1146,7 @@ render._withStripped = true
 // CONCATENATED MODULE: ./packages/slider/src/main.vue?vue&type=template&id=32708644&
 
 // EXTERNAL MODULE: external "element-ui/lib/input-number"
-var input_number_ = __webpack_require__(49);
+var input_number_ = __webpack_require__(50);
 var input_number_default = /*#__PURE__*/__webpack_require__.n(input_number_);
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/slider/src/button.vue?vue&type=template&id=e72d2ad2&
@@ -1265,7 +1258,7 @@ buttonvue_type_template_id_e72d2ad2_render._withStripped = true
 // CONCATENATED MODULE: ./packages/slider/src/button.vue?vue&type=template&id=e72d2ad2&
 
 // EXTERNAL MODULE: external "element-ui/lib/tooltip"
-var tooltip_ = __webpack_require__(29);
+var tooltip_ = __webpack_require__(30);
 var tooltip_default = /*#__PURE__*/__webpack_require__.n(tooltip_);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/slider/src/button.vue?vue&type=script&lang=js&
@@ -2001,32 +1994,33 @@ main.install = function (Vue) {
 
 /******/ });
 
-/***/ }),
-
-/***/ "21a1":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_OpacityControls_vue_vue_type_style_index_0_id_4c00a30f_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("bb28");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_OpacityControls_vue_vue_type_style_index_0_id_4c00a30f_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_OpacityControls_vue_vue_type_style_index_0_id_4c00a30f_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "2236":
 /***/ (function(module, exports, __webpack_require__) {
 
 var arrayLikeToArray = __webpack_require__("5a43");
-
 function _arrayWithoutHoles(arr) {
   if (Array.isArray(arr)) return arrayLikeToArray(arr);
 }
-
 module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
 
+/***/ "2439":
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es.array.push.js");
+
+/***/ }),
+
+/***/ "2678":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "299c":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -2114,12 +2108,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 136);
+/******/ 	return __webpack_require__(__webpack_require__.s = 138);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 136:
+/***/ 138:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2585,7 +2579,7 @@ module.exports = require("core-js/modules/es.symbol.iterator.js");
 
 /***/ }),
 
-/***/ "3bcb":
+/***/ "3608":
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
@@ -2679,7 +2673,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 115);
+/******/ 	return __webpack_require__(__webpack_require__.s = 116);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -2786,7 +2780,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 115:
+/***/ 116:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3062,17 +3056,12 @@ module.exports = require("core-js/modules/es.array.map.js");
 /***/ (function(module, exports, __webpack_require__) {
 
 var arrayWithoutHoles = __webpack_require__("2236");
-
 var iterableToArray = __webpack_require__("11b0");
-
 var unsupportedIterableToArray = __webpack_require__("6613");
-
 var nonIterableSpread = __webpack_require__("0676");
-
 function _toConsumableArray(arr) {
   return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
 }
-
 module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
@@ -3481,7 +3470,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 61);
+/******/ 	return __webpack_require__(__webpack_require__.s = 62);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -3644,14 +3633,14 @@ module.exports = __webpack_require__("8122");
 
 /***/ }),
 
-/***/ 31:
+/***/ 32:
 /***/ (function(module, exports) {
 
 module.exports = __webpack_require__("2a5e");
 
 /***/ }),
 
-/***/ 33:
+/***/ 34:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3902,7 +3891,7 @@ component.options.__file = "packages/select/src/option.vue"
 
 /***/ }),
 
-/***/ 37:
+/***/ 38:
 /***/ (function(module, exports) {
 
 module.exports = __webpack_require__("8bbc");
@@ -3930,7 +3919,7 @@ module.exports = __webpack_require__("6b7c");
 
 /***/ }),
 
-/***/ 61:
+/***/ 62:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4559,10 +4548,10 @@ if (false) { var api; }
 component.options.__file = "packages/select/src/select-dropdown.vue"
 /* harmony default export */ var select_dropdown = (component.exports);
 // EXTERNAL MODULE: ./packages/select/src/option.vue + 4 modules
-var src_option = __webpack_require__(33);
+var src_option = __webpack_require__(34);
 
 // EXTERNAL MODULE: external "element-ui/lib/tag"
-var tag_ = __webpack_require__(37);
+var tag_ = __webpack_require__(38);
 var tag_default = /*#__PURE__*/__webpack_require__.n(tag_);
 
 // EXTERNAL MODULE: external "element-ui/lib/scrollbar"
@@ -4581,7 +4570,7 @@ var clickoutside_default = /*#__PURE__*/__webpack_require__.n(clickoutside_);
 var resize_event_ = __webpack_require__(16);
 
 // EXTERNAL MODULE: external "element-ui/lib/utils/scroll-into-view"
-var scroll_into_view_ = __webpack_require__(31);
+var scroll_into_view_ = __webpack_require__(32);
 var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_view_);
 
 // EXTERNAL MODULE: external "element-ui/lib/utils/util"
@@ -5816,18 +5805,14 @@ exports.PopupManager = _popupManager2.default;
 /***/ (function(module, exports, __webpack_require__) {
 
 var _typeof = __webpack_require__("7037").default;
-
+__webpack_require__("2439");
 __webpack_require__("db0a");
-
 __webpack_require__("ea64");
-
 __webpack_require__("f3b8");
-
-var THREE = __webpack_require__("9206").THREE; // Current model's associate data, data fields, external link, nerve map
+var THREE = __webpack_require__("9206").THREE;
+// Current model's associate data, data fields, external link, nerve map
 // informations,
 // these are proived in the organsFileMap array.
-
-
 var OrgansSceneData = function OrgansSceneData() {
   this.currentName = "";
   this.currentSystem = "";
@@ -5842,6 +5827,7 @@ var OrgansSceneData = function OrgansSceneData() {
   this.currentTime = 0.0;
   this.timeVarying = false;
 };
+
 /**
  * Viewer of 3D-organs models. Users can toggle on/off different views. Data is
  * displayed instead if models are not available.
@@ -5856,15 +5842,10 @@ var OrgansSceneData = function OrgansSceneData() {
  * @author Alan Wu
  * @returns {PJP.OrgansViewer}
  */
-
-
 var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
   var _this2 = this;
-
   __webpack_require__("8278").RendererModule.call(this);
-
   var _this = this;
-
   var pickerScene = undefined;
   this.sceneData = new OrgansSceneData();
   var timeChangedCallbacks = new Array();
@@ -5874,50 +5855,40 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
   var modelsLoader = ModelsLoaderIn;
   this.NDCCameraControl = undefined;
   _this.typeName = "Organ Viewer";
-
   this.getSceneData = function () {
     return _this.sceneData;
   };
+
   /**
    * Used to update internal timer in scene when time slider has changed.
    */
-
-
   this.updateTime = function (value) {
     var duration = 6000;
     if (_this.scene) duration = _this.scene.getDuration();
     var actualTime = value / 100.0 * duration;
-
     if (!_this.sceneData.nerveMapIsActive) {
       if (pickerScene) pickerScene.setMorphsTime(actualTime);
       if (_this.scene) _this.scene.setMorphsTime(actualTime);
     }
-
     _this.sceneData.currentTime = value;
   };
+
   /**
    * Update the time slider and other renderers/scenes when time has changed.
    */
-
-
   var preRenderTimeUpdate = function preRenderTimeUpdate() {
     var duration = 3000;
     if (_this.scene) duration = _this.scene.getDuration();
-
     var currentTime = _this.zincRenderer.getCurrentTime();
-
     for (var i = 0; i < timeChangedCallbacks.length; i++) {
       timeChangedCallbacks[i](currentTime);
     }
-
     if (!_this.sceneData.nerveMapIsActive && pickerScene) pickerScene.setMorphsTime(currentTime);
     if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader) _this.sceneData.nerveMap.additionalReader.setTime(currentTime / duration);
     _this.sceneData.currentTime = currentTime / duration * 100.0;
   };
-
   this.toggleSyncControl = function (flag, rotateMode) {
     var cameraControl = _this2.scene.getZincCameraControls();
-
     if (flag) {
       cameraControl.resetView();
       _this2.NDCCameraControl = cameraControl.enableSyncControl();
@@ -5928,83 +5899,67 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
       cameraControl.setRotationMode("free");
     }
   };
-
   this.isSyncControl = function () {
     return _this2.NDCCameraControl !== undefined;
   };
-
   this.setSyncControlZoomToBox = function (box) {
     if (_this2.NDCCameraControl) {
       _this2.NDCCameraControl.zoomToBox(box, 2);
     }
   };
-
   this.setSyncControlCallback = function (callback) {
     if (_this2.NDCCameraControl) {
       _this2.NDCCameraControl.setEventCallback(callback);
     }
   };
-
   this.setSyncControlCenterZoom = function (center, zoom) {
     if (_this2.NDCCameraControl) {
       _this2.NDCCameraControl.setCenterZoom(center, zoom);
     }
   };
-
   var postRenderSelectedCoordinatesUpdate = function postRenderSelectedCoordinatesUpdate() {
     if (_this.selectedCenter) {
       var vector = new THREE.Vector3();
       vector.copy(_this.selectedCenter);
-
       var coord = _this.scene.vectorToScreenXY(vector);
-
       _this.selectedScreenCoordinates.x = coord.x;
       _this.selectedScreenCoordinates.y = coord.y;
     }
   };
-
   var preRenderUpdateCallback = function preRenderUpdateCallback() {
     return function () {
       preRenderTimeUpdate();
     };
   };
-
   var postRenderUpdateCallback = function postRenderUpdateCallback() {
     return function () {
       postRenderSelectedCoordinatesUpdate();
     };
   };
+
   /**
    * Add a callback which will be called when time has changed
    */
-
-
   this.addTimeChangedCallback = function (callback) {
     if (_typeof(callback === "function")) timeChangedCallbacks.push(callback);
   };
-
   this.setTexturePos = function (value) {
     if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader) _this.sceneData.nerveMap.additionalReader.setSliderPos(value);
   };
-
   this.addSceneChangedCallback = function (callback) {
     if (_typeof(callback === "function")) {
       sceneChangedCallbacks.push(callback);
     }
   };
-
   this.addOrganPartAddedCallback = function (callback) {
     if (_typeof(callback === "function")) organPartAddedCallbacks.push(callback);
   };
-
   this.setFinishDownloadCallback = function (callback) {
     if (_typeof(callback === "function")) finishDownloadCallback = callback;
   };
-
   this.unsetFinishDownloadCallback = function () {
     finishDownloadCallback = undefined;
   };
-
   this.getNamedObjectsToScreenCoordinates = function (name, camera) {
     var vector = new THREE.Vector3();
     vector.setFromMatrixPosition(obj.matrixWorld);
@@ -6015,36 +5970,32 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
     vector.y = -(vector.y * heightHalf) + heightHalf;
     return vector;
   };
-
   var getIdObjectFromIntersect = function getIdObjectFromIntersect(intersected) {
     var id = undefined;
     var intersectedObject = undefined;
-
     if (intersected !== undefined) {
       if (intersected.object.userData && intersected.object.userData.isMarker) {
         intersectedObject = intersected.object.userData.parent.morph;
       } else {
         intersectedObject = intersected.object;
       }
-
       if (intersectedObject) {
         if (intersectedObject.name) {
           id = intersectedObject.name;
         } else {
           var annotations = _this.getAnnotationsFromObjects([intersectedObject]);
-
           if (annotations && annotations[0]) {
             id = annotations[0].data.group;
           }
         }
       }
     }
-
     return {
       "id": id,
       "object": intersectedObject
     };
   };
+
   /**
    * Callback function when a pickable object has been picked. It will then
    * call functions in tissueViewer and cellPanel to show corresponding
@@ -6052,159 +6003,130 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
    * 
    * @callback
    */
-
-
   var _pickingCallback = function _pickingCallback() {
     return function (intersects, window_x, window_y) {
       var intersected = _this.getIntersectedObject(intersects);
-
       var idObject = getIdObjectFromIntersect(intersected);
       var coords = {
         x: window_x,
         y: window_y
       };
-
       if (idObject.id) {
         if (idObject.object.userData.isGlyph) {
           if (idObject.object.name) _this.setSelectedByObjects([idObject.object], coords, true);else _this.setSelectedByZincObjects(idObject.object.userData.getGlyphset(), coords, true);
         } else {
           _this.setSelectedByObjects([idObject.object], coords, true);
         }
-
         return;
       } else {
         _this.setSelectedByObjects([], coords, true);
       }
     };
   };
+
   /**
    * Callback function when a pickable object has been hovered over.
    * 
    * @callback
    */
-
-
   var _hoverCallback = function _hoverCallback() {
     return function (intersects, window_x, window_y) {
       var intersected = _this.getIntersectedObject(intersects);
-
       var idObject = getIdObjectFromIntersect(intersected);
       var coords = {
         x: window_x,
         y: window_y
       };
-
       if (idObject.id) {
         _this.displayArea.style.cursor = "pointer";
-
         _this.setHighlightedByObjects([idObject.object], coords, true);
-
         return;
       } else {
         _this.displayArea.style.cursor = "auto";
-
         _this.setHighlightedByObjects([], coords, true);
       }
     };
   };
-
   var changeOrganPartsVisibilityForScene = function changeOrganPartsVisibilityForScene(scene, name, value, type) {
     if (type == "all" || type == "geometries") {
       var geometries = scene.findGeometriesWithGroupName(name);
-
       for (var i = 0; i < geometries.length; i++) {
         geometries[i].setVisibility(value);
       }
     }
-
     if (type == "all" || type == "glyphsets") {
       var glyphsets = scene.findGlyphsetsWithGroupName(name);
-
       for (var _i = 0; _i < glyphsets.length; _i++) {
         glyphsets[_i].setVisibility(value);
       }
     }
-
     if (type == "all" || type == "pointsets") {
       var pointsets = scene.findPointsetsWithGroupName(name);
-
       for (var _i2 = 0; _i2 < pointsets.length; _i2++) {
         pointsets[_i2].setVisibility(value);
       }
     }
-
     if (type == "all" || type == "lines") {
       var lines = scene.findLinesWithGroupName(name);
-
       for (var _i3 = 0; _i3 < lines.length; _i3++) {
         lines[_i3].setVisibility(value);
       }
     }
   };
+
   /**
    * Change visibility for parts of the current scene.
    */
-
-
   this.changeGeometriesVisibility = function (name, value) {
     changeOrganPartsVisibilityForScene(_this.scene, name, value, 'geometries');
     if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'geometries');
   };
+
   /**
    * Change visibility for parts of the current scene.
    */
-
-
   this.changeGlyphsetsVisibility = function (name, value) {
     changeOrganPartsVisibilityForScene(_this.scene, name, value, 'glyphsets');
     if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'glyphsets');
   };
+
   /**
    * Change visibility for parts of the current scene.
    */
-
-
   this.changeLinesVisibility = function (name, value) {
     changeOrganPartsVisibilityForScene(_this.scene, name, value, 'lines');
     if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'lines');
   };
+
   /**
    * Change visibility for parts of the current scene.
    */
-
-
   this.changePointsetsVisibility = function (name, value) {
     changeOrganPartsVisibilityForScene(_this.scene, name, value, 'pointsets');
     if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'pointsets');
   };
+
   /**
    * Change visibility for parts of the current scene.
    */
-
-
   this.changeOrganPartsVisibility = function (name, value, typeIn) {
     var type = "all";
     if (typeIn !== undefined) type = typeIn;
     changeOrganPartsVisibilityForScene(_this.scene, name, value, type);
     if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, type);
   };
-
   this.changeOrganPartsVisibilityCallback = function (name) {
     return function (value) {
       _this.changeOrganPartsVisibility(name, value);
     };
   };
-
   this.changeBackgroundColour = function (backgroundColourString) {
     var colour = new THREE.Color(backgroundColourString);
-
     if (_this.zincRenderer) {
       var internalRenderer = _this.zincRenderer.getThreeJSRenderer();
-
       internalRenderer.setClearColor(colour, 1);
     }
   };
-
   var addOrganPartToSceneData = function addOrganPartToSceneData(zincObject) {
     if (zincObject.isGeometry) {
       _this.sceneData.geometries.push(zincObject);
@@ -6216,12 +6138,10 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
       _this.sceneData.pointsets.push(zincObject);
     }
   };
-
   var addOrganPart = function addOrganPart(systemName, partName, useDefautColour, zincObject) {
     for (var i = 0; i < organPartAddedCallbacks.length; i++) {
       organPartAddedCallbacks[i](zincObject, _this.scene.isTimeVarying());
     }
-
     if (useDefautColour) modelsLoader.setGeometryColour(zincObject, systemName, partName);
     addOrganPartToSceneData(zincObject);
     var annotation = new (__webpack_require__("984d").annotation)();
@@ -6235,89 +6155,74 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
     };
     zincObject.userData["annotation"] = annotation;
   };
+
   /**
   * New organs geometry has been added to the scene, add UIs and make
   * sure the viewport is correct.
   */
-
-
   var _addOrganPartCallback = function _addOrganPartCallback(systemName, partName, useDefautColour) {
     return function (zincObject) {
       addOrganPart(systemName, partName, useDefautColour, zincObject);
     };
   };
-
   var downloadCompletedCallback = function downloadCompletedCallback() {
     return function () {
       _this.settingsChanged();
-
       _this.sceneData.timeVarying = _this.scene.isTimeVarying();
       if (finishDownloadCallback) finishDownloadCallback();
     };
   };
-
   var singleItemDownloadCompletedCallback = function singleItemDownloadCompletedCallback(systemName, partName, useDefautColour) {
     return function (geometry) {
       addOrganPart(systemName, partName, useDefautColour, geometry);
-
       _this.settingsChanged();
     };
   };
+
   /**
   * Toggle data field displays. Data fields displays flow/pressure and      <button @click="play">Play</button>
   * other activities of the organs.
   */
-
-
   this.updateFieldvisibility = function (dataFields, value) {
     for (var i = 0; i < dataFields.length; i++) {
       if (value != i) {
         var geometryName = dataFields[i].PartName;
-
         _this.changeOrganPartsVisibility(geometryName, false);
       }
     }
-
     if (value > -1) {
       var partName = dataFields[value].PartName;
-
       if (_this.scene.findGeometriesWithGroupName(partName).length > 0 || _this.scene.findGlyphsetsWithGroupName(partName).length > 0) {
         _this.changeOrganPartsVisibility(partName, true);
       } else {
         var partDetails = getOrganDetails(dataFields[value].SystemName, partName);
-
         if (partDetails != undefined) {
           _this.scene.loadMetadataURL(modelsLoader.getOrgansDirectoryPrefix() + "/" + partDetails.meta);
         }
       }
     }
   };
+
   /**
   * Return an array containing name(s) of species that also contains the
   * currently displayed organs.
   * 
   * @returns {Array} containing species name
   */
-
-
   this.getAvailableSpecies = function (currentSpecies, currentSystem, currentPart) {
     var availableSpecies = new Array();
     availableSpecies.push("none");
     var keysArray = Object.keys(organsFileMap);
-
     for (index in keysArray) {
       var species = keysArray[index];
-
       if (species != currentSpecies) {
         if (organsFileMap[species].hasOwnProperty(currentSystem) && organsFileMap[species][currentSystem].hasOwnProperty(currentPart)) {
           availableSpecies.push(species);
         }
       }
     }
-
     return availableSpecies;
   };
-
   var setSceneData = function setSceneData(speciesName, systemName, partName, organsDetails) {
     _this.sceneData.nerveMapIsActive = false;
     _this.sceneData.nerveMap = undefined;
@@ -6327,57 +6232,43 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
     _this.sceneData.currentSystem = systemName;
     _this.sceneData.currentPart = partName;
     _this.sceneData.currentTime = 0.0;
-
     _this.sceneData.geometries.splice(0);
-
     _this.sceneData.lines.splice(0);
-
     _this.sceneData.glyphsets.splice(0);
-
     _this.sceneData.pointsets.splice(0);
-
-    _this.sceneData.timeVarying = false; // This is used as title
-
+    _this.sceneData.timeVarying = false;
+    // This is used as title
     var name = "";
     if (speciesName) name = speciesName + "/";
     if (systemName) name = systemName + "/";
     if (partName) name = partName;
     _this.sceneData.currentName = name;
   };
-
   this.loadOrgansFromURL = function (url, speciesName, systemName, partName, viewURL, clearFirst) {
     if (_this.zincRenderer) {
       if (partName && _this.sceneData.metaURL !== url) {
         setSceneData(speciesName, systemName, partName, undefined);
         var name = _this.sceneData.currentName;
-
         var organScene = _this.zincRenderer.getSceneByName(name);
-
         if (organScene) {
           if (clearFirst) organScene.clearAll();
         } else {
           organScene = _this.zincRenderer.createScene(name);
         }
-
         for (var i = 0; i < sceneChangedCallbacks.length; i++) {
           sceneChangedCallbacks[i](_this.sceneData);
         }
-
         if (viewURL && viewURL != "") {
           _this.sceneData.viewURL = viewURL;
           organScene.loadViewURL(_this.sceneData.viewURL);
         } else {
           _this.sceneData.viewURL = undefined;
         }
-
         _this.sceneData.metaURL = url;
         organScene.loadMetadataURL(url, _addOrganPartCallback(systemName, partName, false), downloadCompletedCallback());
         _this.scene = organScene;
-
         _this.zincRenderer.setCurrentScene(organScene);
-
         _this.graphicsHighlight.reset();
-
         var zincCameraControl = organScene.getZincCameraControls();
         zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
         zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
@@ -6385,34 +6276,26 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
       }
     }
   };
-
   this.loadGLTFFromURL = function (url, partName, clearFirst) {
     if (_this.zincRenderer) {
       if (partName && _this.sceneData.metaURL !== url) {
         setSceneData(undefined, undefined, partName, undefined);
         var name = _this.sceneData.currentName;
-
         var organScene = _this.zincRenderer.getSceneByName(name);
-
         if (organScene) {
           if (clearFirst) organScene.clearAll();
         } else {
           organScene = _this.zincRenderer.createScene(name);
         }
-
         for (var i = 0; i < sceneChangedCallbacks.length; i++) {
           sceneChangedCallbacks[i](_this.sceneData);
         }
-
         _this.sceneData.viewURL = undefined;
         _this.sceneData.metaURL = url;
         organScene.loadGLTF(url, _addOrganPartCallback(undefined, partName, false), downloadCompletedCallback());
         _this.scene = organScene;
-
         _this.zincRenderer.setCurrentScene(organScene);
-
         _this.graphicsHighlight.reset();
-
         var zincCameraControl = organScene.getZincCameraControls();
         zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
         zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
@@ -6420,15 +6303,12 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
       }
     }
   };
-
   this.alignCameraWithSelectedObject = function (transitionTime) {
     var objects = _this.graphicsHighlight.getSelected();
-
     if (objects && objects[0] && objects[0].userData) {
       _this.scene.alignObjectToCameraView(objects[0].userData, transitionTime);
     }
   };
-
   this.exportSettings = function () {
     var settings = {};
     settings.name = _this.instanceName;
@@ -6440,43 +6320,34 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
     settings.dialog = "Organ Viewer";
     return settings;
   };
-
   this.importSettings = function (settings) {
     if (settings && settings.dialog == this.typeName) {
       _this.setName(settings.name);
-
       if (settings.metaURL !== undefined && settings.metaURL != "") {
         _this.loadOrgansFromURL(settings.metaURL, settings.species, settings.system, settings.part, settings.viewURL, true);
       } else {
         _this.loadOrgans(settings.species, settings.system, settings.part);
       }
-
       return true;
     }
-
     return false;
   };
+
   /**
    * initialise loading of the html layout for the organs panel, this is
    * called when the {@link PJP.OrgansViewer} is created.
    * 
    * @async
    */
-
-
   var initialise = function initialise() {
     _this.initialiseRenderer(undefined);
-
     if (_this.zincRenderer) {
       _this.zincRenderer.addPreRenderCallbackFunction(preRenderUpdateCallback());
-
       _this.zincRenderer.addPostRenderCallbackFunction(postRenderUpdateCallback());
     }
   };
-
   initialise();
 };
-
 OrgansViewer.prototype = Object.create(__webpack_require__("8278").RendererModule.prototype);
 exports.OrgansViewer = OrgansViewer;
 
@@ -6587,6 +6458,13 @@ exports.default = {
 
 /***/ }),
 
+/***/ "5636":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "5924":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -6840,16 +6718,24 @@ module.exports = require("core-js/modules/es.regexp.test.js");
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) {
     arr2[i] = arr[i];
   }
-
   return arr2;
 }
-
 module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
+/***/ }),
+
+/***/ "5d4b":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldTooltip_vue_vue_type_style_index_0_id_b7267e48_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("c399");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldTooltip_vue_vue_type_style_index_0_id_b7267e48_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldTooltip_vue_vue_type_style_index_0_id_b7267e48_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "5e32":
@@ -6863,160 +6749,121 @@ module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exp
 /***/ (function(module, exports, __webpack_require__) {
 
 var _toConsumableArray = __webpack_require__("448a").default;
-
+__webpack_require__("2439");
 var THREE = __webpack_require__("9206").THREE;
+
 /**
  * This module manages highlighted and selected objects in 3D modules. 
  * 
  * @class
  * @returns {exports.GraphicsHighlight}
  */
-
-
 exports.GraphicsHighlight = function () {
   var currentHighlightedObjects = [];
   var currentSelectedObjects = [];
   this.highlightColour = [1, 0, 0];
   this.selectColour = [0, 1, 0];
   this.originalColour = [0, 0, 0];
-
+  var _temp1 = [];
+  var _temp2 = [];
   var _this = this;
-
   var isDifferent = function isDifferent(array1, array2) {
     if (array1.length == 0 && array2.length == 0) return false;
-
     for (var i = 0; i < array1.length; i++) {
       var matched = false;
-
       for (var j = 0; j < array2.length; j++) {
         if (array1[i] === array2[j]) {
           matched = true;
         }
       }
-
       if (!matched) return true;
     }
-
     for (var _i = 0; _i < array2.length; _i++) {
       var _matched = false;
-
       for (var _j = 0; _j < array1.length; _j++) {
         if (array2[_i] === array1[_j]) {
           _matched = true;
         }
       }
-
       if (!_matched) return true;
     }
-
     return false;
   };
-
   var getUnmatchingObjects = function getUnmatchingObjects(objectsArray1, objectsArray2) {
-    var unmatchingObjects = [];
+    _temp1.length = 0;
     if (objectsArray2.length == 0) return objectsArray1;
-
     for (var i = 0; i < objectsArray1.length; i++) {
       var matched = false;
-
       for (var j = 0; j < objectsArray2.length; j++) {
         if (objectsArray1[i] === objectsArray2[j]) {
           matched = true;
         }
       }
-
-      if (!matched) unmatchingObjects.push(objectsArray1[i]);
+      if (!matched) _temp1.push(objectsArray1[i]);
     }
-
-    return unmatchingObjects;
+    return _temp1;
   };
-
   this.setHighlighted = function (objects) {
     var previousHighlightedObjects = currentHighlightedObjects;
-
-    _this.resetHighlighted(); // Selected object cannot be highlighted
-
-
+    _this.resetHighlighted();
+    // Selected object cannot be highlighted
     var array = getUnmatchingObjects(objects, currentSelectedObjects);
     var fullList = getFullListOfObjects(array);
-
     for (var i = 0; i < fullList.length; i++) {
       var _fullList$i$material$;
-
       if (fullList[i] && fullList[i].material && fullList[i].material.emissive) (_fullList$i$material$ = fullList[i].material.emissive).setRGB.apply(_fullList$i$material$, _toConsumableArray(_this.highlightColour));
     }
-
     currentHighlightedObjects = array;
     return isDifferent(currentHighlightedObjects, previousHighlightedObjects);
   };
-
   this.setSelected = function (objects) {
     // first find highlighted object that are not selected
     var previousHSelectedObjects = currentSelectedObjects;
     var array = getUnmatchingObjects(currentHighlightedObjects, objects);
     currentHighlightedObjects = array;
-
     _this.resetSelected();
-
     var fullList = getFullListOfObjects(objects);
-
     for (var i = 0; i < fullList.length; i++) {
       var _fullList$i$material$2;
-
       if (fullList[i] && fullList[i].material && fullList[i].material.emissive) (_fullList$i$material$2 = fullList[i].material.emissive).setRGB.apply(_fullList$i$material$2, _toConsumableArray(_this.selectColour));
     }
-
     currentSelectedObjects = objects;
     return isDifferent(currentSelectedObjects, previousHSelectedObjects);
   };
-
   var getFullListOfObjects = function getFullListOfObjects(objects) {
-    var fullList = [];
-
+    _temp2.length = 0;
     for (var i = 0; i < objects.length; i++) {
-      if (objects[i].material) fullList.push(objects[i]);
+      if (objects[i].material) _temp2.push(objects[i]);
     }
-
-    return fullList;
+    return _temp2;
   };
-
   this.resetHighlighted = function () {
     var fullList = getFullListOfObjects(currentHighlightedObjects);
-
     for (var i = 0; i < fullList.length; i++) {
       if (fullList[i] && fullList[i].material) {
         var _fullList$i$material$3;
-
         if (fullList[i].material.emissive) (_fullList$i$material$3 = fullList[i].material.emissive).setRGB.apply(_fullList$i$material$3, _toConsumableArray(_this.originalColour));
         if (fullList[i].material.depthFunc) fullList[i].material.depthFunc = THREE.LessEqualDepth;
       }
     }
-
     currentHighlightedObjects = [];
   };
-
   this.resetSelected = function () {
     var fullList = getFullListOfObjects(currentSelectedObjects);
-
     for (var i = 0; i < fullList.length; i++) {
       if (fullList[i] && fullList[i].material) {
         var _fullList$i$material$4;
-
         if (fullList[i].material.emissive) (_fullList$i$material$4 = fullList[i].material.emissive).setRGB.apply(_fullList$i$material$4, _toConsumableArray(_this.originalColour));
         if (fullList[i].material.depthFunc) fullList[i].material.depthFunc = THREE.LessEqualDepth;
       }
     }
-
     currentSelectedObjects = [];
   };
-
   this.getSelected = function () {
     return currentSelectedObjects;
   };
-
   this.reset = function () {
     _this.resetSelected();
-
     _this.resetHighlighted();
   };
 };
@@ -8292,17 +8139,6 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 
 module.exports = require("core-js/modules/es.string.replace.js");
 
-/***/ }),
-
-/***/ "642d":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("6630");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "6611":
@@ -8316,21 +8152,13 @@ module.exports = require("core-js/modules/es.string.replace.js");
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__("ea12");
-
 __webpack_require__("97d3");
-
 __webpack_require__("db0a");
-
 __webpack_require__("4362");
-
 __webpack_require__("9bb5");
-
 __webpack_require__("c8a6");
-
 __webpack_require__("5a3b");
-
 var arrayLikeToArray = __webpack_require__("5a43");
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return arrayLikeToArray(o, minLen);
@@ -8339,18 +8167,10 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
 }
-
 module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
 
-/***/ "6630":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "6721":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -8438,7 +8258,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 59);
+/******/ 	return __webpack_require__(__webpack_require__.s = 60);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -8566,7 +8386,7 @@ module.exports = __webpack_require__("4897");
 
 /***/ }),
 
-/***/ 28:
+/***/ 29:
 /***/ (function(module, exports) {
 
 module.exports = __webpack_require__("5488");
@@ -8587,7 +8407,7 @@ module.exports = __webpack_require__("d010");
 
 /***/ }),
 
-/***/ 59:
+/***/ 60:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -8718,7 +8538,7 @@ var getChildState = function getChildState(node) {
 };
 
 var reInitChecked = function reInitChecked(node) {
-  if (node.childNodes.length === 0) return;
+  if (node.childNodes.length === 0 || node.loading) return;
 
   var _getChildState = getChildState(node.childNodes),
       all = _getChildState.all,
@@ -9159,12 +8979,11 @@ var node_Node = function () {
       this.loading = true;
 
       var resolve = function resolve(children) {
-        _this5.loaded = true;
-        _this5.loading = false;
         _this5.childNodes = [];
 
         _this5.doCreateChildren(children, defaultProps);
-
+        _this5.loaded = true;
+        _this5.loading = false;
         _this5.updateLeafState();
         if (callback) {
           callback.call(_this5, children);
@@ -9773,7 +9592,7 @@ tree_nodevue_type_template_id_3ba3ef0e_render._withStripped = true
 // CONCATENATED MODULE: ./packages/tree/src/tree-node.vue?vue&type=template&id=3ba3ef0e&
 
 // EXTERNAL MODULE: external "element-ui/lib/transitions/collapse-transition"
-var collapse_transition_ = __webpack_require__(28);
+var collapse_transition_ = __webpack_require__(29);
 var collapse_transition_default = /*#__PURE__*/__webpack_require__.n(collapse_transition_);
 
 // EXTERNAL MODULE: external "element-ui/lib/checkbox"
@@ -10634,103 +10453,80 @@ module.exports = require("lodash/orderBy");
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__("ea12");
-
 __webpack_require__("db0a");
-
 __webpack_require__("85f7");
-
 __webpack_require__("fd22");
-
+__webpack_require__("2439");
 __webpack_require__("f3b8");
-
 var MODULE_CHANGE = {
   ALL: 0,
   DESTROYED: 1,
   NAME_CHANGED: 2,
   SETTINGS_CHANGED: 3
 };
-
 var BaseModule = function BaseModule() {
   this.typeName = "Base Module";
   this.instanceName = "default";
   this.onChangedCallbacks = [];
   /**  Notifier handle for informing other modules of any changes **/
-
   this.eventNotifiers = [];
 };
-
 BaseModule.prototype.setName = function (name) {
   if (name && this.instanceName !== name) {
     this.instanceName = name;
     var callbackArray = this.onChangedCallbacks.slice();
-
     for (var i = 0; i < callbackArray.length; i++) {
       callbackArray[i](this, MODULE_CHANGE.NAME_CHANGED);
     }
   }
 };
-
 BaseModule.prototype.settingsChanged = function () {
   var callbackArray = this.onChangedCallbacks.slice();
-
   for (var i = 0; i < callbackArray.length; i++) {
     callbackArray[i](this, MODULE_CHANGE.SETTINGS_CHANGED);
   }
 };
-
 BaseModule.prototype.exportSettings = function () {
   var settings = {};
   settings.dialog = this.typeName;
   settings.name = this.instanceName;
   return settings;
 };
-
 BaseModule.prototype.importSettings = function (settings) {
   if (settings.dialog == this.typeName) {
     this.setName(settings.name);
     return true;
   }
-
   return false;
 };
-
 BaseModule.prototype.publishChanges = function (annotations, eventType, zincObjects) {
   for (var i = 0; i < this.eventNotifiers.length; i++) {
     this.eventNotifiers[i].publish(this, eventType, annotations, zincObjects);
   }
 };
-
 BaseModule.prototype.getName = function () {
   return this.instanceName;
 };
-
 BaseModule.prototype.destroy = function () {
   //Make a temorary copy as the array may be altered during the loop
   var callbackArray = this.onChangedCallbacks.slice();
-
   for (var i = 0; i < callbackArray.length; i++) {
     callbackArray[i](this, MODULE_CHANGE.DESTROYED);
   }
-
   delete this;
 };
-
 BaseModule.prototype.addChangedCallback = function (callback) {
   if (this.onChangedCallbacks.includes(callback) == false) this.onChangedCallbacks.push(callback);
 };
-
 BaseModule.prototype.removeChangedCallback = function (callback) {
   var index = this.onChangedCallbacks.indexOf(callback);
-
   if (index > -1) {
     this.onChangedCallbacks.splice(index, 1);
   }
 };
-
 BaseModule.prototype.addNotifier = function (eventNotifier) {
   this.eventNotifiers.push(eventNotifier);
 };
-
 exports.BaseModule = BaseModule;
 exports.MODULE_CHANGE = MODULE_CHANGE;
 
@@ -10823,7 +10619,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 77);
+/******/ 	return __webpack_require__(__webpack_require__.s = 78);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -10958,7 +10754,7 @@ module.exports = __webpack_require__("8bbf");
 
 /***/ }),
 
-/***/ 77:
+/***/ 78:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11386,19 +11182,12 @@ exports.default = {
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__("9b22");
-
 __webpack_require__("4933");
-
 __webpack_require__("97d3");
-
 __webpack_require__("2ff9");
-
 __webpack_require__("4ccb");
-
 __webpack_require__("9bb5");
-
 __webpack_require__("1a25");
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -11408,7 +11197,6 @@ function _typeof(obj) {
     return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
   }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
 }
-
 module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
@@ -11507,7 +11295,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 62);
+/******/ 	return __webpack_require__(__webpack_require__.s = 63);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -11628,7 +11416,7 @@ module.exports = __webpack_require__("8122");
 
 /***/ }),
 
-/***/ 62:
+/***/ 63:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -12445,7 +12233,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 54);
+/******/ 	return __webpack_require__(__webpack_require__.s = 55);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -12587,7 +12375,7 @@ module.exports = __webpack_require__("e974");
 
 /***/ }),
 
-/***/ 54:
+/***/ 55:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -14415,7 +14203,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 116);
+/******/ 	return __webpack_require__(__webpack_require__.s = 117);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -14522,7 +14310,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 116:
+/***/ 117:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -14725,7 +14513,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 92);
+/******/ 	return __webpack_require__(__webpack_require__.s = 93);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -14839,7 +14627,7 @@ module.exports = __webpack_require__("d010");
 
 /***/ }),
 
-/***/ 92:
+/***/ 93:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -14956,13 +14744,6 @@ checkbox_group.install = function (Vue) {
 
 /***/ }),
 
-/***/ "8038":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "8122":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -15242,32 +15023,25 @@ function objToArray(obj) {
 /***/ (function(module, exports, __webpack_require__) {
 
 var _readOnlyError = __webpack_require__("da60").default;
-
 __webpack_require__("db0a");
-
+__webpack_require__("2439");
 __webpack_require__("97d3");
-
 __webpack_require__("13e3");
-
 var THREE = __webpack_require__("9206").THREE;
+
 /**
  * Create a {@link Zinc.Renderer} on the dom element with corresponding elementID.
  * @param {String} elementID - id of the target dom element.
  * @returns {Zinc.Renderer}
  */
-
-
 var createRenderer = function createRenderer() {
   var WEBGL = __webpack_require__("cf41").WEBGL;
-
   var localContainer = document.createElement('div');
   var localRenderer = undefined;
   ;
   localContainer.style.height = "100%";
-
   if (WEBGL.isWebGLAvailable()) {
     var Zinc = __webpack_require__("9206");
-
     localRenderer = new Zinc.Renderer(localContainer, window);
     Zinc.defaultMaterialColor = 0xFFFF9C;
     localRenderer.initialiseVisualisation();
@@ -15276,16 +15050,13 @@ var createRenderer = function createRenderer() {
     var warning = WEBGL.getWebGLErrorMessage();
     localContainer.appendChild(warning);
   }
-
   return {
     "renderer": localRenderer,
     "container": localContainer
   };
 };
-
 var RendererModule = function RendererModule() {
   __webpack_require__("6aa6").BaseModule.call(this);
-
   this.scene = undefined;
   this.rendererContainer = undefined;
   this.displayArea = undefined;
@@ -15294,60 +15065,49 @@ var RendererModule = function RendererModule() {
   this.selectedScreenCoordinates = new THREE.Vector3();
   this.selectedCenter = undefined;
 };
-
 RendererModule.prototype = Object.create(__webpack_require__("6aa6").BaseModule.prototype);
+
 /**
  * This function will get the the first intersected object with name or
  * the first glyph object with name.
  */
-
 RendererModule.prototype.getIntersectedObject = function (intersects) {
   if (intersects) {
     for (var i = 0; i < intersects.length; i++) {
       if (intersects[i] !== undefined) {
-        if (intersects[i].object && intersects[i].object.userData && intersects[i].object.userData.isZincObject && (intersects[i].object.name && intersects[i].object.name !== "_Unnamed" || intersects[i].object.userData.isMarker)) return intersects[i];
+        if (intersects[i].object && intersects[i].object.userData && intersects[i].object.userData.isZincObject && (intersects[i].object.name && intersects[i].object.name !== "" || intersects[i].object.userData.isMarker)) return intersects[i];
       }
     }
   }
-
   return undefined;
 };
-
 RendererModule.prototype.getAnnotationsFromObjects = function (objects) {
   var annotations = [];
-
   for (var i = 0; i < objects.length; i++) {
     var zincObject = objects[i].userData;
     var annotation = undefined;
-
     if (zincObject) {
       if (zincObject.isGlyph || zincObject.isGlyphset) {
         var glyphset = zincObject;
         if (zincObject.isGlyph) zincObject.getGlyphset(), _readOnlyError("glyphset");
         annotation = glyphset.userData ? glyphset.userData.annotation : undefined;
-
         if (annotation && annotation.data) {
           if (objects[i].name && objects[i].name != "") annotation.data.id = objects[i].name;else annotation.data.id = glyphset.groupName;
         }
       } else {
         annotation = zincObject.userData ? zincObject.userData.annotation : undefined;
-
         if (annotation && annotation.data) {
           annotation.data.id = objects[i].name;
         }
       }
     }
-
     if (annotation) annotations.push(annotation);
   }
-
   return annotations;
 };
-
 RendererModule.prototype.setHighlightedByObjects = function (objects, coords, propagateChanges) {
   var changed = this.graphicsHighlight.setHighlighted(objects);
   var zincObjects = this.objectsToZincObjects(objects);
-
   if (propagateChanges) {
     eventType = __webpack_require__("9b21").EVENT_TYPE.MOVE;
     if (changed) eventType = __webpack_require__("9b21").EVENT_TYPE.HIGHLIGHTED;
@@ -15355,22 +15115,17 @@ RendererModule.prototype.setHighlightedByObjects = function (objects, coords, pr
     if (annotations.length > 0) annotations[0].coords = coords;
     this.publishChanges(annotations, eventType, zincObjects);
   }
-
   return changed;
 };
-
 RendererModule.prototype.setHighlightedByZincObjects = function (zincObjects, coords, propagateChanges) {
   var morphs = [];
-
   if (zincObjects) {
     zincObjects.forEach(function (zincObject) {
       if (zincObject && zincObject.morph) morphs.push(zincObject.morph);
     });
   }
-
   return this.setHighlightedByObjects(morphs, coords, propagateChanges);
 };
-
 RendererModule.prototype.setupLiveCoordinates = function (zincObjects) {
   if (zincObjects && zincObjects.length > 0) {
     var boundingBox = this.scene.getBoundingBoxOfZincObjects(zincObjects);
@@ -15384,13 +15139,10 @@ RendererModule.prototype.setupLiveCoordinates = function (zincObjects) {
     this.selectedCenter = undefined;
   }
 };
-
 RendererModule.prototype.objectsToZincObjects = function (objects) {
   var zincObjects = [];
-
   for (var i = 0; i < objects.length; i++) {
     var zincObject = objects[i].userData;
-
     if (zincObject) {
       if (zincObject.isGlyph || zincObject.isGlyphset) {
         var glyphset = zincObject;
@@ -15401,145 +15153,116 @@ RendererModule.prototype.objectsToZincObjects = function (objects) {
       }
     }
   }
-
   return zincObjects;
 };
-
 RendererModule.prototype.setSelectedByObjects = function (objects, coords, propagateChanges) {
   var changed = this.graphicsHighlight.setSelected(objects);
-
   if (changed) {
     var zincObjects = this.objectsToZincObjects(objects);
     this.setupLiveCoordinates(zincObjects);
-
     if (propagateChanges) {
       var _eventType = __webpack_require__("9b21").EVENT_TYPE.SELECTED;
-
       var annotations = this.getAnnotationsFromObjects(objects);
       if (annotations.length > 0) annotations[0].coords = coords;
       this.publishChanges(annotations, _eventType, zincObjects);
     }
   }
-
   return changed;
 };
-
 RendererModule.prototype.setSelectedByZincObjects = function (zincObjects, coords, propagateChanges) {
   var morphs = [];
-
   if (zincObjects) {
     zincObjects.forEach(function (zincObject) {
       if (zincObject && zincObject.morph) morphs.push(zincObject.morph);
     });
   }
-
   return this.setSelectedByObjects(morphs, coords, propagateChanges);
 };
-
 var addGlyphToArray = function addGlyphToArray(objects) {
   return function (glyph) {
     objects.push(glyph.getMesh());
   };
 };
-
 RendererModule.prototype.findObjectsByGroupName = function (groupName) {
   var geometries = this.scene.findGeometriesWithGroupName(groupName);
   var objects = [];
-
   for (var i = 0; i < geometries.length; i++) {
     objects.push(geometries[i].morph);
   }
-
   var glyphsets = this.scene.findGlyphsetsWithGroupName(groupName);
-
   for (var _i = 0; _i < glyphsets.length; _i++) {
     glyphsets[_i].forEachGlyph(addGlyphToArray(objects));
   }
-
   return objects;
 };
-
 RendererModule.prototype.setHighlightedByGroupName = function (groupName, propagateChanges) {
   var objects = this.findObjectsByGroupName(groupName);
   return this.setHighlightedByObjects(objects, undefined, propagateChanges);
 };
-
 RendererModule.prototype.setSelectedByGroupName = function (groupName, propagateChanges) {
   var objects = this.findObjectsByGroupName(groupName);
   return this.setSelectedByObjects(objects, undefined, propagateChanges);
 };
-
 RendererModule.prototype.changeBackgroundColour = function (backgroundColourString) {
   var colour = new THREE.Color(backgroundColourString);
-
   if (this.zincRenderer) {
     var internalRenderer = this.zincRenderer.getThreeJSRenderer();
     internalRenderer.setClearColor(colour, 1);
   }
 };
-
 RendererModule.prototype.resetView = function () {
   if (this.zincRenderer) this.zincRenderer.resetView();
 };
-
 RendererModule.prototype.viewAll = function () {
   if (this.zincRenderer) this.zincRenderer.viewAll();
 };
+
 /**
  * Start the animation and let the renderer to processs with
  * time progression
  */
-
-
 RendererModule.prototype.playAnimation = function (flag) {
   if (this.zincRenderer) this.zincRenderer.playAnimation = flag;
 };
+
 /**
 * Set the speed of playback
 */
-
-
 RendererModule.prototype.setPlayRate = function (value) {
   if (this.zincRenderer) this.zincRenderer.setPlayRate(value);
 };
+
 /**
 * Get the speed of playback
 */
-
-
 RendererModule.prototype.getPlayRate = function (value) {
   if (this.zincRenderer) return this.zincRenderer.getPlayRate();else return 0.0;
 };
+
 /** Initialise everything in the renderer, including the 3D renderer,
 *  and picker for the 3D renderer.
 * 
 */
-
-
 RendererModule.prototype.initialiseRenderer = function (displayAreaIn) {
   if (this.zincRenderer === undefined || this.rendererContainer === undefined) {
     var returnedValue = createRenderer();
     this.zincRenderer = returnedValue["renderer"];
     this.rendererContainer = returnedValue["container"];
   }
-
   if (displayAreaIn) {
     this.displayArea = displayAreaIn;
     this.displayArea.appendChild(this.rendererContainer);
     if (this.zincRenderer) this.zincRenderer.animate();
   }
 };
-
 RendererModule.prototype.destroy = function () {
   if (this.zincRenderer) {
     this.zincRenderer.dispose();
     this.zincRenderer.getThreeJSRenderer().dispose();
     this.zincRenderer = undefined;
   }
-
   __webpack_require__("6aa6").BaseModule.prototype.destroy.call(this);
 };
-
 exports.RendererModule = RendererModule;
 
 /***/ }),
@@ -15645,7 +15368,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 72);
+/******/ 	return __webpack_require__(__webpack_require__.s = 73);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -15766,7 +15489,7 @@ module.exports = __webpack_require__("5924");
 
 /***/ }),
 
-/***/ 41:
+/***/ 42:
 /***/ (function(module, exports) {
 
 module.exports = __webpack_require__("c56a");
@@ -15780,7 +15503,7 @@ module.exports = __webpack_require__("8bbf");
 
 /***/ }),
 
-/***/ 72:
+/***/ 73:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -15928,7 +15651,7 @@ var dom_ = __webpack_require__(2);
 var popup_ = __webpack_require__(13);
 
 // EXTERNAL MODULE: external "element-ui/lib/utils/after-leave"
-var after_leave_ = __webpack_require__(41);
+var after_leave_ = __webpack_require__(42);
 var after_leave_default = /*#__PURE__*/__webpack_require__.n(after_leave_);
 
 // CONCATENATED MODULE: ./packages/loading/src/directive.js
@@ -15992,7 +15715,7 @@ loadingDirective.install = function (Vue) {
         el.mask.style[property] = el.maskStyle[property];
       });
 
-      if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed') {
+      if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed' && el.originalPosition !== 'sticky') {
         Object(dom_["addClass"])(parent, 'el-loading-parent--relative');
       }
       if (binding.modifiers.fullscreen && binding.modifiers.lock) {
@@ -16150,7 +15873,7 @@ var src_Loading = function Loading() {
   });
 
   src_addStyle(options, parent, instance);
-  if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed') {
+  if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed' && instance.originalPosition !== 'sticky') {
     Object(dom_["addClass"])(parent, 'el-loading-parent--relative');
   }
   if (options.fullscreen && options.lock) {
@@ -16281,7 +16004,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 130);
+/******/ 	return __webpack_require__(__webpack_require__.s = 132);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -16388,7 +16111,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 130:
+/***/ 132:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -16510,22 +16233,15 @@ module.exports = require("vue");
 
 /***/ }),
 
-/***/ "8f55":
+/***/ "8e0f":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_1_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("8038");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_1_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_1_lang_css___WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_OpacityControls_vue_vue_type_style_index_0_id_4c00a30f_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("bd9f");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_OpacityControls_vue_vue_type_style_index_0_id_4c00a30f_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_OpacityControls_vue_vue_type_style_index_0_id_4c00a30f_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
 /* unused harmony reexport * */
 
 
-/***/ }),
-
-/***/ "91f0":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
 /***/ }),
 
 /***/ "9206":
@@ -16640,7 +16356,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 125);
+/******/ 	return __webpack_require__(__webpack_require__.s = 126);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -16747,7 +16463,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 125:
+/***/ 126:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -17153,38 +16869,32 @@ module.exports = __webpack_require__("d010");
 /***/ "9b21":
 /***/ (function(module, exports, __webpack_require__) {
 
+__webpack_require__("2439");
 __webpack_require__("f3b8");
-
 var EVENT_TYPE = {
   ALL: 0,
   SELECTED: 1,
   HIGHLIGHTED: 2,
   MOVE: 3
 };
-
 var SelectionEvent = function SelectionEvent(eventTypeIn, identifiersIn, zincObjects) {
   this.eventType = eventTypeIn;
   this.identifiers = identifiersIn;
   this.zincObjects = zincObjects;
 };
-
-var returnFullID = function returnFullID(sourceId) {//return full annotations with all different name
+var returnFullID = function returnFullID(sourceId) {
+  //return full annotations with all different name
 };
-
 var Subscription = function Subscription(subscriberIn, callbackIn, eventType) {
   this.targetedID = [];
   var subscriber = subscriberIn;
   var callback = callbackIn;
   this.targetEventType = eventType;
-
   var _this = this;
-
   if (eventType === undefined) this.targetEventType = EVENT_TYPE.ALL;
-
   this.getEventType = function () {
     return eventType;
   };
-
   this.notify = function (source, eventType, ids, zincObjects) {
     if (source !== subscriber && (_this.targetEventType === EVENT_TYPE.ALL || _this.targetEventType === eventType)) {
       //should support different type of id e.g lyph, name, fmas...
@@ -17194,26 +16904,21 @@ var Subscription = function Subscription(subscriberIn, callbackIn, eventType) {
     }
   };
 };
-
 exports.EventNotifier = function () {
   var subscriptions = [];
-
   this.publish = function (source, eventType, id, zincObjects) {
     for (var i = 0; i < subscriptions.length; i++) {
       subscriptions[i].notify(source, eventType, id, zincObjects);
     }
   };
-
   this.subscribe = function (subscriber, callbackFunction, eventType) {
     if (typeof callbackFunction === "function") {
       var subscription = new Subscription(subscriber, callbackFunction, eventType);
       subscriptions.push(subscription);
       return subscription;
     }
-
     return undefined;
   };
-
   this.unsubscribe = function (subscription) {
     for (var i = 0; i < subscriptions.length; i++) {
       if (subscription === subscriptions[i]) {
@@ -17223,7 +16928,6 @@ exports.EventNotifier = function () {
     }
   };
 };
-
 exports.EVENT_TYPE = EVENT_TYPE;
 
 /***/ }),
@@ -17406,7 +17110,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 102);
+/******/ 	return __webpack_require__(__webpack_require__.s = 103);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -17513,7 +17217,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 102:
+/***/ 103:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -17660,17 +17364,6 @@ var isDefined = exports.isDefined = function isDefined(val) {
   return val !== undefined && val !== null;
 };
 
-/***/ }),
-
-/***/ "a786":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldTooltip_vue_vue_type_style_index_0_id_b9fa59b4_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("91f0");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldTooltip_vue_vue_type_style_index_0_id_b9fa59b4_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldTooltip_vue_vue_type_style_index_0_id_b9fa59b4_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "aaa5":
@@ -17818,6 +17511,17 @@ exports.default = {
   }
 };
 
+/***/ }),
+
+/***/ "b3fe":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_15421d6d_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("f926");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_15421d6d_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_15421d6d_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "b5c2":
@@ -17825,6 +17529,17 @@ exports.default = {
 
 // extracted by mini-css-extract-plugin
 
+/***/ }),
+
+/***/ "b869":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_0_id_7c593a3d_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("3608");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_0_id_7c593a3d_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_0_id_7c593a3d_prod_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "b94f":
@@ -17834,7 +17549,7 @@ module.exports = require("core-js/modules/web.url.js");
 
 /***/ }),
 
-/***/ "bb28":
+/***/ "bd9f":
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
@@ -17935,12 +17650,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 138);
+/******/ 	return __webpack_require__(__webpack_require__.s = 140);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 138:
+/***/ 140:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -18030,6 +17745,13 @@ col.install = function (Vue) {
 
 /***/ }),
 
+/***/ "c399":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "c56a":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -18159,7 +17881,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 118);
+/******/ 	return __webpack_require__(__webpack_require__.s = 119);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -18266,7 +17988,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 118:
+/***/ 119:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -18339,17 +18061,6 @@ main.install = function (Vue) {
 
 /******/ });
 
-/***/ }),
-
-/***/ "c891":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_0157429c_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("0481");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_0157429c_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_0157429c_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "c8a6":
@@ -18370,13 +18081,12 @@ module.exports = require("core-js/modules/es.number.to-fixed.js");
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__("c8a6");
-
 __webpack_require__("6378");
-
 /**
  * @author alteredq / http://alteredqualia.com/
  * @author mr.doob / http://mrdoob.com/
  */
+
 exports.WEBGL = {
   isWebGLAvailable: function isWebGLAvailable() {
     try {
@@ -18421,19 +18131,28 @@ exports.WEBGL = {
     element.style.padding = '1.5em';
     element.style.width = '400px';
     element.style.margin = '5em auto 0';
-
     if (contexts[version]) {
       message = message.replace('$0', 'graphics card');
     } else {
       message = message.replace('$0', 'browser');
     }
-
     message = message.replace('$1', names[version]);
     element.innerHTML = message;
     return element;
   }
 };
 
+/***/ }),
+
+/***/ "cf5e":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_id_15421d6d_prod_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("5636");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_id_15421d6d_prod_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_id_15421d6d_prod_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "d010":
@@ -18509,11 +18228,9 @@ function isKorean(text) {
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__("dc50");
-
 function _readOnlyError(name) {
   throw new TypeError("\"" + name + "\" is read-only");
 }
-
 module.exports = _readOnlyError, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
@@ -18626,7 +18343,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 90);
+/******/ 	return __webpack_require__(__webpack_require__.s = 91);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -18740,7 +18457,7 @@ module.exports = __webpack_require__("d010");
 
 /***/ }),
 
-/***/ 90:
+/***/ 91:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -19258,7 +18975,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 100);
+/******/ 	return __webpack_require__(__webpack_require__.s = 101);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -19365,7 +19082,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 100:
+/***/ 101:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -19602,7 +19319,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 86);
+/******/ 	return __webpack_require__(__webpack_require__.s = 87);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -19730,7 +19447,7 @@ module.exports = __webpack_require__("12f2");
 
 /***/ }),
 
-/***/ 30:
+/***/ 31:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -19765,7 +19482,7 @@ module.exports = __webpack_require__("12f2");
 
 /***/ }),
 
-/***/ 86:
+/***/ 87:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -19927,7 +19644,7 @@ var focus_ = __webpack_require__(22);
 var focus_default = /*#__PURE__*/__webpack_require__.n(focus_);
 
 // EXTERNAL MODULE: ./src/directives/repeat-click.js
-var repeat_click = __webpack_require__(30);
+var repeat_click = __webpack_require__(31);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/input-number/src/input-number.vue?vue&type=script&lang=js&
 //
@@ -20401,7 +20118,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 53);
+/******/ 	return __webpack_require__(__webpack_require__.s = 54);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -20515,7 +20232,7 @@ module.exports = __webpack_require__("8122");
 
 /***/ }),
 
-/***/ 33:
+/***/ 34:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -20773,12 +20490,12 @@ module.exports = __webpack_require__("d010");
 
 /***/ }),
 
-/***/ 53:
+/***/ 54:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _select_src_option__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(33);
+/* harmony import */ var _select_src_option__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(34);
 
 
 /* istanbul ignore next */
@@ -21104,7 +20821,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 95);
+/******/ 	return __webpack_require__(__webpack_require__.s = 96);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -21211,7 +20928,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 95:
+/***/ 96:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -21599,7 +21316,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 74);
+/******/ 	return __webpack_require__(__webpack_require__.s = 75);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -21727,7 +21444,7 @@ module.exports = __webpack_require__("d010");
 
 /***/ }),
 
-/***/ 74:
+/***/ 75:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -22529,14 +22246,10 @@ module.exports = require("core-js/modules/es.array.splice.js");
 
 /***/ }),
 
-/***/ "f692":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_0_id_3989f99a_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("3bcb");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_0_id_3989f99a_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_0_id_3989f99a_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
+/***/ "f926":
+/***/ (function(module, exports, __webpack_require__) {
 
+// extracted by mini-css-extract-plugin
 
 /***/ }),
 
@@ -22581,19 +22294,406 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1aefe1b9-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldVuer.vue?vue&type=template&id=0157429c&scoped=true&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"loading",rawName:"v-loading",value:(_vm.loading),expression:"loading"}],ref:"scaffoldContainer",staticClass:"scaffold-container",attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.3)"}},[_c('map-svg-sprite-color'),_c('scaffold-tooltip',{attrs:{"label":_vm.tData.label,"visible":_vm.tData.visible,"x":_vm.tData.x,"y":_vm.tData.y}}),_c('div',{ref:"display",staticStyle:{"height":"100%","width":"100%"},attrs:{"id":"organsDisplayArea","tabindex":"-1"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==66){ return null; }return _vm.backgroundChangeCallback.apply(null, arguments)}}}),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayUI && !_vm.isTransitioning),expression:"displayUI && !isTransitioning"}]},[(_vm.displayWarning)?_c('el-popover',{ref:"warningPopover",attrs:{"content":_vm.warningMessage,"placement":"right","append-to-body":false,"trigger":"manual","popper-class":"warning-popper right-popper non-selectable"},model:{value:(_vm.hoverVisabilities[6].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[6], "value", $$v)},expression:"hoverVisabilities[6].value"}}):_vm._e(),(_vm.displayWarning)?_c('i',{directives:[{name:"popover",rawName:"v-popover:warningPopover",arg:"warningPopover"}],staticClass:"el-icon-warning warning-icon",on:{"mouseover":function($event){return _vm.showToolitip(6)},"mouseout":function($event){return _vm.hideToolitip(6)}}},[_c('span',{staticClass:"warning-text"},[_vm._v("Beta")])]):_vm._e(),_c('el-popover',{ref:"checkBoxPopover",attrs:{"content":"Change region visibility","placement":"right","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper right-popper non-selectable"},model:{value:(_vm.hoverVisabilities[5].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[5], "value", $$v)},expression:"hoverVisabilities[5].value"}}),_c('tree-controls',{directives:[{name:"popover",rawName:"v-popover:checkBoxPopover",arg:"checkBoxPopover"}],ref:"treeControl",attrs:{"help-mode":_vm.helpMode,"module":_vm.$module,"show-colour-picker":_vm.showColourPicker},on:{"object-selected":_vm.objectSelected,"object-hovered":_vm.objectHovered,"drawer-toggled":_vm.drawerToggled}}),_c('div',{staticClass:"opacity-box"},[_c('opacity-controls',{ref:"opacityControl"})],1),(_vm.sceneData.timeVarying)?_c('el-popover',{ref:"sliderPopover",attrs:{"content":"Move the slider to animate the region","placement":"top","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper top-popper non-selectable"},model:{value:(_vm.hoverVisabilities[4].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[4], "value", $$v)},expression:"hoverVisabilities[4].value"}}):_vm._e(),(_vm.sceneData.timeVarying)?_c('div',{directives:[{name:"popover",rawName:"v-popover:sliderPopover",arg:"sliderPopover"}],staticClass:"time-slider-container",class:[ _vm.minimisedSlider ? 'minimised' : '', _vm.sliderPosition]},[_c('el-tabs',{attrs:{"type":"card"}},[_c('el-tab-pane',{attrs:{"label":"Animate scaffold"}},[_c('el-row',{staticClass:"tab-content"},[(_vm.isPlaying)?_c('map-svg-icon',{staticClass:"icon-button video-button",attrs:{"icon":"pause"},nativeOn:{"click":function($event){return _vm.play(false)}}}):_c('map-svg-icon',{staticClass:"video-button icon-button",attrs:{"icon":"play"},nativeOn:{"click":function($event){return _vm.play(true)}}}),_c('el-slider',{staticClass:"slider",attrs:{"min":0,"max":_vm.timeMax,"value":_vm.sceneData.currentTime / 100 * _vm.timeMax,"step":0.1,"tooltip-class":"time-slider-tooltip","format-tooltip":_vm.formatTooltip,"marks":_vm.timeStamps},on:{"input":function($event){return _vm.timeChange($event)}}})],1)],1),_c('el-tab-pane',{attrs:{"label":"Animation data"}},[_c('el-row',{staticClass:"tab-content"},[_c('div',{staticClass:"animation-data"},[_vm._v(" Original duration: "),_c('div',{staticClass:"purple"},[_vm._v(" "+_vm._s(_vm.orginalDuration)+" ")])]),_c('div',{staticClass:"animation-data"},[_vm._v(" Animation duration: "),_c('div',{staticClass:"purple"},[_vm._v(" "+_vm._s(_vm.animateDuration)+" ")])]),_c('div',{staticClass:"animation-data"},[_vm._v(" Playback speed "),_c('el-select',{staticClass:"select-box",attrs:{"popper-append-to-body":true,"value":_vm.currentSpeed,"placeholder":"Select","popper-class":"scaffold_viewer_dropdown"},on:{"change":function($event){return _vm.speedChanged($event)}}},_vm._l((_vm.playSpeed),function(item){return _c('el-option',{key:item.value,attrs:{"label":item.label,"value":item.value}})}),1)],1)])],1)],1)],1):_vm._e(),_c('div',{staticClass:"bottom-right-control"},[_c('el-popover',{attrs:{"content":"Zoom in","placement":"left","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper left-popper non-selectable"},model:{value:(_vm.hoverVisabilities[0].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[0], "value", $$v)},expression:"hoverVisabilities[0].value"}},[_c('map-svg-icon',{staticClass:"icon-button zoomIn",attrs:{"slot":"reference","icon":"zoomIn"},nativeOn:{"click":function($event){return _vm.zoomIn()},"mouseover":function($event){return _vm.showToolitip(0)},"mouseout":function($event){return _vm.hideToolitip(0)}},slot:"reference"})],1),_c('el-popover',{attrs:{"content":"Zoom out","placement":"top-end","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper popper-zoomout non-selectable"},model:{value:(_vm.hoverVisabilities[1].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[1], "value", $$v)},expression:"hoverVisabilities[1].value"}},[_c('map-svg-icon',{staticClass:"icon-button zoomOut",attrs:{"slot":"reference","icon":"zoomOut"},nativeOn:{"click":function($event){return _vm.zoomOut()},"mouseover":function($event){return _vm.showToolitip(1)},"mouseout":function($event){return _vm.hideToolitip(1)}},slot:"reference"})],1),_c('el-popover',{attrs:{"placement":"top","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper non-selectable"},model:{value:(_vm.hoverVisabilities[2].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[2], "value", $$v)},expression:"hoverVisabilities[2].value"}},[_c('div',[_vm._v(" Fit to "),_c('br'),_vm._v(" window ")]),_c('map-svg-icon',{staticClass:"icon-button fitWindow",attrs:{"slot":"reference","icon":"fitWindow"},nativeOn:{"click":function($event){return _vm.fitWindow()},"mouseover":function($event){return _vm.showToolitip(2)},"mouseout":function($event){return _vm.hideToolitip(2)}},slot:"reference"})],1)],1),_c('el-popover',{ref:"backgroundPopover",attrs:{"placement":"top-start","width":"128","append-to-body":false,"trigger":"click","popper-class":"background-popper non-selectable"}},[_c('el-row',{staticClass:"backgroundText"},[_vm._v(" Change background ")]),_c('el-row',{staticClass:"backgroundChooser"},_vm._l((_vm.availableBackground),function(item){return _c('div',{key:item,class:['backgroundChoice', item, item == _vm.currentBackground ? 'active' :''],on:{"click":function($event){return _vm.backgroundChangeCallback(item)}}})}),0)],1),_c('el-popover',{attrs:{"content":"Change background color","placement":"right","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper right-popper non-selectable"},model:{value:(_vm.hoverVisabilities[3].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[3], "value", $$v)},expression:"hoverVisabilities[3].value"}},[_c('map-svg-icon',{directives:[{name:"popover",rawName:"v-popover:backgroundPopover",arg:"backgroundPopover"}],staticClass:"icon-button background-colour",class:{ open: _vm.drawerOpen, close: !_vm.drawerOpen },attrs:{"slot":"reference","icon":"changeBckgd"},nativeOn:{"mouseover":function($event){return _vm.showToolitip(3)},"mouseout":function($event){return _vm.hideToolitip(3)}},slot:"reference"})],1)],1)],1)}
-var staticRenderFns = []
-
-
-// CONCATENATED MODULE: ./src/components/ScaffoldVuer.vue?vue&type=template&id=0157429c&scoped=true&
-
-// EXTERNAL MODULE: ./node_modules/element-ui/lib/theme-chalk/tabs.css
-var tabs = __webpack_require__("075a");
-
-// EXTERNAL MODULE: ./node_modules/element-ui/lib/theme-chalk/base.css
-var base = __webpack_require__("450d");
-
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"22a1b63e-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldVuer.vue?vue&type=template&id=15421d6d&scoped=true&
+var render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    directives: [{
+      name: "loading",
+      rawName: "v-loading",
+      value: _vm.loading,
+      expression: "loading"
+    }],
+    ref: "scaffoldContainer",
+    staticClass: "scaffold-container",
+    attrs: {
+      "element-loading-text": "Loading...",
+      "element-loading-spinner": "el-icon-loading",
+      "element-loading-background": "rgba(0, 0, 0, 0.3)"
+    }
+  }, [_c('map-svg-sprite-color'), _c('scaffold-tooltip', {
+    attrs: {
+      "label": _vm.tData.label,
+      "region": _vm.tData.region,
+      "visible": _vm.tData.visible,
+      "x": _vm.tData.x,
+      "y": _vm.tData.y
+    }
+  }), _c('div', {
+    ref: "display",
+    staticStyle: {
+      "height": "100%",
+      "width": "100%"
+    },
+    attrs: {
+      "id": "organsDisplayArea",
+      "tabindex": "-1"
+    },
+    on: {
+      "keydown": function keydown($event) {
+        if (!$event.type.indexOf('key') && $event.keyCode !== 66) return null;
+        return _vm.backgroundChangeCallback.apply(null, arguments);
+      }
+    }
+  }), _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.displayUI && !_vm.isTransitioning,
+      expression: "displayUI && !isTransitioning"
+    }]
+  }, [_vm.displayWarning ? _c('el-popover', {
+    ref: "warningPopover",
+    attrs: {
+      "content": _vm.warningMessage,
+      "placement": "right",
+      "append-to-body": false,
+      "trigger": "manual",
+      "popper-class": "warning-popper right-popper non-selectable"
+    },
+    model: {
+      value: _vm.hoverVisabilities[6].value,
+      callback: function callback($$v) {
+        _vm.$set(_vm.hoverVisabilities[6], "value", $$v);
+      },
+      expression: "hoverVisabilities[6].value"
+    }
+  }) : _vm._e(), _vm.displayWarning ? _c('i', {
+    directives: [{
+      name: "popover",
+      rawName: "v-popover:warningPopover",
+      arg: "warningPopover"
+    }],
+    staticClass: "el-icon-warning warning-icon",
+    on: {
+      "mouseover": function mouseover($event) {
+        return _vm.showToolitip(6);
+      },
+      "mouseout": function mouseout($event) {
+        return _vm.hideToolitip(6);
+      }
+    }
+  }, [_c('span', {
+    staticClass: "warning-text"
+  }, [_vm._v("Beta")])]) : _vm._e(), _c('el-popover', {
+    ref: "checkBoxPopover",
+    attrs: {
+      "content": "Change region visibility",
+      "placement": "right",
+      "append-to-body": false,
+      "trigger": "manual",
+      "popper-class": "scaffold-popper right-popper non-selectable"
+    },
+    model: {
+      value: _vm.hoverVisabilities[5].value,
+      callback: function callback($$v) {
+        _vm.$set(_vm.hoverVisabilities[5], "value", $$v);
+      },
+      expression: "hoverVisabilities[5].value"
+    }
+  }), _c('tree-controls', {
+    directives: [{
+      name: "popover",
+      rawName: "v-popover:checkBoxPopover",
+      arg: "checkBoxPopover"
+    }],
+    ref: "treeControl",
+    attrs: {
+      "help-mode": _vm.helpMode,
+      "module": _vm.$module,
+      "show-colour-picker": _vm.showColourPicker
+    },
+    on: {
+      "object-selected": _vm.objectSelected,
+      "object-hovered": _vm.objectHovered,
+      "drawer-toggled": _vm.drawerToggled
+    }
+  }), _c('div', {
+    staticClass: "opacity-box"
+  }, [_c('opacity-controls', {
+    ref: "opacityControl"
+  })], 1), _vm.sceneData.timeVarying ? _c('el-popover', {
+    ref: "sliderPopover",
+    attrs: {
+      "content": "Move the slider to animate the region",
+      "placement": "top",
+      "append-to-body": false,
+      "trigger": "manual",
+      "popper-class": "scaffold-popper top-popper non-selectable"
+    },
+    model: {
+      value: _vm.hoverVisabilities[4].value,
+      callback: function callback($$v) {
+        _vm.$set(_vm.hoverVisabilities[4], "value", $$v);
+      },
+      expression: "hoverVisabilities[4].value"
+    }
+  }) : _vm._e(), _vm.sceneData.timeVarying ? _c('div', {
+    directives: [{
+      name: "popover",
+      rawName: "v-popover:sliderPopover",
+      arg: "sliderPopover"
+    }],
+    staticClass: "time-slider-container",
+    class: [_vm.minimisedSlider ? 'minimised' : '', _vm.sliderPosition]
+  }, [_c('el-tabs', {
+    attrs: {
+      "type": "card"
+    }
+  }, [_c('el-tab-pane', {
+    attrs: {
+      "label": "Animate scaffold"
+    }
+  }, [_c('el-row', {
+    staticClass: "tab-content"
+  }, [_vm.isPlaying ? _c('map-svg-icon', {
+    staticClass: "icon-button video-button",
+    attrs: {
+      "icon": "pause"
+    },
+    nativeOn: {
+      "click": function click($event) {
+        return _vm.play(false);
+      }
+    }
+  }) : _c('map-svg-icon', {
+    staticClass: "video-button icon-button",
+    attrs: {
+      "icon": "play"
+    },
+    nativeOn: {
+      "click": function click($event) {
+        return _vm.play(true);
+      }
+    }
+  }), _c('el-slider', {
+    staticClass: "slider",
+    attrs: {
+      "min": 0,
+      "max": _vm.timeMax,
+      "value": _vm.sceneData.currentTime / 100 * _vm.timeMax,
+      "step": 0.1,
+      "tooltip-class": "time-slider-tooltip",
+      "format-tooltip": _vm.formatTooltip,
+      "marks": _vm.timeStamps
+    },
+    on: {
+      "input": function input($event) {
+        return _vm.timeChange($event);
+      }
+    }
+  })], 1)], 1), _c('el-tab-pane', {
+    attrs: {
+      "label": "Animation data"
+    }
+  }, [_c('el-row', {
+    staticClass: "tab-content"
+  }, [_c('div', {
+    staticClass: "animation-data"
+  }, [_vm._v(" Original duration: "), _c('div', {
+    staticClass: "purple"
+  }, [_vm._v(" " + _vm._s(_vm.orginalDuration) + " ")])]), _c('div', {
+    staticClass: "animation-data"
+  }, [_vm._v(" Animation duration: "), _c('div', {
+    staticClass: "purple"
+  }, [_vm._v(" " + _vm._s(_vm.animateDuration) + " ")])]), _c('div', {
+    staticClass: "animation-data"
+  }, [_vm._v(" Playback speed "), _c('el-select', {
+    staticClass: "select-box",
+    attrs: {
+      "popper-append-to-body": true,
+      "value": _vm.currentSpeed,
+      "placeholder": "Select",
+      "popper-class": "scaffold_viewer_dropdown"
+    },
+    on: {
+      "change": function change($event) {
+        return _vm.speedChanged($event);
+      }
+    }
+  }, _vm._l(_vm.playSpeed, function (item) {
+    return _c('el-option', {
+      key: item.value,
+      attrs: {
+        "label": item.label,
+        "value": item.value
+      }
+    });
+  }), 1)], 1)])], 1)], 1)], 1) : _vm._e(), _c('div', {
+    staticClass: "bottom-right-control"
+  }, [_c('el-popover', {
+    attrs: {
+      "content": "Zoom in",
+      "placement": "left",
+      "append-to-body": false,
+      "trigger": "manual",
+      "popper-class": "scaffold-popper left-popper non-selectable"
+    },
+    model: {
+      value: _vm.hoverVisabilities[0].value,
+      callback: function callback($$v) {
+        _vm.$set(_vm.hoverVisabilities[0], "value", $$v);
+      },
+      expression: "hoverVisabilities[0].value"
+    }
+  }, [_c('map-svg-icon', {
+    staticClass: "icon-button zoomIn",
+    attrs: {
+      "slot": "reference",
+      "icon": "zoomIn"
+    },
+    nativeOn: {
+      "click": function click($event) {
+        return _vm.zoomIn();
+      },
+      "mouseover": function mouseover($event) {
+        return _vm.showToolitip(0);
+      },
+      "mouseout": function mouseout($event) {
+        return _vm.hideToolitip(0);
+      }
+    },
+    slot: "reference"
+  })], 1), _c('el-popover', {
+    attrs: {
+      "content": "Zoom out",
+      "placement": "top-end",
+      "append-to-body": false,
+      "trigger": "manual",
+      "popper-class": "scaffold-popper popper-zoomout non-selectable"
+    },
+    model: {
+      value: _vm.hoverVisabilities[1].value,
+      callback: function callback($$v) {
+        _vm.$set(_vm.hoverVisabilities[1], "value", $$v);
+      },
+      expression: "hoverVisabilities[1].value"
+    }
+  }, [_c('map-svg-icon', {
+    staticClass: "icon-button zoomOut",
+    attrs: {
+      "slot": "reference",
+      "icon": "zoomOut"
+    },
+    nativeOn: {
+      "click": function click($event) {
+        return _vm.zoomOut();
+      },
+      "mouseover": function mouseover($event) {
+        return _vm.showToolitip(1);
+      },
+      "mouseout": function mouseout($event) {
+        return _vm.hideToolitip(1);
+      }
+    },
+    slot: "reference"
+  })], 1), _c('el-popover', {
+    attrs: {
+      "placement": "top",
+      "append-to-body": false,
+      "trigger": "manual",
+      "popper-class": "scaffold-popper non-selectable"
+    },
+    model: {
+      value: _vm.hoverVisabilities[2].value,
+      callback: function callback($$v) {
+        _vm.$set(_vm.hoverVisabilities[2], "value", $$v);
+      },
+      expression: "hoverVisabilities[2].value"
+    }
+  }, [_c('div', [_vm._v(" Fit to "), _c('br'), _vm._v(" window ")]), _c('map-svg-icon', {
+    staticClass: "icon-button fitWindow",
+    attrs: {
+      "slot": "reference",
+      "icon": "fitWindow"
+    },
+    nativeOn: {
+      "click": function click($event) {
+        return _vm.fitWindow();
+      },
+      "mouseover": function mouseover($event) {
+        return _vm.showToolitip(2);
+      },
+      "mouseout": function mouseout($event) {
+        return _vm.hideToolitip(2);
+      }
+    },
+    slot: "reference"
+  })], 1)], 1), _c('el-popover', {
+    ref: "backgroundPopover",
+    attrs: {
+      "placement": "top-start",
+      "width": "128",
+      "append-to-body": false,
+      "trigger": "click",
+      "popper-class": "background-popper non-selectable"
+    }
+  }, [_c('el-row', {
+    staticClass: "backgroundText"
+  }, [_vm._v(" Change background ")]), _c('el-row', {
+    staticClass: "backgroundChooser"
+  }, _vm._l(_vm.availableBackground, function (item) {
+    return _c('div', {
+      key: item,
+      class: ['backgroundChoice', item, item == _vm.currentBackground ? 'active' : ''],
+      on: {
+        "click": function click($event) {
+          return _vm.backgroundChangeCallback(item);
+        }
+      }
+    });
+  }), 0)], 1), _c('el-popover', {
+    attrs: {
+      "content": "Change background color",
+      "placement": "right",
+      "append-to-body": false,
+      "trigger": "manual",
+      "popper-class": "scaffold-popper right-popper non-selectable"
+    },
+    model: {
+      value: _vm.hoverVisabilities[3].value,
+      callback: function callback($$v) {
+        _vm.$set(_vm.hoverVisabilities[3], "value", $$v);
+      },
+      expression: "hoverVisabilities[3].value"
+    }
+  }, [_c('map-svg-icon', {
+    directives: [{
+      name: "popover",
+      rawName: "v-popover:backgroundPopover",
+      arg: "backgroundPopover"
+    }],
+    staticClass: "icon-button background-colour",
+    class: {
+      open: _vm.drawerOpen,
+      close: !_vm.drawerOpen
+    },
+    attrs: {
+      "slot": "reference",
+      "icon": "changeBckgd"
+    },
+    nativeOn: {
+      "mouseover": function mouseover($event) {
+        return _vm.showToolitip(3);
+      },
+      "mouseout": function mouseout($event) {
+        return _vm.hideToolitip(3);
+      }
+    },
+    slot: "reference"
+  })], 1)], 1)], 1);
+};
+var staticRenderFns = [];
+
+// CONCATENATED MODULE: ./src/components/ScaffoldVuer.vue?vue&type=template&id=15421d6d&scoped=true&
+
+// EXTERNAL MODULE: ./node_modules/element-ui/lib/theme-chalk/tabs.css
+var tabs = __webpack_require__("075a");
+
+// EXTERNAL MODULE: ./node_modules/element-ui/lib/theme-chalk/base.css
+var base = __webpack_require__("450d");
+
 // EXTERNAL MODULE: ./node_modules/element-ui/lib/tabs.js
 var lib_tabs = __webpack_require__("72aa");
 var lib_tabs_default = /*#__PURE__*/__webpack_require__.n(lib_tabs);
@@ -22678,6 +22778,9 @@ var web_url_search_params_js_ = __webpack_require__("712c");
 // EXTERNAL MODULE: external "core-js/modules/web.dom-collections.for-each.js"
 var web_dom_collections_for_each_js_ = __webpack_require__("13e3");
 
+// EXTERNAL MODULE: external "core-js/modules/es.array.push.js"
+var es_array_push_js_ = __webpack_require__("2439");
+
 // EXTERNAL MODULE: external "core-js/modules/es.object.keys.js"
 var es_object_keys_js_ = __webpack_require__("ea64");
 
@@ -22685,10 +22788,76 @@ var es_object_keys_js_ = __webpack_require__("ea64");
 var external_vue_ = __webpack_require__("8bbf");
 var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1aefe1b9-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OpacityControls.vue?vue&type=template&id=4c00a30f&scoped=true&
-var OpacityControlsvue_type_template_id_4c00a30f_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.material!=undefined)?_c('div',{ref:"control",staticClass:"opacity-control"},[_c('el-drawer',{staticClass:"drawer-content",attrs:{"custom-class":"my-drawer","visible":_vm.drawerOpen,"append-to-body":false,"modal-append-to-body":false,"size":"300","with-header":false,"wrapper-closable":false,"modal":false},on:{"update:visible":function($event){_vm.drawerOpen=$event}}},[(_vm.drawerOpen)?_c('div',{staticClass:"tab-button close",on:{"click":_vm.toggleDrawer}},[_c('i',{staticClass:"el-icon-arrow-right"})]):_vm._e(),_c('el-container',{staticClass:"opacity-container"},[_c('el-header',{staticClass:"header",attrs:{"height":"37px"}},[_c('div',[_vm._v("Opacity")])]),_c('el-main',{staticClass:"main"},[_c('div',{staticClass:"block"},[_c('span',{staticClass:"display"},[_vm._v(_vm._s(_vm.displayString))]),_c('el-slider',{staticClass:"my-slider",attrs:{"step":0.01,"min":0,"max":1,"format-tooltip":_vm.formatTooltip,"show-tooltip":false},model:{value:(_vm.material.opacity),callback:function ($$v) {_vm.$set(_vm.material, "opacity", $$v)},expression:"material.opacity"}})],1)])],1)],1),(!_vm.drawerOpen)?_c('div',{staticClass:"tab-button open",on:{"click":_vm.toggleDrawer}},[_c('i',{staticClass:"el-icon-arrow-left"})]):_vm._e()],1):_vm._e()}
-var OpacityControlsvue_type_template_id_4c00a30f_scoped_true_staticRenderFns = []
-
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"22a1b63e-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OpacityControls.vue?vue&type=template&id=4c00a30f&scoped=true&
+var OpacityControlsvue_type_template_id_4c00a30f_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _vm.material != undefined ? _c('div', {
+    ref: "control",
+    staticClass: "opacity-control"
+  }, [_c('el-drawer', {
+    staticClass: "drawer-content",
+    attrs: {
+      "custom-class": "my-drawer",
+      "visible": _vm.drawerOpen,
+      "append-to-body": false,
+      "modal-append-to-body": false,
+      "size": "300",
+      "with-header": false,
+      "wrapper-closable": false,
+      "modal": false
+    },
+    on: {
+      "update:visible": function updateVisible($event) {
+        _vm.drawerOpen = $event;
+      }
+    }
+  }, [_vm.drawerOpen ? _c('div', {
+    staticClass: "tab-button close",
+    on: {
+      "click": _vm.toggleDrawer
+    }
+  }, [_c('i', {
+    staticClass: "el-icon-arrow-right"
+  })]) : _vm._e(), _c('el-container', {
+    staticClass: "opacity-container"
+  }, [_c('el-header', {
+    staticClass: "header",
+    attrs: {
+      "height": "37px"
+    }
+  }, [_c('div', [_vm._v("Opacity")])]), _c('el-main', {
+    staticClass: "main"
+  }, [_c('div', {
+    staticClass: "block"
+  }, [_c('span', {
+    staticClass: "display"
+  }, [_vm._v(_vm._s(_vm.displayString))]), _c('el-slider', {
+    staticClass: "my-slider",
+    attrs: {
+      "step": 0.01,
+      "min": 0,
+      "max": 1,
+      "format-tooltip": _vm.formatTooltip,
+      "show-tooltip": false
+    },
+    model: {
+      value: _vm.material.opacity,
+      callback: function callback($$v) {
+        _vm.$set(_vm.material, "opacity", $$v);
+      },
+      expression: "material.opacity"
+    }
+  })], 1)])], 1)], 1), !_vm.drawerOpen ? _c('div', {
+    staticClass: "tab-button open",
+    on: {
+      "click": _vm.toggleDrawer
+    }
+  }, [_c('i', {
+    staticClass: "el-icon-arrow-left"
+  })]) : _vm._e()], 1) : _vm._e();
+};
+var OpacityControlsvue_type_template_id_4c00a30f_scoped_true_staticRenderFns = [];
 
 // CONCATENATED MODULE: ./src/components/OpacityControls.vue?vue&type=template&id=4c00a30f&scoped=true&
 
@@ -22754,64 +22923,6 @@ var locale_default = /*#__PURE__*/__webpack_require__.n(locale);
 
 
 
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
 /* eslint-disable no-alert, no-console */
 
 
@@ -22823,10 +22934,10 @@ external_vue_default.a.use(lib_header_default.a);
 external_vue_default.a.use(lib_icon_default.a);
 external_vue_default.a.use(lib_main_default.a);
 external_vue_default.a.use(lib_slider_default.a);
+
 /**
  * A component to control the opacity of the target object.
  */
-
 /* harmony default export */ var OpacityControlsvue_type_script_lang_js_ = ({
   name: "OpacityControls",
   data: function data() {
@@ -22862,8 +22973,8 @@ external_vue_default.a.use(lib_slider_default.a);
 });
 // CONCATENATED MODULE: ./src/components/OpacityControls.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_OpacityControlsvue_type_script_lang_js_ = (OpacityControlsvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/components/OpacityControls.vue?vue&type=style&index=0&id=4c00a30f&scoped=true&lang=scss&
-var OpacityControlsvue_type_style_index_0_id_4c00a30f_scoped_true_lang_scss_ = __webpack_require__("21a1");
+// EXTERNAL MODULE: ./src/components/OpacityControls.vue?vue&type=style&index=0&id=4c00a30f&prod&scoped=true&lang=scss&
+var OpacityControlsvue_type_style_index_0_id_4c00a30f_prod_scoped_true_lang_scss_ = __webpack_require__("8e0f");
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -22872,20 +22983,19 @@ var OpacityControlsvue_type_style_index_0_id_4c00a30f_scoped_true_lang_scss_ = _
 // This module is a runtime utility for cleaner component module output and will
 // be included in the final webpack user bundle.
 
-function normalizeComponent (
+function normalizeComponent(
   scriptExports,
   render,
   staticRenderFns,
   functionalTemplate,
   injectStyles,
   scopeId,
-  moduleIdentifier, /* server only */
+  moduleIdentifier /* server only */,
   shadowMode /* vue-cli only */
 ) {
   // Vue.extend constructor export interop
-  var options = typeof scriptExports === 'function'
-    ? scriptExports.options
-    : scriptExports
+  var options =
+    typeof scriptExports === 'function' ? scriptExports.options : scriptExports
 
   // render functions
   if (render) {
@@ -22905,7 +23015,8 @@ function normalizeComponent (
   }
 
   var hook
-  if (moduleIdentifier) { // server build
+  if (moduleIdentifier) {
+    // server build
     hook = function (context) {
       // 2.3 injection
       context =
@@ -22931,11 +23042,11 @@ function normalizeComponent (
   } else if (injectStyles) {
     hook = shadowMode
       ? function () {
-        injectStyles.call(
-          this,
-          (options.functional ? this.parent : this).$root.$options.shadowRoot
-        )
-      }
+          injectStyles.call(
+            this,
+            (options.functional ? this.parent : this).$root.$options.shadowRoot
+          )
+        }
       : injectStyles
   }
 
@@ -22946,16 +23057,14 @@ function normalizeComponent (
       options._injectStyles = hook
       // register for functional component in vue file
       var originalRender = options.render
-      options.render = function renderWithStyleInjection (h, context) {
+      options.render = function renderWithStyleInjection(h, context) {
         hook.call(context)
         return originalRender(h, context)
       }
     } else {
       // inject component registration as beforeCreate hook
       var existing = options.beforeCreate
-      options.beforeCreate = existing
-        ? [].concat(existing, hook)
-        : [hook]
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
     }
   }
 
@@ -22986,12 +23095,43 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var OpacityControls = (component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1aefe1b9-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldTooltip.vue?vue&type=template&id=b9fa59b4&scoped=true&
-var ScaffoldTooltipvue_type_template_id_b9fa59b4_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"region-tooltip",style:(_vm.position)},[_c('el-popover',{ref:"tooltip",attrs:{"placement":"top","append-to-body":false,"trigger":"manual","popper-class":"tooltip-popper non-selectable"},model:{value:(_vm.display),callback:function ($$v) {_vm.display=$$v},expression:"display"}},[_c('div',[_vm._v(_vm._s(_vm.label))]),_c('i',{directives:[{name:"popover",rawName:"v-popover:tooltip",arg:"tooltip"}]})])],1)}
-var ScaffoldTooltipvue_type_template_id_b9fa59b4_scoped_true_staticRenderFns = []
-
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"22a1b63e-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldTooltip.vue?vue&type=template&id=b7267e48&scoped=true&
+var ScaffoldTooltipvue_type_template_id_b7267e48_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "region-tooltip",
+    style: _vm.position
+  }, [_c('el-popover', {
+    ref: "tooltip",
+    attrs: {
+      "placement": "top",
+      "append-to-body": false,
+      "trigger": "manual",
+      "popper-class": "tooltip-popper non-selectable"
+    },
+    model: {
+      value: _vm.display,
+      callback: function callback($$v) {
+        _vm.display = $$v;
+      },
+      expression: "display"
+    }
+  }, [_c('div', {
+    staticClass: "tooltip-text"
+  }, [_vm._v(_vm._s(_vm.label))]), _vm.region ? _c('div', {
+    staticClass: "tooltip-text"
+  }, [_vm._v("Region: " + _vm._s(_vm.region))]) : _vm._e(), _c('i', {
+    directives: [{
+      name: "popover",
+      rawName: "v-popover:tooltip",
+      arg: "tooltip"
+    }]
+  })])], 1);
+};
+var ScaffoldTooltipvue_type_template_id_b7267e48_scoped_true_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/ScaffoldTooltip.vue?vue&type=template&id=b9fa59b4&scoped=true&
+// CONCATENATED MODULE: ./src/components/ScaffoldTooltip.vue?vue&type=template&id=b7267e48&scoped=true&
 
 // EXTERNAL MODULE: external "core-js/modules/es.number.constructor.js"
 var es_number_constructor_js_ = __webpack_require__("f989");
@@ -23001,33 +23141,16 @@ var es_number_constructor_js_ = __webpack_require__("f989");
 
 
 
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
 /* eslint-disable no-alert, no-console */
 
 
 
 locale_default.a.use(en_default.a);
 external_vue_default.a.use(lib_popover_default.a);
+
 /**
  * A component to control the opacity of the target object.
  */
-
 /* harmony default export */ var ScaffoldTooltipvue_type_script_lang_js_ = ({
   name: "ScaffoldTooltip",
   props: {
@@ -23035,6 +23158,10 @@ external_vue_default.a.use(lib_popover_default.a);
       type: String,
       default: ""
     },
+    region: {
+      type: String,
+      default: ""
+    },
     visible: {
       type: Boolean,
       default: false
@@ -23078,8 +23205,8 @@ external_vue_default.a.use(lib_popover_default.a);
 });
 // CONCATENATED MODULE: ./src/components/ScaffoldTooltip.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_ScaffoldTooltipvue_type_script_lang_js_ = (ScaffoldTooltipvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/components/ScaffoldTooltip.vue?vue&type=style&index=0&id=b9fa59b4&scoped=true&lang=scss&
-var ScaffoldTooltipvue_type_style_index_0_id_b9fa59b4_scoped_true_lang_scss_ = __webpack_require__("a786");
+// EXTERNAL MODULE: ./src/components/ScaffoldTooltip.vue?vue&type=style&index=0&id=b7267e48&prod&scoped=true&lang=scss&
+var ScaffoldTooltipvue_type_style_index_0_id_b7267e48_prod_scoped_true_lang_scss_ = __webpack_require__("5d4b");
 
 // CONCATENATED MODULE: ./src/components/ScaffoldTooltip.vue
 
@@ -23092,37 +23219,110 @@ var ScaffoldTooltipvue_type_style_index_0_id_b9fa59b4_scoped_true_lang_scss_ = _
 
 var ScaffoldTooltip_component = normalizeComponent(
   components_ScaffoldTooltipvue_type_script_lang_js_,
-  ScaffoldTooltipvue_type_template_id_b9fa59b4_scoped_true_render,
-  ScaffoldTooltipvue_type_template_id_b9fa59b4_scoped_true_staticRenderFns,
+  ScaffoldTooltipvue_type_template_id_b7267e48_scoped_true_render,
+  ScaffoldTooltipvue_type_template_id_b7267e48_scoped_true_staticRenderFns,
   false,
   null,
-  "b9fa59b4",
+  "b7267e48",
   null
   
 )
 
 /* harmony default export */ var ScaffoldTooltip = (ScaffoldTooltip_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1aefe1b9-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TreeControls.vue?vue&type=template&id=3989f99a&scoped=true&
-var TreeControlsvue_type_template_id_3989f99a_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tree-controls",class:{ open: _vm.drawerOpen, close: !_vm.drawerOpen }},[_c('div',{staticClass:"traditional-container"},[_c('el-row',[_c('el-col',{attrs:{"span":12}},[_c('div',{staticClass:"regions-display-text"},[_vm._v(" Regions ")])])],1),_c('div',{staticClass:"tree-container"},[_c('el-tree',{ref:"regionTree",attrs:{"default-expanded-keys":['__r/'],"node-key":"id","show-checkbox":"","check-strictly":false,"data":_vm.treeData,"default-checked-keys":['__r/'],"expand-on-click-node":false},on:{"check":_vm.checkChanged},scopedSlots:_vm._u([{key:"default",fn:function(ref){
-var node = ref.node;
-var data = ref.data;
-return _c('span',{staticClass:"region-tree-node",class:{
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"22a1b63e-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TreeControls.vue?vue&type=template&id=7c593a3d&scoped=true&
+var TreeControlsvue_type_template_id_7c593a3d_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "tree-controls",
+    class: {
+      open: _vm.drawerOpen,
+      close: !_vm.drawerOpen
+    }
+  }, [_c('div', {
+    staticClass: "traditional-container"
+  }, [_c('el-row', [_c('el-col', {
+    attrs: {
+      "span": 12
+    }
+  }, [_c('div', {
+    staticClass: "regions-display-text"
+  }, [_vm._v(" Regions ")])])], 1), _c('div', {
+    staticClass: "tree-container"
+  }, [_c('el-tree', {
+    ref: "regionTree",
+    attrs: {
+      "default-expanded-keys": ['__r/'],
+      "node-key": "id",
+      "show-checkbox": "",
+      "check-strictly": false,
+      "data": _vm.treeData,
+      "default-checked-keys": ['__r/'],
+      "expand-on-click-node": false,
+      "renderAfterExpand": false
+    },
+    on: {
+      "check": _vm.checkChanged
+    },
+    scopedSlots: _vm._u([{
+      key: "default",
+      fn: function fn(_ref) {
+        var node = _ref.node,
+          data = _ref.data;
+        return _c('span', {
+          staticClass: "region-tree-node",
+          class: {
             activeItem: _vm.nodeIsActive(data),
-            hoverItem: _vm.nodeIsHover(data),
-          },on:{"click":function($event){return _vm.changeActiveByNode(data, true)},"mouseover":function($event){return _vm.changeHoverByNode(data, true)}}},[(data.primitives)?_c('el-color-picker',{class:{ 'show-picker': _vm.showColourPicker },attrs:{"value":_vm.getColour(data),"size":"small","popper-class":_vm.myPopperClass},on:{"change":function($event){return _vm.setColour(data, $event)}}}):_vm._e(),_c('span',[_vm._v(_vm._s(node.label))])],1)}}])})],1)],1),_c('div',{staticClass:"drawer-button",class:{ open: _vm.drawerOpen, close: !_vm.drawerOpen },on:{"click":_vm.toggleDrawer}},[_c('i',{staticClass:"el-icon-arrow-left"})])])}
-var TreeControlsvue_type_template_id_3989f99a_scoped_true_staticRenderFns = []
-
+            hoverItem: _vm.nodeIsHover(data)
+          },
+          on: {
+            "click": function click($event) {
+              return _vm.changeActiveByNode(data, true);
+            },
+            "mouseover": function mouseover($event) {
+              return _vm.changeHoverByNode(data, true);
+            }
+          }
+        }, [data.primitives ? _c('el-color-picker', {
+          class: {
+            'show-picker': _vm.showColourPicker
+          },
+          attrs: {
+            "value": _vm.getColour(data),
+            "size": "small",
+            "popper-class": _vm.myPopperClass
+          },
+          on: {
+            "change": function change($event) {
+              return _vm.setColour(data, $event);
+            }
+          }
+        }) : _vm._e(), _c('span', [_vm._v(_vm._s(node.label))])], 1);
+      }
+    }])
+  })], 1)], 1), _c('div', {
+    staticClass: "drawer-button",
+    class: {
+      open: _vm.drawerOpen,
+      close: !_vm.drawerOpen
+    },
+    on: {
+      "click": _vm.toggleDrawer
+    }
+  }, [_c('i', {
+    staticClass: "el-icon-arrow-left"
+  })])]);
+};
+var TreeControlsvue_type_template_id_7c593a3d_scoped_true_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/TreeControls.vue?vue&type=template&id=3989f99a&scoped=true&
+// CONCATENATED MODULE: ./src/components/TreeControls.vue?vue&type=template&id=7c593a3d&scoped=true&
 
 // CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) {
     arr2[i] = arr[i];
   }
-
   return arr2;
 }
 // CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js
@@ -23249,9 +23449,8 @@ var es_array_map_js_ = __webpack_require__("4391");
 
 
 
-var createListFromPrimitives = function createListFromPrimitives(primitives) {
-  var list = [];
 
+var createListFromPrimitives = function createListFromPrimitives(primitives, list) {
   if (primitives) {
     primitives.forEach(function (primitive) {
       if (primitive && primitive.getVisibility()) {
@@ -23262,7 +23461,6 @@ var createListFromPrimitives = function createListFromPrimitives(primitives) {
       }
     });
   }
-
   return list;
 };
 var extractAllIds = function extractAllIds(item, list) {
@@ -23275,14 +23473,12 @@ var utilities_findObjectsWithNames = function findObjectsWithNames(rootRegion, n
   var targetRegion = rootRegion;
   var targetObjects = [];
   if (regionPath) targetRegion = rootRegion.findChildFromPath(regionPath);
-
   if (targetRegion) {
     names.forEach(function (name) {
       var temp = targetRegion.findObjectsWithGroupName(name, true);
       targetObjects.push.apply(targetObjects, _toConsumableArray(temp));
     });
   }
-
   return targetObjects;
 };
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TreeControls.vue?vue&type=script&lang=js&
@@ -23311,101 +23507,35 @@ var utilities_findObjectsWithNames = function findObjectsWithNames(rootRegion, n
 
 
 
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
 
 /* eslint-disable no-alert, no-console */
 
 
 
 
-
 var orderBy = __webpack_require__("6814");
-
 var uniq = __webpack_require__("4e2d");
-
 locale_default.a.use(en_default.a);
 external_vue_default.a.use(lib_checkbox_default.a);
 external_vue_default.a.use(lib_checkbox_group_default.a);
 external_vue_default.a.use(lib_color_picker_default.a);
 external_vue_default.a.use(lib_row_default.a);
 external_vue_default.a.use(lib_tree_default.a);
-
 var nameSorting = function nameSorting(a, b) {
   var labelA = a.label.toUpperCase();
   var labelB = b.label.toUpperCase();
-
   if (labelA < labelB) {
     return -1;
   }
-
   if (labelA > labelB) {
     return 1;
   }
-
   return 0;
 };
+
 /**
  * A vue component for toggling visibility of various regions.
  */
-
-
 /* harmony default export */ var TreeControlsvue_type_script_lang_js_ = ({
   name: "TreeControls",
   props: {
@@ -23416,7 +23546,6 @@ var nameSorting = function nameSorting(a, b) {
       type: Object,
       default: undefined
     },
-
     /**
      * Enable/disable colour picker
      */
@@ -23451,7 +23580,6 @@ var nameSorting = function nameSorting(a, b) {
   },
   created: function created() {
     var _this = this;
-
     this.module.sceneData.geometries.forEach(function (zincObject) {
       _this.zincObjectAdded(zincObject);
     });
@@ -23473,19 +23601,16 @@ var nameSorting = function nameSorting(a, b) {
   methods: {
     addTreeItem: function addTreeItem(parentContainer, item) {
       var _this2 = this;
-
+      //The following block prevent duplicate graphics with the same name
       for (var i = 0; i < parentContainer.length; i++) {
         if (parentContainer[i].id === item.id) {
           if (item.primitives && parentContainer[i].primitives) {
             var _parentContainer$i$pr;
-
             (_parentContainer$i$pr = parentContainer[i].primitives).push.apply(_parentContainer$i$pr, _toConsumableArray(item.primitives));
-
             return;
           }
         }
       }
-
       parentContainer.push(item);
       parentContainer.sort(function (a, b) {
         return nameSorting(a, b);
@@ -23502,16 +23627,13 @@ var nameSorting = function nameSorting(a, b) {
       if (!this.treeData[0].region && this.module && this.module.scene) {
         this.treeData[0].region = this.module.scene.getRootRegion();
       }
-
       if (paths.length > 0) {
         var _paths = _toConsumableArray(paths);
-
         var childRegion = data.children.find(function (child) {
           return child.label == _paths[0];
         });
         var path = prefix + "/" + paths[0];
         var id = "__r" + path;
-
         if (!childRegion) {
           var region = this.treeData[0].region.findChildFromPath(path);
           childRegion = {
@@ -23522,9 +23644,7 @@ var nameSorting = function nameSorting(a, b) {
           };
           this.addTreeItem(data.children, childRegion);
         }
-
         _paths.shift();
-
         return this.findOrCreateRegion(childRegion, _paths, path);
       } else {
         return data;
@@ -23533,42 +23653,34 @@ var nameSorting = function nameSorting(a, b) {
     nodeIsActive: function nodeIsActive(data) {
       for (var i = 0; i < this.active.length; i++) {
         var item = this.active[i];
-
         if (item.group === data.label && (item.regionPath === data.regionPath || item.regionPath === undefined)) {
           return true;
         }
       }
-
       return false;
     },
     nodeIsHover: function nodeIsHover(data) {
       for (var i = 0; i < this.hover.length; i++) {
         var item = this.hover[i];
-
         if (item.group === data.label && (item.regionPath === data.regionPath || item.regionPath === undefined)) {
           return true;
         }
       }
-
       return false;
     },
-
     /**
      * This is called when a new zinc object is read into the scene.
      */
     zincObjectAdded: function zincObjectAdded(zincObject) {
       var region = zincObject.region;
-
       if (region) {
         var paths = region.getFullSeparatedPath();
         var regionData = this.findOrCreateRegion(this.treeData[0], paths, "");
-
         if (zincObject.groupName) {
           if (regionData) {
             if (!regionData.children) {
               regionData.children = [];
             }
-
             var id = regionData.id.replace("__r/", "") + "/" + zincObject.groupName;
             var child = {
               label: zincObject.groupName,
@@ -23591,12 +23703,8 @@ var nameSorting = function nameSorting(a, b) {
       });
     },
     updateActiveUI: function updateActiveUI(primitives) {
-      var _this$active;
-
-      this.active = [];
-      var list = createListFromPrimitives(primitives);
-
-      (_this$active = this.active).push.apply(_this$active, _toConsumableArray(list));
+      this.active.length = 0;
+      createListFromPrimitives(primitives, this.active);
     },
     changeActiveByPrimitives: function changeActiveByPrimitives(primitives, propagate) {
       if (primitives && primitives.length > 0) {
@@ -23605,16 +23713,11 @@ var nameSorting = function nameSorting(a, b) {
       } else {
         this.removeActive(propagate);
       }
-
       this.removeHover(propagate);
     },
     updateHoverUI: function updateHoverUI(primitives) {
-      var _this$hover;
-
-      this.hover = [];
-      var list = createListFromPrimitives(primitives);
-
-      (_this$hover = this.hover).push.apply(_this$hover, _toConsumableArray(list));
+      this.hover.length = 0;
+      createListFromPrimitives(primitives, this.hover);
     },
     changeHoverByPrimitives: function changeHoverByPrimitives(primitives, propagate) {
       if (primitives && primitives.length > 0) {
@@ -23624,7 +23727,6 @@ var nameSorting = function nameSorting(a, b) {
         this.removeHover(propagate);
       }
     },
-
     /**
      * Select a region by its name.
      */
@@ -23633,7 +23735,6 @@ var nameSorting = function nameSorting(a, b) {
       var targetObjects = utilities_findObjectsWithNames(rootRegion, names, regionPath);
       this.changeActiveByPrimitives(targetObjects, propagate);
     },
-
     /**
      * Hover a region by its name.
      */
@@ -23648,7 +23749,6 @@ var nameSorting = function nameSorting(a, b) {
     changeHoverByNode: function changeHoverByNode(node, propagate) {
       if (node.primitives) this.changeHoverByPrimitives(node.primitives, propagate);
     },
-
     /**
      * Unselect the current selected region.
      */
@@ -23656,435 +23756,181 @@ var nameSorting = function nameSorting(a, b) {
       this.active = [];
       this.$emit("object-selected", undefined, propagate);
     },
-
     /**
      * Unselect the current hover region.
      */
     removeHover: function removeHover(propagate) {
-      this.hover = [];
-      this.$emit("object-hovered", undefined, propagate);
-    },
-
-    /**
-     * Reset the controls.
-     */
-    clear: function clear() {
-      this.active.group = "";
-      this.active.regionPath = undefined;
-      this.hover.group = "";
-      this.hover.regionPath = undefined;
-      this.$refs.regionTree.updateKeyChildren("__r/", []);
-      this.$emit("object-selected", undefined);
-    },
-    getColour: function getColour(nodeData) {
-      if (nodeData) {
-        var graphic = nodeData.primitives[0];
-
-        if (graphic) {
-          var hex = graphic.getColourHex();
-          if (hex) return "#" + hex;
-        }
-      }
-
-      return "#FFFFFF";
-    },
-    setColour: function setColour(nodeData, value) {
-      if (nodeData && nodeData.primitives) {
-        nodeData.primitives.forEach(function (primitive) {
-          var hexString = value.replace("#", "0x");
-          primitive.setColourHex(hexString);
-        });
-      }
-    },
-    viewAll: function viewAll() {
-      this.module.viewAll();
-    },
-    visibilityToggle: function visibilityToggle(item, event) {
-      this.module.changeOrganPartsVisibility(item, event);
-
-      if (event == false) {
-        if (this.activeRegion === item) {
-          this.removeActive(true);
-        }
-
-        if (this.hoverRegion === item) {
-          this.removeHover(true);
-        }
-      }
-    },
-    toggleDrawer: function toggleDrawer() {
-      this.drawerOpen = !this.drawerOpen;
-      this.$emit("drawer-toggled", this.drawerOpen);
-    },
-    setTreeVisibility: function setTreeVisibility(node, list) {
-      var _this3 = this;
-
-      var flag = false;
-      if (list.includes(node.id)) flag = true;
-      if (node.region) node.region.setVisibility(flag);
-      if (node.primitives) node.primitives.forEach(function (primitive) {
-        return primitive.setVisibility(flag);
-      });
-      if (node.children) node.children.forEach(function (child) {
-        return _this3.setTreeVisibility(child, list);
-      });
-    },
-    checkAllKeys: function checkAllKeys() {
-      var keysList = [];
-      extractAllIds(this.treeData[0], keysList);
-      this.setTreeVisibility(this.treeData[0], keysList);
-      this.$refs.regionTree.setCheckedKeys(keysList);
-    },
-    getState: function getState() {
-      var checkedItems = this.$refs.regionTree.getCheckedKeys();
-      if (checkedItems.length === this.__nodeNumbers) return {
-        checkAll: true,
-        version: "2.0"
-      };
-      return {
-        checkedItems: checkedItems,
-        version: "2.0"
-      };
-    },
-    setState: function setState(state) {
-      if (state) {
-        if (state.checkAll) {
-          this.checkAllKeys();
-        } else if (state.checkedItems) {
-          var list = [];
-
-          if (state.version !== "2.0") {
-            list = state.checkedItems.map(function (item) {
-              return "/" + item;
-            });
-            list.shift("__r/");
-          } else {
-            var _list;
-
-            (_list = list).push.apply(_list, _toConsumableArray(state.checkedItems));
-          }
-
-          this.setTreeVisibility(this.treeData[0], list);
-          this.$refs.regionTree.setCheckedKeys(list);
-        }
-      }
-    }
-  }
-});
-// CONCATENATED MODULE: ./src/components/TreeControls.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_TreeControlsvue_type_script_lang_js_ = (TreeControlsvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/components/TreeControls.vue?vue&type=style&index=0&id=3989f99a&scoped=true&lang=scss&
-var TreeControlsvue_type_style_index_0_id_3989f99a_scoped_true_lang_scss_ = __webpack_require__("f692");
-
-// EXTERNAL MODULE: ./src/components/TreeControls.vue?vue&type=style&index=1&lang=css&
-var TreeControlsvue_type_style_index_1_lang_css_ = __webpack_require__("8f55");
-
-// CONCATENATED MODULE: ./src/components/TreeControls.vue
-
-
-
-
-
-
-
-/* normalize component */
-
-var TreeControls_component = normalizeComponent(
-  components_TreeControlsvue_type_script_lang_js_,
-  TreeControlsvue_type_template_id_3989f99a_scoped_true_render,
-  TreeControlsvue_type_template_id_3989f99a_scoped_true_staticRenderFns,
-  false,
-  null,
-  "3989f99a",
-  null
-  
-)
-
-/* harmony default export */ var TreeControls = (TreeControls_component.exports);
-// EXTERNAL MODULE: external "@abi-software/svg-sprite"
-var svg_sprite_ = __webpack_require__("429c");
-
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldVuer.vue?vue&type=script&lang=js&
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
+      this.hover = [];
+      this.$emit("object-hovered", undefined, propagate);
+    },
+    /**
+     * Reset the controls.
+     */
+    clear: function clear() {
+      this.active.group = "";
+      this.active.regionPath = undefined;
+      this.hover.group = "";
+      this.hover.regionPath = undefined;
+      this.$refs.regionTree.updateKeyChildren("__r/", []);
+      this.$emit("object-selected", undefined);
+    },
+    getColour: function getColour(nodeData) {
+      if (nodeData) {
+        var graphic = nodeData.primitives[0];
+        if (graphic) {
+          var hex = graphic.getColourHex();
+          if (hex) return "#" + hex;
+        }
+      }
+      return "#FFFFFF";
+    },
+    setColour: function setColour(nodeData, value) {
+      if (nodeData && nodeData.primitives) {
+        nodeData.primitives.forEach(function (primitive) {
+          var hexString = value.replace("#", "0x");
+          primitive.setColourHex(hexString);
+        });
+      }
+    },
+    viewAll: function viewAll() {
+      this.module.viewAll();
+    },
+    visibilityToggle: function visibilityToggle(item, event) {
+      this.module.changeOrganPartsVisibility(item, event);
+      if (event == false) {
+        if (this.activeRegion === item) {
+          this.removeActive(true);
+        }
+        if (this.hoverRegion === item) {
+          this.removeHover(true);
+        }
+      }
+    },
+    toggleDrawer: function toggleDrawer() {
+      this.drawerOpen = !this.drawerOpen;
+      this.$emit("drawer-toggled", this.drawerOpen);
+    },
+    setTreeVisibility: function setTreeVisibility(node, list) {
+      var _this3 = this;
+      var flag = false;
+      if (list.includes(node.id)) flag = true;
+      if (node.region) node.region.setVisibility(flag);
+      if (node.primitives) node.primitives.forEach(function (primitive) {
+        return primitive.setVisibility(flag);
+      });
+      if (node.children) node.children.forEach(function (child) {
+        return _this3.setTreeVisibility(child, list);
+      });
+    },
+    checkAllKeys: function checkAllKeys() {
+      var keysList = [];
+      extractAllIds(this.treeData[0], keysList);
+      this.setTreeVisibility(this.treeData[0], keysList);
+      this.$refs.regionTree.setCheckedKeys(keysList);
+    },
+    getState: function getState() {
+      var checkedItems = this.$refs.regionTree.getCheckedKeys();
+      if (checkedItems.length === this.__nodeNumbers) return {
+        checkAll: true,
+        version: "2.0"
+      };
+      return {
+        checkedItems: checkedItems,
+        version: "2.0"
+      };
+    },
+    setState: function setState(state) {
+      if (state) {
+        if (state.checkAll) {
+          this.checkAllKeys();
+        } else if (state.checkedItems) {
+          var list = [];
+          if (state.version !== "2.0") {
+            list = state.checkedItems.map(function (item) {
+              return "/" + item;
+            });
+            list.shift("__r/");
+          } else {
+            var _list;
+            (_list = list).push.apply(_list, _toConsumableArray(state.checkedItems));
+          }
+          this.setTreeVisibility(this.treeData[0], list);
+          this.$refs.regionTree.setCheckedKeys(list);
+        }
+      }
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/TreeControls.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_TreeControlsvue_type_script_lang_js_ = (TreeControlsvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./src/components/TreeControls.vue?vue&type=style&index=0&id=7c593a3d&prod&scoped=true&lang=scss&
+var TreeControlsvue_type_style_index_0_id_7c593a3d_prod_scoped_true_lang_scss_ = __webpack_require__("b869");
+
+// EXTERNAL MODULE: ./src/components/TreeControls.vue?vue&type=style&index=1&id=7c593a3d&prod&lang=css&
+var TreeControlsvue_type_style_index_1_id_7c593a3d_prod_lang_css_ = __webpack_require__("00f9");
+
+// CONCATENATED MODULE: ./src/components/TreeControls.vue
+
+
+
+
+
+
+
+/* normalize component */
+
+var TreeControls_component = normalizeComponent(
+  components_TreeControlsvue_type_script_lang_js_,
+  TreeControlsvue_type_template_id_7c593a3d_scoped_true_render,
+  TreeControlsvue_type_template_id_7c593a3d_scoped_true_staticRenderFns,
+  false,
+  null,
+  "7c593a3d",
+  null
+  
+)
+
+/* harmony default export */ var TreeControls = (TreeControls_component.exports);
+// EXTERNAL MODULE: external "@abi-software/svg-sprite"
+var svg_sprite_ = __webpack_require__("429c");
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldVuer.vue?vue&type=script&lang=js&
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 /* eslint-disable no-alert, no-console */
 
@@ -24105,18 +23951,15 @@ external_vue_default.a.use(lib_select_default.a);
 external_vue_default.a.use(lib_slider_default.a);
 external_vue_default.a.use(lib_tab_pane_default.a);
 external_vue_default.a.use(lib_tabs_default.a);
-
 var OrgansViewer = __webpack_require__("53d7").OrgansViewer;
-
 var EventNotifier = __webpack_require__("9b21").EventNotifier;
+
 /**
  * A vue component of the scaffold viewer.
  *
  * @requires ./OpacityControls.vue
  * @requires ./TreeControls.vue
  */
-
-
 /* harmony default export */ var ScaffoldVuervue_type_script_lang_js_ = ({
   name: "ScaffoldVuer",
   components: {
@@ -24137,7 +23980,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: String,
       default: ""
     },
-
     /**
      * Show the colour control of set to true.
      */
@@ -24145,7 +23987,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: Boolean,
       default: false
     },
-
     /**
      * Flag to show/hide the UI.
      */
@@ -24153,7 +23994,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: Boolean,
       default: true
     },
-
     /**
      * Display all graphics at start.
      *
@@ -24163,7 +24003,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: Boolean,
       default: true
     },
-
     /**
      * Use for toggling the help tooltips.
      */
@@ -24171,7 +24010,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: Boolean,
       default: false
     },
-
     /**
      * Use for show/display beta warning icon.
      */
@@ -24179,7 +24017,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: Boolean,
       default: true
     },
-
     /**
      * Warning message for the hovered over text
      * on the warning icon.
@@ -24188,15 +24025,13 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: String,
       default: "Beta feature - under active development"
     },
-
     /**
      * Show/hide pickable markers for regions.
      */
     displayMarkers: {
       type: Boolean,
-      default: true
+      default: false
     },
-
     /**
      * Show/hide minimap.
      */
@@ -24204,7 +24039,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: Boolean,
       default: false
     },
-
     /**
      * Format of the input URL
      */
@@ -24212,7 +24046,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: String,
       default: "metadata"
     },
-
     /**
      * Settings for minimap position, size and alignment.
      */
@@ -24228,7 +24061,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         };
       }
     },
-
     /**
      * State containing state of the scaffold.
      */
@@ -24236,7 +24068,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: Object,
       default: undefined
     },
-
     /**
      * Optional prop for the name of the region to focus on,
      * this option is ignored if state or viewURL is also provided.
@@ -24245,7 +24076,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: String,
       default: ""
     },
-
     /**
      * Optional prop for an URL of containing information of a viewport.
      * This option is ignored if state is also provided.
@@ -24255,7 +24085,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       type: String,
       default: ""
     },
-
     /**
      * Settings for turning on/off rendering
      */
@@ -24268,7 +24097,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
     return {
       sceneData: this.$module.sceneData,
       isPlaying: false,
-
       /**
        * This is set when scene is transitioning.
        */
@@ -24324,6 +24152,7 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       defaultCheckedKeys: [],
       tData: {
         label: "",
+        region: "",
         visible: false,
         x: 200,
         y: 200
@@ -24367,8 +24196,8 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       this.setHelpMode(val);
     },
     displayMarkers: function displayMarkers(val) {
-      this.$module.scene.displayMarkers = val; //Update pickable objects
-
+      this.$module.scene.displayMarkers = val;
+      //Update pickable objects
       this.$module.scene.forcePickableObjectsUpdate = true;
     },
     displayMinimap: function displayMinimap(val) {
@@ -24425,7 +24254,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
     organsAdded: function organsAdded() {
       this.loading = false;
     },
-
     /**
      * This is called when Change backgspeedround colour button
      * is pressed an causes the backgrouColornd colour to be changed
@@ -24436,7 +24264,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       this.currentBackground = colour;
       this.$module.zincRenderer.getThreeJSRenderer().setClearColor(this.currentBackground, 1);
     },
-
     /**
      * This is called by captueeScreenshot and after the last render
      * loop, it download a screenshot of the current scene with no UI.
@@ -24452,7 +24279,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       hrefElement.click();
       hrefElement.remove();
     },
-
     /**
      * Function for capturing a screenshot of the current rendering.
      *
@@ -24472,10 +24298,8 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
           return min + sec;
         }
       }
-
       return val ? val.toFixed(2) + " ms" : "0 ms";
     },
-
     /**
      * Function to reset the view to default.
      * Also called when the associated button is pressed.
@@ -24487,7 +24311,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         this.$module.scene.viewAll();
       }
     },
-
     /**
      * Function to zoom in.
      * Also called when the associated button is pressed.
@@ -24499,7 +24322,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         this.$module.scene.changeZoomByScrollRateUnit(-1);
       }
     },
-
     /**
      * Function to zoom out.
      * Also called when the associated button is pressed.
@@ -24511,7 +24333,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         this.$module.scene.changeZoomByScrollRateUnit(1);
       }
     },
-
     /**
      * Function to change the current play speed.
      *
@@ -24521,7 +24342,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       this.currentSpeed = speed;
       this.$module.setPlayRate(this.defaultRate * this.currentSpeed);
     },
-
     /**
      * Function used to stop the free spin
      *
@@ -24534,35 +24354,30 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
     },
     findObjectsWithGroupName: function findObjectsWithGroupName(name) {
       var objects = [];
-
       if (name && name != "" && this.$module.scene) {
         objects = this.$module.scene.findObjectsWithGroupName(name);
       }
-
       return objects;
     },
-
     /**
      * Focus on named region
      */
     viewRegion: function viewRegion(names) {
       var rootRegion = this.$module.scene.getRootRegion();
       var groups = Array.isArray(names) ? names : [names];
-      var dist = this.$module.scene.camera.far - this.$module.scene.camera.near;
       var objects = utilities_findObjectsWithNames(rootRegion, groups, "");
       var box = this.$module.scene.getBoundingBoxOfZincObjects(objects);
-
       if (box) {
         if (this.$module.isSyncControl()) {
           this.$module.setSyncControlZoomToBox(box);
         } else {
+          var dist = this.$module.scene.camera.far - this.$module.scene.camera.near;
           this.$module.scene.viewAllWithBoundingBox(box);
           this.$module.scene.camera.far = this.$module.scene.camera.near + dist;
+          this.$module.scene.camera.updateProjectionMatrix();
         }
-
         return true;
       }
-
       return false;
     },
     setFocusedRegion: function setFocusedRegion(name) {
@@ -24592,10 +24407,8 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       if (this.$module.zincRenderer) {
         return this.$module.zincRenderer.getThreeJSRenderer().info;
       }
-
       return undefined;
     },
-
     /**
      * Function used to rotate the scene.
      * Also called when the associated button is pressed.
@@ -24611,7 +24424,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         setTimeout(this.stopFreeSpin, 4000);
       }
     },
-
     /**
      * Callback when a region is selected/highlighted.
      * It will also update other controls.
@@ -24620,7 +24432,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       var names = [];
       var zincObjects = [];
       var region = undefined;
-
       if (event.eventType == 1 || event.eventType == 2) {
         event.identifiers.forEach(function (identifier) {
           if (identifier) {
@@ -24630,7 +24441,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         });
         zincObjects = event.zincObjects;
       }
-
       if (event.eventType == 1) {
         if (this.$refs.treeControl) {
           if (names.length > 0) {
@@ -24639,13 +24449,12 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
           } else {
             this.$refs.treeControl.removeActive(true);
           }
-        } // Triggers when an object has been selected
-
-
+        }
+        // Triggers when an object has been selected
         this.$emit("scaffold-selected", event.identifiers);
       } else if (event.eventType == 2) {
-        this.tData.visible = false; // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
-
+        this.tData.visible = false;
+        // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
         if (this.$refs.treeControl) {
           if (names.length > 0) {
             //this.$refs.treeControl.changeHoverByNames(names, region, false);
@@ -24654,19 +24463,17 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
             this.$refs.treeControl.removeHover(true);
           }
         }
-
         if (event.identifiers.length > 0 && event.identifiers[0]) {
           var id = event.identifiers[0].data.id ? event.identifiers[0].data.id : event.identifiers[0].data.group;
-
           if (event.identifiers[0].coords) {
             this.tData.visible = true;
             this.tData.label = id;
+            if (event.identifiers[0].data.region) this.tData.region = event.identifiers[0].data.region;else this.tData.region = "Root";
             this.tData.x = event.identifiers[0].coords.x;
             this.tData.y = event.identifiers[0].coords.y;
           }
-        } // Triggers when an object has been highlighted
-
-
+        }
+        // Triggers when an object has been highlighted
         this.$emit("scaffold-highlighted", event.identifiers);
       } else if (event.eventType == 3) {
         //MOVE
@@ -24679,7 +24486,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         }
       }
     },
-
     /**
      * Get the coordinates of the current selected region.
      *
@@ -24689,10 +24495,8 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       if (this.selectedObjects && this.selectedObjects.length > 0) {
         return this.$module.scene.getObjectsScreenXY([this.selectedObjects]);
       }
-
       return undefined;
     },
-
     /**
      * Return an object containing the window coordinates of the
      * current selected region which will be updated after each render
@@ -24703,7 +24507,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
     getDynamicSelectedCoordinates: function getDynamicSelectedCoordinates() {
       return this.$module.selectedScreenCoordinates;
     },
-
     /**
      * Callback when time is changed through the UI.
      */
@@ -24711,7 +24514,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       var normalizedTime = event / this.timeMax * 100;
       if (normalizedTime != this.sceneData.currentTime) this.$module.updateTime(normalizedTime);
     },
-
     /**
      * A callback used by children components. Set the selected zinc object
      *
@@ -24722,7 +24524,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       if (this.selectedObjects) this.$refs.opacityControl.setObject(this.selectedObjects[0]);
       if (objects) this.$module.setSelectedByZincObjects(objects, undefined, propagate);else this.$module.setSelectedByObjects([], undefined, propagate);
     },
-
     /**
      * A callback used by children components. Set the highlighted zinc object
      *
@@ -24732,7 +24533,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       this.hoveredObjects = objects;
       if (objects) this.$module.setHighlightedByZincObjects(objects, undefined, propagate);else this.$module.setHighlightedByObjects([], undefined, propagate);
     },
-
     /**
      * Set the selected by name.
      *
@@ -24740,7 +24540,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
      */
     changeActiveByName: function changeActiveByName(names, region, propagate) {
       var isArray = Array.isArray(names);
-
       if (names === undefined || isArray && names.length === 0) {
         this.$refs.treeControl.removeActive(propagate);
       } else {
@@ -24749,7 +24548,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         this.$refs.treeControl.changeActiveByNames(array, region, propagate);
       }
     },
-
     /**
      * Set the highlighted by name.
      *
@@ -24757,7 +24555,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
      */
     changeHighlightedByName: function changeHighlightedByName(names, region, propagate) {
       var isArray = Array.isArray(names);
-
       if (names === undefined || isArray && names.length === 0) {
         this.$refs.treeControl.removeHover(propagate);
       } else {
@@ -24766,7 +24563,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         this.$refs.treeControl.changeHoverByNames(array, region, propagate);
       }
     },
-
     /**
      * Start the animation.
      *
@@ -24776,7 +24572,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       this.$module.playAnimation(flag);
       this.isPlaying = flag;
     },
-
     /**
      * Function to toggle on/off overlay help.
      */
@@ -24793,21 +24588,18 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         });
       }
     },
-
     /**
      * This is called when mouse cursor enters supported elements
      * with help tootltips.
      */
     showToolitip: function showToolitip(tooltipNumber) {
       var _this = this;
-
       if (!this.inHelp) {
         this.tooltipWait = setTimeout(function () {
           _this.hoverVisabilities[tooltipNumber].value = true;
         }, 500);
       }
     },
-
     /**
      * This is called when mouse cursor exits supported element..
      */
@@ -24817,14 +24609,12 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         clearTimeout(this.tooltipWait);
       }
     },
-
     /**
      * Called when minimap settings has changed. Pass the
      * parameters to ZincJS and marked it for update.
      */
     updateMinimapScissor: function updateMinimapScissor() {
       var _this2 = this;
-
       Object.keys(this.minimapSettings).forEach(function (key) {
         _this2.$module.scene.minimapScissor[key] = _this2.minimapSettings[key];
       });
@@ -24837,28 +24627,23 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       this.animateDuration = this.$module.scene.getMetadataTag("Duration");
       var timeStamps = this.$module.scene.getMetadataTag("TimeStamps");
       this.timeStamps = {};
-
       for (var key in timeStamps) {
         this.timeStamps[timeStamps[key]] = key;
       }
-
       this.timeMax = this.$module.scene.getDuration();
     },
     setURLFinishCallback: function setURLFinishCallback(options) {
       var _this3 = this;
-
       return function () {
         if (options) {
           if (options.viewport) {
             _this3.$module.scene.getZincCameraControls().setCurrentCameraSettings(options.viewport);
           } else if (options.viewURL && options.viewURL !== "") {
             var url = new URL(options.viewURL, _this3.url);
-
             _this3.$module.scene.loadViewURL(url);
           } else if (options.region && options.region !== "") {
             _this3.viewRegion(options.region);
           }
-
           if (options.visibility) {
             // Some UIs may not be ready at this time.
             _this3.$nextTick(function () {
@@ -24866,21 +24651,14 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
             });
           }
         }
-
         _this3.updateSettingsfromScene();
-
         _this3.$module.updateTime(0.01);
-
         _this3.$module.updateTime(0);
-
         _this3.$module.unsetFinishDownloadCallback();
-
         _this3.$emit("on-ready");
-
         _this3.isReady = true;
       };
     },
-
     /**
      * Function used for getting the current states of the scene. This exported states
      * can be imported using the importStates method.
@@ -24895,15 +24673,12 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         visibility: undefined
       };
       if (this.$refs.treeControl) state.visibility = this.$refs.treeControl.getState();
-
       if (this.$module.scene) {
         var zincCameraControls = this.$module.scene.getZincCameraControls();
         state.viewport = zincCameraControls.getCurrentViewport();
       }
-
       return state;
     },
-
     /**
      * Function used for importing the states of the scene. This exported states
      * can be imported using the read states method.
@@ -24936,7 +24711,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
     exportGLTF: function exportGLTF(binary) {
       return this.$module.scene.exportGLTF(binary);
     },
-
     /**
      * Function used for reading in new scaffold metadata and a custom
      * viewport. This function will ignore the state prop and
@@ -24959,20 +24733,17 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
           viewURL: this.viewURL,
           visibility: visibility
         }));
-
         if (this.fileFormat === "gltf") {
           this.$module.loadGLTFFromURL(newValue, "scene", true);
         } else {
           this.$module.loadOrgansFromURL(newValue, undefined, undefined, "scene", undefined, true);
         }
-
         this.$module.scene.displayMarkers = this.displayMarkers;
         this.$module.scene.forcePickableObjectsUpdate = true;
         this.$module.scene.displayMinimap = this.displayMinimap;
         this.updateMinimapScissor();
       }
     },
-
     /**
      * Function used for reading in new scaffold metadata. This function will ignore
      * the state prop and read in the new url.
@@ -24982,7 +24753,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
     setURL: function setURL(newValue) {
       this.setURLAndState(newValue, undefined);
     },
-
     /**
      * Callback when drawer is toggled.
      */
@@ -24990,14 +24760,12 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       this.drawerOpen = flag;
       this.adjustLayout();
     },
-
     /**
      * Callback using ResizeObserver.
      */
     adjustLayout: function adjustLayout() {
       var width = this.$refs.scaffoldContainer.clientWidth;
       this.minimisedSlider = width < 812;
-
       if (this.minimisedSlider) {
         this.sliderPosition = this.drawerOpen ? "right" : "left";
       } else {
@@ -25022,7 +24790,6 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       var payload = this.$module.NDCCameraControl.getPanZoom();
       this.$emit("scaffold-navigated", payload);
     },
-
     /** 
      * Rotate mode - "none", "horizontal", "vertical", "free" but
      * it will be ignored if flag is set to false.
@@ -25035,11 +24802,11 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
 });
 // CONCATENATED MODULE: ./src/components/ScaffoldVuer.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_ScaffoldVuervue_type_script_lang_js_ = (ScaffoldVuervue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/components/ScaffoldVuer.vue?vue&type=style&index=0&id=0157429c&scoped=true&lang=scss&
-var ScaffoldVuervue_type_style_index_0_id_0157429c_scoped_true_lang_scss_ = __webpack_require__("c891");
+// EXTERNAL MODULE: ./src/components/ScaffoldVuer.vue?vue&type=style&index=0&id=15421d6d&prod&scoped=true&lang=scss&
+var ScaffoldVuervue_type_style_index_0_id_15421d6d_prod_scoped_true_lang_scss_ = __webpack_require__("b3fe");
 
-// EXTERNAL MODULE: ./src/components/ScaffoldVuer.vue?vue&type=style&index=1&lang=scss&
-var ScaffoldVuervue_type_style_index_1_lang_scss_ = __webpack_require__("642d");
+// EXTERNAL MODULE: ./src/components/ScaffoldVuer.vue?vue&type=style&index=1&id=15421d6d&prod&lang=scss&
+var ScaffoldVuervue_type_style_index_1_id_15421d6d_prod_lang_scss_ = __webpack_require__("cf5e");
 
 // CONCATENATED MODULE: ./src/components/ScaffoldVuer.vue
 
@@ -25057,7 +24824,7 @@ var ScaffoldVuer_component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "0157429c",
+  "15421d6d",
   null
   
 )