jsPlumb文档翻译

工具箱版:

这个版本包装社区关注基本的数据模型,以及一些有用的UI布局等特性,和一个小部件提供平移/缩放功能。它提供了一个快速的方式构建应用程序与视觉连接的核心。

工具箱版本有一个商业,按照许可与可选的访问源代码和电子邮件的支持(加上每年更新新的发布版本)。这里有一些许可条款。

HomeHOME主页：

jsPlumb Toolkit(工具包）

jsPlumb工具包是一个包装的开源jsPlumb库提供了一些关键部分的功能:

1通过客户端数据绑定模板,支持声明式配置的连接

2一个潜在的有向图,允许您在几个方面查询数据。

3平移/缩放小部件能够序列化状态(手动或自动)本地存储或cookies。 4一个小地图部件协助大型数据集的导航。

5自动布局(分层,spring,圆形,绝对),加上自己编写的能力。

6一个强有力的声明性机制来定义的外观和行为的各个部分你的UI。 7数据加载/保存自动或点播。

8工具箱版本的jsPlumb社区作为一个依赖。当前版本的工具包是1.0.21,所需的最低版本的jsPlumb2.1.0.。

1.Getting Started（入门指南）

最好的地方开始自己受益匪浅的架构工具包是阅读文档的一个示例应用程序,数据库可视化工具或流程图设计师。然后,与你的许可的副本工具包,您可以使用繁重的其中一个应用程序创建一个克隆,并开始削减。 如果你宁愿从一个基本的框架，您还可以使用Grunt创建一个空的应用程序 （use Grunt to create an empty application） 或者,您可能想从文档开始。数据模型和基本概念页面开始环顾四周是最好的地方。简而言之,该工具包使用一个有向图作为其核心的数据结构。每个应用程序都需要jsPlumb——也就是说需要能够连接实体——可以认为的指示或无向图。

2.jsPlumb Community Edition（社区版）

工具箱版本是Community edition包装,而最直接的交互的Community edition jsPlumb抽象,与UI外观相关的设置一般管道直通到底层Community edition用于呈现内容。

注意,从版本2.1.0的开始,Community Edition支持组的概念,但工具箱版本,目前版本1.0.21,还没有。集团支持针对工具箱的版本1.1.0版。 这些页面推荐阅读:

Basic Concepts（基本概念）给你一个入门的基本UI类型中使用Community Edition。当呈现内容在工具箱,您将想要了

解不同类型的可用的以及他们如何可以配置。

1

Configuring Defaults（默认配置）默认设置用于jsPlumb解释道。这些可以使用工具箱中呈现内容。 Styling via CSS（CSS样式）你几乎肯定会想读这个页面。它向您展示了如何使用CSS样式jsPlumb视图。

?事实上建议阅读所有的社区版文档,使熟悉自己,但这些页面将介绍最重要的事情。

Getting Started Getting Started

虽然强烈建议你编写一个应用程序之前熟悉的基本概念jsPlumb工具箱,每个人都知道,开发人员想要和得到一些工作,然后再做一些研究。所以,有几个方法可以直接在工具箱。

Gruntfile.js和匹配方案.json是包含在你的工具箱的执照副本。这个Gruntfile有两个目标,允许您创建一个克隆的一个附带的示例应用程序工具包,或创建一个基本的“Hello World”应用程序。

Clone an example app via Grunt.克隆一个示例应用程序通过Grunt

在你的工具箱文件的根目录,运行这个命令(这是假定你在电脑上安装了Grunt,说明超出了本文的范围): grunt clone --app=database-visualizer --o= 这里我们克隆database-visualizer应用。您可以克隆任何附带工具箱的示威游行。完整的列表:

hierarchical.分层的；等级体系的 circular.通告 absolute.绝对；绝对事物 spring imageWidget

multiple倍数 多重 多种 database-visualizer flowchart-builder hello-world

如果你的your output directory输出目录已经存在,克隆将不会继续。否则,应用程序将克隆到合适的目录中,你可以通过访问index . html。记得主机应用程序的http服务器,而不是试图通过打开本地文件中使用它

Create an empty app via Grunt.创建一个空的应用程序通过Grunt

grunt create --o= Create an empty app manually.手动创建一个空的应用程序

有一百万种不同的方法从头创建一个页面,这里我们只讨论进口的基本要求:

CSS

jsPlumbToolkit-defaults.css (/css目录中找到)建议你包含默认的CSS。在这个文件,您将看到评论为每个风格细节是否它是一个绝对的要求,或建议,或只是一个化妆品工具包使用的风格展示应该如何设置。

2

Javascript

你需要引入两个JS，为下列:

o o

jsPlumb Community Version 2.1.0 or later jsPlumb Toolkit

当然,你可能会有自己的JS文件包含应用程序代码。 记得总是将你的应用程序的初始化: jsPlumbToolkit.ready({ // your code here }); 该方法包装jsPlumbready 函数,确保一切妥当之前调用API。

Ingest an existing jsPlumb instance.摄取现有jsPlumb实例

这是一个有用的升级路径的人现有jsPlumb设置和希望逐步利用工具箱提供的所有特性。用这种方法你可以不对你当前的代码进行任何更改，直接将拖动和缩放功能添加到您的UI,。 这是很容易摄取jsPlumb实例:

varrenderer=jsPlumbToolkit.Support.ingest({ jsPlumb:instance }); 这里 instance 是jsPlumb的一些实例。你返回来的是一个Surface 小部件,这是通常的结果调用rendermethod

工具包的一个实例。

Surface 覆盖 (拖动和缩放的元素) 成为jsPlumb实例的 Container. Accessing the underlying Toolkit。访问底层工具箱

通常当你使用工具包执行数据操作工具本身。从渲染器renderer来访问这个变量返回从ingest,调用这个方法: vartoolkit=renderer.getToolkit(); 抑制呈现

默认情况下,摄取方法将配置一个表面从jsPlumb实例的容器。你可以抑制这种行为,回到工具包实例: vartoolkit=jsPlumbToolkit.Support.ingest({ jsPlumb:instance, render:false }); 提供渲染参数

如果您希望你也可以提供参数表面部件:

3

varrenderer=jsPlumbToolkit.Support.ingest({ jsPlumb:instance, renderParams:{ consumeRightClick:false, clampZoom:false } }); 这里我们指示启用右键单击工具箱表面(开发)时非常有用,也不夹的运动界面clamp the movement of the UI,当用户之间。如果用户缩放以这样一种方式,它通常会。默认的行为是夹UI,以防止内容消失。 增加节点后摄取

一旦你吸收现有jsPlumb实例添加新节点的你有两个选择:

使用现有的机制和建议通过摄取表面的方法。该方法通过thejsPlumbToolkit.Support创建添加到任何表面。摄取方法;它是一个表面上不存在通过工具包创建的渲染方法。一个例子:

varrenderer=jsPlumbToolkit.Support.ingest({jsPlumb:instance}); /* time passes. eventually a DOM element - `el` - has been added to your UI. Now you want to tell the Toolkit about it.*/ renderer.ingest(el); 使用工具箱的添加和呈现新节点数据绑定机制。

要做到这一点,你很可能想renderParams提供一个视图。这定义了很多事情有关UI的外观和行为; the link provided goes through your options here in detail. A simple example:提供的链接在细节上通过你的选择。 一个简单的例子:

varrenderer=jsPlumbToolkit.Support.ingest({ jsPlumb:instance, renderParams:{ view:{ nodes:{ \:{ template:\, events:{ click:function(params){alert(\+params.node.id);} } 4

}, events:{ \:function(){alert(\);} } } }}); renderParams支持的重点是具体的参数设置为params对象渲染方法调用工具箱的一个实例。在这个例子中我们提供的模板来使用渲染节点的ID,我们点击注册侦听器节点以及工作区域的空白。

Basic ConceptsBasic Concepts，基本概念

jsPlumb工具包是一个数据绑定和呈现包装开源jsPlumb 图书馆。其核心是图graph的概念,代表数据模型的实体和关系。工具包的每个实例管理一个单一的数据模型(单图),并且可以呈现零个或多个UI元素。每一个渲染器jsPlumb的分配自己的实例。

Instantiating the jsPlumb Toolkit实例化jsPlumb工具包 Loading Data加载数据 Rendering表现

。Instantiating the jsPlumb Toolkit 您创建一个新的工具包通过调用newInstance方法的实例: vartoolkit=jsPlumbToolkit.newInstance(); 这给你一个工具包的实例没有数据加载和渲染器。

Loading Data加载数据

您可以用几个不同的方式:获取数据到工具箱。

o 传递给它的newInstance 方法:

vartoolkit=jsPlumbToolkit.newInstance({ data:[ \:[ {\:\,\:\}, {\:\,\:\} ], \:[ 5

{\:\,\:\} ] ]}); 现有的工具包实例上调用加载load : toolkit.load({ data:[....]}); o 现有的工具包实例上调用addNode 方法(讨论)。

注意数据的格式在这里的第一个例子。这是工具包的默认数据格式,这是一个模拟GraphML的结构,但在当然JSON。在例子1和2在这里,有一个隐式数据类型参数的值默认为json,这表明这种格式的数据。 有两个默认工具包支持的数据格式:

Graph JSON 。 图JSON

上面所示的语法。在这个页面上详细讨论

Hierarchical 。JSON分层JSON

另一个语法的每个节点都有一个可选的孩子名单;每个节点之间有一个隐式的边缘和itschildren列表的内容。整个图是嵌套的。这个页面上详细讨论。

可以编写和提供自己的数据加载器jsPlumb工具包的一个实例。这是更详细地讨论。

Loading via Ajax通过Ajax加载

而不是直接传递的数据,您可以使用url参数工具包通过json数据加载。 toolkit.load({ url:\}); Here we've loaded myGraph.json from foo.com 这里我们从foo.com myGraph.json加载

Renderingn. 翻译；表现；表演；描写；打底；（建筑物等）透视图

渲染你的数据通过工具箱所说的表面处理。

你可以注册任意数量的元素与任何给定的渲染器工具箱,使用渲染render 方法:

vartoolkit=jsPlumbToolkit.newInstance({...});varrenderer=toolkit.render({ container:\, jsPlumb:{...jsPlumbdefaults...}}); Notice here the jsPlumb parameter: these are defaults for the underlying jsPlumb instance. Every Surface is backed by its own instance of jsPlumb, which can be configured however you like, but which of course ultimately defers to jsPlumb.Defaults. 注意这里jsPlumb参数:这些是底层jsPlumb实例的默认值。每个表面都是由自己的jsPlumb的实例,可以配置但是你喜欢,但这当然最终推迟jsPlumb.Defaults。

6

Whenever a change occurs to the graph - addition/deletion of nodes, import of data etc - every renderer is notified to repaint itself.

每当发生变化的图表——添加/删除节点,导入的数据等,每一个渲染器都是通知重新绘制它自己。

Rendering is discussed in detail on this page

Data ModelData Model数据模型

o o o o o o o o o o o o o o o

Introduction--入门 Data Format--数据格式

Node, Edge and Port IDs--节点，边，端口id

Port and Edge ID Functions--端口和边id的可能 Edge ID Optional--边id可选 Port ID Uniqueness--端口标识唯一性 Referencing Ports by ID--自定义端口 Custom Port ID Separator--自定义端口分离器 Extracting Port Data from Nodes--提取端口的数据节点 Node, Edge and Port Type--节点，边，端口类型 Data Factories--数据工厂

Node Factory--节点 Port Factory--端口 Edge Factory--边

Constraining Connectivity--限制链接

A Graph is a collection of Nodes, Edges and ports.

- Nodes map to entities in your data model. - Ports are points on your Nodes that are the endpoint of some relationship with another Node, or with a Port on another Node. - Edges are relationships between Nodes or Ports.

As an example of how these datatypes map to an application, in the Database Visualizer application that ships with the Toolkit, Nodes, Edges and Ports are mapped as follows:

核心模型抽象jsPlumb工具包是一个图表,或者更正确,一个有向图,这里讨论:http://en.wikipedia.org/wiki/Directed_graph. 图是一个节点,边和端口的集合。——节点映射到实体数据模型。——端口分节点上的端点与另一个节点的关系,或与一个端口在另一个节点。——边是节点或端口之间的关系。

以下例子说明这些数据类型映射到一个应用程序,在应用程序数据库可视化工具附带的工具包,节点,边和端口映射如下:

7

*节点是数据库的表 *端口是一个表的列 *边是在两个表之间的关系

在流程图构建器应用程序中,节点,边缘和端口映射如下: *节点是流程图中的问题或动作的对象。

*端口用于模型是/否连接从一个问题点。动作节点没有端口,因为他们只有一个输出,这是分配给节点本身。 *边控制流图。

每个应用程序使用工具箱将有自己的映射的概念节点,边缘和端口。一些应用程序可能不使用端口,因为每个节点可以是一个目标和/或来源。端口给模型更复杂的数据结构的能力。

路径Paths

除了节点、端口和边,工具箱有路径的概念:一个顺序列表/端口和边的节点表示从一个节点的路径或端口或端口其他节点。这是一个非常有用的查询方式,和操作,您的模型。讨论了路径在一个单独的页面。

Data Format

数据模型的各个部分可以表示成任何有效的Javascript类型。作为一个例子,这是这本书的支持数据表在数据库可视化工具应用程序: { \:\, \:\, \:\, \:[ {\:\,\:\,\:true}, {\:\,\:\}, {\:\,\:\} ]} 工具箱有自己的内部表示的节点,边缘和港口,但听下你的原始数据总是存储数据data成员——这是上面的节点: { \:\, \:{ \:\, \:\, \:\,

8

\:[ {\:\,\:\,\:true}, {\:\,\:\}, {\:\,\:\} ] }} Port Data端口数据

在上面给出的节点数据列columns 数组,这个数组中每个条目映射到一个端口的节点表示表。这里的端口id 成员的id数组中的每一列

.Node, Edge and Port IDs

每个节点必须有一个唯一的ID。工具箱试图推导自动从你的数据,通过寻找一个ID成员- - - - - -这就是为什么在上面的例子中工具包的ID和ID原始数据是一样的。嗯,它不是完全相同的——工具箱内部所有id转换成字符串。 你应该希望实现一个不同的策略,然而,你可以提供自己的idFunction 方法使用工具箱的一个实例: vartoolkit=jsPlumbToolkit.newInstance({ idFunction:function(data){ returnSomeCustomComputing(data); }}); 再次注意这是可选的,您不需要提供这个功能,但是如果你不那么期望工具包将一个id成员在你的数据。记住,虽然,工具箱将您提供ID转换成一个字符串内部使用。

Again note this is optional - you do not need to supply this function, but if you do not then the Toolkit will expect an id member in your data. Edge ID Optional边ID可选

边不需要有一个ID,但您可能会发现它有用的供应。如果你不提供一个ID,工具箱将自动分配一个。

Port and Edge ID functions端口和边ID的功能

还可以提供单独的函数用于提取端口或边的ID从一些支持数据:

vartoolkit=jsPlumbToolkit.newInstance({ idFunction:function(data){ returnSomeCustomComputing(data); }, portIdFunction:function(data){

9

returnPortComputations(data); }, edgeIdFunction:function(data){ returnEdgeComputations(data); }}); 如果省略这两种,工具箱使用不管它是使用获得节点id(idFunction,如果提供,或者寻找一个id成员的默认机制)。

Port ID Uniqueness端口标识唯一性

端口ID必须是唯一的节点端口上存在,但可能是相同的ID端口在其他节点上。

Referencing Ports by ID--通过id引用端口

当工具包实例时添加一条边,您可以引用一个端口在某些节点使用,默认情况下,点符号dotted notation.。在上面给出的数据有三个端口。我们可以将其中一个连接到另一个表中的一个列。是这样的:

toolkit.connect({ source:\, target:\}); book_author 是从数据库可视化工具的应用程序的另一个表

Custom Port ID Separator--自定义端口ID分离器

如果你发现作为分隔符在一个端口ID使用一段时间后，不为你的数据模型工作,您可以重写工具箱将使用通过这样做: vartk=jsPlumbToolkit.newInstance({ portSeparator:\}); Extracting Port Data from Nodes--提取端口的数据节点

当你数据加载到工具箱的一个实例和节点本身有端口(考虑数据库可视化工具演示应用程序——一个表是一个节点,端口是表中的列),描述端口的数据将通常会举行节点数据will typically be held within the Node data。例如,在数据库中可视化工具,一个节点是这样的: { \:\, \:\, \:\, \:[ 10

{\:\,\:\}, {\:\,\:\} ]} columns 列的条目数组是这个节点的港口。为了得到该工具包承认这些端口使用load 函数时,你应该在portExtractor jsPlumbToolkit.getInstance函数定义一个portExtractor方法 : vartoolkit=jsPlumbToolkit.getInstance({ ... portExtractor:function(node){returnnode.columns;}}; 每个节点加载,通过这个函数,其返回值必须端口对象数组。这些端口对象然后注册对给定的节点。

Node, Edge and Port Type节点，边和端口的类型

你可以把一个类型和你的每一个节点,边缘和端口联系起来。这个工具包是一个重要的概念,因为它是数据模型的基本手段是绑定到任何渲染器,通过视图。

与节点/边/端口ID一样,一个节点的类型,边或端口可以使用默认函数——寻找一个成员支持的数据类型,或者你可以提供一个typeFunction newInstance方法:

vartoolkit=jsPlumbToolkit.newInstance({ idFunction:function(data){ returnSomeCustomComputing(data); }, typeFunction:function(data){ returnSomeOtherComputing(data); }, edgeTypeFunction:function(data){ returnEdgeTypeComputing(data); }, portTypeFunction:function(data){ returnPortTypeComputing(data); }}); 与ID一样,省略端口或边类型函数将导致该工具包使用任何函数决定它应该使用派生的节点类型。 一些节点的类型,端口或边在表面被用来渲染模型,来确定物体的外观和行为。渲染模型的讨论,请参阅这里

11

Data Factories数据工厂·

节点 Factory

当你需要以编程方式添加一个新节点,工具包实例时可以使用addNode函数: addNode:function(data){ ...} 预计当前idFunction typeFunction能够从您提供的数据确定合适的值。一个例子可能是像下面这样: toolkitInstance.addNode({ id:\, name:\, columns:[ {id:\,name:\,primaryKey:true,datatype:\}, {id:\,name:\,datatype:\}, {id:\,name:\,datatype:\}, {id:\,name:\,datatype:\} ]}) 然而,如果您正在使用一个拖拽的机制将新节点添加到用户界面(见页面呈现),工具箱需要一些方法获取一个新节点的数据。默认情况下,该工具包将创建一个javascript对象id成员设置为一个新的UUID,但是你可以提供一个NodeFactoryin来控制数据的创建。

与这个signature签名NodeFactory是一个函数:

functionmyNodeFactory(type,data,callback,originalEvent,isNative); type 是要创建的节点类型。

data 是数据适合给定的节点类型;在拖放的情况下，生成的其他地方it has been generated elsewhere

(再次看到onRendering的页面).

callback 是一个函数,代码必须调用一旦新节点的数据准备,有回调,而不是返回一个值使您能够选择异步准备数据,也许通过往返到服务器。如果你不调用这个函数,添加新节点被流产(你可能想做的事,有时候,当然)。

originalEvent这是浏览器事件相关的下降。如果isNative设置时,您可能希望访问这个事件的dataTransfer成员在决定如何填充数据对象。

这是浏览器事件相关的下降。如果isNative 设置时,您可能希望访问这个事件的dataTransfer 成员在决定如何填充数据对象。

isNative设置为true如果下降drop 事件是“本地native”,例如一个文件拖到浏览器从用户的桌面或文件系统。

Direct Callback--直接回调

12

这是直接回调的一个为例子

vartoolkit=jsPlumbToolkit.getInstance({ nodeFactory:function(type,data,callback,evt,native){ callback({ someKey:\, someArray:[1,2,3] }); }}; Ajax Callback--Ajax 回调

你可能这样做，如果你有jQuery在你的页面,你想让你的新节点的服务器: vartoolkit=jsPlumbToolkit.getInstance({ nodeFactory:function(type,data,callback,evt,native){ $.ajax({ url:\+type, success:callback }); }}; Native Drop本机拖放？？

if it's a native drop你可能这样做:

vartoolkit=jsPlumbToolkit.getInstance({ nodeFactory:function(type,data,callback,evt,isNative){ if(isNative){ data.name=evt.dataTransfer.files[0].name; data.size=evt.dataTransfer.files[0].size; data.type=evt.dataTransfer.files[0].type; } callback(data); }}; 13

Port Factory--端口

如果你的数据模型是足够复杂,你将利用端口。以同样的方式工具箱需要能够组装一个JS对象为每个新创建的节点通过用户交互,它需要一种方法来组装一个JS对象的新端口。

添加新端口的工具提供了两个方法：

addPort=function(node,data){...} 第一个- addPort需要一些现有的数据作为参数,它将获得一个ID和类型(从当前idFunction andtypeFunction)然后端口添加到给定的节点。

addNewPort=function(node,type,portData){...} 第二个函数只需要添加端口的类型,它不能去PortFactory为了得到一个数据对象为新端口。与节点一样,如果没有定义PortFactory那么简单的JS创建对象包含一个id参数。

这是PortFactory从数据库可视化工具示例应用程序——记住,在这个应用程序中,一个表中的每一列映射到一个端口: function(node,type,data,callback){ varcolumn={ id:data.columnName, name:data.columnName[0].toUpperCase()+data.columnName.slice(1), datatype:\, type:\ }; // add to node's data. we have to do this manually. the Toolkit does not know our internal // data structure. node.data.columns.push(column); // handoff the new column. callback(column);} 注意PortFactory的签名略有不同:它是考虑到节点端口应该添加,并不是一个浏览器事件或isNative标志。数据是从哪里来的在上面的代码片段中?在数据库可视化工具的应用,我们使用事件代表团听点击某个按钮,然后弹出一个对话框要求输入的用户。如果用户输入的数据并按OK,我们通知工具箱通过addNewPort方法:

// add new column to tablejsPlumb.on(document,\,\,function(){ varinfo=renderer.getObjectInfo(this);// getObjectInfo is a helper method that retrieves the node or port associated with some element in the DOM. jsPlumbToolkit.Dialogs.show({ 14

id:\, title:\, onOK:function(data){ // if the user supplied a column name, tell the toolkit to add a new port. This will result in a callback to the portFactory defined above. if(data.name){ if(data.name.length<3) alert(\) else toolkit.addNewPort(info.id,\,{id:data.name.toLowerCase(),columnName:data.name}); } } });}); 这个对话框中所示的代码片段是这里讨论。

addNewPort takes four values:需要4个值

o o o

节点添加端口（id或一个节点本身） 添加端口类型

.一个JS对象包含新端口的数据

Edge Factory--边

边缘厂是工具箱每当一个新两个节点之间建立连接/端口,通过用户鼠标动作将调用的函数,。它遵循了同样的模式节点和端口——如果没有EdgeFactory定义则将使用默认的javascript对象。EdgeFactory只能被称为当用户用鼠标创建一个新的边。这不是叫做如果你编程调用tojsPlumbToolkitInstance.addEdge。

没有一个例子与工具包使用EdgeFactory船,但数据库可视化工具包含该存根:

None of the examples that ship with the Toolkit use the EdgeFactory,

edgeFactory:function(params,data,callback){ // you must hit the callback if you provide the edgeFactory. callback(data); // unless you want to return false, to abandon the edge //return false;} 在这里,我们可以操作的内容数据之前我们如果我们想回调。

15

Constraining Connectivity--限制连接

当你实例化一个工具包,有各种各样的拦截功能,您可以提供,限制应用程序的连接。一个例子(从数据库可视化工具应用): vartoolkit=jsPlumbToolkit.newInstance({ ... beforeConnect:function(source,target,edgeData){ returnsource!==target&&source.getNode()!==target.getNode(); }}); beforeConnect叫做当用户拖放一个新的连接。DatabaseVisualizer连接端口;这个拦截器检查源和目标端口是否一样,然后那个源和目标端口并不相同的节点上。拦截器可以提供全套的是:

beforeConnect(source, target, edgeData)--源，目标，边数据

这个拦截器叫做当用户拖放一个新的连接,连接时呼吁一个工具包实例。

beforeConnect给出源(一个节点或端口)和目标(一个节点或港口)的新拖边,以及选择、数据与边。数据可能会通过beforeStartConnect拦截器与边。

从这个方法返回不是真正丢弃新优势。

beforeConnect is given the source (a Node or Port) and target (a Node or Port) of a newly dragged Edge, as well as, optionally, data associated with the Edge. Data may be associated with an Edge via the beforeStartConnect interceptor. Returning anything other than true from this method discards the new Edge.

beforeStartConnect(source, edgeType)--源，边类型

这叫做用户开始拖动一个新的边缘,以及以编程方式,当用户调用连接工具包实例。这个拦截器从其他的表现略有不同:返回false,和其他人一样,将中止行动(在本例中,它将中止新的连接拖)。返回true将允许连接拖继续。但是你也可以返回其他值比真实的,在这种情况下,拖动将继续和您的返回值将成为新的优势的支持数据。如果你从这个方法返回一些数据,它会传递给thebeforeConnect拦截器作为edgeData参数。

This is called as the user begins to drag a new Edge, as well as programmatically when the user calls connect on a Toolkit instance. This interceptor behaves slightly differently from the others: returning false, as with the others, will abort the action (in this case, it will abort the new connection drag). Returning true will allow the connection to drag to continue. But you can also return some value other than true, in which case dragging will continue and your return value will become the new Edge's backing data. If you do return some data from this method, it will be passed in to thebeforeConnect interceptor as the edgeData parameter. beforeMoveConnection(source, target, edge)

16

This interceptor is called prior to any existing edge being moved (either programmatically or via the mouse). It is passed the source and target of the existing edge, as well as the edge itself, and if it returns anything other than boolean true, the edge move is aborted. If not supplied, the default behaviour of this function is to honor

the allowLoopback, allowNodeLoopback and maxConnections parameters on any Node or Port definitions you supplied to this Toolkit via the model. 这个拦截器叫做任何现有的边缘移动之前(以编程方式或通过鼠标)。它是通过现有的源和目标边缘,边缘本身,如果它返回布尔真正以外,边缘是中止。如果不提供,这个函数的默认行为是荣誉allowLoopback,allowNodeLoopback和maxConnections参数在任何节点或端口定义你提供这个工具包通过模型。

beforeDetach(source, target, edge)

这个拦截器可以用来覆盖连接鼠标的超然。给定的函数(源、目标边缘)和预计将返回true确认分离应该发生。

This interceptor can be used to override connection detachment from the mouse. The function is given (source, target, edge) and is expected to return true to confirm that the detach should occur.

beforeStartDetach(source, target, edge)

这个拦截器还可以用于覆盖鼠标连接分离,但它是有别于beforeDetach在调用该函数,一旦用户开始拖动。给定的函数(源、目标边缘),预计将返回true确认分离应该发生。其他任何返回值将中止分离。

This interceptor can also be used to override connection detachment from the mouse, but it is distinct from beforeDetach in that this function is called as soon as the user begins to drag. The function is given (source, target, edge) and is expected to return true to confirm the detach should occur. Any other return value will abort the detach.

Graph Operations Graph Operations--图运算

Underlying each instance of the Toolkit there is a directed graph. This object - accessed via the getGraph method of a jsPlumbToolkitInstance - offers a complete set of methods for querying the state of the graph - from questions like \ B\rality of Node C?\

潜在的每个实例工具包是一个有向图。这个对象——通过jsPlumbToolkitInstance getGraph方法的访问提供了一套完整的查询的状态图的方法——从这样的问题“是节点连接到节点B”到“什么是最短路径节点和节点B吗?”,或者“节点C的中心是什么?”。

17

o o o o o o o o o o o o

Paths--路径

Distance between objects--对象间距离 Shortest Path---最短距离 Centrality---中心

Degree Centrality--度中心性 Indegree Centrality--入度中心性 Outdegree Centrality--出度中心性 Closeness--紧密度 Farness--远

Betweenness--中间状态 General--一般

Graph Diameter--图直径

这个页面上的代码片段都引用这个数据集: toolkit.load({ data:{ nodes:[{id:\},{id:\},{id:\},{id:\},{id:\}], edges:[ {source:\,target:\,cost:10}, {source:\,target:\,cost:5}, {source:\,target:\,cost:10}, {source:\,target:\,cost:10} ] }}); Paths--路径

Distance between objects--对象间距离

为了找到两个对象间距离，用 getDistance 方法:

toolkit.getGraph().getDistance(\,\)->15 toolkit.getGraph().getDistance(\,\)->25

18

toolkit.getGraph().getDistance(\,\)->undefined 注意最后一个例子返回未定义:记住,边工具包中,默认情况下,直接地。如果你再看一遍数据集可以看到,没有从节点4节点5的路经,因为这两个节点连接图只作为目标的边节点3。

Note the last example returns undefined: remember that Edges in the Toolkit are, by default, directed. If you look again at the dataset you can see that there is no route from Node 4 to Node 5, since both of these Nodes are connected to the Graph only as targets of Edges from Node 3.

Shortest Paths---最短路径

得到从一些节点、端口到另一个节点、端口的最短路径，用getPath 方法: toolkit.getPath({source:\,target:\})->e…s.Path{path:Object} 这个方法的返回值是一个路径(路径)。这是一个复杂的对象有许多辅助函数;如果你需要一个更简单的返回值可以直接访问图的findPath方法:

toolkit.getGraph().findPath(\,\)->Object{dist:Object,previous:Object,edges:Object,path:Array[3],pathDistance:15} Centrality---中心

Degree Centrality---度中心性

The degree centrality of a node is the sum of the number of Edges entering and exiting the node divided by the total number of Edges in the Graph. Looking at the dataset we're using on this page you may have noticed that Node 3 has more connections than any other node, and this observation is reflected in the output ofgetDegreeCentrality: 度中心节点的边的数量进入和退出的总和除以总数量的节点的边缘图。查看本页数据集我们使用您可能已经注意到,节点3有更多比任何其他节点连接,这反映在观察输出getDegreeCentrality:

toolkit.getGraph().getDegreeCentrality(\)->0.75 toolkit.getGraph().getDegreeCentrality(\)->0.25 toolkit.getGraph().getDegreeCentrality(\)->0.5 toolkit.getGraph().getDegreeCentrality(\)->0.25 toolkit.getGraph().getDegreeCentrality(\)->0.25 Indegree Centrality--入度中心性

一个节点的入度中心边的数量进入节点,除以图的边的数量:

19

toolkit.getGraph().getIndegreeCentrality(\)->0.25 toolkit.getGraph().getIndegreeCentrality(\)->0 toolkit.getGraph().getIndegreeCentrality(\)->0.25 toolkit.getGraph().getIndegreeCentrality(\)->0.25 toolkit.getGraph().getIndegreeCentrality(\)->0.25 Outdegree Centrality--出度中心性

一个节点的出度中心退出边缘节点的数量,除以图的边的数量: toolkit.getGraph().getOutdegreeCentrality(\)->0.5 toolkit.getGraph().getOutdegreeCentrality(\)->0.25 toolkit.getGraph().getOutdegreeCentrality(\)->0.25 toolkit.getGraph().getOutdegreeCentrality(\)->0 toolkit.getGraph().getOutdegreeCentrality(\)->0 Farness---远

The farness of a node is the sum of its distance from all other Nodes, where the distance from one Node to another is given by the associated cost of the Edge joining the two Nodes. As with degree centrality, this is divided by the number of Edges, to normalise the results. Note that here we have a Graph that has Nodes which cannot \r Node (because all Edges are directed), so the \pt Node 1, which can trace a path to every other Node.

一个节点的远度是这个节点与所有节点距离的总和,从一个节点到另一个的距离是由两个节点的边加入成本有关。与学位中心,

这是除以边的数量,结果正常化。注意,这里有一个图,节点不能”及“其他节点(因为所有边定向),所以每个节点的“远”是无穷除了节点1,可以跟踪到其他节点的路径。

toolkit.getGraph().getFarness(\)->Infinity toolkit.getGraph().getFarness(\)->18.75 toolkit.getGraph().getFarness(\)->Infinity toolkit.getGraph().getFarness(\)->Infinity toolkit.getGraph().getFarness(\)->Infinity Closeness

This is the inverse of a Node's farness: toolkit.getGraph().getCloseness(\)->0

20

toolkit.getGraph().getCloseness(\)->0.05333333333333334 toolkit.getGraph().getCloseness(\)->0 toolkit.getGraph().getCloseness(\)->0 toolkit.getGraph().getCloseness(\)->0 ...so the only Node that has a useful value for closeness is Node 1. At the bottom of this page we present a revised version of the dataset in which Edges are all marked directed:false, and then we show that the output of getFarness and getCloseness provides a usable value for every Node.

…所以唯一的节点为亲密节点1是一个有用的价值。这一页的底部,我们提出一个修订版本的数据集的边都标志着导演:假的,然后显示输出的getFarness getCloseness为每个节点提供了一个可用的价值。

Betweenness Centrality---中间中心度

The betweenness centrality of a Node measures how central the Node is in the Graph. It is the number of shortest paths between any two Nodes in the Graph that pass through the given Nodes. The jsPlumb Toolkit computes this by first computing all the shortest paths in the Graph using the Floyd-Warshall algorithm.

节点的介数中心衡量中央节点图。它是图中任意两个节点之间的最短路径,通过给定的节点。jsPlumb工具包计算,首先计算使用Floyd-Warshall图的最短路径算法。

toolkit.getGraph().getBetweenness(\)->1.6666666666666667 toolkit.getGraph().getBetweenness(\)->0 toolkit.getGraph().getBetweenness(\)->0.6666666666666666 toolkit.getGraph().getBetweenness(\)->0 toolkit.getGraph().getBetweenness(\)->0 我们看到从输出节点3是最“中央”在这个图,节点与节点2。节点1、4和5不是“中央”没有路径穿过这些节点。

We see from the output here that Node 3 is the most \Node 2 next. Nodes 1, 4 and 5 are not \

General---大体上

Graph Diameter---图直径

使用getDiameter方法找到的图的直径,长度最长最短路径图中。至少在一个图表,其中包含一对的节点没有可用的路径,这个值,严格来说,是无穷。我们的数据集在这个页面就是这样一个图,但它似乎并不像一个不合理的数据集,对吧?所以工具包允许您指定你快乐忽略的情况有一个或多个对节点的路径:

21

Use the getDiameter method to find the Graph's diameter - the length of the \shortest path\

In a Graph that contains at least one pair of Nodes for which there is no available path, this value, strictly speaking, is Infinity. Our dataset on this page is one such Graph, but it doesn't seem like an unreasonable dataset, right? So the Toolkit allows you to specify that you're happy to ignore the case that there are one or more pairs of Nodes for which no Path exists:

toolkit.getGraph().getDiameter()->Infinity toolkit.getGraph().getDiameter(true)->25 第二个结果是- 25的距离从节点1路径节点4或5,也就是说,“最长最短路径”图:

The second result - 25 - is the distance of the path from Node 1 to Node 4 or 5, which is to say, the \

toolkit.getGraph().getDistance(\,\)->25 Undirected Graphs---无向图

如果我们把上面的数据,使每条边双向的,我们为中心方法得到截然不同的结果

If we take the data from above and make every edge bidirectional, we get vastly different results for the centrality methods:

toolkit.load({ data:{ nodes:[{id:\},{id:\},{id:\},{id:\},{id:\}], edges:[ {source:\,target:\,cost:10,directed:false}, {source:\,target:\,cost:5,directed:false}, {source:\,target:\,cost:10,directed:false}, {source:\,target:\,cost:10,directed:false} ] }}); 例如,这里是getFarness的值:

toolkit.getGraph().getFarness(\)->10 toolkit.getGraph().getFarness(\)->18.75

22

toolkit.getGraph().getFarness(\)->11.25 toolkit.getGraph().getFarness(\)->17.5 toolkit.getGraph().getFarness(\)->17.5 Note how the value for Node 1 - the only Node in the previous Graph that could \all the other Nodes - is the same as in the previous Graph.

注意节点1 -唯一的节点的值在前面的图,可以“达到”所有其他节点——在前面的图是一样的。 这里有getCloseness 的结果:

toolkit.getGraph().getCloseness(\)->0.1 toolkit.getGraph().getCloseness(\)->0.05333333333333334 toolkit.getGraph().getCloseness(\)->0.08888888888888889 toolkit.getGraph().getCloseness(\)->0.05714285714285714 toolkit.getGraph().getCloseness(\)->0.05714285714285714

Rendering

Rendering---渲染

查看数据由jsPlumb工具包的一个实例,你必须安排呈现。工具箱可以呈现其数据任意数量的元素,和每一个渲染器都支持jsPlumb的有自己的实例。工具箱使用的组件称为表面呈现。它支持平移/缩放/选择,本地保存和加载状态的能力在用户的浏览器中。

在阅读本节之前,重要的是,你是彻底熟悉所使用的数据模型工具包。它也会有用jsPlumb至少有一个基本的知识,由于端点和连接的外观是jsPlumb的责任,你会想学习语法。

o o o o o o o o o

Configuring a Surface--配置一个表面

Rendering to Multiple Elements---呈现多个元素 Surface Widget---表面小部件

Zooming--缩放 Panning--平移

Selecting Nodes--选择节点 Background Images--背景图片

Hiding/Showing Elements--隐藏、显示元素 Dragging Nodes--拖动节点

23

o o o o o o o o o o o o

Drag Filters--拖动过滤器 Drag Posses--拖动拥有 Miniview Widget----miniview 小部件 Templating---模板

Configuring Connectivity---配置连接 Saving and Restoring State--状态的保存与恢复 Dragging Nodes from a Palette---从面板上拖拽节点

Dragging Native Objects---拖拽本地对象 Miscellaneous---其他

Suspending Event Consumption Disabling a Surface IE8 Limitations

Configuring a Surface----配置一个表面

To configure a Surface, call the render method on an existing Toolkit instance. This can be done at any time - before or after data is loaded:

配置一个表面,一个现有的工具包实例上调用render方法。可以在任何时间之前或之后,数据加载:

varmyToolkit=jsPlumbToolkit.newInstance(); varsurface=myToolkit.render({ container:\, ...otheroptions...}); The render method returns a Surface object. It is important to remember that for view related functionality you use a Surface object, whereas for operations on the data model you use a jsPlumb Toolkit instance. Operations on the data model are reflected in all registered Surfaces for the specific instance of the jsPlumb Toolkit as they occur. If you wish to add a Node to the data model, for instance, you need to call addNode on a Toolkit instance. If you want to center the view in some element, you would call centerContent on the Surface registered for that element.

There are two required parameters to a render call: container and palette. 表面渲染方法返回一个对象。视图相关功能的重要的是要记住,你用一个表面对象,而对于操作数据模型使用jsPlumb工具包实例。操作数据模型反映在所有注册的表面的特定实例jsPlumb工具包时发生。如果你想将一个节点添加到数据模型,例如,您需

24

要调用addNode工具包实例。如果你想中心的观点在某些元素,你会叫centerContent表面上注册的元素。有两个必需的参数呈现叫:容器和调色板。

Container--容器

For anyone who has used jsPlumb, the container parameter is probably familiar (and it's perhaps useful to know that the Toolkit passescontainer into the jsPlumb instance backing the Surface as the Container for that instance of jsPlumb). This is the element to be used as the parent for every element added by the Surface. In addition, all artefacts added to the UI by the associated jsPlumb instance will have this element as their parent. For a deeper discussion of this, see the jsPlumb documentation.

对于那些已经使用jsPlumb,容器参数可能是熟悉的(它可能是有用的去知道工具箱passescontainer到jsPlumb实例支持jsPlumb的表面的容器实例)。这是作为每一个元素的父元素添加的表面。此外,所有文物添加到jsPlumb实例相关联的UI将这个元素作为他们的父母。更深层次的讨论,请参阅jsPlumb文档。

Palette--调色

A Palette contains configuration information for all of the Nodes, Ports and Edges in your UI; it is what you use to define the appearance and behaviour of the various parts of your UI, and also offers event binding to numerous lifecycle events. For a full discussion of Palettes, see here.

调色板包含配置信息的所有节点,港口和边缘在UI,它是你用来定义的外观和行为UI的各个部分,并提供事件绑定到无数的生命周期事件。调色板的完整讨论,请参阅这里。

Rendering to Multiple Elements--呈现多个元素

You can call render as many times as you like on a single Toolkit instance. If the target container already has a Surface, that Surface is discarded. Every Surface that an instance of the Toolkit is tracking will be notified of changes to the data model.

你喜欢你可以叫呈现多次在一个工具包实例。如果目标容器已经有一个表面,表面就会被丢弃。每一个表面工具包的一个实例是跟踪将通知修改数据模型。

The Surface Widget--表面小部件

For a full discussion of the capabilities and usage of the Surface widget, see this page. Here on this page we provide a short summary of its features.

25

充分讨论的功能和使用表面的小部件,看到这个页面。在这一页,我们提供了一个简短的摘要的功能。 表面是一个小部件和几个好的特点:

- Zoom--缩放

Change the zoom using the mouse wheel, pinch (on touch devices), right click + mouse move, or programmatically.

改变使用鼠标滚轮缩放,捏(触摸设备上),右击+鼠标移动,或以编程方式。

- Pan/Drag---平移、拖拽

Click/tap and hold then drag the contents around. The Surface also, by default, provides 'nudge' bars on the edges of the work area, which you can click to pan the contents by a given amount automatically, or click and hold to pan continuously. These nudge bars can be programmatically suppressed or simply hidden via CSS.

单击/水龙头,然后拖动内容。表面,默认情况下,提供“推动”酒吧在工作区域的边,你可以点击自动平移给定的内容,或点击并按住不断平移。这些推动酒吧可以以编程方式抑制或者只是通过CSS隐藏。

o

Save/Restore state--保存、重置状态

By default, the Surface writes the current position of elements contained to local storage. When the user comes back to a page that they have already viewed, these saved positions are used to restore the UI to the state it was in when they left it. The current zoom and pan position are also saved and restored. This behaviour can be set to automatic or manual.

默认情况下,表面写当前位置的元素包含本地存储。当用户返回到一个页面,他们已经认为,这些保存的位置是用来恢复UI状态在他们离开的时候。当前缩放和锅的位置也保存和恢复。这种行为可以设置为自动或手动。

- Node Select--选择节点

在选择模式下,点击/点击并拖动套索的一组节点。按住shift键添加到当前的选择。当你从左向右拖你只需要一些相交节点以选中它。当你从右到左拖你必须完全封闭前一个节点被选中。

- Background Images--背景图片

您可以为一个表面提供一个背景图像小部件显示。您还可以使用平铺的图像

Hiding/Showing Elements隐藏、显示元素

一个setVisible 方法和不同的参数:

o o

a Node/Port id---一个节点、端口id a DOM Element--一个DOM元素

26

o o o o

a Node/Port/Edge---一个节点、端口、边 a Selection---选择 a Path---路径

a Toolkit instance---一个工具包实例

或其中任何一个数组。当你隐藏节点,任何边连接到该节点也会被隐藏起来。当你做一个节点可见,只有边不连接到一个隐藏节点都是可见的。

说你想选择和隐藏几个节点,例如(假设,在这些例子中,存在的一个工具箱和一个表面部件):

varsel=toolkit.select([\,\]);surface.setVisible(sel,false); 或者你想选择一些节点的路径到另一个路径 ,然后把它隐藏:

varpath=toolkit.getPath({source:\,target:\});surface.setVisible(sel,false); 甚至你只是想隐藏你通过jQuery的DOM元素,你不需要知道它的底层节点: $(\).on(\,\,function(){ surface.setVisible(this,false);}); Dragging Nodes---拖动节点

The vast majority of applications using the Toolkit will want to support dragging of Nodes in the Surface. For this reason, dragging is automatically enabled for any Nodes in your UI.使用工具箱将绝大多数的应用程序想要支持在表面上拖拽节点。出于这个原因,在UI自动启用拖动任何节点。工

具箱使用通过jsPlumbKatavorio支持拖拽。

Switching off Dragging--关掉拖拽

varsurface=myToolkitInstance.render({ container:\, view:{...}, elementsDraggable:false}); Drag Options--拖选项

varsurface=myToolkitInstance.render({ container:\, view:{...}, dragOptions:{

27

start:function(){ }, drag:function(){ }, stop:function(){ } }}); Dragging on a grid拖动一个网格

Katavorio supports constraining dragged elements to a grid:Katavorio支持网格约束拖元素:

varsurface=myToolkitInstance.render({ container:\, view:{...}, dragOptions:{ grid:[50,50] }}); Drag Filters--拖动过滤器 Drag Posses--拖动拥有

A drag Posse is a set of Nodes that should always be dragged as a unit. Unlike in a group (an as-yet unsupported concept, in which a set of Nodes share a common element as parent, which is collapsible etc), these Nodes do not necessarily have any visual indication that they belong together (although you could achieve that using a decorator.

Any given Node can belong to multiple Posses at a time. Additionally, each Node's participation in a Posse is either active, in which dragging the Node causes all Nodes in the Posse to be dragged, or passive, in which the Node drags independently but is dragged when one of the Posse's active Nodes is dragged.

拖一团是一组节点,应该被作为一个单元。与一组(一个尚未支持的概念,一组节点共享一个共同的元素作为家长,可折叠等),这些节点不一定有任何视觉迹象表明它们属于彼此(虽然可以实现使用装饰。任何给定的节点可以属于多个拥有一次。此外,每个节点参与一队是活跃的,在拖动节点导致波赛中的所有节点被拖,或被动,节点拖独立但拖当一队的活跃节点拖。

28

Configuring a Posse---配置一队

Nodes are assigned to a Posse via an optional assignPosse function that you provide to a render method call:通过一个可选的节点被分配到一队assignPosse函数提供一个渲染方法调用:

varsurface=myToolkitInstance.render({ container:\, view:{...}, assignPosse:function(node){ returnnode.data.parentId||node.data.id; }}); 注意对象传递给assignPosse工具包是一个节点对象;它支持通过数据属性数据可用。

这一团分配函数返回的parentId节点的数据的父节点,或者是节点的id。所以我们说一队包含一些“父”的节点和其他节点标记为“孩子”的节点。一个例子几个节点可能符合这个数据模型: [{ \:\, \:\ },{ \:\, \:\, \:\, },{ \:\, \:\, \:\ }] If assignPosse returns null then the relevant Node is not added to a Posse. Note that in this case if there were any \be in a Posse of one. That's ok; a bit boring, perhaps, around the campfire, but ok.

如果assignPosse返回null,那么相关的节点不是添加到一队。注意,在这种情况下如果有任何“父”节点,没有“孩子”然后他们只是一群。没关系,有点无聊,也许,在篝火周围,但好。主动节点和被动节点在前面的示例中,我们返回一个字符串来识别每个节点所属的一团。这表明节点应该发挥积极作用在一队,ie。拖,一团中的所有节点拖:

29

Active Nodes and Passive Nodes

In the previous example we returned a String to identify the Posse to which each Node belongs. This indicates that the Node should play an active role in the Posse, ie. when it is dragged, all Nodes in the Posse are dragged:

在前面的示例中,我们返回一个字符串来识别每个节点所属的一团。这表明节点应该发挥积极作用在一队,ie。拖,一团中的所有节点拖:

assignPosse:function(node){ returnnode.data.parentId||node.data.id;} You can, however, pass back an array in which the second argument indicates whether or not the Node should be active:

但是,您可以通过返回一个数组,第二个参数表示该节点是否应该活跃: assignPosse:function(node){ returnnode.data.parentId?[node.data.parentId,false]:node.data.id;} In this second example we check if a Node has a parentId. If so, the Node is added to the Posse with that value, but as a passive Node: dragging it will not cause the other Nodes to be dragged. Otherwise if there is no parentId then the Node is a parent and it is added as a master to its own Posse.

在第二个示例中,我们检查是否一个节点parentId。如果是这样,节点添加到一队的价值,但作为一个被动节点:拖动它不会导致其他节点拖。否则如果没有parentId节点是一个父母和它添加主自己的一队。

Adding Nodes Manually--手动添加节点

You can at any time manually add a Node to a Posse with this method:

你可以在任何时候手动添加一个节点与这一队方法:

surface.addToPosse(aNode,posseId); aNode may be the ID of a Node, an actual Node, a DOM element representing a Node, or a list-like object of any of these. Note here that the method is on the Surface widget and not on the Toolkit; it is a view concern. The Toolkit is unaware of the concept of Posses - only the Surface widget knows about them.

a节点可能是一个节点的ID,一个实际的节点,DOM元素代表一个节点或类似这些的对象。注意,表面的方法是小部件,

而不是工具包;这是一个观点问题。工具箱不知道拥有的概念——只有表面部件知道他们。

Removing Nodes Manually--手动删除节点

你可以随时手动删除一个节点从一团用这种方法:

30

surface.removeFromPosse(aNode,posseId); a节点可能是一个节点的ID,一个实际的节点,DOM元素代表一个节点或类似这些的对象。

Updating via the Toolkit更新工具包

如果你调用这个方法:

toolkit.updateNode(someNode,{...}); The Toolkit updates its data model and then informs any Surface widgets that are attached. The Surface widgets then re-render the Node and run the Node's data through the assignPosse function, updating - or clearing - the Posse as required. 工具箱更新数据模型,然后通知任何表面附加小部件。表面的部件然后通过assignPosse函数重新呈现节点和节点的运行数据,根据需要更新或者清算一团。

The Miniview Widget--Miniview小部件

每个表面小部件都能有一个与之相关联的Miniview——一个小窗口显示UI的结构,独立扩张和缩放,控制表面视图。这是缩小到了这样一种程度,所有的节点在其视窗,表面可见和包含一个“ ？？”元素,地图的当前可见的视窗表面是相关的。

Every Surface widget can have a Miniview associated with it - a small window displaying the structure of the UI, which is independently pannable and zoomable, and which controls the Surface's view. It is zoomed out to such an extent that all of the nodes in the Surface are visible within its viewport, and contains a \visible viewport of the Surface to which it is related.

Instantiating a Miniview--实例化Miniview

得到一个Miniview首先可以得到一个表面:

vartoolkit=jsPlumbToolkit.newInstance();varsurface=toolkit.render({ container:\}); 然后向表面创建Miniview:

varminiview=surface.createMiniview({ container:\ }); 或者,你可以供应Miniview参数渲染调用,然后随后从表面得到Miniview: vartoolkit=jsPlumbToolkit.newInstance(); varsurface=toolkit.render({ container:\, 31

miniview:{ container:\ }}); varminiview=surface.getMiniview(); NB这些代码示例展示了如何检索从一些表面后创建的Miniview。在现实中,你不需要直接与Miniview经常工作,。

Configuring a Miniview----配置一个Miniview

The size of a Miniview is something you set yourself, either through CSS, or via inline styles on the Miniview's container element. The jsPlumb Toolkit uses the size of a Miniview's container combined with the extents of the visible content in the related Surface to compute the appropriate zoom level for the Miniview.

Miniview大小的是你自己通过CSS,或者通过内联风格Miniview的容器元素。Miniview jsPlumb工具包使用的大小的容器结合区段的可见内容相关的表面Miniview计算适当的缩放级别。

变焦环可以用来放大和缩小在一个表面上通过其Miniview有关。当这种情况发生时,可见节点集不会改变——Miniview总是显示整个数据集——但panner？？元素变化的大小来反映这一事实相关的节点中可见表面的视窗已经改变了。

The zoom wheel can be used to zoom in and out on a Surface via its associated Miniview. When this occurs, the visible node set does not change - the Miniview always shows the entire dataset - but the panner element changes size to reflect the fact that the Nodes that are visible in the related Surface's viewport have changed.

CSS

您可以使用这些类来设计Miniview小部件。注意Miniview里节点大小是相同的映射节点相关的表面(但Miniview缩小,所以他们与他们相关的节点不是1:1大小)。你当然可以使用CSS来强迫Miniview节点的大小,但这并不是建议;如果你表面包含节点不同大小的但Miniview使用统一的大小,用户可能会经历一个特定的两个视图之间的不连续。

Class jtk-miniview jtk-miniview-canvas jtk-miniview-panner jtk-miniview-element [top]

Description Assigned to an element that is acting as a Miniview's container Assigned to the work area in the Miniview Assigned to the element used to pan the Surface from the Miniview Assigned to all elements on the Miniview's canvas

32

Templating---模板

Drop/Detach Interceptors--删除/分离拦截器

This is supported in the Toolkit via interceptors in a Palette.

在jsPlumb可以附加拦截器连接删除和连接分离;这些功能,他们应该返回false,导致相关的行动被中止。这是被支持的工具箱通过拦截器面板。

Repainting Objects--重新绘制对象

为了在一个标表面重塑一个对象，你可以用 repaint 方法:

surface.repaint(someObject); Valid values for someObject are: o o o o o

a Toolkit Node-- 一个节点工具包 a Toolkit Port -- 一个端口工具包

a DOM element representing a Toolkit Node or Port--代表一个节点或端口工具包的DOM元素 the ID of a Toolkit Node or Port--节点和端口工具包的id

an element that has a Toolkit Node or Port element as an ancestor.--一个有节点或端

口工具包做祖先的元素。

这个列表中最后一项可能需要一个小的解释:我们的想法是,你可能已经做了一些修改UI的一部分,你想要重新绘制它所属的工具箱对象。而不是强迫你去找到合适的祖先,或适当的祖先的id,您可以通过一些元素在这里和表面找出最好重新绘制。

CSS Classes--CSS类

讨论工具箱如何处理CSS：

Saving and Restoring UI State--保存和恢复UI状态

给定的渲染器的状态可以写入,并随后读取,本地存储(或cookie,取决于浏览器的功能)。这要通过一些方法和/或构造函数参数

Constructor Parameters for automatically saving state构造函数参数自动保存状态

33

varsurface=toolkit.render({ container:\, saveStateOnExit:true,// serialize state on page unload automatically. defaults to false. saveStateOnDrag:true,// serialize state after each drag. defaults to false. stateHandle:\// required for either of the auto state save options. the handle to store the state by.}); Methods for saving/restoring state保存/恢复状态的方法

saveState([Stringhandle],[Functionpreprocessor]); 用给定的处理保存状态。如果不提供处理但stateHandle作为构造函数参数,提供的值被使用。如果没有提供状态是未保存。

可选的预处理程序参数允许您从localStorage预处理数据加载之前应用于表面。这可以用于许多事情,但这种机制的主要目的使用是允许你应用压缩/解压放在localStorage的数据。限制各有不同,但在写作的时候你可以考虑作为一个粗略的指南,限制数据,可以放置在localStorage约为5 mb。

预处理器函数必须接受两个参数: function(data,callback); 和需要使用预处理的数据调用回调。作为一个虚假的例子,也许你想要预先考虑前一个时间戳数据存储: surface.State.save(\,function(data,callback){ callback(newDate().getTime()+\+data);}); 或者您可能决定使用LZMA library压缩数据。LZMAcompress 压缩方法有这个signature签名: compress(data,[level],callback); surface.State.save(\,function(data,callback){ LZMA.compress(state,1,callback);}); 通知我们通过直接callback LZMA;包装它在另一个函数不是必要的。

注意,您可以调用这个方法预处理作为单一参数,由于表面能算出,如果你提供一个函数不是一个保存数据的把手。

Note that you can call this method with the preprocessor as the single argument, since the Surface can figure out that if you supply a Function it is not a handle with which to save the data.

restoreState(Stringhandle,[Functionpreprocessor]); 恢复给定的处理状态。如果不提供处理但stateHandle作为构造函数参数,提供的值被使用。如果没有提供,那么不恢复状态。

34

See the note on saveState for a discussion of the optional preprocessor Function. Note also that you can call this method with thepreprocessor as the single argument, since the Surface can figure out that if you supply a Function it is not a handle with which to save the data.

注意saveState上讨论可选的预处理器函数。还请注意,你可以调用这个方法thepreprocessor作为单一的参数,由于表面能算出,如果你提供一个函数不是处理来保存数据。

这可能是匹配的减压预处理程序可以使用时间戳上面的例子:

surface.State.restore(\,function(data,callback){ varparts=data.split(/^([0-9]+)(?:-)/), timestamp=newDate(parseInt(parts[1],10)); callback(parts[2]);}); LZMA压缩的例子,你可以这样做:

surface.State.save(\,function(data,callback){ LZMA.decompress(layout.payload,callback);}); clearState([Stringhandle]); Clears the state stored with the given handle. If handle is not supplied but stateHandle was provided as a constructor parameter, that value is used. If neither is supplied then the state is not cleared.清除存储与给定的处理状态。如果不提供处理但stateHandle作为构造函数参数,提

供使用值。如果没有提供状态不清除。

serialize(); 序列化表面状态和返回序列化的字符串。这当然是saveState使用内部的方法。 deserialize(StringserializedData); 从给定的字符串对表面的状态进行反序列化。这当然是restoreState内部使用的方法。

Saving and Restoring Custom Properties--保存和恢复自定义属性

表面小部件暴露的功能用于保存/恢复状态,四种方法,你可以调用自己存储的任意数据: surface.State.store({String}handle,{String}data); 使用提供处理的关键存储一个字符串。

surface.State.storeJSON({String}handle,{Object}data); 35

存储一个对象使用提供的处理的关键存储一个对象。这种方法实际上把给定对象序列化成一个字符串,因此预计,全局有一个JSON对象可用在浏览器中,许多现代浏览器上这都是事实,也是由jQuery提供。在浏览器中如果JSON不可用，此方法静默失败。

{String}surface.State.retrieve({String}handle); Retrieves a string using the provided handle as the key. Will return null if nothing is stored against the given handle.？？？使用提供的处理的关键检索字符串。如果没有什么存储给定的处理，，

将返回null。

{Object}surface.State.retrieveJSON({String}handle,{Object}data); Retrieves an object using the provided handle as the key. See the note above about the required JSON dependency. Will return null if nothing is stored against the given handle.

使用提供的处理的关键获取一个对象。看到上面的注意所需的JSON的依赖。如果没有存储与处理将返回null。

Dragging Nodes from a Palette--从面板上拖拽节点

A common use case for applications using the jsPlumb Toolkit is the requirement for a palette of nodes from which items can be dragged into the work area. The Surface widget has a method that supports this for elements in your UI, as well as - in browsers that support it - items dragged from the file system.

常见用例使用jsPlumb工具包是为应用程序要求的节点板项可以拖到工作区域。表面部件有一个方法,支持这个UI元素,以及-在浏览器,支持项目拖从文件系统。

Configuring a Node Palette--配置一个节点板

工具箱没有假设节点板的结构——你自己创建面板,使用您喜欢的任何标记,然后你供应可以用来识别可拖动的节点或元素的列表的工具箱选择器。这是一个从数据库可视化工具应用程序的例子: vartoolkit=jsPlumbToolkit.newInstance(); varrenderer=toolkit.render(...params...); renderer.registerDroppableNodes({ droppables:nodePalette.querySelectorAll(\), dragOptions:{ zIndex:50000, cursor:\, clone:true }, typeExtractor:function(el,dropInfo,isNative,eventLocation){

36

returnel.getAttribute(\); }, dataGenerator:function(type,dragElement,dropInfo,eventLocation){return{name:type};}}); 此方法的参数是:

* Droppables-- 提供了应可拖动的单个节点。您还可以提供源和选择器,这对于一些用例可以随后刷新处理程序，

添加更多droppables是一个更好的选择

*dragOptions--- 可选值通过底层代码,使得节点可拖动的。

* typeExtractor --这个函数接受一个元素,并返回该工具包的节点所代表的类型元素。在这个应用程序中,这些信

息存储在jtk-node-type每个元素的属性。typeExtractor是可选的;如果没有提供,它将假定节点类型是默认的。

*dataGenerator 这个函数接受四个参数,并返回一些节点类型的默认数据。

*type -删除节点的类型。注意,类型可能是空:如果typeExtractor函数没有提供，这将是如此,但也可能是你的typeEx

tractor返回null。所以你应该在这个函数程序的防守。还请注意,这个函数是可选的;如果没有提供，节点将被一个空的对象作为其支持数据初始化。

*dragElement - 拖拽元素。也许你已经标志着这一组属性,描述你想做什么当它被删除。 *dropInfo - 一个对象包含潜在的拖拽,删除和鼠标事件。不是大多数应用程序需要使用。

*eventLocation 一个对象包含 { left:.., top:... } values 当前位置发生删除时将提供在画布上的位

置。

从上面的例子,但使用源source 和选择器selector 的样子: varhandler=renderer.registerDroppableNodes({ source:document.getElementById(\), selector:\, dragOptions:{ zIndex:50000, cursor:\, clone:true }, typeExtractor:function(el,dropInfo,isNative,eventLocation){ returnel.getAttribute(\); }, dataGenerator:function(type,dragElement,dropInfo,eventLocation){return{name:type};}}); 正如前面提到的,这么做的好处是,，如果你添加更多的元素,你需要释放；有一个刷新方法返回值可以使用

37

handler.refresh(); The selector will be run against source again, and any new elements that are encountered will be configured as droppables using the same parameters.再次选择器将与来源,将遇到的任何新

元素配置为可抛弃的使用相同的参数。

Drag Clones--拖拽克隆

一个需要注意的重要一点是,在dragOptions我们设置clone:true。这就是,在Katavorio(拖库使用的工具包)你说你想拖一原始条目的副本而不是项目本身,而最有可能的是你想要为您的应用程序。

Drag CSS--拖拽CSS

.你应该确信拖拽克隆绝对的定位。

Dragging Native Objects--拖拽本地对象

表面渲染器还支持拖拽的本地对象——如果工具包正在运行的浏览器支持它。让我们添加支持本地拖/删除之前的例子:

vartoolkit=jsPlumbToolkit.newInstance();varrenderer=toolkit.render(...params...); renderer.registerDroppableNodes({ dragOptions:{ zIndex:50000, cursor:\, clone:true }, typeExtractor:function(el,event,isNative){ returnisNative?event.dataTransfer.items[0].type:el.getAttribute(\); }, dataGenerator:function(type,dragElement,dropInfo,eventLocation){return{name:type};}, allowNative:true, nativeFilter:[\,\]}); 这里有三点要注意:

allowNative 是被用来打开本地拖拽/删除的标记(默认是off)

38

nativeFilter--是一个可选的MIME类型数组支持对象。如果没有提供，任何对象可以被删除

typeExtractor-该函数是第三个参数如果这是真的,表明一个本地对象被撤销。在这种情况下el 是一个占位符元素的

值,jsPlumb用于拖动,并持有任何你感兴趣的。你会对dataTransfer属性事件感兴趣的。

Suspending Event Consumption--暂停事件消耗（消费）

默认情况下,表面会消耗它抓住的任何右键单击事件。你可以关掉这个,这是方便的在开发的两种方式之一:

o

提供一个参数渲染调用:

varsurface=toolkit.render({ ... consumeRightClick:false, ...}); o

在现有的surface调用这个方法:

surface.setConsumeRightClick(false); Disabling a Surface--禁用一个Surface

暂时的表面(即“关掉”。停止响应鼠标事件),您可以使用setEnabled方法:

renderer.setEnabled(false);...timepasses,thingshappen....renderer.setEnabled(true); IE8 Limitations--IE8限制

The jsPlumb 工具包呈现IE8 上有一些限制:

o o o

不支持动画 不支持缩放

.性能是相当有限的。它不是一个好主意来加载非常大的数据集。

Models and Views

Models and Views--模型和视图

39

模型和视图是两个核心结构使用的工具包。他们都是一组节点,边缘和端口定义,但它们定义事情有所不同:模型是用于定义约束的数据模型,和视图用于定义连接规则(可以连接到什么什么,限制数量的边,等等)以及视觉外观的各种文物？？the v

isual appearance of the various artefacts(使用哪个模板节点/端口、CSS类,等等)和事件注册。

jsPlumbToolkit.getInstance模型作为参数提供。,您指定约束数据,和视图提供的渲染方法作为参数工具包的一个实例,你指定UI的视觉外观和行为文物代表您的数据。

o o o o o o

Example

Mapping Types--映射类型

Definition Inheritance--定义继承 Models Views

UI States--Ui状态

Example

这显示一个视图,它包含指示,用于定义the visual appearance of the various artefacts.各种文物的视觉外观。？？、但基本结构是相同的模型:一个对象的散列nodes, edges and ports,和每种类型的指令。 view:{ nodes:{ type_a:{ template:\ }, type_b:{ template:\ } }, edges:{ \:{ connector:\ } }, ports:{ someType:{ template:\

40

} }} Mapping Types

工具包的一个实例有typeFunction的概念——一个函数,当考虑到数据对应于某些Node, Port or Edge，返回对象的类型(一个字符串)。这个函数返回的类型是用作键模型或视图的关键。

Default Types--默认

对于每个Nodes,Ports 和Edges,您可以提供一个默认的定义,使用关键字“default”:

{ ... view:{ nodes:{ \:{ template:\ } } }, ...} 这个定义将用于两种情况:

o o

派生的对象没有类型的，用当前的 typeFunction

一个派生的类型type 但模型或视图中没有该类型的入口

Default Edge Type--默认Edge 类型

如果你没有在一个端口定义指定 an edgeType 参数，类型将默认为 default. Definition Inheritance--定义继承

任何 Node, Port or Edge 定义，可以声明一个父亲定义。所得的定义包括父母的条目,与孩子的条目合并例子:

{ ... view:{ 41

nodes:{ \:{ events:{ \:function(params){ console.log(\,params.node); } } }, bigNode:{ parent:\, template:\ }, smallNode:{ parent:\, template:\ } } }, ...} Here, we have defined a common click handler on the parent definition, and then defined templates for each Node type in their own definitions.

在这里,我们定义了一个父常见click处理函数的定义,然后为每个节点定义模板输入自己的定义。

Models

o o o o

Example Nodes Edges Ports

call gets you an instance of the Toolkit that is 'headless', ie.

42

jsPlumbToolkit.getInstance方法调用的实例让你 is 'headless', ie.“无头”,ie。它不呈现任何UI元素。当你处理一个工具包实例工作严格的数据,所以此方法的模型传递用于定义约束数据，，和节点的外观或Node/Port/Edge

的行为无关。 .

Example

vartoolkit=jsPlumbToolkit.getInstance({ model:{ nodes:{ \:{ maxConnections:3 } } }}); Views

当你调用render方法工具箱的一个实例,并提供一个视图,视图包含配置的视觉外观和行为的各种文物。

your View contains configuration for the visual appearance and behaviour of the various artefacts.

o o o o o o o o o o

Example Nodes Edges Ports

Mapping Types--映射类型 Events

Interceptors--拦截器 UI States

Preconfigured Parameters--预配置参数 Function Parameters--方法参数

Example

这个例子是一个从数据库可视化工具编辑视图示例应用程序。

43

toolkit.render({ view:{ // we have two node types - 'table' and 'view'. nodes:{ \:{ // we use 'tmplTable' to render tables template:\ }, \:{ // and 'tmplView' to render views template:\, events:{ // when you click a view Node, we alert its id. click:function(params){ alert(\+params.node.id); } } } }, edges:{ // common appearance of all edges \:{ connector:\, paintStyle:{lineWidth:2,strokeStyle:\} }, // a 1:1 relationship \:{ parent:\,// declared 'common' as its parent. overlays:[ [\,{label:\,location:0.1}], 44

[\,{label:\,location:0.9}] ] }, \:{ parent:\, overlays:[ [\,{label:\,location:0.1}], [\,{label:\,location:0.9}] ] } }, ports:{ // a table has an arbitrary number of columns; it is a table's columns that actually connect to other tables, not a table itself. \:{ // use 'tmplColumn' to render a Port of type 'column' template:\, // the appearance of the endpoint on a column endpoint:[\,{radius:7}], // anchor locations on a column anchor:[\,\], // the type of edge that will be created from this port by default when the user drags a connection edgeType:\ } } }}); 让我们一块一块的理解

Nodes

45

这里有定义两个节点类型---表和视图。他们每个人都有一个条目,它定义要使用的模板来呈现这种类型的一个节点。这个参数的值必须的id的一些客户端模板格式适合您使用的模板引擎。见下文的讨论模板。此外,该视图节点为节点点击声明一个事件处理程序。有许多不同的事件,你可以订阅;这些是下面讨论。

Supported Parameters

o

[parent] ID of a Node definition from which this definition should inherit

properties.

o o

template ID of the template to use to render the Node

[events] JS object containing mappings of event names to handler functions

[dragOptions] JS object containing options for drag behaviour for nodes of the given type. The allowed values in this object are anything that the underlying drag library - Katavorio supports. Common uses of per-node dragOptions are such things as setting handles for dragging, or specifying a filter for which parts of an element should not be able to initiate a drag.

JS对象包含选项为节点给定类型的阻力行为。允许的值在这个对象是任何底层拖库- Katavorio支持。常见的每个节点使用dragOptions拖着诸如设置处理,或为一个元素的哪些部分应该指定一个过滤器无法启动拖拽

o

Edges

在数据库可视化工具,边地图的概念两个表之间的关系。这个视图显示三个条目在边缘部分。第一,common,包含指令,是常见的所有不同的关系。

第二个和第三个条目- 1:1和1:N -混凝土边缘类型,定义一个1:1和1:N的关系。注意到他们都宣布他们的父母是常见的,因此他们获得样式指令的类型。然后每一个声明两个覆盖本身所特有的。

继承的深度支持,是没有限制的，但不支持多重继承。这可能发生,我们说每一个两个混凝土边缘类型声明两个覆盖本身特有的,但事实上并非如此:他们都分享“1”覆盖定位在0.1。实际上没有限制继承我们可以定义其他抽象的类型:

It may have occurred to you that we said each of the two concrete edge types declares two overlays that are unique to itself, but in fact that is not the case: they both share the \

edges:{ ...common... \:{ parent:\, overlays:[ [\,{label:\,location:0.1}] 46

] }, \:{ parent:\, overlays:[ [\,{label:\,location:0.9}] ] }, \:{ parent:\, overlays:[ [\,{label:\,location:0.9}] ] }} ...这一切都取决于你想要或需要多么复杂

Edges 是由jsPlumb呈现,因此设计使用jsPlumb指令——任何调用 jsPlumb.connect在一个边的定义是是有效的。注意在数据库可视化工具应用,实际上是一个第三边类型,这里没有显示:N:M。

Supported Parameters

o o

[parent] 一个边定义的ID应该有继承属性

[connector] Name/definition of the jsPlumb connector to use. If you omit this, the

default jsPlumb connector will be used.

o [paintStyle] Definition of the paint style to use. If you omit this, the default

jsPlumb paint style will be used.

o [hoverPaintStyle] Definition of the hover paint style to use. If you omit this, the

default jsPlumb hover paint style will be used (which is null, unless you have set it otherwise).

o

[events] JS object containing mappings of event names to handler functions

Ports

这个视图显示一种类型的港口——一个列。召回数据模型的讨论,一个节点有一个隐含的端口(本身),和任意数量的其他港口。在数据库的可视化工具的情况下,一个节点代表一个表,一个港口是一个列。表的“隐性”端口没有数据库可视化工具应用程序中使用。在流程图构建器,每个对象类型的隐式港口时使用的对象是目标边缘。与节点,端口可以被关联到一个呈现的模板。大多

47

数应用程序需要此功能:如果您的应用程序支持动态添加新港口——在数据库可视化工具的情况下,当用户添加一个新列一个表,那么您需要为工具包提供了一个模板来呈现端口。

This View shows one type of Port - a column. Recall from the data model discussion that a Node has one implicit Port (itself), and an arbitrary number of other Ports. In the case of the Database Visualizer, a Node represents a table, and a Port represents a column. The table's \Flowchart Builder, each object type's implicit Port is used when the object is the target of some Edge.

As with Nodes, Ports can be associated with a template for rendering. The majority of applications will require this functionality: if your application supports the dynamic addition of new Ports - as in the case of the Database Visualizer when the user adds a new column to a table - then you need to provide the Toolkit with a template to use to render the Port.

港口的概念的同义词的概念在jsPlumb端点。有效值为一个端口定义任何有效ajsPlumb.addEndpoint或jsPlumb。makeSource叫:本质上,外观和行为的描述与端口关联的端点。这里我们使用一个点半径7的端点,并指导工具包使用动态锚与左、右位置。

The concept of Ports is synonymous with the concept of Endpoints in jsPlumb. Valid values for a Port definition are anything that is valid on

ajsPlumb.addEndpoint or jsPlumb.makeSource call: essentially, a description of the appearance and behaviour of the endpoints associated with the Port. Here we are using a Dot endpoint of radius 7, and instructing the Toolkit to use a dynamic anchor with Left and Right locations. Limiting Connections

一个端口可以支持任意数量的边缘。你可以限制这种maxConnections参数在港口的定义,但请注意,您将理想设置这个工具包的模型,而不是在一个视图中,在这里设置将设置只对当前的渲染器。默认最大——是jsPlumb的默认最大是1边缘。值为1时表示没有上限。

A Port may support an arbitrary number of Edges. You can limit this with

the maxConnections argument in the Port definition, but note that you would ideally set this in the Toolkit's model rather than in a View, as setting it here will set it only for the current renderer.

The default maximum - which is jsPlumb's default - maximum is 1 Edge. A value of -1 means there is no upper limit.

Edge Type

注意,在列港口有一个edgeType参数。这告诉工具箱什么类型的边缘时创建一个新的连接从港口拖。在这个示例中,我们使用的常见类型,因为当用户拖动一个新的两个表之间的关系我们还不知道关系的基数。

Notice in the column Port there is an edgeType parameter. This tells the Toolkit what type of Edge to create when a new connection is dragged from the Port. In this example we are using the type common, because when the user drags a new relationship between two t

48

ables we do not yet know the cardinality of the relationship.

数据库可视化工具订阅edgeAdded事件从工具箱和提示用户指定的基数优势;边缘然后分配适当的类型。

The Database Visualizer subscribes to the edgeAdded event from the Toolkit and prompts the user to specify the cardinality of the new Edge; the Edge is then assigned the appropriate type.

Dragging Connections、拖动连接

正如上面提到的,一个港口是在jsPlumb端点的概念的同义词。默认情况下,端点jsPlumb没有鼠标支持启用。你需要显示的端点是否应该允许创建的连接源和/或目标用鼠标通过使用isSource / isTarget参数

As mentioned above, a Port is synonymous with the concept of an Endpoint in jsPlumb. By default, Endpoints in jsPlumb do not have mouse support enabled. You need to indicate whether or not the Endpoint should be allowed to be the source and/or target of connections created with the mouse through the use of the isSource/isTarget parameters. Supported Parameters--支持的参数

[parent] ID of a Port definition from which this definition should inherit properties这个定义的端口定义ID应该继承属性。

template 模板使用渲染节点的ID

[edgeType]Edge 的类型创建一个新的连接时从Port拖

Type of Edge to create when a new connection is dragged from the Port [maxConnections] 默认为1。端口允许的最大连接数。设置为1,允许无限连接。 [events] JS包含事件处理程序函数名称的映射对象

[isSource=false] 如果这是真的,表明Port 可以边用鼠标拖的来源 [isTarget=false]如果这是真的,指出Port 可以边用鼠标拖的目标。

Events事件

每个类型的对象在视图中支持声明式注册事件,通过事件成员纳入适当的定义。支持的事件列表如下:

o o o o o o o

Click--单击 Dblclick--双击 Mouseover--鼠标移至 Mouseout--鼠标离开 Mousedown--鼠标按下 Mouseup--鼠标弹起 Contextmenu--快捷菜单

view:{ nodes:{ 49

someNodeType:{ events:{ click:function(params){ // params.node is the Toolkit Node // params.el is the element from the DOM representing the Node } } } }, edges:{ someEdgeType:{ events:{ mouseover:function(params){ // params.edge is the Toolkit Edge // params.connection is a jsPlumb Connection object. console.dir(params.edge,params.connection); } } } }, ports:{ somePortType:{ events:{ mousedown:function(params){ // params.port is the Toolkit Port // params.endpoint is a jsPlumb Endpoint object console.dir(params.port,params.endpoint); } } } 50

本文来源：https://www.bwwdw.com/article/hy2a.html