|
| 1 | +/** |
| 2 | + * VisuFlow: Programmablaufplan (PAP, englisch flowchart) nach DIN 66001 frei zeichnen. |
| 3 | + * Nur Zeichnen: keine Simulation, kein Code. Ein Plan besteht aus Symbolen (Mittelpunkt x/y) |
| 4 | + * und Pfeilen vom Ausgang eines Symbols zum Eingang (oben) eines anderen. |
| 5 | + */ |
| 6 | + |
| 7 | +export type FlowShape = 'start' | 'ende' | 'anweisung' | 'ein' | 'verzweigung' | 'unterprogramm' |
| 8 | + |
| 9 | +/** Ausgang eines Symbols: `out` unten, bei der Raute `ja` und `nein`. */ |
| 10 | +export type FlowPort = 'out' | 'ja' | 'nein' |
| 11 | + |
| 12 | +export interface FlowNode { |
| 13 | + id: string |
| 14 | + shape: FlowShape |
| 15 | + x: number |
| 16 | + y: number |
| 17 | + text: string |
| 18 | +} |
| 19 | + |
| 20 | +export interface FlowEdge { |
| 21 | + id: string |
| 22 | + from: string |
| 23 | + port: FlowPort |
| 24 | + to: string |
| 25 | +} |
| 26 | + |
| 27 | +export interface FlowDoc { |
| 28 | + title: string |
| 29 | + nodes: FlowNode[] |
| 30 | + edges: FlowEdge[] |
| 31 | + /** Raute: `true` = „ja“ geht nach rechts, „nein“ nach unten (Standard umgekehrt). */ |
| 32 | + yesRight?: string[] |
| 33 | +} |
| 34 | + |
| 35 | +export const FLOW_SHAPES: FlowShape[] = ['start', 'anweisung', 'ein', 'verzweigung', 'unterprogramm', 'ende'] |
| 36 | + |
| 37 | +export const FLOW_GRID = 20 |
| 38 | + |
| 39 | +/** Füllfarben wie im Lernbaustein „PAP bauen“ (papView.ts). */ |
| 40 | +export const FLOW_FILL: Record<FlowShape, string> = { |
| 41 | + start: '#d1f2d9', |
| 42 | + ende: '#d1f2d9', |
| 43 | + anweisung: '#e5f0ff', |
| 44 | + ein: '#f2e6ff', |
| 45 | + verzweigung: '#fff4d6', |
| 46 | + unterprogramm: '#e5f0ff', |
| 47 | +} |
| 48 | + |
| 49 | +export type Measure = (text: string) => number |
| 50 | + |
| 51 | +export interface FlowBox { |
| 52 | + x: number |
| 53 | + y: number |
| 54 | + w: number |
| 55 | + h: number |
| 56 | + lines: string[] |
| 57 | +} |
| 58 | + |
| 59 | +export const FLOW_LINE_HEIGHT = 16 |
| 60 | +const MAX_TEXT = 170 |
| 61 | + |
| 62 | +/** Text auf Zeilen umbrechen (an Leerzeichen, harte Umbrüche bleiben). */ |
| 63 | +export function flowLines(text: string, max: number, measure: Measure): string[] { |
| 64 | + const out: string[] = [] |
| 65 | + for (const para of text.split('\n')) { |
| 66 | + let line = '' |
| 67 | + for (const word of para.split(/\s+/).filter(Boolean)) { |
| 68 | + const next = line ? `${line} ${word}` : word |
| 69 | + if (line && measure(next) > max) { |
| 70 | + out.push(line) |
| 71 | + line = word |
| 72 | + } else line = next |
| 73 | + } |
| 74 | + out.push(line) |
| 75 | + } |
| 76 | + return out.length ? out : [''] |
| 77 | +} |
| 78 | + |
| 79 | +const snap = (v: number) => Math.round(v / FLOW_GRID) * FLOW_GRID |
| 80 | + |
| 81 | +/** Größe eines Symbols aus seinem Text; Breite und Höhe auf das Raster gerundet. */ |
| 82 | +export function flowBox(node: FlowNode, measure: Measure): FlowBox { |
| 83 | + const lines = flowLines(node.text, MAX_TEXT, measure) |
| 84 | + const textW = Math.max(0, ...lines.map(measure)) |
| 85 | + const textH = lines.length * FLOW_LINE_HEIGHT |
| 86 | + let w: number |
| 87 | + let h: number |
| 88 | + if (node.shape === 'verzweigung') { |
| 89 | + // Raute: Text passt in das innere Rechteck, wenn Breite und Höhe doppelt so groß sind. |
| 90 | + w = Math.max(140, textW * 1.7 + 30) |
| 91 | + h = Math.max(80, textH * 1.8 + 24) |
| 92 | + } else { |
| 93 | + const pad = node.shape === 'ein' ? 44 : node.shape === 'unterprogramm' ? 40 : node.shape === 'anweisung' ? 24 : 36 |
| 94 | + w = Math.max(node.shape === 'start' || node.shape === 'ende' ? 100 : 120, textW + pad) |
| 95 | + h = Math.max(40, textH + 18) |
| 96 | + } |
| 97 | + return { x: node.x, y: node.y, w: Math.ceil(w / FLOW_GRID) * FLOW_GRID, h: Math.ceil(h / FLOW_GRID) * FLOW_GRID, lines } |
| 98 | +} |
| 99 | + |
| 100 | +/** Welche Ausgänge ein Symbol hat. */ |
| 101 | +export function flowPorts(shape: FlowShape): FlowPort[] { |
| 102 | + if (shape === 'ende') return [] |
| 103 | + if (shape === 'verzweigung') return ['ja', 'nein'] |
| 104 | + return ['out'] |
| 105 | +} |
| 106 | + |
| 107 | +export const hasInput = (shape: FlowShape) => shape !== 'start' |
| 108 | + |
| 109 | +type Side = 'bottom' | 'right' |
| 110 | + |
| 111 | +/** Seite eines Ausgangs. Raute: Standard „ja“ unten, „nein“ rechts; umschaltbar. */ |
| 112 | +export function portSide(doc: FlowDoc, node: FlowNode, port: FlowPort): Side { |
| 113 | + if (port === 'out') return 'bottom' |
| 114 | + const yesRight = doc.yesRight?.includes(node.id) ?? false |
| 115 | + return (port === 'ja') === yesRight ? 'right' : 'bottom' |
| 116 | +} |
| 117 | + |
| 118 | +export function portPoint(box: FlowBox, side: Side): [number, number] { |
| 119 | + return side === 'bottom' ? [box.x, box.y + box.h / 2] : [box.x + box.w / 2, box.y] |
| 120 | +} |
| 121 | + |
| 122 | +export const inputPoint = (box: FlowBox): [number, number] => [box.x, box.y - box.h / 2] |
| 123 | + |
| 124 | +/** |
| 125 | + * Rechtwinkliger Weg eines Pfeils vom Ausgang zum Eingang oben. Geht es nach oben zurück (Schleife), |
| 126 | + * läuft der Pfeil rechts an beiden Symbolen vorbei. |
| 127 | + */ |
| 128 | +export function routeEdge(from: FlowBox, side: Side, to: FlowBox, lane = 0): [number, number][] { |
| 129 | + const [sx, sy] = portPoint(from, side) |
| 130 | + const [tx, ty] = inputPoint(to) |
| 131 | + const gap = FLOW_GRID |
| 132 | + const outside = Math.max(from.x + from.w / 2, to.x + to.w / 2) + gap * (1.5 + lane) |
| 133 | + if (side === 'bottom') { |
| 134 | + if (ty >= sy + gap) { |
| 135 | + if (sx === tx) return [[sx, sy], [tx, ty]] |
| 136 | + const my = sy + gap |
| 137 | + return [[sx, sy], [sx, my], [tx, my], [tx, ty]] |
| 138 | + } |
| 139 | + return [[sx, sy], [sx, sy + gap], [outside, sy + gap], [outside, ty - gap], [tx, ty - gap], [tx, ty]] |
| 140 | + } |
| 141 | + // Ausgang rechts; liegt das Ziel rechts daneben auf gleicher Höhe, endet der Pfeil links an seiner Seite. |
| 142 | + const left = to.x - to.w / 2 |
| 143 | + if (left >= sx + gap && Math.abs(to.y - sy) < to.h / 2) return [[sx, sy], [left, sy]] |
| 144 | + if (ty >= sy + gap) { |
| 145 | + if (tx >= sx + gap) return [[sx, sy], [tx, sy], [tx, ty]] |
| 146 | + const rx = sx + gap |
| 147 | + return [[sx, sy], [rx, sy], [rx, ty - gap], [tx, ty - gap], [tx, ty]] |
| 148 | + } |
| 149 | + const rx = Math.max(sx + gap, outside) |
| 150 | + return [[sx, sy], [rx, sy], [rx, ty - gap], [tx, ty - gap], [tx, ty]] |
| 151 | +} |
| 152 | + |
| 153 | +// MARK: - Bearbeiten (immer neue Objekte, damit Rückgängig einfach den alten Stand behält) |
| 154 | + |
| 155 | +export function emptyFlow(title = ''): FlowDoc { |
| 156 | + return { title, nodes: [], edges: [] } |
| 157 | +} |
| 158 | + |
| 159 | +export function nextId(doc: FlowDoc, prefix: 'n' | 'e'): string { |
| 160 | + const used = new Set([...doc.nodes.map((n) => n.id), ...doc.edges.map((e) => e.id)]) |
| 161 | + let i = 1 |
| 162 | + while (used.has(`${prefix}${i}`)) i++ |
| 163 | + return `${prefix}${i}` |
| 164 | +} |
| 165 | + |
| 166 | +export function addNode(doc: FlowDoc, shape: FlowShape, x: number, y: number, text: string): { doc: FlowDoc; id: string } { |
| 167 | + const id = nextId(doc, 'n') |
| 168 | + return { doc: { ...doc, nodes: [...doc.nodes, { id, shape, x: snap(x), y: snap(y), text }] }, id } |
| 169 | +} |
| 170 | + |
| 171 | +export function moveNode(doc: FlowDoc, id: string, x: number, y: number): FlowDoc { |
| 172 | + return { ...doc, nodes: doc.nodes.map((n) => (n.id === id ? { ...n, x: Math.max(FLOW_GRID * 4, snap(x)), y: Math.max(FLOW_GRID * 2, snap(y)) } : n)) } |
| 173 | +} |
| 174 | + |
| 175 | +export function setText(doc: FlowDoc, id: string, text: string): FlowDoc { |
| 176 | + return { ...doc, nodes: doc.nodes.map((n) => (n.id === id ? { ...n, text } : n)) } |
| 177 | +} |
| 178 | + |
| 179 | +/** Pfeil ziehen: Ein Ausgang hat höchstens einen Pfeil, ein neuer ersetzt den alten. */ |
| 180 | +export function connect(doc: FlowDoc, from: string, port: FlowPort, to: string): FlowDoc { |
| 181 | + const a = doc.nodes.find((n) => n.id === from) |
| 182 | + const b = doc.nodes.find((n) => n.id === to) |
| 183 | + if (!a || !b || from === to || !flowPorts(a.shape).includes(port) || !hasInput(b.shape)) return doc |
| 184 | + const edges = doc.edges.filter((e) => !(e.from === from && e.port === port)) |
| 185 | + return { ...doc, edges: [...edges, { id: nextId(doc, 'e'), from, port, to }] } |
| 186 | +} |
| 187 | + |
| 188 | +export function freePort(doc: FlowDoc, node: FlowNode): FlowPort | undefined { |
| 189 | + return flowPorts(node.shape).find((p) => !doc.edges.some((e) => e.from === node.id && e.port === p)) |
| 190 | +} |
| 191 | + |
| 192 | +export function removeNode(doc: FlowDoc, id: string): FlowDoc { |
| 193 | + return { |
| 194 | + ...doc, |
| 195 | + nodes: doc.nodes.filter((n) => n.id !== id), |
| 196 | + edges: doc.edges.filter((e) => e.from !== id && e.to !== id), |
| 197 | + yesRight: doc.yesRight?.filter((n) => n !== id), |
| 198 | + } |
| 199 | +} |
| 200 | + |
| 201 | +export function removeEdge(doc: FlowDoc, id: string): FlowDoc { |
| 202 | + return { ...doc, edges: doc.edges.filter((e) => e.id !== id) } |
| 203 | +} |
| 204 | + |
| 205 | +/** Raute: „ja“ und „nein“ tauschen die Seiten (die Pfeile bleiben an ihrem Ausgang). */ |
| 206 | +export function swapYesNo(doc: FlowDoc, id: string): FlowDoc { |
| 207 | + const set = new Set(doc.yesRight ?? []) |
| 208 | + if (set.has(id)) set.delete(id) |
| 209 | + else set.add(id) |
| 210 | + return { ...doc, yesRight: [...set] } |
| 211 | +} |
| 212 | + |
| 213 | +// MARK: - Datei (.visuflow, JSON) |
| 214 | + |
| 215 | +export function flowToJSON(doc: FlowDoc): string { |
| 216 | + return JSON.stringify({ format: 'visuflow', version: 1, ...doc }, null, 2) |
| 217 | +} |
| 218 | + |
| 219 | +export function flowFromJSON(text: string): FlowDoc | undefined { |
| 220 | + let raw: unknown |
| 221 | + try { |
| 222 | + raw = JSON.parse(text) |
| 223 | + } catch { |
| 224 | + return undefined |
| 225 | + } |
| 226 | + if (!raw || typeof raw !== 'object') return undefined |
| 227 | + const r = raw as Record<string, unknown> |
| 228 | + if (!Array.isArray(r.nodes) || !Array.isArray(r.edges)) return undefined |
| 229 | + const nodes: FlowNode[] = [] |
| 230 | + for (const n of r.nodes as Record<string, unknown>[]) { |
| 231 | + if (!n || typeof n.id !== 'string' || !FLOW_SHAPES.includes(n.shape as FlowShape)) continue |
| 232 | + if (!Number.isFinite(n.x) || !Number.isFinite(n.y) || nodes.some((m) => m.id === n.id)) continue |
| 233 | + nodes.push({ id: n.id, shape: n.shape as FlowShape, x: n.x as number, y: n.y as number, text: typeof n.text === 'string' ? n.text : '' }) |
| 234 | + } |
| 235 | + let doc: FlowDoc = { title: typeof r.title === 'string' ? r.title : '', nodes, edges: [] } |
| 236 | + for (const e of r.edges as Record<string, unknown>[]) { |
| 237 | + if (!e || typeof e.from !== 'string' || typeof e.to !== 'string' || typeof e.port !== 'string') continue |
| 238 | + doc = connect(doc, e.from, e.port as FlowPort, e.to) |
| 239 | + } |
| 240 | + if (Array.isArray(r.yesRight)) doc.yesRight = (r.yesRight as unknown[]).filter((id): id is string => typeof id === 'string' && nodes.some((n) => n.id === id)) |
| 241 | + return doc |
| 242 | +} |
0 commit comments