{"version":3,"sources":["webpack:///./src/assets/img/select_arrow.svg","webpack:///./src/components/contextMenu/widgets/imagePickerWidgetPanel.vue","webpack:///src/components/contextMenu/widgets/imagePickerWidgetPanel.vue","webpack:///./src/components/contextMenu/widgets/imagePickerWidgetPanel.vue?9617","webpack:///./src/components/contextMenu/widgets/imagePickerWidgetPanel.vue?da2c","webpack:///./src/components/contextMenu/widgets/imagePickerWidgetPanel.vue?0faf"],"names":["module","exports","render","_vm","this","_c","_self","staticClass","device","attrs","_v","_s","pickerOrientation","require","slot","_l","pickerOrientationTypes","o","idx","key","nativeOn","$event","onChangeOrientation","_e","staticStyle","domProps","multiselect","on","onChangeMultiselect","style","backgroundColor","selectedItemBackground","border","getColorBorder","onUpdateColor","configs","items","photo","$store","dispatch","type","data","callback","onChangeImage","name","updateId","removePhoto","addPhoto","staticRenderFns","components","ChromePicker","computed","mapGetters","survey","activeWidget","orientation","_this$activeWidget","_this$configs$selecte","selectedItemBackgroundObj","_objects","find","mounted","init","photosLength","methods","hex","setColor","renderAll","timeoutId","clearTimeout","setTimeout","setSurveyStepParam","fire","e","value","target","url","onChangeWidget","length","filter","i","idx2","push","vars","defaultPickerPhoto1","checked","alignCenter","active","addWidget","set","top","left","scaleY","scaleX","angle","setCoords","remove","watch","component"],"mappings":"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","file":"js/imagePickerWidgetPanel.194b3de2.js","sourcesContent":["module.exports = __webpack_public_path__ + \"img/select_arrow.c1529dcc.svg\";","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"context-panel-container\"},[_c('div',{staticClass:\"context-panel-scroll\"},[_c('div',{staticClass:\"context-panel-group\"},[(_vm.device === 'mobile')?_c('el-dropdown',{staticClass:\"dropdown-orientation\",attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"}},[_c('div',{staticClass:\"button-action-pickker\"},[_c('div',[_vm._v(_vm._s(_vm.pickerOrientation))]),_c('img',{attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/select_arrow.svg\")}})]),_c('div',{staticClass:\"field-name\"},[_vm._v(\"orientation\")]),_c('el-dropdown-menu',{staticClass:\"dropdown-menu\",attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},_vm._l((_vm.pickerOrientationTypes),function(o,idx){return _c('el-dropdown-item',{key:idx,staticClass:\"dropdown-item\",nativeOn:{\"click\":function($event){return _vm.onChangeOrientation(o)}}},[_vm._v(\" \"+_vm._s(o)+\" \")])}),1)],1):_vm._e(),_c('div',{staticClass:\"multiselect-field\"},[_c('label',{staticStyle:{\"display\":\"flex\"}},[_c('input',{attrs:{\"type\":\"checkbox\",\"hidden\":\"\"},domProps:{\"checked\":_vm.multiselect,\"value\":_vm.multiselect},on:{\"change\":function($event){return _vm.onChangeMultiselect($event)}}}),_c('div',{staticClass:\"checkbbox\"})]),_c('div',{staticClass:\"field-name\"},[_vm._v(\"multiselect\")])]),_c('div',{staticClass:\"selected-background-color\"},[_c('el-dropdown',{attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"}},[_c('span',{staticClass:\"picker-button\"},[_c('div',{staticClass:\"color-picker-wraper\",style:({\n                backgroundColor: _vm.selectedItemBackground,\n                border: _vm.getColorBorder(_vm.selectedItemBackground)\n              })})]),_c('el-dropdown-menu',{attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('chrome-picker',{staticClass:\"picker-element\",attrs:{\"value\":_vm.selectedItemBackground},on:{\"input\":function($event){return _vm.onUpdateColor($event)}}})],1)],1)],1),_c('div',{staticClass:\"field-name\"},[_vm._v(\"background color\")])],1),_c('div',{staticClass:\"mob-separator\"}),_c('div',{staticClass:\"context-panel-group\"},[_c('div',{staticClass:\"photos-settings-container\"},_vm._l((_vm.configs.items),function(o,idx){return _c('div',{key:idx,staticClass:\"photo-settings-item\"},[_c('div',{staticClass:\"photo-item\"},[_c('img',{attrs:{\"alt\":\"img\",\"g\":\"\",\"src\":o.photo},on:{\"click\":function($event){return _vm.$store.dispatch('workSpace/showPopup', {\n                  type: 'changeImage',\n                  data: {\n                    callback: _vm.onChangeImage,\n                    idx\n                  }\n                })}}})]),_c('input',{staticClass:\"photo-id\",attrs:{\"type\":\"text\",\"placeholder\":`id${idx + 1}`},domProps:{\"value\":o.name},on:{\"input\":function($event){return _vm.updateId(idx, $event)}}}),_c('div',{staticClass:\"remove-photo\",on:{\"click\":function($event){return _vm.removePhoto(idx)}}},[_vm._v(\"×\")])])}),0),_c('img',{staticClass:\"add-photo\",attrs:{\"alt\":\"img\",\"g\":\"\",\"src\":require(\"@/assets/img/add_btn.svg\")},on:{\"click\":_vm.addPhoto}}),(_vm.device === 'desktop')?_c('el-dropdown',{staticClass:\"dropdown-orientation\",attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"}},[_c('div',{staticClass:\"button-action-pickker\"},[_c('div',[_vm._v(_vm._s(_vm.pickerOrientation))]),_c('img',{attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/select_arrow.svg\")}})]),_c('div',{staticClass:\"field-name\"},[_vm._v(\"orientation\")]),_c('el-dropdown-menu',{staticClass:\"dropdown-menu\",attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},_vm._l((_vm.pickerOrientationTypes),function(o,idx){return _c('el-dropdown-item',{key:idx,staticClass:\"dropdown-item\",nativeOn:{\"click\":function($event){return _vm.onChangeOrientation(o)}}},[_vm._v(\" \"+_vm._s(o)+\" \")])}),1)],1):_vm._e()],1)])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"context-panel-container\">\n    <div class=\"context-panel-scroll\">\n      <div class=\"context-panel-group\">\n        <el-dropdown\n          placement=\"bottom\"\n          trigger=\"click\"\n          class=\"dropdown-orientation\"\n          v-if=\"device === 'mobile'\"\n        >\n          <div class=\"button-action-pickker\">\n            <div>{{ pickerOrientation }}</div>\n            <img alt=\"img\" src=\"@/assets/img/select_arrow.svg\" />\n          </div>\n          <div class=\"field-name\">orientation</div>\n          <el-dropdown-menu slot=\"dropdown\" class=\"dropdown-menu\">\n            <el-dropdown-item\n              @click.native=\"onChangeOrientation(o)\"\n              class=\"dropdown-item\"\n              v-for=\"(o, idx) of pickerOrientationTypes\"\n              :key=\"idx\"\n            >\n              {{ o }}\n            </el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n        <div class=\"multiselect-field\">\n          <label style=\"display: flex;\">\n            <input\n              type=\"checkbox\"\n              hidden\n              :checked=\"multiselect\"\n              :value=\"multiselect\"\n              @change=\"onChangeMultiselect($event)\"\n            />\n            <div class=\"checkbbox\"></div>\n          </label>\n          <div class=\"field-name\">multiselect</div>\n        </div>\n        <div class=\"selected-background-color\">\n          <el-dropdown placement=\"bottom\" trigger=\"click\">\n            <span class=\"picker-button\">\n              <div\n                :style=\"{\n                  backgroundColor: selectedItemBackground,\n                  border: getColorBorder(selectedItemBackground)\n                }\"\n                class=\"color-picker-wraper\"\n              ></div>\n            </span>\n            <el-dropdown-menu slot=\"dropdown\">\n              <chrome-picker\n                class=\"picker-element\"\n                @input=\"onUpdateColor($event)\"\n                :value=\"selectedItemBackground\"\n              />\n            </el-dropdown-menu>\n          </el-dropdown>\n        </div>\n        <div class=\"field-name\">background color</div>\n      </div>\n      <div class=\"mob-separator\"></div>\n      <div class=\"context-panel-group\">\n        <div class=\"photos-settings-container\">\n          <div\n            class=\"photo-settings-item\"\n            v-for=\"(o, idx) of configs.items\"\n            :key=\"idx\"\n          >\n            <div class=\"photo-item\">\n              <img\n                alt=\"img\"\n                g\n                @click=\"\n                  $store.dispatch('workSpace/showPopup', {\n                    type: 'changeImage',\n                    data: {\n                      callback: onChangeImage,\n                      idx\n                    }\n                  })\n                \"\n                :src=\"o.photo\"\n              />\n            </div>\n            <input\n              type=\"text\"\n              class=\"photo-id\"\n              :value=\"o.name\"\n              :placeholder=\"`id${idx + 1}`\"\n              @input=\"updateId(idx, $event)\"\n            />\n            <div class=\"remove-photo\" @click=\"removePhoto(idx)\">&times;</div>\n          </div>\n        </div>\n        <img\n          alt=\"img\"\n          g\n          class=\"add-photo\"\n          @click=\"addPhoto\"\n          src=\"@/assets/img/add_btn.svg\"\n        />\n\n        <el-dropdown\n          placement=\"bottom\"\n          trigger=\"click\"\n          class=\"dropdown-orientation\"\n          v-if=\"device === 'desktop'\"\n        >\n          <div class=\"button-action-pickker\">\n            <div>{{ pickerOrientation }}</div>\n            <img alt=\"img\" src=\"@/assets/img/select_arrow.svg\" />\n          </div>\n          <div class=\"field-name\">orientation</div>\n          <el-dropdown-menu slot=\"dropdown\" class=\"dropdown-menu\">\n            <el-dropdown-item\n              @click.native=\"onChangeOrientation(o)\"\n              class=\"dropdown-item\"\n              v-for=\"(o, idx) of pickerOrientationTypes\"\n              :key=\"idx\"\n            >\n              {{ o }}\n            </el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { getColorBorder } from \"@/helpers/hex\";\nimport { addWidget } from \"@/util/survey/widgets\";\nimport { setSurveyStepParam } from \"@/util/survey/markSurveyObject\";\nimport ChromePicker from \"vue-color/src/components/Chrome\";\nimport vars from \"@/util/vars\";\nimport { mapGetters } from \"vuex\";\nimport \"@/assets/css/contextMenu.css\";\n\nexport default {\n  name: \"PilImagePickerWidgetPanel\",\n  components: {\n    ChromePicker\n  },\n  computed: {\n    ...mapGetters({\n      device: \"workSpace/device\",\n      survey: \"workSpace/survey\",\n      activeWidget: \"workSpace/activeWidget\"\n    }),\n    pickerOrientation() {\n      return this.configs.orientation;\n    },\n    configs() {\n      return this.activeWidget?.configs;\n    },\n    multiselect() {\n      return this.configs.multiselect;\n    },\n    selectedItemBackground() {\n      return this.configs.selectedItemBackground ?? \"#f8f8f5\";\n    },\n    selectedItemBackgroundObj() {\n      return this.activeWidget._objects.find(o => o.type === \"rect\");\n    }\n  },\n  mounted() {\n    this.init();\n  },\n  data() {\n    return {\n      getColorBorder,\n      photosLength: 3,\n      pickerOrientationTypes: [\"vertical\", \"horizontal\"]\n    };\n  },\n  methods: {\n    onUpdateColor({ hex }) {\n      this.selectedItemBackgroundObj.setColor(hex);\n      this.survey.renderAll();\n      this.configs.selectedItemBackground = hex;\n      if (this.timeoutId) clearTimeout(this.timeoutId);\n      this.timeoutId = setTimeout(() => {\n        setSurveyStepParam(\"configs\", this.activeWidget, this.configs);\n        this.survey.fire(\"canvas:changes\");\n      }, 500);\n    },\n    updateId(idx, e) {\n      const value = e.target.value;\n      this.configs.items[idx].name = value;\n      this.survey.fire(\"canvas:changes\");\n    },\n    onChangeImage(idx, url) {\n      this.configs.items[idx].photo = url;\n      return this.onChangeWidget();\n    },\n    removePhoto(idx) {\n      if (this.activeWidget._objects.length <= 1) return;\n      this.configs.items = this.configs.items.filter((i, idx2) => idx !== idx2);\n      this.onChangeWidget();\n    },\n    addPhoto() {\n      this.configs.items.push({ name: \"\", photo: vars.defaultPickerPhoto1 });\n      this.onChangeWidget();\n    },\n    onChangeMultiselect(e) {\n      this.configs.multiselect = e.target.checked;\n      setSurveyStepParam(\"configs\", this.activeWidget, this.configs);\n      this.survey.fire(\"canvas:changes\");\n    },\n    onChangeOrientation(orientation) {\n      if (this.configs.orientation === orientation) return;\n      this.configs.orientation = orientation;\n      this.onChangeWidget(true);\n    },\n    async onChangeWidget(alignCenter) {\n      const active = this.activeWidget;\n      await addWidget(\"image-picker\", this.survey, {\n        configs: this.configs\n      });\n      if (!alignCenter) {\n        this.activeWidget\n          .set({\n            top: active.top < 0 ? 0 : active.top,\n            left: active.left < 0 ? 0 : active.left,\n            scaleY: active.scaleY,\n            scaleX: active.scaleX,\n            angle: active.angle\n          })\n          .setCoords();\n      }\n      this.survey.remove(active);\n      this.survey.renderAll();\n      this.survey.fire(\"canvas:changes\");\n    },\n    init() {\n      if (!this.activeWidget) return;\n      this.photosLength = this.activeWidget._objects.length;\n    }\n  },\n  watch: {\n    activeWidget() {\n      this.init();\n    }\n  }\n};\n</script>\n\n<style scoped>\n.image-picker-interaction-panel {\n  width: 100%;\n  padding: 20px 0 15px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.color-pickers {\n  display: flex;\n  justify-content: space-between;\n  width: 70px;\n}\n.length-container {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 20px;\n  width: 200px;\n}\n.length-container input {\n  width: 70px;\n  height: 25px;\n  text-align: center;\n  line-height: 25px;\n  padding: 3px;\n  border-radius: 7px;\n  border: none;\n  background: #f8f8f5;\n  font-size: 12px;\n  box-sizing: border-box;\n}\n.photo-settings-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 150px;\n  margin-bottom: 10px;\n}\n.photo-settings-item input {\n  width: 70px;\n  padding: 0 5px;\n  text-align: center;\n  height: 25px;\n  border: none;\n  background: #f8f8f5;\n}\n.photo-item {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  width: 50px;\n  border-radius: 7px;\n  height: 50px;\n}\n.photo-item img {\n  padding: 3px;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  -o-object-fit: contain;\n  object-fit: contain;\n  margin: auto;\n}\n.remove-photo {\n  font-size: 20px;\n  font-weight: 600;\n  cursor: pointer;\n}\n.add-photo {\n  margin: auto;\n  display: flex;\n  max-width: 20px;\n  max-height: 20px;\n  cursor: pointer;\n}\n.button-action-pickker {\n  margin-top: 20px;\n  background: #f8f8f5;\n  border: none;\n  line-height: 25px;\n  height: 25px;\n  width: 200px;\n  text-align: center;\n  padding: 0 5px;\n  box-sizing: border-box;\n  justify-content: space-between;\n  display: flex;\n  align-items: center;\n  border-radius: 5px;\n}\n.button-action-pickker img {\n  height: 5px;\n}\n.button-action-pickker div {\n  width: 100%;\n  font-size: 12px;\n}\n.dropdown-menu {\n  padding: 5px 0;\n  border-radius: 9px;\n  box-shadow: 0 3px 6px rgb(0 0 0 / 16%);\n  max-height: 100vh;\n  overflow: auto;\n}\n.dropdown-item {\n  padding: 0 15px;\n  box-sizing: border-box;\n  font-size: 12px;\n  color: #000;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 280px;\n  white-space: nowrap;\n}\n.dropdown-item:hover {\n  background: #f8f8f5;\n  color: #000;\n}\n.checkbbox {\n  box-sizing: border-box;\n  width: 18px;\n  height: 18px;\n  border-radius: 2px;\n  background: #f8f8f5;\n  position: relative;\n}\ninput[type=\"checkbox\"]:checked + .checkbbox {\n  background: #ffe000;\n}\n.multiselect-field,\n.field-dropdown-container {\n  display: grid;\n  justify-items: center;\n}\n.selected-background-color {\n  margin: auto;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  height: 30px;\n  border-radius: 6px;\n  width: 50px;\n  background: #f8f8f5;\n}\n@media screen and (max-width: 990px) {\n  .dropdown-orientation {\n    order: -1;\n  }\n  .button-action-pickker {\n    margin-top: 0;\n  }\n}\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./imagePickerWidgetPanel.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./imagePickerWidgetPanel.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./imagePickerWidgetPanel.vue?vue&type=template&id=7a02f819&scoped=true&\"\nimport script from \"./imagePickerWidgetPanel.vue?vue&type=script&lang=js&\"\nexport * from \"./imagePickerWidgetPanel.vue?vue&type=script&lang=js&\"\nimport style0 from \"./imagePickerWidgetPanel.vue?vue&type=style&index=0&id=7a02f819&prod&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"7a02f819\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./imagePickerWidgetPanel.vue?vue&type=style&index=0&id=7a02f819&prod&scoped=true&lang=css&\""],"sourceRoot":""}