Three.js components migration plan#153
Draft
rifont wants to merge 15 commits into
Draft
Conversation
Copy utility files from apps/ui/app/components/geometry/graphics/three/utils/ to packages/three/src/utils/: - camera.utils.ts, camera.utils.test.ts - gizmo.utils.ts - lights.utils.ts, lights.utils.test.ts - math.utils.ts, math.utils.test.ts - rotation.utils.ts - snap-detection.utils.ts - spatial.utils.ts Add color.utils.ts with adjustHexColorBrightness (from apps/ui color.utils.ts). Update all internal imports: #components/geometry/graphics/three/ -> # Co-authored-by: richard <richard@fontein.co>
- gltf-mesh, axes-helper, infinite-grid, lights - section-view, section-view-controls, transform-controls-drei - scene-overlay Updated imports: #components/geometry/graphics/three/ -> # section-view-controls: #utils/color.utils.js (package local) Updated react/index.ts with exports Co-authored-by: richard <richard@fontein.co>
- Copy use-camera-framing.test.ts from apps/ui to packages/three - Update imports: #components/geometry/graphics/three/ -> #react/ - Add stage.ts with StageOptions and defaultStageOptions - Add use-camera-framing.ts and use-camera-reset.ts hooks - Add use-graphics.ts stub for standalone package usage - Add @vitest-environment jsdom for React hook tests Co-authored-by: richard <richard@fontein.co>
Extract pure screenshot capture functions from the xstate machine file into standalone pure functions in the @taucad/three package: - captureScreenshot: Core Three.js screenshot capture with temporary renderer, matcap override, FOV compensation, and bounding box framing - createCompositeImage: Creates a composite grid image from multiple screenshots with labels, dividers, and configurable layout - calculateOptimalGrid: Grid layout calculator for composite images Local type definitions (CameraAngle, ScreenshotOptions, etc.) are defined in the package to avoid depending on @taucad/types. No xstate or SVG-specific code was included. Co-authored-by: richard <richard@fontein.co>
Create standalone zustand stores to replace the xstate graphics machine for the @taucad/three package: - viewer-store: viewer configuration (grid, axes, matcap, FOV, theme, etc.) - measure-store: measurement state with start/complete/pin workflow - section-view-store: section plane selection, rotation, and direction - store-context: React context provider with typed selector hooks - index barrel export with all stores and types All stores use zustand/vanilla for framework-agnostic creation and zustand's useStore hook for React integration. Co-authored-by: richard <richard@fontein.co>
…e components Replace app-specific useGraphicsSelector, useTheme, and useColor hooks with zustand-based useViewerStore from the package's own store context. - post-processing.tsx: reads enablePostProcessing from viewer store - grid.tsx: reads gridSizes, upDirection, theme from viewer store - viewport-gizmo.tsx: reads fieldOfView, accentColor, theme from viewer store - All Three.js imports updated to use package-local # paths - Export all three components from react/index.ts Co-authored-by: richard <richard@fontein.co>
- Replace useGraphicsSelector with useViewerStore in use-camera-framing.ts - Remove useCameraCapability from use-camera-reset.ts, accept onResetCamera callback - Create use-geometry-bounds.ts using zustand viewer store - Create up-direction-handler.tsx with onResetCamera callback prop - Create use-section-view.ts using useSectionViewStore and useViewerStore - Convert stage.ts to stage.tsx with full Stage component using zustand stores - Delete stub hooks/use-graphics.ts - Export new components and hooks from react/index.ts Co-authored-by: richard <richard@fontein.co>
- Fix prettier formatting in use-camera-reset.ts function signature - Rename enableCentering to isCenteringEnabled in stage.tsx to match boolean prop naming rule - Add useViewerStore mock to camera framing test Co-authored-by: richard <richard@fontein.co>
- MeasureTool uses useMeasureStore for reactive reads and measureStore.getState() for imperative actions (start, complete, cancel measurement, toggle pinned, set hovered) - Controls uses useSectionViewStore for section view state/actions and useViewerStore for upDirection - geometryKey accepted as optional prop on MeasureTool (default '') - All imports updated from app-specific paths to package paths - Exports added to react/index.ts Co-authored-by: richard <richard@fontein.co>
…components - scene.tsx: composition of Stage, Controls, UpDirectionHandler - cad-canvas.tsx: R3F Canvas wrapper with sensible GL defaults - cad-viewer.tsx: zero-config component mapping GLTF to GltfMesh - presets.ts: default, minimal, and full viewer preset factories - Export all new components from react index Co-authored-by: richard <richard@fontein.co>
…e/react - cad-viewer.tsx: import GltfMesh/CadCanvas from @taucad/three/react - cad-preview.tsx: import StageOptions from @taucad/three/react - screenshot-capability.machine.ts: import materials/utils from @taucad/three - screenshot-capability.utils.test.ts: same import updates - actor-bridge.tsx: import updateCameraFov from @taucad/three, add zustand sync - three-context.tsx: wrap CadCanvas from @taucad/three/react with WebGL tracking Co-authored-by: richard <richard@fontein.co>
… publishable build Co-authored-by: richard <richard@fontein.co>
|
Cursor Agent can help with this pull request. Just |
UI Preview 🎈Status: ❌ Deployment Failed |
API Preview 🐙Status: ✅ Deployed |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected -t lint test build typecheck |
❌ Failed | 8m 27s | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-03-02 03:40:57 UTC
Resolve conflict in replicad kernel test: take payments-v1 version using expect.arrayContaining pattern for library frame assertions. Co-authored-by: richard <richard@fontein.co>
…e to cad/ - Move actor-bridge.tsx and webgl-context-lost-fallback.tsx to cad/ - Refactor CadViewer to integrate ActorBridge and WebGL context tracking directly, removing the now-unused ThreeProvider wrapper - Delete entire apps/ui/app/components/geometry/graphics/three/ directory (11,739 lines) - all components now live in @taucad/three package Co-authored-by: richard <richard@fontein.co>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Migrate Three.js components to a new
@taucad/threepackage to decouple them from the UI app and enable reuse.This migration involved creating a new Nx library, moving all Three.js related components, hooks, and utilities, and refactoring connected components to use Zustand stores instead of xstate for state management. This significantly improves modularity and prepares the components for broader use. The UI app has been updated to consume these components from the new package.