如何让jointjs细胞不会溢出纸张？

Question

我正在使用jointjs制作用户可编辑的图表.用户可以拖动它们并重新定位每个单元格.但是,当一个单元格被拖到边缘时,它会溢出并被切断.我希望防止这种情况发生,相反,单元格在到达纸张边缘之前停止并且不允许越过边缘,因此总是完全保留在纸张内.这个行为可以在jointjs自己的演示中看到:

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

尝试将单元格拖动到边缘,您将看到它最终在穿过纸张元素的边缘时变得隐藏.

其次,我使用插件进行有向图布局,在这里找到:

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

如您所见,只要您的点击布局,树位置就会自动移动到纸张元素的左上角.如何修改这些默认位置？我看到的所提供函数的唯一选项是行之间的空间和节点之间的空间,没有初始位置.假设我想在点击"布局"时将树显示在纸张中间,我将在哪里进行更改？在此先感谢您的帮助.

Answer 1

作为Roman的答案的补充,restrictTranslate还可以配置为true限制元素移动到纸张区域的边界.

例:

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

Answer 2

我认为我之前的答案仍然可行，但这就是我在我的项目中实现它的方式。它比其他答案有优势，因为它不需要您使用自定义elementView并且看起来更简单（对我来说）。

（工作jsfiddle：http : //jsfiddle.net/pL68gs2m/2/）

在paper，处理cell:pointermove事件。在事件处理程序中，计算cellView触发事件的边界框并使用它来限制移动。

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 3

I.为防止元素溢出纸张,您可以使用restrictTranslate纸张选项(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.使用marginX和marginYDirectedGraph布局选项移动结果图的左上角,即在左侧和顶部添加边距.

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