节点工具,暂存

src/views/chartFrame_manage/common/config.js

@@ -21,9 +21,18 @@ export const baseNode = {
                 width: -10,
                 ellipsis: true,
             }
+        },
+        body:{
+            fill:'#fff',//背景色
+            stroke:'#333',//边框色
+        },
+        label:{ //与svg text属性相同
+            fill:'#333',//文字颜色
+            fontSize:14,//文字大小
+            fontWeight:'normal',//文字粗细
         }
     },
-    ports: {
+    ports: { //基础连接桩
         items: [
             { group: 'port-top', id: 'p_top' },
             { group: 'port-bottom', id: 'p_bottom' },
@@ -57,4 +66,91 @@ export const baseNode = {
 //基础线条
 export const baseEdge = {
 
-}
+}
+
+//基础工具栏
+export const baseToolBar = [
+    {
+        toolkey:'undo',
+        toolname:'撤销',
+    },
+    {
+        toolkey:'redo',
+        toolname:'恢复',
+    },
+    {
+        toolkey:'fontFamily',
+        toolname:'字体'
+    },
+    {
+        toolkey:'fontSize',
+        toolname:'字号'
+    },
+    {
+        toolkey:'fontWeight',
+        toolname:'加粗'
+    },
+    {//fontStyle
+        toolkey:'italic',
+        toolname:'倾斜'
+    },
+    {
+        toolkey:'textDecoration',
+        toolname:'下划线'
+    },
+    {
+        toolkey:'label-fill',
+        toolname:'字体颜色'
+    },
+    {
+        toolkey:'lineHeight',
+        toolname:'文本行高'
+    },
+    {
+        toolkey:'textAligh',
+        toolname:'文本对齐'
+    },
+    {
+        toolkey:'node-fill',
+        toolname:'颜色填充'
+    },
+    {
+        toolkey:'stroke',
+        toolname:'线条颜色'
+    },
+    {
+        toolkey:'',
+        toolname:'线条宽度'
+    },
+    {
+        toolkey:'',
+        toolname:'线条样式'
+    },
+    {
+        toolkey:'',
+        toolname:'连线类型'
+    },
+    {
+        toolkey:'',
+        toolname:'开始箭头'
+    },
+    {
+        toolkey:'',
+        toolname:'结束箭头'
+    }
+]
+
+//字号
+export const sizeOptions = [
+    30,
+    28,
+    26,
+    24,
+    22,
+    20,
+    18,
+    16,
+    14,
+    12,
+    10,
+]

src/views/chartFrame_manage/common/gragh.js → src/views/chartFrame_manage/common/graph.js

@@ -16,6 +16,7 @@ const viewConfig = {
     },
     highlighting:{},
     connecting:{},
+    history:false,//关闭画布撤销/重做能力。
 }
 export function myGraph(wrapper) {
     const otherConfig = window.location.pathname.startsWith('/editframe')?{}:viewConfig
@@ -24,6 +25,7 @@ export function myGraph(wrapper) {
         background: {
             color: '#fff',
         },
+        history:true,
         selecting:{
             enabled: true,
             showNodeSelectionBox: false,

src/views/chartFrame_manage/components/frameContainer.vue

@@ -1,6 +1,10 @@
 <template>
     <!-- 沙盘图区域 -->
     <div class="frame-container-wrap">
+        <!-- 工具栏 -->
+        <FrameToolBar v-if="$route.path==='/editframe'"
+            :graph="graph"
+        ></FrameToolBar>
         <div class="frame-container" id="frameContainer"></div>
         <!-- 缩略图 -->
         <div class="minimap" id="frameMinimap"></div>
@@ -18,10 +22,11 @@
 
 <script>
 import { ElDropdownMenu } from 'element-ui';
-import { myGraph } from '../common/gragh';
+import { myGraph } from '../common/graph';
 import { baseNode } from '../common/config';
+import FrameToolBar from './frameToolBar.vue';
 export default {
-    components:{ElDropdownMenu},
+    components:{ElDropdownMenu,FrameToolBar},
     data() {
         return {
             graph:null,
@@ -141,6 +146,7 @@ export default {
     display: flex;
     overflow: hidden;
     position: relative;
+    padding-top: 24px;
     .minimap {
         position: absolute;
         right: 6px;

src/views/chartFrame_manage/components/frameToolBar.vue

@@ -0,0 +1,130 @@
+<template>
+    <!-- 框架工具栏 -->
+    <div class="frame-tool-bar-wrap">
+        <div class="cell-style">
+            <!-- 撤销 -->
+            <ToolItem tooltip="撤销" toolkey="undo">
+                <span class="tool-item">
+                    <i class="el-icon-arrow-left"></i>
+                    <span class="disabled"></span>
+                </span>
+            </ToolItem>
+            <!-- 恢复 -->
+            <ToolItem tooltip="恢复" toolkey="undo">
+                <span class="tool-item">
+                    <i class="el-icon-arrow-right"></i>
+                    <span class="disabled"></span>
+                </span>
+            </ToolItem>
+            <!-- 字体 -->
+            <!-- 字号 -->
+            <ToolItem tooltip="字号" toolkey="fontSize">
+                <el-dropdown @command="changeStyle" trigger="click">
+                    <span class="el-dropdown-link"> 
+                        <span>{{node}}</span>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item v-for="item in sizeOptions" 
+                            :key="item" :command="{attr:'fontSize',value:item}">{{item}}</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </ToolItem>
+            <!-- 加粗 -->
+            <!-- 斜体 -->
+            <!-- 下划线 -->
+            <!-- 字体颜色 -->
+            <!-- 文本行高 -->
+            <!-- 文本对齐 -->
+            <!-- 节点颜色填充 -->
+            <!-- 节点/线条边框颜色 -->
+            <!-- 节点/线条边框宽度 -->
+            <!-- 节点/线条边框样式 -->
+            <!-- 开始箭头 -->
+            <!-- 结束箭头 -->
+        </div>
+        
+    </div>
+</template>
+
+<script>
+import ToolItem from './toolItem.vue';
+import {sizeOptions} from '../common/config';
+export default {
+    components: { ToolItem },
+    props:['graph'],
+    data() {
+        this.sizeOptions=sizeOptions
+        return {
+            node:''
+        };
+    },
+    methods: {
+        setGraphStyle(){
+            console.log('aaa')
+        }
+    },
+    
+};
+</script>
+
+<style lang="scss">
+.frame-tool-bar-wrap{
+    .el-select {
+        .el-input__inner {
+            border: none;
+            height: 28px;
+            padding: 0;
+            line-height: 28px;
+            width: 30px;
+            background: transparent;
+        }
+        .el-input__suffix {
+            /* display: none; */
+            top: -5px;right: -10px;
+
+            .el-select__caret {
+                transform: rotateZ(0);
+            }
+
+            .el-icon-arrow-up:before {
+                /* content: "\e790"; */
+                content: "\e6df";
+                font-size: 12px;
+                color: #333;
+            }
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+.frame-tool-bar-wrap{
+    background-color:#F6F7F8;
+    padding: 5px;
+    position: absolute;
+    height: 24px;
+    left: 0;
+    right:0;
+    top:0;
+    z-index: 100;
+    box-sizing: border-box;
+    .cell-style{
+        display: flex;
+        gap:0 20px;
+        .tool-item{
+            cursor: pointer;
+            position: relative;
+            .disabled {
+                color: #bbb;
+                background: rgba(0, 0, 0, 0.08);
+                cursor: not-allowed;
+                position: absolute;
+                top: 0;
+                right: 0;
+                left: 0;
+                bottom: 0;
+                z-index: 1;
+            }
+        }
+    }
+}
+</style>

src/views/chartFrame_manage/components/toolItem.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="tool-item-wrap">
+        <el-tooltip class="item" effect="dark" :content="tooltip" placement="top">
+            <slot></slot>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        tooltip:{
+            type:String,
+            default:''
+        },
+        toolkey:{
+            type:String,
+            default:''
+        },
+        disabled:{
+            type:Boolean,
+            default:false,
+        }
+    },
+    data() {
+        return {};
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/chartFrame_manage/frameEditor.vue

@@ -7,13 +7,11 @@
             <el-button type="primary" style="margin-left:20px;">保存</el-button>
         </div>
         <div class="editor-wrap">
-            <div class="tool-wrap">工具栏</div>
-            <div class="frame-wrap">
-                <!-- 沙盘图组件 -->
-                <FrameContainer ref="container"
-                    @editNode="handleEditNode"
-                />
-            </div>
+            <!-- 沙盘图组件 -->
+            <FrameContainer ref="container"
+                @editNode="handleEditNode"
+                @finishInit="getGraphObject"
+            />
         </div>
         <!-- 添加/编辑节点弹窗 -->
         <el-dialog
@@ -105,8 +103,15 @@ export default {
         },
         goToList(item) {
             window.open(`/mychart?frameId=${item.classifyId}`);
-        }
+        },
+        getGraphObject(){
+
+        },
+        getFrameDetail(){},
     },
+    mounted(){
+        this.getFrameDetail()
+    }
 };
 </script>
 
@@ -126,10 +131,6 @@ export default {
         display: flex;
         flex-direction: column;
         background-color: #fff;
-        .tool-wrap{
-            background-color:#F6F7F8;
-            padding: 5px;
-        }
         .frame-wrap{
             flex:1;
             background-color: #F2F6FA;

src/views/chartFrame_manage/index.vue

@@ -106,15 +106,15 @@
                                 </el-dropdown-menu>
                             </el-dropdown>
                             <el-dropdown @command="handleCommand" trigger="click">
-                            <span class="el-dropdown-link"> 
-                                <i class="el-icon-more" style="font-size: 16px;transform: rotate(90deg);cursor: pointer"/>
-                            </span>
-                            <el-dropdown-menu slot="dropdown">
-                                <el-dropdown-item v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_rename')"
-                                    :command="{key:'edit'}">重命名</el-dropdown-item>
-                                <el-dropdown-item v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_delete')"
-                                    :command="{key:'del'}">删除</el-dropdown-item>
-                            </el-dropdown-menu>
+                                <span class="el-dropdown-link"> 
+                                    <i class="el-icon-more" style="font-size: 16px;transform: rotate(90deg);cursor: pointer"/>
+                                </span>
+                                <el-dropdown-menu slot="dropdown">
+                                    <el-dropdown-item v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_rename')"
+                                        :command="{key:'edit'}">重命名</el-dropdown-item>
+                                    <el-dropdown-item v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_delete')"
+                                        :command="{key:'del'}">删除</el-dropdown-item>
+                                </el-dropdown-menu>
                             </el-dropdown>
                            
                         </li>