{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/SplitDialog.vue?vue&type=style&index=0&id=0db0c6fc&prod&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/SplitDialog.vue","mtime":1700617167365},{"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:CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9pbnB1dCI7CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9vcHRpb24iOwpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvcG9wb3ZlciI7CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9zZWxlY3QiOwoKOjp2LWRlZXAgLnNwbGl0cGFuZXMuZGVmYXVsdC10aGVtZSAuc3BsaXRwYW5lc19fcGFuZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2NjYyAhaW1wb3J0YW50OwogIHBvc2l0aW9uOiByZWxhdGl2ZTsKfQoKOjp2LWRlZXAgLnNwbGl0cGFuZXNfX3NwbGl0dGVyIHsKICBtYXJnaW46IDBweCAwcHggMHB4IDBweCAhaW1wb3J0YW50OwogIHotaW5kZXg6IDYgIWltcG9ydGFudDsKICAmOjpiZWZvcmUgewogICAgY29udGVudDogIiI7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICBsZWZ0OiAwOwogICAgdG9wOiAwOwogICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjRzOwogICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgxMzEsIDAsIDE5MSwgMC4zKSAhaW1wb3J0YW50OwogICAgb3BhY2l0eTogMDsKICAgIHotaW5kZXg6IDcgIWltcG9ydGFudDsKICAgICY6aG92ZXIgewogICAgICBvcGFjaXR5OiAxOwogICAgfQogIH0KfQoKOjp2LWRlZXAgLnNwbGl0cGFuZXMtLWhvcml6b250YWwgPiAuc3BsaXRwYW5lc19fc3BsaXR0ZXIsCjo6di1kZWVwIC5zcGxpdHBhbmVzLS12ZXJ0aWNhbCA+IC5zcGxpdHBhbmVzX19zcGxpdHRlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2NjYyAhaW1wb3J0YW50OwogIGJvcmRlci1sZWZ0OiB1bnNldDsKfQoKOjp2LWRlZXAgLnNwbGl0cGFuZXMtLWhvcml6b250YWwgPiAuc3BsaXRwYW5lc19fc3BsaXR0ZXIgewogIGhlaWdodDogMXB4OwogICY6OmJlZm9yZSB7CiAgICB0b3A6IC0ycHg7CiAgICBoZWlnaHQ6IDEwcHg7CiAgICB3aWR0aDogMTAwJTsKICB9Cn0KCjo6di1kZWVwIC5zcGxpdHBhbmVzLS12ZXJ0aWNhbCA+IC5zcGxpdHBhbmVzX19zcGxpdHRlciB7CiAgd2lkdGg6IDFweDsKICAmOjpiZWZvcmUgewogICAgbGVmdDogLTNweDsKICAgIHdpZHRoOiAxMXB4OwogICAgaGVpZ2h0OiAxMDAlOwogIH0KfQoKLnRhYi1jb250YWluZXIgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICB3aWR0aDogMTAwJSAhaW1wb3J0YW50OwogIGhlaWdodDogMTAwJSAhaW1wb3J0YW50OwogIGxlZnQ6IDBweCAhaW1wb3J0YW50OwogIHRvcDogMHB4ICFpbXBvcnRhbnQ7Cn0KCi5idXR0b24tZ3JvdXAgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICB0b3A6IDElOwogIHJpZ2h0OiAxJTsKfQoKLmNvbnRlbnR2dWVyIHsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgdHJhbnNpdGlvbjogYWxsIDFzIGVhc2U7CiAgYmFja2dyb3VuZDogcmdiYSgyNTUsIDI1NSwgMjU1LCAxKTsKCiAgJi5pbmFjdGl2ZSB7CiAgICBkaXNwbGF5OiBub25lOwogICAgd2lkdGg6IDAlOwogICAgaGVpZ2h0OiAwJTsKICAgIGxlZnQ6IDBweDsKICAgIHRvcDogMzBweDsKICB9Cn0K"},{"version":3,"sources":["SplitDialog.vue"],"names":[],"mappings":";AA2SA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;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","file":"SplitDialog.vue","sourceRoot":"src/components","sourcesContent":["<template>\n  <div class=\"tab-container\" ref=\"tabContainer\">\n    <splitpanes\n      class=\"default-theme\"\n      :horizontal=\"horizontal\"\n      :dbl-click-splitter=\"false\"\n      @resized=\"resized('first', $event)\"\n      @resize=\"resize\"\n    >\n      <pane min-size=\"20\" :size=\"splitter1\">\n        <splitpanes\n          class=\"default-theme\"\n          :horizontal=\"true\"\n          :dbl-click-splitter=\"false\"\n          @resized=\"resized('second', $event)\"\n          @resize=\"resize\"\n        >\n          <pane key=\"one\" min-size=\"20\" :size=\"splitter2\" ref=\"pane-1\">\n            <resize-sensor :initial=\"true\" @resize=\"calculateStyles(1)\"></resize-sensor>\n          </pane>\n          <pane v-if=\"isSlotActive('fourth')\" :size=\"100 - splitter2\" key=\"four\" min-size=\"20\" ref=\"pane-4\">\n            <resize-sensor :initial=\"true\" @resize=\"calculateStyles(4)\"></resize-sensor>\n          </pane>\n        </splitpanes>\n      </pane>\n      <pane v-if=\"isSlotActive('second')\" min-size=\"20\" :size=\"100 - splitter1\">\n        <splitpanes\n          class=\"default-theme\"\n          :horizontal=\"true\"\n          :dbl-click-splitter=\"false\"\n          @resized=\"resized('third', $event)\"\n          @resize=\"resize\"\n        >\n          <pane key=\"two\" min-size=\"20\" :size=\"splitter3\" ref=\"pane-2\">\n            <resize-sensor :initial=\"true\" @resize=\"calculateStyles(2)\"></resize-sensor>\n          </pane>\n          <pane v-if=\"isSlotActive('third')\" key=\"three\" min-size=\"20\" :size=\"100 - splitter3\" ref=\"pane-3\">\n            <resize-sensor :initial=\"true\" @resize=\"calculateStyles(3)\"></resize-sensor>\n          </pane>\n        </splitpanes>\n      </pane>\n    </splitpanes>\n    <div\n      v-for=\"entry in entries\"\n      :key=\"entry.id\"\n      :style=\"getStyle(entry.id)\"\n      :class=\"[getClass(entry.id), 'contentvuer']\"\n    >\n      <ContentVuer\n        :key=\"entry.id\"\n        :entry=\"entry\"\n        ref=\"content\"\n        @resource-selected=\"resourceSelected\"\n        :visible=\"isIdVisible(entry.id)\"\n      />\n    </div>\n  </div>\n</template>\n\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport ContentVuer from \"./ContentVuer\";\nimport ResizeSensor from \"vue-resize-sensor\";\n//import SplitpanesBar from \"./SplitpanesBar\";\nimport { Splitpanes, Pane } from \"splitpanes\";\nimport store from \"../store\";\nimport Vue from \"vue\";\nimport \"splitpanes/dist/splitpanes.css\";\nimport {\n  Input,\n  Option,\n  Popover,\n  Select\n} from \"element-ui\";\nVue.use(Input);\nVue.use(Option);\nVue.use(Popover);\nVue.use(Select);\n\nexport default {\n  name: \"SplitDialog\",\n  components: {\n    ContentVuer,\n    Splitpanes,\n//    SplitpanesBar,\n    Pane,\n    ResizeSensor\n  },\n  props: {\n    entries: {\n      type: Array,\n      default: function() {\n        return [];\n      }\n    }\n  },\n  data: function() {\n    return {\n      splitter1: 50,\n      splitter2: 50,\n      splitter3: 50,\n      searchText: [],\n      isFlatmap: {\n        first: true,\n        second: false,\n        third: false,\n        fourth: false\n      },\n      styles: { \n\n      }\n    }\n  },\n  methods: {\n    /**\n     * Callback when the vuers emit a selected event.\n     */\n    resourceSelected: function(result) {\n      this.$emit(\"resource-selected\", result);\n    },\n    getClass: function(id) {\n      if (this.isIdVisible(id)) {\n        return this.getRefsName(id);\n      } else {\n        return \"inactive\";\n      }\n    },\n    getRefsName: function(id) {\n      let slot = store.getters[\"splitFlow/getSlotById\"](id);\n      let index = 0;\n      if (slot) {\n        if (slot.name == \"first\") {\n          index = 1;\n        } else if (slot.name == \"second\") {\n          index = 2;\n        } else if (slot.name == \"third\") {\n          index = 3;\n        } else if (slot.name == \"fourth\") {\n          index = 4;\n        }\n      }\n      const refName = `pane-${index}`;\n      if (index !== 0) {\n        if (!(refName in this.styles)) {\n           Vue.set(this.styles, refName, {});\n        }\n      } \n\n      return refName;\n    },\n    getStyle: function(id) {\n      /* \n        Set the style based on the position of the spltters \n        Header is 30px in height and the splitter is 1px in\n        height/width. The width, height and positon of the \n        viewer should take that into account.\n      */\n      const refName = this.getRefsName(id);\n      if (refName in this.styles && this.styles[refName]) {\n        return this.styles[refName];\n      }\n      return {};\n    },\n    getActiveContents: function() {\n      const activeContents = [];\n      const vuers = this.$refs['content'];\n      if (vuers) {\n        vuers.forEach(vuer => {\n          if (vuer.isVisible())\n            activeContents.push(vuer);\n        });\n      }\n      return activeContents;\n    },\n    isSlotActive: function(name) {\n      let slot = store.getters[\"splitFlow/getSlotByName\"](name);\n      if (slot) return store.getters[\"splitFlow/isSlotActive\"](slot);\n      return false;\n    },\n    isIdVisible: function(id) {\n      let slot = store.getters[\"splitFlow/getSlotById\"](id);\n      if (slot) return store.getters[\"splitFlow/isSlotActive\"](slot);\n      return false;\n    },\n    sendSynchronisedEvent: function(resource) {\n      const activeContents = this.getActiveContents();\n      activeContents.forEach(content => {\n        content.receiveSynchronisedEvent(resource);\n      });\n    },\n    getContentsWithId: function(id) {\n      let contents = this.$refs[\"content\"];\n      for (let i = 0; i < contents.length; i++) {\n        if (contents[i].getId() == id) {\n          return contents[i];\n        }\n      }\n      return undefined;\n    },\n    getContentsState: function() {\n      let states = [];\n      let contents = this.$refs[\"content\"];\n      for (let i = 0; i < contents.length; i++) {\n        states.push(contents[i].getState());\n      }\n      return states;\n    },\n    calculateStyles: function(index) {\n      if (this.$refs && ('tabContainer' in this.$refs)) {\n        const bound = this.$refs['tabContainer'].getBoundingClientRect();\n        const refName = `pane-${index}`;\n        if (refName in this.$refs && this.$refs[refName] && this.$refs[refName].$el) {\n          const el = this.$refs[refName].$el;\n          const {top, left, width, height} = el.getBoundingClientRect();\n          const style = {};\n          style[\"width\"] = `${width}px`;\n          style[\"left\"] = `${left - bound.left}px`;\n          style[\"height\"] = `${height}px`;\n          style[\"top\"] = `${top - bound.top}px`;\n          Vue.set(this.styles, refName, style);\n        }\n      }\n    },\n    updateStyles: function(index) {\n      //Need to wait for the pane to be resized first\n      if (index !== -1) {\n        this.calculateStyles(index);\n      } else {\n        for (let i = 1; i <= 4; i++) {\n          this.calculateStyles(i);\n        }\n      }\n    },\n    resize: function() {\n      this.__userResize__ = true;\n    },\n    resized: function(splitterName, event) {\n      if (this.__userResize__) {\n        store.commit(\"splitFlow/setSplitter\", {\n          name: splitterName,\n          value: event[0].size\n        });\n      }\n      this.__userResize__ = false;\n    }\n  },\n  computed: {\n    horizontal() {\n      if (store.state.splitFlow.activeView === \"2horpanel\") {\n        return true;\n      }\n      return false;\n    },\n    splitters() {\n      return store.state.splitFlow.splitters;\n    },\n    globalCallback() {\n      return store.state.splitFlow.globalCallback;\n    },\n  },\n  watch: {\n    splitters: {\n      handler: function() {\n        this.splitter1 = store.state.splitFlow.splitters.first;\n        this.splitter2 = store.state.splitFlow.splitters.second;\n        this.splitter3 = store.state.splitFlow.splitters.third;\n      },\n      immediate: true,\n      deep: true\n    },\n    globalCallback: {\n      handler: function(val) {\n        //Only activate for active\n        if (val) {\n          const contents = this.getActiveContents();\n          if (contents) {\n            contents.forEach(content => {\n              content.requestSynchronisedEvent(val);\n            });\n          }\n        } else {\n          //Turn sync off, this can be requested for all contents\n          const contents = this.$refs['content'];\n          if (contents) {\n            contents.forEach(content => {\n              content.requestSynchronisedEvent(false);\n            });\n          }\n        }\n      },\n      immediate: true,\n      deep: true\n    },\n  }\n};\n</script>\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped lang=\"scss\">\n@import \"~element-ui/packages/theme-chalk/src/input\";\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/select\";\n\n::v-deep .splitpanes.default-theme .splitpanes__pane {\n  background-color: #ccc !important;\n  position: relative;\n}\n\n::v-deep .splitpanes__splitter {\n  margin: 0px 0px 0px 0px !important;\n  z-index: 6 !important;\n  &::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 0;\n    transition: opacity 0.4s;\n    background-color: rgba(131, 0, 191, 0.3) !important;\n    opacity: 0;\n    z-index: 7 !important;\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n::v-deep .splitpanes--horizontal > .splitpanes__splitter,\n::v-deep .splitpanes--vertical > .splitpanes__splitter {\n  background-color: #ccc !important;\n  border-left: unset;\n}\n\n::v-deep .splitpanes--horizontal > .splitpanes__splitter {\n  height: 1px;\n  &::before {\n    top: -2px;\n    height: 10px;\n    width: 100%;\n  }\n}\n\n::v-deep .splitpanes--vertical > .splitpanes__splitter {\n  width: 1px;\n  &::before {\n    left: -3px;\n    width: 11px;\n    height: 100%;\n  }\n}\n\n.tab-container {\n  position: absolute;\n  width: 100% !important;\n  height: 100% !important;\n  left: 0px !important;\n  top: 0px !important;\n}\n\n.button-group {\n  position: absolute;\n  top: 1%;\n  right: 1%;\n}\n\n.contentvuer {\n  position: absolute;\n  transition: all 1s ease;\n  background: rgba(255, 255, 255, 1);\n\n  &.inactive {\n    display: none;\n    width: 0%;\n    height: 0%;\n    left: 0px;\n    top: 30px;\n  }\n}\n</style>\n"]}]}