如何让jointjs细胞不会溢出纸张？ [英] How can I keep jointjs cells from overflowing the paper?

问题描述

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

I'm using jointjs to make diagrams which will be user-editable. The user may drag them around and relocate each cell. However, when a cell is dragged to the edge, it overflows and becomes cut off. I want to prevent this from happening, instead the cell to stop before it gets to the edge of the paper and not be allowed to cross the edge, thus always staying completely within the paper. The behavior can be seen in jointjs' very own demos here:

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

尝试将单元格拖到边缘，你会看到它最终当它穿过纸张元素的边缘时变得隐藏。

Try dragging the cell to the edge and you'll see that it eventually becomes hidden as it crosses the edge of the paper element.

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

Secondly, I'm using the plugin for directed graph layout, found here:

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

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

As you can see, the tree position automatically moves to the upper left of the paper element whenever your click layout. How can I modify these default positions? The only options I see for the provided function are space between ranks and space between nodes, no initial position. Say I wanted the tree to appear in the middle of the paper upon clicking 'layout', where would I have to make changes? Thanks in advance for any help.

推荐答案

我认为我以前的答案仍然可行，但这就是我在我的实施方式项目。它比其他答案更有优势，因为它不需要你使用自定义的 elementView ，而且对我来说似乎更简单。

I think my previous answer is still feasible, but this is how I implemented it in my project. It has an advantage over the other answer in that it doesn't require you to use a custom elementView and seems simpler (to me).

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

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

在纸张上，处理单元格：pointermove 事件。在事件处理程序中，计算触发事件的 cellView 的边界框，并使用它来约束移动。

On the paper, handle the cell:pointermove event. In the event handler, work out the bounding box of the cellView on which the event was triggered and use that to constrain the movement.

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) }
});

这篇关于如何让jointjs细胞不会溢出纸张？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！