remove is editor completely

This commit is contained in:
wass08
2026-03-02 08:50:53 +09:00
parent d81a48d64e
commit 882d3fec7e
4 changed files with 13 additions and 115 deletions
+2 -1
View File
@@ -27,6 +27,7 @@ import { SelectionManager } from './selection-manager'
import { SiteEdgeLabels } from './site-edge-labels' import { SiteEdgeLabels } from './site-edge-labels'
import { ThumbnailGenerator } from './thumbnail-generator' import { ThumbnailGenerator } from './thumbnail-generator'
// Load default scene initially (will be replaced when project loads) // Load default scene initially (will be replaced when project loads)
useScene.getState().loadScene() useScene.getState().loadScene()
initSpatialGridSync() initSpatialGridSync()
@@ -107,7 +108,7 @@ export default function Editor({ projectId }: EditorProps) {
<SidebarProvider className="fixed z-20"> <SidebarProvider className="fixed z-20">
<AppSidebar /> <AppSidebar />
</SidebarProvider> </SidebarProvider>
<Viewer selectionManager="custom" isEditor={true}> <Viewer selectionManager="custom">
<SelectionManager /> <SelectionManager />
<FloatingActionMenu /> <FloatingActionMenu />
<ExportManager /> <ExportManager />
@@ -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 { 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 { BufferGeometry, Color, DoubleSide, Float32BufferAttribute, type Group, Shape } from 'three'
import { color, float, uniform, uv } from 'three/tsl' import { color, float, uniform, uv } from 'three/tsl'
import { MeshBasicNodeMaterial } from 'three/webgpu' import { MeshBasicNodeMaterial } from 'three/webgpu'
import { useNodeEvents } from '../../../hooks/use-node-events' import { useNodeEvents } from '../../../hooks/use-node-events'
import useViewer from '../../../store/use-viewer'
const Y_OFFSET = 0.01 const Y_OFFSET = 0.01
const WALL_HEIGHT = 2.3 const WALL_HEIGHT = 2.3
@@ -105,43 +104,6 @@ const createWallGeometry = (polygon: Array<[number, number]>): BufferGeometry =>
export const ZoneRenderer = ({ node }: { node: ZoneNode }) => { export const ZoneRenderer = ({ node }: { node: ZoneNode }) => {
const ref = useRef<Group>(null!) const ref = useRef<Group>(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<HTMLInputElement>(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) useRegistry(node.id, 'zone', ref)
@@ -215,71 +177,20 @@ export const ZoneRenderer = ({ node }: { node: ZoneNode }) => {
} }
return ( return (
<group ref={ref} {...handlers} userData={{ <group ref={ref} {...handlers} userData={{ labelPosition: [centroid[0], 1, centroid[1]] }}>
labelPosition: [centroid[0], 1, centroid[1]] <Html
}}> name="label"
<Html name="label" position={[centroid[0], 1, centroid[1]]} style={{ position={[centroid[0], 1, centroid[1]]}
pointerEvents: isEditor ? 'auto' : 'none' style={{ pointerEvents: 'none' }}
}} zIndexRange={[10, 0]}
zIndexRange={[10, 0]}> >
<div style={{ <div style={{
transform: 'translate3d(-50%, -50%, 0)', transform: 'translate3d(-50%, -50%, 0)',
width: 'max-content', width: 'max-content',
color: 'white', color: 'white',
textShadow: `-1px -1px 0 ${node.color}, 1px -1px 0 ${node.color}, -1px 1px 0 ${node.color}, 1px 1px 0 ${node.color}`, textShadow: `-1px -1px 0 ${node.color}, 1px -1px 0 ${node.color}, -1px 1px 0 ${node.color}, 1px 1px 0 ${node.color}`,
display: 'flex',
gap: '8px',
alignItems: 'center',
cursor: isEditor && !isEditing ? 'text' : 'default',
}}
onMouseEnter={() => isEditor && setIsHovered(true)}
onMouseLeave={() => isEditor && setIsHovered(false)}
onClick={(e) => {
if (isEditor && !isEditing) {
e.stopPropagation()
setIsEditing(true)
}
}}> }}>
{isEditing ? (
<input
ref={inputRef}
type="text"
value={editValue}
onChange={(e) => 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()}
/>
) : (
<>
<span>{node.name}</span> <span>{node.name}</span>
{isEditor && (
<div style={{ opacity: isHovered ? 1 : 0, transition: 'opacity 0.2s', display: 'flex', alignItems: 'center' }}>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
<path d="m15 5 4 4"/>
</svg>
</div>
)}
</>
)}
</div> </div>
</Html> </Html>
{/* Floor fill */} {/* Floor fill */}
@@ -11,7 +11,7 @@ import {
} from '@pascal-app/core' } from '@pascal-app/core'
import { Bvh } from '@react-three/drei' import { Bvh } from '@react-three/drei'
import { Canvas, extend, type ThreeToJSXElements, useFrame } from '@react-three/fiber' 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 * as THREE from 'three/webgpu'
import useViewer from '../../store/use-viewer' import useViewer from '../../store/use-viewer'
import { GuideSystem } from '../../systems/guide/guide-system' import { GuideSystem } from '../../systems/guide/guide-system'
@@ -62,23 +62,14 @@ extend(THREE as any)
interface ViewerProps { interface ViewerProps {
children?: React.ReactNode children?: React.ReactNode
selectionManager?: 'default' | 'custom' selectionManager?: 'default' | 'custom'
isEditor?: boolean
} }
const Viewer: React.FC<ViewerProps> = ({ const Viewer: React.FC<ViewerProps> = ({
children, children,
selectionManager = 'default', selectionManager = 'default',
isEditor = false,
}) => { }) => {
const setIsEditor = useViewer((state) => state.setIsEditor)
const theme = useViewer((state) => state.theme) const theme = useViewer((state) => state.theme)
const bgColor = theme === 'dark' ? '#1f2433' : '#fafafa'
useEffect(() => {
setIsEditor(isEditor)
}, [isEditor, setIsEditor])
return ( return (
<Canvas <Canvas
dpr={[1, 1.5]} dpr={[1, 1.5]}
-5
View File
@@ -25,9 +25,6 @@ type Outliner = {
}; };
type ViewerState = { type ViewerState = {
isEditor: boolean
setIsEditor: (isEditor: boolean) => void
selection: SelectionPath selection: SelectionPath
hoveredId: AnyNode['id'] | ZoneNode['id'] | null hoveredId: AnyNode['id'] | ZoneNode['id'] | null
setHoveredId: (id: AnyNode['id'] | ZoneNode['id'] | null) => void setHoveredId: (id: AnyNode['id'] | ZoneNode['id'] | null) => void
@@ -74,8 +71,6 @@ type ViewerState = {
const useViewer = create<ViewerState>()( const useViewer = create<ViewerState>()(
persist( persist(
(set) => ({ (set) => ({
isEditor: false,
setIsEditor: (isEditor) => set({ isEditor }),
selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] }, selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
hoveredId: null, hoveredId: null,
setHoveredId: (id) => set({ hoveredId: id }), setHoveredId: (id) => set({ hoveredId: id }),