@things-factory/figure-ui 10.1.223 → 10.1.224

package/dist-client/modeller/figure-links.js

@@ -7,7 +7,8 @@ import './figure-size-editor.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { figureFaceOverhangOf, figureMotionsOf, motionIdOf } from '@hatiolab/figure-model';
-import { acceptsOf, AXES, canFasten, canFollow, positionIsShare, heldBy, shownWhenOf, visibilityControlsOf, fasteningOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionFormRefusalOf, endPlaceKeyOf, motionJoint, controlIdFor, withoutAxis, placeFacesOf, placeIdFor, placesOn, rowAxesOf, rowBlockOf, fixedJointOf, rowOf, positionsWorkedOut } from './links.js';
+import { acceptsOf, AXES, canFasten, canFollow, positionIsShare, heldBy, shownWhenOf, visibilityControlsOf, fasteningOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionFormRefusalOf, endPlaceKeyOf, motionJoint, controlIdFor, withoutAxis, placeFacesOf, placeIdFor, placesOn, rowAxesOf, rowBlockOf, fixedJointOf, rowOf, positionsWorkedOut, followOf, followableAxes, measureNow, freshStateSize, stateSizeIdFor, stateSizeCommandOf, stateSizeFixedOf } from './links.js';
+import { measureFactor } from './size-response.js';
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
 import { insideAlignmentOf } from './fasten-geometry.js';
 import { fastenFormOf, fastenPlanOf, fastenSentenceOf } from './fasten-form.js';
@@ -62,7 +63,11 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         /** Why 정렬·간격 고치기 moved nothing, said under it; empty once it moved the part or the part changed. */
         this.fixNote = '';
         this.motion = freshMotion();
+        /* The form for a measure a control sets (「상태에 따라 크기」). */
+        this.stateSize = freshStateSize();
         this.place = freshPlace();
+        /** The id of the place the form changes, kept so the place keeps its id (a release refuses a place id that goes); null adds one. */
+        this.placeEditing = null;
         this.row = freshRow();
         /** The motion form is open over the part's own motion, to change it where it is. */
         this.editingMotion = false;
@@ -151,6 +156,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             this.loadedFor = this.partId;
             this.motion = freshMotion();
             this.place = freshPlace();
+            this.placeEditing = null;
             this.row = freshRow();
             this.rowOpen = false;
             this.rowCandidate = undefined;
@@ -186,7 +192,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             return nothing;
         if (this.section === 'motion')
             return html `<section><h3>${i18next.t('figure.label.motion')}${this.help.button('figure.text.motion-explained')}</h3>${this.help.hint('figure.text.motion-explained')}
-        ${this.renderMotion(asset)}${this.renderShown(asset)}</section>`;
+        ${this.renderMotion(asset)}${this.renderShown(asset)}${this.renderStateSize(asset)}</section>`;
         if (this.section === 'places') {
             /*
               One idea, places, two ways to make them (ADR-0118): one at a time on this part, or many by a rule -- the figure's
@@ -253,6 +259,11 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         this.candidate = this.fastenCandidate;
         return shown;
     }
+    /** A place on this part into the form, to change it under its own id. */
+    editPlace(one) {
+        this.placeEditing = one.id;
+        this.place = { role: one.role, face: one.face ?? 'top', label: one.label, accepts: (one.accepts ?? []).join(', '), capacity: one.capacity };
+    }
     /** Where things are held on this part: a seat things rest on, or a grip things are held in. */
     renderPlaces(asset) {
         const faces = placeFacesOf(asset, this.partId);
@@ -267,6 +278,9 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             <b bound>${one.label}</b>
             <small>${one.face ? i18next.t('figure.label.face-' + one.face) + ' · ' : ''}${placeTerms(one, (key, params) => i18next.t(key, params))}</small>
           </span>
+          <button quiet edit-place ?disabled=${this.locked} @click=${() => this.editPlace(one)}>
+            <md-icon>edit</md-icon>${i18next.t('figure.button.edit-place')}
+          </button>
           <button quiet ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-binding', id: one.id })}>
             <md-icon>close</md-icon>${i18next.t('figure.button.remove-place')}
           </button>
@@ -290,27 +304,35 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         <span>${i18next.t('figure.label.place-name')}</span>
         <input .value=${p.label} placeholder=${roleName(p.role)} @change=${(e) => (this.place = { ...p, label: e.target.value })} />
         <span>${i18next.t('figure.label.place-accepts')}</span>
-        <input .value=${p.accepts} placeholder="BOX, TOTE" @input=${(e) => (this.place = { ...p, accepts: e.target.value })} />
+        <input .value=${p.accepts} placeholder=${i18next.t('figure.text.place-accepts-any')} @input=${(e) => (this.place = { ...p, accepts: e.target.value })} />
         <span>${i18next.t('figure.label.place-capacity')}</span>
         <input type="number" min="1" step="1" .value=${String(p.capacity)} @change=${(e) => (this.place = { ...p, capacity: e.target.valueAsNumber })} />
       </div>
-      ${accepts.length ? nothing : html `<small>${i18next.t('figure.text.place-accepts-needed')}</small>`}
       <button
         act
-        ?disabled=${this.locked || !accepts.length || !capacityOk}
-        @click=${() => this.command({
-            kind: 'add-binding',
-            id: placeIdFor(asset, this.partId, p.role),
-            label: p.label.trim() || roleName(p.role),
-            role: p.role,
-            part: this.partId,
-            face,
-            accepts,
-            capacity: p.capacity
-        })}
+        ?disabled=${this.locked || !capacityOk}
+        @click=${() => {
+            this.command({
+                kind: 'add-binding',
+                id: this.placeEditing ?? placeIdFor(asset, this.partId, p.role),
+                label: p.label.trim() || roleName(p.role),
+                role: p.role,
+                part: this.partId,
+                face,
+                /* None named: it takes any item (ADR-0051 §4.1 decision 5). */
+                ...(accepts.length ? { accepts } : {}),
+                capacity: p.capacity,
+                ...(this.placeEditing ? { replace: true } : {})
+            });
+            this.placeEditing = null;
+            this.place = freshPlace();
+        }}
       >
-        <md-icon>back_hand</md-icon>${i18next.t('figure.button.add-place')}
+        <md-icon>back_hand</md-icon>${i18next.t(this.placeEditing ? 'figure.button.save-place' : 'figure.button.add-place')}
       </button>
+      ${this.placeEditing
+            ? html `<button quiet @click=${() => ((this.placeEditing = null), (this.place = freshPlace()))}>${i18next.t('figure.button.cancel-place-edit')}</button>`
+            : nothing}
     `;
     }
     /** The figure holds things: `Capacity` and `Holdable`, the ladder's middle rung. One part edit, one undo step. */
@@ -519,6 +541,97 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
      * When the part is drawn: always, or while a control is at least a value -- a lamp lit while the gate is open. One
      * part edit (`set-visibility`), one step. Offered once the figure has a control; a motion is what makes one.
      */
+    /**
+     * A measure a control sets (modeller snag C1, 2026-10-26): a wound roll shrinking to its core. Each measure that does is
+     * one line with the way back to a fixed number; the form makes another. Measures read as the size row shows them --
+     * a cylinder's X as its diameter.
+     */
+    renderStateSize(asset) {
+        const revision = this.revision;
+        if (!revision)
+            return nothing;
+        const part = this.partId;
+        const axes = followableAxes(asset, part);
+        if (!axes.length)
+            return nothing;
+        const word = (axis) => `${axis.toUpperCase()}${measureFactor(asset, part, axis) === 2 ? ' · ' + i18next.t('figure.label.size-diameter') : ''}`;
+        const unitWord = (unit) => i18next.t(`figure.label.state-unit-${unit}`);
+        const sized = axes.flatMap(axis => {
+            const f = followOf(asset, part, axis);
+            return f.of === 'state' ? [{ axis, f }] : [];
+        });
+        const free = axes.filter(axis => !sized.some(one => one.axis === axis));
+        const form = this.stateSize;
+        const axis = form.axis && free.includes(form.axis) ? form.axis : free[0] ?? '';
+        const factor = axis ? measureFactor(asset, part, axis) : 1;
+        const atMax = Number.isFinite(form.atMax) ? form.atMax : axis ? (measureNow(revision, part, axis) ?? NaN) : NaN;
+        const id = form.id || stateSizeIdFor(asset, part);
+        const controls = visibilityControlsOf(asset);
+        const command = stateSizeCommandOf(asset, part, { ...form, axis, atMax }, factor, id);
+        /* A control already there is taken with its unit and range; another unit or range would be refused. */
+        const pickControl = (value) => {
+            const there = controls.find(c => c.id === value);
+            this.stateSize = there && ['percent', 'ratio', 'mm'].includes(there.unit)
+                ? { ...form, id: value, unit: there.unit, min: there.min, max: there.max }
+                : { ...form, id: value };
+        };
+        const number = (key) => (e) => (this.stateSize = { ...form, axis, [key]: e.target.valueAsNumber });
+        return html `<h4 state-size>${i18next.t('figure.label.state-size')}</h4>
+      ${sized.map(({ axis: one, f }) => {
+            const k = measureFactor(asset, part, one);
+            const input = controls.find(c => c.id === f.input);
+            return html `<div pair state-size-row=${one}>
+          <span>${word(one)}
+            <small>${i18next.t('figure.text.state-size-row', {
+                control: input?.label ?? f.input,
+                min: String(input?.min ?? ''),
+                max: String(input?.max ?? ''),
+                unit: input ? unitWord(input.unit) : '',
+                from: String(Math.round(f.at.min * k * 1000) / 1000),
+                to: String(Math.round(f.at.max * k * 1000) / 1000)
+            })}</small>
+          </span>
+          <button act ?disabled=${this.locked} @click=${() => {
+                const back = stateSizeFixedOf(asset, part, one);
+                if (back)
+                    this.command(back);
+            }}><md-icon>close</md-icon>${i18next.t('figure.button.state-size-fix')}</button>
+        </div>`;
+        })}
+      ${free.length
+            ? html `<div form state-size-form>
+            <span>${i18next.t('figure.label.state-size-measure')}</span>
+            <select ?disabled=${this.locked} @change=${(e) => (this.stateSize = { ...form, axis: e.target.value, atMax: NaN })}>
+              ${free.map(one => html `<option value=${one} ?selected=${one === axis}>${word(one)}</option>`)}
+            </select>
+            <span>${i18next.t('figure.label.control-id')}</span>
+            <input list="state-size-controls" .value=${id} ?disabled=${this.locked} @change=${(e) => pickControl(e.target.value.trim())} />
+            <datalist id="state-size-controls">${controls.map(c => html `<option value=${c.id}>${c.label}</option>`)}</datalist>
+            <span>${i18next.t('figure.label.state-size-unit')}</span>
+            <select ?disabled=${this.locked} @change=${(e) => {
+                const unit = e.target.value;
+                this.stateSize = { ...form, axis, unit, ...(unit === 'percent' ? { min: 0, max: 100 } : unit === 'ratio' ? { min: 0, max: 1 } : {}) };
+            }}>
+              ${['percent', 'ratio', 'mm'].map(u => html `<option value=${u} ?selected=${u === form.unit}>${unitWord(u)}</option>`)}
+            </select>
+            <span>${i18next.t('figure.label.control-range')} (${unitWord(form.unit)})</span>
+            <div pair>
+              <input type="number" step="any" .value=${String(form.min)} ?disabled=${this.locked} @change=${number('min')} />
+              <input type="number" step="any" .value=${String(form.max)} ?disabled=${this.locked} @change=${number('max')} />
+            </div>
+            <span>${i18next.t('figure.label.state-size-at-min')} (mm)</span>
+            <input type="number" step="any" min="0" state-size-at-min .value=${Number.isFinite(form.atMin) ? String(form.atMin) : ''} ?disabled=${this.locked} @change=${number('atMin')} />
+            <span>${i18next.t('figure.label.state-size-at-max')} (mm)</span>
+            <input type="number" step="any" min="0" state-size-at-max .value=${Number.isFinite(atMax) ? String(atMax) : ''} ?disabled=${this.locked} @change=${number('atMax')} />
+          </div>
+          <button act add-state-size ?disabled=${this.locked || !command} @click=${() => {
+                if (!command)
+                    return;
+                this.command(command);
+                this.stateSize = freshStateSize();
+            }}><md-icon>open_in_full</md-icon>${i18next.t('figure.button.add-state-size')}</button>`
+            : nothing}`;
+    }
     renderShown(asset) {
         const controls = visibilityControlsOf(asset);
         if (!controls.length)
@@ -783,10 +896,18 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureLinks.prototype, "motion", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLinks.prototype, "stateSize", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureLinks.prototype, "place", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLinks.prototype, "placeEditing", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)