cidarlab/3duf

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