# cidarlab/3duf architecture

> Architecture diagram of the GitHub repository cidarlab/3duf, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/cidarlab/3duf
- Repository: https://github.com/cidarlab/3duf

## Overview

#### Purpose and Entry Points
3DuF is a browser-based interactive CAD environment for continuous-flow microfluidic devices. Users compose multilayer chip layouts from parameterized primitives, edit geometry interactively, exchange designs as JSON/DXF, and generate manufacturing outputs. The Vue application starts at `src/main.ts`, mounts `src/App.vue`, and initializes the domain/UI stack through `src/app/index.ts`. Static browser hosting is configured around `public/index.html`.

#### Domain Model and Design Graph
The core model represents a device as layers containing features, components, ports, connections, parameters, and geometry. This is the authoritative boundary between editing/UI code and all import, rendering, and export paths. Initialization and registration establish available component types and their parameter schemas.
- `src/app/core/device.ts`
- `src/app/core/component.ts`
- `src/app/core/connection.ts`
- `src/app/core/registry.ts`
- `src/app/geometry/geometryGraph.ts`

#### Parametric Component Library
Microfluidic primitives implement reusable, parameter-driven device features: channels, chambers, valves, pumps, mixers, vias, ports, and 3D-oriented structures. The component registry exposes these implementations to placement tools and property editing; components produce geometry/features consumed by renderers and exporters.
- `src/app/library/channel.ts`
- `src/app/library/valve.ts`
- `src/app/library/dropletGenerator.ts`
- `src/app/library/pump3D.ts`
- `src/app/library/geometricElements/featureTemplate.ts`

#### Interactive Editing and View Control
The view subsystem translates mouse/keyboard interactions into model mutations, selection state, history, pan/zoom, and layer-aware placement. Specialized tools handle component placement, channels/connections, arrays, valves, multilevel/multilayer features, and text. Vue dialogs/toolbars provide the controls around this canvas workflow.
- `src/app/view/viewManager.ts`
- `src/app/view/paperView.ts`
- `src/app/view/tools/componentPositionTool.ts`
- `src/app/view/tools/connectionTool.ts`
- `src/components/Visualiser.vue`
- `src/components/ManufacturingPanel.vue`

#### Rendering Boundary
The application renders device-domain objects into a 2D design canvas using feature-, device-, port-, DXF-, alignment-, and rats-nest renderers. Render layers separate visible fabrication/design layers from interaction state. Legacy rendering dependencies remain under `lib/`, including Fabric and Three.js-related code.
- `src/app/view/render2D/deviceRenderer2D.ts`
- `src/app/view/render2D/featureRenderer2D.ts`
- `src/app/view/renderLayer.ts`
- `lib/fabric/fabricjs_viewport.js`
- `lib/canvas_rendering/canvasrenderer.js`

#### Interchange, DXF, and Manufacturing Pipeline
JSON is the primary full-device interchange format; DXF is imported as device/border geometry and exported for fabrication. Manufacturing modules transform device/layer/features into process-specific outputs including DXF manufacturing data, CNC, laser cutting, additive manufacturing, depth maps, and flow-control G-code. This is a downstream boundary: exporters should consume validated domain geometry rather than UI state.
- `src/app/import/dxfDeviceImport.ts`
- `src/app/manufacturing/dxfExport.ts`
- `src/app/manufacturing/dxfManufacturingExport.ts`
- `src/app/manufacturing/flowGCodeExport.ts`
- `src/app/manufacturing/cncGenerator.ts`

#### Primitives Service and Deployment
A separate Node/TypeScript primitives server provides component dimensions, port locations, and defaults for parametric components. It can run locally or in the supplied Docker image on port 6060; the browser app is built with Vue CLI/Webpack and deployed as static hosting, with Netlify indicated by CI configuration. TrackJS is the stated external error-tracking service.
- `src/server/server.ts`
- `src/server/routes.ts`
- `src/server/controller.ts`
- `primitives-server.Dockerfile`
- `.github/workflows/deploy-pages.yml`

Main entry points: [`src/app/core/device.ts`](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/core/device.ts) (Device design graph), [`src/App.vue`](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/App.vue) (Application shell), [`src/app/core/registry.ts`](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/core/registry.ts) (Component registry), [`src/server/server.ts`](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/server/server.ts) (Primitives API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser CAD App"]
  node_static_host["Static hosting<br/>deployment<br/>[deploy-pages.yml]"]
  node_browser_entry["Browser entry<br/>Vue bootstrap<br/>[main.ts]"]
  node_app_shell["Application shell<br/>Vue root<br/>[App.vue]"]
  node_app_init["App initialization<br/>application setup<br/>[index.ts]"]
  node_visualiser["Design canvas UI<br/>Vue component<br/>[Visualiser.vue]"]
  node_manufacturing_ui["Manufacturing UI<br/>Vue component"]
  node_editor["Editing tools &amp; view state<br/>interaction layer<br/>[viewManager.ts]"]
  node_renderer["2D device renderer<br/>rendering adapter"]
  node_legacy_canvas["Legacy canvas runtime<br/>rendering dependency"]
end

subgraph group_domain["Device Domain"]
  node_device_model[("Device design graph<br/>authoritative domain model<br/>[device.ts]")]
  node_component_registry["Component registry<br/>component catalog<br/>[registry.ts]"]
  node_geometry_graph["Geometry graph<br/>geometry model<br/>[geometryGraph.ts]"]
  node_component_library["Parametric primitives<br/>component library<br/>[channel.ts]"]
end

subgraph group_output["Interchange &amp; Manufacturing"]
  node_dxf_import["DXF import<br/>interchange adapter<br/>[dxfDeviceImport.ts]"]
  node_manufacturing_export["Manufacturing exporters<br/>fabrication pipeline"]
end

subgraph group_service["Primitives Service"]
  node_primitives_api{{"Primitives API<br/>Node service<br/>[server.ts]"}}
  node_primitives_routes["Primitives routes<br/>API routes<br/>[routes.ts]"]
  node_primitives_container["Primitives container<br/>Docker deployment"]
end

node_static_host -->|"serves"| node_browser_entry
node_browser_entry -->|"mounts"| node_app_shell
node_app_shell -->|"starts"| node_app_init
node_app_init -->|"registers"| node_component_registry
node_app_shell -->|"hosts"| node_visualiser
node_app_shell -->|"hosts"| node_manufacturing_ui
node_visualiser -->|"drives"| node_editor
node_editor -->|"mutates"| node_device_model
node_component_registry -->|"exposes"| node_component_library
node_component_library -->|"creates features"| node_device_model
node_device_model -->|"derives geometry"| node_geometry_graph
node_device_model -->|"renders"| node_renderer
node_renderer -->|"uses"| node_legacy_canvas
node_dxf_import -->|"imports into"| node_device_model
node_manufacturing_ui -->|"requests outputs"| node_manufacturing_export
node_device_model -->|"supplies validated geometry"| node_manufacturing_export
node_primitives_api -->|"serves"| node_primitives_routes
node_primitives_container -->|"packages"| node_primitives_api
node_component_registry -.->|"retrieves defaults"| node_primitives_api

click node_static_host "https://github.com/cidarlab/3duf/blob/Neptune_Render/.github/workflows/deploy-pages.yml"
click node_browser_entry "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/main.ts"
click node_app_shell "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/App.vue"
click node_app_init "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/index.ts"
click node_visualiser "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/components/Visualiser.vue"
click node_manufacturing_ui "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/components/ManufacturingPanel.vue"
click node_editor "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/view/viewManager.ts"
click node_device_model "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/core/device.ts"
click node_component_registry "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/core/registry.ts"
click node_geometry_graph "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/geometry/geometryGraph.ts"
click node_component_library "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/library/channel.ts"
click node_renderer "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/view/render2D/deviceRenderer2D.ts"
click node_legacy_canvas "https://github.com/cidarlab/3duf/blob/Neptune_Render/lib/fabric/fabricjs_viewport.js"
click node_dxf_import "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/import/dxfDeviceImport.ts"
click node_manufacturing_export "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/manufacturing/dxfManufacturingExport.ts"
click node_primitives_api "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/server/server.ts"
click node_primitives_routes "https://github.com/cidarlab/3duf/blob/Neptune_Render/src/server/routes.ts"
click node_primitives_container "https://github.com/cidarlab/3duf/blob/Neptune_Render/primitives-server.Dockerfile"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_static_host,node_browser_entry,node_app_shell,node_app_init,node_visualiser,node_manufacturing_ui,node_editor,node_renderer,node_legacy_canvas toneBlue
class node_device_model,node_component_registry,node_geometry_graph,node_component_library toneAmber
class node_dxf_import,node_manufacturing_export toneMint
class node_primitives_api,node_primitives_routes,node_primitives_container toneRose
```

## Components

### Browser CAD App

- [Static hosting](https://github.com/cidarlab/3duf/blob/Neptune_Render/.github/workflows/deploy-pages.yml): deployment · Vue build is deployed as static browser assets. · `.github/workflows/deploy-pages.yml`
- [Browser entry](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/main.ts): Vue bootstrap · `src/main.ts`
- [Application shell](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/App.vue): Vue root · `src/App.vue`
- [App initialization](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/index.ts): application setup · Initializes domain and UI subsystems. · `src/app/index.ts`
- [Design canvas UI](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/components/Visualiser.vue): Vue component · `src/components/Visualiser.vue`
- [Manufacturing UI](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/components/ManufacturingPanel.vue): Vue component · `src/components/ManufacturingPanel.vue`
- [Editing tools & view state](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/view/viewManager.ts): interaction layer · Handles selection, history, placement, connections, and pan/zoom. · `src/app/view/viewManager.ts`
- [2D device renderer](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/view/render2D/deviceRenderer2D.ts): rendering adapter · Projects device features and layers onto the design canvas. · `src/app/view/render2D/deviceRenderer2D.ts`
- [Legacy canvas runtime](https://github.com/cidarlab/3duf/blob/Neptune_Render/lib/fabric/fabricjs_viewport.js): rendering dependency · Fabric and related canvas rendering support. · `lib/fabric/fabricjs_viewport.js`

### Device Domain

- [Device design graph](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/core/device.ts): authoritative domain model · Layers, features, components, ports, connections, parameters, and geometry. · `src/app/core/device.ts`
- [Component registry](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/core/registry.ts): component catalog · Registers component types and parameter schemas. · `src/app/core/registry.ts`
- [Geometry graph](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/geometry/geometryGraph.ts): geometry model · `src/app/geometry/geometryGraph.ts`
- [Parametric primitives](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/library/channel.ts): component library · Reusable channels, valves, pumps, mixers, and other microfluidic features. · `src/app/library/channel.ts`

### Interchange & Manufacturing

- [DXF import](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/import/dxfDeviceImport.ts): interchange adapter · Imports device or border geometry. · `src/app/import/dxfDeviceImport.ts`
- [Manufacturing exporters](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/app/manufacturing/dxfManufacturingExport.ts): fabrication pipeline · Generates DXF, CNC, laser, additive, depth-map, and flow-control outputs. · `src/app/manufacturing/dxfManufacturingExport.ts`

### Primitives Service

- [Primitives API](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/server/server.ts): Node service · Supplies component dimensions, port locations, and defaults. · `src/server/server.ts`
- [Primitives routes](https://github.com/cidarlab/3duf/blob/Neptune_Render/src/server/routes.ts): API routes · `src/server/routes.ts`
- [Primitives container](https://github.com/cidarlab/3duf/blob/Neptune_Render/primitives-server.Dockerfile): Docker deployment · Runs the primitives service on port 6060. · `primitives-server.Dockerfile`

## Connections

- Static hosting → Browser entry: serves
- Browser entry → Application shell: mounts
- Application shell → App initialization: starts
- App initialization → Component registry: registers
- Application shell → Design canvas UI: hosts
- Application shell → Manufacturing UI: hosts
- Design canvas UI → Editing tools & view state: drives
- Editing tools & view state → Device design graph: mutates
- Component registry → Parametric primitives: exposes
- Parametric primitives → Device design graph: creates features
- Device design graph → Geometry graph: derives geometry
- Device design graph → 2D device renderer: renders
- 2D device renderer → Legacy canvas runtime: uses
- DXF import → Device design graph: imports into
- Manufacturing UI → Manufacturing exporters: requests outputs
- Device design graph → Manufacturing exporters: supplies validated geometry
- Primitives API → Primitives routes: serves
- Primitives container → Primitives API: packages
- Component registry → Primitives API: retrieves defaults