@things-factory/figure-ui 10.1.82 → 10.1.84

package/dist-client/modeller/figure-links.d.ts

@@ -47,8 +47,8 @@ export declare class FigureLinks extends FigureLinks_base {
     private working;
     private fastenCandidate?;
     private rowCandidate?;
-    /** The directions ticked for "follow the size, attached", per part, once the author has ticked or fixed any. */
-    private pendingAxes;
+    /** A new fastening starts with a target. Its face and alignment are asked only after that target is chosen. */
+    private choosingFastening;
     /** The fastening section, marked for a moment when "open attachment settings" brings it into view. */
     private spotlit;
     private fasten;

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

@@ -3,8 +3,8 @@ 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 { FIGURE_FACES, planFigureResize } from '@hatiolab/figure-model';
-import { acceptsOf, alignAxesOf, mountingPlaneOf, alignOf, AXES, canFasten, facesOf, canFollow, dimensionNow, followableAxes, positionIsShare, choiceOf, heldBy, followOf, hangsFrom, shownWhenOf, visibilityControlsOf, placeKeptOf, fasteningOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, rowBlockOf, fixedJointOf, rowOf, positionsWorkedOut, resizeAxesOf, fieldWordsOf, measureNow } from './links.js';
+import { FIGURE_FACES } from '@hatiolab/figure-model';
+import { acceptsOf, alignAxesOf, mountingPlaneOf, alignOf, AXES, canFasten, facesOf, canFollow, dimensionNow, followableAxes, positionIsShare, choiceOf, heldBy, followOf, hangsFrom, shownWhenOf, visibilityControlsOf, placeKeptOf, fasteningOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, rowBlockOf, fixedJointOf, rowOf, positionsWorkedOut, fieldWordsOf, measureNow } from './links.js';
 import { SidePanelStyles } from './side-panel-styles.js';
 import { HelpToggles } from './help.js';
 const FACES = Object.keys(FIGURE_FACES);
@@ -58,8 +58,8 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         this.told = '';
         /* Two forms describe a command here: the fastening and the row. The one being worked on is the one seen. */
         this.working = 'fasten';
-        /** The directions ticked for "follow the size, attached", per part, once the author has ticked or fixed any. */
-        this.pendingAxes = {};
+        /** A new fastening starts with a target. Its face and alignment are asked only after that target is chosen. */
+        this.choosingFastening = false;
         /** The fastening section, marked for a moment when "open attachment settings" brings it into view. */
         this.spotlit = false;
         this.fasten = freshFasten();
@@ -91,10 +91,9 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
     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; }
-    /* What will be applied: a pending choice, boxed apart from the rows above. */
-    fieldset[resize-pending] { display: grid; gap: 8px; margin: 12px 0; padding: 10px 12px; border: 1px dashed var(--border-color, #8888); border-radius: 6px; }
-    fieldset[resize-pending] label { display: flex; align-items: center; gap: 6px; }
-    fieldset[resize-pending] small { opacity: 0.7; }
+    /* 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; }
+    details[resize-choice] > div { display: grid; gap: 8px; padding: 8px 0; }
     div[resize-held] { display: grid; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); }
     div[resize-held] p { margin: 0; display: flex; align-items: center; gap: 6px; }
     p[fasten-mode] { margin: 0; font-weight: 600; }
@@ -131,6 +130,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             this.place = freshPlace();
             this.row = freshRow();
             this.editingMotion = false;
+            this.choosingFastening = false;
         }
     }
     updated() {
@@ -245,39 +245,11 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names } }, bubbles: true, composed: true }));
     }
     renderDimensions(asset) {
-        /*
-          The kernel's plan for "follow the size and keep where the figure is placed" (ADR-0097), with the directions the
-          author ticked below -- a pending choice, drawn apart from the rows above, which only say what each direction does
-          now (designer 2026-09-27: the immediate and the pending are not mixed in one look).
-        */
         const editable = followableAxes(asset, this.partId);
-        const choice = resizeAxesOf(asset, this.partId, this.pendingAxes[this.partId]);
-        const axes = choice.axes;
-        const plan = planFigureResize(asset, { part: this.partId, axes });
-        const mode = plan.mode;
         const round = editable.length === 2;
         const word = (axis) => i18next.t(round && axis === 'x' ? 'figure.label.resize-diameter' : `figure.label.resize-${axis}`);
-        const scope = axes.length && axes.length === editable.length
-            ? i18next.t(`figure.text.resize-scope-all-${editable.length}`)
-            : i18next.t('figure.text.resize-scope-only', { axes: axes.map(word).join(' · ') });
-        const ask = (gap) => this.dispatchEvent(new CustomEvent('resize-with-placement', { detail: { request: { part: this.partId, axes, ...(gap ? { gap } : {}) } }, bubbles: true, composed: true }));
-        const gapChoice = plan.refusal?.code === 'GAP_CHOICE' ? plan.refusal : undefined;
-        /* Brought onto the plane, where it moves -- said on the button before it is pressed. */
-        const onto = gapChoice ? planFigureResize(asset, { part: this.partId, axes, gap: 'plane' }).moves[0] : undefined;
-        const place = i18next.t(`figure.label.resize-place-${mode}`);
-        const tick = (axis, on) => {
-            const next = on ? [...new Set([...axes, axis])] : axes.filter(one => one !== axis);
-            this.pendingAxes = { ...this.pendingAxes, [this.partId]: next };
-        };
         const others = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFollow(asset, one));
-        /* One step for the whole part (figure-model follow-size): the size is declared from the parts if there is none. */
         const followsAll = editable.every(axis => followOf(asset, this.partId, axis).of === 'instance');
-        const whole = followsAll
-            ? nothing
-            : html `<button act follow-size ?disabled=${this.locked} @click=${() => this.command({ kind: 'follow-size', part: this.partId })}>
-          <md-icon>open_in_full</md-icon>${i18next.t('figure.button.follow-size')}
-        </button>`;
-        const held = plan.refusal?.code === 'HELD';
         return html `<p hint>${i18next.t('figure.text.resize-intent')}</p>
       ${asset.sizing === 'uniform' ? html `<p hint>${i18next.t('figure.text.resize-uniform-warning')}</p>` : nothing}
       <div resize-now>${editable.map(axis => {
@@ -292,46 +264,17 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
           ${following
                 ? html `<button link resize-unfollow=${axis} ?disabled=${this.locked}
                 @click=${() => {
-                    /* Set back to fixed: the author's choice for this part from now on, not a blank to fill with "all". */
-                    this.pendingAxes = { ...this.pendingAxes, [this.partId]: axes.filter(one => one !== axis) };
                     this.follow(asset, axis, 'own', now);
                 }}>${i18next.t('figure.button.resize-unfollow')}</button>`
                 : nothing}
         </div>`;
         })}</div>
-      ${held
-            ? this.renderHeld(asset)
-            : html `<fieldset resize-pending ?disabled=${this.locked || asset.sizing === 'uniform'}>
-            <legend>${i18next.t('figure.label.resize-pending')}</legend>
-            ${editable.map(axis => {
-                const now = followOf(asset, this.partId, axis);
-                const following = now.of === 'instance' && now.axis === axis;
-                const custom = now.of !== 'own' && !following;
-                return html `<label>
-                <input type="checkbox" resize-tick=${axis} .checked=${axes.includes(axis)} ?disabled=${following || custom}
-                  @change=${(e) => tick(axis, e.target.checked)} />
-                ${word(axis)}${following ? html ` <small>${i18next.t('figure.text.resize-already-following')}</small>` : nothing}
-              </label>`;
-            })}
-            <p hint resize-basis>${i18next.t(`figure.text.resize-basis-${choice.basis}`)}</p>
-            <p hint>${i18next.t('figure.text.placement-intent-' + mode)}</p>
-            ${gapChoice
-                ? html `<p hint gap-choice>${i18next.t(gapChoice.mm > 0 ? 'figure.text.resize-gap-off' : 'figure.text.resize-gap-through', { place, mm: String(Math.abs(Math.round(gapChoice.mm * 10) / 10)) })}</p>
-                  <button act resize-keep-gap @click=${() => ask('keep')}>
-                    ${i18next.t(gapChoice.mm > 0 ? 'figure.button.resize-keep-gap' : 'figure.button.resize-keep-through', { scope, mm: String(Math.abs(Math.round(gapChoice.mm * 10) / 10)) })}
-                  </button>
-                  <button act resize-onto-plane @click=${() => ask('plane')}>
-                    ${i18next.t('figure.button.resize-onto-plane-' + mode, { scope })}
-                    ${onto ? html `<small>${i18next.t('figure.text.resize-move', { axis: onto.axis.toUpperCase(), mm: String(Math.round((onto.to - onto.from) * 10) / 10) })}</small>` : nothing}
-                  </button>`
-                : html `<button act resize-with-placement ?disabled=${choice.basis === 'none' || plan.refusal?.code === 'UNIFORM_POLICY'} @click=${() => ask()}>
-                  ${i18next.t('figure.button.resize-scoped-' + mode, { scope })}
-                </button>`}
-            ${!plan.refusal && plan.replaces.length
-                ? html `<p hint resize-replaces>${i18next.t('figure.text.resize-replaces', { fields: [...new Set(plan.replaces.map(id => fieldWordsOf(id, key => i18next.t(key))))].join(' · '), place })}</p>`
-                : nothing}
-          </fieldset>`}
-      <details><summary>${i18next.t('figure.label.resize-advanced')}</summary>${whole}${followableAxes(asset, this.partId).map(axis => {
+      ${followsAll
+            ? html `<p hint>${i18next.t('figure.text.resize-all-following')}</p>`
+            : 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>`}
+      <details resize-choice><summary>${i18next.t('figure.label.resize-advanced')}</summary><div>${followableAxes(asset, this.partId).map(axis => {
             const now = followOf(asset, this.partId, axis);
             const value = choiceOf(now);
             /* A cylinder's two measures are its radius and its length; its X and Y name them. */
@@ -365,7 +308,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
               </label>`
                 : nothing}
       </div>`;
-        })}</details>`;
+        })}</div></details>`;
     }
     /**
      * "Open attachment settings": the fastening this part has now -- its face, what it is on, the gap -- in the form below,
@@ -543,6 +486,14 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
                 target: 'plane' in current.body0 ? i18next.t('figure.label.mounting-plane') : `${current.body0.part} · ${i18next.t(`figure.label.face-${current.body0.face}`)}`
             })
             : 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 `
       <p fasten-mode ?editing=${!!current}>${editing}</p>
       ${this.overhangNote.length ? html `<p hint overhang-note>${this.overhangNote.join(' ')}</p>` : nothing}
@@ -563,32 +514,30 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
           </div>
           ${this.renderDetachWords()}`
             : nothing}
-      <div form>
-        <span>${i18next.t('figure.label.my-face')}</span>
-        <select @change=${(e) => (this.fasten = { ...f, face: e.target.value })}>
-          ${mineFaces.map(face => html `<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
-        </select>
-      </div>
-      <label toggle>
-        <input type="checkbox" .checked=${f.toPlane} @change=${(e) => this.aimAt(asset, { ...f, toPlane: e.target.checked })} />
-        ${i18next.t('figure.label.stands-on-plane')}
-      </label>
       ${f.toPlane
-            ? nothing
+            ? html `<p hint>${i18next.t('figure.text.fasten-edit-on-plane')}</p>`
             : html `<div form>
-            <span>${i18next.t('figure.label.target-part')}</span>
-            <select @change=${(e) => this.aimAt(asset, { ...f, target: e.target.value })}>
-              <option value="" ?selected=${!f.target}>—</option>
-              ${targets.map(one => loops(one)
+              <span>${i18next.t('figure.label.target-part')}</span>
+              <select @change=${(e) => this.aimAt(asset, { ...f, target: e.target.value })}>
+                <option value="" ?selected=${!f.target}>${i18next.t('figure.label.target-part-placeholder')}</option>
+                ${targets.map(one => loops(one)
                 ? html `<option value=${one} disabled>${i18next.t('figure.text.target-would-loop', { part: one, mine: this.partId })}</option>`
                 : html `<option value=${one} ?selected=${one === f.target}>${one}</option>`)}
-            </select>
-            <span>${i18next.t('figure.label.target-face')}</span>
-            <select @change=${(e) => this.aimAt(asset, { ...f, targetFace: e.target.value })}>
-              ${theirFaces.map(face => html `<option value=${face} ?selected=${face === targetFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
-            </select>
-          </div>`}
-      <details fasten-detail>
+              </select>
+            </div>
+            ${f.target
+                ? html `<div form>
+                    <span>${i18next.t('figure.label.my-face')}</span>
+                    <select @change=${(e) => (this.fasten = { ...f, face: e.target.value })}>
+                      ${mineFaces.map(face => html `<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
+                    </select>
+                    <span>${i18next.t('figure.label.target-face')}</span>
+                    <select @change=${(e) => this.aimAt(asset, { ...f, targetFace: e.target.value })}>
+                      ${theirFaces.map(face => html `<option value=${face} ?selected=${face === targetFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
+                    </select>
+                  </div>`
+                : html `<p hint>${i18next.t('figure.text.fasten-target-first')}</p>`}`}
+      ${(f.toPlane || f.target) ? html `<details fasten-detail>
         <summary>${i18next.t('figure.label.fasten-detail')} · <span fasten-summary>${detail.length ? detail.join(' · ') : i18next.t('figure.text.fasten-summary-default')}</span></summary>
         ${f.toPlane
             ? nothing
@@ -610,7 +559,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
       ${action && this.working === 'fasten' ? this.renderPreviewWords() : nothing}
       <button act ?disabled=${this.locked || !action} @click=${() => action && this.command(action)}>
         <md-icon>link</md-icon>${i18next.t(current ? 'figure.button.fasten-update' : 'figure.button.fasten')}
-      </button>
+      </button>` : nothing}
     `;
     }
     renderDetachWords() {
@@ -937,7 +886,7 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], FigureLinks.prototype, "pendingAxes", void 0);
+], FigureLinks.prototype, "choosingFastening", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)