darge组件使用并用来判断连接管道条数

最新推荐文章于 2024-09-13 22:27:28 发布

小松果

最新推荐文章于 2024-09-13 22:27:28 发布

阅读量536

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44939800/article/details/114285623

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用darge组件，并详细说明了如何利用该组件来判断连接管道的数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

darge组件使用并用来判断连接管道条数

1、引用

import dagre from 'dagre'

      // 通过叶子节点数判断画布是完整的一条/多条管道，如果不是完整管道则无法保存
      if (streamInAssembly && actionInAssembly && allElementsConnected) {
        // if (this.flowGraph.getLeafNodes().length === 1 || this.flowGraph.getLeafNodes().length > 1) {
        //   onlyOnePipelineCreated = true
        // } else {
        //   onlyOnePipelineCreated = false
        // }
        onlyOnePipelineCreated = this.onlyOnePipelineCreated(rawPipelineModel)
      }
      return streamInAssembly && actionInAssembly && allElementsConnected && onlyOnePipelineCreated
    },
 onlyOnePipelineCreated(rawPipelineModel) {
      const g = this.makeGraph(rawPipelineModel)
      const tarjan = dagre.graphlib.alg.tarjan(g)
      console.log(tarjan, 5555555555555555555555555555555555555)
      return tarjan.length === 1
    },
    makeGraph(rawPipelineModel) {
      var g = new dagre.graphlib.Graph()
      g.setGraph({ rankdir: 'LR' })
      g.setDefaultEdgeLabel(function() {
        return {}
      })
      // 获取所有节点的id
      rawPipelineModel.forEach((item) => {
        if (item.shape === 'flow-chart-rect' || item.shape === 'flow-chart-rect1' || item.shape === 'flow-chart-rect2') {
          const currentPipelineElement = item.attrs.pipelineElement.payload
          g.setNode(item.id, {
            label: item.id,
            type: currentPipelineElement.type,
            name: currentPipelineElement.name
          })
        } if (item.shape === 'edge') {
          // 获取所有线连接的起点和终点的id
          g.setEdge(item.source.cell, item.target.cell)
          g.setEdge(item.target.cell, item.source.cell)
        }
      })
      return g
    },