From 2005fd1bdcd7c7ca29bf4347e8ff5f2a3c6a5734 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=92=AC=E8=BD=AE=E7=8C=AB?= <10928033@qq.com>
Date: Sun, 25 Jul 2021 21:48:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BC=A9=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                       |  30 +++++---
 package-lock.json               |  15 ++++
 src/components/LeftToolBar.vue  |  22 ++++--
 src/components/RightToolBar.vue |  26 +++++--
 src/views/CircuitEdit.vue       | 123 ++++++++++++++------------------
 5 files changed, 124 insertions(+), 92 deletions(-)

diff --git a/README.md b/README.md
index 836a403..5e47eb8 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,13 @@
 # vue-webtopo-svgeditor
 
-> 纯vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加组件
+> 基于vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加组件
 
-当前主分支版本为2.0
+当前主分支版本为2.1
 
 ## [版本1.0请点此](https://svgv1.yaolunmao.top)
 
 ## [图片挂了点此](https://www.cnblogs.com/Hero-/p/14784744.html)
+
 ## 预览地址
 
 [https://svg.yaolunmao.top](https://svg.yaolunmao.top)
@@ -57,19 +58,23 @@ yarn serve
 将拓展字段进行双向绑定 我目前只做了颜色
 
 ```
-<path :fill=\"svg_color\" :stroke=\"svg_color\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\"></path>
+<path :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path>
 ```
 
 修改项目文件夹pubilc下的模拟接口返回的json，新增一项：
 
 ```
 {
-  "type": "TestAddSvg",
-  "title": "测试新增组件",
-  "template": "<path :fill=\"svg_color\" :stroke=\"svg_color\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\"></path>",
-  "props": ["svg_color"],
-  "default_color":"#FF0000",
-  "priview_img":"https://svg.yaolunmao.top/test.png"
+	"type": "TestAddSvg",
+	"title": "测试新增组件",
+	"panel_class": "draggable",
+	"template": "<path :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path>",
+	"props": ["prop_data"],
+	"default_attr": {
+		"color": "#FF0000"
+	},
+	"create_type": "draggable",
+	"priview_img": "https://svg.yaolunmao.top/test.png"
 }
 ```
 
@@ -89,9 +94,14 @@ ps：目前中心辅助线的坐标取决于svg组件的中心坐标，请自行
 
 ## 截图
 
+
+
+## ![绘制组件](https://blog-static.cnblogs.com/files/Hero-/%E7%BB%98%E5%88%B6%E7%BB%84%E4%BB%B6.gif)
+![绘制图表](https://blog-static.cnblogs.com/files/Hero-/%E5%9B%BE%E8%A1%A8.gif)
+
 ![编辑器页面](https://img-blog.csdnimg.cn/20210322100014954.gif#pic_center)
 
-![预览界面](https://img-blog.csdnimg.cn/20210322100043996.gif#pic_center)
+![预览界面](https://blog-static.cnblogs.com/files/Hero-/%E9%A2%84%E8%A7%88.gif)
 
 ## License
 
diff --git a/package-lock.json b/package-lock.json
index 08e0d7e..14f4922 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12380,6 +12380,21 @@
         "@vue/devtools-api": "^6.0.0-beta.10"
       }
     },
+    "vue-ruler-tool": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npm.taobao.org/vue-ruler-tool/download/vue-ruler-tool-1.2.4.tgz",
+      "integrity": "sha1-MQTjS2UO2nHJpHWXb4yyjGTNEKc=",
+      "requires": {
+        "vue": "^2.5.11"
+      },
+      "dependencies": {
+        "vue": {
+          "version": "2.6.14",
+          "resolved": "https://registry.nlark.com/vue/download/vue-2.6.14.tgz",
+          "integrity": "sha1-5RqlJQJQ1Wmj+606ilpofWA24jU="
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz",
diff --git a/src/components/LeftToolBar.vue b/src/components/LeftToolBar.vue
index b290e11..067e2e2 100644
--- a/src/components/LeftToolBar.vue
+++ b/src/components/LeftToolBar.vue
@@ -1,8 +1,8 @@
 
 <template>
-  <div class="components-layout-left">
+  <div class="components-layout-left leftNav">
 
-    <a-input-search placeholder="搜索组件" />
+    <!-- <a-input-search placeholder="搜索组件" /> -->
     <a-collapse v-model:activeKey="activeKey"
                 accordion>
       <a-collapse-panel key="1"
@@ -99,7 +99,7 @@ export default {
   }
 };
 </script>
-<style>
+<style lang="less" scoped>
 .components-layout-left .ant-input-search-icon {
   font-size: 20px !important;
   color: #1890ff !important;
@@ -112,8 +112,6 @@ export default {
 .components-layout-left .ant-collapse-content > .ant-collapse-content-box {
   padding: 16px 0;
 }
-</style>
-<style lang="less" scoped>
 .ant-input-affix-wrapper {
   height: 45px;
   line-height: 45px;
@@ -129,7 +127,6 @@ export default {
   li {
     position: relative;
     width: calc(33.33% - 30px);
-    height: 56px;
     margin: 0 15px 15px 15px;
     padding: 0;
     border-radius: 50%;
@@ -140,7 +137,7 @@ export default {
     cursor: pointer;
 
     &:hover {
-      box-shadow: 1px 1px 5px #0090ff;
+      box-shadow: 1px 1px 10px #ccc;
     }
 
     img {
@@ -180,4 +177,15 @@ export default {
 .toolbar-selected {
   outline: 1px solid #0cf;
 }
+.leftNav {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-width: unset !important;
+  max-width: unset !important;
+  width: 260px !important;
+  z-index: 1;
+  overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/RightToolBar.vue b/src/components/RightToolBar.vue
index 0d6c71c..b7959bd 100644
--- a/src/components/RightToolBar.vue
+++ b/src/components/RightToolBar.vue
@@ -1,7 +1,11 @@
+<!--
+ * @Author: yaolunmao
+-->
 <template>
+<div class="rightNav">
 <a-tabs type="card"  class="components-layout-right">
     <a-tab-pane key="1" tab="外观">
-      <a-form layout="horizontal">
+      <a-form layout="horizontal"  :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }" labelAlign="left">
         <a-form-item label="id">
           <p>{{svgInfo.id}}</p>
         </a-form-item>
@@ -37,7 +41,7 @@
       <div class="bg-code">{{selectSvgInfo}}</div>
     </a-tab-pane>
   </a-tabs>
-  
+</div>
 </template>
 <script>
 export default {
@@ -57,7 +61,7 @@ export default {
   }
 };
 </script>
-<style lang="less">
+<style scoped lang="less">
 .components-layout-right{
   .ant-tabs-bar{
     margin-bottom: 0 !important;
@@ -97,7 +101,6 @@ export default {
       right: 15px;
       bottom: 0;
       height: 1px;
-      background: #f2f2f2;
     }
 
     &:last-child::after{
@@ -105,8 +108,6 @@ export default {
     }
   }
 }
-</style>
-<style scoped lang="less">
 .btn-sure{
   width: 260px;
   margin: 20px;
@@ -119,4 +120,15 @@ export default {
   border-radius: 4px;
   padding: 10px;
 }
-</style>
\ No newline at end of file
+.rightNav {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  min-width: unset !important;
+  max-width: unset !important;
+  width: 300px !important;
+  z-index: 1;
+  overflow: auto;
+  padding:10px 20px;
+}
+</style>
diff --git a/src/views/CircuitEdit.vue b/src/views/CircuitEdit.vue
index 9799305..af2099e 100644
--- a/src/views/CircuitEdit.vue
+++ b/src/views/CircuitEdit.vue
@@ -36,6 +36,7 @@
                    @ok="versionModelHandleOk">
             <p>新增绘制组件</p>
             <p>新增图表</p>
+            <p>新增缩放功能</p>
             <p>新增模板-加载模板后点击预览-点击模拟硬件-等待两秒查看效果</p>
             <p>如果图片加载不出来请清空缓存刷新(F12右键刷新按钮-选择清空缓存并进行硬刷新)</p>
           </a-modal>
@@ -46,11 +47,12 @@
                     @click="testE">载入模板</a-button> -->
 
           <a-button type="danger"
-                    @click="versionModelVisible=true">当前为2.1版本</a-button>
+                    @click="versionModelVisible=true"
+                    style="margin-left:20px">当前为2.1版本</a-button>
 
           <a-button type="primary"
                     @click="testA"
-                    style="margin-left:20px">载入模板</a-button>
+                    style="margin-left:120px">载入模板</a-button>
           <a-button type="primary"
                     @click="testH"
                     style="margin-left:20px">预览</a-button>
@@ -88,19 +90,16 @@
                       @click="exportData">导出数据</a-button>
           </a>
         </a-layout-header>
-        <span v-if="!shrink"
-              @click="exitFullscreen"
-              class="icon-shrink svgfont">&#xe62b;</span>
         <a-layout class="pageMain">
-          <a-layout-sider class="leftNav">
+          <!-- <a-layout> -->
+          <a-layout-sider width="260px">
             <LeftToolBar :svgInfoData=svgInfoData></LeftToolBar>
           </a-layout-sider>
-          <a-layout-content 
-                            :class="{ fixed: !shrink }"
-                            style="transform: scale(1)">
-            <div class="canvas-content"
-                 ref="canvas"
-                 
+          <a-layout-content class="centerContain">
+
+            <div ref="canvas"
+                 class="canvansDiv"
+                 :style="'transform: scale('+scaleValue+')'"
                  @mousemove="MouseMove"
                  @mousedown="MousedownCanvas"
                  @mouseup="MouseupCanvas"
@@ -108,9 +107,11 @@
                  @mousewheel="MouseWheel">
               <!--拖动辅助线-->
               <div id="guide-x"
-                   ref="guidex_dom"></div>
+                   ref="guidex_dom"
+                   :style="'border-top: '+1/scaleValue+'px dashed #55f'"></div>
               <div id="guide-y"
-                   ref="guidey_dom"></div>
+                   ref="guidey_dom"
+                   :style="'border-left: '+1/scaleValue+'px dashed #55f'"></div>
               <!-- 画布 -->
               <svg version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
@@ -141,8 +142,18 @@
                 </g>
               </svg>
             </div>
+            <div class="zoonStyle">
+              <div style="text-color:black">缩放：
+                <a-slider :default-value="1"
+                          :min="0.1"
+                          :max="2"
+                          :step="0.1"
+                          @change="scaleValueChange"
+                          style="width:200px" />
+              </div>
+            </div>
           </a-layout-content>
-          <a-layout-sider class="rightNav">
+          <a-layout-sider width="300px">
             <RightToolBar :svgInfo=selectSvgInfo
                           @setTableAttr="setTableAttr"></RightToolBar>
           </a-layout-sider>
@@ -154,7 +165,6 @@
 <script>
 import LeftToolBar from '@/components/LeftToolBar.vue';
 import RightToolBar from '@/components/RightToolBar.vue';
-// import SvgComponents from '@/components/SvgComponents.vue';
 import SvgComponents from '@/components/SvgComponents.vue';
 export default {
   components: { LeftToolBar, RightToolBar, SvgComponents },
@@ -194,9 +204,7 @@ export default {
       mouseStatus: 0, // 鼠标状态 1按下； 0弹起
       selectSvgInfo: '',
       clickType: '',//鼠标点击行为
-      tableRowCount: 2,//表格默认行数
-      tableColCount: 2,//表格默认列数
-      tableDefaultData: []
+      scaleValue: 1,//缩放倍数    
     }
   },
   methods: {
@@ -239,7 +247,7 @@ export default {
           return;
         }
         const { clientX, clientY } = e
-
+        // console.log(e.offsetX,e.offsetY);
         // let svgID = this.svgLists[this.selectSvg.Index].id;
         let svgID = this.selectSvg.ID;
         //排除当前元素剩下的所有svg元素的列表
@@ -249,8 +257,8 @@ export default {
         //将要移动的元素坐标设备为鼠标坐标
         let svgPositionX = this.selectSvg.pointX;
         let svgPositionY = this.selectSvg.pointY;
-        svgPositionX += (clientX - this.selectSvg.mPositionX);
-        svgPositionY += (clientY - this.selectSvg.mPositionY);
+        svgPositionX += (clientX - this.selectSvg.mPositionX) / this.scaleValue;
+        svgPositionY += (clientY - this.selectSvg.mPositionY) / this.scaleValue;
         setTimeout(function () {
           //少于十个像素自动吸附
           //从所有的x坐标列表中查与当前坐标少于10个像素的组件是否存在
@@ -274,7 +282,7 @@ export default {
             return list.svgPositionX === svgPositionX
           });
           if (exitsNowX.length > 0) {
-            _this.$refs.guidey_dom.style.setProperty('left', svgPositionX - 1 + 'px');
+            _this.$refs.guidey_dom.style.setProperty('left', svgPositionX - 1 / _this.scaleValue + 'px');
             _this.$refs.guidey_dom.style.display = 'inline';
           }
           else {
@@ -285,7 +293,7 @@ export default {
             return list.svgPositionY === svgPositionY
           });
           if (exitsNowY.length > 0) {
-            _this.$refs.guidex_dom.style.setProperty('top', svgPositionY + 'px');
+            _this.$refs.guidex_dom.style.setProperty('top', svgPositionY - 1 / _this.scaleValue + 'px');
             _this.$refs.guidex_dom.style.display = 'inline';
           }
           else {
@@ -448,6 +456,9 @@ export default {
         tableData.push(tableRowData)
       }
       this.svgLists[tableIndex].tableData = tableData;
+    },
+    scaleValueChange (newValue) {
+      this.scaleValue = newValue;
     }
   },
   mounted () {
@@ -576,19 +587,8 @@ export default {
   bottom: 0;
   overflow: auto;
 }
-.leftNav {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  min-width: unset !important;
-  max-width: unset !important;
-  width: 260px !important;
-  z-index: 1;
-  overflow: auto;
-}
 .centerContain {
-  position: absolute;
+  // position: absolute;
   left: 260px;
   right: 300px;
   top: 0;
@@ -606,7 +606,16 @@ export default {
     top: 0;
     bottom: 0;
   }
-
+  .canvansDiv {
+    width: 1920px;
+    height: 1080px;
+    transform-origin: left top;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+  }
   .canvas-content {
     width: 1920px;
     height: 1080px;
@@ -626,33 +635,6 @@ export default {
     }
   }
 }
-.rightNav {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  min-width: unset !important;
-  max-width: unset !important;
-  width: 300px !important;
-  z-index: 1;
-  overflow: auto;
-}
-.icon-shrink {
-  position: fixed;
-  right: 20px;
-  top: 5px;
-  font-size: 24px;
-  color: #fff;
-  cursor: pointer;
-  background: #1890ff;
-  width: 38px;
-  height: 38px;
-  line-height: 38px;
-  text-align: center;
-  border-radius: 50%;
-  user-select: none;
-  z-index: 1111;
-}
 
 #components-layout .ant-layout-sider {
   background: #fff;
@@ -661,18 +643,16 @@ export default {
 #guide-x {
   display: none;
   position: absolute;
-  border-top: 1px dashed #55f;
   width: 100%;
   left: 0px;
-  top: 500px;
+  top: 0px;
 }
 
 #guide-y {
   display: none;
   position: absolute;
-  border-left: 1px dashed #55f;
   height: 100%;
-  left: 100px;
+  left: 0px;
   top: 0px;
 }
 .ant-slider {
@@ -751,4 +731,11 @@ export default {
 .topo-layer-view-selected {
   outline: 1px solid #0cf;
 }
+.zoonStyle {
+  position: fixed;
+  bottom: 4px;
+  z-index: 99;
+  color: #fff;
+  background: #000;
+}
 </style>