@pascal-app/editor 1.1.0 → 1.1.1

package/src/components/editor/room-controls.tsx

@@ -13,7 +13,13 @@ import {
   sceneRegistry,
   useScene,
 } from '@pascal-app/core'
-import { getSceneTheme, setSurfaceRaycastLayers, useViewer } from '@pascal-app/viewer'
+import {
+  getSceneTheme,
+  isTypingTarget,
+  setSurfaceRaycastLayers,
+  useViewer,
+} from '@pascal-app/viewer'
+import { LocalizedHtml as Html, type RoomSelectionRecord } from '@pascal-app/viewer/ui'
 import { useFrame, useThree } from '@react-three/fiber'
 import { SquareSplitHorizontal } from 'lucide-react'
 import Image from 'next/image'
@@ -48,7 +54,6 @@ import {
   startRoomDivide,
 } from '../../lib/room-divide-session'
 import { useRoomHandleDrag } from '../../lib/room-handle-drag'
-import type { RoomSelectionRecord } from '../../lib/room-selection'
 import { requestRoomDeletion } from '../../lib/room-structure-commands'
 import {
   type RoomTransformKind,
@@ -57,7 +62,6 @@ import {
   startRoomTransform,
   useRoomTransform,
 } from '../../lib/room-transform-session'
-import { isTypingTarget } from '../../lib/typing-target'
 import useEditor from '../../store/use-editor'
 import useInteractionScope from '../../store/use-interaction-scope'
 import { isViewVisible, VIEW_2D } from '../../store/view-layout'
@@ -69,7 +73,6 @@ import {
 } from '../tools/shared/draft-measurement-label'
 import { ActionMenuButton } from './action-menu-button'
 import { getMenuYOffset } from './floating-action-menu'
-import { Html } from './localized-html'
 import { NodeActionMenu } from './node-action-menu'
 import { RoomFloorHighlight3D } from './room-floor-highlight'
 import { RoomHandleDragPreview3D, RoomHandles3D } from './room-handles'

package/src/components/editor/room-handles-2d.tsx

@@ -10,13 +10,13 @@ import {
   roomDrawnFloor,
   useScene,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { MEASUREMENT_FLOORPLAN_COLOR, useViewer } from '@pascal-app/viewer'
+import { FloorplanGeometryRenderer } from '@pascal-app/viewer/ui'
 import { Minus, Plus } from 'lucide-react'
 import { type PointerEvent as ReactPointerEvent, useMemo, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { useRoomRecords, useSelectedRoom } from '../../hooks/use-selected-room'
 import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
-import { MEASUREMENT_FLOORPLAN_COLOR } from '../../lib/measurements'
 import {
   commitRoomFloorElevation,
   roomRelativeFloorHeight,
@@ -41,7 +41,6 @@ import useEditor from '../../store/use-editor'
 import useFloorplanAnnotationVisibility from '../../store/use-floorplan-annotation-visibility'
 import useInteractionScope from '../../store/use-interaction-scope'
 import { useFloorplanRender } from '../editor-2d/floorplan-render-context'
-import { FloorplanGeometryRenderer } from '../editor-2d/renderers/floorplan-geometry-renderer'
 import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
 import { ActionMenuButton } from './action-menu-button'
 import { formatMeasurement } from './measurement-pill'

package/src/components/editor/room-handles.tsx

@@ -12,6 +12,7 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { MEASUREMENT_ACTIVE_COLOR, useViewer } from '@pascal-app/viewer'
+import { LocalizedHtml as Html, type RoomSelectionRecord } from '@pascal-app/viewer/ui'
 import { type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -51,7 +52,6 @@ import {
   useRoomHandleDrag,
 } from '../../lib/room-handle-drag'
 import type { RoomDimension } from '../../lib/room-push-dimensions'
-import type { RoomSelectionRecord } from '../../lib/room-selection'
 import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
 import {
   commitDimensionValue,
@@ -60,7 +60,6 @@ import {
 import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
 import { ARROW_COLOR, ARROW_SCALE, HandleArrow } from './handles/handle-arrow'
 import { resolveResizeSnapValue } from './handles/resize-snap'
-import { Html } from './localized-html'
 import { formatMeasurement } from './measurement-pill'
 import { useSelectedWallDimensions } from './room-handles-2d'
 import { WallPushArrow } from './wall-push-arrow'

package/src/components/editor/room-highlight.tsx

@@ -2,26 +2,16 @@
 
 import { type AnyNodeId, sceneRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useFrame } from '@react-three/fiber'
-import { useEffect, useMemo, useRef } from 'react'
 import {
-  BufferGeometry,
-  DoubleSide,
-  Float32BufferAttribute,
-  type Group,
-  type Object3D,
-} from 'three'
-import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
+  describeZoneOutline,
+  RoomAssemblyMesh,
+  type RoomSelectionRecord,
+  resolveRoomAssemblyHeights,
+} from '@pascal-app/viewer/ui'
+import { useMemo } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { useHighlightedRoom } from '../../hooks/use-selected-room'
-import { EDITOR_LAYER } from '../../lib/constants'
 import { resolveOverlayPolicy } from '../../lib/interaction/overlay-policy'
-import {
-  getRoomAssembly,
-  type RoomAssemblyHeights,
-  resolveRoomAssemblyHeights,
-} from '../../lib/room-assembly-overlay'
-import { describeZoneOutline, type RoomSelectionRecord } from '../../lib/room-selection'
 import useEditor from '../../store/use-editor'
 import useInteractionScope from '../../store/use-interaction-scope'
 import { RoomControls2D, RoomControls3D } from './room-controls'
@@ -71,31 +61,6 @@ function useRoomHighlight() {
   return room ?? zoneOutline
 }
 
-const noRaycast = () => {}
-const outlineMaterial = new LineBasicNodeMaterial({
-  color: '#818cf8',
-  depthTest: false,
-  depthWrite: false,
-})
-const fillMaterial = (opacity: number) =>
-  new MeshBasicNodeMaterial({
-    color: '#818cf8',
-    depthTest: false,
-    depthWrite: false,
-    opacity,
-    side: DoubleSide,
-    transparent: true,
-  })
-const floorMaterial = fillMaterial(0.18)
-// Walls and the ceiling stack over the floor when seen from above.
-const surfaceMaterial = fillMaterial(0.1)
-
-function positions(array: Float32Array) {
-  const geometry = new BufferGeometry()
-  geometry.setAttribute('position', new Float32BufferAttribute(array, 3))
-  return geometry
-}
-
 function RoomMesh({ room }: { room: RoomSelectionRecord }) {
   const { levelId } = room.key
   // Zone, plate and ceiling edits already produce a new record; wall and
@@ -120,70 +85,6 @@ function RoomMesh({ room }: { room: RoomSelectionRecord }) {
   )
 }
 
-/** A room's floor, wall faces and outline in the highlight colour, riding its level's object. */
-export function RoomAssemblyMesh({
-  room,
-  heights,
-  levelObject,
-}: {
-  room: RoomSelectionRecord
-  heights: RoomAssemblyHeights
-  levelObject: () => Object3D | undefined
-}) {
-  const ref = useRef<Group>(null)
-  const assembly = useMemo(() => getRoomAssembly(room.geometry, heights), [room, heights])
-  const geometry = useMemo(
-    () => ({
-      floor: positions(assembly.floor),
-      surfaces: positions(assembly.surfaces),
-      outline: positions(assembly.outline),
-    }),
-    [assembly],
-  )
-  useEffect(
-    () => () => {
-      geometry.floor.dispose()
-      geometry.surfaces.dispose()
-      geometry.outline.dispose()
-    },
-    [geometry],
-  )
-  useFrame(() => {
-    const level = levelObject()
-    if (!ref.current) return
-    ref.current.visible = !!level
-    if (level) {
-      level.updateWorldMatrix(true, false)
-      ref.current.matrix.copy(level.matrixWorld)
-    }
-  })
-  return (
-    <group matrixAutoUpdate={false} ref={ref}>
-      <mesh
-        geometry={geometry.floor}
-        layers={EDITOR_LAYER}
-        material={floorMaterial}
-        raycast={noRaycast}
-        renderOrder={100}
-      />
-      <mesh
-        geometry={geometry.surfaces}
-        layers={EDITOR_LAYER}
-        material={surfaceMaterial}
-        raycast={noRaycast}
-        renderOrder={100}
-      />
-      <lineSegments
-        geometry={geometry.outline}
-        layers={EDITOR_LAYER}
-        material={outlineMaterial}
-        raycast={noRaycast}
-        renderOrder={101}
-      />
-    </group>
-  )
-}
-
 export function RoomHighlight3D() {
   const room = useRoomHighlight()
   return (