Cài đặt

Nếu không dùng jQuery hoặc thư viện tương tự, các phần tử cần được truyền vào dưới dạng ID, nếu không jsPlumb sẽ tự động gán một ID cho chúng.

jsPlumb.ready(function(){
  ···
});
//hoặc
jsPlumb.bind("ready",function(){
  ···
});

Nên đợi jsPlumb hoàn tất tải trước khi bắt đầu sử dụng các tính năng liên quan.

---

Theo mặc định, jsPlumb sẽ đăng ký với cửa sổ trình duyệt và tạo một thể hiện tĩnh cho toàn bộ trang, nên có thể coi nó như một lớp để khởi tạo:

var firstInstance = jsPlumb.getInstance();

Nếu sau khi sử dụng, ID của phần tử thay đổi (thường do tạo phần tử mới và xóa phần tử cũ), bạn có thể:

• jsPlumb.setId(el,newId)
• jsPlumb.setIdChanged(oldId,newId)

---

Khi sử dụng, cần chú ý đến thuộc tính z-index của từng phần tử, nếu không các đường nối có thể bị che lấp. jsPlumb sẽ tự động thiết lập điểm nối cho mỗi phần tử.

jsPlumb cũng hỗ trợ chức năng kéo:

var secondInstance = jsPlumb.getInstance();
secondInstance.draggable("some element");

Để làm mới lại hình ảnh, mỗi lần kết nối sẽ khiến các phần tử liên quan phải vẽ lại. Tuy nhiên, khi xử lý lượng lớn dữ liệu, có thể dùng:

jsPlumb.setSuspendDrawing(true);

jsPlumb.setSuspendDrawing(false,true);

Tham số thứ hai là true sẽ khiến toàn bộ jsPlumb vẽ lại ngay lập tức. Cũng có thể dùng batch:

jsPlumb.batch(fn,[doNotRepaintAfterwards]);

Hàm này cũng hoạt động tương tự, cho phép đăng ký tất cả kết nối trước rồi vẽ lại một lần duy nhất. Trong phiên bản trước 1.7.3, tên hàm này là doWhileSuspended.

Cấu hình mặc định

jsPlumb có một số giá trị mặc định:

• Toàn cục: jsPlumb.importDefaults({···})
• Mỗi thể hiện: jsPlumb.getInstance({···})

Dưới đây là các thuộc tính cấu hình chính:

• Anchor: Vị trí điểm neo (BottomCenter)
• Anchors: Mảng vị trí của nhiều điểm neo
• ConnectionsDetachable: Có thể tách kết nối bằng chuột không
• ConnectionOverlays: Các thành phần chồng lên kết nối mặc định
• Connector: Kiểu kết nối mặc định (Bezier)
• Container: Phần tử chứa
• DoNotThrowErrors: Có ném lỗi khi không tìm thấy Anchor/Endpoint/Connector không
• DragOptions: Cấu hình cho việc kéo phần tử
• DropOptions: Cấu hình cho hành vi thả
• Endpoint: Kiểu điểm cuối (Dot)
• Endpoints: Mảng kiểu điểm cuối
• EndpointOverlays: Các thành phần chồng lên điểm cuối
• EndpointStyle: Phong cách CSS cho điểm cuối
• EndpointStyles: Mảng phong cách CSS cho điểm cuối
• EndpointHoverStyle: Phong cách khi di chuột qua điểm cuối
• EndpointHoverStyles: Mảng phong cách khi di chuột qua điểm cuối
• HoverPaintStyle: Phong cách khi di chuột qua đường nối
• LabelStyle: Phong cách cho nhãn
• LogEnabled: Bật nhật ký nội bộ
• Overlays: Các thành phần chồng lên
• MaxConnections: Số lượng kết nối tối đa
• PaintStyle: Phong cách vẽ đường nối
• ReattachConnections: Tái kết nối khi tách bằng chuột
• RenderMode: Phương thức render mặc định (svg)
• Scope: Phạm vi nhận diện

Khái niệm cơ bản

Điểm cốt lõi của jsPlumb là các đường nối giữa các phần tử. Hầu hết các thiết lập đều hướng đến việc điều chỉnh đường nối.

Gồm 5 thành phần:

1. Anchor: Vị trí điểm neo
2. Endpoint: Điểm đầu/cuối của đường nối
3. Connector: Đường nối giữa hai phần tử, bao gồm 4 loại mặc định: Bezier, Straight, Flowchart, State machine
4. Overlay: Thành phần trang trí cho đường nối (ví dụ như mũi tên)
5. Group: Nhóm các phần tử, có thể thu gọn và gộp tất cả kết nối trong nhóm vào phần tử chứa

Anchor

Có 4 loại điểm neo:

• Static: Tĩnh, cố định tại một điểm trên phần tử
• Dynamic: Động, chọn điểm neo tốt nhất từ tập hợp điểm tĩnh
• Perimeter anchors: Neo chu vi, áp dụng cho điểm động
• Continuous anchors: Neo liên tục

Static

Có 9 vị trí mặc định: 4 góc, trung tâm, trung điểm các cạnh.

Có thể dùng mảng để định nghĩa: [x,y,dx,dy,offsetX,offsetY]. Giá trị x,y từ 0 đến 1, 0.5 là trung tâm.

Dynamic Anchors

var dynamicAnchors = [ [0.2,0,0,0],"Top","Bottom" ]

Chọn điểm gần nhất làm điểm neo. Có thể chỉ định nhiều điểm.

Perimeter Anchors

Các hình dạng hỗ trợ: Circle, Ellipse, Triangle, Diamond, Rectangle, Square

Continuous Anchors

anchor:"Continuous"
//hoặc
anchor:["Continuous",{faces:["top","left"]}]

faces: top, left, right, bottom

Liên kết CSS class với Anchor

var ep = jsPlumb.addEndpoint("ele1",{
  anchor:[0,0,0,0,0,0,"test"]
});

Cũng có thể thay đổi tiền tố:

jsPlumb.endpointAnchorClass="anchor_";

Connectors

Đường nối mặc định là Bezier, có thể tùy chỉnh:

• Bezier: curviness (độ cong), mặc định 150
• Straight: stub (khoảng cách), gap (khoảng trống)
• Flowchart: stub, alwaysRespectStubs, gap, midpoint, cornerRadius
• StateMachine: margin, curviness, proximityLimit

Endpoints

Các loại điểm cuối:

1. Dot: bán kính, cssClass, hoverClass
2. Rectangle: width, height, cssClass, hoverClass
3. Image: src, cssClass, hoverClass
4. Blank: Không hiển thị gì

Overlays

Có 5 loại:

1. Arrow: width, length, location, direction, foldback, paintStyle
2. Label: label, cssClass, labelStyle, location
3. PlainArrow: tương tự Arrow nhưng foldback = 1
4. Diamond: tương tự Arrow nhưng foldback = 2
5. Custom: tạo DOM hoặc selector

Các overlay đều hỗ trợ: getLocation, setLocation

Groups

Tạo nhóm cho các phần tử, cho phép quản lý chung. Việc phân nhóm vẫn được lưu trong hệ thống jsPlumb.

Kéo - Thả

Nếu không dùng chức năng kéo của jsPlumb, cần gọi repaint() sau khi kéo để cập nhật lại đường nối.

Nếu thay đổi z-index hoặc vị trí phần tử, nên dùng revalidate(container) để làm mới.

Tạo Kết Nối

Sử dụng jsPlumb.connect({source:"element1",target:"element2"}).

Nếu không muốn xóa điểm cuối khi hủy kết nối, thêm deleteEndpointsOnDetach:false.

Nếu không muốn người dùng tách kết nối bằng chuột, đặt ConnectionsDetachable:false hoặc detachable:false trong connect.

Kéo - Thả kết nối

Tạo điểm nguồn:

var endpoint = jsPlumb.addEndpoint('elementId',{isSource:true})

Hoặc dùng makeSource và makeTarget:

jsPlumb.makeSource("ele1",{
  anchor:"Continuous",
  maxConnections:1
  ···
})

Nếu vượt quá số lượng kết nối cho phép, dùng onMaxConnections.

Đặt allowLoopback:false để tránh kết nối vòng tròn.

Đặt uniqueEndpoint:true để chỉ tạo một điểm cuối.

Đặt deleteEndpointsOnDetach:false nếu không muốn xóa điểm cuối khi hủy kết nối.

Phương pháp filter giúp phân biệt giữa kéo phần tử và kéo kết nối.

jsPlumb.makeSource("foo",{
  filter:"span",
  filterExclude:true
});

Các phương thức kiểm tra trạng thái: isTarget("id"), isSource("id").

Thay đổi trạng thái: setTargetEnabled(id), setSourceEnabled(id).

Hủy cấu hình: unmakeTarget("id"), unmakeSource("id"), v.v.

Phạm vi kéo - thả

Cấu hình scope cho điểm cuối để giới hạn kết nối.

Xóa Phần Tử

Quan trọng là xóa cả điểm cuối và kết nối liên quan.

Xóa Kết Nối / Điểm Cuối

• detach(conn): xóa kết nối
• detachAllConnections(el): xóa tất cả kết nối của phần tử
• detachEveryConnection(): xóa tất cả kết nối
• deleteEndpoint: xóa một điểm cuối
• deleteEveryEndpoint: xóa tất cả điểm cuối

Loại Kết Nối và Điểm Cuối

Có thể thay đổi kiểu kết nối và điểm cuối bằng các phương thức:

Connection Type

jsPlumb.registerConnectionType("example",{
  paintStyle:{stroke:"blue",strokeWidth:5},
});
var c = jsPlumb.connect({source:"someDiv",target:"someOtherDiv"});
c.bind("click",function(){
  c.setType("example")
});

Endpoint Type

jsPlumb.registerEndpointTypes({
  "basic":{
    paintStyle:{fill:"blue"}
  }
});

Sự Kiện

Lắng nghe sự kiện kết nối:

jsPlumb.bind("connection",function(info){
  console.log(info);
});

Các sự kiện:

• connection: Khi có kết nối mới
• connectionDetached: Khi kết nối bị hủy
• contextmenu: Khi nhấn chuột phải

Overlay cũng có thể lắng nghe sự kiện:

jsPlumb.connect({
  source:"el1",
  target:"el2",
  overlays:[
    ["Label",{
      events:{
        click:function(labelOverlay,originalEvent){
          console.log(labelOverlay);
        }
      }
      }
    }],
  ]
})

Lọc Kết Nối

Dùng jsPlumb.select() để lọc kết nối:

var connections = jsPlumb.select({source:"el1",target:"el2"});

Các phương thức khác: getConnections(), getAllConnections().

Dùng jsPlumb.selectEndpoints() để lọc điểm cuối.

Cả hai đều có phương thức each() để xử lý từng phần tử.

Làm Mới Hình Ảnh

Dùng jsPlumb.repaint(el) hoặc jsPlumb.repaintEverything() để làm mới sau khi thay đổi phần tử.

ID Phần Tử

Nếu ID phần tử thay đổi, dùng:

jsPlumb.setId(el,newId);
//hoặc
jsPlumb.setIdChanged(oldId,newId);

Để cập nhật lại các phần tử đã đăng ký trước đó.

Tổng Kết

Đã hoàn thành khảo sát ban đầu, bắt đầu thực hành với một vài ví dụ đơn giản.