@abi-software/scaffoldvuer 0.2.1 → 0.2.2-beta.1

package/src/components/ScaffoldVuer.vue

@@ -19,7 +19,7 @@
       id="organsDisplayArea"
       ref="display"
       tabindex="-1"
-      style="height:100%;width:100%;"
+      style="height: 100%; width: 100%"
       @keydown.66="backgroundChangeCallback"
     />
     <div v-show="displayUI && !isTransitioning">
@@ -74,6 +74,7 @@
         ref="treeControls"
         v-popover:checkBoxPopover
         :help-mode="helpMode"
+        :isReady="isReady"
         :show-colour-picker="showColourPicker"
         @object-selected="objectSelected"
         @object-hovered="objectHovered"
@@ -96,7 +97,7 @@
         v-if="sceneData.timeVarying"
         v-popover:sliderPopover
         class="time-slider-container"
-        :class="[ minimisedSlider ? 'minimised' : '', sliderPosition]"
+        :class="[minimisedSlider ? 'minimised' : '', sliderPosition]"
       >
         <el-tabs type="card">
           <el-tab-pane label="Animate scaffold">
@@ -116,7 +117,7 @@
               <el-slider
                 :min="0"
                 :max="timeMax"
-                :value="sceneData.currentTime / 100 * timeMax"
+                :value="(sceneData.currentTime / 100) * timeMax"
                 :step="0.1"
                 tooltip-class="time-slider-tooltip"
                 class="slider"
@@ -206,7 +207,7 @@
         >
           <div>
             Fit to
-            <br>
+            <br />
             window
           </div>
           <map-svg-icon
@@ -219,6 +220,24 @@
           />
         </el-popover>
       </div>
+      <el-popover
+        ref="open-map-popover"
+        placement="top-start"
+        width="128"
+        :append-to-body="false"
+        trigger="click"
+        popper-class="open-map-popper"
+      >
+        <el-row v-for="item in openMapOptions" :key="item.key">
+          <el-button
+            type="primary"
+            plain
+            @click="$emit('open-map', item.key)"
+          >
+            {{item.display}}
+          </el-button>
+        </el-row>
+      </el-popover>
       <el-popover
         ref="backgroundPopover"
         placement="top-start"
@@ -227,36 +246,64 @@
         trigger="click"
         popper-class="background-popper non-selectable"
       >
-        <el-row class="backgroundText">
-          Change background
-        </el-row>
+        <el-row class="backgroundText"> Change background </el-row>
         <el-row class="backgroundChooser">
           <div
             v-for="item in availableBackground"
             :key="item"
-            :class="['backgroundChoice', item, item == currentBackground ? 'active' :'']"
+            :class="[
+              'backgroundChoice',
+              item,
+              item == currentBackground ? 'active' : '',
+            ]"
             @click="backgroundChangeCallback(item)"
           />
         </el-row>
       </el-popover>
-      <el-popover
-        v-model="hoverVisibilities[3].value"
-        content="Change background color"
-        placement="right"
-        :append-to-body="false"
-        trigger="manual"
-        popper-class="scaffold-popper right-popper non-selectable"
+      <div
+        class="settings-group"
+        :class="{ open: drawerOpen, close: !drawerOpen }"
       >
-        <map-svg-icon
-          slot="reference"
-          v-popover:backgroundPopover
-          icon="changeBckgd"
-          class="icon-button background-colour"
-          :class="{ open: drawerOpen, close: !drawerOpen }"
-          @mouseover.native="showHelpText(3)"
-          @mouseout.native="hideHelpText(3)"
-        />
-      </el-popover>
+        <el-row>
+          <el-popover
+            v-model="hoverVisibilities[8].value"
+            content="Open new map"
+            placement="right"
+            :append-to-body="false"
+            trigger="manual"
+            popper-class="scaffold-popper right-popper non-selectable"
+          >
+            <map-svg-icon
+              v-if="enableOpenMapUI && openMapOptions.lenght > 0"
+              slot="reference"
+              v-popover:open-map-popover
+              icon="openMap"
+              class="icon-button"
+              @mouseover.native="showHelpText(8)"
+              @mouseout.native="hideHelpText(8)"
+            />
+          </el-popover>
+        </el-row>
+        <el-row>
+          <el-popover
+            v-model="hoverVisibilities[3].value"
+            content="Change background color"
+            placement="right"
+            :append-to-body="false"
+            trigger="manual"
+            popper-class="scaffold-popper right-popper non-selectable"
+          >
+            <map-svg-icon
+              slot="reference"
+              v-popover:backgroundPopover
+              icon="changeBckgd"
+              class="icon-button"
+              @mouseover.native="showHelpText(3)"
+              @mouseout.native="hideHelpText(3)"
+            />
+          </el-popover>
+        </el-row>
+      </div>
     </div>
   </div>
 </template>
@@ -271,6 +318,7 @@ import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 import { findObjectsWithNames, getAllObjects } from "../scripts/utilities.js";
 import { SearchIndex } from "../scripts/search.js";
 import {
+  Button,
   Col,
   Loading,
   Option,
@@ -279,12 +327,13 @@ import {
   Select,
   Slider,
   TabPane,
-  Tabs
+  Tabs,
 } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 
 locale.use(lang);
+Vue.use(Button);
 Vue.use(Col);
 Vue.use(Loading.directive);
 Vue.use(Option);
@@ -322,21 +371,21 @@ export default {
      */
     url: {
       type: String,
-      default: ""
+      default: "",
     },
     /**
      * Show the colour control of set to true.
      */
     showColourPicker: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Flag to show/hide the UI.
      */
     displayUI: {
       type: Boolean,
-      default: true
+      default: true,
     },
     /**
      * Display all graphics at start.
@@ -345,21 +394,21 @@ export default {
      */
     displayAtStartUp: {
       type: Boolean,
-      default: true
+      default: true,
     },
     /**
      * Use for toggling the help tooltips.
      */
     helpMode: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Use for show/display beta warning icon.
      */
     displayWarning: {
       type: Boolean,
-      default: true
+      default: true,
     },
     /**
      * Warning message for the hovered over text
@@ -367,7 +416,7 @@ export default {
      */
     warningMessage: {
       type: String,
-      default: "Beta feature - under active development"
+      default: "Beta feature - under active development",
     },
     displayLatestChanges: {
       type: Boolean,
@@ -382,43 +431,70 @@ export default {
      */
     displayMarkers: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Show/hide minimap.
      */
     displayMinimap: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Format of the input URL
      */
     format: {
       type: String,
-      default: "metadata"
+      default: "metadata",
     },
     /**
      * Settings for minimap position, size and alignment.
      */
     minimapSettings: {
       type: Object,
-      default: function() {
+      default: function () {
         return {
           x_offset: 16,
           y_offset: 16,
           width: 128,
           height: 128,
-          align: "top-right"
+          align: "top-right",
         };
-      }
+      },
+    },
+    /**
+     * Flag to determine rather open map UI should be
+     * presented or not.
+     */
+    enableOpenMapUI: {
+      type: Boolean,
+      default: false,
+    },
+    openMapOptions: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            display: "Open AC Map",
+            key: "AC"
+          },
+          {
+            display: "Open FC Map",
+            key: "FC"
+          },
+          {
+            display: "Open 3D Human Map",
+            key: "3D"
+          },
+        ]
+      },
     },
     /**
      * State containing state of the scaffold.
      */
     state: {
       type: Object,
-      default: undefined
+      default: undefined,
     },
     /**
      * Optional prop for the name of the region to focus on,
@@ -426,7 +502,7 @@ export default {
      */
     region: {
       type: String,
-      default: ""
+      default: "",
     },
     /**
      * Optional prop for an URL of containing information of a viewport.
@@ -435,20 +511,21 @@ export default {
      */
     viewURL: {
       type: String,
-      default: ""
+      default: "",
     },
     /**
      * Settings for turning on/off rendering
      */
     render: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
-  data: function() {
+  data: function () {
     return {
       sceneData: this.$module.sceneData,
       isPlaying: false,
+      isReady: false,
       /**
        * This is set when scene is transitioning.
        */
@@ -463,6 +540,7 @@ export default {
         { value: false },
         { value: false },
         { value: false },
+        { value: false },
       ],
       inHelp: false,
       loading: false,
@@ -478,28 +556,28 @@ export default {
       playSpeed: [
         {
           value: 0.1,
-          label: "0.1x"
+          label: "0.1x",
         },
         {
           value: 0.5,
-          label: "0.5x"
+          label: "0.5x",
         },
         {
           value: 1,
-          label: "1x"
+          label: "1x",
         },
         {
           value: 2,
-          label: "2x"
+          label: "2x",
         },
         {
           value: 5,
-          label: "5x"
+          label: "5x",
         },
         {
           value: 10,
-          label: "10x"
-        }
+          label: "10x",
+        },
       ],
       currentSpeed: 1,
       timeStamps: {},
@@ -511,54 +589,54 @@ export default {
         x: 200,
         y: 200,
       },
-      fileFormat: "metadata"
+      fileFormat: "metadata",
     };
   },
   watch: {
     format: {
-      handler: function(value) {
+      handler: function (value) {
         this.fileFormat = value;
       },
-      immediate: true
+      immediate: true,
     },
     url: {
-      handler: function(newValue) {
+      handler: function (newValue) {
         if (this.state === undefined || this.state.url === undefined)
           this.setURL(newValue);
       },
-      immediate: true
+      immediate: true,
     },
     region: {
-      handler: function(region) {
+      handler: function (region) {
         if (!(this.state || this.viewURL)) this.setFocusedRegion(region);
       },
-      immediate: true
+      immediate: true,
     },
     state: {
-      handler: function(state) {
+      handler: function (state) {
         this.setState(state);
       },
       immediate: true,
-      deep: true
+      deep: true,
     },
     viewURL: {
-      handler: function(viewURL) {
+      handler: function (viewURL) {
         this.updateViewURL(viewURL);
       },
-      immediate: true
+      immediate: true,
     },
-    helpMode: function(val) {
+    helpMode: function (val) {
       this.setHelpMode(val);
     },
-    displayMarkers: function(val) {
+    displayMarkers: function (val) {
       this.$module.scene.displayMarkers = val;
       //Update pickable objects
       this.$module.scene.forcePickableObjectsUpdate = true;
     },
-    displayMinimap: function(val) {
+    displayMinimap: function (val) {
       this.$module.scene.displayMinimap = val;
     },
-    "sceneData.currentTime": function() {
+    "sceneData.currentTime": function () {
       /**
        * Triggers when scene time changes.
        *
@@ -567,29 +645,28 @@ export default {
        */
       this.$emit("timeChanged", this.sceneData.currentTime);
     },
-    duration: function() {
+    duration: function () {
       this.$module.scene.setDuration(this.duration);
     },
     minimapSettings: {
       deep: true,
-      handler: "updateMinimapScissor"
+      handler: "updateMinimapScissor",
     },
-    render: function(val) {
+    render: function (val) {
       this.toggleRendering(val);
-    }
+    },
   },
-  beforeCreate: function() {
+  beforeCreate: function () {
     this.$module = new OrgansViewer();
-    this.isReady = false;
     this.selectedObjects = [];
     this.hoveredObjects = [];
     this.currentBackground = "white";
     this._currentURL = undefined;
     this.availableBackground = ["white", "black", "lightskyblue"];
-    this.$_searchIndex = new SearchIndex();;
+    this.$_searchIndex = new SearchIndex();
     this.$_tempId = 1;
   },
-  mounted: function() {
+  mounted: function () {
     this.$refs.treeControls.setModule(this.$module);
     let eventNotifier = new EventNotifier();
     eventNotifier.subscribe(this, this.eventNotifierCallback);
@@ -602,7 +679,7 @@ export default {
     );
     this.defaultRate = this.$module.getPlayRate();
   },
-  beforeDestroy: function() {
+  beforeDestroy: function () {
     if (this.ro) this.ro.disconnect();
     this.$module.destroy();
     this.$module = undefined;
@@ -611,7 +688,7 @@ export default {
     /**
      * This is called when a new zinc object is read into the scene.
      */
-    zincObjectAdded: function(zincObject) {
+    zincObjectAdded: function (zincObject) {
       this.loading = false;
       zincObject.searchIndexId = ++this.$_tempId;
       this.$_searchIndex.addZincObject(zincObject, zincObject.searchIndexId);
@@ -623,7 +700,7 @@ export default {
      * to one of the three preset colour: white, black and
      * lightskyblue.
      */
-    backgroundChangeCallback: function(colour) {
+    backgroundChangeCallback: function (colour) {
       this.currentBackground = colour;
       this.$module.zincRenderer
         .getThreeJSRenderer()
@@ -633,7 +710,7 @@ export default {
      * This is called by captueeScreenshot and after the last render
      * loop, it download a screenshot of the current scene with no UI.
      */
-    captureScreenshotCallback: function() {
+    captureScreenshotCallback: function () {
       //Remove the callback, only needs to happen once
       this.$module.zincRenderer.removePostRenderCallbackFunction(
         this.captureID
@@ -656,7 +733,7 @@ export default {
      *
      * @public
      */
-    captureScreenshot: function(filename) {
+    captureScreenshot: function (filename) {
       this.captureFilename = filename;
       this.captureID = this.$module.zincRenderer.addPostRenderCallbackFunction(
         this.captureScreenshotCallback
@@ -678,7 +755,7 @@ export default {
      *
      * @public
      */
-    fitWindow: function() {
+    fitWindow: function () {
       if (this.$module.scene) {
         this.$module.scene.viewAll();
       }
@@ -689,7 +766,7 @@ export default {
      *
      * @public
      */
-    zoomIn: function() {
+    zoomIn: function () {
       if (this.$module.scene) {
         this.$module.scene.changeZoomByScrollRateUnit(-1);
       }
@@ -700,7 +777,7 @@ export default {
      *
      * @public
      */
-    zoomOut: function() {
+    zoomOut: function () {
       if (this.$module.scene) {
         this.$module.scene.changeZoomByScrollRateUnit(1);
       }
@@ -710,7 +787,7 @@ export default {
      *
      * @public
      */
-    speedChanged: function(speed) {
+    speedChanged: function (speed) {
       this.currentSpeed = speed;
       this.$module.setPlayRate(this.defaultRate * this.currentSpeed);
     },
@@ -719,12 +796,12 @@ export default {
      *
      * @public
      */
-    stopFreeSpin: function() {
+    stopFreeSpin: function () {
       let cameracontrol = this.$module.scene.getZincCameraControls();
       cameracontrol.stopAutoTumble();
       this.isTransitioning = false;
     },
-    findObjectsWithGroupName: function(name) {
+    findObjectsWithGroupName: function (name) {
       let objects = [];
       if (name && name != "" && this.$module.scene) {
         objects = this.$module.scene.findObjectsWithGroupName(name);
@@ -734,7 +811,7 @@ export default {
     /**
      * Focus on named region
      */
-    viewRegion: function(names) {
+    viewRegion: function (names) {
       const rootRegion = this.$module.scene.getRootRegion();
       const groups = Array.isArray(names) ? names : [names];
       const objects = findObjectsWithNames(rootRegion, groups, "", true);
@@ -743,7 +820,8 @@ export default {
         if (this.$module.isSyncControl()) {
           this.$module.setSyncControlZoomToBox(box);
         } else {
-          const dist = this.$module.scene.camera.far - this.$module.scene.camera.near;
+          const 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();
@@ -752,7 +830,7 @@ export default {
       }
       return false;
     },
-    setFocusedRegion: function(name) {
+    setFocusedRegion: function (name) {
       if (name) {
         if (this.isReady) {
           this.viewRegion(name);
@@ -763,7 +841,7 @@ export default {
         }
       }
     },
-    updateViewURL: function(viewURL) {
+    updateViewURL: function (viewURL) {
       if (viewURL) {
         if (this.isReady) {
           const url = new URL(viewURL, this.url);
@@ -775,7 +853,7 @@ export default {
         }
       }
     },
-    getRendererInfo: function() {
+    getRendererInfo: function () {
       if (this.$module.zincRenderer) {
         return this.$module.zincRenderer.getThreeJSRenderer().info;
       }
@@ -787,7 +865,7 @@ export default {
      *
      * @public
      */
-    freeSpin: function() {
+    freeSpin: function () {
       if (this.$module.scene) {
         let cameracontrol = this.$module.scene.getZincCameraControls();
         this.isTransitioning = true;
@@ -799,14 +877,14 @@ export default {
     /**
      * Callback when a region is selected/highlighted.
      * It will also update other controls.
-     * 
+     *
      */
-    eventNotifierCallback: function(event) {
+    eventNotifierCallback: function (event) {
       const names = [];
       let zincObjects = [];
       const region = undefined;
       if (event.eventType == 1 || event.eventType == 2) {
-        event.identifiers.forEach(identifier => {
+        event.identifiers.forEach((identifier) => {
           if (identifier) {
             let id = identifier.data.id
               ? identifier.data.id
@@ -836,7 +914,7 @@ export default {
       } else if (event.eventType == 2) {
         if (this.selectedObjects.length === 0) {
           this.hideRegionTooltip();
-        // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
+          // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
           if (this.$refs.treeControls) {
             if (names.length > 0) {
               //this.$refs.treeControls.changeHoverByNames(names, region, false);
@@ -845,7 +923,7 @@ export default {
               this.$refs.treeControls.removeHover(true);
             }
           }
-          if ((event.identifiers.length > 0) && event.identifiers[0]) {
+          if (event.identifiers.length > 0 && event.identifiers[0]) {
             let id = event.identifiers[0].data.id
               ? event.identifiers[0].data.id
               : event.identifiers[0].data.group;
@@ -854,19 +932,20 @@ export default {
               this.tData.label = id;
               if (event.identifiers[0].data.region)
                 this.tData.region = event.identifiers[0].data.region;
-              else
-                this.tData.region = "Root";
+              else this.tData.region = "Root";
               this.tData.x = event.identifiers[0].coords.x;
-              this.tData.y  = event.identifiers[0].coords.y;
+              this.tData.y = event.identifiers[0].coords.y;
             }
           }
           // Triggers when an object has been highlighted
           this.$emit("scaffold-highlighted", event.identifiers);
         }
-      } else if (event.eventType == 3)  { //MOVE
-        if ((event.identifiers.length > 0) && event.identifiers[0]) {
+      } else if (event.eventType == 3) {
+        //MOVE
+        if (event.identifiers.length > 0 && event.identifiers[0]) {
           if (event.identifiers[0].coords) {
-            const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
+            const 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;
           }
@@ -878,7 +957,7 @@ export default {
      *
      * @public
      */
-    getCoordinatesOfSelected: function() {
+    getCoordinatesOfSelected: function () {
       if (this.selectedObjects && this.selectedObjects.length > 0) {
         return this.$module.scene.getObjectsScreenXY(this.selectedObjects);
       }
@@ -891,13 +970,13 @@ export default {
      *
      * @public
      */
-    getDynamicSelectedCoordinates: function() {
+    getDynamicSelectedCoordinates: function () {
       return this.$module.selectedScreenCoordinates;
     },
     /**
      * Callback when time is changed through the UI.
      */
-    timeChange: function(event) {
+    timeChange: function (event) {
       let normalizedTime = (event / this.timeMax) * 100;
       if (normalizedTime != this.sceneData.currentTime)
         this.$module.updateTime(normalizedTime);
@@ -907,7 +986,7 @@ export default {
      *
      * @param {object} object Zinc object
      */
-    objectSelected: function(objects, propagate) {
+    objectSelected: function (objects, propagate) {
       this.selectedObjects = objects;
       if (this.selectedObjects && this.selectedObjects.length > 0)
         this.$refs.opacityControl.setObject(this.selectedObjects[0]);
@@ -918,7 +997,7 @@ export default {
      *
      * @param {object} object Zinc object
      */
-    objectHovered: function(objects, propagate) {
+    objectHovered: function (objects, propagate) {
       this.hoveredObjects = objects;
       this.$module.setHighlightedByZincObjects(objects, undefined, propagate);
     },
@@ -927,14 +1006,13 @@ export default {
      *
      * @param {} name Name of the group
      */
-    changeActiveByName: function(names, region, propagate) {
+    changeActiveByName: function (names, region, propagate) {
       const isArray = Array.isArray(names);
       if (names === undefined || (isArray && names.length === 0)) {
         this.$refs.treeControls.removeActive(propagate);
       } else {
         let array = names;
-        if (!isArray)
-          array = [array];
+        if (!isArray) array = [array];
         this.$refs.treeControls.changeActiveByNames(array, region, propagate);
       }
     },
@@ -943,14 +1021,13 @@ export default {
      *
      * @param {name} name Name of the group
      */
-    changeHighlightedByName: function(names, region, propagate) {
+    changeHighlightedByName: function (names, region, propagate) {
       const isArray = Array.isArray(names);
       if (names === undefined || (isArray && names.length === 0)) {
         this.$refs.treeControls.removeHover(propagate);
       } else {
         let array = names;
-        if (!isArray)
-          array = [array];
+        if (!isArray) array = [array];
         this.$refs.treeControls.changeHoverByNames(array, region, propagate);
       }
     },
@@ -959,7 +1036,7 @@ export default {
      *
      * @param {object} object Zinc object
      */
-    play: function(flag) {
+    play: function (flag) {
       this.$module.playAnimation(flag);
       this.isPlaying = flag;
       //Hide tooltip as location may
@@ -968,15 +1045,15 @@ export default {
     /**
      * Function to toggle on/off overlay help.
      */
-    setHelpMode: function(helpMode) {
+    setHelpMode: function (helpMode) {
       if (helpMode) {
         this.inHelp = true;
-        this.hoverVisibilities.forEach(item => {
+        this.hoverVisibilities.forEach((item) => {
           item.value = true;
         });
       } else {
         this.inHelp = false;
-        this.hoverVisibilities.forEach(item => {
+        this.hoverVisibilities.forEach((item) => {
           item.value = false;
         });
       }
@@ -985,23 +1062,32 @@ export default {
      * Callback function used by showRegionTooltip in the case when the tooltip
      * is out of view.
      */
-    displayTooltipOfObjectsCallback: function(name, objects, resetView, liveUpdates) {
+    displayTooltipOfObjectsCallback: function (
+      name,
+      objects,
+      resetView,
+      liveUpdates
+    ) {
       const instance = this;
-      return function() {
-        instance.$module.zincRenderer.removePostRenderCallbackFunction(instance.$_regionTooltipCallback);
+      return function () {
+        instance.$module.zincRenderer.removePostRenderCallbackFunction(
+          instance.$_regionTooltipCallback
+        );
         instance.$_regionTooltipCallback = undefined;
         instance.displayTooltipOfObjects(name, objects, resetView, liveUpdates);
-      }
+      };
     },
-    liveUpdateTooltipPosition: function() {
+    liveUpdateTooltipPosition: function () {
       if (this.$module.selectedCenter) {
         this.tData.x = this.$module.selectedScreenCoordinates.x;
         this.tData.y = this.$module.selectedScreenCoordinates.y;
       }
     },
-    displayTooltipOfObjects: function(name, objects, resetView, liveUpdates) {
+    displayTooltipOfObjects: function (name, objects, resetView, liveUpdates) {
       if (objects.length > 0) {
-        let coords = objects[0].getClosestVertexDOMElementCoords(this.$module.scene);
+        let coords = objects[0].getClosestVertexDOMElementCoords(
+          this.$module.scene
+        );
         if (coords) {
           //The coords is not in view, view all if resetView flag is true
           if (!coords.inView) {
@@ -1011,11 +1097,18 @@ export default {
               //Use the post render callback to make sure the scene has been updated
               //before getting the position of the tooltip.
               if (this.$_regionTooltipCallback) {
-                this.$module.zincRenderer.removePostRenderCallbackFunction(this.$_regionTooltipCallback);
+                this.$module.zincRenderer.removePostRenderCallbackFunction(
+                  this.$_regionTooltipCallback
+                );
               }
-              this.$_regionTooltipCallback = 
+              this.$_regionTooltipCallback =
                 this.$module.zincRenderer.addPostRenderCallbackFunction(
-                  this.displayTooltipOfObjectsCallback(name, objects, resetView, liveUpdates)
+                  this.displayTooltipOfObjectsCallback(
+                    name,
+                    objects,
+                    resetView,
+                    liveUpdates
+                  )
                 );
             }
           } else {
@@ -1024,18 +1117,19 @@ export default {
             this.tData.x = coords.position.x;
             this.tData.y = coords.position.y;
             const regionPath = objects[0].getRegion().getFullPath();
-            if (regionPath)
-              this.tData.region = regionPath;
-            else
-              this.tData.region = "Root";
+            if (regionPath) this.tData.region = regionPath;
+            else this.tData.region = "Root";
             if (liveUpdates) {
               this.$module.setupLiveCoordinates(objects);
               if (this.$_liveCoordinatesUpdated) {
-                this.$module.zincRenderer.removePostRenderCallbackFunction(this.$_liveCoordinatesUpdated);
+                this.$module.zincRenderer.removePostRenderCallbackFunction(
+                  this.$_liveCoordinatesUpdated
+                );
               }
-              this.$_liveCoordinatesUpdated = 
+              this.$_liveCoordinatesUpdated =
                 this.$module.zincRenderer.addPostRenderCallbackFunction(
-                  this.liveUpdateTooltipPosition);
+                  this.liveUpdateTooltipPosition
+                );
             }
           }
           return true;
@@ -1045,24 +1139,31 @@ export default {
       return false;
     },
     /**
-     * Display the tooltip. When resetView is set to true, it will 
+     * Display the tooltip. When resetView is set to true, it will
      * reset view if the tooltip is not in view.
-     * Setting liveUpdates to true will update the tooltip location 
+     * Setting liveUpdates to true will update the tooltip location
      * at every rendering loop.
      */
-    showRegionTooltip: function(name, resetView, liveUpdates) {
+    showRegionTooltip: function (name, resetView, liveUpdates) {
       if (name && this.$module.scene) {
         const rootRegion = this.$module.scene.getRootRegion();
         const groups = [name];
         const objects = findObjectsWithNames(rootRegion, groups, "", true);
-        return this.displayTooltipOfObjects(name, objects, resetView, liveUpdates);
+        return this.displayTooltipOfObjects(
+          name,
+          objects,
+          resetView,
+          liveUpdates
+        );
       }
       this.hideRegionTooltip();
       return false;
     },
-    hideRegionTooltip: function() {
+    hideRegionTooltip: function () {
       if (this.$_liveCoordinatesUpdated) {
-        this.$module.zincRenderer.removePostRenderCallbackFunction(this.$_liveCoordinatesUpdated);
+        this.$module.zincRenderer.removePostRenderCallbackFunction(
+          this.$_liveCoordinatesUpdated
+        );
         //Unset the tracking
         this.$module.setupLiveCoordinates(undefined);
       }
@@ -1073,7 +1174,7 @@ export default {
      * This is called when mouse cursor enters supported elements
      * with help tootltips.
      */
-    showHelpText: function(helpTextNumber) {
+    showHelpText: function (helpTextNumber) {
       if (!this.inHelp) {
         this.helpTextWait = setTimeout(() => {
           this.hoverVisibilities[helpTextNumber].value = true;
@@ -1083,13 +1184,13 @@ export default {
     /**
      * This is called when mouse cursor exits supported element..
      */
-    hideHelpText: function(helpTextNumber) {
+    hideHelpText: function (helpTextNumber) {
       if (!this.inHelp) {
         this.hoverVisibilities[helpTextNumber].value = false;
         clearTimeout(this.helpTextWait);
       }
     },
-    search: function(text, displayLabel) {
+    search: function (text, displayLabel) {
       if (this.$_searchIndex) {
         if (text === undefined || text === "") {
           this.objectSelected([], true);
@@ -1101,7 +1202,11 @@ export default {
             if (displayLabel) {
               for (let i = 0; i < zincObjectResults.length; i++) {
                 if (zincObjectResults[i] && zincObjectResults[i].groupName) {
-                  this.showRegionTooltip(zincObjectResults[i].groupName, true, true)
+                  this.showRegionTooltip(
+                    zincObjectResults[i].groupName,
+                    true,
+                    true
+                  );
                 }
               }
             }
@@ -1116,27 +1221,25 @@ export default {
     /**
      * Get the list of suggested terms
      */
-    fetchSuggestions: function(term) {
-      if(this.$_searchIndex === undefined)
-        return [];
+    fetchSuggestions: function (term) {
+      if (this.$_searchIndex === undefined) return [];
       return this.$_searchIndex.auto_suggest(term);
     },
     /**
      * Called when minimap settings has changed. Pass the
      * parameters to ZincJS and marked it for update.
      */
-    updateMinimapScissor: function() {
-      Object.keys(this.minimapSettings).forEach(key => {
+    updateMinimapScissor: function () {
+      Object.keys(this.minimapSettings).forEach((key) => {
         this.$module.scene.minimapScissor[key] = this.minimapSettings[key];
       });
       this.$module.scene.minimapScissor.updateRequired = true;
     },
-    updateSettingsfromScene: function() {
+    updateSettingsfromScene: function () {
       this.currentSpeed = 1;
       this.$module.setPlayRate(this.defaultRate);
-      this.orginalDuration = this.$module.scene.getMetadataTag(
-        "OriginalDuration"
-      );
+      this.orginalDuration =
+        this.$module.scene.getMetadataTag("OriginalDuration");
       this.animateDuration = this.$module.scene.getMetadataTag("Duration");
       let timeStamps = this.$module.scene.getMetadataTag("TimeStamps");
       this.timeStamps = {};
@@ -1145,7 +1248,7 @@ export default {
       }
       this.timeMax = this.$module.scene.getDuration();
     },
-    setURLFinishCallback: function(options) {
+    setURLFinishCallback: function (options) {
       return () => {
         if (options) {
           if (options.viewport) {
@@ -1179,7 +1282,7 @@ export default {
      *
      * @public
      */
-    getState: function() {
+    getState: function () {
       let state = {
         format: this.fileFormat,
         url: this._currentURL,
@@ -1200,13 +1303,13 @@ export default {
      *
      * @public
      */
-    setState: function(state) {
+    setState: function (state) {
       if (state) {
         if (state.url && state.url !== this._currentURL) {
           this.setURLAndState(state.url, {
             fileFormat: state.fileFormat,
             viewport: state.viewport,
-            visibility: state.visibility
+            visibility: state.visibility,
           });
         } else {
           if (state.viewport || state.visibility) {
@@ -1221,7 +1324,7 @@ export default {
               this.$module.setFinishDownloadCallback(
                 this.setURLFinishCallback({
                   viewport: state.viewport,
-                  visibility: state.visibility
+                  visibility: state.visibility,
                 })
               );
             }
@@ -1229,7 +1332,7 @@ export default {
         }
       }
     },
-    exportGLTF: function(binary) {
+    exportGLTF: function (binary) {
       return this.$module.scene.exportGLTF(binary);
     },
     /**
@@ -1239,15 +1342,14 @@ export default {
      *
      * @public
      */
-    setURLAndState: function(newValue, state) {
+    setURLAndState: function (newValue, state) {
       if (newValue != this._currentURL) {
         if (state && state.format) this.fileFormat = state.format;
         let viewport = state && state.viewport ? state.viewport : undefined;
         let visibility =
           state && state.visibility ? state.visibility : undefined;
         this._currentURL = newValue;
-        if (this.$refs.treeControls)
-          this.$refs.treeControls.clear();
+        if (this.$refs.treeControls) this.$refs.treeControls.clear();
         this.loading = true;
         this.isReady = false;
         this.$module.setFinishDownloadCallback(
@@ -1255,7 +1357,7 @@ export default {
             viewport: viewport,
             region: this.region,
             viewURL: this.viewURL,
-            visibility: visibility
+            visibility: visibility,
           })
         );
         if (this.fileFormat === "gltf") {
@@ -1285,20 +1387,20 @@ export default {
      *
      * @public
      */
-    setURL: function(newValue) {
+    setURL: function (newValue) {
       this.setURLAndState(newValue, undefined);
     },
     /**
      * Callback when drawer is toggled.
      */
-    drawerToggled: function(flag) {
+    drawerToggled: function (flag) {
       this.drawerOpen = flag;
       this.adjustLayout();
     },
     /**
      * Callback using ResizeObserver.
      */
-    adjustLayout: function() {
+    adjustLayout: function () {
       let width = this.$refs.scaffoldContainer.clientWidth;
       this.minimisedSlider = width < 812;
       if (this.minimisedSlider) {
@@ -1307,7 +1409,7 @@ export default {
         this.sliderPosition = "";
       }
     },
-    toggleRendering: function(flag) {
+    toggleRendering: function (flag) {
       if (this.$module.zincRenderer) {
         if (flag) {
           this.$module.zincRenderer.animate();
@@ -1316,32 +1418,33 @@ export default {
         }
       }
     },
-    forceResize: function() {
+    forceResize: function () {
       if (this.$module.zincRenderer) {
         this.$module.zincRenderer.onWindowResize();
       }
     },
-    syncControlCallback: function() {
+    syncControlCallback: function () {
       const payload = this.$module.NDCCameraControl.getPanZoom();
       if (this.tData.visible) {
         this.showRegionTooltip(this.tData.label);
       }
       this.$emit("scaffold-navigated", payload);
     },
-    /** 
+    /**
      * Rotate mode - "none", "horizontal", "vertical", "free" but
      * it will be ignored if flag is set to false.
      */
-    toggleSyncControl: function(flag, rotateMode) {
+    toggleSyncControl: function (flag, rotateMode) {
       this.$module.toggleSyncControl(flag, rotateMode);
       this.$module.setSyncControlCallback(this.syncControlCallback);
-    }
-  }
+    },
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/button";
 @import "~element-ui/packages/theme-chalk/src/col";
 @import "~element-ui/packages/theme-chalk/src/loading";
 @import "~element-ui/packages/theme-chalk/src/option";
@@ -1352,7 +1455,6 @@ export default {
 @import "~element-ui/packages/theme-chalk/src/tabs";
 @import "~element-ui/packages/theme-chalk/src/tab-pane";
 
-
 .message-icon {
   position: absolute;
   top: 15px;
@@ -1514,7 +1616,35 @@ export default {
   }
 }
 
-.background-colour {
+::v-deep .open-map-popper {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #ffffff;
+  border: 1px solid $app-primary-color;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
+  width: 178px;
+  min-width: 178px;
+
+  .el-row ~ .el-row {
+    margin-top: 8px;
+  }
+
+  .el-button {
+    padding-top:5px;
+    padding-bottom:5px;
+  }
+
+  &.el-popper[x-placement^="top"] {
+    .popper__arrow {
+      border-top-color: $app-primary-color !important;
+      &:after {
+        border-top-color: #fff !important;
+      }
+    }
+  }
+}
+
+.settings-group {
   bottom: 16px;
   position: absolute;
   transition: all 1s ease;
@@ -1683,7 +1813,8 @@ export default {
 }
 
 ::v-deep .el-loading-spinner {
-  i, .el-loading-text {
+  i,
+  .el-loading-text {
     color: $app-primary-color;
   }
 }
@@ -1742,7 +1873,7 @@ export default {
 
 .opacity-box {
   right: 0px;
-  bottom:200px;
-  position:absolute;
+  bottom: 200px;
+  position: absolute;
 }
 </style>