@things-factory/figure-ui 10.1.125 → 10.1.127

package/dist-client/modeller/editor.js

@@ -7,7 +7,7 @@ import { notify } from '@operato/layout';
 import { OxPrompt } from '@operato/popup';
 import { customElement, property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figurePartFaceOf, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
+import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figurePartFaceOf, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf, seedFigureEvaluation, upgradeFigurePlacement } from '@hatiolab/figure-model';
 import './figure-recipe-catalog.js';
 import { captureFigureThumbnail } from './thumbnail.js';
 import { drawableFigureParts } from './renderer.js';
@@ -39,6 +39,7 @@ import { roomRefitRowsOf } from './occupancy.js';
 import { editRefusalOf, inDeclaredRoom, inputRangeRefusalOf, narrowingRetryOf, partRefusalOf, placementRefusalOf, recipeRefusalOf, removalNoticeOf, sizeRangeRefusalOf } from './refusals.js';
 import { endPlaceKeyOf, fieldWordsOf, followOf, measureNow, partSummaryOf, instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js';
 import { jointFanOf } from './joint-fan.js';
+import { seedEvaluatedGeometry } from './evaluated.js';
 import { jointDragOf } from './joint-drag.js';
 import { liveOverSession, NOTHING_LIVE, scrubbed, scrubStep } from './live.js';
 import { startingShapeKindOfBody } from './starting-shape.js';
@@ -55,6 +56,18 @@ function foldSaid() {
     return false;
 }
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
+/** The words a panel is given when there are none: one array, so it does not read as a change. */
+const NO_WORDS = [];
+/** How long a command's candidate rests before its preview is worked out. */
+const PREVIEW_SETTLE_MS = 150;
+function deepFreeze(value) {
+    if (value && typeof value === 'object' && !Object.isFrozen(value)) {
+        Object.freeze(value);
+        for (const inner of Object.values(value))
+            deepFreeze(inner);
+    }
+    return value;
+}
 let FigureEditor = class FigureEditor extends LitElement {
     constructor() {
         super(...arguments);
@@ -219,6 +232,10 @@ let FigureEditor = class FigureEditor extends LitElement {
       min-width: 0;
       min-height: 0;
     }
+    /* The edit canvas stays standing while the preview is in front (a 3D scene costs a third of a second to make), out of sight. */
+    div[middle][hidden] {
+      display: none;
+    }
     ox-canvas-bar .status {
       padding: 0 8px;
       color: var(--md-sys-color-on-surface-variant);
@@ -497,6 +514,8 @@ let FigureEditor = class FigureEditor extends LitElement {
     disconnectedCallback() {
         window.removeEventListener('keydown', this.onKey, true);
         this.widthWatch.disconnect();
+        clearTimeout(this.previewTimer);
+        clearTimeout(this.detachTimer);
         super.disconnectedCallback();
     }
     /*
@@ -837,7 +856,7 @@ let FigureEditor = class FigureEditor extends LitElement {
      */
     insertRecipe(recipe, values) {
         try {
-            const asset = JSON.parse(this.session.source());
+            const asset = this.plainAsset();
             const checked = parseFigureRecipe(recipe);
             const id = figureRecipeIdFor(asset, checked);
             const steps = resolveFigureRecipe(checked, { id, ...(checked.target === 'part' ? { target: this.selected } : {}), values });
@@ -854,7 +873,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     /** The design values of the asset being edited. */
     designValues() {
         try {
-            return this.session ? (JSON.parse(this.session.source()).designInputs ?? {}) : {};
+            return this.session ? (this.plainAsset().designInputs ?? {}) : {};
         }
         catch {
             return {};
@@ -867,7 +886,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (!id || !this.session || !this.session.read().geometry.some(g => g.id === id))
             return none;
         try {
-            const asset = JSON.parse(this.session.source());
+            const asset = this.plainAsset();
             const reach = gizmoReachOf(asset, id);
             /*
               A size drag shows the face it keeps and the commit keeps the same (figureScaleAnchorOf). Where figure-model cannot
@@ -895,7 +914,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     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 asset = this.plainAsset();
         const drawn = view.geometry.find(g => g.id === id);
         const drag = drawn ? jointDragOf(asset, ownerOf(id), drawn, result, this.currentInputs()) : null;
         if (drag) {
@@ -978,7 +997,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     /** 맞추기 — one tool, one step of the history, through the same inputs as the gizmo. */
     align(tool) {
         this.run(() => {
-            const asset = JSON.parse(this.session.source());
+            const asset = this.plainAsset();
             const changes = alignChanges(asset, this.selected, this.reachOf(this.selected), tool);
             if (changes.length)
                 this.session.apply(changes);
@@ -993,7 +1012,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             const copy = this.session.read().geometry.find(g => !before.has(g.id))?.id;
             if (!copy)
                 return;
-            this.session.apply(mirrorChanges(JSON.parse(this.session.source()), id, copy, axis));
+            this.session.apply(mirrorChanges(this.plainAsset(), id, copy, axis));
             this.selected = copy;
         });
     }
@@ -1030,7 +1049,7 @@ let FigureEditor = class FigureEditor extends LitElement {
       @click=${() => this.alignToPlane()}>${i18next.t(`figure.button.align-to-${placement}`)}</button>`;
     }
     alignToPlane() {
-        const asset = parseFigureAsset(this.session.source());
+        const asset = this.parsedAsset();
         const { changes, contact, refusal } = figurePlaneAlignChanges(asset, this.selected);
         if (refusal) {
             this.error = i18next.t(`figure.text.align-refused-${refusal.toLowerCase().replace(/_/g, '-')}`, { part: partLabelOf(this.selected) });
@@ -1047,7 +1066,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             return null;
         let asset;
         try {
-            asset = JSON.parse(this.session.source());
+            asset = this.plainAsset();
         }
         catch {
             return null;
@@ -1113,22 +1132,39 @@ let FigureEditor = class FigureEditor extends LitElement {
                         : String(error);
         }
     }
-    /** Size response, fastening and motion for the selected part, as authoring commands. */
-    renderLinks(unavailable, section) {
-        let asset;
+    dimsOf(asset) {
+        const view = this.session?.read();
+        const key = `${view?.context}|${view?.revision}|${this.selected}`;
+        if (this.dimsSaid?.key === key)
+            return this.dimsSaid.dims;
+        let dims;
         try {
-            asset = JSON.parse(this.session.source());
+            dims = boxOf(asset, this.selected, this.currentInputs())?.dims;
         }
         catch {
-            return null;
+            dims = undefined;
         }
-        let dims;
+        this.dimsSaid = { key, dims };
+        return dims;
+    }
+    previewWordsNow() {
+        const preview = this.currentPreview();
+        const language = i18next.language;
+        if (this.previewWordsSaid && this.previewWordsSaid.preview === preview && this.previewWordsSaid.part === this.selected && this.previewWordsSaid.language === language)
+            return this.previewWordsSaid.words;
+        const words = previewWordsOf(preview, this.selected, (key, params) => i18next.t(key, params));
+        this.previewWordsSaid = { preview, part: this.selected, language, words };
+        return words;
+    }
+    renderLinks(unavailable, section) {
+        let asset;
         try {
-            dims = boxOf(asset, this.selected)?.dims;
+            asset = this.plainAsset();
         }
         catch {
-            dims = undefined;
+            return null;
         }
+        const dims = this.dimsOf(asset);
         return html `<figure-links
       .asset=${asset}
       .section=${section}
@@ -1136,10 +1172,10 @@ let FigureEditor = class FigureEditor extends LitElement {
       .dims=${dims}
       ?locked=${unavailable}
       @command=${(e) => this.linkCommand(e.detail.action)}
-      .previewWords=${previewWordsOf(this.currentPreview(), this.selected, (key, params) => i18next.t(key, params))}
+      .previewWords=${this.previewWordsNow()}
       .detachWords=${this.detachWords(asset)}
-      .overhangWords=${section === 'shape' ? this.overhangWords(asset) : []}
-      .overhangNote=${section === 'shape' ? this.overhangNote(asset) : []}
+      .overhangWords=${section === 'shape' ? this.overhangWords(asset) : NO_WORDS}
+      .overhangNote=${section === 'shape' ? this.overhangNote(asset) : NO_WORDS}
       .motionEnds=${section === 'motion' ? this.motionEnds() : null}
       @go-fasten=${() => this.goFasten()}
       @preview-command=${(e) => this.previewCommand(e.detail)}
@@ -1170,7 +1206,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     renderControls(view, unavailable) {
         let asset;
         try {
-            asset = JSON.parse(this.session.source());
+            asset = this.plainAsset();
         }
         catch {
             return null;
@@ -1259,7 +1295,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         /* A size typed in keeps the face the figure's placement keeps -- figure-model's one rule, as the gizmo and "follow the size" do. */
         const part = this.selected;
         const change = { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value };
-        this.run(() => this.session.apply(field.role !== 'state' && part ? figureSizeEditChanges(parseFigureAsset(this.session.source()), part, [change]) : [change]));
+        this.run(() => this.session.apply(field.role !== 'state' && part ? figureSizeEditChanges(this.parsedAsset(), part, [change]) : [change]));
         // Rejected edits must also restore the displayed numeric value.
         input.value = String(this.session.read().fields.find(i => i.id === field.id).value);
     }
@@ -1597,7 +1633,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (!Number.isFinite(pitch) || pitch === field.value)
             return;
         /* Read from a design input the board may set: the input's value changes, the row keeps reading it (ADR-0096). */
-        const from = this.pitchInputOf(JSON.parse(this.session.source()), this.selected);
+        const from = this.pitchInputOf(this.plainAsset(), this.selected);
         if (from) {
             this.run(() => this.session.apply([{ kind: 'set-design', input: from, unit: 'mm', value: pitch }]));
             input.value = String(this.session.read().fields.find(i => i.id === from)?.value ?? field.value);
@@ -1633,20 +1669,29 @@ let FigureEditor = class FigureEditor extends LitElement {
             return i18next.t('figure.text.release-state-released', { version: String(version) });
         return version > 0 ? i18next.t('figure.text.release-state-draft-over', { version: String(version) }) : i18next.t('figure.text.release-state-draft-new');
     }
-    /** The fastening form's command, seen before it is done; null clears what was shown. */
     previewCommand(candidate) {
+        clearTimeout(this.previewTimer);
         if (!candidate || !this.session || !this.selected) {
             this.preview = undefined;
             return;
         }
         const view = this.session.read();
+        const same = this.preview && this.preview.key === JSON.stringify(candidate) && this.preview.context === view.context && this.preview.part === this.selected && 'revision' in this.preview && this.preview.revision === view.revision;
+        if (same)
+            return;
+        this.previewTimer = setTimeout(() => this.computePreview(candidate), PREVIEW_SETTLE_MS);
+    }
+    computePreview(candidate) {
+        if (!this.session || !this.selected)
+            return;
+        const view = this.session.read();
         const held = { context: view.context, revision: view.revision, key: JSON.stringify(candidate), part: this.selected };
         try {
             const seen = this.session.previewCommand(candidate.action);
             let face;
             if (candidate.face) {
                 try {
-                    face = figurePartFaceOf(parseFigureAsset(this.session.source()), candidate.face.part, candidate.face.face, this.currentInputs());
+                    face = figurePartFaceOf(this.parsedAsset(), candidate.face.part, candidate.face.face, this.currentInputs());
                 }
                 catch {
                     face = undefined;
@@ -1681,14 +1726,32 @@ let FigureEditor = class FigureEditor extends LitElement {
             return undefined;
         return p;
     }
+    /**
+     * Said once the figure has rested: working it out is a preview of the command on a copy (tens of milliseconds), and the
+     * edit that made this version should be on screen before it. Until then nothing is said, as for a part with no joint.
+     */
     detachWords(asset) {
         const view = this.session?.read();
         const joint = asset?.joints?.find(j => j.body1.part === this.selected);
         if (!asset || !view || !joint || !this.session)
-            return [];
+            return NO_WORDS;
         const key = `${view.context}|${view.revision}|${this.selected}`;
         if (this.detachSaid?.key === key)
             return this.detachSaid.words;
+        if (this.detachAsked !== key) {
+            this.detachAsked = key;
+            clearTimeout(this.detachTimer);
+            this.detachTimer = setTimeout(() => {
+                const now = this.session?.read();
+                if (!now || `${now.context}|${now.revision}|${this.selected}` !== key)
+                    return;
+                this.computeDetachWords(asset, key);
+                this.requestUpdate();
+            }, PREVIEW_SETTLE_MS);
+        }
+        return NO_WORDS;
+    }
+    computeDetachWords(asset, key) {
         const say = (k, params) => i18next.t(k, params);
         let words;
         try {
@@ -1717,7 +1780,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     overhangWords(asset) {
         const view = this.session?.read();
         if (!asset || !view || !this.selected)
-            return [];
+            return NO_WORDS;
         const key = `${view.context}|${view.revision}|${this.selected}`;
         if (this.overhangSaid?.key === key)
             return this.overhangSaid.words;
@@ -1759,7 +1822,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (this.motionEndsSaid?.key !== key) {
             let ends = null;
             try {
-                ends = motionEndsOf(parseFigureAsset(this.session.source()), this.selected, this.currentInputs());
+                ends = motionEndsOf(this.parsedAsset(), this.selected, this.currentInputs());
             }
             catch {
                 ends = null;
@@ -1803,9 +1866,46 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (id && (this.tab === 'verdict' || this.tab === 'view' || this.tab === 'history'))
             this.tab = 'properties';
     }
+    /**
+     * The figure as the session holds it now, parsed once per text: a render asks for it a dozen times, and parsing the whole
+     * figure is most of what a selection costs. Read, never changed -- what changes a figure goes through the session.
+     */
+    /**
+     * The session has evaluated this figure at this version, with these inputs: the screen's questions of the text it just
+     * parsed are answered from that, not by evaluating the figure again (each is tens of milliseconds on a real figure).
+     */
+    seeded(asset) {
+        const view = this.session?.read();
+        if (view?.geometry.length) {
+            const values = this.currentInputs();
+            seedEvaluatedGeometry(asset, values, view.geometry);
+            seedFigureEvaluation(asset, values, view.geometry);
+        }
+        return asset;
+    }
+    parsedAsset() {
+        const text = this.session.source();
+        if (this.parsed?.text !== text) {
+            /* The session's text is what its workspace exported, compiled then: it is read here, not compiled again. */
+            const plain = this.plainAsset();
+            const upgraded = upgradeFigurePlacement(plain);
+            this.parsed = { text, asset: upgraded === plain ? plain : this.seeded(deepFreeze(upgraded)) };
+        }
+        return this.parsed.asset;
+    }
+    /**
+     * The figure as plain data, parsed once per text and frozen: the render, the gizmo's reach and every tool read it, and
+     * a copy for each of them cost more than the selection they serve. A change goes through the session, never through this.
+     */
+    plainAsset() {
+        const text = this.session.source();
+        if (this.plain?.text !== text)
+            this.plain = { text, asset: this.seeded(deepFreeze(JSON.parse(text))) };
+        return this.plain.asset;
+    }
     asset() {
         try {
-            return JSON.parse(this.session.source());
+            return this.plainAsset();
         }
         catch {
             return undefined;
@@ -1939,7 +2039,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         let summary;
         try {
             summary = this.selected
-                ? partSummaryOf(parseFigureAsset(this.session.source()), ownerOf(this.selected), (key, params) => i18next.t(key, params), i18next.language || 'ko')
+                ? partSummaryOf(this.parsedAsset(), ownerOf(this.selected), (key, params) => i18next.t(key, params), i18next.language || 'ko')
                 : undefined;
         }
         catch {
@@ -1979,7 +2079,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         */
         let roomOnly = [];
         try {
-            roomOnly = this.selected ? figureRoomOnlyInputsOf(parseFigureAsset(this.session.source()), this.selected) : [];
+            roomOnly = this.selected ? figureRoomOnlyInputsOf(this.parsedAsset(), this.selected) : [];
         }
         catch {
             roomOnly = [];
@@ -1990,7 +2090,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         try {
             const body = view.geometry.find(g => g.id === this.selected);
             const placed = body ? placementOf(body) : undefined;
-            const parsed = this.selected ? parseFigureAsset(this.session.source()) : undefined;
+            const parsed = this.selected ? this.parsedAsset() : undefined;
             if (placed && parsed)
                 held = {
                     position: placed.position,
@@ -2084,7 +2184,8 @@ let FigureEditor = class FigureEditor extends LitElement {
             }}
               @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
             ></figure-preview>`
-            : html `<div middle>
+            : nothing}
+        <div middle ?hidden=${this.middle === 'preview'}>
           ${view.geometry.length === 0 && !unavailable ? this.renderStart() : nothing}
           ${this.sectionEditing && this.sectionEditing === this.selected && !unavailable ? this.renderSectionEditor(view.geometry) : nothing}
           <figure-canvas
@@ -2101,9 +2202,9 @@ let FigureEditor = class FigureEditor extends LitElement {
           @part-transformed=${(e) => this.transformed(e.detail.id, e.detail.result)}
           @part-selected=${(e) => this.choose(e.detail)}
           @render-error=${(e) => {
-                this.error = e.detail.message;
-            }}
-        ></figure-canvas></div>`}
+            this.error = e.detail.message;
+        }}
+        ></figure-canvas></div>
         <aside slot="end">
           <div tabs>
             ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
@@ -2285,7 +2386,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     async askRoomRefit() {
         let refit;
         try {
-            refit = figureRoomRefitOf(parseFigureAsset(this.session.source()));
+            refit = figureRoomRefitOf(this.parsedAsset());
         }
         catch (error) {
             this.error = this.said(error);