jointjs从0到1实现dataMapping(数据连接器)遇到的所有问题以及总结(全网最详细)-优快云博客

本文链接：https://blog.youkuaiyun.com/init_yanxiao/article/details/132018090

使用的框架背景是Vue3 ＋ vite 全部个人完成
jointjs官网文档写的太差劲了而且国内根本没有几个正经的joint文章所以全部记录下来希望可以帮到更多的人

dataMapping成品演示

在这里插入图片描述
点击确定以后转化为Jointjs画布----------------------------------

双击实体进行单独映射-------------------------------
![在这里插入图片描述](https://img-blog.csdnimg.cn/be5cfec50d8444508d603b6466ed6ae0.png

自动映射---------------------------------------------------

在这里插入图片描述
---------------------------下面是遇到的问题汇总----------------------------

1、遇到的第一个问题，使用jointjs plus(付费版) 出现引入失败的问题

现在国内给到的很多写法都是错误的！！！
首先去官网获取joint plus的demo体验包（官网有体验包下载方法时效一个月我后续找到了无限使用的方法）
邮箱获得一个rappid.zip的压缩包然后解压会获得demo的项目，将需要的使用的demo放到自己的项目去
还会获得一个jointjs的密钥并且该密码就是jointjspuls包！该密钥是每个人独一份的
在这里插入图片描述
接下来是引入rappid 引入进项目

// 错误写法 如果使用该种引入方法 列如 dia tools 类中的方法都是取不到的，因为jointjs npm上是阉割版
import joint from jointjs 
// 正确写法   注意后面还要加一个/rappid 因为是密钥编译器无法深度编译我们要精确引入
import {
    dia, setTheme, shapes, ui, linkTools, util } from '@clientio/rappid/rappid'
// 如Graph 、 Paper 都挂载在dia上

2、放入项目中当使用鼠标滚轮的时候画布会无限变大

// 在Paper 配置中你会找到autoResizePaper属性 该属性是很多demo都会自带的 
autoResizePaper: false // 关闭自动变化

3、接下来是开发一定会遇到的问题

jointjs 事件监听

// 连线的时候要做校验
new dia.Paper({
   validateConnection: (sourceView, srcMagnet, targetView, tgtMagnet) => {
   
// 比如我是同一个模型不能自己连自己
if (sourceView.model.boxType === targetView.model.boxType) return false // boxType是我自定义的
})
// boxType定义浅说一嘴
// 生成元素以后 直接赋值 
![在这里插入图片描述](https://img-blog.csdnimg.cn/ae09a87a5a3e47b2a0f2adc35796a5f0.png)
// 牵出一条Link的事件
paper.on('link:mouseleave', linkView => {
   })
// Link 起点 终点 连接完成前的事件
graph.on('change:source change:target', function (link) {
   })
// 元素被双击事件
paper.on('element:pointerdblclick', function (elementView) {
   }) //elementView被双击的元素