@things-factory/figure-ui 10.1.91 → 10.1.92

package/dist-client/modeller/editor.js

@@ -379,7 +379,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     [off] {
       display: none !important;
     }
-    /* Which part the panel speaks of, and the way back to the whole figure. */
+    /* Which part the panel speaks of. */
     div[subject] {
       position: sticky;
       top: 0;
@@ -390,41 +390,6 @@ let FigureEditor = class FigureEditor extends LitElement {
       background: var(--md-sys-color-surface-container-lowest);
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
     }
-    nav[path] {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      min-width: 0;
-    }
-    nav[path] button[model-crumb] {
-      flex: none;
-      max-width: 55%;
-      height: 28px;
-      padding: 0 8px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 999em;
-      background: none;
-      color: var(--md-sys-color-primary);
-      cursor: pointer;
-    }
-    nav[path] button[model-crumb][on] {
-      border-color: var(--md-sys-color-primary);
-      background: var(--md-sys-color-primary-container);
-    }
-    nav[path] button[model-crumb]:focus-visible {
-      outline: 2px solid var(--md-sys-color-primary);
-      outline-offset: 1px;
-    }
-    nav[path] span[current] {
-      min-width: 0;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      font-weight: 600;
-    }
     div[subject-summary] {
       display: grid;
       gap: 1px;
@@ -638,7 +603,27 @@ let FigureEditor = class FigureEditor extends LitElement {
          * own Esc, the part removed, another figure opened -- it closes and lets go of the preview it held.
          */
         if (this.sectionEditing && this.sectionEditing !== this.selected)
+            this.leaveSectionEditor(this.selected);
+    }
+    /**
+     * The selection moved off the part being edited. With nothing changed there the editor closes; with changes, the part
+     * stays selected while the editor asks (apply, let go, keep editing), and the move goes on only once it closed. A part
+     * gone or another figure opened has nothing to go back to: the editor closes.
+     */
+    leaveSectionEditor(next) {
+        const editing = this.sectionEditing;
+        const editor = this.renderRoot.querySelector('figure-section-editor');
+        const view = this.session?.read();
+        const stillThere = !!view?.geometry.some(g => ownerOf(g.id) === editing);
+        if (!editor?.dirty || !stillThere) {
             this.closeSectionEditor();
+            return;
+        }
+        this.selected = editing;
+        editor.requestClose().then(closed => {
+            if (closed && this.selected === editing)
+                this.selected = next;
+        });
     }
     /** The scene toggles: the mode already shown takes the gizmo away. */
     useGizmo(mode) {
@@ -1019,14 +1004,11 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     renderPlaneAlign(asset, unavailable) {
         const placement = asset.placement ?? 'floor';
-        const icon = { floor: 'vertical_align_bottom', ceiling: 'vertical_align_top', wall: 'flip_to_back', center: 'vertical_align_center' }[placement];
         /* A tilted part touches the plane at a point or an edge, a ball at its lowest; the tooltip says so rather than promise a face (designer 2026-09-27). */
         const contact = this.planeContactOf(this.session.source(), this.selected);
         const told = contact === 'tilted' || contact === 'extreme' ? `-${contact}` : '';
-        return html `<button plane-align=${placement} ?disabled=${unavailable} aria-label=${i18next.t(`figure.button.align-to-${placement}`)}
-      title=${i18next.t(`figure.text.align-to-${placement}${told}`)} @click=${() => this.alignToPlane()}>
-      <md-icon>${icon}</md-icon>
-    </button>`;
+        return html `<button plane-align=${placement} ?disabled=${unavailable} title=${i18next.t(`figure.text.align-to-${placement}${told}`)}
+      @click=${() => this.alignToPlane()}>${i18next.t(`figure.button.align-to-${placement}`)}</button>`;
     }
     alignToPlane() {
         const asset = parseFigureAsset(this.session.source());
@@ -1051,26 +1033,30 @@ let FigureEditor = class FigureEditor extends LitElement {
         catch {
             return null;
         }
-        const tool = (name, icon, label, title) => html `<button ?disabled=${unavailable} aria-label=${i18next.t(label)} title=${i18next.t(title)} @click=${() => this.align(name)}>
-        <md-icon>${icon}</md-icon>
-      </button>`;
-        return html `<div tools title=${i18next.t('figure.text.tools-explained')}>
-      ${tool('centre-x', 'horizontal_distribute', 'figure.button.center-x', 'figure.text.center-on-x')}
-      ${tool('centre-z', 'vertical_align_center', 'figure.button.center-z', 'figure.text.center-on-z')}
-      ${this.renderPlaneAlign(asset, unavailable)}
-      ${['x', 'z'].map(axis => {
-            const able = canMirror(asset, this.selected, axis, reach);
-            return html `<button
-          ?disabled=${unavailable || !able}
-          aria-label=${i18next.t('figure.button.mirror-' + axis)}
-          title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')}
-          @click=${() => this.mirror(axis)}
-        >
-          <md-icon>${axis === 'x' ? 'flip' : 'flip_camera_android'}</md-icon>
-        </button>`;
-        })}
-      ${tool('snap', 'grid_on', 'figure.button.snap', 'figure.text.snap-explained')}
-    </div>`;
+        /*
+         * In words, two rows by what they do (user 2026-10-01: 「무엇을 하는 것인지 모르겠다」): moving the part to the figure's
+         * centre lines, onto its plane or onto the grid; and making a mirrored copy, which makes a part and moves nothing.
+         */
+        const tool = (name, label, title) => html `<button ?disabled=${unavailable} title=${i18next.t(title)} @click=${() => this.align(name)}>${i18next.t(label)}</button>`;
+        const mirrors = ['x', 'z'].map(axis => ({ axis, able: canMirror(asset, this.selected, axis, reach) }));
+        return html `<div vector-row>
+        <label>${i18next.t('figure.label.tools')}</label>
+        <div tools>
+          ${tool('centre-x', 'figure.button.center-x', 'figure.text.center-on-x')}
+          ${tool('centre-z', 'figure.button.center-z', 'figure.text.center-on-z')}
+          ${this.renderPlaneAlign(asset, unavailable)}
+          ${tool('snap', 'figure.button.snap', 'figure.text.snap-explained')}
+        </div>
+      </div>
+      <div vector-row>
+        <label>${i18next.t('figure.label.mirror-copy')}</label>
+        <div tools>
+          ${mirrors.map(({ axis, able }) => html `<button ?disabled=${unavailable || !able} title=${i18next.t('figure.text.mirror-explained')} @click=${() => this.mirror(axis)}>
+              ${i18next.t('figure.button.mirror-' + axis)}
+            </button>`)}
+        </div>
+      </div>
+      ${mirrors.every(m => !m.able) ? html `<p hint>${i18next.t('figure.text.mirror-would-overlap')}</p>` : nothing}`;
     }
     /**
      * A part's name. It renames every value the part owns, and what refers to them follows
@@ -1906,12 +1892,11 @@ let FigureEditor = class FigureEditor extends LitElement {
     </div>`;
     }
     /**
-     * Where the panel is, held at its top: the model by its name -- the way back to its settings -- and the part chosen,
-     * with the part's three lines: its kind, how its size answers, what holds it (designer 2026-09-27, B and B.1). The
-     * model name is the same move as the parts list's root; there is no separate "whole figure" link.
+     * The part the panel speaks of, held at its top: its kind, how its size answers, what holds it (designer 2026-09-27,
+     * B). No path above it (user 2026-10-01): the parts list and the canvas already show which part is chosen, and the
+     * list's root is the way back to the model's settings.
      */
     renderSubject() {
-        const name = this.session?.read()?.name || i18next.t('figure.text.new-figure-name');
         let summary;
         try {
             summary = this.selected ? partSummaryOf(parseFigureAsset(this.session.source()), ownerOf(this.selected), (key, params) => i18next.t(key, params)) : undefined;
@@ -1919,24 +1904,17 @@ let FigureEditor = class FigureEditor extends LitElement {
         catch {
             summary = undefined;
         }
+        if (!summary)
+            return nothing;
         return html `<div subject>
-      <nav path aria-label=${i18next.t('figure.label.panel-path')}>
-        <button model-crumb ?on=${!this.selected} title=${`${i18next.t('figure.button.show-model-settings')} · ${name}`}
-          aria-label=${`${i18next.t('figure.button.show-model-settings')}: ${name}`} @click=${() => this.showModelSettings()}>${name}</button>
-        ${this.selected
-            ? html `<span aria-hidden="true">›</span><span current aria-current="location" title=${partLabelOf(this.selected)}>${partLabelOf(this.selected)}</span>`
-            : html `<span aria-hidden="true">·</span><span current aria-current="location">${i18next.t('figure.label.model-settings')}</span>`}
-      </nav>
-      ${summary
-            ? html `<div subject-summary>
-            ${summary.kind ? html `<b>${summary.kind}</b>` : nothing}
-            <small>${summary.size}</small><small>${summary.relation}</small>
-          </div>`
-            : nothing}
+      <div subject-summary>
+        ${summary.kind ? html `<b>${summary.kind}</b>` : nothing}
+        <small>${summary.size}</small><small>${summary.relation}</small>
+      </div>
     </div>`;
     }
     /**
-     * The model's settings: the same move from the parts list's root and from the panel's path (B.1). It shows them on
+     * The model's settings, from the parts list's root (B.1). It shows them on
      * the properties tab whatever tab was open; it changes no data, no camera, no history and no AI conversation.
      */
     showModelSettings() {
@@ -2172,7 +2150,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             ? html `<section>
           <h3>${i18next.t(vectorTitle)}</h3>
           ${groups.vectors.map(g => this.renderVector(g, unavailable, held))}
-          ${tools ? html `<div vector-row><label>${i18next.t('figure.label.tools')}</label>${tools}</div>` : nothing}
+          ${tools ?? nothing}
         </section>`
             : nothing}
     ${groups.singles.length
@@ -2282,14 +2260,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.linkCommand(refit.step);
     }
     renderSingle(name, field, unavailable) {
-        /* A drawn section's point is called by its number and axis, as the section editor calls it (ADR-0100 §2.1, Q9). */
-        const point = /^point\.p(\d+)\.([xyz])$/.exec(name);
-        const apex = /^apex\.([xyz])$/.exec(name);
-        const words = point
-            ? [i18next.t('figure.label.section-editor-coordinate', { point: point[1], axis: point[2].toUpperCase() })]
-            : apex
-                ? [`${i18next.t('figure.label.section-editor-apex-mark')} ${apex[1].toUpperCase()}`]
-                : name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }));
+        const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }));
         return html `<span ?scrub=${!unavailable} @pointerdown=${(e) => this.scrub(field, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
       ><input
         aria-label=${field.id}