使用joinjs绘制流程图（十）-实战-绘制流程图+自定义节点样式(优化)

问题

前面自定义节点的样式坐标位置不对，我们希望自定义节点的坐标和rect元素的位置是一样的

效果图

代码

<template>
  <div class="app">
    <div ref="myholder" id="paper"></div>
  </div>
</template>

<script>
import * as joint from '@joint/core'
import $ from 'jquery'
export default {
  data() {
    return {
      graph: null,
      rect_width: 100,
      rect_height: 40,
    }
  },
  mounted() {
    const namespace = joint.shapes
    var graph = new joint.dia.Graph({}, { cellNamespace: namespace })
    this.graph = graph

    var paper = new joint.dia.Paper({
      el: this.$refs.myholder,
      model: this.graph,
      width: 800,
      height: 300,
      cellViewNamespace: namespace,
      drawGrid: true,
      gridSize: 10,
      background: {
        color: 'rgba(0, 255, 0, 0.3)',
      },
      interactive: false,
      clickThreshold: 10,
    })

    this.paper = paper

    const node1 = this.drawRect(
      { x: 50, y: 30 },
      `<div> 
        <span class='right'>10</span> | 
        <span class='error'>20</span>
        <div class='desc'>正确数|错误数</div>
      </div>`
    )
    const node2 = this.drawRect({ x: 200, y: 30 }, '节点2')
    const node3 = this.drawRect({ x: 350, y: 30 }, '节点3')
    const node4 = this.drawRect({ x: 500, y: 30 }, '节点4')
    const node5 = this.drawRect({ x: 200, y: 100 }, '节点5')
    const node6 = this.drawRect({ x: 350, y: 100 }, '节点6')
    const node7 = this.drawRect({ x: 350, y: 150 }, '节点7')
    const node8 = this.drawRect({ x: 500, y: 150 }, '节点8')
    const node9 = this.drawRect({ x: 500, y: 200 }, '节点9')

    this.drawLine(node1, node2)
    this.drawLine(node2, node3)
    this.drawLine(node3, node4)
    this.drawLine(node1, node5)
    this.drawLine(node2, node6)
    this.drawLine(node2, node7)
    this.drawLine(node7, node8)
    this.drawLine(node7, node9)
  },
  methods: {
    drawRect({ x, y }, text) {
      var rect = new joint.shapes.standard.Rectangle()
      rect.position(x, y)
      rect.resize(this.rect_width, this.rect_height)
      rect.attr({
        // body选择器修改的是 svg元素  [selector for the <rect> SVGElement]
        body: {
          fill: '#2c3e50',
          // strokeWidth: 0,
          // strokeDasharray: '10,2',
          // fill: 'transparent',
          stroke: 'transparent',
        },

        // label选择器修改的是 text元素  [selector for the <text> SVGElement]
        label: {
          // text,
          text: '',
          fill: '#3498DB',
          fontSize: 18,
          fontWeight: 'bold',
          fontVariant: 'Microsoft YaHei',
        },
      })
      rect.addTo(this.graph)

      this.transformHtml(rect, text)
      return rect
    },
    drawLine(node1, node2, vertices) {
      const source_x = node1.attributes.position.x + this.rect_width + 1
      const source_y = node1.attributes.position.y + this.rect_height / 2
      const target_x = node2.attributes.position.x - 1
      const target_y = node2.attributes.position.y + this.rect_height / 2
      const source = {
        x: source_x,
        y: source_y,
      }
      const target = {
        x: target_x,
        y: target_y,
      }
      var link = new joint.shapes.standard.Link({
        source,
        target,
        router: null, // 不使用任何自动路由器
        connector: null,
        // connector: {
        //   name: 'jumpover',
        //   args: {
        //     size: 0.1,
        //   },
        // },
        attrs: {
          line: {
            stroke: 'gray',
          },
        },
      })

      // TODO:判断两点是否在同一直线，如果不是的话，动态计算转折点  --->这里按我们设计的去画
      // if (vertices && vertices.length) {
      //   link.vertices(vertices)
      // }
      if (source.y != target.y) {
        const vertices = this.calcVertices(source, target)
        link.vertices(vertices)
      }

      link.addTo(this.graph)
    },
    transformHtml(element, text) {
      var div = document.createElement('div')
      div.style.position = 'absolute'
      // div.style.background = 'red'
      // NOTE:取rect元素的坐标点
      const { x, y } = element.attributes.position
      div.style.left = x + 'px'
      div.style.top = y + 'px'
      div.style.width = this.rect_width + 'px'
      div.style.height = this.rect_height + 'px'
      div.innerHTML = text
      $(div).click(function () {
        console.log(this)
      })
      this.paper.el.appendChild(div)
    },
    calcVertices(node1, node2) {
      const vertices = []
      vertices.push(node1)

      const center_top_x = (node2.x - node1.x) / 2 + node1.x
      const center_top_y = node1.y
      const center_bottom_x = center_top_x
      const center_bottom_y = node2.y
      vertices.push({
        x: center_top_x,
        y: center_top_y,
      })
      vertices.push({
        x: center_bottom_x,
        y: center_bottom_y,
      })
      vertices.push(node2)
      return vertices
    },
  },
}
</script>

<style lang="less" scoped>
#paper {
  position: relative;
  border: 1px solid;
}

/deep/.right {
  color: green;
  font-weight: 700;
}

/deep/.error {
  color: red;
  font-weight: 700;
}
/deep/.desc {
  color: orange;
  font-size: 13px;
}
</style>