# 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).

![stack](https://img.shields.io/badge/stack-Tauri%202%20·%20React%2018%20·%20JointJS%204-blue)

## 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

```bash
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.