@things-factory/figure-ui 10.1.224 → 10.1.226

package/dist-client/modeller/figure-data-panel.js

@@ -3,6 +3,7 @@ import '@material/web/icon/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
+import { unitWord } from './unit-words.js';
 import { FIGURE_UNITS, figureDataExample, inferFigureDataSchema } from '@hatiolab/figure-model';
 import { accessorOfRow, behaviorKeyOf, behaviorsOf, bindingDraftOf, domainOf, endlessJointsOf, fieldAt, fieldOfKind, fitsField, freeCodeOf, legendRoleOf, methodOf, methodsOf, partsOf, rotationStepsOf, sampleOf, schemaRowsOf, schemaWithField, schemaWithFieldReplaced, schemaWithoutField, schemaFollowingCodes, stateInputsOf, tableColumnsOf, tableDraftOf, tableWithKeys, tableWithLook, tableWithTargets } from './data-interface.js';
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
@@ -112,6 +113,17 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         overflow-wrap: anywhere;
         cursor: pointer;
       }
+      /* What it reads and where on the first line, its method under it: a method wrapped alone read 「· 배율」 (sweep 2026-10-27 U11). */
+      div[head] button[line] small {
+        display: block;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      /* A binding a product capability takes over is marked where the list is read, folded or not (sweep 2026-10-27 U18). */
+      div[head] button[line] span[rests] {
+        padding: 0 6px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 999px;
+      }
       div[head] button[act] {
         width: 30px;
         min-height: var(--figure-control-height);
@@ -255,7 +267,7 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         const kind = i18next.t('figure.label.data-kind-' + node.kind);
         if (node.kind === 'number') {
             const range = node.min !== undefined || node.max !== undefined ? ` ${node.min ?? ''}~${node.max ?? ''}` : '';
-            return `${kind}${node.unit ? ` ${node.unit}` : ''}${range}`;
+            return `${kind}${node.unit ? ` ${unitWord(node.unit)}` : ''}${range}`;
         }
         if (node.kind === 'text' && node.values)
             return `${kind} (${node.values.join(', ')})`;
@@ -302,7 +314,7 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
             this.edit({ kind: 'set-data-schema', schema: schemaWithoutField(schema, row.path) });
         }}
         >
-          <md-icon>close</md-icon>
+          <md-icon>delete</md-icon>
         </button>
       </div>
       <div form>
@@ -317,8 +329,8 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         ${field.kind === 'number'
             ? html `<span>${i18next.t('figure.label.data-unit')}</span>
               <select ?disabled=${this.locked} @change=${(e) => set({ unit: value(e) || undefined })}>
-                <option value="" ?selected=${!field.unit}>-</option>
-                ${FIGURE_UNITS.map(u => html `<option value=${u} ?selected=${u === field.unit}>${u}</option>`)}
+                <option value="" ?selected=${!field.unit}>${i18next.t('figure.label.unit-none')}</option>
+                ${FIGURE_UNITS.map(u => html `<option value=${u} ?selected=${u === field.unit}>${unitWord(u)}</option>`)}
               </select>
               <span>${i18next.t('figure.label.data-min')}</span>
               <input type="number" step="any" .value=${field.min === undefined ? '' : String(field.min)} ?disabled=${this.locked} @change=${(e) => set({ min: number(e) })} />
@@ -367,22 +379,26 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
     renderAddField(schema, under) {
         const a = this.adding;
         const named = a.name.trim();
+        const add = () => {
+            if (this.locked || !named)
+                return;
+            this.edit({ kind: 'set-data-schema', schema: schemaWithField(schema, under, { name: named, ...nodeOfKind(a.kind) }) });
+            this.adding = { ...a, name: '' };
+        };
         return html `<div form>
         <span>${i18next.t('figure.label.data-name')}</span>
-        <input .value=${a.name} @input=${(e) => (this.adding = { ...a, name: e.target.value })} />
+        <input
+          aria-label=${i18next.t('figure.label.data-name')}
+          .value=${a.name}
+          @input=${(e) => (this.adding = { ...a, name: e.target.value })}
+          @keydown=${(e) => e.key === 'Enter' && !e.isComposing && add()}
+        />
         <span>${i18next.t('figure.label.data-kind')}</span>
         <select @change=${(e) => (this.adding = { ...a, kind: e.target.value })}>
           ${KINDS.map(k => html `<option value=${k} ?selected=${k === a.kind}>${i18next.t('figure.label.data-kind-' + k)}</option>`)}
         </select>
       </div>
-      <button
-        act
-        ?disabled=${this.locked || !named}
-        @click=${() => {
-            this.edit({ kind: 'set-data-schema', schema: schemaWithField(schema, under, { name: named, ...nodeOfKind(a.kind) }) });
-            this.adding = { ...a, name: '' };
-        }}
-      >
+      <button act ?disabled=${this.locked || !named} @click=${add}>
         <md-icon>add</md-icon>${i18next.t(under ? 'figure.button.add-data-child' : 'figure.button.add-data-field', { parent: under })}
       </button>`;
     }
@@ -449,13 +465,15 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         const open = this.opened === b.id;
         const set = (next) => this.edit({ kind: 'set-data-binding', binding: next });
         const what = b.rule === 'table' ? this.targetsName(asset, b) : this.behaviorName(asset, choices, b.behavior);
+        const rests = resting.some(r => r.id === b.id);
         return html `<section item>
       <div head>
         <button line aria-expanded=${open ? 'true' : 'false'} @click=${() => (this.opened = open ? '' : b.id)}>
-          <strong>${b.label ?? b.accessor}</strong> → ${what} <small>· ${i18next.t('figure.label.data-method-' + methodOf(b))}</small>
+          <strong>${b.label ?? b.accessor}</strong> → ${what}
+          <small>${i18next.t('figure.label.data-method-' + methodOf(b))}${rests ? html ` <span rests>${i18next.t('figure.label.data-binding-resting')}</span>` : nothing}</small>
         </button>
         <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-binding')} @click=${() => this.edit({ kind: 'remove-data-binding', id: b.id })}>
-          <md-icon>close</md-icon>
+          <md-icon>delete</md-icon>
         </button>
       </div>
       ${resting.filter(r => r.id === b.id).map(r => this.renderResting(r))}
@@ -642,7 +660,7 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         return html `<div looks style="grid-template-columns: ${gridOf(keyCells, columns.length)}">
       <span style="grid-column: span ${keyCells}">${i18next.t('figure.label.data-otherwise')}</span>
       ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, 'default', l)))}
-      ${needed ? html `<span></span>` : html `<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => set({ ...b, table: rest })}><md-icon>close</md-icon></button>`}
+      ${needed ? html `<span></span>` : html `<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => set({ ...b, table: rest })}><md-icon>delete</md-icon></button>`}
     </div>`;
     }
     /**
@@ -677,7 +695,7 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
             ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, k, l)))}
             ${boolean || rows.length < 2 && domain.length > 0
             ? html `<span></span>`
-            : html `<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => rekeyed(rows.filter((_, j) => j !== i))}><md-icon>close</md-icon></button>`}`)}
+            : html `<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => rekeyed(rows.filter((_, j) => j !== i))}><md-icon>delete</md-icon></button>`}`)}
       </div>
       ${this.renderOtherwise(asset, b, columns, domain.length > 0 && !covered, set, 1)}
       ${boolean
@@ -720,7 +738,7 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
             return html `<input type="number" step="any" .value=${e.from} ?disabled=${this.locked} @change=${(ev) => rekey(i, 'from', ev.target.value)} />
             <input type="number" step="any" .value=${e.to} ?disabled=${this.locked} @change=${(ev) => rekey(i, 'to', ev.target.value)} />
             ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, k, l)))}
-            <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-range')} @click=${() => set(tableWithKeys(b, rows.filter((_, j) => j !== i)))}><md-icon>close</md-icon></button>`;
+            <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-range')} @click=${() => set(tableWithKeys(b, rows.filter((_, j) => j !== i)))}><md-icon>delete</md-icon></button>`;
         })}
       </div>
       ${this.renderOtherwise(asset, b, columns, false, set, 2)}
@@ -810,9 +828,12 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
               <input .value=${a.name} @input=${(e) => set({ name: typed(e) })} />`
             : nothing}
         <span>${i18next.t('figure.label.data-method')}</span>
-        <select ?disabled=${!methods.length} @change=${(e) => set({ method: typed(e) })}>
-          ${methods.map(m => html `<option value=${m} ?selected=${m === method}>${i18next.t('figure.label.data-method-' + m)}</option>`)}
-        </select>
+        ${methods.length === 1
+            ? /* One way only (a text is read by a code table): said, not offered as a choice of one (sweep 2026-10-27 U10). */
+                html `<span method>${i18next.t('figure.label.data-method-' + methods[0])}</span>`
+            : html `<select ?disabled=${!methods.length} @change=${(e) => set({ method: typed(e) })}>
+              ${methods.map(m => html `<option value=${m} ?selected=${m === method}>${i18next.t('figure.label.data-method-' + m)}</option>`)}
+            </select>`}
         ${!table && fitting.length
             ? html `<span>${i18next.t('figure.label.data-behavior')}</span>
               <select @change=${(e) => set({ behavior: typed(e) })}>