wangduanduan / jsplumb-chinese-tutorial Goto Github PK
View Code? Open in Web Editor NEWjsplumb中文教程, README中没有的内容,可以查看项目的Wiki。有问题提issue
Home Page: https://github.com/wangduanduan/jsplumb-chinese-tutorial/wiki
jsplumb中文教程, README中没有的内容,可以查看项目的Wiki。有问题提issue
Home Page: https://github.com/wangduanduan/jsplumb-chinese-tutorial/wiki
显示没有这个方法
已解决
所有官方文档链接都已失效。各位有空的可以更新
用的dragger实现拖拽控件进入画布,但是生成锚点的时候发现锚点与目标元素发生了偏移,如果不加Container属性,则缩放的时候会出问题
1.3.4. Overlays [todo]
1.3.4. Overlays这里的demo我参照了。但是没有效果,也没有报错
jsPlumb.connect({//画板初始化,线连接初始化
source: 'item_center',//连接线头部
target: 'item_right',//连接线尾部
anchor: ['Left', 'TopCenter'],//连接点在当前元件的部位:上下左右方位。
paintStyle: { stroke: 'red', strokeWidth: 5 },//线条设置
connectorOverlays: [ ['Arrow', { width: 20,length: 20,location: 0.5 }],
['Label', {label: 'Xxxxxxxx',cssClass: '',
labelStyle: {color: 'red'},
events: {
click: function (labelOverlay, originalEvent) {
console.log('click on label overlay for :' + labelOverlay.component)
console.log(labelOverlay)
console.log(originalEvent)
}
}
}]
],//设置箭头
endpointStyle: { fill: '#225588', outlineStroke: 'darkgray', outlineWidth: 300 }//节点的的颜色等设置
},common)
初始化时节点的位置只能自己计算得出吗,可不可以根据edge自动布局?
锚点是通过遍历数据渲染出来的,需求是删除锚点数据,视图更新后能删除掉页面中的线条
https://wdd.js.org/visual-ivr/
这个demo 在IE上好像没有兼容耶
请问:当我使用了addEndpoint,并将isSource和isTarget设置为true后,我设置拖动,只能拖动锚点,不能拖动节点,这是什么原因呢?麻烦解答一下,谢谢
addEndpoint时会设置scope string
现在需要两个特定不同scope的endpoint可以连接
您好,请问一下,这个项目是什么开源协议?
jsPlumb.hide("window5", true); 隐藏节点的所有端点和连线,我想问一下有隐藏所有端点但是不隐藏连线的属性吗
我现在页面上做显示后 点击锚点 触发新的查询 然后页面重新渲染 按照原来的写法报错
layout: { type: 'Hierarchical', parameters:{ orientation:"horizontal" }
比如这样是水平分布,当子节点相当多时,页面很难看,节点很长,设置为vertical则太高了,所以想要实现固定一个最大宽度,超过了自动换行,但没找到办法。
求教
内容很详细,流程很清晰,很感谢作者的分享!
jsplumb并不知道你的数据结构。
当某个连线被建立时,会触发connection事件。
告诉的信息是哪个节点与哪个节点相连了 ,怎么知道这个节点的下的锚点与另一个节点下的锚点相连了 ? 可以给锚点设置名字吗?
addEndpoint时会设置scope string
现在需要两个特定不同scope的endpoint可以连接
一个点初始连接多个点 应该如何操作
线无法回显,需要的参数已经给予
需求:在已经初始化和已建立连接关系的节点情况下,点击某节点上的添加按钮,在此节点的嵌套结构上添加子节点,并进行父子节点连接,保证连接线不偏移
背景:Vue,Ng6+等场景,增加节点通过更新data数据实现
现实现代码:
this.instance.setId(el, newId); // 已有实例上设置新添加节点的id
this.instance.connect({ // 已有实例上添加新的连接
source: 'item_left',
target: 'item_right',
endpoint: 'Rectangle',
connector: ['Bezier'],
anchor: ['Left', 'Right']
})
this.instance.revalidate(el) // 节约资源 重绘当前嵌套结构的父元素
this.instance.repaintEverything() //又试了这个 确保没有问题重绘所有
结果:
不进行setId() 设置ID connect方法提示 Cannot establish connection - source does not exist
执行setid 后可以正常建立连线但是source端连线锚点严重偏移;
并且之前设置的 jsPlumb.draggable('.window')在新添加的节点class=“window”上不起作用
1、文档是否存在在已有连接上添加新的连接的方法,类似jsPlumb.getConnections()对应的setConnections({source, target})
2、或者其他重新可添加节点,并建立连接的可通知jsplumb内部重新更新的方法
官网文档好像没有说如何 销毁这个实例化对象
直接将变量重置为null
后重新初始化 然后点击节点
会报以下错误
jsplumb.js?6a11:6335 Uncaught TypeError: Cannot read property 'default' of undefined
at root.jsPlumbInstance.eval (jsplumb.js?6a11:6335)
对应源码为mouseDownListener
函数中6335行代码var def = this.sourceEndpointDefinitions[elid][type];
报错
// when the user presses the mouse, add an Endpoint, if we are enabled.
var mouseDownListener = function (e) {
// on right mouse button, abort.
if (e.which === 3 || e.button === 2) {
return;
}
elid = this.getId(this.getElement(elInfo.el)); // elid might have changed since this method was called to configure the element.
// TODO store def on element.
var def = this.sourceEndpointDefinitions[elid][type];
// if disabled, return.
if (!def.enabled) {
return;
}
...
}
vue3项目怎么导入这个库呀,官方那个git库里的vue3版本还原依赖会报找不到包的错
ERR_PNPM_FETCH_404 GET https://registry.npmjs.org/@jsplumbtoolkit%2Fbrowser-ui-plugin-miniview: Not Found - 404
如何修改锚点样式
为什么我照着例子写,却没有连接线出来
jspInstance绑定了边的click事件, 同时#container也onclick了一个事件,单击时,两个click事件都会触发,e.stopPropagation并没有用
不知道能否只让边的click生效呢?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.