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

11 篇文章 0 订阅
3 篇文章 0 订阅

使用的框架背景是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被双击的元素

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中添加一个对象 对象名自定义 我的自定义图片是switchIcon
	attrs: {
				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定义浅说一嘴
// 生成元素以后 直接赋值 
![在这里插入图片描述](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被双击的元素

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中添加一个对象 对象名自定义 我的自定义图片是switchIcon
	attrs: {
				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上找的答案 希望我遇到的这些问题可以帮到你

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

颜笑·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值