首发简书, 此为合并整理版.代码链接放在文末

最近公司需要做一个内部使用的机器学习平台,其中有一部分需求可以抽象为有向无环图,一边踩坑一边把研发过程记录了一下(其实是搜不到高耦合业务的成品轮子🤷),如果有类似需求,不妨泡杯枸杞,慢慢读完此篇.

教程实现的内容有:

模型节点的拖动, 建立关系(连线)

模型节点外部操作(节点的增删,前端实现的DAG环检测)

模型整图的平面移动(全图放缩,选框,全屏等)

关于前端可视化的技术选型.

初接需求, 考虑使用svg与canvas实现此内容,综合来看:

名称	svg	canvas
图像质量	矢量图随意缩放	位图,缩放失真
事件驱动	基于dom元素,绑定事件easy	脚本驱动,事件配置不灵活
性能	同上,故渲染元素过多会造成卡顿	性能极高,更有离屏canvas未来趋势
适用场景	交互行为较多量级较少图像	超多重复元素的渲染
学习成本	相对简单	上手有一定成本

故,整体选用svg,且目前市面上基于svg实现的成品有很多, 比如墨刀,processon,noflo,和阿里系的诸多平台,在部分场景下的表现相当优秀(当然也方便随时扒开代码学习写法啦~)

书接前文,切回正题

一、节点的实现

对应节点代码(初版)为

{
    name: "name1",
    description: "description1",
    id: 1,
    parentNode: 0,
    childNode: 2,
    imgContent: "",
    parentDetails: {
      a: "",
      b: ""
    },
    linkTo: [{ id: 2 }, { id: 3 }],
    translate: {
      left: 100,
      top: 20
    }
  }

后期(教程step5后)优化为:

{
    name: "name2",
    id: 2,
    imgContent: "",
    pos_x: 300,
    pos_y: 400,
    type: 'constant',
    in_ports: [0, 1, 2, 3, 4],
    out_ports: [0, 1, 2, 3, 4]
 }

请忽略灵魂绘图师的抽象,一切基于数据驱动,模型节点只需要仿照上图与后端研发交互即可.

二、模型节点连线的实现

<path
  class="connector"
  v-for="(each, n) in item.linkTo" :key="n"
  :d="computedLink(i, each, n)">
</path>

基于vue实现所以直接用了:d 动态计算贝塞尔曲线,思路是利用出入节点的id计算起始位置,对曲线公式进行赋值点击->关于贝塞尔曲线可参考https://brucewar.gitbooks.io/svg-tutorial/15.SVG-path%E5%85%83%E7%B4%A0.html

三、节点拖拽的实现

dragPre(e, i) {
      // 准备拖动节点
      this.setInitRect(); // 初始化画板坐标
      this.currentEvent = "dragPane"; // 修正行为
      this.choice.index = i;
      this.setDragFramePosition(e);
    },

初始化画板的原因: 由于元素在窗口的位置并非固定,每次需要初始坐标, 方便计算相对位移量.

<g
        :transform="`translate(${dragFrame.posX}, ${dragFrame.posY})`"
        class="dragFrame">
          <foreignObject width="180" height="30" >
            <body xmlns="http://www.w3.org/1999/xhtml">
              <div
              v-show="currentEvent === 'dragPane'"
              class="dragFrameArea">
              </div>
            </body>
          </foreignObject>
        </g>

mousedown时获取拖拽元素的下标,修正坐标

dragIng(e) {
      if (this.currentEvent === "dragPane") {
        this.setDragFramePosition(e);
        // 模拟框随动
      }
    },
setDragFramePosition(e) {
      const x = e.x - this.initPos.left; // 修正拖动元素坐标
      const y = e.y - this.initPos.top;
      this.dragFrame = { posX: x - 90, posY: y - 15 };
    }

拖动时给模拟拖动的元素赋值位置

dragEnd(e) {
      // 拖动结束
      if (this.currentEvent === "dragPane") {
        this.dragFrame = { dragFrame: false, posX: 0, posY: 0 };
        this.setPanePosition(e); // 设定拖动后的位置
      }
      this.currentEvent = null; // 清空事件行为
    },
setPanePosition(e) {
      const x = e.x - this.initPos.left - 90;
      const y = e.y - this.initPos.top - 15;
      const i = this.choice.index;
      this.DataAll[i].translate = { left: x, top: y };
    },

拖动结束把新的位置赋值给对应元素,当然在实际项目中, 每次变更需要跟后台交互这些数据, 不需要前端模拟数据变更的,直接请求整张图的接口重新渲染就好了,更easy

四、节点连线拖拽的实现

和上一步类似,我们也是通过监听mousedown mousemove 与 mouseup这些事件.来实现节点间连线的拖拽效果.唯一难点在于计算起始的位置.

<g>
          <path
          class="connector"
          :d="dragLinkPath()"
          ></path>
        </g>

首先来个path

setInitRect() {
      let { left, top } = document
        .getElementById("svgContent")
        .getBoundingClientRect();
      this.initPos = { left, top }; // 修正坐标
    },
    linkPre(e, i) {
      this.setInitRect();
      this.currentEvent = "dragLink";
      this.choice.index = i;
      this.setDragLinkPostion(e, true);
      e.preventDefault();
      e.stopPropagation();
    },

mousedown修正坐标

dragIng(e) {
      if (this.currentEvent === "dragLink") {
        this.setDragLinkPostion(e);
      }
    },

mousemove的时候确定位置

linkEnd(e, i) {
      if (this.currentEvent === "dragLink") {
        this.DataAll[this.choice.index].linkTo.push({ id: i });
        this.DataAll.find(item => item.id === i).parentNode = 1;
      }
      this.currentEvent = null;
    },
    setDragLinkPostion(e, init) {
      // 定位连线
      const x = e.x - this.initPos.left;
      const y = e.y - this.initPos.top;
      if (init) {
        this.dragLink = Object.assign({}, this.dragLink, {
          fromX: x,
          fromY: y
        });
      }
      this.dragLink = Object.assign({}, this.dragLink, { toX: x, toY: y });
    },

mouseup的时候判断连入了哪个元素

五、整合以上步骤, 组件抽离

随着内容的增多,我们需要把所有内容整合, 基于耦合内容对组件进行分割,具体可看目录结构

所有的连线变成arrow组件,只继承坐标位置用以渲染 simulateFrame和simulateArrow只动态继承拖拽时的坐标,用以模拟拖拽效果

六、节点拖拽添加的实现

面向过程来看, 节点拖动无非3个操作:

·拖动前判断当前情况下能否拖动, 拖动的元素携带的节点类型,节点名称等参数

·拖动中模拟的节点随鼠标进行位移,将参数赋值给模拟的节点

·拖动停止判断松手位置是否在画板中, ( 更改模型数据 | 调用后台接口 )

所以我们需要一个能够全屏移动的模拟元素 如图 class='nodesBus-contain'

<nodes-bus v-if="dragBus" :value="busValue.value" :pos_x="busValue.pos_x" :pos_y="busValue.pos_y" />

这个元素在全局dom中位置仅次于最大容器,接收坐标位置和展示名称.

      dragBus: false,
      busValue: {
        value: "name",
        pos_x: 100,
        pos_y: 100
      }

最外层组件使用dragBus控制是否展示和位置等.

  <div class="page-content" @mousedown="startNodesBus($event)" @mousemove="moveNodesBus($event)" @mouseup="endNodesBus($event)">

外层容器3个事件, mouseDown, mouseMove, mouseUp

<span @mousedown="dragIt('拖动1')">拖动我吧1</span>
<span @mousedown="dragIt('拖动2')">拖动我吧2</span>
dragIt(val) {
      sessionStorage["dragDes"] = JSON.stringify({
        drag: true,
        name: val
      });
    }

需要点击触发拖动的元素使用缓存来传递数据,控制模拟节点.

startNodesBus(e) {
      /**
       *  别的组件调用时, 先放入缓存
       * dragDes: {
       *    drag: true,
       *    name: 组件名称
       *    type: 组件类型
       *    model_id: 跟后台交互使用
       * }
       **/
      let dragDes = null;
      if (sessionStorage["dragDes"]) {
        dragDes = JSON.parse(sessionStorage["dragDes"])
      }
      if (dragDes && dragDes.drag) {
        const x = e.pageX;
        const y = e.pageY;
        this.busValue = Object.assign({}, this.busValue, {
          pos_x: x,
          pos_y: y,
          value: dragDes.name
        });
        this.dragBus = true;
      }
    }

冒泡到最上层组件时触发容器的mouseUp事件, 使模拟的节点展示,并赋值需要的参数.使用缓存来控制行为,是为了防止别的无关元素干扰.

moveNodesBus(e) {
      if (this.dragBus) {
        const x = e.pageX;
        const y = e.pageY;
        this.busValue = Object.assign({}, this.busValue, {
          pos_x: x,
          pos_y: y
        });
      }
    },

移动中的行为很简单,只需要动态将鼠标的页面位置赋值进入即可.

endNodesBus(e) {
      let dragDes = null;
      if (sessionStorage["dragDes"]) {
        dragDes = JSON.parse(sessionStorage["dragDes"])
      }
      if (dragDes && dragDes.drag && e.toElement.id === "svgContent") {
        const { model_id, type } = dragDes;
        const pos_x = e.offsetX - 90; // 参数修正
        const pos_y = e.offsetY - 15; // 参数修正
        const params = {
          model_id: sessionStorage["newGraph"],
          desp: {
            type,
            pos_x,
            pos_y,
            name: this.busValue.value
          }
        };
        this.addNode(params);
      }
      window.sessionStorage["dragDes"] = null;
      this.dragBus = false;
    }

取出mouseUp时的鼠标位置, 矫正之后更改模型数据即可, 这里调用的this.addNode(params)来自于vuex, 在后文会对vuex进行统一讲解.

七、节点的删除

删除节点使用右键调出选项框,这里我们可以监听元素的右键行为,并禁掉所有默认行为.

        <g
        v-for="(item, i) in DataAll.nodes"
        :key="'_' + i" class="svgEach"
        :transform="`translate(${item.pos_x}, ${item.pos_y})`"
        @contextmenu="r_click_nodes($event, i)">
---------------------------------------------------------------------------
  r_click_nodes(e, i) { // 节点的右键事件
      this.setInitRect()
      const id = this.DataAll.nodes[i].id;
      const x = e.x - this.initPos.left;
      const y = e.y - this.initPos.top;
      this.is_edit_area = {
        value: true,
        x,
        y,
        id
      }
      e.stopPropagation();
      e.cancelBubble = true;
      e.preventDefault();
    }

然后将操作的节点id和鼠标位置传给选项模拟组件nodesBus.vue 以保证选项框出现在合适位置. 这里还有一个坑, 我们要保证点击其他位置可以关闭模态框,所以需要加一层遮罩,在这里笔者取了个巧,并没有加一层cover div

 <foreignObject width="100%" height="100%" style="position: relative" @click="click_menu_cover($event)">
        <body xmlns="http://www.w3.org/1999/xhtml" :style="get_menu_style()">
            <div class="menu_contain">
                <span @click="delEdges">删除节点</span>
                <span>编辑</span>
                <span>干点别的啥</span>
            </div>
        </body>
 </foreignObject>
-------------------------------------------------
click_menu_cover(e) {
      this.$emit('close_click_nodes')
      e.preventDefault();
      e.cancelBubble = true;
      e.stopPropagation();
 },

直接在组件内部拦截mouseDown 关闭弹框即可.

let params = {
        model_id: sessionStorage['newGraph'],
        id: this.isEditAreaShow.id
 }
this.delNode(params)

model_id是本项目跟后台交互的参数请无视 拿到id直接调用vuex的delNode即可

八、连线,节点的删除及vuex的使用

为了组件分的更加细致,方便组件间的数据共享,引入vuex作为本项目的数据承接.多组件共同使用dagStore.js的DataAll,

    addEdge: ({ commit }, { desp }) => { // 增加边
      commit('ADD_EDGE_DATA', desp)
    },
    delEdge: ({ commit }, { id }) => { // 删除边
      commit('DEL_EDGE_DATA', id)
    },
    moveNode: ({ commit }, params) => { // 移动点的位置
      commit('MOVE_NODE_DATA', params)
    },
    addNode: ({ commit }, params) => { // 增加节点
      commit('ADD_NODE_DATA', params)
    },
    delNode: ({ commit }, { id }) => { // 删除节点
      commit('DEL_NODE_DATA', id)
    },

state的数据结构为

DataAll: {
      nodes: [{
        name: "name5",
        id: 1,
        imgContent: "",
        pos_x: 100,
        pos_y: 230,
        type: "constant",
        in_ports: [0, 1, 2],
        out_ports: [0, 1, 2, 3, 4]
      }],
      edges: [{
        id: 1,
        dst_input_idx: 1,
        dst_node_id: 1,
        src_node_id: 2,
        src_output_idx: 2
      }],
      model_id: 21
    }

所有操作只更改state中的DataAll即可.

ADD_NODE_DATA: (state, params) => {
      let _nodes = state.DataAll.nodes
      _nodes.push({
        ...params.desp,
        id: state.DataAll.nodes.length + 10,
        in_ports: [0, 1, 2, 3, 4],
        out_ports: [0, 1, 2, 3, 4]
      })
}

节点新增

DEL_NODE_DATA: (state, id) => {
      let _edges = []
      let _nodes = []
      state.DataAll.edges.forEach(item => {
        if (item.dst_node_id !== id && item.src_node_id !== id) {
          _edges.push(item)
        }
      })
      state.DataAll.nodes.forEach(item => {
        if (item.id !== id) {
          _nodes.push(item)
        }
      })
      state.DataAll.edges = _edges
      state.DataAll.nodes = _nodes
 }

节点删除

DEL_EDGE_DATA: (state, id) => {
      let _edges = []
      state.DataAll.edges.forEach((item, i) => {
        if (item.id !== id) {
          _edges.push(item)
        }
      })
      state.DataAll.edges = _edges
},

节点间连线的清除

ADD_EDGE_DATA: (state, desp) => {
      let _DataAll = state.DataAll
      _DataAll.edges.push({
        ...desp,
        id: state.DataAll.edges.length + 10
      })
      /**
       * 检测是否成环
       **/
      let isCircle = false
      const { dst_node_id } = desp // 出口 入口id
      const checkCircle = (dst_node_id, nth) => {
        if (nth > _DataAll.nodes.length) {
          isCircle = true
          return false
        } else {
          _DataAll.edges.forEach(item => {
            if (item.src_node_id === dst_node_id) {
              console.log('目标节点是', item.src_node_id, '次数为', nth)
              checkCircle(item.dst_node_id, ++nth)
            }
          })
        }
      }
      checkCircle(dst_node_id, 1)
      if (isCircle) {
        _DataAll.edges.pop()
        alert('禁止成环')
      }
}

上面的代码为节点的增加,其中添加了一个是否成环的检测, 不断递归节点, 从目标节点身上寻找节点路径,如果循环次数超过节点总数, 则证明出现了环,取消操作.

在实际项目中, 每一步操作都可以传给后端,因此前端没有很大计算量,由后端同学负责放在缓存中计算

九、整图拖动的实现

整图拖动的实现把整图放进svg内部的一个g元素内, 动态传入g元素上transfrom的translate进行位置的变换,由于是组件的状态值(state),笔者不建议放入vuex进行管控,建议放入vue组件里的data即可, 在本项目中笔者存入了sessionStorage, 方便后面精确计算当前鼠标位置和原始比例中鼠标的所属位置.

 svgMouseDown(e) {
      // svg鼠标按下触发事件分发
      this.setInitRect();
      if (this.currentEvent === "sel_area") {
        this.selAreaStart(e);
      } else {
        // 那就拖动画布
        this.currentEvent = "move_graph";
        this.graphMovePre(e);
      }
    },

事件触发: 在svg画布mousedown的时候进行事件分发

 /**
     * 画布拖动
     */
    graphMovePre(e) {
      const { x, y } = e;
      this.svg_trans_init = { x, y };
      this.svg_trans_pre = { x: this.svg_left, y: this.svg_top };
    },
    graphMoveIng(e) {
      const { x, y } = this.svg_trans_init;
      this.svg_left = e.x - x + this.svg_trans_pre.x;
      this.svg_top = e.y - y + this.svg_trans_pre.y;
      sessionStorage["svg_left"] = this.svg_left;
      sessionStorage["svg_top"] = this.svg_top;
    },

在mousemove的过程中监听鼠标动态变化, 通过比较mousedown的初始位置,来更改当前画布位置 关于坐标计算的问题放在整图缩放里讲, 回归坐标计算需要考虑缩放倍数

十、整图缩放的实现 & 当前鼠标位置计算原始坐标

同十一, 通过svg下面g标签的transform: scale(x), 来进行节点的整体缩放

    <g :transform="` translate(${svg_left}, ${svg_top}) scale(${svgScale})`" >

在这里svgScale使用了vuex来管控 , 是想证明, 组件的状态管理, 没有统一规范, 但是依然强烈建议state交给组件, 数据(data)交给vuex.
↓↓

    svgScale: state => state.dagStore.svgSize

这里新增一个悬浮栏组件, 方便用户操作.

<template>
     <g>
        <foreignObject width="200px" height="30px" style="position: relative">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <div class="control_menu">
                <span @click="sizeExpend">╋</span>
                <span @click="sizeShrink">一</span>
                <span @click="sizeInit">╬</span>
                <span :class="['sel_area', 'sel_area_ing'].indexOf(currentEvent) !== -1 ? 'sel_ing' : ''" @click="sel_area($event)">口</span>
                <span @click="fullScreen">{{ changeScreen }}</span>
            </div>
        </body>
        </foreignObject>
    </g>
</template>

 /**
     *  svg画板缩放行为
     */
    sizeInit() {
      this.changeSize("init"); // 回归到默认倍数
      this.svg_left = 0; // 回归到默认位置
      this.svg_top = 0;
      sessionStorage['svg_left'] = 0;
      sessionStorage['svg_top'] = 0;
    },
    sizeExpend() {
      this.changeSize("expend"); // 画板放大0.1
    },
    sizeShrink() {
      this.changeSize("shrink"); // 画板缩小0.1
    },

由于是vuex管控,所以在mutation里改变svgSize

CHANGE_SIZE: (state, action) => {
      switch (action) {
        case 'init':
          state.svgSize = 1
          break
        case 'expend':
          state.svgSize += 0.1
          break
        case 'shrink':
          state.svgSize -= 0.1
          break
        default: state.svgSize = state.svgSize
      }
      sessionStorage['svgScale'] = state.svgSize
    },

截至目前, 我们已经完成了graph的坐标移动和缩放功能,下面有个重要的问题,就是我们在操作坐标行为的时候,拿到的只能是在组件中的坐标, 这样会导致所有的结果都是错位的,我们需要重新计算,拿回无缩放无位移时的真正坐标.

以节点拖动结束为例

paneDragEnd(e) {
      // 节点拖动结束
      this.dragFrame = { dragFrame: false, posX: 0, posY: 0 }; // 关闭模态框
      const x = // x轴坐标需要减去X轴位移量, 再除以放缩比例 减去模态框宽度一半
        (e.x - this.initPos.left - (sessionStorage["svg_left"] || 0)) / this.svgScale -
        90;
      const y = // y轴坐标需要减去y轴位移量, 再除以放缩比例 减去模态框高度一半
        (e.y - this.initPos.top - (sessionStorage["svg_top"] || 0)) / this.svgScale -
        15;
      let params = {
        model_id: sessionStorage["newGraph"],
        id: this.DataAll.nodes[this.choice.index].id,
        pos_x: x,
        pos_y: y
      };
      this.moveNode(params);
    },

所有用得到坐标的位置,都需要减去横纵坐标偏移量再除以缩放的比例获取原始比例.代码不再赘述.

十一、全屏

以chrome浏览器的为例, 不同浏览器都元素放缩有着不同的api

    fullScreen() {
      if (this.changeScreen === "全") {
        this.changeScreen = "关";
        let root = document.getElementById("svgContent");
        root.webkitRequestFullScreen();
      } else {
        this.changeScreen = "全";
        document.webkitExitFullscreen();
      }
    }

document.getElementById('svgContent').webkitRequestFullScreen() 将该元素全屏。 document.webkitExitFullScreen() 退出全屏.

十二、橡皮筋选框

橡皮筋选框的思路是, 拖动一个div模态框,获取左上和右下的坐标, 改变两坐标内的节点的选取状态即可.

    <div :class="choice.paneNode.indexOf(item.id) !== -1 ? 'pane-node-content selected' : 'pane-node-content'">
      choice: {
        paneNode: [], // 选取的节点下标组
        index: -1,
        point: -1 // 选取的点数的下标
      },

选取状态为组件的状态,故放在组件管控,不走vuex. 框选只需要把选择元素的id push到paneNode里即可.

selAreaStart(e) {
      // 框选节点开始 在mousedown的时候调用
      this.currentEvent = "sel_area_ing";
      const x =
        (e.x - this.initPos.left - (sessionStorage["svg_left"] || 0)) /
        this.svgScale;
      const y =
        (e.y - this.initPos.top - (sessionStorage["svg_top"] || 0)) /
        this.svgScale;
      this.simulate_sel_area = {
        left: x,
        top: y,
        width: 0,
        height: 0
      };
    },
    setSelAreaPostion(e) {
      // 框选节点ing  
      const x =
        (e.x - this.initPos.left - (sessionStorage["svg_left"] || 0)) /
        this.svgScale;
      const y =
        (e.y - this.initPos.top - (sessionStorage["svg_top"] || 0)) /
        this.svgScale;
      const width = x - this.simulate_sel_area.left;
      const height = y - this.simulate_sel_area.top;
      this.simulate_sel_area.width = width;
      this.simulate_sel_area.height = height;
    },
    getSelNodes(postions) {
      // 选取框选的节点
      const { left, top, width, height } = postions;
      this.choice.paneNode.length = 0;
      this.DataAll.nodes.forEach(item => {
        if (
          item.pos_x > left &&
          item.pos_x < left + width &&
          item.pos_y > top &&
          item.pos_y < top + height
        ) {
          this.choice.paneNode.push(item.id);
        }
      });
      console.log("目前选择的节点是", this.choice.paneNode);
    },

this.simulate_sel_area 放置框选模态框的起点坐标及高宽,传递给组件使用即可.

十三、事件整理

截至目前,我们项目里充斥着大量的事件,这里我们可以通过currentEvent来控制事件行为, 通过监听触发对应事件,进行事件分发.

    /**
     * 事件分发器
     */
    dragIng(e) {
     // 事件发放器 根据currentEvent来执行系列事件
      switch (this.currentEvent) {
        case 'dragPane':
          if (e.timeStamp - this.timeStamp > 200) {
            this.currentEvent = "PaneDraging"; // 确认是拖动节点
          };
          break;
        case 'PaneDraging':
           this.setDragFramePosition(e); // 触发节点拖动
           break;
        case 'dragLink':
          this.setDragLinkPostion(e); // 触发连线拖动
          break;
        case 'sel_area_ing':
          this.setSelAreaPostion(e); // 触发框选
          break;
        case 'move_graph':
          this.graphMoveIng(e);
          break;
        default: () => { }
      }
    }

回顾所有内容, 共计三周的时间完成模型可视化需求的实现与组件抽离, 希望能给有需要的同仁以浅显的帮助,所有代码并非最佳实践,只愿抛砖而引玉。

具体代码可前往github查看点击跳转:https://github.com/murongqimiao/DAGBoard.

或前往http://zhanglizhong.cn查看DEMO