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