feat：新增线条连接器设置

liuyonghua-cww · Sep 3, 2021 · d0bd8a2 · d0bd8a2
1 parent 72d7f82
commit d0bd8a2
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 222 deletions.
diff --git a/learn-x6/public/index.html b/learn-x6/public/index.html
@@ -5,7 +5,7 @@
     <meta content="IE=edge" http-equiv="X-UA-Compatible">
     <meta content="width=device-width,initial-scale=1.0" name="viewport">
     <link href="<%= BASE_URL %>favicon.ico" rel="icon">
-    <link href="//at.alicdn.com/t/font_2731098_cdoyda4g5hf.css" rel="stylesheet">
+    <link href="//at.alicdn.com/t/font_2731098_ysgpnj21nkr.css" rel="stylesheet">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <style>
         * {

diff --git a/learn-x6/src/components/Header/ToolsBar/CellAttr/cellAttr.js b/learn-x6/src/components/Header/ToolsBar/CellAttr/cellAttr.js
@@ -37,7 +37,7 @@ export default {
             this.getAttr();
         },
         configType: function (v) {
-            if (v === CONFIG_TYPE.NODE) {
+            if (v === CONFIG_TYPE.NODE || v === CONFIG_TYPE.EDGE) {
                 this.getAttr();
             }
         }
@@ -59,6 +59,7 @@ export default {
                 strokeWidth: 1, // 边框宽度
 
                 fill: '', // 背景颜色
+                connector: ''
             },
             attrPath,
             edgeAttrPath,
@@ -76,7 +77,13 @@ export default {
                 dot: '1,1',
                 dasheddot: '3, 1, 1, 1'
             },
-            strokeDasharrayIcon: strokeDasharrayIcon
+            strokeDasharrayIcon: strokeDasharrayIcon,
+            connectorType: [
+                { label: '简单连接器', value: 'normal'},
+                { label: '平滑连接器', value: 'smooth'},
+                { label: '圆角连接器', value: 'rounded'},
+                { label: '跳线连接器', value: 'jumpover'},
+            ]
         };
     },
     methods: {
@@ -92,16 +99,19 @@ export default {
                 stroke: '', // 边框颜色
                 strokeWidth: 1, // 边框宽度
 
-                fill: '', // 背景颜色
+                fill: '', // 背景颜色,
+                connector: ''
             };
             if (!this.selectedCell) {
                 return;
             }
             // 如果是 edge，获取相关属性的方式需要变化
             if (this.selectedCell.isEdge()) {
-                for (const key in this.attrPath) {
+                for (const key in this.edgeAttrPath) {
                     this.attr[ key ] = this.selectedCell.attr(this.edgeAttrPath[ key ]);
                 }
+                // 获取连接器类型
+                this.attr.connector = this.selectedCell.getConnector() && this.selectedCell.getConnector().name;
                 return;
             }
             for (const key in this.attrPath) {
@@ -259,6 +269,12 @@ export default {
             this.selectedCell.attr({
                 label: this.alignOpt
             });
+        },
+
+        // 设置连接器类型
+        setConnector(type) {
+            this.attr.connector = type;
+            this.selectedCell.setConnector(type);
         }
     }
 };
diff --git a/learn-x6/src/components/Header/ToolsBar/CellAttr/index.vue b/learn-x6/src/components/Header/ToolsBar/CellAttr/index.vue
@@ -224,30 +224,28 @@
         <div class="font-item">
             <a-popover placement="bottom" arrow-point-at-center trigger="click" v-if="configType === CONFIG_TYPE.EDGE">
                 <template slot="content">
-                    <ul class="stroke-width-select">
+                    <ul class="connector">
                         <li
-                                :class="{ 'selectedBGC': attr.strokeWidth === item }"
-                                v-for="(item, i) of 10"
-                                :key="i"
-                                @click="setStrokeWidth(item)"
+                                v-for="(item, i) of connectorType"
+                                :class="{ 'selectedBGC': attr.connector === item.value }"
+                                @click="setConnector(item.value)"
                         >
-                            {{ `${item}px` }}
+                            {{ item.label }}
                         </li>
                     </ul>
                 </template>
                 <a-button
                         :disabled="configType !== CONFIG_TYPE.EDGE"
                 >
-
-                    <i class="iconfont icon-xiantiaokuandu"></i>
+                    <i class="iconfont icon-lianxian"></i>
                 </a-button>
             </a-popover>
 
             <a-button
                     v-else
                     :disabled="configType !== CONFIG_TYPE.EDGE"
             >
-                <i class="iconfont icon-xiantiaokuandu"></i>
+                <i class="iconfont icon-lianxian"></i>
             </a-button>
         </div>
     </div>

diff --git a/learn-x6/src/components/Settings/Cell/Edge/attrPath.js b/learn-x6/src/components/Settings/Cell/Edge/attrPath.js
diff --git a/learn-x6/src/components/Settings/Cell/Edge/index.vue b/learn-x6/src/components/Settings/Cell/Edge/index.vue
diff --git a/learn-x6/src/components/Settings/Cell/Node/Attr/attrPath.js b/learn-x6/src/components/Settings/Cell/Node/Attr/attrPath.js
diff --git a/learn-x6/src/components/Settings/Cell/Node/Attr/index.vue b/learn-x6/src/components/Settings/Cell/Node/Attr/index.vue
diff --git a/learn-x6/src/components/Settings/Cell/Node/index.vue b/learn-x6/src/components/Settings/Cell/Node/index.vue
@@ -39,8 +39,6 @@
                 />
             </a-form-model-item>
         </a-form-model>
-        <a-divider>元素属性</a-divider>
-        <Attr />
         <a-divider>阴影</a-divider>
         <drop-show />
     </section>
@@ -49,12 +47,10 @@
 <script>
 import { mapState } from "vuex";
 import { Mouse } from "@/events/mouse";
-import Attr from './Attr';
 import DropShow from './DropShadow';
 export default {
     name: "index",
     components: {
-        Attr,
         DropShow
     },
     computed: {

diff --git a/learn-x6/src/components/Settings/Cell/index.vue b/learn-x6/src/components/Settings/Cell/index.vue
@@ -1,19 +1,16 @@
 <template>
     <section id="cell_opt">
         <node-option v-if="configType === CONFIG_TYPE.NODE"/>
-        <edge-option v-if="configType === CONFIG_TYPE.EDGE"/>
     </section>
 </template>
 
 <script>
 import NodeOption from './Node'
 import { CONFIG_TYPE } from "@/events/mouse";
-import EdgeOption from './Edge'
 export default {
     name: "index",
     components: {
         NodeOption,
-        EdgeOption
     },
     props: {
         configType: {

diff --git a/learn-x6/src/theme/antd/ant-popover.less b/learn-x6/src/theme/antd/ant-popover.less
@@ -4,7 +4,7 @@
 .ant-popover-inner-content {
   padding: 0;
 }
-.ant-popover .stroke-width-select {
+.ant-popover .stroke-width-select, .ant-popover .connector {
   list-style: none;
   padding: 5px 0;
   > li {
@@ -13,6 +13,7 @@
     height: 28px;
     line-height: 28px;
     cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     &:hover {
       color: @primary-color;
     }
@@ -36,3 +37,9 @@
     }
   }
 }
+
+.ant-popover .connector {
+  > li {
+    width: 100px;
+  }
+}