Làm thế nào tôi có thể giữ cho các tế bào khớp bị tràn giấy?

Question

Tôi đang sử dụng các khớp nối để tạo biểu đồ có thể chỉnh sửa được. Người dùng có thể kéo chúng xung quanh và di chuyển từng ô. Tuy nhiên, khi một tế bào được kéo vào cạnh, nó tràn và bị cắt. Tôi muốn ngăn chặn điều này xảy ra, thay vào đó là tế bào dừng lại trước khi nó đến mép giấy và không được phép vượt qua mép, do đó luôn luôn hoàn toàn nằm trong giấy. Các hành vi có thể được nhìn thấy trong demo rất riêng jointjs' ở đây:

http://www.jointjs.com/tutorial/ports

Hãy thử kéo di động để cạnh và bạn sẽ thấy rằng nó cuối cùng sẽ được ẩn như nó đi qua mép của phần tử giấy.

Thứ hai, tôi đang sử dụng các plugin cho bố trí đồ thị có hướng, tìm thấy ở đây:

http://jointjs.com/rappid/docs/layout/directedGraph

Như bạn thấy, vị trí cây tự động di chuyển tới phía trên bên trái của phần tử giấy mỗi khi nhấp chuột bố trí. Làm cách nào tôi có thể sửa đổi các vị trí mặc định này? Các tùy chọn duy nhất tôi thấy cho hàm được cung cấp là khoảng trống giữa các cấp bậc và không gian giữa các nút, không có vị trí ban đầu. Giả sử tôi muốn cây xuất hiện ở giữa trang giấy khi nhấp vào 'bố cục', tôi sẽ phải thay đổi ở đâu? Cảm ơn trước sự giúp đỡ nào.

Answer 1

Tôi nghĩ câu trả lời trước của tôi vẫn khả thi, nhưng đây là cách tôi đã triển khai nó trong dự án của mình. Nó có một lợi thế so với câu trả lời khác ở chỗ nó không yêu cầu bạn sử dụng một tùy chỉnh elementView và có vẻ đơn giản hơn (với tôi).

(Working jsfiddle: http://jsfiddle.net/pL68gs2m/2/)

Trên paper, xử lý các sự kiện cell:pointermove. Trong trình xử lý sự kiện, hãy thực hiện hộp giới hạn của cellView mà sự kiện đã được kích hoạt và sử dụng để hạn chế chuyển động.

var graph = new joint.dia.Graph; 

var width = 400; 
var height = 400; 
var gridSize = 1; 

var paper = new joint.dia.Paper({ 
    el: $('#paper'), 
    width: width, 
    height: height, 
    model: graph, 
    gridSize: gridSize 
}); 

paper.on('cell:pointermove', function (cellView, evt, x, y) { 

    var bbox = cellView.getBBox(); 
    var constrained = false; 

    var constrainedX = x; 

    if (bbox.x <= 0) { constrainedX = x + gridSize; constrained = true } 
    if (bbox.x + bbox.width >= width) { constrainedX = x - gridSize; constrained = true } 

    var constrainedY = y; 

    if (bbox.y <= 0) { constrainedY = y + gridSize; constrained = true } 
    if (bbox.y + bbox.height >= height) { constrainedY = y - gridSize; constrained = true } 

    //if you fire the event all the time you get a stack overflow 
    if (constrained) { cellView.pointermove(evt, constrainedX, constrainedY) } 
}); 

Answer 2

Chỉnh sửa: Tôi nghĩ rằng phương pháp này vẫn khả thi, nhưng bây giờ tôi nghĩ câu trả lời khác của tôi đơn giản/tốt hơn.

Các JointJS tài liệu cung cấp một mẫu nơi sự chuyển động của một hình dạng được contrained nằm trên một hình elip:

http://www.jointjs.com/tutorial/constraint-move-to-circle

Nó hoạt động bằng cách

1. Xác định một cái nhìn mới cho các phần tử của bạn , mở rộng joint.dia.ElementView
2. Vượt qua các sự kiện pointerdown và pointermove để thực hiện ràng buộc int. Này được thực hiện bằng cách tính toán một vị trí mới, dựa trên vị trí chuột và các hạn chế, và sau đó đi qua này để các cơ sở ElementView xử lý sự kiện
3. Buộc paper sử dụng xem yếu tố tùy chỉnh của bạn

Cách tiếp cận này có thể dễ dàng điều chỉnh để ngăn hình dạng bị kéo ra khỏi mép giấy của bạn. Ở bước 2, thay vì tính toán giao lộ với hình elip như trong hướng dẫn, bạn sẽ sử dụng Math.min() hoặc Math.max() để tính vị trí mới.

Answer 3

I. Để ngăn các phần tử tràn giấy bạn có thể sử dụng restrictTranslate tùy chọn giấy (JointJS v0.9.7 +).

paper.options.restrictTranslate = function(cellView) { 
    // move element inside the bounding box of the paper element only 
    return cellView.paper.getArea(); 
} 

http://jointjs.com/api#joint.dia.Paper:options

II. Sử dụng các tùy chọn bố cục marginX và marginY Chỉ đường bố cục để di chuyển góc trên bên trái của biểu đồ kết quả, tức là thêm lề vào bên trái và trên cùng.

http://jointjs.com/rappid/docs/layout/directedGraph#configuration

Answer 4

Như một sự bổ sung cho câu trả lời của Roman, restrictTranslate cũng có thể được cấu hình như true để hạn chế chuyển động của các yếu tố đến ranh giới của khu vực giấy.

Ví dụ:

var paper = new joint.dia.Paper({ 
    el: $('#paper'), 
    width: 600, 
    height: 400, 
    model: graph, 
    restrictTranslate: true 
})