{"version":3,"sources":["webpack:///./src/components/popups/canvasResizePopup.vue?aa2a","webpack:///./src/components/popups/canvasResizePopup.vue","webpack:///src/components/popups/canvasResizePopup.vue","webpack:///./src/components/popups/canvasResizePopup.vue?acf7","webpack:///./src/components/popups/canvasResizePopup.vue?93fa","webpack:///./src/assets/img/lock.svg","webpack:///./src/assets/img/canvas_sizes.svg","webpack:///./src/assets/img/ulock.svg"],"names":["render","_vm","this","_c","_self","staticClass","on","onHideModal","$event","stopPropagation","_m","_v","directives","name","rawName","value","canvasHeight","expression","modifiers","attrs","domProps","target","composing","_n","onInput","$forceUpdate","canvasWidth","require","keepProportions","style","canvasSizesReview","onRestoreDefualt","ref","popupsVisible","onResize","errorMsg","_s","staticRenderFns","data","oldCanvasWidth","oldCanvasHeight","proportion","computed","mapGetters","isAnonymous","canvas","maxSizes","KF","customHeight","Math","abs","customWidth","width","height","mounted","init","methods","round","getZoom","_historySaveAction","$store","commit","$emit","showError","msg","param","ceil","beforeUpdate","watch","component","module","exports"],"mappings":"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","file":"js/canvaResizePopup.8bce1006.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!./canvasResizePopup.vue?vue&type=style&index=0&id=583ac3c5&prod&scoped=true&lang=css&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"popup-wraper\",on:{\"click\":_vm.onHideModal}},[_c('div',{staticClass:\"popup-overlay\",on:{\"click\":function($event){$event.stopPropagation();}}},[_c('div',{staticClass:\"popup-scroll\"},[_vm._m(0),_c('div',{staticClass:\"popup-container\"},[_c('div',{staticClass:\"inputs-container\"},[_c('label',{staticClass:\"input-label\"},[_c('span',[_vm._v(\"height\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.canvasHeight),expression:\"canvasHeight\",modifiers:{\"number\":true}}],staticClass:\"input\",attrs:{\"type\":\"number\"},domProps:{\"value\":(_vm.canvasHeight)},on:{\"input\":[function($event){if($event.target.composing)return;_vm.canvasHeight=_vm._n($event.target.value)},function($event){return _vm.onInput('height', $event)}],\"blur\":function($event){return _vm.$forceUpdate()}}})]),_c('div',{staticClass:\"px\"},[_vm._v(\"px\")]),_c('label',{staticClass:\"input-label\"},[_c('span',[_vm._v(\"width\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.canvasWidth),expression:\"canvasWidth\",modifiers:{\"number\":true}}],staticClass:\"input\",attrs:{\"type\":\"number\"},domProps:{\"value\":(_vm.canvasWidth)},on:{\"input\":[function($event){if($event.target.composing)return;_vm.canvasWidth=_vm._n($event.target.value)},function($event){return _vm.onInput('width', $event)}],\"blur\":function($event){return _vm.$forceUpdate()}}})])]),_c('img',{staticClass:\"canvas_sizes\",attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/canvas_sizes.svg\")},on:{\"click\":function($event){_vm.keepProportions = !_vm.keepProportions}}}),_c('div',{staticClass:\"lock-container\"},[_c('img',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.keepProportions),expression:\"!keepProportions\"}],staticClass:\"canvas_sizes\",attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/ulock.svg\")},on:{\"click\":function($event){_vm.keepProportions = !_vm.keepProportions}}}),_c('img',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.keepProportions),expression:\"keepProportions\"}],staticClass:\"canvas_sizes\",attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/lock.svg\")},on:{\"click\":function($event){_vm.keepProportions = !_vm.keepProportions}}})]),_c('div',{staticClass:\"canvas-review-container\"},[_c('div',{staticClass:\"canvas-review\",style:(_vm.canvasSizesReview)})]),_c('div',{staticClass:\"restore-default\",on:{\"click\":_vm.onRestoreDefualt}},[_vm._v(\" restore default \")])]),_c('button',{ref:\"addBtn\",staticClass:\"popup-btn\",attrs:{\"data-is-avalable\":_vm.popupsVisible,\"id\":\"apply-btn\"},on:{\"click\":_vm.onResize}},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.errorMsg),expression:\"errorMsg\"}],staticClass:\"popup-error\"},[_vm._v(_vm._s(_vm.errorMsg))]),_vm._v(\" apply \")]),_c('div',{staticClass:\"popup-close\",on:{\"click\":_vm.onHideModal}},[_vm._v(\"×\")])])])])\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"popup-overlay-title\"},[_c('img',{attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/canvas_resize.svg\")}}),_c('span',{staticClass:\"popup-overlay-title-span\"},[_vm._v(\"resize canvas\")])])\n}]\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"popup-wraper\" @click=\"onHideModal\">\n    <div class=\"popup-overlay\" @click.stop>\n      <div class=\"popup-scroll\">\n        <div class=\"popup-overlay-title\">\n          <img alt=\"img\" src=\"@/assets/img/canvas_resize.svg\" />\n          <span class=\"popup-overlay-title-span\">resize canvas</span>\n        </div>\n        <div class=\"popup-container\">\n          <div class=\"inputs-container\">\n            <label class=\"input-label\">\n              <span>height</span>\n              <input\n                type=\"number\"\n                v-model.number=\"canvasHeight\"\n                @input=\"onInput('height', $event)\"\n                class=\"input\"\n              />\n            </label>\n            <div class=\"px\">px</div>\n            <label class=\"input-label\">\n              <span>width</span>\n              <input\n                type=\"number\"\n                v-model.number=\"canvasWidth\"\n                @input=\"onInput('width', $event)\"\n                class=\"input\"\n              />\n            </label>\n          </div>\n          <img\n            alt=\"img\"\n            class=\"canvas_sizes\"\n            @click=\"keepProportions = !keepProportions\"\n            src=\"@/assets/img/canvas_sizes.svg\"\n          />\n          <div class=\"lock-container\">\n            <img\n              alt=\"img\"\n              class=\"canvas_sizes\"\n              v-show=\"!keepProportions\"\n              @click=\"keepProportions = !keepProportions\"\n              src=\"@/assets/img/ulock.svg\"\n            />\n            <img\n              alt=\"img\"\n              class=\"canvas_sizes\"\n              v-show=\"keepProportions\"\n              @click=\"keepProportions = !keepProportions\"\n              src=\"@/assets/img/lock.svg\"\n            />\n          </div>\n\n          <div class=\"canvas-review-container\">\n            <div class=\"canvas-review\" :style=\"canvasSizesReview\"></div>\n          </div>\n          <div class=\"restore-default\" @click=\"onRestoreDefualt\">\n            restore default\n          </div>\n        </div>\n        <button\n          class=\"popup-btn\"\n          :data-is-avalable=\"popupsVisible\"\n          id=\"apply-btn\"\n          ref=\"addBtn\"\n          @click=\"onResize\"\n        >\n          <div v-show=\"errorMsg\" class=\"popup-error\">{{ errorMsg }}</div>\n          apply\n        </button>\n        <div class=\"popup-close\" @click=\"onHideModal\">&times;</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { mapGetters } from \"vuex\";\nimport \"@/assets/css/popups.css\";\n\nexport default {\n  name: \"canvasResizePopup\",\n  data() {\n    return {\n      errorMsg: \"\",\n      canvasHeight: 0,\n      canvasWidth: 0,\n      keepProportions: true,\n      oldCanvasWidth: 0,\n      oldCanvasHeight: 0,\n      proportion: 1\n    };\n  },\n  computed: {\n    ...mapGetters({\n      isAnonymous: \"auth/isAnonymous\",\n      canvas: \"workSpace/canvas\",\n      popupsVisible: \"workSpace/popupsVisible\"\n    }),\n    canvasSizesReview() {\n      const maxSizes = 170;\n      let KF = 0;\n      const customHeight = Math.abs(this.canvasHeight);\n      const customWidth = Math.abs(this.canvasWidth);\n      if (customHeight >= customWidth) {\n        KF = maxSizes / customHeight;\n      } else {\n        KF = maxSizes / customWidth;\n      }\n      const width = KF * customWidth;\n      const height = KF * customHeight;\n      return {\n        width: `${width}px`,\n        height: `${height}px`\n      };\n    }\n  },\n  mounted() {\n    this.init();\n  },\n  methods: {\n    onRestoreDefualt() {\n      this.canvasHeight = 3508;\n      this.canvasWidth = 2480;\n    },\n    init() {\n      this.canvasHeight = Math.round(\n        this.canvas.height / this.canvas.getZoom()\n      );\n      this.canvasWidth = Math.round(this.canvas.width / this.canvas.getZoom());\n      this.oldCanvasWidth = this.canvasWidth;\n      this.oldCanvasHeight = this.canvasHeight;\n      this.proportion = this.oldCanvasHeight / this.oldCanvasWidth;\n    },\n    onResize() {\n      this.canvas._historySaveAction();\n      this.$store.commit(\"workSpace/updateCanvasSizes\", {\n        width: this.canvasWidth || 1,\n        height: this.canvasHeight || 1\n      });\n      this.onHideModal();\n    },\n    onHideModal() {\n      this.$emit(\"hide-modal\");\n    },\n    showError(msg = \"\") {\n      this.errorMsg = msg;\n    },\n    onInput(param) {\n      if (param === \"height\" && this.keepProportions) {\n        this.canvasWidth = Math.ceil(this.canvasHeight / this.proportion);\n      } else if (param === \"width\" && this.keepProportions) {\n        this.canvasHeight = Math.ceil(this.canvasWidth * this.proportion);\n      }\n    }\n  },\n  beforeUpdate() {\n    this.oldCanvasWidth = !this.canvasWidth ? 1 : this.canvasWidth;\n    this.oldCanvasHeight = !this.canvasHeight ? 1 : this.canvasHeight;\n  },\n  watch: {\n    keepProportions() {\n      this.proportion = this.oldCanvasHeight / this.oldCanvasWidth;\n    }\n  }\n};\n</script>\n\n<style scoped>\n.inputs-container {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  width: 208px;\n}\n.input-label {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.input-label span {\n  font-size: 10px;\n  line-height: 14px;\n}\n.canvas_sizes {\n  position: relative;\n  top: -1px;\n  cursor: pointer;\n}\n.px {\n  margin-bottom: 5px;\n  font-size: 10px;\n}\n.input {\n  background: #f2f2f2;\n  box-sizing: border-box;\n  text-align: center;\n  border: none;\n  height: 25px;\n  width: 66px;\n  line-height: 25px;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 0 5px;\n  border-radius: 7px;\n}\n.canvas-review-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 170px;\n  min-height: 170px;\n  margin: 15px 0 8px;\n}\n.canvas-review {\n  box-sizing: border-box;\n  border: 1px solid #bcbccb;\n  box-shadow: 1px 5px 7px #d8d8d8;\n}\n.restore-default {\n  font-size: 10px;\n  font-weight: 600;\n  cursor: pointer;\n}\n.popup-container {\n  position: relative;\n}\n.lock-container {\n  background: #fff;\n  position: absolute;\n  top: 37px;\n}\n.lock-container img {\n  width: 17px;\n  height: 17px;\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!./canvasResizePopup.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!./canvasResizePopup.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./canvasResizePopup.vue?vue&type=template&id=583ac3c5&scoped=true&\"\nimport script from \"./canvasResizePopup.vue?vue&type=script&lang=js&\"\nexport * from \"./canvasResizePopup.vue?vue&type=script&lang=js&\"\nimport style0 from \"./canvasResizePopup.vue?vue&type=style&index=0&id=583ac3c5&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  \"583ac3c5\",\n  null\n  \n)\n\nexport default component.exports","module.exports = __webpack_public_path__ + \"img/lock.f302c288.svg\";","module.exports = __webpack_public_path__ + \"img/canvas_sizes.450a4050.svg\";","module.exports = __webpack_public_path__ + \"img/ulock.de30ae83.svg\";"],"sourceRoot":""}