diff --git a/apps/editor/components/editor/index.tsx b/apps/editor/components/editor/index.tsx index 669e6894..ec095031 100644 --- a/apps/editor/components/editor/index.tsx +++ b/apps/editor/components/editor/index.tsx @@ -27,6 +27,7 @@ import { SelectionManager } from './selection-manager' import { SiteEdgeLabels } from './site-edge-labels' import { ThumbnailGenerator } from './thumbnail-generator' + // Load default scene initially (will be replaced when project loads) useScene.getState().loadScene() initSpatialGridSync() @@ -107,7 +108,7 @@ export default function Editor({ projectId }: EditorProps) { - + diff --git a/packages/viewer/src/components/renderers/zone/zone-renderer.tsx b/packages/viewer/src/components/renderers/zone/zone-renderer.tsx index bbf9a81f..315d5f60 100644 --- a/packages/viewer/src/components/renderers/zone/zone-renderer.tsx +++ b/packages/viewer/src/components/renderers/zone/zone-renderer.tsx @@ -1,11 +1,10 @@ -import { useRegistry, type ZoneNode, useScene } from '@pascal-app/core' +import { useRegistry, type ZoneNode } from '@pascal-app/core' import { Html } from '@react-three/drei' -import { useMemo, useRef, useState, useEffect } from 'react' +import { useMemo, useRef } from 'react' import { BufferGeometry, Color, DoubleSide, Float32BufferAttribute, type Group, Shape } from 'three' import { color, float, uniform, uv } from 'three/tsl' import { MeshBasicNodeMaterial } from 'three/webgpu' import { useNodeEvents } from '../../../hooks/use-node-events' -import useViewer from '../../../store/use-viewer' const Y_OFFSET = 0.01 const WALL_HEIGHT = 2.3 @@ -105,43 +104,6 @@ const createWallGeometry = (polygon: Array<[number, number]>): BufferGeometry => export const ZoneRenderer = ({ node }: { node: ZoneNode }) => { const ref = useRef(null!) - const updateNode = useScene((s) => s.updateNode) - const isEditor = useViewer((state) => state.isEditor) - - const [isEditing, setIsEditing] = useState(false) - const [isHovered, setIsHovered] = useState(false) - const [editValue, setEditValue] = useState(node.name || '') - const inputRef = useRef(null) - - useEffect(() => { - if (isEditing) { - setEditValue(node.name || '') - setTimeout(() => { - if (inputRef.current) { - inputRef.current.focus() - inputRef.current.select() - } - }, 0) - } - }, [isEditing, node.name]) - - const handleSave = () => { - const trimmed = editValue.trim() - if (trimmed !== node.name) { - updateNode(node.id, { name: trimmed || 'Zone' }) - } - setIsEditing(false) - } - - const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === 'Enter') { - e.preventDefault() - handleSave() - } else if (e.key === 'Escape') { - e.preventDefault() - setIsEditing(false) - } - } useRegistry(node.id, 'zone', ref) @@ -215,71 +177,20 @@ export const ZoneRenderer = ({ node }: { node: ZoneNode }) => { } return ( - - + +
isEditor && setIsHovered(true)} - onMouseLeave={() => isEditor && setIsHovered(false)} - onClick={(e) => { - if (isEditor && !isEditing) { - e.stopPropagation() - setIsEditing(true) - } }}> - {isEditing ? ( - setEditValue(e.target.value)} - onKeyDown={handleKeyDown} - onBlur={handleSave} - placeholder="Zone" - style={{ - background: 'transparent', - color: 'white', - textShadow: 'inherit', - border: 'none', - borderBottom: '1px solid white', - outline: 'none', - padding: 0, - margin: 0, - fontSize: 'inherit', - fontFamily: 'inherit', - width: `${Math.max(editValue.length, 4) + 1}ch`, - minWidth: '50px', - textAlign: 'center' - }} - onClick={(e) => e.stopPropagation()} - onDoubleClick={(e) => e.stopPropagation()} - /> - ) : ( - <> - {node.name} - {isEditor && ( -
- - - - -
- )} - - )} + {node.name}
{/* Floor fill */} diff --git a/packages/viewer/src/components/viewer/index.tsx b/packages/viewer/src/components/viewer/index.tsx index 2b144668..4840125c 100644 --- a/packages/viewer/src/components/viewer/index.tsx +++ b/packages/viewer/src/components/viewer/index.tsx @@ -11,7 +11,7 @@ import { } from '@pascal-app/core' import { Bvh } from '@react-three/drei' import { Canvas, extend, type ThreeToJSXElements, useFrame } from '@react-three/fiber' -import { useEffect, useMemo, useRef } from 'react' +import { useMemo, useRef } from 'react' import * as THREE from 'three/webgpu' import useViewer from '../../store/use-viewer' import { GuideSystem } from '../../systems/guide/guide-system' @@ -62,23 +62,14 @@ extend(THREE as any) interface ViewerProps { children?: React.ReactNode selectionManager?: 'default' | 'custom' - isEditor?: boolean } const Viewer: React.FC = ({ children, selectionManager = 'default', - isEditor = false, }) => { - const setIsEditor = useViewer((state) => state.setIsEditor) const theme = useViewer((state) => state.theme) - const bgColor = theme === 'dark' ? '#1f2433' : '#fafafa' - - useEffect(() => { - setIsEditor(isEditor) - }, [isEditor, setIsEditor]) - return ( void - selection: SelectionPath hoveredId: AnyNode['id'] | ZoneNode['id'] | null setHoveredId: (id: AnyNode['id'] | ZoneNode['id'] | null) => void @@ -74,8 +71,6 @@ type ViewerState = { const useViewer = create()( persist( (set) => ({ - isEditor: false, - setIsEditor: (isEditor) => set({ isEditor }), selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] }, hoveredId: null, setHoveredId: (id) => set({ hoveredId: id }),