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

fix build

Browse Source
This commit is contained in:
wass08
2026-02-09 16:14:39 +09:00
parent cba709cb81
commit 9a838ae3c4
1 changed files with 114 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/editor/components/tools/ceiling/ceiling-tool.tsx
+114 -142
View File
@@ -1,122 +1,112 @@
import { emitter, type GridEvent, useScene, CeilingNode } from "@pascal-app/core"; import { CeilingNode, emitter, type GridEvent, type LevelNode, useScene } from '@pascal-app/core'
import { useViewer } from "@pascal-app/viewer"; import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from 'react'
import { BufferGeometry, DoubleSide, type Line, type Mesh, Shape, Vector3 } from "three"; import { BufferGeometry, DoubleSide, type Line, type Mesh, Shape, Vector3 } from 'three'
import useEditor from "@/store/use-editor"; import useEditor from '@/store/use-editor'
const CEILING_HEIGHT = 2.52; const CEILING_HEIGHT = 2.52
const GRID_OFFSET = 0.02; const GRID_OFFSET = 0.02
/** /**
* Snaps a point to the nearest axis-aligned or 45-degree diagonal from the last point * Snaps a point to the nearest axis-aligned or 45-degree diagonal from the last point
*/ */
const calculateSnapPoint = ( const calculateSnapPoint = (
lastPoint: [number, number], lastPoint: [number, number],
currentPoint: [number, number] currentPoint: [number, number],
): [number, number] => { ): [number, number] => {
const [x1, y1] = lastPoint; const [x1, y1] = lastPoint
const [x, y] = currentPoint; const [x, y] = currentPoint
const dx = x - x1; const dx = x - x1
const dy = y - y1; const dy = y - y1
const absDx = Math.abs(dx); const absDx = Math.abs(dx)
const absDy = Math.abs(dy); const absDy = Math.abs(dy)
// Calculate distances to horizontal, vertical, and diagonal lines // Calculate distances to horizontal, vertical, and diagonal lines
const horizontalDist = absDy; const horizontalDist = absDy
const verticalDist = absDx; const verticalDist = absDx
const diagonalDist = Math.abs(absDx - absDy); const diagonalDist = Math.abs(absDx - absDy)
// Find the minimum distance to determine which axis to snap to // Find the minimum distance to determine which axis to snap to
const minDist = Math.min(horizontalDist, verticalDist, diagonalDist); const minDist = Math.min(horizontalDist, verticalDist, diagonalDist)
if (minDist === diagonalDist) { if (minDist === diagonalDist) {
// Snap to 45° diagonal // Snap to 45° diagonal
const diagonalLength = Math.min(absDx, absDy); const diagonalLength = Math.min(absDx, absDy)
return [ return [x1 + Math.sign(dx) * diagonalLength, y1 + Math.sign(dy) * diagonalLength]
x1 + Math.sign(dx) * diagonalLength,
y1 + Math.sign(dy) * diagonalLength,
];
} else if (minDist === horizontalDist) { } else if (minDist === horizontalDist) {
// Snap to horizontal // Snap to horizontal
return [x, y1]; return [x, y1]
} else { } else {
// Snap to vertical // Snap to vertical
return [x1, y]; return [x1, y]
} }
}; }
/** /**
* Creates a ceiling with the given polygon points * Creates a ceiling with the given polygon points
*/ */
const commitCeilingDrawing = ( const commitCeilingDrawing = (levelId: LevelNode['id'], points: Array<[number, number]>) => {
levelId: string, const { createNode, nodes } = useScene.getState()
points: Array<[number, number]>
) => {
const { createNode, nodes } = useScene.getState();
// Count existing ceilings for naming // Count existing ceilings for naming
const ceilingCount = Object.values(nodes).filter((n) => n.type === "ceiling").length; const ceilingCount = Object.values(nodes).filter((n) => n.type === 'ceiling').length
const name = `Ceiling ${ceilingCount + 1}`; const name = `Ceiling ${ceilingCount + 1}`
const ceiling = CeilingNode.parse({ const ceiling = CeilingNode.parse({
name, name,
polygon: points, polygon: points,
}); })
createNode(ceiling, levelId); createNode(ceiling, levelId)
}; }
export const CeilingTool: React.FC = () => { export const CeilingTool: React.FC = () => {
const cursorRef = useRef<Mesh>(null); const cursorRef = useRef<Mesh>(null)
const gridCursorRef = useRef<Mesh>(null); const gridCursorRef = useRef<Mesh>(null)
const mainLineRef = useRef<Line>(null!); const mainLineRef = useRef<Line>(null!)
const closingLineRef = useRef<Line>(null!); const closingLineRef = useRef<Line>(null!)
const currentLevelId = useViewer((state) => state.selection.levelId); const currentLevelId = useViewer((state) => state.selection.levelId)
const setTool = useEditor((state) => state.setTool); const setTool = useEditor((state) => state.setTool)
const [points, setPoints] = useState<Array<[number, number]>>([]); const [points, setPoints] = useState<Array<[number, number]>>([])
const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0]); const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0])
const [levelY, setLevelY] = useState(0); const [levelY, setLevelY] = useState(0)
// Update cursor position and lines on grid move // Update cursor position and lines on grid move
useEffect(() => { useEffect(() => {
if (!currentLevelId) return; if (!currentLevelId) return
const onGridMove = (event: GridEvent) => { const onGridMove = (event: GridEvent) => {
if (!cursorRef.current || !gridCursorRef.current) return; if (!cursorRef.current || !gridCursorRef.current) return
const gridX = Math.round(event.position[0] * 2) / 2; const gridX = Math.round(event.position[0] * 2) / 2
const gridZ = Math.round(event.position[2] * 2) / 2; const gridZ = Math.round(event.position[2] * 2) / 2
const gridPosition: [number, number] = [gridX, gridZ]; const gridPosition: [number, number] = [gridX, gridZ]
setCursorPosition(gridPosition); setCursorPosition(gridPosition)
setLevelY(event.position[1]); setLevelY(event.position[1])
const ceilingY = event.position[1] + CEILING_HEIGHT; const ceilingY = event.position[1] + CEILING_HEIGHT
const gridY = event.position[1] + GRID_OFFSET; const gridY = event.position[1] + GRID_OFFSET
// Calculate snapped display position // Calculate snapped display position
const lastPoint = points[points.length - 1]; const lastPoint = points[points.length - 1]
const displayPoint = lastPoint const displayPoint = lastPoint ? calculateSnapPoint(lastPoint, gridPosition) : gridPosition
? calculateSnapPoint(lastPoint, gridPosition)
: gridPosition;
cursorRef.current.position.set(displayPoint[0], ceilingY, displayPoint[1]); cursorRef.current.position.set(displayPoint[0], ceilingY, displayPoint[1])
gridCursorRef.current.position.set(displayPoint[0], gridY, displayPoint[1]); gridCursorRef.current.position.set(displayPoint[0], gridY, displayPoint[1])
}; }
const onGridClick = (_event: GridEvent) => { const onGridClick = (_event: GridEvent) => {
if (!currentLevelId) return; if (!currentLevelId) return
// Calculate snapped click point // Calculate snapped click point
const lastPoint = points[points.length - 1]; const lastPoint = points[points.length - 1]
const clickPoint = lastPoint const clickPoint = lastPoint ? calculateSnapPoint(lastPoint, cursorPosition) : cursorPosition
? calculateSnapPoint(lastPoint, cursorPosition)
: cursorPosition;
// Check if clicking on the first point to close the shape // Check if clicking on the first point to close the shape
const firstPoint = points[0]; const firstPoint = points[0]
if ( if (
points.length >= 3 && points.length >= 3 &&
firstPoint && firstPoint &&
@@ -124,133 +114,120 @@ export const CeilingTool: React.FC = () => {
Math.abs(clickPoint[1] - firstPoint[1]) < 0.25 Math.abs(clickPoint[1] - firstPoint[1]) < 0.25
) { ) {
// Create the ceiling // Create the ceiling
commitCeilingDrawing(currentLevelId, points); commitCeilingDrawing(currentLevelId, points)
setPoints([]); setPoints([])
setTool(null); setTool(null)
} else { } else {
// Add point to polygon // Add point to polygon
setPoints([...points, clickPoint]); setPoints([...points, clickPoint])
} }
}; }
const onGridDoubleClick = (_event: GridEvent) => { const onGridDoubleClick = (_event: GridEvent) => {
if (!currentLevelId) return; if (!currentLevelId) return
// Need at least 3 points to form a polygon // Need at least 3 points to form a polygon
if (points.length >= 3) { if (points.length >= 3) {
commitCeilingDrawing(currentLevelId, points); commitCeilingDrawing(currentLevelId, points)
setPoints([]); setPoints([])
setTool(null); setTool(null)
} }
}; }
emitter.on("grid:move", onGridMove); emitter.on('grid:move', onGridMove)
emitter.on("grid:click", onGridClick); emitter.on('grid:click', onGridClick)
emitter.on("grid:double-click", onGridDoubleClick); emitter.on('grid:double-click', onGridDoubleClick)
return () => { return () => {
emitter.off("grid:move", onGridMove); emitter.off('grid:move', onGridMove)
emitter.off("grid:click", onGridClick); emitter.off('grid:click', onGridClick)
emitter.off("grid:double-click", onGridDoubleClick); emitter.off('grid:double-click', onGridDoubleClick)
}; }
}, [currentLevelId, points, cursorPosition, setTool]); }, [currentLevelId, points, cursorPosition, setTool])
// Update line geometries when points change // Update line geometries when points change
useEffect(() => { useEffect(() => {
if (!mainLineRef.current || !closingLineRef.current) return; if (!mainLineRef.current || !closingLineRef.current) return
if (points.length === 0) { if (points.length === 0) {
mainLineRef.current.visible = false; mainLineRef.current.visible = false
closingLineRef.current.visible = false; closingLineRef.current.visible = false
return; return
} }
const ceilingY = levelY + CEILING_HEIGHT; const ceilingY = levelY + CEILING_HEIGHT
const lastPoint = points[points.length - 1]; const lastPoint = points[points.length - 1]
const snappedCursor = lastPoint const snappedCursor = lastPoint ? calculateSnapPoint(lastPoint, cursorPosition) : cursorPosition
? calculateSnapPoint(lastPoint, cursorPosition)
: cursorPosition;
// Build main line points // Build main line points
const linePoints: Vector3[] = points.map(([x, z]) => new Vector3(x, ceilingY, z)); const linePoints: Vector3[] = points.map(([x, z]) => new Vector3(x, ceilingY, z))
linePoints.push(new Vector3(snappedCursor[0], ceilingY, snappedCursor[1])); linePoints.push(new Vector3(snappedCursor[0], ceilingY, snappedCursor[1]))
// Update main line // Update main line
if (linePoints.length >= 2) { if (linePoints.length >= 2) {
mainLineRef.current.geometry.dispose(); mainLineRef.current.geometry.dispose()
mainLineRef.current.geometry = new BufferGeometry().setFromPoints(linePoints); mainLineRef.current.geometry = new BufferGeometry().setFromPoints(linePoints)
mainLineRef.current.visible = true; mainLineRef.current.visible = true
} else { } else {
mainLineRef.current.visible = false; mainLineRef.current.visible = false
} }
// Update closing line (from cursor back to first point) // Update closing line (from cursor back to first point)
const firstPoint = points[0]; const firstPoint = points[0]
if (points.length >= 2 && firstPoint) { if (points.length >= 2 && firstPoint) {
const closingPoints = [ const closingPoints = [
new Vector3(snappedCursor[0], ceilingY, snappedCursor[1]), new Vector3(snappedCursor[0], ceilingY, snappedCursor[1]),
new Vector3(firstPoint[0], ceilingY, firstPoint[1]), new Vector3(firstPoint[0], ceilingY, firstPoint[1]),
]; ]
closingLineRef.current.geometry.dispose(); closingLineRef.current.geometry.dispose()
closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints); closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints)
closingLineRef.current.visible = true; closingLineRef.current.visible = true
} else { } else {
closingLineRef.current.visible = false; closingLineRef.current.visible = false
} }
}, [points, cursorPosition, levelY]); }, [points, cursorPosition, levelY])
// Create preview shape when we have 3+ points // Create preview shape when we have 3+ points
const previewShape = useMemo(() => { const previewShape = useMemo(() => {
if (points.length < 3) return null; if (points.length < 3) return null
const lastPoint = points[points.length - 1]; const lastPoint = points[points.length - 1]
const snappedCursor = lastPoint const snappedCursor = lastPoint ? calculateSnapPoint(lastPoint, cursorPosition) : cursorPosition
? calculateSnapPoint(lastPoint, cursorPosition)
: cursorPosition;
const allPoints = [...points, snappedCursor]; const allPoints = [...points, snappedCursor]
// THREE.Shape is in X-Y plane. After rotation of -PI/2 around X: // THREE.Shape is in X-Y plane. After rotation of -PI/2 around X:
// - Shape X -> World X // - Shape X -> World X
// - Shape Y -> World -Z (so we negate Z to get correct orientation) // - Shape Y -> World -Z (so we negate Z to get correct orientation)
const firstPt = allPoints[0]; const firstPt = allPoints[0]
if (!firstPt) return null; if (!firstPt) return null
const shape = new Shape(); const shape = new Shape()
shape.moveTo(firstPt[0], -firstPt[1]); shape.moveTo(firstPt[0], -firstPt[1])
for (let i = 1; i < allPoints.length; i++) { for (let i = 1; i < allPoints.length; i++) {
const pt = allPoints[i]; const pt = allPoints[i]
if (pt) { if (pt) {
shape.lineTo(pt[0], -pt[1]); shape.lineTo(pt[0], -pt[1])
} }
} }
shape.closePath(); shape.closePath()
return shape; return shape
}, [points, cursorPosition]); }, [points, cursorPosition])
return ( return (
<group> <group>
{/* Cursor at ceiling height */} {/* Cursor at ceiling height */}
<mesh ref={cursorRef}> <mesh ref={cursorRef}>
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial <meshBasicMaterial color="#d4d4d4" depthTest={false} depthWrite={false} />
color="#d4d4d4"
depthTest={false}
depthWrite={false}
/>
</mesh> </mesh>
{/* Grid-level cursor indicator */} {/* Grid-level cursor indicator */}
<mesh ref={gridCursorRef} rotation={[-Math.PI / 2, 0, 0]}> <mesh ref={gridCursorRef} rotation={[-Math.PI / 2, 0, 0]}>
<ringGeometry args={[0.15, 0.2, 32]} /> <ringGeometry args={[0.15, 0.2, 32]} />
<meshBasicMaterial <meshBasicMaterial color="#a3a3a3" side={DoubleSide} depthTest={false} depthWrite={false} />
color="#a3a3a3"
side={DoubleSide}
depthTest={false}
depthWrite={false}
/>
</mesh> </mesh>
{/* Preview fill */} {/* Preview fill */}
@@ -275,12 +252,7 @@ export const CeilingTool: React.FC = () => {
{/* @ts-ignore */} {/* @ts-ignore */}
<line ref={mainLineRef} frustumCulled={false} renderOrder={1} visible={false}> <line ref={mainLineRef} frustumCulled={false} renderOrder={1} visible={false}>
<bufferGeometry /> <bufferGeometry />
<lineBasicNodeMaterial <lineBasicNodeMaterial color="#a3a3a3" linewidth={3} depthTest={false} depthWrite={false} />
color="#a3a3a3"
linewidth={3}
depthTest={false}
depthWrite={false}
/>
</line> </line>
{/* Closing line */} {/* Closing line */}
@@ -302,12 +274,12 @@ export const CeilingTool: React.FC = () => {
<mesh key={index} position={[x, levelY + CEILING_HEIGHT + 0.01, z]}> <mesh key={index} position={[x, levelY + CEILING_HEIGHT + 0.01, z]}>
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial <meshBasicMaterial
color={index === 0 ? "#22c55e" : "#d4d4d4"} color={index === 0 ? '#22c55e' : '#d4d4d4'}
depthTest={false} depthTest={false}
depthWrite={false} depthWrite={false}
/> />
</mesh> </mesh>
))} ))}
</group> </group>
); )
}; }