工具栏增加文字对齐

src/assets/icons/chartFrame/textAlign.svg

@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3921 2H2.39209V4H14.3921V2Z" fill="#C8CDD9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.39209 7H2.39209V9H9.39209V7Z" fill="#C8CDD9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3921 12H2.39209V14H14.3921V12Z" fill="#C8CDD9"/>
+</svg>

src/views/chartFrame_manage/common/config.js

@@ -94,3 +94,47 @@ export const sizeOptions = [
 ]
 //线框宽度
 export const stokeWidthOptions = [1,2,3,4,5]
+//行高
+export const lineHeightOptions = [ //倍数 设置的值为 value*fontSize
+    {
+        label:'默认',
+        value:''
+    },
+    {
+        label:'1',
+        value:1,
+    },
+    {
+        label:'1.5',
+        value:1.5
+    },
+    {
+        label:'2',
+        value:2
+    }]
+//对齐方式
+export const textAnchorOptions = [
+    {
+        label:'居左',
+        options:{
+            refX:0,
+            refY:0.5,
+            textAnchor:'start',
+        }
+    },
+    {
+        label:'居中',
+        options:{
+            refX:0.5,
+            refY:0.5,
+            textAnchor:'middle',
+        }
+    },
+    {
+        label:'居右',
+        options:{
+            refX:0.99,
+            refY:0.5,
+            textAnchor:'end',
+        }
+    }]

src/views/chartFrame_manage/components/frameToolBar.vue

@@ -79,7 +79,21 @@
                 </span>
             </ToolItem>
             <!-- 文本行高 暂定-->
-            <!-- 文本对齐 暂定-->
+            <!-- 文本对齐 -->
+            <ToolItem tooltip="文本对齐" toolkey="textAligh">
+                <el-dropdown @command="changeTextStyle" trigger="click" class="tool-item">
+                    <span class="el-dropdown-link tool-item"> 
+                        <img :src="require(`@/assets/icons/chartFrame/textAlign.svg`)"
+                            :class="{'img-disabled':!isSelectNode,'actived':isSelectNode}">
+                        <i class="el-icon-caret-bottom"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item v-for="item in textAnchorOptions" 
+                            :key="item.label" :command="{attr:'label/textAligh',value:item.options}">{{item.label}}</el-dropdown-item>
+                    </el-dropdown-menu>
+                    <span class="disabled" v-if="!isSelectNode"></span>
+                </el-dropdown>
+            </ToolItem>
             <!-- 节点颜色填充 -->
             <ToolItem tooltip="填充颜色" toolkey="fillColor">
                 <span class="tool-item">
@@ -186,7 +200,7 @@
 <script>
 import '@/assets/icons/iconfont.css';
 import ToolItem from './toolItem.vue';
-import {sizeOptions,stokeWidthOptions} from '../common/config';
+import {sizeOptions,stokeWidthOptions,lineHeightOptions,textAnchorOptions} from '../common/config';
 export default {
     components: { ToolItem },
     props:{
@@ -214,6 +228,8 @@ export default {
     data() {
         this.sizeOptions=sizeOptions
         this.stokeWidthOptions=stokeWidthOptions
+        this.lineHeightOptions=lineHeightOptions
+        this.textAnchorOptions=textAnchorOptions
         return {
             nodeStyle:{ //回显用的
                 fontSize:14,
@@ -303,6 +319,11 @@ export default {
         changeCellStyle({attr,value}){
             this.valueChange({target:{id:attr,value}})
         },
+        changeTextStyle({attr,value}){
+            for(const key in value){
+                this.currentCell.attr('label/'+key,value[key])
+            }
+        },
         //撤销/恢复
         handleGraphHistory(type){
             this.graph.history[type]()