{"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/TreeControls.vue?vue&type=style&index=0&id=7a4403d7&prod&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/scaffoldvuer/src/components/TreeControls.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:CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9jaGVja2JveCI7CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9jb2xvci1waWNrZXIiOwpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvbG9hZGluZyI7CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9yb3ciOwpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvdHJlZSI7CgouY2hlY2tib3gtY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGN1cnNvcjogcG9pbnRlcjsKfQoKLnRyZWUtY29udHJvbHMgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBib3R0b206IDBweDsKICB0cmFuc2l0aW9uOiBhbGwgMXMgZWFzZTsKCiAgJjpmb2N1cyB7CiAgICBvdXRsaW5lOiBub25lOwogIH0KICAmLm9wZW4gewogICAgbGVmdDogMHB4OwogICAgLnRyYWRpdGlvbmFsLWNvbnRhaW5lciB7CiAgICAgIG9wYWNpdHk6IDE7CiAgICB9CiAgfQogICYuY2xvc2UgewogICAgbGVmdDogLTI5OHB4OwogICAgLnRyYWRpdGlvbmFsLWNvbnRhaW5lciB7CiAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lOwogICAgICBvcGFjaXR5OiAwOwogICAgfQogIH0KfQoKLnRyYWRpdGlvbmFsLWNvbnRhaW5lciB7CiAgdHJhbnNpdGlvbjogYWxsIDFzIGVhc2U7CiAgZmxvYXQ6IGxlZnQ7CiAgcGFkZGluZy1sZWZ0OiAxNnB4OwogIHBhZGRpbmctcmlnaHQ6IDE4cHg7CiAgbWF4LWhlaWdodDogY2FsYygxMDAlIC0gMTU0cHgpOwogIHRleHQtYWxpZ246IGxlZnQ7CiAgb3ZlcmZsb3c6IG5vbmU7CiAgYm9yZGVyOiAxcHggc29saWQgcmdiKDIyMCwgMjIzLCAyMzApOwogIHBhZGRpbmctdG9wOiA3cHg7CiAgcGFkZGluZy1ib3R0b206IDE2cHg7CiAgYmFja2dyb3VuZDogI2ZmZmZmZjsKfQoKLnJlZ2lvbnMtZGlzcGxheS10ZXh0IHsKICB3aWR0aDogNTlweDsKICBoZWlnaHQ6IDIwcHg7CiAgY29sb3I6IHJnYig0OCwgNDksIDUxKTsKICBmb250LXNpemU6IDE0cHg7CiAgZm9udC13ZWlnaHQ6IG5vcm1hbDsKICBsaW5lLWhlaWdodDogMjBweDsKICBtYXJnaW4tbGVmdDogOHB4Owp9CgouYWxsLWNoZWNrYm94IHsKICBmbG9hdDogcmlnaHQ7Cn0KCi50cmVlLWNvbnRhaW5lciB7CiAgd2lkdGg6IDI2MHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIHJnYigxNDQsIDE0NywgMTUzKTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgYmFja2dyb3VuZDogI2ZmZmZmZjsKICBtYXJnaW4tdG9wOiA2cHg7CiAgc2Nyb2xsYmFyLXdpZHRoOiB0aGluOwoKICA6OnYtZGVlcCAuZWwtdHJlZSB7CiAgICBtYXgtaGVpZ2h0OiAyNDBweDsKICAgIG1pbi1oZWlnaHQ6IDEzMHB4OwogICAgb3ZlcmZsb3c6IGF1dG87CiAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7CiAgICAgIHdpZHRoOiA0cHg7CiAgICB9CgogICAgJjo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWIgewogICAgICBib3JkZXItcmFkaXVzOiAxMHB4OwogICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgNnB4ICNjMGM0Y2M7CiAgICB9CiAgfQoKICA6OnYtZGVlcCAuZWwtdHJlZS1ub2RlX19jb250ZW50IHsKICAgIGhlaWdodDogMjJweDsKICB9Cn0KCjo6di1kZWVwIC5lbC1jaGVja2JveF9faW5wdXQgewogICYuaXMtaW5kZXRlcm1pbmF0ZSwKICAmLmlzLWNoZWNrZWQgewogICAgLmVsLWNoZWNrYm94X19pbm5lciB7CiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsKICAgICAgYm9yZGVyLWNvbG9yOiAkYXBwLXByaW1hcnktY29sb3I7CiAgICB9CiAgfQp9Cgo6OnYtZGVlcCAuZWwtY29sb3ItcGlja2VyX19jb2xvciB7CiAgYm9yZGVyOiAxcHggc29saWQgJGFwcC1wcmltYXJ5LWNvbG9yOwp9Cgo6OnYtZGVlcCAuZWwtY2hlY2tib3hfX2xhYmVsIHsKICBwYWRkaW5nLWxlZnQ6IDVweDsKICBjb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yICFpbXBvcnRhbnQ7CiAgZm9udC1zaXplOiAxMnB4OwogIGZvbnQtd2VpZ2h0OiA1MDA7CiAgbGV0dGVyLXNwYWNpbmc6IDBweDsKICBsaW5lLWhlaWdodDogMTRweDsKfQoKLmFjdGl2ZUl0ZW0gewogIGJhY2tncm91bmQtY29sb3I6ICNiYmIgIWltcG9ydGFudDsKfQoKLnJlZ2lvbi10cmVlLW5vZGUgewogIGZsZXg6IDE7CiAgY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvciAhaW1wb3J0YW50OwogIGRpc3BsYXk6IGZsZXg7CiAgZm9udC1zaXplOiAxMnB4OwogIGxpbmUtaGVpZ2h0OiAxNHB4OwogIHBhZGRpbmctbGVmdDogMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmZmY7CiAgd2lkdGg6IDEwMCU7CgogIDo6di1kZWVwIC5lbC1jb2xvci1waWNrZXIgewogICAgaGVpZ2h0OiAxNHB4ICFpbXBvcnRhbnQ7CiAgfQoKICA6OnYtZGVlcCAuZWwtY29sb3ItcGlja2VyX190cmlnZ2VyIHsKICAgIG1hcmdpbi1sZWZ0OiA4cHg7CiAgICBtYXJnaW4tcmlnaHQ6IDhweDsKICAgIHBhZGRpbmc6IDBweDsKICAgIGhlaWdodDogMTRweDsKICAgIHdpZHRoOiAxNHB4OwogICAgYm9yZGVyOiAwcHg7CiAgfQp9CgouaG92ZXJJdGVtIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWVlICFpbXBvcnRhbnQ7Cn0KCjo6di1kZWVwIC5lbC1jb2xvci1waWNrZXJfX2ljb24gewogICYuZWwtaWNvbi1hcnJvdy1kb3duIHsKICAgIGRpc3BsYXk6IG5vbmU7CiAgfQp9Cgo6OnYtZGVlcCAuc2hvdy1waWNrZXIgewogIC5lbC1jb2xvci1waWNrZXJfX2ljb24gewogICAgJi5lbC1pY29uLWFycm93LWRvd24gewogICAgICBkaXNwbGF5OiBibG9jazsKICAgIH0KICB9Cn0KCjo6di1kZWVwIC5teS1kcmF3ZXIgewogIGJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMCk7CiAgYm94LXNoYWRvdzogbm9uZTsKfQoKLmRyYXdlciB7CiAgOjp2LWRlZXAgLmVsLWRyYXdlcjpmb2N1cyB7CiAgICBvdXRsaW5lOiBub25lOwogIH0KfQoKLm9wZW4tZHJhd2VyIHsKICB3aWR0aDogMjBweDsKICBoZWlnaHQ6IDQwcHg7CiAgei1pbmRleDogODsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgbGVmdDogMHB4OwogIGJveC1zaGFkb3c6IDAgMnB4IDEycHggMCByZ2JhKDAsIDAsIDAsIDAuMDYpOwogIGJvcmRlcjogc29saWQgMXB4ICNlNGU3ZWQ7CiAgYmFja2dyb3VuZC1jb2xvcjogI2Y3ZmFmZjsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTsKICBjdXJzb3I6IHBvaW50ZXI7CiAgcG9pbnRlci1ldmVudHM6IGF1dG87Cn0KCi5kcmF3ZXItYnV0dG9uIHsKICBmbG9hdDogbGVmdDsKICB3aWR0aDogMjBweDsKICBoZWlnaHQ6IDQwcHg7CiAgei1pbmRleDogODsKICBtYXJnaW4tdG9wOiBjYWxjKDUwJSAtIDUycHgpOwogIGJvcmRlcjogc29saWQgMXB4ICRhcHAtcHJpbWFyeS1jb2xvcjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmMmZjOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOwogIGN1cnNvcjogcG9pbnRlcjsKICBwb2ludGVyLWV2ZW50czogYXV0bzsKfQoKLmRyYXdlci1idXR0b24gewogIGkgewogICAgZm9udC13ZWlnaHQ6IDYwMDsKICAgIG1hcmdpbi10b3A6IDEycHg7CiAgICBjb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOwogICAgdHJhbnNpdGlvbi1kZWxheTogMC45czsKICB9CiAgJi5vcGVuIHsKICAgIGkgewogICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKSBzY2FsZVkoMik7CiAgICB9CiAgfQogICYuY2xvc2UgewogICAgaSB7CiAgICAgIHRyYW5zZm9ybTogcm90YXRlKDE4MGRlZykgc2NhbGVZKDIpOwogICAgfQogIH0KfQoKLm5vZGUtb3B0aW9ucyB7CiAgdGV4dC1hbGlnbjogcmlnaHQ7Cn0KCi5kcmF3ZXItYnV0dG9uLm9wZW4gaSB7CiAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZykgc2NhbGVZKDIuNSk7Cn0KCi5kcmF3ZXItYnV0dG9uLmNsb3NlIGkgewogIHRyYW5zZm9ybTogcm90YXRlKDE4MGRlZykgc2NhbGVZKDIuNSk7Cn0K"},{"version":3,"sources":["TreeControls.vue"],"names":[],"mappings":";AAudA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA","file":"TreeControls.vue","sourceRoot":"node_modules/@abi-software/scaffoldvuer/src/components","sourcesContent":["<template>\n  <div\n    class=\"tree-controls\"\n    :class=\"{ open: drawerOpen, close: !drawerOpen }\"\n  >\n    <div class=\"traditional-container\">\n      <el-row>\n        <el-col :span=\"12\">\n          <div class=\"regions-display-text\">\n            Regions\n          </div>\n        </el-col>\n      </el-row>\n      <div class=\"tree-container\">\n        <el-tree\n          ref=\"regionTree\"\n          node-key=\"id\"\n          v-loading=\"!isReady\"\n          show-checkbox\n          element-loading-spinner=\"el-icon-loading\"\n          element-loading-background=\"rgba(0, 0, 0, 0.3)\"\n          :check-strictly=\"false\"\n          :data=\"treeData[0].children\"\n          :expand-on-click-node=\"false\"\n          :render-after-expand=\"false\"\n          @check=\"checkChanged\"\n        >\n          <span\n            slot-scope=\"{ node, data }\"\n            class=\"region-tree-node\"\n            :class=\"{\n              activeItem: active.includes(data.id),\n              hoverItem: hover.includes(data.id),\n            }\"\n            @click=\"changeActiveByNode(data, true)\"\n            @mouseover=\"changeHoverByNode(data, true)\"\n          >\n            <el-color-picker\n              v-if=\"data.isPrimitives\"\n              :class=\"{ 'show-picker': showColourPicker }\"\n              :value=\"getColour(data)\"\n              size=\"small\"\n              :popper-class=\"myPopperClass\"\n              @change=\"setColour(data, $event)\"\n            />\n            <span>{{ node.label }}</span>\n            <span v-if=\"data.isTextureSlides\" class=\"node-options\">\n              (Texture)\n            </span>\n          </span>\n        </el-tree>\n      </div>\n    </div>\n    <div\n      class=\"drawer-button\"\n      :class=\"{ open: drawerOpen, close: !drawerOpen }\"\n      @click=\"toggleDrawer\"\n    >\n      <i class=\"el-icon-arrow-left\" />\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport Vue from \"vue\";\nimport {\n  Checkbox,\n  CheckboxGroup,\n  ColorPicker,\n  Loading,\n  Row,\n  Tree,\n} from \"element-ui\";\nimport lang from \"element-ui/lib/locale/lang/en\";\nimport locale from \"element-ui/lib/locale\";\nimport {\n  convertUUIDsToFullPaths,\n  createListFromPrimitives,\n  extractAllFullPaths,\n  findObjectsWithNames,\n} from \"../scripts/utilities.js\";\n\nconst orderBy = require(\"lodash/orderBy\");\nconst uniq = require(\"lodash/uniq\");\nlocale.use(lang);\nVue.use(Checkbox);\nVue.use(CheckboxGroup);\nVue.use(ColorPicker);\nVue.use(Loading);\nVue.use(Row);\nVue.use(Tree);\n\nconst nameSorting = (a, b) => {\n  const labelA = a.label.toUpperCase();\n  const labelB = b.label.toUpperCase();\n  if (labelA < labelB) {\n    return -1;\n  }\n  if (labelA > labelB) {\n    return 1;\n  }\n  return 0;\n};\n\n/**\n * A vue component for toggling visibility of various regions.\n */\nexport default {\n  name: \"TreeControls\",\n  props: {\n    /**\n     * Enable/disable colour picker\n     */\n    showColourPicker: Boolean,\n    isReady: Boolean,\n  },\n  data: function () {\n    return {\n      treeData: [{ label: \"Root\", regionPath: \"\", id: undefined, children: [] }],\n      active: [],\n      hover: [],\n      myPopperClass: \"hide-scaffold-colour-popup\",\n      drawerOpen: true,\n    };\n  },\n  watch: {\n    showColourPicker: {\n      immediate: true,\n      handler: function () {\n        if (this.showColourPicker) this.myPopperClass = \"showPicker\";\n        else this.myPopperClass = \"hide-scaffold-colour-popup\";\n      },\n    },\n  },\n  destroyed: function () {\n    this.sortedPrimitiveGroups = undefined;\n  },\n  methods: {\n    addTreeItem: function (parentContainer, item) {\n      //The following block prevent duplicate graphics with the same name\n      if (parentContainer.some(child => child.label === item.label)) {\n        return;\n      }\n      parentContainer.push(item);\n      parentContainer.sort((a, b) => {\n        return nameSorting(a, b);\n      });\n      this.__nodeNumbers++;\n      this.$nextTick(() => {\n        this.$refs.regionTree.setChecked(item.id, true);\n      });\n    },\n    // find or create new region, region id is always prefixed with\n    // '__r/'\n    findOrCreateRegion: function (data, paths, prefix) {\n      //check if root region has been set\n      if (\n        this.rootID === undefined &&\n        this.$module &&\n        this.$module.scene\n      ) {\n        this.treeData[0].id = this.$module.scene.getRootRegion().uuid;\n        this.treeData[0].isRegion = true;\n      }\n      if (paths.length > 0) {\n        const _paths = [...paths];\n        let childRegion = data.children.find(\n          (child) => child.label == _paths[0]\n        );\n        const path = prefix + \"/\" + paths[0];\n        const region = this.$module.scene.getRootRegion().findChildFromPath(path);\n        if (!childRegion) {\n          childRegion = {\n            label: _paths[0],\n            id: region.uuid,\n            children: [],\n            regionPath: path,\n            isRegion: true,\n          };\n          this.addTreeItem(data.children, childRegion);\n        }\n        _paths.shift();\n        return this.findOrCreateRegion(childRegion, _paths, path);\n      } else {\n        return data;\n      }\n    },\n    /**\n     * This is called when a new zinc object is read into the scene.\n     */\n    zincObjectAdded: function (zincObject) {\n      // Using the new uuid, the cavaet of that is graphics with\n      // same groupName will have different uuid. So in the tree control\n      // We use the first uuid found for a group of primitives with same\n      // group names to represent all of them.\n      const region = zincObject.region;\n      if (region) {\n        const paths = region.getFullSeparatedPath();\n        const regionData = this.findOrCreateRegion(this.treeData[0], paths, \"\");\n        if (zincObject.groupName) {\n          if (regionData) {\n            if (!regionData.children) {\n              regionData.children = [];\n            }\n            const child = {\n              label: zincObject.groupName,\n              id: region.uuid + \"/\" + zincObject.uuid,\n              isPrimitives: true,\n              regionPath: zincObject.region.getFullPath(),\n              isTextureSlides: zincObject.isTextureSlides ? true : false,\n            };\n            this.addTreeItem(regionData.children, child);\n          }\n        }\n      }\n    },\n    checkChanged: function (node, data) {\n      const isRegion = node.isRegion;\n      const isPrimitives = node.isPrimitives;\n      const isChecked = data.checkedKeys.includes(node.id);\n      const region = this.$module.scene\n        .getRootRegion()\n        .findChildFromPath(node.regionPath);\n      if (isRegion) {\n        isChecked ? region.showAllPrimitives() : region.hideAllPrimitives();\n      }\n      if (isPrimitives) {\n        const primitives = region.findObjectsWithGroupName(node.label);\n        primitives.forEach((primitive) => {\n          primitive.setVisibility(isChecked);\n        });\n      }\n    },\n    updateActiveUI: function (primitives) {\n      this.active.length = 0;\n      createListFromPrimitives(primitives, this.active);\n    },\n    changeActiveByPrimitives: function (primitives, propagate) {\n      if (primitives && primitives.length > 0) {\n        this.updateActiveUI(primitives);\n        this.$emit(\"object-selected\", primitives, propagate);\n      } else {\n        this.removeActive(propagate);\n      }\n      this.removeHover(propagate);\n    },\n    updateHoverUI: function (primitives) {\n      this.hover.length = 0;\n      createListFromPrimitives(primitives, this.hover);\n    },\n    changeHoverByPrimitives: function (primitives, propagate) {\n      if (primitives && primitives.length > 0) {\n        this.updateHoverUI(primitives);\n        this.$emit(\"object-hovered\", primitives, propagate);\n      } else {\n        this.removeHover(propagate);\n      }\n    },\n    /**\n     * Select a region by its name.\n     */\n    changeActiveByNames: function (names, regionPath, propagate) {\n      const rootRegion = this.$module.scene.getRootRegion();\n      const targetObjects = findObjectsWithNames(\n        rootRegion,\n        names,\n        regionPath,\n        true\n      );\n      this.changeActiveByPrimitives(targetObjects, propagate);\n    },\n    /**\n     * Hover a region by its name.\n     */\n    changeHoverByNames: function (names, regionPath, propagate) {\n      const rootRegion = this.$module.scene.getRootRegion();\n      const targetObjects = findObjectsWithNames(\n        rootRegion,\n        names,\n        regionPath,\n        true\n      );\n      this.changeHoverByPrimitives(targetObjects, propagate);\n    },\n    changeActiveByNode: function (node, propagate) {\n      if (node.isPrimitives || node.isRegion) {\n        const transverse = node.isRegion ? true : false;\n        const targetObjects = this.getZincObjectsFromNode(node, transverse);\n        this.changeActiveByPrimitives(targetObjects, propagate);\n      }\n    },\n    changeHoverByNode: function (node, propagate) {\n      if (node.isPrimitives) {\n        const targetObjects = this.getZincObjectsFromNode(node, false);\n        this.changeHoverByPrimitives(targetObjects, propagate);\n      }\n    },\n    /**\n     * Unselect the current selected region.\n     */\n    removeActive: function (propagate) {\n      this.active = [];\n      this.$emit(\"object-selected\", [], propagate);\n    },\n    /**\n     * Unselect the current hover region.\n     */\n    removeHover: function (propagate) {\n      this.hover = [];\n      this.$emit(\"object-hovered\", [], propagate);\n    },\n    /**\n     * Reset the controls.\n     */\n    clear: function () {\n      this.active.length = 0;\n      this.hover.length = 0;\n      this.__nodeNumbers = 0;\n      this.$refs.regionTree.updateKeyChildren(this.treeData[0].id, []);\n      this.treeData[0].children.length = 0;\n      this.treeData[0].id = undefined;\n      this.$emit(\"object-selected\", []);\n    },\n    getColour: function (nodeData) {\n      //Do not need to check for primitives as this is checked on the template\n      if (nodeData) {\n        const targetObjects = this.getZincObjectsFromNode(nodeData, false);\n        let graphic = targetObjects[0];\n        if (graphic) {\n          let hex = graphic.getColourHex();\n          if (hex) return \"#\" + hex;\n        }\n      }\n      return \"#FFFFFF\";\n    },\n    getZincObjectsFromNode: function (node, transverse) {\n      const rootRegion = this.$module.scene.getRootRegion();\n      if (node.isPrimitives) {\n        return findObjectsWithNames(\n          rootRegion,\n          node.label,\n          node.regionPath,\n          transverse\n        );\n      } else if (node.isRegion) {\n        if (node.regionPath) {\n          let targetRegion = rootRegion.findChildFromPath(node.regionPath);\n          if (targetRegion) {\n            return targetRegion.getAllObjects(transverse);\n          }\n        }\n      }\n      return [];\n    },\n    //Set this right at the beginning.\n    setModule: function (moduleIn) {\n      this.$module = moduleIn;\n      this.__nodeNumbers = 0;\n      const objects = this.$module.scene.getRootRegion().getAllObjects(true);\n      objects.forEach((zincObject) => {\n        this.zincObjectAdded(zincObject);\n      });\n      this.$module.addOrganPartAddedCallback(this.zincObjectAdded);\n\n    },\n    setColour: function (nodeData, value) {\n      if (nodeData && nodeData.isPrimitives) {\n        const targetObjects = this.getZincObjectsFromNode(nodeData, false);\n        targetObjects.forEach((primitive) => {\n          let hexString = value.replace(\"#\", \"0x\");\n          primitive.setColourHex(hexString);\n        });\n      }\n    },\n    viewAll: function () {\n      this.$module.viewAll();\n    },\n    visibilityToggle: function (item, event) {\n      this.$module.changeOrganPartsVisibility(item, event);\n      if (event == false) {\n        if (this.activeRegion === item) {\n          this.removeActive(true);\n        }\n        if (this.hoverRegion === item) {\n          this.removeHover(true);\n        }\n      }\n    },\n    toggleDrawer: function () {\n      this.drawerOpen = !this.drawerOpen;\n      this.$emit(\"drawer-toggled\", this.drawerOpen);\n    },\n    //Set visibility using full paths and add found id to the ids list\n    //and remove item from list if remove is set to true.\n    setTreeVisibilityWithFullPaths: function (node, list, ids, remove) {\n      let flag = false;\n      let nodeName = \"\";\n      if (node.isRegion) {\n        nodeName = `__r${node.regionPath}`;\n      }\n      if (node.isPrimitives) {\n        nodeName = `${node.regionPath}/${node.label}`;\n      }\n      //Find the node in list, remove it from list if remove flag is on\n      const index = list.indexOf(nodeName);\n      if (index > -1) {\n        flag = true;\n        list.splice(index, 1);\n        ids.push(node.id);\n      }\n      const region = this.$module.scene\n        .getRootRegion()\n        .findChildFromPath(node.regionPath);\n      if (nodeName && (nodeName !== \"__r\")) {\n        if (node.isPrimitives) {\n          const primitives = region.findObjectsWithGroupName(node.label);\n          primitives.forEach((primitive) => primitive.setVisibility(flag));\n        }\n      }\n      if (node.children) {\n        node.children.forEach((child) => {\n          this.setTreeVisibilityWithFullPaths(child, list, ids, true);\n        });\n      }\n    },\n    checkAllKeys: function () {\n      const keysList = [];\n      const ids = [];\n      extractAllFullPaths(this.treeData[0], keysList);\n      this.setTreeVisibilityWithFullPaths(this.treeData[0],\n        keysList, ids, true);\n      this.$refs.regionTree.setCheckedKeys(ids);\n    },\n    getState: function () {\n      let checkedItems = this.$refs.regionTree.getCheckedKeys();\n      if (checkedItems.length === this.__nodeNumbers) {\n        return { checkAll: true, version: \"2.0\" };\n      } else {\n        //We cannot use the generated uuid as the identifier for permastate,\n        //convert it back to paths\n        let paths = convertUUIDsToFullPaths(this.$module.scene.getRootRegion(),\n          checkedItems);\n        return { checkedItems: paths, version: \"2.0\" };\n      }\n    },\n    setState: function (state) {\n      if (state) {\n        if (state.checkAll) {\n          this.checkAllKeys();\n        } else if (state.checkedItems) {\n          let list = [];\n          if (state.version !== \"2.0\") {\n            list = state.checkedItems.map((item) => \"/\" + item);\n            list.shift(\"__r/\");\n          } else {\n            list.push(...state.checkedItems);\n          }\n          const ids = [];\n          this.setTreeVisibilityWithFullPaths(this.treeData[0], list,\n            ids, true);\n          this.$refs.regionTree.setCheckedKeys(ids);\n        }\n      }\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/checkbox\";\n@import \"~element-ui/packages/theme-chalk/src/color-picker\";\n@import \"~element-ui/packages/theme-chalk/src/loading\";\n@import \"~element-ui/packages/theme-chalk/src/row\";\n@import \"~element-ui/packages/theme-chalk/src/tree\";\n\n.checkbox-container {\n  display: flex;\n  cursor: pointer;\n}\n\n.tree-controls {\n  position: absolute;\n  bottom: 0px;\n  transition: all 1s ease;\n\n  &:focus {\n    outline: none;\n  }\n  &.open {\n    left: 0px;\n    .traditional-container {\n      opacity: 1;\n    }\n  }\n  &.close {\n    left: -298px;\n    .traditional-container {\n      pointer-events: none;\n      opacity: 0;\n    }\n  }\n}\n\n.traditional-container {\n  transition: all 1s ease;\n  float: left;\n  padding-left: 16px;\n  padding-right: 18px;\n  max-height: calc(100% - 154px);\n  text-align: left;\n  overflow: none;\n  border: 1px solid rgb(220, 223, 230);\n  padding-top: 7px;\n  padding-bottom: 16px;\n  background: #ffffff;\n}\n\n.regions-display-text {\n  width: 59px;\n  height: 20px;\n  color: rgb(48, 49, 51);\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  margin-left: 8px;\n}\n\n.all-checkbox {\n  float: right;\n}\n\n.tree-container {\n  width: 260px;\n  border: 1px solid rgb(144, 147, 153);\n  border-radius: 4px;\n  background: #ffffff;\n  margin-top: 6px;\n  scrollbar-width: thin;\n\n  ::v-deep .el-tree {\n    max-height: 240px;\n    min-height: 130px;\n    overflow: auto;\n    &::-webkit-scrollbar {\n      width: 4px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      box-shadow: inset 0 0 6px #c0c4cc;\n    }\n  }\n\n  ::v-deep .el-tree-node__content {\n    height: 22px;\n  }\n}\n\n::v-deep .el-checkbox__input {\n  &.is-indeterminate,\n  &.is-checked {\n    .el-checkbox__inner {\n      background-color: $app-primary-color;\n      border-color: $app-primary-color;\n    }\n  }\n}\n\n::v-deep .el-color-picker__color {\n  border: 1px solid $app-primary-color;\n}\n\n::v-deep .el-checkbox__label {\n  padding-left: 5px;\n  color: $app-primary-color !important;\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0px;\n  line-height: 14px;\n}\n\n.activeItem {\n  background-color: #bbb !important;\n}\n\n.region-tree-node {\n  flex: 1;\n  color: $app-primary-color !important;\n  display: flex;\n  font-size: 12px;\n  line-height: 14px;\n  padding-left: 0px;\n  background-color: #fff;\n  width: 100%;\n\n  ::v-deep .el-color-picker {\n    height: 14px !important;\n  }\n\n  ::v-deep .el-color-picker__trigger {\n    margin-left: 8px;\n    margin-right: 8px;\n    padding: 0px;\n    height: 14px;\n    width: 14px;\n    border: 0px;\n  }\n}\n\n.hoverItem {\n  background-color: #eee !important;\n}\n\n::v-deep .el-color-picker__icon {\n  &.el-icon-arrow-down {\n    display: none;\n  }\n}\n\n::v-deep .show-picker {\n  .el-color-picker__icon {\n    &.el-icon-arrow-down {\n      display: block;\n    }\n  }\n}\n\n::v-deep .my-drawer {\n  background: rgba(0, 0, 0, 0);\n  box-shadow: none;\n}\n\n.drawer {\n  ::v-deep .el-drawer:focus {\n    outline: none;\n  }\n}\n\n.open-drawer {\n  width: 20px;\n  height: 40px;\n  z-index: 8;\n  position: absolute;\n  left: 0px;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);\n  border: solid 1px #e4e7ed;\n  background-color: #f7faff;\n  text-align: center;\n  vertical-align: middle;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.drawer-button {\n  float: left;\n  width: 20px;\n  height: 40px;\n  z-index: 8;\n  margin-top: calc(50% - 52px);\n  border: solid 1px $app-primary-color;\n  background-color: #f9f2fc;\n  text-align: center;\n  vertical-align: middle;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.drawer-button {\n  i {\n    font-weight: 600;\n    margin-top: 12px;\n    color: $app-primary-color;\n    transition-delay: 0.9s;\n  }\n  &.open {\n    i {\n      transform: rotate(0deg) scaleY(2);\n    }\n  }\n  &.close {\n    i {\n      transform: rotate(180deg) scaleY(2);\n    }\n  }\n}\n\n.node-options {\n  text-align: right;\n}\n\n.drawer-button.open i {\n  transform: rotate(0deg) scaleY(2.5);\n}\n\n.drawer-button.close i {\n  transform: rotate(180deg) scaleY(2.5);\n}\n</style>\n\n<style>\n.hide-scaffold-colour-popup {\n  display: none;\n}\n</style>\n\n"]}]}