@pascal-app/editor 0.8.0 → 0.9.1

package/src/components/tools/wall/move-wall-tool.tsx

@@ -1,358 +0,0 @@
-'use client'
-
-import {
-  type AnyNodeId,
-  emitter,
-  type GridEvent,
-  pauseSceneHistory,
-  resumeSceneHistory,
-  useScene,
-  type WallNode,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import useEditor from '../../../store/use-editor'
-import { CursorSphere } from '../shared/cursor-sphere'
-import { getWallGridStep, snapScalarToGrid } from './wall-drafting'
-
-function rotateVector([x, z]: [number, number], angle: number): [number, number] {
-  const cos = Math.cos(angle)
-  const sin = Math.sin(angle)
-  return [x * cos - z * sin, x * sin + z * cos]
-}
-
-function samePoint(a: [number, number], b: [number, number]) {
-  return a[0] === b[0] && a[1] === b[1]
-}
-
-function stripWallIsNewMetadata(meta: WallNode['metadata']): WallNode['metadata'] {
-  if (!meta || typeof meta !== 'object' || Array.isArray(meta)) {
-    return meta
-  }
-
-  const nextMeta = { ...(meta as Record<string, unknown>) } as Record<string, unknown>
-  delete nextMeta.isNew
-  return nextMeta as WallNode['metadata']
-}
-
-type LinkedWallSnapshot = {
-  id: WallNode['id']
-  start: [number, number]
-  end: [number, number]
-}
-
-function getLinkedWallSnapshots(args: {
-  wallId: WallNode['id']
-  wallParentId: string | null
-  originalStart: [number, number]
-  originalEnd: [number, number]
-}) {
-  const { wallId, wallParentId, originalStart, originalEnd } = args
-  const { nodes } = useScene.getState()
-  const snapshots: LinkedWallSnapshot[] = []
-
-  for (const node of Object.values(nodes)) {
-    if (!(node?.type === 'wall' && node.id !== wallId)) {
-      continue
-    }
-
-    if ((node.parentId ?? null) !== wallParentId) {
-      continue
-    }
-
-    if (
-      !(
-        samePoint(node.start, originalStart) ||
-        samePoint(node.start, originalEnd) ||
-        samePoint(node.end, originalStart) ||
-        samePoint(node.end, originalEnd)
-      )
-    ) {
-      continue
-    }
-
-    snapshots.push({
-      id: node.id,
-      start: [...node.start] as [number, number],
-      end: [...node.end] as [number, number],
-    })
-  }
-
-  return snapshots
-}
-
-function getLinkedWallUpdates(
-  linkedWalls: LinkedWallSnapshot[],
-  originalStart: [number, number],
-  originalEnd: [number, number],
-  nextStart: [number, number],
-  nextEnd: [number, number],
-) {
-  return linkedWalls.map((wall) => ({
-    id: wall.id,
-    start: samePoint(wall.start, originalStart)
-      ? nextStart
-      : samePoint(wall.start, originalEnd)
-        ? nextEnd
-        : wall.start,
-    end: samePoint(wall.end, originalStart)
-      ? nextStart
-      : samePoint(wall.end, originalEnd)
-        ? nextEnd
-        : wall.end,
-  }))
-}
-
-export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
-  const meta =
-    typeof node.metadata === 'object' && node.metadata !== null && !Array.isArray(node.metadata)
-      ? (node.metadata as Record<string, unknown>)
-      : {}
-  const isNew = !!meta.isNew
-  const activatedAtRef = useRef<number>(Date.now())
-  const previousGridPosRef = useRef<[number, number] | null>(null)
-  const originalStartRef = useRef<[number, number]>([...node.start] as [number, number])
-  const originalEndRef = useRef<[number, number]>([...node.end] as [number, number])
-  const originalCenterRef = useRef<[number, number]>([
-    (node.start[0] + node.end[0]) / 2,
-    (node.start[1] + node.end[1]) / 2,
-  ])
-  const originalHalfVectorRef = useRef<[number, number]>([
-    (node.end[0] - node.start[0]) / 2,
-    (node.end[1] - node.start[1]) / 2,
-  ])
-  const linkedOriginalsRef = useRef(
-    isNew
-      ? []
-      : getLinkedWallSnapshots({
-          wallId: node.id,
-          wallParentId: node.parentId ?? null,
-          originalStart: node.start,
-          originalEnd: node.end,
-        }),
-  )
-  const dragAnchorRef = useRef<[number, number] | null>(null)
-  const nodeIdRef = useRef(node.id)
-  const previewRef = useRef<{ start: [number, number]; end: [number, number] } | null>(null)
-  const pendingRotationRef = useRef(0)
-  const shiftPressedRef = useRef(false)
-
-  const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
-    const centerX = (node.start[0] + node.end[0]) / 2
-    const centerZ = (node.start[1] + node.end[1]) / 2
-    return [centerX, 0, centerZ]
-  })
-
-  const exitMoveMode = useCallback(() => {
-    useEditor.getState().setMovingNode(null)
-  }, [])
-
-  useEffect(() => {
-    const nodeId = nodeIdRef.current
-    const originalStart = originalStartRef.current
-    const originalEnd = originalEndRef.current
-    const originalCenter = originalCenterRef.current
-    const originalHalfVector = originalHalfVectorRef.current
-
-    pauseSceneHistory(useScene)
-    let wasCommitted = false
-
-    const applyNodePreview = (
-      updates: Array<{ id: WallNode['id']; start: [number, number]; end: [number, number] }>,
-    ) => {
-      useScene.getState().updateNodes(
-        updates.map((entry) => ({
-          id: entry.id as AnyNodeId,
-          data: { start: entry.start, end: entry.end },
-        })),
-      )
-      for (const entry of updates) {
-        useScene.getState().markDirty(entry.id as AnyNodeId)
-      }
-    }
-
-    const buildWallFromCenter = (center: [number, number]) => {
-      const rotatedHalf = rotateVector(originalHalfVector, pendingRotationRef.current)
-      const nextStart: [number, number] = [center[0] - rotatedHalf[0], center[1] - rotatedHalf[1]]
-      const nextEnd: [number, number] = [center[0] + rotatedHalf[0], center[1] + rotatedHalf[1]]
-      return { start: nextStart, end: nextEnd }
-    }
-
-    const applyPreview = (nextStart: [number, number], nextEnd: [number, number]) => {
-      previewRef.current = { start: nextStart, end: nextEnd }
-      const centerX = (nextStart[0] + nextEnd[0]) / 2
-      const centerZ = (nextStart[1] + nextEnd[1]) / 2
-      setCursorLocalPos([centerX, 0, centerZ])
-      applyNodePreview([
-        { id: nodeId, start: nextStart, end: nextEnd },
-        ...getLinkedWallUpdates(
-          linkedOriginalsRef.current,
-          originalStart,
-          originalEnd,
-          nextStart,
-          nextEnd,
-        ),
-      ])
-    }
-
-    const restoreOriginal = () => {
-      applyNodePreview([
-        { id: nodeId, start: originalStart, end: originalEnd },
-        ...linkedOriginalsRef.current,
-      ])
-    }
-
-    const onGridMove = (event: GridEvent) => {
-      const rawX = event.localPosition[0]
-      const rawZ = event.localPosition[2]
-      const snapStep = getWallGridStep()
-      const localX = shiftPressedRef.current ? rawX : snapScalarToGrid(rawX, snapStep)
-      const localZ = shiftPressedRef.current ? rawZ : snapScalarToGrid(rawZ, snapStep)
-
-      if (
-        previousGridPosRef.current &&
-        (localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
-      ) {
-        sfxEmitter.emit('sfx:grid-snap')
-      }
-      previousGridPosRef.current = [localX, localZ]
-
-      const anchor = dragAnchorRef.current ?? [localX, localZ]
-      dragAnchorRef.current = anchor
-
-      const deltaX = localX - anchor[0]
-      const deltaZ = localZ - anchor[1]
-
-      const nextCenter: [number, number] = [originalCenter[0] + deltaX, originalCenter[1] + deltaZ]
-      const nextWall = buildWallFromCenter(nextCenter)
-      applyPreview(nextWall.start, nextWall.end)
-    }
-
-    const onGridClick = (event: GridEvent) => {
-      if (Date.now() - activatedAtRef.current < 150) {
-        event.nativeEvent?.stopPropagation?.()
-        return
-      }
-
-      const preview = previewRef.current ?? { start: originalStart, end: originalEnd }
-
-      wasCommitted = true
-
-      // Restore original baseline while paused so the next resume+update
-      // registers as a single tracked change (undo reverts to original).
-      applyNodePreview([
-        { id: nodeId, start: originalStart, end: originalEnd },
-        ...linkedOriginalsRef.current,
-      ])
-
-      resumeSceneHistory(useScene)
-
-      const commitUpdates = [
-        {
-          id: nodeId as AnyNodeId,
-          data: isNew
-            ? {
-                start: preview.start,
-                end: preview.end,
-                metadata: stripWallIsNewMetadata(node.metadata),
-              }
-            : { start: preview.start, end: preview.end },
-        },
-        ...getLinkedWallUpdates(
-          linkedOriginalsRef.current,
-          originalStart,
-          originalEnd,
-          preview.start,
-          preview.end,
-        ).map((entry) => ({
-          id: entry.id as AnyNodeId,
-          data: { start: entry.start, end: entry.end },
-        })),
-      ]
-      useScene.getState().updateNodes(commitUpdates)
-      for (const { id } of commitUpdates) {
-        useScene.getState().markDirty(id)
-      }
-
-      pauseSceneHistory(useScene)
-
-      sfxEmitter.emit('sfx:item-place')
-      useViewer.getState().setSelection({ selectedIds: [nodeId] })
-      exitMoveMode()
-      event.nativeEvent?.stopPropagation?.()
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
-        return
-      }
-
-      if (event.key === 'Shift') {
-        shiftPressedRef.current = true
-        return
-      }
-
-      const ROTATION_STEP = Math.PI / 4
-      let rotationDelta = 0
-      if (event.key === 'r' || event.key === 'R') rotationDelta = ROTATION_STEP
-      else if (event.key === 't' || event.key === 'T') rotationDelta = -ROTATION_STEP
-
-      if (rotationDelta === 0) {
-        return
-      }
-
-      event.preventDefault()
-      pendingRotationRef.current += rotationDelta
-      sfxEmitter.emit('sfx:item-rotate')
-
-      const preview = previewRef.current ?? { start: originalStart, end: originalEnd }
-      const currentCenter: [number, number] = [
-        (preview.start[0] + preview.end[0]) / 2,
-        (preview.start[1] + preview.end[1]) / 2,
-      ]
-      const nextWall = buildWallFromCenter(currentCenter)
-      applyPreview(nextWall.start, nextWall.end)
-    }
-
-    const onKeyUp = (event: KeyboardEvent) => {
-      if (event.key === 'Shift') {
-        shiftPressedRef.current = false
-      }
-    }
-
-    const onCancel = () => {
-      restoreOriginal()
-      useViewer.getState().setSelection({ selectedIds: [nodeId] })
-      resumeSceneHistory(useScene)
-      markToolCancelConsumed()
-      exitMoveMode()
-    }
-
-    emitter.on('grid:move', onGridMove)
-    emitter.on('grid:click', onGridClick)
-    emitter.on('tool:cancel', onCancel)
-    window.addEventListener('keydown', onKeyDown)
-    window.addEventListener('keyup', onKeyUp)
-
-    return () => {
-      if (!wasCommitted) {
-        restoreOriginal()
-      }
-      shiftPressedRef.current = false
-      resumeSceneHistory(useScene)
-      emitter.off('grid:move', onGridMove)
-      emitter.off('grid:click', onGridClick)
-      emitter.off('tool:cancel', onCancel)
-      window.removeEventListener('keydown', onKeyDown)
-      window.removeEventListener('keyup', onKeyUp)
-    }
-  }, [exitMoveMode, isNew, node.metadata])
-
-  return (
-    <group>
-      <CursorSphere position={cursorLocalPos} showTooltip={false} />
-    </group>
-  )
-}

package/src/components/tools/wall/wall-tool.tsx

@@ -1,332 +0,0 @@
-import { emitter, type GridEvent, type LevelNode, useScene, type WallNode } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
-import { useEffect, useRef, useState } from 'react'
-import { DoubleSide, type Group, type Mesh, Shape, ShapeGeometry, Vector3 } from 'three'
-import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
-import { EDITOR_LAYER } from '../../../lib/constants'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import { CursorSphere } from '../shared/cursor-sphere'
-import {
-  formatAngleRadians,
-  getAngleToSegmentReference,
-  getSegmentAngleReferenceAtPoint,
-} from '../shared/segment-angle'
-import { createWallOnCurrentLevel, snapWallDraftPoint, type WallPlanPoint } from './wall-drafting'
-
-const WALL_HEIGHT = 2.5
-const DRAFT_LABEL_Y = WALL_HEIGHT + 0.22
-const DRAFT_ANGLE_LABEL_Y = 0.28
-
-type DraftAngleLabel = {
-  id: string
-  label: string
-  position: [number, number, number]
-}
-
-type DraftMeasurementState = {
-  lengthLabel: string
-  lengthPosition: [number, number, number]
-  angleLabels: DraftAngleLabel[]
-} | null
-
-function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
-  if (unit === 'imperial') {
-    const feet = value * 3.280_84
-    const wholeFeet = Math.floor(feet)
-    const inches = Math.round((feet - wholeFeet) * 12)
-    if (inches === 12) return `${wholeFeet + 1}'0"`
-    return `${wholeFeet}'${inches}"`
-  }
-
-  return `${Number.parseFloat(value.toFixed(2))}m`
-}
-
-function getDraftAngleLabels(
-  start: WallPlanPoint,
-  end: WallPlanPoint,
-  walls: WallNode[],
-): DraftAngleLabel[] {
-  const draftFromStart: WallPlanPoint = [end[0] - start[0], end[1] - start[1]]
-  const draftFromEnd: WallPlanPoint = [start[0] - end[0], start[1] - end[1]]
-  const endpoints = [
-    { id: 'start', point: start, draftVector: draftFromStart },
-    { id: 'end', point: end, draftVector: draftFromEnd },
-  ]
-  const labels: DraftAngleLabel[] = []
-
-  for (const endpoint of endpoints) {
-    const connectedWall = walls.find((wall) =>
-      Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, wall)),
-    )
-    if (!connectedWall) continue
-
-    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedWall)
-    if (!connectedReference) continue
-
-    const angle = getAngleToSegmentReference(endpoint.draftVector, connectedReference)
-    if (angle === null) continue
-
-    labels.push({
-      id: endpoint.id,
-      label: formatAngleRadians(angle),
-      position: [endpoint.point[0], DRAFT_ANGLE_LABEL_Y, endpoint.point[1]],
-    })
-  }
-
-  return labels
-}
-
-function getDraftMeasurementState(
-  start: WallPlanPoint,
-  end: WallPlanPoint,
-  walls: WallNode[],
-  unit: 'metric' | 'imperial',
-): DraftMeasurementState {
-  const dx = end[0] - start[0]
-  const dz = end[1] - start[1]
-  const length = Math.hypot(dx, dz)
-
-  if (length < 0.01) return null
-
-  return {
-    lengthLabel: formatMeasurement(length, unit),
-    lengthPosition: [(start[0] + end[0]) / 2, DRAFT_LABEL_Y, (start[1] + end[1]) / 2],
-    angleLabels: getDraftAngleLabels(start, end, walls),
-  }
-}
-
-/**
- * Update wall preview mesh geometry to create a vertical plane between two points
- */
-const updateWallPreview = (mesh: Mesh, start: Vector3, end: Vector3) => {
-  // Calculate direction and perpendicular for wall thickness
-  const direction = new Vector3(end.x - start.x, 0, end.z - start.z)
-  const length = direction.length()
-
-  if (length < 0.01) {
-    mesh.visible = false
-    return
-  }
-
-  mesh.visible = true
-  direction.normalize()
-
-  // Create wall shape (vertical rectangle in XY plane)
-  const shape = new Shape()
-  shape.moveTo(0, 0)
-  shape.lineTo(length, 0)
-  shape.lineTo(length, WALL_HEIGHT)
-  shape.lineTo(0, WALL_HEIGHT)
-  shape.closePath()
-
-  // Create geometry
-  const geometry = new ShapeGeometry(shape)
-
-  // Calculate rotation angle
-  // Negate the angle to fix the opposite direction issue
-  const angle = -Math.atan2(direction.z, direction.x)
-
-  // Position at start point and rotate
-  mesh.position.set(start.x, start.y, start.z)
-  mesh.rotation.y = angle
-
-  // Dispose old geometry and assign new one
-  if (mesh.geometry) {
-    mesh.geometry.dispose()
-  }
-  mesh.geometry = geometry
-}
-
-const getCurrentLevelWalls = (): WallNode[] => {
-  const currentLevelId = useViewer.getState().selection.levelId
-  const { nodes } = useScene.getState()
-
-  if (!currentLevelId) return []
-
-  const levelNode = nodes[currentLevelId]
-  if (!levelNode || levelNode.type !== 'level') return []
-
-  return (levelNode as LevelNode).children
-    .map((childId) => nodes[childId])
-    .filter((node): node is WallNode => node?.type === 'wall')
-}
-
-export const WallTool: React.FC = () => {
-  const unit = useViewer((state) => state.unit)
-  const cursorRef = useRef<Group>(null)
-  const wallPreviewRef = useRef<Mesh>(null!)
-  // All positions are building-local: this tool is inside the ToolManager building group,
-  // so local coords are used for both data and visual positioning.
-  const startingPoint = useRef(new Vector3(0, 0, 0))
-  const endingPoint = useRef(new Vector3(0, 0, 0))
-  const buildingState = useRef(0)
-  const shiftPressed = useRef(false)
-  const [draftMeasurement, setDraftMeasurement] = useState<DraftMeasurementState>(null)
-
-  useEffect(() => {
-    let gridPosition: WallPlanPoint = [0, 0]
-    let previousWallEnd: [number, number] | null = null
-
-    const onGridMove = (event: GridEvent) => {
-      if (!(cursorRef.current && wallPreviewRef.current)) return
-
-      const walls = getCurrentLevelWalls()
-      // event.localPosition is building-local — consistent with stored wall start/end
-      const localPoint: WallPlanPoint = [event.localPosition[0], event.localPosition[2]]
-      gridPosition = snapWallDraftPoint({ point: localPoint, walls })
-
-      if (buildingState.current === 1) {
-        const snappedLocal = snapWallDraftPoint({
-          point: localPoint,
-          walls,
-          start: [startingPoint.current.x, startingPoint.current.z],
-          angleSnap: !shiftPressed.current,
-        })
-        endingPoint.current.set(snappedLocal[0], event.localPosition[1], snappedLocal[1])
-        cursorRef.current.position.copy(endingPoint.current)
-
-        // Play snap sound only when the actual wall end position changes
-        const currentWallEnd: [number, number] = [snappedLocal[0], snappedLocal[1]]
-        if (
-          previousWallEnd &&
-          (currentWallEnd[0] !== previousWallEnd[0] || currentWallEnd[1] !== previousWallEnd[1])
-        ) {
-          sfxEmitter.emit('sfx:grid-snap')
-        }
-        previousWallEnd = currentWallEnd
-
-        updateWallPreview(wallPreviewRef.current, startingPoint.current, endingPoint.current)
-        setDraftMeasurement(
-          getDraftMeasurementState(
-            [startingPoint.current.x, startingPoint.current.z],
-            snappedLocal,
-            walls,
-            unit,
-          ),
-        )
-      } else {
-        // Not drawing a wall yet, show the snapped anchor point.
-        cursorRef.current.position.set(gridPosition[0], event.localPosition[1], gridPosition[1])
-        setDraftMeasurement(null)
-      }
-    }
-
-    const onGridClick = (event: GridEvent) => {
-      const walls = getCurrentLevelWalls()
-      const localClick: WallPlanPoint = [event.localPosition[0], event.localPosition[2]]
-
-      if (buildingState.current === 0) {
-        const snappedStart = snapWallDraftPoint({ point: localClick, walls })
-        gridPosition = snappedStart
-        startingPoint.current.set(snappedStart[0], event.localPosition[1], snappedStart[1])
-        endingPoint.current.copy(startingPoint.current)
-        buildingState.current = 1
-        wallPreviewRef.current.visible = true
-        setDraftMeasurement(null)
-      } else if (buildingState.current === 1) {
-        const snappedEnd = snapWallDraftPoint({
-          point: localClick,
-          walls,
-          start: [startingPoint.current.x, startingPoint.current.z],
-          angleSnap: !shiftPressed.current,
-        })
-        const dx = snappedEnd[0] - startingPoint.current.x
-        const dz = snappedEnd[1] - startingPoint.current.z
-        if (dx * dx + dz * dz < 0.01 * 0.01) return
-        // Both start and end are building-local ✓
-        createWallOnCurrentLevel([startingPoint.current.x, startingPoint.current.z], snappedEnd)
-        wallPreviewRef.current.visible = false
-        buildingState.current = 0
-        setDraftMeasurement(null)
-      }
-    }
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Shift') {
-        shiftPressed.current = true
-      }
-    }
-
-    const onKeyUp = (e: KeyboardEvent) => {
-      if (e.key === 'Shift') {
-        shiftPressed.current = false
-      }
-    }
-
-    const onCancel = () => {
-      if (buildingState.current === 1) {
-        markToolCancelConsumed()
-        buildingState.current = 0
-        wallPreviewRef.current.visible = false
-        setDraftMeasurement(null)
-      }
-    }
-
-    emitter.on('grid:move', onGridMove)
-    emitter.on('grid:click', onGridClick)
-    emitter.on('tool:cancel', onCancel)
-    window.addEventListener('keydown', onKeyDown)
-    window.addEventListener('keyup', onKeyUp)
-
-    return () => {
-      emitter.off('grid:move', onGridMove)
-      emitter.off('grid:click', onGridClick)
-      emitter.off('tool:cancel', onCancel)
-      window.removeEventListener('keydown', onKeyDown)
-      window.removeEventListener('keyup', onKeyUp)
-    }
-  }, [unit])
-
-  return (
-    <group>
-      {/* Cursor indicator */}
-      <CursorSphere ref={cursorRef} />
-
-      {/* Wall preview */}
-      <mesh layers={EDITOR_LAYER} ref={wallPreviewRef} renderOrder={1} visible={false}>
-        <shapeGeometry />
-        <meshBasicMaterial
-          color="#818cf8"
-          depthTest={false}
-          depthWrite={false}
-          opacity={0.5}
-          side={DoubleSide}
-          transparent
-        />
-      </mesh>
-
-      {draftMeasurement && (
-        <>
-          <DraftMeasurementLabel
-            label={draftMeasurement.lengthLabel}
-            position={draftMeasurement.lengthPosition}
-          />
-          {draftMeasurement.angleLabels.map((angleLabel) => (
-            <DraftMeasurementLabel
-              key={angleLabel.id}
-              label={angleLabel.label}
-              position={angleLabel.position}
-            />
-          ))}
-        </>
-      )}
-    </group>
-  )
-}
-
-function DraftMeasurementLabel({
-  label,
-  position,
-}: {
-  label: string
-  position: [number, number, number]
-}) {
-  return (
-    <Html center position={position} style={{ pointerEvents: 'none' }} zIndexRange={[100, 0]}>
-      <div className="whitespace-nowrap rounded-full border border-border bg-background/95 px-2 py-1 font-mono font-semibold text-[11px] text-foreground shadow-lg backdrop-blur-md">
-        {label}
-      </div>
-    </Html>
-  )
-}