eta_front/src/views/chartFrame_manage/components/frameToolBar.vue

<template>
    <!-- 框架工具栏 -->
    <div class="frame-tool-bar-wrap">
        <div class="cell-style">
            <!-- 撤销 -->
            <ToolItem tooltip="撤销" toolkey="undo">
                <div class="tool-item" @click="handleGraphHistory('undo')">
                    <img :src="require(`@/assets/icons/chartFrame/undo.svg`)"
                        :class="{'img-disabled':!canUndo,'actived':canUndo}">
                    <span class="disabled" v-if="!canUndo"></span>
                </div>
                
            </ToolItem>
            <!-- 恢复 -->
            <ToolItem tooltip="恢复" toolkey="undo">
                <div class="tool-item" @click="handleGraphHistory('redo')">
                    <img :src="require(`@/assets/icons/chartFrame/redo.svg`)"
                        :class="{'img-disabled':!canRedo,'actived':canRedo}">
                    <span class="disabled" v-if="!canRedo"></span>
                </div>
            </ToolItem>
            <!-- 字体 暂定-->
            <!-- 字号 -->
            <ToolItem tooltip="字号" toolkey="fontSize">
                <el-dropdown @command="changeStyle" trigger="click" class="tool-item">
                    <span class="el-dropdown-link tool-item"> 
                        <span>{{nodeStyle.fontSize}}px</span>
                        <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in sizeOptions" 
                            :key="item" :command="{attr:'label/fontSize',value:item}">{{item}}</el-dropdown-item>
                    </el-dropdown-menu>
                    <span class="disabled" v-if="!isSelectNode"></span>
                </el-dropdown>
            </ToolItem>
            <!-- 加粗 -->
            <ToolItem tooltip="加粗" toolkey="fontWeight">
                <span class="tool-item">
                    <span class="item-text" :class="{'text-disabled':!isSelectNode,'text-actived':isSelectNode}"
                        :style="'font-size: 16px;font-weight: bold;'"
                        @click="changeStyleToggle('label/fontWeight')">B</span>
                    <span class="disabled" v-if="!isSelectNode"></span>
                </span>
            </ToolItem>
            <!-- 斜体 -->
            <ToolItem tooltip="斜体" toolkey="fontstyle">
                <span class="tool-item">
                    <span style="font-style: italic;" class="item-text"
                        @click="changeStyleToggle('label/fontStyle')">
                        <img :src="require(`@/assets/icons/chartFrame/fontStyle.svg`)"
                            :class="{'img-disabled':!isSelectNode,'actived':isSelectNode}">
                    </span>
                    <span class="disabled" v-if="!isSelectNode"></span>
                </span>
            </ToolItem>
            <!-- 下划线 -->
            <ToolItem tooltip="下划线" toolkey="textDecoration">
                <span class="tool-item">
                    <span style="text-decoration: underline;" class="item-text"
                        @click="changeStyleToggle('label/textDecoration')">
                        <img :src="require(`@/assets/icons/chartFrame/fontText.svg`)"
                            :class="{'img-disabled':!isSelectNode,'actived':isSelectNode}">
                    </span>
                    <span class="disabled" v-if="!isSelectNode"></span>
                </span>
            </ToolItem>
            <!-- 字体颜色 -->
            <ToolItem tooltip="字体颜色" toolkey="textDecoration">
                <span class="tool-item">
                    <label for="label/fill" :style="`color:${color}`">
                        <img :src="require(`@/assets/icons/chartFrame/fontColor.svg`)"
                            :class="{'img-disabled':!isSelectNode,'actived':isSelectNode}">
                    </label>
                    <input type="color" id="label/fill" style="width: 0;height: 0;visibility: hidden;" 
                        :value="nodeStyle.color"
                        @input="valueChange"/>
                    <span class="disabled" v-if="!isSelectNode"></span>
                </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">
                    <label for="body/fill" :style="`color:${fillColor}`">
                        <img :src="require(`@/assets/icons/chartFrame/fillColor.svg`)"
                            :class="{'img-disabled':!isSelectNode,'actived':isSelectNode}">
                    </label>
                    <input type="color" id="body/fill" style="width: 0;height: 0;visibility: hidden;"
                        :value="nodeStyle.fill"
                        @input="valueChange"/>
                    <span class="disabled" v-if="!isSelectNode"></span>
                </span>
            </ToolItem>
            <!-- 节点/线条边框颜色 -->
            <ToolItem tooltip="边框颜色" toolkey="borderColor">
                <span class="tool-item">
                    <label for="storke" :style="`color:${borderColor}`">
                        <img :src="require(`@/assets/icons/chartFrame/stokeColor.svg`)"
                            :class="{'img-disabled':!isSelectNode&&!isSelectEdge,'actived':isSelectNode||isSelectEdge}">
                    </label>
                    <input type="color" id="storke" style="width: 0;height: 0;visibility: hidden;" 
                        :value="nodeStyle.stroke"
                        @input="valueChange"/>
                    <span class="disabled" v-if="!isSelectNode&&!isSelectEdge"></span>
                </span>
            </ToolItem>
            <!-- 节点/线条边框宽度 -->
            <ToolItem tooltip="线框宽度" toolkey="stokeWidth">
                <el-dropdown @command="changeCellStyle" trigger="click" class="tool-item">
                    <span class="el-dropdown-link tool-item"> 
                        <i class="el-icon-minus"></i>
                        <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in stokeWidthOptions" 
                            :key="item" :command="{attr:'width',value:item}">{{item}}</el-dropdown-item>
                    </el-dropdown-menu>
                    <span class="disabled" v-if="!isSelectNode&&!isSelectEdge"></span>
                </el-dropdown>
            </ToolItem>
            <!-- 节点/线条边框样式 -->
            <ToolItem tooltip="边框样式" toolkey="stokeWidth">
                <el-dropdown @command="changeCellStyle" trigger="click" class="tool-item">
                    <span class="el-dropdown-link tool-item"> 
                        <img :src="require(`@/assets/icons/chartFrame/stokeStyle.svg`)"
                            :class="{'img-disabled':!isSelectNode&&!isSelectEdge,'actived':isSelectNode||isSelectEdge}">
                        <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{attr:'dash',value:5}">
                            <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i>
                        </el-dropdown-item>
                        <el-dropdown-item :command="{attr:'dash',value:0}">
                            <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                    <span class="disabled" v-if="!isSelectNode&&!isSelectEdge"></span>
                </el-dropdown>
            </ToolItem>
            <!-- 开始箭头 -->
            <ToolItem tooltip="开始箭头" toolkey="stokeWidth">
                <el-dropdown trigger="click" @command="changeStyle" class="tool-item">
                    <div class="el-dropdown-link">
                        <img :src="require(`@/assets/icons/chartFrame/arrow-left.svg`)"
                            :class="{'img-disabled':!isSelectEdge,'actived':isSelectEdge}">
                            <i class="el-icon-caret-bottom"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{attr:'line/sourceMarker',value: 'classic'}">
                            <i class="iconfont icon-arrow-left" style="color:'#000';fontSize:24px"></i>
                        </el-dropdown-item>
                        <el-dropdown-item :command="{attr:'line/sourceMarker',value: ''}">
                            <i class="iconfont icon--shixian" style="color:'#000';fontSize:32px"></i>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                    <span class="disabled" v-if="!isSelectEdge"></span>
                </el-dropdown>
            </ToolItem>
            <!-- 结束箭头 -->
            <ToolItem tooltip="结束箭头" toolkey="stokeWidth">
                <el-dropdown trigger="click" @command="changeStyle" class="tool-item">
                    <div class="el-dropdown-link">
                        <img :src="require(`@/assets/icons/chartFrame/arrow-right.svg`)"
                            :class="{'img-disabled':!isSelectEdge,'actived':isSelectEdge}">
                            <i class="el-icon-caret-bottom"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{attr:'line/targetMarker',value: 'classic'}">
                            <i class="iconfont icon-arrow-right" style="color:'#000';fontSize:24px"></i>
                        </el-dropdown-item>
                        <el-dropdown-item :command="{attr:'line/targetMarker',value: ''}">
                            <i class="iconfont icon--shixian" style="color:'#000';fontSize:32px"></i>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                    <span class="disabled" v-if="!isSelectNode&&!isSelectEdge"></span>
                </el-dropdown>
            </ToolItem>
        </div>
        
    </div>
</template>

<script>
import '@/assets/icons/iconfont.css';
import ToolItem from './toolItem.vue';
import {sizeOptions,stokeWidthOptions,lineHeightOptions,textAnchorOptions} from '../common/config';
export default {
    components: { ToolItem },
    props:{
        isSelectNode:{//当前选中的元素是否是节点
            type:Boolean,
            default:false
        },
        isSelectEdge:{//当前选中的元素是否是边
            type:Boolean,
            default:false
        },
        currentCell:{//当前传入的元素,Node/Edge
            type:Object,
        },
        graph:{ //当前画布
            type:Object,
        },
        canRedo:{
            type:Boolean
        },
        canUndo:{
            type:Boolean
        }
    },
    data() {
        this.sizeOptions=sizeOptions
        this.stokeWidthOptions=stokeWidthOptions
        this.textAnchorOptions=textAnchorOptions
        return {
            nodeStyle:{ //回显用的
                fontSize:14,
                fill:'#333',
                color:'#333',
            },
            cellStyle:{
                stroke:'#333',
            },
            color:'#333',
            fillColor:'#333',
            borderColor:'#333',
        };
    },
    watch:{
        isSelectNode(newVal){
            if(!newVal){
                //重置 node相关样式
                this.nodeStyle = {
                    fontSize:14,
                    fill:'#333',
                    color:'#333',
                    stroke:'#333'
                }
            }
        },
        currentCell(newVal){
            if(newVal){
                if(newVal.isNode&&newVal.isNode()){
                    this.nodeStyle = {
                        fontSize:newVal.attrs.label.fontSize,
                        fill:newVal.attrs.body.fill,
                        color:newVal.attrs.label.fill,
                        stroke:newVal.attrs.body.stroke,
                    }
                    this.cellStyle = {
                        store:newVal.attrs.body.stroke,
                    }
                }
                if(newVal.isEdge&&newVal.isEdge()){
                    this.cellStyle = {
                        store:newVal.attrs.line.stroke
                    }
                }

            }
        },
    },
    methods: {
        //加粗,斜体,下划线样式
        changeStyleToggle(attr){
            const value = this.currentCell.attr(attr)
            const valueMap = {
                'label/fontWeight':['normal','bold'],
                'label/fontStyle':['normal','italic'],
                'label/textDecoration':['normal','underline'],
            }
            this.changeStyle({attr,
                value:value===valueMap[attr][0]
                ?valueMap[attr][1]
                :valueMap[attr][0]})
        },
        changeStyle({attr,value}){
            this.currentCell.attr(attr,value)
            if(attr==='label/fontSize'){
                this.nodeStyle.fontSize = value
            }
            
        },
        //边框和线条通用样式:线条颜色,宽度,虚线
        valueChange(e){
            //t.target.value: "#9c3535"
            if(e.target){
                const styleMap = {
                    'storke':['body/stroke','line/stroke'],
                    'width':['body/strokeWidth','line/strokeWidth'],
                    'dash':['body/strokeDasharray','line/strokeDasharray']
                }
                const {id,value} = e.target
                let attr = id
                if(styleMap[id]){
                    attr = this.isSelectNode?styleMap[id][0]:styleMap[id][1]
                } 
                
                this.currentCell.attr(attr,value)
                //改变节点字体颜色时,角标的颜色也一起改变
                if(attr==='label/fill'){
                    let tool = this.currentCell.getTools().items[0]
                    tool.args.markup[0].attrs.fill = value
                    this.currentCell.removeTools()
                    this.currentCell.addTools(tool)
                }
            }
        },
        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]()
        }
    },
    mounted(){
    },
    
};
</script>

<style lang="scss">
.frame-tool-bar-wrap{
    .tool-item{
        .el-input{
            .el-input__inner {
                padding:0;
                height:100%;
            }
        }
    }
    .el-button{
        padding:0;
    }
}
</style>
<style scoped lang="scss">
.frame-tool-bar-wrap{
    background-color:#F6F7F8;
    padding: 5px;
    position: absolute;
    height: 26px;
    left: 0;
    right:0;
    top:0;
    z-index: 100;
    box-sizing: border-box;
    .cell-style{
        display: flex;
        gap:0 20px;
        overflow:hidden;
        align-items:center;
        .tool-item{
            cursor: pointer;
            position: relative;
            .img-disabled{
                transform:translateY(50px);
                filter:drop-shadow(#C8CDD9 0px -50px 0px);
            }
            .actived{
                transform:translateY(50px);
                filter:drop-shadow(#333 0px -50px 0px);
            }
            .item-text{
                padding:0 2px;
                &.text-disabled{
                    color:#C8CDD9;
                }
                &.text-actived{
                    color:#333;
                }
            }
            .disabled {
                color: #bbb;
                /* background: rgba(0, 0, 0, 0.08); */
                background-color: transparent;
                cursor: not-allowed;
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                z-index: 1;
            }
        }
    }
}
</style>