JointJS-Angular9实践

JointJS-Angular9实践

一、环境安装

1.安装juqery           

npm install jquery --save

npm install @types/jquery                  //这里是安装jquery的声明

2.安装backbone

npm install backbone --save

npm install @types/backbone               //这里是安装backbone的声明

3.安装jointjs

npm install jointjs --save

npm install @types/jointjs                  //这里是安装jointjs的声明

4.安装lodash

npm install lodash@3.10.1 --save

npm install @types/lodash@3.10.1          //这里是安装jointjs的声明的声明

遇到问题:1.Jointjs依赖jquery,backbone,lodash,要安装相应的模块

             2.JointJs的声明文件定义了一系列的声明,如果只安装依赖包,不安装声明会如下报错，导致在伏羲静态检查无法通过

二、组件模块导入

1. 首先在json引入相关的文件

2.在component中依次引入

如果不引入jquery,在编译时会提示如下错误：

三、组件初始化

1.HTML中定义一个div

 2.TS文件初始化

3.添加节点和连线

// 到这里已经基本实现了,节点的连接功能，下面根据设计稿，对组件进行自定义，并封装为一个新的构造类。

四、节点线条布局自定义

使用构造函数

效果:

自定义线条样式

在组件初始化的时候，使用自定义的线条

效果如下:

五、添加删除方法实现

六、拖拽添加节点

这里使用HTML5的最新原生拖拽事件来实现功能

1. 先使用原生的写法，进行尝试

     效果如下:

由于Angular的原因，原生的写法会报错。可以看到方法是写在div元素上面的，为了操作div，监听拖拽事件，很自然的想到可以使用自定义指令操作div。

2.使用自定义指令

定义两个指令，一个用来实现drag，一个用来实现drop

Drag指令如下:

ng g d drag

Drop指令如下

ng g d drop

HTML中写法如下:

效果如下：

事件输出成功！

3.在指令中添加数据输入

在实际业务中，待拖拽的div包含有多种属性，需要根据这些属性，生成对应的节点，需要在指令中添加输入。

Drag指令添加Input获取输入的是数据

效果如下

为了在drop时拿到这部分数据，需要利用dataTransfer进行如下数据的传递：

通过ev. dataTransfer.setData()方法 set数据

通过ev. dataTransfer.getData()方法 get到数据

效果如下：

4.封装公共方法-添加元素到画布

ng g s joint

为了在服务中使用jointjs,同样需要引入模块

在服务中定义全局变量，定义初始化init方法

定义在画布中添加节点方法

为了保证Ts文件和指令文件方法的一致性，统一导入服务，进行初始化和画布操作

效果如下

Drag时：

Drop时调用addNode方法:

这里只是演示，节点的position固定下来，实际业务可以获取到鼠标位置，并根据鼠标位置添加节点

七、节点和场景的事件

1.元素的点击事件-（element:pointerclick）

输出整个元素-效果如下：

可以在elementView.model.attributes获取到元素的属性

2.元素的点击时-显示轮廓和删除按钮

需要首先定义元素的轮廓tool和删除tool，定义如下：

其中removeButton的action方法,默认为删除元素，可以不写。如果需要自定义方法操作，则action必须为函数。这里需要注意的是普通函数和箭头函数返回的this有所区别，区别如下：

this为整个服务，可以获取到服务中定义的其他方法。

在点击元素时，元素添加tools

效果如下：

3.连线事件-（link:connect）

可以在linkView中获取到连线的source和target

可以在elementViewConnected中获取到被连接的元素

八、场景的导出和加载

利用graph的toJSON()方法可以将场景完全导出

数据如下：

包括节点和节点中的连线，利用graph的fromJSON方法可以重新加载出整个场景