Angular - Ereignisschleife verhindern?

Question

Ich brauche deine Hilfe, da ich immer noch Probleme mit dem Umgang mit Ereignissen habe. Hier ist das Konzept:

Um zu kontextualisieren, lassen Sie uns sagen, dass ich visuelle Elemente habe, die ich "Komponenten" nenne. Eine Komponente wird durch 2 Javascript-Objekte definiert. Einer enthält Daten (wie Position x, y, Breite, Höhe, Farbe, etc ...). Der andere ist die Ansicht, die eine 3rd-Party-Bibliothek namens draw2d ausnutzt. Draw2d verwendet seine eigenen x y Breite Höhe Farbe etc ... Eigenschaften. Was bedeutet, dass ich Werte "binden" muss, um sie immer gleich zu halten.

Zu diesem Zweck verwende ich nur Ereignisse. Es gibt 'on' Ereignisse in draw2d, die mir erlauben, diese Änderungen zu beobachten. Für die eckige Seite verwende ich einfach die ng-Modell-Direktive direkt auf meinen Datenbindungen. Wenn Daten aktualisiert werden, aktualisiere ich die draw2d-Ansicht, und wenn die Ansicht bearbeitet wird, aktualisiere ich meine Daten. Dieser Teil funktioniert korrekt, da dies nicht schwer zu handhaben ist.

Ich habe dann versucht, mehrere Auswahlbearbeitung zu implementieren. Dazu speichere ich jede ausgewählte Komponente in einem Array. Wenn ein Wert aus der Ansicht oder aus den Daten bearbeitet wird, triggert ich ein Ereignis, bei dem jede ausgewählte Komponente die gleichen Daten auf denselben Wert setzt. Es funktioniert wieder großartig.

Wo ich anfange hart zu kämpfen, ist es, wenn ich die Position bearbeiten will. Ich möchte nicht, dass alle Komponenten übereinander liegen. Wenn ich mehrere x- oder y-Attribute bearbeite, ermittele ich anstelle von Positionierungselementen den Versatz, sodass sich alle Komponenten nur mit diesem Versatz bewegen. Hier ist es, wo es nicht in Ordnung ist. Natürlich, wenn ein Offset gesetzt wird, werden andere Komponenten aktualisiert, die auch ihren neuen Wert auslösen, so dass ich in einer Höllenschleife feststecke.

Ich würde gerne wissen, ob Sie ein Muster kennen, um Ereignisse zu behandeln, so dass Sie ein Ereignis aus propagieren können, wenn Sie 2 Ansicht und ein Modell haben.

Hier mein Ausbreitungs Schnipsel ist:

scope.canvas.on('figureEdited', function (canvas, event) { 
     if (scope.selectedComponents.length > 1) { 
     var key = event.key; 
     var value = event.value; 
     var originComponent = event.origin; 
     for (var i = 0; i < scope.selectedComponents.length; i++) { 
      var selectedComponent = scope.selectedComponents[i]; 
      if (selectedComponent !== originComponent) { 
      if (key !== 'x' && key !== 'y') { 
       selectedComponent.setData(key, value); 
      } else { 
       var offset = value - event.oldValue; 
       selectedComponent.setData(key, selectedComponent.getData(key) + offset, true); 
      } 
      } 
     } 
     } 
    }); 

die Ausgabe von

selectedComponent.setData(key, selectedComponent.getData(key) + offset, true); 

verursacht wird es triggert ein figureEdited Ereignis, jede Komponente wieder in Bewegung zu machen, indem diese Offset, unendlich (von 10 Digest gestoppt Iterationen).

Ich hoffe, das ist klar, sorry für den langen Text und vielen Dank für Ihre Hilfe :)

Alann.

Answer 1

Wenn der Aufruf setData synchron neue Ereignisse auslöst, können Sie Ereignisse ignorieren, die in Ihrer Schleife ausgelöst werden, indem Sie ein Ignorier-Flag setzen und es zu Beginn der Funktion überprüfen.

var ignoreEvent = false; 
scope.canvas.on('figureEdited', function (canvas, event) { 
    if (ignoreEvent) return; 
    ignoreEvent = true; 

    //... 

    ignoreEvent = false; 
});