使用jsplumb的一些笔记
欢迎就是需要使用jsplumb跟正在使用jsplumb的一起讨论 欢迎私聊
1.关于jsplumb的connection的一些事件
####connection拖动的事件
instance.bind('connectionDragStop', function(conn) {});
####连接废弃
instance.bind('connectionAborted', (conn, originalEvent) => {})
####在落下来某一个点之前
instance.bind('beforeDrop', (conn) => {})
####
instance.bind('beforeDrag', (conn) => {})
####
instance.bind('connectionDrag', (conn) => {})
####
instance.bind('beforeDetach', (conn) => {})
####想要拿到连线的点击事件啊,hover事件啊,都可以通过bind来实现
instance.bind('click', function(c) {})
等等这些事件吧~~~~~
2.就是关于连接线的一些样式问题
1.你可以在一个页面上实现多种连接的样式,这个都是可以实现的
2.有关于线是实线啊,虚线啊这些也都是可以实现的 虚线的话dashstyle可以来实现,应该是跟css差不多的
恩。。。。。
放一些废弃代码
initConnect(instance) {
var that = this;
instance.batch(function() {
for (const point of that.$store.state.nodes) {
that.initNode(instance, point.node_id)
if (point.child_nodes.length > || point.parent_node == 'root') {
instance.addEndpoint(point.node_id, {
uuid: `${point.node_id}-bottom`,
anchor: 'Bottom',
maxConnections: -,
// connectorStyle: { stroke: '#2FB39C', strokeWidth: 2 },
// connectorHoverStyle: {
// strokeWidth: 3,
// stroke: "yellow",
// },
deleteEndpointsOnEmpty: true,
dragOptions: {},
}, {
isSource: true,
isTarget: true,
});
}
if (point.parent_node !== 'root') {
instance.addEndpoint(point.node_id, {
uuid: `${point.node_id}-top`,
anchor: 'Top',
maxConnections: -,
deleteEndpointsOnEmpty: true,
}, {
isSource: true,
isTarget: true,
});
}
if (point.jump_nodes.length > ) {
point.jump_nodes.forEach((item, index) => {
instance.connect({
source: point.node_id,
target: item,
paintStyle: {
stroke: "#E72F1F",
strokeWidth: 2.5,
dashstyle: "4 2", },
maxConnections: -,
anchor: 'Right',
overlays: [
["Arrow",
{
width: ,
length: ,
location: ,
events: {
click: function() {
// alert('click')
}
}
}
],
["Custom", {
create: function(component) {
return $('<img src=' + shears + '>');
},
location: -,
events: {
click: function(e) {
that.deleteConfirmFun(instance, e.component)
}, }
}]
]
});
})
}
}
// init transition
for (const i of that.$store.state.lines) {
const uuid = [`${i[]}-bottom`, `${i[]}-top`];
instance.connect({
uuids: uuid,
});
} })
var sourceEndpoint=this.jsPlumbInstance.getEndpoint(`A1-bottom`);
console.log('sourceEndpoint',sourceEndpoint)
},
addConnect(point) {
var parent=this.findParentNode(point.node_id);
// console.log('parentNode',parentNode)
this.jsPlumbInstance.addEndpoint(point.node_id, {
uuid: `${point.node_id}-bottom`,
anchor: 'Bottom',
maxConnections: -,
deleteEndpointsOnEmpty: true,
dragOptions: {},
}, {
isSource: true,
isTarget: true,
});
this.jsPlumbInstance.addEndpoint(point.node_id, {
uuid: `${point.node_id}-top`,
anchor: 'Top',
maxConnections: -,
deleteEndpointsOnEmpty: true,
}, {
isSource: true,
isTarget: true,
});
var sourceEndpoint=this.jsPlumbInstance.getEndpoint(`${parent.node_id}-bottom`);
var targetEndpoint=this.jsPlumbInstance.getEndpoint(`${point.node_id}-top`);
const uuid = [`${parent.node_id}-bottom`, `${point.node_id}-top`];
this.jsPlumbInstance.connect({
source:sourceEndpoint,
target:targetEndpoint
})
this.jsPlumbInstance.repaintEverything({clearEdits:false})
},
deleteEndpoint() {
console.log('')
// jsPlumb.detach(conn);
// 删除他与子元素的连接
console.log(this.jsPlumbInstance)
// this.jsPlumbInstance.remove(this.nodes[0].node_id);
// this.jsPlumbInstance.empty(this.nodes[0].node_id); var a = this.jsPlumbInstance.getEndpoint(`${this.nodes[].node_id}-bottom`)
console.log('a', a)
this.jsPlumbInstance.deleteEndpoint(a)
},
恩。。。还有一个问题
就是如果你连线的元素发生了位置的转移,如果你是通过端点去连接的
然后我想说 是确实需要重绘的
如果你元素的位置发生了改变
有什么想说的 欢迎来指教
使用jsplumb的一些笔记的更多相关文章
- jsPlumb.jsAPI阅读笔记(官方文档翻译)
jsPlumb DOCS 公司要开始做流程控制器,所以先调研下jsPlumb,下文是阅读jsPlumb提供的document所产生的归纳总结 setup 如果不使用jQuery或者类jQuery库,则 ...
- [转]jsPlumb插件做一个模仿viso的可拖拉流程图
原贴:https://www.cnblogs.com/sggx/p/3836432.html 前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义 ...
- jsPlumb 学习笔记
介绍 使用svg完成画图,四个概念: anchor: endpoint在的位置,可通过name访问 endpoint:connection的一端节点,通过addPoint makeSource, co ...
- 前端流程图jsplumb学习笔记
1.这篇博客很好,另外两个是官网文档 http://www.cnblogs.com/leomYili/p/6346526.html https://jsplumbtoolkit.com/communi ...
- jsPlumb学习笔记
这就是一个给元素画连接线的工具. <!DOCTYPE html> <html> <head> <title>jsPlumb</title> ...
- jsplumb实现流程图
流程图使用工具汇总 jsPlumb,开源软件,推荐使用,参考学习链接: jsplumb学习笔记.基本概念.中文简易教程 jTopo myflow Go.js JointJS,属于商业软件 mxGrap ...
- git-简单流程(学习笔记)
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...
随机推荐
- 五、java面向对象编程_3
目录 十五.Object类 1.toString 2.equals 十六.对象转型(casting) 十七.动态绑定(多态) 十八.抽象类(abstract) 十九.final关键字 二十.接口 十五 ...
- R语言计算moran‘I
R语言计算moran‘I install.packages("maptools")#画地图的包 install.packages("spdep")#空间统计,m ...
- U33405 纽约
U33405 纽约 花费 \(w\) 元可以购买一辆容量为 \(w\) 的车 现在你有 \(n <= 2000\) 个物品, 搬运策略: 一直搬能放下里面最重的, 直到任意物品都不能搬上为止 求 ...
- SQL优化:
今日给人查找数据,时间关系,写个比较粗暴的SQL语句: #2s587ms#直接将所有表关联,比较粗暴 select go.businessId,dd.dict_namefrom fn_xte.gt ...
- np.isin判断数组元素在另一数组中是否存在
np.isin用法 觉得有用的话,欢迎一起讨论相互学习~Follow Me np.isin(a,b) 用于判定a中的元素在b中是否出现过,如果出现过返回True,否则返回False,最终结果为一个形状 ...
- bzoj千题计划106:bzoj1014 [JSOI2008]火星人prefix
http://www.lydsy.com/JudgeOnline/problem.php?id=1014 两个后缀的最长公共前缀:二分+hash 带修改带插入:splay维护 #include< ...
- myeclipse使用小结
1.项目设置编码格式 (1)全局编码设置:编码设置的方法:ToolBar-->Window-->Preferences-->General-->Workspace-->T ...
- python学习笔记2--list
一.list操作 list=['xiaohei','xiaobai','xiaohong']#定义一个数组 name=[]#定义一个空数组 #查 #下标是从0开始 print(list[1]) #-1 ...
- iOS AES128 CBC No Padding加密解密
最近的项目中数据传输用到加密,项目选择了AES128 CBC No Padding加密方式,PHP和Android方面的代码网上太多了.但是唯独没有iOS的,但是也有别的写法,但不是是AES128 C ...
- 20155234 2016-2017-2 《Java程序设计》第6周学习总结
20155234 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 Java将输入/输出抽象化为串流,数据有来源及目的地,衔接两者的是串流对象. 从应用程序角度 ...