Keyframes UI

Die Keyframes-Komponente bietet eine visuelle Oberfläche im Editor, um viewport-spezifische Style-Änderungen zu inspizieren und zu steuern. Style-Anpassungen werden als einzelne Keyframes über den Viewport-Bereich dargestellt, sodass Entwickler sehen, welche Styles bei welchen Breakpoints angewendet werden.

Inhaltsverzeichnis

• Kernkonzepte
• Zukünftige Verbesserungen
• Zweck

Kernkonzepte

• SpectrumSet:
  Keyframes werden aus einem SpectrumSet abgeleitet, einer Datenstruktur, die aus den Style-Regeln des Blocks generiert wird. Jedes Spectrum repräsentiert den Zustand einer Property bei einem bestimmten Viewport und beinhaltet:
  • saves – gespeicherte Styles
  • changes – noch nicht gespeicherte Editor-Änderungen
  • removes – zum Entfernen markierte Styles
  • css – das kompilierte CSS für den Viewport
  • viewport und priority – steuern die Reihenfolge und Range. Das SpectrumSet wird von der Generator-Klasse erstellt, die aktuelle und vorherige Viewport-Zustände vergleicht, gültige und entfernte Styles zusammenführt und geordnete Spectrums erzeugt, die sowohl das Rendering als auch die UI-Komponenten versorgen.
• Keyframe-Erzeugung:
  Die Keyframes UI erzeugt visuelle Keyframes aus dem SpectrumSet. Das System stellt sicher, dass immer ein Standard-Keyframe bei Viewport 0 existiert und zusätzliche Keyframes bei Bedarf erzeugt werden, um Änderungen, entfernte Styles und gespeicherte Zustände abzubilden.
• Interaktive Visualisierung:
  Jeder Keyframe wird als UI-Element dargestellt, dessen Breite den betroffenen Viewport-Bereich repräsentiert. Keyframes zeigen an:
  • changes – ungespeicherte Änderungen
  • removes – entfernte Styles
  • saves – gespeicherte Styles
• Hervorhebung und Zuordnung:
  Das Auswählen eines Keyframes hebt den entsprechenden Style im Inspektor hervor, um den betroffenen Viewport-Bereich zu bearbeiten.
• Responsive Berechnung:
  Die Breite der Keyframes wird dynamisch basierend auf dem aktuellen Editor-Viewport berechnet, um eine genaue visuelle Darstellung über verschiedene Layouts hinweg sicherzustellen.
• Integration mit Block-Zustand:
  Die Keyframes-Komponente nutzt den Quantum Viewports Store, um zu verfolgen:
  • den aktiven Viewport
  • Iframe-Abmessungen
  • Editor-Auswahl
  • Keyframe-Zustände (saves, changes, removes)

Zukünftige Verbesserungen

• In kommenden Versionen werden changes und removes direkt in den Block-Attributen gespeichert, um vollständige Navigation in der Editor-Historie (Undo/Redo) zu ermöglichen. Die derzeitige Trennung im Store verhindert korrektes History-Tracking.
• Spectrum-Objekte werden als explizite Klassen implementiert, um die Zugänglichkeit zu verbessern und die Interaktion mit den zugrunde liegenden Style-Daten zu erleichtern.

Zweck

Die Keyframes UI verbindet die rohen Viewport-Style-Daten mit der Editor-Erfahrung. Sie ermöglicht Entwicklern, Style-Änderungen über Breakpoints hinweg zu visualisieren und zu steuern, während Konsistenz mit dem zugrunde liegenden SpectrumSet und der CSS-Generierung gewährleistet bleibt.