Définir une surface maximale pour un graphique dans yFiles

Question

Je travaille sur un éditeur de graphique dynamique, en utilisant yFiles. Cela signifie que l'utilisateur peut choisir de nouveaux nœuds dans un menu et les faire glisser dans la zone du graphique. Cependant, je souhaite que mon graphique ait une taille limitée sur l'axe des x. Autrement dit, le graphique devrait être extensible sans limite verticale, mais en conservant une largeur maximale. Je n'ai absolument aucune idée de la façon de le faire, définissant ainsi une largeur maximale pour le graphique. Je voudrais avoir un effet final comme le rectangle orange dans this demo. Là, un PositionHandler est utilisé, mais je ne sais pas comment l'intégrer.

Je ne sais pas si cela peut être utile, mais c'est l'extrait dans lequel je définis la partie interactive du graphique.

'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

(Side note: Si vous avez un abonnement de soutien actif pour votre licence yFiles, vous pouvez simplement demander à notre équipe d'assistance Bien que nous traîner sur débordement de pile parfois, ce n'est pas vraiment la meilleure façon de. obtenir de l'aide.)

---

Il y a plusieurs choses qui entrent en jeu, en fait. Tout d'abord, par défaut, yFiles ne place aucune limite sur l'étendue du graphique, même si je suis assez certain que les choses deviennent bizarres avec des coordonnées autour de 2,1 millions. Donc, pour assurer une largeur maximale du graphe nécessite de modifier un certain nombre d'aspects différents:

1. empêcher l'utilisateur de tomber nœuds au mauvais endroit

   Vous avez probablement un NodeDropInputMode quelque part, même bien que je ne le vois pas dans votre configuration. NodeDropInputMode a une propriété validDropHitTestable, définissant où un nœud peut être supprimé. Vous pouvez simplement interdire les gouttes aux coordonnées x au-delà de ce que vous voulez autoriser.

   Un processus légèrement plus impliqué pince la coordonnée x à des valeurs valides pendant le mouvement de glissement. Vous pouvez le faire en sous-classant NodeDropInputMode et en remplaçant la méthode setDragLocation en conséquence. Cela permettrait également de s'assurer que l'aperçu "colle" à l'emplacement x maximum, même si le pointeur de la souris va au-delà de cela au lieu de simplement refuser la baisse.

2. empêcher l'utilisateur de nœuds se déplaçant en dehors des limites

   mouvement nœud peut être personnalisé avec une coutume IPositionHandler. Vous pouvez trouver an example de la façon de le faire dans les démos d'entrée (un exemple très similaire, en fait).

3. empêcher l'utilisateur de redimensionner les noeuds de sorte qu'ils sortent des limites

   Resizing est contrainte semblable au mouvement du noeud, mais à l'endroit où les poignées sont créés via IReshapeHandleProvider. Il y a également a demo showing that.

4. Veiller à ce que les maquettes automatiques sont limités à une zone

   Tous les algorithmes de mise en page sont capables.En fait, seul notre organic layout est capable de définir un output restriction approprié pour forcer la disposition dans un rectangle.

5. doit être fait un tas d'autres petites choses

   empêchant l'utilisateur de se déplacer en dehors des limites des coudes par une poignée appropriée, decorated to bends.

   La restriction du mouvement de l'étiquette peut être effectuée via un label layout model approprié. S'assurer que copier/coller ou dupliquer ne place pas les éléments créés en dehors des limites (ils sont généralement créés avec un léger décalage) peut probablement être fait plus facilement en réglant le pasteDelta sur GEIM à (0, 0). Un ViewportLimiter peut être utilisé pour empêcher l'utilisateur de déplacer la fenêtre trop loin du graphique.

   Il y a probablement d'autres endroits que j'ai manqués qui pourraient placer des éléments ou des parties d'entre eux en dehors de vos limites.