WuXiDiKe/nladmin-ui/src/views/system/logicflow/editor/components/DiagramToolbar.vue

<template>
  <div style="padding: 5px">
    <div class="toolbar-item" :class="{'selection-active': selectionOpened}" @click="$_selectionSelect()">
      <area-select size="18" />
    </div>
    <div class="toolbar-item" @click="$_zoomIn()">
      <zoom-in size="18" />
    </div>
    <div class="toolbar-item" @click="$_zoomOut()">
      <zoom-out size="18" />
    </div>
    <div
      class="toolbar-item"
      :class="{'disabled': !undoAble}"
      @click="$_undo()"
    >
      <step-back size="18" />
    </div>
    <div
      class="toolbar-item"
      :class="{'disabled': !redoAble}"
      @click="$_redo()"
    >
      <step-foward size="18" />
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_lock">锁定</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_unlock">解锁</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_verticalAlign">垂直居中</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_horizontalAlign">水平居中</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_leftAlign">向左对齐</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_rightAlign">向右对齐</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_upAlign">向上对齐</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_downAlign">向下对齐</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_horizontalDistribution">水平分布</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_verticalDistribution">垂直分布</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_cleanGraph">清空画布</el-button>
    </div>
    <div style="margin-right: 5px">
      <el-button size="mini" type="primary" @click="$_saveGraph">保存</el-button>
    </div>
    <div>
      <el-select v-model="linetype" size="mini" style="width: 80px" @change="$_changeLineType">
        <el-option
          v-for="item in lineOptions"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </div>
    <div>
      <span style="font-size: 14px; margin-left: 5px">舞台:</span>
      <el-select v-model="stage_code" placeholder="请选择" @change="$_changeStage">
        <el-option
          v-for="item in stageSelectList"
          :key="item.stage_code"
          :label="item.stage_name"
          :value="item.stage_code"
        />
      </el-select>
    </div>
  </div>
</template>

<script>
import ZoomIn from './icon/ZoomIn.vue'
import ZoomOut from './icon/ZoomOut.vue'
import StepBack from './icon/StepBack.vue'
import StepFoward from './icon/StepFoward.vue'
import AreaSelect from './icon/AreaSelect.vue'
import crudStage from '@/views/system/logicflow/stage'

export default {
  components: {
    ZoomIn,
    ZoomOut,
    StepBack,
    StepFoward,
    AreaSelect
    // SketchPicker: Sketch
  },
  props: {
    lf: Object,
    activeEdges: Array,
    fillColor: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectionOpened: true,
      undoAble: false,
      redoAble: false,
      colors: '#345678',
      linetype: 'pro-polyline',
      lineOptions: [
        {
          value: 'pro-polyline',
          label: '折线'
        },
        {
          value: 'pro-line',
          label: '直线'
        },
        {
          value: 'pro-bezier',
          label: '曲线'
        }
      ],
      stage_code: '',
      stageSelectList: []
    }
  },
  created() {
    if (this.selectionOpened) {
      this.lf.extension.selectionSelect.openSelectionSelect()
    }
  },
  mounted() {
    this.initStageList()
    this.$props.lf.on('history:change', ({ data: { undoAble, redoAble }}) => {
      this.$data.redoAble = redoAble
      this.$data.undoAble = undoAble
    })
  },
  methods: {
    initStageList() {
      // 初始化舞台下拉框
      crudStage.selectStageList().then(data => {
        this.stageSelectList = data
      })
    },
    $_changeFillColor(val) {
      this.$emit('changeNodeFillColor', val.hex)
    },
    $_cleanGraph() {
      this.$emit('cleanGraph')
    },
    $_saveGraph() { // 保存，转成js
      this.$emit('saveGraph')
    },
    $_zoomIn() {
      this.$props.lf.zoom(true)
    },
    $_zoomOut() {
      this.$props.lf.zoom(false)
    },
    $_undo() {
      if (this.$data.undoAble) {
        this.$props.lf.undo()
      }
    },
    $_redo() {
      if (this.$data.redoAble) {
        this.$props.lf.redo()
      }
    },
    $_selectionSelect() {
      this.selectionOpened = !this.selectionOpened
      if (this.selectionOpened) {
        this.lf.extension.selectionSelect.openSelectionSelect()
      } else {
        this.lf.extension.selectionSelect.closeSelectionSelect()
      }
    },
    $_changeLineType(value) {
      const { lf, activeEdges } = this.$props
      const { graphModel } = lf
      lf.setDefaultEdgeType(value)
      if (activeEdges && activeEdges.length > 0) {
        activeEdges.forEach(edge => {
          graphModel.changeEdgeType(edge.id, value)
        })
      }
    },
    $_lock() {
      this.$emit('lock')
    },
    $_unlock() {
      this.$emit('unlock')
    },
    $_changeStage(val) { // 选择舞台
      this.$emit('changeStage', val)
    },
    $_verticalAlign() { // 垂直对齐
      this.$emit('verticalAlign')
    },
    $_horizontalAlign() { // 水平对齐
      this.$emit('horizontalAlign')
    },
    $_leftAlign() { // 左对齐
      this.$emit('leftAlign')
    },
    $_rightAlign() { // 右对齐
      this.$emit('rightAlign')
    },
    $_upAlign() {
      this.$emit('upAlign')
    },
    $_downAlign() {
      this.$emit('downAlign')
    },
    $_horizontalDistribution() {
      this.$emit('horizontalDistribution')
    },
    $_verticalDistribution() {
      this.$emit('verticalDistribution')
    }
  }
}
</script>

<style scoped>
.toolbar-item {
  width: 18px;
  height: 18px;
  float: left;
  margin: 12px 4px;
  cursor: pointer;
}
.toolbar-color-picker {
  width: 24px;
  height: 24px;
  margin: 8px 4px;
}
.selection-active {
  background: #33a3dc;
}
</style>