<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="transition.ShowProperties()"></el-button>
    </div>
  </el-tooltip>
  <div v-if="!graph.Settings.readonly" 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" :predefine="predefineColors" size="mini" class="ColorPicker"
                     @change="transition.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="transition._onDelete()"></el-button>
    </div>
  </el-tooltip>
</div>
<script type="application/javascript">
  function transitiontoolbar_Init(me) {
    me.VueConfig.methods.UpdateLanguage = function () {
      me.VueConfig.data = Object.assign(me.VueConfig.data, {
        labels: WorkflowDesignerConstants.ElementToolbar,
      });
    }

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