@pascal-app/editor 1.0.3 → 1.0.4

package/src/lib/terrace-draft.ts

@@ -0,0 +1,213 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  area,
+  createZone,
+  generateId,
+  type MultiPolygon,
+  type StructurePlan,
+  type ToolHint,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { create } from 'zustand'
+import useEditor from '../store/use-editor'
+import { CROSSING_MESSAGE, floorRegionSelfIntersects } from './floor-region-geometry'
+import {
+  cancelFloorRegion,
+  type FloorDraftCommit,
+  type FloorDraftPurpose,
+  type FloorRegionRoom,
+  useFloorRegionDraft,
+} from './floor-region-session'
+import { type FloorRegionPoint, floorRegionSnapTargets } from './floor-region-snap'
+import { beginGesture, type GestureHandle } from './gesture-lifecycle'
+import { applyRoomPlan } from './room-structure-commands'
+import { sfxEmitter } from './sfx-bus'
+
+// "Terrace" (Build panel → Outdoor): draws an outdoor room on the level's
+// ground, rectangle or polygon, snapped to the rooms already there and the
+// grid. The terrace is a room like any other — bounded by separators (and by
+// the walls it shares), no walls of its own and no ceiling — so it gets
+// everything rooms have: finish paint, height arrows, Divide, Move, Delete.
+// The tool is one lifecycle gesture from `startTerraceDraft` until cancelled;
+// each outline commits as one undo step and the tool stays armed, like the
+// room tools.
+
+export const TERRACE_DRAFT_HANDLE = 'terrace-draft'
+export const TERRACE_NAME = 'Terrace'
+export const TERRACE_TOO_SMALL_MESSAGE = 'Too small for a terrace.'
+export const TERRACE_FAILED_MESSAGE = "Can't place a terrace here."
+
+export type TerraceShape = 'rectangle' | 'polygon'
+
+export const useTerraceDraft = create<{
+  host: FloorRegionRoom | null
+  shape: TerraceShape
+}>(() => ({ host: null, shape: 'rectangle' }))
+
+/** How far the terrace tool reaches from the origin when the site has no outline. */
+const OPEN_GROUND = 500
+
+/**
+ * Why a terrace outline cannot be built, or its plan: an outdoor room of the
+ * outline, closed with separators where no wall runs, without a ceiling.
+ * Core refuses an outline over a room (the same rule MCP's outdoor
+ * `create_room` follows) and names the room.
+ */
+export function planTerrace(
+  nodes: Record<string, AnyNode>,
+  levelId: string,
+  polygon: readonly FloorRegionPoint[],
+): { plan: StructurePlan & { zoneId: string } } | { message: string } {
+  const outline = polygon.map(([x, z]): [number, number] => [x, z])
+  if (floorRegionSelfIntersects(outline)) return { message: CROSSING_MESSAGE }
+  if (area([{ outer: outline, holes: [] }]) < 1) return { message: TERRACE_TOO_SMALL_MESSAGE }
+  try {
+    const plan = createZone(nodes, {
+      levelId,
+      polygon: outline,
+      name: TERRACE_NAME,
+      enclose: false,
+      intent: { hasCeiling: false },
+      mintId: generateId,
+    })
+    const conflict = plan.conflicts?.[0]
+    return conflict ? { message: conflict.message || TERRACE_FAILED_MESSAGE } : { plan }
+  } catch {
+    return { message: TERRACE_FAILED_MESSAGE }
+  }
+}
+
+let tool: GestureHandle | null = null
+
+function reset() {
+  if (useTerraceDraft.getState().host) useTerraceDraft.setState({ host: null })
+  const { draft } = useFloorRegionDraft.getState()
+  if (draft?.room.purpose === TERRACE) useFloorRegionDraft.setState({ draft: null, hover: null })
+}
+
+function commitTerrace(
+  host: FloorRegionRoom,
+  polygon: readonly FloorRegionPoint[],
+): FloorDraftCommit {
+  const result = planTerrace(useScene.getState().nodes, host.levelId, polygon)
+  if ('message' in result) return { ok: false, message: result.message }
+  applyRoomPlan(result.plan)
+  sfxEmitter.emit('sfx:structure-build')
+  // The rooms (and this terrace) now snap the next outline.
+  useTerraceDraft.setState({ host: describeTerraceHost(useScene.getState().nodes, host.levelId) })
+  return { ok: true }
+}
+
+function beginTool(host: FloorRegionRoom) {
+  const handle = beginGesture({
+    kind: 'terrace-draft',
+    scope: { kind: 'handle-drag', nodeId: host.levelId, handle: TERRACE_DRAFT_HANDLE },
+    stale: () =>
+      useScene.getState().readOnly || !useScene.getState().nodes[host.levelId as AnyNodeId],
+    onCancel: () => {
+      if (tool === handle) tool = null
+      reset()
+    },
+  })
+  tool = handle
+  useTerraceDraft.setState({ host })
+  return handle
+}
+
+const TERRACE: FloorDraftPurpose = {
+  persistent: true,
+  own: (room) => (tool?.active ? tool : beginTool(room)),
+  commit: (room, polygon) => {
+    const current = useTerraceDraft.getState().host ?? room
+    return commitTerrace(current, polygon)
+  },
+  fill: '#818cf8',
+}
+
+/** The level's ground as a draft room: the site (or open ground), snapping to the rooms on it. */
+export function describeTerraceHost(
+  nodes: Record<string, AnyNode>,
+  levelId: string,
+): FloorRegionRoom | null {
+  const level = nodes[levelId]
+  if (level?.type !== 'level') return null
+  const site = Object.values(nodes).find((node) => node.type === 'site')
+  const outline =
+    site?.type === 'site' && site.polygon?.points?.length && site.polygon.points.length >= 3
+      ? site.polygon.points.map(([x, z]): [number, number] => [x, z])
+      : ([
+          [-OPEN_GROUND, -OPEN_GROUND],
+          [OPEN_GROUND, -OPEN_GROUND],
+          [OPEN_GROUND, OPEN_GROUND],
+          [-OPEN_GROUND, OPEN_GROUND],
+        ] as [number, number][])
+  const clear: MultiPolygon = [{ outer: outline, holes: [] }]
+  const rooms = Object.values(nodes).flatMap((node) =>
+    node.type === 'zone' && node.parentId === levelId && node.spaceRole === 'room'
+      ? [node.polygon]
+      : [],
+  )
+  return {
+    zoneId: '',
+    levelId,
+    clear,
+    elevation: 0,
+    angle: 0,
+    targets: floorRegionSnapTargets([], rooms),
+    purpose: TERRACE,
+  }
+}
+
+/** Arms the terrace tool on the current level (select mode, so nothing else draws). */
+export function startTerraceDraft(levelId = useViewer.getState().selection.levelId): boolean {
+  if (!levelId || useScene.getState().readOnly) return false
+  const host = describeTerraceHost(useScene.getState().nodes, levelId)
+  if (!host) return false
+  cancelTerraceDraft()
+  cancelFloorRegion()
+  const editor = useEditor.getState()
+  if (editor.phase === 'site') editor.setPhase('building')
+  if (editor.mode !== 'select') editor.setMode('select')
+  if (editor.room) editor.clearRoom()
+  useViewer.getState().setSelection({ selectedIds: [] })
+  beginTool(host)
+  return true
+}
+
+export function cancelTerraceDraft() {
+  const current = tool
+  tool = null
+  if (current?.active) current.cancel()
+  else reset()
+}
+
+export function terraceDraftActive() {
+  return !!useTerraceDraft.getState().host
+}
+
+export function setTerraceShape(shape: TerraceShape) {
+  if (useTerraceDraft.getState().shape === shape) return
+  const { draft } = useFloorRegionDraft.getState()
+  if (draft?.room.purpose === TERRACE) useFloorRegionDraft.setState({ draft: null })
+  useTerraceDraft.setState({ shape })
+}
+
+export function toggleTerraceShape() {
+  setTerraceShape(useTerraceDraft.getState().shape === 'rectangle' ? 'polygon' : 'rectangle')
+}
+
+/** The HUD's shape chip (T). */
+export const TERRACE_SHAPE_HINT: ToolHint = {
+  key: 'T',
+  label: 'Shape',
+  chip: {
+    subscribe: (onChange) => useTerraceDraft.subscribe(onChange),
+    value: () => useTerraceDraft.getState().shape,
+    cycle: toggleTerraceShape,
+    labels: { rectangle: 'Shape: Rectangle', polygon: 'Shape: Polygon' },
+    icons: { rectangle: 'lucide:square', polygon: 'lucide:pentagon' },
+    tooltip: 'Outline shape — click or press T to switch',
+  },
+}

package/src/lib/tool-cursor-icon.test.ts

@@ -0,0 +1,16 @@
+import { expect, test } from 'bun:test'
+import { wallCursorIcon } from './tool-cursor-icon'
+import { getWallDrawVariantInfo, WALL_DRAW_VARIANTS } from './wall-draw-variant'
+
+test('the wall cursor bubble shows the Rooms tile icon of the variant in hand', () => {
+  for (const variant of WALL_DRAW_VARIANTS) {
+    expect(wallCursorIcon(variant.mode)).toEqual({
+      label: getWallDrawVariantInfo(variant.id).title,
+      iconSrc: variant.iconSrc,
+    })
+  }
+  expect(
+    new Set(WALL_DRAW_VARIANTS.map((variant) => wallCursorIcon(variant.mode).iconSrc)).size,
+  ).toBe(3)
+  expect(getWallDrawVariantInfo('walls').iconSrc).toBe('/icons/wall.webp')
+})

package/src/lib/tool-cursor-icon.ts

@@ -0,0 +1,11 @@
+import type { ContinuationMode } from './continuation'
+import { getWallDrawVariantInfo, wallDrawVariantOf } from './wall-draw-variant'
+
+/**
+ * The cursor bubble's icon for the wall tool: the Rooms variant in hand
+ * (Rectangle / Polygon / Walls), the same art as the Build panel tile.
+ */
+export function wallCursorIcon(mode: ContinuationMode): { label: string; iconSrc: string } {
+  const variant = getWallDrawVariantInfo(wallDrawVariantOf(mode))
+  return { label: variant.title, iconSrc: variant.iconSrc }
+}

package/src/lib/typing-target.ts

@@ -0,0 +1,9 @@
+// Keys typed into a field (the room-name combobox, any input, an open dialog)
+// belong to that field, never to a canvas gesture.
+const TYPING_TARGET =
+  'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="combobox"], [role="textbox"], [role="dialog"], [role="alertdialog"]'
+
+export function isTypingTarget(target: EventTarget | null) {
+  const element = target as { closest?: (selector: string) => unknown; isContentEditable?: boolean }
+  return !!element && (element.isContentEditable === true || !!element.closest?.(TYPING_TARGET))
+}

package/src/lib/units.ts

@@ -4,7 +4,8 @@ import {
   type BuildingNode,
   type LevelNode,
   pointInPolygon2D,
-  resolveAutoZonePolygon,
+  runAsSingleSceneHistoryStep,
+  sceneRegistry,
   snapWorldXZToBuildingLocal,
   UnitNode,
   useScene,
@@ -12,14 +13,13 @@ import {
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect } from 'react'
-import useEditor, { type StructureLayer } from '../store/use-editor'
+import useEditor from '../store/use-editor'
 import { getActiveBuildingPose } from './world-grid-snap'
 
 type Nodes = Readonly<Record<AnyNodeId, AnyNode>>
 
 // Unit focus is a session gesture: the layer the user was on when focus began
 // comes back when focus ends, unless they switched layers by hand meanwhile.
-let restoreLayer: StructureLayer | null = null
 let entering = false
 let leaving = false
 
@@ -49,11 +49,7 @@ export function enterUnitFocus(unitId: UnitNode['id']): void {
     const unit = nodes[unitId]
     if (unit?.type !== 'unit') return
     const editor = useEditor.getState()
-    if (restoreLayer === null) restoreLayer = editor.structureLayer
-    if (editor.phase !== 'structure') editor.setPhase('structure')
-    if (useEditor.getState().structureLayer !== 'zones') {
-      useEditor.getState().setStructureLayer('zones')
-    }
+    if (editor.phase === 'site') editor.setPhase('building')
     const viewer = useViewer.getState()
     if (viewer.focusedUnitId !== unitId) viewer.setFocusedUnit(unitId)
 
@@ -72,19 +68,7 @@ export function enterUnitFocus(unitId: UnitNode['id']): void {
   }
 }
 
-function finishLeave(unitId: UnitNode['id'], keepLayer: boolean) {
-  const layer = restoreLayer
-  restoreLayer = null
-  const editor = useEditor.getState()
-  if (
-    !keepLayer &&
-    layer &&
-    layer !== 'zones' &&
-    editor.phase === 'structure' &&
-    editor.structureLayer === 'zones'
-  ) {
-    editor.setStructureLayer(layer)
-  }
+function finishLeave(unitId: UnitNode['id']) {
   const { selection, setSelection } = useViewer.getState()
   if (selection.selectedIds.length === 1 && selection.selectedIds[0] === unitId) {
     setSelection({ selectedIds: [] })
@@ -92,7 +76,7 @@ function finishLeave(unitId: UnitNode['id'], keepLayer: boolean) {
 }
 
 /** Ends unit focus. Returns false when no unit was focused. */
-export function leaveUnitFocus(options?: { keepLayer?: boolean }): boolean {
+export function leaveUnitFocus(): boolean {
   const viewer = useViewer.getState()
   const unitId = viewer.focusedUnitId
   if (!unitId) return false
@@ -102,7 +86,7 @@ export function leaveUnitFocus(options?: { keepLayer?: boolean }): boolean {
   } finally {
     leaving = false
   }
-  finishLeave(unitId, options?.keepLayer ?? false)
+  finishLeave(unitId)
   return true
 }
 
@@ -124,28 +108,75 @@ export function assignZoneToUnit(zoneId: ZoneNode['id'], unitId: UnitNode['id']
   if (updates.length > 0) updateNodes(updates)
 }
 
+/** The units of the building a zone's level belongs to, and the one listing the zone. */
+export function zoneUnits(
+  nodes: Nodes,
+  zoneId: string,
+): { buildingId: BuildingNode['id'] | null; units: UnitNode[]; current: UnitNode | null } {
+  const zone = nodes[zoneId as AnyNodeId]
+  const level = zone?.parentId ? nodes[zone.parentId as AnyNodeId] : undefined
+  const building = level?.parentId ? nodes[level.parentId as AnyNodeId] : undefined
+  if (building?.type !== 'building') return { buildingId: null, units: [], current: null }
+  const units = building.children.flatMap((id) => {
+    const child = nodes[id as AnyNodeId]
+    return child?.type === 'unit' ? [child] : []
+  })
+  return {
+    buildingId: building.id,
+    units,
+    current: units.find((unit) => unit.members.includes(zoneId as ZoneNode['id'])) ?? null,
+  }
+}
+
+/** Puts a zone in a new unit of its building (named "Unit N"), in one undo step, without focusing it. */
+export function addZoneToNewUnit(zoneId: ZoneNode['id']): UnitNode['id'] | null {
+  const { buildingId, units } = zoneUnits(useScene.getState().nodes, zoneId)
+  if (!buildingId) return null
+  const unit = UnitNode.parse({ name: `Unit ${units.length + 1}` })
+  runAsSingleSceneHistoryStep(useScene, () => {
+    useScene.getState().createNode(unit, buildingId)
+    assignZoneToUnit(zoneId, unit.id)
+  })
+  return unit.id
+}
+
 export function toggleZoneMembership(unitId: UnitNode['id'], zoneId: ZoneNode['id']): void {
   const unit = useScene.getState().nodes[unitId]
   if (unit?.type !== 'unit') return
   assignZoneToUnit(zoneId, unit.members.includes(zoneId) ? null : unitId)
 }
 
+/** How far (m) below a mezzanine's walking surface a hit still counts as on it (its plate and underside). */
+const MEZZANINE_HIT_TOLERANCE = 0.05
+
 /**
  * The zone under a point on the current level, in building-local XZ. A 3D
  * click lands on whatever surface is closest (a floor slab sits above the
  * zone fill), so painting resolves the zone from the hit point instead of the
- * hit mesh. Nested zones resolve to the smallest one.
+ * hit mesh. Nested zones resolve to the smallest one, except that a mezzanine
+ * the hit may be on always wins over its host. With the hit's height (`y`,
+ * level-local) a mezzanine counts only when the hit is on or above its plate —
+ * the host floor under it is the host's; without one (the plan, seen from
+ * above) the mezzanine on top wins.
  */
-export function zoneAtLevelPoint(x: number, z: number): ZoneNode | null {
+export function zoneAtLevelPoint(x: number, z: number, y?: number): ZoneNode | null {
   const levelId = useViewer.getState().selection.levelId
   if (!levelId) return null
   const nodes = useScene.getState().nodes
-  const resolve = (id: AnyNodeId) => nodes[id]
   let best: ZoneNode | null = null
   let bestArea = Number.POSITIVE_INFINITY
+  let bestOnTop = false
   for (const node of Object.values(nodes)) {
     if (node.type !== 'zone' || node.parentId !== levelId) continue
-    const polygon = resolveAutoZonePolygon(node, resolve)
+    // An eligible mezzanine is the surface on top: it beats its host whatever
+    // their areas (a mezzanine may cover its whole host).
+    const onTop = node.floor?.support === 'open'
+    if (y !== undefined && onTop) {
+      const underside = (node.floor!.elevation ?? 0) - (node.floor!.thickness ?? 0.2)
+      if (y < underside - MEZZANINE_HIT_TOLERANCE) continue
+    }
+    if (bestOnTop && !onTop) continue
+    const polygon = node.polygon
     if (!pointInPolygon2D([x, z], polygon)) continue
     let area = 0
     for (let i = 0; i < polygon.length; i++) {
@@ -154,20 +185,30 @@ export function zoneAtLevelPoint(x: number, z: number): ZoneNode | null {
       area += a[0] * b[1] - b[0] * a[1]
     }
     area = Math.abs(area) / 2
-    if (area < bestArea) {
+    if (area < bestArea || (onTop && !bestOnTop)) {
       best = node
       bestArea = area
+      bestOnTop = onTop
     }
   }
   return best
 }
 
-export function zoneAtWorldPoint(worldX: number, worldZ: number): ZoneNode | null {
+/** `worldY` (optional): the hit's height, so a click under a mezzanine picks the host. */
+export function zoneAtWorldPoint(worldX: number, worldZ: number, worldY?: number): ZoneNode | null {
   const pose = getActiveBuildingPose()
   const [x, z] = pose
     ? snapWorldXZToBuildingLocal(worldX, worldZ, pose.position, pose.rotationY, 0).local
     : [worldX, worldZ]
-  return zoneAtLevelPoint(x, z)
+  return zoneAtLevelPoint(x, z, worldY === undefined ? undefined : levelLocalY(worldY))
+}
+
+function levelLocalY(worldY: number): number {
+  const levelId = useViewer.getState().selection.levelId
+  const level = levelId ? sceneRegistry.nodes.get(levelId) : undefined
+  if (!level) return worldY
+  level.updateWorldMatrix(true, false)
+  return worldY - level.matrixWorld.elements[13]!
 }
 
 export const ZONE_PAINT_DELAY_MS = 250
@@ -211,32 +252,29 @@ export function createUnitInBuilding(buildingId: BuildingNode['id']): UnitNode['
 /**
  * Keeps unit focus coherent with the rest of the editor: a focus set from
  * anywhere (the unit inspector calls the viewer store directly) gets the full
- * enter treatment, and focus ends when the user switches layer or phase by
- * hand, selects anything other than the focused unit, or the unit is deleted.
+ * enter treatment, and focus ends when the user goes to site, selects
+ * anything other than the focused unit, or the unit is deleted.
  */
 export function useUnitFocusRules(): void {
   useEffect(() => {
     const unsubscribeViewer = useViewer.subscribe((state, prev) => {
       if (state.focusedUnitId !== prev.focusedUnitId) {
         if (state.focusedUnitId) enterUnitFocus(state.focusedUnitId)
-        else if (prev.focusedUnitId && !leaving) finishLeave(prev.focusedUnitId, false)
+        else if (prev.focusedUnitId && !leaving) finishLeave(prev.focusedUnitId)
         return
       }
       const unitId = state.focusedUnitId
       if (!unitId || state.selection === prev.selection) return
       // Selecting a zone keeps focus: renaming or recolouring a zone row is
-      // part of arranging the unit, and zones live on the layer focus uses.
+      // part of arranging the unit.
       const { selectedIds } = state.selection
       const selectsOther =
         selectedIds.length > 0 && !(selectedIds.length === 1 && selectedIds[0] === unitId)
       if (selectsOther) leaveUnitFocus()
     })
     const unsubscribeEditor = useEditor.subscribe((state, prev) => {
-      if (state.structureLayer === prev.structureLayer && state.phase === prev.phase) return
-      if (!useViewer.getState().focusedUnitId) return
-      if (state.phase !== 'structure' || state.structureLayer !== 'zones') {
-        leaveUnitFocus({ keepLayer: true })
-      }
+      if (state.phase === prev.phase || state.phase === 'building') return
+      if (useViewer.getState().focusedUnitId) leaveUnitFocus()
     })
     const unsubscribeScene = useScene.subscribe((state, prev) => {
       if (state.nodes === prev.nodes) return

package/src/lib/vector-edges.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, test } from 'bun:test'
+import * as THREE from 'three'
+import { candidateEdges, hideUndrawnMeshes, materialShows } from './vector-edges'
+
+/** A unit box's feature edges: 12, six floats each. */
+const BOX_EDGE_FLOATS = 12 * 6
+
+function sceneWithProxy() {
+  const scene = new THREE.Scene()
+  const house = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial())
+  // a utility-pole pick proxy: a tall box that draws nothing
+  const proxy = new THREE.Mesh(
+    new THREE.BoxGeometry(0.5, 10.7, 0.5),
+    new THREE.MeshBasicMaterial({ colorWrite: false, depthWrite: false }),
+  )
+  proxy.position.set(3, 0, 0)
+  scene.add(house, proxy)
+  scene.updateMatrixWorld(true)
+  return { scene, house, proxy }
+}
+
+describe('vector edges skip what draws nothing', () => {
+  test('a pick proxy (colorWrite false) has no lines', () => {
+    const { scene } = sceneWithProxy()
+    const camera = new THREE.OrthographicCamera(-10, 10, 10, -10, 0.1, 100)
+    const world = candidateEdges(scene, camera, 20, 400_000)
+    expect(world).toHaveLength(BOX_EDGE_FLOATS)
+    // every edge is the 1 m box's, none the 10.7 m proxy's
+    for (let i = 1; i < world.length; i += 3)
+      expect(Math.abs(world[i] as number)).toBeLessThanOrEqual(0.5)
+  })
+
+  test('hidden materials, see-through hit boxes and colour-masked colliders all count as undrawn', () => {
+    expect(materialShows(new THREE.MeshBasicMaterial())).toBe(true)
+    expect(materialShows(new THREE.MeshBasicMaterial({ colorWrite: false }))).toBe(false)
+    expect(materialShows(new THREE.MeshBasicMaterial({ visible: false }))).toBe(false)
+    expect(materialShows(new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 }))).toBe(
+      false,
+    )
+    expect(
+      materialShows([
+        new THREE.MeshBasicMaterial({ colorWrite: false }),
+        new THREE.MeshBasicMaterial(),
+      ]),
+    ).toBe(true)
+  })
+
+  test('the depth and normal passes see no pick proxy, and it comes back after', () => {
+    const { scene, house, proxy } = sceneWithProxy()
+    const show = hideUndrawnMeshes(scene)
+    // under the passes' override material the proxy would write depth and
+    // hide the real edges behind it
+    expect(proxy.visible).toBe(false)
+    expect(house.visible).toBe(true)
+    show()
+    expect(proxy.visible).toBe(true)
+  })
+})