定義一個最大面積爲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牌照的積極支持訂閱，你可以問我們的支持團隊雖然我們掛出的時間堆棧溢出，這確實不是最好的辦法。得到支持。）

---

有跡象表明，進入這幾件事情，其實。首先，默認情況下，yFiles對圖的延伸距離沒有任何限制，但我相當確定事情會變得很奇怪，座標在210萬左右。因此，爲了確保圖的最大寬度要求你改變了許多不同的方面：

1. 從錯誤的地方跌落節點防止用戶

   你可能有一個NodeDropInputMode地方，甚至儘管我沒有在你的配置中看到它。 NodeDropInputMode具有一個validDropHitTestable屬性，用於定義可以放置節點的位置。你可以簡單地禁止在你想要允許的x座標下放置液滴。

   稍微更復雜的過程會鉗的x拖動手勢期間座標爲有效值。您可以通過繼承NodeDropInputMode並重寫setDragLocation方法來做到這一點。這也將確保預覽「粘」到最大的x位置，即使鼠標指針超出該位置，而不是僅僅禁止掉落。

2. 從邊界

   節點運動可以用自定義IPositionHandler定製外部移動節點防止用戶。您可以在輸入演示中找到an example如何做到這一點（實際上非​​常類似的示例）。

3. 從調整大小節點防止用戶，使得他們去出界

   調整大小被約束類似於節點移動，儘管其中手柄通過IReshapeHandleProvider創建的點。還有a demo showing that。

4. 確保自動佈局限制在一定區域

   並非所有佈局算法能夠這一點。事實上，只有我們的organic layout能夠設置合適的output restriction來強制佈局成矩形。

5. 一束其它微小東西

   從移動範圍之外的彎曲防止用戶必須通過一個合適的手柄，decorated to bends來完成。

   限制標籤的移動可以通過適當的label layout model完成。

   通過將GEIM上的pasteDelta設置爲（0,0），可以確保複製/粘貼或複製不會將創建的項目放置在邊界之外（它們通常以輕微的偏移量創建）。

   A ViewportLimiter可用於防止用戶將視口移動太遠離圖表。

   可能還有其他地方我錯過了，可能會放置物品或其中的一部分在你的範圍之外。