@things-factory/figure-ui 10.1.48 → 10.1.50

package/dist-client/modeller/v3-editor.js

@@ -4,6 +4,7 @@ import { LitElement, html, css, nothing } from 'lit';
 import { i18next } from '@operato/i18n';
 import '@operato/layout';
 import { customElement, property, state } from 'lit/decorators.js';
+import { PART_LIMIT, v3PartCountOf } from '@hatiolab/figure-model';
 import { captureV3Thumbnail } from './v3-thumbnail.js';
 import { drawableV3Parts } from './v3-renderer.js';
 import './v3-canvas.js';
@@ -18,13 +19,17 @@ import { DEFAULT_VIEW } from './figure-view.js';
 import './figure-v3-capability.js';
 import { gizmoChanges, gizmoReachOf } from './v3-gizmo.js';
 import { keyActionOf } from './v3-keys.js';
-import { groupFields, partLabelOf, repeatOf } from './v3-fields.js';
+import { groupFields, ownerOf, partLabelOf, repeatOf } from './v3-fields.js';
 import { SidePanelStyles } from './side-panel-styles.js';
+import { ScrollbarStyles } from '@operato/styles';
 import { alignChanges, boxOf, canMirror, mirrorChanges } from './v3-align.js';
 import { paletteRecipe } from './v3-palette.js';
+import { nudgeOf } from './v3-stage-model.js';
+import { sizeRangeRefusalOf } from './v3-refusals.js';
 import { instanceRangeOf, rangeDiffers, turnsAboutAJoint } from './v3-links.js';
 import { jointFanOf } from './v3-joint-fan.js';
-import { isLive, livePartsOf, NOTHING_LIVE, scrubbed, scrubStep } from './v3-live.js';
+import { jointDragOf } from './v3-joint-drag.js';
+import { liveOverSession, NOTHING_LIVE, scrubbed, scrubStep } from './v3-live.js';
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
 let FigureV3Editor = class FigureV3Editor extends LitElement {
     constructor() {
@@ -48,16 +53,26 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
         this.live = NOTHING_LIVE;
         this.lastContext = null;
-        /** The modeller's keys (`v3-keys.ts`): undo, redo, duplicate, remove, back to the whole figure. */
+        /** The modeller's keys (`v3-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;
-            const action = keyActionOf({ key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey, target: e.composedPath()[0] }, this.selected);
+            const canvas = this.renderRoot.querySelector('figure-v3-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);
             if (!action)
                 return;
             e.preventDefault();
-            if (action === 'undo')
+            /*
+              The session's history is the only one. With the canvas focused the scene took Ctrl+Z as well, undoing on its own
+              board the last value the canvas had written -- which the canvas then told as a drag: an undo of a drag on a
+              converted part wrote the drag again (2026-09-25). Heard first (capture) and kept from the scene.
+            */
+            e.stopPropagation();
+            if (action === 'translate' || action === 'rotate' || action === 'scale')
+                canvas?.gizmo(action);
+            else if (action === 'undo')
                 view.canUndo && this.run(() => this.session.undo());
             else if (action === 'redo')
                 view.canRedo && this.run(() => this.session.redo());
@@ -70,7 +85,8 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         };
     }
     static { FigureV3Editor_1 = this; }
-    static { this.styles = [SidePanelStyles, css `
+    /* The operato scrollbar, as every scrolling panel of the app has it -- the side panel scrolled with the browser's own. */
+    static { this.styles = [ScrollbarStyles, SidePanelStyles, css `
     :host {
       display: flex;
       flex-direction: column;
@@ -266,10 +282,10 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        window.addEventListener('keydown', this.onKey);
+        window.addEventListener('keydown', this.onKey, true);
     }
     disconnectedCallback() {
-        window.removeEventListener('keydown', this.onKey);
+        window.removeEventListener('keydown', this.onKey, true);
         super.disconnectedCallback();
     }
     willUpdate(_changed) {
@@ -280,7 +296,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             this.error = '';
             this.hiddenParts = new Set();
         }
-        if (view && !view.geometry.some(g => g.id === this.selected))
+        if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected))
             this.selected = '';
     }
     run(action) {
@@ -290,7 +306,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             this.changed();
         }
         catch (error) {
-            this.error = error instanceof Error ? error.message : String(error);
+            this.error = sizeRangeRefusalOf(error, (key, params) => i18next.t(key, params)) ?? (error instanceof Error ? error.message : String(error));
         }
         finally {
             /* Committed or refused, the value in hand is gone: the figure as it stands is drawn again. */
@@ -299,8 +315,8 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
     }
     /** What the canvas draws: the figure with the value in hand when there is one, and without the parts hidden on the workbench. */
     drawnParts(geometry, asset) {
-        const parts = (isLive(this.live) && asset ? livePartsOf(asset, this.live) : null) ?? drawableV3Parts(geometry ?? []);
-        return parts.filter(body => !this.hiddenParts.has(body.id));
+        const parts = (asset ? liveOverSession(asset, this.currentInputs(), this.live) : null) ?? drawableV3Parts(geometry ?? []);
+        return parts.filter(body => !this.hiddenParts.has(ownerOf(body.id)));
     }
     /**
      * Where the selected part turns and how far, with the pose as it is drawn now -- a value in hand included, so the
@@ -310,12 +326,21 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         if (!asset || !this.selected || this.hiddenParts.has(this.selected))
             return null;
         try {
-            return jointFanOf(asset, this.selected, this.live.values);
+            return jointFanOf(asset, this.selected, { ...this.currentInputs(), ...this.live.values });
         }
         catch {
             return null;
         }
     }
+    /**
+     * Every input as the session holds it now -- the pose the author has set with the controls, and design values. The
+     * asset's source carries only the saved defaults, so drawing a value in hand over it put every other joint back to its
+     * saved angle while one slider moved, and the arm jumped when released (user, 2026-09-24).
+     */
+    currentInputs() {
+        const view = this.session?.read();
+        return view ? Object.fromEntries(view.fields.map(field => [field.id, field.value])) : {};
+    }
     /** A value in hand: an input's value (design or pose) or a part edit. Nothing is recorded. */
     hold(values, edit) {
         this.live = { values: { ...this.live.values, ...values }, ...(edit ? { edit } : this.live.edit ? { edit: this.live.edit } : {}) };
@@ -333,9 +358,21 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
               not from the one on screen, which stands wherever the author left it turned. A picture that cannot
               be taken is not an error: the save goes on without it (see `v3-thumbnail.ts`).
             */
+            let type;
+            if (!this.session.read().id && this.firstSave) {
+                const answer = await this.firstSave(this.session.read().name ?? '');
+                if (!answer)
+                    return;
+                /* The name is the figure's own, in the asset: one step of the history, like typing it in the properties. */
+                if (answer.name !== this.session.read().name) {
+                    this.session.command({ kind: 'rename', name: answer.name });
+                    this.changed();
+                }
+                type = answer.type;
+            }
             const view = this.session.read();
             const thumbnail = await captureV3Thumbnail(drawableV3Parts(view.geometry ?? []), view.palette ?? {});
-            const promise = this.session.save({ thumbnail });
+            const promise = this.session.save({ thumbnail, type });
             this.changed();
             await promise;
             this.error = '';
@@ -403,7 +440,8 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
     /** What the gizmo may write for the selected part — read off the asset being edited. */
     reachOf(id) {
         const none = { translate: false, rotate: false, scale: false };
-        if (!id || !this.session)
+        /* A repeat is moved and sized through its row, not by a gizmo on one copy. */
+        if (!id || !this.session || !this.session.read().geometry.some(g => g.id === id))
             return none;
         try {
             return gizmoReachOf(JSON.parse(this.session.source()), id);
@@ -415,12 +453,74 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
     /** 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();
+        /* A part hanging from a joint: the drag edits the joint -- its value, or where it sits (ADR-0093). */
+        const asset = JSON.parse(this.session.source());
+        const drawn = view.geometry.find(g => g.id === id);
+        const drag = drawn ? jointDragOf(asset, ownerOf(id), drawn, result, this.currentInputs()) : null;
+        if (drag) {
+            if (drag.kind === 'value')
+                this.run(() => this.session.apply([{ kind: 'set-state', input: drag.input, unit: drag.unit, value: drag.value }]));
+            else if (drag.kind === 'joint')
+                this.run(() => this.session.command({ kind: 'set-joint', joint: drag.joint }));
+            else {
+                this.error = i18next.t(`figure.text.gizmo-joint-${drag.reason}`, { joint: drag.joint, leader: drag.leader ?? '', axis: drag.axis ?? '' });
+                this.requestUpdate();
+            }
+            return;
+        }
         const sizes = Object.fromEntries(view.fields.map(field => [field.id, field.value]));
-        const changes = gizmoChanges(id, this.reachOf(id), result, sizes);
-        if (changes.length)
+        /*
+          A part a joint places, scaled: only its measures change. The shift of its centre that an anchored scale makes is
+          the joint's to give -- the face on the joint stays there by itself (user, 2026-09-25: 「'R'모드에서 크기가 변하지 않는다」;
+          the shift had been taken for a move of the joint, and the size was dropped).
+        */
+        const jointed = !!asset.joints?.some(j => j.body1.part === ownerOf(id));
+        const changes = gizmoChanges(id, this.reachOf(id), jointed && result.scale ? { scale: result.scale } : result, sizes);
+        if (changes.length) {
             this.run(() => this.session.apply(changes));
-        else
+            return;
+        }
+        if (jointed && result.scale) {
+            /* Only measures that follow another were pulled: the relation says their size, and it is not broken here. */
+            const axes = ['x', 'y', 'z'].filter((_, i) => Math.abs(result.scale[i] - 1) > 1e-4);
+            this.error = i18next.t('figure.text.gizmo-size-follows', { part: partLabelOf(id), axis: axes.join(', ').toUpperCase() });
+            return this.requestUpdate();
+        }
+        /*
+          A part whose place is worked out (a converted one) has no numbers for the gizmo to write: the drag is added beside
+          its rule (`nudge-part`). A part a joint or a fastening places, or a size that is worked out, is refused -- said in
+          words, not by the part silently springing back (user, 2026-09-24: 「기즈모 컨트롤도 전혀 작동이 안되는군」).
+        */
+        const body = view.geometry.find(g => g.id === id);
+        if (!body)
+            return this.requestUpdate();
+        const { by, turn } = nudgeOf(body, result);
+        /* A size worked out from the figure's: the drag's factor beside its rule, so it still follows (V2 scaled any part). */
+        const grow = {};
+        if (result.scale)
+            ['x', 'y', 'z'].forEach((axis, i) => Math.abs(result.scale[i] - 1) > 1e-6 && (grow[axis] = Math.round(result.scale[i] * 1e6) / 1e6));
+        if (!Object.keys(by).length && !Object.keys(turn).length && !Object.keys(grow).length)
+            return this.requestUpdate();
+        try {
+            this.session.command({
+                kind: 'nudge-part',
+                part: id,
+                ...(Object.keys(by).length ? { by } : {}),
+                ...(Object.keys(turn).length ? { turn } : {}),
+                ...(Object.keys(grow).length ? { grow } : {})
+            });
+            this.error = '';
+            this.changed();
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            this.error = /carried by a joint/.test(message)
+                ? i18next.t('figure.text.gizmo-joint-places', { part: partLabelOf(id) })
+                : /is fastened to/.test(message)
+                    ? i18next.t('figure.text.gizmo-fastening-places', { part: partLabelOf(id) })
+                    : message;
             this.requestUpdate();
+        }
     }
     /** 맞추기 — one tool, one step of the history, through the same inputs as the gizmo. */
     align(tool) {
@@ -486,7 +586,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
      */
     renderRepeatNote(geometry) {
         const repeat = repeatOf(this.selected, geometry);
-        return repeat ? html `<p hint>${i18next.t('figure.text.repeat-member', { name: repeat.name, count: repeat.count, index: repeat.index })}</p>` : nothing;
+        return repeat?.index ? html `<p hint>${i18next.t('figure.text.repeat-member', { name: repeat.name, count: repeat.count, index: repeat.index })}</p>` : nothing;
     }
     renamePart(input) {
         const name = input.value.trim();
@@ -579,9 +679,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
                     ? i18next.t('figure.text.follow-would-loop')
                     : code === 'FASTEN_CYCLE' || code === 'ATTACH_CYCLE'
                         ? i18next.t('figure.text.fasten-would-loop')
-                        : error instanceof Error
-                            ? error.message
-                            : String(error);
+                        : sizeRangeRefusalOf(error, (key, params) => i18next.t(key, params)) ?? (error instanceof Error ? error.message : String(error));
         }
     }
     changeField(field, event) {
@@ -691,9 +789,118 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         <md-icon>aspect_ratio</md-icon>${i18next.t('figure.button.scale-uniformly')}
       </button>`;
     }
+    /**
+     * The parts list, one row per part the author made: a repeat is one row with how many copies it makes now (V2 listed
+     * its parts the same way; user, 2026-09-24: the conveyor's sixteen rollers were sixteen rows).
+     */
+    partRows(geometry) {
+        const rows = new Map();
+        for (const g of geometry) {
+            const id = ownerOf(g.id);
+            const row = rows.get(id);
+            if (row) {
+                row.copies = (row.copies ?? 1) + 1;
+                continue;
+            }
+            rows.set(id, {
+                id,
+                provider: g.shape?.provider ?? '',
+                hidden: this.hiddenParts.has(id),
+                invisible: g.visible === false,
+                ...(id !== g.id ? { copies: 1 } : {})
+            });
+        }
+        return [...rows.values()];
+    }
+    /** The detail level's part budget for the list's head, from figure-model's count (a repeat once). */
+    partBudgetOf(asset) {
+        if (!asset)
+            return undefined;
+        try {
+            return { level: asset.detailLevel ?? null, used: v3PartCountOf(asset), limit: asset.detailLevel ? PART_LIMIT[asset.detailLevel] : null };
+        }
+        catch {
+            return undefined;
+        }
+    }
+    /**
+     * A repeat: which way its copies run, how many there are now, and how far apart -- V2's `repeat: { axis, pitch }`.
+     * The pitch of a row that fills its length is edited as a number (`set-repeat` makes it the part's own the first
+     * time); a row of a fixed count says its pitch cannot be set yet (figure-model refuses it the same way).
+     */
+    renderRepeat(asset, geometry, unavailable) {
+        const repeat = repeatOf(this.selected, geometry);
+        if (!asset || !repeat || repeat.index)
+            return nothing;
+        const model = asset.document.model;
+        const layout = model.nodes.find(n => n.id === `${this.selected}.layout`);
+        const axis = model.nodes.find(n => n.id === `${this.selected}.repeat`)?.params?.axis ?? '?';
+        const own = `${this.selected}.repeat.pitch`;
+        const pitch = asset.designInputs[own] ?? model.constants.find(c => c.id === layout?.args[4])?.value;
+        const fits = layout?.op === 'fit-pitch@1';
+        /* What the pitch gives, in numbers: this many copies at the length it is authored, and how long it may be placed. */
+        const lengthRef = layout?.args[0] ?? '';
+        const length = asset.designInputs[lengthRef];
+        const longest = model.inputs.find(i => i.id === lengthRef)?.max;
+        const limit = model.constants.find(c => c.id === layout?.args[6])?.value;
+        const field = { id: own, unit: 'mm', role: 'design', value: pitch ?? 0 };
+        return html `<section>
+      <h3>${i18next.t('figure.label.repeat')}</h3>
+      <div inline-field><label>${i18next.t('figure.label.repeat-axis')}</label><span value>${axis.toUpperCase()}</span></div>
+      <div inline-field><label>${i18next.t('figure.label.repeat-count')}</label><span value>${repeat.count}</span></div>
+      <div inline-field>
+        <label>${i18next.t('figure.label.repeat-gap')} <span unit>mm</span></label>
+        <input
+          type="number"
+          step="any"
+          aria-label=${own}
+          .value=${String(pitch ?? '')}
+          ?disabled=${unavailable || !fits}
+          @change=${(e) => this.setPitch(field, e)}
+        />
+      </div>
+      <p hint>
+        ${fits && length !== undefined && longest !== undefined && limit !== undefined
+            ? i18next.t('figure.text.repeat-what-pitch-gives', {
+                length: length.toLocaleString(),
+                count: repeat.count,
+                longest: longest.toLocaleString(),
+                limit
+            })
+            : i18next.t(fits ? 'figure.text.repeat-fits-length' : 'figure.text.repeat-fixed-count')}
+      </p>
+    </section>`;
+    }
+    /**
+     * A pitch always goes through `set-repeat`: the command moves the longest length with it (at most `limit` copies),
+     * which a plain input edit would not. Refused only when the authored length would already hold more copies than
+     * that -- said with the numbers.
+     */
+    setPitch(field, event) {
+        const input = event.target;
+        const pitch = input.valueAsNumber;
+        if (!Number.isFinite(pitch) || pitch === field.value)
+            return;
+        try {
+            this.session.command({ kind: 'set-repeat', part: this.selected, pitch });
+            this.error = '';
+            this.changed();
+        }
+        catch (error) {
+            input.value = String(field.value);
+            const code = error?.code;
+            const message = error instanceof Error ? error.message : String(error);
+            const found = /\((\d[\d.]*) mm\) a pitch under ([\d.]+) mm makes more than (\d+)/.exec(message);
+            this.error =
+                code === 'INPUT_RANGE' && found
+                    ? i18next.t('figure.text.repeat-pitch-too-small', { length: Number(found[1]).toLocaleString(), min: found[2], limit: found[3] })
+                    : message;
+        }
+    }
     /** Choose a part, from the list, the canvas or a place row. A figure-level tab gives way to the part's properties. */
     choose(id) {
-        this.selected = id;
+        /* A copy on the canvas selects its repeat: the part the author made. */
+        this.selected = id ? ownerOf(id) : id;
         if (id && (this.tab === 'verdict' || this.tab === 'view' || this.tab === 'history'))
             this.tab = 'properties';
     }
@@ -731,11 +938,12 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         if (!view)
             return html `<p>${i18next.t('figure.text.opening-model')}</p>`;
         const unavailable = view.loading || !!view.error || view.saving || !view.context;
-        const part = view.geometry.find(g => g.id === this.selected);
+        const part = view.geometry.find(g => ownerOf(g.id) === this.selected);
         /* The controls (state inputs) have their own place in the motion tab; these are the design values. */
         const design = view.fields.filter(i => i.role !== 'state');
-        const own = design.filter(i => this.selected && i.id.startsWith(this.selected + '.'));
-        const common = design.filter(i => !view.geometry.some(g => i.id.startsWith(g.id + '.')));
+        /* A repeat's own row values (its pitch) have their own section, not the shape's. */
+        const own = design.filter(i => this.selected && i.id.startsWith(this.selected + '.') && !i.id.startsWith(this.selected + '.repeat.'));
+        const common = design.filter(i => !view.geometry.some(g => i.id.startsWith(ownerOf(g.id) + '.')));
         const status = view.loading
             ? 'figure.text.loading-figure'
             : view.saving
@@ -769,18 +977,15 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
           slot="start"
           .budget=${this.budget}
           @show-maturity=${() => (this.tab = 'verdict')}
-          .parts=${view.geometry.map((g) => ({
-            id: g.id,
-            provider: g.shape?.provider ?? '',
-            hidden: this.hiddenParts.has(g.id),
-            invisible: g.visible === false
-        }))}
+          .parts=${this.partRows(view.geometry)}
+          .partBudget=${this.partBudgetOf(asset)}
+          @set-detail-level=${(e) => this.linkCommand({ kind: 'set-detail-level', level: e.detail.level })}
           .selected=${this.selected}
           ?locked=${unavailable}
           @add-part=${(e) => this.add(e.detail.kind)}
           @select-part=${(e) => this.choose(e.detail.id)}
           @toggle-part-hidden=${(e) => this.toggleHiddenPart(e.detail.id)}
-          @set-all-parts-hidden=${(e) => (this.hiddenParts = e.detail.hidden ? new Set(view.geometry.map(g => g.id)) : new Set())}
+          @set-all-parts-hidden=${(e) => (this.hiddenParts = e.detail.hidden ? new Set(view.geometry.map(g => ownerOf(g.id))) : new Set())}
           @move-part-up=${(e) => this.movePart(e.detail.id, e.detail.to)}
           @move-part-down=${(e) => this.movePart(e.detail.id, e.detail.to)}
           @duplicate-part=${(e) => this.duplicatePart(e.detail.id)}
@@ -834,10 +1039,11 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
                     </div>
                     ${this.renderRepeatNote(view.geometry)}
                   </section>
-                  ${this.renderGroups(groupFields(design, this.selected), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable))}
+                  ${this.renderRepeat(asset, view.geometry, unavailable)}
+                  ${this.renderGroups(groupFields(own, this.selected), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable))}
                   ${this.renderLinks(unavailable, 'shape')}
                   <figure-v3-material
-                    .body=${part}
+                    .body=${{ ...part, id: this.selected }}
                     .palette=${view.palette ?? {}}
                     ?locked=${unavailable}
                     @v3-part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
@@ -939,6 +1145,10 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], FigureV3Editor.prototype, "budget", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureV3Editor.prototype, "firstSave", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)