morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge origin/main into feat/placement-interaction-overhaul

Browse Source 
Resolve 7 conflicts keeping our snapping migration + floorplan perf work as
source of truth, combined with main's MEP run-continuation / Alt-detach /
latch handles. Rebuilt two import blocks the auto-merge silently truncated
(node-arrow-handles.tsx, duct-fitting/move-tool.tsx).

Verified: tsc clean across core/viewer/editor/nodes/mcp, 451 tests pass,
biome clean. Floorplan view-transform re-render storm confirmed pre-existing
(not introduced by this merge).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Wassim SAMAD
2026-06-28 16:22:47 -04:00
co-authored by Claude Opus 4.8
parent 15d36c12b1 a3aecf1907
commit 43fa2b1253
171 changed files with 19294 additions and 2224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+3 -2
View File
@@ -17,12 +17,13 @@ https://github.com/user-attachments/assets/8b50e7cf-cebe-4579-9cf3-8786b35f7b6b
This is a Turborepo monorepo with three main packages:
```
editor-v2/
editor/
├── apps/
│ └── editor/ # Next.js application
├── packages/
│ ├── core/ # Schema definitions, state management, systems
│ └── viewer/ # 3D rendering components
│ ├── viewer/ # 3D rendering components
│ └── ui/ # Shared UI components
```
### Separation of Concerns
apps/editor/README.md
+1 -1
View File
@@ -7,7 +7,7 @@ A 3D building editor built with React Three Fiber and WebGPU.
This is a Turborepo monorepo with three main packages:
```
editor-v2/
editor/
├── apps/
│ └── editor/ # Next.js application (this package)
├── packages/
apps/editor/components/build-tab.tsx
+26 -1
View File
@@ -172,7 +172,8 @@ export function BuildTab() {
const ductContext =
mode === 'build' && (activeTool === 'duct-segment' || activeTool === 'duct-fitting')
const pipeContext =
mode === 'build' && (activeTool === 'pipe-segment' || activeTool === 'pipe-fitting')
mode === 'build' &&
(activeTool === 'pipe-segment' || activeTool === 'pipe-fitting' || activeTool === 'pipe-trap')
const liquidLineContext = mode === 'build' && activeTool === 'liquid-line'
const isMepItemActive = (item: MepItem) =>
@@ -445,6 +446,30 @@ export function BuildTab() {
/>
Add Fitting
</button>
<button
className={cn(
'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-all duration-200',
activeTool === 'pipe-trap'
? 'bg-primary/10 ring-1 ring-primary/50'
: 'bg-muted/40 hover:bg-muted',
)}
onClick={() => {
triggerSFX('sfx:menu-click')
activateBuildTool(activeTool === 'pipe-trap' ? 'pipe-segment' : 'pipe-trap')
}}
onMouseEnter={() => triggerSFX('sfx:menu-hover')}
type="button"
>
<Image
alt=""
aria-hidden
className="size-4 object-contain"
height={16}
src="/icons/dwv-pipes.png"
width={16}
/>
Add Trap
</button>
</div>
) : null}
apps/editor/components/viewer-toolbar.tsx
+2 -1
View File
@@ -119,11 +119,12 @@ const levelModeLabels: Record<string, string> = {
solo: 'Solo',
}
const wallModeOrder = ['cutaway', 'up', 'down'] as const
const wallModeOrder = ['cutaway', 'up', 'down', 'translucent'] as const
const wallModeConfig: Record<string, { icon: string; label: string }> = {
up: { icon: '/icons/room.webp', label: 'Full height' },
cutaway: { icon: '/icons/wallcut.webp', label: 'Cutaway' },
down: { icon: '/icons/walllow.webp', label: 'Low' },
translucent: { icon: '/icons/wall.webp', label: 'Translucent' },
}
const SHADING_OPTIONS = [
apps/editor/package.json
+2 -2
View File
@@ -8,7 +8,7 @@
"build": "dotenv -e ../../.env.local -- next build",
"start": "next start",
"lint": "biome lint",
"check-types": "next typegen && tsc --noEmit"
"check-types": "next typegen && tsgo --noEmit"
},
"dependencies": {
"@iconify/react": "^6.0.2",
@@ -25,7 +25,7 @@
"clsx": "^2.1.1",
"geist": "^1.7.0",
"lucide-react": "^1.7.0",
"next": "16.2.6",
"next": "16.2.9",
"postcss": "^8.5.6",
"react": "^19.2.4",
"react-dom": "^19.2.4",
apps/editor/public/audios/sfx/resize_0.mp3
BIN
View File
Binary file not shown.
apps/editor/public/audios/sfx/resize_1.mp3
BIN
View File
Binary file not shown.
apps/editor/public/audios/sfx/resize_2.mp3
BIN
View File
Binary file not shown.
apps/ifc-converter/components/PreviewToolbar.tsx
+2 -1
View File
@@ -14,7 +14,7 @@ import { Box, Grid2x2, Layers, Layers2, Maximize, ScanLine, Square } from 'lucid
import { type ReactNode, useMemo } from 'react'
const levelModes = ['stacked', 'solo', 'exploded', 'manual'] as const
const wallModes = ['up', 'cutaway', 'down'] as const
const wallModes = ['up', 'cutaway', 'down', 'translucent'] as const
const levelLabel: Record<(typeof levelModes)[number], string> = {
stacked: 'Stack',
@@ -27,6 +27,7 @@ const wallLabel: Record<(typeof wallModes)[number], string> = {
up: 'Full',
cutaway: 'Cutaway',
down: 'Down',
translucent: 'Translucent',
}
function cycle<T>(list: readonly T[], current: T): T {
apps/ifc-converter/package.json
+2 -2
View File
@@ -11,7 +11,7 @@
"build": "next build",
"start": "next start",
"lint": "biome lint",
"check-types": "next typegen && tsc --noEmit"
"check-types": "next typegen && tsgo --noEmit"
},
"dependencies": {
"@pascal-app/core": "*",
@@ -23,7 +23,7 @@
"@react-three/fiber": "^9.5.0",
"@tailwindcss/postcss": "^4.2.1",
"clsx": "^2.1.1",
"next": "16.2.6",
"next": "16.2.9",
"postcss": "^8.5.6",
"react": "^19.2.4",
"react-dom": "^19.2.4",
bun.lock
+29 -12
View File
@@ -6,6 +6,7 @@
"name": "editor",
"devDependencies": {
"@biomejs/biome": "^2.4.16",
"@typescript/native-preview": "7.0.0-dev.20260624.1",
"dotenv-cli": "^11.0.0",
"turbo": "^2.9.17",
"typescript": "6.0.3",
@@ -40,7 +41,7 @@
"clsx": "^2.1.1",
"geist": "^1.7.0",
"lucide-react": "^1.7.0",
"next": "16.2.6",
"next": "16.2.9",
"postcss": "^8.5.6",
"react": "^19.2.4",
"react-dom": "^19.2.4",
@@ -75,7 +76,7 @@
"@tailwindcss/postcss": "^4.2.1",
"clsx": "^2.1.1",
"lucide-react": "^1.7.0",
"next": "16.2.6",
"next": "16.2.9",
"postcss": "^8.5.6",
"react": "^19.2.4",
"react-dom": "^19.2.4",
@@ -510,25 +511,25 @@
"@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
"@next/env": ["@next/env@16.2.6", "", {}, "sha512-gd8HoHN4ufj73WmR3JmVolrpJR47ILK6LouP5xElPglaVxir6e1a7VzvTvDWkOoPXT9rkkTzyCxBu4yeZfZwcw=="],
"@next/env": ["@next/env@16.2.9", "", {}, "sha512-ki5VxxXfzD/9TDe13wyeTKIjQTAwBVpnr8KhRDUr8ltMUq1/NBpWNT5tiPoxiGl+PHM4X2ahSOiPk6iAimIzPg=="],
"@next/eslint-plugin-next": ["@next/eslint-plugin-next@15.5.19", "", { "dependencies": { "fast-glob": "3.3.1" } }, "sha512-Ctwb4qYuMbHN/1oXLlTdMchwG8h8Xzwq+wGZZMgF3o6+uwyBKAI2c96bdOsl+C62PaUD0Jkh+QpNkhUeDlam0Q=="],
"@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.2.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ZJGkkcNfYgrrMkqOdZ7zoLa1TOy0qpcMfk/z4Mh/FKUz40gVO+HNQWqmLxf67Z5WB64DRp0dhEbyHfel+6sJUg=="],
"@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.2.9", "", { "os": "darwin", "cpu": "arm64" }, "sha512-HkfxNYUCmcct0Xsqib5KxqMSHV4AHJq857BNRchyBDs4YS19aHzVfn1kDuBYKqLLQBjXgnkIsjV2Kd4d2wzYhw=="],
"@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.2.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-v/YLBHIY132Ced3puBJ7YJKw1lqsCrgcNo2aRJlCEyQrrCeRJlvGlnmxhPxNQI3KE3N1DN5r9TPNPvka3nq5RQ=="],
"@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.2.9", "", { "os": "darwin", "cpu": "x64" }, "sha512-7IAtK4MeybpqRV9GRABWEhJ62mOS+rzWOzOTFie4cSEtm12xsoOMJRcECoZx3FHPzFAqN/IJtHqWAFOLfl152w=="],
"@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.2.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-RPOvqlYBbcQjkz9VQQDZ2T2bARIjXZV1KFlt+V2Mr6SW/e4I9fcKsaA0hdyf2FHoTlsV2xnBd5Y912rP/1Ce6w=="],
"@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.2.9", "", { "os": "linux", "cpu": "arm64" }, "sha512-hBD75iWpUtkL9SmQmcRhmLomn9jgkPzCEkbOcLgHymPEKzv+6ONy13RRiIEz/iEObjkS2Jlb5gYS2XGoS3X4rw=="],
"@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.2.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-URUTu1+dMkxJsPFgm+OeEvq9wf5sujw0EvgYy80TDGHTSLTnIHeqb0Eu8A3sC95IRgjejQL+kC4mw+4yPxiAXA=="],
"@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.2.9", "", { "os": "linux", "cpu": "arm64" }, "sha512-qZTI3pf9SGc/obr8NkQAekBxmp1QK+kVm+VAf3BALLfFAj+1kUhkTxmrWpVos9R/UYIA8AWX2p6cGI5WdwzVUA=="],
"@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.2.6", "", { "os": "linux", "cpu": "x64" }, "sha512-DOj182mPV8G3UkrayLoREM5YEYI+Dk5wv7Ox9xl1fFibAELEsFD0lDPfHIeILlutMMfdyhlzYPELG3peuKaurw=="],
"@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.2.9", "", { "os": "linux", "cpu": "x64" }, "sha512-xm0HfRNX+UkH4R3c18ynswjj5o5uEj/7iI9p9omdtTSIsRCzQqkGMA+10nzJ4EHnYC3as65IMhbbl5fWRUWHYg=="],
"@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.2.6", "", { "os": "linux", "cpu": "x64" }, "sha512-HKQ5SP/V/ub73UvF7n/zeJlxk2kLmtL7Wzrg4WfmkjmNos5onJ2tKu7yZOPdL18A6Svfn3max29ym+ry7NkK4g=="],
"@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.2.9", "", { "os": "linux", "cpu": "x64" }, "sha512-QumimHkGEG6vM3PfEDWKyKen03NcqLOkeKB1EfcPe7VxzmEiCa4jNnMyBn/US5zcd/VE1CI+O8Ovb3lfjVHfGw=="],
"@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.2.6", "", { "os": "win32", "cpu": "arm64" }, "sha512-LZXpTlPyS5v7HhSmnvsLGP3iIYgYOBnc8r8ArlT55sGHV89bR2HlDdBjWQ+PY6SJMmk8TuVGFuxalnP3k/0Dwg=="],
"@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.2.9", "", { "os": "win32", "cpu": "arm64" }, "sha512-hzQpKZvw8rAwI6A2uQh6SacCSvNAXaIkPNsWwzqqfRiIMiXMfH936skDhz1OO6KpvdKkJrgHHtqQOq5PIXOvdQ=="],
"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.2.6", "", { "os": "win32", "cpu": "x64" }, "sha512-F0+4i0h9J6C4eE3EAPWsoCk7UW/dbzOjyzxY0qnDUOYFu6FFmdZ6l97/XdV3/Nz3VYyO7UWjyEJUXkGqcoXfMA=="],
"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.2.9", "", { "os": "win32", "cpu": "x64" }, "sha512-qr2VL3Ce5QrwgO2yh1ujSBawrimjVKX8FGF/cOynmdYKJY0BdHpGVNIRK1tqONB10Vkm25Ub1BD2bkjWs4+96w=="],
"@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
@@ -890,6 +891,22 @@
"@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.61.0", "", { "dependencies": { "@typescript-eslint/types": "8.61.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-QVLZu3ZPQEE+HICQyAMZ2yLQhxf0meY/wx6Hx14YcTNj13JB3qHlX3lJ02L3fLGHgERRH71kvYDwiXIguT3AjQ=="],
"@typescript/native-preview": ["@typescript/native-preview@7.0.0-dev.20260624.1", "", { "optionalDependencies": { "@typescript/native-preview-darwin-arm64": "7.0.0-dev.20260624.1", "@typescript/native-preview-darwin-x64": "7.0.0-dev.20260624.1", "@typescript/native-preview-linux-arm": "7.0.0-dev.20260624.1", "@typescript/native-preview-linux-arm64": "7.0.0-dev.20260624.1", "@typescript/native-preview-linux-x64": "7.0.0-dev.20260624.1", "@typescript/native-preview-win32-arm64": "7.0.0-dev.20260624.1", "@typescript/native-preview-win32-x64": "7.0.0-dev.20260624.1" }, "bin": { "tsgo": "bin/tsgo.js" } }, "sha512-ogwfNo1xuAutOF8RbTCo3Ut0q/65u2ucOeHizi6O14q+3vnelNS+u8qVC2QWXubMcwtuN5E9cbfPslvGC4kdwA=="],
"@typescript/native-preview-darwin-arm64": ["@typescript/native-preview-darwin-arm64@7.0.0-dev.20260624.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-g8CqDkYCHTCYdhBHXs5cMraBurOS+KrcMFxE0SsaKZoI6Tnp+le1aWvxUBbzNKJYyThHJqb/1mLopzEJxJCuKA=="],
"@typescript/native-preview-darwin-x64": ["@typescript/native-preview-darwin-x64@7.0.0-dev.20260624.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-P00JVvSV90eioYDuINAKmOSA8yhFTWLq6RvS5lrCfUuDlcgr2kSOgZAfFHIksHBVz6ZXpAXpa0dHPmc5SJ3Ymw=="],
"@typescript/native-preview-linux-arm": ["@typescript/native-preview-linux-arm@7.0.0-dev.20260624.1", "", { "os": "linux", "cpu": "arm" }, "sha512-eWHELvfQMkVRjafMd+3ATgM9p9yAergJaM4AOY8AekCNWnHFwUrp/ohh+ryyMUIqque5jjb/kuTiOiGj728I2Q=="],
"@typescript/native-preview-linux-arm64": ["@typescript/native-preview-linux-arm64@7.0.0-dev.20260624.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-cppM2yTZ/Gd1hOXy8NEJcUBxJ0O0zl9CU3OU1ZWZ/OHWWX/ukEzCCr94SUwJhjIWOylBCpIYkrvYoTwxNa94XQ=="],
"@typescript/native-preview-linux-x64": ["@typescript/native-preview-linux-x64@7.0.0-dev.20260624.1", "", { "os": "linux", "cpu": "x64" }, "sha512-FaB8rS+rKYz4nDrEsHsF3b4cn7eCKCYroMJReA375OuQ6PHcmCNQ6QlVetA0dfFBxTTgejmoKyfw9xgAA5P4Yw=="],
"@typescript/native-preview-win32-arm64": ["@typescript/native-preview-win32-arm64@7.0.0-dev.20260624.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-BgkqbCmSHDb5UxqWaFlFFJ/DHNT3lEUO4W8627ap6+QthJZuXk2imiHAX3PgYXC6en9fLLyR6jjcseAa4CCshg=="],
"@typescript/native-preview-win32-x64": ["@typescript/native-preview-win32-x64@7.0.0-dev.20260624.1", "", { "os": "win32", "cpu": "x64" }, "sha512-WaZ+ue63NgB2j/lqjirfevh/TqcsCxSqnKhGGiRnlxHyYIBcoq+x7KngyEnyGIaywJE1PcFeXA+2EMSIPlSEiQ=="],
"@use-gesture/core": ["@use-gesture/core@10.3.1", "", {}, "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="],
"@use-gesture/react": ["@use-gesture/react@10.3.1", "", { "dependencies": { "@use-gesture/core": "10.3.1" }, "peerDependencies": { "react": ">= 16.8.0" } }, "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g=="],
@@ -1472,7 +1489,7 @@
"negotiator": ["negotiator@1.0.0", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="],
"next": ["next@16.2.6", "", { "dependencies": { "@next/env": "16.2.6", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.6", "@next/swc-darwin-x64": "16.2.6", "@next/swc-linux-arm64-gnu": "16.2.6", "@next/swc-linux-arm64-musl": "16.2.6", "@next/swc-linux-x64-gnu": "16.2.6", "@next/swc-linux-x64-musl": "16.2.6", "@next/swc-win32-arm64-msvc": "16.2.6", "@next/swc-win32-x64-msvc": "16.2.6", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-qOVgKJg1+At15NpeUP+eJgCHvTCgXsogweq87Ri/Ix7PkqQHg4sdaXmSFqKlgaIXE4kW0g25LE68W87UANlHtw=="],
"next": ["next@16.2.9", "", { "dependencies": { "@next/env": "16.2.9", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.9", "@next/swc-darwin-x64": "16.2.9", "@next/swc-linux-arm64-gnu": "16.2.9", "@next/swc-linux-arm64-musl": "16.2.9", "@next/swc-linux-x64-gnu": "16.2.9", "@next/swc-linux-x64-musl": "16.2.9", "@next/swc-win32-arm64-msvc": "16.2.9", "@next/swc-win32-x64-msvc": "16.2.9", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-MEOJiq/UvuezAdqVSceHbqDgZt1kDw2tpGVOlsdIoJsQdbN2JY2hpVG4xnXGkbdJUOEWhnRfiu/O4Hpc9Juwww=="],
"node-exports-info": ["node-exports-info@1.6.0", "", { "dependencies": { "array.prototype.flatmap": "^1.3.3", "es-errors": "^1.3.0", "object.entries": "^1.1.9", "semver": "^6.3.1" } }, "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw=="],
package.json
+1
View File
@@ -24,6 +24,7 @@
},
"devDependencies": {
"@biomejs/biome": "^2.4.16",
"@typescript/native-preview": "7.0.0-dev.20260624.1",
"dotenv-cli": "^11.0.0",
"turbo": "^2.9.17",
"typescript": "6.0.3",
packages/core/package.json
+1 -1
View File
@@ -58,7 +58,7 @@
],
"scripts": {
"build": "tsc --build",
"dev": "tsc --build --watch",
"dev": "tsgo --build --watch",
"test": "bun test",
"bench:registry": "bun run src/registry/__bench__/relations-resolver.bench.ts",
"prepublishOnly": "npm run build"
packages/core/src/hooks/scene-registry/item-clip-registry.ts
+19
View File
@@ -0,0 +1,19 @@
import type * as THREE from 'three'
export type ItemClipEntry = {
/** The catalog clip to re-emit (e.g. a fan's "On" spin). */
clip: THREE.AnimationClip
/** Plays looping in the baked viewer (ambient motion) vs once. */
loop: boolean
}
/**
* Catalog-item animation clips the bake needs to re-emit. A catalog GLB ships
* its own clips (the live item renderer loads + plays them), but those clips
* are not part of the editor scene graph, so the GLB export can't see them on
* its own. The item renderer registers the resolved clip per node id while the
* scene is live; `glb-export` reads this and retargets the clip onto the baked
* item subtree. Door/window motion is synthesized separately and never goes
* here. Keyed by node id; cleared with the rest of the scene refs on unload.
*/
export const itemClipRegistry = new Map<string, ItemClipEntry>()
packages/core/src/index.ts
+1
View File
@@ -35,6 +35,7 @@ export type {
ZoneEvent,
} from './events/bus'
export { emitter, eventSuffixes } from './events/bus'
export { type ItemClipEntry, itemClipRegistry } from './hooks/scene-registry/item-clip-registry'
export {
sceneRegistry,
useRegistry,
packages/core/src/material-library.ts
+1 -1
View File
@@ -4193,7 +4193,7 @@ export function getLibraryMaterialIdFromRef(materialRef?: string | null) {
}
export function getSceneMaterialIdFromRef(materialRef?: string | null): string | null {
if (!materialRef || !materialRef.startsWith(SCENE_MATERIAL_REF_PREFIX)) return null
if (!materialRef?.startsWith(SCENE_MATERIAL_REF_PREFIX)) return null
return materialRef.slice(SCENE_MATERIAL_REF_PREFIX.length)
}
packages/core/src/registry/handles.ts
+39
View File
@@ -182,6 +182,25 @@ export type LinearResizeHandle<N> = {
* the roof shell below it. Only consulted when `shape === 'tracker'`.
*/
trackerBaseY?: (node: N, sceneApi: SceneApi) => number
/**
* Stand the chevron blade up into the node's facing plane instead of
* leaving it flat in the local XZ plane. For an `axis: 'x'` handle on a
* wall-mounted opening (door / window), the local XZ plane is horizontal,
* so the default blade is seen edge-on from the front — rotating it 90°
* about its pointing axis lays it in the wall face (local XY) so it reads
* face-on toward the camera. Chevron shape only; `axis: 'y'` handles are
* already stood up unconditionally so this is a no-op for them.
*/
faceNormal?: boolean
/**
* Gate this arrow behind a click-to-latch cube. When set, the arrow is
* hidden until the user clicks the {@link LatchHandle} cube declaring the
* same `group` name; clicking the cube again hides it. Lets a node keep a
* dense cluster (e.g. a dormer's window width/height arrows) collapsed
* behind a single grip until the user opts in. The latch state is local to
* the selection and resets when the node is deselected.
*/
latchGroup?: string
}
/**
@@ -365,6 +384,25 @@ export type TranslateHandle<N = any> = {
portal?: HandlePortal
}
/**
* Click-to-latch cube. Renders a small persistent cube at `placement` that
* toggles the visibility of every handle tagged with the matching
* {@link LinearResizeHandle.latchGroup} `group`. Clicking the cube once shows
* the group's arrows; clicking again hides them. The latch state is local to
* the current selection and resets on deselect.
*
* Mirrors the duct-fitting selection cube but driven by descriptor data so any
* node can collapse a dense arrow cluster behind one grip — e.g. a dormer's
* window width/height arrows latch behind a cube at the window center.
*/
export type LatchHandle<N = any> = {
kind: 'latch'
/** The `latchGroup` name whose arrows this cube reveals / hides. */
group: string
placement: HandlePlacement<N>
portal?: HandlePortal
}
export type HandleDescriptor<N = any> =
| LinearResizeHandle<N>
| RadialResizeHandle<N>
@@ -372,6 +410,7 @@ export type HandleDescriptor<N = any> =
| EndpointMoveHandle<N>
| TapActionHandle<N>
| TranslateHandle<N>
| LatchHandle<N>
/**
* Static array, or a function for shape-dependent cases (column
packages/core/src/registry/index.ts
+1
View File
@@ -9,6 +9,7 @@ export type {
HandleList,
HandlePlacement,
HandlePortal,
LatchHandle,
LinearResizeHandle,
RadialResizeHandle,
TapActionHandle,
packages/core/src/registry/types.ts
+17
View File
@@ -1665,6 +1665,23 @@ export type ParametricDescriptor<N> = {
* `updateNodes`.
*/
reconcile?: (prev: N, next: N) => Array<{ id: AnyNodeId; data: Partial<AnyNode> }>
/**
* Deletion companion to `reconcile`: when a node of this kind is about
* to be removed, return patches for OTHER nodes that must follow to
* undo whatever the node imposed on its neighbours — e.g. an
* auto-inserted elbow re-extends the duct runs it trimmed back onto the
* corner it replaced. Called with the node and the live scene `nodes`
* map BEFORE the deletion lands; patches targeting nodes also being
* deleted are ignored. Applied in the same `set` as the delete so it's
* one undo step. Fires only on `deleteNodes` (user-intent deletes) —
* NOT on `applyNodeChanges`, whose deletes are internal re-routes that
* rewrite neighbours explicitly in the same batch and would fight a
* restore.
*/
onDelete?: (
node: N,
nodes: Record<AnyNodeId, AnyNode>,
) => Array<{ id: AnyNodeId; data: Partial<AnyNode> }>
customPanel?: () => Promise<{ default: ComponentType<{ node: N }> }>
/**
* Extra buttons rendered in the inspector's Actions section
packages/core/src/schema/material.test.ts
+49
View File
@@ -0,0 +1,49 @@
import { describe, expect, test } from 'bun:test'
import { MaterialSchema } from './material'
describe('MaterialSchema', () => {
describe('preset', () => {
test('valid preset passes through unchanged', () => {
const result = MaterialSchema.parse({ preset: 'brick' })
expect(result.preset).toBe('brick')
})
test('every enum preset is accepted', () => {
const presets = [
'white',
'brick',
'concrete',
'wood',
'glass',
'metal',
'plaster',
'tile',
'marble',
'custom',
] as const
for (const preset of presets) {
expect(MaterialSchema.parse({ preset }).preset).toBe(preset)
}
})
test("unknown preset coerces to 'custom' instead of throwing (Sentry MONOREPO-EDITOR-DB)", () => {
const result = MaterialSchema.parse({ preset: 'stone' })
expect(result.preset).toBe('custom')
})
test("non-string preset coerces to 'custom'", () => {
const result = MaterialSchema.parse({ preset: 42 })
expect(result.preset).toBe('custom')
})
test('missing preset stays undefined', () => {
const result = MaterialSchema.parse({})
expect(result.preset).toBeUndefined()
})
test('explicit undefined preset stays undefined', () => {
const result = MaterialSchema.parse({ preset: undefined })
expect(result.preset).toBeUndefined()
})
})
})
packages/core/src/schema/material.ts
+2 -1
View File
@@ -27,7 +27,8 @@ export type MaterialProperties = z.infer<typeof MaterialProperties>
export const MaterialSchema = z.object({
id: z.string().optional(),
preset: MaterialPreset.optional(),
// Coerce unknown presets (legacy/AI-generated data) to 'custom' instead of throwing.
preset: MaterialPreset.catch('custom').optional(),
properties: MaterialProperties.optional(),
texture: z
.object({
packages/core/src/schema/nodes/dormer.ts
+1 -1
View File
@@ -91,7 +91,7 @@ export const DormerNode = BaseNode.extend({
windowCornerRadii: z
.tuple([z.number(), z.number(), z.number(), z.number()])
.default(DEFAULT_CORNER_RADII),
windowSill: z.boolean().default(true),
windowSill: z.boolean().default(false),
windowSillDepth: z.number().default(DORMER_DEFAULTS.WINDOW_SILL_DEPTH),
windowSillThickness: z.number().default(DORMER_DEFAULTS.WINDOW_SILL_THICKNESS),
}).describe(
packages/core/src/schema/nodes/duct-fitting.ts
+7 -4
View File
@@ -45,7 +45,7 @@ export const DuctFittingNode = BaseNode.extend({
// matching the trunk the fitting sits in. Reducers ignore the shape.
// When non-round, `diameter` carries the area-equivalent round size
// (drives leg lengths + advertised ports).
shape: z.enum(['round', 'rect', 'oval']).default('round'),
shape: z.enum(['round', 'rect', 'oval']).default('rect'),
// Rect / oval run-leg profile in inches (used when shape ≠ 'round').
width: z.number().min(4).max(60).default(14),
height: z.number().min(3).max(40).default(8),
@@ -53,13 +53,15 @@ export const DuctFittingNode = BaseNode.extend({
// rect / oval profile matching the duct drawn off the tap. When
// non-round, `diameter2` carries the branch's area-equivalent round
// size. A cross's two opposed branches share this one profile.
shape2: z.enum(['round', 'rect', 'oval']).default('round'),
shape2: z.enum(['round', 'rect', 'oval']).default('rect'),
// Rect / oval branch profile in inches (used when shape2 ≠ 'round').
width2: z.number().min(4).max(60).default(14),
height2: z.number().min(3).max(40).default(8),
// Elbow turn angle in degrees. Residential sheet-metal elbows come in
// 90° and 45°; adjustable elbows cover the range between.
angle: z.number().min(15).max(90).default(90),
// 90° and 45°; adjustable elbows cover the range between. 0° is a
// straight coupling — what an elbow flattens to when its run is dragged
// into line with the fixed collar.
angle: z.number().min(0).max(90).default(90),
// Tee branch angle in degrees, measured off the +X (outlet) axis: 90°
// is a square straight tee, <90° a lateral whose branch sweeps
// downstream toward the outlet (flow merges), >90° leans the branch
@@ -72,6 +74,7 @@ export const DuctFittingNode = BaseNode.extend({
diameter2: z.number().min(2).max(48).default(6),
ductMaterial: z.enum(['sheet-metal', 'flex', 'duct-board']).default('sheet-metal'),
system: z.enum(['supply', 'return']).default('supply'),
slots: z.record(z.string(), z.string()).optional(),
}).describe(
dedent`
Duct fitting - elbow, tee, cross, reducer, or square-to-round transition between duct runs.
packages/core/src/schema/nodes/duct-segment.ts
+1
View File
@@ -58,6 +58,7 @@ export const DuctSegmentNode = BaseNode.extend({
// Which side of the air loop this segment belongs to. Drives visual tint
// and (in later slices) System graph membership.
system: z.enum(['supply', 'return']).default('supply'),
slots: z.record(z.string(), z.string()).optional(),
}).describe(
dedent`
Duct segment - polyline of 3D points connected by duct sections.
packages/core/src/schema/nodes/pipe-fitting.ts
+4 -2
View File
@@ -24,8 +24,10 @@ export const PipeFittingNode = BaseNode.extend({
rotation: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
fittingType: z.enum(['elbow', 'wye', 'sanitary-tee', 'cross']).default('elbow'),
// Elbow turn in degrees — DWV bends ship as 22.5 / 45 / 90 ("long
// sweep" for drains); adjustable range matches the duct elbow.
angle: z.number().min(15).max(90).default(90),
// sweep" for drains); adjustable range matches the duct elbow. 0° is a
// straight coupling — what an elbow flattens to when its run is dragged
// into line with the fixed collar.
angle: z.number().min(0).max(90).default(90),
// Run nominal size in inches.
diameter: z.number().min(1.25).max(8).default(2),
// Branch collar size (wye / sanitary-tee).
packages/core/src/schema/nodes/pipe-trap.ts
+1 -1
View File
@@ -21,7 +21,7 @@ export const PipeTrapNode = BaseNode.extend({
// Yaw in radians (the arm direction in plan).
rotation: z.number().default(0),
// Trap size in inches — matches the fixture drain it serves.
diameter: z.number().min(1.25).max(4).default(1.5),
diameter: z.number().min(1.25).max(4).default(2),
pipeMaterial: z.enum(['pvc', 'abs', 'cast-iron']).default('pvc'),
// Developed length of the trap arm (trap weir → vent) in meters. The
// draw tool measures it when the arm is drawn; editable in the
packages/core/src/services/index.ts
+2
View File
@@ -44,6 +44,8 @@ export {
} from './hosting'
export {
DEFAULT_LEVEL_HEIGHT,
getCeilingAt,
getCeilingHeightAt,
getLevelHeight,
} from './level-height'
export {
packages/core/src/services/level-height.ts
+44
View File
@@ -1,3 +1,4 @@
import { pointInPolygon } from '../hooks/spatial-grid/spatial-grid-manager'
import type { CeilingNode, LevelNode, WallNode } from '../schema'
import type { AnyNode, AnyNodeId } from '../schema/types'
@@ -40,3 +41,46 @@ export function getLevelHeight(
return maxTop > 0 ? maxTop : DEFAULT_LEVEL_HEIGHT
}
/**
* The ceiling covering level-local point `[x, z]`, or `null` when none
* sits over it. Points inside a ceiling's hole are treated as uncovered.
* When ceilings overlap, the lowest one wins — that's the surface a duct
* would actually hang from.
*/
export function getCeilingAt(
levelId: string,
nodes: Record<AnyNodeId, AnyNode>,
x: number,
z: number,
): CeilingNode | null {
const level = nodes[levelId as LevelNode['id']] as LevelNode | undefined
if (!level) return null
let best: CeilingNode | null = null
for (const childId of level.children) {
const child = nodes[childId as keyof typeof nodes]
if (child?.type !== 'ceiling') continue
const ceiling = child as CeilingNode
if (ceiling.polygon.length < 3 || !pointInPolygon(x, z, ceiling.polygon)) continue
if (ceiling.holes.some((hole) => hole.length >= 3 && pointInPolygon(x, z, hole))) continue
const h = ceiling.height ?? DEFAULT_LEVEL_HEIGHT
if (best === null || h < (best.height ?? DEFAULT_LEVEL_HEIGHT)) best = ceiling
}
return best
}
/**
* Underside elevation (meters above the level floor) of the ceiling
* covering level-local point `[x, z]`, or `null` when no ceiling sits
* over that point. See {@link getCeilingAt}.
*/
export function getCeilingHeightAt(
levelId: string,
nodes: Record<AnyNodeId, AnyNode>,
x: number,
z: number,
): number | null {
const ceiling = getCeilingAt(levelId, nodes, x, z)
return ceiling ? (ceiling.height ?? DEFAULT_LEVEL_HEIGHT) : null
}
packages/core/src/services/port-connectivity.test.ts
+349
View File
@@ -0,0 +1,349 @@
import { describe, expect, test } from 'bun:test'
import type { AnyNodeDefinition, DistributionRole, NodePort } from '../registry'
import { registerNode } from '../registry'
import type { AnyNode, AnyNodeId } from '../schema'
import { analyzePortConnectivity, resolveConnectivityUpdates } from './port-connectivity'
type Point = [number, number, number]
// Stub registrations mirroring the real kinds' port + role conventions
// without importing the nodes package (which pulls in CSG and can't load
// under the test runner). A run exposes start/end at its path tips; the
// fitting here is a simple two-collar elbow at ±X around its position.
function stubDef(
kind: string,
distributionRole: DistributionRole,
ports: (node: AnyNode) => NodePort[],
): void {
registerNode({
kind,
schemaVersion: 1,
schema: {},
category: 'utility',
distributionRole,
defaults: () => ({}),
capabilities: {},
ports,
} as unknown as AnyNodeDefinition)
}
stubDef('duct-segment', 'run', (node) => {
const path = (node as unknown as { path: Point[] }).path
const system = (node as unknown as { system: string }).system
return [
{ id: 'start', position: path[0]!, direction: [-1, 0, 0], diameter: 6, system },
{ id: 'end', position: path[path.length - 1]!, direction: [1, 0, 0], diameter: 6, system },
]
})
stubDef('duct-fitting', 'fitting', (node) => {
const position = (node as unknown as { position: Point }).position
const system = (node as unknown as { system: string }).system
return [
{
id: 'inlet',
position: [position[0] - 0.2, position[1], position[2]],
direction: [-1, 0, 0],
diameter: 6,
system,
},
{
id: 'outlet',
position: [position[0] + 0.2, position[1], position[2]],
direction: [1, 0, 0],
diameter: 6,
system,
},
]
})
stubDef('duct-tee', 'fitting', (node) => {
const position = (node as unknown as { position: Point }).position
const system = (node as unknown as { system: string }).system
return [
{
id: 'inlet',
position: [position[0] - 0.2, position[1], position[2]],
direction: [-1, 0, 0],
diameter: 6,
system,
},
{
id: 'outlet',
position: [position[0] + 0.2, position[1], position[2]],
direction: [1, 0, 0],
diameter: 6,
system,
},
{
id: 'branch',
position: [position[0], position[1], position[2] + 0.2],
direction: [0, 0, 1],
diameter: 6,
system,
},
]
})
let nextId = 0
function makeNode(type: string, fields: Record<string, unknown>): AnyNode {
nextId += 1
return { id: `${type}_${nextId}`, type, object: 'node', parentId: null, ...fields } as AnyNode
}
function sceneOf(...nodes: AnyNode[]): Record<AnyNodeId, AnyNode> {
return Object.fromEntries(nodes.map((n) => [n.id, n])) as Record<AnyNodeId, AnyNode>
}
function expectPointClose(actual: Point, expected: Point) {
expect(actual[0]).toBeCloseTo(expected[0], 6)
expect(actual[1]).toBeCloseTo(expected[1], 6)
expect(actual[2]).toBeCloseTo(expected[2], 6)
}
describe('port connectivity — joint follow (stretch vs translate)', () => {
// Layout: duct A ends at the fitting's inlet (−0.2,0,0); duct B starts at the
// fitting's outlet (+0.2,0,0). Both runs lie on the X axis. Dragging A's
// mated endpoint carries the fitting and duct B; how B reacts depends on
// whether the drag is along its axis (stretch) or across it (translate).
function joint() {
const fitting = makeNode('duct-fitting', { position: [0, 0, 0], system: 'supply' })
const ductA = makeNode('duct-segment', {
path: [
[-3, 0, 0],
[-0.2, 0, 0],
],
system: 'supply',
})
const ductB = makeNode('duct-segment', {
path: [
[0.2, 0, 0],
[3, 0, 0],
],
system: 'supply',
})
return { fitting, ductA, ductB }
}
function movedA(end: Point): AnyNode {
const { ductA } = joint()
return { ...(ductA as Record<string, unknown>), path: [[-3, 0, 0], end] } as AnyNode
}
test('the fitting and sibling run are picked up as carried connections', () => {
const { fitting, ductA, ductB } = joint()
const connectivity = analyzePortConnectivity(ductA, sceneOf(fitting, ductA, ductB))
expect(
connectivity.connections.find((c) => c.kind === 'rigid-node' && c.nodeId === fitting.id),
).toBeDefined()
expect(
connectivity.connections.find((c) => c.kind === 'run' && c.nodeId === ductB.id),
).toBeDefined()
})
test('perpendicular drag translates the WHOLE sibling run (no skew)', () => {
const { fitting, ductA, ductB } = joint()
const nodes = sceneOf(fitting, ductA, ductB)
const connectivity = analyzePortConnectivity(ductA, nodes)
// Move A's mated end +1 in Z — perpendicular to B's X axis.
const updates = resolveConnectivityUpdates(connectivity, movedA([-0.2, 0, 1]))
expect(
(updates.find((u) => u.id === fitting.id)!.data as { position: Point }).position,
).toEqual([0, 0, 1])
const bPath = (updates.find((u) => u.id === ductB.id)!.data as { path: Point[] }).path
// Both ends ride +1 in Z: the run keeps its length and direction.
expect(bPath[0]).toEqual([0.2, 0, 1])
expect(bPath[1]).toEqual([3, 0, 1])
})
test('parallel drag stretches the sibling run (only the near end slides)', () => {
const { fitting, ductA, ductB } = joint()
const nodes = sceneOf(fitting, ductA, ductB)
const connectivity = analyzePortConnectivity(ductA, nodes)
// Move A's mated end +0.5 in X — along B's axis (the fitting slides toward B).
const updates = resolveConnectivityUpdates(connectivity, movedA([0.3, 0, 0]))
const bPath = (updates.find((u) => u.id === ductB.id)!.data as { path: Point[] }).path
// Near end slid +0.5 in X; far end stayed put → the run shortened.
expect(bPath[0]).toEqual([0.7, 0, 0])
expect(bPath[1]).toEqual([3, 0, 0])
})
test('perpendicular slide propagates through the sibling run to its far joint', () => {
// Extend the chain: duct B's far end (3,0,0) meets a second elbow, and duct
// C hangs off that elbow. A perpendicular drag should carry the whole chain.
const { fitting, ductA, ductB } = joint()
const elbow2 = makeNode('duct-fitting', { position: [3.2, 0, 0], system: 'supply' })
// elbow ports are ±0.2 on X around its position → inlet at (3,0,0) meets B.
const ductC = makeNode('duct-segment', {
path: [
[3.4, 0, 0],
[6, 0, 0],
],
system: 'supply',
})
const nodes = sceneOf(fitting, ductA, ductB, elbow2, ductC)
const connectivity = analyzePortConnectivity(ductA, nodes)
const updates = resolveConnectivityUpdates(connectivity, movedA([-0.2, 0, 1]))
// Whole chain rode +1 in Z.
const bPath = (updates.find((u) => u.id === ductB.id)!.data as { path: Point[] }).path
expect(bPath[1]).toEqual([3, 0, 1])
expect((updates.find((u) => u.id === elbow2.id)!.data as { position: Point }).position).toEqual(
[3.2, 0, 1],
)
const cPath = (updates.find((u) => u.id === ductC.id)!.data as { path: Point[] }).path
expect(cPath[0]).toEqual([3.4, 0, 1])
expect(cPath[1]).toEqual([6, 0, 1])
})
test('a run reached from both ends applies both endpoint deltas', () => {
const moved = makeNode('duct-segment', {
path: [
[0, 0, 0],
[3, 0, 0],
],
system: 'supply',
})
const follower = makeNode('duct-segment', {
path: [
[0, 0, 0],
[3, 0, 0],
],
system: 'supply',
})
const nodes = sceneOf(moved, follower)
const connectivity = analyzePortConnectivity(moved, nodes)
const preview = {
...(moved as Record<string, unknown>),
path: [
[0, 0, 1],
[3, 0, 2],
],
} as AnyNode
const updates = resolveConnectivityUpdates(connectivity, preview)
const path = (updates.find((u) => u.id === follower.id)!.data as { path: Point[] }).path
expect(path[0]).toEqual([0, 0, 1])
expect(path[1]).toEqual([3, 0, 2])
})
test('a polyline run reached from both ends preserves interior bend shape', () => {
const moved = makeNode('duct-segment', {
path: [
[0, 0, 0],
[3, 0, 3],
],
system: 'supply',
})
const follower = makeNode('duct-segment', {
path: [
[0, 0, 0],
[1, 0, 0],
[1, 0, 3],
[3, 0, 3],
],
system: 'supply',
})
const nodes = sceneOf(moved, follower)
const connectivity = analyzePortConnectivity(moved, nodes)
const preview = {
...(moved as Record<string, unknown>),
path: [
[-0.5, 0, 0],
[3.5, 0, 3],
],
} as AnyNode
const updates = resolveConnectivityUpdates(connectivity, preview)
const path = (updates.find((u) => u.id === follower.id)!.data as { path: Point[] }).path
expect(path).toEqual([
[-0.5, 0, 0],
[1, 0, 0],
[1, 0, 3],
[3.5, 0, 3],
])
})
test('a fitting reached from both collars rebroadcasts its final compatible rigid delta', () => {
const moved = makeNode('duct-segment', {
path: [
[-0.2, 0, 0],
[0.2, 0, 0],
],
system: 'supply',
})
const fitting = makeNode('duct-tee', { position: [0, 0, 0], system: 'supply' })
const downstream = makeNode('duct-segment', {
path: [
[0, 0, 0.2],
[3, 0, 0.2],
],
system: 'supply',
})
const nodes = sceneOf(moved, fitting, downstream)
const connectivity = analyzePortConnectivity(moved, nodes)
const preview = {
...(moved as Record<string, unknown>),
path: [
[-0.2, 0, 1],
[0.2, 0, 1.00005],
],
} as AnyNode
const updates = resolveConnectivityUpdates(connectivity, preview)
expectPointClose(
(updates.find((u) => u.id === fitting.id)!.data as { position: Point }).position,
[0, 0, 1.000025],
)
const path = (updates.find((u) => u.id === downstream.id)!.data as { path: Point[] }).path
expectPointClose(path[0]!, [0, 0, 1.200025])
expectPointClose(path[1]!, [3, 0, 1.200025])
})
test('a fitting reached from incompatible collars merges constraints deterministically', () => {
const moved = makeNode('duct-segment', {
path: [
[-0.2, 0, 0],
[0.2, 0, 0],
],
system: 'supply',
})
const fitting = makeNode('duct-fitting', { position: [0, 0, 0], system: 'supply' })
const nodes = sceneOf(moved, fitting)
const connectivity = analyzePortConnectivity(moved, nodes)
const preview = {
...(moved as Record<string, unknown>),
path: [
[-0.2, 0, 1],
[0.2, 0, -1],
],
} as AnyNode
const updates = resolveConnectivityUpdates(connectivity, preview)
expectPointClose(
(updates.find((u) => u.id === fitting.id)!.data as { position: Point }).position,
[0, 0, 0],
)
})
test('an unrelated run not on the fitting is left alone', () => {
const { fitting, ductA, ductB } = joint()
const distant = makeNode('duct-segment', {
path: [
[10, 0, 0],
[13, 0, 0],
],
system: 'supply',
})
const nodes = sceneOf(fitting, ductA, ductB, distant)
const connectivity = analyzePortConnectivity(ductA, nodes)
expect(connectivity.connections.find((c) => c.nodeId === distant.id)).toBeUndefined()
})
})
packages/core/src/services/port-connectivity.ts
+349 -117
View File
@@ -13,14 +13,29 @@ import type { AnyNode, AnyNodeId } from '../schema'
*
* Pure logic: it asks each node for its ports via `def.ports` (level-local
* meters) and does arithmetic. No Three.js, no rendering — it lives in
* core and is consumed by the editor's move tool and the duct-segment
* system alike.
* core and is consumed by the editor's move tool and the duct/pipe
* selection affordances alike.
*
* Propagation is intentionally **one hop**: a moved fitting stretches the
* ducts touching it (their near endpoint follows) and rigidly drags any
* fitting mated collar-to-collar, but it does NOT chase the far end of
* those ducts or anything beyond. Bounded and predictable — no runaway
* network rearrangement.
* ## Propagation model
*
* The joint graph is snapshotted once at drag start (`analyzePortConnectivity`)
* and walked every frame (`resolveConnectivityUpdates`) given the moved node's
* live transform. Deltas flow outward from the moved node through coincident
* ports:
*
* - **Fitting** (rigid): a collar pushed by delta `d` translates the whole
* fitting by `d`; every other collar carries that same `d` onward.
* - **Run** (stretch + slide, never skew): an endpoint pushed by delta `d` is
* split against the run's own axis. The *parallel* part slides only that
* endpoint (the run lengthens / shortens); the *perpendicular* part
* translates the entire run (so its direction is preserved). The far
* endpoint therefore moves by just the perpendicular part, and that part
* propagates onward to whatever is mated to the far endpoint.
*
* Propagation walks the whole connected component so a joint stays welded all
* the way down the chain, with a visited guard so cycles (looped runs) and
* shared joints terminate. First-reached (shortest path) wins on a node
* reachable two ways.
*/
type Point = readonly [number, number, number]
@@ -30,36 +45,55 @@ type Point = readonly [number, number, number]
* generous slack for grid-snapped hand placement without false matches. */
const COINCIDENT_EPS_M = 0.05
/** A node attached to one of the moved node's ports, plus how it follows. */
/** Below this (meters) a propagated delta is treated as zero — stops the
* walk from chasing sub-millimeter perpendicular residue. */
const DELTA_EPS_M = 1e-4
const PROPAGATION_EPS_M = 1e-9
/** A node carried by the edit, plus the snapshot needed to revert it. Kept
* deliberately small: the move tools read only `kind` + `nodeId` and the
* matching start snapshot to revert before the single tracked commit. */
export type PortConnection =
| {
/** Partner is a duct run: the endpoint touching the moved port slides
* to track it (one hop — the far endpoint stays put, stretching the
* run). */
kind: 'duct-endpoint'
nodeId: AnyNodeId
/** Index in the duct's `path` that tracks the moved port. */
pathIndex: number
/** The moved node's port id this endpoint follows. */
movedPortId: string
/** The duct's full path at edit-start (other points are preserved). */
startPath: Point[]
}
| {
/** Partner is another fitting mated collar-to-collar: it translates
* rigidly so its collar stays on the moved collar. */
/** A fitting mated collar-to-collar: it translates rigidly. */
kind: 'rigid-node'
nodeId: AnyNodeId
movedPortId: string
/** Partner node's `position` at edit-start. */
/** Node's `position` at edit-start. */
startPosition: Point
}
| {
/** A run whose endpoint(s) ride the edit: it stretches and/or
* translates, never skews. */
kind: 'run'
nodeId: AnyNodeId
/** The run's full `path` at edit-start. */
startPath: Point[]
}
/** One node in the snapshotted joint graph (everything reachable from the
* moved node, excluding the moved node itself). */
type GraphNode = {
id: AnyNodeId
role: 'run' | 'fitting'
ports: ReadonlyArray<{ id: string; position: Point; system?: string }>
startPath?: Point[]
startPosition?: Point
}
/** Who else sits on a given node's port, keyed `nodeId` → `portId` → mates. */
type Adjacency = Record<string, Record<string, Array<{ nodeId: AnyNodeId; portId: string }>>>
export type PortConnectivity = {
movedNodeId: AnyNodeId
/** The moved node's port world positions at edit-start, keyed by port id.
* Used as the reference each connection's delta is measured from. */
/** The moved node's port world positions at edit-start, keyed by port id —
* the reference each frame's delta is measured from. */
startMovedPorts: Record<string, Point>
/** Reachable run/fitting nodes (excludes the moved node), keyed by id. */
graph: Record<string, GraphNode>
/** Port coincidence edges across the moved node + every graph node. */
adjacency: Adjacency
/** Flat list of carried nodes for the move tools' revert + "anything to
* follow?" check. Derived from `graph`. */
connections: PortConnection[]
}
@@ -83,85 +117,225 @@ function distSq(a: Point, b: Point): number {
return dx * dx + dy * dy + dz * dz
}
/** Two ports mate when they coincide AND don't cross incompatible systems
* (a supply duct and a waste pipe that merely touch must not fuse). */
function portsMate(
a: { position: Point; system?: string },
b: { position: Point; system?: string },
epsSq: number,
): boolean {
if (distSq(a.position, b.position) > epsSq) return false
if (a.system && b.system && a.system !== b.system) return false
return true
}
/**
* Snapshot which nodes are connected to `movedNode`'s ports, taken at the
* Snapshot the joint graph reachable from `movedNode`'s ports, taken at the
* start of a move/resize. Call once before the drag; feed the result to
* `resolveConnectivityUpdates` on every frame.
*
* Only `run`-role partners (segments — endpoint stretch) and `fitting`-role
* partners (rigid follow) are tracked — terminals and equipment usually mount
* to a surface and shouldn't be yanked off it when an adjacent fitting nudges.
* Only `run`-role partners (segments) and `fitting`-role partners are walked —
* terminals and equipment usually mount to a surface and shouldn't be yanked
* off it when an adjacent fitting nudges. Fittings that declare
* `portConnectivityFollow: false` are anchored fixtures (e.g. pipe-trap) and
* are skipped, so a connected run stretches against them instead.
*/
export function analyzePortConnectivity(
movedNode: AnyNode,
nodes: Record<string, AnyNode>,
): PortConnectivity {
const movedPorts = portsOf(movedNode) ?? []
const startMovedPorts: Record<string, Point> = {}
const movedPortSystem: Record<string, string | undefined> = {}
for (const p of movedPorts) {
startMovedPorts[p.id] = p.position
movedPortSystem[p.id] = p.system
}
const connections: PortConnection[] = []
const epsSq = COINCIDENT_EPS_M * COINCIDENT_EPS_M
const movedPorts = portsOf(movedNode) ?? []
const startMovedPorts: Record<string, Point> = {}
for (const p of movedPorts) startMovedPorts[p.id] = p.position
// Candidate partners: every run + every following fitting in the scene.
const candidates: GraphNode[] = []
for (const other of Object.values(nodes)) {
if (!other || other.id === movedNode.id) continue
// Generalised across every distribution family (HVAC duct + DWV pipe):
// `run` partners stretch an endpoint, `fitting` partners follow rigidly.
// Terminals/equipment mount to surfaces and are intentionally NOT dragged.
// Fittings that declare `portConnectivityFollow: false` are anchored
// fixtures (e.g. pipe-trap) — moving a connected run stretches the arm.
const otherRole = roleOf(other)
if (otherRole !== 'run' && otherRole !== 'fitting') continue
const otherDef = nodeRegistry.get(other.type)
if (otherRole === 'fitting' && otherDef?.portConnectivityFollow === false) continue
const otherPorts = portsOf(other)
if (!otherPorts) continue
const role = roleOf(other)
if (role !== 'run' && role !== 'fitting') continue
if (role === 'fitting' && nodeRegistry.get(other.type)?.portConnectivityFollow === false) {
continue
}
const ports = portsOf(other)
if (!ports) continue
const startPath =
role === 'run'
? (other as unknown as { path?: Point[] }).path?.map((p) => [...p] as Point)
: undefined
if (role === 'run' && (!startPath || startPath.length < 2)) continue
const startPosition =
role === 'fitting'
? (() => {
const pos = (other as unknown as { position?: Point }).position
return pos ? ([pos[0], pos[1], pos[2]] as Point) : undefined
})()
: undefined
if (role === 'fitting' && !startPosition) continue
candidates.push({ id: other.id as AnyNodeId, role, ports, startPath, startPosition })
}
for (const op of otherPorts) {
// Find which of the moved node's ports this partner port sits on.
let matchedId: string | null = null
for (const mp of movedPorts) {
if (distSq(op.position, mp.position) > epsSq) continue
// Don't fuse ports from incompatible systems (e.g. a supply duct
// and a waste pipe that happen to cross): only mate when both
// ports declare the same system, or at least one is unscoped.
const ms = movedPortSystem[mp.id]
if (ms && op.system && ms !== op.system) continue
matchedId = mp.id
break
}
if (!matchedId) continue
// Walk outward from the moved node, collecting every node reachable through
// coincident ports. The adjacency records each port's mates so the resolver
// can replay the same edges with live deltas.
const adjacency: Adjacency = {}
const addEdge = (nodeId: string, portId: string, mate: { nodeId: AnyNodeId; portId: string }) => {
const byPort = adjacency[nodeId] ?? {}
adjacency[nodeId] = byPort
const mates = byPort[portId] ?? []
byPort[portId] = mates
mates.push(mate)
}
if (otherRole === 'run') {
const path = (other as unknown as { path?: Point[] }).path
if (!Array.isArray(path) || path.length < 2) continue
// Port id 'start' → first point, 'end' → last point.
const pathIndex = op.id === 'start' ? 0 : path.length - 1
connections.push({
kind: 'duct-endpoint',
nodeId: other.id,
pathIndex,
movedPortId: matchedId,
startPath: path.map((p) => [...p] as Point),
})
} else {
const position = (other as unknown as { position?: Point }).position
if (!position) continue
connections.push({
kind: 'rigid-node',
nodeId: other.id,
movedPortId: matchedId,
startPosition: [position[0], position[1], position[2]],
})
const graph: Record<string, GraphNode> = {}
const visited = new Set<string>([movedNode.id])
// Seed: the moved node's own ports.
const queue: Array<{
id: string
ports: ReadonlyArray<{ id: string; position: Point; system?: string }>
}> = [{ id: movedNode.id, ports: movedPorts }]
while (queue.length > 0) {
const { id, ports } = queue.shift()!
for (const port of ports) {
for (const cand of candidates) {
if (cand.id === id) continue
for (const cp of cand.ports) {
if (!portsMate(port, cp, epsSq)) continue
addEdge(id, port.id, { nodeId: cand.id, portId: cp.id })
addEdge(cand.id, cp.id, { nodeId: id as AnyNodeId, portId: port.id })
if (!visited.has(cand.id)) {
visited.add(cand.id)
graph[cand.id] = cand
queue.push({ id: cand.id, ports: cand.ports })
}
}
}
}
}
return { movedNodeId: movedNode.id as AnyNodeId, connections, startMovedPorts }
const connections: PortConnection[] = Object.values(graph).map((g) =>
g.role === 'fitting'
? { kind: 'rigid-node', nodeId: g.id, startPosition: g.startPosition! }
: { kind: 'run', nodeId: g.id, startPath: g.startPath! },
)
return {
movedNodeId: movedNode.id as AnyNodeId,
startMovedPorts,
graph,
adjacency,
connections,
}
}
function add(a: Point, b: Point): Point {
return [a[0] + b[0], a[1] + b[1], a[2] + b[2]]
}
function sub(a: Point, b: Point): Point {
return [a[0] - b[0], a[1] - b[1], a[2] - b[2]]
}
function lenSq(v: Point): number {
return v[0] * v[0] + v[1] * v[1] + v[2] * v[2]
}
/** Split `delta` into the component along unit `axis` and the remainder. */
function decompose(delta: Point, axis: Point): { parallel: Point; perp: Point } {
const dot = delta[0] * axis[0] + delta[1] * axis[1] + delta[2] * axis[2]
const parallel: Point = [axis[0] * dot, axis[1] * dot, axis[2] * dot]
return { parallel, perp: sub(delta, parallel) }
}
function scale(v: Point, scalar: number): Point {
return [v[0] * scalar, v[1] * scalar, v[2] * scalar]
}
function average(deltas: Point[]): Point {
const sum = deltas.reduce<Point>((acc, delta) => add(acc, delta), [0, 0, 0])
return scale(sum, 1 / deltas.length)
}
function nearlyEqual(a: Point, b: Point): boolean {
return lenSq(sub(a, b)) <= DELTA_EPS_M * DELTA_EPS_M
}
function propagationEqual(a: Point, b: Point): boolean {
return lenSq(sub(a, b)) <= PROPAGATION_EPS_M * PROPAGATION_EPS_M
}
function effectivePortDeltas(
constraints: Record<string, Record<string, Point>>,
): Record<string, Point> {
return Object.fromEntries(
Object.entries(constraints).map(([portId, bySource]) => [
portId,
average(Object.values(bySource)),
]),
)
}
/** Unit direction of the run's segment adjacent to its `start` / `end` tip. */
function endpointAxis(path: Point[], portId: string): Point {
const n = path.length
const [a, b] = portId === 'start' ? [path[1]!, path[0]!] : [path[n - 2]!, path[n - 1]!]
const dir = sub(b, a)
const l2 = lenSq(dir)
if (l2 < 1e-12) return [0, 0, 0]
const l = Math.sqrt(l2)
return [dir[0] / l, dir[1] / l, dir[2] / l]
}
function runPathFromSinglePortDelta(
startPath: Point[],
portId: 'start' | 'end',
delta: Point,
): Point[] {
const nearIdx = portId === 'start' ? 0 : startPath.length - 1
const axis = endpointAxis(startPath, portId)
const { parallel, perp } = decompose(delta, axis)
const path = startPath.map((p) => add(p, perp))
path[nearIdx] = add(path[nearIdx]!, parallel)
return path
}
function runEndpointDeltas(startPath: Point[], path: Point[]): Record<string, Point> {
return {
start: sub(path[0]!, startPath[0]!),
end: sub(path[path.length - 1]!, startPath[startPath.length - 1]!),
}
}
function runPathFromPortDeltas(startPath: Point[], portDeltas: Record<string, Point>): Point[] {
const startDelta = portDeltas.start
const endDelta = portDeltas.end
if (startDelta && endDelta) {
if (startPath.length === 2) {
return [add(startPath[0]!, startDelta), add(startPath[1]!, endDelta)]
}
if (nearlyEqual(startDelta, endDelta)) {
return startPath.map((p) => add(p, startDelta))
}
const startParts = decompose(startDelta, endpointAxis(startPath, 'start'))
const endParts = decompose(endDelta, endpointAxis(startPath, 'end'))
const commonPerp = average([startParts.perp, endParts.perp])
const path = startPath.map((p) => add(p, commonPerp))
path[0] = add(path[0]!, startParts.parallel)
path[path.length - 1] = add(path[path.length - 1]!, endParts.parallel)
return path
}
return runPathFromSinglePortDelta(
startPath,
startDelta ? 'start' : 'end',
(startDelta ?? endDelta)!,
)
}
/**
@@ -169,45 +343,103 @@ export function analyzePortConnectivity(
* that keep every connected node attached. `previewNode` is the moved node
* with its current drag position/rotation applied so its ports recompute.
*
* - Duct endpoint: set the tracked path point to the moved port's new
* position (the joint stays welded; the run stretches).
* - Rigid fitting: translate by the moved port's delta so its mated collar
* rides along.
* Walks the snapshotted graph, propagating each port delta outward: fittings
* translate rigidly, runs stretch along their axis and translate across it
* (never skew when driven from one end), and effective port movement carries on
* to neighbouring joints. Port-level output guards bound cycles while still
* allowing a looped/shared run to accept constraints at both endpoints.
*/
export function resolveConnectivityUpdates(
connectivity: PortConnectivity,
previewNode: AnyNode,
): { id: AnyNodeId; data: Partial<AnyNode> }[] {
const { graph, adjacency, startMovedPorts, movedNodeId } = connectivity
if (Object.keys(graph).length === 0) return []
const newPorts = portsOf(previewNode) ?? []
const newById: Record<string, Point> = {}
for (const p of newPorts) newById[p.id] = p.position
const newMovedPos: Record<string, Point> = {}
for (const p of newPorts) newMovedPos[p.id] = p.position
const updates: { id: AnyNodeId; data: Partial<AnyNode> }[] = []
for (const conn of connectivity.connections) {
const start = connectivity.startMovedPorts[conn.movedPortId]
const now = newById[conn.movedPortId]
if (!start || !now) continue
// Each queue item drives a node's port by a delta ("this collar / endpoint
// must move by this much").
const queue: Array<{ nodeId: AnyNodeId; portId: string; delta: Point; sourceKey: string }> = []
const results: Record<string, { id: AnyNodeId; data: Partial<AnyNode> }> = {}
const constrainedPorts: Record<string, Record<string, Record<string, Point>>> = {}
const propagatedPorts: Record<string, Record<string, Point>> = {}
if (conn.kind === 'duct-endpoint') {
const path = conn.startPath.map((p, i) =>
i === conn.pathIndex ? ([now[0], now[1], now[2]] as Point) : ([...p] as Point),
)
updates.push({ id: conn.nodeId, data: { path } as Partial<AnyNode> })
} else {
const dx = now[0] - start[0]
const dy = now[1] - start[1]
const dz = now[2] - start[2]
updates.push({
id: conn.nodeId,
data: {
position: [
conn.startPosition[0] + dx,
conn.startPosition[1] + dy,
conn.startPosition[2] + dz,
],
} as Partial<AnyNode>,
const enqueueMates = (nodeId: string, portId: string, delta: Point) => {
const byPort = propagatedPorts[nodeId] ?? {}
propagatedPorts[nodeId] = byPort
const previous = byPort[portId]
if (previous && propagationEqual(previous, delta)) return
byPort[portId] = delta
for (const mate of adjacency[nodeId]?.[portId] ?? []) {
if (mate.nodeId === movedNodeId) continue
queue.push({
nodeId: mate.nodeId,
portId: mate.portId,
delta,
sourceKey: `${nodeId}:${portId}`,
})
}
}
return updates
const acceptPortDelta = (
nodeId: AnyNodeId,
portId: string,
sourceKey: string,
delta: Point,
): boolean => {
const byPort = constrainedPorts[nodeId] ?? {}
constrainedPorts[nodeId] = byPort
const bySource = byPort[portId] ?? {}
byPort[portId] = bySource
const existing = bySource[sourceKey]
if (existing && propagationEqual(existing, delta)) {
return false
}
bySource[sourceKey] = delta
return true
}
// Seed from the moved node's live port deltas.
for (const [portId, start] of Object.entries(startMovedPorts)) {
const now = newMovedPos[portId]
if (!now) continue
const delta = sub(now, start)
if (lenSq(delta) <= DELTA_EPS_M * DELTA_EPS_M) continue
enqueueMates(movedNodeId, portId, delta)
}
while (queue.length > 0) {
const { nodeId, portId, delta, sourceKey } = queue.shift()!
const node = graph[nodeId]
if (!node) continue
if (!acceptPortDelta(nodeId, portId, sourceKey, delta)) continue
const portDeltas = effectivePortDeltas(constrainedPorts[nodeId]!)
if (node.role === 'fitting') {
const start = node.startPosition!
const effectiveDelta = average(Object.values(portDeltas))
results[nodeId] = {
id: nodeId,
data: { position: add(start, effectiveDelta) } as Partial<AnyNode>,
}
// Rigid: every collar carries the effective body translation onward.
for (const p of node.ports) {
enqueueMates(nodeId, p.id, effectiveDelta)
}
} else {
const startPath = node.startPath!
const path = runPathFromPortDeltas(startPath, portDeltas)
results[nodeId] = { id: nodeId, data: { path } as Partial<AnyNode> }
for (const [nextPortId, nextDelta] of Object.entries(runEndpointDeltas(startPath, path))) {
if (lenSq(nextDelta) <= DELTA_EPS_M * DELTA_EPS_M) continue
enqueueMates(nodeId, nextPortId, nextDelta)
}
}
}
return Object.values(results)
}
packages/core/src/store/actions/node-actions.ts
+19
View File
@@ -1,3 +1,4 @@
import { nodeRegistry } from '../../registry/registry'
import {
type AnyNode,
type AnyNodeId,
@@ -1010,6 +1011,24 @@ export const deleteNodesAction = (
}
for (const id of allIds) deletedIds.add(id)
// Let each deleted kind undo what it imposed on its neighbours (e.g. an
// auto-inserted elbow re-extends the duct runs it trimmed back onto the
// corner it replaced). Read against pre-deletion `nextNodes`; skip
// patches that target a node also being deleted.
for (const id of allIds) {
const node = nextNodes[id]
if (!node) continue
const onDelete = nodeRegistry.get(node.type)?.parametrics?.onDelete
if (!onDelete) continue
for (const { id: targetId, data } of onDelete(node, nextNodes)) {
if (allIds.has(targetId)) continue
const target = nextNodes[targetId]
if (!target) continue
nextNodes[targetId] = { ...target, ...data } as AnyNode
nodesToMarkDirty.add(targetId)
}
}
for (const plan of mergePlans) {
const primaryWall = nextNodes[plan.primaryWallId]
if (!(primaryWall && primaryWall.type === 'wall') || allIds.has(plan.primaryWallId)) {
packages/core/src/store/use-scene.ts
+61 -8
View File
@@ -547,9 +547,18 @@ function migrateNodes(nodes: Record<string, any>): {
// any per-type migration runs, so already-saved scenes load cleanly.
const { nodes: healed } = healSceneNodes(nodes)
const patchedNodes = { ...healed } as Record<string, any>
// Scene materials minted while moving legacy wall fields onto `node.slots`;
// merged into the scene material map by the caller (`setScene`).
const mintedMaterials: Record<SceneMaterialId, SceneMaterial> = {}
// Pass 1: all node types except elevator.
// Elevator migration (migrateElevatorParent) mutates level.children to remove
// the elevator ID. If the elevator is processed before its parent level in
// Object.entries order, the level migration in this same pass would then see
// a children array that still contains the elevator ID and filter it out as
// "missing" — corrupting the level. Running elevators in a second pass after
// all levels are stable avoids the race entirely.
for (const [id, node] of Object.entries(patchedNodes)) {
// 1. Item scale migration
if (node.type === 'item' && !('scale' in node)) {
@@ -682,14 +691,6 @@ function migrateNodes(nodes: Record<string, any>): {
)
}
if (node.type === 'elevator') {
const parentMigrated = migrateElevatorParent(id, node, patchedNodes)
const normalized = normalizeElevatorNode(parentMigrated)
if (normalized) {
patchedNodes[id] = normalized
}
}
// Roof-segment hosting was added in this migration cycle (the same
// pattern as shelf above). Older segments saved before the schema
// gained `children` need the field initialised so
@@ -778,7 +779,59 @@ function migrateNodes(nodes: Record<string, any>): {
patchedNodes[id] = { ...node, children: flattened }
}
}
// Level children normalization.
// Pre-0.9.1 JSONs may carry child IDs that no longer exist in the node
// map (e.g. elevator IDs that lived under a level before the elevator
// parent migration moved them up to building). If those dangling IDs are
// left in place, collectReachableNodeIds marks the level as having
// reachable children that don't exist, which corrupts the scene graph
// traversal and leaves the LevelNode in a broken state — making floors
// impossible to drag or delete after import.
// We intentionally do NOT filter by type prefix here; being permissive
// about which types are allowed as children prevents data loss when new
// child types are added to the schema in the future.
if (node.type === 'level') {
const rawChildren = getStringArray(node.children)
const validChildren = rawChildren.filter((childId) => {
const exists = Boolean(patchedNodes[childId])
if (!exists) {
console.warn(
'[migrateNodes] level',
id,
'references missing child',
childId,
'— dropping',
)
}
return exists
})
const levelNumber = getFiniteNumber(node.level, 0)
patchedNodes[id] = {
...node,
level: levelNumber,
children: validChildren,
}
}
}
// Pass 2: elevator migration.
// migrateElevatorParent mutates the parent level's children array (removes
// the elevator ID from it). Running this after Pass 1 guarantees that the
// level normalization above has already seen a clean children list — if we
// ran elevator migration inside Pass 1, the order of Object.entries
// iteration would be non-deterministic: processing an elevator before its
// parent level would mutate the level's children mid-iteration, potentially
// causing the level branch above to see a stale node reference.
for (const [id, node] of Object.entries(patchedNodes)) {
if (node.type !== 'elevator') continue
const parentMigrated = migrateElevatorParent(id, node, patchedNodes)
const normalized = normalizeElevatorNode(parentMigrated)
if (normalized) {
patchedNodes[id] = normalized
}
}
return { nodes: patchedNodes as Record<string, AnyNode>, mintedMaterials }
}
packages/editor/package.json
+1 -1
View File
@@ -8,7 +8,7 @@
"./catalog": "./src/components/ui/item-catalog/catalog-items.tsx"
},
"scripts": {
"check-types": "tsc --noEmit"
"check-types": "tsgo --noEmit"
},
"peerDependencies": {
"@pascal-app/core": "^0.9.1",
packages/editor/src/components/editor/bake-exporter.tsx
+35
View File
@@ -0,0 +1,35 @@
'use client'
import { useScene } from '@pascal-app/core'
import { useThree } from '@react-three/fiber'
import { useEffect, useRef } from 'react'
import { exportSceneToGlb } from '../../lib/glb-export'
export function BakeExporter({
active,
onComplete,
onError,
}: {
active: boolean
onComplete: (buffer: ArrayBuffer) => void
onError: (message: string) => void
}) {
const scene = useThree((s) => s.scene)
const doneRef = useRef(false)
useEffect(() => {
if (!(active && !doneRef.current)) return
doneRef.current = true
const run = async () => {
try {
const sceneGroup = scene.getObjectByName('scene-renderer')
if (!sceneGroup) throw new Error('scene-renderer group not found')
const buffer = await exportSceneToGlb(sceneGroup, useScene.getState().nodes)
onComplete(buffer)
} catch (err) {
onError(err instanceof Error ? err.message : String(err))
}
}
void run()
}, [active, scene, onComplete, onError])
return null
}
packages/editor/src/components/editor/export-manager.tsx
+22 -49
View File
@@ -1,12 +1,12 @@
'use client'
import { emitter, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { useThree } from '@react-three/fiber'
import { useEffect } from 'react'
import type { Mesh, Object3D } from 'three'
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js'
import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
import { exportSceneToGlb, prepareSceneForExport } from '../../lib/glb-export'
export function ExportManager() {
const scene = useThree((state) => state.scene)
@@ -22,7 +22,26 @@ export function ExportManager() {
}
const date = new Date().toISOString().split('T')[0]
const exportScene = prepareSceneForExport(sceneGroup)
if (format === 'glb') {
const buffer = await exportSceneToGlb(sceneGroup, useScene.getState().nodes)
const blob = new Blob([buffer], { type: 'model/gltf-binary' })
downloadBlob(blob, `model_${date}.glb`)
return
}
// Hide editor affordances that live on the scene layer (selection handles,
// ceiling/site brackets) and let wall-cutout reveal all walls — the same
// synchronous capture path thumbnails use. We clone the scene inside the
// window, so the export snapshots the clean building, then restore.
emitter.emit('thumbnail:before-capture', undefined)
let prepared: ReturnType<typeof prepareSceneForExport>
try {
prepared = prepareSceneForExport(sceneGroup, useScene.getState().nodes)
} finally {
emitter.emit('thumbnail:after-capture', undefined)
}
const { scene: exportScene, animations } = prepared
if (format === 'stl') {
const exporter = new STLExporter()
@@ -39,25 +58,6 @@ export function ExportManager() {
downloadBlob(blob, `model_${date}.obj`)
return
}
// Default: GLB export (existing behavior)
const exporter = new GLTFExporter()
return new Promise<void>((resolve, reject) => {
exporter.parse(
exportScene,
(gltf) => {
const blob = new Blob([gltf as ArrayBuffer], { type: 'model/gltf-binary' })
downloadBlob(blob, `model_${date}.glb`)
resolve()
},
(error) => {
console.error('Export error:', error)
reject(error)
},
{ binary: true },
)
})
}
setExportScene(exportFn)
@@ -70,33 +70,6 @@ export function ExportManager() {
return null
}
function prepareSceneForExport(source: Object3D) {
const clone = source.clone(true)
const meshesToRemove: Mesh[] = []
clone.traverse((object) => {
if (isMeshWithInvalidGeometry(object)) meshesToRemove.push(object)
})
for (const mesh of meshesToRemove) {
mesh.removeFromParent()
}
return clone
}
function isMeshWithInvalidGeometry(object: Object3D): object is Mesh {
if (!isMesh(object)) return false
// Three exporters can crash when a Mesh has no readable position attribute.
const position = object.geometry?.getAttribute('position')
return !position || position.count === 0
}
function isMesh(object: Object3D): object is Mesh {
return (object as Mesh).isMesh === true
}
function downloadBlob(blob: Blob, filename: string) {
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
packages/editor/src/components/editor/first-person-controls.tsx
+1 -2
View File
@@ -45,6 +45,7 @@ import {
} from 'three'
import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh'
import '../../three-types'
import { BVHEcctrl, type BVHEcctrlApi, type MovementInput } from '@pascal-app/viewer'
import {
closeDoorOpenState,
DOOR_SWING_OPEN_ANGLE,
@@ -64,8 +65,6 @@ import {
type FirstPersonColliderWorld,
type FirstPersonSpawn,
} from './first-person/build-collider-world'
import type { BVHEcctrlApi, MovementInput } from './first-person/bvh-ecctrl'
import BVHEcctrl from './first-person/bvh-ecctrl'
const CAMERA_EYE_OFFSET = 0.45
const LOOK_SENSITIVITY = 0.002
packages/editor/src/components/editor/handles/handle-arrow.tsx
+22 -11
View File
@@ -51,6 +51,13 @@ const CHEVRON_DEPTH = 0.08
const CHEVRON_BEVEL_THICKNESS = 0.035
const CHEVRON_BEVEL_SIZE = 0.03
const CHEVRON_BEVEL_SEGMENTS = 10
// Slimmer extrude profile matching the legacy wall side handles
// (`wall-move-side-handles.tsx`) — opt-in via the `thin` prop so the chunkier
// default is preserved for every other handle that uses the shared chevron.
const CHEVRON_THIN_DEPTH = 0.045
const CHEVRON_THIN_BEVEL_THICKNESS = 0.018
const CHEVRON_THIN_BEVEL_SIZE = 0.02
const CHEVRON_THIN_BEVEL_SEGMENTS = 8
const MOVE_CROSS_HALF_LENGTH = 0.36
const MOVE_CROSS_SHAFT_HALF_WIDTH = 0.03
const MOVE_CROSS_HEAD_HALF_WIDTH = 0.12
@@ -64,7 +71,7 @@ const ROTATE_HANDLE_HALF_SWEEP = Math.PI / 3
const ROTATE_RIBBON_HALF_WIDTH = 0.02
const ROTATE_HEAD_HALF_WIDTH = 0.045
const TRACKER_CUBE_SIZE = 0.16
export const CORNER_HEX_RADIUS = 0.16
export const CORNER_HEX_RADIUS = 0.11
export type HandleArrowShape = 'chevron' | 'cross' | 'curved-arrow' | 'tracker' | 'corner-picker'
export type HandleArrowInputShape = HandleArrowShape | 'arrow' | 'move-cross'
@@ -90,6 +97,8 @@ export type HandleArrowProps = {
indicatorRotation?: readonly [number, number, number]
onPointerEnter?: PointerHandler
onPointerLeave?: PointerHandler
// Extrude the slimmer wall-handle chevron profile (chevron shape only).
thin?: boolean
}
function normalizeHandleArrowShape(shape: HandleArrowInputShape, cursor: Cursor): HandleArrowShape {
@@ -179,8 +188,9 @@ export function createRotateArrowHandleGeometry() {
// Reused chevron+shaft silhouette. The chevron points along +X by default;
// callers rotate it around Y for Z-axis handles and into a vertical frame for
// Y-axis handles.
export function createArrowHandleGeometry() {
// Y-axis handles. `thin` extrudes the slimmer wall-handle profile.
export function createArrowHandleGeometry(thin = false) {
const depth = thin ? CHEVRON_THIN_DEPTH : CHEVRON_DEPTH
const shape = new Shape()
shape.moveTo(CHEVRON_MAX_X, 0)
shape.lineTo(CHEVRON_NOTCH_X, CHEVRON_HALF_WIDTH)
@@ -191,16 +201,16 @@ export function createArrowHandleGeometry() {
shape.lineTo(CHEVRON_NOTCH_X, -CHEVRON_HALF_WIDTH)
shape.lineTo(CHEVRON_MAX_X, 0)
const geometry = new ExtrudeGeometry(shape, {
depth: CHEVRON_DEPTH,
depth,
bevelEnabled: true,
bevelThickness: CHEVRON_BEVEL_THICKNESS,
bevelSize: CHEVRON_BEVEL_SIZE,
bevelThickness: thin ? CHEVRON_THIN_BEVEL_THICKNESS : CHEVRON_BEVEL_THICKNESS,
bevelSize: thin ? CHEVRON_THIN_BEVEL_SIZE : CHEVRON_BEVEL_SIZE,
bevelOffset: 0,
bevelSegments: CHEVRON_BEVEL_SEGMENTS,
bevelSegments: thin ? CHEVRON_THIN_BEVEL_SEGMENTS : CHEVRON_BEVEL_SEGMENTS,
curveSegments: 16,
steps: 1,
})
geometry.translate(0, 0, -CHEVRON_DEPTH / 2)
geometry.translate(0, 0, -depth / 2)
geometry.rotateX(-Math.PI / 2)
geometry.computeVertexNormals()
geometry.computeBoundingSphere()
@@ -326,8 +336,8 @@ export function createEndpointHitAreaGeometry(radius: number) {
return geometry
}
function createHandleArrowGeometry(shape: HandleArrowShape) {
if (shape === 'chevron') return createArrowHandleGeometry()
function createHandleArrowGeometry(shape: HandleArrowShape, thin = false) {
if (shape === 'chevron') return createArrowHandleGeometry(thin)
if (shape === 'cross') return createMoveCrossHandleGeometry()
if (shape === 'curved-arrow') return createRotateArrowHandleGeometry()
if (shape === 'tracker') {
@@ -471,9 +481,10 @@ export function HandleArrow({
onPointerDown,
onPointerEnter,
onPointerLeave,
thin = false,
}: HandleArrowProps) {
const visualShape = normalizeHandleArrowShape(shape, cursor)
const geometry = useMemo(() => createHandleArrowGeometry(visualShape), [visualShape])
const geometry = useMemo(() => createHandleArrowGeometry(visualShape, thin), [visualShape, thin])
const hitGeometry = useMemo(() => createHandleArrowHitGeometry(visualShape), [visualShape])
const indicatorMaterial = useHandleArrowMaterial(visualShape)
const hitMaterial = useInvisibleHitAreaMaterial()
packages/editor/src/components/editor/index.tsx
+17 -4
View File
@@ -1261,6 +1261,7 @@ export default function Editor({
<CeilingSystem />
<RoofEditSystem />
<StairEditSystem />
{isFirstPersonMode && <FirstPersonControls />}
<CustomCameraControls />
<ThumbnailGenerator onThumbnailCapture={onThumbnailCapture} />
<InteractiveSystem />
@@ -1319,8 +1320,14 @@ export default function Editor({
{!isLoading && isPreviewMode ? (
<div className="dark flex h-full w-full flex-col bg-neutral-100 text-foreground">
<ViewerOverlay onBack={() => useEditor.getState().setPreviewMode(false)} />
<div className="h-full w-full">{previewViewerContent}</div>
{isFirstPersonMode ? (
<FirstPersonOverlay onExit={() => useEditor.getState().setFirstPersonMode(false)} />
) : (
<ViewerOverlay onBack={() => useEditor.getState().setPreviewMode(false)} />
)}
<div className="h-full w-full" data-pascal-viewer-3d>
{previewViewerContent}
</div>
</div>
) : (
<>
@@ -1384,8 +1391,14 @@ export default function Editor({
{!isLoading && isPreviewMode ? (
<>
<ViewerOverlay onBack={() => useEditor.getState().setPreviewMode(false)} />
<div className="h-full w-full">{previewViewerContent}</div>
{isFirstPersonMode ? (
<FirstPersonOverlay onExit={() => useEditor.getState().setFirstPersonMode(false)} />
) : (
<ViewerOverlay onBack={() => useEditor.getState().setPreviewMode(false)} />
)}
<div className="h-full w-full" data-pascal-viewer-3d>
{previewViewerContent}
</div>
</>
) : (
<>
packages/editor/src/components/editor/node-arrow-handles.tsx
+108 -1
View File
@@ -9,6 +9,7 @@ import {
DEFAULT_ANGLE_STEP,
type HandleDescriptor,
type HandlePortal,
type LatchHandle,
type LinearResizeHandle,
nodeRegistry,
type RadialResizeHandle,
@@ -44,6 +45,7 @@ import { MeshBasicNodeMaterial } from 'three/webgpu'
import { EDITOR_LAYER } from '../../lib/constants'
import { RESIZE_HANDLE_DRAG_LABEL, ROTATE_HANDLE_DRAG_LABEL } from '../../lib/contextual-help'
import { createEditorApi } from '../../lib/editor-api'
import { sfxEmitter } from '../../lib/sfx-bus'
import useDirectManipulationFeedback from '../../store/use-direct-manipulation-feedback'
import useEditor from '../../store/use-editor'
import useInteractionScope, {
@@ -112,11 +114,16 @@ export {
ARROW_COLOR,
ARROW_HOVER_COLOR,
ARROW_SCALE,
createArrowHandleGeometry,
createArrowHitAreaGeometry,
createEndpointHitAreaGeometry,
createMoveCrossHandleGeometry,
createRotateArrowHandleGeometry,
createRotateArrowHitAreaGeometry,
HandleArrow,
type HandleArrowInputShape,
type HandleArrowPlacement,
type HandleArrowProps,
HIT_AREA_MARGIN,
InvisibleHandleHitArea,
NO_RAYCAST,
@@ -374,6 +381,21 @@ function NodeArrowHandlesForNode({
// hook count between renders and trip React's rules-of-hooks check.
const [activeIndex, setActiveIndex] = useState<number | null>(null)
const [preDragNode, setPreDragNode] = useState<AnyNode | null>(null)
// Latch groups currently toggled open. A `latch` cube descriptor flips its
// group here on click; arrows tagged with a `latchGroup` only render while
// their group is in this set. Local to this mount, so it resets on deselect
// (the rig remounts per selection — see the `key` on NodeArrowHandlesForNode).
const [openLatchGroups, setOpenLatchGroups] = useState<ReadonlySet<string>>(() => new Set())
const toggleLatchGroup = useMemo(
() => (group: string) =>
setOpenLatchGroups((prev) => {
const next = new Set(prev)
if (next.has(group)) next.delete(group)
else next.add(group)
return next
}),
[],
)
const dragControls = useMemo<HandleDragControls>(
() => ({
onStart: (index: number, snapshot: AnyNode) => {
@@ -411,6 +433,21 @@ function NodeArrowHandlesForNode({
const arrows = descriptors.map((descriptor, index) => {
if (activeIsRotate && 'shape' in descriptor && descriptor.shape === 'move-cross') return null
// A `latch` cube toggles its group's visibility; render it always.
if (descriptor.kind === 'latch') {
return (
<LatchCube
descriptor={descriptor}
key={index}
node={node}
onToggle={toggleLatchGroup}
open={openLatchGroups.has(descriptor.group)}
/>
)
}
// Arrows tagged with a latch group stay hidden until that group is open.
const latchGroup = descriptor.kind === 'linear-resize' ? descriptor.latchGroup : undefined
if (latchGroup && !openLatchGroups.has(latchGroup)) return null
return (
<ArrowHandle
activeIndex={activeIndex}
@@ -670,6 +707,11 @@ function LinearArrow({
? 1
: -1
// Last value an emitted resize tick fired at — a new tick fires only
// when the (snapped + clamped) value actually changes, so the cue
// tracks real size steps instead of every sub-pixel pointer jitter.
let lastTickValue = initialValue
return {
overrideId,
onBegin: () => {
@@ -701,6 +743,10 @@ function LinearArrow({
? snapScalar(rawNext, gridSnapStep)
: rawNext
const next = Math.min(maxBound, Math.max(minBound, snappedNext))
if (next !== lastTickValue) {
lastTickValue = next
sfxEmitter.emit('sfx:resize')
}
const patch = descriptor.apply(initialNode as never, next, sceneApi) as Partial<AnyNode>
// Let the kind publish live guides for the edge being resized.
onDrag?.({ ...(initialNode as object), ...patch } as AnyNode, sceneApi)
@@ -714,10 +760,19 @@ function LinearArrow({
// X+Z rotation chain matching DoorHeightArrowHandle. When the handle
// sits below the node (placement Y < 0, e.g. window bottom arrow),
// flip the Z rotation so the chevron points outward (downward).
//
// For axis === 'x' with `faceNormal` (wall-mounted opening width arrows),
// roll the blade 90° about its own pointing (X) axis so it stands up from
// the horizontal XZ plane into the node's facing plane (XY = the wall
// face) — otherwise the blade is seen edge-on from the front.
const faceNormalX =
descriptor.kind === 'linear-resize' && descriptor.axis === 'x' && descriptor.faceNormal === true
const innerRotation: [number, number, number] =
descriptor.axis === 'y'
? [0, Math.PI / 2, position[1] < 0 ? -Math.PI / 2 : Math.PI / 2]
: [0, 0, 0]
: faceNormalX
? [Math.PI / 2, 0, 0]
: [0, 0, 0]
// Optional guide decoration — linear handles use it for curved-stair
// width / inner-radius rings; radial handles use it for the column's
@@ -803,6 +858,7 @@ function LinearArrow({
onPointerDown={activate}
placement={{ position, rotation: [0, rotationY, 0], baseScale }}
shape="chevron"
thin
>
{showLabel ? <DimensionLabel position={[0, 0.22, 0]} text={labelText} /> : null}
</HandleArrow>
@@ -1213,6 +1269,7 @@ function ArcArrow({
baseScale,
}}
shape={isRotateShape ? 'curved-arrow' : 'chevron'}
thin
/>
</>
)
@@ -1276,6 +1333,56 @@ function TapActionArrow({
onPointerDown={onActivate}
placement={{ position, rotation, baseScale }}
shape={shape === 'move-cross' ? 'move-cross' : 'chevron'}
thin
/>
)
}
// Click-to-latch cube. A persistent grip (the `tracker` cube) that toggles
// the visibility of every arrow tagged with its `latchGroup` on click. Sized
// to match the duct selection cube (`baseScale = zoom`, full TRACKER_CUBE_SIZE)
// so every latch grip reads the same across the app. Stays highlighted while
// its group is open so the user can tell it's engaged.
function LatchCube({
descriptor,
node,
open,
onToggle,
}: {
descriptor: LatchHandle<AnyNode>
node: AnyNode
open: boolean
onToggle: (group: string) => void
}) {
const [isHovered, setIsHovered] = useState(false)
const { camera } = useThree()
const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
const baseScale = zoom
const placementSceneApi = useMemo(() => createSceneApi(useScene), [])
const position = descriptor.placement.position(node, placementSceneApi)
const rotationY = descriptor.placement.rotationY?.(node, placementSceneApi) ?? 0
// Route through the shared tap path so the cube click is swallowed before it
// reaches the select tool — stops R3F propagation, suppresses box-select, and
// eats the trailing DOM click that would otherwise select the host node.
const onPointerDown = useHandleDrag({
kind: 'tap',
onTap: () => {
setIsHovered(false)
onToggle(descriptor.group)
},
})
return (
<HandleArrow
cursor="grab"
hover={isHovered || open}
hoverScale={1.15}
onHoverChange={setIsHovered}
onPointerDown={onPointerDown}
placement={{ position, rotation: [0, rotationY, 0], baseScale }}
shape="tracker"
/>
)
}
packages/editor/src/components/editor/wall-move-side-handles.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ const ARROW_HOVER_COLOR = '#a5b4fc'
// Match the door arrows: scale the rendered chevron down to ~two-thirds
// so the in-world handles read as a single UI family.
const ARROW_SCALE = 0.65
const CORNER_HEX_RADIUS = 0.16
const CORNER_HEX_RADIUS = 0.11
const CORNER_DASH_SIZE = 0.1
const CORNER_GAP_SIZE = 0.07
const CORNER_DASH_THICKNESS = 0.006
packages/editor/src/components/tools/select/plane-box-select-tool.tsx
-7
View File
@@ -10,7 +10,6 @@ import {
type ZoneNode,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import type { ThreeElements } from '@react-three/fiber'
import { useThree } from '@react-three/fiber'
import { useCallback, useEffect, useRef } from 'react'
import {
@@ -34,12 +33,6 @@ import { CursorSphere } from '../shared/cursor-sphere'
import { isBoxSelectPointerSuppressed, markBoxSelectHandled } from './box-select-state'
import { collectSelectableCandidateIds } from './select-candidates'
declare module 'react/jsx-runtime' {
namespace JSX {
interface IntrinsicElements extends ThreeElements {}
}
}
type Bounds = { minX: number; maxX: number; minZ: number; maxZ: number }
const BOX_SELECT_ACCENT_COLOR = '#818cf8'
packages/editor/src/components/tools/shared/cursor-sphere.tsx
+43 -14
View File
@@ -12,12 +12,28 @@ interface CursorSphereProps extends Omit<ThreeElements['group'], 'ref'> {
depthWrite?: boolean
showTooltip?: boolean
height?: number
/**
* Put the bright marker dot at the TIP of the vertical line (y = height)
* instead of on the ground ring. Used when the point being placed hangs
* above the floor (e.g. duct drawn against the ceiling): the dot rides at
* the cursor / placement point while the line drops to a floor ring that
* keeps the plan position readable.
*/
dotAtTip?: boolean
/** Custom tooltip content — overrides the auto-detected build tool icon */
tooltipContent?: React.ReactNode
}
export const CursorSphere = forwardRef<Group, CursorSphereProps>(function CursorSphere(
{ color = '#818cf8', showTooltip = true, height = 2.5, visible = true, tooltipContent, ...props },
{
color = '#818cf8',
showTooltip = true,
height = 2.5,
dotAtTip = false,
visible = true,
tooltipContent,
...props
},
ref,
) {
const tool = useEditor((s) => s.tool)
@@ -39,19 +55,23 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
return (
<group ref={ref} {...props} visible={isVisible}>
{/* Flat marker on the ground */}
{/* Flat marker on the ground. The bright center dot moves to the tip
of the line in `dotAtTip` mode (the placement point hangs above the
floor), leaving a faint ring here so the plan position stays read. */}
<group rotation={[-Math.PI / 2, 0, 0]}>
{/* Center dot */}
<mesh layers={EDITOR_LAYER} renderOrder={2}>
<circleGeometry args={[0.06, 32]} />
<meshBasicMaterial
color={color}
depthTest={false}
depthWrite={false}
opacity={0.9}
transparent
/>
</mesh>
{/* Center dot — at the ground unless the placement point is elevated */}
{!dotAtTip && (
<mesh layers={EDITOR_LAYER} renderOrder={2}>
<circleGeometry args={[0.06, 32]} />
<meshBasicMaterial
color={color}
depthTest={false}
depthWrite={false}
opacity={0.9}
transparent
/>
</mesh>
)}
{/* Outer ring / glow */}
<mesh layers={EDITOR_LAYER} renderOrder={2}>
@@ -60,7 +80,7 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
color={color}
depthTest={false}
depthWrite={false}
opacity={0.25}
opacity={dotAtTip ? 0.2 : 0.25}
transparent
/>
</mesh>
@@ -80,6 +100,15 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
</mesh>
)}
{/* Bright marker dot at the tip of the line — the actual placement
point, riding at the cursor while the line drops to the floor. */}
{dotAtTip && height > 0 && (
<mesh layers={EDITOR_LAYER} position={[0, height, 0]} renderOrder={2}>
<sphereGeometry args={[0.08, 20, 14]} />
<meshBasicMaterial color={color} depthTest={false} depthWrite={false} />
</mesh>
)}
{/* Tool Icon Tooltip at the top of the line */}
{isVisible && showTooltip && (activeToolConfig || tooltipContent) && (
<Html
packages/editor/src/components/ui/command-palette/editor-commands.tsx
+2 -2
View File
@@ -245,10 +245,10 @@ export function EditorCommands() {
label: 'Wall Mode',
group: 'Viewer Controls',
icon: <Layers className="h-4 w-4" />,
keywords: ['wall', 'cutaway', 'up', 'down', 'view'],
keywords: ['wall', 'cutaway', 'up', 'down', 'translucent', 'view'],
badge: () => {
const mode = useViewer.getState().wallMode
return { cutaway: 'Cutaway', up: 'Up', down: 'Down' }[mode]
return { cutaway: 'Cutaway', up: 'Up', down: 'Down', translucent: 'Translucent' }[mode]
},
navigate: true,
execute: () => navigateTo('wall-mode'),
packages/editor/src/components/ui/command-palette/index.tsx
+3 -2
View File
@@ -244,10 +244,11 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
setOpen(false)
}
const wallModeLabel: Record<'cutaway' | 'up' | 'down', string> = {
const wallModeLabel: Record<'cutaway' | 'up' | 'down' | 'translucent', string> = {
cutaway: 'Cutaway',
up: 'Up',
down: 'Down',
translucent: 'Translucent',
}
const levelModeLabel: Record<'manual' | 'stacked' | 'exploded' | 'solo', string> = {
manual: 'Manual',
@@ -373,7 +374,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
{/* ── Wall Mode sub-page ────────────────────────────────────── */}
{page === 'wall-mode' && (
<Command.Group heading="Wall Mode">
{(['cutaway', 'up', 'down'] as const).map((mode) => (
{(['cutaway', 'up', 'down', 'translucent'] as const).map((mode) => (
<OptionItem
isActive={wallMode === mode}
key={mode}
packages/editor/src/components/ui/helpers/helper-manager.tsx
+17 -11
View File
@@ -119,17 +119,23 @@ export function HelperManager() {
() => getActiveContinuationContext(),
[scope, mode, tool],
)
const selectModeHints = useMemo(
() =>
resolveSelectModeHelpHints({
selectedCount: selectedNodes.length,
hasMovableSelection: selectedNodes.some((node) => canDirectMoveNode(node)),
hasRotatableSelection: selectedNodes.some((node) => canDirectRotateNode(node)),
commandPressed: modifiers.command,
shiftPressed: modifiers.shift,
}),
[modifiers.command, modifiers.shift, selectedNodes],
)
const selectModeHints = useMemo(() => {
const single = selectedNodes.length === 1 ? selectedNodes[0] : null
const mepSelection =
single?.type === 'duct-segment' || single?.type === 'pipe-segment'
? 'run'
: single?.type === 'duct-fitting' || single?.type === 'pipe-fitting'
? 'fitting'
: null
return resolveSelectModeHelpHints({
selectedCount: selectedNodes.length,
hasMovableSelection: selectedNodes.some((node) => canDirectMoveNode(node)),
hasRotatableSelection: selectedNodes.some((node) => canDirectRotateNode(node)),
commandPressed: modifiers.command,
shiftPressed: modifiers.shift,
mepSelection,
})
}, [modifiers.command, modifiers.shift, selectedNodes])
// Helpers are keyboard-driven hints (Esc, R, etc.) — irrelevant on touch.
if (isMobile) return null
packages/editor/src/components/viewer-overlay.tsx
+50 -1
View File
@@ -25,6 +25,7 @@ import {
Check,
ChevronRight,
Diamond,
Footprints,
Layers,
Palette,
PenLine,
@@ -32,8 +33,10 @@ import {
Square,
} from 'lucide-react'
import Link from 'next/link'
import { flushSync } from 'react-dom'
import { useShallow } from 'zustand/react/shallow'
import { cn } from '../lib/utils'
import useEditor from '../store/use-editor'
import { ActionButton } from './ui/action-menu/action-button'
import {
DropdownMenu,
@@ -51,6 +54,24 @@ type ProjectOwner = {
image: string | null
}
function requestWalkthroughPointerLock() {
const canvas = document.querySelector<HTMLCanvasElement>('[data-pascal-viewer-3d] canvas')
if (!canvas) return
if (!canvas.hasAttribute('tabindex')) {
canvas.tabIndex = -1
}
canvas.focus({ preventScroll: true })
if (document.pointerLockElement === canvas) return
try {
canvas.requestPointerLock?.()
} catch {
return
}
}
const levelModeLabels: Record<'stacked' | 'exploded' | 'solo', string> = {
stacked: 'Stacked',
exploded: 'Exploded',
@@ -83,6 +104,12 @@ const wallModeConfig = {
),
label: 'Low',
},
translucent: {
icon: (props: any) => (
<img alt="Translucent" height={28} src="/icons/wall.png" width={28} {...props} />
),
label: 'Translucent',
},
}
const SHADING_OPTIONS = [
@@ -580,7 +607,12 @@ export const ViewerOverlay = ({
}
label={`Walls: ${wallModeConfig[wallMode as keyof typeof wallModeConfig].label}`}
onClick={() => {
const modes: ('cutaway' | 'up' | 'down')[] = ['cutaway', 'up', 'down']
const modes: ('cutaway' | 'up' | 'down' | 'translucent')[] = [
'cutaway',
'up',
'down',
'translucent',
]
const nextIndex = (modes.indexOf(wallMode as any) + 1) % modes.length
useViewer.getState().setWallMode(modes[nextIndex] ?? 'cutaway')
}}
@@ -641,6 +673,23 @@ export const ViewerOverlay = ({
src="/icons/topview.webp"
/>
</ActionButton>
<div className="mx-1 h-5 w-px bg-border/40" />
{/* First-person walkthrough */}
<ActionButton
className="hover:bg-white/5 hover:text-emerald-400"
label="Walkthrough"
onClick={() => {
flushSync(() => useEditor.getState().setFirstPersonMode(true))
requestWalkthroughPointerLock()
}}
size="icon"
tooltipSide="top"
variant="ghost"
>
<Footprints className="h-6 w-6" />
</ActionButton>
</div>
</TooltipProvider>
</div>
packages/editor/src/index.tsx
+23 -1
View File
@@ -11,6 +11,7 @@ export { default as Editor } from './components/editor'
// they're referenced throughout the editor's own internals; the public
// surface uses the shorter, shell-friendly names from the unified
// preset-system spec.
export { BakeExporter } from './components/editor/bake-exporter'
export { FloatingActionMenu as FloatingMenu } from './components/editor/floating-action-menu'
// Embed surface — the editor's real in-canvas affordances, so a host can mount
// authentic selection handles, interactive build tools, and the mover on top
@@ -39,7 +40,27 @@ export {
formatMeasurement,
MeasurementPill,
} from './components/editor/measurement-pill'
export { NodeArrowHandles } from './components/editor/node-arrow-handles'
// In-world arrow handle primitives (chevron geometry, invisible hit area,
// shared material, palette + scale constants). Re-exported so kind-owned
// 3D selection affordances in `@pascal-app/nodes` (duct side-move / height /
// extend arrows) reuse the same UI family as the wall / fence side handles.
export {
ARROW_COLOR,
ARROW_HOVER_COLOR,
ARROW_SCALE,
createArrowHandleGeometry,
createArrowHitAreaGeometry,
HandleArrow,
type HandleArrowInputShape,
type HandleArrowPlacement,
type HandleArrowProps,
InvisibleHandleHitArea,
NO_RAYCAST,
NodeArrowHandles,
swallowNextClick,
useArrowMaterial,
useInvisibleHitAreaMaterial,
} from './components/editor/node-arrow-handles'
export {
type SnapshotCameraData,
ThumbnailGenerator,
@@ -259,6 +280,7 @@ export {
getFloorplanWallThickness,
} from './lib/floorplan'
export { commitFreshPlacementSubtree } from './lib/fresh-planar-placement'
export { exportSceneToGlb } from './lib/glb-export'
export {
boundaryReshapeScope,
curveReshapeScope,
packages/editor/src/lib/contextual-help.ts
+22
View File
@@ -38,12 +38,19 @@ export type SelectModeHelpContext = {
hasRotatableSelection: boolean
commandPressed: boolean
shiftPressed: boolean
// When a single MEP node is selected its in-world handle rig (click a dot to
// reveal move arrows) is the real editing path, so the panel leads with the
// handle-specific hints instead of just the generic Cmd-drag tips.
mepSelection?: 'run' | 'fitting' | null
}
const COMMAND_KEY = 'Cmd/Ctrl'
const LEFT_CLICK = 'Left click'
const RIGHT_CLICK = 'Right click'
const SHIFT_KEY = 'Shift'
const CLICK = 'Click'
const ALT_KEY = 'Alt'
const ROTATE_KEYS = 'R / T'
export function resolveSelectModeHelpHints({
selectedCount,
@@ -51,6 +58,7 @@ export function resolveSelectModeHelpHints({
hasRotatableSelection,
commandPressed,
shiftPressed,
mepSelection = null,
}: SelectModeHelpContext): ContextualShortcutHint[] {
const hints: ContextualShortcutHint[] = []
@@ -65,6 +73,20 @@ export function resolveSelectModeHelpHints({
return hints
}
// MEP handle workflow — duct/pipe runs and fittings are edited through the
// in-world arrow rig that a click on the handle dot reveals, so surface those
// hints first. A run endpoint's side / up-down arrows swing the run and Alt
// detaches the joint mid-drag; a fitting's cluster adds rotate arcs, with
// R / T (and Alt to switch axis) for keyboard rotation.
if (mepSelection === 'run') {
hints.push({ keys: [CLICK], label: 'Click a handle dot to show move arrows' })
hints.push({ keys: [ALT_KEY], label: 'Detach the joint while dragging an arrow' })
} else if (mepSelection === 'fitting') {
hints.push({ keys: [CLICK], label: 'Click the handle dot to show move + rotate handles' })
hints.push({ keys: [ROTATE_KEYS], label: 'Rotate ±45°' })
hints.push({ keys: [ALT_KEY], label: 'Switch the rotation axis (Y → X → Z)' })
}
if (commandPressed) {
if (hasMovableSelection) {
hints.push({
packages/editor/src/lib/glb-export.test.ts
+267
View File
@@ -0,0 +1,267 @@
import { afterEach, describe, expect, test } from 'bun:test'
import { type AnyNode, sceneRegistry } from '@pascal-app/core'
import * as THREE from 'three'
import { prepareSceneForExport } from './glb-export'
afterEach(() => {
sceneRegistry.clear()
})
function nodeMaterial(overrides: Record<string, unknown> = {}) {
// Duck-typed stand-in for the viewer's MeshStandard/LambertNodeMaterial:
// the exporter keys off `isNodeMaterial` and reads plain PBR props.
return {
isNodeMaterial: true,
name: 'painted',
color: new THREE.Color('#cc3300'),
roughness: 0.3,
metalness: 0.7,
transparent: false,
opacity: 1,
side: THREE.FrontSide,
alphaTest: 0,
depthWrite: true,
depthTest: true,
vertexColors: false,
toneMapped: true,
...overrides,
} as unknown as THREE.Material
}
function meshWithNodeMaterial(material: THREE.Material): THREE.Mesh {
const geometry = new THREE.BoxGeometry(1, 1, 1)
return new THREE.Mesh(geometry, material)
}
describe('prepareSceneForExport', () => {
test('converts NodeMaterials to classic glTF-standard materials', () => {
const root = new THREE.Group()
root.name = 'scene-renderer'
const mesh = meshWithNodeMaterial(nodeMaterial())
root.add(mesh)
const { scene } = prepareSceneForExport(root, {})
const exported = scene.children[0] as THREE.Mesh
const material = exported.material as THREE.MeshStandardMaterial
expect(material.isMeshStandardMaterial).toBe(true)
expect(material.roughness).toBeCloseTo(0.3)
expect(material.metalness).toBeCloseTo(0.7)
expect(material.color.getHexString()).toBe('cc3300')
})
test('shared NodeMaterial instances convert to a single shared material', () => {
const root = new THREE.Group()
const shared = nodeMaterial()
root.add(meshWithNodeMaterial(shared), meshWithNodeMaterial(shared))
const { scene } = prepareSceneForExport(root, {})
const meshes = scene.children as THREE.Mesh[]
expect(meshes[0]!.material).toBe(meshes[1]!.material)
})
test('strips editor overlays that live off the scene layer', () => {
const root = new THREE.Group()
const realMesh = meshWithNodeMaterial(nodeMaterial())
const overlay = meshWithNodeMaterial(nodeMaterial())
overlay.layers.set(1) // OVERLAY_LAYER / EDITOR_LAYER — off scene layer 0
root.add(realMesh, overlay)
const { scene } = prepareSceneForExport(root, {})
const meshes: THREE.Mesh[] = []
scene.traverse((o) => {
if ((o as THREE.Mesh).isMesh) meshes.push(o as THREE.Mesh)
})
expect(meshes).toHaveLength(1)
})
test('neutralises an invisible hitbox root but keeps its visible children', () => {
// Door/window roots are selection hitboxes: a box geometry with an invisible
// material (object stays visible). Left intact it would plug the wall opening.
const root = new THREE.Group()
const hitbox = new THREE.Mesh(
new THREE.BoxGeometry(1, 2, 0.2),
new THREE.MeshBasicMaterial({ visible: false }),
)
const leaf = meshWithNodeMaterial(nodeMaterial())
hitbox.add(leaf)
root.add(hitbox)
const doorId = 'door_hitbox'
sceneRegistry.nodes.set(doorId, hitbox)
const nodes: Record<string, AnyNode> = {
[doorId]: { object: 'node', id: doorId, type: 'door' } as unknown as AnyNode,
}
const { scene } = prepareSceneForExport(root, nodes)
const exported = scene.getObjectByProperty('name', doorId) as THREE.Mesh
expect(exported).toBeDefined()
// Geometry emptied -> GLTFExporter emits a plain node, no solid block.
expect(exported.geometry.getAttribute('position')).toBeUndefined()
// The visible leaf survives as a child.
const visibleChildren = exported.children.filter((c) => (c as THREE.Mesh).isMesh)
expect(visibleChildren).toHaveLength(1)
})
test('stamps identity from the scene registry and strips other userData', () => {
const root = new THREE.Group()
const doorGroup = new THREE.Group()
const leaf = new THREE.Group()
leaf.userData.pascalSwingLeaf = { axis: 'y', openRotationY: Math.PI / 2 }
leaf.add(meshWithNodeMaterial(nodeMaterial()))
doorGroup.add(leaf)
root.add(doorGroup)
const doorId = 'door_test'
sceneRegistry.nodes.set(doorId, doorGroup)
const nodes: Record<string, AnyNode> = {
[doorId]: {
object: 'node',
id: doorId,
type: 'door',
name: 'Front door',
} as unknown as AnyNode,
}
const { scene } = prepareSceneForExport(root, nodes)
const exportedDoor = scene.getObjectByProperty('name', doorId)
expect(exportedDoor).toBeDefined()
expect(exportedDoor?.userData).toEqual({
pascalId: doorId,
kind: 'door',
label: 'Front door',
openable: true,
clips: ['Front door: open'],
})
// The swing-leaf marker must not survive into glTF extras.
let leafMarkerSurvived = false
scene.traverse((object) => {
if (object.userData.pascalSwingLeaf) leafMarkerSurvived = true
})
expect(leafMarkerSurvived).toBe(false)
})
test('does not flag a door/window openable when no open clip bakes', () => {
// A cased opening (no swing leaf) / fixed window (no operable sash) builds
// no movable part, so no clip bakes and the node must not claim openable.
const root = new THREE.Group()
const openingGroup = new THREE.Group()
openingGroup.add(meshWithNodeMaterial(nodeMaterial()))
root.add(openingGroup)
const openingId = 'door_opening'
sceneRegistry.nodes.set(openingId, openingGroup)
const nodes: Record<string, AnyNode> = {
[openingId]: {
object: 'node',
id: openingId,
type: 'door',
name: 'Cased opening',
} as unknown as AnyNode,
}
const { scene, animations } = prepareSceneForExport(root, nodes)
expect(animations).toHaveLength(0)
const exported = scene.getObjectByProperty('name', openingId)
expect(exported?.userData).toEqual({
pascalId: openingId,
kind: 'door',
label: 'Cased opening',
})
expect(exported?.userData.openable).toBeUndefined()
expect(exported?.userData.clips).toBeUndefined()
})
test('keeps the zone identity node with its polygon and strips the fill mesh', () => {
const root = new THREE.Group()
const zoneGroup = new THREE.Group()
const fill = meshWithNodeMaterial(nodeMaterial())
fill.layers.set(2) // ZONE_LAYER
zoneGroup.add(fill)
zoneGroup.visible = false // the editor often hides zones at export time
root.add(zoneGroup)
const zoneId = 'zone_living'
const polygon: [number, number][] = [
[0, 0],
[4, 0],
[4, 3],
]
sceneRegistry.nodes.set(zoneId, zoneGroup)
const nodes: Record<string, AnyNode> = {
[zoneId]: {
object: 'node',
id: zoneId,
type: 'zone',
name: 'Living Room',
polygon,
color: '#ff0000',
} as unknown as AnyNode,
}
const { scene } = prepareSceneForExport(root, nodes)
const exported = scene.getObjectByProperty('name', zoneId)
expect(exported).toBeDefined()
// Forced visible so GLTFExporter's onlyVisible keeps the metadata node.
expect(exported?.visible).toBe(true)
expect(exported?.userData).toEqual({
pascalId: zoneId,
kind: 'zone',
label: 'Living Room',
polygon,
color: '#ff0000',
})
// The ZONE_LAYER fill mesh must not survive (rebuilt in /viewer instead).
let hasMesh = false
exported?.traverse((o) => {
if ((o as THREE.Mesh).isMesh) hasMesh = true
})
expect(hasMesh).toBe(false)
})
test('bakes a swing door into an open quaternion clip', () => {
const root = new THREE.Group()
const doorGroup = new THREE.Group()
const leaf = new THREE.Group()
leaf.userData.pascalSwingLeaf = { axis: 'y', openRotationY: Math.PI / 2 }
leaf.add(meshWithNodeMaterial(nodeMaterial()))
doorGroup.add(leaf)
root.add(doorGroup)
const doorId = 'door_swing'
sceneRegistry.nodes.set(doorId, doorGroup)
const nodes: Record<string, AnyNode> = {
[doorId]: { object: 'node', id: doorId, type: 'door', name: 'Door' } as unknown as AnyNode,
}
const { scene, animations } = prepareSceneForExport(root, nodes)
expect(animations).toHaveLength(1)
const clip = animations[0]!
expect(clip.name).toBe('Door: open')
expect(clip.duration).toBe(1)
// Playback intent carried in extras so consumers can play once and hold.
expect(clip.userData).toEqual({ loop: false })
const track = clip.tracks[0]!
expect(track).toBeInstanceOf(THREE.QuaternionKeyframeTrack)
expect(track.name.endsWith('.quaternion')).toBe(true)
expect(Array.from(track.times)).toEqual([0, 1])
// The track must target an object that exists in the exported tree.
const targetUuid = track.name.replace('.quaternion', '')
const target = scene.getObjectByProperty('uuid', targetUuid)
expect(target).toBeDefined()
// Rest pose is closed: the first keyframe is the identity rotation.
const closed = new THREE.Quaternion().fromArray(Array.from(track.values).slice(0, 4))
expect(closed.angleTo(new THREE.Quaternion())).toBeCloseTo(0)
})
})
packages/editor/src/lib/glb-export.ts
+653
View File
@@ -0,0 +1,653 @@
import {
type AnyNode,
emitter,
getLevelDisplayName,
itemClipRegistry,
type LevelNode,
sceneRegistry,
type WindowNode,
type ZoneNode,
} from '@pascal-app/core'
import { poseWindowMovingParts, SCENE_LAYER, snapLevelsToTruePositions } from '@pascal-app/viewer'
import type { Object3D } from 'three'
import * as THREE from 'three'
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
import * as WebGPUTextureUtils from 'three/examples/jsm/utils/WebGPUTextureUtils.js'
/**
* Two TRS samples (closed vs open) differing by less than this are treated as
* stationary, so only genuinely moving parts get an animation track.
*/
const POSE_EPSILON = 1e-5
/**
* Marker stamped on a door's swing-leaf group by the door system. `axis` is the
* hinge axis and `openRotationY` is the fully-open angle (radians). The export
* reads it to bake an open clip from a single closed pose; see `door-system`.
*/
type SwingLeafMarker = { axis: 'y'; openRotationY: number }
export type GlbExport = {
scene: THREE.Object3D
animations: THREE.AnimationClip[]
}
export async function exportSceneToGlb(
sceneGroup: Object3D,
nodes: Record<string, AnyNode>,
): Promise<ArrayBuffer> {
emitter.emit('thumbnail:before-capture', undefined)
// Snap levels to their true stacked positions (like thumbnail capture) so the
// export always reflects the clean stacked building, regardless of the live
// levelMode (exploded/solo) or an unsettled level lerp that could otherwise
// bake a level at a stray offset.
const restoreLevels = snapLevelsToTruePositions()
let prepared: ReturnType<typeof prepareSceneForExport>
try {
prepared = prepareSceneForExport(sceneGroup, nodes)
} finally {
restoreLevels()
emitter.emit('thumbnail:after-capture', undefined)
}
const { scene: exportScene, animations } = prepared
const exporter = new GLTFExporter()
// Painted finishes use KTX2 (GPU-compressed) maps; GLTFExporter can't read
// those directly. WebGPUTextureUtils blits each one to RGBA on its own
// offscreen renderer (passing the live renderer would resize/draw over the
// editor canvas), letting the exporter embed standard textures.
exporter.setTextureUtils(WebGPUTextureUtils)
return new Promise<ArrayBuffer>((resolve, reject) => {
exporter.parse(
exportScene,
(gltf) => {
resolve(gltf as ArrayBuffer)
},
(error) => {
reject(error)
},
{ binary: true, animations },
)
})
}
/**
* Build an engine-agnostic export tree from the live scene graph. The result is
* a standalone three.js scene plus glTF animation clips, ready for
* `GLTFExporter` — it carries no Pascal runtime dependency.
*
* - Clones the source so live objects are never mutated.
* - Converts WebGPU NodeMaterials to classic glTF-standard materials.
* `GLTFExporter` only recognises `isMeshStandardMaterial` /
* `isMeshBasicMaterial`; the viewer's `MeshStandard/LambertNodeMaterial` set
* `isNodeMaterial` instead, so without this every surface exports as a blank
* default material.
* - Bakes each openable door/window's open motion into a glTF animation clip
* via the build-once + pose-at-t primitives (`pascalSwingLeaf` for doors,
* `poseWindowMovingParts` for windows).
* - Stamps `name` + `extras` identity from `sceneRegistry` so selection/hover
* survive the bake with no in-memory registry, and strips all other userData
* so editor/runtime ephemera never leak into glTF extras.
*/
export function prepareSceneForExport(
source: THREE.Object3D,
nodes: Record<string, AnyNode>,
): GlbExport {
const scene = source.clone(true)
const cloneByOriginal = pairClones(source, scene)
// Scans (LiDAR meshes) and guides (floorplan images) are heavy reference
// assets stored elsewhere and aren't part of the compiled building. Drop them
// from the artifact entirely — `/viewer` re-adds them from the scene graph,
// gated by the project's public-visibility flags, so they never bloat the
// shared GLB nor slip past those flags into a static public file.
for (const [id, original] of sceneRegistry.nodes) {
const node = nodes[id]
if (node?.type === 'scan' || node?.type === 'guide') {
cloneByOriginal.get(original)?.removeFromParent()
}
}
// Object3Ds that carry node identity — never strip these even when they sit on
// a non-scene layer. Some are metadata-only: a zone's visible fill/wall meshes
// are stripped, but its identity node stays to carry the polygon that /viewer
// reconstructs the room from.
const identityNodes = new Set<THREE.Object3D>()
for (const original of sceneRegistry.nodes.values()) {
const clone = cloneByOriginal.get(original)
if (clone) identityNodes.add(clone)
}
pruneNonRenderableMeshes(scene, identityNodes)
convertMaterials(scene)
const { clips, clipNamesByNode } = bakeAnimationClips(cloneByOriginal, nodes)
stampIdentity(scene, cloneByOriginal, nodes, clipNamesByNode)
return { scene, animations: clips }
}
/**
* Pair each original Object3D with its clone. `clone(true)` builds children in
* source order, so parallel pre-order traversals line up 1:1 — this is how we
* map `sceneRegistry`'s live refs onto the export tree without mutating either.
*/
function pairClones(
source: THREE.Object3D,
clone: THREE.Object3D,
): Map<THREE.Object3D, THREE.Object3D> {
const originals: THREE.Object3D[] = []
const clones: THREE.Object3D[] = []
source.traverse((object) => originals.push(object))
clone.traverse((object) => clones.push(object))
const map = new Map<THREE.Object3D, THREE.Object3D>()
for (let i = 0; i < originals.length; i++) {
const target = clones[i]
if (target) map.set(originals[i]!, target)
}
return map
}
// A single empty geometry shared by every container mesh we neutralise below —
// it has no attributes, so GLTFExporter's processMesh returns null and emits a
// plain transform node instead of a primitive.
const EMPTY_GEOMETRY = new THREE.BufferGeometry()
// Hidden placeholder for a neutralised renderable that has no material: a valid
// material keeps GLTFExporter from crashing on `material.isShaderMaterial`, while
// EMPTY_GEOMETRY makes it emit a transform node instead of a primitive.
const PLACEHOLDER_MATERIAL = new THREE.MeshBasicMaterial({ visible: false })
/**
* Strip everything that must not bake into the model:
* - Editor overlays on non-scene layers (gizmos, selection handles, ground
* grid, zone fills). The editor camera shows them via extra layers; a
* thumbnail/bake is layer 0 only. Scene-layer affordances that can't be
* layer-filtered (ceiling/site brackets) are hidden by the caller's
* `thumbnail:before-capture` emit before the clone instead.
* - Selection hitboxes, whose invisibility lives on `material.visible = false`
* (which GLTFExporter's `onlyVisible` does not catch). A door/window's hitbox
* root is a box spanning the wall opening — left in, it plugs the cutout.
* With children (it parents the visible frame + leaf) it keeps its node but
* loses its geometry; childless ones are removed outright.
*/
function pruneNonRenderableMeshes(root: THREE.Object3D, identityNodes: Set<THREE.Object3D>) {
const toRemove: THREE.Object3D[] = []
root.traverse((object) => {
// Editor-only overlays (gizmos, selection handles, ground grid, zone fills)
// live off the scene layer; the editor camera shows them via extra layers
// but a thumbnail/bake only wants layer 0. Drop the whole overlay subtree —
// except identity nodes, which we keep (their off-layer mesh children are
// still pruned as the traversal continues).
if (!object.layers.isEnabled(SCENE_LAYER)) {
if (identityNodes.has(object)) return
toRemove.push(object)
return
}
// A renderable (Mesh / Line / Points) with no material can't produce valid
// glTF and crashes GLTFExporter, which reads `material.isShaderMaterial`
// unconditionally — e.g. an imported sub-model that left a mesh material-less.
// Non-Mesh renderables also slip past the `isMesh` checks below and the
// material conversion. Neutralise it: keep the node (so children survive) but
// strip its geometry + give it the hidden placeholder, or drop it if a leaf.
const renderable = object as THREE.Mesh & { isLine?: boolean; isPoints?: boolean }
if (
(renderable.isMesh === true || renderable.isLine === true || renderable.isPoints === true) &&
renderable.material == null
) {
if (object.children.length > 0) {
renderable.geometry = EMPTY_GEOMETRY
renderable.material = PLACEHOLDER_MATERIAL
} else {
toRemove.push(object)
}
return
}
const mesh = object as THREE.Mesh
if (!mesh.isMesh || isRenderableMesh(mesh)) return
if (mesh.children.length > 0) {
mesh.geometry = EMPTY_GEOMETRY
} else {
toRemove.push(mesh)
}
})
for (const object of toRemove) {
object.removeFromParent()
}
}
function isRenderableMesh(mesh: THREE.Mesh): boolean {
const position = mesh.geometry?.getAttribute('position')
if (!position || position.count === 0) return false
const material = mesh.material
return Array.isArray(material)
? material.some((m) => m?.visible !== false)
: material?.visible !== false
}
// --- Material conversion -------------------------------------------------
const STANDARD_MAP_SLOTS = [
'map',
'normalMap',
'roughnessMap',
'metalnessMap',
'aoMap',
'emissiveMap',
'alphaMap',
'lightMap',
'displacementMap',
'bumpMap',
] as const
function convertMaterials(root: THREE.Object3D) {
const cache = new Map<THREE.Material, THREE.Material>()
root.traverse((object) => {
const mesh = object as THREE.Mesh
if (!mesh.isMesh) return
const material = mesh.material
if (Array.isArray(material)) {
mesh.material = material.map((m) => convertMaterial(m, cache))
return
}
// glTF has no BackSide — GLTFExporter renders the *front* face for any
// non-DoubleSide material, which inverts a BackSide surface (e.g. the
// ceiling underside, meant to be seen from the room). Flip the mesh winding
// so the intended face shows with the FrontSide material convertMaterial
// produces. Per-mesh geometry clone keeps shared geometry untouched.
if (
(material as { isNodeMaterial?: boolean }).isNodeMaterial &&
material.side === THREE.BackSide
) {
mesh.geometry = flipGeometryWinding(mesh.geometry)
}
mesh.material = convertMaterial(material, cache)
})
}
/**
* Reverse triangle winding and negate normals so a surface authored for
* `BackSide` reads correctly once exported as `FrontSide` (glTF can't express
* back-face-only rendering).
*/
function flipGeometryWinding(geometry: THREE.BufferGeometry): THREE.BufferGeometry {
const flipped = geometry.clone()
const index = flipped.getIndex()
if (index) {
const a = index.array
for (let i = 0; i < a.length; i += 3) {
const tmp = a[i]!
a[i] = a[i + 2]!
a[i + 2] = tmp
}
index.needsUpdate = true
} else {
for (const attribute of Object.values(flipped.attributes)) {
const { array, itemSize } = attribute
for (let i = 0; i < array.length; i += itemSize * 3) {
for (let k = 0; k < itemSize; k++) {
const tmp = array[i + k]!
array[i + k] = array[i + 2 * itemSize + k]!
array[i + 2 * itemSize + k] = tmp
}
}
attribute.needsUpdate = true
}
}
const normal = flipped.getAttribute('normal')
if (normal) {
for (let i = 0; i < normal.array.length; i++) normal.array[i] = -normal.array[i]!
normal.needsUpdate = true
}
return flipped
}
/**
* Convert a viewer NodeMaterial into the classic `MeshStandardMaterial` the
* glTF exporter understands. Classic materials pass through untouched, and the
* cache preserves material sharing (one source instance -> one target), so the
* exporter still dedups shared surfaces.
*/
function convertMaterial(
material: THREE.Material,
cache: Map<THREE.Material, THREE.Material>,
): THREE.Material {
if ((material as { isNodeMaterial?: boolean }).isNodeMaterial !== true) return material
const cached = cache.get(material)
if (cached) return cached
const src = material as THREE.Material & Record<string, unknown>
const target = new THREE.MeshStandardMaterial()
target.name = material.name
if (src.color instanceof THREE.Color) target.color.copy(src.color)
if (src.emissive instanceof THREE.Color) target.emissive.copy(src.emissive)
if (typeof src.emissiveIntensity === 'number') target.emissiveIntensity = src.emissiveIntensity
// Lambert (solid-shading / glass) node materials carry no PBR scalars; a fully
// rough, non-metallic surface is the faithful lit fallback.
target.roughness = typeof src.roughness === 'number' ? src.roughness : 1
target.metalness = typeof src.metalness === 'number' ? src.metalness : 0
// Only genuinely see-through surfaces stay transparent. Several viewer
// materials set `transparent: true` while fully opaque (opacity 1); exporting
// those as alphaMode=BLEND makes them render see-through with no depth write
// (e.g. the ceiling looked semi-transparent). Glass (opacity < 1) is kept.
target.transparent = material.transparent && material.opacity < 1
target.opacity = material.opacity
// BackSide is flipped to FrontSide (with the mesh winding reversed in
// convertMaterials) because glTF has no back-face-only mode.
target.side = material.side === THREE.BackSide ? THREE.FrontSide : material.side
target.alphaTest = material.alphaTest
target.depthWrite = material.depthWrite
target.depthTest = material.depthTest
target.vertexColors = material.vertexColors
target.toneMapped = material.toneMapped
if (src.normalScale instanceof THREE.Vector2) target.normalScale.copy(src.normalScale)
if (typeof src.aoMapIntensity === 'number') target.aoMapIntensity = src.aoMapIntensity
if (typeof src.displacementScale === 'number') target.displacementScale = src.displacementScale
for (const slot of STANDARD_MAP_SLOTS) {
const texture = src[slot]
if (texture instanceof THREE.Texture) {
;(target as unknown as Record<string, THREE.Texture>)[slot] = texture
}
}
cache.set(material, target)
return target
}
// --- Animation clip baking ----------------------------------------------
function bakeAnimationClips(
cloneByOriginal: Map<THREE.Object3D, THREE.Object3D>,
nodes: Record<string, AnyNode>,
): { clips: THREE.AnimationClip[]; clipNamesByNode: Map<string, string[]> } {
const clips: THREE.AnimationClip[] = []
const clipNamesByNode = new Map<string, string[]>()
for (const [id, original] of sceneRegistry.nodes) {
const node = nodes[id]
const target = cloneByOriginal.get(original)
if (!node || !target) continue
const clip =
node.type === 'door'
? bakeDoorClip(id, node, target)
: node.type === 'window'
? bakeWindowClip(id, node as WindowNode, target)
: node.type === 'item'
? bakeItemClip(id, target)
: null
if (clip) {
clips.push(clip)
clipNamesByNode.set(id, [clip.name])
}
}
return { clips, clipNamesByNode }
}
/**
* Re-emit a catalog item's ambient clip (e.g. a fan's spin) onto the baked
* subtree. The source clip targets the item GLB's nodes by name (`lamp_018`);
* since every fan shares those names, we rebind each track to the specific
* cloned node's uuid so multiple fans animate independently. The clip is named
* per node (`<id>: loop`) so the baked viewer can drive each one on its own.
*/
function bakeItemClip(id: string, itemObject: THREE.Object3D): THREE.AnimationClip | null {
const entry = itemClipRegistry.get(id)
if (!entry) return null
const tracks: THREE.KeyframeTrack[] = []
// The catalog node names (e.g. "lamp_018") repeat across every instance of the
// item, and the glTF export→import roundtrip rebinds clip tracks by node name —
// so a shared name would make all fans share one clip. Uniquify the targeted
// node's name per item once, then bind tracks by its (stable) uuid.
const renamed = new Map<string, THREE.Object3D>()
for (const track of entry.clip.tracks) {
const dot = track.name.lastIndexOf('.')
if (dot < 0) continue
const targetName = track.name.slice(0, dot)
const property = track.name.slice(dot + 1)
let targetNode = renamed.get(targetName)
if (!targetNode) {
const found = itemObject.getObjectByName(targetName)
if (!found) continue
found.name = `${id}__${targetName}`
renamed.set(targetName, found)
targetNode = found
}
const retargeted = track.clone()
retargeted.name = `${targetNode.uuid}.${property}`
tracks.push(retargeted)
}
if (tracks.length === 0) return null
const clip = new THREE.AnimationClip(`${id}: loop`, entry.clip.duration, tracks)
clip.userData = { loop: entry.loop }
return clip
}
/**
* Bake a swing door's open motion. Each marked leaf is rotated from closed
* (rest pose) to its fully-open angle and emitted as a 1-second quaternion
* track; the leaf is left at the closed pose so the GLB's rest state is shut.
*/
function bakeDoorClip(
id: string,
node: AnyNode,
doorObject: THREE.Object3D,
): THREE.AnimationClip | null {
const tracks: THREE.KeyframeTrack[] = []
doorObject.traverse((object) => {
const marker = object.userData.pascalSwingLeaf as SwingLeafMarker | undefined
if (!marker || marker.axis !== 'y') return
object.rotation.y = 0
const closed = object.quaternion.clone()
object.rotation.y = marker.openRotationY
const open = object.quaternion.clone()
object.rotation.y = 0
tracks.push(
new THREE.QuaternionKeyframeTrack(
`${object.uuid}.quaternion`,
[0, 1],
[...closed.toArray(), ...open.toArray()],
),
)
})
if (tracks.length === 0) return null
return openClip(id, node, tracks)
}
/**
* Wrap an open motion in a named 1-second clip. The name uses the node's label
* when set (e.g. "Door 1: open") so a glTF player lists readable clips, falling
* back to the id. glTF has no core loop flag — the player decides — so we stamp
* `extras.loop = false` (via the clip's userData, which `GLTFExporter`
* serialises onto the animation): Pascal's `/viewer` and any extras-aware
* consumer play it once and hold the open pose; a dumb glTF player still loops.
* Consumers map a clip back to its node by walking up from a channel's target to
* the nearest ancestor carrying `extras.pascalId`, so the name stays cosmetic.
*/
function openClip(id: string, node: AnyNode, tracks: THREE.KeyframeTrack[]): THREE.AnimationClip {
const clip = new THREE.AnimationClip(`${node.name ?? id}: open`, 1, tracks)
clip.userData = { loop: false }
return clip
}
/**
* Bake a window's open motion generically: snapshot every part's pose closed,
* pose the subtree open, and emit a track for whichever parts actually moved
* (translation for sliding/hung sashes, rotation for casement/awning/louvre).
* Reusing the live `poseWindowMovingParts` keeps one source of truth for window
* kinematics. The subtree is left posed closed as the GLB's rest state.
*/
function bakeWindowClip(
id: string,
node: WindowNode,
windowObject: THREE.Object3D,
): THREE.AnimationClip | null {
poseWindowMovingParts(node, windowObject, 0)
const closedPoses = new Map<
THREE.Object3D,
{ position: THREE.Vector3; quaternion: THREE.Quaternion }
>()
windowObject.traverse((object) => {
closedPoses.set(object, {
position: object.position.clone(),
quaternion: object.quaternion.clone(),
})
})
if (!poseWindowMovingParts(node, windowObject, 1)) return null
const tracks: THREE.KeyframeTrack[] = []
windowObject.traverse((object) => {
const closed = closedPoses.get(object)
if (!closed) return
if (object.position.distanceToSquared(closed.position) > POSE_EPSILON) {
tracks.push(
new THREE.VectorKeyframeTrack(
`${object.uuid}.position`,
[0, 1],
[...closed.position.toArray(), ...object.position.toArray()],
),
)
}
if (closed.quaternion.angleTo(object.quaternion) > POSE_EPSILON) {
tracks.push(
new THREE.QuaternionKeyframeTrack(
`${object.uuid}.quaternion`,
[0, 1],
[...closed.quaternion.toArray(), ...object.quaternion.toArray()],
),
)
}
})
poseWindowMovingParts(node, windowObject, 0)
if (tracks.length === 0) return null
return openClip(id, node, tracks)
}
// --- Identity stamping ---------------------------------------------------
/**
* Replace every clone's userData with `{}`, then stamp identity onto the nodes
* that `sceneRegistry` tracks. Wiping first guarantees no editor/runtime marker
* (e.g. `pascalSwingLeaf`, cached-material flags) leaks into glTF extras — the
* file describes itself with exactly the fields a consumer needs.
*/
/**
* Human-readable label for a baked node, mirroring the viewer's `getNodeName`:
* an explicit name wins, items fall back to their catalog asset name, other
* kinds to a capitalized type. Levels override this with their display name.
*/
function nodeDisplayLabel(node: AnyNode): string {
if (node.name) return node.name
switch (node.type) {
case 'item':
return (node as { asset?: { name?: string } }).asset?.name || 'Item'
case 'wall':
return 'Wall'
case 'door':
return 'Door'
case 'window':
return 'Window'
case 'slab':
return 'Slab'
case 'ceiling':
return 'Ceiling'
case 'roof':
return 'Roof'
case 'fence':
return 'Fence'
case 'column':
return 'Column'
case 'stair':
return 'Stairs'
default:
return node.type
}
}
function stampIdentity(
scene: THREE.Object3D,
cloneByOriginal: Map<THREE.Object3D, THREE.Object3D>,
nodes: Record<string, AnyNode>,
clipNamesByNode: Map<string, string[]>,
) {
scene.traverse((object) => {
object.userData = {}
})
for (const [id, original] of sceneRegistry.nodes) {
const node = nodes[id]
const target = cloneByOriginal.get(original)
if (!node || !target) continue
target.name = id
const extras: Record<string, unknown> = { pascalId: id, kind: node.type }
// Stamp a human label for every node (catalog name for items, a type label
// otherwise) so the viewer breadcrumb/hover read names, not raw pascalIds.
extras.label = nodeDisplayLabel(node)
// Camera bookmarks ride on the identity node (any kind can carry one) so the
// baked viewer flies to a saved pose on selection without a side file.
if (node.camera) extras.camera = node.camera
// Levels carry no stored name; stamp the editor's display name ("Level 1")
// so the baked viewer's level/breadcrumb UI reads the same labels. Force the
// node visible: the bake must capture every floor regardless of the editor's
// current level mode (solo/hidden floors would otherwise be dropped by
// GLTFExporter's `onlyVisible`).
if (node.type === 'level') {
extras.label = getLevelDisplayName(node as LevelNode)
target.visible = true
}
// Only doors/windows that actually baked an open clip are openable. A cased
// opening (no leaf) or a fixed window (no operable sash) produces no clip, so
// it stays unflagged — the file never claims a part opens when nothing moves.
if (node.type === 'door' || node.type === 'window') {
const clipNames = clipNamesByNode.get(id)
if (clipNames?.length) {
extras.openable = true
extras.clips = clipNames
}
}
// Items with a baked ambient clip (a fan's spin) carry the clip name but no
// `openable` flag — nothing opens; the clip just loops.
if (node.type === 'item') {
const clipNames = clipNamesByNode.get(id)
if (clipNames?.length) extras.clips = clipNames
}
if (node.type === 'zone') {
// Zone fills are stripped from the bake; /viewer rebuilds the room from
// this polygon. Force the identity node visible so GLTFExporter's
// `onlyVisible` keeps it even when the editor had zones hidden at export.
const zone = node as ZoneNode
extras.polygon = zone.polygon
extras.color = zone.color
target.visible = true
}
if (node.type === 'spawn') {
// The spawn marker's visible mesh lives on a non-scene overlay layer (and
// is pruned), so this identity node is an empty transform. Keep it + force
// visible so the baked walkthrough can read its world position/yaw and
// start the player there (`extras.rotation` mirrors the node's yaw).
extras.rotation = (node as { rotation?: number }).rotation ?? 0
target.visible = true
}
target.userData = extras
}
}
packages/editor/src/lib/sfx-bus.ts
+2
View File
@@ -10,6 +10,7 @@ type SFXEvents = {
'sfx:item-pick': undefined
'sfx:item-place': undefined
'sfx:item-rotate': undefined
'sfx:resize': undefined
'sfx:structure-build-start': undefined
'sfx:structure-build': undefined
'sfx:structure-delete': undefined
@@ -40,6 +41,7 @@ export function initSFXBus() {
sfxEmitter.on('sfx:item-pick', () => playSFX('itemPick'))
sfxEmitter.on('sfx:item-place', () => playSFX('itemPlace'))
sfxEmitter.on('sfx:item-rotate', () => playSFX('itemRotate'))
sfxEmitter.on('sfx:resize', () => playSFX('resize'))
sfxEmitter.on('sfx:structure-build-start', () => playSFX('structureBuildStart'))
sfxEmitter.on('sfx:structure-build', () => playSFX('structureBuildEnd'))
sfxEmitter.on('sfx:structure-delete', () => playSFX('structureDelete'))
packages/editor/src/lib/sfx-player.ts
+10
View File
@@ -59,6 +59,16 @@ export const SFX: Record<string, SFXConfig> = {
volumeRange: [0.92, 1.0],
panJitter: 0.15,
},
// Ticks as a resize handle is dragged across snap steps. Fires in rapid
// succession, so it mirrors gridSnap: three variations cycled round-robin
// with pitch/pan jitter and a gap so the run reads as texture, not a tone.
resize: {
src: ['/audios/sfx/resize_0.mp3', '/audios/sfx/resize_1.mp3', '/audios/sfx/resize_2.mp3'],
rateRange: [0.98, 1.02],
volumeRange: [0.26, 0.34],
panJitter: 0.15,
minIntervalMs: 80,
},
// Fired when a structure draft begins (first click of a wall/slab/etc).
structureBuildStart: {
src: '/audios/sfx/structure_build_start.mp3',
packages/ifc-converter/package.json
+1 -1
View File
@@ -18,7 +18,7 @@
],
"scripts": {
"build": "tsc --build",
"dev": "tsc --build --watch",
"dev": "tsgo --build --watch",
"prepublishOnly": "npm run build"
},
"dependencies": {
packages/mcp/package.json
+1 -1
View File
@@ -48,7 +48,7 @@
],
"scripts": {
"build": "tsc --build",
"dev": "tsc --build --watch",
"dev": "tsgo --build --watch",
"start": "bun dist/bin/pascal-mcp.js",
"test": "bun test",
"smoke": "bun run scripts/smoke.ts",
packages/nodes/package.json
+1 -1
View File
@@ -18,7 +18,7 @@
],
"scripts": {
"build": "tsc --build",
"dev": "tsc --build --watch",
"dev": "tsgo --build --watch",
"test": "bun test",
"prepublishOnly": "bun run build && bun test"
},
packages/nodes/src/box-vent/move-tool.tsx
+30 -2
View File
@@ -5,6 +5,7 @@ import {
type BoxVentNode,
emitter,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
sceneRegistry,
useScene,
@@ -21,8 +22,14 @@ import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
roofSegmentLocalToBuildingLocal,
snapRelativeRoofDragTarget,
} from '../shared/relative-roof-drag'
import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface'
import {
clearRoofSurfacePlacementGuides,
publishRoofSurfaceNodePlacementGuides,
snapRoofSurfaceNodeTarget,
} from '../shared/roof-surface-placement-guides'
import BoxVentPreview from './preview'
/**
@@ -72,10 +79,21 @@ export default function MoveBoxVentTool({ node }: { node: BoxVentNode }) {
lastSnap = null
setPreviewPos(null)
setPreviewSurfaceQuat(null)
clearRoofSurfacePlacementGuides()
}
const resolveSnappedTarget = (event: RoofEvent): RelativeRoofDragTarget | null => {
const rawTarget = roofDrag.resolve(event)
if (!rawTarget) return null
return snapRoofSurfaceNodeTarget({
target: snapRelativeRoofDragTarget(rawTarget, event.nativeEvent?.shiftKey === true),
node,
bypass: event.nativeEvent?.shiftKey === true,
})
}
const updatePreview = (event: RoofEvent) => {
const target = roofDrag.resolve(event)
const target = resolveSnappedTarget(event)
if (!target) {
clearTarget()
return
@@ -102,12 +120,18 @@ export default function MoveBoxVentTool({ node }: { node: BoxVentNode }) {
target.localZ,
]),
)
publishRoofSurfaceNodePlacementGuides({
roof: event.node as RoofNode,
segment: target.segment,
center: [target.localX, target.localY, target.localZ],
node,
})
event.stopPropagation()
}
const onRoofClick = (event: RoofEvent) => {
if (committed) return
const target = lastTarget ?? roofDrag.resolve(event)
const target = lastTarget ?? resolveSnappedTarget(event)
if (!target) return
committed = true
const targetSegmentId = target.segment.id as AnyNodeId
@@ -152,6 +176,7 @@ export default function MoveBoxVentTool({ node }: { node: BoxVentNode }) {
if (obj) obj.visible = true
triggerSFX('sfx:item-place')
clearRoofSurfacePlacementGuides()
exitMoveMode()
event.stopPropagation()
}
@@ -172,6 +197,7 @@ export default function MoveBoxVentTool({ node }: { node: BoxVentNode }) {
useScene.getState().deleteNode(node.id as AnyNodeId)
useScene.temporal.getState().resume()
markToolCancelConsumed()
clearRoofSurfacePlacementGuides()
exitMoveMode()
return
}
@@ -191,6 +217,7 @@ export default function MoveBoxVentTool({ node }: { node: BoxVentNode }) {
useScene.temporal.getState().resume()
markToolCancelConsumed()
clearRoofSurfacePlacementGuides()
exitMoveMode()
}
@@ -223,6 +250,7 @@ export default function MoveBoxVentTool({ node }: { node: BoxVentNode }) {
// the original mesh visible rather than stranded invisible.
const obj = sceneRegistry.nodes.get(node.id)
if (obj) obj.visible = true
clearRoofSurfacePlacementGuides()
useScene.temporal.getState().resume()
}
}, [exitMoveMode, node])
packages/nodes/src/box-vent/tool.tsx
+18 -1
View File
@@ -16,6 +16,11 @@ import * as THREE from 'three'
import { RoofAttachmentFallbackPreview } from '../shared/roof-attachment-fallback-preview'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import { getAnalyticalNormal, getDownSlopeYaw, surfaceQuatFromNormal } from '../shared/roof-surface'
import {
clearRoofSurfacePlacementGuides,
publishRoofSurfacePlacementGuides,
roofSurfaceFootprintFromNode,
} from '../shared/roof-surface-placement-guides'
import { boxVentDefinition } from './definition'
import BoxVentPreview from './preview'
@@ -85,6 +90,15 @@ const BoxVentTool = () => {
setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0))
setPreviewRotation(getDownSlopeYaw(hit.localX, hit.localZ, hit.segment))
setPreviewPos(worldToBuildingLocal(wx, wy, wz))
publishRoofSurfacePlacementGuides({
roof: event.node as RoofNode,
segment: hit.segment,
center: [hit.localX, hit.localY, hit.localZ],
footprint: roofSurfaceFootprintFromNode({
...previewNode,
rotation: getDownSlopeYaw(hit.localX, hit.localZ, hit.segment),
}),
})
event.stopPropagation()
}
@@ -109,6 +123,7 @@ const BoxVentTool = () => {
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
setSelection({ selectedIds: [vent.id] })
triggerSFX('sfx:item-place')
clearRoofSurfacePlacementGuides()
event.stopPropagation()
}
@@ -120,8 +135,9 @@ const BoxVentTool = () => {
emitter.off('roof:move', updatePreview)
emitter.off('roof:enter', updatePreview)
emitter.off('roof:click', onClick)
clearRoofSurfacePlacementGuides()
}
}, [activeBuildingId, setSelection])
}, [activeBuildingId, setSelection, previewNode])
return (
<>
@@ -131,6 +147,7 @@ const BoxVentTool = () => {
onInvalidTarget={() => {
setPreviewPos(null)
setPreviewSurfaceQuat(null)
clearRoofSurfacePlacementGuides()
}}
/>
{activeBuildingId && previewPos && previewSurfaceQuat && (
packages/nodes/src/chimney/move-tool.tsx
+153 -21
View File
@@ -10,11 +10,25 @@ import {
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { consumePlacementDragRelease, triggerSFX, useEditor } from '@pascal-app/editor'
import {
consumePlacementDragRelease,
markToolCancelConsumed,
triggerSFX,
useEditor,
} from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useRef, useState } from 'react'
import * as THREE from 'three'
import { createRelativeRoofDrag, type RelativeRoofDragTarget } from '../shared/relative-roof-drag'
import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
snapRelativeRoofDragTarget,
} from '../shared/relative-roof-drag'
import {
clearRoofSurfacePlacementGuides,
publishRoofSurfaceNodePlacementGuides,
snapRoofSurfaceNodeTarget,
} from '../shared/roof-surface-placement-guides'
import ChimneyPreview from './preview'
const tmpMatrix = new THREE.Matrix4()
@@ -67,6 +81,25 @@ const MoveChimneyTool = ({ node }: { node: ChimneyNode }) => {
useEffect(() => {
if (!activeBuildingId) return
useScene.temporal.getState().pause()
const original = {
position: [...node.position] as [number, number, number],
rotation: node.rotation ?? 0,
roofSegmentId: node.roofSegmentId,
parentId: node.parentId,
metadata: node.metadata,
}
const meta =
node.metadata && typeof node.metadata === 'object' && !Array.isArray(node.metadata)
? (node.metadata as Record<string, unknown>)
: {}
const isNew = !!meta.isNew
if (node.id) {
const chimneyObj = sceneRegistry.nodes.get(node.id)
if (chimneyObj) chimneyObj.visible = false
}
const computeSegmentXform = (segmentId: string): SegmentTransform | null => {
const buildingObj = sceneRegistry.nodes.get(activeBuildingId as AnyNodeId)
@@ -84,25 +117,33 @@ const MoveChimneyTool = ({ node }: { node: ChimneyNode }) => {
}
let lastTarget: RelativeRoofDragTarget | null = null
let committed = false
const roofDrag = createRelativeRoofDrag({
position: [...node.position] as [number, number, number],
roofSegmentId: node.roofSegmentId,
position: original.position,
roofSegmentId: original.roofSegmentId,
})
const resolveSnappedTarget = (event: RoofEvent): RelativeRoofDragTarget | null => {
const rawTarget = roofDrag.resolve(event)
if (!rawTarget) return null
return snapRoofSurfaceNodeTarget({
target: snapRelativeRoofDragTarget(rawTarget, event.nativeEvent?.shiftKey === true),
node,
bypass: event.nativeEvent?.shiftKey === true,
})
}
const clearTarget = () => {
lastTarget = null
setSegmentXform(null)
setHitLocal(null)
setPreviewSegment(null)
clearRoofSurfacePlacementGuides()
}
const updatePreview = (event: RoofEvent) => {
const target = roofDrag.resolve(event)
if (!target) {
clearTarget()
return
}
lastTarget = target
const target = resolveSnappedTarget(event)
if (!target) return clearTarget()
const sx = Math.round(target.localX * 20) / 20
const sz = Math.round(target.localZ * 20) / 20
@@ -113,26 +154,32 @@ const MoveChimneyTool = ({ node }: { node: ChimneyNode }) => {
}
const xform = computeSegmentXform(target.segment.id)
if (!xform) return
if (!xform) return clearTarget()
lastTarget = target
setSegmentXform(xform)
setHitLocal([target.localX, target.localY, target.localZ])
setPreviewSegment(target.segment)
publishRoofSurfaceNodePlacementGuides({
roof: event.node,
segment: target.segment,
center: [target.localX, target.localY, target.localZ],
node,
})
event.stopPropagation()
}
const onClick = (event: RoofEvent) => {
const target = lastTarget ?? roofDrag.resolve(event)
if (committed) return
const target = lastTarget ?? resolveSnappedTarget(event)
if (!target) return
committed = true
const state = useScene.getState()
// Strip the `isNew` flag — only used to mark a duplicate clone
// that hasn't been committed yet.
const meta =
node.metadata && typeof node.metadata === 'object' && !Array.isArray(node.metadata)
? (node.metadata as Record<string, unknown>)
: {}
const { isNew, ...restMeta } = meta as { isNew?: boolean }
const cleanedMeta = Object.keys(restMeta).length > 0 ? restMeta : undefined
const targetSegmentId = target.segment.id as AnyNodeId
// Duplicate (clone with no committed id yet) → create a fresh
// chimney parented to the hit segment. Plain move (existing id,
@@ -143,29 +190,105 @@ const MoveChimneyTool = ({ node }: { node: ChimneyNode }) => {
...node,
id: undefined as never,
roofSegmentId: target.segment.id,
parentId: target.segment.id,
position: [target.localX, target.localY, target.localZ],
visible: true,
metadata: cleanedMeta,
})
state.createNode(committed, target.segment.id as AnyNodeId)
state.dirtyNodes.add(target.segment.id as AnyNodeId)
useScene.temporal.getState().resume()
state.applyNodeChanges({
delete: node.id ? [node.id as AnyNodeId] : [],
create: [{ node: committed, parentId: targetSegmentId }],
})
state.dirtyNodes.add(targetSegmentId)
setSelection({ selectedIds: [committed.id] })
useScene.temporal.getState().pause()
} else {
const prevSegmentId = node.roofSegmentId as AnyNodeId | undefined
const prevSegmentId = original.roofSegmentId as AnyNodeId | undefined
const reparenting = Boolean(prevSegmentId && prevSegmentId !== targetSegmentId)
// Resume BEFORE any scene edits so the reparent (both segments'
// children arrays + the chimney's own host/position update) lands as
// one tracked transaction. Otherwise undo reverts the chimney but
// leaves the children arrays inconsistent with its parentId.
useScene.temporal.getState().resume()
if (reparenting) {
const oldSeg = state.nodes[prevSegmentId!] as RoofSegmentNode | undefined
if (oldSeg) {
state.updateNode(prevSegmentId!, {
children: (oldSeg.children ?? []).filter((id) => id !== node.id),
})
}
const newSeg = state.nodes[targetSegmentId] as RoofSegmentNode | undefined
if (newSeg && !(newSeg.children ?? []).includes(node.id)) {
state.updateNode(targetSegmentId, {
children: [...(newSeg.children ?? []), node.id],
})
}
state.dirtyNodes.add(prevSegmentId!)
}
state.updateNode(node.id as AnyNodeId, {
roofSegmentId: target.segment.id,
parentId: target.segment.id,
position: [target.localX, target.localY, target.localZ],
rotation: original.rotation,
visible: true,
metadata: cleanedMeta,
})
if (prevSegmentId) state.dirtyNodes.add(prevSegmentId)
state.dirtyNodes.add(target.segment.id as AnyNodeId)
useScene.temporal.getState().pause()
state.dirtyNodes.add(targetSegmentId)
state.dirtyNodes.add(node.id as AnyNodeId)
setSelection({ selectedIds: [node.id] })
}
const obj = node.id && !isNew ? sceneRegistry.nodes.get(node.id) : null
if (obj) obj.visible = true
clearRoofSurfacePlacementGuides()
setMovingNode(null)
triggerSFX('sfx:item-place')
event.stopPropagation()
}
const onCancel = () => {
if (isNew) {
if (node.id) {
const parentId = original.roofSegmentId as AnyNodeId | undefined
if (parentId) {
const parent = useScene.getState().nodes[parentId] as RoofSegmentNode | undefined
if (parent) {
useScene.getState().updateNode(parentId, {
children: (parent.children ?? []).filter((id) => id !== node.id),
})
}
}
useScene.getState().deleteNode(node.id as AnyNodeId)
}
useScene.temporal.getState().resume()
markToolCancelConsumed()
clearRoofSurfacePlacementGuides()
setMovingNode(null)
return
}
if (node.id) {
useScene.getState().updateNode(node.id as AnyNodeId, {
position: original.position,
rotation: original.rotation,
roofSegmentId: original.roofSegmentId as AnyNodeId | undefined,
parentId: original.parentId as AnyNodeId | undefined,
metadata: original.metadata,
})
if (original.roofSegmentId) {
useScene.getState().dirtyNodes.add(original.roofSegmentId as AnyNodeId)
}
const obj = sceneRegistry.nodes.get(node.id)
if (obj) obj.visible = true
}
useScene.temporal.getState().resume()
markToolCancelConsumed()
clearRoofSurfacePlacementGuides()
setMovingNode(null)
}
const onPlacementDragPointerUp = (event: PointerEvent) => {
if (!consumePlacementDragRelease(event)) return
if (!lastTarget) return
@@ -179,6 +302,7 @@ const MoveChimneyTool = ({ node }: { node: ChimneyNode }) => {
emitter.on('roof:enter', updatePreview)
emitter.on('roof:click', onClick)
emitter.on('roof:leave', clearTarget)
emitter.on('tool:cancel', onCancel)
window.addEventListener('pointerup', onPlacementDragPointerUp)
return () => {
@@ -186,7 +310,15 @@ const MoveChimneyTool = ({ node }: { node: ChimneyNode }) => {
emitter.off('roof:enter', updatePreview)
emitter.off('roof:click', onClick)
emitter.off('roof:leave', clearTarget)
emitter.off('tool:cancel', onCancel)
window.removeEventListener('pointerup', onPlacementDragPointerUp)
if (node.id) {
const obj = sceneRegistry.nodes.get(node.id)
if (obj) obj.visible = true
}
clearRoofSurfacePlacementGuides()
useScene.temporal.getState().resume()
}
}, [activeBuildingId, node, setMovingNode, setSelection])
packages/nodes/src/chimney/tool.tsx
+15 -1
View File
@@ -16,6 +16,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import * as THREE from 'three'
import { RoofAttachmentFallbackPreview } from '../shared/roof-attachment-fallback-preview'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import {
clearRoofSurfacePlacementGuides,
publishRoofSurfacePlacementGuides,
roofSurfaceFootprintFromNode,
} from '../shared/roof-surface-placement-guides'
import { chimneyDefinition } from './definition'
import ChimneyPreview from './preview'
@@ -102,6 +107,12 @@ const ChimneyTool = () => {
setSegmentXform(xform)
setHitLocal([hit.localX, hit.localY, hit.localZ])
setPreviewSegment(hit.segment)
publishRoofSurfacePlacementGuides({
roof: event.node as RoofNode,
segment: hit.segment,
center: [hit.localX, hit.localY, hit.localZ],
footprint: roofSurfaceFootprintFromNode(previewNode, { segment: hit.segment }),
})
event.stopPropagation()
}
@@ -126,6 +137,7 @@ const ChimneyTool = () => {
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
setSelection({ selectedIds: [chimney.id] })
triggerSFX('sfx:item-place')
clearRoofSurfacePlacementGuides()
event.stopPropagation()
}
@@ -137,8 +149,9 @@ const ChimneyTool = () => {
emitter.off('roof:move', updatePreview)
emitter.off('roof:enter', updatePreview)
emitter.off('roof:click', onClick)
clearRoofSurfacePlacementGuides()
}
}, [activeBuildingId, setSelection])
}, [activeBuildingId, setSelection, previewNode])
return (
<>
@@ -149,6 +162,7 @@ const ChimneyTool = () => {
setSegmentXform(null)
setHitLocal(null)
setPreviewSegment(null)
clearRoofSurfacePlacementGuides()
}}
/>
{activeBuildingId && segmentXform && hitLocal && previewSegment && (
packages/nodes/src/column/renderer.tsx
+1 -12
View File
@@ -2404,18 +2404,7 @@ export const ColumnRenderer = ({ node: rawNode }: { node: ColumnNode }) => {
textures,
colorPreset,
}),
[
shading,
textures,
colorPreset,
node.material,
node.material?.preset,
node.material?.properties,
node.material?.texture,
node.materialPreset,
node.slots,
sceneMaterials,
],
[shading, textures, colorPreset, node, sceneMaterials],
)
useRegistry(node.id, node.type, ref)
packages/nodes/src/cupola/move-tool.tsx
+30 -2
View File
@@ -5,6 +5,7 @@ import {
type CupolaNode,
emitter,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
sceneRegistry,
useScene,
@@ -21,8 +22,14 @@ import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
roofSegmentLocalToBuildingLocal,
snapRelativeRoofDragTarget,
} from '../shared/relative-roof-drag'
import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface'
import {
clearRoofSurfacePlacementGuides,
publishRoofSurfaceNodePlacementGuides,
snapRoofSurfaceNodeTarget,
} from '../shared/roof-surface-placement-guides'
import CupolaPreview from './preview'
/**
@@ -70,10 +77,21 @@ export default function MoveCupolaTool({ node }: { node: CupolaNode }) {
lastSnap = null
setPreviewPos(null)
setPreviewSurfaceQuat(null)
clearRoofSurfacePlacementGuides()
}
const resolveSnappedTarget = (event: RoofEvent): RelativeRoofDragTarget | null => {
const rawTarget = roofDrag.resolve(event)
if (!rawTarget) return null
return snapRoofSurfaceNodeTarget({
target: snapRelativeRoofDragTarget(rawTarget, event.nativeEvent?.shiftKey === true),
node,
bypass: event.nativeEvent?.shiftKey === true,
})
}
const updatePreview = (event: RoofEvent) => {
const target = roofDrag.resolve(event)
const target = resolveSnappedTarget(event)
if (!target) {
clearTarget()
return
@@ -100,12 +118,18 @@ export default function MoveCupolaTool({ node }: { node: CupolaNode }) {
target.localZ,
]),
)
publishRoofSurfaceNodePlacementGuides({
roof: event.node as RoofNode,
segment: target.segment,
center: [target.localX, target.localY, target.localZ],
node,
})
event.stopPropagation()
}
const onRoofClick = (event: RoofEvent) => {
if (committed) return
const target = lastTarget ?? roofDrag.resolve(event)
const target = lastTarget ?? resolveSnappedTarget(event)
if (!target) return
committed = true
const targetSegmentId = target.segment.id as AnyNodeId
@@ -146,6 +170,7 @@ export default function MoveCupolaTool({ node }: { node: CupolaNode }) {
if (obj) obj.visible = true
triggerSFX('sfx:item-place')
clearRoofSurfacePlacementGuides()
exitMoveMode()
event.stopPropagation()
}
@@ -164,6 +189,7 @@ export default function MoveCupolaTool({ node }: { node: CupolaNode }) {
useScene.getState().deleteNode(node.id as AnyNodeId)
useScene.temporal.getState().resume()
markToolCancelConsumed()
clearRoofSurfacePlacementGuides()
exitMoveMode()
return
}
@@ -183,6 +209,7 @@ export default function MoveCupolaTool({ node }: { node: CupolaNode }) {
useScene.temporal.getState().resume()
markToolCancelConsumed()
clearRoofSurfacePlacementGuides()
exitMoveMode()
}
@@ -212,6 +239,7 @@ export default function MoveCupolaTool({ node }: { node: CupolaNode }) {
const obj = sceneRegistry.nodes.get(node.id)
if (obj) obj.visible = true
clearRoofSurfacePlacementGuides()
useScene.temporal.getState().resume()
}
}, [exitMoveMode, node])
packages/nodes/src/cupola/tool.tsx
+15 -1
View File
@@ -16,6 +16,11 @@ import * as THREE from 'three'
import { RoofAttachmentFallbackPreview } from '../shared/roof-attachment-fallback-preview'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface'
import {
clearRoofSurfacePlacementGuides,
publishRoofSurfacePlacementGuides,
roofSurfaceFootprintFromNode,
} from '../shared/roof-surface-placement-guides'
import { cupolaDefinition } from './definition'
import CupolaPreview from './preview'
@@ -77,6 +82,12 @@ const CupolaTool = () => {
setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion()))
setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0))
setPreviewPos(worldToBuildingLocal(wx, wy, wz))
publishRoofSurfacePlacementGuides({
roof: event.node as RoofNode,
segment: hit.segment,
center: [hit.localX, hit.localY, hit.localZ],
footprint: roofSurfaceFootprintFromNode(previewNode),
})
event.stopPropagation()
}
@@ -101,6 +112,7 @@ const CupolaTool = () => {
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
setSelection({ selectedIds: [cupola.id] })
triggerSFX('sfx:item-place')
clearRoofSurfacePlacementGuides()
event.stopPropagation()
}
@@ -112,8 +124,9 @@ const CupolaTool = () => {
emitter.off('roof:move', updatePreview)
emitter.off('roof:enter', updatePreview)
emitter.off('roof:click', onClick)
clearRoofSurfacePlacementGuides()
}
}, [activeBuildingId, setSelection])
}, [activeBuildingId, setSelection, previewNode])
return (
<>
@@ -123,6 +136,7 @@ const CupolaTool = () => {
onInvalidTarget={() => {
setPreviewPos(null)
setPreviewSurfaceQuat(null)
clearRoofSurfacePlacementGuides()
}}
/>
{activeBuildingId && previewPos && previewSurfaceQuat && (
packages/nodes/src/door/preview.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ const DoorPreview = ({
const m = buildDoorPreviewMesh(node)
m.layers.set(EDITOR_LAYER)
return m
}, [node.width, node.height, node.frameDepth, node.openingShape, node.doorType, node.leafCount])
}, [node])
// Ghost treatment (clone + tint + raycast-off) re-applies if the tint flips;
// its cleanup only disposes the clones it made.
packages/nodes/src/dormer/__tests__/schema.test.ts
+1 -1
View File
@@ -12,7 +12,7 @@ describe('DormerNode schema', () => {
expect(parsed.height).toBe(0)
expect(parsed.roofType).toBe('gable')
expect(parsed.windowShape).toBe('rectangle')
expect(parsed.windowSill).toBe(true)
expect(parsed.windowSill).toBe(false)
})
test('windowColumns / windowRows clamped to [1, 8]', () => {
packages/nodes/src/dormer/definition.ts
+67 -10
View File
@@ -33,6 +33,9 @@ const MAX_SKIRT = 6
const WINDOW_SIDE_HANDLE_OFFSET = 0.15
const WINDOW_HEIGHT_HANDLE_OFFSET = 0.15
const WINDOW_FACE_Z_OFFSET = 0.05
// The four window-edge arrows latch behind a cube at the window center;
// they stay hidden until the user clicks that cube to open the group.
const WINDOW_LATCH_GROUP = 'dormer-window'
// Lower clamp for window dims matches the geometry's internal clamp
// in `getDormerSkirtWindowDims` (0.1m). Upper clamps depend on the
// dormer dimensions and are resolved per-handle via the function form
@@ -109,21 +112,43 @@ function dormerWidthHandle(side: 'left' | 'right'): HandleDescriptor<DormerNodeT
}
}
// Depth arrow on the +Z side. Symmetric (anchor 'center') to match
// chimney's known-working handle count — splitting depth into asymmetric
// front + back chevrons puts the dormer over the per-node MRT/TSL
// budget that chimney already documents (see `chimneyHandles` factory).
// Re-evaluate the split once that pipeline issue is pinned down.
function dormerDepthHandle(): HandleDescriptor<DormerNodeType> {
// Depth arrow on the +Z (front) or -Z (back) side. Asymmetric resize:
// dragging one arrow grows the dormer outward from its own edge while
// the opposite edge stays world-fixed in segment frame — same pattern
// as `dormerWidthHandle`, just on the Z axis. `apply` recomputes
// `position` so the anchored edge stays at the same segment-local point
// even when the dormer is Y-rotated: project the dormer's local +Z onto
// segment frame via (sin r, cos r), find the anchored edge's segment-
// local XZ from the pre-drag node, then place the new center half a new-
// depth away from that anchor in the same direction.
function dormerDepthHandle(side: 'front' | 'back'): HandleDescriptor<DormerNodeType> {
const sign = side === 'front' ? 1 : -1
return {
kind: 'linear-resize',
axis: 'z',
anchor: 'center',
// 'min' = -Z edge anchored (front arrow grows the +Z edge outward).
// 'max' = +Z edge anchored (back arrow grows the -Z edge outward).
anchor: side === 'front' ? 'min' : 'max',
min: MIN_DIM,
currentValue: (n) => n.depth,
apply: (_n, newValue) => ({ depth: newValue }),
apply: (initial, newDepth) => {
const rotY = initial.rotation ?? 0
const armX = Math.sin(rotY)
const armZ = Math.cos(rotY)
const anchorX = initial.position[0] - sign * (initial.depth / 2) * armX
const anchorZ = initial.position[2] - sign * (initial.depth / 2) * armZ
const newCenterX = anchorX + sign * (newDepth / 2) * armX
const newCenterZ = anchorZ + sign * (newDepth / 2) * armZ
return {
depth: newDepth,
position: [newCenterX, initial.position[1], newCenterZ],
}
},
placement: {
position: (n) => [0, getBodyMidY(n), n.depth / 2 + SIDE_HANDLE_OFFSET],
position: (n) => [0, getBodyMidY(n), sign * (n.depth / 2 + SIDE_HANDLE_OFFSET)],
// The renderer auto-yaws axis-'z' chevrons by -π/2 so the default
// points +Z (front). Flip the back chevron 180° to point -Z.
rotationY: () => (side === 'front' ? 0 : Math.PI),
},
}
}
@@ -273,6 +298,11 @@ function dormerWindowWidthHandle(side: 'left' | 'right'): HandleDescriptor<Dorme
return {
kind: 'linear-resize',
axis: 'x',
// Stand the blade up into the gable face so it reads flat-on like the
// top/bottom window-height arrows instead of edge-on.
faceNormal: true,
// Hidden until the user clicks the window-center latch cube.
latchGroup: WINDOW_LATCH_GROUP,
anchor: side === 'right' ? 'min' : 'max',
min: MIN_WINDOW_DIM,
// Cap at the dormer's window field — keep a 0.1m gap on each side
@@ -317,6 +347,8 @@ function dormerWindowHeightHandle(side: 'top' | 'bottom'): HandleDescriptor<Dorm
return {
kind: 'linear-resize',
axis: 'y',
// Hidden until the user clicks the window-center latch cube.
latchGroup: WINDOW_LATCH_GROUP,
// 'min' = bottom edge anchored (top arrow grows the top edge up).
// 'max' = top edge anchored (bottom arrow drops the bottom edge).
anchor: side === 'top' ? 'min' : 'max',
@@ -350,12 +382,37 @@ function dormerWindowHeightHandle(side: 'top' | 'bottom'): HandleDescriptor<Dorm
}
}
// Window-center latch cube. Sits at the window center on the exposed
// gable face; clicking it reveals / hides the four window edge arrows
// (width L/R + height top/bottom) tagged with `WINDOW_LATCH_GROUP`.
// Mirrors the duct-fitting selection cube but driven by the shared
// latch descriptor so the dense window cluster stays collapsed behind
// one grip until the user opts in.
function dormerWindowLatchHandle(): HandleDescriptor<DormerNodeType> {
return {
kind: 'latch',
group: WINDOW_LATCH_GROUP,
placement: {
position: (n, sceneApi) => {
const faceSign = getExposedFaceZSign(n, sceneApi)
return [
n.windowOffsetX,
getWindowCenterY(n),
faceSign * (n.depth / 2 + WINDOW_FACE_Z_OFFSET),
]
},
},
}
}
const dormerHandles: HandleDescriptor<DormerNodeType>[] = [
dormerWidthHandle('right'),
dormerWidthHandle('left'),
dormerDepthHandle(),
dormerDepthHandle('front'),
dormerDepthHandle('back'),
dormerWallHeightHandle(),
dormerRotateHandle(),
dormerWindowLatchHandle(),
dormerWindowWidthHandle('right'),
dormerWindowWidthHandle('left'),
dormerWindowHeightHandle('top'),
packages/nodes/src/dormer/move-tool.tsx
+81 -69
View File
@@ -11,6 +11,7 @@ import {
import { useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo } from 'react'
import { DormerPlacementGuides } from './placement-guides'
import DormerPreview from './preview'
import { useDormerPlacement } from './use-dormer-placement'
@@ -74,84 +75,95 @@ const MoveDormerTool = ({ node }: { node: DormerNode }) => {
}
}, [node.id, isNew])
const { activeBuildingId, segmentXform, hitLocal, ghostRotation } = useDormerPlacement({
initialRotation: originalRotation,
relativeStart: {
position: [...node.position] as [number, number, number],
roofSegmentId: node.roofSegmentId,
},
onCommit: (hit, rotation) => {
const state = useScene.getState()
const { activeBuildingId, segmentXform, hitSegment, hitLocal, ghostRotation } =
useDormerPlacement({
initialRotation: originalRotation,
relativeStart: {
position: [...node.position] as [number, number, number],
roofSegmentId: node.roofSegmentId,
},
onCommit: (hit, rotation) => {
const state = useScene.getState()
// Strip the `isNew` / `isTransient` flags — only used to mark a
// clone or in-flight move that hasn't been committed yet.
const cleanedMeta = (() => {
const m =
node.metadata && typeof node.metadata === 'object' && !Array.isArray(node.metadata)
? (node.metadata as Record<string, unknown>)
: {}
const {
isNew: _isNew,
isTransient: _isTransient,
...rest
} = m as {
isNew?: boolean
isTransient?: boolean
}
return Object.keys(rest).length > 0 ? rest : undefined
})()
// Strip the `isNew` / `isTransient` flags — only used to mark a
// clone or in-flight move that hasn't been committed yet.
const cleanedMeta = (() => {
const m =
node.metadata && typeof node.metadata === 'object' && !Array.isArray(node.metadata)
? (node.metadata as Record<string, unknown>)
: {}
const {
isNew: _isNew,
isTransient: _isTransient,
...rest
} = m as {
isNew?: boolean
isTransient?: boolean
}
return Object.keys(rest).length > 0 ? rest : undefined
})()
if (isNew || !node.id) {
const { id: _id, ...rest } = node
const committed = DormerNodeSchema.parse({
...rest,
roofSegmentId: hit.segment.id,
parentId: hit.segment.id,
position: [hit.localX, hit.localY, hit.localZ],
rotation,
metadata: cleanedMeta,
})
state.createNode(committed, hit.segment.id as AnyNodeId)
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
setSelection({ selectedIds: [committed.id] })
} else {
const prevSegmentId = node.roofSegmentId as AnyNodeId | undefined
state.updateNode(node.id as AnyNodeId, {
roofSegmentId: hit.segment.id,
parentId: hit.segment.id,
position: [hit.localX, hit.localY, hit.localZ],
rotation,
metadata: cleanedMeta,
})
if (prevSegmentId) state.dirtyNodes.add(prevSegmentId)
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
// Unlist from previous segment's children and add to the new one.
if (prevSegmentId && prevSegmentId !== (hit.segment.id as AnyNodeId)) {
const prevSeg = state.nodes[prevSegmentId] as RoofSegmentNode | undefined
if (prevSeg) {
state.updateNode(prevSegmentId, {
children: (prevSeg.children ?? []).filter((id) => id !== node.id),
})
}
const newSeg = state.nodes[hit.segment.id as AnyNodeId] as RoofSegmentNode | undefined
if (newSeg && !(newSeg.children ?? []).includes(node.id)) {
state.updateNode(hit.segment.id as AnyNodeId, {
children: [...(newSeg.children ?? []), node.id],
})
if (isNew || !node.id) {
const { id: _id, ...rest } = node
const committed = DormerNodeSchema.parse({
...rest,
roofSegmentId: hit.segment.id,
parentId: hit.segment.id,
position: [hit.localX, hit.localY, hit.localZ],
rotation,
metadata: cleanedMeta,
})
state.createNode(committed, hit.segment.id as AnyNodeId)
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
setSelection({ selectedIds: [committed.id] })
} else {
const prevSegmentId = node.roofSegmentId as AnyNodeId | undefined
state.updateNode(node.id as AnyNodeId, {
roofSegmentId: hit.segment.id,
parentId: hit.segment.id,
position: [hit.localX, hit.localY, hit.localZ],
rotation,
metadata: cleanedMeta,
})
if (prevSegmentId) state.dirtyNodes.add(prevSegmentId)
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
// Unlist from previous segment's children and add to the new one.
if (prevSegmentId && prevSegmentId !== (hit.segment.id as AnyNodeId)) {
const prevSeg = state.nodes[prevSegmentId] as RoofSegmentNode | undefined
if (prevSeg) {
state.updateNode(prevSegmentId, {
children: (prevSeg.children ?? []).filter((id) => id !== node.id),
})
}
const newSeg = state.nodes[hit.segment.id as AnyNodeId] as RoofSegmentNode | undefined
if (newSeg && !(newSeg.children ?? []).includes(node.id)) {
state.updateNode(hit.segment.id as AnyNodeId, {
children: [...(newSeg.children ?? []), node.id],
})
}
}
setSelection({ selectedIds: [node.id] })
}
setSelection({ selectedIds: [node.id] })
}
const dormerObj = sceneRegistry.nodes.get(node.id)
if (dormerObj) dormerObj.visible = true
setMovingNode(null)
},
})
const dormerObj = sceneRegistry.nodes.get(node.id)
if (dormerObj) dormerObj.visible = true
setMovingNode(null)
},
})
if (!activeBuildingId || !segmentXform || !hitLocal) return null
return (
<group position={segmentXform.position} quaternion={segmentXform.quaternion}>
{hitSegment && (
<DormerPlacementGuides
center={hitLocal}
depth={previewNode.depth}
movingId={node.id}
rotation={ghostRotation}
segment={hitSegment}
width={previewNode.width}
/>
)}
<group position={hitLocal}>
<group rotation-y={ghostRotation}>
<DormerPreview node={previewNode} />
packages/nodes/src/dormer/placement-guides.tsx
+273
View File
@@ -0,0 +1,273 @@
'use client'
import type { RoofSegmentNode } from '@pascal-app/core'
import { EDITOR_LAYER, formatMeasurement } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { Html } from '@react-three/drei'
import { useEffect, useMemo } from 'react'
import { BufferGeometry, Float32BufferAttribute, Line as ThreeLine } from 'three'
import { LineBasicNodeMaterial } from 'three/webgpu'
import { getRoofSurfaceFaceBoundsAt } from '../shared/roof-surface'
import {
roofFaceKey,
roofGuideBounds,
roofSiblingSpacing,
} from '../shared/roof-surface-placement-guides'
// Indigo — matches the wall/window 3D proximity guide accent so every
// "distance to edge" readout reads the same across the app.
const GUIDE_COLOR = 0x81_8c_f8
const ALIGN_COLOR = 0xef_44_44
const PILL_BG = '#6366f1'
const BADGE_BG = '#ec4899'
// Lift the lines a hair off the sloped surface so they don't z-fight the
// roof + dormer ghost.
const SURFACE_LIFT = 0.02
// Hide a gap that has collapsed (dormer edge flush to / past the roof edge)
// so we don't draw a degenerate "0m" pill.
const MIN_GAP_M = 0.02
const guideMaterial = new LineBasicNodeMaterial({
color: GUIDE_COLOR,
depthTest: false,
depthWrite: false,
toneMapped: false,
transparent: true,
})
const alignMaterial = new LineBasicNodeMaterial({
color: ALIGN_COLOR,
depthTest: false,
depthWrite: false,
toneMapped: false,
transparent: true,
})
type Vec3 = [number, number, number]
type DormerGuide =
| {
id: string
from: Vec3
to: Vec3
kind: 'align-line' | 'dimension'
value?: number
}
| {
id: string
at: Vec3
kind: 'badge'
value: number
}
/**
* Live "distance to roof edge" guides shown while a dormer ghost is being
* placed or dragged — the roof-plane analog of the window's sill/head +
* edge-proximity pills. Renders measured lines from each side-center of
* the dormer's occupied roof area out to the active roof face edges, each
* with a distance pill at its midpoint.
*
* Mounted as a sibling of `<DormerPreview>` INSIDE the segment-local frame
* (the `segmentXform` group) but OUTSIDE the dormer's `hitLocal` + rotation
* groups, so its coordinates are segment-local. The roof-face boundary is
* resolved from the actual visible top face under `center`, not from the
* wall footprint dimensions.
*
* Normal roof accessories use side-center readouts. Linear accessories
* like ridge vents and gutters use their own two-end guide mode.
*/
export function DormerPlacementGuides({
segment,
center,
width,
depth,
rotation,
movingId,
}: {
segment: RoofSegmentNode
center: Vec3
width: number
depth: number
rotation: number
movingId?: string
}) {
const unit = useViewer((s) => s.unit)
const [cx, , cz] = center
const faceBounds = getRoofSurfaceFaceBoundsAt(segment, cx, cz)
const halfW = Math.max(0, width) / 2
const halfD = Math.max(0, depth) / 2
const cos = Math.cos(rotation)
const sin = Math.sin(rotation)
const halfX = Math.abs(cos) * halfW + Math.abs(sin) * halfD
const halfZ = Math.abs(sin) * halfW + Math.abs(cos) * halfD
const movingBounds = roofGuideBounds(center, { width, depth, rotation })
const surfaceY = (x: number, z: number): number => faceBounds.surfaceYAt(x, z) + SURFACE_LIFT
const xInterval = faceBounds.xIntervalAtZ(cz)
const zInterval = faceBounds.zIntervalAtX(cx)
const guides: DormerGuide[] = []
const push = (id: string, ax: number, az: number, bx: number, bz: number) => {
const from: Vec3 = [ax, surfaceY(ax, az), az]
const to: Vec3 = [bx, surfaceY(bx, bz), bz]
const value = Math.hypot(to[0] - from[0], to[1] - from[1], to[2] - from[2])
if (value < MIN_GAP_M) return
guides.push({
id,
from,
to,
kind: 'dimension',
value,
})
}
const siblingSpacing = roofSiblingSpacing<DormerGuide>({
segment,
movingId,
movingBounds,
faceKey: roofFaceKey(faceBounds.polygon),
dimension: (id, [ax, az], [bx, bz]) => {
const from: Vec3 = [ax, surfaceY(ax, az), az]
const to: Vec3 = [bx, surfaceY(bx, bz), bz]
const value = Math.hypot(to[0] - from[0], to[1] - from[1], to[2] - from[2])
if (value < MIN_GAP_M) return null
return { id, from, to, kind: 'dimension', value }
},
alignLine: (id, [ax, az], [bx, bz]) => {
const from: Vec3 = [ax, surfaceY(ax, az), az]
const to: Vec3 = [bx, surfaceY(bx, bz), bz]
const value = Math.hypot(to[0] - from[0], to[1] - from[1], to[2] - from[2])
if (value < MIN_GAP_M) return null
return { id, from, to, kind: 'align-line' }
},
badge: (id, [x, z], value) => {
if (value < MIN_GAP_M) return null
return {
id,
at: [x, surfaceY(x, z), z],
kind: 'badge',
value,
}
},
measure: ([ax, az], [bx, bz]) => {
const ay = surfaceY(ax, az)
const by = surfaceY(bx, bz)
return Math.hypot(bx - ax, by - ay, bz - az)
},
})
if (xInterval) {
const [faceMinX, faceMaxX] = xInterval
const itemMinX = Math.max(faceMinX, Math.min(faceMaxX, cx - halfX))
const itemMaxX = Math.max(faceMinX, Math.min(faceMaxX, cx + halfX))
if (!siblingSpacing.blockedSides.left && itemMinX > faceMinX + MIN_GAP_M) {
push('left', faceMinX, cz, itemMinX, cz)
}
if (!siblingSpacing.blockedSides.right && itemMaxX < faceMaxX - MIN_GAP_M) {
push('right', itemMaxX, cz, faceMaxX, cz)
}
}
if (zInterval) {
const [faceMinZ, faceMaxZ] = zInterval
const itemMinZ = Math.max(faceMinZ, Math.min(faceMaxZ, cz - halfZ))
const itemMaxZ = Math.max(faceMinZ, Math.min(faceMaxZ, cz + halfZ))
if (!siblingSpacing.blockedSides.bottom && itemMinZ > faceMinZ + MIN_GAP_M) {
push('back', cx, faceMinZ, cx, itemMinZ)
}
if (!siblingSpacing.blockedSides.top && itemMaxZ < faceMaxZ - MIN_GAP_M) {
push('front', cx, itemMaxZ, cx, faceMaxZ)
}
}
guides.push(...siblingSpacing.guides)
return (
<>
{guides.map((g) => (
<Guide key={g.id} guide={g} unit={unit} />
))}
</>
)
}
function Guide({ guide, unit }: { guide: DormerGuide; unit: 'metric' | 'imperial' }) {
if (guide.kind === 'badge') {
return <GuideBadge at={guide.at} pill={`= ${formatMeasurement(guide.value, unit)}`} />
}
return (
<GuideLine
from={guide.from}
kind={guide.kind}
pill={guide.value === undefined ? undefined : formatMeasurement(guide.value, unit)}
to={guide.to}
/>
)
}
function GuideBadge({ at, pill }: { at: Vec3; pill: string }) {
return (
<Html
center
position={at}
style={{ pointerEvents: 'none', userSelect: 'none' }}
zIndexRange={[20, 0]}
>
<div
className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-semibold font-sans text-[11px] text-white"
style={{ backgroundColor: BADGE_BG }}
>
{pill}
</div>
</Html>
)
}
function GuideLine({
from,
to,
pill,
kind,
}: {
from: Vec3
to: Vec3
pill?: string
kind: DormerGuide['kind']
}) {
const { line, position } = useMemo(() => {
const position = new Float32BufferAttribute(new Float32Array(6), 3)
const geometry = new BufferGeometry()
geometry.setAttribute('position', position)
const line = new ThreeLine(geometry, kind === 'align-line' ? alignMaterial : guideMaterial)
line.frustumCulled = false
line.layers.set(EDITOR_LAYER)
line.renderOrder = 1000
return { line, position }
}, [kind])
position.setXYZ(0, from[0], from[1], from[2])
position.setXYZ(1, to[0], to[1], to[2])
position.needsUpdate = true
useEffect(() => () => line.geometry.dispose(), [line])
const mid: Vec3 = [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2, (from[2] + to[2]) / 2]
return (
<>
<primitive object={line} />
{pill ? (
<Html
center
position={mid}
style={{ pointerEvents: 'none', userSelect: 'none' }}
zIndexRange={[20, 0]}
>
<div
className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-medium font-sans text-[11px] text-white"
style={{ backgroundColor: PILL_BG }}
>
{pill}
</div>
</Html>
) : null}
</>
)
}
packages/nodes/src/dormer/tool.tsx
+11 -1
View File
@@ -5,6 +5,7 @@ import { useViewer } from '@pascal-app/viewer'
import { useMemo } from 'react'
import { RoofAttachmentFallbackPreview } from '../shared/roof-attachment-fallback-preview'
import { dormerDefinition } from './definition'
import { DormerPlacementGuides } from './placement-guides'
import DormerPreview from './preview'
import { useDormerPlacement } from './use-dormer-placement'
@@ -48,7 +49,7 @@ const DormerTool = () => {
[],
)
const { activeBuildingId, clearPreview, segmentXform, hitLocal, ghostRotation } =
const { activeBuildingId, clearPreview, segmentXform, hitSegment, hitLocal, ghostRotation } =
useDormerPlacement({
onCommit: (hit, rotation) => {
const state = useScene.getState()
@@ -78,6 +79,15 @@ const DormerTool = () => {
/>
{activeBuildingId && segmentXform && hitLocal && (
<group position={segmentXform.position} quaternion={segmentXform.quaternion}>
{hitSegment && (
<DormerPlacementGuides
center={hitLocal}
depth={previewNode.depth}
rotation={ghostRotation}
segment={hitSegment}
width={previewNode.width}
/>
)}
<group position={hitLocal}>
<group rotation-y={ghostRotation}>
<DormerPreview node={previewNode} />
packages/nodes/src/dormer/use-dormer-placement.ts
+5
View File
@@ -60,12 +60,14 @@ export function useDormerPlacement(opts: {
activeBuildingId: string | undefined
clearPreview: () => void
segmentXform: DormerSegmentTransform | null
hitSegment: RoofSegmentNode | null
hitLocal: [number, number, number] | null
ghostRotation: number
} {
const activeBuildingId = useViewer((s) => s.selection.buildingId)
const [segmentXform, setSegmentXform] = useState<DormerSegmentTransform | null>(null)
const [hitSegment, setHitSegment] = useState<RoofSegmentNode | null>(null)
const [hitLocal, setHitLocal] = useState<[number, number, number] | null>(null)
const [ghostRotation, setGhostRotation] = useState(opts.initialRotation ?? 0)
const lastSnapRef = useRef<[number, number] | null>(null)
@@ -81,6 +83,7 @@ export function useDormerPlacement(opts: {
const clearPreview = () => {
setSegmentXform(null)
setHitSegment(null)
setHitLocal(null)
}
@@ -136,6 +139,7 @@ export function useDormerPlacement(opts: {
const xform = computeSegmentXform(hit.segment.id)
if (!xform) return
setSegmentXform(xform)
setHitSegment(hit.segment)
// Lift the ghost to the actual roof-surface Y at the cursor so
// it tracks the mouse along the slope. The CSG inside
// `generateDormerGeometry` carves the dormer against the host
@@ -200,6 +204,7 @@ export function useDormerPlacement(opts: {
activeBuildingId: activeBuildingId ?? undefined,
clearPreview,
segmentXform,
hitSegment,
hitLocal,
ghostRotation,
}
packages/nodes/src/duct-fitting/definition.ts
+8 -4
View File
@@ -1,4 +1,5 @@
import type { NodeDefinition } from '@pascal-app/core'
import { ductBodyPaint, ductBodySlots } from '../shared/duct-body-paint'
import { rotateFittingNode } from '../shared/fitting-rotation'
import { buildDuctFittingFloorplan } from './floorplan'
import { buildDuctFittingGeometry } from './geometry'
@@ -30,16 +31,16 @@ export const ductFittingDefinition: NodeDefinition<typeof DuctFittingNode> = {
position: [0, 0, 0],
rotation: [0, 0, 0],
fittingType: 'elbow',
shape: 'round',
shape: 'rect',
width: 14,
height: 8,
shape2: 'round',
shape2: 'rect',
width2: 14,
height2: 8,
angle: 90,
branchAngle: 90,
diameter: 6,
diameter2: 6,
diameter: 12,
diameter2: 12,
ductMaterial: 'sheet-metal',
system: 'supply',
}),
@@ -52,6 +53,8 @@ export const ductFittingDefinition: NodeDefinition<typeof DuctFittingNode> = {
movable: { axes: ['x', 'y', 'z'], gridSnap: true, cursorAttached: true },
duplicable: true,
deletable: true,
slots: () => ductBodySlots(),
paint: ductBodyPaint,
},
parametrics: ductFittingParametrics,
@@ -76,6 +79,7 @@ export const ductFittingDefinition: NodeDefinition<typeof DuctFittingNode> = {
n.diameter2,
n.ductMaterial,
n.system,
n.slots,
]),
ports: getDuctFittingPorts,
packages/nodes/src/duct-fitting/geometry.ts
+27 -5
View File
@@ -1,3 +1,5 @@
import type { GeometryContext } from '@pascal-app/core'
import type { ColorPreset, RenderShading } from '@pascal-app/viewer'
import {
BufferGeometry,
CylinderGeometry,
@@ -5,8 +7,8 @@ import {
Euler,
Float32BufferAttribute,
Group,
type Material,
Mesh,
type MeshStandardMaterial,
SphereGeometry,
TorusGeometry,
Vector3,
@@ -18,6 +20,7 @@ import {
createDuctMaterial,
INCHES_TO_METERS,
} from '../duct-segment/geometry'
import { DUCT_BODY_SLOT_ID } from '../shared/duct-body-paint'
import { localFittingPorts } from './ports'
import type { DuctFittingNode } from './schema'
@@ -76,7 +79,7 @@ function buildMiteredElbow(
sweepM: number,
cheekM: number,
profileShape: 'rect' | 'oval',
material: MeshStandardMaterial,
material: Material,
): Mesh {
const travelIn = inletPos.clone().multiplyScalar(-1).normalize() // inlet → junction
const travelOut = outletPos.clone().normalize() // junction → outlet
@@ -155,7 +158,7 @@ function buildRectToRoundLoft(
widthM: number,
heightM: number,
radius: number,
material: MeshStandardMaterial,
material: Material,
): Mesh {
const hw = widthM / 2
const hh = heightM / 2
@@ -212,9 +215,23 @@ function buildRectToRoundLoft(
* height rides local +Y — for the horizontal-plane orientations trunks
* are drawn in, that's world-vertical.
*/
export function buildDuctFittingGeometry(node: DuctFittingNode): Group {
export function buildDuctFittingGeometry(
node: DuctFittingNode,
ctx?: GeometryContext,
shading: RenderShading = 'rendered',
textures = true,
colorPreset: ColorPreset = 'clay',
sceneTheme?: string,
): Group {
const group = new Group()
const material = createDuctMaterial(node)
const material = createDuctMaterial(
node,
ctx?.materials,
shading,
textures,
colorPreset,
sceneTheme,
)
const radiusMain = (node.diameter * INCHES_TO_METERS) / 2
const ports = localFittingPorts(node)
const widthM = node.width * INCHES_TO_METERS
@@ -459,5 +476,10 @@ export function buildDuctFittingGeometry(node: DuctFittingNode): Group {
group.add(collar)
}
group.traverse((object) => {
const mesh = object as Mesh
if (mesh.isMesh) mesh.userData.slotId = DUCT_BODY_SLOT_ID
})
return group
}
packages/nodes/src/duct-fitting/inspector-editors.tsx
+38
View File
@@ -0,0 +1,38 @@
'use client'
import { ActionButton } from '@pascal-app/editor'
import { ArrowLeftRight } from 'lucide-react'
import type { DuctFittingNode } from './schema'
const WIDTH_MIN = 4
const WIDTH_MAX = 60
const HEIGHT_MIN = 3
const HEIGHT_MAX = 40
function clamp(value: number, min: number, max: number) {
return Math.min(max, Math.max(min, value))
}
export function DuctFittingSizeSwapEditor({
node,
onUpdate,
}: {
node: DuctFittingNode
onUpdate: (patch: Partial<DuctFittingNode>) => void
}) {
const nextWidth = clamp(node.height, WIDTH_MIN, WIDTH_MAX)
const nextHeight = clamp(node.width, HEIGHT_MIN, HEIGHT_MAX)
return (
<div className="px-2">
<ActionButton
className="h-8 w-full flex-none"
icon={<ArrowLeftRight className="h-3.5 w-3.5" />}
label="Swap W/H"
onClick={() => onUpdate({ width: nextWidth, height: nextHeight })}
title="Swap width and height"
type="button"
/>
</div>
)
}
packages/nodes/src/duct-fitting/move-tool.tsx
+71 -5
View File
@@ -11,6 +11,7 @@ import {
useScene,
} from '@pascal-app/core'
import {
consumePlacementDragRelease,
DragBoundingBox,
EDITOR_LAYER,
isGridSnapActive,
@@ -24,11 +25,13 @@ import {
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useState } from 'react'
import { Box3, Euler, type Material, type Mesh, MeshBasicMaterial, Vector3 } from 'three'
import { autoOffsetInvalidationUpdates } from '../shared/auto-offset-tag'
import {
type Aabb2D,
collectGhostAlignmentCandidates,
resolveGhostAlignment,
} from '../shared/ghost-alignment'
import { type RunMoveConnectivity, startRunMoveConnectivity } from '../shared/run-move-connectivity'
import { buildDuctFittingGeometry } from './geometry'
type Vec3 = [number, number, number]
@@ -176,9 +179,24 @@ export const MoveDuctFittingTool: React.FC<{ node: AnyNode }> = ({ node }) => {
}
if (existedAtStart) setMeshHidden(true)
// Carry connected ducts as the fitting slides: the part of the move along
// a run's axis stretches it, the part across translates the whole run (and
// propagates to its far joint). Snapshot once at drag start; only existing
// fittings are mated to anything.
const connectivity: RunMoveConnectivity | null = existedAtStart
? startRunMoveConnectivity(node)
: null
let lastPos: Vec3 = originalPosition
// Tracks whether the last frame held Alt: the fitting is detached from its
// connected ducts for the drag, so they stay put (no follow) and the
// commit omits their updates. Mirrors the duct endpoint's Alt-detach.
let lastDetached = false
const onMove = (event: GridEvent) => {
// Alt = detach: drop the connected-duct follow so the fitting moves on
// its own, leaving every mated run where it sits.
const detached = event.nativeEvent?.altKey === true
const snap = isGridSnapActive() ? snapToGridStep : (v: number) => v
let x = snap(event.localPosition[0])
let z = snap(event.localPosition[2])
@@ -200,21 +218,29 @@ export const MoveDuctFittingTool: React.FC<{ node: AnyNode }> = ({ node }) => {
} else {
useAlignmentGuides.getState().clear()
}
const next: Vec3 = [x, lastPos[1], z]
const next: Vec3 = [x, originalPosition[1], z]
if (
(isGridSnapActive() || isMagneticSnapActive()) &&
(next[0] !== lastPos[0] || next[2] !== lastPos[2])
)
triggerSFX('sfx:grid-snap')
lastPos = next
lastDetached = detached
hasMoved = true
setCursorPos(next)
// Detached: keep the followers at their origin (drop any live overrides
// from a prior non-detached frame). Otherwise preview the follow.
if (detached) connectivity?.clear()
else connectivity?.preview({ position: next })
}
const commit = (event: GridEvent) => {
const commit = (event: GridEvent, fromDragRelease = false) => {
if (committed) return
if (Date.now() - activatedAt < 150) {
// The 150ms debounce only guards click-to-place against the arming click
// double-firing; a press-drag release is a distinct pointerup gesture, so
// it skips the guard (a quick drag-flick still commits).
if (!fromDragRelease && Date.now() - activatedAt < 150) {
event.nativeEvent?.stopPropagation?.()
return
}
@@ -236,10 +262,24 @@ export const MoveDuctFittingTool: React.FC<{ node: AnyNode }> = ({ node }) => {
useScene.getState().createNode(created as AnyNode, node.parentId as AnyNodeId)
selectId = created.id as AnyNodeId
} else {
useScene.getState().updateNode(nodeId, { position: lastPos } as Partial<AnyNode>)
useScene.getState().markDirty(nodeId)
// Fold connected-duct / sibling-run follow-updates into the SAME batch
// as the moved fitting so the whole joint is one undo step. Detached
// (Alt on the final frame): the joint is broken, so nothing follows.
const followUpdates = lastDetached
? []
: (connectivity?.commitUpdates({ position: lastPos }) ?? [])
const scene = useScene.getState()
scene.updateNodes([
{ id: nodeId, data: { position: lastPos } as Partial<AnyNode> },
...followUpdates,
...autoOffsetInvalidationUpdates(scene.nodes, nodeId),
])
scene.markDirty(nodeId)
}
useScene.temporal.getState().pause()
// Followers are committed to the store — drop their live overrides so
// renderers read the canonical path/position.
connectivity?.clear()
setMeshHidden(false)
useAlignmentGuides.getState().clear()
@@ -251,6 +291,7 @@ export const MoveDuctFittingTool: React.FC<{ node: AnyNode }> = ({ node }) => {
}
const onCancel = () => {
connectivity?.clear()
if (existedAtStart) {
setMeshHidden(false)
useViewer.getState().setSelection({ selectedIds: [nodeId] })
@@ -262,14 +303,39 @@ export const MoveDuctFittingTool: React.FC<{ node: AnyNode }> = ({ node }) => {
useEditor.getState().setMovingNode(null)
}
// Press-drag-release: when the move was engaged by the drag gesture (the
// selection rig's move cross or a future floating drag), `placementDragMode`
// is set, so commit on pointer-up at the last previewed position instead of
// waiting for a second click — same contract as every other move tool.
const onPlacementDragPointerUp = (event: PointerEvent) => {
if (!consumePlacementDragRelease(event)) return
// A press-release that never moved isn't a placement — back out cleanly
// (drop the ghost, re-select the fitting) instead of leaving the tool
// armed waiting for a click.
if (!hasMoved) {
onCancel()
return
}
commit(
{
nativeEvent: event,
stopPropagation: () => event.stopPropagation(),
} as unknown as GridEvent,
true,
)
}
emitter.on('grid:move', onMove)
emitter.on('grid:click', commit)
emitter.on('tool:cancel', onCancel)
window.addEventListener('pointerup', onPlacementDragPointerUp)
return () => {
emitter.off('grid:move', onMove)
emitter.off('grid:click', commit)
emitter.off('tool:cancel', onCancel)
window.removeEventListener('pointerup', onPlacementDragPointerUp)
connectivity?.clear()
useAlignmentGuides.getState().clear()
if (existedAtStart) setMeshHidden(false)
useScene.temporal.getState().resume()
packages/nodes/src/duct-fitting/parametrics.test.ts
+271
View File
@@ -0,0 +1,271 @@
import { beforeAll, beforeEach, describe, expect, mock, test } from 'bun:test'
import {
type AnyNode,
type AnyNodeId,
DuctFittingNode,
DuctSegmentNode,
useScene,
} from '@pascal-app/core'
import { readAutoOffsetTag, withAutoOffsetTag } from '../shared/auto-offset-tag'
import { getDuctFittingPorts } from './ports'
let ductFittingParametrics: typeof import('./parametrics')['ductFittingParametrics']
type Point = [number, number, number]
function equivalentDiameterIn(widthIn: number, heightIn: number): number {
return 2 * Math.sqrt((widthIn * heightIn) / Math.PI)
}
function rectElbow() {
return DuctFittingNode.parse({
id: 'duct-fitting_resize' as AnyNodeId,
object: 'node',
parentId: null,
visible: true,
metadata: {},
name: 'Resize elbow',
fittingType: 'elbow',
shape: 'rect',
width: 14,
height: 8,
diameter: equivalentDiameterIn(14, 8),
diameter2: equivalentDiameterIn(14, 8),
ductMaterial: 'sheet-metal',
system: 'supply',
position: [0, 0, 0],
rotation: [0, 0, 0],
angle: 90,
})
}
function verticalRectRunFrom(point: Point, roll: number) {
return DuctSegmentNode.parse({
id: 'duct-segment_vertical' as AnyNodeId,
object: 'node',
parentId: null,
visible: true,
metadata: {},
name: 'Drawn vertical run',
path: [point, [point[0], point[1] + 3, point[2]]],
shape: 'rect',
width: 14,
height: 8,
diameter: equivalentDiameterIn(14, 8),
roll,
ductMaterial: 'sheet-metal',
insulationR: 0,
system: 'supply',
})
}
describe('ductFittingParametrics', () => {
beforeAll(async () => {
mock.module('@pascal-app/editor', () => ({
ActionButton: () => null,
}))
;({ ductFittingParametrics } = await import('./parametrics'))
})
beforeEach(() => {
useScene.setState({
nodes: {},
rootNodeIds: [],
dirtyNodes: new Set(),
collections: {},
readOnly: false,
} as never)
useScene.temporal.getState().clear()
})
test('resizing a fitting retrims connected ducts without changing their roll', () => {
const fitting = rectElbow()
const outlet = getDuctFittingPorts(fitting).find((p) => p.id === 'outlet')!
const originalRoll = 0.37
const duct = verticalRectRunFrom([...outlet.position] as Point, originalRoll)
useScene.setState({
nodes: {
[fitting.id]: fitting as AnyNode,
[duct.id]: duct as AnyNode,
},
rootNodeIds: [fitting.id, duct.id],
dirtyNodes: new Set(),
collections: {},
readOnly: false,
} as never)
const patch = { width: 20 }
const derived = ductFittingParametrics.derive?.({ ...fitting, ...patch }, patch) ?? {}
const next = DuctFittingNode.parse({ ...fitting, ...patch, ...derived })
const updates = ductFittingParametrics.reconcile?.(fitting, next) ?? []
const ductUpdate = updates.find((u) => u.id === duct.id)
expect(ductUpdate).toBeDefined()
expect((ductUpdate?.data as Partial<DuctSegmentNode>).path).toBeDefined()
expect((ductUpdate?.data as Partial<DuctSegmentNode>).roll).toBeUndefined()
})
test('resizing a fitting refreshes a connected duct auto-offset base path', () => {
const fitting = rectElbow()
const outlet = getDuctFittingPorts(fitting).find((p) => p.id === 'outlet')!
const duct = verticalRectRunFrom([...outlet.position] as Point, 0)
const taggedDuct = DuctSegmentNode.parse({
...duct,
metadata: withAutoOffsetTag(duct.metadata, {
group: 'aoff_resize',
dy: 1,
minted: ['duct-fitting_minted' as AnyNodeId],
base: [{ id: duct.id, data: { path: duct.path } }],
}),
})
useScene.setState({
nodes: {
[fitting.id]: fitting as AnyNode,
[taggedDuct.id]: taggedDuct as AnyNode,
},
rootNodeIds: [fitting.id, taggedDuct.id],
dirtyNodes: new Set(),
collections: {},
readOnly: false,
} as never)
const patch = { width: 20 }
const derived = ductFittingParametrics.derive?.({ ...fitting, ...patch }, patch) ?? {}
const next = DuctFittingNode.parse({ ...fitting, ...patch, ...derived })
const updates = ductFittingParametrics.reconcile?.(fitting, next) ?? []
const ductUpdate = updates.find((u) => u.id === taggedDuct.id)
const nextOutlet = getDuctFittingPorts(next).find((p) => p.id === 'outlet')!
const nextTag = readAutoOffsetTag({ metadata: ductUpdate?.data.metadata })
const basePath = nextTag?.base.find((b) => b.id === taggedDuct.id)?.data.path as
| Point[]
| undefined
expect(basePath?.[0]).toEqual([...nextOutlet.position])
})
test('deleting an elbow re-extends mated runs back onto the junction', () => {
const fitting = rectElbow()
const ports = getDuctFittingPorts(fitting)
const outlet = ports.find((p) => p.id === 'outlet')!
const inlet = ports.find((p) => p.id === 'inlet')!
// Two runs meeting the elbow's collars — the L-shape the elbow trimmed.
const outletRun = verticalRectRunFrom([...outlet.position] as Point, 0)
const inletRun = DuctSegmentNode.parse({
...verticalRectRunFrom([...inlet.position] as Point, 0),
id: 'duct-segment_inlet' as AnyNodeId,
path: [
[...inlet.position] as Point,
[inlet.position[0] - 3, inlet.position[1], inlet.position[2]],
],
})
const nodes: Record<AnyNodeId, AnyNode> = {
[fitting.id]: fitting as AnyNode,
[outletRun.id]: outletRun as AnyNode,
[inletRun.id]: inletRun as AnyNode,
}
const updates = ductFittingParametrics.onDelete?.(fitting, nodes) ?? []
const outletUpdate = updates.find((u) => u.id === outletRun.id)
const inletUpdate = updates.find((u) => u.id === inletRun.id)
// Both mated endpoints snap back to the junction (the original corner).
expect((outletUpdate?.data as Partial<DuctSegmentNode>).path?.[0]).toEqual([
...fitting.position,
])
expect((inletUpdate?.data as Partial<DuctSegmentNode>).path?.[0]).toEqual([...fitting.position])
})
test('delete repair matches the 5 cm live connectivity mate tolerance', () => {
const fitting = rectElbow()
const outlet = getDuctFittingPorts(fitting).find((p) => p.id === 'outlet')!
const nearOutlet: Point = [outlet.position[0], outlet.position[1], outlet.position[2] + 0.04]
const outletRun = DuctSegmentNode.parse({
...verticalRectRunFrom(nearOutlet, 0),
id: 'duct-segment_outlet_gap' as AnyNodeId,
})
const nodes: Record<AnyNodeId, AnyNode> = {
[fitting.id]: fitting as AnyNode,
[outletRun.id]: outletRun as AnyNode,
}
const updates = ductFittingParametrics.onDelete?.(fitting, nodes) ?? []
const outletUpdate = updates.find((u) => u.id === outletRun.id)
expect((outletUpdate?.data as Partial<DuctSegmentNode>).path?.[0]).toEqual([
...fitting.position,
])
})
test('deleting a generated elbow clears the owner duct auto-offset tag', () => {
const fitting = rectElbow()
const outlet = getDuctFittingPorts(fitting).find((p) => p.id === 'outlet')!
const duct = verticalRectRunFrom([...outlet.position] as Point, 0)
const taggedDuct = DuctSegmentNode.parse({
...duct,
metadata: withAutoOffsetTag(duct.metadata, {
group: 'aoff_deleted_elbow',
dy: 1,
minted: [fitting.id],
base: [{ id: duct.id, data: { path: duct.path } }],
}),
})
const nodes: Record<AnyNodeId, AnyNode> = {
[fitting.id]: fitting as AnyNode,
[taggedDuct.id]: taggedDuct as AnyNode,
}
const updates = ductFittingParametrics.onDelete?.(fitting, nodes) ?? []
const finalDuctUpdate = updates.filter((u) => u.id === taggedDuct.id).at(-1)
expect(readAutoOffsetTag({ metadata: finalDuctUpdate?.data.metadata })).toBeNull()
})
test('deleting a tee leaves mated runs untouched', () => {
const tee = DuctFittingNode.parse({ ...rectElbow(), fittingType: 'tee' })
const outlet = getDuctFittingPorts(tee).find((p) => p.id === 'outlet')!
const duct = verticalRectRunFrom([...outlet.position] as Point, 0)
const nodes: Record<AnyNodeId, AnyNode> = {
[tee.id]: tee as AnyNode,
[duct.id]: duct as AnyNode,
}
expect(ductFittingParametrics.onDelete?.(tee, nodes) ?? []).toEqual([])
})
test('resizing a generated fitting clears the owner duct auto-offset tag', () => {
const fitting = rectElbow()
const outlet = getDuctFittingPorts(fitting).find((p) => p.id === 'outlet')!
const duct = verticalRectRunFrom([...outlet.position] as Point, 0)
const taggedDuct = DuctSegmentNode.parse({
...duct,
metadata: withAutoOffsetTag(duct.metadata, {
group: 'aoff_generated_fit',
dy: 1,
minted: [fitting.id],
base: [{ id: duct.id, data: { path: duct.path } }],
}),
})
useScene.setState({
nodes: {
[fitting.id]: fitting as AnyNode,
[taggedDuct.id]: taggedDuct as AnyNode,
},
rootNodeIds: [fitting.id, taggedDuct.id],
dirtyNodes: new Set(),
collections: {},
readOnly: false,
} as never)
const patch = { width: 20 }
const derived = ductFittingParametrics.derive?.({ ...fitting, ...patch }, patch) ?? {}
const next = DuctFittingNode.parse({ ...fitting, ...patch, ...derived })
const updates = ductFittingParametrics.reconcile?.(fitting, next) ?? []
const finalDuctUpdate = updates.filter((u) => u.id === taggedDuct.id).at(-1)
expect(readAutoOffsetTag({ metadata: finalDuctUpdate?.data.metadata })).toBeNull()
})
})
packages/nodes/src/duct-fitting/parametrics.ts
+100 -35
View File
@@ -7,19 +7,41 @@ import {
} from '@pascal-app/core'
import { Vector3 } from 'three'
import {
ductPortDiameterIn,
equivalentDiameterIn,
ovalEquivalentDiameterIn,
rollToContinueAcrossElbow,
} from '../duct-segment/geometry'
autoOffsetInvalidationUpdates,
readAutoOffsetTag,
withAutoOffsetTag,
} from '../shared/auto-offset-tag'
import { DuctFittingSizeSwapEditor } from './inspector-editors'
import { getDuctFittingPorts } from './ports'
import type { DuctFittingNode } from './schema'
/** Schema bounds for `diameter` / `diameter2`. */
const clampDiameter = (d: number) => Math.min(48, Math.max(2, d))
const equivalentDiameterIn = (widthIn: number, heightIn: number): number =>
2 * Math.sqrt((widthIn * heightIn) / Math.PI)
const ovalEquivalentDiameterIn = (widthIn: number, heightIn: number): number => {
const minor = Math.min(widthIn, heightIn)
const major = Math.max(widthIn, heightIn)
const area = (major - minor) * minor + Math.PI * (minor / 2) ** 2
return 2 * Math.sqrt(area / Math.PI)
}
const ductPortDiameterIn = (node: DuctSegmentNode): number => {
if (node.shape === 'rect' && node.width && node.height) {
return equivalentDiameterIn(node.width, node.height)
}
if (node.shape === 'oval' && node.width && node.height) {
return ovalEquivalentDiameterIn(node.width, node.height)
}
return node.diameter
}
/** A duct endpoint sitting this close to a collar counts as mated. */
const MATE_TOL_M = 0.03
const MATE_TOL_M = 0.05
type Point = [number, number, number]
type DuctMate = { duct: DuctSegmentNode; endIndex: number }
@@ -28,10 +50,13 @@ type DuctMate = { duct: DuctSegmentNode; endIndex: number }
* port id. Auto-minted joints place duct ends exactly on the collar, so
* a tight distance check is enough — no connectivity graph yet.
*/
function matedDucts(fitting: DuctFittingNode): Map<string, DuctMate> {
function matedDucts(
fitting: DuctFittingNode,
nodes: Record<AnyNodeId, AnyNode> = useScene.getState().nodes,
): Map<string, DuctMate> {
const mates = new Map<string, DuctMate>()
const ports = getDuctFittingPorts(fitting)
for (const node of Object.values(useScene.getState().nodes)) {
for (const node of Object.values(nodes)) {
if (node.type !== 'duct-segment') continue
const duct = node as DuctSegmentNode
for (const endIndex of [0, duct.path.length - 1]) {
@@ -51,6 +76,25 @@ function matedDucts(fitting: DuctFittingNode): Map<string, DuctMate> {
return mates
}
function refreshedAutoOffsetMetadata(
duct: DuctSegmentNode,
endIndex: number,
target: Point,
): Record<string, unknown> | null {
const tag = readAutoOffsetTag(duct)
if (!tag) return null
let changed = false
const base = tag.base.map((patch) => {
if (patch.id !== duct.id || !Array.isArray(patch.data.path)) return patch
const path = patch.data.path.map((p) => (Array.isArray(p) ? [...p] : p))
if (!Array.isArray(path[endIndex])) return patch
path[endIndex] = [...target]
changed = true
return { ...patch, data: { ...patch.data, path } }
})
return changed ? withAutoOffsetTag(duct.metadata, { ...tag, base }) : null
}
export const ductFittingParametrics: ParametricDescriptor<DuctFittingNode> = {
// Switching the run legs round↔rect flips the whole fitting and sizes
// the new profile off the ducts actually mated to its collars, so the
@@ -127,34 +171,48 @@ export const ductFittingParametrics: ParametricDescriptor<DuctFittingNode> = {
path[mate.endIndex] = [...target.position]
data.path = path
}
// Steep rect / oval runs also re-derive their cross-section roll
// so a riser's profile stays continuous through the fitting (same
// continuity the draw tool computes; runs flipped to rect after
// drawing never got it). Horizontal runs are left alone — their
// roll-0 orientation is canonical and re-deriving it from a
// possibly-stale riser roll would corrupt it.
if (next.shape !== 'round' && mate.duct.shape !== 'round') {
const away = mate.duct.path[mate.endIndex === 0 ? 1 : mate.duct.path.length - 2]
const source = getDuctFittingPorts(next).find(
(p) => p.id !== portId && p.id !== 'branch' && p.id !== 'branch2',
)
if (away && source) {
const newDir = new Vector3(away[0] - end[0], away[1] - end[1], away[2] - end[2])
if (newDir.lengthSq() >= 1e-10) {
newDir.normalize()
if (Math.abs(newDir.y) >= Math.SQRT1_2) {
const srcMate = mates.get(source.id)
const srcRoll = srcMate && srcMate.duct.shape !== 'round' ? srcMate.duct.roll : 0
const srcDir = new Vector3(...source.direction)
const roll = rollToContinueAcrossElbow(srcDir, srcRoll, srcDir, newDir)
if (Math.abs(roll - mate.duct.roll) > 1e-6) data.roll = roll
}
}
}
}
const metadata = refreshedAutoOffsetMetadata(
mate.duct,
mate.endIndex,
target.position as Point,
)
if (metadata) data.metadata = metadata as DuctSegmentNode['metadata']
if (Object.keys(data).length > 0) updates.push({ id: mate.duct.id, data })
}
return updates
return [...updates, ...autoOffsetInvalidationUpdates(useScene.getState().nodes, next.id)]
},
// Deleting an auto-inserted elbow restores the corner it replaced: both
// mated runs were pulled back one leg onto its collars, with the
// junction (the fitting's position) sitting exactly on the corner they
// originally met at. Re-extend each mated endpoint back to that junction
// so the L-shape returns to its pre-fitting length. Scoped to elbows —
// tees / crosses split a trunk into two separate nodes, which can't be
// re-joined by moving an endpoint.
onDelete: (fitting, nodes) => {
const invalidations = autoOffsetInvalidationUpdates(nodes, fitting.id)
if (fitting.fittingType !== 'elbow') return invalidations
const junction = new Vector3(...fitting.position)
const updates: Array<{ id: AnyNodeId; data: Partial<AnyNode> }> = []
for (const mate of matedDucts(fitting, nodes).values()) {
const end = mate.duct.path[mate.endIndex]
if (!end) continue
const dx = end[0] - junction.x
const dy = end[1] - junction.y
const dz = end[2] - junction.z
if (dx * dx + dy * dy + dz * dz < 1e-12) continue
const path = mate.duct.path.map((p) => [...p] as Point)
path[mate.endIndex] = [junction.x, junction.y, junction.z]
const data: Partial<DuctSegmentNode> = { path }
const metadata = refreshedAutoOffsetMetadata(mate.duct, mate.endIndex, [
junction.x,
junction.y,
junction.z,
])
if (metadata) data.metadata = metadata as DuctSegmentNode['metadata']
updates.push({ id: mate.duct.id, data })
}
return [...updates, ...invalidations]
},
groups: [
{
@@ -170,7 +228,7 @@ export const ductFittingParametrics: ParametricDescriptor<DuctFittingNode> = {
key: 'angle',
kind: 'number',
unit: '°',
min: 15,
min: 0,
max: 90,
step: 15,
visibleIf: (n) => n.fittingType === 'elbow',
@@ -236,6 +294,13 @@ export const ductFittingParametrics: ParametricDescriptor<DuctFittingNode> = {
visibleIf: (n) =>
n.fittingType === 'transition' || (n.shape !== 'round' && n.fittingType !== 'reducer'),
},
{
key: 'swapWidthHeight',
kind: 'custom',
component: DuctFittingSizeSwapEditor,
visibleIf: (n) =>
n.fittingType === 'transition' || (n.shape !== 'round' && n.fittingType !== 'reducer'),
},
{
key: 'shape2',
kind: 'enum',
packages/nodes/src/duct-fitting/ports.ts
+2 -1
View File
@@ -1,8 +1,9 @@
import type { NodePort } from '@pascal-app/core'
import { Euler, Vector3 } from 'three'
import { INCHES_TO_METERS } from '../duct-segment/geometry'
import type { DuctFittingNode } from './schema'
const INCHES_TO_METERS = 0.0254
/**
* Collar stub length in meters — how far each port sticks out from the
* fitting's junction center. Scales with the duct so big trunks get
packages/nodes/src/duct-fitting/selection.tsx
+862 -17
View File
@@ -1,27 +1,299 @@
'use client'
import { type AnyNodeId, useScene } from '@pascal-app/core'
import {
type AnyNode,
type AnyNodeId,
analyzePortConnectivity,
type Cursor,
type DuctFittingNode,
type PortConnectivity,
pauseSceneHistory,
resolveConnectivityUpdates,
resumeSceneHistory,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import {
ARROW_COLOR,
EDITOR_LAYER,
swallowNextClick,
triggerSFX,
useEditor,
} from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useEffect } from 'react'
import { cycleRotationAxis } from '../shared/fitting-rotation'
import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
import { useEffect, useMemo, useState } from 'react'
import {
BufferGeometry,
Euler,
Float32BufferAttribute,
type Group,
LineSegments,
type Object3D,
OrthographicCamera,
Plane,
Quaternion,
Raycaster,
SphereGeometry,
Vector2,
Vector3,
} from 'three'
import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
import { INCHES_TO_METERS } from '../duct-segment/geometry'
import { autoOffsetInvalidationUpdates } from '../shared/auto-offset-tag'
import {
AXIS_VECTORS,
cycleRotationAxis,
ROTATE_STEP_RAD,
type RotationAxis,
} from '../shared/fitting-rotation'
import { HandleCube, MoveChevron, RotateArc } from '../shared/selection-handles'
import { fittingLegLength } from './ports'
type Point = [number, number, number]
/** Stand-off (meters) from the fitting body to each arrow. */
const ARROW_GAP = 0.14
const RESIZE_HANDLE_GAP = 0.18
const RESIZE_STEP_IN = 1
const RESIZE_GUIDE_DASH = 0.07
const RESIZE_GUIDE_GAP = 0.045
const RESIZE_SPHERE_RADIUS = 0.065
const RESIZE_HIT_RADIUS = 0.13
const UP = new Vector3(0, 1, 0)
function snap(value: number, step: number): number {
if (step <= 0) return value
return Math.round(value / step) * step
}
function clamp(value: number, min: number, max: number): number {
return Math.min(max, Math.max(min, value))
}
/** Rough body radius (meters) — the larger of the fitting's two collar reaches,
* used to stand the handles clear of the geometry. */
function fittingExtentM(node: DuctFittingNode): number {
const d2 = (node as { diameter2?: number }).diameter2 ?? node.diameter
return Math.max(fittingLegLength(node.diameter), fittingLegLength(d2))
}
/** The transform a drag frame writes onto the fitting. */
type FittingTransform = { position?: Point; rotation?: Point }
type FittingDimension = 'width' | 'height'
function fittingParameterPatch(node: DuctFittingNode): Partial<DuctFittingNode> {
return {
fittingType: node.fittingType,
shape: node.shape,
width: node.width,
height: node.height,
shape2: node.shape2,
width2: node.width2,
height2: node.height2,
angle: node.angle,
branchAngle: node.branchAngle,
diameter: node.diameter,
diameter2: node.diameter2,
ductMaterial: node.ductMaterial,
system: node.system,
}
}
function preserveFittingParameters(
node: DuctFittingNode,
data: Partial<DuctFittingNode>,
): Partial<AnyNode> {
return { ...fittingParameterPatch(node), ...data } as Partial<AnyNode>
}
function canResizeRunProfile(node: DuctFittingNode): boolean {
return (
node.fittingType === 'transition' || (node.fittingType !== 'reducer' && node.shape !== 'round')
)
}
function dimensionBounds(dimension: FittingDimension): { min: number; max: number } {
return dimension === 'width' ? { min: 4, max: 60 } : { min: 3, max: 40 }
}
function closestAxisParameterToRay(
axisOrigin: Vector3,
axisDirection: Vector3,
ray: Raycaster['ray'],
) {
const originToRay = axisOrigin.clone().sub(ray.origin)
const b = axisDirection.dot(ray.direction)
const d = axisDirection.dot(originToRay)
const e = ray.direction.dot(originToRay)
const denominator = 1 - b * b
if (Math.abs(denominator) < 1e-6) return -d
const axisParameter = (b * e - d) / denominator
const rayParameter = e + b * axisParameter
return rayParameter < 0 ? -d : axisParameter
}
function DashedResizeGuide({ from, to }: { from: Point; to: Point }) {
const line = useMemo(() => {
const a = new Vector3(from[0], from[1], from[2])
const b = new Vector3(to[0], to[1], to[2])
const span = b.clone().sub(a)
const length = span.length()
const points: number[] = []
if (length > 1e-4) {
const dir = span.clone().normalize()
let t = 0
while (t < length) {
const start = a.clone().addScaledVector(dir, t)
const end = a.clone().addScaledVector(dir, Math.min(t + RESIZE_GUIDE_DASH, length))
points.push(start.x, start.y, start.z, end.x, end.y, end.z)
t += RESIZE_GUIDE_DASH + RESIZE_GUIDE_GAP
}
}
const geometry = new BufferGeometry()
geometry.setAttribute('position', new Float32BufferAttribute(new Float32Array(points), 3))
const material = new LineBasicNodeMaterial({
color: ARROW_COLOR,
transparent: true,
opacity: 0.8,
depthWrite: false,
})
const next = new LineSegments(geometry, material)
next.frustumCulled = false
next.layers.set(EDITOR_LAYER)
next.renderOrder = 1002
next.raycast = () => {}
return next
}, [from, to])
useEffect(
() => () => {
line.geometry.dispose()
;(line.material as LineBasicNodeMaterial).dispose()
},
[line],
)
return <primitive object={line} />
}
function ResizeSphereHandle({
cursor,
onPointerDown,
position,
}: {
cursor: Cursor
onPointerDown: (event: ThreeEvent<PointerEvent>) => void
position: Point
}) {
const { camera } = useThree()
const [hovered, setHovered] = useState(false)
const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
const sphereGeometry = useMemo(() => new SphereGeometry(RESIZE_SPHERE_RADIUS, 18, 12), [])
const hitGeometry = useMemo(() => new SphereGeometry(RESIZE_HIT_RADIUS, 12, 8), [])
const sphereMaterial = useMemo(
() =>
new MeshBasicNodeMaterial({
color: ARROW_COLOR,
transparent: true,
opacity: 0.92,
depthTest: false,
depthWrite: false,
}),
[],
)
const hitMaterial = useMemo(
() =>
new MeshBasicNodeMaterial({
color: ARROW_COLOR,
transparent: true,
opacity: 0,
depthTest: false,
depthWrite: false,
}),
[],
)
useEffect(() => {
sphereMaterial.opacity = hovered ? 1 : 0.92
}, [sphereMaterial, hovered])
useEffect(
() => () => {
hitGeometry.dispose()
sphereGeometry.dispose()
sphereMaterial.dispose()
hitMaterial.dispose()
},
[hitGeometry, hitMaterial, sphereGeometry, sphereMaterial],
)
const consumePress = (event: ThreeEvent<PointerEvent>) => {
event.stopPropagation()
event.nativeEvent.stopPropagation()
event.nativeEvent.stopImmediatePropagation()
swallowNextClick()
onPointerDown(event)
}
return (
<group position={position} scale={zoom}>
<mesh
geometry={hitGeometry}
material={hitMaterial}
onPointerDown={consumePress}
onPointerEnter={(event) => {
event.stopPropagation()
setHovered(true)
document.body.style.cursor = cursor
}}
onPointerLeave={(event) => {
event.stopPropagation()
setHovered(false)
if (document.body.style.cursor === cursor) document.body.style.cursor = ''
}}
/>
<mesh geometry={sphereGeometry} material={sphereMaterial} renderOrder={1004} />
</group>
)
}
/**
* Selection-time rotation support for placed fittings, mounted by the
* editor's SelectionAffordanceManager (`def.affordanceTools.selection`).
* The R/T rotation itself lives in `def.keyboardActions` (the editor's
* keyboard hook dispatches it); this contributes the piece that hook
* can't: **Alt cycles the active rotation axis** while a single fitting
* is selected. The axis lives on `useEditor.rotationAxis`, which the
* floating action menu reads to show the axis pill above the selected
* fitting — so this component renders nothing.
* Selection-time affordances for a placed duct fitting — the 3D twin of the
* duct-segment selection rig. A CLICK-to-latch cube sits at the fitting center;
* clicking it opens (click again to close) a cluster of:
*
* - **Six move arrows** (±X / ±Y / ±Z): translate the whole fitting along one
* world axis. Connected runs follow via port connectivity.
* - **Three rotation arcs** (X / Y / Z): spin the fitting about each world
* axis. Connected runs re-aim via port follow.
* - **Two profile cubes** on the fitting's visible side/top faces: resize
* non-round fitting width and height without occupying the inside corner.
*
* The handle rig is PORTALED into the fitting group's PARENT — never the
* fitting group itself — because the selection outliner (`MergedOutlineNode`)
* traces every descendant mesh of the SELECTED node, so a hit-area cylinder
* parented under the fitting would be swept into its selection outline. Walls /
* doors / windows dodge it the same way. The fitting's local `position` is
* expressed in the parent's frame, so an identity group under the parent lets
* us place handles at absolute level-local coords with world-aligned axes.
*
* History does the single-undo dance: paused during the drag (live ticks are
* untracked), reverted on release, resumed, then the final transform re-applied
* as one tracked change so the whole joint is one undo step.
*/
const DuctFittingSelectionAffordance = () => {
const selectedIds = useViewer((s) => s.selection.selectedIds)
const hasSelectedFitting = useScene((s) => {
if (selectedIds.length !== 1) return false
return s.nodes[selectedIds[0] as AnyNodeId]?.type === 'duct-fitting'
const fitting = useScene((s) => {
if (selectedIds.length !== 1) return null
const node = s.nodes[selectedIds[0] as AnyNodeId]
return node?.type === 'duct-fitting' ? (node as DuctFittingNode) : null
})
// Alt cycles the active rotation axis for the R / T keyboard rotate while a
// single fitting is selected (the gizmo's three arcs cover every axis on
// their own; this only keeps the keyboard action meaningful).
const hasSelectedFitting = !!fitting
useEffect(() => {
if (!hasSelectedFitting) return
const onKeyDown = (e: KeyboardEvent) => {
@@ -31,13 +303,586 @@ const DuctFittingSelectionAffordance = () => {
e.preventDefault()
cycleRotationAxis()
}
// Bubble phase — when the placement tool is active its capture-phase
// handler stops propagation, so the two never double-cycle.
window.addEventListener('keydown', onKeyDown)
return () => window.removeEventListener('keydown', onKeyDown)
}, [hasSelectedFitting])
return null
// Portal target: the fitting's registered group. Resolved with a rAF retry
// because registration lands on the renderer's mount, a frame after select.
const fittingId = fitting?.id ?? null
const [target, setTarget] = useState<Object3D | null>(null)
useEffect(() => {
if (!fittingId) {
setTarget(null)
return
}
let frameId = 0
const resolve = () => {
const next = sceneRegistry.nodes.get(fittingId as AnyNodeId) ?? null
setTarget((cur) => (cur === next ? cur : next))
if (!next) frameId = window.requestAnimationFrame(resolve)
}
resolve()
return () => window.cancelAnimationFrame(frameId)
}, [fittingId])
if (!fitting || !target) return null
const mount = target.parent ?? target
return createPortal(<FittingHandles fitting={fitting} target={target} />, mount, undefined)
}
const FittingHandles = ({ fitting, target }: { fitting: DuctFittingNode; target: Object3D }) => {
const { camera, gl } = useThree()
const [frame, setFrame] = useState<Group | null>(null)
// True while the cluster is latched open. Click the center cube to toggle.
const [open, setOpen] = useState(false)
// True while a move / rotate drag is live — the arrows hide (the window
// pointer handlers own the gesture), exactly like the duct-segment rig.
const [dragging, setDragging] = useState(false)
const [sideSign, setSideSign] = useState(1)
const makeRay = (clientX: number, clientY: number) => {
const rect = gl.domElement.getBoundingClientRect()
const ndc = new Vector2(
((clientX - rect.left) / rect.width) * 2 - 1,
-((clientY - rect.top) / rect.height) * 2 + 1,
)
const raycaster = new Raycaster()
raycaster.setFromCamera(ndc, camera)
return raycaster.ray
}
const intersect = (clientX: number, clientY: number, plane: Plane): Vector3 | null => {
const hit = new Vector3()
return makeRay(clientX, clientY).intersectPlane(plane, hit) ? hit : null
}
const sampleAxisParameter = (
clientX: number,
clientY: number,
axisOrigin: Vector3,
axisDirection: Vector3,
): number => closestAxisParameterToRay(axisOrigin, axisDirection, makeRay(clientX, clientY))
/** World hit on a vertical, camera-facing plane through `anchorWorld`,
* returned as a level-local Y (the frame is axis-aligned to the parent). */
const intersectVerticalY = (
clientX: number,
clientY: number,
anchorWorld: Vector3,
): number | null => {
if (!frame) return null
const forward = camera.getWorldDirection(new Vector3())
forward.y = 0
if (forward.lengthSq() < 1e-6) forward.set(0, 0, 1)
forward.normalize()
const plane = new Plane().setFromNormalAndCoplanarPoint(forward, anchorWorld)
const hit = intersect(clientX, clientY, plane)
return hit ? frame.worldToLocal(hit.clone()).y : null
}
const toWorld = (p: Point): Vector3 =>
frame ? frame.localToWorld(new Vector3(p[0], p[1], p[2])) : new Vector3(p[0], p[1], p[2])
const axisToWorld = (origin: Point, axis: Vector3): Vector3 => {
const originWorld = toWorld(origin)
const tipWorld = frame
? frame.localToWorld(new Vector3(origin[0] + axis.x, origin[1] + axis.y, origin[2] + axis.z))
: new Vector3(origin[0] + axis.x, origin[1] + axis.y, origin[2] + axis.z)
return tipWorld.sub(originWorld).normalize()
}
/** Cursor's coordinate on one world axis, in the frame's local space. For Y
* it rides a camera-facing vertical plane; for X / Z it projects onto the
* horizontal plane through the fitting and reads back the local component. */
const sampleAxis = (
axis: RotationAxis,
clientX: number,
clientY: number,
anchorWorld: Vector3,
): number | null => {
if (axis === 'y') return intersectVerticalY(clientX, clientY, anchorWorld)
const plane = new Plane().setFromNormalAndCoplanarPoint(UP, anchorWorld)
const hit = intersect(clientX, clientY, plane)
if (!hit || !frame) return null
const local = frame.worldToLocal(hit.clone())
return axis === 'x' ? local.x : local.z
}
// Follow-updates for runs / fittings mated to this fitting, given a preview
// transform. Endpoints whose ports didn't move resolve to a zero delta.
const connectivityUpdates = (
connectivity: PortConnectivity | null,
transform: FittingTransform,
): { id: AnyNodeId; data: Partial<AnyNode> }[] => {
if (!connectivity) return []
const preview = { ...(fitting as Record<string, unknown>), ...transform } as AnyNode
const nodes = useScene.getState().nodes
return resolveConnectivityUpdates(connectivity, preview)
.filter((u) => nodes[u.id])
.map((u) => {
const node = nodes[u.id]
if (node?.type !== 'duct-fitting') return u
return {
id: u.id,
data: preserveFittingParameters(
node as DuctFittingNode,
u.data as Partial<DuctFittingNode>,
),
}
})
}
/**
* Shared lifecycle for the move / rotate drags. `makeCompute` is built at
* pointer-down so it can capture the grab anchor (cursor's start coord /
* bearing) and avoid a teleport. Each frame `compute` turns the cursor into
* the fitting's next transform; the fitting writes it and any mated runs
* follow via port connectivity. Lands as one undo step.
*/
const beginDrag =
(
cursor: Cursor,
makeCompute: (
e: ThreeEvent<PointerEvent>,
) => (event: PointerEvent) => FittingTransform | null,
) =>
(e: ThreeEvent<PointerEvent>) => {
e.stopPropagation()
const initialPosition = [...fitting.position] as Point
const initialRotation = [...fitting.rotation] as Point
const connectivity = analyzePortConnectivity(fitting as AnyNode, useScene.getState().nodes)
const compute = makeCompute(e)
pauseSceneHistory(useScene)
useViewer.getState().setInputDragging(true)
setDragging(true)
document.body.style.cursor = cursor
let current: FittingTransform | null = null
const buildBatch = (t: FittingTransform): { id: AnyNodeId; data: Partial<AnyNode> }[] => [
{
id: fitting.id as AnyNodeId,
data: preserveFittingParameters(fitting, t as Partial<DuctFittingNode>),
},
...connectivityUpdates(connectivity, t),
]
const onMove = (event: PointerEvent) => {
const next = compute(event)
if (!next) return
current = next
useScene.getState().updateNodes(buildBatch(next))
}
const cleanup = () => {
window.removeEventListener('pointermove', onMove)
window.removeEventListener('pointerup', onUp)
window.removeEventListener('pointercancel', onUp)
useViewer.getState().setInputDragging(false)
setDragging(false)
if (document.body.style.cursor === cursor) document.body.style.cursor = ''
}
const onUp = () => {
// Swallow the trailing synthetic click so it doesn't reach the
// background-click deselect handler (cleanup drops `inputDragging`
// synchronously here).
swallowNextClick()
cleanup()
// Single-undo dance: revert the fitting AND its followers to the
// pre-drag state while history is still paused, resume, then re-apply
// the final transform as one tracked change.
const reverts: { id: AnyNodeId; data: Partial<AnyNode> }[] = (
connectivity?.connections ?? []
).map((conn) => {
if (conn.kind !== 'rigid-node') {
return { id: conn.nodeId, data: { path: conn.startPath } as Partial<AnyNode> }
}
const node = useScene.getState().nodes[conn.nodeId]
return {
id: conn.nodeId,
data:
node?.type === 'duct-fitting'
? preserveFittingParameters(node as DuctFittingNode, {
position: conn.startPosition as Point,
})
: ({ position: conn.startPosition } as Partial<AnyNode>),
}
})
useScene.getState().updateNodes([
{
id: fitting.id as AnyNodeId,
data: preserveFittingParameters(fitting, {
position: initialPosition,
rotation: initialRotation,
}),
},
...reverts.filter((u) => useScene.getState().nodes[u.id]),
])
resumeSceneHistory(useScene)
if (current) {
const scene = useScene.getState()
scene.updateNodes([
...buildBatch(current),
...autoOffsetInvalidationUpdates(scene.nodes, fitting.id as AnyNodeId),
])
}
}
window.addEventListener('pointermove', onMove)
window.addEventListener('pointerup', onUp)
window.addEventListener('pointercancel', onUp)
}
// Move: translate the fitting along one world axis, anchored to the cursor's
// start coord so it doesn't jump on grab. Y is clamped at the floor; Shift
// bypasses grid snapping.
const moveCompute =
(axis: RotationAxis) =>
(e: ThreeEvent<PointerEvent>): ((event: PointerEvent) => FittingTransform | null) => {
const anchorWorld = toWorld(fitting.position as Point)
const start = sampleAxis(axis, e.nativeEvent.clientX, e.nativeEvent.clientY, anchorWorld)
const base = [...fitting.position] as Point
const axisIndex = axis === 'x' ? 0 : axis === 'y' ? 1 : 2
let lastDelta = Number.NaN
return (event: PointerEvent): FittingTransform | null => {
if (start === null) return null
const s = sampleAxis(axis, event.clientX, event.clientY, anchorWorld)
if (s === null) return null
const step = event.shiftKey ? 0 : useEditor.getState().gridSnapStep
const delta = snap(s - start, step)
if (delta === lastDelta) return null
lastDelta = delta
if (step > 0) triggerSFX('sfx:grid-snap')
const next = [...base] as Point
next[axisIndex] = (
axis === 'y' ? Math.max(0, base[axisIndex] + delta) : base[axisIndex] + delta
) as number
return { position: next }
}
}
// Rotate: spin the fitting about one world axis. The cursor's bearing in the
// plane perpendicular to that axis (through the body center) drives the
// angle; world-frame premultiply so the axis means the screen X/Y/Z the user
// expects regardless of how the fitting is already turned.
const rotateCompute =
(axis: RotationAxis) =>
(e: ThreeEvent<PointerEvent>): ((event: PointerEvent) => FittingTransform | null) => {
const normal = AXIS_VECTORS[axis].clone()
const center = toWorld(fitting.position as Point)
const ref = axis === 'y' ? new Vector3(1, 0, 0) : new Vector3(0, 1, 0)
const u = ref
.clone()
.sub(normal.clone().multiplyScalar(ref.dot(normal)))
.normalize()
const v = new Vector3().crossVectors(normal, u)
const plane = new Plane().setFromNormalAndCoplanarPoint(normal, center)
const bearing = (clientX: number, clientY: number): number | null => {
const hit = intersect(clientX, clientY, plane)
if (!hit) return null
const d = hit.sub(center)
return Math.atan2(d.dot(v), d.dot(u))
}
const startBearing = bearing(e.nativeEvent.clientX, e.nativeEvent.clientY)
const startQuat = new Quaternion().setFromEuler(
new Euler(fitting.rotation[0], fitting.rotation[1], fitting.rotation[2]),
)
let lastStep = Number.NaN
return (event: PointerEvent): FittingTransform | null => {
if (startBearing === null) return null
const b = bearing(event.clientX, event.clientY)
if (b === null) return null
// Snap the turn to 45° steps; Shift = smooth (no snap).
const raw = b - startBearing
const delta = event.shiftKey ? raw : Math.round(raw / ROTATE_STEP_RAD) * ROTATE_STEP_RAD
// Tick the rotate SFX each time a fresh snap step is crossed (snapped
// turns only — a smooth Shift-drag has no discrete steps to mark).
if (!event.shiftKey) {
const step = Math.round(raw / ROTATE_STEP_RAD)
if (step !== lastStep) {
lastStep = step
triggerSFX('sfx:item-rotate')
}
}
const turn = new Quaternion().setFromAxisAngle(normal, delta)
const euler = new Euler().setFromQuaternion(turn.multiply(startQuat))
return { rotation: [euler.x, euler.y, euler.z] }
}
}
const beginDimensionDrag =
(dimension: FittingDimension, axisLocal: Vector3, cursor: Cursor) =>
(e: ThreeEvent<PointerEvent>) => {
e.stopPropagation()
const baseValue = fitting[dimension]
const initialPatch = { [dimension]: baseValue } as Partial<DuctFittingNode>
const centerWorld = toWorld(fitting.position as Point)
const axisWorld = axisToWorld(fitting.position as Point, axisLocal)
const start = sampleAxisParameter(
e.nativeEvent.clientX,
e.nativeEvent.clientY,
centerWorld,
axisWorld,
)
const { min, max } = dimensionBounds(dimension)
pauseSceneHistory(useScene)
useViewer.getState().setInputDragging(true)
setDragging(true)
document.body.style.cursor = cursor
let current: Partial<DuctFittingNode> | null = null
let lastValue = Number.NaN
const apply = (patch: Partial<DuctFittingNode>) => {
useScene.getState().updateNodes([
{
id: fitting.id as AnyNodeId,
data: preserveFittingParameters(fitting, patch),
},
])
}
const onMove = (event: PointerEvent) => {
const rawDeltaM =
sampleAxisParameter(event.clientX, event.clientY, centerWorld, axisWorld) - start
const deltaIn = (rawDeltaM / INCHES_TO_METERS) * 2
const nextRaw = baseValue + deltaIn
const nextValue = clamp(event.shiftKey ? nextRaw : snap(nextRaw, RESIZE_STEP_IN), min, max)
if (nextValue === lastValue) return
lastValue = nextValue
current = { [dimension]: nextValue } as Partial<DuctFittingNode>
if (!event.shiftKey) triggerSFX('sfx:grid-snap')
apply(current)
}
const cleanup = () => {
window.removeEventListener('pointermove', onMove)
window.removeEventListener('pointerup', onUp)
window.removeEventListener('pointercancel', onUp)
useViewer.getState().setInputDragging(false)
setDragging(false)
if (document.body.style.cursor === cursor) document.body.style.cursor = ''
}
const onUp = () => {
swallowNextClick()
cleanup()
apply(initialPatch)
resumeSceneHistory(useScene)
if (current) apply(current)
}
window.addEventListener('pointermove', onMove)
window.addEventListener('pointerup', onUp)
window.addEventListener('pointercancel', onUp)
}
const extent = useMemo(() => fittingExtentM(fitting), [fitting])
const p = fitting.position as Point
const base = extent + ARROW_GAP
const fittingRotation = useMemo(
() => new Euler(fitting.rotation[0], fitting.rotation[1], fitting.rotation[2]),
[fitting.rotation],
)
const profileAxes = useMemo(() => {
const hingeAxis = new Vector3(0, 1, 0).applyEuler(fittingRotation).normalize()
const sideAxis = new Vector3(0, 0, 1).applyEuler(fittingRotation).normalize()
const hingeIsVertical = Math.abs(hingeAxis.y) >= Math.SQRT1_2
const hingeDimension: FittingDimension = hingeIsVertical ? 'height' : 'width'
const sideDimension: FittingDimension = hingeIsVertical ? 'width' : 'height'
const hingeEntry = { key: hingeDimension, axis: hingeAxis }
const sideEntry = { key: sideDimension, axis: sideAxis }
return Math.abs(hingeAxis.dot(UP)) >= Math.abs(sideAxis.dot(UP))
? { top: hingeEntry, side: sideEntry }
: { top: sideEntry, side: hingeEntry }
}, [fittingRotation])
const topAxis = useMemo(() => {
const axis = profileAxes.top.axis.clone()
return axis.dot(UP) >= 0 ? axis : axis.multiplyScalar(-1)
}, [profileAxes])
const baseSideAxis = profileAxes.side.axis
const sideAxis = useMemo(
() => baseSideAxis.clone().multiplyScalar(sideSign),
[baseSideAxis, sideSign],
)
useFrame(() => {
if (!frame) return
const cameraPosition = camera.getWorldPosition(new Vector3())
const cameraLocal = frame.worldToLocal(cameraPosition)
const toCamera = cameraLocal.sub(new Vector3(p[0], p[1], p[2]))
const nextSign = baseSideAxis.dot(toCamera) >= 0 ? 1 : -1
setSideSign((current) => (current === nextSign ? current : nextSign))
})
const resizeHandleBase = extent + RESIZE_HANDLE_GAP
const resizeHandles: {
key: FittingDimension
axis: Vector3
cursor: Cursor
guideFrom: Point
guideTo: Point
position: Point
}[] = canResizeRunProfile(fitting)
? [
{
key: profileAxes.top.key,
axis: topAxis,
cursor: 'ns-resize',
guideFrom: [
p[0] + topAxis.x * resizeHandleBase,
p[1] + topAxis.y * resizeHandleBase,
p[2] + topAxis.z * resizeHandleBase,
],
guideTo: [
p[0] + topAxis.x * Math.max(extent * 0.18, 0.04),
p[1] + topAxis.y * Math.max(extent * 0.18, 0.04),
p[2] + topAxis.z * Math.max(extent * 0.18, 0.04),
],
position: [
p[0] + topAxis.x * resizeHandleBase,
p[1] + topAxis.y * resizeHandleBase,
p[2] + topAxis.z * resizeHandleBase,
],
},
{
key: profileAxes.side.key,
axis: sideAxis,
cursor: 'ew-resize',
guideFrom: [
p[0] + sideAxis.x * resizeHandleBase,
p[1] + sideAxis.y * resizeHandleBase,
p[2] + sideAxis.z * resizeHandleBase,
],
guideTo: [
p[0] + sideAxis.x * Math.max(extent * 0.18, 0.04),
p[1] + sideAxis.y * Math.max(extent * 0.18, 0.04),
p[2] + sideAxis.z * Math.max(extent * 0.18, 0.04),
],
position: [
p[0] + sideAxis.x * resizeHandleBase,
p[1] + sideAxis.y * resizeHandleBase,
p[2] + sideAxis.z * resizeHandleBase,
],
},
]
: []
// Six whole-fitting move arrows, one per ± world axis.
const moveArrows: {
key: string
axis: RotationAxis
position: Point
rotationY: number
vertical?: 'up' | 'down'
cursor: Cursor
}[] = [
{ key: '+x', axis: 'x', position: [p[0] + base, p[1], p[2]], rotationY: 0, cursor: 'grab' },
{
key: '-x',
axis: 'x',
position: [p[0] - base, p[1], p[2]],
rotationY: Math.PI,
cursor: 'grab',
},
{
key: '+z',
axis: 'z',
position: [p[0], p[1], p[2] + base],
rotationY: -Math.PI / 2,
cursor: 'grab',
},
{
key: '-z',
axis: 'z',
position: [p[0], p[1], p[2] - base],
rotationY: Math.PI / 2,
cursor: 'grab',
},
{
key: '+y',
axis: 'y',
position: [p[0], p[1] + base, p[2]],
rotationY: 0,
vertical: 'up',
cursor: 'ns-resize',
},
{
key: '-y',
axis: 'y',
position: [p[0], p[1] - base, p[2]],
rotationY: 0,
vertical: 'down',
cursor: 'ns-resize',
},
]
// Three rotation arcs, one per world axis. Each arc wraps its axis (the
// shared `curved-arrow` wraps world +Y by default; `setFromUnitVectors`
// re-aims it) and sits at a diagonal offset in the plane it spins, so the
// three don't pile onto the move arrows.
const d = base * Math.SQRT1_2
const rotateArcs: { key: string; axis: RotationAxis; position: Point; rotation: Point }[] = (
['x', 'y', 'z'] as RotationAxis[]
).map((axis) => {
const q = new Quaternion().setFromUnitVectors(UP, AXIS_VECTORS[axis])
// Spin the arc in place about its own axis so the grip sits where we want
// it without moving its position.
if (axis === 'z') {
q.premultiply(new Quaternion().setFromAxisAngle(AXIS_VECTORS.z, Math.PI / 4))
} else if (axis === 'x') {
q.premultiply(new Quaternion().setFromAxisAngle(AXIS_VECTORS.x, (-145 * Math.PI) / 180))
} else if (axis === 'y') {
q.premultiply(new Quaternion().setFromAxisAngle(AXIS_VECTORS.y, (-45 * Math.PI) / 180))
}
const e = new Euler().setFromQuaternion(q)
const position: Point =
axis === 'x'
? [p[0], p[1] + d, p[2] + d]
: axis === 'y'
? [p[0] + d, p[1], p[2] + d]
: [p[0] + d, p[1] + d, p[2]]
return { key: `r${axis}`, axis, position, rotation: [e.x, e.y, e.z] }
})
if (dragging) {
return <group ref={setFrame} />
}
return (
<group ref={setFrame}>
<HandleCube active={open} onClick={() => setOpen((o) => !o)} position={p} />
{!open &&
resizeHandles.map((handle) => (
<group key={handle.key}>
<DashedResizeGuide from={handle.guideFrom} to={handle.guideTo} />
<ResizeSphereHandle
cursor={handle.cursor}
onPointerDown={beginDimensionDrag(handle.key, handle.axis, handle.cursor)}
position={handle.position}
/>
</group>
))}
{open && (
<>
{moveArrows.map((a) => (
<MoveChevron
cursor={a.cursor}
key={a.key}
onPointerDown={beginDrag(
a.axis === 'y' ? 'ns-resize' : 'grabbing',
moveCompute(a.axis),
)}
position={a.position}
rotationY={a.rotationY}
vertical={a.vertical}
/>
))}
{rotateArcs.map((arc) => (
<RotateArc
key={arc.key}
onPointerDown={beginDrag('grabbing', rotateCompute(arc.axis))}
position={arc.position}
rotation={arc.rotation}
/>
))}
</>
)}
</group>
)
}
export default DuctFittingSelectionAffordance
packages/nodes/src/duct-segment/definition.ts
+9 -1
View File
@@ -1,5 +1,7 @@
import { type AnyNode, type NodeDefinition, useScene } from '@pascal-app/core'
import { ductBodyPaint, ductBodySlots } from '../shared/duct-body-paint'
import { createPathPointMoveAffordance } from '../shared/path-point-affordance'
import { createSegmentMoveAffordance } from '../shared/path-segment-affordance'
import { buildDuctSegmentFloorplan } from './floorplan'
import { buildDuctSegmentGeometry, ductPortDiameterIn } from './geometry'
import { ductSegmentParametrics } from './parametrics'
@@ -75,6 +77,8 @@ export const ductSegmentDefinition: NodeDefinition<typeof DuctSegmentNode> = {
selectable: { hitVolume: 'bbox' },
duplicable: true,
deletable: true,
slots: () => ductBodySlots(),
paint: ductBodyPaint,
},
parametrics: ductSegmentParametrics,
@@ -107,6 +111,7 @@ export const ductSegmentDefinition: NodeDefinition<typeof DuctSegmentNode> = {
n.insulated,
n.insulationR,
n.system,
n.slots,
]),
// Open run ends as typed ports — directions point outward along the
@@ -151,6 +156,9 @@ export const ductSegmentDefinition: NodeDefinition<typeof DuctSegmentNode> = {
// `endpoint-handle` per path vertex; this drags the matching point.
floorplanAffordances: {
'move-path-point': createPathPointMoveAffordance('duct-segment'),
// 2D twin of the 3D side-move arrows: slide a segment perpendicular to
// itself. (Length editing stays on the per-vertex hex handles.)
'move-segment': createSegmentMoveAffordance('duct-segment'),
},
// Selection-time path-point handles (drag to edit a committed run).
@@ -168,7 +176,7 @@ export const ductSegmentDefinition: NodeDefinition<typeof DuctSegmentNode> = {
tool: () => import('./tool'),
toolHints: [
{ key: 'Click', label: 'Start segment' },
{ key: 'Click again', label: 'Place it (locked to 45°)' },
{ key: 'Click again', label: 'Place and continue' },
{ key: 'Alt + drag', label: 'Go vertical ↕, click to place' },
{ key: '[ / ]', label: 'Duct diameter down / up' },
{ key: 'Q', label: 'Round / rect trunk' },
packages/nodes/src/duct-segment/floorplan.ts
+30
View File
@@ -5,6 +5,10 @@ import type { DuctSegmentNode } from './schema'
const SUPPLY_CENTERLINE = '#d4825a'
const RETURN_CENTERLINE = '#5a8ad4'
const BODY_COLOR = '#9ca3af'
/** Move-arrow stand-off past the duct body, in plan meters. */
const SIDE_ARROW_GAP = 0.27
/** Below this plan length a segment / end has no usable direction. */
const MIN_SEGMENT_LEN = 0.05
/**
* Floor-plan representation of a duct run: the path drawn at the duct's
@@ -96,6 +100,32 @@ export function buildDuctSegmentFloorplan(
payload: { pointIndex: indexMap[k]! },
})
}
// Side-move arrows: a front / back pair at each segment midpoint, sliding
// that segment perpendicular to itself. 2D twin of the 3D side-move
// arrows. The arrows stand one duct-radius + gap off the body; `angle`
// points each chevron outward along the segment normal.
const offset = diameterM / 2 + SIDE_ARROW_GAP
for (let k = 0; k < points.length - 1; k++) {
const a = points[k]!
const b = points[k + 1]!
const dx = b[0] - a[0]
const dz = b[1] - a[1]
const len = Math.hypot(dx, dz)
if (len < MIN_SEGMENT_LEN) continue
const normal: [number, number] = [-dz / len, dx / len]
const mid: FloorplanPoint = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2]
for (const side of [1, -1] as const) {
const n: [number, number] = [normal[0] * side, normal[1] * side]
children.push({
kind: 'move-arrow',
point: [mid[0] + n[0] * offset, mid[1] + n[1] * offset],
angle: Math.atan2(n[1], n[0]),
affordance: 'move-segment',
payload: { segmentIndex: indexMap[k]!, normal: n },
})
}
}
}
return { kind: 'group', children }
packages/nodes/src/duct-segment/geometry.ts
+57 -14
View File
@@ -1,9 +1,18 @@
import type { GeometryContext } from '@pascal-app/core'
import {
type ColorPreset,
createSurfaceRoleMaterial,
type RenderShading,
resolveMaterialRef,
resolveSlotDefaultMaterial,
} from '@pascal-app/viewer'
import {
BoxGeometry,
CatmullRomCurve3,
CylinderGeometry,
ExtrudeGeometry,
Group,
type Material,
Matrix4,
Mesh,
MeshStandardMaterial,
@@ -13,6 +22,7 @@ import {
TubeGeometry,
Vector3,
} from 'three'
import { DUCT_BODY_SLOT_DEFAULT, DUCT_BODY_SLOT_ID } from '../shared/duct-body-paint'
import type { DuctSegmentNode } from './schema'
export const INCHES_TO_METERS = 0.0254
@@ -137,7 +147,7 @@ export function buildRectSection(
end: Vector3,
widthM: number,
heightM: number,
material: MeshStandardMaterial,
material: Material,
name: string,
roll = 0,
): Mesh | null {
@@ -200,7 +210,7 @@ export function buildOvalSection(
end: Vector3,
widthM: number,
heightM: number,
material: MeshStandardMaterial,
material: Material,
name: string,
roll = 0,
): Mesh | null {
@@ -226,7 +236,7 @@ export function buildSection(
start: Vector3,
end: Vector3,
radius: number,
material: MeshStandardMaterial,
material: Material,
name: string,
): Mesh | null {
const dir = new Vector3().subVectors(end, start)
@@ -318,6 +328,7 @@ function helixRidgeFor(
type DuctAppearance = {
ductMaterial: 'sheet-metal' | 'spiral' | 'flex' | 'duct-board'
system: 'supply' | 'return'
slots?: Record<string, string>
}
function getSystemTint(node: DuctAppearance): string {
@@ -330,12 +341,25 @@ function getSystemTint(node: DuctAppearance): string {
* metal. Shared with the fitting builder so connected runs and junctions
* look like one piece.
*/
export function createDuctMaterial(_node: DuctAppearance): MeshStandardMaterial {
return new MeshStandardMaterial({
color: '#ffffff',
metalness: 0,
roughness: 0.7,
})
export function createDuctMaterial(
node: DuctAppearance,
sceneMaterials?: GeometryContext['materials'],
shading: RenderShading = 'rendered',
textures = true,
colorPreset: ColorPreset = 'clay',
sceneTheme?: string,
): Material {
if (!textures) {
return createSurfaceRoleMaterial('furnishing', colorPreset, undefined, sceneTheme)
}
const slotRef = node.slots?.[DUCT_BODY_SLOT_ID]
if (slotRef) {
const resolved = resolveMaterialRef(slotRef, sceneMaterials, shading)
if (resolved) return resolved
}
return resolveSlotDefaultMaterial(DUCT_BODY_SLOT_DEFAULT, shading, 0.7)
}
/**
@@ -354,7 +378,14 @@ export function createDuctMaterial(_node: DuctAppearance): MeshStandardMaterial
* identity since the schema has no position field — the path itself is
* absolute within the level).
*/
export function buildDuctSegmentGeometry(node: DuctSegmentNode): Group {
export function buildDuctSegmentGeometry(
node: DuctSegmentNode,
ctx?: GeometryContext,
shading: RenderShading = 'rendered',
textures = true,
colorPreset: ColorPreset = 'clay',
sceneTheme?: string,
): Group {
const group = new Group()
if (node.path.length < 2) return group
@@ -363,7 +394,14 @@ export function buildDuctSegmentGeometry(node: DuctSegmentNode): Group {
const radius = (node.diameter * INCHES_TO_METERS) / 2
const widthM = node.width * INCHES_TO_METERS
const heightM = node.height * INCHES_TO_METERS
const ductMaterial = createDuctMaterial(node)
const ductMaterial = createDuctMaterial(
node,
ctx?.materials,
shading,
textures,
colorPreset,
sceneTheme,
)
const points = node.path.map(([x, y, z]) => new Vector3(x, y, z))
@@ -371,9 +409,10 @@ export function buildDuctSegmentGeometry(node: DuctSegmentNode): Group {
half: number,
rectW: number,
rectH: number,
material: MeshStandardMaterial,
material: Material,
namePrefix: string,
endInsetM = 0,
paintableBody = false,
) => {
for (let i = 0; i < points.length - 1; i++) {
// Loop bounds + min(2) on the schema guarantee both points exist.
@@ -396,7 +435,10 @@ export function buildDuctSegmentGeometry(node: DuctSegmentNode): Group {
: isOval
? buildOvalSection(a, b, rectW, rectH, material, `${namePrefix}-section-${i}`, node.roll)
: buildSection(a, b, half, material, `${namePrefix}-section-${i}`)
if (mesh) group.add(mesh)
if (mesh) {
if (paintableBody) mesh.userData.slotId = DUCT_BODY_SLOT_ID
group.add(mesh)
}
}
// Joint caps at interior points only (skip first and last — they're
// open ends; equipment / terminal / fitting collars cap them). Rect
@@ -410,11 +452,12 @@ export function buildDuctSegmentGeometry(node: DuctSegmentNode): Group {
: new Mesh(new SphereGeometry(half, RADIAL_SEGMENTS, 12), material)
joint.name = `${namePrefix}-joint-${i}`
joint.position.copy(points[i] as Vector3)
if (paintableBody) joint.userData.slotId = DUCT_BODY_SLOT_ID
group.add(joint)
}
}
addRun(radius, widthM, heightM, ductMaterial, 'duct')
addRun(radius, widthM, heightM, ductMaterial, 'duct', 0, true)
// Construction body detail: spiral winds its lock seam, flex its wire
// helix (tight pitch — reads as corrugation) over each round section.
packages/nodes/src/duct-segment/move-tool.tsx
+121 -4
View File
@@ -4,6 +4,7 @@ import {
type AlignmentAnchor,
type AnyNode,
type AnyNodeId,
analyzePortConnectivity,
DuctSegmentNode,
emitter,
type GridEvent,
@@ -11,6 +12,7 @@ import {
useScene,
} from '@pascal-app/core'
import {
consumePlacementDragRelease,
DragBoundingBox,
EDITOR_LAYER,
isGridSnapActive,
@@ -29,6 +31,13 @@ import {
collectGhostAlignmentCandidates,
resolveGhostAlignment,
} from '../shared/ghost-alignment'
import { DuctSegmentGhost, FittingGhost } from '../shared/mep-ghost'
import { collectScenePorts, DUCT_PORT_SYSTEMS } from '../shared/ports'
import { type RunMoveConnectivity, startRunMoveConnectivity } from '../shared/run-move-connectivity'
import {
planRunTranslationOffsets,
type RunTranslationOffsetPlan,
} from '../shared/run-translation-offset'
import { rectSectionAxes } from './geometry'
type Vec3 = [number, number, number]
@@ -108,6 +117,7 @@ export const MoveDuctSegmentTool: React.FC<{ node: AnyNode }> = ({ node }) => {
(node.metadata as Record<string, unknown>).isNew === true
const [previewPath, setPreviewPath] = useState<Vec3[]>(originalPathRef.current)
const [translationGhost, setTranslationGhost] = useState<RunTranslationOffsetPlan | null>(null)
const previewPathRef = useRef<Vec3[]>(originalPathRef.current)
const hasMovedRef = useRef(false)
const activatedAtRef = useRef<number>(Date.now())
@@ -140,6 +150,26 @@ export const MoveDuctSegmentTool: React.FC<{ node: AnyNode }> = ({ node }) => {
}
if (existedAtStart) setMeshHidden(true)
// Carry connected fittings (+ their other runs) as the whole run slides.
// Snapshot once at drag start; only existing runs are mated to anything.
const connectivity: RunMoveConnectivity | null = existedAtStart
? startRunMoveConnectivity(node)
: null
const portConnectivity = existedAtStart
? analyzePortConnectivity(node, useScene.getState().nodes)
: null
const scenePorts = existedAtStart
? collectScenePorts({ excludeNodeId: nodeId, systems: DUCT_PORT_SYSTEMS })
: []
const nodesById = useScene.getState().nodes
const profile = {
shape: duct.shape,
diameter: duct.diameter,
width: duct.width,
height: duct.height,
}
let lastTranslationPlan: RunTranslationOffsetPlan | null = null
const setPreview = (path: Vec3[]) => {
previewPathRef.current = path
setPreviewPath(path)
@@ -179,12 +209,30 @@ export const MoveDuctSegmentTool: React.FC<{ node: AnyNode }> = ({ node }) => {
}
prevSnapRef.current = cur
hasMovedRef.current = true
setPreview(originalPath.map(([x, y, z]) => [x + dx, y, z + dz] as Vec3))
const nextPath = originalPath.map(([x, y, z]) => [x + dx, y, z + dz] as Vec3)
setPreview(nextPath)
lastTranslationPlan =
existedAtStart && portConnectivity
? planRunTranslationOffsets({
duct,
translatedPath: nextPath,
profile,
connections: portConnectivity.connections,
scenePorts,
nodesById,
})
: null
if (lastTranslationPlan) connectivity?.clear()
else connectivity?.preview({ path: nextPath })
setTranslationGhost(lastTranslationPlan)
}
const commit = (event: GridEvent) => {
const commit = (event: GridEvent, fromDragRelease = false) => {
if (committed) return
if (Date.now() - activatedAtRef.current < 150) {
// The 150ms debounce only guards click-to-place against the arming click
// double-firing; a press-drag release is a distinct pointerup gesture, so
// it skips the guard (a quick drag-flick still commits).
if (!fromDragRelease && Date.now() - activatedAtRef.current < 150) {
event.nativeEvent?.stopPropagation?.()
return
}
@@ -207,10 +255,44 @@ export const MoveDuctSegmentTool: React.FC<{ node: AnyNode }> = ({ node }) => {
useScene.getState().createNode(created as AnyNode, node.parentId as AnyNodeId)
selectId = created.id as AnyNodeId
} else {
useScene.getState().updateNode(nodeId, { path: finalPath } as Partial<AnyNode>)
const translationPlan =
portConnectivity &&
planRunTranslationOffsets({
duct,
translatedPath: finalPath,
profile,
connections: portConnectivity.connections,
scenePorts,
nodesById,
})
if (translationPlan) {
useScene.getState().applyNodeChanges({
create: [...translationPlan.fittings, ...translationPlan.connectors].map((created) => ({
node: created as AnyNode,
parentId: node.parentId as AnyNodeId,
})),
update: [
{ id: nodeId, data: { path: translationPlan.ductPath } as Partial<AnyNode> },
...translationPlan.updates,
],
})
} else {
// Fold connected-fitting / sibling-run follow-updates into the SAME
// batch as the moved run so the whole joint is one undo step.
const followUpdates = connectivity?.commitUpdates({ path: finalPath }) ?? []
useScene
.getState()
.updateNodes([
{ id: nodeId, data: { path: finalPath } as Partial<AnyNode> },
...followUpdates,
])
}
useScene.getState().markDirty(nodeId)
}
useScene.temporal.getState().pause()
// Followers are committed to the store — drop their live overrides so
// renderers read the canonical path/position.
connectivity?.clear()
setMeshHidden(false)
useAlignmentGuides.getState().clear()
@@ -222,6 +304,8 @@ export const MoveDuctSegmentTool: React.FC<{ node: AnyNode }> = ({ node }) => {
}
const onCancel = () => {
connectivity?.clear()
setTranslationGhost(null)
if (existedAtStart) {
setMeshHidden(false)
useViewer.getState().setSelection({ selectedIds: [nodeId] })
@@ -233,14 +317,37 @@ export const MoveDuctSegmentTool: React.FC<{ node: AnyNode }> = ({ node }) => {
useEditor.getState().setMovingNode(null)
}
// Press-drag-release: when the move was engaged by the drag gesture (the
// selection rig's move cross), `placementDragMode` is set, so commit on
// pointer-up at the last previewed path instead of waiting for a second
// click — same contract as the fitting move tool.
const onPlacementDragPointerUp = (event: PointerEvent) => {
if (!consumePlacementDragRelease(event)) return
if (!hasMovedRef.current) {
onCancel()
return
}
commit(
{
nativeEvent: event,
stopPropagation: () => event.stopPropagation(),
} as unknown as GridEvent,
true,
)
}
emitter.on('grid:move', onMove)
emitter.on('grid:click', commit)
emitter.on('tool:cancel', onCancel)
window.addEventListener('pointerup', onPlacementDragPointerUp)
return () => {
emitter.off('grid:move', onMove)
emitter.off('grid:click', commit)
emitter.off('tool:cancel', onCancel)
window.removeEventListener('pointerup', onPlacementDragPointerUp)
connectivity?.clear()
setTranslationGhost(null)
useAlignmentGuides.getState().clear()
if (existedAtStart) setMeshHidden(false)
useScene.temporal.getState().resume()
@@ -263,6 +370,16 @@ export const MoveDuctSegmentTool: React.FC<{ node: AnyNode }> = ({ node }) => {
{segments.map((seg, i) => (
<GhostSegment a={seg.a} b={seg.b} duct={duct} key={`ghost-${i}`} />
))}
{translationGhost?.fittings.map((fitting) => (
<FittingGhost fitting={fitting} key={`translation-fitting-${fitting.id}`} tint="valid" />
))}
{translationGhost?.connectors.map((connector) => (
<DuctSegmentGhost
duct={connector}
key={`translation-connector-${connector.id}`}
tint="valid"
/>
))}
<DragBoundingBox
centerY={0}
nodeId={node.id}
packages/nodes/src/duct-segment/selection.tsx
+1398 -142
View File
File diff suppressed because it is too large Load Diff
packages/nodes/src/duct-segment/tool.tsx
+472 -258
View File
@@ -2,11 +2,13 @@
import {
type AnyNode,
type CeilingNode,
type DuctFittingNode,
DuctSegmentNode,
emitter,
type GridEvent,
getLevelHeight,
sceneRegistry,
getCeilingAt,
getCeilingHeightAt,
useScene,
} from '@pascal-app/core'
import {
@@ -22,8 +24,17 @@ import {
} from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { Html } from '@react-three/drei'
import { useEffect, useRef, useState } from 'react'
import { type Group, Matrix4, Vector3 } from 'three'
import { useEffect, useMemo, useRef, useState } from 'react'
import {
type BufferGeometry,
DoubleSide,
type Group,
Matrix4,
Path,
Shape,
ShapeGeometry,
Vector3,
} from 'three'
import { getDuctFittingPorts } from '../duct-fitting/ports'
import {
planCrossAtRunBody,
@@ -33,6 +44,7 @@ import {
} from '../shared/auto-fitting'
import { alignDrawPoint, clearDrawAlignment } from '../shared/draw-alignment'
import { LevelOffsetGroup } from '../shared/level-offset-group'
import { FittingGhost } from '../shared/mep-ghost'
import {
collectScenePorts,
DUCT_PORT_SYSTEMS,
@@ -43,17 +55,17 @@ import {
type ScenePort,
} from '../shared/ports'
import { ductSegmentDefinition } from './definition'
import { rectSectionAxes, rollToContinueAcrossElbow } from './geometry'
import { ductPortDiameterIn, rectSectionAxes, rollToContinueAcrossElbow } from './geometry'
/**
* One-segment-at-a-time placement tool for round duct segments.
* Continuous placement tool for duct segments.
*
* Mouse-driven model:
* - **First click** anchors the segment start (port snap joins onto an
* existing run / fitting collar).
* - **Second click** commits a two-point duct immediately and re-arms
* the tool — no polyline accumulation, no finish gesture. Chain runs
* by clicking again near the end you just placed (port snap).
* - **Second click** commits a two-point duct immediately and keeps the
* segment end anchored, so the next click continues the run like wall
* drafting. No polyline accumulation, no finish gesture.
* - **Auto-elbow**: when either end snapped onto another RUN's open
* port at an angle (15–90°, vertical turns included), an elbow
* fitting is minted at the joint and the duct pulls back to its
@@ -73,9 +85,10 @@ import { rectSectionAxes, rollToContinueAcrossElbow } from './geometry'
* vertical mouse motion drives Y. Click commits the riser segment.
* - **[ / ]** step the duct diameter through nominal US sizes; the
* ghost preview and the committed node both use it.
* - **C** toggles ceiling-level placement: the start point lands at
* the level's ceiling height (duct top hugging the ceiling) instead
* of the floor. Subsequent points inherit the start's Y as usual.
* - **C** toggles ceiling-level placement: each point lands just below
* the ceiling actually covering it (duct top hugging that ceiling)
* instead of the floor, so a run tracks per-room ceiling heights.
* Points not under any ceiling fall back to the floor.
* - Esc clears an anchored start point.
*/
const PREVIEW_OPACITY = 0.55
@@ -98,6 +111,11 @@ const ALT_PIXELS_PER_METER = 100
const ALT_Y_MIN_M = -3
const ALT_Y_MAX_M = 10
/** green-500 — the project's bounding-box / placeable accent. The cursor
* ring + vertical line recolour to this while the point is snapped onto an
* existing run, so the coincidence reads with the familiar snap green. */
const SNAP_CURSOR_COLOR = '#22c55e'
function snap(value: number, step: number): number {
if (step <= 0) return value
return Math.round(value / step) * step
@@ -167,6 +185,14 @@ function continuityRollFrom(port: ScenePort | null, newDir: Vector3): number | n
return rollToContinueAcrossElbow(srcDir, srcRoll, srcDir, newDir)
}
function continuityRollForRun(
startPort: ScenePort | null,
endPort: ScenePort | null,
dir: Vector3,
): number {
return continuityRollFrom(startPort, dir) ?? continuityRollFrom(endPort, dir) ?? 0
}
/**
* Nearest typed port — duct run ends, fitting collars, anything whose
* kind registers `def.ports` — within snap range of `point` on the XZ
@@ -263,6 +289,209 @@ function projectToAngleLock(
return [from[0] + Math.cos(snapped) * d, from[1], from[2] + Math.sin(snapped) * d]
}
/** The full set of nodes a drawn segment produces. The drawn `ducts`
* (and any trunk `tails` from a tee / cross split) are previewed by the
* duct ghost already; `fittings` are the auto-inserted elbow / tee /
* cross nodes the ghost preview draws so the user sees them before the
* commit. Shared by `commitSegment` and the live preview so what you see
* is exactly what lands. */
type DuctDrawPlan = {
fittings: DuctFittingNode[]
ducts: DuctSegmentNode[]
tails: DuctSegmentNode[]
updates: { id: AnyNode['id']; data: Partial<AnyNode> }[]
}
const elbowPlanFor = (
port: ScenePort | null,
awayDir: [number, number, number],
profile: DraftProfile,
) => {
if (!port) return null
const owner = useScene.getState().nodes[port.nodeId]
if (owner?.type !== 'duct-segment') return null
const plan = planElbowAtPort(port, awayDir, profile)
if (!plan) return null
// Trim the run's snapped endpoint back to the elbow's inlet collar.
const path = owner.path.map((p) => [...p] as [number, number, number])
const index = port.id === 'start' ? 0 : path.length - 1
const neighbor = path[index === 0 ? 1 : index - 1]!
const remaining = Math.hypot(
plan.trimmedPortPoint[0] - neighbor[0],
plan.trimmedPortPoint[1] - neighbor[1],
plan.trimmedPortPoint[2] - neighbor[2],
)
// The trim must leave a real piece of the existing run AND not flip it.
const original = path[index]!
const originalLen = Math.hypot(
original[0] - neighbor[0],
original[1] - neighbor[1],
original[2] - neighbor[2],
)
if (remaining < 0.08 || remaining >= originalLen) return null
path[index] = plan.trimmedPortPoint
return { ...plan, trim: { id: port.nodeId, data: { path } as Partial<AnyNode> } }
}
const realignPlanFor = (port: ScenePort | null, awayDir: [number, number, number]) => {
if (!port) return null
const owner = useScene.getState().nodes[port.nodeId]
if (owner?.type !== 'duct-fitting') return null
return planElbowRealign(owner, port.id, awayDir)
}
/**
* Pure planner for a drawn duct segment: given its endpoints and what
* each end snapped onto (an open port, or a run body for a tee / cross
* tap), decide every node the commit creates / updates — auto-inserted
* elbows / tees / crosses, the drawn run (split in two when it crosses a
* trunk), trunk tails, and trim / realign updates. Reads the live scene
* graph but mutates nothing, so the live preview can call it each frame
* to ghost the fittings before the commit applies the identical plan.
*/
function planDuctDraw(
start: [number, number, number],
end: [number, number, number],
startPort: ScenePort | null,
startBody: RunBodyHit | null,
endPort: ScenePort | null,
endBody: RunBodyHit | null,
profile: DraftProfile,
): DuctDrawPlan | null {
const length = Math.hypot(end[0] - start[0], end[1] - start[1], end[2] - start[2])
if (length < 1e-4) return null
const dir: [number, number, number] = [
(end[0] - start[0]) / length,
(end[1] - start[1]) / length,
(end[2] - start[2]) / length,
]
const startPlan = elbowPlanFor(startPort, dir, profile)
const endPlan = elbowPlanFor(endPort, [-dir[0], -dir[1], -dir[2]], profile)
const startRealign = startPlan ? null : realignPlanFor(startPort, dir)
const endRealign = endPlan ? null : realignPlanFor(endPort, [-dir[0], -dir[1], -dir[2]])
const trunkBody = startPlan ? null : startBody
const trunkOwner = trunkBody ? useScene.getState().nodes[trunkBody.nodeId] : null
const teePlan =
trunkBody && trunkOwner?.type === 'duct-segment'
? planTeeAtRunBody(trunkOwner, trunkBody, dir, profile)
: null
const endTrunkBody = endPlan || endRealign ? null : endBody
const endTrunkOwner = endTrunkBody ? useScene.getState().nodes[endTrunkBody.nodeId] : null
const endTeePlan =
endTrunkBody && endTrunkOwner?.type === 'duct-segment'
? planTeeAtRunBody(endTrunkOwner, endTrunkBody, [-dir[0], -dir[1], -dir[2]], profile)
: null
let ductStart =
startPlan?.collarPoint ?? teePlan?.branchCollar ?? startRealign?.collarPoint ?? start
let ductEnd = endPlan?.collarPoint ?? endTeePlan?.branchCollar ?? endRealign?.collarPoint ?? end
const remaining = Math.hypot(
ductEnd[0] - ductStart[0],
ductEnd[1] - ductStart[1],
ductEnd[2] - ductStart[2],
)
let plans = [startPlan, endPlan].filter((p) => p !== null)
let tee = teePlan
let endTee = endTeePlan && endTrunkBody?.nodeId === trunkBody?.nodeId ? null : endTeePlan
if (!endTee && endTeePlan) ductEnd = endRealign?.collarPoint ?? end
let realigns = [startRealign, endRealign].filter((p) => p !== null)
const crossHit = findRunBodyCrossingXZ(start, end, BODY_SNAP_RADIUS_M)
const crossOwner = crossHit ? useScene.getState().nodes[crossHit.nodeId] : null
const crossTappedElsewhere =
crossHit?.nodeId === trunkBody?.nodeId || crossHit?.nodeId === endTrunkBody?.nodeId
let cross =
crossHit && !crossTappedElsewhere && crossOwner?.type === 'duct-segment'
? planCrossAtRunBody(crossOwner, crossHit, dir, profile)
: null
if (remaining <= 0.08) {
plans = []
tee = null
endTee = null
realigns = []
cross = null
ductStart = start
ductEnd = end
}
// Rect / oval continuity: roll the new run's cross-section so its
// profile stays continuous with whatever either end joined.
let roll = 0
if (profile.shape !== 'round') {
const newDir = new Vector3(...dir)
roll = continuityRollForRun(startPort, endPort, newDir)
}
const defaults = ductSegmentDefinition.defaults()
const toolDefaults = useEditor.getState().toolDefaults['duct-segment'] ?? {}
const makeDuct = (from: [number, number, number], to: [number, number, number]) =>
DuctSegmentNode.parse({
...defaults,
...toolDefaults,
name: profile.shape === 'rect' ? 'Trunk' : 'Duct run',
path: [from, to],
shape: profile.shape,
diameter: profile.diameter,
width: profile.width,
height: profile.height,
roll,
})
const ducts = cross
? [
dist2(ductStart, cross.branchCollarNear) > 0.08 * 0.08
? makeDuct(ductStart, cross.branchCollarNear)
: null,
dist2(cross.branchCollarFar, ductEnd) > 0.08 * 0.08
? makeDuct(cross.branchCollarFar, ductEnd)
: null,
].filter((d) => d !== null)
: [makeDuct(ductStart, ductEnd)]
const fittings: DuctFittingNode[] = [
...plans.map((p) => p.fitting),
...(tee ? [tee.fitting] : []),
...(endTee ? [endTee.fitting] : []),
...(cross ? [cross.fitting] : []),
]
const tails: DuctSegmentNode[] = [
...(tee ? [tee.trunkTail] : []),
...(endTee ? [endTee.trunkTail] : []),
...(cross ? [cross.trunkTail] : []),
]
const updates: { id: AnyNode['id']; data: Partial<AnyNode> }[] = [
...plans.map((p) => p.trim),
...(tee ? [tee.trunkUpdate as { id: AnyNode['id']; data: Partial<AnyNode> }] : []),
...(endTee ? [endTee.trunkUpdate as { id: AnyNode['id']; data: Partial<AnyNode> }] : []),
...(cross ? [cross.trunkUpdate as { id: AnyNode['id']; data: Partial<AnyNode> }] : []),
...realigns.map((p) => p.update as { id: AnyNode['id']; data: Partial<AnyNode> }),
]
return { fittings, ducts, tails, updates }
}
function ductEndPort(duct: DuctSegmentNode, id: 'start' | 'end'): ScenePort | null {
if (duct.path.length < 2) return null
const index = id === 'start' ? 0 : duct.path.length - 1
const neighborIndex = id === 'start' ? 1 : duct.path.length - 2
const position = duct.path[index]!
const neighbor = duct.path[neighborIndex]!
const dx = position[0] - neighbor[0]
const dy = position[1] - neighbor[1]
const dz = position[2] - neighbor[2]
const len = Math.hypot(dx, dy, dz)
const direction: [number, number, number] =
len < 1e-9 ? [1, 0, 0] : [dx / len, dy / len, dz / len]
return {
id,
nodeId: duct.id,
position,
direction,
diameter: ductPortDiameterIn(duct),
system: duct.system,
}
}
const DuctSegmentTool = () => {
const activeLevelId = useViewer((s) => s.selection.levelId)
const unit = useViewer((s) => s.unit)
@@ -289,12 +518,24 @@ const DuctSegmentTool = () => {
// Ceiling mode (toggle with C): the first point lands at the level's
// ceiling height (duct top hugging the ceiling) instead of the floor.
const [ceilingMode, setCeilingMode] = useState(false)
// When the cursor is within snap range of an existing duct's endpoint we
// surface a brighter indicator and commit at the endpoint's exact coords.
// The shared coordinate when the cursor is within snap range of an existing
// duct (null = free placement). Drives the green cursor highlight so the
// user sees the next click will join an existing run, not freeform-place.
const [snapTarget, setSnapTarget] = useState<[number, number, number] | null>(null)
// In ceiling mode, the ceiling the cursor is currently under — rendered as
// a translucent overlay so the duct reads as hung against a real surface
// rather than a dot floating in space. Null when off-ceiling.
const [hoverCeiling, setHoverCeiling] = useState<CeilingNode | null>(null)
// True while Alt is held with a last point on the draft — drives the
// vertical-cylinder ghost and the cursor HUD label.
const [altActive, setAltActive] = useState(false)
// What the in-flight cursor end currently snaps onto (port end, or a
// run body for a tee / cross tap). Drives the auto-fitting GHOST so the
// user sees the elbow / tee / cross the next click will mint.
const [endSnap, setEndSnap] = useState<{ port: ScenePort | null; body: RunBodyHit | null }>({
port: null,
body: null,
})
// Mirror into refs so emitter callbacks (closing over the first render's
// setState) read the latest values without re-subscribing.
const draftRef = useRef(draftPoints)
@@ -321,246 +562,63 @@ const DuctSegmentTool = () => {
useEffect(() => {
if (!activeLevelId) return
/**
* Auto-elbow gate: only joints onto another RUN's open end get a
* fitting minted. Ports on fittings / equipment / terminals are
* already proper connections — a duct mates straight onto those.
*
* The elbow's junction sits ON the drawn corner, so the existing run
* must trim back one leg to make room (`trim` update). Plans that
* would trim the run to (or past) nothing are dropped — that corner
* stays a plain butt joint. Guards against the snapped node having
* been deleted between clicks.
*/
const elbowPlanFor = (port: ScenePort | null, awayDir: [number, number, number]) => {
if (!port) return null
const owner = useScene.getState().nodes[port.nodeId]
if (owner?.type !== 'duct-segment') return null
const plan = planElbowAtPort(port, awayDir, profileRef.current)
if (!plan) return null
// Trim the run's snapped endpoint back to the elbow's inlet collar.
const path = owner.path.map((p) => [...p] as [number, number, number])
const index = port.id === 'start' ? 0 : path.length - 1
const neighbor = path[index === 0 ? 1 : index - 1]!
const remaining = Math.hypot(
plan.trimmedPortPoint[0] - neighbor[0],
plan.trimmedPortPoint[1] - neighbor[1],
plan.trimmedPortPoint[2] - neighbor[2],
)
// The trim must leave a real piece of the existing run AND not flip
// it (trimmed point past the neighbor) — otherwise skip the fitting.
const original = path[index]!
const originalLen = Math.hypot(
original[0] - neighbor[0],
original[1] - neighbor[1],
original[2] - neighbor[2],
)
if (remaining < 0.08 || remaining >= originalLen) return null
path[index] = plan.trimmedPortPoint
return { ...plan, trim: { id: port.nodeId, data: { path } as Partial<AnyNode> } }
}
/**
* Realign gate: the snapped port belongs to an existing ELBOW's open
* collar — re-aim that elbow (junction + mated collar fixed, free
* collar swings to the drawn direction). Null when the owner isn't
* an elbow or the required turn leaves the 15–90° range.
*/
const realignPlanFor = (port: ScenePort | null, awayDir: [number, number, number]) => {
if (!port) return null
const owner = useScene.getState().nodes[port.nodeId]
if (owner?.type !== 'duct-fitting') return null
return planElbowRealign(owner, port.id, awayDir)
}
// One segment per gesture: first click anchors the start, second
// click commits a two-point duct immediately. No selection switch —
// the tool stays armed so the next click starts the next segment
// (port snap joins it onto the end just committed).
// Continuous chain: first click anchors the start, each following
// click commits one two-point duct and uses that duct's far end as
// the next anchor. No selection switch or finish gesture.
//
// When an end of the segment snapped onto another run's open port at
// an angle, an elbow fitting is minted at that joint and the duct is
// pulled back to the elbow's outlet collar — corners get real
// fittings instead of butt joints.
// All the auto-fitting decisions (elbow / tee / cross) live in the
// shared `planDuctDraw` so the live ghost previews exactly what this
// commit applies.
const commitSegment = (
start: [number, number, number],
end: [number, number, number],
endPort: ScenePort | null = null,
endBody: RunBodyHit | null = null,
) => {
const length = Math.hypot(end[0] - start[0], end[1] - start[1], end[2] - start[2])
if (length < 1e-4) return
const dir: [number, number, number] = [
(end[0] - start[0]) / length,
(end[1] - start[1]) / length,
(end[2] - start[2]) / length,
]
const startPlan = elbowPlanFor(startPortRef.current, dir)
const endPlan = elbowPlanFor(endPort, [-dir[0], -dir[1], -dir[2]])
// Existing-fitting joints: re-aim the elbow whose collar was hit so
// it faces the drawn run instead of leaving a mismatched butt joint.
const startRealign = startPlan ? null : realignPlanFor(startPortRef.current, dir)
const endRealign = endPlan ? null : realignPlanFor(endPort, [-dir[0], -dir[1], -dir[2]])
// Tee tap: the start snapped onto a run's BODY (not an end port) —
// split the trunk and branch from the tee's collar.
const trunkBody = startPlan ? null : startBodyRef.current
const trunkOwner = trunkBody ? useScene.getState().nodes[trunkBody.nodeId] : null
const teePlan =
trunkBody && trunkOwner?.type === 'duct-segment'
? planTeeAtRunBody(trunkOwner, trunkBody, dir, profileRef.current)
: null
// End tee tap: the END landed on a run's BODY — split that trunk and
// the new duct ends at the tee's branch collar. The branch leaves
// toward the drawn run (back along -dir, since dir points start→end).
const endTrunkBody = endPlan || endRealign ? null : endBody
const endTrunkOwner = endTrunkBody ? useScene.getState().nodes[endTrunkBody.nodeId] : null
const endTeePlan =
endTrunkBody && endTrunkOwner?.type === 'duct-segment'
? planTeeAtRunBody(
endTrunkOwner,
endTrunkBody,
[-dir[0], -dir[1], -dir[2]],
profileRef.current,
)
: null
let ductStart =
startPlan?.collarPoint ?? teePlan?.branchCollar ?? startRealign?.collarPoint ?? start
let ductEnd =
endPlan?.collarPoint ?? endTeePlan?.branchCollar ?? endRealign?.collarPoint ?? end
// The collar pull-back must leave a real piece of duct between the
// fittings; if not, fall back to the plain joint.
const remaining = Math.hypot(
ductEnd[0] - ductStart[0],
ductEnd[1] - ductStart[1],
ductEnd[2] - ductStart[2],
const plan = planDuctDraw(
start,
end,
startPortRef.current,
startBodyRef.current,
endPort,
endBody,
profileRef.current,
)
let plans = [startPlan, endPlan].filter((p) => p !== null)
let tee = teePlan
// Both ends tapping the SAME trunk would split one polyline twice in
// a single change (conflicting updates + double tail) — drop the end
// tee in that rare case and let the end butt-join instead.
let endTee = endTeePlan && endTrunkBody?.nodeId === trunkBody?.nodeId ? null : endTeePlan
if (!endTee && endTeePlan) ductEnd = endRealign?.collarPoint ?? end
let realigns = [startRealign, endRealign].filter((p) => p !== null)
// Cross tap: the drawn run passes straight THROUGH a trunk's body
// (interior crossing, not an end touch). Split that trunk and the
// drawn duct into two halves meeting the cross's opposed branch
// collars. Skip a run already tapped by a start / end tee so one
// polyline isn't split twice in a single change.
const crossHit = findRunBodyCrossingXZ(start, end, BODY_SNAP_RADIUS_M)
const crossOwner = crossHit ? useScene.getState().nodes[crossHit.nodeId] : null
const crossTappedElsewhere =
crossHit?.nodeId === trunkBody?.nodeId || crossHit?.nodeId === endTrunkBody?.nodeId
let cross =
crossHit && !crossTappedElsewhere && crossOwner?.type === 'duct-segment'
? planCrossAtRunBody(crossOwner, crossHit, dir, profileRef.current)
: null
if (remaining <= 0.08) {
plans = []
tee = null
endTee = null
realigns = []
cross = null
ductStart = start
ductEnd = end
}
// Rect / oval continuity: roll the new run's cross-section so its
// profile stays continuous with whatever either end joined — run
// end or fitting collar, turn or straight continuation (see
// `continuityRollFrom`). The start joint wins if both ends join.
let roll = 0
if (profileRef.current.shape !== 'round') {
const newDir = new Vector3(...dir)
roll =
continuityRollFrom(startPortRef.current, newDir) ??
continuityRollFrom(endPort, newDir) ??
0
}
const defaults = ductSegmentDefinition.defaults()
const toolDefaults = useEditor.getState().toolDefaults['duct-segment'] ?? {}
const makeDuct = (from: [number, number, number], to: [number, number, number]) =>
DuctSegmentNode.parse({
...defaults,
...toolDefaults,
name: profileRef.current.shape === 'rect' ? 'Trunk' : 'Duct run',
path: [from, to],
shape: profileRef.current.shape,
diameter: profileRef.current.diameter,
width: profileRef.current.width,
height: profileRef.current.height,
roll,
})
// A cross splits the drawn run into two halves that meet its opposed
// branch collars; otherwise it's one duct end-to-end. Degenerate
// halves (the crossing too near an end) are dropped.
const ducts = cross
? [
dist2(ductStart, cross.branchCollarNear) > 0.08 * 0.08
? makeDuct(ductStart, cross.branchCollarNear)
: null,
dist2(cross.branchCollarFar, ductEnd) > 0.08 * 0.08
? makeDuct(cross.branchCollarFar, ductEnd)
: null,
].filter((d) => d !== null)
: [makeDuct(ductStart, ductEnd)]
if (!plan) return
// One atomic change: trim / split the joined runs, create the
// fittings + the new duct. Single undo step.
useScene.getState().applyNodeChanges({
create: [
...plans.map((plan) => ({ node: plan.fitting, parentId: activeLevelId })),
...(tee
? [
{ node: tee.fitting, parentId: activeLevelId },
{ node: tee.trunkTail, parentId: activeLevelId },
]
: []),
...(endTee
? [
{ node: endTee.fitting, parentId: activeLevelId },
{ node: endTee.trunkTail, parentId: activeLevelId },
]
: []),
...(cross
? [
{ node: cross.fitting, parentId: activeLevelId },
{ node: cross.trunkTail, parentId: activeLevelId },
]
: []),
...ducts.map((node) => ({ node, parentId: activeLevelId })),
],
update: [
...plans.map((plan) => plan.trim),
...(tee ? [tee.trunkUpdate as { id: AnyNode['id']; data: Partial<AnyNode> }] : []),
...(endTee ? [endTee.trunkUpdate as { id: AnyNode['id']; data: Partial<AnyNode> }] : []),
...(cross ? [cross.trunkUpdate as { id: AnyNode['id']; data: Partial<AnyNode> }] : []),
...realigns.map((plan) => plan.update as { id: AnyNode['id']; data: Partial<AnyNode> }),
...plan.fittings.map((node) => ({ node, parentId: activeLevelId })),
...plan.tails.map((node) => ({ node, parentId: activeLevelId })),
...plan.ducts.map((node) => ({ node, parentId: activeLevelId })),
],
update: plan.updates,
})
const nextDuct = plan.ducts.at(-1)
const nextStart = nextDuct ? nextDuct.path[nextDuct.path.length - 1]! : end
const nextPort = nextDuct ? ductEndPort(nextDuct, 'end') : endPort
triggerSFX('sfx:item-place')
setDraftPoints([])
setDraftPoints([nextStart])
setSnapTarget(null)
startPortRef.current = null
startBodyRef.current = null
setEndSnap({ port: null, body: null })
startPortRef.current = nextPort
startBodyRef.current = nextPort ? null : endBody
altAnchorRef.current = null
setAltActive(false)
}
// Base Y for a fresh run's first point: floor (0) by default, or just
// below the level's ceiling in ceiling mode so the duct's top hugs the
// ceiling (centerline = ceiling height − radius).
const resolveBaseY = (): number => {
// Y for a point at level-local `[x, z]`. Floor (0) when ceiling mode is
// off. In ceiling mode, query the ceiling actually covering that point
// and hang the duct just below it (centerline = ceiling underside −
// half the duct's vertical dimension) so its top hugs the ceiling. Each
// point follows its own ceiling, so a run stepping into a room with a
// different ceiling height tracks that change. Points not under any
// ceiling fall back to the floor.
const resolveCeilingY = (x: number, z: number): number => {
if (!ceilingModeRef.current) return 0
const ceiling = getLevelHeight(
activeLevelId,
useScene.getState().nodes,
(wallId) => sceneRegistry.nodes.get(wallId)?.position.y,
)
const ceiling = getCeilingHeightAt(activeLevelId, useScene.getState().nodes, x, z)
if (ceiling === null) return 0
const p = profileRef.current
const verticalIn = p.shape === 'round' ? p.diameter : p.height
return Math.max(0, ceiling - (verticalIn * 0.0254) / 2)
@@ -578,11 +636,11 @@ const DuctSegmentTool = () => {
// every snapping mode except `off` (the raw-cursor bypass).
const snapEnabled = isGridSnapActive() || isMagneticSnapActive() || isAngleSnapActive()
const last = draftRef.current.at(-1)
// First point of the run: grid-snapped placement at the base Y (floor,
// or ceiling height in ceiling mode). Endpoint snap can still join an
// existing run.
// First point of the run: grid-snapped placement. Y follows the
// ceiling under the cursor in ceiling mode (floor otherwise).
// Endpoint snap can still join an existing run.
if (!last) {
const baseY = resolveBaseY()
const baseY = resolveCeilingY(event.localPosition[0], event.localPosition[2])
const raw: [number, number, number] = [
event.localPosition[0],
baseY,
@@ -605,15 +663,20 @@ const DuctSegmentTool = () => {
const body = findNearestRunBodyXZ(probe, BODY_SNAP_RADIUS_M)
if (body) return { point: body.point, snapped: body.point, port: null, body }
}
const sx = snap(raw[0], step)
const sz = snap(raw[2], step)
return {
point: [snap(raw[0], step), baseY, snap(raw[2], step)],
point: [sx, resolveCeilingY(sx, sz), sz],
snapped: null,
port: null,
body: null,
}
}
// Subsequent points: angle-locked to 45° from `last` in `angles` mode.
// Y stays at `last[1]` — depth changes come from Alt-vertical risers.
// Y inherits `last[1]` for the angle/probe math; the free placement below
// re-resolves it from the ceiling under the point in ceiling mode, so a run
// stepping into a room with a different ceiling height tracks that change.
// Depth changes otherwise come from Alt-vertical risers.
const rawXZ: [number, number, number] = [
event.localPosition[0],
last[1],
@@ -643,8 +706,11 @@ const DuctSegmentTool = () => {
const body = findNearestRunBodyXZ(probe, BODY_SNAP_RADIUS_M)
if (body) return { point: body.point, snapped: body.point, port: null, body }
}
const fx = snap(angled[0], step)
const fz = snap(angled[2], step)
const fy = ceilingModeRef.current ? resolveCeilingY(fx, fz) : angled[1]
return {
point: [snap(angled[0], step), angled[1], snap(angled[2], step)],
point: [fx, fy, fz],
snapped: null,
port: null,
body: null,
@@ -685,6 +751,17 @@ const DuctSegmentTool = () => {
return { ...r, point }
}
// The ceiling the cursor is under (ceiling mode only) — drives the
// translucent surface overlay so the in-flight point reads as hung
// against a real ceiling. Cleared when off-ceiling or out of mode.
const updateHoverCeiling = (x: number, z: number) => {
if (!ceilingModeRef.current) {
setHoverCeiling(null)
return
}
setHoverCeiling(getCeilingAt(activeLevelId, useScene.getState().nodes, x, z))
}
const onMove = (event: GridEvent) => {
const clientY = (event.nativeEvent as { clientY?: number } | undefined)?.clientY
if (typeof clientY === 'number') lastClientYRef.current = clientY
@@ -695,12 +772,16 @@ const DuctSegmentTool = () => {
clearDrawAlignment()
setCursorPos(point)
setSnapTarget(null)
setEndSnap({ port: null, body: null })
updateHoverCeiling(point[0], point[2])
return
}
}
const { point, snapped } = resolveAlignedPoint(event)
const { point, snapped, port, body } = resolveAlignedPoint(event)
setCursorPos(point)
setSnapTarget(snapped)
setEndSnap({ port, body: port ? null : body })
updateHoverCeiling(point[0], point[2])
}
const onClick = (event: GridEvent) => {
@@ -787,12 +868,14 @@ const DuctSegmentTool = () => {
setProfile((p) => ({ ...p, shape: p.shape === 'round' ? 'rect' : 'round' }))
triggerSFX('sfx:grid-snap')
} else if (e.key === 'c' || e.key === 'C') {
// Toggle ceiling mode. Only the first point reads the base Y, so
// toggling mid-run is a no-op until the next fresh segment — flip
// it only while unanchored to keep the behaviour predictable.
// Toggle ceiling mode: points hang from the ceiling above them
// (duct top hugging the ceiling) instead of sitting on the floor.
// Only flip while unanchored — already-placed points keep their Y,
// so a mid-run toggle would split a run across two height regimes.
if (draftRef.current.length > 0) return
e.preventDefault()
setCeilingMode((m) => !m)
setHoverCeiling(null)
triggerSFX('sfx:grid-snap')
}
}
@@ -811,6 +894,8 @@ const DuctSegmentTool = () => {
setDraftPoints([])
setCursorPos(null)
setSnapTarget(null)
setEndSnap({ port: null, body: null })
setHoverCeiling(null)
startPortRef.current = null
startBodyRef.current = null
}
@@ -842,6 +927,22 @@ const DuctSegmentTool = () => {
previewSegments.push({ a: last, b: cursorPos })
}
// Ghost the auto-inserted fittings (elbow / tee / cross) the next click
// will mint, by running the SAME planner the commit uses against the
// in-flight endpoints. Skipped in Alt-vertical mode (no XZ tap there).
const ghostFittings =
last && cursorPos && !altActive
? (planDuctDraw(
last,
cursorPos,
startPortRef.current,
startBodyRef.current,
endSnap.port,
endSnap.body,
profile,
)?.fittings ?? [])
: []
// Wall-style dimension pill above the cursor: absolute world coords before
// the first point, signed per-axis deltas from the last placed point while
// a segment is in flight. The actively-driven axis is emphasised — Y in
@@ -872,15 +973,50 @@ const DuctSegmentTool = () => {
: 'z'
: undefined
// When the in-flight point hangs above the floor (ceiling mode, or an
// Alt riser), the cursor marker itself rides AT the point (where the
// mouse is aiming and the next click commits), and a plumb line drops
// straight down to a faint ground ring on the floor below — so the plan
// position stays legible from any angle. A floor-level point keeps the
// standard fixed-height cursor look.
const cursorElevation = cursorPos ? cursorPos[1] : 0
const isElevated = cursorElevation > 0.001
const cursorGround: [number, number, number] | null = cursorPos
? [cursorPos[0], 0, cursorPos[2]]
: null
return (
<LevelOffsetGroup>
{/* Ceiling-mode surface highlight — the ceiling the cursor is under,
tinted at its own elevation so the duct reads as hung against a
real surface instead of a point floating in space. */}
{ceilingMode && hoverCeiling && <CeilingHighlight ceiling={hoverCeiling} />}
{/* Cursor marker — the same ground ring + vertical line + tool-icon
badge walls and items show while drawing (icon resolved from the
active `duct-segment` structure-tools entry). The dimension pill
rides just above the cursor. */}
{cursorPos && (
{cursorPos && cursorGround && (
<>
<CursorSphere position={cursorPos} ref={cursorRef} />
{/* In ceiling mode (or any elevated point) the ground ring sits on
the floor below the cursor and the line rises to the placement
point, with the bright dot + tool badge at its tip — exactly
where the next click commits. At floor level it's the standard
fixed-height cursor. */}
{isElevated ? (
<CursorSphere
color={snapTarget ? SNAP_CURSOR_COLOR : undefined}
dotAtTip
height={cursorElevation}
position={cursorGround}
ref={cursorRef}
/>
) : (
<CursorSphere
color={snapTarget ? SNAP_CURSOR_COLOR : undefined}
position={cursorPos}
ref={cursorRef}
/>
)}
{pillParts && (
<group position={cursorPos}>
<Html
@@ -889,28 +1025,19 @@ const DuctSegmentTool = () => {
style={{ pointerEvents: 'none', userSelect: 'none' }}
zIndexRange={[100, 0]}
>
<div className="flex flex-col items-center gap-1">
<DimensionPill parts={pillParts} primary={pillPrimary} unit={unit} />
<div className="flex flex-col items-center gap-2">
{ceilingMode && !last && (
<div className="whitespace-nowrap rounded-full border border-border/60 bg-background/90 px-3 py-0.5 text-[10px] text-muted-foreground shadow-sm backdrop-blur">
Ceiling · C to toggle
</div>
)}
<DimensionPill parts={pillParts} primary={pillPrimary} unit={unit} />
</div>
</Html>
</group>
)}
</>
)}
{/* Endpoint-snap halo — brighter ring around the target endpoint
while the cursor is within snap range, so the user sees that the
next click will join an existing duct rather than freeform-place. */}
{snapTarget && (
<mesh layers={EDITOR_LAYER} position={snapTarget}>
<sphereGeometry args={[0.12, 24, 16]} />
<meshBasicMaterial color="#818cf8" depthTest={false} opacity={0.35} transparent />
</mesh>
)}
{/* Committed point pips */}
{draftPoints.map((p, i) => (
<mesh key={`pt-${i}`} layers={EDITOR_LAYER} position={p}>
@@ -923,25 +1050,112 @@ const DuctSegmentTool = () => {
<PreviewSegment
a={seg.a}
b={seg.b}
endPort={endSnap.port}
key={`seg-${i}`}
profile={profile}
startPort={startPortRef.current}
/>
))}
{/* Auto-fitting ghosts — the elbow / tee / cross the next click mints. */}
{ghostFittings.map((fitting) => (
<FittingGhost fitting={fitting} key={fitting.id} />
))}
</LevelOffsetGroup>
)
}
/**
* Build a horizontal `ShapeGeometry` for a ceiling polygon (with holes) in
* level-local XZ, laid flat in the XZ plane. Mirrors the ceiling renderer /
* move-tool convention (Z negated, then rotated onto the floor plane).
*/
function buildCeilingShape(
polygon: Array<[number, number]>,
holes: Array<Array<[number, number]>>,
): BufferGeometry | null {
if (polygon.length < 3) return null
const shape = new Shape()
const first = polygon[0]!
shape.moveTo(first[0], -first[1])
for (let i = 1; i < polygon.length; i++) {
const pt = polygon[i]!
shape.lineTo(pt[0], -pt[1])
}
shape.closePath()
for (const holePolygon of holes) {
if (holePolygon.length < 3) continue
const hole = new Path()
const hf = holePolygon[0]!
hole.moveTo(hf[0], -hf[1])
for (let i = 1; i < holePolygon.length; i++) {
const pt = holePolygon[i]!
hole.lineTo(pt[0], -pt[1])
}
hole.closePath()
shape.holes.push(hole)
}
const geometry = new ShapeGeometry(shape)
geometry.rotateX(-Math.PI / 2)
return geometry
}
/**
* Translucent overlay of the ceiling the cursor is under, drawn at the
* ceiling's own height. Gives the in-flight duct point a real surface to
* read against, so "hung against the ceiling" is visible from any angle
* instead of being a dot floating in space.
*/
function CeilingHighlight({ ceiling }: { ceiling: CeilingNode }) {
const geometry = useMemo(
() => buildCeilingShape(ceiling.polygon, ceiling.holes),
[ceiling.polygon, ceiling.holes],
)
const outline = useMemo(() => {
if (ceiling.polygon.length < 2) return null
const pts = ceiling.polygon.map(([x, z]) => new Vector3(x, 0, z))
const f = ceiling.polygon[0]!
pts.push(new Vector3(f[0], 0, f[1]))
return pts
}, [ceiling.polygon])
if (!geometry) return null
const y = ceiling.height ?? 2.5
return (
<group position={[0, y, 0]}>
<mesh geometry={geometry} layers={EDITOR_LAYER} renderOrder={1}>
<meshBasicMaterial
color="#818cf8"
depthWrite={false}
opacity={0.15}
side={DoubleSide}
transparent
/>
</mesh>
{outline && (
<line>
<bufferGeometry
ref={(g) => {
if (g) g.setFromPoints(outline)
}}
/>
<lineBasicMaterial color="#818cf8" opacity={0.6} transparent />
</line>
)}
</group>
)
}
function PreviewSegment({
a,
b,
profile,
startPort,
endPort,
}: {
a: [number, number, number]
b: [number, number, number]
profile: DraftProfile
startPort: ScenePort | null
endPort: ScenePort | null
}) {
const start = new Vector3(...a)
const end = new Vector3(...b)
@@ -963,7 +1177,7 @@ function PreviewSegment({
if (!m) return
// Same basis AND roll as the commit will use, so the ghost
// shows the orientation that actually lands.
const roll = continuityRollFrom(startPort, dir) ?? 0
const roll = continuityRollForRun(startPort, endPort, dir)
const { width: x, height: z } = rectSectionAxes(dir, roll)
m.quaternion.setFromRotationMatrix(new Matrix4().makeBasis(x, dir, z))
}}
packages/nodes/src/eyebrow-vent/move-tool.tsx
+30 -2
View File
@@ -5,6 +5,7 @@ import {
type EyebrowVentNode,
emitter,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
sceneRegistry,
useScene,
@@ -21,8 +22,14 @@ import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
roofSegmentLocalToBuildingLocal,
snapRelativeRoofDragTarget,
} from '../shared/relative-roof-drag'
import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface'
import {
clearRoofSurfacePlacementGuides,
publishRoofSurfaceNodePlacementGuides,
snapRoofSurfaceNodeTarget,
} from '../shared/roof-surface-placement-guides'
import EyebrowVentPreview from './preview'
/**
@@ -71,10 +78,21 @@ export default function MoveEyebrowVentTool({ node }: { node: EyebrowVentNode })
lastSnap = null
setPreviewPos(null)
setPreviewSurfaceQuat(null)
clearRoofSurfacePlacementGuides()
}
const resolveSnappedTarget = (event: RoofEvent): RelativeRoofDragTarget | null => {
const rawTarget = roofDrag.resolve(event)
if (!rawTarget) return null
return snapRoofSurfaceNodeTarget({
target: snapRelativeRoofDragTarget(rawTarget, event.nativeEvent?.shiftKey === true),
node,
bypass: event.nativeEvent?.shiftKey === true,
})
}
const updatePreview = (event: RoofEvent) => {
const target = roofDrag.resolve(event)
const target = resolveSnappedTarget(event)
if (!target) {
clearTarget()
return
@@ -101,12 +119,18 @@ export default function MoveEyebrowVentTool({ node }: { node: EyebrowVentNode })
target.localZ,
]),
)
publishRoofSurfaceNodePlacementGuides({
roof: event.node as RoofNode,
segment: target.segment,
center: [target.localX, target.localY, target.localZ],
node,
})
event.stopPropagation()
}
const onRoofClick = (event: RoofEvent) => {
if (committed) return
const target = lastTarget ?? roofDrag.resolve(event)
const target = lastTarget ?? resolveSnappedTarget(event)
if (!target) return
committed = true
const targetSegmentId = target.segment.id as AnyNodeId
@@ -147,6 +171,7 @@ export default function MoveEyebrowVentTool({ node }: { node: EyebrowVentNode })
if (obj) obj.visible = true
triggerSFX('sfx:item-place')
clearRoofSurfacePlacementGuides()
exitMoveMode()
event.stopPropagation()
}
@@ -165,6 +190,7 @@ export default function MoveEyebrowVentTool({ node }: { node: EyebrowVentNode })
useScene.getState().deleteNode(node.id as AnyNodeId)
useScene.temporal.getState().resume()
markToolCancelConsumed()
clearRoofSurfacePlacementGuides()
exitMoveMode()
return
}
@@ -184,6 +210,7 @@ export default function MoveEyebrowVentTool({ node }: { node: EyebrowVentNode })
useScene.temporal.getState().resume()
markToolCancelConsumed()
clearRoofSurfacePlacementGuides()
exitMoveMode()
}
@@ -213,6 +240,7 @@ export default function MoveEyebrowVentTool({ node }: { node: EyebrowVentNode })
const obj = sceneRegistry.nodes.get(node.id)
if (obj) obj.visible = true
clearRoofSurfacePlacementGuides()
useScene.temporal.getState().resume()
}
}, [exitMoveMode, node])
packages/nodes/src/eyebrow-vent/tool.tsx
+18 -1
View File
@@ -16,6 +16,11 @@ import * as THREE from 'three'
import { RoofAttachmentFallbackPreview } from '../shared/roof-attachment-fallback-preview'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import { getAnalyticalNormal, getDownSlopeYaw, surfaceQuatFromNormal } from '../shared/roof-surface'
import {
clearRoofSurfacePlacementGuides,
publishRoofSurfacePlacementGuides,
roofSurfaceFootprintFromNode,
} from '../shared/roof-surface-placement-guides'
import { eyebrowVentDefinition } from './definition'
import EyebrowVentPreview from './preview'
@@ -80,6 +85,15 @@ const EyebrowVentTool = () => {
setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0))
setPreviewRotation(getDownSlopeYaw(hit.localX, hit.localZ, hit.segment))
setPreviewPos(worldToBuildingLocal(wx, wy, wz))
publishRoofSurfacePlacementGuides({
roof: event.node as RoofNode,
segment: hit.segment,
center: [hit.localX, hit.localY, hit.localZ],
footprint: roofSurfaceFootprintFromNode({
...previewNode,
rotation: getDownSlopeYaw(hit.localX, hit.localZ, hit.segment),
}),
})
event.stopPropagation()
}
@@ -104,6 +118,7 @@ const EyebrowVentTool = () => {
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
setSelection({ selectedIds: [vent.id] })
triggerSFX('sfx:item-place')
clearRoofSurfacePlacementGuides()
event.stopPropagation()
}
@@ -115,8 +130,9 @@ const EyebrowVentTool = () => {
emitter.off('roof:move', updatePreview)
emitter.off('roof:enter', updatePreview)
emitter.off('roof:click', onClick)
clearRoofSurfacePlacementGuides()
}
}, [activeBuildingId, setSelection])
}, [activeBuildingId, setSelection, previewNode])
return (
<>
@@ -126,6 +142,7 @@ const EyebrowVentTool = () => {
onInvalidTarget={() => {
setPreviewPos(null)
setPreviewSurfaceQuat(null)
clearRoofSurfacePlacementGuides()
}}
/>
{activeBuildingId && previewPos && previewSurfaceQuat && (
packages/nodes/src/fence/tool.tsx
+1
View File
@@ -560,6 +560,7 @@ export const FenceTool: React.FC = () => {
}
const onGridClick = (event: GridEvent) => {
if (!previewRef.current) return
if (buildingState.current === 1 && event.nativeEvent.detail >= 2) {
stopDrafting()
return
packages/nodes/src/gutter/move-tool.tsx
+20 -3
View File
@@ -17,7 +17,11 @@ import {
useEditor,
} from '@pascal-app/editor'
import { useCallback, useEffect, useState } from 'react'
import { createRelativeRoofDrag } from '../shared/relative-roof-drag'
import { createRelativeRoofDrag, snapRelativeRoofDragTarget } from '../shared/relative-roof-drag'
import {
clearRoofSurfacePlacementGuides,
publishRoofSurfaceNodePlacementGuides,
} from '../shared/roof-surface-placement-guides'
import { type EaveSnap, resolveEaveSnap } from './eave-snap'
import GutterPreview from './preview'
@@ -83,11 +87,13 @@ export default function MoveGutterTool({ node }: { node: GutterNode }) {
lastTarget = null
lastSnap = null
setTarget(null)
clearRoofSurfacePlacementGuides()
}
const resolveTarget = (event: RoofEvent): GutterDragTarget | null => {
const target = roofDrag.resolve(event)
if (!target) return null
const rawTarget = roofDrag.resolve(event)
if (!rawTarget) return null
const target = snapRelativeRoofDragTarget(rawTarget, event.nativeEvent?.shiftKey === true)
return {
segment: target.segment,
snap: resolveEaveSnap(target.segment, target.localX, target.localZ),
@@ -131,6 +137,13 @@ export default function MoveGutterTool({ node }: { node: GutterNode }) {
},
snap,
})
publishRoofSurfaceNodePlacementGuides({
roof,
segment: target.segment,
center: [snap.eaveX, snap.eaveY, snap.eaveZ],
node: { ...node, rotation: snap.rotation },
mode: 'linear-edge',
})
event.stopPropagation()
}
@@ -178,6 +191,7 @@ export default function MoveGutterTool({ node }: { node: GutterNode }) {
if (obj) obj.visible = true
triggerSFX('sfx:item-place')
clearRoofSurfacePlacementGuides()
exitMoveMode()
event.stopPropagation()
}
@@ -196,6 +210,7 @@ export default function MoveGutterTool({ node }: { node: GutterNode }) {
useScene.getState().deleteNode(node.id as AnyNodeId)
useScene.temporal.getState().resume()
markToolCancelConsumed()
clearRoofSurfacePlacementGuides()
exitMoveMode()
return
}
@@ -215,6 +230,7 @@ export default function MoveGutterTool({ node }: { node: GutterNode }) {
useScene.temporal.getState().resume()
markToolCancelConsumed()
clearRoofSurfacePlacementGuides()
exitMoveMode()
}
@@ -244,6 +260,7 @@ export default function MoveGutterTool({ node }: { node: GutterNode }) {
const obj = sceneRegistry.nodes.get(node.id)
if (obj) obj.visible = true
clearRoofSurfacePlacementGuides()
useScene.temporal.getState().resume()
}
}, [exitMoveMode, node])
packages/nodes/src/gutter/tool.tsx
+19 -2
View File
@@ -13,6 +13,11 @@ import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useRef, useState } from 'react'
import { RoofAttachmentFallbackPreview } from '../shared/roof-attachment-fallback-preview'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import {
clearRoofSurfacePlacementGuides,
publishRoofSurfacePlacementGuides,
roofSurfaceFootprintFromNode,
} from '../shared/roof-surface-placement-guides'
import { gutterDefinition } from './definition'
import { type EaveSnap, resolveEaveSnap } from './eave-snap'
import GutterPreview from './preview'
@@ -100,6 +105,13 @@ const GutterTool = () => {
},
snap,
})
publishRoofSurfacePlacementGuides({
roof,
segment: hit.segment,
center: [snap.eaveX, snap.eaveY, snap.eaveZ],
footprint: roofSurfaceFootprintFromNode({ ...previewNode, rotation: snap.rotation }),
mode: 'linear-edge',
})
event.stopPropagation()
}
@@ -129,6 +141,7 @@ const GutterTool = () => {
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
setSelection({ selectedIds: [gutter.id] })
triggerSFX('sfx:item-place')
clearRoofSurfacePlacementGuides()
event.stopPropagation()
}
@@ -140,15 +153,19 @@ const GutterTool = () => {
emitter.off('roof:move', updatePreview)
emitter.off('roof:enter', updatePreview)
emitter.off('roof:click', onClick)
clearRoofSurfacePlacementGuides()
}
}, [activeBuildingId, setSelection])
}, [activeBuildingId, setSelection, previewNode])
return (
<>
<RoofAttachmentFallbackPreview
activeBuildingId={activeBuildingId}
ghost={<GutterPreview node={previewNode} invalid />}
onInvalidTarget={() => setTarget(null)}
onInvalidTarget={() => {
setTarget(null)
clearRoofSurfacePlacementGuides()
}}
/>
{activeBuildingId && target && (
<group position={target.roof.position} rotation-y={target.roof.rotation}>
packages/nodes/src/item/renderer.tsx
+16 -1
View File
@@ -8,6 +8,7 @@ import {
type Interactive,
type ItemNode,
isSlotMaterialName,
itemClipRegistry,
LIBRARY_MATERIAL_REF_PREFIX,
type LightEffect,
SCENE_MATERIAL_REF_PREFIX,
@@ -379,7 +380,7 @@ const ModelRenderer = ({ node }: { node: ItemNode }) => {
mesh.castShadow = !hasGlass
mesh.receiveShadow = !hasGlass
}
}, [ref, scene, shading, textures, colorPreset, node.slots, sceneMaterials])
}, [shading, textures, colorPreset, node.slots, sceneMaterials])
const interactive = interactiveRef.current
const animEffect =
@@ -387,6 +388,20 @@ const ModelRenderer = ({ node }: { node: ItemNode }) => {
const lightEffects =
interactive?.effects.filter((e): e is LightEffect => e.kind === 'light') ?? []
// Expose this item's ambient clip (e.g. a fan's spin) to the GLB bake. The
// catalog GLB owns the clip; it isn't in the scene graph, so the export can't
// find it without this registry. The bake retargets it onto the baked subtree.
useEffect(() => {
if (!animEffect) return
const clipName = animEffect.clips.on ?? animEffect.clips.loop
const clip = clipName ? animations.find((c) => c.name === clipName) : undefined
if (!clip) return
itemClipRegistry.set(node.id, { clip, loop: true })
return () => {
itemClipRegistry.delete(node.id)
}
}, [node.id, animEffect, animations])
// useGLTF caches scenes, and Clone shares child geometry/material references.
// Undo can unmount one item while another clone of the same asset still needs them.
return (
packages/nodes/src/lineset/connect.test.ts
-124
View File
@@ -1,124 +0,0 @@
import { describe, expect, test } from 'bun:test'
import { planLinesetConnect } from './connect'
import type { LinesetNode } from './schema'
type Point = [number, number, number]
/** Minimal stand-in — the planner only reads `id` and `path`. */
function line(id: string, path: Point[]): LinesetNode {
return { id, path } as unknown as LinesetNode
}
describe('planLinesetConnect', () => {
test('no shared endpoint → create', () => {
const plan = planLinesetConnect(
[
line('a', [
[0, 0, 0],
[1, 0, 0],
]),
],
[5, 0, 0],
[6, 0, 0],
)
expect(plan).toEqual({
kind: 'create',
path: [
[5, 0, 0],
[6, 0, 0],
],
})
})
test('new start meets run end → extend, old end becomes interior', () => {
const a = line('a', [
[0, 0, 0],
[1, 0, 0],
])
const plan = planLinesetConnect([a], [1, 0, 0], [1, 0, 2])
expect(plan).toEqual({
kind: 'extend',
id: 'a',
path: [
[0, 0, 0],
[1, 0, 0],
[1, 0, 2],
],
})
})
test('new start meets run start → extend, run reversed so join is interior', () => {
const a = line('a', [
[0, 0, 0],
[1, 0, 0],
])
const plan = planLinesetConnect([a], [0, 0, 0], [0, 0, 2])
expect(plan).toEqual({
kind: 'extend',
id: 'a',
path: [
[1, 0, 0],
[0, 0, 0],
[0, 0, 2],
],
})
})
test('new end meets a run → extend, new segment leads', () => {
const a = line('a', [
[1, 0, 0],
[2, 0, 0],
])
const plan = planLinesetConnect([a], [1, 0, 3], [1, 0, 0])
expect(plan).toEqual({
kind: 'extend',
id: 'a',
path: [
[1, 0, 3],
[1, 0, 0],
[2, 0, 0],
],
})
})
test('both ends meet distinct runs → bridge, second run absorbed', () => {
const a = line('a', [
[0, 0, 0],
[1, 0, 0],
])
const b = line('b', [
[1, 0, 5],
[2, 0, 5],
])
const plan = planLinesetConnect([a, b], [1, 0, 0], [1, 0, 5])
expect(plan).toEqual({
kind: 'bridge',
id: 'a',
deleteId: 'b',
path: [
[0, 0, 0],
[1, 0, 0],
[1, 0, 5],
[2, 0, 5],
],
})
})
test('both ends meet the SAME run → not a bridge (extends at start)', () => {
const a = line('a', [
[0, 0, 0],
[1, 0, 0],
])
const plan = planLinesetConnect([a], [0, 0, 0], [1, 0, 0])
expect(plan.kind).toBe('extend')
})
test('float drift within tolerance still coincides', () => {
const a = line('a', [
[0, 0, 0],
[1, 0, 0],
])
const plan = planLinesetConnect([a], [1.0000001, 0, 0], [1, 0, 2])
expect(plan.kind).toBe('extend')
})
})
packages/nodes/src/lineset/connect.ts
-98
View File
@@ -1,98 +0,0 @@
import type { LinesetNode } from './schema'
type Point = [number, number, number]
type LinesetId = LinesetNode['id']
/** Coincidence tolerance (meters) for folding endpoints into one run. The
* draw tool snaps onto an existing run's endpoint exactly, so this only
* needs to absorb float drift, not user aim. */
const COINCIDENT_EPS_M = 1e-3
function samePoint(a: Point, b: Point): boolean {
return (
Math.abs(a[0] - b[0]) < COINCIDENT_EPS_M &&
Math.abs(a[1] - b[1]) < COINCIDENT_EPS_M &&
Math.abs(a[2] - b[2]) < COINCIDENT_EPS_M
)
}
/** Which terminal of `line` coincides with `p`, if either. */
function matchEnd(line: LinesetNode, p: Point): 'start' | 'end' | null {
const path = line.path as Point[]
if (samePoint(path[0]!, p)) return 'start'
if (samePoint(path[path.length - 1]!, p)) return 'end'
return null
}
/** First lineset whose start or end coincides with `p`. */
function findConnection(
existing: LinesetNode[],
p: Point,
): { line: LinesetNode; side: 'start' | 'end' } | null {
for (const line of existing) {
if (line.path.length < 2) continue
const side = matchEnd(line, p)
if (side) return { line, side }
}
return null
}
/** Path re-ordered so the connecting terminal is its LAST point. */
function endLast(path: Point[], side: 'start' | 'end'): Point[] {
return side === 'end' ? path : [...path].reverse()
}
/** Path re-ordered so the connecting terminal is its FIRST point. */
function startFirst(path: Point[], side: 'start' | 'end'): Point[] {
return side === 'start' ? path : [...path].reverse()
}
/**
* Outcome of committing a new `start`→`end` segment against the existing
* lineset runs on the same level:
* - `create` — no shared endpoint; place a fresh standalone run.
* - `extend` — one end lands on run `id`; grow that run's path so the old
* terminal becomes an interior point (the geometry miters it).
* - `bridge` — both ends land on two *different* runs; weld them plus the
* new segment into one path on `id` and delete the absorbed `deleteId`.
*/
export type LinesetConnectPlan =
| { kind: 'create'; path: Point[] }
| { kind: 'extend'; id: LinesetId; path: Point[] }
| { kind: 'bridge'; id: LinesetId; path: Point[]; deleteId: LinesetId }
/**
* Decide how a freshly drawn `start`→`end` segment folds into existing
* lineset runs that share an endpoint coordinate. Pure: returns a plan, the
* caller mutates the scene. Coords are level-local, so `existing` must be
* pre-filtered to the segment's level.
*/
export function planLinesetConnect(
existing: LinesetNode[],
start: Point,
end: Point,
): LinesetConnectPlan {
const atStart = findConnection(existing, start)
const atEnd = findConnection(existing, end)
// Both ends meet distinct runs → weld the three into one path.
if (atStart && atEnd && atStart.line.id !== atEnd.line.id) {
const left = endLast(atStart.line.path as Point[], atStart.side) // ...→ start
const right = startFirst(atEnd.line.path as Point[], atEnd.side) // end →...
return {
kind: 'bridge',
id: atStart.line.id,
path: [...left, ...right],
deleteId: atEnd.line.id,
}
}
if (atStart) {
const base = endLast(atStart.line.path as Point[], atStart.side) // ...→ start
return { kind: 'extend', id: atStart.line.id, path: [...base, end] }
}
if (atEnd) {
const base = startFirst(atEnd.line.path as Point[], atEnd.side) // end →...
return { kind: 'extend', id: atEnd.line.id, path: [start, ...base] }
}
return { kind: 'create', path: [start, end] }
}
packages/nodes/src/lineset/geometry.ts
+10 -4
View File
@@ -46,8 +46,12 @@ function buildRun(
*
* One line per node — what the ghost previews is exactly what commits. To run
* the suction line beside the liquid line, draw them as two separate linesets
* rather than rendering both together off one path. Joint spheres cap interior
* corners so turns read as continuous pipe.
* rather than rendering both together off one path.
*
* Each line is a standalone two-point node (no fitting system, unlike ducts),
* so a sphere caps BOTH endpoints. On a free end it just rounds the cap; where
* two segments share a coordinate the coincident spheres fill the miter gap, so
* the turn reads as continuous pipe.
*
* Children are level-local meters; `<ParametricNodeRenderer>` owns the
* node transform (identity today — the path is absolute within the level).
@@ -87,8 +91,10 @@ export function buildLinesetGeometry(node: LinesetNode): Group {
}
}
// Joint caps at interior corners so turns read as continuous pipe.
for (let i = 1; i < points.length - 1; i++) {
// Spherical caps at every point. Interior corners read as continuous pipe;
// endpoint caps round the open ends and, where two separate segments share a
// coordinate, the coincident spheres fill the miter so the turn looks welded.
for (let i = 0; i < points.length; i++) {
const joint = new Mesh(new SphereGeometry(copperR, RADIAL_SEGMENTS, 10), copperMat)
joint.name = `lineset-copper-joint-${i}`
joint.position.copy(points[i] as Vector3)
packages/nodes/src/lineset/index.ts
-1
View File
@@ -1,4 +1,3 @@
export { type LinesetConnectPlan, planLinesetConnect } from './connect'
export { linesetDefinition } from './definition'
export { buildLinesetGeometry } from './geometry'
export { LinesetNode } from './schema'
packages/nodes/src/lineset/move-tool.tsx
+24 -2
View File
@@ -29,6 +29,7 @@ import {
collectGhostAlignmentCandidates,
resolveGhostAlignment,
} from '../shared/ghost-alignment'
import { type RunMoveConnectivity, startRunMoveConnectivity } from '../shared/run-move-connectivity'
type Vec3 = [number, number, number]
@@ -139,6 +140,12 @@ export const MoveLinesetTool: React.FC<{ node: AnyNode }> = ({ node }) => {
}
if (existedAtStart) setMeshHidden(true)
// Carry connected fittings (+ their other runs) as the whole run slides.
// Snapshot once at drag start; only existing runs are mated to anything.
const connectivity: RunMoveConnectivity | null = existedAtStart
? startRunMoveConnectivity(node)
: null
const setPreview = (path: Vec3[]) => {
previewPathRef.current = path
setPreviewPath(path)
@@ -178,7 +185,9 @@ export const MoveLinesetTool: React.FC<{ node: AnyNode }> = ({ node }) => {
}
prevSnapRef.current = cur
hasMovedRef.current = true
setPreview(originalPath.map(([x, y, z]) => [x + dx, y, z + dz] as Vec3))
const nextPath = originalPath.map(([x, y, z]) => [x + dx, y, z + dz] as Vec3)
setPreview(nextPath)
connectivity?.preview({ path: nextPath })
}
const commit = (event: GridEvent) => {
@@ -206,10 +215,21 @@ export const MoveLinesetTool: React.FC<{ node: AnyNode }> = ({ node }) => {
useScene.getState().createNode(created as AnyNode, node.parentId as AnyNodeId)
selectId = created.id as AnyNodeId
} else {
useScene.getState().updateNode(nodeId, { path: finalPath } as Partial<AnyNode>)
// Fold connected-fitting / sibling-run follow-updates into the SAME
// batch as the moved run so the whole joint is one undo step.
const followUpdates = connectivity?.commitUpdates({ path: finalPath }) ?? []
useScene
.getState()
.updateNodes([
{ id: nodeId, data: { path: finalPath } as Partial<AnyNode> },
...followUpdates,
])
useScene.getState().markDirty(nodeId)
}
useScene.temporal.getState().pause()
// Followers are committed to the store — drop their live overrides so
// renderers read the canonical path/position.
connectivity?.clear()
setMeshHidden(false)
useAlignmentGuides.getState().clear()
@@ -221,6 +241,7 @@ export const MoveLinesetTool: React.FC<{ node: AnyNode }> = ({ node }) => {
}
const onCancel = () => {
connectivity?.clear()
if (existedAtStart) {
setMeshHidden(false)
useViewer.getState().setSelection({ selectedIds: [nodeId] })
@@ -240,6 +261,7 @@ export const MoveLinesetTool: React.FC<{ node: AnyNode }> = ({ node }) => {
emitter.off('grid:move', onMove)
emitter.off('grid:click', commit)
emitter.off('tool:cancel', onCancel)
connectivity?.clear()
useAlignmentGuides.getState().clear()
if (existedAtStart) setMeshHidden(false)
useScene.temporal.getState().resume()
packages/nodes/src/lineset/selection.tsx
+2 -279
View File
@@ -1,282 +1,5 @@
'use client'
import {
type AnyNodeId,
type LinesetNode,
pauseSceneHistory,
resumeSceneHistory,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { DimensionPill, EDITOR_LAYER, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { Html } from '@react-three/drei'
import { createPortal, type ThreeEvent, useThree } from '@react-three/fiber'
import { useEffect, useRef, useState } from 'react'
import { type Object3D, Plane, Raycaster, Vector2, Vector3 } from 'three'
import { collectScenePorts, findNearestPortXZ, REFRIGERANT_PORT_SYSTEMS } from '../shared/ports'
import { createRefrigerantLineSelectionAffordance } from '../shared/refrigerant-line-selection'
const HANDLE_RADIUS = 0.08
const PORT_SNAP_RADIUS_M = 0.4
const UP = new Vector3(0, 1, 0)
function snap(value: number, step: number): number {
if (step <= 0) return value
return Math.round(value / step) * step
}
type Point = [number, number, number]
/**
* Selection-time editing for committed lineset runs: one draggable handle
* per path point. Mirrors the duct-segment path-handle system, but dragged
* run endpoints snap onto refrigerant ports only.
*
* Handles are PORTALED into the lineset's registered scene group so they
* share its exact frame. Drag raycasts run in world space and convert hits
* back into the group's local frame before writing the path.
*/
const LinesetSelectionAffordance = () => {
const selectedIds = useViewer((s) => s.selection.selectedIds)
const lineset = useScene((s) => {
if (selectedIds.length !== 1) return null
const node = s.nodes[selectedIds[0] as AnyNodeId]
return node?.type === 'lineset' ? (node as LinesetNode) : null
})
const linesetId = lineset?.id ?? null
const [target, setTarget] = useState<Object3D | null>(null)
useEffect(() => {
if (!linesetId) {
setTarget(null)
return
}
let frameId = 0
const resolve = () => {
const next = sceneRegistry.nodes.get(linesetId as AnyNodeId) ?? null
setTarget((cur) => (cur === next ? cur : next))
if (!next) frameId = window.requestAnimationFrame(resolve)
}
resolve()
return () => window.cancelAnimationFrame(frameId)
}, [linesetId])
if (!lineset || !target) return null
return createPortal(<LinesetPointHandles lineset={lineset} target={target} />, target, undefined)
}
const LinesetPointHandles = ({ lineset, target }: { lineset: LinesetNode; target: Object3D }) => {
const { camera, gl } = useThree()
const unit = useViewer((s) => s.unit)
const [draggingIndex, setDraggingIndex] = useState<number | null>(null)
const [hoverIndex, setHoverIndex] = useState<number | null>(null)
const dragRef = useRef<{
index: number
initialPath: Point[]
current: Point
cleanup: () => void
} | null>(null)
const makeRay = (clientX: number, clientY: number) => {
const rect = gl.domElement.getBoundingClientRect()
const ndc = new Vector2(
((clientX - rect.left) / rect.width) * 2 - 1,
-((clientY - rect.top) / rect.height) * 2 + 1,
)
const raycaster = new Raycaster()
raycaster.setFromCamera(ndc, camera)
return raycaster.ray
}
const intersect = (clientX: number, clientY: number, plane: Plane): Vector3 | null => {
const hit = new Vector3()
return makeRay(clientX, clientY).intersectPlane(plane, hit) ? hit : null
}
const projectOntoAxis = (
clientX: number,
clientY: number,
anchorWorld: Vector3,
axisWorld: Vector3,
): number | null => {
const ray = makeRay(clientX, clientY)
const w0 = new Vector3().subVectors(ray.origin, anchorWorld)
const b = ray.direction.dot(axisWorld)
const denom = 1 - b * b
if (Math.abs(denom) < 1e-6) return null
const d0 = ray.direction.dot(w0)
const e0 = axisWorld.dot(w0)
return (e0 - b * d0) / denom
}
const toWorld = (p: Point): Vector3 => target.localToWorld(new Vector3(p[0], p[1], p[2]))
const toLocal = (world: Vector3): Point => {
const local = target.worldToLocal(world.clone())
return [local.x, local.y, local.z]
}
const onHandleDown = (index: number) => (e: ThreeEvent<PointerEvent>) => {
e.stopPropagation()
const initialPath = lineset.path.map((p) => [...p] as Point)
const startPoint = initialPath[index]!
pauseSceneHistory(useScene)
useViewer.getState().setInputDragging(true)
document.body.style.cursor = 'grabbing'
setDraggingIndex(index)
const isEndpoint = index === 0 || index === initialPath.length - 1
const neighbor = initialPath[index === 0 ? 1 : index - 1]!
const axisLocal = new Vector3(
startPoint[0] - neighbor[0],
startPoint[1] - neighbor[1],
startPoint[2] - neighbor[2],
)
if (axisLocal.lengthSq() < 1e-9) axisLocal.set(1, 0, 0)
axisLocal.normalize()
const anchorWorldStart = toWorld(startPoint)
const axisWorld = toWorld([
startPoint[0] + axisLocal.x,
startPoint[1] + axisLocal.y,
startPoint[2] + axisLocal.z,
])
.sub(anchorWorldStart)
.normalize()
const onMove = (event: PointerEvent) => {
const drag = dragRef.current
if (!drag) return
const current = drag.current
const step = event.shiftKey ? 0 : useEditor.getState().gridSnapStep
let next: Point | null = null
if (event.altKey) {
const plane = new Plane().setFromNormalAndCoplanarPoint(UP, toWorld(current))
const hit = intersect(event.clientX, event.clientY, plane)
if (hit) {
const local = toLocal(hit)
next = [snap(local[0], step), current[1], snap(local[2], step)]
if (isEndpoint) {
const port = findNearestPortXZ(
[local[0], current[1], local[2]],
collectScenePorts({ excludeNodeId: lineset.id, systems: REFRIGERANT_PORT_SYSTEMS }),
PORT_SNAP_RADIUS_M,
)
if (port) next = [port.position[0], port.position[1], port.position[2]]
}
}
} else {
const t = projectOntoAxis(event.clientX, event.clientY, anchorWorldStart, axisWorld)
if (t !== null) {
const dist = snap(t, step)
next = [
startPoint[0] + axisLocal.x * dist,
Math.max(0, startPoint[1] + axisLocal.y * dist),
startPoint[2] + axisLocal.z * dist,
]
}
}
if (!next) return
if (next[0] === current[0] && next[1] === current[1] && next[2] === current[2]) return
drag.current = next
const path = lineset.path.map((p, i) => (i === drag.index ? next! : p)) as Point[]
useScene.getState().updateNode(lineset.id, { path })
}
const onUp = () => {
const drag = dragRef.current
if (!drag) return
drag.cleanup()
dragRef.current = null
setDraggingIndex(null)
const finalPath = drag.initialPath.map((p, i) =>
i === drag.index ? drag.current : p,
) as Point[]
useScene.getState().updateNode(lineset.id, { path: drag.initialPath })
resumeSceneHistory(useScene)
const moved = finalPath[drag.index]!.some(
(v, axis) => v !== drag.initialPath[drag.index]![axis],
)
if (moved) useScene.getState().updateNode(lineset.id, { path: finalPath })
}
const cleanup = () => {
window.removeEventListener('pointermove', onMove)
window.removeEventListener('pointerup', onUp)
window.removeEventListener('pointercancel', onUp)
useViewer.getState().setInputDragging(false)
document.body.style.cursor = ''
}
dragRef.current = { index, initialPath, current: startPoint, cleanup }
window.addEventListener('pointermove', onMove)
window.addEventListener('pointerup', onUp)
window.addEventListener('pointercancel', onUp)
}
return (
<group>
{lineset.path.map((p, i) => {
const active = draggingIndex === i
const hovered = hoverIndex === i
return (
<mesh
key={`lineset-handle-${i}`}
layers={EDITOR_LAYER}
onPointerDown={onHandleDown(i)}
onPointerEnter={(e) => {
e.stopPropagation()
setHoverIndex(i)
if (draggingIndex === null) document.body.style.cursor = 'grab'
}}
onPointerLeave={() => {
setHoverIndex((prev) => (prev === i ? null : prev))
if (draggingIndex === null) document.body.style.cursor = ''
}}
position={p as Point}
>
<sphereGeometry args={[HANDLE_RADIUS, 16, 12]} />
<meshBasicMaterial
color={active || hovered ? '#a5b4fc' : '#818cf8'}
depthTest={false}
opacity={active ? 1 : 0.85}
transparent
/>
</mesh>
)
})}
{draggingIndex !== null &&
lineset.path[draggingIndex] &&
(() => {
const point = lineset.path[draggingIndex]!
const origin = dragRef.current?.initialPath[draggingIndex] ?? point
const deltas = [point[0] - origin[0], point[1] - origin[1], point[2] - origin[2]]
const axes = ['x', 'y', 'z'] as const
const primary = axes.reduce((best, axis, i) =>
Math.abs(deltas[i]!) > Math.abs(deltas[axes.indexOf(best)]!) ? axis : best,
)
return (
<Html
center
position={[point[0], point[1] + 0.35, point[2]]}
style={{ pointerEvents: 'none', userSelect: 'none' }}
zIndexRange={[100, 0]}
>
<DimensionPill
parts={axes.map((axis, i) => ({
key: axis,
prefix: axis.toUpperCase(),
value: deltas[i]!,
signed: true,
}))}
primary={primary}
unit={unit}
/>
</Html>
)
})()}
</group>
)
}
export default LinesetSelectionAffordance
export default createRefrigerantLineSelectionAffordance('lineset')
packages/nodes/src/lineset/tool.tsx
+16 -30
View File
@@ -1,6 +1,6 @@
'use client'
import { type AnyNodeId, emitter, type GridEvent, LinesetNode, useScene } from '@pascal-app/core'
import { emitter, type GridEvent, LinesetNode, useScene } from '@pascal-app/core'
import {
CursorSphere,
DimensionPill,
@@ -19,18 +19,18 @@ import { type Group, Vector3 } from 'three'
import { alignDrawPoint, clearDrawAlignment } from '../shared/draw-alignment'
import { LevelOffsetGroup } from '../shared/level-offset-group'
import { collectScenePorts, findNearestPortXZ, REFRIGERANT_PORT_SYSTEMS } from '../shared/ports'
import { planLinesetConnect } from './connect'
import { linesetDefinition } from './definition'
/**
* One-segment-at-a-time placement tool for refrigerant linesets — the
* refrigerant-loop sibling of the duct-segment tool.
* Continuous placement tool for refrigerant linesets — the refrigerant-loop
* sibling of the duct-segment tool.
*
* Mouse-driven model:
* - **First click** anchors the run start. Within range of a refrigerant
* service port (a condenser / coil valve, or another lineset's end) it
* snaps onto the port so a run mates flush.
* - **Second click** commits a two-point lineset and re-arms the tool.
* - **Second click** commits a two-point lineset and keeps its far end
* anchored, so the next click continues the run like wall / duct drafting.
* - The in-flight end follows the active snapping mode: `angles` locks it to
* the nearest 45° step in XZ from the start (Y stays at the start's
* height); `grid`/`lines`/`off` leave it free. Shift cycles the mode.
@@ -108,32 +108,18 @@ const LinesetTool = () => {
Math.abs(start[2] - end[2]) < 1e-4
if (sameSpot) return
// Fold into any existing run that shares this segment's endpoint, so
// two runs meeting at a coordinate become one mitered path instead of
// overlapping nodes. Only same-level runs are candidates — lineset
// paths are level-local.
const scene = useScene.getState()
const existing = Object.values(scene.nodes).filter(
(n): n is LinesetNode =>
n?.type === 'lineset' && (n.parentId as AnyNodeId | null) === activeLevelId,
)
const plan = planLinesetConnect(existing, start, end)
if (plan.kind === 'create') {
const lineset = LinesetNode.parse({
...linesetDefinition.defaults(),
name: 'Lineset',
path: plan.path,
})
scene.createNode(lineset, activeLevelId)
} else if (plan.kind === 'extend') {
scene.updateNode(plan.id, { path: plan.path })
} else {
scene.updateNode(plan.id, { path: plan.path })
scene.deleteNode(plan.deleteId)
}
// Each drawn segment is its own standalone two-point lineset node — the
// refrigerant-loop sibling of duct-segment. Independent nodes mean each
// segment selects and deletes on its own, rather than folding into one
// mitered polyline run.
const lineset = LinesetNode.parse({
...linesetDefinition.defaults(),
name: 'Lineset',
path: [start, end],
})
useScene.getState().createNode(lineset, activeLevelId)
triggerSFX('sfx:item-place')
setDraftPoints([])
setDraftPoints([end])
setSnapTarget(null)
altAnchorRef.current = null
setAltActive(false)
packages/nodes/src/liquid-line/connect.ts
-98
View File
@@ -1,98 +0,0 @@
import type { LiquidLineNode } from './schema'
type Point = [number, number, number]
type LiquidLineId = LiquidLineNode['id']
/** Coincidence tolerance (meters) for folding endpoints into one run. The
* draw tool snaps onto an existing run's endpoint exactly, so this only
* needs to absorb float drift, not user aim. */
const COINCIDENT_EPS_M = 1e-3
function samePoint(a: Point, b: Point): boolean {
return (
Math.abs(a[0] - b[0]) < COINCIDENT_EPS_M &&
Math.abs(a[1] - b[1]) < COINCIDENT_EPS_M &&
Math.abs(a[2] - b[2]) < COINCIDENT_EPS_M
)
}
/** Which terminal of `line` coincides with `p`, if either. */
function matchEnd(line: LiquidLineNode, p: Point): 'start' | 'end' | null {
const path = line.path as Point[]
if (samePoint(path[0]!, p)) return 'start'
if (samePoint(path[path.length - 1]!, p)) return 'end'
return null
}
/** First liquid line whose start or end coincides with `p`. */
function findConnection(
existing: LiquidLineNode[],
p: Point,
): { line: LiquidLineNode; side: 'start' | 'end' } | null {
for (const line of existing) {
if (line.path.length < 2) continue
const side = matchEnd(line, p)
if (side) return { line, side }
}
return null
}
/** Path re-ordered so the connecting terminal is its LAST point. */
function endLast(path: Point[], side: 'start' | 'end'): Point[] {
return side === 'end' ? path : [...path].reverse()
}
/** Path re-ordered so the connecting terminal is its FIRST point. */
function startFirst(path: Point[], side: 'start' | 'end'): Point[] {
return side === 'start' ? path : [...path].reverse()
}
/**
* Outcome of committing a new `start`→`end` segment against the existing
* liquid-line runs on the same level:
* - `create` — no shared endpoint; place a fresh standalone run.
* - `extend` — one end lands on run `id`; grow that run's path so the old
* terminal becomes an interior point (the geometry miters it).
* - `bridge` — both ends land on two *different* runs; weld them plus the
* new segment into one path on `id` and delete the absorbed `deleteId`.
*/
export type LiquidLineConnectPlan =
| { kind: 'create'; path: Point[] }
| { kind: 'extend'; id: LiquidLineId; path: Point[] }
| { kind: 'bridge'; id: LiquidLineId; path: Point[]; deleteId: LiquidLineId }
/**
* Decide how a freshly drawn `start`→`end` segment folds into existing
* liquid-line runs that share an endpoint coordinate. Pure: returns a plan,
* the caller mutates the scene. Coords are level-local, so `existing` must be
* pre-filtered to the segment's level.
*/
export function planLiquidLineConnect(
existing: LiquidLineNode[],
start: Point,
end: Point,
): LiquidLineConnectPlan {
const atStart = findConnection(existing, start)
const atEnd = findConnection(existing, end)
// Both ends meet distinct runs → weld the three into one path.
if (atStart && atEnd && atStart.line.id !== atEnd.line.id) {
const left = endLast(atStart.line.path as Point[], atStart.side) // ...→ start
const right = startFirst(atEnd.line.path as Point[], atEnd.side) // end →...
return {
kind: 'bridge',
id: atStart.line.id,
path: [...left, ...right],
deleteId: atEnd.line.id,
}
}
if (atStart) {
const base = endLast(atStart.line.path as Point[], atStart.side) // ...→ start
return { kind: 'extend', id: atStart.line.id, path: [...base, end] }
}
if (atEnd) {
const base = startFirst(atEnd.line.path as Point[], atEnd.side) // end →...
return { kind: 'extend', id: atEnd.line.id, path: [start, ...base] }
}
return { kind: 'create', path: [start, end] }
}
packages/nodes/src/liquid-line/geometry.ts
+10 -3
View File
@@ -31,8 +31,12 @@ function buildRun(
/**
* Pure geometry builder for a standalone liquid line: a single thin bare-copper
* cylinder following the node path centerline, with joint spheres capping
* interior corners so turns read as continuous pipe.
* cylinder following the node path centerline.
*
* Each line is a standalone two-point node (no fitting system), so a sphere caps
* BOTH endpoints. On a free end it rounds the cap; where two segments share a
* coordinate the coincident spheres fill the miter gap, so the turn reads as
* continuous pipe.
*
* Children are level-local meters; `<ParametricNodeRenderer>` owns the node
* transform (identity today — the path is absolute within the level).
@@ -55,7 +59,10 @@ export function buildLiquidLineGeometry(node: LiquidLineNode): Group {
if (run) group.add(run)
}
for (let i = 1; i < points.length - 1; i++) {
// Spherical caps at every point: interior corners read as continuous pipe,
// and endpoint caps round the open ends so two separate segments sharing a
// coordinate fill the miter and look welded.
for (let i = 0; i < points.length; i++) {
const joint = new Mesh(new SphereGeometry(radius, RADIAL_SEGMENTS, 10), copperMat)
joint.name = `liquid-line-joint-${i}`
joint.position.copy(points[i] as Vector3)
packages/nodes/src/liquid-line/index.ts
-1
View File
@@ -1,4 +1,3 @@
export { type LiquidLineConnectPlan, planLiquidLineConnect } from './connect'
export { liquidLineDefinition } from './definition'
export { buildLiquidLineGeometry } from './geometry'
export { useLiquidLineToolOptions } from './options'
packages/nodes/src/liquid-line/selection.tsx
+2 -279
View File
@@ -1,282 +1,5 @@
'use client'
import {
type AnyNodeId,
type LiquidLineNode,
pauseSceneHistory,
resumeSceneHistory,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { DimensionPill, EDITOR_LAYER, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { Html } from '@react-three/drei'
import { createPortal, type ThreeEvent, useThree } from '@react-three/fiber'
import { useEffect, useRef, useState } from 'react'
import { type Object3D, Plane, Raycaster, Vector2, Vector3 } from 'three'
import { collectScenePorts, findNearestPortXZ, REFRIGERANT_PORT_SYSTEMS } from '../shared/ports'
import { createRefrigerantLineSelectionAffordance } from '../shared/refrigerant-line-selection'
const HANDLE_RADIUS = 0.07
const PORT_SNAP_RADIUS_M = 0.4
const UP = new Vector3(0, 1, 0)
function snap(value: number, step: number): number {
if (step <= 0) return value
return Math.round(value / step) * step
}
type Point = [number, number, number]
/**
* Selection-time editing for committed liquid-line runs: one draggable handle
* per path point. Mirrors the lineset path-handle system; dragged run
* endpoints snap onto refrigerant ports only.
*
* Handles are PORTALED into the line's registered scene group so they share
* its exact frame. Drag raycasts run in world space and convert hits back into
* the group's local frame before writing the path.
*/
const LiquidLineSelectionAffordance = () => {
const selectedIds = useViewer((s) => s.selection.selectedIds)
const line = useScene((s) => {
if (selectedIds.length !== 1) return null
const node = s.nodes[selectedIds[0] as AnyNodeId]
return node?.type === 'liquid-line' ? (node as LiquidLineNode) : null
})
const lineId = line?.id ?? null
const [target, setTarget] = useState<Object3D | null>(null)
useEffect(() => {
if (!lineId) {
setTarget(null)
return
}
let frameId = 0
const resolve = () => {
const next = sceneRegistry.nodes.get(lineId as AnyNodeId) ?? null
setTarget((cur) => (cur === next ? cur : next))
if (!next) frameId = window.requestAnimationFrame(resolve)
}
resolve()
return () => window.cancelAnimationFrame(frameId)
}, [lineId])
if (!line || !target) return null
return createPortal(<LiquidLinePointHandles line={line} target={target} />, target, undefined)
}
const LiquidLinePointHandles = ({ line, target }: { line: LiquidLineNode; target: Object3D }) => {
const { camera, gl } = useThree()
const unit = useViewer((s) => s.unit)
const [draggingIndex, setDraggingIndex] = useState<number | null>(null)
const [hoverIndex, setHoverIndex] = useState<number | null>(null)
const dragRef = useRef<{
index: number
initialPath: Point[]
current: Point
cleanup: () => void
} | null>(null)
const makeRay = (clientX: number, clientY: number) => {
const rect = gl.domElement.getBoundingClientRect()
const ndc = new Vector2(
((clientX - rect.left) / rect.width) * 2 - 1,
-((clientY - rect.top) / rect.height) * 2 + 1,
)
const raycaster = new Raycaster()
raycaster.setFromCamera(ndc, camera)
return raycaster.ray
}
const intersect = (clientX: number, clientY: number, plane: Plane): Vector3 | null => {
const hit = new Vector3()
return makeRay(clientX, clientY).intersectPlane(plane, hit) ? hit : null
}
const projectOntoAxis = (
clientX: number,
clientY: number,
anchorWorld: Vector3,
axisWorld: Vector3,
): number | null => {
const ray = makeRay(clientX, clientY)
const w0 = new Vector3().subVectors(ray.origin, anchorWorld)
const b = ray.direction.dot(axisWorld)
const denom = 1 - b * b
if (Math.abs(denom) < 1e-6) return null
const d0 = ray.direction.dot(w0)
const e0 = axisWorld.dot(w0)
return (e0 - b * d0) / denom
}
const toWorld = (p: Point): Vector3 => target.localToWorld(new Vector3(p[0], p[1], p[2]))
const toLocal = (world: Vector3): Point => {
const local = target.worldToLocal(world.clone())
return [local.x, local.y, local.z]
}
const onHandleDown = (index: number) => (e: ThreeEvent<PointerEvent>) => {
e.stopPropagation()
const initialPath = line.path.map((p) => [...p] as Point)
const startPoint = initialPath[index]!
pauseSceneHistory(useScene)
useViewer.getState().setInputDragging(true)
document.body.style.cursor = 'grabbing'
setDraggingIndex(index)
const isEndpoint = index === 0 || index === initialPath.length - 1
const neighbor = initialPath[index === 0 ? 1 : index - 1]!
const axisLocal = new Vector3(
startPoint[0] - neighbor[0],
startPoint[1] - neighbor[1],
startPoint[2] - neighbor[2],
)
if (axisLocal.lengthSq() < 1e-9) axisLocal.set(1, 0, 0)
axisLocal.normalize()
const anchorWorldStart = toWorld(startPoint)
const axisWorld = toWorld([
startPoint[0] + axisLocal.x,
startPoint[1] + axisLocal.y,
startPoint[2] + axisLocal.z,
])
.sub(anchorWorldStart)
.normalize()
const onMove = (event: PointerEvent) => {
const drag = dragRef.current
if (!drag) return
const current = drag.current
const step = event.shiftKey ? 0 : useEditor.getState().gridSnapStep
let next: Point | null = null
if (event.altKey) {
const plane = new Plane().setFromNormalAndCoplanarPoint(UP, toWorld(current))
const hit = intersect(event.clientX, event.clientY, plane)
if (hit) {
const local = toLocal(hit)
next = [snap(local[0], step), current[1], snap(local[2], step)]
if (isEndpoint) {
const port = findNearestPortXZ(
[local[0], current[1], local[2]],
collectScenePorts({ excludeNodeId: line.id, systems: REFRIGERANT_PORT_SYSTEMS }),
PORT_SNAP_RADIUS_M,
)
if (port) next = [port.position[0], port.position[1], port.position[2]]
}
}
} else {
const t = projectOntoAxis(event.clientX, event.clientY, anchorWorldStart, axisWorld)
if (t !== null) {
const dist = snap(t, step)
next = [
startPoint[0] + axisLocal.x * dist,
Math.max(0, startPoint[1] + axisLocal.y * dist),
startPoint[2] + axisLocal.z * dist,
]
}
}
if (!next) return
if (next[0] === current[0] && next[1] === current[1] && next[2] === current[2]) return
drag.current = next
const path = line.path.map((p, i) => (i === drag.index ? next! : p)) as Point[]
useScene.getState().updateNode(line.id, { path })
}
const onUp = () => {
const drag = dragRef.current
if (!drag) return
drag.cleanup()
dragRef.current = null
setDraggingIndex(null)
const finalPath = drag.initialPath.map((p, i) =>
i === drag.index ? drag.current : p,
) as Point[]
useScene.getState().updateNode(line.id, { path: drag.initialPath })
resumeSceneHistory(useScene)
const moved = finalPath[drag.index]!.some(
(v, axis) => v !== drag.initialPath[drag.index]![axis],
)
if (moved) useScene.getState().updateNode(line.id, { path: finalPath })
}
const cleanup = () => {
window.removeEventListener('pointermove', onMove)
window.removeEventListener('pointerup', onUp)
window.removeEventListener('pointercancel', onUp)
useViewer.getState().setInputDragging(false)
document.body.style.cursor = ''
}
dragRef.current = { index, initialPath, current: startPoint, cleanup }
window.addEventListener('pointermove', onMove)
window.addEventListener('pointerup', onUp)
window.addEventListener('pointercancel', onUp)
}
return (
<group>
{line.path.map((p, i) => {
const active = draggingIndex === i
const hovered = hoverIndex === i
return (
<mesh
key={`liquid-line-handle-${i}`}
layers={EDITOR_LAYER}
onPointerDown={onHandleDown(i)}
onPointerEnter={(e) => {
e.stopPropagation()
setHoverIndex(i)
if (draggingIndex === null) document.body.style.cursor = 'grab'
}}
onPointerLeave={() => {
setHoverIndex((prev) => (prev === i ? null : prev))
if (draggingIndex === null) document.body.style.cursor = ''
}}
position={p as Point}
>
<sphereGeometry args={[HANDLE_RADIUS, 16, 12]} />
<meshBasicMaterial
color={active || hovered ? '#a5b4fc' : '#818cf8'}
depthTest={false}
opacity={active ? 1 : 0.85}
transparent
/>
</mesh>
)
})}
{draggingIndex !== null &&
line.path[draggingIndex] &&
(() => {
const point = line.path[draggingIndex]!
const origin = dragRef.current?.initialPath[draggingIndex] ?? point
const deltas = [point[0] - origin[0], point[1] - origin[1], point[2] - origin[2]]
const axes = ['x', 'y', 'z'] as const
const primary = axes.reduce((best, axis, i) =>
Math.abs(deltas[i]!) > Math.abs(deltas[axes.indexOf(best)]!) ? axis : best,
)
return (
<Html
center
position={[point[0], point[1] + 0.35, point[2]]}
style={{ pointerEvents: 'none', userSelect: 'none' }}
zIndexRange={[100, 0]}
>
<DimensionPill
parts={axes.map((axis, i) => ({
key: axis,
prefix: axis.toUpperCase(),
value: deltas[i]!,
signed: true,
}))}
primary={primary}
unit={unit}
/>
</Html>
)
})()}
</group>
)
}
export default LiquidLineSelectionAffordance
export default createRefrigerantLineSelectionAffordance('liquid-line')

Some files were not shown because too many files have changed in this diff Show More