remove is editor completely
This commit is contained in:
@@ -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]}
|
||||||
|
|||||||
@@ -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 }),
|
||||||
|
|||||||
Reference in New Issue
Block a user