{"version":3,"sources":["webpack:///./src/components/contextMenu/richImagePanel.vue?ff81","webpack:///./src/components/contextMenu/richImagePanel.vue","webpack:///src/components/contextMenu/richImagePanel.vue","webpack:///./src/components/contextMenu/richImagePanel.vue?ff2c","webpack:///./src/components/contextMenu/richImagePanel.vue?f20d"],"names":["render","_vm","this","_c","_self","staticClass","style","width","device","colorsWraperWidth","_l","svgStroke","color","idx","key","attrs","backgroundColor","obj","hex","border","getColorBorder","slot","on","$event","updateStoke","model","value","callback","$$v","$set","expression","svgColors","updateColor","_v","staticRenderFns","name","components","ChromePicker","data","computed","mapGetters","canvas","activeCanvasObject","svgColorsObj","svgStrokeObj","Math","ceil","length","created","$store","dispatch","methods","historySaveAction","timeoutId","clearTimeout","setTimeout","fire","colorsList","forEach","el","set","renderAll","setColor","watch","newObj","component"],"mappings":"kHAAA,W,oECAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,2BAA2B,CAACF,EAAG,MAAM,CAACE,YAAY,wBAAwB,CAACF,EAAG,MAAM,CAACE,YAAY,gBAAgBC,MAAO,CAAEC,MAAsB,WAAfN,EAAIO,OAAsBP,EAAIQ,kBAAoB,OAAS,CAACR,EAAIS,GAAIT,EAAIU,WAAW,SAASC,EAAMC,GAAK,OAAOV,EAAG,MAAM,CAACW,IAAID,EAAM,IAAIR,YAAY,cAAc,CAACF,EAAG,cAAc,CAACY,MAAM,CAAC,QAAU,UAAU,CAACZ,EAAG,OAAO,CAACE,YAAY,oBAAoB,CAACF,EAAG,MAAM,CAACE,YAAY,sBAAsBC,MAAO,CACxfU,gBAAiBJ,EAAMK,IAAIC,IAC3BC,OAAQlB,EAAImB,eAAeR,EAAMK,UAC5Bd,EAAG,mBAAmB,CAACY,MAAM,CAAC,KAAO,YAAYM,KAAK,YAAY,CAAClB,EAAG,gBAAgB,CAACE,YAAY,iBAAiBiB,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOtB,EAAIuB,YAAYZ,KAASa,MAAM,CAACC,MAAOd,EAAMK,IAAKU,SAAS,SAAUC,GAAM3B,EAAI4B,KAAKjB,EAAO,MAAOgB,IAAME,WAAW,gBAAgB,IAAI,IAAI,MAAK7B,EAAIS,GAAIT,EAAI8B,WAAW,SAASnB,EAAMC,GAAK,OAAOV,EAAG,MAAM,CAACW,IAAID,EAAIR,YAAY,cAAc,CAACF,EAAG,cAAc,CAACY,MAAM,CAAC,QAAU,UAAU,CAACZ,EAAG,OAAO,CAACE,YAAY,oBAAoB,CAACF,EAAG,MAAM,CAACE,YAAY,sBAAsBC,MAAO,CACzhBU,gBAAiBJ,EAAMK,IAAIC,IAC3BC,OAAQlB,EAAImB,eAAeR,EAAMK,UAC5Bd,EAAG,mBAAmB,CAACY,MAAM,CAAC,KAAO,YAAYM,KAAK,YAAY,CAAClB,EAAG,gBAAgB,CAACE,YAAY,iBAAiBiB,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOtB,EAAI+B,YAAYpB,KAASa,MAAM,CAACC,MAAOd,EAAMK,IAAKU,SAAS,SAAUC,GAAM3B,EAAI4B,KAAKjB,EAAO,MAAOgB,IAAME,WAAW,gBAAgB,IAAI,IAAI,OAAM,GAAG3B,EAAG,MAAM,CAACE,YAAY,cAAc,CAACJ,EAAIgC,GAAG,iBAEzWC,EAAkB,G,oCCuDP,G,UAAA,CACfC,KAAA,qBACAC,WAAA,CAAAC,qBACAC,OACA,OACAlB,wBAGAmB,SAAA,IACAC,eAAA,CACAC,OAAA,mBACAjC,OAAA,mBACAkC,mBAAA,+BACAX,UAAA,wBACAY,aAAA,2BACAC,aAAA,2BACAjC,UAAA,0BAEAF,oBACA,QAAAsB,UACA,OACA,GADAc,KAAAC,MAAA,KAAAf,UAAAgB,OAAA,KAAApC,UAAAoC,QAAA,UAIAC,UACA,KAAAC,OAAAC,SAAA,6BAEAC,QAAA,CACAC,oBACA,KAAAC,WAAAC,aAAA,KAAAD,WACA,KAAAA,UAAAE,WAAA,KACA,KAAAd,OAAAe,KAAA,mBACA,MAEAhC,YAAAZ,GACA,MAAA6C,EAAA,KAAAb,aAAAhC,EAAAM,KACAuC,EAAAC,QAAAC,KAAAC,IAAA,SAAAhD,EAAAK,IAAAC,MACA,KAAAuB,OAAAoB,YACA,KAAAT,qBAEApB,YAAApB,GACA,MAAA6C,EAAA,KAAAd,aAAA/B,EAAAM,KACAuC,EAAAC,QAAAC,KAAAG,SAAAlD,EAAAK,IAAAC,MACA,KAAAuB,OAAAoB,YACA,KAAAT,sBAGAW,MAAA,CACArB,mBAAAsB,GACAA,GAAA,KAAAf,OAAAC,SAAA,gCChHuW,I,wBCQnWe,EAAY,eACd,EACAjE,EACAkC,GACA,EACA,KACA,WACA,MAIa,aAAA+B,E","file":"js/richImagePanel.2b4273ad.js","sourcesContent":["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!./richImagePanel.vue?vue&type=style&index=0&id=89c5fb12&prod&scoped=true&lang=css&\"","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:\"colors-wraper\",style:({ width: _vm.device === 'mobile' ? _vm.colorsWraperWidth : null })},[_vm._l((_vm.svgStroke),function(color,idx){return _c('div',{key:idx + 100,staticClass:\"color-wrap\"},[_c('el-dropdown',{attrs:{\"trigger\":\"click\"}},[_c('span',{staticClass:\"el-dropdown-link\"},[_c('div',{staticClass:\"color-picker-wraper\",style:({\n                backgroundColor: color.obj.hex,\n                border: _vm.getColorBorder(color.obj)\n              })})]),_c('el-dropdown-menu',{attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('chrome-picker',{staticClass:\"picker-element\",on:{\"input\":function($event){return _vm.updateStoke(color)}},model:{value:(color.obj),callback:function ($$v) {_vm.$set(color, \"obj\", $$v)},expression:\"color.obj\"}})],1)],1)],1)}),_vm._l((_vm.svgColors),function(color,idx){return _c('div',{key:idx,staticClass:\"color-wrap\"},[_c('el-dropdown',{attrs:{\"trigger\":\"click\"}},[_c('span',{staticClass:\"el-dropdown-link\"},[_c('div',{staticClass:\"color-picker-wraper\",style:({\n                backgroundColor: color.obj.hex,\n                border: _vm.getColorBorder(color.obj)\n              })})]),_c('el-dropdown-menu',{attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('chrome-picker',{staticClass:\"picker-element\",on:{\"input\":function($event){return _vm.updateColor(color)}},model:{value:(color.obj),callback:function ($$v) {_vm.$set(color, \"obj\", $$v)},expression:\"color.obj\"}})],1)],1)],1)})],2),_c('div',{staticClass:\"field-name\"},[_vm._v(\"colors\")])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"context-panel-container\">\n    <div class=\"context-panel-scroll\">\n      <div\n        class=\"colors-wraper\"\n        :style=\"{ width: device === 'mobile' ? colorsWraperWidth : null }\"\n      >\n        <div\n          class=\"color-wrap\"\n          v-for=\"(color, idx) of svgStroke\"\n          :key=\"idx + 100\"\n        >\n          <el-dropdown trigger=\"click\">\n            <span class=\"el-dropdown-link\">\n              <div\n                class=\"color-picker-wraper\"\n                :style=\"{\n                  backgroundColor: color.obj.hex,\n                  border: getColorBorder(color.obj)\n                }\"\n              ></div>\n            </span>\n            <el-dropdown-menu slot=\"dropdown\">\n              <chrome-picker\n                class=\"picker-element\"\n                @input=\"updateStoke(color)\"\n                v-model=\"color.obj\"\n              />\n            </el-dropdown-menu>\n          </el-dropdown>\n        </div>\n        <div class=\"color-wrap\" v-for=\"(color, idx) of svgColors\" :key=\"idx\">\n          <el-dropdown trigger=\"click\">\n            <span class=\"el-dropdown-link\">\n              <div\n                class=\"color-picker-wraper\"\n                :style=\"{\n                  backgroundColor: color.obj.hex,\n                  border: getColorBorder(color.obj)\n                }\"\n              ></div>\n            </span>\n            <el-dropdown-menu slot=\"dropdown\">\n              <chrome-picker\n                class=\"picker-element\"\n                @input=\"updateColor(color)\"\n                v-model=\"color.obj\"\n              />\n            </el-dropdown-menu>\n          </el-dropdown>\n        </div>\n      </div>\n      <div class=\"field-name\">colors</div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport ChromePicker from \"vue-color/src/components/Chrome\";\nimport { getColorBorder } from \"@/helpers/hex\";\nimport { mapGetters } from \"vuex\";\nimport \"@/assets/css/contextMenu.css\";\n\nexport default {\n  name: \"PILRichImagesPanel\",\n  components: { ChromePicker },\n  data() {\n    return {\n      getColorBorder\n    };\n  },\n  computed: {\n    ...mapGetters({\n      canvas: \"workSpace/canvas\",\n      device: \"workSpace/device\",\n      activeCanvasObject: \"workSpace/activeCanvasObject\",\n      svgColors: \"colorPicker/svgColors\",\n      svgColorsObj: \"colorPicker/svgColorsObj\",\n      svgStrokeObj: \"colorPicker/svgStrokeObj\",\n      svgStroke: \"colorPicker/svgStroke\"\n    }),\n    colorsWraperWidth() {\n      if (!this.svgColors) return;\n      return `${Math.ceil((this.svgColors.length + this.svgStroke.length) / 2) *\n        38}px`;\n    }\n  },\n  created() {\n    this.$store.dispatch(\"colorPicker/defineColors\");\n  },\n  methods: {\n    historySaveAction() {\n      this.timeoutId && clearTimeout(this.timeoutId);\n      this.timeoutId = setTimeout(() => {\n        this.canvas.fire(\"canvas:changes\");\n      }, 1000);\n    },\n    updateStoke(color) {\n      const colorsList = this.svgStrokeObj[color.hex];\n      colorsList.forEach(el => el.set(\"stroke\", color.obj.hex));\n      this.canvas.renderAll();\n      this.historySaveAction();\n    },\n    updateColor(color) {\n      const colorsList = this.svgColorsObj[color.hex];\n      colorsList.forEach(el => el.setColor(color.obj.hex));\n      this.canvas.renderAll();\n      this.historySaveAction();\n    }\n  },\n  watch: {\n    activeCanvasObject(newObj) {\n      if (newObj) this.$store.dispatch(\"colorPicker/defineColors\");\n    }\n  }\n};\n</script>\n\n<style scoped>\n.delete {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  cursor: pointer;\n  position: relative;\n}\n.panel {\n  width: 95px;\n}\n.colors-wraper {\n  background: #f8f8f5;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  width: 98px;\n  border-radius: 7px;\n  padding-bottom: 15px;\n}\n.field-name {\n  width: 100%;\n}\n.el-dropdown-link {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.color-wrap {\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin: 15px 12px 0;\n}\n.span {\n  font-size: 8px;\n  margin-top: 2px;\n  color: #1d2d36;\n  text-align: center;\n}\n\n.flex {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.copy-paste {\n  width: 100%;\n  display: flex;\n}\n.copy-paste img {\n  margin: 0 auto 12px;\n  cursor: pointer;\n}\n.delete-container {\n  display: flex;\n  background: #fff;\n}\n@media screen and (max-width: 990px) {\n  .field-name {\n    display: none;\n  }\n  .panel {\n    display: flex;\n    width: fit-content;\n    max-width: calc(100vw - 50px);\n    border-radius: 7px;\n  }\n  .colors-wraper {\n    padding: 0;\n    display: flex;\n    height: 90px;\n    flex-direction: column;\n  }\n  .color-wrap {\n    margin: 7px;\n  }\n  .delete-container {\n    padding-top: 3px;\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!./richImagePanel.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!./richImagePanel.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./richImagePanel.vue?vue&type=template&id=89c5fb12&scoped=true&\"\nimport script from \"./richImagePanel.vue?vue&type=script&lang=js&\"\nexport * from \"./richImagePanel.vue?vue&type=script&lang=js&\"\nimport style0 from \"./richImagePanel.vue?vue&type=style&index=0&id=89c5fb12&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  \"89c5fb12\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}