Basic Concepts

tags: jsPlumb

Introduction

介绍

jsPlumb is all about connecting things together, so the core abstraction in jsPlumb is the Connection object, which is itself broken down into these five concepts: jsPlumb 是将关于连接元素在一起，所以 jsPlumb 的核心抽象对象是 Connection 对象，它本身分为以下五个概念：

  • Anchor - a location, relative to an element's origin, at which an Endpoint can exist. You do not create these yourself; you supply hints to the various jsPlumb functions, which create them as needed. They have no visual representation; they are a logical position only. Anchors can be referenced by name, for the Anchors that jsPlumb ships with, or with an array containing various parameters, for greater control. See the Anchors page for more detail.

  • Anchor - 相对于元素的起点，可以存在端点的位置。您不自己创建这些；您可以向各种 jsPlumb 函数提供提示，根据需要创建他们。他们没有视觉表示；他们只是一个逻辑的位置。可以通过名称引用瞄点，对于 jsPlumb 附带的瞄点，或者包含各种参数的数组，可以引用瞄点，以实现更好的控制。有关详细信息，请参阅瞄点页面。

  • Endpoint - the visual representation of one end of a Connection. You can create and attach these to elements yourself, which you are required to do to support drag and drop, or have jsPlumb create them when creating a Connection programmatically using jsPlumb.connect(...). You can also join two Endpoints programmatically, by passing them as arguments to jsPlumb.connect(...). See the Endpoints page for more detail.

  • Endpoint - 连接的一段可以可视化表示，你可以创建和附加这些元素，你需要执行此操作来支持拖放操作，或者以编程方式用 jsPlumb.connect(...) 创建连接。您可以通过编程方式用 jsPlumb.connect(...) 将它们作为参数传递给两个端点，有关详细信息，请参阅端点页面

  • Connector - the visual representation of the line connecting two elements in the page. jsPlumb has four types of these available as defaults - a Bezier curve, a straight line, 'flowchart' connectors and 'state machine' connectors. You do not interact with Connectors; you just specify definitions of them when you need to. See the Connectors page for more detail.

  • Connector - 连接页面中两个元素的视觉表示。 jsPlumb 有四种类型可以用作默认值 - 一个贝赛尔曲线，一个直线，“流程图”连接器和“状态机”连接器。您不与连接器交互，您只需要指定他们的定义。有关详细信息，请参阅连接器页面。
  • Overlay - a UI component that is used to decorate a Connector, such as a Label, Arrow, etc.

  • Overlay - 用于装饰连接器（如标签，箭头等）的UI组件。

  • Group - a group of elements contained within some other element, which can be collapsed, causing connections to all of the Group members to be pooled on the collapsed Group container. For more information, see the Groups page.

  • Group - 包含在某些其他元素中的一组元素，这些元素可以被折叠，这将导致其所连接的所有组成员都被合并折叠在组容器上。有关详细信息，请参阅连接器页面。

One Connection is made up of two Endpoints, a Connector, and zero or more Overlays working together to join two elements. Each Endpoint has an associated Anchor. 一个连接由两个端点，一个连接器和零点或者多个叠加组合在一起来连接两个元素。每个端点都有一个关联的瞄点。

jsPlumb's public API exposes only Connection and Endpoint, handling the creation and configuration of everything else internally. But you still need to be across the concepts encapsulated by Anchor, Connector and Overlay. jsPlumb 公告的 API 仅暴露 Connection 和 Endpoint ，处理内部所有内容的创建和配置，但是您仍然需要跨越 Anchor，Connector 和Overlay 封装的概念。

Connector, Endpoint, Anchor & Overlay Definitions

连接器，端点，瞄和覆盖定义

Whenever you need to define a Connector, Endpoint, Anchor or Overlay, you must use a "definition" of it, rather than constructing one directly. This definition can be either a string that nominates the artifact you want to create - see the endpoint parameter here: 无论何时需要定义连接器，端点，瞄或者覆盖层，您都必须使用“定义”，而不是直接构建一个。此定义可以是指定您要创建的工件的字符串 - 请参阅 endpoint 此处的参数：

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:"Rectangle"
});

...or an array consisting of both the artifact's name and the arguments you want to pass to its constructor:
...或者有这些工件的名称和要传递给其构造函数的参数组成的数组：

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:[ "Rectangle", { 
      cssClass:"myEndpoint", 
      width:30, 
      height:10 
  }]
});

There is also a three-argument method that allows you to specify two sets of parameters, which jsPlumb will merge together for you. The idea behind this is that you will often want to define common characteristics somewhere and reuse them across a bunch of different calls: 还有一个三个参数的方法，允许您指定两个参数，jsPlumb 将合并到一起，这样的想法是，您经常希望在某个地方定义共同特征，并且将它们重用于一系列不同的调用。

var common = {
    cssClass    :   "myCssClass",
    hoverClass  :   "myHoverClass"
};
jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:[ "Rectangle", { width:30, height:10 }, common ]
});

This syntax is supported for all Endpoint, Connector, Anchor and Overlay definitions. Here's an example using definitions for all four: 所有 Endpoint , Connector , Anchor 和 Overlay 定义都支持此语法，以下是使用四个定义的示例：

var common = {
    cssClass:"myCssClass"
};
jsPlumb.connect({
  source:"someDiv",
  target:"someOtherDiv",
  anchor:[ "Continuous", { faces:["top","bottom"] }],
  endpoint:[ "Dot", { radius:5, hoverClass:"myEndpointHover" }, common ],
  connector:[ "Bezier", { curviness:100 }, common ],
  overlays: [
        [ "Arrow", { foldback:0.2 }, common ],
        [ "Label", { cssClass:"labelClass" } ]  
    ]
});

The allowed constructor parameters are different for each artifact you create, but every artifact takes a single JS object as argument, with the parameters as (key,value) pairs in that object. 允许的构造函数参数对于您创建的每个工件而言都不同，但是每个工件需要一个 JS 对象作为参数，该对象的参数为（ key ， value）键值对。

results matching ""

    No results matching ""