<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" @click="activity.ShowProperties()">
      <el-icon>
        <div v-html="icons.showproperties"></div>
      </el-icon>
    </el-button>
  </div>
</el-tooltip>
<el-tooltip v-if="!graph.Settings.readonly" content="Clone">
  <div class="WorkflowDesignerElementToolbarIconContainer">
    <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon" @click="activity.Clone()">
      <el-icon>
        <div v-html="icons.clone"></div>
      </el-icon>
    </el-button>
  </div>
</el-tooltip>
<el-tooltip v-if="!graph.Settings.readonly" content="Color">
  <div class="WorkflowDesignerElementToolbarIconContainer">
    <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon">
      <el-icon>
        <div v-html="icons.color"></div>
      </el-icon>
    </el-button>
  </div>
</el-tooltip>
<el-tooltip v-if="!graph.Settings.readonly" content="Text color">
  <div>
    <el-color-picker v-if="!graph.Settings.readonly" v-model="Color" :predefine="predefineColors" size="small"
                     style="opacity: 0; margin-left: -25px;max-width: 20px; max-height: 20px;"
                     @change="activity.UpdateColor(Color)">
    </el-color-picker>
  </div>
</el-tooltip>
<el-tooltip v-if="!graph.Settings.readonly" content="Delete">
  <div class="WorkflowDesignerElementToolbarIconContainer">
    <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon" @click="activity._onDelete()">
      <el-icon>
        <div v-html="icons.delete"></div>
      </el-icon>
    </el-button>
  </div>
</el-tooltip>
</div>
<script type="application/javascript">
function commenttoolbar_Data(me) {
  return {
    icons: WorkflowDesignerConstants.icons,
    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
  }
}

function commenttoolbar_Init(me) {
  const {VueConfig} = me;
  const {state: data, methods} = VueConfig

  methods.onUpdate = function (activity) {
    data.activity = activity;
    data.Color = activity.Color;
  };

  methods.preventMakeNewTransition = function () {
    return !!data?.activity?.preventMakeNewTransition?.();
  };
};
</script>
