mxgraph 鼠标右键拖动整个画布

在 mxGraph 中，可以通过以下步骤来实现鼠标右键拖动整个画布：

1. 创建一个 mxEvent 对象并将其设置为 "mouseDown" 事件。

graph.addListener(mxEvent.MOUSE_DOWN, function(sender, evt)
{
    // Check if right mouse button is pressed
    if (mxEvent.isMouseEvent(evt) && evt.evt.button == 2)
    {
        // ...
    }
});

2. 在 "mouseDown" 事件处理程序中，检查鼠标是否按下了右键。

3. 如果鼠标按下了右键，则记录鼠标的初始位置和画布的初始位置。

var mouseDown = evt.getProperty('event');
var origin = mxUtils.getOffset(graph.container);
var startX = mouseDown.clientX - origin.x;
var startY = mouseDown.clientY - origin.y;
var translate = graph.view.getTranslate();
var dx = startX - translate.x;
var dy = startY - translate.y;

4. 创建一个 mxEvent 对象并将其设置为 "mouseMove" 事件。

graph.addListener(mxEvent.MOUSE_MOVE, function(sender, evt)
{
    // ...
});

5. 在 "mouseMove" 事件处理程序中，检查鼠标是否已按下右键，并计算出当前鼠标位置相对于初始位置的偏移量。

if (mxEvent.isMouseEvent(evt) && evt.evt.button == 2)
{
    var mouseMove = evt.getProperty('event');
    var dx = mouseMove.clientX - startX;
    var dy = mouseMove.clientY - startY;
    
    // ...
}

6. 在 "mouseMove" 事件处理程序中，将画布的偏移量设置为初始偏移量加上鼠标偏移量，并使用 mxGraph 的 "panGraph" 方法来应用新的偏移量。

if (mxEvent.isMouseEvent(evt) && evt.evt.button == 2)
{
    var mouseMove = evt.getProperty('event');
    var dx = mouseMove.clientX - startX;
    var dy = mouseMove.clientY - startY;
    
    graph.view.setTranslate(dx, dy);
    graph.view.refresh();
    mxEvent.consume(evt);
}

7. 创建一个 mxEvent 对象并将其设置为 "mouseUp" 事件。

graph.addListener(mxEvent.MOUSE_UP, function(sender, evt)
{
    // ...
});

8. 在 "mouseUp" 事件处理程序中，将画布的偏移量重置为新的偏移量，并使用 mxGraph 的 "panGraph" 方法来应用新的偏移量。

graph.addListener(mxEvent.MOUSE_UP, function(sender, evt)
{
    if (mxEvent.isMouseEvent(evt) && evt.evt.button == 2)
    {
        var translate = graph.view.getTranslate();
        graph.view.setTranslate(translate.x + dx, translate.y + dy);
        mxEvent.consume(evt);
    }
});

这样，当用户按下鼠标右键并拖动时，整个画布将随着鼠标的移动而移动。