Version 1.1

Author: dbt-bossert

.gitignore

@@ -27,3 +27,4 @@ new-flow.json
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+doorbit_original.json

README.md

@@ -12,9 +12,12 @@ Ein leistungsstarkes Tool zur visuellen Erstellung und Bearbeitung von UI-Flows
 - 🔄 Undo/Redo Funktionalität
 - 📋 JSON Import/Export
 - 📱 Responsive Design
-- 🎯 Verschachtelbare Elemente
-- 📄 Multi-Page Support mit anpassbaren Titeln
+- 🎯 Verschachtelbare Elemente mit verbesserter Strukturnavigation
+- 📄 Multi-Page Support mit anpassbaren Titeln und Icons
 - 💻 Material Design Icon-Auswahl für Seiten
+- 🧩 Unterstützung für komplexe JSON-Strukturen und Subflows
+- 🔍 Verbesserte Containertyp-Erkennung und -Anzeige
+- 🔄 Automatische Strukturnormalisierung für konsistente JSON-Ausgabe
 
 ## Schnellstart
 

docs/enhanced_property_editor.md

@@ -84,6 +84,9 @@ Der EnhancedPropertyEditor ist ein zentraler Bestandteil des HybridEditors, der
 3. **Spezialisierte Editoren**: Optimierte Bearbeitung spezifischer Elementtypen.
 4. **Erweiterte Funktionalität**: Unterstützung für komplexe Elementstrukturen und Subflows.
 5. **Bessere Typensicherheit**: Strikte Typisierung durch TypeScript.
+6. **Containertyp-Erkennung**: Intelligente Erkennung und Anzeige des Containertyps (group, array, chipgroup, custom, subflow).
+7. **Verbesserte Strukturnavigation**: Optimierte Navigation durch verschachtelte Elemente mit Containertyp-Informationen.
+8. **Unterstützung für komplexe JSON-Strukturen**: Verbesserte Handhabung von doorbit_original.json und ähnlichen komplexen Strukturen.
 
 ## Implementierungsdetails
 

docs/refactoring_documentation.md

@@ -11,6 +11,9 @@ Das Refactoring konzentrierte sich auf folgende Hauptbereiche:
 3. Optimierung der Visibility-Condition-Auswertung durch Memoization und Abhängigkeitsverfolgung
 4. Verbesserung der TypeScript-Typen und Implementierung von Discriminated Unions
 5. Optimierung des State-Managements durch modulare Struktur
+6. Verbesserung der Pfadnavigation und -auflösung für tiefe Verschachtelungen
+7. Implementierung einer intelligenten Containertyp-Erkennung und -Anzeige
+8. Entwicklung von Strukturnormalisierungs- und Validierungsfunktionen für komplexe JSON-Strukturen
 
 ## 1. PropertyEditor-Refactoring
 
@@ -128,6 +131,76 @@ Das Refactoring konzentrierte sich auf folgende Hauptbereiche:
   - Bessere Nachvollziehbarkeit von Zustandsänderungen
   - Effizientere Speichernutzung
 
+## 6. Verbesserte Pfadnavigation
+
+### Probleme des ursprünglichen Designs
+
+- Begrenzte Unterstützung für tiefe Verschachtelungen
+- Inkonsistente Pfadauflösung bei komplexen Strukturen
+- Schwierigkeiten bei der Navigation durch verschachtelte Elemente
+- Probleme beim Hinzufügen von Elementen in tiefen Ebenen
+
+### Implementierte Lösung
+
+- **Verbesserte Funktionen**:
+  - `getElementByPath`: Robuste Funktion zur Auflösung von Elementpfaden
+  - `getPathContext`: Ermittelt den Kontext eines Pfads (übergeordnete Elemente, Containertyp)
+  - Optimierte Breadcrumb-Navigation mit Pfadkontext
+  - Verbesserte `handleAddElement`-Funktion mit Pfadkontext-Berücksichtigung
+
+- **Vorteile**:
+  - Unterstützung für bis zu 6 Verschachtelungsebenen
+  - Konsistente Pfadauflösung auch bei komplexen Strukturen
+  - Verbesserte Benutzerführung durch kontextbezogene Navigation
+  - Zuverlässiges Hinzufügen von Elementen in tiefen Ebenen
+
+## 7. Containertyp-Erkennung
+
+### Probleme des ursprünglichen Designs
+
+- Fehlende einheitliche Erkennung von Containertypen
+- Inkonsistente Behandlung verschiedener Container (Gruppe, Array, ChipGroup, etc.)
+- Unzureichende visuelle Unterscheidung von Containertypen
+- Schwierigkeiten bei der Bearbeitung von Unterelementen
+
+### Implementierte Lösung
+
+- **Neue Funktionen**:
+  - `getContainerType`: Ermittelt den Containertyp eines Elements (group, array, chipgroup, custom, subflow)
+  - `getSubElements`: Einheitliche Funktion zum Abrufen von Unterelementen
+  - Verbesserte visuelle Darstellung von Containertypen in der UI
+  - Containertyp-spezifische Aktionen und Bearbeitungsmöglichkeiten
+
+- **Vorteile**:
+  - Einheitliche Behandlung verschiedener Containertypen
+  - Verbesserte Benutzerführung durch visuelle Unterscheidung
+  - Optimierte Bearbeitung von Unterelementen
+  - Unterstützung für komplexe Containerstrukturen wie CustomUIElement mit sub_flows
+
+## 8. Strukturnormalisierung
+
+### Probleme des ursprünglichen Designs
+
+- Inkonsistente JSON-Strukturen bei Import/Export
+- Fehlende Validierung von Strukturen
+- Probleme bei der Verarbeitung komplexer JSON-Dateien wie doorbit_original.json
+- Inkonsistente Einwicklung von Elementen in PatternLibraryElement-Objekte
+
+### Implementierte Lösung
+
+- **Neue Funktionen**:
+  - `normalizeElementTypes`: Normalisiert Elementtypen und Eigenschaften
+  - `normalizeVisibilityCondition`: Normalisiert Visibility-Bedingungen
+  - `validateFlowStructure`: Validiert die Struktur eines Flows
+  - `enforcePatternLibraryElementWrapping`: Erzwingt die Einwicklung von Elementen
+  - `normalizeComplexStructure`: Spezielle Normalisierung für komplexe Strukturen
+
+- **Vorteile**:
+  - Konsistente JSON-Strukturen bei Import/Export
+  - Frühzeitige Erkennung von Strukturfehlern
+  - Verbesserte Unterstützung für komplexe JSON-Dateien
+  - Zuverlässige Verarbeitung von doorbit_original.json und ähnlichen Strukturen
+
 ## Testergebnisse
 
 Die implementierten Refactoring-Maßnahmen wurden mit automatisierten Tests validiert:

docs/technical_documentation.md

@@ -86,6 +86,8 @@ Die Anwendung unterstützt verschiedene UI-Elementtypen:
 - Hauptbearbeitungsbereich für UI-Elemente
 - Unterstützt Drag & Drop
 - Ermöglicht verschachtelte Strukturen
+- Verbesserte Pfadnavigation für tiefe Verschachtelungen
+- Intelligente Containertyp-Erkennung für verschiedene Elementtypen
 
 #### PropertyEditor und EnhancedPropertyEditor
 - Bearbeitung von Element-Eigenschaften
@@ -94,6 +96,8 @@ Die Anwendung unterstützt verschiedene UI-Elementtypen:
 - Modulare Struktur mit spezialisierten Editor-Komponenten
 - Factory-Pattern für elementtypspezifische Editoren
 - Wiederverwendbare UI-Komponenten für konsistente Benutzeroberfläche
+- Verbesserte Anzeige von Containereigenschaften und Unterelementen
+- Unterstützung für komplexe JSON-Strukturen und Subflows
 
 ##### ElementEditorFactory und EnhancedElementEditorFactory
 - Factory-Pattern zur Instanziierung des passenden Editors für jeden Elementtyp
@@ -125,11 +129,15 @@ Die Anwendung unterstützt verschiedene UI-Elementtypen:
 #### HybridEditor
 - Kombiniert die Vorteile von EditorArea und PropertyEditor
 - Verbesserte Benutzeroberfläche mit drei Hauptbereichen:
-  - Strukturnavigator: Hierarchische Anzeige aller Elemente
-  - EnhancedPropertyEditor: Verbesserte Eigenschaftsbearbeitung
-  - ElementContextView: Kontextinformationen zum ausgewählten Element
+  - Strukturnavigator: Hierarchische Anzeige aller Elemente mit Containertyp-Informationen
+  - EnhancedPropertyEditor: Verbesserte Eigenschaftsbearbeitung mit Containertyp-Anzeige
+  - ElementContextView: Kontextinformationen zum ausgewählten Element mit detaillierten Strukturinformationen
 - Unterstützt komplexe Elementstrukturen und Subflows
 - Optimierte Benutzerführung für verschachtelte Elemente
+- Verbesserte Pfadnavigation für tiefe Verschachtelungen (bis zu 6 Ebenen)
+- Intelligente Containertyp-Erkennung und -Anzeige (group, array, chipgroup, custom, subflow)
+- Optimierte Hinzufügung von Elementen in verschiedenen Containertypen
+- Verbesserte Breadcrumb-Navigation mit Containertyp-Informationen
 
 #### PageNavigator
 - Verwaltung mehrerer Seiten
@@ -168,6 +176,10 @@ Die Anwendung unterstützt verschiedene UI-Elementtypen:
 - Validierung der Struktur über JSON-Schema
 - Live-Preview des JSON
 - Speicherung von Seitentiteln und Icons im JSON
+- Automatische Strukturnormalisierung für konsistente JSON-Ausgabe
+- Unterstützung für komplexe JSON-Strukturen wie doorbit_original.json
+- Validierung und Korrektur von Strukturfehlern
+- Konsistente Einwicklung von Elementen in PatternLibraryElement-Objekte
 
 ### 4. Icon-Auswahl
 - Integrierter IconSelector für Material Design Icons
@@ -231,7 +243,10 @@ src/
     ├── visibilityUtils.ts    # Auswertung von Visibility-Bedingungen
     ├── optimizedVisibilityUtils.ts # Optimierte Auswertung mit Memoization
     ├── SubflowManager.ts     # Verwaltung von Subflows
-    └── uuidUtils.ts          # UUID-Generierung und -Verwaltung
+    ├── uuidUtils.ts          # UUID-Generierung und -Verwaltung
+    ├── normalizeUtils.ts     # Strukturnormalisierung und -validierung
+    ├── pathUtils.ts          # Pfadnavigation und -manipulation
+    └── containerUtils.ts     # Containertyp-Erkennung und -Verwaltung
 ```
 
 ## Technische Abhängigkeiten

docs/user_documentation.md

@@ -78,35 +78,60 @@ Die Hauptnavigation bietet folgende Funktionen:
 #### Bearbeitungsoberfläche
 
 1. **Strukturnavigator**: Zeigt die hierarchische Struktur aller Elemente
-   - Einfache Navigation durch verschachtelte Elemente
+   - Einfache Navigation durch verschachtelte Elemente (bis zu 6 Ebenen)
    - Direkte Auswahl von Unterelementen
    - Übersichtliche Darstellung der Elementhierarchie
+   - Anzeige des Containertyps (Gruppe, Array, Chip-Gruppe, etc.)
+   - Farbliche Unterscheidung verschiedener Containertypen
+   - Anzeige der Anzahl von Unterelementen
 
 2. **EnhancedPropertyEditor**: Verbesserte Eigenschaftsbearbeitung
    - Tabs für verschiedene Kategorien (Allgemein, Sichtbarkeit, Unterelemente, JSON)
    - Spezialisierte Editoren für jeden Elementtyp
    - Umfassende Bearbeitung aller Elementeigenschaften
+   - Anzeige des Containertyps im Header
+   - Verbesserte Strukturnavigation für Unterelemente
+   - Unterstützung für komplexe JSON-Strukturen
 
 3. **ElementContextView**: Kontextinformationen zum ausgewählten Element
-   - Anzeige des Elementpfads
+   - Anzeige des Elementpfads mit Containertyp-Informationen
    - Schnellzugriff auf übergeordnete Elemente
-   - Kontextbezogene Aktionen
+   - Kontextbezogene Aktionen je nach Containertyp
+   - Detaillierte Anzeige von Elementeigenschaften
+   - Verbesserte Darstellung von Unterelementen
+   - Containertyp-spezifische Aktionsschaltflächen
 
-### 5. Verschachtelung
+### 5. Verschachtelung und Container
 
 Elemente können verschachtelt werden:
 1. Gruppe oder Array-Element erstellen
 2. Weitere Elemente per Drag & Drop in das Container-Element ziehen
-3. Verschachtelungstiefe nach Bedarf erweitern
+3. Verschachtelungstiefe nach Bedarf erweitern (bis zu 6 Ebenen werden unterstützt)
+
+#### Containertypen
+- **Gruppe (group)**: Fasst mehrere Elemente zusammen, kann alle Elementtypen enthalten
+- **Array (array)**: Ermöglicht wiederholbare Elementgruppen, kann alle Elementtypen enthalten
+- **Chip-Gruppe (chipgroup)**: Enthält nur Boolean-Elemente als Auswahloptionen
+- **Benutzerdefiniert (custom)**: Kann sowohl Elemente als auch Subflows enthalten
+- **Subflow (subflow)**: Spezielle Container für komplexe Workflows
+
+#### Navigation in verschachtelten Strukturen
+1. Nutzen Sie die Breadcrumb-Navigation oben im Editor, um durch die Hierarchie zu navigieren
+2. Verwenden Sie den Strukturnavigator, um direkt zu bestimmten Elementen zu springen
+3. Nutzen Sie die containertyp-spezifischen Schaltflächen in der ElementContextView
+4. Beachten Sie die farbliche Kennzeichnung der verschiedenen Containertypen
 
 ## Tipps & Tricks
 
 ### Effiziente Bearbeitung
-- Nutzen Sie Gruppeneleente als Container für zusammengehörige Elemente, die dann in der App und im Web auch eine optische Gruppierung bilden
+- Nutzen Sie Gruppenelemente als Container für zusammengehörige Elemente, die dann in der App und im Web auch eine optische Gruppierung bilden
 - Duplizieren Sie ähnliche Elemente statt sie neu zu erstellen
 - Verwenden Sie die JSON-Vorschau für technische Überprüfungen
 - Verschieben Sie mit Pfeilelementen die Elemente bei Bedarf, um die Reihenfolge jederzeit zu ändern
 - Seiten können Sie einfach mit Drag & Drop neu anordnen
+- Nutzen Sie die Containertyp-Anzeige, um schnell zu erkennen, welche Art von Container Sie bearbeiten
+- Verwenden Sie die verbesserte Strukturnavigation, um schnell durch komplexe Hierarchien zu navigieren
+- Beachten Sie die farbliche Kennzeichnung der verschiedenen Containertypen für eine bessere Übersicht
 
 ### Mehrsprachigkeit
 - Füllen Sie alle Sprachversionen direkt aus
@@ -116,7 +141,15 @@ Elemente können verschachtelt werden:
 ### Organisation
 - Gruppieren Sie zusammengehörige Elemente
 - Nutzen Sie aussagekräftige Titel
-- Halten Sie die Verschachtelungstiefe überschaubar
+- Halten Sie die Verschachtelungstiefe überschaubar (max. 6 Ebenen werden optimal unterstützt)
+- Verwenden Sie den passenden Containertyp für Ihre Anforderungen:
+  - Gruppen für statische Zusammenfassungen
+  - Arrays für wiederholbare Elemente
+  - Chip-Gruppen für Mehrfachauswahl
+  - Custom-Elemente für spezielle Funktionalitäten
+  - Subflows für komplexe Teilabläufe
+- Nutzen Sie die Strukturnormalisierung für konsistente JSON-Ausgabe
+- Achten Sie auf die Validierungshinweise bei der JSON-Vorschau
 
 ### Sichtbarkeitsregeln
 - Nutzen Sie den verbesserten VisibilityConditionEditor für komplexe Bedingungen
@@ -154,3 +187,17 @@ Elemente können verschachtelt werden:
 2. **Wie funktioniert die Mehrsprachigkeit?**
    - Texte werden in allen konfigurierten Sprachen gespeichert
    - Sprachen können flexibel erweitert werden
+
+3. **Wie tief können Elemente verschachtelt werden?**
+   - Bis zu 6 Ebenen werden optimal unterstützt
+   - Tiefere Verschachtelungen sind möglich, aber die Navigation wird komplexer
+
+4. **Was sind Containertypen und wie nutze ich sie?**
+   - Containertypen (group, array, chipgroup, custom, subflow) definieren das Verhalten von Elementen
+   - Die Anzeige des Containertyps hilft bei der Navigation und Bearbeitung
+   - Jeder Containertyp hat spezifische Eigenschaften und Verwendungszwecke
+
+5. **Wie werden komplexe JSON-Strukturen unterstützt?**
+   - Die Strukturnormalisierung sorgt für konsistente JSON-Ausgabe
+   - Die Validierung prüft die Struktur auf Fehler
+   - Komplexe Strukturen wie doorbit_original.json werden unterstützt