parametrics: add display: 'segmented' enum hint + drop fence color
User pointed out two regressions in the auto-derived fence inspector: - A `color` field rendered for fence — but the legacy `FencePanel` hid it (fence's color is a leftover schema field that isn't part of the inspector UX). Dropped from `fenceParametrics`. - Style + base-style enums rendered as a dropdown, but the legacy used the inline segmented switcher (Slat/Rail/Privacy + Grounded/Floating). Added a `display?: 'select' | 'segmented'` hint to the enum field kind. ParametricInspector renders SegmentedControl when set; defaults to dropdown otherwise. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.7
parent
e7cb976b9b
commit
80199dc890
@@ -372,7 +372,15 @@ export type ParamField<N> =
|
||||
customEditor?: ComponentType
|
||||
}
|
||||
| { key: keyof N; kind: 'boolean'; visibleIf?: (n: N) => boolean }
|
||||
| { key: keyof N; kind: 'enum'; options: readonly string[]; visibleIf?: (n: N) => boolean }
|
||||
| {
|
||||
key: keyof N
|
||||
kind: 'enum'
|
||||
options: readonly string[]
|
||||
/** Defaults to 'select' (dropdown). 'segmented' renders the inline
|
||||
* tabbed switcher — better for short option lists (2-4 items). */
|
||||
display?: 'select' | 'segmented'
|
||||
visibleIf?: (n: N) => boolean
|
||||
}
|
||||
| { key: keyof N; kind: 'vec3'; visibleIf?: (n: N) => boolean }
|
||||
| { key: keyof N; kind: 'color'; visibleIf?: (n: N) => boolean }
|
||||
| { key: keyof N; kind: 'material'; visibleIf?: (n: N) => boolean }
|
||||
|
||||
@@ -14,6 +14,7 @@ import { sfxEmitter } from '../../../lib/sfx-bus'
|
||||
import useEditor from '../../../store/use-editor'
|
||||
import { ActionButton, ActionGroup } from '../controls/action-button'
|
||||
import { PanelSection } from '../controls/panel-section'
|
||||
import { SegmentedControl } from '../controls/segmented-control'
|
||||
import { SliderControl } from '../controls/slider-control'
|
||||
import { ToggleControl } from '../controls/toggle-control'
|
||||
import { PanelWrapper } from './panel-wrapper'
|
||||
@@ -204,6 +205,15 @@ function FieldRenderer({ field, nodeId, onUpdate }: FieldRendererProps) {
|
||||
|
||||
case 'enum': {
|
||||
const str = typeof value === 'string' ? value : (field.options[0] ?? '')
|
||||
if (field.display === 'segmented') {
|
||||
return (
|
||||
<SegmentedControl
|
||||
onChange={(next) => onUpdate({ [key]: next } as Partial<AnyNode>)}
|
||||
options={field.options.map((opt) => ({ label: prettifyEnumValue(opt), value: opt }))}
|
||||
value={str}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="flex items-center justify-between px-3 py-2">
|
||||
<span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
|
||||
|
||||
@@ -32,10 +32,19 @@ export const fenceParametrics: ParametricDescriptor<FenceNode> = {
|
||||
{
|
||||
label: 'Style',
|
||||
fields: [
|
||||
{ key: 'style', kind: 'enum', options: ['slat', 'rail', 'privacy'] },
|
||||
{ key: 'baseStyle', kind: 'enum', options: ['floating', 'grounded'] },
|
||||
{
|
||||
key: 'style',
|
||||
kind: 'enum',
|
||||
options: ['slat', 'rail', 'privacy'],
|
||||
display: 'segmented',
|
||||
},
|
||||
{
|
||||
key: 'baseStyle',
|
||||
kind: 'enum',
|
||||
options: ['grounded', 'floating'],
|
||||
display: 'segmented',
|
||||
},
|
||||
{ key: 'showInfill', kind: 'boolean' },
|
||||
{ key: 'color', kind: 'color' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user