@things-factory/figure-ui 10.1.222 → 10.1.224

package/client/modeller/figure-capability-panel.ts

@@ -8,6 +8,20 @@ import type { FigureAsset } from '@hatiolab/figure-model'
 import { RUNGS, rungOf, type Rung } from '@things-factory/figure-viewer/dist-client/capability-rung.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js'
+import { onFigureCapabilitiesChanged, type FigureCapabilityDescriptor, type FigureCapabilitySetting } from '@hatiolab/things-scene'
+
+import {
+  consumerDescriptors,
+  inputTableAt,
+  namesWith,
+  needsMissing,
+  partsAt,
+  settingsIssues,
+  settingsOf,
+  unknownConsumerNames,
+  withInputTable,
+  withParts
+} from './consumer-capabilities.js'
 
 /**
  * 자리·능력 — what the figure does on a board: the ladder from drawing only, to
@@ -15,6 +29,10 @@ import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-fac
  * so the list is the only way to find one; choosing a row selects its part, where the place is edited. Whether the
  * figure is the look of an item a holder carries is said here too (ADR-0155 amendment 2): a tag, apart from the ladder,
  * since an item may hold things as well.
+ *
+ * Below the ladder, the products' capabilities this modeller has descriptors for (ADR-0167 9, 12): each put on or off,
+ * what it still needs, and its settings as its descriptor draws them -- parts picked (the part chosen here by one
+ * button), an input and a value per fixed key, never a row added or taken away -- with what its check says.
  */
 @customElement('figure-capability-panel')
 export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
@@ -70,8 +88,42 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
       font-size: var(--ui-t-small, 11.5px);
       color: var(--md-sys-color-on-surface-variant);
     }
+    div[chips] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px 10px;
+      align-items: center;
+    }
+    div[chips] label {
+      display: inline-flex;
+      gap: 4px;
+      align-items: center;
+    }
+    div[table] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: 4px 6px;
+      align-items: center;
+    }
+    p[warn] {
+      margin: 0;
+      color: var(--md-sys-color-error);
+    }
   `]
 
+  private unlisten?: () => void
+
+  connectedCallback() {
+    super.connectedCallback()
+    /* A product's descriptors may be registered after the panel stands. */
+    this.unlisten = onFigureCapabilitiesChanged(() => this.requestUpdate())
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.unlisten?.()
+  }
+
   @property({ attribute: false }) asset?: FigureAsset
   /** The selected part, whose places are marked. */
   @property() selected = ''
@@ -97,6 +149,7 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
       ${rung === null ? html`<p hint>${i18next.t('figure.text.capability-hand-written')}</p>` : nothing}
       ${names.length ? html`<code>${names.join(' · ')}</code>` : nothing}
       </section>
+      ${this.renderConsumers(asset)}
       <section>
       <h3>${i18next.t('figure.label.places')}</h3>
       ${places.length
@@ -125,8 +178,99 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
     `
   }
 
+  /** The products' capabilities: those this modeller knows, each on or off with its settings, and those it does not know. */
+  private renderConsumers(asset: FigureAsset) {
+    const known = consumerDescriptors()
+    const unknown = unknownConsumerNames(asset)
+    if (!known.length && !unknown.length) return nothing
+    const names = asset.document.capabilities.names ?? []
+    return html`<section>
+      <h3>${i18next.t('figure.label.product-capabilities')}</h3>
+      ${known.map(d => {
+        const on = names.includes(d.name)
+        const missing = needsMissing(d, asset)
+        return html`<label rung ?on=${on}>
+            <input type="checkbox" .checked=${live(on)} ?disabled=${this.locked || (!on && missing.length > 0)} @change=${(e: Event) => this.setConsumer(asset, d.name, (e.target as HTMLInputElement).checked)} />
+            <span>
+              <strong>${d.label}</strong>
+              <em>${d.note}</em>
+              <code>${d.name} · ${d.version}</code>
+            </span>
+          </label>
+          ${missing.length ? html`<p hint>${i18next.t('figure.text.product-capability-needs', { needs: missing.map(m => (m === 'item' ? i18next.t('figure.label.is-item') : m)).join(', ') })}</p>` : nothing}
+          ${on ? this.renderSettings(asset, d) : nothing}`
+      })}
+      ${unknown.map(
+        name => html`<p hint>
+          ${i18next.t('figure.text.product-capability-unknown', { name })}
+          <button quiet ?disabled=${this.locked} @click=${() => this.setConsumer(asset, name, false)}>${i18next.t('figure.button.product-capability-remove')}</button>
+        </p>`
+      )}
+    </section>`
+  }
+
+  /** A capability's settings as its descriptor draws them, and what its check says of them. */
+  private renderSettings(asset: FigureAsset, d: FigureCapabilityDescriptor) {
+    const settings = settingsOf(asset, d.name)
+    const write = (next: Record<string, unknown>) =>
+      this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capability-settings', name: d.name, settings: Object.keys(next).length ? next : null } }, bubbles: true, composed: true }))
+    const parts = [...new Set(asset.appearance.map(a => a.target))]
+    const inputs = asset.document.model.inputs.filter(i => i.role === 'state')
+    const issues = settingsIssues(d, asset)
+    return html`<div form>
+        ${(d.settings ?? []).map((setting: FigureCapabilitySetting) => {
+          if (setting.kind === 'parts') {
+            const chosen = partsAt(settings, setting.key)
+            const toggle = (part: string, on: boolean) => write(withParts(settings, setting.key, on ? [...chosen, part] : chosen.filter(p => p !== part)))
+            return html`<span>${setting.label}</span>
+              <div chips>
+                ${parts.map(p => html`<label><input type="checkbox" .checked=${live(chosen.includes(p))} ?disabled=${this.locked} @change=${(e: Event) => toggle(p, (e.target as HTMLInputElement).checked)} />${p}</label>`)}
+                ${this.selected && parts.includes(this.selected) && !chosen.includes(this.selected)
+                  ? html`<button quiet ?disabled=${this.locked} @click=${() => toggle(this.selected, true)}>${i18next.t('figure.button.data-add-selected-part', { part: this.selected })}</button>`
+                  : nothing}
+              </div>`
+          }
+          const table = inputTableAt(settings, setting)
+          const input = inputs.find(i => i.id === table.input)
+          return html`<span>${setting.label}</span>
+            <select ?disabled=${this.locked} @change=${(e: Event) => write(withInputTable(settings, setting, (e.target as HTMLSelectElement).value || undefined, table.values))}>
+              <option value="" ?selected=${!table.input}>${i18next.t('figure.label.data-none')}</option>
+              ${inputs.map(i => html`<option value=${i.id} ?selected=${i.id === table.input}>${asset.stateInputs?.[i.id]?.label ?? i.id}${i.unit ? ` (${i.unit} ${i.min ?? ''}~${i.max ?? ''})` : ''}</option>`)}
+            </select>
+            ${table.input
+              ? html`<span></span>
+                  <div table>
+                    ${setting.keys.map(
+                      key => html`<span>${key}</span>
+                        <input
+                          type="number"
+                          step="any"
+                          min=${input?.min ?? ''}
+                          max=${input?.max ?? ''}
+                          .value=${String(table.values[key])}
+                          ?disabled=${this.locked}
+                          @change=${(e: Event) => {
+                            const n = (e.target as HTMLInputElement).valueAsNumber
+                            if (!Number.isFinite(n)) return this.requestUpdate()
+                            write(withInputTable(settings, setting, table.input, { ...table.values, [key]: n }))
+                          }}
+                        />`
+                    )}
+                  </div>`
+              : nothing}`
+        })}
+      </div>
+      ${issues.map(reason => html`<p warn>${reason}</p>`)}`
+  }
+
+  private setConsumer(asset: FigureAsset, name: string, on: boolean) {
+    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names: namesWith(asset, name, on) } }, bubbles: true, composed: true }))
+  }
+
   private setRung(which: Rung) {
-    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names: [...RUNGS[which]] } }, bubbles: true, composed: true }))
+    /* The ladder sets the shared names; a product's capabilities stay as they are. */
+    const consumers = (this.asset?.document.capabilities.names ?? []).filter(n => n.includes('.'))
+    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names: [...RUNGS[which], ...consumers] } }, bubbles: true, composed: true }))
   }
 
   private setItem(item: boolean) {