@abi-software/scaffoldvuer 0.1.52-beta.1 → 0.1.52-beta.4

package/dist/scaffoldvuer.umd.js

@@ -142,6 +142,13 @@ module.exports = require("element-ui/lib/theme-chalk/select.css");
 
 /***/ }),
 
+/***/ "0fec":
+/***/ (function(module, exports) {
+
+module.exports = require("element-ui/lib/tree");
+
+/***/ }),
+
 /***/ "11b0":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -176,17 +183,17 @@ module.exports = require("core-js/modules/es.array.for-each");
 
 /***/ }),
 
-/***/ "18d2":
+/***/ "1ac9":
 /***/ (function(module, exports) {
 
-module.exports = require("core-js/modules/es.array.concat");
+module.exports = require("element-ui/lib/container");
 
 /***/ }),
 
-/***/ "1ac9":
-/***/ (function(module, exports) {
+/***/ "1b02":
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("element-ui/lib/container");
+// extracted by mini-css-extract-plugin
 
 /***/ }),
 
@@ -291,22 +298,15 @@ module.exports = require("element-ui/lib/drawer");
 
 /***/ }),
 
-/***/ "3a59":
+/***/ "3816":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_0_id_335c5764_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("4646");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_0_id_335c5764_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_0_id_335c5764_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_8761aa48_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("641f");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_8761aa48_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_8761aa48_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
 /* unused harmony reexport * */
 
 
-/***/ }),
-
-/***/ "3bde":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
 /***/ }),
 
 /***/ "429c":
@@ -335,10 +335,14 @@ module.exports = _toConsumableArray;
 
 /***/ }),
 
-/***/ "4646":
-/***/ (function(module, exports, __webpack_require__) {
+/***/ "47d7":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_0_id_4d20ec9a_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("1b02");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_0_id_4d20ec9a_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_0_id_4d20ec9a_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
 
-// extracted by mini-css-extract-plugin
 
 /***/ }),
 
@@ -349,6 +353,13 @@ module.exports = require("element-ui/lib/color-picker");
 
 /***/ }),
 
+/***/ "49d0":
+/***/ (function(module, exports) {
+
+module.exports = require("element-ui/lib/theme-chalk/tree.css");
+
+/***/ }),
+
 /***/ "4c89":
 /***/ (function(module, exports) {
 
@@ -387,16 +398,12 @@ module.exports = require("core-js/modules/es.regexp.exec");
 /***/ "53d7":
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__("ab7e");
-
 __webpack_require__("7c81");
 
 __webpack_require__("bcd8");
 
 __webpack_require__("2175");
 
-__webpack_require__("fd48");
-
 var _typeof = __webpack_require__("7037");
 
 var THREE = __webpack_require__("9206").THREE; // Current model's associate data, data fields, external link, nerve map
@@ -498,7 +505,18 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
       cameraControl.resetView();
       _this2.NDCCameraControl = cameraControl.enableSyncControl();
     } else {
-      _this2.NDCCameraControl = cameraControl.disableSyncControl();
+      cameraControl.disableSyncControl();
+      _this2.NDCCameraControl = undefined;
+    }
+  };
+
+  this.isSyncControl = function () {
+    return _this2.NDCCameraControl !== undefined;
+  };
+
+  this.setSyncControlZoomToBox = function (box) {
+    if (_this2.NDCCameraControl) {
+      _this2.NDCCameraControl.zoomToBox(box, 2);
     }
   };
 
@@ -622,17 +640,21 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
       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], true);else _this.setSelectedByZincObject(idObject.object.userData.getGlyphset(), true);
+          if (idObject.object.name) _this.setSelectedByObjects([idObject.object], coords, true);else _this.setSelectedByZincObject(idObject.object.userData.getGlyphset(), coords, true);
         } else {
-          _this.setSelectedByObjects([idObject.object], true);
+          _this.setSelectedByObjects([idObject.object], coords, true);
         }
 
         return;
       } else {
-        _this.setSelectedByObjects([], true);
+        _this.setSelectedByObjects([], coords, true);
       }
     };
   };
@@ -648,17 +670,21 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
       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], true);
+        _this.setHighlightedByObjects([idObject.object], coords, true);
 
         return;
       } else {
         _this.displayArea.style.cursor = "auto";
 
-        _this.setHighlightedByObjects([], true);
+        _this.setHighlightedByObjects([], coords, true);
       }
     };
   };
@@ -761,42 +787,34 @@ var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
   };
 
   var addOrganPartToSceneData = function addOrganPartToSceneData(zincObject) {
-    if (zincObject.groupName) {
-      if (zincObject.isGeometry) {
-        if (!_this.sceneData.geometries.includes(zincObject.groupName)) {
-          _this.sceneData.geometries.push(zincObject.groupName);
-        }
-      } else if (zincObject.isGlyphset) {
-        if (!_this.sceneData.glyphsets.includes(zincObject.groupName)) {
-          _this.sceneData.glyphsets.push(zincObject.groupName);
-        }
-      } else if (zincObject.isLines) {
-        if (!_this.sceneData.lines.includes(zincObject.groupName)) {
-          _this.sceneData.lines.push(zincObject.groupName);
-        }
-      } else if (zincObject.isPointset) {
-        if (!_this.sceneData.pointsets.includes(zincObject.groupName)) {
-          _this.sceneData.pointsets.push(zincObject.groupName);
-        }
-      }
+    if (zincObject.isGeometry) {
+      _this.sceneData.geometries.push(zincObject);
+    } else if (zincObject.isGlyphset) {
+      _this.sceneData.glyphsets.push(zincObject);
+    } else if (zincObject.isLines) {
+      _this.sceneData.lines.push(zincObject);
+    } else if (zincObject.isPointset) {
+      _this.sceneData.pointsets.push(zincObject);
     }
   };
 
   var addOrganPart = function addOrganPart(systemName, partName, useDefautColour, zincObject) {
     for (var i = 0; i < organPartAddedCallbacks.length; i++) {
-      organPartAddedCallbacks[i](zincObject.groupName, _this.scene.isTimeVarying(), zincObject);
+      organPartAddedCallbacks[i](zincObject, _this.scene.isTimeVarying());
     }
 
     if (useDefautColour) modelsLoader.setGeometryColour(zincObject, systemName, partName);
     addOrganPartToSceneData(zincObject);
     var annotation = new (__webpack_require__("984d").annotation)();
+    var region = zincObject.region.getFullPath();
     annotation.data = {
       species: _this.sceneData.currentSpecies,
       system: systemName,
       part: partName,
-      group: zincObject.groupName
+      group: zincObject.groupName,
+      region: region
     };
-    zincObject.userData = [annotation];
+    zincObject.userData["annotation"] = annotation;
   };
   /**
   * New organs geometry has been added to the scene, add UIs and make
@@ -1219,6 +1237,13 @@ module.exports = require("core-js/modules/es.symbol");
 
 /***/ }),
 
+/***/ "641f":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "642d":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1394,6 +1419,17 @@ module.exports = require("core-js/modules/es.array.index-of");
 
 module.exports = require("element-ui/lib/locale/lang/en");
 
+/***/ }),
+
+/***/ "6e86":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldTooltip_vue_vue_type_style_index_0_id_2ff3bbca_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("d0b9");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldTooltip_vue_vue_type_style_index_0_id_2ff3bbca_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldTooltip_vue_vue_type_style_index_0_id_2ff3bbca_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "6ea3":
@@ -1403,6 +1439,13 @@ module.exports = require("element-ui/lib/row");
 
 /***/ }),
 
+/***/ "6faa":
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es.number.constructor");
+
+/***/ }),
+
 /***/ "7037":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -1555,7 +1598,6 @@ RendererModule.prototype.getIntersectedObject = function (intersects) {
 
 RendererModule.prototype.getAnnotationsFromObjects = function (objects) {
   var annotations = [];
-  var count = 0;
 
   for (var i = 0; i < objects.length; i++) {
     var zincObject = objects[i].userData;
@@ -1565,13 +1607,13 @@ RendererModule.prototype.getAnnotationsFromObjects = function (objects) {
       if (zincObject.isGlyph || zincObject.isGlyphset) {
         var glyphset = zincObject;
         if (zincObject.isGlyph) glyphset = (_readOnlyError("glyphset"), zincObject.getGlyphset());
-        annotation = glyphset.userData ? glyphset.userData[0] : undefined;
+        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[0] : undefined;
+        annotation = zincObject.userData ? zincObject.userData.annotation : undefined;
 
         if (annotation && annotation.data) {
           annotation.data.id = objects[i].name;
@@ -1579,27 +1621,28 @@ RendererModule.prototype.getAnnotationsFromObjects = function (objects) {
       }
     }
 
-    if (annotation) annotations[count++] = annotation;
+    if (annotation) annotations.push(annotation);
   }
 
   return annotations;
 };
 
-RendererModule.prototype.setHighlightedByObjects = function (objects, propagateChanges) {
+RendererModule.prototype.setHighlightedByObjects = function (objects, coords, propagateChanges) {
   var changed = this.graphicsHighlight.setHighlighted(objects);
 
-  if (changed && propagateChanges) {
-    var eventType = __webpack_require__("9b21").EVENT_TYPE.HIGHLIGHTED;
-
+  if (propagateChanges) {
+    eventType = __webpack_require__("9b21").EVENT_TYPE.MOVE;
+    if (changed) eventType = __webpack_require__("9b21").EVENT_TYPE.HIGHLIGHTED;
     var annotations = this.getAnnotationsFromObjects(objects);
+    if (annotations.length > 0) annotations[0].coords = coords;
     this.publishChanges(annotations, eventType);
   }
 
   return changed;
 };
 
-RendererModule.prototype.setHighlightedByZincObject = function (zincObject, propagateChanges) {
-  return this.setHighlightedByObjects([zincObject ? zincObject.morph : undefined], propagateChanges);
+RendererModule.prototype.setHighlightedByZincObject = function (zincObject, coords, propagateChanges) {
+  return this.setHighlightedByObjects([zincObject ? zincObject.morph : undefined], coords, propagateChanges);
 };
 
 RendererModule.prototype.setupLiveCoordinates = function (zincObjects) {
@@ -1636,7 +1679,7 @@ RendererModule.prototype.objectsToZincObjects = function (objects) {
   return zincObjects;
 };
 
-RendererModule.prototype.setSelectedByObjects = function (objects, propagateChanges) {
+RendererModule.prototype.setSelectedByObjects = function (objects, coords, propagateChanges) {
   var changed = this.graphicsHighlight.setSelected(objects);
 
   if (changed) {
@@ -1644,18 +1687,19 @@ RendererModule.prototype.setSelectedByObjects = function (objects, propagateChan
     this.setupLiveCoordinates(zincObjects);
 
     if (propagateChanges) {
-      var eventType = __webpack_require__("9b21").EVENT_TYPE.SELECTED;
+      var _eventType = __webpack_require__("9b21").EVENT_TYPE.SELECTED;
 
       var annotations = this.getAnnotationsFromObjects(objects);
-      this.publishChanges(annotations, eventType);
+      if (annotations.length > 0) annotations[0].coords = coords;
+      this.publishChanges(annotations, _eventType);
     }
   }
 
   return changed;
 };
 
-RendererModule.prototype.setSelectedByZincObject = function (zincObject, propagateChanges) {
-  return this.setSelectedByObjects([zincObject ? zincObject.morph : undefined], propagateChanges);
+RendererModule.prototype.setSelectedByZincObject = function (zincObject, coords, propagateChanges) {
+  return this.setSelectedByObjects([zincObject ? zincObject.morph : undefined], coords, propagateChanges);
 };
 
 var addGlyphToArray = function addGlyphToArray(objects) {
@@ -1683,12 +1727,12 @@ RendererModule.prototype.findObjectsByGroupName = function (groupName) {
 
 RendererModule.prototype.setHighlightedByGroupName = function (groupName, propagateChanges) {
   var objects = this.findObjectsByGroupName(groupName);
-  return this.setHighlightedByObjects(objects, propagateChanges);
+  return this.setHighlightedByObjects(objects, undefined, propagateChanges);
 };
 
 RendererModule.prototype.setSelectedByGroupName = function (groupName, propagateChanges) {
   var objects = this.findObjectsByGroupName(groupName);
-  return this.setSelectedByObjects(objects, propagateChanges);
+  return this.setSelectedByObjects(objects, undefined, propagateChanges);
 };
 
 RendererModule.prototype.changeBackgroundColour = function (backgroundColourString) {
@@ -1799,6 +1843,17 @@ module.exports = require("core-js/modules/es.array.iterator");
 
 module.exports = require("element-ui/lib/theme-chalk/icon.css");
 
+/***/ }),
+
+/***/ "8f55":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_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__("9372");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_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_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TreeControls_vue_vue_type_style_index_1_lang_css___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "907b":
@@ -1815,6 +1870,13 @@ module.exports = require("zincjs");
 
 /***/ }),
 
+/***/ "9372":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "93e6":
 /***/ (function(module, exports) {
 
@@ -1862,7 +1924,8 @@ __webpack_require__("7c81");
 var EVENT_TYPE = {
   ALL: 0,
   SELECTED: 1,
-  HIGHLIGHTED: 2
+  HIGHLIGHTED: 2,
+  MOVE: 3
 };
 
 var SelectionEvent = function SelectionEvent(eventTypeIn, identifiersIn) {
@@ -1970,17 +2033,6 @@ module.exports = require("core-js/modules/es.array.includes");
 
 module.exports = require("element-ui/lib/loading");
 
-/***/ }),
-
-/***/ "add8":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_1_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("e8d1");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_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_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_1_lang_css___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "b0e3":
@@ -2030,17 +2082,6 @@ module.exports = require("core-js/modules/es.string.replace");
 
 module.exports = require("element-ui/lib/option");
 
-/***/ }),
-
-/***/ "c5b3":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_02b8949c_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("3bde");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_02b8949c_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_02b8949c_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "cf41":
@@ -2113,6 +2154,13 @@ exports.WEBGL = {
 
 /***/ }),
 
+/***/ "d0b9":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "da60":
 /***/ (function(module, exports) {
 
@@ -2131,10 +2179,10 @@ module.exports = require("core-js/modules/es.array.from");
 
 /***/ }),
 
-/***/ "e8d1":
-/***/ (function(module, exports, __webpack_require__) {
+/***/ "f705":
+/***/ (function(module, exports) {
 
-// extracted by mini-css-extract-plugin
+module.exports = require("core-js/modules/es.array.map");
 
 /***/ }),
 
@@ -2172,12 +2220,12 @@ 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":"162c90a4-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldVuer.vue?vue&type=template&id=02b8949c&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('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($event)}}}),_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('TraditionalControls',{directives:[{name:"popover",rawName:"v-popover:checkBoxPopover",arg:"checkBoxPopover"}],ref:"traditionalControl",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('OpacityControls',{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)}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0dd1e61a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldVuer.vue?vue&type=template&id=8761aa48&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($event)}}}),_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=02b8949c&scoped=true&
+// CONCATENATED MODULE: ./src/components/ScaffoldVuer.vue?vue&type=template&id=8761aa48&scoped=true&
 
 // EXTERNAL MODULE: external "core-js/modules/es.array.for-each"
 var es_array_for_each_ = __webpack_require__("139f");
@@ -2276,7 +2324,7 @@ var col_default = /*#__PURE__*/__webpack_require__.n(col_);
 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":"162c90a4-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OpacityControls.vue?vue&type=template&id=4c00a30f&scoped=true&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0dd1e61a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-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 = []
 
@@ -2577,25 +2625,149 @@ 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":"162c90a4-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TraditionalControls.vue?vue&type=template&id=335c5764&scoped=true&
-var TraditionalControlsvue_type_template_id_335c5764_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"traditional-location",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 ")])]),_c('el-col',{attrs:{"span":12}},[_c('el-checkbox',{staticClass:"all-checkbox",attrs:{"indeterminate":_vm.isIndeterminate},on:{"change":_vm.handleCheckAllChange},model:{value:(_vm.checkAll),callback:function ($$v) {_vm.checkAll=$$v},expression:"checkAll"}},[_vm._v(" Display all ")])],1)],1),_c('el-checkbox-group',{staticClass:"checkbox-group",attrs:{"size":"small"},on:{"change":_vm.handleCheckedItemsChange},model:{value:(_vm.checkedItems),callback:function ($$v) {_vm.checkedItems=$$v},expression:"checkedItems"}},[_c('div',{staticClass:"checkbox-group-inner"},_vm._l((_vm.sortedPrimitiveGroups),function(item){return _c('el-row',{key:item,attrs:{"label":item}},[_c('div',{staticClass:"checkbox-container"},[_c('el-checkbox',{staticClass:"my-checkbox",class:{ activeItem: _vm.activeRegion === item, 
-                        hoverItem: _vm.hoverRegion === item },attrs:{"label":item,"checked":true},on:{"change":function($event){return _vm.visibilityToggle(item, $event)}},nativeOn:{"click":function($event){return _vm.itemClicked(item, $event)},"mouseover":function($event){return _vm.checkboxHover(item)}}},[_c('el-color-picker',{class:{ 'show-picker' : _vm.showColourPicker },attrs:{"value":_vm.getColour(item),"size":"small","popper-class":_vm.myPopperClass},on:{"change":function($event){return _vm.setColour(item, $event)}}}),_vm._v(" "+_vm._s(item)+" ")],1)],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 TraditionalControlsvue_type_template_id_335c5764_scoped_true_staticRenderFns = []
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0dd1e61a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldTooltip.vue?vue&type=template&id=2ff3bbca&scoped=true&
+var ScaffoldTooltipvue_type_template_id_2ff3bbca_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tooltipContainer",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_2ff3bbca_scoped_true_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/ScaffoldTooltip.vue?vue&type=template&id=2ff3bbca&scoped=true&
+
+// EXTERNAL MODULE: external "core-js/modules/es.number.constructor"
+var es_number_constructor_ = __webpack_require__("6faa");
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldTooltip.vue?vue&type=script&lang=js&
+
+
+
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* eslint-disable no-alert, no-console */
+
+
+
+locale_default.a.use(en_default.a);
+external_vue_default.a.use(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: {
+    label: {
+      type: String,
+      default: ""
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    x: {
+      type: Number,
+      default: 200
+    },
+    y: {
+      type: Number,
+      default: 200
+    }
+  },
+  data: function data() {
+    return {
+      display: false
+    };
+  },
+  computed: {
+    position: function position() {
+      return {
+        left: this.x + "px",
+        top: this.y - 30 + "px"
+      };
+    }
+  },
+  watch: {
+    label: {
+      handler: function handler() {
+        if (this.visible && this.label && this.label !== "") this.display = true;else this.display = false;
+      },
+      immediate: true
+    },
+    visible: {
+      handler: function handler() {
+        if (this.visible && this.label && this.label !== "") this.display = true;else this.display = false;
+      },
+      immediate: true
+    }
+  }
+});
+// 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=2ff3bbca&scoped=true&lang=scss&
+var ScaffoldTooltipvue_type_style_index_0_id_2ff3bbca_scoped_true_lang_scss_ = __webpack_require__("6e86");
+
+// CONCATENATED MODULE: ./src/components/ScaffoldTooltip.vue
+
+
 
 
-// CONCATENATED MODULE: ./src/components/TraditionalControls.vue?vue&type=template&id=335c5764&scoped=true&
 
-// EXTERNAL MODULE: external "core-js/modules/es.array.concat"
-var es_array_concat_ = __webpack_require__("18d2");
+
+/* normalize component */
+
+var ScaffoldTooltip_component = normalizeComponent(
+  components_ScaffoldTooltipvue_type_script_lang_js_,
+  ScaffoldTooltipvue_type_template_id_2ff3bbca_scoped_true_render,
+  ScaffoldTooltipvue_type_template_id_2ff3bbca_scoped_true_staticRenderFns,
+  false,
+  null,
+  "2ff3bbca",
+  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":"0dd1e61a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TreeControls.vue?vue&type=template&id=4d20ec9a&scoped=true&
+var TreeControlsvue_type_template_id_4d20ec9a_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-expand-all":"","node-key":"id","show-checkbox":"","check-strictly":true,"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:{
+            activeItem: 
+              (_vm.active.group === data.label && 
+                ((_vm.active.regionPath === data.regionPath) || 
+                _vm.active.regionPath === undefined)),
+            hoverItem: 
+              (_vm.hover.group === data.label && 
+                ((_vm.hover.regionPath === data.regionPath) || 
+                _vm.hover.regionPath === undefined))
+          },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_4d20ec9a_scoped_true_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/TreeControls.vue?vue&type=template&id=4d20ec9a&scoped=true&
+
+// EXTERNAL MODULE: external "core-js/modules/es.array.find"
+var es_array_find_ = __webpack_require__("fe0e");
 
 // EXTERNAL MODULE: external "core-js/modules/es.array.includes"
 var es_array_includes_ = __webpack_require__("ab7e");
 
-// EXTERNAL MODULE: external "core-js/modules/es.array.index-of"
-var es_array_index_of_ = __webpack_require__("6bb1");
-
-// EXTERNAL MODULE: external "core-js/modules/es.array.splice"
-var es_array_splice_ = __webpack_require__("7c81");
+// EXTERNAL MODULE: external "core-js/modules/es.array.map"
+var es_array_map_ = __webpack_require__("f705");
 
 // EXTERNAL MODULE: external "core-js/modules/es.regexp.exec"
 var es_regexp_exec_ = __webpack_require__("51f7");
@@ -2682,6 +2854,13 @@ function _nonIterableSpread() {
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
+// EXTERNAL MODULE: external "element-ui/lib/theme-chalk/tree.css"
+var tree_css_ = __webpack_require__("49d0");
+
+// EXTERNAL MODULE: external "element-ui/lib/tree"
+var tree_ = __webpack_require__("0fec");
+var tree_default = /*#__PURE__*/__webpack_require__.n(tree_);
+
 // EXTERNAL MODULE: external "element-ui/lib/theme-chalk/color-picker.css"
 var color_picker_css_ = __webpack_require__("3666");
 
@@ -2703,7 +2882,11 @@ var checkbox_css_ = __webpack_require__("55ee");
 var checkbox_ = __webpack_require__("b777");
 var checkbox_default = /*#__PURE__*/__webpack_require__.n(checkbox_);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TraditionalControls.vue?vue&type=script&lang=js&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TreeControls.vue?vue&type=script&lang=js&
+
+
+
+
 
 
 
@@ -2724,12 +2907,6 @@ var checkbox_default = /*#__PURE__*/__webpack_require__.n(checkbox_);
 
 
 
-//
-//
-//
-//
-//
-//
 //
 //
 //
@@ -2809,12 +2986,36 @@ external_vue_default.a.use(checkbox_default.a);
 external_vue_default.a.use(checkbox_group_default.a);
 external_vue_default.a.use(color_picker_default.a);
 external_vue_default.a.use(row_default.a);
+external_vue_default.a.use(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;
+};
+
+var extractAllIds = function extractAllIds(item, list) {
+  list.push(item.id);
+  if (item.children) item.children.forEach(function (child) {
+    return extractAllIds(child, list);
+  });
+};
 /**
  * A vue component for toggling visibility of various regions.
  */
 
-/* harmony default export */ var TraditionalControlsvue_type_script_lang_js_ = ({
-  name: "TraditionalControls",
+
+/* harmony default export */ var TreeControlsvue_type_script_lang_js_ = ({
+  name: "TreeControls",
   props: {
     /**
      * @ignore
@@ -2831,12 +3032,19 @@ external_vue_default.a.use(row_default.a);
   },
   data: function data() {
     return {
-      checkAll: true,
-      isIndeterminate: false,
-      checkedItems: [],
-      sortedPrimitiveGroups: [],
-      activeRegion: "",
-      hoverRegion: "",
+      treeData: [{
+        label: "Root",
+        id: "__r/",
+        children: []
+      }],
+      active: {
+        group: "",
+        regionPath: undefined
+      },
+      hover: {
+        group: "",
+        regionPath: undefined
+      },
       myPopperClass: "hide-scaffold-colour-popup",
       drawerOpen: true
     };
@@ -2850,68 +3058,179 @@ external_vue_default.a.use(row_default.a);
     }
   },
   created: function created() {
-    var tmpArray = this.module.sceneData.geometries.concat(this.module.sceneData.lines);
-    tmpArray = tmpArray.concat(this.module.sceneData.glyphsets);
-    tmpArray = uniq(tmpArray.concat(this.module.sceneData.pointset));
-    this.sortedPrimitiveGroups = orderBy(tmpArray);
+    var _this = this;
+
+    this.module.sceneData.geometries.forEach(function (zincObject) {
+      _this.organsAdded(zincObject);
+    });
+    this.module.sceneData.lines.forEach(function (zincObject) {
+      _this.organsAdded(zincObject);
+    });
+    this.module.sceneData.glyphsets.forEach(function (zincObject) {
+      _this.organsAdded(zincObject);
+    });
+    this.module.sceneData.pointsets.forEach(function (zincObject) {
+      _this.organsAdded(zincObject);
+    });
     this.module.addOrganPartAddedCallback(this.organsAdded);
+    this.__nodeNumbers = 1;
   },
   destroyed: function destroyed() {
     this.sortedPrimitiveGroups = undefined;
   },
   methods: {
-    /**
-     * This is called when a new organ is read into the scene.
-     */
-    organsAdded: function organsAdded(name) {
-      if (name && name != "") {
-        var tmpArray = uniq(this.sortedPrimitiveGroups.concat([name]));
-        tmpArray = orderBy(tmpArray);
-        var index = tmpArray.indexOf(undefined);
-
-        if (index > -1) {
-          tmpArray.splice(index, 1);
+    addTreeItem: function addTreeItem(parentContainer, item) {
+      var _this2 = this;
+
+      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;
+          }
         }
+      }
 
-        this.sortedPrimitiveGroups = tmpArray;
+      parentContainer.push(item);
+      parentContainer.sort(function (a, b) {
+        return nameSorting(a, b);
+      });
+      this.__nodeNumbers++;
+      this.$nextTick(function () {
+        _this2.$refs.regionTree.setChecked(item.id, true);
+      });
+    },
+    // find or create new region, region id is always prefixed with
+    // '__r/'
+    findOrCreateRegion: function findOrCreateRegion(data, paths, prefix) {
+      //check if root region has been set
+      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 = {
+            label: _paths[0],
+            id: id,
+            children: [],
+            region: region
+          };
+          this.addTreeItem(data.children, childRegion);
+        }
+
+        _paths.shift();
+
+        return this.findOrCreateRegion(childRegion, _paths, path);
+      } else {
+        return data;
       }
     },
 
     /**
-     * Select a region by its name.
+     * This is called when a new organ is read into the scene.
      */
-    changeActiveByName: function changeActiveByName(name, propagate) {
-      var targetObject = this.getFirstZincObjectWithGroupName(name);
+    organsAdded: function organsAdded(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 = [];
+            }
 
-      if (targetObject && targetObject.getVisibility()) {
-        this.activeRegion = name;
-        this.$emit("object-selected", targetObject, propagate);
+            var id = regionData.id.replace("__r/", "") + "/" + zincObject.groupName;
+            var child = {
+              label: zincObject.groupName,
+              id: id,
+              primitives: [zincObject],
+              regionPath: zincObject.region.getFullPath()
+            };
+            this.addTreeItem(regionData.children, child);
+          }
+        }
+      }
+    },
+    checkChanged: function checkChanged(node, data) {
+      var checked = data.checkedKeys.includes(node.id);
+      if (node.region) node.region.setVisibility(checked);
+
+      if (node.primitives) {
+        node.primitives.forEach(function (primitive) {
+          primitive.setVisibility(checked);
+        });
+      }
+    },
+    changeActiveByPrimitive: function changeActiveByPrimitive(primitive, propagate) {
+      if (primitive && primitive.getVisibility()) {
+        this.active.group = primitive.groupName;
+        this.active.regionPath = primitive.region.getFullPath();
+        console.log(this.active);
+        this.$emit("object-selected", primitive, propagate);
       } else {
         this.removeActive(propagate);
       }
 
       this.removeHover(propagate);
     },
+    changeHoverByPrimitive: function changeHoverByPrimitive(primitive, propagate) {
+      if (primitive) {
+        this.hover.group = primitive.groupName;
+        this.hover.regionPath = primitive.region.getFullPath();
+        this.$emit("object-hovered", primitive, propagate);
+      } else {
+        this.removeHover(propagate);
+      }
+    },
 
     /**
-     * Hover a region by its name.
+     * Select a region by its name.
      */
-    changeHoverByName: function changeHoverByName(name, propagate) {
-      var targetObject = this.getFirstZincObjectWithGroupName(name);
+    changeActiveByName: function changeActiveByName(name, regionPath, propagate) {
+      var rootRegion = this.module.scene.getRootRegion();
+      var targetRegion = rootRegion.findChildFromPath(regionPath);
+      var targetObject = this.getFirstZincObjectWithGroupName(targetRegion, name);
+      this.changeActiveByPrimitive(targetObject, propagate);
+    },
 
-      if (targetObject) {
-        this.hoverRegion = name;
-        this.$emit("object-hovered", targetObject, propagate);
-      } else {
-        this.removeHover(propagate);
-      }
+    /**
+     * Hover a region by its name.
+     */
+    changeHoverByName: function changeHoverByName(name, regionPath, propagate) {
+      var rootRegion = this.module.scene.getRootRegion();
+      var targetRegion = rootRegion.findChildFromPath(regionPath);
+      var targetObject = this.getFirstZincObjectWithGroupName(targetRegion, name);
+      this.changeHoverByPrimitive(targetObject, propagate);
+    },
+    changeActiveByNode: function changeActiveByNode(node, propagate) {
+      if (node.primitives) this.changeActiveByPrimitive(node.primitives[0], propagate);
+    },
+    changeHoverByNode: function changeHoverByNode(node, propagate) {
+      if (node.primitives) this.changeHoverByPrimitive(node.primitives[0], propagate);
     },
 
     /**
      * Unselect the current selected region.
      */
     removeActive: function removeActive(propagate) {
-      this.activeRegion = "";
+      this.active.group = "";
+      this.active.regionPath = undefined;
       this.$emit("object-selected", undefined, propagate);
     },
 
@@ -2919,7 +3238,8 @@ external_vue_default.a.use(row_default.a);
      * Unselect the current hover region.
      */
     removeHover: function removeHover(propagate) {
-      this.hoverRegion = "";
+      this.hover.group = "";
+      this.hover.regionPath = undefined;
       this.$emit("object-hovered", undefined, propagate);
     },
 
@@ -2927,68 +3247,47 @@ external_vue_default.a.use(row_default.a);
      * Reset the controls.
      */
     clear: function clear() {
-      this.sortedPrimitiveGroups = [];
-      this.checkedItems = [];
-      this.checkAll = true;
-      this.isIndeterminate = false;
-      this.activeRegion = "";
-      this.hoverRegion = "";
+      this.active.group = "";
+      this.active.regionPath = undefined;
+      this.hover.group = "";
+      this.hover.regionPath = undefined;
+      this.$refs.regionTree.updateKeyChildren("__r/", []);
       this.$emit("object-selected", undefined);
     },
-    getFirstZincObjectWithGroupName: function getFirstZincObjectWithGroupName(name) {
-      if (this.module && this.module.scene) {
-        var array = this.module.scene.findGeometriesWithGroupName(name);
+    getFirstZincObjectWithGroupName: function getFirstZincObjectWithGroupName(region, name) {
+      if (region) {
+        var array = region.findGeometriesWithGroupName(name);
         if (array.length > 0) return array[0];
-        array = this.module.scene.findGlyphsetsWithGroupName(name);
+        array = region.findGlyphsetsWithGroupName(name);
         if (array.length > 0) return array[0];
-        array = this.module.scene.findLinesWithGroupName(name);
+        array = region.findLinesWithGroupName(name);
         if (array.length > 0) return array[0];
-        array = this.module.scene.findPointsetsWithGroupName(name);
+        array = region.findPointsetsWithGroupName(name);
         if (array.length > 0) return array[0];
       }
 
       return undefined;
     },
-    getColour: function getColour(name) {
-      var graphic = this.getFirstZincObjectWithGroupName(name);
+    getColour: function getColour(nodeData) {
+      if (nodeData) {
+        var graphic = nodeData.primitives[0];
 
-      if (graphic) {
-        var hex = graphic.getColourHex();
-        if (hex) return "#" + hex;
+        if (graphic) {
+          var hex = graphic.getColourHex();
+          if (hex) return "#" + hex;
+        }
       }
 
       return "#FFFFFF";
     },
-    setColour: function setColour(name, value) {
-      var graphic = this.getFirstZincObjectWithGroupName(name);
+    setColour: function setColour(nodeData, value) {
+      if (nodeData) {
+        var graphic = nodeData.primitives[0];
 
-      if (graphic) {
-        var hexString = value.replace("#", "0x");
-        graphic.setColourHex(hexString);
-      }
-    },
-    checkboxHover: function checkboxHover(name) {
-      this.changeHoverByName(name, true);
-    },
-    itemClicked: function itemClicked(name, event) {
-      if (!(event.target.classList.contains("el-checkbox__inner") || event.target.classList.contains("el-checkbox__original"))) {
-        this.changeActiveByName(name, true);
-        event.preventDefault();
-      }
-    },
-    handleCheckedItemsChange: function handleCheckedItemsChange() {
-      var unnamed = this.checkedItems.includes(undefined) ? true : false;
-      var checkedCount = this.checkedItems.length;
-      if (unnamed) checkedCount--;
-      this.checkAll = checkedCount === this.sortedPrimitiveGroups.length;
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.sortedPrimitiveGroups.length;
-    },
-    handleCheckAllChange: function handleCheckAllChange(val) {
-      this.checkedItems = val ? _toConsumableArray(this.sortedPrimitiveGroups) : [];
-      this.isIndeterminate = false;
-
-      for (var i = 0; i < this.sortedPrimitiveGroups.length; i++) {
-        this.visibilityToggle(this.sortedPrimitiveGroups[i], this.checkAll);
+        if (graphic) {
+          var hexString = value.replace("#", "0x");
+          graphic.setColourHex(hexString);
+        }
       }
     },
     viewAll: function viewAll() {
@@ -3011,56 +3310,70 @@ external_vue_default.a.use(row_default.a);
       this.drawerOpen = !this.drawerOpen;
       this.$emit("drawer-toggled", this.drawerOpen);
     },
-    getState: function getState() {
-      if (this.checkAll) {
-        return {
-          checkAll: true
-        };
-      }
-
-      var checkedItems = _toConsumableArray(this.checkedItems);
-
-      var index = checkedItems.indexOf(undefined);
-
-      if (index > -1) {
-        checkedItems.splice(index, 1);
-      }
+    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
+        checkedItems: checkedItems,
+        version: "2.0"
       };
     },
     setState: function setState(state) {
       if (state) {
         if (state.checkAll) {
-          this.checkedItems = _toConsumableArray(this.sortedPrimitiveGroups);
-
-          for (var i = 0; i < this.sortedPrimitiveGroups.length; i++) {
-            this.module.changeOrganPartsVisibility(this.sortedPrimitiveGroups[i], true);
-          }
+          this.checkAllKeys();
         } else if (state.checkedItems) {
-          this.checkedItems = _toConsumableArray(state.checkedItems);
+          var list = [];
 
-          for (var _i = 0; _i < this.sortedPrimitiveGroups.length; _i++) {
-            var visible = this.checkedItems.includes(this.sortedPrimitiveGroups[_i]);
-            this.module.changeOrganPartsVisibility(this.sortedPrimitiveGroups[_i], visible);
+          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);
         }
       }
-
-      this.handleCheckedItemsChange();
     }
   }
 });
-// CONCATENATED MODULE: ./src/components/TraditionalControls.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_TraditionalControlsvue_type_script_lang_js_ = (TraditionalControlsvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/components/TraditionalControls.vue?vue&type=style&index=0&id=335c5764&scoped=true&lang=scss&
-var TraditionalControlsvue_type_style_index_0_id_335c5764_scoped_true_lang_scss_ = __webpack_require__("3a59");
+// 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=4d20ec9a&scoped=true&lang=scss&
+var TreeControlsvue_type_style_index_0_id_4d20ec9a_scoped_true_lang_scss_ = __webpack_require__("47d7");
 
-// EXTERNAL MODULE: ./src/components/TraditionalControls.vue?vue&type=style&index=1&lang=css&
-var TraditionalControlsvue_type_style_index_1_lang_css_ = __webpack_require__("add8");
+// 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/TraditionalControls.vue
+// CONCATENATED MODULE: ./src/components/TreeControls.vue
 
 
 
@@ -3070,18 +3383,18 @@ var TraditionalControlsvue_type_style_index_1_lang_css_ = __webpack_require__("a
 
 /* normalize component */
 
-var TraditionalControls_component = normalizeComponent(
-  components_TraditionalControlsvue_type_script_lang_js_,
-  TraditionalControlsvue_type_template_id_335c5764_scoped_true_render,
-  TraditionalControlsvue_type_template_id_335c5764_scoped_true_staticRenderFns,
+var TreeControls_component = normalizeComponent(
+  components_TreeControlsvue_type_script_lang_js_,
+  TreeControlsvue_type_template_id_4d20ec9a_scoped_true_render,
+  TreeControlsvue_type_template_id_4d20ec9a_scoped_true_staticRenderFns,
   false,
   null,
-  "335c5764",
+  "4d20ec9a",
   null
   
 )
 
-/* harmony default export */ var TraditionalControls = (TraditionalControls_component.exports);
+/* harmony default export */ var TreeControls = (TreeControls_component.exports);
 // EXTERNAL MODULE: external "@abi-software/svg-sprite"
 var svg_sprite_ = __webpack_require__("429c");
 
@@ -3360,6 +3673,12 @@ var svg_sprite_ = __webpack_require__("429c");
 //
 //
 //
+//
+//
+//
+//
+//
+//
 
 /* eslint-disable no-alert, no-console */
 
@@ -3368,6 +3687,7 @@ var svg_sprite_ = __webpack_require__("429c");
 
 
 
+
 locale_default.a.use(en_default.a);
 external_vue_default.a.use(col_default.a);
 external_vue_default.a.use(loading_default.a.directive);
@@ -3386,17 +3706,18 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
  * A vue component of the scaffold viewer.
  *
  * @requires ./OpacityControls.vue
- * @requires ./TraditionalControls.vue
+ * @requires ./TreeControls.vue
  */
 
 
 /* harmony default export */ var ScaffoldVuervue_type_script_lang_js_ = ({
   name: "ScaffoldVuer",
   components: {
-    OpacityControls: OpacityControls,
     MapSvgIcon: svg_sprite_["MapSvgIcon"],
     MapSvgSpriteColor: svg_sprite_["MapSvgSpriteColor"],
-    TraditionalControls: TraditionalControls
+    OpacityControls: OpacityControls,
+    ScaffoldTooltip: ScaffoldTooltip,
+    TreeControls: TreeControls
   },
   props: {
     /**
@@ -3584,7 +3905,14 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         label: "10x"
       }],
       currentSpeed: 1,
-      timeStamps: {}
+      timeStamps: {},
+      defaultCheckedKeys: [],
+      tData: {
+        label: "",
+        visible: false,
+        x: 200,
+        y: 200
+      }
     };
   },
   watch: {
@@ -3790,7 +4118,11 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         var box = this.$module.scene.getBoundingBoxOfZincObjects(objects);
 
         if (box) {
-          this.$module.scene.viewAllWithBoundingBox(box);
+          if (this.$module.isSyncControl()) {
+            this.$module.setSyncControlZoomToBox(box);
+          } else {
+            this.$module.scene.viewAllWithBoundingBox(box);
+          }
         }
       }
     },
@@ -3847,40 +4179,52 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
      */
     eventNotifierCallback: function eventNotifierCallback(event) {
       if (event.eventType == 1) {
-        if (this.$refs.traditionalControl) {
+        if (this.$refs.treeControl) {
           if (event.identifiers[0]) {
             var id = event.identifiers[0].data.id ? event.identifiers[0].data.id : event.identifiers[0].data.group;
-            this.$refs.traditionalControl.changeActiveByName(id, true);
+            var region = event.identifiers[0].data.region;
+            this.$refs.treeControl.changeActiveByName(id, region, true);
           } else {
-            this.$refs.traditionalControl.removeActive(true);
+            this.$refs.treeControl.removeActive(true);
           }
-        }
-        /**
-         * Triggers when an object has been selected
-         *
-         * @property {array} identifiers array of identifiers
-         * of selected object.
-         */
+        } // Triggers when an object has been selected
 
 
         this.$emit("scaffold-selected", event.identifiers);
       } else if (event.eventType == 2) {
-        if (this.$refs.traditionalControl) {
-          if (event.identifiers[0]) {
-            var _id = event.identifiers[0].data.id ? event.identifiers[0].data.id : event.identifiers[0].data.group;
+        this.tData.visible = false;
+        var offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
 
-            this.$refs.traditionalControl.changeHoverByName(_id, true);
-          } else this.$refs.traditionalControl.removeHover(true);
-        }
-        /**
-         * Triggers when an object has been highlighted
-         *
-         * @property {array} identifiers array of identifiers
-         * of highlighted object.
-         */
+        if (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;
+            this.tData.x = event.identifiers[0].coords.x - offsets.left;
+            this.tData.y = event.identifiers[0].coords.y - offsets.top;
+          }
+
+          if (this.$refs.treeControl) {
+            var _region = event.identifiers[0].data.region;
+            this.$refs.treeControl.changeHoverByName(_id, _region, true);
+          } else {
+            this.$refs.treeControl.removeHover(true);
+          }
+        } // Triggers when an object has been highlighted
 
 
         this.$emit("scaffold-highlighted", event.identifiers);
+      } else if (event.eventType == 3) {
+        //MOVE
+        if (event.identifiers[0]) {
+          if (event.identifiers[0].coords) {
+            var _offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
+
+            this.tData.x = event.identifiers[0].coords.x - _offsets.left;
+            this.tData.y = event.identifiers[0].coords.y - _offsets.top;
+          }
+        }
       }
     },
 
@@ -3925,7 +4269,7 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
       if (object !== this.selectedObject) {
         this.selectedObject = object;
         this.$refs.opacityControl.setObject(this.selectedObject);
-        if (object) this.$module.setSelectedByZincObject(object, propagate);else this.$module.setSelectedByObjects([], propagate);
+        if (object) this.$module.setSelectedByZincObject(object, undefined, propagate);else this.$module.setSelectedByObjects([], undefined, propagate);
       }
     },
 
@@ -3937,26 +4281,26 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
     objectHovered: function objectHovered(object, propagate) {
       if (object !== this.hoveredObject) {
         this.hoveredObject = object;
-        if (object) this.$module.setHighlightedByZincObject(object, propagate);else this.$module.setHighlightedByObjects([], propagate);
+        if (object) this.$module.setHighlightedByZincObject(object, undefined, propagate);else this.$module.setHighlightedByObjects([], undefined, propagate);
       }
     },
 
     /**
      * Set the selected by name.
      *
-     * @param {name} name Name of the region
+     * @param {name} name Name of the group
      */
-    changeActiveByName: function changeActiveByName(name, propagate) {
-      if (name === undefined) this.$refs.traditionalControl.removeActive(propagate);else this.$refs.traditionalControl.changeActiveByName(name, propagate);
+    changeActiveByName: function changeActiveByName(name, region, propagate) {
+      if (name === undefined) this.$refs.treeControl.removeActive(propagate);else this.$refs.treeControl.changeActiveByName(name, region, propagate);
     },
 
     /**
      * Set the highlighted by name.
      *
-     * @param {name} name Name of the region
+     * @param {name} name Name of the group
      */
-    changeHighlightedByName: function changeHighlightedByName(name, propagate) {
-      if (name === undefined) this.$refs.traditionalControl.removeHover(propagate);else this.$refs.traditionalControl.changeHoverByName(name, propagate);
+    changeHighlightedByName: function changeHighlightedByName(name, region, propagate) {
+      if (name === undefined) this.$refs.treeControl.removeHover(propagate);else this.$refs.treeControl.changeHoverByName(name, region, propagate);
     },
 
     /**
@@ -4054,7 +4398,7 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
           if (options.visibility) {
             // Some UIs may not be ready at this time.
             _this3.$nextTick(function () {
-              _this3.$refs.traditionalControl.setState(options.visibility);
+              _this3.$refs.treeControl.setState(options.visibility);
             });
           }
         }
@@ -4067,6 +4411,8 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
 
         _this3.$module.unsetFinishDownloadCallback();
 
+        _this3.$emit("on-ready");
+
         _this3.isReady = true;
       };
     },
@@ -4083,7 +4429,7 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         viewport: undefined,
         visibility: undefined
       };
-      if (this.$refs.traditionalControl) state.visibility = this.$refs.traditionalControl.getState();
+      if (this.$refs.treeControl) state.visibility = this.$refs.treeControl.getState();
 
       if (this.$module.scene) {
         var zincCameraControls = this.$module.scene.getZincCameraControls();
@@ -4110,7 +4456,7 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
           if (state.viewport || state.visibility) {
             if (this.isReady && this.$module.scene) {
               if (state.viewport) this.$module.scene.getZincCameraControls().setCurrentCameraSettings(state.viewport);
-              if (state.visibility) this.$refs.traditionalControl.setState(state.visibility);
+              if (state.visibility) this.$refs.treeControl.setState(state.visibility);
             } else {
               this.$module.setFinishDownloadCallback(this.setURLFinishCallback({
                 viewport: state.viewport,
@@ -4137,7 +4483,7 @@ var EventNotifier = __webpack_require__("9b21").EventNotifier;
         var viewport = state && state.viewport ? state.viewport : undefined;
         var visibility = state && state.visibility ? state.visibility : undefined;
         this._currentURL = newValue;
-        if (this.$refs.traditionalControl) this.$refs.traditionalControl.clear();
+        if (this.$refs.treeControl) this.$refs.treeControl.clear();
         this.loading = true;
         this.isReady = false;
         this.$module.setFinishDownloadCallback(this.setURLFinishCallback({
@@ -4211,8 +4557,8 @@ 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=02b8949c&scoped=true&lang=scss&
-var ScaffoldVuervue_type_style_index_0_id_02b8949c_scoped_true_lang_scss_ = __webpack_require__("c5b3");
+// EXTERNAL MODULE: ./src/components/ScaffoldVuer.vue?vue&type=style&index=0&id=8761aa48&scoped=true&lang=scss&
+var ScaffoldVuervue_type_style_index_0_id_8761aa48_scoped_true_lang_scss_ = __webpack_require__("3816");
 
 // EXTERNAL MODULE: ./src/components/ScaffoldVuer.vue?vue&type=style&index=1&lang=scss&
 var ScaffoldVuervue_type_style_index_1_lang_scss_ = __webpack_require__("642d");
@@ -4233,7 +4579,7 @@ var ScaffoldVuer_component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "02b8949c",
+  "8761aa48",
   null
   
 )
@@ -4263,6 +4609,13 @@ module.exports = require("core-js/modules/es.string.includes");
 
 module.exports = require("element-ui/lib/theme-chalk/row.css");
 
+/***/ }),
+
+/***/ "fe0e":
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es.array.find");
+
 /***/ })
 
 /******/ });