@things-factory/figure-ui 10.1.169 → 10.1.170

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

@@ -6,11 +6,12 @@ import './figure-slot-layout-panel.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { FIGURE_FACES, figureFaceOverhangOf } from '@hatiolab/figure-model';
-import { acceptsOf, alignOf, AXES, canFasten, facesOf, canFollow, followCommandOf, followableAxes, positionIsShare, choiceOf, heldBy, followOf, hangsFrom, shownWhenOf, visibilityControlsOf, placeKeptOf, fasteningOf, fastenGapOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionFormRefusalOf, endPlaceKeyOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, rowBlockOf, fixedJointOf, rowOf, positionsWorkedOut, fieldWordsOf, measureNow, ownFacesOf, alignRowsOf } from './links.js';
+import { acceptsOf, alignOf, AXES, canFasten, facesOf, canFollow, followCommandOf, followableAxes, positionIsShare, choiceOf, followWordsOf, heldBy, followOf, hangsFrom, shownWhenOf, visibilityControlsOf, placeKeptOf, fasteningOf, fastenGapOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionFormRefusalOf, endPlaceKeyOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, rowBlockOf, fixedJointOf, rowOf, positionsWorkedOut, fieldWordsOf, measureNow, ownFacesOf, alignRowsOf } from './links.js';
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
 import './figure-fasten-drawing.js';
 import { faceViewOf, insideAlignmentOf, modeOf, myFaceFor, turnsInPlace } from './fasten-geometry.js';
 import { HelpToggles } from './help.js';
+import { groupMenu, GroupMenuStyles } from './group-menu.js';
 import { jointAxisWord } from './joint-axis.js';
 import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js';
 const FACES = Object.keys(FIGURE_FACES);
@@ -69,6 +70,8 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         this.working = 'fasten';
         /** A new fastening starts with a target. Its face and alignment are asked only after that target is chosen. */
         this.choosingFastening = false;
+        /** The fastening the part has, opened to be changed: until then the place group says it in one line. */
+        this.changingFastening = false;
         /** The fastening section, marked for a moment when "open attachment settings" brings it into view. */
         this.spotlit = false;
         this.fasten = freshFasten();
@@ -80,10 +83,28 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         /** The motion form is open over the part's own motion, to change it where it is. */
         this.editingMotion = false;
     }
-    static { this.styles = [SidePanelStyles, css `
+    static { this.styles = [SidePanelStyles, GroupMenuStyles, css `
     :host {
       display: block;
     }
+    /* A group's sub-question, under its title: quieter than the title, as a label is. */
+    p[group-question] {
+      margin: 4px 0 0;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    /* The fastening a part has, in one line, and 「바꾸기」 at its end. */
+    div[fastened-summary] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    div[fastened-summary] > p {
+      flex: 1;
+      margin: 0;
+    }
+    div[fastened-summary] > button[quiet] {
+      margin-left: 0;
+    }
     /* The measure's name, then its rule: X, or a cylinder's 반지름 · 길이, on one line. */
     div[row] > b {
       white-space: nowrap;
@@ -101,9 +122,9 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
     div[resize-now] { display: grid; gap: 4px; margin: 12px 0; }
     div[resize-now] div[row] { grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; }
     div[resize-now] span[measure] { font-variant-numeric: tabular-nums; }
-    button[link] { background: none; border: none; padding: 0; color: var(--md-sys-color-primary, #477b9e); text-decoration: underline; cursor: pointer; font: inherit; }
     /* Size behaviour is a choice about dimensions only. It never implies a placement or a fastening. */
-    details[resize-choice] { margin: 12px 0; padding: 0; border: 0; }
+    /* One of the size group's rows: the group's gap spaces it, as it does the rest (a margin on top of it left a hole). */
+    details[resize-choice] { margin: 0; padding: 0; border: 0; }
     details[resize-choice] > div { display: grid; gap: 8px; padding: 8px 0; }
     p[fasten-mode] { margin: 0; font-weight: 600; }
     section[fastening][spotlit] { outline: 2px solid var(--md-sys-color-primary, #477b9e); outline-offset: 4px; border-radius: 6px; transition: outline-color 0.3s; }
@@ -149,6 +170,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             this.row = freshRow();
             this.editingMotion = false;
             this.choosingFastening = false;
+            this.changingFastening = false;
         }
     }
     updated() {
@@ -201,17 +223,29 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
                     ? this.renderPlaces(asset)
                     : html `<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}</section>`;
         }
+        /*
+          Three groups in one order whatever the part's state (chief architect 2026-10-16): its size, its place, its row. The
+          editor's own numbers go in through the slots, so a group keeps its place when a rule or a fastening takes them over.
+        */
+        /* Fastened, by a face or by an origin: either can be taken off, from the place group's 「⋯」. */
+        const held = !!heldBy(asset, this.partId) || !!(this.revision && fasteningOf(this.revision, this.partId)?.atOrigin);
         const shown = html `
-      <section>
-        <h3>${i18next.t('figure.label.resize-intent')}</h3>
+      <section size>
+        <h3>${i18next.t('figure.label.group-size')}</h3>
+        <slot name="size"></slot>
+        <p group-question>${i18next.t('figure.label.resize-intent')}</p>
         ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html `<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
       </section>
       <section fastening ?spotlit=${this.spotlit} @focusin=${() => (this.working = 'fasten')}>
-        <h3>${i18next.t('figure.label.placement')}${this.help.button('figure.text.fastening-explained')}</h3>${this.help.hint('figure.text.fastening-explained')}
+        <h3>
+          ${i18next.t('figure.label.group-place')}${this.help.button('figure.text.fastening-explained')}
+          ${groupMenu([{ label: i18next.t('figure.button.detach'), icon: 'link_off', disabled: this.locked || !held, run: () => this.command({ kind: 'detach', part: this.partId }) }])}
+        </h3>${this.help.hint('figure.text.fastening-explained')}
+        <slot name="place"></slot>
         ${this.renderPositions(asset)}
         ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html `<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
       </section>
-      ${this.renderRow(asset)}
+      ${rowOf(asset, this.partId) ? html `<slot name="row"></slot>` : this.renderRow(asset)}
     `;
         this.candidate = this.working === 'row' && this.rowCandidate ? { action: this.rowCandidate } : this.fastenCandidate;
         return shown;
@@ -230,7 +264,7 @@ 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 act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-binding', id: one.id })}>
+          <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>
         </div>`)}
@@ -298,9 +332,9 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             return html `<div row>
           <b>${word(axis)}</b>
           <span measure>${mm === undefined ? '—' : `${Math.round(mm)} mm`}</span>
-          <span>${i18next.t(custom ? 'figure.label.resize-custom' : following ? 'figure.label.resize-following' : 'figure.label.follows-nothing')}</span>
+          <span>${custom ? followWordsOf(now, (key, params) => i18next.t(key, params)) : i18next.t(following ? 'figure.label.resize-following' : 'figure.label.follows-nothing')}</span>
           ${following
-                ? html `<button link resize-unfollow=${axis} ?disabled=${this.locked}
+                ? html `<button quiet resize-unfollow=${axis} ?disabled=${this.locked}
                 @click=${() => {
                     this.follow(axis, 'own', now);
                 }}>${i18next.t('figure.button.resize-unfollow')}</button>`
@@ -308,7 +342,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         </div>`;
         })}</div>`}
       ${followsAll
-            ? html `<p hint>${i18next.t('figure.text.resize-all-following')}</p>`
+            ? nothing
             : html `<button act follow-size ?disabled=${this.locked || asset.sizing === 'uniform'} @click=${() => this.command({ kind: 'follow-size', part: this.partId })}>
             <md-icon>open_in_full</md-icon>${i18next.t('figure.button.follow-size')}
           </button>`}
@@ -322,12 +356,12 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         <select ?disabled=${this.locked} @change=${(e) => this.follow(axis, e.target.value, now)}>
           <option value="own" ?selected=${value === 'own'}>${i18next.t('figure.label.follows-nothing')}</option>
           ${AXES.filter(one => hasInstanceSize(asset, one)).map(one => html `<option value=${`share:${one}`} ?selected=${value === `share:${one}`}>
-                ${i18next.t('figure.label.follows-instance-share')} · ${one.toUpperCase()}
+                ${i18next.t('figure.label.follows-instance-share', { axis: one.toUpperCase() })}
               </option>
               <option value=${`instance:${one}`} ?selected=${value === `instance:${one}`}>
-                ${i18next.t('figure.label.follows-instance')} · ${one.toUpperCase()}
+                ${i18next.t('figure.label.follows-instance', { axis: one.toUpperCase() })}
               </option>`)}
-          ${others.flatMap(other => AXES.map(one => html `<option value=${`part:${other}:${one}`} ?selected=${value === `part:${other}:${one}`}>${other} · ${one.toUpperCase()}</option>`))}
+          ${others.flatMap(other => AXES.map(one => html `<option value=${`part:${other}:${one}`} ?selected=${value === `part:${other}:${one}`}>${i18next.t('figure.label.follows-part-axis', { part: other, axis: one.toUpperCase() })}</option>`))}
           ${now.of === 'expression' || now.of === 'input'
                 ? html `<option value=${value} selected>${now.of === 'input' ? now.input : i18next.t('figure.label.follows-expression')}</option>`
                 : nothing}
@@ -384,6 +418,8 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
     async openFastening(asset) {
         const own = fasteningOf(this.revision, this.partId);
         this.fasten = own ? { ...freshFasten(), ...own } : freshFasten();
+        /* Asked for from elsewhere: the form itself, not the one-line summary of the fastening it has. */
+        this.changingFastening = true;
         this.spotlit = true;
         await this.updateComplete;
         const section = this.renderRoot.querySelector('section[fastening]');
@@ -458,9 +494,6 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             this.fastenCandidate = undefined;
             return html `<div fastened fasten-at-origin>
         <p>${this.heldWords(asset)}</p>
-        <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
-          <md-icon>link_off</md-icon>${i18next.t('figure.button.detach')}
-        </button>
         ${this.renderDetachWords()}
       </div>`;
         }
@@ -520,17 +553,13 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         */
         const current = asset.joints?.find(j => j.body1.part === this.partId);
         const editing = i18next.t('figure.text.fasten-new');
-        /* A blank attachment is not a form to decipher. Ask for the thing to attach to first. */
-        if (!current && !this.choosingFastening && !f.target)
-            return html `
-        <p hint>${i18next.t('figure.text.fasten-start')}</p>
-        <button act ?disabled=${this.locked} @click=${() => (this.choosingFastening = true)}>
-          <md-icon>link</md-icon>${i18next.t('figure.button.fasten-start')}
-        </button>
-      `;
-        return html `
-      ${current ? nothing : html `<p fasten-mode>${editing}</p>`}
-      ${this.overhangNote.length ? html `<p hint overhang-note>${this.overhangNote.join(' ')}</p>` : nothing}
+        /*
+          A fastening the part has, said in one line -- what, on which face, how -- and 「바꾸기」 to open the drawing and the
+          details (chief architect 2026-10-16). They were open on every fastened part, near a screen of the panel, for a
+          choice made once. Taking it off is in the group's 「⋯」. What would hang over still shows: it is about now.
+        */
+        /* What hangs over the face, and the way to fix it: about the fastening as it is now, so said open or folded. */
+        const overhang = html `${this.overhangNote.length ? html `<p hint overhang-note>${this.overhangNote.join(' ')}</p>` : nothing}
       ${this.overhangWords.length
             ? html `<div overhang role="status">
             ${this.overhangWords.map(line => html `<p>${line}</p>`)}
@@ -541,15 +570,28 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
                   ${this.fixNote ? html `<p hint fix-note>${this.fixNote}</p>` : nothing}`
                 : nothing}
           </div>`
-            : nothing}
-      ${held
-            ? html `<div fastened>
-            <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
-              <md-icon>link_off</md-icon>${i18next.t('figure.button.detach')}
-            </button>
-            ${this.renderDetachWords()}
-          </div>`
-            : nothing}
+            : nothing}`;
+        if (current && held && !this.changingFastening && (f.toPlane || f.target))
+            return html `
+        ${overhang}
+        <div fastened-summary>
+          <p fasten-sentence>${this.sentenceOf(myFace, f.toPlane ? planeWord : `${f.target}의 ${i18next.t('figure.label.face-' + targetFace)}`, mode)}</p>
+          <button quiet change-fastening ?disabled=${this.locked} @click=${() => (this.changingFastening = true)}>${i18next.t('figure.button.change-fastening')}</button>
+        </div>
+        ${this.renderDetachWords()}
+      `;
+        /* A blank attachment is not a form to decipher. Ask for the thing to attach to first. */
+        if (!current && !this.choosingFastening && !f.target)
+            return html `
+        <p hint>${i18next.t('figure.text.fasten-start')}</p>
+        <button act ?disabled=${this.locked} @click=${() => (this.choosingFastening = true)}>
+          <md-icon>link</md-icon>${i18next.t('figure.button.fasten-start')}
+        </button>
+      `;
+        return html `
+      ${current ? nothing : html `<p fasten-mode>${editing}</p>`}
+      ${overhang}
+      ${held ? this.renderDetachWords() : nothing}
       <div form>
         <span>${i18next.t('figure.label.target-part')}</span>
         <select @change=${(e) => {
@@ -989,6 +1031,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureLinks.prototype, "choosingFastening", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLinks.prototype, "changingFastening", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)