@things-factory/figure-ui 10.1.84 → 10.1.86

package/dist-client/modeller/editor.d.ts

@@ -7,6 +7,7 @@ import './canvas.js';
 import './figure-parts.js';
 import './figure-material-panel.js';
 import './figure-section-panel.js';
+import './figure-section-editor.js';
 import './figure-links.js';
 import './figure-controls.js';
 import './figure-clips.js';
@@ -73,6 +74,8 @@ export declare class FigureEditor extends LitElement {
     private hiddenParts;
     /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
     private live;
+    /** The part whose drawn section is open in the section editor (ADR-0100 §3.2), or null. */
+    private sectionEditing;
     /**
      * A command seen before it is done (ADR-0097 §5.5): worked out on a copy for the figure, version, part and command it
      * names, and shown only while all four are still the ones on screen. Nothing of it is saved or undone.
@@ -134,6 +137,9 @@ export declare class FigureEditor extends LitElement {
     private currentInputs;
     /** A value in hand: an input's value (design or pose) or a part edit. Nothing is recorded. */
     private hold;
+    private closeSectionEditor;
+    /** A command in hand, drawn and not run; `null` lets go of it and the figure as it stands is drawn again. */
+    private holdAction;
     private changed;
     private save;
     private add;
@@ -287,6 +293,8 @@ export declare class FigureEditor extends LitElement {
      * recipe, or an AI draft when the page offers one. Nothing is added until one is chosen; the type, the space, the
      * mounting face and the tags are not asked for first.
      */
+    /** The section editor over the canvas, the figure behind it drawing what the working points make. */
+    private renderSectionEditor;
     private renderStart;
     /**
      * Where the panel is, held at its top: the model by its name -- the way back to its settings -- and the part chosen,

package/dist-client/modeller/editor.js

@@ -15,6 +15,7 @@ import './canvas.js';
 import './figure-parts.js';
 import './figure-material-panel.js';
 import './figure-section-panel.js';
+import './figure-section-editor.js';
 import { faceHighlightOf, ghostPartsOf, previewWordsOf, rowWordsOf } from './command-preview.js';
 import { motionEndsOf } from './motion-ends.js';
 import './figure-links.js';
@@ -70,12 +71,20 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.hiddenParts = new Set();
         /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
         this.live = NOTHING_LIVE;
+        /** The part whose drawn section is open in the section editor (ADR-0100 §3.2), or null. */
+        this.sectionEditing = null;
         this.lastContext = null;
         /** The modeller's keys (`keys.ts`): undo, redo, duplicate, remove, back to the whole figure, the gizmo's modes. */
         this.onKey = (e) => {
             const view = this.session?.read();
             if (!view || view.loading || view.saving || !view.context || !this.isConnected)
                 return;
+            /*
+             * The section editor open takes the keys for its own: Esc cancels it, Delete deletes a point, Ctrl+Z undoes a point.
+             * Heard here first, they deselected the part, deleted the part and undid the figure's last step (2026-09-30).
+             */
+            if (this.sectionEditing)
+                return;
             const canvas = this.renderRoot.querySelector('figure-canvas');
             const path = e.composedPath();
             const action = keyActionOf({ key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey, target: path[0], inScene: !!canvas && path.includes(canvas) }, this.selected);
@@ -622,6 +631,12 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.selected = '';
         if (_changed.has('selected'))
             this.gizmoMode = undefined;
+        /*
+         * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
+         * 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.closeSectionEditor();
     }
     /** The scene toggles: the mode already shown takes the gizmo away. */
     useGizmo(mode) {
@@ -693,6 +708,15 @@ let FigureEditor = class FigureEditor extends LitElement {
     hold(values, edit) {
         this.live = { values: { ...this.live.values, ...values }, ...(edit ? { edit } : this.live.edit ? { edit: this.live.edit } : {}) };
     }
+    closeSectionEditor() {
+        this.sectionEditing = null;
+        this.holdAction(null);
+    }
+    /** A command in hand, drawn and not run; `null` lets go of it and the figure as it stands is drawn again. */
+    holdAction(action) {
+        const { action: _, ...rest } = this.live;
+        this.live = action ? { ...rest, action } : rest;
+    }
     changed() {
         this.requestUpdate();
         this.dispatchEvent(new CustomEvent('changed', { bubbles: true, composed: true }));
@@ -1164,6 +1188,8 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     /** One command, one step of the history. A refusal a person can meet here is said in their words. */
     linkCommand(action) {
+        /* Committed or refused, a command in hand is let go of: the figure as it stands is drawn again. */
+        this.holdAction(null);
         this.retry = undefined;
         this.notice = '';
         const hadSize = this.hasSize();
@@ -1794,6 +1820,19 @@ let FigureEditor = class FigureEditor extends LitElement {
      * recipe, or an AI draft when the page offers one. Nothing is added until one is chosen; the type, the space, the
      * mounting face and the tags are not asked for first.
      */
+    /** The section editor over the canvas, the figure behind it drawing what the working points make. */
+    renderSectionEditor(geometry) {
+        const part = geometry.find(g => ownerOf(g.id) === this.selected);
+        if (!part?.shape?.extrusion || part.shape.extrusion.section.kind !== 'polygon')
+            return nothing;
+        return html `<figure-section-editor
+      .body=${{ ...part, id: this.selected }}
+      .revision=${this.session?.read().revision ?? 0}
+      @command=${(e) => this.linkCommand(e.detail.action)}
+      @command-live=${(e) => this.holdAction(e.detail.action)}
+      @section-editor-close=${() => this.closeSectionEditor()}
+    ></figure-section-editor>`;
+    }
     renderStart() {
         const shapes = ['box', 'cylinder', 'plate'];
         /* Where it is authored from, chosen before any part (ADR-0097): the figure's own setting, no room made up for it. */
@@ -2000,6 +2039,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             ></figure-preview>`
             : html `<div middle>
           ${view.geometry.length === 0 && !unavailable ? this.renderStart() : nothing}
+          ${this.sectionEditing && this.sectionEditing === this.selected && !unavailable ? this.renderSectionEditor(view.geometry) : nothing}
           <figure-canvas
           ?startShown=${view.geometry.length === 0 && !unavailable}
           .view=${this.view}
@@ -2053,6 +2093,8 @@ let FigureEditor = class FigureEditor extends LitElement {
                     .body=${{ ...part, id: this.selected }}
                     ?locked=${unavailable}
                     @command=${(e) => this.linkCommand(e.detail.action)}
+                    @command-live=${(e) => this.holdAction(e.detail.action)}
+                    @section-editor-open=${() => (this.sectionEditing = this.selected)}
                   ></figure-section-panel>
                   <figure-material-panel
                     .body=${{ ...part, id: this.selected }}
@@ -2213,7 +2255,11 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.linkCommand(refit.step);
     }
     renderSingle(name, field, unavailable) {
-        const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }));
+        /* 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 words = point
+            ? [i18next.t('figure.label.section-editor-coordinate', { point: point[1], axis: point[2].toUpperCase() })]
+            : 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}
@@ -2322,6 +2368,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureEditor.prototype, "live", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "sectionEditing", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)