<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="activity.ShowProperties()"></el-button>
        </div>
    </el-tooltip>
    <el-tooltip v-if="!graph.Settings.readonly" content="CreateTransition"> 
        <div class="WorkflowDesignerElementToolbarIconContainer">
        <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon CreateTransition"
            @click="activity._onCreateTransition()" v-bind:disabled="preventMakeNewTansition()"></el-button>
        </div>
    </el-tooltip>
    <el-tooltip v-if="!graph.Settings.readonly" content="CreateTransitionAndActivity"> 
        <div class="WorkflowDesignerElementToolbarIconContainer">
        <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon CreateTransitionAndActivity"
            @click="activity._onCreateTransitionAndActivity()" v-bind:disabled="preventMakeNewTansition()"></el-button>
        </div>
    </el-tooltip>
    <el-tooltip v-if="!graph.Settings.readonly" content="Clone"> 
        <div class="WorkflowDesignerElementToolbarIconContainer">
        <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon Clone" @click="activity.Clone()"></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" style="opacity: 0; margin-left: -25px;max-width: 20px; max-height: 20px;" @change="activity.UpdateColor(Color)"></el-color-picker>
    <el-tooltip v-if="!graph.Settings.readonly" content="Delete"> 
        <div class="WorkflowDesignerElementToolbarIconContainer">
            <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon Delete " @click="activity._onDelete()"></el-button>
        </div>
    </el-tooltip>
</div>
<script type="application/javascript">
    function activitytoolbar_Init(me){
        me.VueConfig.data = Object.assign(me.VueConfig.data, {
            activity:undefined,
            Color:"",
            readonly: false,
            predefineColors: [
            '#f44336',
            '#e91e63',
            '#9c27b0',
            '#673ab7',
            '#3f51b5',
            '#2196f3',
            '#03a9f4',
            '#00bcd4',
            '#009688',
            '#4caf50',
            '#8bc34a',
            '#cddc39',         
            '#ffeb3b',
            '#ffc107',
            '#ff9800',
            '#ff5722',
            '#795548',
            '#9e9e9e',
            '#607d8b'
            ],
        
            graph: me.value.graph
           
        });
        me.VueConfig.methods.onUpdate = function(activity){
            var data = me.VueConfig.data;
            data.activity = activity;
            data.Color = activity.Color;    
        };
        me.VueConfig.methods.preventMakeNewTansition = function(){
            var f = me.VueConfig.data.activity.preventMakeNewTansition;
            return !!(f && f());
        };
    };
</script>
