{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/scaffoldvuer/src/components/ScaffoldVuer.vue?vue&type=style&index=1&id=e8263762&prod&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/scaffoldvuer/src/components/ScaffoldVuer.vue","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/sass-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ci50aW1lLXNsaWRlci10b29sdGlwIHsKICBwYWRkaW5nOiA2cHggNHB4ICFpbXBvcnRhbnQ7CiAgZm9udC1mYW1pbHk6ICJBc2FwIiwgc2Fucy1zZXJpZjsKICBmb250LXNpemU6IDEycHggIWltcG9ydGFudDsKICBjb2xvcjogcmdiKDQ4LCA0OSwgNTEpICFpbXBvcnRhbnQ7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YzZWNmNiAhaW1wb3J0YW50OwogIGJvcmRlcjogMXB4IHNvbGlkICRhcHAtcHJpbWFyeS1jb2xvciAhaW1wb3J0YW50OwogIHdoaXRlLXNwYWNlOiBub3dyYXAgIWltcG9ydGFudDsKICBtaW4td2lkdGg6IHVuc2V0ICFpbXBvcnRhbnQ7Cn0KCi5zY2FmZm9sZF92aWV3ZXJfZHJvcGRvd24gLmVsLXNlbGVjdC1kcm9wZG93bl9faXRlbSB7CiAgd2hpdGUtc3BhY2U6IG5vd3JhcDsKICB0ZXh0LWFsaWduOiBsZWZ0OwogIGZvbnQtZmFtaWx5OiAiQXNhcCIsIHNhbnMtc2VyaWY7Cn0KCi5vcGFjaXR5LWJveCB7CiAgcmlnaHQ6IDBweDsKICBib3R0b206MjAwcHg7CiAgcG9zaXRpb246YWJzb2x1dGU7Cn0K"},{"version":3,"sources":["ScaffoldVuer.vue"],"names":[],"mappings":";AA6rDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"ScaffoldVuer.vue","sourceRoot":"node_modules/@abi-software/scaffoldvuer/src/components","sourcesContent":["<template>\n  <div\n    ref=\"scaffoldContainer\"\n    v-loading=\"loading\"\n    class=\"scaffold-container\"\n    element-loading-text=\"Loading...\"\n    element-loading-spinner=\"el-icon-loading\"\n    element-loading-background=\"rgba(0, 0, 0, 0.3)\"\n  >\n    <map-svg-sprite-color />\n    <scaffold-tooltip\n      :label=\"tData.label\"\n      :region=\"tData.region\"\n      :visible=\"tData.visible\"\n      :x=\"tData.x\"\n      :y=\"tData.y\"\n    />\n    <div\n      id=\"organsDisplayArea\"\n      ref=\"display\"\n      tabindex=\"-1\"\n      style=\"height:100%;width:100%;\"\n      @keydown.66=\"backgroundChangeCallback\"\n    />\n    <div v-show=\"displayUI && !isTransitioning\">\n      <el-popover\n        v-if=\"displayWarning\"\n        ref=\"warningPopover\"\n        v-model=\"hoverVisibilities[6].value\"\n        :content=\"warningMessage\"\n        placement=\"right\"\n        :append-to-body=\"false\"\n        trigger=\"manual\"\n        popper-class=\"scaffold-popper message-popper right-popper non-selectable\"\n      />\n      <i\n        v-if=\"displayWarning\"\n        v-popover:warningPopover\n        class=\"el-icon-warning message-icon warning-icon\"\n        @mouseover=\"showHelpText(6)\"\n        @mouseout=\"hideHelpText(6)\"\n      >\n        <span class=\"message-text\">Beta</span>\n      </i>\n      <el-popover\n        v-if=\"displayLatestChanges\"\n        ref=\"latestChangesPopover\"\n        v-model=\"hoverVisibilities[7].value\"\n        :content=\"latestChangesMessage\"\n        placement=\"right\"\n        :append-to-body=\"false\"\n        trigger=\"manual\"\n        popper-class=\"scaffold-popper message-popper right-popper non-selectable\"\n      />\n      <i\n        v-if=\"displayLatestChanges && latestChangesMessage\"\n        v-popover:latestChangesPopover\n        class=\"el-icon-warning message-icon latest-changesicon\"\n        @mouseover=\"showHelpText(7)\"\n        @mouseout=\"hideHelpText(7)\"\n      >\n        <span class=\"message-text\">What's new?</span>\n      </i>\n      <el-popover\n        ref=\"checkBoxPopover\"\n        v-model=\"hoverVisibilities[5].value\"\n        content=\"Change region visibility\"\n        placement=\"right\"\n        :append-to-body=\"false\"\n        trigger=\"manual\"\n        popper-class=\"scaffold-popper right-popper non-selectable\"\n      />\n      <tree-controls\n        ref=\"treeControls\"\n        v-popover:checkBoxPopover\n        :help-mode=\"helpMode\"\n        :show-colour-picker=\"showColourPicker\"\n        @object-selected=\"objectSelected\"\n        @object-hovered=\"objectHovered\"\n        @drawer-toggled=\"drawerToggled\"\n      />\n      <div class=\"opacity-box\">\n        <opacity-controls ref=\"opacityControl\" />\n      </div>\n      <el-popover\n        v-if=\"sceneData.timeVarying\"\n        ref=\"sliderPopover\"\n        v-model=\"hoverVisibilities[4].value\"\n        content=\"Move the slider to animate the region\"\n        placement=\"top\"\n        :append-to-body=\"false\"\n        trigger=\"manual\"\n        popper-class=\"scaffold-popper top-popper non-selectable\"\n      />\n      <div\n        v-if=\"sceneData.timeVarying\"\n        v-popover:sliderPopover\n        class=\"time-slider-container\"\n        :class=\"[ minimisedSlider ? 'minimised' : '', sliderPosition]\"\n      >\n        <el-tabs type=\"card\">\n          <el-tab-pane label=\"Animate scaffold\">\n            <el-row class=\"tab-content\">\n              <map-svg-icon\n                v-if=\"isPlaying\"\n                icon=\"pause\"\n                class=\"icon-button video-button\"\n                @click.native=\"play(false)\"\n              />\n              <map-svg-icon\n                v-else\n                icon=\"play\"\n                class=\"video-button icon-button\"\n                @click.native=\"play(true)\"\n              />\n              <el-slider\n                :min=\"0\"\n                :max=\"timeMax\"\n                :value=\"sceneData.currentTime / 100 * timeMax\"\n                :step=\"0.1\"\n                tooltip-class=\"time-slider-tooltip\"\n                class=\"slider\"\n                :format-tooltip=\"formatTooltip\"\n                :marks=\"timeStamps\"\n                @input=\"timeChange($event)\"\n              />\n            </el-row>\n          </el-tab-pane>\n          <el-tab-pane label=\"Animation data\">\n            <el-row class=\"tab-content\">\n              <div class=\"animation-data\">\n                Original duration:\n                <div class=\"purple\">\n                  {{ orginalDuration }}\n                </div>\n              </div>\n              <div class=\"animation-data\">\n                Animation duration:\n                <div class=\"purple\">\n                  {{ animateDuration }}\n                </div>\n              </div>\n              <div class=\"animation-data\">\n                Playback speed\n                <el-select\n                  :popper-append-to-body=\"true\"\n                  :value=\"currentSpeed\"\n                  placeholder=\"Select\"\n                  class=\"select-box\"\n                  popper-class=\"scaffold_viewer_dropdown\"\n                  @change=\"speedChanged($event)\"\n                >\n                  <el-option\n                    v-for=\"item in playSpeed\"\n                    :key=\"item.value\"\n                    :label=\"item.label\"\n                    :value=\"item.value\"\n                  />\n                </el-select>\n              </div>\n            </el-row>\n          </el-tab-pane>\n        </el-tabs>\n      </div>\n      <div class=\"bottom-right-control\">\n        <el-popover\n          v-model=\"hoverVisibilities[0].value\"\n          content=\"Zoom in\"\n          placement=\"left\"\n          :append-to-body=\"false\"\n          trigger=\"manual\"\n          popper-class=\"scaffold-popper left-popper non-selectable\"\n        >\n          <map-svg-icon\n            slot=\"reference\"\n            icon=\"zoomIn\"\n            class=\"icon-button zoomIn\"\n            @click.native=\"zoomIn()\"\n            @mouseover.native=\"showHelpText(0)\"\n            @mouseout.native=\"hideHelpText(0)\"\n          />\n        </el-popover>\n        <el-popover\n          v-model=\"hoverVisibilities[1].value\"\n          content=\"Zoom out\"\n          placement=\"top-end\"\n          :append-to-body=\"false\"\n          trigger=\"manual\"\n          popper-class=\"scaffold-popper popper-zoomout non-selectable\"\n        >\n          <map-svg-icon\n            slot=\"reference\"\n            icon=\"zoomOut\"\n            class=\"icon-button zoomOut\"\n            @click.native=\"zoomOut()\"\n            @mouseover.native=\"showHelpText(1)\"\n            @mouseout.native=\"hideHelpText(1)\"\n          />\n        </el-popover>\n        <el-popover\n          v-model=\"hoverVisibilities[2].value\"\n          placement=\"top\"\n          :append-to-body=\"false\"\n          trigger=\"manual\"\n          popper-class=\"scaffold-popper non-selectable\"\n        >\n          <div>\n            Fit to\n            <br>\n            window\n          </div>\n          <map-svg-icon\n            slot=\"reference\"\n            icon=\"fitWindow\"\n            class=\"icon-button fitWindow\"\n            @click.native=\"fitWindow()\"\n            @mouseover.native=\"showHelpText(2)\"\n            @mouseout.native=\"hideHelpText(2)\"\n          />\n        </el-popover>\n      </div>\n      <el-popover\n        ref=\"backgroundPopover\"\n        placement=\"top-start\"\n        width=\"128\"\n        :append-to-body=\"false\"\n        trigger=\"click\"\n        popper-class=\"background-popper non-selectable\"\n      >\n        <el-row class=\"backgroundText\">\n          Change background\n        </el-row>\n        <el-row class=\"backgroundChooser\">\n          <div\n            v-for=\"item in availableBackground\"\n            :key=\"item\"\n            :class=\"['backgroundChoice', item, item == currentBackground ? 'active' :'']\"\n            @click=\"backgroundChangeCallback(item)\"\n          />\n        </el-row>\n      </el-popover>\n      <el-popover\n        v-model=\"hoverVisibilities[3].value\"\n        content=\"Change background color\"\n        placement=\"right\"\n        :append-to-body=\"false\"\n        trigger=\"manual\"\n        popper-class=\"scaffold-popper right-popper non-selectable\"\n      >\n        <map-svg-icon\n          slot=\"reference\"\n          v-popover:backgroundPopover\n          icon=\"changeBckgd\"\n          class=\"icon-button background-colour\"\n          :class=\"{ open: drawerOpen, close: !drawerOpen }\"\n          @mouseover.native=\"showHelpText(3)\"\n          @mouseout.native=\"hideHelpText(3)\"\n        />\n      </el-popover>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport Vue from \"vue\";\nimport OpacityControls from \"./OpacityControls\";\nimport ScaffoldTooltip from \"./ScaffoldTooltip\";\nimport TreeControls from \"./TreeControls\";\nimport { MapSvgIcon, MapSvgSpriteColor } from \"@abi-software/svg-sprite\";\nimport { findObjectsWithNames, getAllObjects } from \"../scripts/utilities.js\";\nimport { SearchIndex } from \"../scripts/search.js\";\nimport {\n  Col,\n  Loading,\n  Option,\n  Popover,\n  Row,\n  Select,\n  Slider,\n  TabPane,\n  Tabs\n} from \"element-ui\";\nimport lang from \"element-ui/lib/locale/lang/en\";\nimport locale from \"element-ui/lib/locale\";\n\nlocale.use(lang);\nVue.use(Col);\nVue.use(Loading.directive);\nVue.use(Option);\nVue.use(Popover);\nVue.use(Row);\nVue.use(Select);\nVue.use(Slider);\nVue.use(TabPane);\nVue.use(Tabs);\n\nconst OrgansViewer = require(\"../scripts/organsRenderer\").OrgansViewer;\nconst EventNotifier = require(\"../scripts/eventNotifier\").EventNotifier;\n\n/**\n * A vue component of the scaffold viewer.\n *\n * @requires ./OpacityControls.vue\n * @requires ./TreeControls.vue\n */\nexport default {\n  name: \"ScaffoldVuer\",\n  components: {\n    MapSvgIcon,\n    MapSvgSpriteColor,\n    OpacityControls,\n    ScaffoldTooltip,\n    TreeControls,\n  },\n  props: {\n    /**\n     * URL of the zincjs metadata. This value will be ignored if a valid\n     * state prop is also provided.\n     * If the url needs to be updated with state present, please use\n     * the setURL method.\n     */\n    url: {\n      type: String,\n      default: \"\"\n    },\n    /**\n     * Show the colour control of set to true.\n     */\n    showColourPicker: {\n      type: Boolean,\n      default: false\n    },\n    /**\n     * Flag to show/hide the UI.\n     */\n    displayUI: {\n      type: Boolean,\n      default: true\n    },\n    /**\n     * Display all graphics at start.\n     *\n     * This setting only works when traditional is set to false.\n     */\n    displayAtStartUp: {\n      type: Boolean,\n      default: true\n    },\n    /**\n     * Use for toggling the help tooltips.\n     */\n    helpMode: {\n      type: Boolean,\n      default: false\n    },\n    /**\n     * Use for show/display beta warning icon.\n     */\n    displayWarning: {\n      type: Boolean,\n      default: true\n    },\n    /**\n     * Warning message for the hovered over text\n     * on the warning icon.\n     */\n    warningMessage: {\n      type: String,\n      default: \"Beta feature - under active development\"\n    },\n    displayLatestChanges: {\n      type: Boolean,\n      default: false,\n    },\n    latestChangesMessage: {\n      type: String,\n      default: \"New feature - Local search is now available\",\n    },\n    /**\n     * Show/hide pickable markers for regions.\n     */\n    displayMarkers: {\n      type: Boolean,\n      default: false\n    },\n    /**\n     * Show/hide minimap.\n     */\n    displayMinimap: {\n      type: Boolean,\n      default: false\n    },\n    /**\n     * Format of the input URL\n     */\n    format: {\n      type: String,\n      default: \"metadata\"\n    },\n    /**\n     * Settings for minimap position, size and alignment.\n     */\n    minimapSettings: {\n      type: Object,\n      default: function() {\n        return {\n          x_offset: 16,\n          y_offset: 16,\n          width: 128,\n          height: 128,\n          align: \"top-right\"\n        };\n      }\n    },\n    /**\n     * State containing state of the scaffold.\n     */\n    state: {\n      type: Object,\n      default: undefined\n    },\n    /**\n     * Optional prop for the name of the region to focus on,\n     * this option is ignored if state or viewURL is also provided.\n     */\n    region: {\n      type: String,\n      default: \"\"\n    },\n    /**\n     * Optional prop for an URL of containing information of a viewport.\n     * This option is ignored if state is also provided.\n     * It will use the provided URL as base if a relative parth is provided.\n     */\n    viewURL: {\n      type: String,\n      default: \"\"\n    },\n    /**\n     * Settings for turning on/off rendering\n     */\n    render: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data: function() {\n    return {\n      sceneData: this.$module.sceneData,\n      isPlaying: false,\n      /**\n       * This is set when scene is transitioning.\n       */\n      isTransitioning: false,\n      tooltipAppendToBody: false,\n      hoverVisibilities: [\n        { value: false },\n        { value: false },\n        { value: false },\n        { value: false },\n        { value: false },\n        { value: false },\n        { value: false },\n        { value: false },\n      ],\n      inHelp: false,\n      loading: false,\n      duration: 3000,\n      drawerOpen: true,\n      currentBackground: \"white\",\n      availableBackground: [\"white\", \"lightskyblue\", \"black\"],\n      minimisedSlider: false,\n      sliderPosition: \"\",\n      timeMax: 100,\n      orginalDuration: \"\",\n      animateDuration: \"6secs\",\n      playSpeed: [\n        {\n          value: 0.1,\n          label: \"0.1x\"\n        },\n        {\n          value: 0.5,\n          label: \"0.5x\"\n        },\n        {\n          value: 1,\n          label: \"1x\"\n        },\n        {\n          value: 2,\n          label: \"2x\"\n        },\n        {\n          value: 5,\n          label: \"5x\"\n        },\n        {\n          value: 10,\n          label: \"10x\"\n        }\n      ],\n      currentSpeed: 1,\n      timeStamps: {},\n      defaultCheckedKeys: [],\n      tData: {\n        label: \"\",\n        region: \"\",\n        visible: false,\n        x: 200,\n        y: 200,\n      },\n      fileFormat: \"metadata\"\n    };\n  },\n  watch: {\n    format: {\n      handler: function(value) {\n        this.fileFormat = value;\n      },\n      immediate: true\n    },\n    url: {\n      handler: function(newValue) {\n        if (this.state === undefined || this.state.url === undefined)\n          this.setURL(newValue);\n      },\n      immediate: true\n    },\n    region: {\n      handler: function(region) {\n        if (!(this.state || this.viewURL)) this.setFocusedRegion(region);\n      },\n      immediate: true\n    },\n    state: {\n      handler: function(state) {\n        this.setState(state);\n      },\n      immediate: true,\n      deep: true\n    },\n    viewURL: {\n      handler: function(viewURL) {\n        this.updateViewURL(viewURL);\n      },\n      immediate: true\n    },\n    helpMode: function(val) {\n      this.setHelpMode(val);\n    },\n    displayMarkers: function(val) {\n      this.$module.scene.displayMarkers = val;\n      //Update pickable objects\n      this.$module.scene.forcePickableObjectsUpdate = true;\n    },\n    displayMinimap: function(val) {\n      this.$module.scene.displayMinimap = val;\n    },\n    \"sceneData.currentTime\": function() {\n      /**\n       * Triggers when scene time changes.\n       *\n       * @property {number} time Current build-in time of scene.\n       * of selected object.\n       */\n      this.$emit(\"timeChanged\", this.sceneData.currentTime);\n    },\n    duration: function() {\n      this.$module.scene.setDuration(this.duration);\n    },\n    minimapSettings: {\n      deep: true,\n      handler: \"updateMinimapScissor\"\n    },\n    render: function(val) {\n      this.toggleRendering(val);\n    }\n  },\n  beforeCreate: function() {\n    this.$module = new OrgansViewer();\n    this.isReady = false;\n    this.selectedObjects = [];\n    this.hoveredObjects = [];\n    this.currentBackground = \"white\";\n    this._currentURL = undefined;\n    this.availableBackground = [\"white\", \"black\", \"lightskyblue\"];\n    this.$_searchIndex = new SearchIndex();;\n    this.$_tempId = 1;\n  },\n  mounted: function() {\n    this.$refs.treeControls.setModule(this.$module);\n    let eventNotifier = new EventNotifier();\n    eventNotifier.subscribe(this, this.eventNotifierCallback);\n    this.$module.addNotifier(eventNotifier);\n    this.$module.addOrganPartAddedCallback(this.zincObjectAdded);\n    this.$module.initialiseRenderer(this.$refs.display);\n    this.toggleRendering(this.render);\n    this.ro = new ResizeObserver(this.adjustLayout).observe(\n      this.$refs.scaffoldContainer\n    );\n    this.defaultRate = this.$module.getPlayRate();\n  },\n  beforeDestroy: function() {\n    if (this.ro) this.ro.disconnect();\n    this.$module.destroy();\n    this.$module = undefined;\n  },\n  methods: {\n    /**\n     * This is called when a new zinc object is read into the scene.\n     */\n    zincObjectAdded: function(zincObject) {\n      this.loading = false;\n      zincObject.searchIndexId = ++this.$_tempId;\n      this.$_searchIndex.addZincObject(zincObject, zincObject.searchIndexId);\n      this.$emit(\"zinc-object-added\", zincObject);\n    },\n    /**\n     * This is called when Change backgspeedround colour button\n     * is pressed an causes the backgrouColornd colour to be changed\n     * to one of the three preset colour: white, black and\n     * lightskyblue.\n     */\n    backgroundChangeCallback: function(colour) {\n      this.currentBackground = colour;\n      this.$module.zincRenderer\n        .getThreeJSRenderer()\n        .setClearColor(this.currentBackground, 1);\n    },\n    /**\n     * This is called by captueeScreenshot and after the last render\n     * loop, it download a screenshot of the current scene with no UI.\n     */\n    captureScreenshotCallback: function() {\n      //Remove the callback, only needs to happen once\n      this.$module.zincRenderer.removePostRenderCallbackFunction(\n        this.captureID\n      );\n      let screenshot = this.$module.zincRenderer\n        .getThreeJSRenderer()\n        .domElement.toDataURL(\"image/png\");\n      let hrefElement = document.createElement(\"a\");\n      document.body.append(hrefElement);\n      if (!this.captureFilename) hrefElement.download = `screenshot.png`;\n      else hrefElement.download = this.captureFilename;\n      hrefElement.href = screenshot;\n      hrefElement.click();\n      hrefElement.remove();\n    },\n    /**\n     * Function for capturing a screenshot of the current rendering.\n     *\n     * @param {String} filename filename given to the screenshot.\n     *\n     * @public\n     */\n    captureScreenshot: function(filename) {\n      this.captureFilename = filename;\n      this.captureID = this.$module.zincRenderer.addPostRenderCallbackFunction(\n        this.captureScreenshotCallback\n      );\n    },\n    formatTooltip(val) {\n      if (this.timeMax >= 1000) {\n        if (val) {\n          let sec = ((val % 60000) / 1000).toFixed(2) + \"s\";\n          let min = val > 60000 ? (val / 60000).toFixed(0) + \"m \" : \"\";\n          return min + sec;\n        }\n      }\n      return val ? val.toFixed(2) + \" ms\" : \"0 ms\";\n    },\n    /**\n     * Function to reset the view to default.\n     * Also called when the associated button is pressed.\n     *\n     * @public\n     */\n    fitWindow: function() {\n      if (this.$module.scene) {\n        this.$module.scene.viewAll();\n      }\n    },\n    /**\n     * Function to zoom in.\n     * Also called when the associated button is pressed.\n     *\n     * @public\n     */\n    zoomIn: function() {\n      if (this.$module.scene) {\n        this.$module.scene.changeZoomByScrollRateUnit(-1);\n      }\n    },\n    /**\n     * Function to zoom out.\n     * Also called when the associated button is pressed.\n     *\n     * @public\n     */\n    zoomOut: function() {\n      if (this.$module.scene) {\n        this.$module.scene.changeZoomByScrollRateUnit(1);\n      }\n    },\n    /**\n     * Function to change the current play speed.\n     *\n     * @public\n     */\n    speedChanged: function(speed) {\n      this.currentSpeed = speed;\n      this.$module.setPlayRate(this.defaultRate * this.currentSpeed);\n    },\n    /**\n     * Function used to stop the free spin\n     *\n     * @public\n     */\n    stopFreeSpin: function() {\n      let cameracontrol = this.$module.scene.getZincCameraControls();\n      cameracontrol.stopAutoTumble();\n      this.isTransitioning = false;\n    },\n    findObjectsWithGroupName: function(name) {\n      let objects = [];\n      if (name && name != \"\" && this.$module.scene) {\n        objects = this.$module.scene.findObjectsWithGroupName(name);\n      }\n      return objects;\n    },\n    /**\n     * Focus on named region\n     */\n    viewRegion: function(names) {\n      const rootRegion = this.$module.scene.getRootRegion();\n      const groups = Array.isArray(names) ? names : [names];\n      const objects = findObjectsWithNames(rootRegion, groups, \"\", true);\n      let box = this.$module.scene.getBoundingBoxOfZincObjects(objects);\n      if (box) {\n        if (this.$module.isSyncControl()) {\n          this.$module.setSyncControlZoomToBox(box);\n        } else {\n          const dist = this.$module.scene.camera.far - this.$module.scene.camera.near;\n          this.$module.scene.viewAllWithBoundingBox(box);\n          this.$module.scene.camera.far = this.$module.scene.camera.near + dist;\n          this.$module.scene.camera.updateProjectionMatrix();\n        }\n        return true;\n      }\n      return false;\n    },\n    setFocusedRegion: function(name) {\n      if (name) {\n        if (this.isReady) {\n          this.viewRegion(name);\n        } else {\n          this.$module.setFinishDownloadCallback(\n            this.setURLFinishCallback({ region: name })\n          );\n        }\n      }\n    },\n    updateViewURL: function(viewURL) {\n      if (viewURL) {\n        if (this.isReady) {\n          const url = new URL(viewURL, this.url);\n          this.$module.scene.loadViewURL(url);\n        } else {\n          this.$module.setFinishDownloadCallback(\n            this.setURLFinishCallback({ viewURL: viewURL })\n          );\n        }\n      }\n    },\n    getRendererInfo: function() {\n      if (this.$module.zincRenderer) {\n        return this.$module.zincRenderer.getThreeJSRenderer().info;\n      }\n      return undefined;\n    },\n    /**\n     * Function used to rotate the scene.\n     * Also called when the associated button is pressed.\n     *\n     * @public\n     */\n    freeSpin: function() {\n      if (this.$module.scene) {\n        let cameracontrol = this.$module.scene.getZincCameraControls();\n        this.isTransitioning = true;\n        cameracontrol.enableAutoTumble();\n        cameracontrol.autoTumble([1.0, 0.0], Math.PI, true);\n        setTimeout(this.stopFreeSpin, 4000);\n      }\n    },\n    /**\n     * Callback when a region is selected/highlighted.\n     * It will also update other controls.\n     * \n     */\n    eventNotifierCallback: function(event) {\n      const names = [];\n      let zincObjects = [];\n      const region = undefined;\n      if (event.eventType == 1 || event.eventType == 2) {\n        event.identifiers.forEach(identifier => {\n          if (identifier) {\n            let id = identifier.data.id\n              ? identifier.data.id\n              : identifier.data.group;\n            names.push(id);\n          }\n        });\n        zincObjects = event.zincObjects;\n      }\n      /*\n       * Event Type 1: Selected\n       * Event Type 2: Highlighted\n       * Event Type 1: Move\n       */\n      if (event.eventType == 1) {\n        if (this.$refs.treeControls) {\n          if (names.length > 0) {\n            //this.$refs.treeControls.changeActiveByNames(names, region, false);\n            this.$refs.treeControls.updateActiveUI(zincObjects);\n          } else {\n            this.hideRegionTooltip();\n            this.$refs.treeControls.removeActive(true);\n          }\n        }\n        // Triggers when an object has been selected\n        this.$emit(\"scaffold-selected\", event.identifiers);\n      } else if (event.eventType == 2) {\n        if (this.selectedObjects.length === 0) {\n          this.hideRegionTooltip();\n        // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();\n          if (this.$refs.treeControls) {\n            if (names.length > 0) {\n              //this.$refs.treeControls.changeHoverByNames(names, region, false);\n              this.$refs.treeControls.updateHoverUI(zincObjects);\n            } else {\n              this.$refs.treeControls.removeHover(true);\n            }\n          }\n          if ((event.identifiers.length > 0) && event.identifiers[0]) {\n            let id = event.identifiers[0].data.id\n              ? event.identifiers[0].data.id\n              : event.identifiers[0].data.group;\n            if (event.identifiers[0].coords) {\n              this.tData.visible = true;\n              this.tData.label = id;\n              if (event.identifiers[0].data.region)\n                this.tData.region = event.identifiers[0].data.region;\n              else\n                this.tData.region = \"Root\";\n              this.tData.x = event.identifiers[0].coords.x;\n              this.tData.y  = event.identifiers[0].coords.y;\n            }\n          }\n          // Triggers when an object has been highlighted\n          this.$emit(\"scaffold-highlighted\", event.identifiers);\n        }\n      } else if (event.eventType == 3)  { //MOVE\n        if ((event.identifiers.length > 0) && event.identifiers[0]) {\n          if (event.identifiers[0].coords) {\n            const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();\n            this.tData.x = event.identifiers[0].coords.x - offsets.left;\n            this.tData.y = event.identifiers[0].coords.y - offsets.top;\n          }\n        }\n      }\n    },\n    /**\n     * Get the coordinates of the current selected region.\n     *\n     * @public\n     */\n    getCoordinatesOfSelected: function() {\n      if (this.selectedObjects && this.selectedObjects.length > 0) {\n        return this.$module.scene.getObjectsScreenXY(this.selectedObjects);\n      }\n      return undefined;\n    },\n    /**\n     * Return an object containing the window coordinates of the\n     * current selected region which will be updated after each render\n     * loop.\n     *\n     * @public\n     */\n    getDynamicSelectedCoordinates: function() {\n      return this.$module.selectedScreenCoordinates;\n    },\n    /**\n     * Callback when time is changed through the UI.\n     */\n    timeChange: function(event) {\n      let normalizedTime = (event / this.timeMax) * 100;\n      if (normalizedTime != this.sceneData.currentTime)\n        this.$module.updateTime(normalizedTime);\n    },\n    /**\n     * A callback used by children components. Set the selected zinc object\n     *\n     * @param {object} object Zinc object\n     */\n    objectSelected: function(objects, propagate) {\n      this.selectedObjects = objects;\n      if (this.selectedObjects && this.selectedObjects.length > 0)\n        this.$refs.opacityControl.setObject(this.selectedObjects[0]);\n      this.$module.setSelectedByZincObjects(objects, undefined, propagate);\n    },\n    /**\n     * A callback used by children components. Set the highlighted zinc object\n     *\n     * @param {object} object Zinc object\n     */\n    objectHovered: function(objects, propagate) {\n      this.hoveredObjects = objects;\n      this.$module.setHighlightedByZincObjects(objects, undefined, propagate);\n    },\n    /**\n     * Set the selected by name.\n     *\n     * @param {} name Name of the group\n     */\n    changeActiveByName: function(names, region, propagate) {\n      const isArray = Array.isArray(names);\n      if (names === undefined || (isArray && names.length === 0)) {\n        this.$refs.treeControls.removeActive(propagate);\n      } else {\n        let array = names;\n        if (!isArray)\n          array = [array];\n        this.$refs.treeControls.changeActiveByNames(array, region, propagate);\n      }\n    },\n    /**\n     * Set the highlighted by name.\n     *\n     * @param {name} name Name of the group\n     */\n    changeHighlightedByName: function(names, region, propagate) {\n      const isArray = Array.isArray(names);\n      if (names === undefined || (isArray && names.length === 0)) {\n        this.$refs.treeControls.removeHover(propagate);\n      } else {\n        let array = names;\n        if (!isArray)\n          array = [array];\n        this.$refs.treeControls.changeHoverByNames(array, region, propagate);\n      }\n    },\n    /**\n     * Start the animation.\n     *\n     * @param {object} object Zinc object\n     */\n    play: function(flag) {\n      this.$module.playAnimation(flag);\n      this.isPlaying = flag;\n      //Hide tooltip as location may\n      //this.hideRegionTooltip();\n    },\n    /**\n     * Function to toggle on/off overlay help.\n     */\n    setHelpMode: function(helpMode) {\n      if (helpMode) {\n        this.inHelp = true;\n        this.hoverVisibilities.forEach(item => {\n          item.value = true;\n        });\n      } else {\n        this.inHelp = false;\n        this.hoverVisibilities.forEach(item => {\n          item.value = false;\n        });\n      }\n    },\n    /**\n     * Callback function used by showRegionTooltip in the case when the tooltip\n     * is out of view.\n     */\n    displayTooltipOfObjectsCallback: function(name, objects, resetView, liveUpdates) {\n      const instance = this;\n      return function() {\n        instance.$module.zincRenderer.removePostRenderCallbackFunction(instance.$_regionTooltipCallback);\n        instance.$_regionTooltipCallback = undefined;\n        instance.displayTooltipOfObjects(name, objects, resetView, liveUpdates);\n      }\n    },\n    liveUpdateTooltipPosition: function() {\n      if (this.$module.selectedCenter) {\n        this.tData.x = this.$module.selectedScreenCoordinates.x;\n        this.tData.y = this.$module.selectedScreenCoordinates.y;\n      }\n    },\n    displayTooltipOfObjects: function(name, objects, resetView, liveUpdates) {\n      if (objects.length > 0) {\n        let coords = objects[0].getClosestVertexDOMElementCoords(this.$module.scene);\n        if (coords) {\n          //The coords is not in view, view all if resetView flag is true\n          if (!coords.inView) {\n            this.hideRegionTooltip();\n            if (resetView) {\n              this.$module.scene.viewAll();\n              //Use the post render callback to make sure the scene has been updated\n              //before getting the position of the tooltip.\n              if (this.$_regionTooltipCallback) {\n                this.$module.zincRenderer.removePostRenderCallbackFunction(this.$_regionTooltipCallback);\n              }\n              this.$_regionTooltipCallback = \n                this.$module.zincRenderer.addPostRenderCallbackFunction(\n                  this.displayTooltipOfObjectsCallback(name, objects, resetView, liveUpdates)\n                );\n            }\n          } else {\n            this.tData.visible = true;\n            this.tData.label = name;\n            this.tData.x = coords.position.x;\n            this.tData.y = coords.position.y;\n            const regionPath = objects[0].getRegion().getFullPath();\n            if (regionPath)\n              this.tData.region = regionPath;\n            else\n              this.tData.region = \"Root\";\n            if (liveUpdates) {\n              this.$module.setupLiveCoordinates(objects);\n              if (this.$_liveCoordinatesUpdated) {\n                this.$module.zincRenderer.removePostRenderCallbackFunction(this.$_liveCoordinatesUpdated);\n              }\n              this.$_liveCoordinatesUpdated = \n                this.$module.zincRenderer.addPostRenderCallbackFunction(\n                  this.liveUpdateTooltipPosition);\n            }\n          }\n          return true;\n        }\n      }\n      this.hideRegionTooltip();\n      return false;\n    },\n    /**\n     * Display the tooltip. When resetView is set to true, it will \n     * reset view if the tooltip is not in view.\n     * Setting liveUpdates to true will update the tooltip location \n     * at every rendering loop.\n     */\n    showRegionTooltip: function(name, resetView, liveUpdates) {\n      if (name && this.$module.scene) {\n        const rootRegion = this.$module.scene.getRootRegion();\n        const groups = [name];\n        const objects = findObjectsWithNames(rootRegion, groups, \"\", true);\n        return this.displayTooltipOfObjects(name, objects, resetView, liveUpdates);\n      }\n      this.hideRegionTooltip();\n      return false;\n    },\n    hideRegionTooltip: function() {\n      if (this.$_liveCoordinatesUpdated) {\n        this.$module.zincRenderer.removePostRenderCallbackFunction(this.$_liveCoordinatesUpdated);\n        //Unset the tracking\n        this.$module.setupLiveCoordinates(undefined);\n      }\n      this.tData.visible = false;\n      this.tData.region = \"Root\";\n    },\n    /**\n     * This is called when mouse cursor enters supported elements\n     * with help tootltips.\n     */\n    showHelpText: function(helpTextNumber) {\n      if (!this.inHelp) {\n        this.helpTextWait = setTimeout(() => {\n          this.hoverVisibilities[helpTextNumber].value = true;\n        }, 500);\n      }\n    },\n    /**\n     * This is called when mouse cursor exits supported element..\n     */\n    hideHelpText: function(helpTextNumber) {\n      if (!this.inHelp) {\n        this.hoverVisibilities[helpTextNumber].value = false;\n        clearTimeout(this.helpTextWait);\n      }\n    },\n    search: function(text, displayLabel) {\n      if (this.$_searchIndex) {\n        if (text === undefined || text === \"\") {\n          this.objectSelected([], true);\n          return false;\n        } else {\n          let zincObjectResults = this.$_searchIndex.search(text);\n          if (zincObjectResults.length > 0) {\n            this.objectSelected(zincObjectResults, true);\n            if (displayLabel) {\n              for (let i = 0; i < zincObjectResults.length; i++) {\n                if (zincObjectResults[i] && zincObjectResults[i].groupName) {\n                  this.showRegionTooltip(zincObjectResults[i].groupName, true, true)\n                }\n              }\n            }\n            return true;\n          } else {\n            this.objectSelected([], true);\n          }\n        }\n      }\n      return false;\n    },\n    /**\n     * Get the list of suggested terms\n     */\n    fetchSuggestions: function(term) {\n      if(this.$_searchIndex === undefined)\n        return [];\n      return this.$_searchIndex.auto_suggest(term);\n    },\n    /**\n     * Called when minimap settings has changed. Pass the\n     * parameters to ZincJS and marked it for update.\n     */\n    updateMinimapScissor: function() {\n      Object.keys(this.minimapSettings).forEach(key => {\n        this.$module.scene.minimapScissor[key] = this.minimapSettings[key];\n      });\n      this.$module.scene.minimapScissor.updateRequired = true;\n    },\n    updateSettingsfromScene: function() {\n      this.currentSpeed = 1;\n      this.$module.setPlayRate(this.defaultRate);\n      this.orginalDuration = this.$module.scene.getMetadataTag(\n        \"OriginalDuration\"\n      );\n      this.animateDuration = this.$module.scene.getMetadataTag(\"Duration\");\n      let timeStamps = this.$module.scene.getMetadataTag(\"TimeStamps\");\n      this.timeStamps = {};\n      for (const key in timeStamps) {\n        this.timeStamps[timeStamps[key]] = key;\n      }\n      this.timeMax = this.$module.scene.getDuration();\n    },\n    setURLFinishCallback: function(options) {\n      return () => {\n        if (options) {\n          if (options.viewport) {\n            this.$module.scene\n              .getZincCameraControls()\n              .setCurrentCameraSettings(options.viewport);\n          } else if (options.viewURL && options.viewURL !== \"\") {\n            const url = new URL(options.viewURL, this.url);\n            this.$module.scene.loadViewURL(url);\n          } else if (options.region && options.region !== \"\") {\n            this.viewRegion(options.region);\n          }\n          if (options.visibility) {\n            // Some UIs may not be ready at this time.\n            this.$nextTick(() => {\n              this.$refs.treeControls.setState(options.visibility);\n            });\n          }\n        }\n        this.updateSettingsfromScene();\n        this.$module.updateTime(0.01);\n        this.$module.updateTime(0);\n        this.$module.unsetFinishDownloadCallback();\n        this.$emit(\"on-ready\");\n        this.isReady = true;\n      };\n    },\n    /**\n     * Function used for getting the current states of the scene. This exported states\n     * can be imported using the importStates method.\n     *\n     * @public\n     */\n    getState: function() {\n      let state = {\n        format: this.fileFormat,\n        url: this._currentURL,\n        viewport: undefined,\n        visibility: undefined,\n      };\n      if (this.$refs.treeControls)\n        state.visibility = this.$refs.treeControls.getState();\n      if (this.$module.scene) {\n        let zincCameraControls = this.$module.scene.getZincCameraControls();\n        state.viewport = zincCameraControls.getCurrentViewport();\n      }\n      return state;\n    },\n    /**\n     * Function used for importing the states of the scene. This exported states\n     * can be imported using the read states method.\n     *\n     * @public\n     */\n    setState: function(state) {\n      if (state) {\n        if (state.url && state.url !== this._currentURL) {\n          this.setURLAndState(state.url, {\n            fileFormat: state.fileFormat,\n            viewport: state.viewport,\n            visibility: state.visibility\n          });\n        } else {\n          if (state.viewport || state.visibility) {\n            if (this.isReady && this.$module.scene) {\n              if (state.viewport)\n                this.$module.scene\n                  .getZincCameraControls()\n                  .setCurrentCameraSettings(state.viewport);\n              if (state.visibility)\n                this.$refs.treeControls.setState(state.visibility);\n            } else {\n              this.$module.setFinishDownloadCallback(\n                this.setURLFinishCallback({\n                  viewport: state.viewport,\n                  visibility: state.visibility\n                })\n              );\n            }\n          }\n        }\n      }\n    },\n    exportGLTF: function(binary) {\n      return this.$module.scene.exportGLTF(binary);\n    },\n    /**\n     * Function used for reading in new scaffold metadata and a custom\n     * viewport. This function will ignore the state prop and\n     * read in the new url.\n     *\n     * @public\n     */\n    setURLAndState: function(newValue, state) {\n      if (newValue != this._currentURL) {\n        if (state && state.format) this.fileFormat = state.format;\n        let viewport = state && state.viewport ? state.viewport : undefined;\n        let visibility =\n          state && state.visibility ? state.visibility : undefined;\n        this._currentURL = newValue;\n        if (this.$refs.treeControls)\n          this.$refs.treeControls.clear();\n        this.loading = true;\n        this.isReady = false;\n        this.$module.setFinishDownloadCallback(\n          this.setURLFinishCallback({\n            viewport: viewport,\n            region: this.region,\n            viewURL: this.viewURL,\n            visibility: visibility\n          })\n        );\n        if (this.fileFormat === \"gltf\") {\n          this.$module.loadGLTFFromURL(newValue, \"scene\", true);\n        } else {\n          this.$module.loadOrgansFromURL(\n            newValue,\n            undefined,\n            undefined,\n            \"scene\",\n            undefined,\n            true\n          );\n        }\n        this.$_searchIndex.removeAll();\n        this.$_tempId = 1;\n        this.hideRegionTooltip();\n        this.$module.scene.displayMarkers = this.displayMarkers;\n        this.$module.scene.forcePickableObjectsUpdate = true;\n        this.$module.scene.displayMinimap = this.displayMinimap;\n        this.updateMinimapScissor();\n      }\n    },\n    /**\n     * Function used for reading in new scaffold metadata. This function will ignore\n     * the state prop and read in the new url.\n     *\n     * @public\n     */\n    setURL: function(newValue) {\n      this.setURLAndState(newValue, undefined);\n    },\n    /**\n     * Callback when drawer is toggled.\n     */\n    drawerToggled: function(flag) {\n      this.drawerOpen = flag;\n      this.adjustLayout();\n    },\n    /**\n     * Callback using ResizeObserver.\n     */\n    adjustLayout: function() {\n      let width = this.$refs.scaffoldContainer.clientWidth;\n      this.minimisedSlider = width < 812;\n      if (this.minimisedSlider) {\n        this.sliderPosition = this.drawerOpen ? \"right\" : \"left\";\n      } else {\n        this.sliderPosition = \"\";\n      }\n    },\n    toggleRendering: function(flag) {\n      if (this.$module.zincRenderer) {\n        if (flag) {\n          this.$module.zincRenderer.animate();\n        } else {\n          this.$module.zincRenderer.stopAnimate();\n        }\n      }\n    },\n    forceResize: function() {\n      if (this.$module.zincRenderer) {\n        this.$module.zincRenderer.onWindowResize();\n      }\n    },\n    syncControlCallback: function() {\n      const payload = this.$module.NDCCameraControl.getPanZoom();\n      if (this.tData.visible) {\n        this.showRegionTooltip(this.tData.label);\n      }\n      this.$emit(\"scaffold-navigated\", payload);\n    },\n    /** \n     * Rotate mode - \"none\", \"horizontal\", \"vertical\", \"free\" but\n     * it will be ignored if flag is set to false.\n     */\n    toggleSyncControl: function(flag, rotateMode) {\n      this.$module.toggleSyncControl(flag, rotateMode);\n      this.$module.setSyncControlCallback(this.syncControlCallback);\n    }\n  }\n};\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped lang=\"scss\">\n@import \"~element-ui/packages/theme-chalk/src/col\";\n@import \"~element-ui/packages/theme-chalk/src/loading\";\n@import \"~element-ui/packages/theme-chalk/src/option\";\n@import \"~element-ui/packages/theme-chalk/src/popover\";\n@import \"~element-ui/packages/theme-chalk/src/row\";\n@import \"~element-ui/packages/theme-chalk/src/select\";\n@import \"~element-ui/packages/theme-chalk/src/slider\";\n@import \"~element-ui/packages/theme-chalk/src/tabs\";\n@import \"~element-ui/packages/theme-chalk/src/tab-pane\";\n\n\n.message-icon {\n  position: absolute;\n  top: 15px;\n  left: 37px;\n  text-align: left;\n  font-size: 25px;\n  color: $warning;\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.warning-icon {\n  color: $warning;\n  top: 15px;\n}\n\n.latest-changesicon {\n  color: $success;\n  top: 45px;\n}\n\n.message-text {\n  font-size: 15px;\n  vertical-align: 5px;\n}\n\n::v-deep .message-popper {\n  padding: 9px 10px;\n  min-width: 150px;\n  font-size: 12px;\n  color: #fff;\n}\n\n#organsDisplayArea {\n  &:focus {\n    outline: none !important;\n    border: 0px;\n  }\n}\n\n.scaffold-container {\n  height: 100%;\n  width: 100%;\n  position: relative;\n}\n\n.time-slider-container {\n  text-align: left;\n  position: absolute;\n  right: 155px;\n  width: calc(100% - 530px);\n  bottom: 16px;\n  transition: all 1s ease;\n  outline: none;\n\n  &.minimised {\n    width: calc(40%);\n  }\n\n  &.left {\n    right: 155px;\n    width: calc(100% - 250px);\n  }\n\n  &.right {\n    right: 8px;\n    bottom: 54px;\n  }\n}\n\n.slider-display-text {\n  height: 20px;\n  color: rgb(48, 49, 51);\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  padding-left: 8px;\n  text-shadow: -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px -1px #fff;\n}\n\n.tab-content {\n  display: flex;\n  height: 34px;\n  padding-top: 8px;\n  font-size: 14px;\n}\n\n.tab-content ::v-deep .el-slider__marks-text {\n  margin-top: 12px;\n  margin-left: 8px;\n  font-size: 10px;\n}\n\n.tab-content ::v-deep .el-slider__stop {\n  width: 10px;\n  height: 10px;\n  top: -1px;\n  border: solid 1px $app-primary-color;\n}\n\n.animation-data {\n  margin-left: 8px;\n  line-height: 26px;\n  display: flex;\n\n  :not(:first-child) {\n    margin-left: 8px;\n  }\n  .purple {\n    padding-left: 2px;\n    color: $app-primary-color;\n  }\n}\n.slider {\n  margin-left: 30px;\n  width: calc(100% - 88px);\n  margin-top: -7px;\n\n  ::v-deep .el-slider__runway {\n    height: 10px;\n    margin: 14px 0;\n  }\n\n  ::v-deep .el-slider__button-wrapper {\n    top: -13px;\n  }\n}\n\n.zoomOut {\n  padding-left: 8px;\n}\n\n.fitWindow {\n  padding-left: 8px;\n}\n\n::v-deep .non-selectable {\n  user-select: none;\n}\n\n::v-deep .background-popper {\n  padding: 5px 12px;\n  background-color: #ffffff;\n  border: 1px solid $app-primary-color;\n  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);\n  height: 72px;\n  width: 128px;\n  min-width: 128px;\n\n  &.el-popper[x-placement^=\"top\"] {\n    .popper__arrow {\n      border-top-color: $app-primary-color !important;\n      &:after {\n        border-top-color: #fff !important;\n      }\n    }\n  }\n}\n\n.background-colour {\n  bottom: 16px;\n  position: absolute;\n  transition: all 1s ease;\n\n  &.open {\n    left: 322px;\n  }\n\n  &.close {\n    left: 24px;\n  }\n}\n\n.backgroundText {\n  color: rgb(48, 49, 51);\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n}\n\n.backgroundChooser {\n  display: flex;\n  margin-top: 16px;\n}\n\n.backgroundChoice {\n  width: 20px;\n  height: 20px;\n  border: 1px solid rgb(144, 147, 153);\n  margin-left: 20px;\n\n  &.active {\n    border: 2px solid $app-primary-color;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &.white {\n    background-color: white;\n    margin-left: 10px;\n  }\n\n  &.black {\n    background-color: black;\n  }\n\n  &.lightskyblue {\n    background-color: lightskyblue;\n  }\n}\n\n.icon-button {\n  height: 24px !important;\n  width: 24px !important;\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.bottom-right-control {\n  position: absolute;\n  right: 16px;\n  bottom: 16px;\n}\n\n.video-button {\n  margin-left: 8px;\n}\n\n.time-slider-container {\n  ::v-deep .el-tabs__header {\n    margin: 0px;\n    border-bottom: 1px solid rgb(144, 147, 153);\n  }\n\n  .el-row {\n    margin-bottom: 5px;\n  }\n\n  ::v-deep .el-tabs__content {\n    border-left: 1px solid rgb(144, 147, 153);\n    border-bottom: 1px solid rgb(144, 147, 153);\n    border-right: 1px solid rgb(144, 147, 153);\n    border-radius: 0px 0px 4px 4px;\n    background-color: white;\n  }\n\n  ::v-deep .el-tabs--card {\n    > .el-tabs__header {\n      .el-tabs__nav {\n        border: 1px solid rgb(144, 147, 153);\n        border-bottom: none;\n        border-radius: 4px 4px 0px 0px;\n        background-color: white;\n      }\n\n      .el-tabs__item {\n        height: 24px;\n        line-height: 24px;\n        padding: 0 8px !important;\n        border-bottom: 1px solid;\n        border-left: 1px solid rgb(144, 147, 153);\n        &:first-child {\n          border-left: none;\n        }\n        &.is-active {\n          border-bottom: 1px solid white;\n          color: rgb(48, 49, 51);\n        }\n        &:hover {\n          color: $app-primary-color;\n        }\n      }\n    }\n  }\n}\n\n::v-deep .scaffold-popper {\n  padding: 6px 4px;\n  font-size: 12px;\n  color: rgb(48, 49, 51);\n  background-color: #f3ecf6;\n  border: 1px solid $app-primary-color;\n  white-space: nowrap;\n  min-width: unset;\n  pointer-events: none;\n\n  &.left-popper {\n    .popper__arrow {\n      border-left-color: $app-primary-color !important;\n      &:after {\n        border-left-color: #f3ecf6 !important;\n      }\n    }\n  }\n\n  &.right-popper {\n    .popper__arrow {\n      border-right-color: $app-primary-color !important;\n      &:after {\n        border-right-color: #f3ecf6 !important;\n      }\n    }\n  }\n\n  &.el-popper[x-placement^=\"top\"] {\n    .popper__arrow {\n      border-top-color: $app-primary-color !important;\n      &:after {\n        border-top-color: #f3ecf6 !important;\n      }\n    }\n  }\n}\n\n::v-deep .el-slider__button {\n  border: 2px solid $app-primary-color;\n}\n\n::v-deep .el-slider__bar {\n  background-color: $app-primary-color;\n  height: 10px;\n}\n\n::v-deep .el-loading-spinner {\n  i, .el-loading-text {\n    color: $app-primary-color;\n  }\n}\n\n::v-deep .popper-zoomout {\n  padding-right: 11px;\n  left: -21px !important;\n  .popper__arrow {\n    left: 53px !important;\n  }\n}\n\n.select-box {\n  width: 57px;\n  border-radius: 4px;\n  border: 1px solid rgb(144, 147, 153);\n  background-color: var(--white);\n  font-weight: 500;\n  color: rgb(48, 49, 51);\n  margin-left: 8px;\n\n  ::v-deep .el-input__inner {\n    color: $app-primary-color;\n    height: 22px;\n    padding-left: 8px;\n    padding-right: 8px;\n    border: none;\n    font-family: \"Asap\", sans-serif;\n    line-height: 22px;\n  }\n\n  ::v-deep .el-input,\n  ::v-deep .el-input__icon {\n    line-height: 22px;\n  }\n}\n</style>\n\n<style lang=\"scss\">\n.time-slider-tooltip {\n  padding: 6px 4px !important;\n  font-family: \"Asap\", sans-serif;\n  font-size: 12px !important;\n  color: rgb(48, 49, 51) !important;\n  background-color: #f3ecf6 !important;\n  border: 1px solid $app-primary-color !important;\n  white-space: nowrap !important;\n  min-width: unset !important;\n}\n\n.scaffold_viewer_dropdown .el-select-dropdown__item {\n  white-space: nowrap;\n  text-align: left;\n  font-family: \"Asap\", sans-serif;\n}\n\n.opacity-box {\n  right: 0px;\n  bottom:200px;\n  position:absolute;\n}\n</style>\n"]}]}