vue + gojs 实现拖拽 流程图 （二）

一、项目的迭代。

    从数据结构到ui风格的整体重构，这个项目又有了新的变化。

   整体流程 如图一：

 

 模块流程侧边设置图二：

 

 伸缩当前灰色意图如图三：

为什么收起意图会有多条连线，是因为当前模块下的意图和部分模块有关系线，所以在收起时要知道当前模块下有几个意图和其他模块有关系。

 

二、整体用的js方法

     （一）画布里的功能js：

     

 

    （二）工具条js 方法：

      

三、功能分析

（一）、工具条中的功能方法

1、查看

注： 是通过gojs 实例中的makeSVG方法打开一个新窗口生成的一个svg

printDiagram() {
    var svgWindow = window.open();
if (!svgWindow) return;
var printSize = new go.Size(3000, 2000);
var bnds = this.diagram.documentBounds;
var x = bnds.x;
var y = bnds.y;
while (y < bnds.bottom) {
        while (x < bnds.right) {
            var svg = this.diagram.makeSVG({scale: 1.0, position: new go.Point(x, y), size: printSize});
svgWindow.document.body.appendChild(svg);
x += printSize.width;
}
        x = bnds.x;
y += printSize.height;
}
}

　　

（二）、居中

这里将调用CommandHandler.scrollToPart，先还原画布初始状态后执行动画以将视口滚动到节点所在的位置。

注：如果节点靠近边缘，除非您增加Diagram.scrollMargin，否则无法滚动视口，以使该节点更靠近视口的中心。

centerDiagram() {
            this.resetCanvas();
            this.diagram.commandHandler.scrollToPart(this.diagram.findNodeForKey(this.initModuleId));
},
 // 还原
        resetCanvas() {
            this.diagram.scale = 1;
            this.$refs.set.zoom = 100;
        },

 

 

尽请等待周六周日继续完善。

如有需求或者疑问加QQ讨论。