@pascal-app/editor 0.8.0 → 0.9.1

package/src/components/tools/shared/segment-angle.ts

@@ -15,6 +15,13 @@ export type SegmentAngleReference = {
   orientation: 'directed' | 'axis'
 }
 
+export type SegmentAngleArc = {
+  angle: number
+  startAngle: number
+  endAngle: number
+  midAngle: number
+}
+
 const POINT_MATCH_TOLERANCE = 1e-5
 const SEGMENT_POINT_TOLERANCE = 0.15
 const CURVE_TANGENT_SAMPLE_SPACING = 0.08
@@ -92,6 +99,36 @@ export function getAngleBetweenVectors(first: PlanPoint, second: PlanPoint): num
   return Math.acos(cosine)
 }
 
+function normalizeSignedAngle(angle: number) {
+  let nextAngle = angle
+
+  while (nextAngle <= -Math.PI) {
+    nextAngle += Math.PI * 2
+  }
+
+  while (nextAngle > Math.PI) {
+    nextAngle -= Math.PI * 2
+  }
+
+  return nextAngle
+}
+
+function getSignedAngleArc(vector: PlanPoint, referenceVector: PlanPoint): SegmentAngleArc | null {
+  const angle = getAngleBetweenVectors(vector, referenceVector)
+  if (angle === null) return null
+
+  const startAngle = Math.atan2(referenceVector[1], referenceVector[0])
+  const vectorAngle = Math.atan2(vector[1], vector[0])
+  const signedDelta = normalizeSignedAngle(vectorAngle - startAngle)
+
+  return {
+    angle: Math.abs(signedDelta),
+    startAngle,
+    endAngle: startAngle + signedDelta,
+    midAngle: startAngle + signedDelta / 2,
+  }
+}
+
 export function getAngleToSegmentReference(
   vector: PlanPoint,
   reference: SegmentAngleReference,
@@ -111,6 +148,25 @@ export function getAngleToSegmentReference(
   return Math.min(angle, reverseAngle)
 }
 
+export function getAngleArcToSegmentReference(
+  vector: PlanPoint,
+  reference: SegmentAngleReference,
+): SegmentAngleArc | null {
+  const directArc = getSignedAngleArc(vector, reference.vector)
+
+  if (!directArc || reference.orientation === 'directed') {
+    return directArc
+  }
+
+  const reverseArc = getSignedAngleArc(vector, [-reference.vector[0], -reference.vector[1]])
+
+  if (!reverseArc) {
+    return directArc
+  }
+
+  return reverseArc.angle < directArc.angle ? reverseArc : directArc
+}
+
 export function getSegmentAngleReferenceAtPoint(
   point: PlanPoint,
   segment: SegmentAngleLike,

package/src/components/tools/site/site-boundary-editor.tsx

@@ -1,19 +1,319 @@
-import { type SiteNode, useScene } from '@pascal-app/core'
-import { useCallback } from 'react'
-import { PolygonEditor } from '../shared/polygon-editor'
-
-/**
- * Site boundary editor - allows editing site polygon when in site phase
- * Uses the generic PolygonEditor component
- */
+import { emitter, type SiteNode, useLiveNodeOverrides, useScene } from '@pascal-app/core'
+import { SCENE_LAYER } from '@pascal-app/viewer'
+import { useGLTF } from '@react-three/drei/core/Gltf'
+import { useFrame } from '@react-three/fiber'
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Color, CylinderGeometry, DoubleSide, type Mesh, type Object3D, RingGeometry } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../../lib/constants'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import { SITE_BOUNDARY_DRAG_LABEL } from '../../../lib/site-boundary'
+import useEditor, { selectSiteFloorplanContext } from '../../../store/use-editor'
+import {
+  ARROW_COLOR,
+  ARROW_HOVER_COLOR,
+  NO_RAYCAST,
+  useInvisibleHitAreaMaterial,
+} from '../../editor/node-arrow-handles'
+import {
+  PolygonEditor,
+  type PolygonHandleHandlers,
+  type PolygonMidpointHandleRenderProps,
+  type PolygonVertexHandleRenderProps,
+} from '../shared/polygon-editor'
+import { SITE_FLAG_MODEL_URL } from './site-flag-model'
+
+const SITE_FLAG_BASE_Y = 0
+const SITE_FLAG_HIT_HEIGHT = 0.5
+const SITE_FLAG_HIT_RADIUS = 0.24
+const SITE_FLAG_HIT_Y = SITE_FLAG_BASE_Y + SITE_FLAG_HIT_HEIGHT / 2
+const SITE_FLAG_MODEL_MIN_Y = -0.034798760316334665
+const SITE_FLAG_SCALE = 0.5
+const SITE_FLAG_ACTIVE_LIFT = 0.08
+const SITE_FLAG_MODEL_Y = SITE_FLAG_BASE_Y - SITE_FLAG_MODEL_MIN_Y * SITE_FLAG_SCALE
+const SITE_FLAG_HALO_INNER_RADIUS = 0.08
+const SITE_FLAG_HALO_OUTER_RADIUS = SITE_FLAG_HIT_RADIUS * 0.95
+const SITE_FLAG_HALO_Y = SITE_FLAG_BASE_Y + 0.002
+const SITE_FLAG_HALO_COLOR = '#6366f1'
+
+type TintableMaterial = {
+  color?: Color
+  depthWrite: boolean
+  opacity: number
+  needsUpdate: boolean
+  transparent: boolean
+}
+
+function SiteFlagModel({
+  active,
+  hovered,
+  opacity = 1,
+  scale = SITE_FLAG_SCALE,
+}: {
+  active: boolean
+  hovered: boolean
+  opacity?: number
+  scale?: number
+}) {
+  const { scene } = useGLTF(SITE_FLAG_MODEL_URL, true)
+  const modelRef = useRef<Object3D>(null)
+  const flagScene = useMemo(() => {
+    const cloned = scene.clone(true)
+
+    cloned.traverse((object) => {
+      object.layers.set(SCENE_LAYER)
+
+      if ((object as Mesh).isMesh) {
+        const mesh = object as Mesh
+        mesh.castShadow = false
+        mesh.frustumCulled = false
+        mesh.raycast = NO_RAYCAST
+        mesh.receiveShadow = false
+        mesh.renderOrder = 1010
+        mesh.material = new MeshBasicNodeMaterial({
+          color: new Color(ARROW_COLOR),
+          depthTest: false,
+          depthWrite: opacity >= 0.999,
+          opacity,
+          transparent: opacity < 0.999,
+        })
+      }
+    })
+
+    return cloned
+  }, [opacity, scene])
+
+  useEffect(() => {
+    const color = new Color(active || hovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+
+    flagScene.traverse((object) => {
+      if ((object as Mesh).isMesh) {
+        const mesh = object as Mesh
+        const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material]
+
+        for (const material of materials as Array<MeshBasicNodeMaterial & TintableMaterial>) {
+          material.color?.copy(color)
+          material.opacity = opacity
+          material.transparent = opacity < 0.999
+          material.depthWrite = opacity >= 0.999
+          material.needsUpdate = true
+        }
+      }
+    })
+  }, [active, flagScene, hovered, opacity])
+
+  useFrame((_, delta) => {
+    const model = modelRef.current
+    if (!model) return
+
+    const smoothing = 1 - Math.exp(-delta * 18)
+    const targetY = SITE_FLAG_MODEL_Y + (active ? SITE_FLAG_ACTIVE_LIFT : 0)
+    model.position.y += (targetY - model.position.y) * smoothing
+  })
+
+  useEffect(
+    () => () => {
+      flagScene.traverse((object) => {
+        if ((object as Mesh).isMesh) {
+          const materials = (object as Mesh).material
+          if (Array.isArray(materials)) {
+            materials.forEach((material) => {
+              material.dispose()
+            })
+          } else {
+            materials.dispose()
+          }
+        }
+      })
+    },
+    [flagScene],
+  )
+
+  return (
+    <primitive
+      object={flagScene}
+      position={[0, SITE_FLAG_MODEL_Y, 0]}
+      ref={modelRef}
+      scale={scale}
+    />
+  )
+}
+
+function SiteFlagHoverHalo({ visible }: { visible: boolean }) {
+  const haloRef = useRef<Mesh>(null)
+  const geometry = useMemo(() => {
+    const nextGeometry = new RingGeometry(
+      SITE_FLAG_HALO_INNER_RADIUS,
+      SITE_FLAG_HALO_OUTER_RADIUS,
+      56,
+    )
+    nextGeometry.rotateX(-Math.PI / 2)
+    return nextGeometry
+  }, [])
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(SITE_FLAG_HALO_COLOR),
+        depthTest: true,
+        depthWrite: false,
+        opacity: 0,
+        side: DoubleSide,
+        transparent: true,
+      }),
+    [],
+  )
+
+  useFrame((_, delta) => {
+    const mesh = haloRef.current
+    if (!mesh) return
+
+    const smoothing = 1 - Math.exp(-delta * 18)
+    const targetOpacity = visible ? 0.52 : 0
+    const targetScale = visible ? 1 : 0.08
+    const nextOpacity = material.opacity + (targetOpacity - material.opacity) * smoothing
+    const nextScale = mesh.scale.x + (targetScale - mesh.scale.x) * smoothing
+
+    material.opacity = nextOpacity
+    mesh.scale.setScalar(nextScale)
+    mesh.visible = visible || nextOpacity > 0.01
+  })
+
+  useEffect(
+    () => () => {
+      geometry.dispose()
+      material.dispose()
+    },
+    [geometry, material],
+  )
+
+  return (
+    <mesh
+      frustumCulled={false}
+      geometry={geometry}
+      layers={SCENE_LAYER}
+      material={material}
+      position={[0, SITE_FLAG_HALO_Y, 0]}
+      raycast={NO_RAYCAST}
+      ref={haloRef}
+      renderOrder={1009}
+      scale={0.08}
+      visible={false}
+    />
+  )
+}
+
+function SiteFlagFallback({
+  active,
+  hovered,
+  opacity = 1,
+}: {
+  active: boolean
+  hovered: boolean
+  opacity?: number
+}) {
+  const color = active || hovered ? ARROW_HOVER_COLOR : ARROW_COLOR
+
+  return (
+    <group position={[0, SITE_FLAG_BASE_Y + (active ? SITE_FLAG_ACTIVE_LIFT : 0), 0]}>
+      <mesh layers={SCENE_LAYER} position={[0, 0.16, 0]} raycast={NO_RAYCAST}>
+        <cylinderGeometry args={[0.11, 0.16, 0.32, 24]} />
+        <meshBasicMaterial color={color} depthTest={false} opacity={opacity} transparent />
+      </mesh>
+      <mesh layers={SCENE_LAYER} position={[0, 0.34, 0]} raycast={NO_RAYCAST}>
+        <cylinderGeometry args={[0.04, 0.11, 0.14, 24]} />
+        <meshBasicMaterial color={color} depthTest={false} opacity={opacity} transparent />
+      </mesh>
+    </group>
+  )
+}
+
+function SiteBoundaryFlagHandle({
+  active = false,
+  baseY,
+  handleProps,
+  hovered,
+  modelOpacity = 1,
+  modelScale = SITE_FLAG_SCALE,
+  modelVisible = true,
+  point,
+}: {
+  active?: boolean
+  baseY: number
+  handleProps: PolygonHandleHandlers
+  hovered: boolean
+  modelOpacity?: number
+  modelScale?: number
+  modelVisible?: boolean
+  point: [number, number]
+}) {
+  const hitGeometry = useMemo(
+    () =>
+      new CylinderGeometry(SITE_FLAG_HIT_RADIUS, SITE_FLAG_HIT_RADIUS, SITE_FLAG_HIT_HEIGHT, 24),
+    [],
+  )
+  const hitMaterial = useInvisibleHitAreaMaterial()
+
+  useEffect(() => () => hitGeometry.dispose(), [hitGeometry])
+
+  return (
+    <group position={[point[0], baseY, point[1]]}>
+      <SiteFlagHoverHalo visible={active || hovered} />
+      {(modelVisible || active || hovered) && (
+        <Suspense
+          fallback={<SiteFlagFallback active={active} hovered={hovered} opacity={modelOpacity} />}
+        >
+          <SiteFlagModel
+            active={active}
+            hovered={hovered}
+            opacity={modelOpacity}
+            scale={modelScale}
+          />
+        </Suspense>
+      )}
+      <mesh
+        frustumCulled={false}
+        geometry={hitGeometry}
+        layers={EDITOR_LAYER}
+        material={hitMaterial}
+        position={[0, SITE_FLAG_HIT_Y, 0]}
+        renderOrder={1012}
+        {...handleProps}
+      />
+    </group>
+  )
+}
+
 export const SiteBoundaryEditor: React.FC = () => {
   const nodes = useScene((state) => state.nodes)
   const rootNodeIds = useScene((state) => state.rootNodeIds)
   const updateNode = useScene((state) => state.updateNode)
+  const phase = useEditor((state) => state.phase)
+  const mode = useEditor((state) => state.mode)
+  const [hoveredVertex, setHoveredVertex] = useState<number | null>(null)
+  const [hoveredMidpoint, setHoveredMidpoint] = useState<number | null>(null)
 
-  // Get the site node (first root node)
   const siteNode = rootNodeIds[0] ? nodes[rootNodeIds[0]] : null
   const site = siteNode?.type === 'site' ? (siteNode as SiteNode) : null
+  const siteId = site?.id
+  const isSiteEditing = phase === 'site'
+  const showSiteHandles = isSiteEditing || mode === 'select'
+  const isSiteBoundaryHighlighted =
+    isSiteEditing || hoveredVertex !== null || hoveredMidpoint !== null
+  const [isDraggingSiteBoundary, setIsDraggingSiteBoundary] = useState(false)
+  const isDraggingSiteBoundaryRef = useRef(false)
+  const livePolygon = useLiveNodeOverrides(
+    useCallback(
+      (state) => {
+        if (!siteId) return null
+        return (state.overrides.get(siteId)?.polygon as SiteNode['polygon'] | undefined) ?? null
+      },
+      [siteId],
+    ),
+  )
+  const displayPolygon =
+    !(isDraggingSiteBoundary || isDraggingSiteBoundaryRef.current) && livePolygon?.points
+      ? livePolygon.points
+      : site?.polygon?.points
 
   const handlePolygonChange = useCallback(
     (newPolygon: Array<[number, number]>) => {
@@ -29,14 +329,166 @@ export const SiteBoundaryEditor: React.FC = () => {
     [site, updateNode],
   )
 
-  if (!site?.polygon?.points || site.polygon.points.length < 3) return null
+  const handlePolygonPreview = useCallback(
+    (previewPolygon: ReadonlyArray<readonly [number, number]> | null) => {
+      if (!siteId) return
+
+      if (!previewPolygon) {
+        useLiveNodeOverrides.getState().clearFields(siteId, ['polygon'])
+        return
+      }
+
+      useLiveNodeOverrides.getState().set(siteId, {
+        polygon: {
+          type: 'polygon',
+          points: previewPolygon.map(([x, z]) => [x, z] as [number, number]),
+        },
+      })
+    },
+    [siteId],
+  )
+
+  const handleSiteBoundaryDragChange = useCallback(
+    (isDragging: boolean) => {
+      isDraggingSiteBoundaryRef.current = isDragging
+      setIsDraggingSiteBoundary(isDragging)
+
+      if (!siteId) return
+
+      const editor = useEditor.getState()
+      if (isDragging) {
+        editor.setActiveHandleDrag({ nodeId: siteId, label: SITE_BOUNDARY_DRAG_LABEL })
+      } else if (
+        editor.activeHandleDrag?.nodeId === siteId &&
+        editor.activeHandleDrag.label === SITE_BOUNDARY_DRAG_LABEL
+      ) {
+        editor.setActiveHandleDrag(null)
+      }
+
+      if (!isDragging) {
+        useLiveNodeOverrides.getState().clearFields(siteId, ['polygon'])
+      }
+    },
+    [siteId],
+  )
+
+  useEffect(
+    () => () => {
+      if (!siteId) return
+      const editor = useEditor.getState()
+      if (
+        editor.activeHandleDrag?.nodeId === siteId &&
+        editor.activeHandleDrag.label === SITE_BOUNDARY_DRAG_LABEL
+      ) {
+        editor.setActiveHandleDrag(null)
+      }
+      useLiveNodeOverrides.getState().clearFields(siteId, ['polygon'])
+      isDraggingSiteBoundaryRef.current = false
+    },
+    [siteId],
+  )
+
+  useEffect(() => {
+    if (isSiteEditing && siteId) {
+      selectSiteFloorplanContext()
+    }
+  }, [isSiteEditing, siteId])
+
+  const activateSiteEditing = useCallback(() => {
+    isDraggingSiteBoundaryRef.current = true
+    setIsDraggingSiteBoundary(true)
+    if (useEditor.getState().phase !== 'site') {
+      useEditor.setState({ catalogCategory: null, mode: 'select', phase: 'site', tool: null })
+    }
+    selectSiteFloorplanContext()
+  }, [])
+
+  const exitSiteEditing = useCallback(() => {
+    const editor = useEditor.getState()
+    editor.setPhase('structure')
+    editor.setStructureLayer('elements')
+    editor.setMode('select')
+  }, [])
+
+  useEffect(() => {
+    if (!isSiteEditing) return
+
+    const onGridClick = () => {
+      if (useEditor.getState().phase !== 'site') return
+      exitSiteEditing()
+    }
+
+    emitter.on('grid:click', onGridClick)
+    return () => {
+      emitter.off('grid:click', onGridClick)
+    }
+  }, [exitSiteEditing, isSiteEditing])
+
+  const renderSiteFlagVertex = useCallback(
+    ({
+      handleProps,
+      height,
+      isDragging,
+      isHovered,
+      point,
+      position,
+    }: PolygonVertexHandleRenderProps) => {
+      const baseY = position[1] - height / 2
+
+      return (
+        <SiteBoundaryFlagHandle
+          active={isDragging}
+          baseY={baseY}
+          handleProps={handleProps}
+          hovered={isHovered}
+          point={point}
+        />
+      )
+    },
+    [],
+  )
+  const renderSiteFlagMidpoint = useCallback(
+    ({ handleProps, height, isHovered, point, position }: PolygonMidpointHandleRenderProps) => {
+      const baseY = position[1] - height / 2
+
+      return (
+        <SiteBoundaryFlagHandle
+          baseY={baseY}
+          handleProps={handleProps}
+          hovered={isHovered}
+          modelOpacity={0.48}
+          modelScale={SITE_FLAG_SCALE * 0.92}
+          modelVisible={isHovered}
+          point={point}
+        />
+      )
+    },
+    [],
+  )
+
+  if (!displayPolygon || displayPolygon.length < 3) return null
+  if (!showSiteHandles) return null
 
   return (
     <PolygonEditor
-      color="#10b981"
+      color={isSiteBoundaryHighlighted ? ARROW_COLOR : '#10b981'}
       minVertices={3}
+      onBeforeVertexDrag={activateSiteEditing}
+      onDragCommit={() => {
+        sfxEmitter.emit('sfx:item-place')
+        exitSiteEditing()
+      }}
+      onDragStart={() => sfxEmitter.emit('sfx:item-pick')}
+      onDragStateChange={handleSiteBoundaryDragChange}
+      onMidpointHoverChange={setHoveredMidpoint}
       onPolygonChange={handlePolygonChange}
-      polygon={site.polygon.points}
+      onPolygonPreview={handlePolygonPreview}
+      onVertexHoverChange={setHoveredVertex}
+      polygon={displayPolygon}
+      renderMidpointHandle={renderSiteFlagMidpoint}
+      renderVertexHandle={renderSiteFlagVertex}
+      showBorderLine={isSiteBoundaryHighlighted}
+      showMidpointHandles={showSiteHandles}
     />
   )
 }

package/src/components/tools/site/site-flag-model.ts

@@ -0,0 +1,18 @@
+const SITE_FLAG_MODEL_BASE64 = [
+  'Z2xURgIAAADgAwAAAAMAAEpTT057ImFzc2V0Ijp7ImdlbmVyYXRvciI6ImdsVEYtVHJhbnNmb3JtIHY0LjMuMCIsInZlcnNpb24i',
+  'OiIyLjAifSwiYWNjZXNzb3JzIjpbeyJ0eXBlIjoiU0NBTEFSIiwiY29tcG9uZW50VHlwZSI6NTEyMywiY291bnQiOjE2OH0seyJ0',
+  'eXBlIjoiVkVDMyIsImNvbXBvbmVudFR5cGUiOjUxMjYsImNvdW50IjozMCwibWF4IjpbMC4wMDY3MzM3MTM2NzE1NjUwNTYsMC4w',
+  'MDYyNDAyODE3NDIwNjYxNDUsMC4wMDAzNDc5ODc2MDMxNjMzNDY2NV0sIm1pbiI6Wy0wLjAwMDMwMTM2NjExODk0NzA0NCwtMC4w',
+  'MDAzNDc5ODc2MDMxNjMzNDY2NSwtMC4wMDAzNDc5ODc4NjUwOTc4MjA3Nl19XSwiYnVmZmVyVmlld3MiOlt7ImJ1ZmZlciI6MCwi',
+  'Ynl0ZU9mZnNldCI6MCwiYnl0ZUxlbmd0aCI6MTkzfV0sImJ1ZmZlcnMiOlt7ImJ5dGVMZW5ndGgiOjE5M31dLCJtZXNoZXMiOlt7',
+  'InByaW1pdGl2ZXMiOlt7ImF0dHJpYnV0ZXMiOnsiUE9TSVRJT04iOjF9LCJtb2RlIjo0LCJpbmRpY2VzIjowLCJleHRlbnNpb25z',
+  'Ijp7IktIUl9kcmFjb19tZXNoX2NvbXByZXNzaW9uIjp7ImJ1ZmZlclZpZXciOjAsImF0dHJpYnV0ZXMiOnsiUE9TSVRJT04iOjB9',
+  'fX19XX1dLCJub2RlcyI6W3sic2NhbGUiOlsxMDAsMTAwLDEwMF0sIm1lc2giOjB9XSwic2NlbmVzIjpbeyJub2RlcyI6WzBdfV0s',
+  'InNjZW5lIjowLCJleHRlbnNpb25zVXNlZCI6WyJLSFJfZHJhY29fbWVzaF9jb21wcmVzc2lvbiJdLCJleHRlbnNpb25zUmVxdWly',
+  'ZWQiOlsiS0hSX2RyYWNvX21lc2hfY29tcHJlc3Npb24iXX0gICDEAAAAQklOAERSQUNPAgIBAQAAAB44ADcDAA7f6qkv1VVRZfUo',
+  '1qKKAgEBEAH/AAABAAkDAAACAQEBAA0DEREXaQaJCEUEiQg1EwsuVMV2v4nwGqm5Tl7xigAAAFMDACwAZQAcaFlXAMoAAJS7Umpl',
+  'CAIAyqteasnAqAAAAEt9IJaxqKVWGb4CAIBXSq0MAKDUyQAA/CcAQABAmVEBAADA1KdWGV4BKPOK/1QGgAWQDAAAAAD/DwAArQCe',
+  'uRtytrkkcra5h4bmOwwAAAA=',
+].join('')
+
+export const SITE_FLAG_MODEL_URL = `data:model/gltf-binary;base64,${SITE_FLAG_MODEL_BASE64}`

package/src/components/tools/stair/stair-defaults.ts

@@ -13,5 +13,5 @@ export const DEFAULT_SPIRAL_TOP_LANDING_MODE = 'none' as const
 export const DEFAULT_SPIRAL_TOP_LANDING_DEPTH = 0.9
 export const DEFAULT_SPIRAL_SHOW_CENTER_COLUMN = true
 export const DEFAULT_SPIRAL_SHOW_STEP_SUPPORTS = true
-export const DEFAULT_STAIR_RAILING_MODE = 'right' as const
+export const DEFAULT_STAIR_RAILING_MODE = 'both' as const
 export const DEFAULT_STAIR_RAILING_HEIGHT = 0.92