Pipeline Diagram Editor

Desktop editor for pipeline / utility network diagrams (water, heating, gas, sewage, power, signal) built with Tauri 2, React + TypeScript + Vite and JointJS core (SVG diagramming, MPL-2.0).

Features

• Node palette (left): equipment grouped by category with SVG previews; drag onto the canvas or double-click to place. Search filter included.
• Ports & relations: click a node to reveal its ports. Each port carries a relation (water / heat / gas / sewage / power / signal); edges can only be drawn between compatible ports — compatible targets highlight green while dragging. Direction rules forbid out→out / in→in connections.
• Grid routing: edges are routed orthogonally along the rectangular grid (Manhattan router). A configuration option draws an arc (jumpover) at line intersections. Router, grid size, snapping — all configurable.
• Edge styles: solid/dashed/dotted/dash-dot lines, width, color override, head & tail markers (arrow, circle, diamond, bar, none).
• Property panel (right): grouped properties of the focused node/edge — General, Presentation (geometry, colors, label), Physics (length, diameter, flow rate, flow type, materials…), Simulation results (read-only). Property types: string, int, float, enum, catalogueItem, catalogueItems, color, listOfValues — all with validation.
• Catalogues: pipe diameter series (DN), materials, media, insulation.
• Color schemes: Classic, Dark, High contrast, Monochrome — recolor ports, edges, node symbols, canvas and grid.
• Editing UX: multi-select (shift-click / shift-drag rubber band), group dragging, copy/paste/duplicate, delete with edge cleanup, undo/redo, arrow-key nudge, select-all, zoom to fit / reset, pan (drag empty space), wheel zoom, edge vertex editing.
• Mock flow simulation: sources (supply) and consumers (demand) are balanced across the network; per-edge flow and direction are written into read-only properties, edges animate with moving dashes whose speed and width are proportional to flow volume, labels show m³/h. Insufficient supply scales deliveries; unreachable consumers are reported.
• Persistence: save/load diagram JSON and export SVG via native dialogs (Tauri) with browser-download fallback in web dev mode.

Development

npm install          # frontend deps
npm run dev          # web dev server on :1420 (browser fallback mode)
npm run tauri:dev    # full desktop app (requires webkit2gtk etc.)
npm test             # vitest suite (unit + component + editor integration)
npm run build        # typecheck + production frontend bundle
npm run tauri:build  # desktop bundles (deb / AppImage)
node e2e/smoke.mjs   # Playwright smoke test against the dev server

Linux system deps (Debian/Ubuntu): libwebkit2gtk-4.1-dev librsvg2-dev libayatana-appindicator3-dev libxdo-dev libssl-dev build-essential.

Architecture

src/model    pure domain model (properties, catalogues, node types, graph, validation)
src/editor   JointJS integration (shapes, paper controller, edge styles, color schemes)
src/sim      mock flow solver + animation
src/state    app store, history (undo/redo), persistence adapters
src/ui       React panels (palette, property panel, toolbar, settings, canvas)
src-tauri    Rust shell (dialog + fs plugins)
tests        vitest suites; docs/plan/plan.md — implementation plan/checklist

The JointJS graph is the runtime source of truth; EditorController converts it to the pure PipelineGraph document model for the solver, save files and tests.