site boundary editor
This commit is contained in:
wass08
@@ -0,0 +1,298 @@
|
||||
import { useThree } from '@react-three/fiber'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import {
|
||||
BufferGeometry,
|
||||
Float32BufferAttribute,
|
||||
type Mesh,
|
||||
Plane,
|
||||
Raycaster,
|
||||
Vector2,
|
||||
Vector3,
|
||||
} from 'three'
|
||||
|
||||
const Y_OFFSET = 0.02
|
||||
|
||||
type DragState = {
|
||||
isDragging: boolean
|
||||
vertexIndex: number
|
||||
initialPosition: [number, number]
|
||||
pointerId: number
|
||||
}
|
||||
|
||||
export interface PolygonEditorProps {
|
||||
polygon: Array<[number, number]>
|
||||
color?: string
|
||||
onPolygonChange: (polygon: Array<[number, number]>) => void
|
||||
minVertices?: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Generic polygon editor component for editing polygon vertices
|
||||
* Used by zone and site boundary editors
|
||||
*/
|
||||
export const PolygonEditor: React.FC<PolygonEditorProps> = ({
|
||||
polygon,
|
||||
color = '#3b82f6',
|
||||
onPolygonChange,
|
||||
minVertices = 3,
|
||||
}) => {
|
||||
const { gl, camera } = useThree()
|
||||
|
||||
// Local state for dragging
|
||||
const [dragState, setDragState] = useState<DragState | null>(null)
|
||||
const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]> | null>(null)
|
||||
const [hoveredVertex, setHoveredVertex] = useState<number | null>(null)
|
||||
const [hoveredMidpoint, setHoveredMidpoint] = useState<number | null>(null)
|
||||
|
||||
// Refs for raycasting during drag
|
||||
const dragPlane = useRef(new Plane(new Vector3(0, 1, 0), -Y_OFFSET))
|
||||
const raycaster = useRef(new Raycaster())
|
||||
const lineRef = useRef<Mesh>(null!)
|
||||
|
||||
// The polygon to display (preview during drag, or actual polygon)
|
||||
const displayPolygon = previewPolygon ?? polygon
|
||||
|
||||
// Calculate midpoints for adding new vertices
|
||||
const midpoints = useMemo(() => {
|
||||
if (displayPolygon.length < 2) return []
|
||||
return displayPolygon.map(([x1, z1], index) => {
|
||||
const nextIndex = (index + 1) % displayPolygon.length
|
||||
const [x2, z2] = displayPolygon[nextIndex]!
|
||||
return [(x1! + x2) / 2, (z1! + z2) / 2] as [number, number]
|
||||
})
|
||||
}, [displayPolygon])
|
||||
|
||||
// Handle vertex drag
|
||||
const handleVertexDrag = useCallback(
|
||||
(clientX: number, clientY: number, vertexIndex: number) => {
|
||||
const canvas = gl.domElement
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
const x = ((clientX - rect.left) / rect.width) * 2 - 1
|
||||
const y = -((clientY - rect.top) / rect.height) * 2 + 1
|
||||
|
||||
raycaster.current.setFromCamera(new Vector2(x, y), camera)
|
||||
const intersection = new Vector3()
|
||||
raycaster.current.ray.intersectPlane(dragPlane.current, intersection)
|
||||
|
||||
if (intersection) {
|
||||
// Snap to 0.5 grid
|
||||
const gridX = Math.round(intersection.x * 2) / 2
|
||||
const gridZ = Math.round(intersection.z * 2) / 2
|
||||
|
||||
const basePolygon = previewPolygon ?? polygon
|
||||
const newPolygon = [...basePolygon]
|
||||
newPolygon[vertexIndex] = [gridX, gridZ]
|
||||
setPreviewPolygon(newPolygon)
|
||||
}
|
||||
},
|
||||
[gl, camera, previewPolygon, polygon],
|
||||
)
|
||||
|
||||
// Commit polygon changes
|
||||
const commitPolygonChange = useCallback(() => {
|
||||
if (previewPolygon) {
|
||||
onPolygonChange(previewPolygon)
|
||||
}
|
||||
setPreviewPolygon(null)
|
||||
setDragState(null)
|
||||
}, [previewPolygon, onPolygonChange])
|
||||
|
||||
// Handle adding a new vertex at midpoint
|
||||
const handleAddVertex = useCallback(
|
||||
(afterIndex: number, position: [number, number]) => {
|
||||
const basePolygon = previewPolygon ?? polygon
|
||||
const newPolygon = [
|
||||
...basePolygon.slice(0, afterIndex + 1),
|
||||
position,
|
||||
...basePolygon.slice(afterIndex + 1),
|
||||
]
|
||||
|
||||
setPreviewPolygon(newPolygon)
|
||||
return afterIndex + 1 // Return new vertex index
|
||||
},
|
||||
[polygon, previewPolygon],
|
||||
)
|
||||
|
||||
// Handle deleting a vertex
|
||||
const handleDeleteVertex = useCallback(
|
||||
(index: number) => {
|
||||
const basePolygon = previewPolygon ?? polygon
|
||||
if (basePolygon.length <= minVertices) return // Need at least minVertices points
|
||||
|
||||
const newPolygon = basePolygon.filter((_, i) => i !== index)
|
||||
onPolygonChange(newPolygon)
|
||||
setPreviewPolygon(null)
|
||||
},
|
||||
[polygon, previewPolygon, onPolygonChange, minVertices],
|
||||
)
|
||||
|
||||
// Set up pointer move/up listeners for dragging with pointer capture
|
||||
useEffect(() => {
|
||||
if (!dragState?.isDragging) return
|
||||
|
||||
const canvas = gl.domElement
|
||||
const pointerId = dragState.pointerId
|
||||
|
||||
// Capture pointer to prevent R3F events from firing on other objects (like the grid)
|
||||
canvas.setPointerCapture(pointerId)
|
||||
|
||||
const handlePointerMove = (e: PointerEvent) => {
|
||||
handleVertexDrag(e.clientX, e.clientY, dragState.vertexIndex)
|
||||
}
|
||||
|
||||
const handlePointerUp = (e: PointerEvent) => {
|
||||
// Release pointer capture
|
||||
if (canvas.hasPointerCapture(e.pointerId)) {
|
||||
canvas.releasePointerCapture(e.pointerId)
|
||||
}
|
||||
commitPolygonChange()
|
||||
}
|
||||
|
||||
canvas.addEventListener('pointermove', handlePointerMove)
|
||||
canvas.addEventListener('pointerup', handlePointerUp)
|
||||
|
||||
return () => {
|
||||
// Release capture on cleanup
|
||||
if (canvas.hasPointerCapture(pointerId)) {
|
||||
canvas.releasePointerCapture(pointerId)
|
||||
}
|
||||
canvas.removeEventListener('pointermove', handlePointerMove)
|
||||
canvas.removeEventListener('pointerup', handlePointerUp)
|
||||
}
|
||||
}, [dragState, gl, handleVertexDrag, commitPolygonChange])
|
||||
|
||||
// Update line geometry when polygon changes
|
||||
useEffect(() => {
|
||||
if (!lineRef.current || displayPolygon.length < 2) return
|
||||
|
||||
const positions: number[] = []
|
||||
for (const [x, z] of displayPolygon) {
|
||||
positions.push(x!, Y_OFFSET + 0.01, z!)
|
||||
}
|
||||
// Close the loop
|
||||
const first = displayPolygon[0]!
|
||||
positions.push(first[0]!, Y_OFFSET + 0.01, first[1]!)
|
||||
|
||||
const geometry = new BufferGeometry()
|
||||
geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
|
||||
|
||||
lineRef.current.geometry.dispose()
|
||||
lineRef.current.geometry = geometry
|
||||
}, [displayPolygon])
|
||||
|
||||
if (displayPolygon.length < minVertices) return null
|
||||
|
||||
const canDelete = displayPolygon.length > minVertices
|
||||
|
||||
return (
|
||||
<group>
|
||||
{/* Border line */}
|
||||
{/* @ts-ignore */}
|
||||
<line ref={lineRef} frustumCulled={false} renderOrder={10}>
|
||||
<bufferGeometry />
|
||||
<lineBasicNodeMaterial
|
||||
color={color}
|
||||
linewidth={2}
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
transparent
|
||||
opacity={0.8}
|
||||
/>
|
||||
</line>
|
||||
|
||||
{/* Vertex handles */}
|
||||
{displayPolygon.map(([x, z], index) => {
|
||||
const isHovered = hoveredVertex === index
|
||||
const isDragging = dragState?.vertexIndex === index
|
||||
|
||||
return (
|
||||
<mesh
|
||||
key={`vertex-${index}`}
|
||||
position={[x!, Y_OFFSET, z!]}
|
||||
onPointerEnter={(e) => {
|
||||
e.stopPropagation()
|
||||
setHoveredVertex(index)
|
||||
}}
|
||||
onPointerLeave={(e) => {
|
||||
e.stopPropagation()
|
||||
setHoveredVertex(null)
|
||||
}}
|
||||
onPointerDown={(e) => {
|
||||
e.stopPropagation()
|
||||
setDragState({
|
||||
isDragging: true,
|
||||
vertexIndex: index,
|
||||
initialPosition: [x!, z!],
|
||||
pointerId: e.nativeEvent.pointerId,
|
||||
})
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
onDoubleClick={(e) => {
|
||||
e.stopPropagation()
|
||||
if (canDelete) {
|
||||
handleDeleteVertex(index)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<sphereGeometry args={[isHovered || isDragging ? 0.3 : 0.25, 16, 16]} />
|
||||
<meshBasicMaterial
|
||||
color={
|
||||
isDragging ? '#22c55e' : isHovered ? (canDelete ? '#ef4444' : '#ffffff') : color
|
||||
}
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
/>
|
||||
</mesh>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Midpoint handles for adding vertices (hidden while dragging) */}
|
||||
{!dragState &&
|
||||
midpoints.map(([x, z], index) => {
|
||||
const isHovered = hoveredMidpoint === index
|
||||
|
||||
return (
|
||||
<mesh
|
||||
key={`midpoint-${index}`}
|
||||
position={[x!, Y_OFFSET, z!]}
|
||||
onPointerEnter={(e) => {
|
||||
e.stopPropagation()
|
||||
setHoveredMidpoint(index)
|
||||
}}
|
||||
onPointerLeave={(e) => {
|
||||
e.stopPropagation()
|
||||
setHoveredMidpoint(null)
|
||||
}}
|
||||
onPointerDown={(e) => {
|
||||
e.stopPropagation()
|
||||
const newVertexIndex = handleAddVertex(index, [x!, z!])
|
||||
if (newVertexIndex >= 0) {
|
||||
setDragState({
|
||||
isDragging: true,
|
||||
vertexIndex: newVertexIndex,
|
||||
initialPosition: [x!, z!],
|
||||
pointerId: e.nativeEvent.pointerId,
|
||||
})
|
||||
setHoveredMidpoint(null)
|
||||
}
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<sphereGeometry args={[isHovered ? 0.3 : 0.25, 16, 16]} />
|
||||
<meshBasicMaterial
|
||||
color={isHovered ? '#22c55e' : color}
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
transparent
|
||||
opacity={isHovered ? 1 : 0.6}
|
||||
/>
|
||||
</mesh>
|
||||
)
|
||||
})}
|
||||
</group>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { useScene, type SiteNode } from '@pascal-app/core'
|
||||
import { useCallback } from 'react'
|
||||
import { PolygonEditor } from '../shared/polygon-editor'
|
||||
|
||||
/**
|
||||
* Site boundary editor - allows editing site polygon when in site phase
|
||||
* Uses the generic PolygonEditor component
|
||||
*/
|
||||
export const SiteBoundaryEditor: React.FC = () => {
|
||||
const nodes = useScene((state) => state.nodes)
|
||||
const rootNodeIds = useScene((state) => state.rootNodeIds)
|
||||
const updateNode = useScene((state) => state.updateNode)
|
||||
|
||||
// Get the site node (first root node)
|
||||
const siteNode = rootNodeIds[0] ? nodes[rootNodeIds[0]] : null
|
||||
const site = siteNode?.type === 'site' ? (siteNode as SiteNode) : null
|
||||
|
||||
const handlePolygonChange = useCallback(
|
||||
(newPolygon: Array<[number, number]>) => {
|
||||
if (site) {
|
||||
updateNode(site.id, {
|
||||
polygon: {
|
||||
type: 'polygon',
|
||||
points: newPolygon,
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
[site, updateNode],
|
||||
)
|
||||
|
||||
if (!site || !site.polygon?.points || site.polygon.points.length < 3) return null
|
||||
|
||||
return (
|
||||
<PolygonEditor
|
||||
polygon={site.polygon.points}
|
||||
color="#f59e0b"
|
||||
onPolygonChange={handlePolygonChange}
|
||||
minVertices={3}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -4,13 +4,16 @@ import { CeilingTool } from "./ceiling/ceiling-tool";
|
||||
import { ItemTool } from "./item/item-tool";
|
||||
import { MoveTool } from "./item/move-tool";
|
||||
import { RoofTool } from "./roof/roof-tool";
|
||||
import { SiteBoundaryEditor } from "./site/site-boundary-editor";
|
||||
import { SlabTool } from "./slab/slab-tool";
|
||||
import { WallTool } from "./wall/wall-tool";
|
||||
import { ZoneBoundaryEditor } from "./zone/zone-boundary-editor";
|
||||
import { ZoneTool } from "./zone/zone-tool";
|
||||
|
||||
const tools: Record<Phase, Partial<Record<Tool, React.FC>>> = {
|
||||
site: {},
|
||||
site: {
|
||||
"property-line": SiteBoundaryEditor,
|
||||
},
|
||||
structure: {
|
||||
wall: WallTool,
|
||||
slab: SlabTool,
|
||||
@@ -31,6 +34,9 @@ export const ToolManager: React.FC = () => {
|
||||
const movingNode = useEditor((state) => state.movingNode);
|
||||
const selectedZoneId = useViewer((state) => state.selection.zoneId);
|
||||
|
||||
// Show site boundary editor when in site phase and edit mode
|
||||
const showSiteBoundaryEditor = phase === "site" && mode === "edit";
|
||||
|
||||
// Show zone boundary editor when in structure/select mode with a zone selected
|
||||
const showZoneBoundaryEditor =
|
||||
phase === "structure" && mode === "select" && selectedZoneId !== null;
|
||||
@@ -42,6 +48,7 @@ export const ToolManager: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{showSiteBoundaryEditor && <SiteBoundaryEditor />}
|
||||
{showZoneBoundaryEditor && <ZoneBoundaryEditor />}
|
||||
{movingNode && <MoveTool />}
|
||||
{!movingNode && BuildToolComponent && <BuildToolComponent />}
|
||||
|
||||
@@ -1,299 +1,37 @@
|
||||
import { useScene, type ZoneNode } from '@pascal-app/core'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { useThree } from '@react-three/fiber'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import {
|
||||
BufferGeometry,
|
||||
Float32BufferAttribute,
|
||||
type Mesh,
|
||||
Plane,
|
||||
Raycaster,
|
||||
Vector2,
|
||||
Vector3,
|
||||
} from 'three'
|
||||
|
||||
const Y_OFFSET = 0.02
|
||||
|
||||
type DragState = {
|
||||
isDragging: boolean
|
||||
vertexIndex: number
|
||||
initialPosition: [number, number]
|
||||
pointerId: number
|
||||
}
|
||||
import { useCallback } from 'react'
|
||||
import { PolygonEditor } from '../shared/polygon-editor'
|
||||
|
||||
/**
|
||||
* Zone boundary editor - allows editing zone polygon vertices when a zone is selected
|
||||
* Uses the event emitter system for grid interactions
|
||||
* Uses the generic PolygonEditor component
|
||||
*/
|
||||
export const ZoneBoundaryEditor: React.FC = () => {
|
||||
const { gl, camera } = useThree()
|
||||
const selectedZoneId = useViewer((state) => state.selection.zoneId)
|
||||
const zoneNode = useScene((state) => (selectedZoneId ? state.nodes[selectedZoneId] : null))
|
||||
const zone = zoneNode?.type === 'zone' ? (zoneNode as ZoneNode) : null
|
||||
const updateNode = useScene((state) => state.updateNode)
|
||||
|
||||
// Local state for dragging
|
||||
const [dragState, setDragState] = useState<DragState | null>(null)
|
||||
const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]> | null>(null)
|
||||
const [hoveredVertex, setHoveredVertex] = useState<number | null>(null)
|
||||
const [hoveredMidpoint, setHoveredMidpoint] = useState<number | null>(null)
|
||||
|
||||
// Refs for raycasting during drag
|
||||
const dragPlane = useRef(new Plane(new Vector3(0, 1, 0), -Y_OFFSET))
|
||||
const raycaster = useRef(new Raycaster())
|
||||
const lineRef = useRef<Mesh>(null!)
|
||||
|
||||
// The polygon to display (preview during drag, or actual zone polygon)
|
||||
const displayPolygon = previewPolygon ?? zone?.polygon ?? []
|
||||
|
||||
// Calculate midpoints for adding new vertices
|
||||
const midpoints = useMemo(() => {
|
||||
if (displayPolygon.length < 2) return []
|
||||
return displayPolygon.map(([x1, z1], index) => {
|
||||
const nextIndex = (index + 1) % displayPolygon.length
|
||||
const [x2, z2] = displayPolygon[nextIndex]!
|
||||
return [(x1! + x2) / 2, (z1! + z2) / 2] as [number, number]
|
||||
})
|
||||
}, [displayPolygon])
|
||||
|
||||
// Handle vertex drag
|
||||
const handleVertexDrag = useCallback(
|
||||
(clientX: number, clientY: number, vertexIndex: number) => {
|
||||
if (!zone) return
|
||||
|
||||
const canvas = gl.domElement
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
const x = ((clientX - rect.left) / rect.width) * 2 - 1
|
||||
const y = -((clientY - rect.top) / rect.height) * 2 + 1
|
||||
|
||||
raycaster.current.setFromCamera(new Vector2(x, y), camera)
|
||||
const intersection = new Vector3()
|
||||
raycaster.current.ray.intersectPlane(dragPlane.current, intersection)
|
||||
|
||||
if (intersection) {
|
||||
// Snap to 0.5 grid
|
||||
const gridX = Math.round(intersection.x * 2) / 2
|
||||
const gridZ = Math.round(intersection.z * 2) / 2
|
||||
|
||||
const basePolygon = previewPolygon ?? zone.polygon
|
||||
const newPolygon = [...basePolygon]
|
||||
newPolygon[vertexIndex] = [gridX, gridZ]
|
||||
setPreviewPolygon(newPolygon)
|
||||
const handlePolygonChange = useCallback(
|
||||
(newPolygon: Array<[number, number]>) => {
|
||||
if (selectedZoneId) {
|
||||
updateNode(selectedZoneId, { polygon: newPolygon })
|
||||
}
|
||||
},
|
||||
[zone, gl, camera, previewPolygon],
|
||||
[selectedZoneId, updateNode],
|
||||
)
|
||||
|
||||
// Commit polygon changes
|
||||
const commitPolygonChange = useCallback(() => {
|
||||
if (previewPolygon && selectedZoneId) {
|
||||
updateNode(selectedZoneId, { polygon: previewPolygon })
|
||||
}
|
||||
setPreviewPolygon(null)
|
||||
setDragState(null)
|
||||
}, [previewPolygon, selectedZoneId, updateNode])
|
||||
if (!zone || !zone.polygon || zone.polygon.length < 3) return null
|
||||
|
||||
// Handle adding a new vertex at midpoint
|
||||
const handleAddVertex = useCallback(
|
||||
(afterIndex: number, position: [number, number]) => {
|
||||
if (!zone) return -1
|
||||
|
||||
const basePolygon = previewPolygon ?? zone.polygon
|
||||
const newPolygon = [
|
||||
...basePolygon.slice(0, afterIndex + 1),
|
||||
position,
|
||||
...basePolygon.slice(afterIndex + 1),
|
||||
]
|
||||
|
||||
setPreviewPolygon(newPolygon)
|
||||
return afterIndex + 1 // Return new vertex index
|
||||
},
|
||||
[zone, previewPolygon],
|
||||
)
|
||||
|
||||
// Handle deleting a vertex
|
||||
const handleDeleteVertex = useCallback(
|
||||
(index: number) => {
|
||||
if (!zone || !selectedZoneId) return
|
||||
|
||||
const basePolygon = previewPolygon ?? zone.polygon
|
||||
if (basePolygon.length <= 3) return // Need at least 3 points
|
||||
|
||||
const newPolygon = basePolygon.filter((_, i) => i !== index)
|
||||
updateNode(selectedZoneId, { polygon: newPolygon })
|
||||
setPreviewPolygon(null)
|
||||
},
|
||||
[zone, selectedZoneId, previewPolygon, updateNode],
|
||||
)
|
||||
|
||||
// Set up pointer move/up listeners for dragging with pointer capture
|
||||
useEffect(() => {
|
||||
if (!dragState?.isDragging) return
|
||||
|
||||
const canvas = gl.domElement
|
||||
const pointerId = dragState.pointerId
|
||||
|
||||
// Capture pointer to prevent R3F events from firing on other objects (like the grid)
|
||||
canvas.setPointerCapture(pointerId)
|
||||
|
||||
const handlePointerMove = (e: PointerEvent) => {
|
||||
handleVertexDrag(e.clientX, e.clientY, dragState.vertexIndex)
|
||||
}
|
||||
|
||||
const handlePointerUp = (e: PointerEvent) => {
|
||||
// Release pointer capture
|
||||
if (canvas.hasPointerCapture(e.pointerId)) {
|
||||
canvas.releasePointerCapture(e.pointerId)
|
||||
}
|
||||
commitPolygonChange()
|
||||
}
|
||||
|
||||
canvas.addEventListener('pointermove', handlePointerMove)
|
||||
canvas.addEventListener('pointerup', handlePointerUp)
|
||||
|
||||
return () => {
|
||||
// Release capture on cleanup
|
||||
if (canvas.hasPointerCapture(pointerId)) {
|
||||
canvas.releasePointerCapture(pointerId)
|
||||
}
|
||||
canvas.removeEventListener('pointermove', handlePointerMove)
|
||||
canvas.removeEventListener('pointerup', handlePointerUp)
|
||||
}
|
||||
}, [dragState, gl, handleVertexDrag, commitPolygonChange])
|
||||
|
||||
// Update line geometry when polygon changes
|
||||
useEffect(() => {
|
||||
if (!lineRef.current || displayPolygon.length < 2) return
|
||||
|
||||
const positions: number[] = []
|
||||
for (const [x, z] of displayPolygon) {
|
||||
positions.push(x!, Y_OFFSET + 0.01, z!)
|
||||
}
|
||||
// Close the loop
|
||||
const first = displayPolygon[0]!
|
||||
positions.push(first[0]!, Y_OFFSET + 0.01, first[1]!)
|
||||
|
||||
const geometry = new BufferGeometry()
|
||||
geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
|
||||
|
||||
lineRef.current.geometry.dispose()
|
||||
lineRef.current.geometry = geometry
|
||||
}, [displayPolygon])
|
||||
|
||||
if (!zone || displayPolygon.length < 3) return null
|
||||
|
||||
const canDelete = displayPolygon.length > 3
|
||||
const zoneColor = zone.color || '#3b82f6'
|
||||
|
||||
return (
|
||||
<group>
|
||||
{/* Border line */}
|
||||
{/* @ts-ignore */}
|
||||
<line ref={lineRef} frustumCulled={false} renderOrder={10}>
|
||||
<bufferGeometry />
|
||||
<lineBasicNodeMaterial
|
||||
color={zoneColor}
|
||||
linewidth={2}
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
transparent
|
||||
opacity={0.8}
|
||||
/>
|
||||
</line>
|
||||
|
||||
{/* Vertex handles */}
|
||||
{displayPolygon.map(([x, z], index) => {
|
||||
const isHovered = hoveredVertex === index
|
||||
const isDragging = dragState?.vertexIndex === index
|
||||
|
||||
return (
|
||||
<mesh
|
||||
key={`vertex-${index}`}
|
||||
position={[x!, Y_OFFSET, z!]}
|
||||
onPointerEnter={(e) => {
|
||||
e.stopPropagation()
|
||||
setHoveredVertex(index)
|
||||
}}
|
||||
onPointerLeave={(e) => {
|
||||
e.stopPropagation()
|
||||
setHoveredVertex(null)
|
||||
}}
|
||||
onPointerDown={(e) => {
|
||||
e.stopPropagation()
|
||||
setDragState({
|
||||
isDragging: true,
|
||||
vertexIndex: index,
|
||||
initialPosition: [x!, z!],
|
||||
pointerId: e.nativeEvent.pointerId,
|
||||
})
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
onDoubleClick={(e) => {
|
||||
e.stopPropagation()
|
||||
if (canDelete) {
|
||||
handleDeleteVertex(index)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<sphereGeometry args={[isHovered || isDragging ? 0.2 : 0.15, 16, 16]} />
|
||||
<meshBasicMaterial
|
||||
color={
|
||||
isDragging ? '#22c55e' : isHovered ? (canDelete ? '#ef4444' : '#ffffff') : zoneColor
|
||||
}
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
/>
|
||||
</mesh>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Midpoint handles for adding vertices (hidden while dragging) */}
|
||||
{!dragState &&
|
||||
midpoints.map(([x, z], index) => {
|
||||
const isHovered = hoveredMidpoint === index
|
||||
|
||||
return (
|
||||
<mesh
|
||||
key={`midpoint-${index}`}
|
||||
position={[x!, Y_OFFSET, z!]}
|
||||
onPointerEnter={(e) => {
|
||||
e.stopPropagation()
|
||||
setHoveredMidpoint(index)
|
||||
}}
|
||||
onPointerLeave={(e) => {
|
||||
e.stopPropagation()
|
||||
setHoveredMidpoint(null)
|
||||
}}
|
||||
onPointerDown={(e) => {
|
||||
e.stopPropagation()
|
||||
const newVertexIndex = handleAddVertex(index, [x!, z!])
|
||||
if (newVertexIndex >= 0) {
|
||||
setDragState({
|
||||
isDragging: true,
|
||||
vertexIndex: newVertexIndex,
|
||||
initialPosition: [x!, z!],
|
||||
pointerId: e.nativeEvent.pointerId,
|
||||
})
|
||||
setHoveredMidpoint(null)
|
||||
}
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<sphereGeometry args={[isHovered ? 0.12 : 0.08, 16, 16]} />
|
||||
<meshBasicMaterial
|
||||
color={isHovered ? '#22c55e' : zoneColor}
|
||||
depthTest={false}
|
||||
depthWrite={false}
|
||||
transparent
|
||||
opacity={isHovered ? 1 : 0.4}
|
||||
/>
|
||||
</mesh>
|
||||
)
|
||||
})}
|
||||
</group>
|
||||
<PolygonEditor
|
||||
polygon={zone.polygon}
|
||||
color={zoneColor}
|
||||
onPolygonChange={handlePolygonChange}
|
||||
minVertices={3}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -83,15 +83,17 @@ const useEditor = create<EditorState>()((set, get) => ({
|
||||
const selectBuildingAndLevel0 = () => {
|
||||
let buildingId = viewer.selection.buildingId
|
||||
|
||||
// If no building selected, find the first one
|
||||
// If no building selected, find the first one from site's children
|
||||
if (!buildingId) {
|
||||
const firstBuildingId = scene.rootNodeIds.find((id) => {
|
||||
const node = scene.nodes[id]
|
||||
return node?.type === 'building'
|
||||
})
|
||||
if (firstBuildingId) {
|
||||
buildingId = firstBuildingId as BuildingNode['id']
|
||||
viewer.setSelection({ buildingId })
|
||||
const siteNode = scene.rootNodeIds[0] ? scene.nodes[scene.rootNodeIds[0]] : null
|
||||
if (siteNode?.type === 'site') {
|
||||
const firstBuilding = siteNode.children
|
||||
.map((child) => (typeof child === 'string' ? scene.nodes[child] : child))
|
||||
.find((node) => node?.type === 'building')
|
||||
if (firstBuilding) {
|
||||
buildingId = firstBuilding.id as BuildingNode['id']
|
||||
viewer.setSelection({ buildingId })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -24,12 +24,12 @@ export const SiteNode = BaseNode.extend({
|
||||
// Specific props
|
||||
polygon: PropertyLineData.optional().default({
|
||||
type: 'polygon',
|
||||
// Default 30x30 square matching GRID_SIZE
|
||||
// Default 30x30 square centered at origin
|
||||
points: [
|
||||
[0, 0],
|
||||
[30, 0],
|
||||
[30, 30],
|
||||
[0, 30],
|
||||
[-15, -15],
|
||||
[15, -15],
|
||||
[15, 15],
|
||||
[-15, 15],
|
||||
],
|
||||
}),
|
||||
// terrain: TerrainData,
|
||||
|
||||
@@ -1,20 +1,103 @@
|
||||
import { type SiteNode, useRegistry } from '@pascal-app/core'
|
||||
import { useRef } from 'react'
|
||||
import type { Group } from 'three'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import { BufferGeometry, DoubleSide, Float32BufferAttribute, type Group, Shape } from 'three'
|
||||
import { useNodeEvents } from '../../../hooks/use-node-events'
|
||||
import { NodeRenderer } from '../node-renderer'
|
||||
|
||||
const Y_OFFSET = 0.01
|
||||
const LINE_HEIGHT = 0.5
|
||||
|
||||
/**
|
||||
* Creates simple line geometry for site boundary
|
||||
* Single horizontal line at ground level
|
||||
*/
|
||||
const createBoundaryLineGeometry = (points: Array<[number, number]>): BufferGeometry => {
|
||||
const geometry = new BufferGeometry()
|
||||
|
||||
if (points.length < 2) return geometry
|
||||
|
||||
const positions: number[] = []
|
||||
|
||||
// Create a simple line loop at ground level
|
||||
for (const [x, z] of points) {
|
||||
positions.push(x!, Y_OFFSET, z!)
|
||||
}
|
||||
// Close the loop
|
||||
positions.push(points[0]![0]!, Y_OFFSET, points[0]![1]!)
|
||||
|
||||
geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
|
||||
|
||||
return geometry
|
||||
}
|
||||
|
||||
export const SiteRenderer = ({ node }: { node: SiteNode }) => {
|
||||
const ref = useRef<Group>(null!)
|
||||
|
||||
useRegistry(node.id, node.type, ref)
|
||||
useRegistry(node.id, 'site', ref)
|
||||
|
||||
// Create floor shape from polygon points
|
||||
const floorShape = useMemo(() => {
|
||||
if (!node?.polygon?.points || node.polygon.points.length < 3) return null
|
||||
const shape = new Shape()
|
||||
const firstPt = node.polygon.points[0]!
|
||||
|
||||
// Shape is in X-Y plane, we rotate it to X-Z plane
|
||||
// Negate Y (which becomes Z) to get correct orientation
|
||||
shape.moveTo(firstPt[0]!, -firstPt[1]!)
|
||||
|
||||
for (let i = 1; i < node.polygon.points.length; i++) {
|
||||
const pt = node.polygon.points[i]!
|
||||
shape.lineTo(pt[0]!, -pt[1]!)
|
||||
}
|
||||
shape.closePath()
|
||||
|
||||
return shape
|
||||
}, [node?.polygon?.points])
|
||||
|
||||
// Create boundary line geometry
|
||||
const lineGeometry = useMemo(() => {
|
||||
if (!node?.polygon?.points || node.polygon.points.length < 2) return null
|
||||
return createBoundaryLineGeometry(node.polygon.points)
|
||||
}, [node?.polygon?.points])
|
||||
|
||||
const handlers = useNodeEvents(node, 'site')
|
||||
|
||||
if (!node || !floorShape || !lineGeometry) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<group ref={ref} {...handlers}>
|
||||
{/* Render children (buildings and items) */}
|
||||
{node.children.map((child) => (
|
||||
<NodeRenderer key={child.id} nodeId={child.id} />
|
||||
<NodeRenderer
|
||||
key={typeof child === 'string' ? child : child.id}
|
||||
nodeId={typeof child === 'string' ? child : child.id}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Transparent floor fill */}
|
||||
<mesh position={[0, Y_OFFSET - 0.005, 0]} rotation={[-Math.PI / 2, 0, 0]}>
|
||||
<shapeGeometry args={[floorShape]} />
|
||||
<meshBasicMaterial
|
||||
color="#f59e0b"
|
||||
transparent
|
||||
opacity={0.05}
|
||||
side={DoubleSide}
|
||||
depthWrite={false}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
{/* Simple boundary line */}
|
||||
{/* @ts-ignore */}
|
||||
<line geometry={lineGeometry} frustumCulled={false} renderOrder={9}>
|
||||
<lineBasicMaterial
|
||||
color="#f59e0b"
|
||||
linewidth={2}
|
||||
transparent
|
||||
opacity={0.6}
|
||||
/>
|
||||
</line>
|
||||
</group>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user