@pascal-app/editor 1.0.0-beta.5 → 1.0.1

package/src/components/ui/panels/homogeneous-selection.ts

@@ -0,0 +1,47 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  resolveSelectionProxyId,
+} from '@pascal-app/core'
+
+/**
+ * Resolve selection proxies and drop duplicates / missing ids. Session groups
+ * are just selections — mixed-type groups stay mixed after this pass, and a
+ * pair of children that both proxy to the same parent collapse to one id.
+ */
+export function resolveUniqueSelectionIds(
+  ids: readonly string[],
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): AnyNodeId[] {
+  const resolved: AnyNodeId[] = []
+  const seen = new Set<string>()
+  for (const id of ids) {
+    const node = nodes[id]
+    if (!node) continue
+    const resolvedId = resolveSelectionProxyId(node, nodes)
+    if (seen.has(resolvedId)) continue
+    seen.add(resolvedId)
+    resolved.push(resolvedId)
+  }
+  return resolved
+}
+
+/**
+ * Shared type when every resolved id is the same kind and at least two nodes
+ * remain. Otherwise null — including mixed session groups and proxy-collapsed
+ * selections that shrink below two distinct nodes.
+ */
+export function resolveHomogeneousSelection(
+  ids: readonly string[],
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): AnyNode['type'] | null {
+  const resolvedIds = resolveUniqueSelectionIds(ids, nodes)
+  if (resolvedIds.length < 2) return null
+  const first = nodes[resolvedIds[0] ?? '']
+  if (!first) return null
+  for (let i = 1; i < resolvedIds.length; i++) {
+    const node = nodes[resolvedIds[i] ?? '']
+    if (!node || node.type !== first.type) return null
+  }
+  return first.type
+}

package/src/components/ui/panels/mobile-selection-bar.tsx

@@ -8,7 +8,9 @@ import { cn } from '../../../lib/utils'
 import { getNodeDisplay } from './node-display'
 
 interface MobileSelectionBarProps {
-  node: AnyNode
+  node: AnyNode | null
+  label?: string
+  icon?: string
   onMove: () => void
   onDuplicate: () => void
   onDelete: () => void
@@ -20,19 +22,23 @@ const ACTION_BTN =
 
 export function MobileSelectionBar({
   node,
+  label,
+  icon,
   onMove,
   onDuplicate,
   onDelete,
   onEdit,
 }: MobileSelectionBarProps) {
-  const { icon, label } = getNodeDisplay(node)
+  const display = getNodeDisplay(node)
+  const resolvedLabel = label ?? display.label
+  const resolvedIcon = icon ?? display.icon
 
   const stop: MouseEventHandler<HTMLButtonElement> = (e) => e.stopPropagation()
 
   return (
     <div className="pointer-events-auto absolute right-3 bottom-6 left-3 z-50 flex h-12 items-stretch gap-1 rounded-2xl border border-border/50 bg-background/95 px-2 shadow-2xl backdrop-blur-xl">
       <button
-        aria-label={`Edit ${label}`}
+        aria-label={`Edit ${resolvedLabel}`}
         className={cn(
           'flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 text-left transition-colors hover:bg-white/8',
         )}
@@ -43,10 +49,10 @@ export function MobileSelectionBar({
           alt=""
           className="shrink-0 rounded object-contain"
           height={20}
-          src={icon}
+          src={resolvedIcon}
           width={20}
         />
-        <span className="truncate font-medium text-foreground text-sm">{label}</span>
+        <span className="truncate font-medium text-foreground text-sm">{resolvedLabel}</span>
       </button>
 
       <div className="flex items-center gap-0.5 border-border/40 border-l pl-1">

package/src/components/ui/panels/multi-field-value.test.ts

@@ -0,0 +1,209 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  BuildingNode,
+  clearSceneHistory,
+  LevelNode,
+  useLiveNodeOverrides,
+  useScene,
+  WallNode,
+} from '@pascal-app/core'
+import {
+  buildMultiNodePatches,
+  commitMultiNodeFields,
+  fieldVisibleForAll,
+  reduceFieldValue,
+  reduceHeightBoundMode,
+} from './multi-field-value'
+
+type RafFn = (cb: (time: number) => void) => number
+;(globalThis as unknown as { requestAnimationFrame?: RafFn }).requestAnimationFrame ??= (cb) => {
+  cb(0)
+  return 0
+}
+;(globalThis as unknown as { cancelAnimationFrame?: (id: number) => void }).cancelAnimationFrame ??=
+  () => {}
+
+const BUILDING_ID = 'building_multi_edit' as AnyNodeId
+const LEVEL_ID = 'level_multi_edit' as AnyNodeId
+const WALL_A = 'wall_multi_a' as AnyNodeId
+const WALL_B = 'wall_multi_b' as AnyNodeId
+const WALL_C = 'wall_multi_c' as AnyNodeId
+
+function makeNode(id: string, type: string, fields: Record<string, unknown> = {}): AnyNode {
+  return {
+    object: 'node',
+    id: id as AnyNodeId,
+    type,
+    parentId: null,
+    visible: true,
+    metadata: {},
+    children: [],
+    ...fields,
+  } as unknown as AnyNode
+}
+
+describe('reduceFieldValue', () => {
+  test('same values collapse to one', () => {
+    const nodes = {
+      a: makeNode('a', 'wall', { height: 2.4, thickness: 0.2 }),
+      b: makeNode('b', 'wall', { height: 2.4, thickness: 0.15 }),
+    }
+    expect(reduceFieldValue(['a', 'b'], 'height', nodes)).toEqual({ kind: 'same', value: 2.4 })
+    expect(reduceFieldValue(['a', 'b'], 'thickness', nodes)).toEqual({ kind: 'mixed' })
+  })
+
+  test('vec3 compares elementwise', () => {
+    const nodes = {
+      a: makeNode('a', 'item', { position: [1, 0, 2] }),
+      b: makeNode('b', 'item', { position: [1, 0, 2] }),
+      c: makeNode('c', 'item', { position: [1, 0, 3] }),
+    }
+    expect(reduceFieldValue(['a', 'b'], 'position', nodes)).toEqual({
+      kind: 'same',
+      value: [1, 0, 2],
+    })
+    expect(reduceFieldValue(['a', 'c'], 'position', nodes)).toEqual({ kind: 'mixed' })
+  })
+})
+
+describe('reduceHeightBoundMode', () => {
+  test('absent height is follows-level, present height is custom', () => {
+    const nodes = {
+      a: makeNode('a', 'wall'),
+      b: makeNode('b', 'wall'),
+      c: makeNode('c', 'wall', { height: 3 }),
+    }
+    expect(reduceHeightBoundMode(['a', 'b'], nodes)).toEqual({ kind: 'same', value: 'storey' })
+    expect(reduceHeightBoundMode(['c'], nodes)).toEqual({ kind: 'same', value: 'custom' })
+    expect(reduceHeightBoundMode(['a', 'c'], nodes)).toEqual({ kind: 'mixed' })
+  })
+})
+
+describe('fieldVisibleForAll', () => {
+  test('hides when any node would hide the field', () => {
+    const nodes = {
+      a: makeNode('a', 'slab', { recessed: false }),
+      b: makeNode('b', 'slab', { recessed: true }),
+    }
+    const visibleIf = (n: AnyNode) => !(n as { recessed?: boolean }).recessed
+    expect(fieldVisibleForAll(['a'], visibleIf, nodes)).toBe(true)
+    expect(fieldVisibleForAll(['a', 'b'], visibleIf, nodes)).toBe(false)
+  })
+})
+
+describe('buildMultiNodePatches', () => {
+  test('a mixed field that is never edited produces no patch for it', () => {
+    const nodes = {
+      a: makeNode('a', 'wall', { height: 2.4, thickness: 0.2 }),
+      b: makeNode('b', 'wall', { height: 3, thickness: 0.15 }),
+    }
+    const patches = buildMultiNodePatches(
+      ['a' as AnyNodeId, 'b' as AnyNodeId],
+      () => ({ thickness: 0.3 }),
+      nodes,
+    )
+    expect(patches).toEqual([
+      { id: 'a' as AnyNodeId, data: { thickness: 0.3 } },
+      { id: 'b' as AnyNodeId, data: { thickness: 0.3 } },
+    ])
+    for (const patch of patches) {
+      expect(patch.data).not.toHaveProperty('height')
+    }
+  })
+
+  test('derive and reconcile fan out per node into one batch', () => {
+    const nodes = {
+      a: makeNode('a', 'wall', { height: 2 }),
+      b: makeNode('b', 'wall', { height: 2 }),
+    }
+    const patches = buildMultiNodePatches(
+      ['a' as AnyNodeId, 'b' as AnyNodeId],
+      () => ({ height: 4 }),
+      nodes,
+      {
+        derive: (next) => ({ thickness: (next as { height: number }).height / 10 }),
+        reconcile: (prev) => [
+          { id: `${prev.id}_follow` as AnyNodeId, data: { height: 4 } },
+        ],
+      },
+    )
+    expect(patches).toEqual([
+      { id: 'a' as AnyNodeId, data: { height: 4, thickness: 0.4 } },
+      { id: 'b' as AnyNodeId, data: { height: 4, thickness: 0.4 } },
+      { id: 'a_follow' as AnyNodeId, data: { height: 4 } },
+      { id: 'b_follow' as AnyNodeId, data: { height: 4 } },
+    ])
+  })
+})
+
+describe('commitMultiNodeFields', () => {
+  beforeEach(() => {
+    const wallA = WallNode.parse({
+      id: WALL_A,
+      parentId: LEVEL_ID,
+      start: [0, 0],
+      end: [4, 0],
+      height: 2.4,
+    })
+    const wallB = WallNode.parse({
+      id: WALL_B,
+      parentId: LEVEL_ID,
+      start: [4, 0],
+      end: [4, 3],
+      height: 3,
+    })
+    const wallC = WallNode.parse({
+      id: WALL_C,
+      parentId: LEVEL_ID,
+      start: [4, 3],
+      end: [0, 3],
+      height: 2.7,
+    })
+    const level = LevelNode.parse({
+      id: LEVEL_ID,
+      parentId: BUILDING_ID,
+      children: [WALL_A, WALL_B, WALL_C],
+      level: 0,
+    })
+    const building = BuildingNode.parse({
+      id: BUILDING_ID,
+      parentId: null,
+      children: [LEVEL_ID],
+    })
+    useScene.setState({
+      nodes: {
+        [BUILDING_ID]: building,
+        [LEVEL_ID]: level,
+        [WALL_A]: wallA,
+        [WALL_B]: wallB,
+        [WALL_C]: wallC,
+      },
+      rootNodeIds: [BUILDING_ID],
+      dirtyNodes: new Set<AnyNodeId>(),
+      collections: {},
+      materials: {},
+      readOnly: false,
+    } as never)
+    clearSceneHistory()
+    useLiveNodeOverrides.getState().clearAll()
+  })
+
+  afterEach(() => {
+    useLiveNodeOverrides.getState().clearAll()
+  })
+
+  test('dragging height onto three walls is one undo step', () => {
+    commitMultiNodeFields([WALL_A, WALL_B, WALL_C], () => ({ height: 4 }))
+    expect((useScene.getState().nodes[WALL_A] as { height?: number }).height).toBe(4)
+    expect((useScene.getState().nodes[WALL_B] as { height?: number }).height).toBe(4)
+    expect((useScene.getState().nodes[WALL_C] as { height?: number }).height).toBe(4)
+    expect(useScene.temporal.getState().pastStates).toHaveLength(1)
+
+    useScene.temporal.getState().undo()
+    expect((useScene.getState().nodes[WALL_A] as { height?: number }).height).toBe(2.4)
+    expect((useScene.getState().nodes[WALL_B] as { height?: number }).height).toBe(3)
+    expect((useScene.getState().nodes[WALL_C] as { height?: number }).height).toBe(2.7)
+  })
+})

package/src/components/ui/panels/multi-field-value.ts

@@ -0,0 +1,163 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type ParametricDescriptor,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
+
+export type ReducedFieldValue<T = unknown> =
+  | { kind: 'same'; value: T }
+  | { kind: 'mixed' }
+
+const MIXED: { kind: 'mixed' } = { kind: 'mixed' }
+
+function fieldValuesEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true
+  if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+    return a.every((value, i) => Object.is(value, b[i]))
+  }
+  return false
+}
+
+export function reduceFieldValue(
+  nodeIds: readonly string[],
+  key: string,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): ReducedFieldValue {
+  let seen = false
+  let shared: unknown
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    if (!node) continue
+    const value = (node as Record<string, unknown>)[key]
+    if (!seen) {
+      seen = true
+      shared = value
+      continue
+    }
+    if (!fieldValuesEqual(shared, value)) return MIXED
+  }
+  if (!seen) return MIXED
+  return { kind: 'same', value: shared }
+}
+
+export type HeightBoundMode = 'storey' | 'custom'
+
+export function reduceHeightBoundMode(
+  nodeIds: readonly string[],
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): ReducedFieldValue<HeightBoundMode> {
+  let seen = false
+  let shared: HeightBoundMode | undefined
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    if (!node) continue
+    const mode: HeightBoundMode = (node as { height?: number }).height == null ? 'storey' : 'custom'
+    if (!seen) {
+      seen = true
+      shared = mode
+      continue
+    }
+    if (mode !== shared) return MIXED
+  }
+  if (!seen || !shared) return MIXED
+  return { kind: 'same', value: shared }
+}
+
+export function fieldVisibleForAll(
+  nodeIds: readonly string[],
+  visibleIf: ((node: AnyNode) => boolean) | undefined,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): boolean {
+  if (!visibleIf) return true
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    if (!node || !visibleIf(node)) return false
+  }
+  return true
+}
+
+export function firstNumericFieldValue(
+  nodeIds: readonly string[],
+  key: string,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+  fallback = 0,
+): number {
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    const value = node ? (node as Record<string, unknown>)[key] : undefined
+    if (typeof value === 'number' && Number.isFinite(value)) return value
+  }
+  return fallback
+}
+
+export function firstVec3FieldValue(
+  nodeIds: readonly string[],
+  key: string,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): [number, number, number] {
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    const value = node ? (node as Record<string, unknown>)[key] : undefined
+    if (Array.isArray(value) && value.length >= 3) {
+      return [Number(value[0]) || 0, Number(value[1]) || 0, Number(value[2]) || 0]
+    }
+  }
+  return [0, 0, 0]
+}
+
+export function buildMultiNodePatches(
+  nodeIds: readonly AnyNodeId[],
+  patchFor: (node: AnyNode) => Partial<AnyNode>,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+  parametrics?: Pick<ParametricDescriptor<AnyNode>, 'derive' | 'reconcile'>,
+): Array<{ id: AnyNodeId; data: Partial<AnyNode> }> {
+  const updates: Array<{ id: AnyNodeId; data: Partial<AnyNode> }> = []
+  const followUps: Array<{ id: AnyNodeId; data: Partial<AnyNode> }> = []
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    if (!node) continue
+    let patch = patchFor(node)
+    if (Object.keys(patch).length === 0) continue
+    if (parametrics?.derive) {
+      const next = { ...node, ...patch } as AnyNode
+      patch = { ...patch, ...parametrics.derive(next, patch, node) } as Partial<AnyNode>
+    }
+    updates.push({ id, data: patch })
+    if (parametrics?.reconcile) {
+      const next = { ...node, ...patch } as AnyNode
+      followUps.push(...parametrics.reconcile(node, next))
+    }
+  }
+  return [...updates, ...followUps]
+}
+
+export function previewMultiNodeFields(
+  entries: ReadonlyArray<readonly [AnyNodeId, Partial<AnyNode>]>,
+): void {
+  if (entries.length === 0) return
+  useLiveNodeOverrides.getState().setMany(entries)
+  const scene = useScene.getState()
+  for (const [id] of entries) scene.markDirty(id)
+}
+
+export function commitMultiNodeFields(
+  nodeIds: readonly AnyNodeId[],
+  patchFor: (node: AnyNode) => Partial<AnyNode>,
+  parametrics?: Pick<ParametricDescriptor<AnyNode>, 'derive' | 'reconcile'>,
+): void {
+  const scene = useScene.getState()
+  const patches = buildMultiNodePatches(nodeIds, patchFor, scene.nodes, parametrics)
+  const keys = new Set<string>()
+  for (const patch of patches) {
+    for (const key of Object.keys(patch.data)) keys.add(key)
+  }
+  const live = useLiveNodeOverrides.getState()
+  const keyList = [...keys]
+  for (const id of nodeIds) {
+    if (keyList.length > 0) live.clearFields(id, keyList)
+    scene.markDirty(id)
+  }
+  if (patches.length > 0) scene.updateNodes(patches)
+}

package/src/components/ui/panels/multi-height-mode.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type CeilingNode,
+  type ParametricDescriptor,
+  GROUND_SUPPORT_ID,
+  getCeilingClampBound,
+  getWallEffectiveHeightForNodes,
+  resolveCeilingHeight,
+  terrainSupportLift,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { formatLinearMeasurement } from '../../../lib/measurements'
+import { SegmentedControl } from '../controls/segmented-control'
+import { SliderControl } from '../controls/slider-control'
+import {
+  commitMultiNodeFields,
+  firstNumericFieldValue,
+  previewMultiNodeFields,
+  reduceFieldValue,
+  reduceHeightBoundMode,
+} from './multi-field-value'
+import { precisionForStep } from './parametric-field-utils'
+
+function wallFollowsLevelPatch(wall: WallNode, nodes: Record<string, AnyNode>): Partial<WallNode> {
+  const terrainSupported =
+    wall.parentId != null &&
+    terrainSupportLift(nodes, wall.parentId, wall.start[0], wall.start[1]) != null
+  return {
+    height: undefined,
+    supportOffset: undefined,
+    ...(wall.supportSlabId === GROUND_SUPPORT_ID && !terrainSupported
+      ? { supportSlabId: undefined }
+      : {}),
+  }
+}
+
+function effectiveHeight(node: AnyNode, nodes: Record<string, AnyNode>): number {
+  if (node.type === 'wall') return getWallEffectiveHeightForNodes(node, nodes)
+  if (node.type === 'ceiling') return resolveCeilingHeight(node, nodes)
+  const height = (node as { height?: number }).height
+  return typeof height === 'number' ? height : 0
+}
+
+function ceilingCustomHeight(node: CeilingNode, nodes: Record<string, AnyNode>): number {
+  const resolved = resolveCeilingHeight(node, nodes)
+  const parent = node.parentId ? nodes[node.parentId] : undefined
+  const max =
+    parent?.type === 'level'
+      ? getCeilingClampBound(parent.id, nodes as Record<AnyNodeId, AnyNode>, node.polygon ?? [])
+      : Number.POSITIVE_INFINITY
+  return Math.min(resolved, max)
+}
+
+export function MultiHeightModeField({
+  nodeIds,
+  nodeType,
+  parametrics,
+  min = 1.5,
+  max = 20,
+  step = 0.05,
+}: {
+  nodeIds: AnyNodeId[]
+  nodeType: 'wall' | 'ceiling'
+  parametrics: ParametricDescriptor<AnyNode>
+  min?: number
+  max?: number
+  step?: number
+}) {
+  const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
+  const mode = useScene(useShallow((s) => reduceHeightBoundMode(nodeIds, s.nodes)))
+  const storedHeight = useScene(useShallow((s) => reduceFieldValue(nodeIds, 'height', s.nodes)))
+  const heightOrigin = useScene((s) => firstNumericFieldValue(nodeIds, 'height', s.nodes, min))
+  const liveHeight = useScene((s) => {
+    let seen = false
+    let shared: number | undefined
+    for (const id of nodeIds) {
+      const node = s.nodes[id]
+      if (!node) continue
+      const height = effectiveHeight(node, s.nodes as Record<string, AnyNode>)
+      if (!seen) {
+        seen = true
+        shared = height
+        continue
+      }
+      if (!Object.is(shared, height)) return Number.NaN
+    }
+    return seen && shared !== undefined ? shared : Number.NaN
+  })
+
+  const applyMode = useCallback(
+    (next: 'storey' | 'custom') => {
+      const nodes = useScene.getState().nodes as Record<string, AnyNode>
+      commitMultiNodeFields(
+        nodeIds,
+        (node) => {
+          const isCustom = (node as { height?: number }).height != null
+          if (next === 'custom') {
+            if (isCustom) return {}
+            if (node.type === 'ceiling') {
+              return { height: ceilingCustomHeight(node, nodes) }
+            }
+            if (node.type === 'wall') {
+              return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes)) }
+            }
+            return {}
+          }
+          if (!isCustom) return {}
+          if (node.type === 'wall') return wallFollowsLevelPatch(node, nodes)
+          return { height: undefined }
+        },
+        parametrics,
+      )
+    },
+    [nodeIds, parametrics],
+  )
+
+  const previewHeight = useCallback(
+    (height: number) => {
+      previewMultiNodeFields(nodeIds.map((id) => [id, { height }] as const))
+    },
+    [nodeIds],
+  )
+  const commitHeight = useCallback(
+    (height: number) => {
+      commitMultiNodeFields(nodeIds, () => ({ height }), parametrics)
+    },
+    [nodeIds, parametrics],
+  )
+
+  const mixedMode = mode.kind === 'mixed'
+  const isFollows = mode.kind === 'same' && mode.value === 'storey'
+  const isCustom = mode.kind === 'same' && mode.value === 'custom'
+  const sliderValue =
+    storedHeight.kind === 'same' && typeof storedHeight.value === 'number'
+      ? storedHeight.value
+      : heightOrigin
+  const sliderMixed = storedHeight.kind === 'mixed' || mixedMode
+  const currentLabel = Number.isFinite(liveHeight)
+    ? formatLinearMeasurement(liveHeight, unit, metricNotation)
+    : 'Mixed'
+
+  return (
+    <>
+      {nodeType === 'wall' && (
+        <div className="px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+          Top
+        </div>
+      )}
+      <SegmentedControl
+        mixed={mixedMode}
+        onChange={applyMode}
+        options={[
+          { label: 'Follows level', value: 'storey' },
+          { label: 'Custom height', value: 'custom' },
+        ]}
+        value={mode.kind === 'same' ? mode.value : 'storey'}
+      />
+      {isFollows ? (
+        <div className="px-1 text-[11px] text-muted-foreground">Currently {currentLabel}</div>
+      ) : isCustom ? (
+        <SliderControl
+          label="Height"
+          max={max}
+          min={min}
+          mixed={sliderMixed}
+          onChange={previewHeight}
+          onCommit={commitHeight}
+          precision={precisionForStep(step)}
+          restoreOnCommit={false}
+          step={step}
+          unit="m"
+          value={sliderValue}
+        />
+      ) : null}
+    </>
+  )
+}