使用的框架背景是Vue3 ＋ vite 全部个人完成
jointjs官网文档写的太差劲了 而且国内根本没有几个正经的joint文章 所以全部记录下来 希望可以帮到更多的人
dataMapping成品演示
点击确定以后转化为Jointjs画布----------------------------------
双击实体进行单独映射-------------------------------
自动映射---------------------------------------------------
---------------------------下面是遇到的问题汇总----------------------------
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定义浅说一嘴
// 生成元素以后 直接赋值
// 牵出一条Link的事件
paper.on('link:mouseleave', linkView => {})
// Link 起点 终点 连接完成前的事件
graph.on('change:source change:target', function (link) {})
// 元素被双击事件
paper.on('element:pointerdblclick', function (elementView) {}) //elementView被双击的元素
jointjs 获取一个Link上的全部实例方法
刚创建完的link上是没有tools方法的！所以需要去容器中取
tools可以让我们在Link初始化的时候就加上自己的样式
paper.findViewByModel(link) // 获取link上的所有方法 包括tools
// 我使用的方式 将全部实例link放入linkTools方法中加样式 linkTools是我自己写的方法
// linkArr.forEach(link => {
// LinkTools(paper.findViewByModel(link), dataType, XpathEmpty)
// })
获取画布上的全部元素
Graph().toJSON().cells
4、接下来是重点 自定义端口 自定义事件 自定义按钮 自定义图片
// 自定义按钮
// 我开发的时候起点和终点都需要自定义 所以这时候起点终点的落点就需要我们自定义
首先我的元素是封装成了一个类 你们不用全部学我可以自己封装
然后我在table类中将新增端口的函数写好
当元素需要用到这个端口号的时候直接调用方法就可以
// 自定义图片 两种定义方式
自定义图片方法分两种， 一种是直接定义图片直接使用，缺点是挂载在元素上的图片触发事件会做向上冒泡，另一种方法是挂载在某一个元素上的图片，缺点是需要有一个父元素而图片需要为子元素
先说直接定义方法
// 首先在定义元素的atts中添加一个对象 对象名自定义 我的自定义图片是switchIconattrs: {switchIcon: {xlinkHref: new URL('/src/assets/logical/switch.png', import.meta.url).href,width: 32,height: 32,x: 45,y: 2}}
然后在attrs的同层级的markup中添加我们自定义的switchIcon对象 tagName为 ‘image’ 这样我们就可以看见图片了 X Y变量来控制位置
------------------------------分隔符 下面是父元素对象下定义自定义图片-------------------------------------
父元素在自定义图片
首先定义元素 这里我设置的父元素名就是 addLinkMinBtn 子元素为 addLink
attrs: {addLinkMinBtn: {class: 'min-button',cursor: 'pointer',fill: 'transparent',event: 'element:addLink:min',// transform: 'translate(48, 43)',width: 25,height: 25},addLink: {xlinkHref: new URL('/src/assets/logical/addLink.svg', import.meta.url).href,width: 25,height: 25,x: 48,y: 43}
}
然后在attrs的同层级的markup添加 父子元素
使用的框架背景是Vue3 ＋ vite
jointjs官网文档写的太差劲了 所以全部记录下来
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定义浅说一嘴
// 生成元素以后 直接赋值
// 牵出一条Link的事件
paper.on('link:mouseleave', linkView => {})
// Link 起点 终点 连接完成前的事件
graph.on('change:source change:target', function (link) {})
// 元素被双击事件
paper.on('element:pointerdblclick', function (elementView) {}) //elementView被双击的元素
jointjs 获取一个Link上的全部实例方法
刚创建完的link上是没有tools方法的！所以需要去容器中取
tools可以让我们在Link初始化的时候就加上自己的样式
paper.findViewByModel(link) // 获取link上的所有方法 包括tools
// 我使用的方式 将全部实例link放入linkTools方法中加样式 linkTools是我自己写的方法
// linkArr.forEach(link => {
// LinkTools(paper.findViewByModel(link), dataType, XpathEmpty)
// })
获取画布上的全部元素
Graph().toJSON().cells
4、接下来是重点 自定义端口 自定义事件 自定义按钮 自定义图片
// 自定义按钮
// 我开发的时候起点和终点都需要自定义 所以这时候起点终点的落点就需要我们自定义
首先我的元素是封装成了一个类 你们不用全部学我可以自己封装
然后我在table类中将新增端口的函数写好
当元素需要用到这个端口号的时候直接调用方法就可以
// 自定义图片 两种定义方式
自定义图片方法分两种， 一种是直接定义图片直接使用，缺点是挂载在元素上的图片触发事件会做向上冒泡，另一种方法是挂载在某一个元素上的图片，缺点是需要有一个父元素而图片需要为子元素
先说直接定义方法
// 首先在定义元素的atts中添加一个对象 对象名自定义 我的自定义图片是switchIconattrs: {switchIcon: {xlinkHref: new URL('/src/assets/logical/switch.png', import.meta.url).href,width: 32,height: 32,x: 45,y: 2}}
然后在attrs的同层级的markup中添加我们自定义的switchIcon对象 tagName为 ‘image’ 这样我们就可以看见图片了 X Y变量来控制位置
------------------------------分隔符 下面是父元素对象下定义自定义图片-------------------------------------
父元素在自定义图片
首先定义元素 这里我设置的父元素名就是 addLinkMinBtn 子元素为 addLink
attrs: {addLinkMinBtn: {class: 'min-button',cursor: 'pointer',fill: 'transparent',event: 'element:addLink:min',// transform: 'translate(48, 43)',width: 25,height: 25},addLink: {xlinkHref: new URL('/src/assets/logical/addLink.svg', import.meta.url).href,width: 25,height: 25,x: 48,y: 43}
}
然后在attrs的同层级的markup添加 父子元素
markup: [{tagName: 'g',selector: 'addLinkMinBtn',children: [{tagName: 'image',selector: 'addLink'}]}
]
这样就完成了父子组件的添加 细心的哥们应该看见那个event了 没错那个是用来自定义事件的 后面会说使用方式 很简单的
------------------------------------------------------------------------------------------------------------------------------------
// 自定义事件 两种定义方式
第一种方式 创建标识符让click事件通过判断去实现对于逻辑
1、自定义事件是在该table 或者 Link的某一个元素上设置一个标识符，当触发点击事件的时候 可以在元素的model上找到设置的标识符，然后做对于函数操作
上面自定义按钮的时候我讲过setButton是干嘛的 那么data-action 就是我们自定义的标识符 而popup就是标识符上的变量
// 点击事件 这是我项目里面的代码 你们要写可以按照我的思路 请不要原封不动的复制过来paper.on('element:pointerclick', async (elementView, evt) => {let action = evt.target.dataset.action//获取自定义属性if (action === 'popup') {removeCanvasDom(elementView, canvasData, dataType)saveMapping()initAuto(dom, canvasData, dataType, XpathEmpty, entityActiveFN, linkSelectActiveFN, saveMapping)}})
---------------------------------------------下面是第二种 自定义事件名 以及事件-------------------------------
适用场景是自己创建了一个icon或者一个图片需要触发单独的点击事件
attrs: {Image: {class: 'min-button',cursor: 'pointer',fill: 'transparent',event: 'element:addLink:min',// transform: 'translate(48, 43)',width: 25,height: 25}},
触发方式-----------------------------------------------------------
差不多踩的大部分的坑是这样了 国内jointjs使用的人真的很少 这个datamapping也花了我20多天 很多问题都是去国外的csdn上找的答案 希望我遇到的这些问题可以帮到你
