@pascal-app/editor 1.0.3 → 1.0.4

package/src/components/systems/zone/zone-label-editor-system.tsx

@@ -1,333 +0,0 @@
-'use client'
-
-import { type AnyNodeId, emitter, useScene, type ZoneNode } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { Check, Pencil } from 'lucide-react'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { useShallow } from 'zustand/react/shallow'
-import { resolveOverlayPolicy } from '../../../lib/interaction/overlay-policy'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import useEditor from '../../../store/use-editor'
-import useInteractionScope from '../../../store/use-interaction-scope'
-
-// ─── Per-zone label editor ────────────────────────────────────────────────────
-
-function ZoneLabelEditor({ zoneId }: { zoneId: ZoneNode['id'] }) {
-  const zone = useScene((s) => s.nodes[zoneId] as ZoneNode | undefined)
-  const updateNode = useScene((s) => s.updateNode)
-  const deleteNode = useScene((s) => s.deleteNode)
-  const setSelection = useViewer((s) => s.setSelection)
-  const selectedZoneId = useViewer((s) => s.selection.zoneId)
-  const hoveredId = useViewer((s) => s.hoveredId)
-  const mode = useEditor((s) => s.mode)
-  // During an active interaction the zone label is a context badge that steps
-  // back: faded + non-interactive so it can't be hovered/clicked mid-action.
-  const scope = useInteractionScope((s) => s.scope)
-  const labelStepBack = resolveOverlayPolicy(scope).contextBadges === 'faded'
-  const isSelected = selectedZoneId === zoneId
-  const isDeleteHovered = mode === 'delete' && hoveredId === zoneId
-  const [editing, setEditing] = useState(false)
-  const [value, setValue] = useState('')
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [labelEl, setLabelEl] = useState<HTMLElement | null>(null)
-
-  // Keep a ref so the click handler never has a stale zone name
-  const zoneNameRef = useRef(zone?.name ?? '')
-  useEffect(() => {
-    zoneNameRef.current = zone?.name ?? ''
-  }, [zone?.name])
-
-  // Setup: find the label element, enable pointer events, and hide the
-  // zone-renderer's own text node (children[0]) — we replace it via portal.
-  // Retries via rAF because the <Html> element from drei may not exist yet at mount time.
-  useEffect(() => {
-    let cancelled = false
-    let textEl: HTMLElement | undefined
-
-    const tryFind = () => {
-      const el = document.getElementById(`${zoneId}-label`)
-      if (!el) {
-        if (!cancelled) requestAnimationFrame(tryFind)
-        return
-      }
-      setLabelEl(el)
-      textEl = el.children[0] as HTMLElement | undefined
-      if (textEl) textEl.style.display = 'none'
-    }
-
-    tryFind()
-
-    return () => {
-      cancelled = true
-      if (textEl) textEl.style.display = ''
-    }
-  }, [zoneId])
-
-  // Focus + select-all when entering edit mode
-  useEffect(() => {
-    if (editing) {
-      inputRef.current?.focus()
-      inputRef.current?.select()
-    }
-  }, [editing])
-
-  // Tint the label pin red when delete-hovered
-  useEffect(() => {
-    if (!labelEl) return
-    const pin = labelEl.querySelector('.label-pin') as HTMLElement | null
-    if (!pin) return
-    const line = pin.children[0] as HTMLElement | undefined
-    const circle = pin.children[1] as HTMLElement | undefined
-    const color = isDeleteHovered ? '#dc2626' : (zone?.color ?? '#6366f1')
-    if (line) line.style.backgroundColor = color
-    if (circle) {
-      circle.style.backgroundColor = color
-    }
-    if (isDeleteHovered) {
-      pin.style.opacity = '1'
-    }
-    return () => {
-      // Restore zone color
-      const originalColor = zone?.color ?? '#6366f1'
-      if (line) line.style.backgroundColor = originalColor
-      if (circle) circle.style.backgroundColor = originalColor
-    }
-  }, [isDeleteHovered, labelEl, zone?.color])
-
-  const save = useCallback(() => {
-    const trimmed = value.trim()
-    if (trimmed !== (zone?.name ?? '')) {
-      updateNode(zoneId, { name: trimmed || undefined })
-    }
-    setEditing(false)
-  }, [value, zone?.name, updateNode, zoneId])
-
-  const cancel = useCallback(() => {
-    setValue(zone?.name ?? '')
-    setEditing(false)
-  }, [zone?.name])
-
-  // Select zone + switch to zone mode from any mode
-  const selectZone = useCallback(() => {
-    useEditor.getState().setPhase('structure')
-    useEditor.getState().setStructureLayer('zones')
-    useEditor.getState().setMode('select')
-    setSelection({ zoneId })
-  }, [zoneId, setSelection])
-
-  // Enter text editing
-  const enterTextEditing = useCallback(() => {
-    selectZone()
-    setValue(zoneNameRef.current)
-    setEditing(true)
-  }, [selectZone])
-
-  // Listen for edit-label events from the 2D floorplan (double-click on zone label)
-  useEffect(() => {
-    const handler = (event: { zoneId: string }) => {
-      if (event.zoneId === zoneId) {
-        setValue(zoneNameRef.current)
-        setEditing(true)
-      }
-    }
-    emitter.on('zone:edit-label' as any, handler as any)
-    return () => {
-      emitter.off('zone:edit-label' as any, handler as any)
-    }
-  }, [zoneId])
-
-  if (!labelEl) return null
-
-  const shadowColor = isDeleteHovered ? '#dc2626' : (zone?.color ?? '#6366f1')
-  const textShadow = [
-    `-1px -1px 0 ${shadowColor}`,
-    ` 1px -1px 0 ${shadowColor}`,
-    `-1px  1px 0 ${shadowColor}`,
-    ` 1px  1px 0 ${shadowColor}`,
-  ].join(',')
-
-  // order: -1 puts this flex item before children[0] (hidden) and children[1] (pin)
-  const sharedStyle: React.CSSProperties = {
-    order: -1,
-    color: 'white',
-    textShadow,
-    fontSize: 14,
-    fontFamily: 'sans-serif',
-    userSelect: 'none',
-    pointerEvents: labelStepBack ? 'none' : 'auto',
-    opacity: labelStepBack ? 0.4 : undefined,
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: 4,
-    whiteSpace: 'nowrap',
-  }
-
-  return createPortal(
-    editing ? (
-      <div
-        onMouseDown={(e) => e.stopPropagation()}
-        onPointerDown={(e) => e.stopPropagation()}
-        style={sharedStyle}
-      >
-        <input
-          onBlur={save}
-          onChange={(e) => setValue(e.target.value)}
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={(e) => {
-            e.stopPropagation()
-            if (e.key === 'Enter') {
-              e.preventDefault()
-              save()
-            }
-            if (e.key === 'Escape') {
-              e.preventDefault()
-              cancel()
-            }
-          }}
-          ref={inputRef}
-          style={{
-            width: `${Math.max((value || zone?.name || '').length + 1, 4)}ch`,
-            border: 'none',
-            borderBottom: `1px solid ${shadowColor}`,
-            background: 'transparent',
-            color: 'white',
-            textShadow,
-            outline: 'none',
-            padding: 0,
-            margin: 0,
-            fontSize: 'inherit',
-            lineHeight: 'inherit',
-            fontFamily: 'inherit',
-            textAlign: 'center',
-          }}
-          type="text"
-          value={value}
-        />
-        <button
-          onClick={(e) => {
-            e.stopPropagation()
-            save()
-          }}
-          onMouseDown={(e) => e.stopPropagation()}
-          style={{
-            background: 'none',
-            border: 'none',
-            color: 'white',
-            cursor: 'pointer',
-            padding: 0,
-            display: 'inline-flex',
-            alignItems: 'center',
-          }}
-          type="button"
-        >
-          <Check size={12} />
-        </button>
-      </div>
-    ) : (
-      <button
-        onClick={(e) => {
-          e.stopPropagation()
-          if (mode === 'delete') {
-            sfxEmitter.emit('sfx:structure-delete')
-            deleteNode(zoneId as AnyNodeId)
-            setSelection({ zoneId: null })
-            return
-          }
-          if (isSelected) {
-            // Already selected → enter text editing
-            enterTextEditing()
-          } else {
-            // Not selected → select zone + switch to zone mode
-            selectZone()
-          }
-        }}
-        onMouseDown={(e) => e.stopPropagation()}
-        onPointerEnter={(e) => {
-          if (mode === 'delete') {
-            useViewer.setState({ hoveredId: zoneId })
-          }
-        }}
-        onPointerLeave={() => {
-          if (mode === 'delete' && useViewer.getState().hoveredId === zoneId) {
-            useViewer.setState({ hoveredId: null })
-          }
-        }}
-        onPointerMove={
-          mode === 'delete'
-            ? (e) => {
-                // Re-dispatch pointermove to the viewer container so DeleteCursorBadge tracks the cursor.
-                const viewerDiv = (e.currentTarget as HTMLElement).closest(
-                  '.relative.overflow-hidden',
-                )
-                if (viewerDiv) {
-                  viewerDiv.dispatchEvent(
-                    new PointerEvent('pointermove', {
-                      clientX: e.clientX,
-                      clientY: e.clientY,
-                      bubbles: true,
-                    }),
-                  )
-                }
-              }
-            : undefined
-        }
-        style={{
-          ...sharedStyle,
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          padding: 0,
-        }}
-        type="button"
-      >
-        <span>{zone?.name}</span>
-        {isSelected && (
-          <span
-            onClick={(e) => {
-              e.stopPropagation()
-              enterTextEditing()
-            }}
-            role="button"
-            style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              cursor: 'text',
-              filter: `drop-shadow(0 0 2px ${shadowColor})`,
-            }}
-            tabIndex={0}
-          >
-            <Pencil size={12} />
-          </span>
-        )}
-      </button>
-    ),
-    labelEl,
-  )
-}
-
-// ─── System: rendered in the main React tree (outside Canvas) ─────────────────
-
-export function ZoneLabelEditorSystem() {
-  const zoneIds = useScene(
-    useShallow((s) =>
-      Object.values(s.nodes)
-        .filter((n) => n.type === 'zone')
-        .map((n) => n.id as ZoneNode['id']),
-    ),
-  )
-  // The zone renderer unmounts its <Html> label when zones are hidden —
-  // unmount the portals with it, or each editor would hold (and rAF-poll for)
-  // a detached label element.
-  const showZones = useViewer((s) => s.showZones)
-
-  if (!showZones) return null
-
-  return (
-    <>
-      {zoneIds.map((id) => (
-        <ZoneLabelEditor key={id} zoneId={id} />
-      ))}
-    </>
-  )
-}

package/src/components/tools/fence/fence-drafting.test.ts

@@ -1,100 +0,0 @@
-import { beforeEach, describe, expect, test } from 'bun:test'
-import {
-  type AnyNode,
-  type AnyNodeId,
-  GROUND_SUPPORT_ID,
-  type SlabNode,
-  spatialGridManager,
-  useScene,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import useEditor from '../../../store/use-editor'
-import { createFenceOnCurrentLevel } from './fence-drafting'
-
-const LEVEL_ID = 'level_test' as AnyNodeId
-
-function seedLevel(extraNodes: AnyNode[] = []) {
-  useScene.setState({
-    nodes: Object.fromEntries([
-      [
-        LEVEL_ID,
-        {
-          id: LEVEL_ID,
-          type: 'level',
-          object: 'node',
-          parentId: null,
-          visible: true,
-          metadata: {},
-          children: extraNodes.map((node) => node.id),
-          level: 0,
-        } as AnyNode,
-      ],
-      ...extraNodes.map((node) => [node.id, node] as const),
-    ]),
-    rootNodeIds: [LEVEL_ID],
-    dirtyNodes: new Set(),
-    collections: {},
-  } as never)
-}
-
-describe('createFenceOnCurrentLevel', () => {
-  beforeEach(() => {
-    spatialGridManager.clear()
-    useViewer.setState({
-      selection: {
-        buildingId: null,
-        levelId: LEVEL_ID,
-        zoneId: null,
-        selectedIds: [],
-      },
-    } as never)
-    useEditor.getState().setToolDefaults('fence', null)
-    seedLevel()
-  })
-
-  test('freezes a block top above its underlying slab', () => {
-    const slab = {
-      id: 'slab_low',
-      type: 'slab',
-      object: 'node',
-      parentId: LEVEL_ID,
-      visible: true,
-      metadata: {},
-      children: [],
-      polygon: [
-        [-2, -2],
-        [2, -2],
-        [2, 2],
-        [-2, 2],
-      ],
-      holes: [],
-      holeMetadata: [],
-      elevation: 0.25,
-      thickness: 0.25,
-      recessed: false,
-      autoFromWalls: false,
-    } as SlabNode
-    seedLevel([slab as AnyNode])
-    spatialGridManager.handleNodeCreated(slab as AnyNode, LEVEL_ID)
-
-    const fence = createFenceOnCurrentLevel([-1, 0], [1, 0], {
-      supportCap: 2,
-      preferredSupportSlabId: slab.id,
-      constructionElevation: 2,
-    })
-
-    expect(fence?.supportSlabId).toBe(slab.id)
-    expect(fence?.supportOffset).toBeCloseTo(1.75)
-  })
-
-  test('pins ground beneath a block top when no slab exists', () => {
-    const fence = createFenceOnCurrentLevel([-1, 0], [1, 0], {
-      supportCap: 2,
-      preferredSupportSlabId: null,
-      constructionElevation: 2,
-    })
-
-    expect(fence?.supportSlabId).toBe(GROUND_SUPPORT_ID)
-    expect(fence?.supportOffset).toBeCloseTo(2)
-  })
-})

package/src/components/tools/fence/fence-drafting.ts

@@ -1,266 +0,0 @@
-import {
-  DEFAULT_ANGLE_STEP,
-  type FenceConstructionOptions as FenceCommitOptions,
-  FenceNode,
-  getTwoPointFenceCurveTangents,
-  getWallCurveFrameAt,
-  getWallCurveLength,
-  isCurvedWall,
-  resolveFenceConstructionSupport,
-  snapPointAlongAngleRay,
-  useScene,
-  type WallNode,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import useEditor from '../../../store/use-editor'
-import {
-  findWallSnapTarget,
-  getSegmentGridStep,
-  isSegmentLongEnough,
-  snapPointToGrid,
-  type WallPlanPoint,
-} from '../wall/wall-drafting'
-
-export type FencePlanPoint = WallPlanPoint
-
-const FENCE_CORNER_SNAP_RADIUS = 0.28
-const FENCE_SPAN_SNAP_RADIUS = 0.16
-
-type SegmentNode = {
-  start: FencePlanPoint
-  end: FencePlanPoint
-}
-
-function distanceSquared(a: FencePlanPoint, b: FencePlanPoint): number {
-  const dx = a[0] - b[0]
-  const dz = a[1] - b[1]
-  return dx * dx + dz * dz
-}
-
-function projectPointOntoSegment(
-  point: FencePlanPoint,
-  segment: SegmentNode,
-): FencePlanPoint | null {
-  const [x1, z1] = segment.start
-  const [x2, z2] = segment.end
-  const dx = x2 - x1
-  const dz = z2 - z1
-  const lengthSquared = dx * dx + dz * dz
-  if (lengthSquared < 1e-9) {
-    return null
-  }
-
-  const t = ((point[0] - x1) * dx + (point[1] - z1) * dz) / lengthSquared
-  if (t <= 0 || t >= 1) {
-    return null
-  }
-
-  return [x1 + dx * t, z1 + dz * t]
-}
-
-function findFenceSnapTarget(
-  point: FencePlanPoint,
-  fences: FenceNode[],
-  ignoreFenceIds: string[] = [],
-): FencePlanPoint | null {
-  const cornerRadiusSquared = FENCE_CORNER_SNAP_RADIUS ** 2
-  const spanRadiusSquared = FENCE_SPAN_SNAP_RADIUS ** 2
-  const ignoredFenceIds = new Set(ignoreFenceIds)
-  let bestCornerTarget: FencePlanPoint | null = null
-  let bestCornerDistanceSquared = Number.POSITIVE_INFINITY
-  let bestSpanTarget: FencePlanPoint | null = null
-  let bestSpanDistanceSquared = Number.POSITIVE_INFINITY
-
-  for (const fence of fences) {
-    if (ignoredFenceIds.has(fence.id)) {
-      continue
-    }
-
-    for (const candidate of [fence.start, fence.end]) {
-      const candidateDistanceSquared = distanceSquared(point, candidate)
-      if (
-        candidateDistanceSquared > cornerRadiusSquared ||
-        candidateDistanceSquared >= bestCornerDistanceSquared
-      ) {
-        continue
-      }
-
-      bestCornerTarget = candidate
-      bestCornerDistanceSquared = candidateDistanceSquared
-    }
-
-    if (isCurvedWall(fence)) {
-      const sampleCount = Math.max(8, Math.ceil(getWallCurveLength(fence) / 0.3))
-      for (let index = 1; index < sampleCount; index += 1) {
-        const frame = getWallCurveFrameAt(fence, index / sampleCount)
-        const candidate: FencePlanPoint = [frame.point.x, frame.point.y]
-        const candidateDistanceSquared = distanceSquared(point, candidate)
-        if (
-          candidateDistanceSquared > spanRadiusSquared ||
-          candidateDistanceSquared >= bestSpanDistanceSquared
-        ) {
-          continue
-        }
-
-        bestSpanTarget = candidate
-        bestSpanDistanceSquared = candidateDistanceSquared
-      }
-    } else {
-      const candidate = projectPointOntoSegment(point, fence)
-      if (!candidate) {
-        continue
-      }
-
-      const candidateDistanceSquared = distanceSquared(point, candidate)
-      if (
-        candidateDistanceSquared > spanRadiusSquared ||
-        candidateDistanceSquared >= bestSpanDistanceSquared
-      ) {
-        continue
-      }
-
-      bestSpanTarget = candidate
-      bestSpanDistanceSquared = candidateDistanceSquared
-    }
-  }
-
-  return bestCornerTarget ?? bestSpanTarget
-}
-
-export function snapFenceDraftPoint(args: {
-  point: FencePlanPoint
-  walls: WallNode[]
-  fences: FenceNode[]
-  start?: FencePlanPoint
-  angleSnap?: boolean
-  ignoreFenceIds?: string[]
-  bypassSnap?: boolean
-  magnetic?: boolean
-  /** Override the grid step. */
-  step?: number
-  /**
-   * Optional grid-snap function. When provided, replaces the default
-   * local-axis snap — lets the 2D floor-plan keep snapping to the
-   * world XZ grid even when the building is rotated. Wall / fence
-   * endpoint snap precedence is preserved.
-   */
-  gridSnap?: (point: FencePlanPoint) => FencePlanPoint
-}): FencePlanPoint {
-  const {
-    point,
-    walls,
-    fences,
-    start,
-    angleSnap = false,
-    ignoreFenceIds,
-    bypassSnap = false,
-    magnetic = true,
-    step,
-    gridSnap,
-  } = args
-  if (bypassSnap) return point
-
-  const gridStep = step ?? getSegmentGridStep()
-
-  // Magnetic endpoint snap must beat the angle lock, and the lock can pull
-  // the cursor far enough off an endpoint that probing the locked point
-  // would never engage — so under the lock, probe from the RAW cursor
-  // first (mirrors `snapWallDraftPointDetailed`'s special-point pre-pass).
-  if (start && angleSnap) {
-    const rawTarget =
-      magnetic &&
-      (findFenceSnapTarget(point, fences, ignoreFenceIds) ?? findWallSnapTarget(point, walls))
-    if (rawTarget) return rawTarget
-  }
-
-  // The angle path snaps the distance ALONG the 15° ray — a scalar, the
-  // same in world and local frames — so the `gridSnap` world-grid override
-  // only applies when the angle lock is off.
-  const basePoint: FencePlanPoint =
-    start && angleSnap
-      ? [...snapPointAlongAngleRay(start, point, DEFAULT_ANGLE_STEP, gridStep)]
-      : gridSnap
-        ? gridSnap(point)
-        : snapPointToGrid(point, gridStep)
-  if (!magnetic) return basePoint
-
-  const fenceSnapTarget = findFenceSnapTarget(basePoint, fences, ignoreFenceIds)
-  return fenceSnapTarget ?? findWallSnapTarget(basePoint, walls) ?? basePoint
-}
-
-export function createFenceOnCurrentLevel(
-  start: FencePlanPoint,
-  end: FencePlanPoint,
-  options?: FenceCommitOptions,
-): FenceNode | null {
-  const currentLevelId = useViewer.getState().selection.levelId
-  const { createNode, nodes } = useScene.getState()
-
-  if (!(currentLevelId && isSegmentLongEnough(start, end))) {
-    return null
-  }
-
-  const fenceCount = Object.values(nodes).filter((node) => node.type === 'fence').length
-  // Build parameters seeded by a placed preset (height, style, post
-  // spacing, …) merge in first; `name`/`start`/`end` always win. The
-  // schema parse validates and drops anything unexpected.
-  const defaults = useEditor.getState().toolDefaults.fence ?? {}
-  const authoredFence = FenceNode.parse({
-    ...defaults,
-    name: `Fence ${fenceCount + 1}`,
-    start,
-    end,
-  })
-  // Fences run no per-frame support election — the persisted host IS the
-  // lift (absent = level floor), so elect it at commit, pointer-capped.
-  const fence = resolveFenceConstructionSupport(authoredFence, currentLevelId, nodes, options)
-
-  createNode(fence, currentLevelId)
-  sfxEmitter.emit('sfx:structure-build')
-
-  return fence
-}
-
-/**
- * Commit a smooth spline fence from a list of drawn control points. The
- * centerline becomes a Catmull-Rom curve through `path`; `start`/`end` are
- * pinned to the first/last point so endpoint handles, bbox, and miter
- * references stay valid. Requires >= 2 points spanning a usable distance.
- */
-export function createSplineFenceOnCurrentLevel(
-  path: FencePlanPoint[],
-  tangents = getTwoPointFenceCurveTangents(path),
-  options?: FenceCommitOptions,
-): FenceNode | null {
-  const currentLevelId = useViewer.getState().selection.levelId
-  const { createNode, nodes } = useScene.getState()
-
-  if (!currentLevelId || path.length < 2) {
-    return null
-  }
-  const start = path[0]!
-  const end = path[path.length - 1]!
-  // A degenerate single-point-ish path (all clicks on one spot) is rejected
-  // the same way a too-short straight segment is.
-  if (!isSegmentLongEnough(start, end) && path.length < 3) {
-    return null
-  }
-
-  const fenceCount = Object.values(nodes).filter((node) => node.type === 'fence').length
-  const defaults = useEditor.getState().toolDefaults.fence ?? {}
-  const authoredFence = FenceNode.parse({
-    ...defaults,
-    name: `Fence ${fenceCount + 1}`,
-    start,
-    end,
-    path,
-    tangents,
-  })
-  const fence = resolveFenceConstructionSupport(authoredFence, currentLevelId, nodes, options)
-
-  createNode(fence, currentLevelId)
-  sfxEmitter.emit('sfx:structure-build')
-
-  return fence
-}