<div style="display: flex;" class="WorkflowDesignerToolbarBlock Horizontal WorkflowDesignerElementToolbarBlock">
    <el-tooltip v-if="!graph.Settings.notshowwindows" content="ShowProperties">
        <div class="WorkflowDesignerElementToolbarIconContainer">
        <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon ShowProperties " @click="transition.ShowProperties()"></el-button>
        </div>
    </el-tooltip>
    <el-tooltip v-if="!graph.Settings.readonly" content="Color"> 
        <div class="WorkflowDesignerElementToolbarIconContainer">
            <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon Color"></el-button>
        </div>
    </el-tooltip>
    <el-color-picker v-if="!graph.Settings.readonly" v-model="Color" :predefine="predefineColors" size="mini" @change="transition.UpdateColor(Color)" style="opacity: 0; margin-left: -25px;max-width: 20px; max-height: 20px;"></el-color-picker>
    <el-tooltip v-if="!graph.Settings.readonly" content="Delete"> 
        <div class="WorkflowDesignerElementToolbarIconContainer">
            <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon Delete " @click="transition._onDelete()"></el-button>
        </div>
    </el-tooltip>
</div>
<script type="application/javascript">
    function transitiontoolbar_Init(me){  
        me.VueConfig.data = Object.assign(me.VueConfig.data, {
            transition: undefined,
            Color:"",
            predefineColors: [
            '#f44336',
            '#e91e63',
            '#9c27b0',
            '#673ab7',
            '#3f51b5',
            '#2196f3',
            '#03a9f4',
            '#00bcd4',
            '#009688',
            '#4caf50',
            '#8bc34a',
            '#cddc39',         
            '#ffeb3b',
            '#ffc107',
            '#ff9800',
            '#ff5722',
            '#795548',
            '#9e9e9e',
            '#607d8b'
            ],
            readonly: false,
            graph: me.value.graph     
        });
        me.VueConfig.methods.onUpdate = function(transition){
            var data = me.VueConfig.data;
            data.transition = transition;
            data.Color = transition.Color; 
        };
    };
</script>
