前端流程图(DAG)简单实现(三)[完结]

没看过(一)的选手请点我
 没看过(二)的选手请点我

本期内容将实现以下操作: 整图拖动 整图缩放 全屏操作 橡皮筋选框

配套阅读: github地址性感网站在线模拟->点击step8

ezgif-1-c325e1915bf9.gif

下面放一个工作中使用的较复杂模型

模型示例.png

十一、整图拖动的实现

graph_drag.png

整图拖动的实现
把整图放进svg内部的一个g元素内, 动态传入g元素上transfrom的translate进行位置的变换,由于是组件的状态值(state),笔者不建议放入vue-x进行管控,建议放入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使用了vue-x来管控 , 是想证明, 组件的状态管理, 没有统一规范, 但是依然强烈建议state交给组件, 数据(data)交给vue-x.
↓↓

    svgScale: state => state.dagStore.svgSize

这里新增一个悬浮栏组件, 方便用户操作. 没有用icon-font, 直接手打的字符, 后期再美化吧~~

<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
    },

由于是vue-x管控,所以在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);
    },

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

十三、全屏
目前只做了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 放置框选模态框的起点坐标及高宽,传递给组件使用即可.

十五、事件整理
截至目前,我们项目里充斥着大量的事件,模仿js单线程,通过currentEvent来控制事件行为, 通过监听触发对应事件,进行事件分发.

 /**
     * 事件分发器
     */
    dragPre(e, i, item) {
      // 准备拖动节点
      this.setInitRect(); // 工具类 初始化dom坐标
      this.currentEvent = "dragPane"; // 修正行为
      this.choice.index = i;
      this.timeStamp = e.timeStamp;
      this.selPaneNode(item.id);
      this.setDragFramePosition(e);
      e.preventDefault();
      e.stopPropagation();
      e.cancelBubble = true;
    },
    dragIng(e) {
      // 事件发放器 根据currentEvent来执行系列事件
      if (
        this.currentEvent === "dragPane" &&
        e.timeStamp - this.timeStamp > 200 // 拖动节点延迟200毫秒响应, 来判断点击事件
      ) {
        this.currentEvent = "PaneDraging"; // 确认是拖动节点
      } else if (this.currentEvent === "PaneDraging") {
        this.setDragFramePosition(e); // 触发节点拖动
      } else if (this.currentEvent === "dragLink") {
        this.setDragLinkPostion(e); // 触发连线拖动
      } else if (this.currentEvent === "sel_area_ing") {
        this.setSelAreaPostion(e); // 触发框选
      } else if (this.currentEvent === "move_graph") {
        this.graphMoveIng(e);
      }
    },
    dragEnd(e) {
      // 拖动结束
      if (this.currentEvent === "PaneDraging") {
        this.paneDragEnd(e); // 触发节点拖动结束
      }
      if (this.currentEvent === "sel_area_ing") {
        this.getSelNodes(this.simulate_sel_area);
        this.simulate_sel_area = {
          // 触发框选结束
          left: 0,
          top: 0,
          width: 0,
          height: 0
        };
      }
      this.currentEvent = null;
    },

回顾三期的内容, 用了三周的时间完成模型可视化需求的抽离并更新到简书上, 希望能给有需要的同仁以浅显的帮助,关于本项目有什么好的想法或者建议,欢迎转到gayhub添加微信.工作之余的时间可以交流.

谢谢每一位看到这里的同学
Thanks♪(･ω･)ﾉ

前端流程图(DAG)简单实现(三)[完结]

推荐阅读更多精彩内容