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，即使我在您的配置中没有看到它。 NodeDropInputMode具有validDropHitTestable属性，用于定义节点的删除位置。你可以简单地禁止超出你想要允许的x坐标下降。

稍微更复杂的过程会在拖动手势期间将x坐标钳位有效值。您可以通过继承NodeDropInputMode并相应地重写setDragLocation方法来实现。这也可以确保预览“粘贴”到最大x位置，即使鼠标指针超出该位置而不是仅仅禁止掉落。
阻止用户移动界限之外的节点

可以使用自定义IPositionHandler自定义节点移动。你可以在输入演示中找到an example如何做到这一点（实际上是一个非常类似的例子）。
防止用户调整节点大小以使其超出范围

调整大小与节点移动类似，尽管在通过IReshapeHandleProvider创建句柄的位置。还有a demo showing that。
确保自动布局仅限于某个区域

并非所有布局算法都能胜任。事实上，只有我们的organic layout能够设置合适的output restriction才能将布局强制为矩形。
其他一些小事

防止用户在边界外移动弯曲必须通过合适的手柄decorated to bends完成。

限制标签移动可以通过适当的label layout model完成。

通过将GEIM上的pasteDelta设置为（0,0），确保复制/粘贴或复制不会将创建的项放在边界之外（它们通常以轻微偏移创建）可能最简单）。

可以使用ViewportLimiter来防止用户将视口移离图表太远。

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

在yFiles

1 个答案: