wangduanduan / jsplumb-chinese-tutorial Goto Github PK

View Code? Open in Web Editor NEW

1.3K 1.3K 247.0 4.25 MB

jsplumb中文教程, README中没有的内容，可以查看项目的Wiki。有问题提issue

Home Page: https://github.com/wangduanduan/jsplumb-chinese-tutorial/wiki

JavaScript 100.00%

jsplumb jsplumb-flow-chart

jsplumb-chinese-tutorial's Introduction

Hi there 👋

🌱 I’m currently learning Node.js, OpenSIPS, WebRTC , Go, c
👯 I’m looking to collaborate on OpenSIPS
💬 Ask me about Node.js SIP OpenSIPS and VoIP
📫 How to reach me (wechatId): suguswang177
⚡ Blog: wdd.js.org

jsplumb-chinese-tutorial's People

Contributors

Stargazers

Watchers

Forkers

w3ctech-home huangyaxiong jimjslibs yayoho songfeido chaixueyuan qiuzhangcheng meteor-mk amtech petterkangs aggasy xiyuan-code ghubcherrylove logosslee keithwp rio-li pyx20838 jeanswong ideepthink estellexin zhemin-steven linvinglor kakarote weimengxi shuangxiawu fuzitu guilixie wflin tjthink casspi onreadystatechange caryxyz delibit mayuzx lixinkuan lsm2039 uucomeon2011 zhangzongshan kpeng2016 cosdy xubangxuan cuilike kevinmakai lnocombo asyncgo 9776887181 hanren222 xsfcjy zyh1994 juzikeji g05357005 chauncey-zhang binglang1027 wmh404860242 lhz123cs wangwei5732 yuanziqian liubof2c liuyl999 zl3580 timujiang want90 halo-flow lr-account erectsu xulong2005 okfantasy007 fuhaoliang qinfengzhu jion1761 chenxin0122 bulesky123 xulingfeng-01 hatesthaha heiqitxt liang0 qq34347476 sophieroyal kyligence uamsunshine yzm542227694 zcong100 fength1981 1078797045 wujae qdmall dxlyf publicwmh byebyebt jqclub xieziyan zhangzifan1996 coder-yxz yang-yibu 2363894951 yuanbw flyskynet jingyangtai justgrin code-roadfly

jsplumb-chinese-tutorial's Issues

两个相同节点之间有多条线，如何删除连线只删除特定的某一条，而不是删除两个节点间所有的连线

ru'tu'suo'shi如图所示我只想删除这一条线，而不是两个节点间所有连接

如何实现连线可拖拽修改位置

官网示例如图：

没有找到这个示例的代码

想请教如何能实现点击连线，进入编辑态，然后可拖放连线位置。

最好能给到 demo 代码，感谢！

2.11. 限制节点拖动区域这里得看demo源码才知道怎么设置containment,希望可以把代码写文档上

请问endpoint可以设置多个scope吗？

addEndpoint时会设置scope string
现在需要两个特定不同scope的endpoint可以连接

demo 在IE浏览器下不兼容

https://wdd.js.org/visual-ivr/
这个demo 在IE上好像没有兼容耶

请问endpoint可以设置多个scope吗？

addEndpoint时会设置scope string
现在需要两个特定不同scope的endpoint可以连接

使用dragger拖拽控件加了Container属性之后，锚点偏移不在目标元素上

用的dragger实现拖拽控件进入画布，但是生成锚点的时候发现锚点与目标元素发生了偏移，如果不加Container属性，则缩放的时候会出问题

如何知道哪个锚点连到了哪个锚点

jsplumb并不知道你的数据结构。

当某个连线被建立时，会触发connection事件。

你需要订阅这个事件。这个事件会告诉你很多信息，包括从哪个点连接到哪个点。

告诉的信息是哪个节点与哪个节点相连了，怎么知道这个节点的下的锚点与另一个节点下的锚点相连了 ? 可以给锚点设置名字吗？

vue3项目中怎么使用呢？

vue3项目怎么导入这个库呀，官方那个git库里的vue3版本还原依赖会报找不到包的错
ERR_PNPM_FETCH_404 GET https://registry.npmjs.org/@jsplumbtoolkit%2Fbrowser-ui-plugin-miniview: Not Found - 404

大佬，官网的流程图整体的缩放、放大、拖拽效果有吗？

https://jsplumbtoolkit.com/demonstration/flowchart-builder

右边和下边拖动边界问题

你好，我有个问题一直没法解决，没有线索。
如下图所示，每次拖动到边界并放置节点，下次拖动就可以拖动超出边界一些距离，超出的距离为锚点的宽度（见下图2黑点）然后这个距离是可以累加的，每次超出边界一点下次拖动就可以超出更多一点（增加的就是锚点宽度），请问有遇到类似问题吗？

在react中使用，修改渲染数据后调用 repaint 没效果

锚点是通过遍历数据渲染出来的，需求是删除锚点数据，视图更新后能删除掉页面中的线条

jsplumb社区版最新文档地址

http://jsplumb.github.io/jsplumb/home.html

多个click事件怎么停止事件传播

jspInstance绑定了边的click事件，同时#container也onclick了一个事件，单击时，两个click事件都会触发，e.stopPropagation并没有用

不知道能否只让边的click生效呢？

jsPlumb.detachEveryConnection()报错

显示没有这个方法

怎样只隐藏端点，但是不隐藏连线

jsPlumb.hide("window5", true); 隐藏节点的所有端点和连线，我想问一下有隐藏所有端点但是不隐藏连线的属性吗

重新初始化JsPlumb 点击节点会报错 Cannot read property 'default' of undefined

官网文档好像没有说如何销毁这个实例化对象
直接将变量重置为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;
  }
  ...
}

请问怎么做连线上的动画，线已经画好了，有东西在线上动，像官网上的那个一样

https://jsplumbtoolkit.com/

新增节点如何建立连接线，并保证布局正确及可拖拽

需求：在已经初始化和已建立连接关系的节点情况下，点击某节点上的添加按钮，在此节点的嵌套结构上添加子节点，并进行父子节点连接，保证连接线不偏移
背景：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内部重新更新的方法

我使用connect 连接线多条的话线重叠怎么办纠结很久了怎么设置重叠线与线的间距?

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)