<div class="WorkflowDesignerToolbarBlock Horizontal WorkflowDesignerElementToolbarBlock" style="display: flex;">
  <el-tooltip v-if="!graph.Settings.notshowwindows" :content="labels.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="labels.CreateTransition">
    <div class="WorkflowDesignerElementToolbarIconContainer">
      <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon CreateTransition"
                 v-bind:disabled="preventMakeNewTansition()" @click="activity._onCreateTransition()"></el-button>
    </div>
  </el-tooltip>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.CreateTransitionAndActivity">
    <div class="WorkflowDesignerElementToolbarIconContainer">
      <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon CreateTransitionAndActivity"
                 v-bind:disabled="preventMakeNewTansition()" @click="activity._onCreateTransitionAndActivity()"></el-button>
    </div>
  </el-tooltip>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.Clone">
    <div class="WorkflowDesignerElementToolbarIconContainer">
      <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon Clone" @click="activity.Clone()"></el-button>
    </div>
  </el-tooltip>
  <div class="WorkflowDesignerElementToolbarIconContainer">
    <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon Color"></el-button>
  </div>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.Color">
    <el-color-picker v-if="!graph.Settings.readonly" v-model="Color" class="ColorPicker" :predefine="predefineColors" size="mini"
                     @change="activity.UpdateColor(Color)"></el-color-picker>
  </el-tooltip>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.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.methods.UpdateLanguage = function () {
      me.VueConfig.data = Object.assign(me.VueConfig.data, {
        labels: {
          ...WorkflowDesignerConstants.ElementToolbar,
          ...WorkflowDesignerConstants.ActivityToolbar
        },
      });
    }

    me.VueConfig.methods.UpdateLanguage();
    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>
