@things-factory/figure-ui 10.1.92 → 10.1.93

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

@@ -6,8 +6,12 @@ import { i18next, localize } from '@operato/i18n';
 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 './figure-fasten-drawing.js';
+import { faceViewOf, modeOf, myFaceFor, turnsInPlace } from './fasten-geometry.js';
 import { HelpToggles } from './help.js';
 const FACES = Object.keys(FIGURE_FACES);
+/** The target list's entry for the plane the figure stands by. */
+const PLANE = '__plane';
 const freshFasten = () => ({
     face: 'bottom',
     toPlane: false,
@@ -438,15 +442,19 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         /* The faces are the ones each shape declares: a part is fastened by one of its outer faces, to any face of the target. */
         /* On the mounting plane only the faces it takes: a bottom or a top on the floor, a back on a wall. */
         const plane = mountingPlaneOf(asset);
+        const planeWord = i18next.t('figure.label.resize-place-' + (asset.placement ?? 'floor'));
         /* Its outer faces, and its centre -- a roller spins about its middle (ADR-0093); the mounting plane takes a face. */
         const mineFaces = [
             ...facesOf(asset, this.partId).filter(face => FACES.includes(face) && (!f.toPlane || plane.faces.includes(face))),
             ...(f.toPlane ? [] : ['centre'])
         ];
-        const myFace = mineFaces.includes(f.face) ? f.face : mineFaces[0];
         const theirFaces = f.target ? facesOf(asset, f.target) : FACES;
         const targetFace = theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0];
         const aim = f.toPlane ? 'plane' : { part: f.target, face: targetFace };
+        /* The part's own face is not chosen: the target's face and how give it (user 2026-10-01; the kernel takes no other). */
+        const mode = f.toPlane ? 'meet' : modeOf(f.face, f.facing);
+        const derived = f.toPlane || f.target ? myFaceFor(asset, this.partId, aim, mode) : undefined;
+        const myFace = derived ?? (mineFaces.includes(f.face) ? f.face : mineFaces[0]);
         const align = f.target || f.toPlane ? alignOf(asset, this.partId, aim, f.align, f.alignMm, !!f.twist, f.alignInput) : undefined;
         const action = f.toPlane || f.target
             ? {
@@ -514,40 +522,41 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
           </div>
           ${this.renderDetachWords()}`
             : nothing}
-      ${f.toPlane
-            ? 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}>${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>
-            </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>`}`}
+      <div form>
+        <span>${i18next.t('figure.label.target-part')}</span>
+        <select @change=${(e) => {
+            const value = e.target.value;
+            this.aimAt(asset, value === PLANE ? { ...f, toPlane: true, target: '' } : { ...f, toPlane: false, target: value });
+        }}>
+          <option value="" ?selected=${!f.target && !f.toPlane}>${i18next.t('figure.label.target-part-placeholder')}</option>
+          <option value=${PLANE} ?selected=${f.toPlane}>${planeWord}</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 && !f.toPlane}>${one}</option>`)}
+        </select>
+      </div>
+      ${f.toPlane || f.target
+            ? html `<p fasten-sentence>${this.sentenceOf(myFace, f.toPlane ? planeWord : `${f.target}의 ${i18next.t('figure.label.face-' + targetFace)}`, mode)}</p>
+            <figure-fasten-drawing
+              .target=${f.toPlane ? '' : f.target}
+              .planeWord=${planeWord}
+              .faces=${theirFaces}
+              .face=${targetFace}
+              .modes=${f.toPlane ? ['meet'] : ([...['meet', 'flush'], ...(turnsInPlace(asset, this.partId) ? ['centre'] : [])])}
+              .mode=${mode}
+              .view=${faceViewOf(asset, this.partId, aim)}
+              .align=${f.align}
+              .alignMm=${f.alignMm}
+              .gap=${f.gap}
+              .partName=${this.partId}
+              ?locked=${this.locked}
+              ?said=${!!held}
+              @fasten-change=${(e) => this.onFastenChange(asset, e.detail)}
+              @fasten-release=${() => this.onFastenRelease(!!held)}
+            ></figure-fasten-drawing>`
+            : 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
-            : html `<div form>
-              <span>${i18next.t('figure.label.facing')}</span>
-              <select @change=${(e) => (this.fasten = { ...f, facing: e.target.value })}>
-                <option value="meet" ?selected=${f.facing === 'meet'}>${i18next.t('figure.label.facing-meet')}</option>
-                <option value="flush" ?selected=${f.facing === 'flush'}>${i18next.t('figure.label.facing-flush')}</option>
-              </select>
-            </div>`}
         ${this.renderAlignment(f.toPlane || f.target ? alignAxesOf(asset, this.partId, aim, !!f.twist) : [])}
         <div form>
           <span>${i18next.t('figure.label.gap')}</span>
@@ -562,6 +571,34 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
       </button>` : nothing}
     `;
     }
+    /** 「lid 의 아랫면을 bin 의 윗면에 맞닿게」: what the fastening is, in one line, the part's own face said as a result. */
+    sentenceOf(myFace, to, mode) {
+        return i18next.t(`figure.text.fasten-sentence-${mode}`, { part: this.partId, face: i18next.t('figure.label.face-' + myFace), to });
+    }
+    /** A change the drawing asks: to the form only; the preview behind follows the form. */
+    onFastenChange(asset, c) {
+        const f = this.fasten;
+        if ('targetFace' in c)
+            this.aimAt(asset, { ...f, targetFace: c.targetFace });
+        else if ('mode' in c)
+            this.fasten = { ...f, face: c.mode === 'centre' ? 'centre' : f.face === 'centre' ? 'bottom' : f.face, facing: c.mode === 'flush' ? 'flush' : 'meet' };
+        else if ('gap' in c)
+            this.fasten = { ...f, gap: c.gap };
+        else
+            this.fasten = {
+                ...f,
+                align: { ...f.align, [c.axis]: c.how },
+                alignMm: c.how === 'mm' ? { ...f.alignMm, [c.axis]: c.mm ?? 0 } : f.alignMm
+            };
+    }
+    /** Let go: a fastening the part already has is applied as it now is (one step); a new one waits for 붙이기. */
+    async onFastenRelease(held) {
+        if (!held)
+            return;
+        await this.updateComplete;
+        if (this.fastenCandidate)
+            this.command(this.fastenCandidate.action);
+    }
     renderDetachWords() {
         return this.detachWords.length ? html `<ul detach-words>${this.detachWords.map(line => html `<li>${line}</li>`)}</ul>` : nothing;
     }