cd937cf4ac
Paper.remove() during dispose deleted the React canvas div (StrictMode double mount left a blank canvas). Duplicate XML attributes made 5 symbol data URIs unparseable. Also: README, Playwright smoke test (e2e/smoke.mjs), ES2022 lib. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
72 lines
3.7 KiB
Markdown
72 lines
3.7 KiB
Markdown
# 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
|
|
|
|
```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.
|