@pascal-app/editor 1.0.0-beta.4 → 1.0.0

package/src/components/tools/registry-tool-context.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import type { AnyNodeId, LevelNode, SceneApi } from '@pascal-app/core'
+import { createContext, type ReactNode, useContext } from 'react'
+
+export type RegistryToolContextValue = {
+  activeLevelId: LevelNode['id'] | null
+  isCameraDragging: () => boolean
+  sceneApi: SceneApi
+  selectNode: (nodeId: AnyNodeId) => void
+  unit: 'metric' | 'imperial'
+}
+
+const RegistryToolContext = createContext<RegistryToolContextValue | null>(null)
+
+export function RegistryToolProvider({
+  children,
+  value,
+}: {
+  children: ReactNode
+  value: RegistryToolContextValue
+}) {
+  return <RegistryToolContext.Provider value={value}>{children}</RegistryToolContext.Provider>
+}
+
+export function useRegistryToolContext(): RegistryToolContextValue {
+  const value = useContext(RegistryToolContext)
+  if (!value) throw new Error('Registry tools must be mounted by ToolManager')
+  return value
+}

package/src/components/tools/select/box-select-tool.tsx

@@ -19,6 +19,7 @@ import {
   isBoxSelectPointerSuppressed,
   markBoxSelectHandled,
 } from './box-select-state'
+import { marqueePolygon } from './marquee-footprint'
 import {
   convexHull2D,
   type Point2,
@@ -223,7 +224,8 @@ function collectNodeIdsInScreenRect(
         | { start?: unknown; end?: unknown; polygon?: unknown }
         | undefined
       if (node) {
-        const { start, end, polygon } = node
+        const { start, end } = node
+        const polygon = marqueePolygon(node)
         if (isVec2(start) && isVec2(end)) {
           if (segmentIntersectsPolygon(start, end, quad)) result.push(id)
           continue

package/src/components/tools/select/marquee-footprint.test.ts

@@ -0,0 +1,53 @@
+import { expect, test } from 'bun:test'
+import { marqueePolygon } from './marquee-footprint'
+import { type Point2, polygonsIntersect } from './marquee-geometry'
+
+const polygon: Point2[] = [
+  [-4, -2],
+  [4, -2],
+  [4, 2],
+  [-4, 2],
+]
+
+test('a translated pool is not selected by a pipe marquee over its untransformed outline', () => {
+  const pool = { polygon, position: [12, 0, 0], rotation: [0, 0, 0] }
+  const pipeMarquee: Point2[] = [
+    [-1, -0.1],
+    [1, -0.1],
+    [1, 0.1],
+    [-1, 0.1],
+  ]
+  expect(polygonsIntersect(polygon, pipeMarquee)).toBe(true)
+  expect(polygonsIntersect(marqueePolygon(pool)!, pipeMarquee)).toBe(false)
+  expect(
+    polygonsIntersect(marqueePolygon(pool)!, [
+      [11, -1],
+      [13, -1],
+      [13, 1],
+      [11, 1],
+    ]),
+  ).toBe(true)
+})
+
+test('pool rotation is applied before its position', () => {
+  const footprint = marqueePolygon({
+    polygon,
+    position: [12, 0, 5],
+    rotation: [0, Math.PI / 2, 0],
+  })!
+  expect(footprint[0]![0]).toBeCloseTo(10)
+  expect(footprint[0]![1]).toBeCloseTo(9)
+  expect(
+    polygonsIntersect(footprint, [
+      [15, 4],
+      [16, 4],
+      [16, 6],
+      [15, 6],
+    ]),
+  ).toBe(false)
+})
+
+test('level-space polygons keep their existing coordinates', () => {
+  expect(marqueePolygon({ polygon })).toBe(polygon)
+  expect(marqueePolygon({ polygon: undefined })).toBeNull()
+})

package/src/components/tools/select/marquee-footprint.ts

@@ -0,0 +1,29 @@
+import { Euler, Vector3 } from 'three'
+import type { Point2 } from './marquee-geometry'
+
+export function marqueePolygon(node: {
+  polygon?: unknown
+  position?: unknown
+  rotation?: unknown
+}): Point2[] | null {
+  const { polygon, position, rotation } = node
+  if (
+    !Array.isArray(polygon) ||
+    polygon.length === 0 ||
+    !polygon.every(
+      (point) => Array.isArray(point) && point.length === 2 && point.every(Number.isFinite),
+    )
+  )
+    return null
+  // Position-based kinds author their footprint locally, unlike slabs and zones.
+  if (!Array.isArray(position) || position.length !== 3 || !position.every(Number.isFinite))
+    return polygon as Point2[]
+  const angles =
+    Array.isArray(rotation) && rotation.length === 3 && rotation.every(Number.isFinite)
+      ? new Euler(rotation[0], rotation[1], rotation[2])
+      : new Euler()
+  return polygon.map(([x, z]) => {
+    const point = new Vector3(x, 0, z).applyEuler(angles)
+    return [point.x + position[0], point.z + position[2]]
+  })
+}

package/src/components/tools/shared/placement-box.tsx

@@ -8,7 +8,11 @@ import { PlaneGeometry } from 'three'
 import { distance, smoothstep, uv, vec2 } from 'three/tsl'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
-import { formatLinearMeasurement, type LinearUnit } from '../../../lib/measurements'
+import {
+  formatLinearMeasurement,
+  type LinearUnit,
+  type MetricNotation,
+} from '../../../lib/measurements'
 import { createLineGeometry, getBoxEdgePoints } from './placement-box-geometry'
 
 const VALID_COLOR = 0x22_c5_5e // green-500
@@ -17,6 +21,7 @@ const MEASUREMENT_COLOR = 0x0f_17_2a
 
 type PlacementBoxMeasurements = {
   unit: LinearUnit
+  metricNotation?: MetricNotation
 }
 
 function getMeasurementGuidePoints(width: number, height: number, depth: number) {
@@ -99,15 +104,24 @@ function getMeasurementGuidePoints(width: number, height: number, depth: number)
 }
 
 function MeasurementPill({
+  active,
   label,
+  onSelect,
   position,
 }: {
+  active?: boolean
   label: string
+  onSelect?: () => void
   position: [number, number, number]
 }) {
   return (
-    <Html center position={position} style={{ pointerEvents: 'none' }}>
-      <div
+    <Html center position={position} style={{ pointerEvents: onSelect ? 'auto' : 'none' }}>
+      <button
+        className={active ? 'ring-1 ring-indigo-200' : undefined}
+        onClick={(event) => {
+          event.stopPropagation()
+          onSelect?.()
+        }}
         style={{
           background: 'rgba(15, 23, 42, 0.86)',
           border: '1px solid rgba(15, 23, 42, 0.65)',
@@ -118,12 +132,13 @@ function MeasurementPill({
           fontWeight: 600,
           lineHeight: 1,
           padding: '4px 8px',
-          pointerEvents: 'none',
+          pointerEvents: onSelect ? 'auto' : 'none',
           whiteSpace: 'nowrap',
         }}
+        type="button"
       >
         {label}
-      </div>
+      </button>
     </Html>
   )
 }
@@ -142,8 +157,12 @@ function MeasurementPill({
  * a shelf — lines up without an extra offset.
  */
 export function PlacementBox({
+  activeDimensionId,
   dimensions,
+  dimensionInput = '',
   measurements,
+  measurementValues,
+  onDimensionSelect,
   position,
   rotationY = 0,
   valid,
@@ -152,14 +171,20 @@ export function PlacementBox({
   dimensions: [number, number, number]
   /** Optional dimension guide labels matching the GLB item placement cursor. */
   measurements?: PlacementBoxMeasurements
+  /** Values represented by the editable dimension pills; defaults to the box dimensions. */
+  measurementValues?: [width: number, height: number, depth: number]
   /** World-plan position of the footprint centre (floor level). */
   position: [number, number, number]
   /** Y-rotation in radians, applied to the whole box. */
   rotationY?: number
   /** Drives the colour: green when placeable, red otherwise. */
   valid: boolean
+  activeDimensionId?: string | null
+  dimensionInput?: string
+  onDimensionSelect?: (id: string) => void
 }) {
   const [width, height, depth] = dimensions
+  const [measurementWidth, measurementHeight, measurementDepth] = measurementValues ?? dimensions
 
   const edgeGeometry = useMemo(
     () =>
@@ -271,15 +296,45 @@ export function PlacementBox({
         renderOrder={998}
       />
       <MeasurementPill
-        label={formatLinearMeasurement(width, measurements.unit)}
+        active={activeDimensionId === 'cabinet-width'}
+        label={
+          activeDimensionId === 'cabinet-width' && dimensionInput
+            ? dimensionInput
+            : formatLinearMeasurement(
+                measurementWidth,
+                measurements.unit,
+                measurements.metricNotation,
+              )
+        }
+        onSelect={onDimensionSelect ? () => onDimensionSelect('cabinet-width') : undefined}
         position={[0, 0.04, depth / 2 + 0.24]}
       />
       <MeasurementPill
-        label={formatLinearMeasurement(depth, measurements.unit)}
+        active={activeDimensionId === 'cabinet-depth'}
+        label={
+          activeDimensionId === 'cabinet-depth' && dimensionInput
+            ? dimensionInput
+            : formatLinearMeasurement(
+                measurementDepth,
+                measurements.unit,
+                measurements.metricNotation,
+              )
+        }
+        onSelect={onDimensionSelect ? () => onDimensionSelect('cabinet-depth') : undefined}
         position={[width / 2 + 0.24, 0.04, 0]}
       />
       <MeasurementPill
-        label={formatLinearMeasurement(height, measurements.unit)}
+        active={activeDimensionId === 'cabinet-height'}
+        label={
+          activeDimensionId === 'cabinet-height' && dimensionInput
+            ? dimensionInput
+            : formatLinearMeasurement(
+                measurementHeight,
+                measurements.unit,
+                measurements.metricNotation,
+              )
+        }
+        onSelect={onDimensionSelect ? () => onDimensionSelect('cabinet-height') : undefined}
         position={[-width / 2 - 0.24, height / 2, -depth / 2]}
       />
     </>

package/src/components/tools/shared/placement-dimension-guides.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { useLayoutEffect, useMemo } from 'react'
+import { BufferGeometry, Float32BufferAttribute, Line as ThreeLine } from 'three'
+import { LineBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../../lib/constants'
+import type { PlacementPreviewDimension } from '../../../store/use-placement-preview'
+import usePlacementPreview from '../../../store/use-placement-preview'
+import { formatMeasurement } from '../../editor/measurement-pill'
+
+const DIMENSION_COLOR = 0x63_66_f1
+const dimensionMaterial = new LineBasicNodeMaterial({
+  color: DIMENSION_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+})
+
+export function PlacementDimensionGuides() {
+  const dimensions = usePlacementPreview((state) => state.dimensions)
+  const activeDimensionId = usePlacementPreview((state) => state.activeDimensionId)
+  const dimensionInput = usePlacementPreview((state) => state.dimensionInput)
+  const unit = useViewer((state) => state.unit)
+  const metricNotation = useViewer((state) => state.metricNotation)
+  if (dimensions.length === 0) return null
+
+  return (
+    <>
+      {dimensions
+        .filter((dimension) => dimension.renderIn3d !== false)
+        .map((dimension) => (
+          <PlacementDimensionGuide
+            dimension={dimension}
+            dimensionInput={dimension.id === activeDimensionId ? dimensionInput : null}
+            key={dimension.id}
+            metricNotation={metricNotation}
+            unit={unit}
+          />
+        ))}
+    </>
+  )
+}
+
+function PlacementDimensionGuide({
+  dimension,
+  dimensionInput,
+  metricNotation,
+  unit,
+}: {
+  dimension: PlacementPreviewDimension
+  dimensionInput: string | null
+  metricNotation: 'meters' | 'millimeters'
+  unit: 'metric' | 'imperial'
+}) {
+  const { line, position } = useMemo(() => {
+    const position = new Float32BufferAttribute(new Float32Array(6), 3)
+    const geometry = new BufferGeometry()
+    geometry.setAttribute('position', position)
+    const line = new ThreeLine(geometry, dimensionMaterial)
+    line.frustumCulled = false
+    line.layers.set(EDITOR_LAYER)
+    line.renderOrder = 1000
+    return { line, position }
+  }, [])
+
+  const start = useMemo(
+    () =>
+      [
+        dimension.start[0] + dimension.offsetNormal[0] * dimension.offsetDistance,
+        dimension.start[1],
+        dimension.start[2] + dimension.offsetNormal[1] * dimension.offsetDistance,
+      ] as [number, number, number],
+    [dimension.offsetDistance, dimension.offsetNormal, dimension.start],
+  )
+  const end = useMemo(
+    () =>
+      [
+        dimension.end[0] + dimension.offsetNormal[0] * dimension.offsetDistance,
+        dimension.end[1],
+        dimension.end[2] + dimension.offsetNormal[1] * dimension.offsetDistance,
+      ] as [number, number, number],
+    [dimension.end, dimension.offsetDistance, dimension.offsetNormal],
+  )
+  useLayoutEffect(() => {
+    position.setXYZ(0, ...start)
+    position.setXYZ(1, ...end)
+    position.needsUpdate = true
+  }, [end, position, start])
+
+  useLayoutEffect(() => () => line.geometry.dispose(), [line])
+  return (
+    <>
+      <primitive object={line} />
+      <Html
+        center
+        position={[
+          (start[0] + end[0]) / 2,
+          (start[1] + end[1]) / 2 + 0.015,
+          (start[2] + end[2]) / 2,
+        ]}
+        style={{ pointerEvents: 'auto', userSelect: 'none' }}
+        zIndexRange={[100, 0]}
+      >
+        <div
+          className={`rounded-[3px] px-1.5 py-0.5 font-mono text-[10px] font-semibold text-white shadow-sm ${
+            dimensionInput !== null ? 'bg-indigo-700 ring-1 ring-indigo-200' : 'bg-indigo-500/90'
+          }`}
+          onClick={(event) => {
+            event.stopPropagation()
+            usePlacementPreview.getState().selectDimension(dimension.id)
+          }}
+          style={{ cursor: 'text', pointerEvents: 'auto' }}
+        >
+          {dimensionInput || formatMeasurement(dimension.value, unit, metricNotation)}
+        </div>
+      </Html>
+    </>
+  )
+}