enhancement
major
minor
major
minor
major
#29933
React-UI: Der Griff eines Split-Panels "läuft weg" beim Ziehen mit der Maus; tiefe Baumknoten brechen um statt waagerecht zu rollen
Problem 1: Griff des Split-Panels
In der React-Oberfläche lässt sich der Griff (Sash) zwischen den Bereichen eines Split-Panels (<split>, TLSplitPanel) nicht mehr kontrolliert mit der Maus ziehen: Der Griff eilt dem Mauszeiger davon und beschleunigt bei jeder Bewegung, so dass ein gewünschtes Größenverhältnis kaum einstellbar ist.
Ursache
Mit Ticket #29870 (Commit b15d010924, PR !1911) wurde der Griff zu einem per Tastatur bedienbaren Separator umgebaut. Dabei wurde der Zustand der Zieh-Geste in TLSplitPanel.tsx neu geschrieben: Die neue Größe des Bereichs vor dem Griff wird als "aktuelle Größe + Abstand des Zeigers vom Druckpunkt" berechnet, die aktuelle Größe aber bei jeder Zeigerbewegung überschrieben. Dadurch wird der gesamte Abstand vom Druckpunkt bei jedem pointermove erneut addiert, die Bewegung summiert sich auf. Die vorherige Implementierung hielt die Startgröße des Bereichs für die Dauer der Geste fest und addierte den Abstand dazu.
Der Griff zum Ändern der Spaltenbreite einer Tabelle (TLTableView), der im selben Commit umgebaut wurde, ist nicht betroffen: Er leitet die Breite aus den beim Drücken gemerkten Werten ab.
Lösung
Die Startgröße des Bereichs vor dem Griff (und die Gesamtgröße der beiden Bereiche) bleiben für die Dauer der Geste unverändert; jede Bewegung berechnet die Größe aus Startgröße plus Abstand des Zeigers vom Druckpunkt, begrenzt durch die Mindestgrößen beider Bereiche. Tastaturbedienung und das Zurücksetzen per Doppelklick bleiben unverändert.
Problem 2: Tiefe Baumknoten brechen um
In einem Baum der React-Oberfläche (<tree>, TLTreeView, z.B. der Strukturbaum des View-Designers) brechen die Beschriftungen tief eingerückter Knoten in mehrere Zeilen um, sobald der Einzug den Platz aufbraucht. Mit wachsender Tiefe werden die Knoten unlesbar. Erwartet ist, dass ein Knoten auf einer Zeile bleibt und der Baum waagerecht rollt.
Ursache
Der Inhalt eines Knotens (tl-tree__content) ist einzeilig (white-space: nowrap) und wurde bisher mit Ellipse abgeschnitten. Der Inhalt selbst ist meist ein tl-text, und seit Ticket #29886 behält ein tl-text die Zeilenumbrüche seines Werts (white-space: pre-line). Diese Regel am Text gewinnt gegen die Einzeiligkeit des umgebenden Knoteninhalts, so dass die Beschriftung an Leerzeichen umbricht. Waagerecht rollen konnte der Baum (overflow-y: auto) auch vorher nicht.
Lösung
Im Design-System-Paket (tl-design-system, tree.css): Der Baum rollt in beide Richtungen (overflow: auto), ein Knoten ist mindestens so breit wie sein Inhalt (min-width: max-content), damit Zeige- und Auswahlfläche die gerollte Breite füllen, der Knoteninhalt bleibt einzeilig ohne Ellipse, und ein tl-text direkt im Knoteninhalt bleibt auf dieser Zeile (wie in der Tabellenzelle). In der Engine wird nur der Baum-Abschnitt in die versiegelte Kopie components.css übernommen und das Siegel neu berechnet, da dist des Pakets noch nicht auf master befindliche Inhalte trägt.