@things-factory/figure-ui 10.1.193 → 10.1.195

package/dist-client/modeller/editor.js

@@ -80,8 +80,10 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.error = '';
         this.tab = 'properties';
         /**
-         * The fastening window open for the selected part (user 2026-10-17), in the standard popup (2026-10-18): chosen there,
-         * applied once. It closes with nothing written when the part, the tab or the middle changes under it.
+         * The fastening window open for the selected part (user 2026-10-17): chosen there, applied once. It stands over the
+         * side panel, not over the canvas, so what is chosen is seen in 3D as it is chosen (user 2026-10-19: the standard
+         * popup, always modal, covered the preview). It closes with nothing written when the part, the tab, the middle or a
+         * bar panel changes under it.
          */
         this.fastening = false;
         /** Why the window's 「적용」 was refused, said in it. */
@@ -219,7 +221,7 @@ let FigureEditor = class FigureEditor extends LitElement {
           aria-pressed=${String(this.gizmoMode === tool.mode)}
           ?disabled=${!tool.can}
           aria-label=${i18next.t('figure.button.gizmo-' + tool.mode)}
-          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + i18next.t(tool.mode === 'scale' && this.sizeDragUnsure(this.asset(), this.selected) ? 'figure.text.gizmo-size-turned-fastening' : 'figure.text.gizmo-not-own', { part: partLabelOf(this.selected), extreme: this.keptExtremeWord() })}`}
+          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + (tool.mode === 'scale' && this.sizeDragUnsure(this.asset(), this.selected) ? this.sizeDragRefusalOf(this.selected) : i18next.t('figure.text.gizmo-not-own'))}`}
           @click=${() => this.useGizmo(tool.mode)}
         >
           <md-icon>${tool.icon}</md-icon>
@@ -261,7 +263,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (_changed.has('selected'))
             this.gizmoMode = undefined;
         /* The window is about the part chosen on the properties tab, being edited: it does not follow anywhere else. */
-        if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit'))
+        if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit' || this.overlay))
             this.closeFastening();
         /*
          * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
@@ -295,7 +297,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (mode === 'scale' && this.selected && this.gizmoMode !== 'scale') {
             const asset = this.asset();
             if (asset && this.sizeDragUnsure(asset, this.selected)) {
-                this.error = i18next.t('figure.text.gizmo-size-turned-fastening', { part: partLabelOf(this.selected), extreme: this.keptExtremeWord() });
+                this.tellSizeByFields(this.selected);
                 return;
             }
         }
@@ -575,6 +577,28 @@ let FigureEditor = class FigureEditor extends LitElement {
             return true;
         }
     }
+    /**
+     * Why this part's size is not dragged, in one line (user 2026-10-19: the reason told the faces kept, and was not
+     * understood): attached turned or twisted, or turned off its upright.
+     */
+    sizeDragRefusalOf(id) {
+        const fastened = !!this.asset()?.joints?.some(j => j.body1.part === ownerOf(id));
+        return i18next.t(fastened ? 'figure.text.gizmo-size-turned-fastening' : 'figure.text.gizmo-size-tilted', { part: partLabelOf(id) });
+    }
+    /** The size drag refused, said as a notice with the way to the part's size fields. */
+    tellSizeByFields(id) {
+        this.refusals.point(this.sizeDragRefusalOf(id), { label: i18next.t('figure.button.to-size-fields'), run: () => this.toSizeFields(id) });
+    }
+    /** To the part's first size field it takes typed, on the properties tab, ready to type over. */
+    async toSizeFields(id) {
+        this.middle = 'edit';
+        this.tab = 'properties';
+        this.selected = id;
+        await this.updateComplete;
+        const field = this.renderRoot.querySelector('[slot="size"] input:not([disabled]):not([readonly])');
+        field?.focus();
+        field?.select();
+    }
     /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
     transformed(id, result) {
         const view = this.session.read();
@@ -603,7 +627,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         const jointed = !!asset.joints?.some(j => j.body1.part === ownerOf(id));
         /* A size drag this part cannot show truly is not written: it springs back, and the reason is said. */
         if (result.scale && result.scale.some(k => Math.abs(k - 1) > 1e-4) && this.sizeDragUnsure(asset, id)) {
-            this.error = i18next.t('figure.text.gizmo-size-turned-fastening', { part: partLabelOf(id), extreme: this.keptExtremeWord() });
+            this.tellSizeByFields(id);
             return this.requestUpdate();
         }
         /*
@@ -681,10 +705,6 @@ let FigureEditor = class FigureEditor extends LitElement {
      * fastened. Refused, it says why.
      */
     /* What a tilted part's typed size keeps, by the figure's placement: not the floor's lowest point everywhere (designer 2026-09-27). */
-    keptExtremeWord() {
-        const placement = (this.asset())?.placement ?? 'floor';
-        return i18next.t(`figure.label.kept-extreme-${placement}`);
-    }
     /* How the selected part would meet the plane, worked out once per version and part. */
     planeContactOf(shown, part) {
         return derivedOf(shown, `plane-contact|${part}`, () => {
@@ -886,6 +906,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     renderOverlay() {
         const close = () => (this.overlay = undefined);
         const panel = (which, label, body) => html `<div
+      side-overlay
       bar-overlay-panel=${which}
       role="dialog"
       aria-label=${i18next.t(label)}
@@ -1458,50 +1479,46 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.openFastening();
     }
     openFastening() {
-        if (!this.selected || this.fastenPopup)
+        if (!this.selected || this.fastening)
             return;
         this.fastenError = '';
         this.fastenHover = null;
+        /* One panel over the side at a time: the view or the history gives way to the window. */
+        this.overlay = undefined;
         this.fastening = true;
-        const content = document.createElement('figure-fasten-dialog');
-        content.addEventListener('preview-command', e => this.commandPreview.ask(e.detail));
-        content.addEventListener('fasten-hover', e => this.hoverFastening(e.detail));
-        content.addEventListener('fasten-apply', e => this.applyFastening(e.detail.action));
-        content.addEventListener('fasten-cancel', () => this.closeFastening());
-        this.fastenWindow = content;
-        this.tellFastening();
-        const popup = openPopup(html `${content}`, { title: i18next.t('figure.label.fastening'), size: 'fit', backdrop: true, movable: true, closable: true, escapable: true });
-        this.fastenPopup = popup;
-        /* Closed by its own X or Esc as well: the editor lets go of it the same way. */
-        popup.result.then(() => this.fastenPopup === popup && this.fastenClosed());
     }
     closeFastening() {
-        const popup = this.fastenPopup;
-        this.fastenClosed();
-        popup?.close();
-    }
-    fastenClosed() {
-        this.fastenPopup = undefined;
-        this.fastenWindow = undefined;
         this.fastening = false;
         this.fastenError = '';
         this.fastenHover = null;
     }
-    /** What the window shows is the editor's: the figure on screen, the part, and what the preview and a refusal said. */
-    tellFastening() {
-        const content = this.fastenWindow;
-        const view = this.session?.read();
-        if (!content || !view)
-            return;
-        content.revision = this.shown();
-        content.partId = this.selected;
-        content.locked = view.loading || !!view.error || view.saving || !view.context;
-        content.previewWords = this.commandPreview.words();
-        content.error = this.fastenError;
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.closeFastening();
+    /**
+     * The fastening window over the side panel, as the bar's panels stand there: the figure on screen, the part, and what
+     * the preview and a refusal said are the editor's. Its own Esc and 「취소」 close it, as its X does.
+     */
+    renderFastening(unavailable) {
+        if (!this.fastening || !this.selected)
+            return nothing;
+        return html `<div side-overlay fasten-panel>
+      <div overlay-head>
+        <h3>${i18next.t('figure.label.fastening')}</h3>
+        <button quiet fasten-close aria-label=${i18next.t('figure.button.close')} title=${i18next.t('figure.button.close')} @click=${() => this.closeFastening()}>
+          <md-icon>close</md-icon>
+        </button>
+      </div>
+      <figure-fasten-dialog
+        overlay-body
+        .revision=${this.shown()}
+        .partId=${this.selected}
+        ?locked=${unavailable}
+        .previewWords=${this.commandPreview.words()}
+        .error=${this.fastenError}
+        @preview-command=${(e) => this.commandPreview.ask(e.detail)}
+        @fasten-hover=${(e) => this.hoverFastening(e.detail)}
+        @fasten-apply=${(e) => this.applyFastening(e.detail.action)}
+        @fasten-cancel=${() => this.closeFastening()}
+      ></figure-fasten-dialog>
+    </div>`;
     }
     /** 「적용」: the command, one step; refused, the window stays open and says why. */
     applyFastening(action) {
@@ -1573,7 +1590,6 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     updated(changed) {
         super.updated?.(changed);
-        this.tellFastening();
         /* Nothing blocks release any more: the list under the bar closes, and opens fresh when something does again. */
         if (changed.has('releaseBlockers') && !this.releaseBlockers.length && this.blockersOpen)
             this.blockersOpen = false;
@@ -1964,7 +1980,7 @@ let FigureEditor = class FigureEditor extends LitElement {
           <div panel flush ?off=${tab !== 'verdict'}><slot name="verdict"></slot></div>
         </aside>
       </ox-three-pane>
-      ${this.renderOverlay()}`;
+      ${this.renderOverlay()} ${this.renderFastening(unavailable)}`;
     }
     /** Position, rotation and size as rows of three cells; the shape's own measures one to a line, under their title. */
     renderGroups(groups, vectorTitle, singleTitle, unavailable, tools = null, held) {