新增绘制组件

babel.config.js

@@ -1,3 +1,6 @@
+/*
+ * @Author: yaolunmao
+ */
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'

public/InterfaceReturn.json

@@ -1,22 +1,42 @@
 [{
   "type": "AlternatorSvg",
   "title": "发电机",
-  "template": "<ellipse id=\"c1\" cx=\"50\" cy=\"50\" rx=\"35\" ry=\"35\" fill=\"none\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></ellipse><path id=\"l1\" d=\"M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 \" fill=\"none\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></path>",
+  "template": "<ellipse id=\"c1\" cx=\"50\" cy=\"50\" rx=\"35\" ry=\"35\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></ellipse><path id=\"l1\" d=\"M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 \" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></path>",
-  "props": ["svg_color"],
+  "props": ["prop_data"],
-  "default_color":"#00FF00",
+  "default_attr":{
+    "color":"#FF0000"
+  },
+  "create_type":"draggable",
   "priview_img":"/AlternatorSvg.png"
 }, {
   "type": "ArrowDownSvg",
   "title": "箭头向下",
-  "template": "<polygon  points=\"0,-8 5,0 10,-8\" :fill=\"svg_color\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
+  "template": "<polygon  points=\"0,-8 5,0 10,-8\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
-  "props": ["svg_color"],
+  "props": ["prop_data"],
-  "default_color":"#00FF00",
+  "default_attr":{
+    "color":"#FF0000"
+  },
+  "create_type":"draggable",
   "priview_img":"/ArrowDownSvg.png"
 }, {
   "type": "ArrowUpSvg",
   "title": "箭头向上",
-  "template": "<polygon  points=\"0,8 5,0 10,8\" :fill=\"svg_color\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
+  "template": "<polygon  points=\"0,8 5,0 10,8\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
-  "props": ["svg_color"],
+  "props": ["prop_data"],
-  "default_color":"#FF0000",
+  "default_attr":{
+    "color":"#FF0000"
+  },
+  "create_type":"draggable",
   "priview_img":"/ArrowUpSvg.png"
-}]
+},
+{
+  "type": "ConnLineSvg",
+  "title": "连接线",
+  "template": "<line x1=\"0\" y1=\"0\" :x2=\"(prop_data.mPoint.endX-prop_data.mPoint.startX)\" :y2=\"(prop_data.mPoint.endY-prop_data.mPoint.startY)\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\"  stroke-width=\"2\"></line>",
+  "props": ["prop_data"],
+  "default_attr":{
+    "color":"#FF0000"
+  },
+  "create_type":"click",
+  "priview_img":"/VerticalLineSvg.png"
+}]

src/components/LeftToolBar.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div class="components-layout-left">
 
@@ -5,25 +6,34 @@
     <a-collapse v-model:activeKey="activeKey"
                 accordion>
       <a-collapse-panel key="1"
-                        header="基本形状">
+                        header="拖动组件">
         <ul class="svg-nav-list">
-          <li v-for="item in svgInfoData"
+          <li v-for="item in draggableComponentList"
               :key="item">
             <div class="title">{{item.title}}</div>
             <img :title="item.title"
-                 @mousedown="Mousedown(item.type,item.title,item.default_color)"
+                 @mousedown="Mousedown(item.type,item.title,item.default_attr,item.create_type)"
                  :src="item.priview_img"
-                 draggable="true">
+                 draggable="draggable">
           </li>
         </ul>
       </a-collapse-panel>
       <a-collapse-panel key="2"
-                        header="拓扑图"
+                        header="绘制组件"
                         :disabled="false">
-        <p>{{ text }}</p>
+        <ul class="svg-nav-list">
+          <li v-for="item in clickComponentList"
+              :key="item"
+              :class="$store.state.CurrentlySelectedToolBar.CreateType==item.create_type?'toolbar-selected':''">
+            <div class="title">{{item.title}}</div>
+            <img :title="item.title"
+                 @mousedown="Mousedown(item.type,item.title,item.default_attr,item.create_type)"
+                 :src="item.priview_img">
+          </li>
+        </ul>
       </a-collapse-panel>
       <a-collapse-panel key="3"
-                        header="物联网">
+                        header="图表">
         <p>{{ text }}</p>
       </a-collapse-panel>
     </a-collapse>
@@ -35,17 +45,39 @@ export default {
   data () {
     return {
       activeKey: ['1'],//当前激活的key
-      text: `这里是预留位置.`
+      text: `这里是预留位置.`,
+      draggableComponentList: [],//拖动组件
+      clickComponentList: [],//点击类型组件
     };
   },
+  watch: {
+    'svgInfoData': function (val) {
+      this.draggableComponentList = val.filter(m => {
+        return m.create_type == 'draggable'
+      });
+      this.clickComponentList = val.filter(m => {
+        return m.create_type == 'click'
+      });
+    },
+  },
   methods: {
-    Mousedown (type, title, color) {
+    /**
-      window.CurrentlySelectedToolBar = {
+     * @description: 点击左侧工具栏触发函数
+     * @param {*} type
+     * @param {*} title
+     * @param {*} default_attr 属性默认值
+     * @param {*} create_type 组件创建方式
+     * @return {*}
+     */
+    Mousedown (type, title, default_attr, create_type) {
+      let CurrentlySelectedToolBar = {
         Type: type,//选中的工具栏svg类型
-        TypeName:title,//选中的工具栏svg类型名称
+        TypeName: title,//选中的工具栏svg类型名称
-        Title:title,//选中的工具栏svg标题
+        Title: title,//选中的工具栏svg标题
-        Color:color//选中的工具栏svg颜色
+        Color: default_attr.color,//选中的工具栏svg颜色
+        CreateType: create_type//选中工具栏的创建方式
       };
+      this.$store.setCurrentlySelectedToolBarAction(CurrentlySelectedToolBar);
     },
   }
 };
@@ -128,4 +160,7 @@ export default {
     }
   }
 }
+.toolbar-selected {
+  outline: 1px solid #0cf;
+}
 </style>

src/components/SvgComponents.vue

@@ -1,11 +1,14 @@
+<!--
+ * @Author: yaolunmao
+-->
 <template>
-  <component :is="svgtype"
+  <component :is="component_prop.type"
-             :svg_color= svg_color></component>
+             :prop_data= component_prop></component>
 </template>
 <script>
 let importComponents = {};
 export default {
-  props: ['svgInfoData','svg_color','svgtype'],
+  props: ['svgInfoData','component_prop'],
   data () {
     return {
       componentTag: ''
@@ -17,7 +20,6 @@ export default {
   },
   created () {
     this.svgInfoData.forEach(f => {
-      console.log(111);
       let componentInfo = {
         template: f.template,
         props: f.props

src/main.js

@@ -1,3 +1,6 @@
+/*
+ * @Author: yaolunmao
+ */
 import { createApp } from 'vue/dist/vue.esm-bundler.js'
 import Antd from 'ant-design-vue';
 import App from './App.vue'
@@ -6,8 +9,10 @@ import UCore from './util/UCore.js'
 import './assets/css/index.css';
 import router from './router';
 import axios from 'axios';
+import { store } from './store/store.js';
 const app = createApp(App);
 app.use(router);
+app.config.globalProperties.$store = store;
 app.config.globalProperties.$UCore = UCore;
 app.config.globalProperties.$axios = axios;
 app.use(Antd).mount('#app');

src/store/store.js

@@ -0,0 +1,31 @@
+/*
+ * @Author: yaolunmao
+ * 简单状态管理
+ */
+
+import {reactive } from 'vue';
+export const store = {
+  state: reactive({
+    CurrentlySelectedToolBar : {
+      Type: '',//选中的工具栏svg类型
+      TypeName: '',//选中的工具栏svg类型名称
+      Title: '',//选中的工具栏svg标题
+      Color: '',//选中的工具栏svg颜色
+      CreateType: ''//选中工具栏的创建方式
+    }
+  }),
+
+  setCurrentlySelectedToolBarAction(newValue) {
+    this.state.CurrentlySelectedToolBar = newValue
+  },
+
+  clearCurrentlySelectedToolBarAction() {
+    this.state.CurrentlySelectedToolBar = {
+      Type: '',//选中的工具栏svg类型
+      TypeName: '',//选中的工具栏svg类型名称
+      Title: '',//选中的工具栏svg标题
+      Color: '',//选中的工具栏svg颜色
+      CreateType: ''//选中工具栏的创建方式
+    }
+  }
+}

src/views/CircuitEdit.vue

@@ -35,8 +35,13 @@
                     @click="testD">导出数据</a-button>
           <a-button type="primary"
                     @click="testE">载入模板</a-button> -->
+
+            <a-button type="danger">当前为2.1版本</a-button>
+
           <a-button type="primary"
-                    @click="testH">预览</a-button>
+                    @click="testH"
+                    style="margin-left:20px">预览</a-button>
+
           <a style="margin-left:20px">
             <a-button type="primary"
                       style="margin-left:20px"
@@ -48,6 +53,10 @@
              href="https://svgv1.yaolunmao.top">
             <a-button type="primary">1.0版本</a-button>
           </a>
+          <a style="margin-left:20px"
+             href="https://svgv2.yaolunmao.top">
+            <a-button type="primary">2.0版本</a-button>
+          </a>
           <a style="margin-left:20px"
              href="https://svgedit.yaolunmao.top">
             <a-button type="primary">在线绘图</a-button>
@@ -105,8 +114,7 @@
                    @mousedown="MousedownSvg(item.id,index,item.svgPositionX,item.svgPositionY,$event)"
                    :title=item.title
                    :transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')' +'scale('+item.size+')'">
-                  <SvgComponents :svg_color=item.svgColor
+                  <SvgComponents :component_prop=item
-                                 :svgtype=item.type
                                  :svgInfoData=svgInfoData></SvgComponents>
                 </g>
               </svg>
@@ -153,14 +161,15 @@ export default {
       selectSvg: {
         ID: '',//要移动的svg
         Index: 0,
-        mouseStatus: 0, // 鼠标状态 1按下； 0弹起
         mPositionX: 0,//选中svg时鼠标的x轴坐标
         mPositionY: 0,//选中svg时鼠标的y轴坐标
         pointX: 0,//选中svg时svg的x轴坐标
         pointY: 0,//选中svg时svg的y轴坐标
       }
       ,
+      mouseStatus: 0, // 鼠标状态 1按下； 0弹起
       selectSvgInfo: '',
+      clickType: '',//鼠标点击行为
       tableRowCount: 2,//表格默认行数
       tableColCount: 2,//表格默认列数
       tableDefaultData: []
@@ -182,90 +191,144 @@ export default {
     MouseMove (e) {
       let _this = this;
 
-      if (this.selectSvg.mouseStatus == 0) {
+      if (this.clickType == 'draggable') {
-        return;
+        if (this.mouseStatus == 0) {
-      }
+          return;
-      const { clientX, clientY } = e
-
-      let svgID = this.svgLists[this.selectSvg.Index].id;
-      //排除当前元素剩下的所有svg元素的列表
-      let anyPositionList = this.svgLists.filter(function (list) {
-        return list.id != svgID
-      });
-      //将要移动的元素坐标设备为鼠标坐标
-      let svgPositionX = this.selectSvg.pointX;
-      let svgPositionY = this.selectSvg.pointY;
-      svgPositionX += (clientX - this.selectSvg.mPositionX);
-      svgPositionY += (clientY - this.selectSvg.mPositionY);
-      setTimeout(function () {
-        //少于十个像素自动吸附
-        //从所有的x坐标列表中查与当前坐标少于10个像素的组件是否存在
-        let exitsAdsorbX = anyPositionList.filter(function (list) {
-          return -10 < (list.svgPositionX - svgPositionX) && (list.svgPositionX - svgPositionX) < 10
-        });
-        if (exitsAdsorbX.length > 0) {
-          svgPositionX = exitsAdsorbX[0].svgPositionX;
         }
-        //y轴相同 横向坐标自动吸附
+        const { clientX, clientY } = e
-        let exitsAdsorbY = anyPositionList.filter(function (list) {
+
-          return -10 < (list.svgPositionY - svgPositionY) && (list.svgPositionY - svgPositionY) < 10
+        // let svgID = this.svgLists[this.selectSvg.Index].id;
-        });
+        let svgID = this.selectSvg.ID;
-        if (exitsAdsorbY.length > 0) {
+        //排除当前元素剩下的所有svg元素的列表
-          svgPositionY = exitsAdsorbY[0].svgPositionY;
+        let anyPositionList = this.svgLists.filter(function (list) {
-        }
+          return list.id != svgID
-        _this.svgLists[_this.selectSvg.Index].svgPositionX = svgPositionX;
-        _this.svgLists[_this.selectSvg.Index].svgPositionY = svgPositionY;
-        //从所有的x坐标列表中查当前坐标是否存在
-        let exitsNowX = anyPositionList.filter(function (list) {
-          return list.svgPositionX === svgPositionX
-        });
-        if (exitsNowX.length > 0) {
-          _this.guideY.style.setProperty('left', svgPositionX - 1 + 'px');
-          _this.guideY.style.display = 'inline';
-        }
-        else {
-          _this.guideY.style.display = 'none';
-        }
-        //从所有的y坐标列表中查当前坐标是否存在
-        let exitsNowY = anyPositionList.filter(function (list) {
-          return list.svgPositionY === svgPositionY
         });
-        if (exitsNowY.length > 0) {
+        //将要移动的元素坐标设备为鼠标坐标
-          _this.guideX.style.setProperty('top', svgPositionY + 'px');
+        let svgPositionX = this.selectSvg.pointX;
-          _this.guideX.style.display = 'inline';
+        let svgPositionY = this.selectSvg.pointY;
-        }
+        svgPositionX += (clientX - this.selectSvg.mPositionX);
-        else {
+        svgPositionY += (clientY - this.selectSvg.mPositionY);
-          _this.guideX.style.display = 'none';
+        setTimeout(function () {
+          //少于十个像素自动吸附
+          //从所有的x坐标列表中查与当前坐标少于10个像素的组件是否存在
+          let exitsAdsorbX = anyPositionList.filter(function (list) {
+            return -10 < (list.svgPositionX - svgPositionX) && (list.svgPositionX - svgPositionX) < 10
+          });
+          if (exitsAdsorbX.length > 0) {
+            svgPositionX = exitsAdsorbX[0].svgPositionX;
+          }
+          //y轴相同 横向坐标自动吸附
+          let exitsAdsorbY = anyPositionList.filter(function (list) {
+            return -10 < (list.svgPositionY - svgPositionY) && (list.svgPositionY - svgPositionY) < 10
+          });
+          if (exitsAdsorbY.length > 0) {
+            svgPositionY = exitsAdsorbY[0].svgPositionY;
+          }
+          _this.svgLists[_this.selectSvg.Index].svgPositionX = svgPositionX;
+          _this.svgLists[_this.selectSvg.Index].svgPositionY = svgPositionY;
+          //从所有的x坐标列表中查当前坐标是否存在
+          let exitsNowX = anyPositionList.filter(function (list) {
+            return list.svgPositionX === svgPositionX
+          });
+          if (exitsNowX.length > 0) {
+            _this.guideY.style.setProperty('left', svgPositionX - 1 + 'px');
+            _this.guideY.style.display = 'inline';
+          }
+          else {
+            _this.guideY.style.display = 'none';
+          }
+          //从所有的y坐标列表中查当前坐标是否存在
+          let exitsNowY = anyPositionList.filter(function (list) {
+            return list.svgPositionY === svgPositionY
+          });
+          if (exitsNowY.length > 0) {
+            _this.guideX.style.setProperty('top', svgPositionY + 'px');
+            _this.guideX.style.display = 'inline';
+          }
+          else {
+            _this.guideX.style.display = 'none';
+          }
+        }, 1);
+      }
+      else if (this.clickType == 'click') {
+        if (this.mouseStatus == 0) {
+          return;
         }
-      }, 1);
+        this.selectSvgInfo.mPoint.endX = e.offsetX;
+        this.selectSvgInfo.mPoint.endY = e.offsetY;
+      }
     },
     MousedownCanvas (e) {
-      //console.log('点击了画布');
+      if (this.clickType == 'draggable') {
-      console.log('当前鼠标位置',e.clientX,e.clientY)
+        return;
+      }
+      if (this.$store.state.CurrentlySelectedToolBar && this.$store.state.CurrentlySelectedToolBar.CreateType == 'click') {
+        //根据类型和鼠标位置创建组件
+        let svg_id = this.$UCore.GenUUid()
+        let svgItem = {
+          id: svg_id,
+          title: this.$store.state.CurrentlySelectedToolBar.Title,
+          type: this.$store.state.CurrentlySelectedToolBar.Type,
+          typeName: this.$store.state.CurrentlySelectedToolBar.TypeName,
+          svgColor: this.$store.state.CurrentlySelectedToolBar.Color,
+          svgPositionX: e.offsetX,
+          svgPositionY: e.offsetY,
+          mPoint: {
+            startX: e.offsetX,
+            startY: e.offsetY,
+            endX: e.offsetX,
+            endY: e.offsetY
+          },
+          size: 1,
+          angle: 0
+          //translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
+        };
+        this.svgLists.push(svgItem);
+        this.selectSvgInfo = svgItem;
+        this.mouseStatus = 1;
+        this.clickType = 'click';
+      }
+
     },
     MousedownSvg (id, index, pointX, pointY, e) {
-      window.CurrentlySelectedToolBar.Type = '';
+      this.$store.clearCurrentlySelectedToolBarAction();
-      window.CurrentlySelectedToolBar.Title = '';
       //从数组里面根据index找到当前元素
       this.selectSvg.ID = id;
       this.selectSvg.Index = index;
-      this.selectSvg.mouseStatus = 1;
+      this.mouseStatus = 1;
-      this.selectSvg.mPositionX = e.offsetX;
+      this.selectSvg.mPositionX = e.clientX;
-      this.selectSvg.mPositionY = e.offsetY;
+      this.selectSvg.mPositionY = e.clientY;
       this.selectSvg.pointX = pointX;
       this.selectSvg.pointY = pointY;
       this.selectSvgInfo = this.svgLists[index];
-
+      this.clickType = 'draggable';
 
     },
     MouseupCanvas () {
-      this.guideX.style.display = 'none';
+      if (this.mouseStatus == 0) {
-      this.guideY.style.display = 'none';
-      if (window.CurrentlySelectedToolBar.Title != '' || window.CurrentlySelectedToolBar.Type != '') {
         return;
       }
+      this.guideX.style.display = 'none';
+      this.guideY.style.display = 'none';
+      // if (this.$store.state.CurrentlySelectedToolBar.Type != '') {
+      //   return;
+      // }
       // this.selectSvg.ID = '';
-      this.selectSvg.mouseStatus = 0;
+      this.mouseStatus = 0;
+      // this.clickType = '';
+      if (this.clickType == 'draggable') {
+        this.clickType = '';
+      }
+      if (this.clickType == 'click') {
+        if (this.selectSvgInfo.mPoint.startX == this.selectSvgInfo.mPoint.endX && this.selectSvgInfo.mPoint.startY == this.selectSvgInfo.mPoint.endY) {
+          //根据当前id找到当前元素的index
+          let selectSvgIndex = this.svgLists.indexOf(this.svgLists.filter(f => f.id == this.selectSvgInfo.id)[0]);
+          this.svgLists.splice(selectSvgIndex, 1);
+          this.selectSvg = {};
+          this.selectSvgInfo = {};
+        }
+      }
+      // this.$store.state.CurrentlySelectedToolBar = {};
     },
     MouseWheel (e) {
       //获取当前选中组件
@@ -284,6 +347,7 @@ export default {
     },
     DblClick () {
       this.selectSvgInfo = '';
+      this.$store.clearCurrentlySelectedToolBarAction();
     },
     testD () {
       console.log(JSON.stringify(this.svgLists));
@@ -344,16 +408,16 @@ export default {
     }, false);
     canvasdiv.addEventListener("drop", function (e) {
       e.preventDefault();
-      if (window.CurrentlySelectedToolBar.Type == '') {
+      if (_this.$store.state.CurrentlySelectedToolBar.Type == '' || _this.$store.state.CurrentlySelectedToolBar.CreateType != 'draggable') {
         return;
       }
       //根据类型和鼠标位置创建组件
       let svgItem = {
         id: _this.$UCore.GenUUid(),
-        title: window.CurrentlySelectedToolBar.Title,
+        title: _this.$store.state.CurrentlySelectedToolBar.Title,
-        type: window.CurrentlySelectedToolBar.Type,
+        type: _this.$store.state.CurrentlySelectedToolBar.Type,
-        typeName: window.CurrentlySelectedToolBar.TypeName,
+        typeName: _this.$store.state.CurrentlySelectedToolBar.TypeName,
-        svgColor: window.CurrentlySelectedToolBar.Color,
+        svgColor: _this.$store.state.CurrentlySelectedToolBar.Color,
         svgPositionX: e.offsetX,
         svgPositionY: e.offsetY,
         size: 1,
@@ -413,7 +477,7 @@ export default {
     this.$axios.get('/InterfaceReturn.json')
       .then(function (response) {
         _this.svgInfoData = response.data;
-        console.log(response.data);
+        // console.log(response.data);
       })
       .catch(function (error) {
         console.log(error);

src/vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  productionSourceMap: false,
+}