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

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}
+    </>
+  )
+}

package/src/components/ui/panels/multi-parametric-inspector.tsx

@@ -0,0 +1,263 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  nodeRegistry,
+  type ParamField,
+  type ParametricDescriptor,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback, useMemo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { selectionMatchesSessionGroup } from '../../../lib/session-groups'
+import useSessionGroups from '../../../store/use-session-groups'
+import { PanelSection } from '../controls/panel-section'
+import { SliderControl } from '../controls/slider-control'
+import { resolveUniqueSelectionIds } from './homogeneous-selection'
+import {
+  commitMultiNodeFields,
+  fieldVisibleForAll,
+  firstNumericFieldValue,
+  firstVec3FieldValue,
+  previewMultiNodeFields,
+  reduceFieldValue,
+} from './multi-field-value'
+import { MultiHeightModeField } from './multi-height-mode'
+import { MultiSelectionActions } from './multi-selection-panel'
+import { getTypeDisplay } from './node-display'
+import { ParametricFieldControl } from './parametric-field-control'
+import { PanelWrapper } from './panel-wrapper'
+import { formatSelectionBreakdown } from './selection-breakdown'
+
+export function MultiParametricInspector({ footer }: { footer?: React.ReactNode }) {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const setSelection = useViewer((s) => s.setSelection)
+  const nodeIds = useScene(
+    useShallow((s) => resolveUniqueSelectionIds(selectedIds, s.nodes)),
+  )
+  const nodeType = useScene((s) => {
+    const first = nodeIds[0] ? s.nodes[nodeIds[0]] : undefined
+    return first?.type ?? null
+  })
+  const breakdown = useScene((s) =>
+    formatSelectionBreakdown(nodeIds.map((id) => s.nodes[id]?.type)),
+  )
+  const sessionGroups = useSessionGroups((s) => s.groups)
+  const matchedGroup = useMemo(
+    () => selectionMatchesSessionGroup(sessionGroups, selectedIds),
+    [sessionGroups, selectedIds],
+  )
+
+  const def = nodeType ? nodeRegistry.get(nodeType) : undefined
+  const parametrics = def?.parametrics as ParametricDescriptor<AnyNode> | undefined
+
+  const handleClose = useCallback(() => {
+    setSelection({ selectedIds: [] })
+  }, [setSelection])
+
+  if (nodeIds.length < 2 || !nodeType || !parametrics) return null
+
+  const display = getTypeDisplay(nodeType)
+  const title = matchedGroup ? `${matchedGroup.label} · ${breakdown}` : breakdown || display.label
+
+  return (
+    <PanelWrapper footer={footer} icon={display.icon} onClose={handleClose} title={title} width={320}>
+      {matchedGroup && (
+        <div className="border-border/50 border-b px-3 py-2 text-muted-foreground text-xs">
+          {matchedGroup.label} (session only). Plain click reselects all members. Not saved with the
+          project.
+        </div>
+      )}
+      {parametrics.groups.map((group, gi) => (
+        <MultiGroupFields
+          fields={group.fields as ParamField<AnyNode>[]}
+          key={`group-${gi}`}
+          nodeIds={nodeIds}
+          nodeType={nodeType}
+          parametrics={parametrics}
+          title={group.label}
+        />
+      ))}
+      <div className="border-border/50 border-t p-3">
+        <MultiSelectionActions />
+      </div>
+    </PanelWrapper>
+  )
+}
+
+function MultiGroupFields({
+  title,
+  fields,
+  nodeIds,
+  nodeType,
+  parametrics,
+}: {
+  title: string
+  fields: ParamField<AnyNode>[]
+  nodeIds: AnyNodeId[]
+  nodeType: AnyNode['type']
+  parametrics: ParametricDescriptor<AnyNode>
+}) {
+  const genericFields = fields.filter((field) => field.kind !== 'custom')
+  const anyVisible = useScene((s) =>
+    genericFields.some((field) =>
+      fieldVisibleForAll(nodeIds, (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf, s.nodes),
+    ),
+  )
+  if (genericFields.length === 0 || !anyVisible) return null
+  return (
+    <PanelSection title={title}>
+      {genericFields.map((field, fi) => {
+        if (
+          String(field.key) === 'height' &&
+          (nodeType === 'wall' || nodeType === 'ceiling') &&
+          field.kind === 'number'
+        ) {
+          return (
+            <MultiHeightModeField
+              key={`field-${fi}-height-mode`}
+              max={field.max}
+              min={field.min}
+              nodeIds={nodeIds}
+              nodeType={nodeType}
+              parametrics={parametrics}
+              step={field.step}
+            />
+          )
+        }
+        return (
+          <MultiFieldRenderer
+            field={field}
+            key={`field-${fi}-${String(field.key)}`}
+            nodeIds={nodeIds}
+            parametrics={parametrics}
+          />
+        )
+      })}
+    </PanelSection>
+  )
+}
+
+function MultiFieldRenderer({
+  field,
+  nodeIds,
+  parametrics,
+}: {
+  field: ParamField<AnyNode>
+  nodeIds: AnyNodeId[]
+  parametrics: ParametricDescriptor<AnyNode>
+}) {
+  const key = String(field.key)
+  const visible = useScene((s) =>
+    fieldVisibleForAll(nodeIds, (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf, s.nodes),
+  )
+  const reduced = useScene(useShallow((s) => reduceFieldValue(nodeIds, key, s.nodes)))
+  const numericOrigin = useScene((s) => firstNumericFieldValue(nodeIds, key, s.nodes))
+  const vecOrigin = useScene(useShallow((s) => firstVec3FieldValue(nodeIds, key, s.nodes)))
+
+  const preview = useCallback(
+    (patch: Partial<AnyNode>) => {
+      previewMultiNodeFields(nodeIds.map((id) => [id, patch] as const))
+    },
+    [nodeIds],
+  )
+  const commit = useCallback(
+    (patch: Partial<AnyNode>) => {
+      commitMultiNodeFields(nodeIds, () => patch, parametrics)
+    },
+    [nodeIds, parametrics],
+  )
+
+  if (!visible) return null
+
+  if (field.kind === 'vec3') {
+    return (
+      <MultiVec3Field
+        fieldKey={key}
+        mixed={reduced.kind === 'mixed'}
+        nodeIds={nodeIds}
+        origin={vecOrigin}
+        parametrics={parametrics}
+        value={reduced.kind === 'same' && Array.isArray(reduced.value) ? (reduced.value as [number, number, number]) : vecOrigin}
+      />
+    )
+  }
+
+  const value =
+    reduced.kind === 'same' ? reduced.value : field.kind === 'number' ? numericOrigin : undefined
+
+  return (
+    <ParametricFieldControl
+      field={field}
+      mixed={reduced.kind === 'mixed'}
+      onChange={field.kind === 'number' ? preview : commit}
+      onCommit={field.kind === 'number' ? commit : undefined}
+      value={value}
+    />
+  )
+}
+
+function MultiVec3Field({
+  fieldKey,
+  mixed,
+  nodeIds,
+  origin,
+  parametrics,
+  value,
+}: {
+  fieldKey: string
+  mixed: boolean
+  nodeIds: AnyNodeId[]
+  origin: [number, number, number]
+  parametrics: ParametricDescriptor<AnyNode>
+  value: [number, number, number]
+}) {
+  const axes: Array<{ label: string; index: 0 | 1 | 2 }> = [
+    { label: 'X', index: 0 },
+    { label: 'Y', index: 1 },
+    { label: 'Z', index: 2 },
+  ]
+  return (
+    <>
+      {axes.map(({ label, index }) => {
+        const axisValue = value[index] ?? origin[index] ?? 0
+        const patchAxis = (next: number): Array<readonly [AnyNodeId, Partial<AnyNode>]> => {
+          const nodes = useScene.getState().nodes
+          return nodeIds.flatMap((id) => {
+            const node = nodes[id]
+            if (!node) return []
+            const current = (node as Record<string, unknown>)[fieldKey]
+            const nextVec = (
+              Array.isArray(current) && current.length >= 3 ? [...current] : [...origin]
+            ) as [number, number, number]
+            nextVec[index] = next
+            return [[id, { [fieldKey]: nextVec } as Partial<AnyNode>] as const]
+          })
+        }
+        return (
+          <SliderControl
+            key={`${fieldKey}-${label}`}
+            label={label}
+            mixed={mixed}
+            onChange={(next) => previewMultiNodeFields(patchAxis(next))}
+            onCommit={(next) => {
+              const entries = patchAxis(next)
+              commitMultiNodeFields(
+                nodeIds,
+                (node) => entries.find(([id]) => id === node.id)?.[1] ?? {},
+                parametrics,
+              )
+            }}
+            precision={2}
+            restoreOnCommit={false}
+            step={0.05}
+            unit="m"
+            value={Math.round(axisValue * 100) / 100}
+          />
+        )
+      })}
+    </>
+  )
+}