如何防止jointjs细胞溢出纸张？

Posted 2023-02-22

【中文标题】如何防止jointjs细胞溢出纸张？

【英文标题】：How can I keep jointjs cells from overflowing the paper?

【发布时间】：2015-07-15 17:39:30

【问题描述】：

我正在使用jointjs 制作可供用户编辑的图表。用户可以拖动它们并重新定位每个单元格。但是，当一个单元格被拖到边缘时，它会溢出并被切断。我想防止这种情况发生，而是在细胞到达纸张边缘之前停止并且不允许越过边缘，因此始终完全保持在纸张内。该行为可以在jointjs自己的演示中看到：

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

尝试将单元格拖动到边缘，您会发现它最终会在越过纸张元素的边缘时被隐藏。

其次，我正在使用有向图布局插件，可在此处找到：

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

如您所见，每当您点击布局时，树位置会自动移动到纸张元素的左上角。如何修改这些默认位置？对于提供的函数，我看到的唯一选项是等级之间的空间和节点之间的空间，没有初始位置。假设我希望在单击“布局”时树出现在纸张中间，我必须在哪里进行更改？提前感谢您的帮助。

【参考方案1】：

作为对 Roman 的回答的补充，restrictTranslate 也可以配置为 true 以限制元素移动到纸张区域的边界。

例子：

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

【参考方案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

【参考方案3】：

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

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

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

它的工作原理

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

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

【讨论】：

谢谢，看来这是要走的路，虽然仍然不确定如何计算它，但我一直在搞砸它。

嗯。我的积压工作中有一个项目可以执行此操作。它非常低，但我会看看我是否可以把它推高然后在这里发布解决方案;o）

【参考方案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) 
);

【讨论】：

如果它对你有用，你能不接受我以前的回答吗？我认为如果将来访问此问题的人首先看到第二个答案会更好:)