components/painter-config-panel/painter-config-panel.component.html

0001 @if (!piece()) {
0002   <div class="panel-hint">
0003     Select a piece in the model tree (left pane) or click an object in 3D to
0004     configure how it is painted.
0005   </div>
0006 } @else {
0007   <div class="panel">
0008     <div class="piece-header">
0009       <div class="piece-name">{{ piece()!.name }}</div>
0010       <div class="piece-type">{{ piece()!.type }}</div>
0011     </div>
0012
0013     @if (painterOptions().length > 0) {
0014       <div class="section-label">Painter</div>
0015       <ul ngListbox class="option-listbox"
0016           [value]="painterListboxValue()"
0017           (valueChange)="onPainterPicked($event)">
0018         @for (option of painterOptions(); track option.id) {
0019           <li ngOption [value]="option.id" [label]="option.label">{{ option.label }}</li>
0020         }
0021       </ul>
0022     } @else {
0023       <div class="panel-hint">No painter is registered for this piece type.</div>
0024     }
0025
0026     @if (descriptors().length > 0) {
0027       <div class="section-label">Settings</div>
0028       @for (descriptor of descriptors(); track descriptor.key) {
0029         <div class="knob">
0030           <label class="knob-label">{{ descriptor.label ?? descriptor.key }}</label>
0031           @switch (controlKind(descriptor)) {
0032             @case ('options') {
0033               <ul ngListbox class="option-listbox"
0034                   [value]="knobListboxValue(descriptor.key)"
0035                   (valueChange)="onKnobOptionPicked(descriptor.key, $event)">
0036                 @for (option of descriptor.options; track option) {
0037                   <li ngOption [value]="option" [label]="optionLabel(option)">{{ optionLabel(option) }}</li>
0038                 }
0039               </ul>
0040             }
0041             @case ('range') {
0042               <!-- Manual binding: [formField] rejects min/max bindings on the
0043                    same input (Signal Forms derives them from schema validators,
0044                    but these are UI hints, not validation rules). -->
0045               <div class="range-row">
0046                 <input type="range"
0047                        [min]="descriptor.min ?? 0"
0048                        [max]="descriptor.max ?? 100"
0049                        [step]="descriptor.step ?? 1"
0050                        [value]="knobValue(descriptor.key)"
0051                        (input)="onRangeInput(descriptor.key, $event)" />
0052                 <span class="range-value">{{ knobValue(descriptor.key) }}</span>
0053               </div>
0054             }
0055             @case ('color') {
0056               <input type="color" [formField]="field(descriptor.key)" />
0057             }
0058             @case ('checkbox') {
0059               <input type="checkbox" [formField]="field(descriptor.key)" />
0060             }
0061             @default {
0062               <input type="text" [formField]="field(descriptor.key)" />
0063             }
0064           }
0065         </div>
0066       }
0067     }
0068   </div>
0069 }