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

slab holes

Browse Source
This commit is contained in:
wass08
2026-02-12 10:41:37 +09:00
parent ae3af4318e
commit 29e7fa09ef
6 changed files with 224 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/editor/components/tools/slab/slab-hole-editor.tsx
+47
View File
@@ -0,0 +1,47 @@
import { resolveLevelId, type SlabNode, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { useCallback } from 'react'
import { PolygonEditor } from '../shared/polygon-editor'
interface SlabHoleEditorProps {
slabId: SlabNode['id']
holeIndex: number
}
/**
* Slab hole editor - allows editing a specific hole polygon within a slab
* Uses the generic PolygonEditor component
*/
export const SlabHoleEditor: React.FC<SlabHoleEditorProps> = ({ slabId, holeIndex }) => {
const slabNode = useScene((state) => state.nodes[slabId])
const updateNode = useScene((state) => state.updateNode)
const setSelection = useViewer((state) => state.setSelection)
const slab = slabNode?.type === 'slab' ? (slabNode as SlabNode) : null
const holes = slab?.holes || []
const hole = holes[holeIndex]
const handlePolygonChange = useCallback(
(newPolygon: Array<[number, number]>) => {
const updatedHoles = [...holes]
updatedHoles[holeIndex] = newPolygon
updateNode(slabId, { holes: updatedHoles })
// Re-assert selection so the slab stays selected after the edit
setSelection({ selectedIds: [slabId] })
},
[slabId, holeIndex, holes, updateNode, setSelection],
)
if (!slab || !hole || hole.length < 3) return null
return (
<PolygonEditor
polygon={hole}
color="#ef4444" // red for holes
onPolygonChange={handlePolygonChange}
minVertices={3}
levelId={resolveLevelId(slab, useScene.getState().nodes)}
surfaceHeight={slab.elevation ?? 0.05}
/>
)
}
apps/editor/components/tools/tool-manager.tsx
+11 -2
View File
@@ -8,6 +8,7 @@ import { MoveTool } from './item/move-tool'
import { RoofTool } from './roof/roof-tool'
import { SiteBoundaryEditor } from './site/site-boundary-editor'
import { SlabBoundaryEditor } from './slab/slab-boundary-editor'
import { SlabHoleEditor } from './slab/slab-hole-editor'
import { SlabTool } from './slab/slab-tool'
import { WallTool } from './wall/wall-tool'
import { ZoneBoundaryEditor } from './zone/zone-boundary-editor'
@@ -35,6 +36,7 @@ export const ToolManager: React.FC = () => {
const mode = useEditor((state) => state.mode)
const tool = useEditor((state) => state.tool)
const movingNode = useEditor((state) => state.movingNode)
const editingSlabHoleIndex = useEditor((state) => state.editingSlabHoleIndex)
const selectedZoneId = useViewer((state) => state.selection.zoneId)
const selectedIds = useViewer((state) => state.selection.selectedIds)
const nodes = useScene((state) => state.nodes)
@@ -52,9 +54,13 @@ export const ToolManager: React.FC = () => {
// Show site boundary editor when in site phase and edit mode
const showSiteBoundaryEditor = phase === 'site' && mode === 'edit'
// Show slab boundary editor when in structure/select mode with a slab selected
// Show slab boundary editor when in structure/select mode with a slab selected (but not editing a hole)
const showSlabBoundaryEditor =
phase === 'structure' && mode === 'select' && selectedSlabId !== undefined
phase === 'structure' && mode === 'select' && selectedSlabId !== undefined && editingSlabHoleIndex === null
// Show slab hole editor when editing a specific hole
const showSlabHoleEditor =
selectedSlabId !== undefined && editingSlabHoleIndex !== null
// Show ceiling boundary editor when in structure/select mode with a ceiling selected
const showCeilingBoundaryEditor =
@@ -79,6 +85,9 @@ export const ToolManager: React.FC = () => {
{showSiteBoundaryEditor && <SiteBoundaryEditor />}
{showZoneBoundaryEditor && selectedZoneId && <ZoneBoundaryEditor zoneId={selectedZoneId} />}
{showSlabBoundaryEditor && selectedSlabId && <SlabBoundaryEditor slabId={selectedSlabId} />}
{showSlabHoleEditor && selectedSlabId && editingSlabHoleIndex !== null && (
<SlabHoleEditor slabId={selectedSlabId} holeIndex={editingSlabHoleIndex} />
)}
{showCeilingBoundaryEditor && selectedCeilingId && (
<CeilingBoundaryEditor ceilingId={selectedCeilingId} />
)}
apps/editor/components/ui/panels/slab-panel.tsx
+141 -3
View File
@@ -2,9 +2,10 @@
import { type AnyNode, type SlabNode, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { X } from 'lucide-react'
import { Edit, Plus, Trash2, X } from 'lucide-react'
import Image from 'next/image'
import { useCallback } from 'react'
import { useCallback, useEffect } from 'react'
import useEditor from '@/store/use-editor'
import { NumberInput } from '@/components/ui/primitives/number-input'
export function SlabPanel() {
@@ -12,6 +13,8 @@ export function SlabPanel() {
const setSelection = useViewer((s) => s.setSelection)
const nodes = useScene((s) => s.nodes)
const updateNode = useScene((s) => s.updateNode)
const editingHoleIndex = useEditor((s) => s.editingSlabHoleIndex)
const setEditingHoleIndex = useEditor((s) => s.setEditingSlabHoleIndex)
// Get the first selected node if it's a slab
const selectedId = selectedIds[0]
@@ -29,7 +32,62 @@ export function SlabPanel() {
const handleClose = useCallback(() => {
setSelection({ selectedIds: [] })
}, [setSelection])
setEditingHoleIndex(null)
}, [setSelection, setEditingHoleIndex])
// Clear hole editing state when slab is deselected
useEffect(() => {
if (!node) {
setEditingHoleIndex(null)
}
}, [node, setEditingHoleIndex])
const handleAddHole = useCallback(() => {
if (!node) return
// Calculate centroid of the slab polygon
const polygon = node.polygon
let cx = 0
let cz = 0
for (const [x, z] of polygon) {
cx += x
cz += z
}
cx /= polygon.length
cz /= polygon.length
// Create a default small rectangular hole centered at the slab's centroid
const holeSize = 0.5
const newHole: Array<[number, number]> = [
[cx - holeSize, cz - holeSize],
[cx + holeSize, cz - holeSize],
[cx + holeSize, cz + holeSize],
[cx - holeSize, cz + holeSize],
]
const currentHoles = node?.holes || []
handleUpdate({ holes: [...currentHoles, newHole] })
// Enter edit mode for the new hole
setEditingHoleIndex(currentHoles.length)
}, [node, handleUpdate, setEditingHoleIndex])
const handleEditHole = useCallback(
(index: number) => {
setEditingHoleIndex(index)
},
[setEditingHoleIndex],
)
const handleDeleteHole = useCallback(
(index: number) => {
const currentHoles = node?.holes || []
const newHoles = currentHoles.filter((_, i) => i !== index)
handleUpdate({ holes: newHoles })
if (editingHoleIndex === index) {
setEditingHoleIndex(null)
}
},
[node?.holes, handleUpdate, editingHoleIndex],
)
// Only show if exactly one slab is selected
if (!node || node.type !== 'slab' || selectedIds.length !== 1) return null
@@ -139,6 +197,86 @@ export function SlabPanel() {
{area.toFixed(2)} m²
</div>
</div>
{/* Holes */}
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
Holes
</label>
{editingHoleIndex !== null ? (
<button
type="button"
className="flex items-center gap-1 rounded border border-green-500 bg-green-500/10 px-2 py-1 text-xs text-green-600 hover:bg-green-500/20 cursor-pointer"
onClick={() => setEditingHoleIndex(null)}
>
<span>Done Editing</span>
</button>
) : (
<button
type="button"
className="flex items-center gap-1 rounded border border-border px-2 py-1 text-xs hover:bg-accent cursor-pointer"
onClick={handleAddHole}
>
<Plus className="h-3 w-3" />
<span>Add Hole</span>
</button>
)}
</div>
{node.holes && node.holes.length > 0 ? (
<div className="space-y-2">
{node.holes.map((hole, index) => {
const holeArea = calculateArea(hole)
const isEditing = editingHoleIndex === index
return (
<div
key={index}
className={`flex items-center justify-between rounded border px-3 py-2 ${
isEditing
? 'border-green-500 bg-green-500/10'
: 'border-border bg-muted/30'
}`}
>
<div className="flex-1 min-w-0">
<p className={`text-sm font-medium ${isEditing ? 'text-green-600' : ''}`}>
Hole {index + 1} {isEditing && '(Editing)'}
</p>
<p className="text-xs text-muted-foreground">
{holeArea.toFixed(2)} m² · {hole.length} vertices
</p>
</div>
<div className="flex items-center gap-1">
{!isEditing && (
<>
<button
type="button"
className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground cursor-pointer"
onClick={() => handleEditHole(index)}
aria-label="Edit hole"
>
<Edit className="h-3.5 w-3.5" />
</button>
<button
type="button"
className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground cursor-pointer"
onClick={() => handleDeleteHole(index)}
aria-label="Delete hole"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</>
)}
</div>
</div>
)
})}
</div>
) : (
<p className="text-xs text-muted-foreground italic">
No holes. Click "Add Hole" to create one.
</p>
)}
</div>
</div>
</div>
</div>
apps/editor/store/use-editor.tsx
+5
View File
@@ -63,6 +63,9 @@ type EditorState = {
// Space detection for cutaway mode
spaces: Record<string, Space>
setSpaces: (spaces: Record<string, Space>) => void
// Slab hole editing
editingSlabHoleIndex: number | null
setEditingSlabHoleIndex: (index: number | null) => void
}
const useEditor = create<EditorState>()((set, get) => ({
@@ -181,6 +184,8 @@ const useEditor = create<EditorState>()((set, get) => ({
setSelectedReferenceId: (id) => set({ selectedReferenceId: id }),
spaces: {},
setSpaces: (spaces) => set({ spaces }),
editingSlabHoleIndex: null,
setEditingSlabHoleIndex: (index) => set({ editingSlabHoleIndex: index }),
}))
export default useEditor
packages/core/src/schema/nodes/slab.ts
+1
View File
@@ -8,6 +8,7 @@ export const SlabNode = BaseNode.extend({
// Specific props
// Polygon boundary - array of [x, z] coordinates defining the slab
polygon: z.array(z.tuple([z.number(), z.number()])),
holes: z.array(z.array(z.tuple([z.number(), z.number()]))).default([]),
elevation: z.number().default(0.05), // Elevation in meters
}).describe(
dedent`
packages/core/src/systems/slab/slab-system.tsx
+19
View File
@@ -123,6 +123,25 @@ export function generateSlabGeometry(slabNode: SlabNode): THREE.BufferGeometry {
}
shape.closePath()
// Add holes to the shape
if (slabNode.holes && slabNode.holes.length > 0) {
for (const holePolygon of slabNode.holes) {
if (holePolygon.length < 3) continue
const holePath = new THREE.Path()
const holeFirstPt = holePolygon[0]!
holePath.moveTo(holeFirstPt[0], -holeFirstPt[1])
for (let i = 1; i < holePolygon.length; i++) {
const pt = holePolygon[i]!
holePath.lineTo(pt[0], -pt[1])
}
holePath.closePath()
shape.holes.push(holePath)
}
}
// Extrude the shape by elevation
const geometry = new THREE.ExtrudeGeometry(shape, {
depth: elevation,