在 yFiles 中定义图形的最大面积

Question

我正在使用 yFiles 开发动态图形编辑器。这意味着用户可以从菜单中选择新节点并将它们拖到图形区域中。但是，我希望我的图形在 x 轴上的大小有限。也就是说，图形应该可以在垂直方向上不受限制地扩展，但要保持最大宽度。我完全不知道这样做的方法，所以定义图形的最大宽度。

我想要最终效果，就像 this demo 中的橙色矩形一样。那里用了个PositionHandler，不知道怎么整合

不知道它是否有任何帮助，但这是我定义图形交互部分的片段。

'createEditorMode': function() {
    var /** yfiles.input.GraphSnapContext */ snapContext = new yfiles.input.GraphSnapContext();
    snapContext.enabled = false;
    snapContext.nodeGridConstraintProvider = new yfiles.input.SimpleGridConstraintProvider /** .<yfiles.graph.INode> */.FromGridInfo(this.gridInfo);
    snapContext.bendGridConstraintProvider = new yfiles.input.SimpleGridConstraintProvider /** .<yfiles.graph.IBend> */.FromGridInfo(this.gridInfo);
    snapContext.portGridConstraintProvider = new yfiles.input.SimpleGridConstraintProvider /** .<yfiles.graph.IPort> */.FromGridInfo(this.gridInfo);

    var graph = this.graphControl.graph;

    var /** yfiles.input.GraphEditorInputMode */ mode = new yfiles.input.GraphEditorInputMode();
    mode.snapContext = snapContext;
    mode.edgeCreationAllowed = false; //only one edge create
    mode.marqueeSelectionInputMode.enabled = true; //block selection
    mode.nodeCreator = null;

    var /** yfiles.input.OrthogonalEdgeEditingContext */ newOrthogonalEdgeEditingContext = new yfiles.input.OrthogonalEdgeEditingContext();
    newOrthogonalEdgeEditingContext.orthogonalEdgeEditing = true;

    mode.createEdgeInputMode.orthogonalEdgeCreation = true; //Enable edges' creation in orthogonal mode
    mode.orthogonalEdgeEditingContext = newOrthogonalEdgeEditingContext;
    mode.createBendModePriority = mode.moveModePriority - 1;// add a context// menu
    mode.clickSelectableItems = yfiles.graph.GraphItemTypes.NODE | yfiles.graph.GraphItemTypes.EDGE;
    mode.labelAddingAllowed = false;
    mode.labelEditingAllowed = false;
    mode.clipboardOperationsAllowed  = false;
    mode.undoOperationsAllowed = true;
    //mode.undoOperationsAllowed = false;
    mode.addItemClickedListener(yfiles.lang.delegate(this.onItemClicked, this));
    mode.addItemDoubleClickedListener(yfiles.lang.delegate(this.onItemDoubleClicked, this));

    this.contextMenu = new demo.ContextMenu();
    mode.contextMenuInputMode.menu = this.contextMenu;
    this.contextMenu.install(this.graphControl.div);
    this.contextMenu.addOpenedListener(function( /** Object */
        sender, /** yfiles.system.EventArgs */
        args) {
            var /** yfiles.system.CancelEventArgs */ cancelEventArgs = new yfiles.system.CancelEventArgs();
            mode.contextMenuInputMode.menuOpening(cancelEventArgs);
            if (cancelEventArgs.cancel) {
                (( /** @type {demo.ContextMenu} */ (sender))).visible = false;
            }
        }
    );
    this.contextMenu.addClosedListener(function( /** Object */ sender, /** yfiles.system.EventArgs */ args) {
        mode.contextMenuInputMode.menuClosed();
    });
    mode.contextMenuInputMode.addCloseMenuListener((function( /** Object */ o, /** yfiles.system.EventArgs */ args) {
        this.contextMenu.visible = false;
    }).bind(this));
    mode.contextMenuInputMode.addPopulateContextMenuListener(yfiles.lang.delegate(this.onPopulateContextMenu, this));
    return mode;
},

Answer 1

（旁注：如果您的 yFiles 许可证有有效的支持订阅，您可以咨询我们的支持团队。虽然我们有时会在 Stack Overflow 上闲逛，但这并不是获得支持的最佳方式.)

实际上，这涉及到一些事情。首先，默认情况下 yFiles 不会对图形延伸的距离设置任何限制，尽管我相当确定坐标大约为 210 万时事情会变得很奇怪。因此，要确保图表的最大宽度，您需要更改多个不同方面：

防止用户在错误的地方放置节点

您可能有一个 NodeDropInputMode somewhere, even though I don't see it in your configuration. NodeDropInputMode has a validDropHitTestable 属性，定义可以删除节点的位置。您可以简单地禁止在 x 坐标处超出您想要允许的范围。

稍微复杂一些的过程会在拖动手势期间将 x 坐标固定为有效值。您可以通过子类化 NodeDropInputMode 并相应地覆盖 setDragLocation 方法来实现。这也将确保预览“固定”到最大 x 位置，即使鼠标指针超出该位置而不是仅仅禁止放置。
防止用户将节点移出边界

可以使用输入演示中的自定义 IPositionHandler. You can find an example 自定义节点移动（实际上是一个非常相似的示例）。
防止用户调整节点大小以超出范围

调整大小与节点移动类似，尽管在通过 IReshapeHandleProvider. There's a demo showing that 创建句柄的点也是如此。
确保自动布局限制在特定区域

并非所有布局算法都能做到这一点。其实只有我们organic layout is capable of setting a suitable output restriction强制布局成矩形。
一堆其他的小东西

必须通过合适的句柄防止用户将弯头移动到边界外，decorated to bends。

可以通过适当的 label layout model.
来限制标签移动
确保 copy/paste 或重复不会将创建的项目放置在边界之外（它们通常创建时有轻微的偏移）可能最简单的方法是将 GEIM 上的 pasteDelta 设置为(0, 0).

A ViewportLimiter 可用于防止用户将视口移动到离图形太远的位置。

可能还有其他我遗漏的地方可能会将物品或物品的一部分放在您的范围之外。

在 yFiles 中定义图形的最大面积

Define a maximum area for a graph in yFiles

html

yfiles