Verbesserung
Top-Thema
Wichtig
Kleinigkeit
Wichtig
Aktuell verwendert der ACE Code Editor für Zeilen, die mehr Zeichen beinhalten als dem Benutzer in einer Zeile dargestellt werden können, eine horizontale Scrollbar.
Wünschenswert wäre stattdessen ein automatischer Textumbruch bei zu "langen" Zeilen, sodass man auf einen Blick den relevanten Textinhalt, ohne eine weitere Benutzeraktion, erfassen kann.
Die Aktivierung des wrap Modus des ACE Editors löst nicht ganz das Problem. ACE regristriert beim Erstellen des Editors einen EventHandler auf das Window resize Event. Falls nun ein resize Event ausgelöst wird, bspw. indem das Icon zum Maximieren bzw. Minimieren geklickt wird, wird der ACE EventHandler vor dem Rendering der TL Komponenten ausegführt. Das DOM Element das den Editor enthält besitzt somit noch nicht die aktualisierte Höhe und Breite, und somit erstellt der ACE Editor an den falschen Stellen Zeilenumbrüche.
In dieser Situation wurde das Maximieren Icon gedrückt. In dem ACE resize EventHandler wurde ein Breakpoint gesetzt um den Zustand visuell, anhand diesen Screenshots, zu verdeutlichen. Durch das TL Rendering der Komponenten würde sich der Editor Bereich wesentlich vergrößern, da dies noch nicht ausgeführt wurde, fügt der Editor anhand dieser Größe Zeilenumbrüche ein. Man erhält dementsprechend
Umsetzung
Zuerst muss der ACE resize EventHandler entfernt werden. Anschließend wird die TL Layout Resizing Mechanik so erweitert, dass nach dem TL Komponentenrendering noch benutzerdefinierte Funktionen ausgeführt werden können. Diese werden wie die render und compute Funktionen an der layout Property des entsprechenden DOM Elements gespeichert.
Test
Starte den ScriptRecorder oder die Modellbasierte Suche. Schreibe in einer einzigen Linie soviele Zeichen dass sie sich über mehrere Zeilen erstreckt. Maximiere bzw. minimiere anschließend das Fenster und überprüfe ob der Text wie erwartet dargestellt wird.