如何防止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

我。为防止元素溢出纸张，您可以使用 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

二。使用 marginX 和 marginY DirectedGraph 布局选项移动结果图的左上角，即在左侧和顶部添加边距。

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

Answer 3

编辑：我认为这种方法仍然可行，但我现在认为我的其他答案更简单/更好。

JointJS 文档提供了一个示例，其中形状的移动被限制在椭圆上：

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

它的工作原理

1. 为您的元素定义一个新视图，扩展joint.dia.ElementView
2. 覆盖视图中的pointerdown 和pointermove 事件以实现约束。这是通过根据鼠标位置和约束计算新位置来完成的，然后将其传递给基础 ElementView 事件处理程序
3. 强制paper 使用您的自定义元素视图

这种方法很容易适应，以防止形状被拖出纸张边缘。在第 2 步中，您将使用Math.min() 或Math.max() 来计算新位置，而不是像教程中那样计算与椭圆的交点。

Answer 4

我认为我之前的答案仍然可行，但这就是我在项目中实现它的方式。与其他答案相比，它的优势在于它不需要您使用自定义 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) }
});