From 282cb22585a8cbf0f51782b62c01c2638708fb08 Mon Sep 17 00:00:00 2001 From: Wassim SAMAD Date: Mon, 18 May 2026 10:27:40 -0400 Subject: [PATCH] parametrics: add `custom` field kind + restore fence Length / Curve MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User noticed the auto-derived fence inspector was missing the legacy panel's Length + Curve sliders, and the section labelling was wrong (Posts → Structure). Both Length and Curve are awkward for the parametrics field model: - **Length** doesn't map to a single node key — it's derived from `start`/`end`, and editing it moves `end` along the existing direction. - **Curve** maps to `curveOffset` but the slider's min/max are bounded per-node by the chord length, plus updates need `normalizeWallCurveOffset`. Adds a `kind: 'custom'` field with a kind-supplied `component: ComponentType<{ node, onUpdate }>`. The inspector mounts it and lets the kind own rendering + update logic. `key` becomes a free-form React key/label since it no longer needs to map to a node property. Fence parametrics now mirrors the legacy layout 1:1: - Style (segmented controls + showInfill toggle). - Dimensions (Length, Curve, Height, Thickness). - Structure (Base Height, Top Rail, Post Spacing, Post Size, Ground Clear, Edge Inset). Length + Curve live in fence/inspector-editors.tsx. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/core/src/registry/types.ts | 11 +++ .../ui/panels/parametric-inspector.tsx | 23 +++++ .../nodes/src/fence/inspector-editors.tsx | 86 +++++++++++++++++++ packages/nodes/src/fence/parametrics.ts | 53 +++++++----- 4 files changed, 150 insertions(+), 23 deletions(-) create mode 100644 packages/nodes/src/fence/inspector-editors.tsx diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts index 90623c22..5dd582da 100644 --- a/packages/core/src/registry/types.ts +++ b/packages/core/src/registry/types.ts @@ -385,6 +385,17 @@ export type ParamField = | { key: keyof N; kind: 'color'; visibleIf?: (n: N) => boolean } | { key: keyof N; kind: 'material'; visibleIf?: (n: N) => boolean } | { key: keyof N; kind: 'ref'; refKind: string; visibleIf?: (n: N) => boolean } + /** Escape hatch for fields that don't map to a single node key — + * derived values (`length` from `start`/`end`), sliders with + * dynamic min/max (curve sagitta bounded by chord length), + * composed editors, etc. The kind owns the rendering and the + * update logic. `key` here is just a stable React key/label. */ + | { + key: string + kind: 'custom' + component: ComponentType<{ node: N; onUpdate: (patch: Partial) => void }> + visibleIf?: (n: N) => boolean + } export type Issue = { field?: string; msg: string; severity?: 'error' | 'warning' } diff --git a/packages/editor/src/components/ui/panels/parametric-inspector.tsx b/packages/editor/src/components/ui/panels/parametric-inspector.tsx index 4cbb5d44..ee0105e0 100644 --- a/packages/editor/src/components/ui/panels/parametric-inspector.tsx +++ b/packages/editor/src/components/ui/panels/parametric-inspector.tsx @@ -293,12 +293,35 @@ function FieldRenderer({ field, nodeId, onUpdate }: FieldRendererProps) { ) } + case 'custom': + // The field owns its rendering and update logic — used for + // derived values (length from start/end), dynamic-bounded + // sliders (curve sagitta), composed editors. + return + default: // material / ref / unrecognized kinds — not implemented in v1. return null } } +function CustomFieldRenderer({ + Comp, + nodeId, + onUpdate, +}: { + Comp: ComponentType<{ node: AnyNode; onUpdate: (patch: Partial) => void }> + nodeId: AnyNodeId + onUpdate: (patch: Partial) => void +}) { + // Subscribe to the full node — the custom editor may read any + // field. Tools that don't want this churn should write narrower + // selectors inside Comp itself. + const node = useScene((s) => s.nodes[nodeId]) + if (!node) return null + return +} + // ─── helpers ───────────────────────────────────────────────────────── function precisionForStep(step: number): number { diff --git a/packages/nodes/src/fence/inspector-editors.tsx b/packages/nodes/src/fence/inspector-editors.tsx new file mode 100644 index 00000000..d8ef9593 --- /dev/null +++ b/packages/nodes/src/fence/inspector-editors.tsx @@ -0,0 +1,86 @@ +'use client' + +import { + type FenceNode, + getClampedWallCurveOffset, + getMaxWallCurveOffset, + getWallCurveLength, + normalizeWallCurveOffset, +} from '@pascal-app/core' +import { SliderControl } from '@pascal-app/editor' + +/** + * Custom inspector editors for fence fields that don't map to a single + * node property in the canonical way: + * + * - **Length** is derived from `start`/`end`. Adjusting the slider + * moves `end` along the existing direction so the fence resizes from + * the start point. Matches the legacy `FencePanel`'s "Length" slider. + * - **Curve** is a slider on `curveOffset` with min/max bounded by the + * chord length (per-node), normalized via `normalizeWallCurveOffset`. + * Can't use a plain `number` field because the bounds change with + * the fence's shape. + * + * Both are wired through `parametrics.fields[].kind: 'custom'`. + */ +export function FenceLengthEditor({ + node, + onUpdate, +}: { + node: FenceNode + onUpdate: (patch: Partial) => void +}) { + const length = getWallCurveLength(node) + + const handleChange = (newLength: number) => { + if (newLength <= 0) return + const dx = node.end[0] - node.start[0] + const dz = node.end[1] - node.start[1] + const currentLength = Math.sqrt(dx * dx + dz * dz) + if (currentLength === 0) return + const dirX = dx / currentLength + const dirZ = dz / currentLength + const newEnd: [number, number] = [ + node.start[0] + dirX * newLength, + node.start[1] + dirZ * newLength, + ] + onUpdate({ end: newEnd }) + } + + return ( + + ) +} + +export function FenceCurveEditor({ + node, + onUpdate, +}: { + node: FenceNode + onUpdate: (patch: Partial) => void +}) { + const curveOffset = getClampedWallCurveOffset(node) + const maxCurveOffset = getMaxWallCurveOffset(node) + + return ( + onUpdate({ curveOffset: normalizeWallCurveOffset(node, value) })} + precision={2} + step={0.1} + unit="m" + value={Math.round(curveOffset * 100) / 100} + /> + ) +} diff --git a/packages/nodes/src/fence/parametrics.ts b/packages/nodes/src/fence/parametrics.ts index f292a435..830cad56 100644 --- a/packages/nodes/src/fence/parametrics.ts +++ b/packages/nodes/src/fence/parametrics.ts @@ -1,34 +1,21 @@ import type { ParametricDescriptor } from '@pascal-app/core' +import { FenceCurveEditor, FenceLengthEditor } from './inspector-editors' import type { FenceNode } from './schema' /** - * Inspector descriptor for fence. + * Inspector descriptor for fence. Mirrors the legacy `FencePanel` + * layout 1:1: + * - **Style** (segmented controls): style, baseStyle, showInfill toggle. + * - **Dimensions**: Length (derived from start/end), Curve (sagitta + * with dynamic bounds), Height, Thickness. + * - **Structure**: Base Height, Top Rail, Post Spacing, Post Size, + * Ground Clear, Edge Inset. * - * Mirrors the legacy `fence-panel.tsx` controls but rendered by the - * generic ``. Endpoints (`start` / `end`) and - * `curveOffset` are edited via floor-plan affordances and 3D handles, - * not number inputs — kept out of parametrics. + * Length + Curve use the `custom` field kind because they don't map + * to single number fields with static bounds — see `inspector-editors.tsx`. */ export const fenceParametrics: ParametricDescriptor = { groups: [ - { - label: 'Dimensions', - fields: [ - { key: 'height', kind: 'number', unit: 'm', min: 0.4, max: 3.5, step: 0.05 }, - { key: 'thickness', kind: 'number', unit: 'm', min: 0.02, max: 0.3, step: 0.005 }, - { key: 'baseHeight', kind: 'number', unit: 'm', min: 0, max: 0.6, step: 0.01 }, - { key: 'groundClearance', kind: 'number', unit: 'm', min: 0, max: 0.5, step: 0.01 }, - ], - }, - { - label: 'Posts', - fields: [ - { key: 'postSpacing', kind: 'number', unit: 'm', min: 0.5, max: 5, step: 0.1 }, - { key: 'postSize', kind: 'number', unit: 'm', min: 0.04, max: 0.4, step: 0.01 }, - { key: 'topRailHeight', kind: 'number', unit: 'm', min: 0, max: 0.2, step: 0.005 }, - { key: 'edgeInset', kind: 'number', unit: 'm', min: 0, max: 0.1, step: 0.005 }, - ], - }, { label: 'Style', fields: [ @@ -47,5 +34,25 @@ export const fenceParametrics: ParametricDescriptor = { { key: 'showInfill', kind: 'boolean' }, ], }, + { + label: 'Dimensions', + fields: [ + { key: 'length', kind: 'custom', component: FenceLengthEditor }, + { key: 'curve', kind: 'custom', component: FenceCurveEditor }, + { key: 'height', kind: 'number', unit: 'm', min: 0.4, max: 4, step: 0.05 }, + { key: 'thickness', kind: 'number', unit: 'm', min: 0.03, max: 0.5, step: 0.005 }, + ], + }, + { + label: 'Structure', + fields: [ + { key: 'baseHeight', kind: 'number', unit: 'm', min: 0.04, max: 1, step: 0.01 }, + { key: 'topRailHeight', kind: 'number', unit: 'm', min: 0.01, max: 0.25, step: 0.005 }, + { key: 'postSpacing', kind: 'number', unit: 'm', min: 0.2, max: 5, step: 0.05 }, + { key: 'postSize', kind: 'number', unit: 'm', min: 0.01, max: 0.4, step: 0.005 }, + { key: 'groundClearance', kind: 'number', unit: 'm', min: 0, max: 0.6, step: 0.005 }, + { key: 'edgeInset', kind: 'number', unit: 'm', min: 0.005, max: 0.25, step: 0.005 }, + ], + }, ], }