@things-factory/figure-ui 10.1.271 → 10.1.273

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

@@ -9,15 +9,26 @@ import { i18next, localize } from '@operato/i18n';
 import { unitWord } from './unit-words.js';
 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, followOf, followableAxes, measureNow, freshStateSize, stateSizeIdFor, stateSizeCommandOf, stateSizeFixedOf } from './links.js';
-import { measureFactor } from './size-response.js';
+import { measureFactor, sizeAxisWord } 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';
 import { HelpToggles } from './help.js';
 import { groupMenu, GroupMenuStyles } from './group-menu.js';
 import { jointAxisWord } from './joint-axis.js';
+import { PIVOT_POINTS, pivotPointOf, pivotPointsOf } from './pivot.js';
 import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js';
 const freshMotion = () => ({ kind: 'slide', axis: 'x', id: '', min: 0, max: 500, follow: '', multiplier: 1, offset: 0, travel: '', travelPlus: 0 });
+/**
+ * The motion a part's form starts from: a part hung on another part most often turns there -- a thigh at the hip, a door
+ * at its frame -- so it starts as a turn; a part on the plane, or on nothing, as a slide (review 2026-11-11: eight
+ * joints of a humanoid, each changed from slide to turn by hand).
+ */
+export function motionStartOf(revision, part) {
+    const own = revision ? fasteningOf(revision, part) : undefined;
+    return own && !own.toPlane && own.target ? { ...freshMotion(), kind: 'turn', min: -90, max: 90 } : freshMotion();
+}
+const sameMotion = (a, b) => JSON.stringify(a) === JSON.stringify(b);
 const freshRow = () => ({ axis: '', pitch: 200, fills: true, count: 5 });
 const freshPlace = () => ({ role: 'grip', face: 'top', label: '', accepts: '', capacity: 1 });
 /**
@@ -76,9 +87,31 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         this.motionAxis = 0;
     }
     static { this.styles = [SidePanelStyles, GroupMenuStyles, css `
+    /* A motion's delete and edit as icons at the line's end, their words in their titles: two word buttons took the line (user 2026-11-12). */
+    div[pair] > button[act][icon] {
+      flex: none;
+      width: var(--figure-control-height, 28px);
+      padding: 0;
+      justify-content: center;
+    }
+    /* The size-by-state form folded under its summary, opened to add one. */
+    details[state-size-add][open] > summary {
+      margin-bottom: 6px;
+    }
     :host {
       display: block;
     }
+    /* The turn's axis through the part's top, middle or bottom, by name, under the numbers it fills in. */
+    div[pivot-points] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 4px 0 8px;
+    }
+    div[pivot-points] > span {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: var(--ui-t-small, 11.5px);
+    }
     /* A group's sub-question, under its title: quieter than the title, as a label is. */
     p[group-question] {
       margin: 4px 0 0;
@@ -155,7 +188,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             this.fixNote = '';
         if (this.asset && this.partId && this.partId !== this.loadedFor) {
             this.loadedFor = this.partId;
-            this.motion = freshMotion();
+            this.motion = motionStartOf(this.revision, this.partId);
             this.place = freshPlace();
             this.placeEditing = null;
             this.row = freshRow();
@@ -164,6 +197,12 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             this.editingMotion = false;
             this.motionAxis = 0;
         }
+        else if (changed.has('revision') && this.partId && !this.editingMotion) {
+            /* Fastened since the form was loaded, a form nobody has touched starts as that part's motion now does. */
+            const was = motionStartOf(changed.get('revision'), this.partId);
+            if (sameMotion(this.motion, was))
+                this.motion = motionStartOf(this.revision, this.partId);
+        }
     }
     updated() {
         /* Only the sections that hold a form speak of what it would do, and only while their tab is shown: the panel has
@@ -555,7 +594,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         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 word = (axis) => sizeAxisWord(asset, part, axis, i18next.t('figure.label.size-diameter'));
         const sized = axes.flatMap(axis => {
             const f = followOf(asset, part, axis);
             return f.of === 'state' ? [{ axis, f }] : [];
@@ -576,7 +615,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
                 : { ...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>
+        return html `${sized.length ? html `<h4 state-size>${i18next.t('figure.label.state-size')}</h4>` : nothing}
       ${sized.map(({ axis: one, f }) => {
             const k = measureFactor(asset, part, one);
             const input = controls.find(c => c.id === f.input);
@@ -599,7 +638,10 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         </div>`;
         })}
       ${free.length
-            ? html `<div form state-size-form>
+            ? /* Folded until asked for: six lines of a form few parts use pushed the controls below it down (user 2026-11-12). */
+                html `<details state-size-add>
+          <summary>${i18next.t('figure.button.add-state-size')}</summary>
+          <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>`)}
@@ -609,9 +651,9 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             <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 } : {}) };
-            }}>
+                    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>
@@ -625,11 +667,12 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             <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>`
+                    if (!command)
+                        return;
+                    this.command(command);
+                    this.stateSize = freshStateSize();
+                }}><md-icon>add</md-icon>${i18next.t('figure.button.add')}</button>
+        </details>`
             : nothing}`;
     }
     renderShown(asset) {
@@ -690,7 +733,30 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
                   <input type="number" step="any" aria-label=${`${i18next.t('figure.label.motion-through')} ${axis.toUpperCase()}`} .value=${String(m.through?.[axis] ?? 0)} @change=${typed(axis)} />
                 </div>`)}
         </div>
-      </div>`;
+      </div>
+      ${this.renderPivotPoints(m)}`;
+    }
+    renderPivotPoints(m) {
+        if (!this.revision || m.throughFollows)
+            return nothing;
+        const key = `${this.revision.revision}:${this.partId}:${m.axis}`;
+        if (this.pivotCache?.key !== key)
+            this.pivotCache = { key, points: pivotPointsOf(this.revision, this.partId, m.axis) };
+        const points = this.pivotCache.points;
+        if (!points)
+            return nothing;
+        return html `<div pivot-points>
+      <span>${i18next.t('figure.label.pivot-at')}</span>
+      <ox-input-select-buttons
+        .value=${pivotPointOf(points, m.through, m.axis) ?? ''}
+        .options=${PIVOT_POINTS.map(p => ({ value: p, display: i18next.t(`figure.label.pivot-${p}`) }))}
+        @change=${(e) => {
+            const at = points[e.detail];
+            if (at)
+                this.motion = { ...m, through: { ...at } };
+        }}
+      ></ox-input-select-buttons>
+    </div>`;
     }
     renderMotion(asset) {
         const now = motionOf(asset, this.partId);
@@ -727,14 +793,14 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
                             : nothing}
           </span>
           ${count > 1
-                    ? html `<button act remove-axis ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: withoutAxis(joint, k) })}>
-                <md-icon>close</md-icon>${i18next.t('figure.button.remove-axis')}
+                    ? html `<button act icon remove-axis title=${i18next.t('figure.button.remove-axis')} aria-label=${i18next.t('figure.button.remove-axis')} ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: withoutAxis(joint, k) })}>
+                <md-icon>delete</md-icon>
               </button>`
-                    : html `<button act ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: fixedJointOf(joint) })}>
-                <md-icon>close</md-icon>${i18next.t('figure.button.remove-motion')}
+                    : html `<button act icon title=${i18next.t('figure.button.remove-motion')} aria-label=${i18next.t('figure.button.remove-motion')} ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: fixedJointOf(joint) })}>
+                <md-icon>delete</md-icon>
               </button>`}
-          <button act ?disabled=${this.locked || !joint} @click=${() => edit(k)}>
-            <md-icon>edit</md-icon>${i18next.t('figure.button.change-motion')}
+          <button act icon title=${i18next.t('figure.button.change-motion')} aria-label=${i18next.t('figure.button.change-motion')} ?disabled=${this.locked || !joint} @click=${() => edit(k)}>
+            <md-icon>edit</md-icon>
           </button>
         </div>`;
             };
@@ -775,6 +841,8 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         const adding = k > 0 && k >= figureMotionsOf(joint).length;
         const follow = leaders.some(j => j.id === m.follow) ? m.follow : '';
         const refusal = motionFormRefusalOf(m, follow);
+        /* Following another joint is offered after the part's own control: a row above it moved every field down a row, and
+           a name typed there chose a joint to follow (review 2026-11-11). */
         return html `
       ${k > 0 ? html `<p motion-axis-heading><b>${i18next.t('figure.label.motion-axis-n', { n: k + 1 })}</b></p>` : nothing}
       <div pair>
@@ -789,6 +857,35 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
               ${AXES.map(a => html `<option value=${a} ?selected=${a === m.axis}>${i18next.t('figure.label.motion-axis')} ${a.toUpperCase()}</option>`)}
             </select>`}
       </div>
+      ${m.followSum || follow
+            ? nothing
+            : html `<div form>
+            ${m.kind === 'slide'
+                ? html `<span>${i18next.t('figure.label.motion-travel')}</span>
+                  <select @change=${(e) => (this.motion = { ...m, travel: e.target.value })}>
+                    ${m.travelSum
+                    ? html `<option value="" ?selected=${!m.travel}>${m.travelSum.sum.map(t => `${t.from.of === 'input' ? t.from.input : `${t.from.of === 'part' ? t.from.part : i18next.t('figure.label.motion-travel')} · ${t.from.axis.toUpperCase()}`}${t.times !== undefined && t.times !== 1 ? ` × ${t.times}` : ''}`).join(' + ')}</option>`
+                    : html `<option value="" ?selected=${!m.travel}>${i18next.t('figure.label.motion-travel-mm')}</option>`}
+                    ${asset.appearance
+                    .map(look => look.target)
+                    .filter(one => canFollow(asset, one))
+                    .flatMap(one => AXES.map(a => html `<option value=${`${one}:${a}`} ?selected=${m.travel === `${one}:${a}`}>${one} · ${a.toUpperCase()}</option>`))}
+                  </select>
+                  ${m.travel
+                    ? html `<span>${i18next.t('figure.label.follows-plus')}</span>
+                        <input type="number" step="any" .value=${String(m.travelPlus ?? 0)} @change=${(e) => (this.motion = { ...m, travelPlus: Number(e.target.value) || 0 })} />`
+                    : nothing}`
+                : nothing}
+            <span>${i18next.t('figure.label.control-id')}</span>
+            <input .value=${m.id} placeholder=${controlIdFor(this.partId, m.kind, k)} @change=${(e) => (this.motion = { ...m, id: e.target.value.trim() })} />
+            ${m.kind === 'continuous' || (m.kind === 'slide' && (m.travel || m.travelSum))
+                ? nothing
+                : html `<span>${i18next.t('figure.label.control-range')} (${unit})</span>
+                  <div pair>
+                    <input type="number" step="any" .value=${String(m.min)} @change=${(e) => (this.motion = { ...m, min: Number(e.target.value) })} />
+                    <input type="number" step="any" .value=${String(m.max)} @change=${(e) => (this.motion = { ...m, max: Number(e.target.value) })} />
+                  </div>`}
+          </div>`}
       ${m.followSum
             ? html `<div form>
             <span>${i18next.t('figure.label.motion-follow')}</span>
@@ -805,42 +902,14 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             </select>
           </div>`
                 : nothing}
-      ${m.followSum
-            ? nothing
-            : follow
-                ? html `<div form>
+      ${!m.followSum && follow
+            ? html `<div form>
             <span>${i18next.t('figure.label.motion-multiplier')}</span>
             <input type="number" step="any" .value=${String(m.multiplier)} @change=${(e) => (this.motion = { ...m, multiplier: Number(e.target.value) })} />
             <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
             <input type="number" step="any" .value=${String(m.offset)} @change=${(e) => (this.motion = { ...m, offset: Number(e.target.value) || 0 })} />
           </div>`
-                : html `<div form>
-            ${m.kind === 'slide'
-                    ? html `<span>${i18next.t('figure.label.motion-travel')}</span>
-                  <select @change=${(e) => (this.motion = { ...m, travel: e.target.value })}>
-                    ${m.travelSum
-                        ? html `<option value="" ?selected=${!m.travel}>${m.travelSum.sum.map(t => `${t.from.of === 'input' ? t.from.input : `${t.from.of === 'part' ? t.from.part : i18next.t('figure.label.motion-travel')} · ${t.from.axis.toUpperCase()}`}${t.times !== undefined && t.times !== 1 ? ` × ${t.times}` : ''}`).join(' + ')}</option>`
-                        : html `<option value="" ?selected=${!m.travel}>${i18next.t('figure.label.motion-travel-mm')}</option>`}
-                    ${asset.appearance
-                        .map(look => look.target)
-                        .filter(one => canFollow(asset, one))
-                        .flatMap(one => AXES.map(a => html `<option value=${`${one}:${a}`} ?selected=${m.travel === `${one}:${a}`}>${one} · ${a.toUpperCase()}</option>`))}
-                  </select>
-                  ${m.travel
-                        ? html `<span>${i18next.t('figure.label.follows-plus')}</span>
-                        <input type="number" step="any" .value=${String(m.travelPlus ?? 0)} @change=${(e) => (this.motion = { ...m, travelPlus: Number(e.target.value) || 0 })} />`
-                        : nothing}`
-                    : nothing}
-            <span>${i18next.t('figure.label.control-id')}</span>
-            <input .value=${m.id} placeholder=${controlIdFor(this.partId, m.kind, k)} @change=${(e) => (this.motion = { ...m, id: e.target.value.trim() })} />
-            ${m.kind === 'continuous' || (m.kind === 'slide' && (m.travel || m.travelSum))
-                    ? nothing
-                    : html `<span>${i18next.t('figure.label.control-range')} (${unit})</span>
-                  <div pair>
-                    <input type="number" step="any" .value=${String(m.min)} @change=${(e) => (this.motion = { ...m, min: Number(e.target.value) })} />
-                    <input type="number" step="any" .value=${String(m.max)} @change=${(e) => (this.motion = { ...m, max: Number(e.target.value) })} />
-                  </div>`}
-          </div>`}
+            : nothing}
       ${m.kind === 'slide' ? nothing : this.renderThrough(m)}
       <button
         act