{"version":3,"sources":["webpack:///./src/child/avplan/views/d3dragPanel/toolBar.vue?e648","webpack:///src/child/avplan/views/d3dragPanel/toolBar.vue","webpack:///./src/child/avplan/views/d3dragPanel/toolBar.vue?f51f","webpack:///./src/child/avplan/views/d3dragPanel/toolBar.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticRenderFns","name","props","toolHeight","default","type","data","Margin","left","right","top","bottom","Rectangle","height","width","nodes","icon","disabled","mounted","initToolBar","methods","g","attr","text","defs","svg","append","arrowMarker","arrow_path","lineGenerator","d3","pathString","drag","on","toDraged","draged","clone","call","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,MAAM,CAAC,GAAK,SAAS,QAAU,sBACzJC,EAAkB,G,wBCWP,GACbC,KAAMA,UACNC,MAAOA,CACLC,WAAYA,CACVC,QAASA,OACTC,KAAMA,SAGVC,KARF,WASI,MAAO,CACLC,OAAQA,CACNC,KAAMA,GACNC,MAAOA,GACPC,IAAKA,GACLC,OAAQA,IAEVC,UAAWA,CACTC,OAAQA,GACRC,MAAOA,IAETC,MAAOA,CACb,CAAQd,KAARA,OAAQe,KAARA,GAAQC,UAARA,GACA,CAAQhB,KAARA,OAAQe,KAARA,GAAQC,UAARA,GACA,CAAQhB,KAARA,OAAQe,KAARA,GAAQC,UAARA,GACA,CAAQhB,KAARA,MAAQe,KAARA,GAAQC,UAARA,MAIEC,QA5BF,WA6BIxB,KAAKyB,eAEPC,QAASA,CACPD,YADJ,WAEM,IAAN,yBACA,gBAEME,EAAEA,OAAOA,QACfC,KAAA,cACAA,KAAA,gCACAA,KAAA,8BACAA,KAAA,kBACAA,KAAA,YALA,oBAKA,iBALA,aAKA,gBALA,MAMMD,EAAEA,OAAOA,QACfC,KAAA,6CACAA,KAAA,+CACAA,KAAA,yBACAA,KAAA,kBACAA,KAAA,uBACAC,KAAA,MAGMF,EAAEA,OAAOA,UACfC,KAAA,4BACAA,KAAA,8CACAA,KAAA,qEACAA,KAAA,gBACMD,EAAEA,OAAOA,QACfC,KAAA,6CACAA,KAAA,sEACAA,KAAA,yBACAA,KAAA,kBACAA,KAAA,eACAA,KAAA,uBACAC,KAAA,KACMF,EAAEA,OAAOA,QACfC,KAAA,6CACAA,KAAA,sEACAA,KAAA,yBACAA,KAAA,kBACAA,KAAA,uBACAC,KAAA,MAGMF,EAAEA,OAAOA,UACfC,KAAA,4BACAA,KAAA,8CACAA,KAAA,uEACAA,KAAA,kBACMD,EAAEA,OAAOA,QACfC,KAAA,6CACAA,KAAA,uEACAA,KAAA,yBACAA,KAAA,kBACAA,KAAA,eACAA,KAAA,uBACAC,KAAA,KACMF,EAAEA,OAAOA,QACfC,KAAA,6CACAA,KAAA,uEACAA,KAAA,yBACAA,KAAA,kBACAA,KAAA,uBACAC,KAAA,MAMM,IAAIC,EAAOC,EAAIC,OAAO,QAElBC,EAAcH,EAAKE,OAAO,UACpCJ,KAAA,cACAA,KAAA,6BACAA,KAAA,iBACAA,KAAA,kBACAA,KAAA,mBACAA,KAAA,UACAA,KAAA,UACAA,KAAA,iBAEUM,EAAa,2BACjBD,EAAYA,OAAOA,QACzBL,KAAA,IAAAM,GACAN,KAAA,eACM,IAAIhB,EAAO,CAAC,CAACZ,KAAKa,OAAOC,KAAwB,EAAlBd,KAAKa,OAAOG,IAAUhB,KAAKkB,UAAUC,OAAgC,IAAvBnB,KAAKkB,UAAUE,OAClG,0GACUe,EAAgBC,EAAA,UAChBC,EAAaF,EAAcvB,GAG/Be,EAAEA,OAAOA,QACfC,KAAA,IAAAS,GACAT,KAAA,sBACAA,KAAA,kBACAA,KAAA,eACAA,KAAA,+BACAA,KAAA,4BAEMD,EAAEA,OAAOA,QACfC,KAAA,6CACAA,KAAA,uEACAA,KAAA,yBACAA,KAAA,kBACAA,KAAA,uBACAC,KAAA,MACM,IAAN,KACUS,EAAOF,EAAA,UACjBG,GAAA,QAAAC,GACAD,GAAA,OAAAE,GACAF,GAAA,sBAEM,SAASC,IACPE,EAAQA,YAAUA,MAC1BA,OAAA,GAEM,SAASD,IACPC,EACRd,KAAA,IAAAQ,cACAR,KAAA,IAAAQ,cAGMT,EAAEA,UAAUA,QAClBgB,KAAAL,MCpK8X,I,YCO1XM,EAAY,eACd,EACA9C,EACAQ,GACA,EACA,KACA,WACA,MAIa,aAAAsC,E","file":"js/chunk-2d0e64b5.9e542aca.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',[_c('svg',{attrs:{\"id\":\"toolId\",\"viewBox\":\"0,0,230,480\"}})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <div>\r\n      <svg id=\"toolId\" viewBox=\"0,0,230,480\">\r\n      </svg>\r\n    </div>\r\n\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport * as d3 from 'd3'\r\nexport default {\r\n  name: 'toolBar',\r\n  props: {\r\n    toolHeight: {\r\n      default: '85vh',\r\n      type: String\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      Margin: {\r\n        left: 20,\r\n        right: 20,\r\n        top: 20,\r\n        bottom: 20\r\n      },\r\n      Rectangle: {\r\n        height: 20,\r\n        width: 30\r\n      },\r\n      nodes: [\r\n        { name: '开始节点', icon: '', disabled: false },\r\n        { name: '结束节点', icon: '', disabled: false },\r\n        { name: '普通节点', icon: '', disabled: false },\r\n        { name: '连接线', icon: '', disabled: false }\r\n      ]\r\n    }\r\n  },\r\n  mounted() {\r\n    this.initToolBar()\r\n  },\r\n  methods: {\r\n    initToolBar() {\r\n      const svg = d3.select('#toolId')\r\n      const g = svg.append('g')\r\n      //添加节点\r\n      g.append('rect')\r\n        .attr('id', 'start')\r\n        .attr('height', this.Rectangle.height)\r\n        .attr('width', this.Rectangle.width)\r\n        .attr('fill', '#1BA1E2')\r\n        .attr('transform', `translate(${this.Margin.left}, ${this.Margin.top})`)\r\n      g.append('text')\r\n        .attr('x', this.Rectangle.width + (this.Margin.left * 2))\r\n        .attr('y', this.Margin.top + (this.Rectangle.height * 0.75))\r\n        .attr('font-family', 'Verdana')\r\n        .attr('font-size', '16')\r\n        .attr('text-anchor', 'start')\r\n        .text('节点')\r\n\r\n      //添加开始节点\r\n      g.append('circle')\r\n        .attr('r', this.Rectangle.width / 2)\r\n        .attr('cx', this.Margin.left + this.Rectangle.width / 2)\r\n        .attr('cy', this.Margin.top * 2 + this.Rectangle.height + this.Rectangle.width / 2)\r\n        .attr('fill', 'green')\r\n      g.append('text')\r\n        .attr('x', this.Margin.left + this.Rectangle.width / 4)\r\n        .attr('y', this.Margin.top * 2 + this.Rectangle.height + this.Rectangle.width * 0.65)\r\n        .attr('font-family', 'Verdana')\r\n        .attr('font-size', '16')\r\n        .attr('fill', '#fff')\r\n        .attr('text-anchor', 'start')\r\n        .text('始')\r\n      g.append('text')\r\n        .attr('x', this.Margin.left * 2 + this.Rectangle.width)\r\n        .attr('y', this.Margin.top * 2 + this.Rectangle.height + this.Rectangle.width * 0.65)\r\n        .attr('font-family', 'Verdana')\r\n        .attr('font-size', '16')\r\n        .attr('text-anchor', 'start')\r\n        .text('开始')\r\n\r\n      //添加结束节点\r\n      g.append('circle')\r\n        .attr('r', this.Rectangle.width / 2)\r\n        .attr('cx', this.Margin.left + this.Rectangle.width / 2)\r\n        .attr('cy', this.Margin.top * 3 + this.Rectangle.height + this.Rectangle.width * 1.5)\r\n        .attr('fill', '#D80073')\r\n      g.append('text')\r\n        .attr('x', this.Margin.left + this.Rectangle.width / 4)\r\n        .attr('y', this.Margin.top * 3 + this.Rectangle.height + this.Rectangle.width * 1.65)\r\n        .attr('font-family', 'Verdana')\r\n        .attr('font-size', '16')\r\n        .attr('fill', '#fff')\r\n        .attr('text-anchor', 'start')\r\n        .text('止')\r\n      g.append('text')\r\n        .attr('x', this.Margin.left * 2 + this.Rectangle.width)\r\n        .attr('y', this.Margin.top * 3 + this.Rectangle.height + this.Rectangle.width * 1.65)\r\n        .attr('font-family', 'Verdana')\r\n        .attr('font-size', '16')\r\n        .attr('text-anchor', 'start')\r\n        .text('结束')\r\n\r\n\r\n      //添加线段\r\n\r\n      //添加defs标签\r\n      var defs = svg.append('defs')\r\n      //添加marker标签及其属性\r\n      var arrowMarker = defs.append('marker')\r\n        .attr('id', 'arrow')\r\n        .attr('markerUnits', 'strokeWidth')\r\n        .attr('markerWidth', 8)\r\n        .attr('markerHeight', 8)\r\n        .attr('viewBox', '0 0 8')\r\n        .attr('refX', 4)\r\n        .attr('refY', 4)\r\n        .attr('orient', 'auto')\r\n      //绘制直线箭头\r\n      var arrow_path = 'M2,2 L6,4 L2,6 L4,4 L2,2'\r\n      arrowMarker.append('path')\r\n        .attr('d', arrow_path)\r\n        .attr('fill', '#000')\r\n      var data = [[this.Margin.left, this.Margin.top * 4 + this.Rectangle.height + this.Rectangle.width * 2.5],\r\n        [this.Margin.left + this.Rectangle.width, this.Margin.top * 4 + this.Rectangle.height + this.Rectangle.width * 2.5]]\r\n      var lineGenerator = d3.line()\r\n      var pathString = lineGenerator(data)\r\n      // d3.select('path').attr('d', pathString)\r\n\r\n      g.append('path')\r\n        .attr('d', pathString)\r\n        .attr('stroke', 'steelblue')\r\n        .attr('stroke-width', 3)\r\n        .attr('fill', 'none')\r\n        .attr('marker-start', 'url(#circle)')\r\n        .attr('marker-end', 'url(#arrow)')\r\n\r\n      g.append('text')\r\n        .attr('x', this.Margin.left * 2 + this.Rectangle.width)\r\n        .attr('y', this.Margin.top * 4 + this.Rectangle.height + this.Rectangle.width * 2.75)\r\n        .attr('font-family', 'Verdana')\r\n        .attr('font-size', '16')\r\n        .attr('text-anchor', 'start')\r\n        .text('连线')\r\n      let clone = ''\r\n      var drag = d3.drag()\r\n        .on('start', toDraged) // 拖动开始，触发一次\r\n        .on('drag', draged) // 拖动中，触发多次\r\n        .on('end', () => {}) // 拖动结束，触发一次\r\n\r\n      function toDraged() {\r\n        clone = d3.select(this)\r\n          .clone(true)\r\n      }\r\n      function draged() {\r\n        clone\r\n          .attr('x', d3.event.x)\r\n          .attr('y', d3.event.y)\r\n      }\r\n\r\n      g.selectAll('rect')\r\n        .call(drag)\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n\r\n</style>\r\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!./toolBar.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!./toolBar.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./toolBar.vue?vue&type=template&id=0d78dd56&scoped=true&\"\nimport script from \"./toolBar.vue?vue&type=script&lang=js&\"\nexport * from \"./toolBar.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  \"0d78dd56\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}