{"version":3,"sources":["webpack:///./src/views/tenants/LoadImage.vue","webpack:///src/views/tenants/LoadImage.vue","webpack:///./src/views/tenants/LoadImage.vue?f61c","webpack:///./src/views/tenants/LoadImage.vue?512b"],"names":["render","_vm","this","_c","_self","ref","attrs","stageSize","on","handleStageMouseDown","background","_l","poloygons","item","key","id","_v","staticRenderFns","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACA,EAAG,UAAU,CAACE,IAAI,QAAQC,MAAM,CAAC,OAASL,EAAIM,WAAWC,GAAG,CAAC,MAAQP,EAAIQ,qBAAqB,WAAaR,EAAIQ,uBAAuB,CAACN,EAAG,UAAU,CAACE,IAAI,SAAS,CAACF,EAAG,SAAS,CAACG,MAAM,CAAC,OAASL,EAAIS,cAAcT,EAAIU,GAAIV,EAAIW,WAAW,SAASC,GAAM,OAAOV,EAAG,SAAS,CAACW,IAAID,EAAKE,GAAGT,MAAM,CAAC,OAASO,SAAW,IAAI,GAAGV,EAAG,OAAO,CAACA,EAAG,OAAO,CAACA,EAAG,QAAQ,CAACA,EAAG,cAAc,CAACA,EAAG,SAAS,CAACF,EAAIe,GAAG,iBAAiBf,EAAIe,GAAG,mBAAmBb,EAAG,cAAc,IAAI,IAAI,IAAI,IAEnhBc,EAAkB,G,0wBCiCtB,wBACA,qBAEA,GACA,iBACA,gBACA,OACA,WACA,QACA,UAEA,YACA,IACA,IACA,QACA,SACA,sBACA,mBAEA,WACA,CACA,IACA,IACA,mCACA,UACA,SACA,SACA,eACA,cAEA,CACA,IACA,IACA,qCACA,UACA,SACA,SACA,aACA,cAEA,CACA,IACA,IACA,uCACA,UACA,SACA,SACA,cACA,eAGA,WACA,qBACA,aAGA,SACA,8BACA,YACA,MACA,wFACA,oBACA,UAEA,+BACA,kCACA,gCACA,SAEA,uCACA,qCACA,gCACA,sCAGA,qBACA,YACA,SACA,2BAMA,IANA,IAKA,EALA,OACA,6BACA,wCAEA,aAEA,uBACA,2BACA,OACA,SACA,SACA,aACA,eACA,eAEA,qBACA,kCACA,sDAEA,yDAEA,uBAEA,IADA,SACA,8BACA,4DACA,YACA,wCAGA,iCACA,wBAEA,sCACA,0BAEA,gBACA,yCAGA,yBAKA,IAJA,iCACA,wCACA,aACA,IACA,8BACA,wBACA,0BACA,KAGA,wCAEA,iCAEA,kCAGA,OAFA,+BACA,6BAGA,sBACA,+BACA,6BACA,6BAEA,4DAEA,uBADA,EACA,EAEA,GAEA,2BCvLkW,I,YCO9VC,EAAY,eACd,EACAlB,EACAiB,GACA,EACA,KACA,KACA,MAIa,aAAAC,E","file":"js/chunk-2d2371eb.12deabac.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('v-stage',{ref:\"stage\",attrs:{\"config\":_vm.stageSize},on:{\"click\":_vm.handleStageMouseDown,\"touchstart\":_vm.handleStageMouseDown}},[_c('v-layer',{ref:\"layer\"},[_c('v-rect',{attrs:{\"config\":_vm.background}}),_vm._l((_vm.poloygons),function(item){return _c('v-line',{key:item.id,attrs:{\"config\":item}})})],2)],1),_c('CRow',[_c('CCol',[_c('CCard',[_c('CCardHeader',[_c('strong',[_vm._v(\" LoadImage \")]),_vm._v(\" Information \")]),_c('CCardBody')],1)],1)],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <v-stage\n      ref=\"stage\"\n      :config=\"stageSize\"\n      @click=\"handleStageMouseDown\"\n      @touchstart=\"handleStageMouseDown\"\n    >\n      <v-layer ref=\"layer\">\n        <v-rect :config=\"background\" />\n        <!-- <v-image \n          :config=\"{\n            image: image,\n          }\"\n        /> -->\n        <v-line v-for=\"item in poloygons\" :key=\"item.id\" :config=\"item\" />\n      </v-layer>\n    </v-stage>\n\n    <CRow>\n      <CCol>\n        <CCard>\n          <CCardHeader> <strong> LoadImage </strong> Information </CCardHeader>\n          <CCardBody> </CCardBody>\n        </CCard>\n      </CCol>\n    </CRow>\n  </div>\n</template>\n\n<script>\n//https://codesandbox.io/s/elastic-feather-fvwp8?file=/src/App.vue:544-612\n\nimport Konva from \"konva\";\n\nconst width = window.innerWidth;\nconst height = window.innerHeight;\n\nexport default {\n  name: \"LoadImage\",\n  data: () => {\n    return {\n      stageSize: {\n        width: width,\n        height: height,\n      },\n      background: {\n        x: 0,\n        y: 0,\n        width: 0,\n        height: 0,\n        fillPatternImage: null,\n        name: \"background\",\n      },\n      poloygons: [\n        {\n          x: 0,\n          y: 0,\n          points: [23, 20, 23, 160, 70, 160, 70, 20],\n          closed: true,\n          scaleX: 1,\n          scaleY: 1,\n          stroke: \"black\",\n          name: \"polo1\",\n        },\n        {\n          x: 0,\n          y: 0,\n          points: [70, 20, 70, 160, 150, 160, 150, 20],\n          closed: true,\n          scaleX: 1,\n          scaleY: 1,\n          stroke: \"red\",\n          name: \"polo2\",\n        },\n        {\n          x: 0,\n          y: 0,\n          points: [150, 20, 150, 160, 200, 160, 200, 20],\n          closed: true,\n          scaleX: 1,\n          scaleY: 1,\n          stroke: \"blue\",\n          name: \"polo3\",\n        },\n      ],\n      anchors: [],\n      selectedShapeName: \"\",\n      image: null,\n    };\n  },\n  watch: {},\n  created() {\n    const image = new Image();\n    image.src =\n      \"https://cdn.discordapp.com/attachments/832020533221523506/865645385580806144/road.jpg\";\n    image.onload = () => {\n      this.image = image;\n      // set image only when it is loaded\n      var stage = this.$refs.stage.getStage();\n      this.stageSize.height = this.image.height;\n      this.stageSize.width = this.image.width;\n      stage.draw();\n\n      this.background.height = this.stageSize.height;\n      this.background.width = this.stageSize.width;\n      this.background.fillPatternImage = image;\n      this.$refs.layer.getNode().batchDraw();\n    };\n  },\n  mounted() {},\n  computed: {},\n  methods: {\n    polyTransformer() {\n      let stage = this.$refs.stage.getNode();\n      const selectedPoly = stage.findOne(\".\" + this.selectedShapeName);\n\n      let points = selectedPoly.points();\n      let anchor;\n      for (let i = 0; i <= points.length - 2; i = i + 2) {\n        anchor = new Konva.Circle({\n          x: points[i],\n          y: points[i + 1],\n          radius: 5,\n          fill: \"black\",\n          stroke: \"black\",\n          draggable: true,\n        });\n        this.anchors.push(anchor);\n        this.$refs.layer.getNode().add(anchor);\n        anchor.on(\"dragmove\", () => this.updatePoly(selectedPoly));\n      }\n      selectedPoly.on(\"dragmove\", () => this.updateAnchors());\n    },\n    updatePoly(poly) {\n      let points = [];\n      for (let i = 0; i < this.anchors.length; i++) {\n        points = [...points, this.anchors[i].x(), this.anchors[i].y()];\n        poly.points(points);\n        this.$refs.layer.getNode().batchDraw();\n      }\n    },\n    polyTransformerDetach() {\n      if (this.anchors.length) {\n\n        for (let i = 0; i < this.anchors.length; i++) {\n          this.anchors[i].destroy();\n        }\n        this.anchors = [];\n        this.$refs.layer.getNode().batchDraw();\n      }\n    },\n    updateAnchors() {\n      let stage = this.$refs.stage.getNode();\n      const selectedPoly = stage.findOne(\".\" + this.selectedShapeName);\n      let points = selectedPoly.points();\n      let j = 0;\n      for (let i = 0; i < this.anchors.length; i++) {\n        this.anchors[i].x(points[j]);\n        this.anchors[i].y(points[j + 1]);\n        j = j + 2;\n      }\n\n      this.$refs.layer.getNode().batchDraw();\n    },\n    handleStageMouseDown(e) {\n      // clicked on stage - clear selection\n      if (e.target === e.target.getStage()) {\n        this.selectedShapeName = \"\";\n        this.polyTransformerDetach();\n        return;\n      }\n      const name = e.target.name();\n      if (this.selectedShapeName !== name) {\n        if (this.selectedShapeName !== \"\") {\n          this.polyTransformerDetach();\n        }\n        const rect = this.poloygons.find((r) => r.name === name);\n        if (rect) {\n          this.selectedShapeName = name;\n        } else {\n          this.selectedShapeName = \"\";\n        }\n        this.polyTransformer();\n      }\n    },\n  },\n};\n</script>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadImage.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadImage.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadImage.vue?vue&type=template&id=137879b3&\"\nimport script from \"./LoadImage.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadImage.vue?vue&type=script&lang=js&\"\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  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}