From f14e57ae8ba6080a7f22444b2f5a88ef6ad55cc5 Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Fri, 17 Jul 2026 18:42:31 +0200 Subject: [PATCH] Editor heart piece: first filled-canvas pattern (block cards + edges) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Built the missing core of the flow editor as a new Subframe page "S01d Editor gefuellt": a filled canvas with a real left-to-right flow — Neue Anfrage -> Wenn-Dann -> (Ja) Aufgabe anlegen / (Nein) E-Mail senden. Validated with Dejan (2026-07-17): - Flow direction: left to right (n8n pattern) - Card content: icon + name + plain-text summary (e.g. "Neue Anfrage — aus Quelle: Website"), so the whole flow reads without opening cards - Category colour on the icon; branch cards (Wenn-Dann) get two right connection points, green "Ja" over neutral "Nein" Editor chrome (header, mode toggle, minimap, toolbar) matches V1 Vollbild minimal. Obsidian synced: new screen file S01d, tracker row updated from "FEHLT" to "In Subframe", canvas node now points to the built page. Still to build (noted in S01d): selected-card state, inline validation badges (not connected / missing field / loop), empty->filled transition, right-click node menu, real edge interaction. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../Screens/S01d Baustein-Karte und Kanten.md | 52 +++++++++++++++++++ .../WF-P12 Flow-Editor.canvas | 2 +- 02 Wireframes/Screen Paket Tracker.md | 2 +- 3 files changed, 54 insertions(+), 2 deletions(-) create mode 100644 02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01d Baustein-Karte und Kanten.md 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 new file mode 100644 index 00000000..11be49d3 --- /dev/null +++ b/02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01d Baustein-Karte und Kanten.md @@ -0,0 +1,52 @@ +--- +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 bab6f6fc..55d2f564 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":"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.","x":2260,"y":0,"width":420,"height":200}, + {"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":"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 411c8b21..dc25531c 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 auf dem Canvas | WF-P12 Flow-Editor | BESPOKE | Bauen | **FEHLT — hoechste Prioritaet** | in S01 | [MD]() | - | [Canvas]() | +| S01d | Baustein-Karte + Kanten (gefuellter Editor) | WF-P12 Flow-Editor | BESPOKE | Bauen | In Subframe (erstes Muster) / Review offen | in S01 | [MD]() | [Subframe]() | [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]() |