@things-factory/figure-ui 10.1.125 → 10.1.127

package/client/modeller/align.ts

@@ -1,4 +1,5 @@
-import { compileFigureAsset, figureOccupiedBoxesOf, figureWritersOf } from '@hatiolab/figure-model'
+import { figureOccupiedBoxesOf, figureWritersOf } from '@hatiolab/figure-model'
+import { evaluatedGeometryOf } from './evaluated.js'
 import type { FigureAsset, FigureInputChange, FigureWorldBox } from '@hatiolab/figure-model'
 
 import type { GizmoReach } from './gizmo.js'
@@ -19,14 +20,15 @@ export type AlignTool = 'centre-x' | 'centre-z' | 'snap'
 
 const AXES = ['x', 'y', 'z'] as const
 
-export function boxOf(asset: FigureAsset, part: string): FigureWorldBox | undefined {
-  const geometry = compileFigureAsset(asset).evaluate().geometry
+/** `values`: the inputs the figure is drawn with, when the box is read as drawn; left out, the asset as it is saved. */
+export function boxOf(asset: FigureAsset, part: string, values?: Record<string, number>): FigureWorldBox | undefined {
+  const geometry = evaluatedGeometryOf(asset, values)
   return figureOccupiedBoxesOf(geometry, figureWritersOf(asset)).find(box => box.part === part)
 }
 
 /** The snapping grid: about five steps across the figure, on 1 · 2 · 5 multiples. */
 export function gridStepOf(asset: FigureAsset): number {
-  const geometry = compileFigureAsset(asset).evaluate().geometry
+  const geometry = evaluatedGeometryOf(asset)
   const boxes = figureOccupiedBoxesOf(geometry, figureWritersOf(asset))
   if (!boxes.length) return 1
   const span = Math.max(

package/client/modeller/canvas.ts

@@ -115,7 +115,10 @@ export class FigureCanvas extends LitElement {
 
   firstUpdated() {
     this.standUp()
-    this.watcher = new ResizeObserver(() => this.scene?.resize?.())
+    /* Out of sight it has no size to draw at: it resizes when it is shown again, not to nothing. */
+    this.watcher = new ResizeObserver(() => {
+      if (this.checkVisibility?.() !== false) this.scene?.resize?.()
+    })
     this.watcher.observe(this)
   }
 
@@ -140,6 +143,8 @@ export class FigureCanvas extends LitElement {
    * faked (user, 2026-09-24: no card had a picture after this canvas moved onto the scene).
    */
   async snapshot(width = 480, height = 360): Promise<string | undefined> {
+    /* Kept standing while the preview is in front, it is not drawn: no picture, as when there was no canvas. */
+    if (this.checkVisibility?.() === false) return undefined
     const layer = this.scene?.root as (SceneLayer & { snapshot3d?: (w?: number, h?: number, type?: string, quality?: number) => Promise<string | undefined> }) | undefined
     if (!layer?.snapshot3d) return undefined
     try {

package/client/modeller/editor.ts

@@ -6,7 +6,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, type FigurePlaneContact, type FigureClipLoss, figurePartFaceOf, type FigureFaceArea, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model'
+import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, type FigureClipLoss, figurePartFaceOf, type FigureFaceArea, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf, seedFigureEvaluation, upgradeFigurePlacement } from '@hatiolab/figure-model'
 import type { RecipeTemplate } from './recipes.js'
 import './figure-recipe-catalog.js'
 import type { FigureAsset, FigureAuthoringAction, FigureEvaluatedShape, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement, FigureFaceMappingNeed, FigureFaceRemap } from '@hatiolab/figure-model'
@@ -48,6 +48,7 @@ import type { FigureRenderPart } from './renderer.js'
 import type { FigureBudgetLine } from './maturity.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 type { FirstSave } from './first-save.js'
 import { isLive, livePartsOf, liveOverSession, NOTHING_LIVE, scrubbed, scrubStep, type LiveValues } from './live.js'
@@ -72,6 +73,20 @@ function foldSaid(): boolean {
 }
 
 /** 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: string[] = []
+
+/** How long a command's candidate rests before its preview is worked out. */
+const PREVIEW_SETTLE_MS = 150
+
+function deepFreeze<T>(value: T): T {
+  if (value && typeof value === 'object' && !Object.isFrozen(value)) {
+    Object.freeze(value)
+    for (const inner of Object.values(value)) deepFreeze(inner)
+  }
+  return value
+}
+
 @customElement('figure-editor')
 export class FigureEditor extends LitElement {
   /* The operato scrollbar, as every scrolling panel of the app has it -- the side panel scrolled with the browser's own. */
@@ -144,6 +159,10 @@ export 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);
@@ -517,6 +536,8 @@ export class FigureEditor extends LitElement {
   disconnectedCallback() {
     window.removeEventListener('keydown', this.onKey, true)
     this.widthWatch.disconnect()
+    clearTimeout(this.previewTimer)
+    clearTimeout(this.detachTimer)
     super.disconnectedCallback()
   }
   /*
@@ -837,7 +858,7 @@ export class FigureEditor extends LitElement {
    */
   private insertRecipe(recipe: FigureRecipe, values: Record<string, FigureRecipeValue>) {
     try {
-      const asset = JSON.parse(this.session!.source()) as FigureAsset
+      const asset = this.plainAsset() as FigureAsset
       const checked = parseFigureRecipe(recipe)
       const id = figureRecipeIdFor(asset, checked)
       const steps = resolveFigureRecipe(checked, { id, ...(checked.target === 'part' ? { target: this.selected } : {}), values })
@@ -853,7 +874,7 @@ export class FigureEditor extends LitElement {
   /** The design values of the asset being edited. */
   private designValues(): Record<string, number> {
     try {
-      return this.session ? (JSON.parse(this.session.source()).designInputs ?? {}) : {}
+      return this.session ? (this.plainAsset().designInputs ?? {}) : {}
     } catch {
       return {}
     }
@@ -864,7 +885,7 @@ export class FigureEditor extends LitElement {
     /* 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 {
-      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
@@ -889,7 +910,7 @@ export class FigureEditor extends LitElement {
   private transformed(id: string, result: GizmoResult) {
     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()) as FigureAsset
+    const asset = this.plainAsset() as FigureAsset
     const drawn = view.geometry.find(g => g.id === id) as unknown as FigureRenderPart | undefined
     const drag = drawn ? jointDragOf(asset, ownerOf(id), drawn, result, this.currentInputs()) : null
     if (drag) {
@@ -966,7 +987,7 @@ export class FigureEditor extends LitElement {
   /** 맞추기 — one tool, one step of the history, through the same inputs as the gizmo. */
   private align(tool: AlignTool) {
     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)
     })
@@ -979,7 +1000,7 @@ export class FigureEditor extends LitElement {
       this.session!.edit({ kind: 'duplicate-part', target: id })
       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
     })
   }
@@ -1017,7 +1038,7 @@ export class FigureEditor extends LitElement {
       @click=${() => this.alignToPlane()}>${i18next.t(`figure.button.align-to-${placement}`)}</button>`
   }
   private 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) })
@@ -1031,7 +1052,7 @@ export class FigureEditor extends LitElement {
     if (!this.selected || !reach.translate) return null
     let asset: unknown
     try {
-      asset = JSON.parse(this.session!.source())
+      asset = this.plainAsset()
     } catch {
       return null
     }
@@ -1099,19 +1120,41 @@ export class FigureEditor extends LitElement {
     }
   }
   /** Size response, fastening and motion for the selected part, as authoring commands. */
-  private renderLinks(unavailable: boolean, section: 'shape' | 'places' | 'motion') {
-    let asset
+  /*
+    What a panel is handed is the same object while it says the same thing: a new array each render reads as a change to
+    the panel, which draws itself again for nothing (sixteen times for one edit).
+  */
+  private dimsSaid?: { key: string; dims: [number, number, number] | undefined }
+  private dimsOf(asset: FigureAsset): [number, number, number] | undefined {
+    const view = this.session?.read()
+    const key = `${view?.context}|${view?.revision}|${this.selected}`
+    if (this.dimsSaid?.key === key) return this.dimsSaid.dims
+    let dims: [number, number, number] | undefined
     try {
-      asset = JSON.parse(this.session!.source())
+      dims = boxOf(asset, this.selected, this.currentInputs())?.dims
     } catch {
-      return null
+      dims = undefined
     }
-    let dims: [number, number, number] | undefined
+    this.dimsSaid = { key, dims }
+    return dims
+  }
+  private previewWordsSaid?: { preview: unknown; part: string; language: string; words: string[] }
+  private previewWordsNow(): string[] {
+    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
+  }
+  private renderLinks(unavailable: boolean, section: 'shape' | 'places' | 'motion') {
+    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}
@@ -1119,10 +1162,10 @@ export class FigureEditor extends LitElement {
       .dims=${dims}
       ?locked=${unavailable}
       @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
-      .previewWords=${previewWordsOf(this.currentPreview(), this.selected, (key, params) => i18next.t(key, params))}
+      .previewWords=${this.previewWordsNow()}
       .detachWords=${this.detachWords(asset as FigureAsset | undefined)}
-      .overhangWords=${section === 'shape' ? this.overhangWords(asset as FigureAsset | undefined) : []}
-      .overhangNote=${section === 'shape' ? this.overhangNote(asset as FigureAsset | undefined) : []}
+      .overhangWords=${section === 'shape' ? this.overhangWords(asset as FigureAsset | undefined) : NO_WORDS}
+      .overhangNote=${section === 'shape' ? this.overhangNote(asset as FigureAsset | undefined) : NO_WORDS}
       .motionEnds=${section === 'motion' ? this.motionEnds() : null}
       @go-fasten=${() => this.goFasten()}
       @preview-command=${(e: CustomEvent) => this.previewCommand(e.detail)}
@@ -1151,7 +1194,7 @@ export class FigureEditor extends LitElement {
   private renderControls(view: { fields: Array<{ id: string; role?: string; value: number }> }, unavailable: boolean) {
     let asset
     try {
-      asset = JSON.parse(this.session!.source())
+      asset = this.plainAsset()
     } catch {
       return null
     }
@@ -1236,7 +1279,7 @@ export 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: FigureInputChange = { 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)
   }
@@ -1570,7 +1613,7 @@ export class FigureEditor extends LitElement {
     const pitch = input.valueAsNumber
     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()) as FigureAsset, this.selected)
+    const from = this.pitchInputOf(this.plainAsset() as FigureAsset, 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)
@@ -1610,19 +1653,33 @@ export class FigureEditor extends LitElement {
     await this.querySelector<HTMLElement & { showRelease?: () => Promise<void> }>('figure-history-panel')?.showRelease?.()
   }
   /** The fastening form's command, seen before it is done; null clears what was shown. */
+  /**
+   * What a command would do is worked out on a copy of the figure -- several compiles of it -- so it waits for the field to
+   * rest: a number typed digit by digit asks once, for the number it ends on. Clearing is at once, and the same question on
+   * the same version is not asked again.
+   */
+  private previewTimer?: ReturnType<typeof setTimeout>
   private previewCommand(candidate: { action: FigureAuthoringAction; face?: { part: string; face: string } } | null) {
+    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)
+  }
+  private computePreview(candidate: { action: FigureAuthoringAction; face?: { part: string; face: string } }) {
+    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: FigureFaceArea | undefined
       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
         }
@@ -1660,16 +1717,35 @@ export class FigureEditor extends LitElement {
     when the copy shows it does.
   */
   private detachSaid?: { key: string; words: string[] }
+  private detachTimer?: ReturnType<typeof setTimeout>
+  private detachAsked?: string
+  /**
+   * 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.
+   */
   private detachWords(asset: FigureAsset | undefined): string[] {
     const view = this.session?.read()
     const joint = asset?.joints?.find(j => j.body1.part === this.selected)
-    if (!asset || !view || !joint || !this.session) return []
+    if (!asset || !view || !joint || !this.session) 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
+  }
+  private computeDetachWords(asset: FigureAsset, key: string): string[] {
     const say = (k: string, params?: Record<string, string>) => i18next.t(k, params)
     let words: string[]
     try {
-      const seen = this.session.previewCommand({ kind: 'detach', part: this.selected })
+      const seen = this.session!.previewCommand({ kind: 'detach', part: this.selected })
       const own = seen.moves.some(m => m.body === this.selected)
       words = own
         ? [say('figure.text.detach-moves'), ...previewWordsOf({ context: seen.context, revision: seen.revision, key, moves: seen.moves }, this.selected, say)]
@@ -1695,7 +1771,7 @@ export class FigureEditor extends LitElement {
   }
   private overhangWords(asset: FigureAsset | undefined): string[] {
     const view = this.session?.read()
-    if (!asset || !view || !this.selected) return []
+    if (!asset || !view || !this.selected) return NO_WORDS
     const key = `${view.context}|${view.revision}|${this.selected}`
     if (this.overhangSaid?.key === key) return this.overhangSaid.words
     const say = (k: string, params?: Record<string, string>) => i18next.t(k, params)
@@ -1731,7 +1807,7 @@ export class FigureEditor extends LitElement {
     if (this.motionEndsSaid?.key !== key) {
       let ends: MotionEnds | null = null
       try {
-        ends = motionEndsOf(parseFigureAsset(this.session!.source()), this.selected, this.currentInputs())
+        ends = motionEndsOf(this.parsedAsset(), this.selected, this.currentInputs())
       } catch {
         ends = null
       }
@@ -1770,9 +1846,47 @@ export class FigureEditor extends LitElement {
     this.faceMapping = undefined
     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).
+   */
+  private seeded(asset: FigureAsset): FigureAsset {
+    const view = this.session?.read()
+    if (view?.geometry.length) {
+      const values = this.currentInputs()
+      seedEvaluatedGeometry(asset, values, view.geometry as never)
+      seedFigureEvaluation(asset, values, view.geometry)
+    }
+    return asset
+  }
+  private parsed?: { text: string; asset: FigureAsset }
+  private parsedAsset(): FigureAsset {
+    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
+  }
+  private plain?: { text: string; asset: FigureAsset }
+  /**
+   * 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.
+   */
+  private plainAsset(): FigureAsset {
+    const text = this.session!.source()
+    if (this.plain?.text !== text) this.plain = { text, asset: this.seeded(deepFreeze(JSON.parse(text))) }
+    return this.plain.asset
+  }
   private asset(): unknown {
     try {
-      return JSON.parse(this.session!.source())
+      return this.plainAsset()
     } catch {
       return undefined
     }
@@ -1907,7 +2021,7 @@ export class FigureEditor extends LitElement {
     let summary: { kind: string; size: string } | undefined
     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 {
       summary = undefined
@@ -1944,7 +2058,7 @@ export class FigureEditor extends LitElement {
     */
     let roomOnly: string[] = []
     try {
-      roomOnly = this.selected ? figureRoomOnlyInputsOf(parseFigureAsset(this.session!.source()), this.selected) : []
+      roomOnly = this.selected ? figureRoomOnlyInputsOf(this.parsedAsset(), this.selected) : []
     } catch {
       roomOnly = []
     }
@@ -1954,7 +2068,7 @@ export class FigureEditor extends LitElement {
     try {
       const body = view.geometry.find(g => g.id === this.selected) as unknown as FigureRenderPart | undefined
       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,
@@ -2050,7 +2164,8 @@ export class FigureEditor extends LitElement {
               }}
               @part-edit=${(e: CustomEvent) => 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
@@ -2069,7 +2184,7 @@ export class FigureEditor extends LitElement {
           @render-error=${(e: CustomEvent<Error>) => {
             this.error = e.detail.message
           }}
-        ></figure-canvas></div>`}
+        ></figure-canvas></div>
         <aside slot="end">
           <div tabs>
             ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
@@ -2257,7 +2372,7 @@ export class FigureEditor extends LitElement {
   private async askRoomRefit() {
     let refit
     try {
-      refit = figureRoomRefitOf(parseFigureAsset(this.session!.source()))
+      refit = figureRoomRefitOf(this.parsedAsset())
     } catch (error) {
       this.error = this.said(error)
       return

package/client/modeller/evaluated.ts

@@ -0,0 +1,47 @@
+import { compileFigureAsset } from '@hatiolab/figure-model'
+import type { FigureAsset } from '@hatiolab/figure-model'
+
+type Geometry = ReturnType<ReturnType<typeof compileFigureAsset>['evaluate']>['geometry']
+
+/**
+ * A figure evaluated, held by the asset object it was asked of and the values it was asked under. One selection asks
+ * several questions of the same figure as it stands (a part's box, the grid, where a fastening keeps it, the fan of a
+ * joint), and each of them evaluated the whole figure again. Another asset object, or other values, is asked afresh.
+ * The geometry is read, never changed.
+ */
+const held = new WeakMap<object, Map<string, Geometry>>()
+
+/** The values in hand that belong to a record's keys (design inputs, or state defaults). */
+const pick = (values: Record<string, number>, of: Record<string, number>) => Object.fromEntries(Object.entries(values).filter(([id]) => id in of))
+
+/** The values the asset reads, in one order: the same inputs are one question however they were listed. */
+const keyOf = (own: Record<string, number>, state: Record<string, number>) =>
+  JSON.stringify([Object.entries(own).sort(([a], [b]) => (a < b ? -1 : 1)), Object.entries(state).sort(([a], [b]) => (a < b ? -1 : 1))])
+
+/**
+ * Tells the questions asked of this asset the answer already in hand -- the geometry the session evaluated for this
+ * figure under these values -- so the screen does not evaluate what the workspace has just evaluated. The caller says it
+ * is the same figure: the asset is the session's text at that version, the values its inputs. Nothing is checked here.
+ */
+export function seedEvaluatedGeometry(asset: FigureAsset, values: Record<string, number>, geometry: Geometry): void {
+  let mine = held.get(asset)
+  if (!mine) held.set(asset, (mine = new Map()))
+  mine.set(keyOf(pick(values, asset.designInputs), pick(values, asset.stateDefaults)), geometry)
+}
+
+/** `values` left out evaluates the asset as it is; given, they replace the design inputs and state defaults they name. */
+export function evaluatedGeometryOf(asset: FigureAsset, values?: Record<string, number>): Geometry {
+  const own = values ? pick(values, asset.designInputs) : undefined
+  const state = values ? pick(values, asset.stateDefaults) : undefined
+  const key = values ? keyOf(own!, state!) : ''
+  let mine = held.get(asset)
+  if (!mine) held.set(asset, (mine = new Map()))
+  let geometry = mine.get(key)
+  if (!geometry) {
+    if (mine.size >= 8) mine.clear()
+    const source = values ? { ...asset, designInputs: { ...asset.designInputs, ...own }, stateDefaults: { ...asset.stateDefaults, ...state } } : asset
+    geometry = compileFigureAsset(source).evaluate().geometry
+    mine.set(key, geometry)
+  }
+  return geometry
+}

package/client/modeller/figure-facts.ts

@@ -29,7 +29,15 @@ export interface FigureFigureFacts {
  * records the face only as that node, so this is where the screen learns which one is chosen. Parts are the placed
  * bodies (`place@1`), in the order the model lists them.
  */
+let lastFacts: { source: string; facts: FigureFigureFacts } | undefined
 export function figureFigureFacts(source: string): FigureFigureFacts {
+  /* The panel renders more often than the figure changes; the same text says the same facts. */
+  if (lastFacts?.source === source) return lastFacts.facts
+  const facts = figureFactsOf(source)
+  lastFacts = { source, facts }
+  return facts
+}
+function figureFactsOf(source: string): FigureFigureFacts {
   const asset = parseFigureAsset(source) as FigureAsset & { document: { model: { nodes: Array<{ id: string; op: string }> } } }
   const parts = asset.document.model.nodes.filter(node => node.op === 'place@1').map(node => node.id)
   const feature = (asset.occupancy?.contact as { surface?: { feature?: string } } | undefined)?.surface?.feature

package/client/modeller/figure-preview.ts

@@ -27,6 +27,8 @@ interface SceneHandle {
   dispose?: () => void
   resize?: () => void
   fit?: (type?: string) => void
+  /** The scene's container: it can make the content again while keeping the 3D renderer and the camera (undo and redo use it). */
+  rootContainer?: { rebuildContentModel?: (model: unknown, options?: { preserveThreeD?: boolean }) => void }
   root?: {
     set?: (patch: Record<string, unknown>) => void
     fitCameraToModel?: () => void
@@ -345,30 +347,50 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       this.teardown()
       return
     }
-    this.teardown()
-    this.driving = {}
     try {
       /* Registered as a board registers it, under a type of this preview's own: a real type's drawings stay as they are. */
       const type = `figure-preview-${this.context || 'new'}`
+      const size = authoredSizeOf(asset)
+      /*
+        The figure changed under a scene that is standing: the same type is registered again and the content made again
+        inside the same 3D scene. Making a scene anew costs about a third of a second and its first drawing compiles the
+        shaders again -- a value typed beside the preview held the screen for seconds. The scene is made anew only when
+        there is none, for another figure, or when the content cannot be made again in place.
+      */
+      const again = this.scene?.rootContainer?.rebuildContentModel && this.registered === type
+      if (!again) this.teardown()
+      this.driving = {}
       registerFigure(type, asset)
       this.registered = type
-      const size = authoredSizeOf(asset)
       const { components, board } = previewInstances(type, size)
+      const model = {
+        type: 'model-layer',
+        width: board.width,
+        height: board.height,
+        depth: previewBoardDepth({ placement: asset.placement, base: { y: size.y } }, view.ceilingHeight, PREVIEW_FACTOR),
+        threed: true,
+        sky: 'color',
+        ...sceneLook(view),
+        placement: view.placement,
+        heights: { floor: 0, ceiling: view.ceilingHeight },
+        pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),
+        components
+      }
+      if (again) {
+        try {
+          this.scene!.rootContainer!.rebuildContentModel!(model, { preserveThreeD: true })
+          this.standing = signature
+          this.cannot = ''
+          return
+        } catch {
+          this.teardown()
+          registerFigure(type, asset)
+          this.registered = type
+        }
+      }
       this.scene = create({
         target: this.stage,
-        model: {
-          type: 'model-layer',
-          width: board.width,
-          height: board.height,
-          depth: previewBoardDepth({ placement: asset.placement, base: { y: size.y } }, view.ceilingHeight, PREVIEW_FACTOR),
-          threed: true,
-          sky: 'color',
-          ...sceneLook(view),
-          placement: view.placement,
-          heights: { floor: 0, ceiling: view.ceilingHeight },
-          pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),
-          components
-        },
+        model,
         mode: 0
       }) as SceneHandle
       this.standing = signature

package/client/modeller/figure-properties.ts

@@ -77,7 +77,39 @@ export class FigureProperties extends localize(i18next)(LitElement) {
     }
   }
 
+  /*
+    The figure's own settings are shown while no part is picked; with one picked this is out of sight, and working out its
+    facts (the figure parsed and compiled) on every edit is for nobody. Out of sight it keeps what it last drew, and it
+    draws again when it comes back into view.
+  */
+  private lastDrawn?: unknown
+  private outOfSight = false
+  private watch?: ResizeObserver
+  connectedCallback() {
+    super.connectedCallback()
+    this.watch = new ResizeObserver(() => {
+      if (this.outOfSight && this.checkVisibility?.() !== false) {
+        this.outOfSight = false
+        this.requestUpdate()
+      }
+    })
+    this.watch.observe(this)
+  }
+  disconnectedCallback() {
+    this.watch?.disconnect()
+    super.disconnectedCallback()
+  }
+
   render() {
+    if (this.hasUpdated && this.checkVisibility?.() === false) {
+      this.outOfSight = true
+      return this.lastDrawn ?? nothing
+    }
+    this.lastDrawn = this.draw()
+    return this.lastDrawn
+  }
+
+  private draw() {
     const facts = this.facts()
     if (!facts) return nothing
     /* The figure's type is the page's (it lives on the row); it is slotted into the first section. */