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

fix tools visibility

Browse Source
This commit is contained in:
wass08
2026-02-24 16:09:03 +09:00
parent 81ede241d5
commit 14708c041a
7 changed files with 170 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/editor/components/tools/ceiling/ceiling-tool.tsx
+26 -20
View File
@@ -2,8 +2,9 @@ import { CeilingNode, emitter, type GridEvent, type LevelNode, useScene } from '
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useRef, useState } from 'react'
import { BufferGeometry, DoubleSide, type Line, type Mesh, Shape, Vector3 } from 'three'
import useEditor from '@/store/use-editor'
import { sfxEmitter } from '@/lib/sfx-bus'
import useEditor from '@/store/use-editor'
import { CursorSphere } from '../shared/cursor-sphere'
const CEILING_HEIGHT = 2.52
const GRID_OFFSET = 0.02
@@ -97,12 +98,19 @@ export const CeilingTool: React.FC = () => {
// Calculate snapped display position (bypass snap when Shift is held)
const lastPoint = points[points.length - 1]
const displayPoint = (shiftPressed.current || !lastPoint) ? gridPosition : calculateSnapPoint(lastPoint, gridPosition)
const displayPoint =
shiftPressed.current || !lastPoint
? gridPosition
: calculateSnapPoint(lastPoint, gridPosition)
setSnappedCursorPosition(displayPoint)
// Play snap sound when the snapped position actually changes (only when drawing)
if (points.length > 0 && previousSnappedPointRef.current &&
(displayPoint[0] !== previousSnappedPointRef.current[0] || displayPoint[1] !== previousSnappedPointRef.current[1])) {
if (
points.length > 0 &&
previousSnappedPointRef.current &&
(displayPoint[0] !== previousSnappedPointRef.current[0] ||
displayPoint[1] !== previousSnappedPointRef.current[1])
) {
sfxEmitter.emit('sfx:grid-snap')
}
@@ -150,8 +158,12 @@ export const CeilingTool: React.FC = () => {
setPoints([])
}
const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Shift') shiftPressed.current = true }
const onKeyUp = (e: KeyboardEvent) => { if (e.key === 'Shift') shiftPressed.current = false }
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Shift') shiftPressed.current = true
}
const onKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Shift') shiftPressed.current = false
}
document.addEventListener('keydown', onKeyDown)
document.addEventListener('keyup', onKeyUp)
@@ -242,15 +254,12 @@ export const CeilingTool: React.FC = () => {
return (
<group>
{/* Cursor at ceiling height */}
<mesh ref={cursorRef}>
<sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial color="#d4d4d4" depthTest={false} depthWrite={false} />
</mesh>
<CursorSphere ref={cursorRef} />
{/* Grid-level cursor indicator */}
<mesh ref={gridCursorRef} rotation={[-Math.PI / 2, 0, 0]}>
<mesh ref={gridCursorRef} rotation={[-Math.PI / 2, 0, 0]} renderOrder={2}>
<ringGeometry args={[0.15, 0.2, 32]} />
<meshBasicMaterial color="#a3a3a3" side={DoubleSide} depthTest={false} depthWrite={false} />
<meshBasicMaterial color="#a3a3a3" side={DoubleSide} depthTest={false} depthWrite={true} />
</mesh>
{/* Preview fill */}
@@ -294,14 +303,11 @@ export const CeilingTool: React.FC = () => {
{/* Point markers */}
{points.map(([x, z], index) => (
<mesh key={index} position={[x, levelY + CEILING_HEIGHT + 0.01, z]}>
<sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial
color={index === 0 ? '#22c55e' : '#d4d4d4'}
depthTest={false}
depthWrite={false}
/>
</mesh>
<CursorSphere
key={index}
position={[x, levelY + CEILING_HEIGHT + 0.01, z]}
color={index === 0 ? '#22c55e' : undefined}
/>
))}
</group>
)
apps/editor/components/tools/roof/roof-tool.tsx
+114 -114
View File
@@ -1,37 +1,44 @@
import { emitter, type GridEvent, useScene, RoofNode, type LevelNode, type AnyNode } from "@pascal-app/core";
import { useViewer } from "@pascal-app/viewer";
import { useEffect, useMemo, useRef, useState } from "react";
import { BufferGeometry, DoubleSide, type Line, Vector3 } from "three";
import useEditor from "@/store/use-editor";
import { sfxEmitter } from '@/lib/sfx-bus';
import {
type AnyNode,
emitter,
type GridEvent,
type LevelNode,
RoofNode,
useScene,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useRef, useState } from 'react'
import { BufferGeometry, DoubleSide, type Line, Vector3 } from 'three'
import { sfxEmitter } from '@/lib/sfx-bus'
import useEditor from '@/store/use-editor'
// Default roof dimensions
const DEFAULT_HEIGHT = 1.5;
const PREVIEW_LINE_HEIGHT = 0.03; // Very thin preview
const DEFAULT_HEIGHT = 1.5
const PREVIEW_LINE_HEIGHT = 0.03 // Very thin preview
/**
* Creates a roof with the given corners
*/
const commitRoofPlacement = (
levelId: LevelNode["id"],
levelId: LevelNode['id'],
corner1: [number, number, number],
corner2: [number, number, number]
): RoofNode["id"] => {
const { createNode, nodes } = useScene.getState();
corner2: [number, number, number],
): RoofNode['id'] => {
const { createNode, nodes } = useScene.getState()
// Calculate center position and dimensions from corners
const centerX = (corner1[0] + corner2[0]) / 2;
const centerZ = (corner1[2] + corner2[2]) / 2;
const centerX = (corner1[0] + corner2[0]) / 2
const centerZ = (corner1[2] + corner2[2]) / 2
const length = Math.abs(corner2[0] - corner1[0]);
const width = Math.abs(corner2[2] - corner1[2]);
const length = Math.abs(corner2[0] - corner1[0])
const width = Math.abs(corner2[2] - corner1[2])
// Split width evenly between left and right slopes
const slopeWidth = Math.max(width / 2, 0.5);
const slopeWidth = Math.max(width / 2, 0.5)
// Count existing roofs for naming
const roofCount = Object.values(nodes).filter((n) => n.type === "roof").length;
const name = `Roof ${roofCount + 1}`;
const roofCount = Object.values(nodes).filter((n) => n.type === 'roof').length
const name = `Roof ${roofCount + 1}`
const roof = RoofNode.parse({
name,
@@ -40,151 +47,153 @@ const commitRoofPlacement = (
height: DEFAULT_HEIGHT,
leftWidth: slopeWidth,
rightWidth: slopeWidth,
});
})
createNode(roof, levelId);
sfxEmitter.emit('sfx:structure-build');
return roof.id;
};
createNode(roof, levelId)
sfxEmitter.emit('sfx:structure-build')
return roof.id
}
type PreviewState = {
corner1: [number, number, number] | null;
cursorPosition: [number, number, number];
levelY: number;
};
corner1: [number, number, number] | null
cursorPosition: [number, number, number]
levelY: number
}
export const RoofTool: React.FC = () => {
const outlineRef = useRef<Line>(null!);
const currentLevelId = useViewer((state) => state.selection.levelId);
const setSelection = useViewer((state) => state.setSelection);
const setTool = useEditor((state) => state.setTool);
const setMode = useEditor((state) => state.setMode);
const outlineRef = useRef<Line>(null!)
const currentLevelId = useViewer((state) => state.selection.levelId)
const setSelection = useViewer((state) => state.setSelection)
const setTool = useEditor((state) => state.setTool)
const setMode = useEditor((state) => state.setMode)
const corner1Ref = useRef<[number, number, number] | null>(null);
const previousGridPosRef = useRef<[number, number] | null>(null);
const corner1Ref = useRef<[number, number, number] | null>(null)
const previousGridPosRef = useRef<[number, number] | null>(null)
const [preview, setPreview] = useState<PreviewState>({
corner1: null,
cursorPosition: [0, 0, 0],
levelY: 0,
});
})
useEffect(() => {
if (!currentLevelId) return;
if (!currentLevelId) return
// Initialize outline geometry
outlineRef.current.geometry = new BufferGeometry();
outlineRef.current.geometry = new BufferGeometry()
const updateOutline = (corner1: [number, number, number], corner2: [number, number, number]) => {
const y = corner1[1] + PREVIEW_LINE_HEIGHT;
const updateOutline = (
corner1: [number, number, number],
corner2: [number, number, number],
) => {
const y = corner1[1] + PREVIEW_LINE_HEIGHT
const points = [
new Vector3(corner1[0], y, corner1[2]),
new Vector3(corner2[0], y, corner1[2]),
new Vector3(corner2[0], y, corner2[2]),
new Vector3(corner1[0], y, corner2[2]),
new Vector3(corner1[0], y, corner1[2]), // Close the loop
];
outlineRef.current.geometry.dispose();
outlineRef.current.geometry = new BufferGeometry().setFromPoints(points);
outlineRef.current.visible = true;
};
]
outlineRef.current.geometry.dispose()
outlineRef.current.geometry = new BufferGeometry().setFromPoints(points)
outlineRef.current.visible = true
}
const onGridMove = (event: GridEvent) => {
// Snap to 0.5 grid
const gridX = Math.round(event.position[0] * 2) / 2;
const gridZ = Math.round(event.position[2] * 2) / 2;
const y = event.position[1];
const gridX = Math.round(event.position[0] * 2) / 2
const gridZ = Math.round(event.position[2] * 2) / 2
const y = event.position[1]
const cursorPosition: [number, number, number] = [gridX, y, gridZ];
const cursorPosition: [number, number, number] = [gridX, y, gridZ]
// Play snap sound when grid position changes (only when placing)
if (corner1Ref.current && previousGridPosRef.current &&
(gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])) {
sfxEmitter.emit('sfx:grid-snap');
if (
corner1Ref.current &&
previousGridPosRef.current &&
(gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
) {
sfxEmitter.emit('sfx:grid-snap')
}
previousGridPosRef.current = [gridX, gridZ];
previousGridPosRef.current = [gridX, gridZ]
setPreview({
corner1: corner1Ref.current,
cursorPosition,
levelY: y,
});
})
// Update outline if we have first corner
if (corner1Ref.current) {
updateOutline(corner1Ref.current, cursorPosition);
updateOutline(corner1Ref.current, cursorPosition)
}
};
}
const onGridClick = (event: GridEvent) => {
if (!currentLevelId) return;
if (!currentLevelId) return
const gridX = Math.round(event.position[0] * 2) / 2;
const gridZ = Math.round(event.position[2] * 2) / 2;
const y = event.position[1];
const gridX = Math.round(event.position[0] * 2) / 2
const gridZ = Math.round(event.position[2] * 2) / 2
const y = event.position[1]
if (!corner1Ref.current) {
// First click - set corner 1
corner1Ref.current = [gridX, y, gridZ];
corner1Ref.current = [gridX, y, gridZ]
setPreview((prev) => ({
...prev,
corner1: corner1Ref.current,
}));
}))
} else {
// Second click - create the roof
const roofId = commitRoofPlacement(
currentLevelId,
corner1Ref.current,
[gridX, y, gridZ]
);
const roofId = commitRoofPlacement(currentLevelId, corner1Ref.current, [gridX, y, gridZ])
// Auto-select the newly created roof
setSelection({ selectedIds: [roofId as AnyNode["id"]] });
setSelection({ selectedIds: [roofId as AnyNode['id']] })
// Reset state
corner1Ref.current = null;
outlineRef.current.visible = false;
corner1Ref.current = null
outlineRef.current.visible = false
// Switch to select mode and deactivate tool
setMode('select');
setTool(null);
setMode('select')
setTool(null)
}
};
}
const onCancel = () => {
if (corner1Ref.current) {
corner1Ref.current = null;
outlineRef.current.visible = false;
setPreview((prev) => ({ ...prev, corner1: null }));
corner1Ref.current = null
outlineRef.current.visible = false
setPreview((prev) => ({ ...prev, corner1: null }))
}
};
}
// Subscribe to events
emitter.on("grid:move", onGridMove);
emitter.on("grid:click", onGridClick);
emitter.on("tool:cancel", onCancel);
emitter.on('grid:move', onGridMove)
emitter.on('grid:click', onGridClick)
emitter.on('tool:cancel', onCancel)
return () => {
emitter.off("grid:move", onGridMove);
emitter.off("grid:click", onGridClick);
emitter.off("tool:cancel", onCancel);
emitter.off('grid:move', onGridMove)
emitter.off('grid:click', onGridClick)
emitter.off('tool:cancel', onCancel)
// Reset state on unmount
corner1Ref.current = null;
};
}, [currentLevelId, setTool, setSelection, setMode]);
corner1Ref.current = null
}
}, [currentLevelId, setTool, setSelection, setMode])
const { corner1, cursorPosition, levelY } = preview;
const { corner1, cursorPosition, levelY } = preview
// Calculate preview dimensions for display
const previewDimensions = useMemo(() => {
if (!corner1) return null;
const length = Math.abs(cursorPosition[0] - corner1[0]);
const width = Math.abs(cursorPosition[2] - corner1[2]);
const centerX = (corner1[0] + cursorPosition[0]) / 2;
const centerZ = (corner1[2] + cursorPosition[2]) / 2;
return { length, width, centerX, centerZ };
}, [corner1, cursorPosition]);
if (!corner1) return null
const length = Math.abs(cursorPosition[0] - corner1[0])
const width = Math.abs(cursorPosition[2] - corner1[2])
const centerX = (corner1[0] + cursorPosition[0]) / 2
const centerZ = (corner1[2] + cursorPosition[2]) / 2
return { length, width, centerX, centerZ }
}, [corner1, cursorPosition])
return (
<group>
@@ -192,34 +201,25 @@ export const RoofTool: React.FC = () => {
{/* @ts-ignore */}
<line ref={outlineRef} frustumCulled={false} renderOrder={1} visible={false}>
<bufferGeometry />
<lineBasicNodeMaterial
color="#8b4513"
linewidth={2}
depthTest={false}
depthWrite={false}
/>
<lineBasicNodeMaterial color="#8b4513" linewidth={2} depthTest={false} depthWrite={false} />
</line>
{/* First corner marker */}
{corner1 && (
<mesh position={[corner1[0], levelY + 0.02, corner1[2]]} rotation={[-Math.PI / 2, 0, 0]}>
<mesh position={[corner1[0], levelY + 0.02, corner1[2]]} rotation={[-Math.PI / 2, 0, 0]} renderOrder={2}>
<ringGeometry args={[0.1, 0.15, 32]} />
<meshBasicMaterial
color="#22c55e"
depthTest={false}
depthWrite={false}
/>
<meshBasicMaterial color="#22c55e" depthTest={false} depthWrite={true} />
</mesh>
)}
{/* Cursor marker on ground */}
<mesh position={[cursorPosition[0], cursorPosition[1] + 0.02, cursorPosition[2]]} rotation={[-Math.PI / 2, 0, 0]}>
<mesh
position={[cursorPosition[0], cursorPosition[1] + 0.02, cursorPosition[2]]}
rotation={[-Math.PI / 2, 0, 0]}
renderOrder={2}
>
<ringGeometry args={[0.1, 0.15, 32]} />
<meshBasicMaterial
color="#8b4513"
depthTest={false}
depthWrite={false}
/>
<meshBasicMaterial color="#8b4513" depthTest={false} depthWrite={true} />
</mesh>
{/* Thin preview fill when drawing */}
@@ -240,5 +240,5 @@ export const RoofTool: React.FC = () => {
</mesh>
)}
</group>
);
};
)
}
apps/editor/components/tools/shared/cursor-sphere.tsx
+19
View File
@@ -0,0 +1,19 @@
import { forwardRef } from 'react'
import type { Mesh } from 'three'
interface CursorSphereProps extends Omit<JSX.IntrinsicElements['mesh'], 'ref'> {
color?: string
depthWrite?: boolean
}
export const CursorSphere = forwardRef<Mesh, CursorSphereProps>(function CursorSphere(
{ color = '#f1c066', ...props },
ref,
) {
return (
<mesh ref={ref} {...props} renderOrder={2}>
<sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial color={color} depthTest={false} depthWrite={true} />
</mesh>
)
})
apps/editor/components/tools/slab/slab-tool.tsx
+3 -12
View File
@@ -3,6 +3,7 @@ import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useRef, useState } from 'react'
import { BufferGeometry, DoubleSide, type Line, type Mesh, Shape, Vector3 } from 'three'
import { sfxEmitter } from '@/lib/sfx-bus'
import { CursorSphere } from '../shared/cursor-sphere'
const Y_OFFSET = 0.02
@@ -236,10 +237,7 @@ export const SlabTool: React.FC = () => {
return (
<group>
{/* Cursor */}
<mesh ref={cursorRef}>
<sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial color="#a3a3a3" depthTest={false} depthWrite={false} />
</mesh>
<CursorSphere ref={cursorRef} />
{/* Preview fill */}
{previewShape && (
@@ -282,14 +280,7 @@ export const SlabTool: React.FC = () => {
{/* Point markers */}
{points.map(([x, z], index) => (
<mesh key={index} position={[x, levelY + Y_OFFSET + 0.01, z]}>
<sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial
color={index === 0 ? '#22c55e' : '#a3a3a3'}
depthTest={false}
depthWrite={false}
/>
</mesh>
<CursorSphere key={index} position={[x, levelY + Y_OFFSET + 0.01, z]} color={index === 0 ? '#22c55e' : undefined} />
))}
</group>
)
apps/editor/components/tools/wall/wall-tool.tsx
+2 -4
View File
@@ -3,6 +3,7 @@ import { useViewer } from '@pascal-app/viewer'
import { useEffect, useRef } from 'react'
import { DoubleSide, type Mesh, Shape, ShapeGeometry, Vector3 } from 'three'
import { sfxEmitter } from '@/lib/sfx-bus'
import { CursorSphere } from '../shared/cursor-sphere'
const WALL_HEIGHT = 2.5
const WALL_THICKNESS = 0.15
@@ -183,10 +184,7 @@ export const WallTool: React.FC = () => {
return (
<group>
{/* Cursor indicator */}
<mesh ref={cursorRef}>
<sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial color="#a3a3a3" depthTest={false} depthWrite={false} />
</mesh>
<CursorSphere ref={cursorRef} />
{/* Wall preview */}
<mesh ref={wallPreviewRef} visible={false} renderOrder={1}>
apps/editor/components/tools/zone/zone-tool.tsx
+3 -16
View File
@@ -3,6 +3,7 @@ import { useViewer } from "@pascal-app/viewer";
import { useEffect, useMemo, useRef, useState } from "react";
import { BufferGeometry, DoubleSide, type Line, type Mesh, Shape, Vector3 } from "three";
import useEditor from "@/store/use-editor";
import { CursorSphere } from "../shared/cursor-sphere";
// Zone colors for cycling through
const ZONE_COLORS = [
@@ -317,14 +318,7 @@ export const ZoneTool: React.FC = () => {
return (
<group>
{/* Cursor */}
<mesh ref={cursorRef}>
<sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial
color="#3b82f6"
depthTest={false}
depthWrite={false}
/>
</mesh>
<CursorSphere ref={cursorRef} color="#3b82f6" />
{/* Preview fill */}
{previewShape && (
@@ -373,14 +367,7 @@ export const ZoneTool: React.FC = () => {
{/* Point markers */}
{points.map(([x, z], index) =>
isValidPoint([x, z]) ? (
<mesh key={index} position={[x, levelY + Y_OFFSET + 0.01, z]}>
<sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial
color={index === 0 ? "#22c55e" : "#3b82f6"}
depthTest={false}
depthWrite={false}
/>
</mesh>
<CursorSphere key={index} position={[x, levelY + Y_OFFSET + 0.01, z]} color={index === 0 ? "#22c55e" : "#3b82f6"} />
) : null
)}
</group>
packages/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx
+3 -4
View File
@@ -1,7 +1,7 @@
import { type CeilingNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { faceDirection, float, mix, positionWorld, smoothstep, step } from 'three/tsl'
import { DoubleSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
import { type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { NodeRenderer } from '../node-renderer'
@@ -10,7 +10,6 @@ import { NodeRenderer } from '../node-renderer'
// - Front face (looking down at ceiling from above): 30% opacity
const ceilingMaterial = new MeshBasicNodeMaterial({
color: 0x999999,
side: DoubleSide,
transparent: true,
depthWrite: false,
})
@@ -30,8 +29,8 @@ const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.
// Combine: if either X or Y is a line, show the line
const gridPattern = lineX.max(lineY)
// Grid lines at 0.8 opacity, spaces at 0.1 opacity
const gridOpacity = mix(float(0.1), float(0.8), gridPattern)
// Grid lines at 0.5 opacity, spaces at 0 opacity
const gridOpacity = mix(float(0.0), float(0.5), gridPattern)
// faceDirection is 1.0 for front face, -1.0 for back face
// Front face (top, looking down): grid pattern, Back face (bottom, looking up): solid