diff --git a/02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01d Baustein-Karte und Kanten.md b/02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01d Baustein-Karte und Kanten.md deleted file mode 100644 index 11be49d3..00000000 --- a/02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01d Baustein-Karte und Kanten.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -kind: screen -project: HiveGrid Screen Project -ticket: D-FLOW -package: WF-P12 Flow-Editor -id: S01d -screen: Baustein-Karte und Kanten (gefuellter Editor) -typ: BESPOKE (schwerste UI) -umsetzung: Bauen -status: In Subframe (erstes Muster) - Review offen -route: "in S01 (gefuellte Zeichenflaeche)" -subframe: "https://app.subframe.com/f023064a5ca0/design/379f7080-4d5a-41ee-8508-476e900cbb9d/edit" ---- - -# S01d — Baustein-Karte und Kanten - -## Ziel - -Das Herzstück des Editors: wie ein Baustein als Karte auf der Zeichenfläche aussieht und wie die Karten mit Pfeilen zusammenhängen. Ohne das hängen die 30 Konfig-Dialoge an nichts. - -## Validierte Grundentscheidungen (Dejan, 2026-07-17) - -- **Fluss-Richtung: von links nach rechts** (n8n-Muster). Auslöser links, Schritte nach rechts, Verzweigungen versetzt nach oben/unten. -- **Karten-Inhalt: Symbol + Name + Klartext-Zusammenfassung.** Beispiel: »📥 Neue Anfrage — aus Quelle: Website«. So liest man den ganzen Ablauf, ohne jede Karte zu öffnen. -- **Kategorie-Farbe am Symbol** je Baustein (Auslöser grün, Aktion gelb/blau, Logik violett …). - -## Aufbau einer Karte - -- Rahmen: `rounded-md border-border-default bg-surface-neutral-secondary shadow-sm`, feste Breite ~210px. -- Erste Zeile: `IconWithBackground` (size=small, Kategorie-Hintergrund) + Name (`body-small-semibold`). -- Zweite Zeile: Klartext-Zusammenfassung (`body-extra-small-regular`, tertiär). -- Verbindungspunkte: kleine Kreise mittig an linker und rechter Kante, halb über den Rand ragend. -- **Verzweigungs-Karten** (Wenn-Dann): rechts **zwei** Punkte — grün »Ja« oben, neutral »Nein« unten. (Switch analog mehrere, Schleife Weiter/Fertig.) - -## Erstes gebautes Muster (Subframe) - -Seite `S01d Editor gefuellt`: gefüllte Zeichenfläche mit Beispiel-Ablauf -Neue Anfrage → Wenn-Dann → (Ja) Aufgabe anlegen / (Nein) E-Mail senden. -Kopfzeile, Modus-Umschalter, Mini-Übersicht und Werkzeugleiste wie `V1 Vollbild minimal`. - -## Was am Editor noch fehlt (nächste Schritte) - -1. **Karte im ausgewählten Zustand** (angeklickt → Rahmen hervorgehoben, öffnet den Konfig-Dialog). -2. **Inline-Validierung an der Karte**: Warn-Abzeichen »nicht verbunden« / »Pflichtfeld fehlt« / »Schleifen-Verdacht«. -3. **Leer → gefüllt**: Übergang vom Plus-Platzhalter (V1) zur ersten Karte. -4. **Rechtsklick auf eine Karte** (eigenes Kontextmenü: Konfigurieren, Duplizieren, Löschen) — ergänzt das bestehende Canvas-Kontextmenü [[S01c Canvas-Kontextmenue]]. -5. **Kanten-Interaktion** (Klick-Verbinden vs. Ziehen) — bleibt Subframe-Iteration. - -## Offene Punkte - -- Modus-Umschalter »Bauen / Aktivität / Auswertung« im Kopf ist weiterhin **offen** (siehe [[S01 Flow-Editor]]). -- Kanten sind derzeit als absolute Linien gezeichnet (Wireframe-Näherung), nicht als echte dynamische Verbinder. diff --git a/02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas b/02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas index 55d2f564..3c646f9a 100644 --- a/02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas +++ b/02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas @@ -8,7 +8,7 @@ {"id":"s01","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01 Flow-Editor.md","x":1240,"y":0,"width":420,"height":200}, {"id":"s01b","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01b Baustein-Picker.md","x":1800,"y":-80,"width":420,"height":170}, {"id":"s01c","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01c Canvas-Kontextmenue.md","x":1800,"y":110,"width":420,"height":170}, - {"id":"s01d","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01d Baustein-Karte und Kanten.md","x":2260,"y":0,"width":420,"height":200}, + {"id":"s01d","type":"text","text":"# S01d — Baustein-Karte + Kanten\n\nFEHLT — hoechste Prioritaet.\n\nOhne die Knoten-Darstellung auf dem Canvas haengen die 30 Konfig-Dialoge an nichts. Inkl. Verzweigungs-Kanten (Wenn-Dann Ja/Nein, Switch, Schleife) und Inline-Validierung am Baustein.\n\n(Ein Muster war gebaut und wurde wieder geloescht.)","x":2260,"y":0,"width":420,"height":200}, {"id":"m01","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/M01 Probelauf.md","x":560,"y":560,"width":420,"height":200}, {"id":"m02","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/M02 Schleifen-Warnung.md","x":1240,"y":560,"width":420,"height":200}, {"id":"note-embed","type":"text","text":"# Anordnung (neu ab 2026-07-12)\n\nVollbild-Canvas · Baustein-Picker als Drawer · Konfig als echter Dialog je Baustein.\n\nDie alte Anordnung (Katalog links · Konfig rechts) ist ERSETZT.\n\nDie 30 Konfig-Dialoge liegen in WF-P12 Verwaltung (S05 / S05a).","x":0,"y":560,"width":460,"height":240} diff --git a/02 Wireframes/Screen Paket Tracker.md b/02 Wireframes/Screen Paket Tracker.md index dc25531c..0a81e651 100644 --- a/02 Wireframes/Screen Paket Tracker.md +++ b/02 Wireframes/Screen Paket Tracker.md @@ -187,7 +187,7 @@ Diese Datei ist der erste Ort, um zu sehen: | S01 | Flow-Editor (Vollbild-Canvas) | WF-P12 Flow-Editor | BESPOKE | Bauen | In Subframe (Grundgeruest) / Review offen | `/automations/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | | S01b | Baustein-Picker (Drawer) | WF-P12 Flow-Editor | Drawer | Bauen | In Subframe / Farbschema + fehlende Bausteine nachziehen | aus S01 | [MD]() | [Subframe]() | [Canvas]() | | S01c | Canvas-Kontextmenue | WF-P12 Flow-Editor | Kontextmenue | Bauen | In Subframe / Review offen | Rechtsklick in S01 | [MD]() | [Subframe]() | [Canvas]() | -| S01d | Baustein-Karte + Kanten (gefuellter Editor) | WF-P12 Flow-Editor | BESPOKE | Bauen | In Subframe (erstes Muster) / Review offen | in S01 | [MD]() | [Subframe]() | [Canvas]() | +| S01d | Baustein-Karte + Kanten auf dem Canvas | WF-P12 Flow-Editor | BESPOKE | Bauen | **FEHLT** (Muster war gebaut, wieder geloescht) | in S01 | [MD]() | - | [Canvas]() | | M01 | Probelauf (Dry-Run) | WF-P12 Flow-Editor | Modal | Bauen | Subframe geloescht → neu bauen | aus S01 | [MD]() | - | [Canvas]() | | M02 | Schleifen-Warnung | WF-P12 Flow-Editor | Modal | Bauen | Subframe geloescht → neu bauen | aus S01 | [MD]() | - | [Canvas]() | | M03 | Start-Auswahl (leer/Vorlage) | WF-P12 Flow-Editor | Modal | Bauen | Subframe geloescht → neu bauen | + Neue Automation | [MD]() | - | [Canvas]() |