拓扑图编辑器-jsplum导入和设置

前言

jsplumb 有2个版本：

• Toolkit Edition（付费版），功能集成的比较丰富，demo完善
• Community Edition（社区版本），很多功能都没有，需要自己添加
  最终我用的Community Edition，因为不收费。
  推荐大家结合 jsplumb 中文基础教程和官方文档一起学习。

浏览器兼容性

1.7.x版本是支持IE8的最后版本。从2.0.0版本开始，最低支持IE9，社区版仅适用于支持SVG的现代浏览器。

安装jsPlumb

npm install jsplumb

初始化jsPlumb

在DOM初始化之前，不应该调用jsPlumb。应该绑定到jsPlumb 上的事件ready上（或正在使用的jsPlumb的实例）：

import { jsPlumb } from 'jsplumb' //react中引入jsplumb

//componentDidMount生命周期中调用jsplumb
componentDidMount() {
  jsPlumb.bind("ready", function() {
    ...           
    // your jsPlumb related init code goes here
    ...  
  });
}

或者

import { jsPlumb } from 'jsplumb' //react中引入jsplumb

//componentDidMount生命周期中调用jsplumb
componentDidMount() {
  jsPlumb.ready(function() {
    ...         
    // your jsPlumb related init code goes here
    ...
  });
}

ready在jsPlumb初始化之后绑定，会立即执行回调。

多个jsPlumb实例

默认情况，jsPlumb在浏览器窗口中注册，为整个页面提供一个静态实例。还可以使用该getInstance方法生成jsPlumb的单独实例，例如：

var jsPlumbInstance = jsPlumb.getInstance();

建议尽可能使用jsPlumb的单独实例。

接下来就可以使用jsPlumbInstance：

jsPlumbInstance.importDefaults({
  Connector : [ "Bezier", { curviness: 150 } ],
  Anchors : [ "TopCenter", "BottomCenter" ]
});

jsPlumbInstance.connect({
  source:"element1", 
  target:"element2", 
  scope:"someScope" 
});

元素ID

jsPlumb使用id属性来操作元素。如果id未设置，jsPlumb将为元素创建一个id。建议开发时为UI中的元素设置适当的id。

容器

容器是节点可以拖拽的区域。
有三种方式设置：

//方法一：设置id为foo的元素为容器
jsPlumbInstance.setContainer(document.getElementById("foo"));

//方法二：设置id为containerId的元素为容器
jsPlumbInstance.setContainer("containerId");

//方法三：设置id为foo的元素为容器
var jsPlumbInstance = jsPlumb.getInstance({
  Container: "foo"
});

注：设置容器的position属性为relative，因为jsPlumb使用绝对定位，jsPlumb相对于容器设置元素位置。

设置节点可拖拽

jsPlumbInstance.draggable("elementId");

注：必须设置节点position属性为absolute

建议：看完这篇文章后，下载jsplumb文件，打开demo，边看demo边看下面的文章，遇到不知道的api去查看，效率更高。

下一篇：拓扑图编辑器-jsplum基本配置