@things-factory/figure-ui 10.1.125 → 10.1.126

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/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. */
@@ -517,6 +532,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 +854,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 +870,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 +881,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 +906,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 +983,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 +996,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 +1034,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 +1048,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 +1116,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 +1158,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 +1190,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 +1275,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 +1609,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 +1649,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 +1713,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 +1767,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 +1803,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 +1842,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 +2017,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 +2054,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 +2064,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,
@@ -2257,7 +2367,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-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. */

package/client/modeller/figure-verdict.ts

@@ -17,6 +17,8 @@ import type { FigureBudgetUse, FigureMaturityAxis, FigureReport } from './maturi
 
 /** How long an edit settles before the server is asked again. One question per pause, not one per keystroke. */
 export const VERDICT_SETTLE_MS = 400
+/** How long the figure rests before its report is measured again. */
+const MEASURE_SETTLE_MS = 200
 
 /**
  * 성숙도 — the modeller's verdict while editing.
@@ -399,11 +401,18 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
 
   disconnectedCallback() {
     clearTimeout(this.timer)
+    clearTimeout(this.measureTimer)
     super.disconnectedCallback()
   }
 
+  /** The report is measured once the figure has settled: it is read beside the work, and each measure compiles the figure several times. */
+  private measureTimer?: ReturnType<typeof setTimeout>
   updated(changes: Map<string, unknown>) {
-    if (changes.has('source')) this.measure()
+    if (changes.has('source')) {
+      clearTimeout(this.measureTimer)
+      if (this.report === undefined && !this.measureTimer) this.measure()
+      else this.measureTimer = setTimeout(() => this.measure(), MEASURE_SETTLE_MS)
+    }
     if (changes.has('source') || changes.has('figureId') || changes.has('figureType')) this.schedule()
   }
 

package/client/modeller/joint-fan.ts

@@ -1,9 +1,10 @@
-import { compileFigureAsset, compileFigureGraph, figureWorldBoxesOf, figureWritersOf } from '@hatiolab/figure-model'
+import { compileFigureGraph, figureWorldBoxesOf, figureWritersOf } from '@hatiolab/figure-model'
 import type { FigureAsset } from '@hatiolab/figure-model'
 
 import type { FigureRenderPart } from './renderer.js'
 import { sectionShape } from './drawn-shapes.js'
 import { jointAxisUnit } from './joint-axis.js'
+import { evaluatedGeometryOf } from './evaluated.js'
 
 /*
  * Where the selected part turns, and how far -- a translucent fan on the editing board. An axis name says nothing about which way a part swings; on a six-axis arm the author went to the preview and
@@ -204,9 +205,7 @@ export function jointFanOf(asset: FigureAsset, part: string, values: Record<stri
   let box: WorldBox | undefined
   try {
     box = figureWorldBoxesOf(
-      compileFigureAsset({ ...asset, designInputs: { ...asset.designInputs, ...pick(values, asset.designInputs) }, stateDefaults: { ...asset.stateDefaults, ...pick(values, asset.stateDefaults) } })
-        .evaluate()
-        .geometry.filter(g => g.id === part),
+      evaluatedGeometryOf(asset, values).filter(g => g.id === part),
       figureWritersOf(asset)
     )[0]
   } catch {
@@ -274,9 +273,7 @@ function pick(values: Record<string, number>, of: Record<string, number>): Recor
 /** A part's largest own measure (a box side, a diameter, a length) at the inputs given; 0 when it cannot be read. */
 function largestMeasureOf(asset: FigureAsset, part: string, inputs: Record<string, number>): number {
   try {
-    const body = compileFigureAsset({ ...asset, designInputs: pick(inputs, asset.designInputs), stateDefaults: pick(inputs, asset.stateDefaults) })
-      .evaluate()
-      .geometry.find(g => g.id === part) as { shape?: { dimensions?: Record<string, number> } } | undefined
+    const body = evaluatedGeometryOf(asset, inputs).find(g => g.id === part) as { shape?: { dimensions?: Record<string, number> } } | undefined
     const dims = Object.entries(body?.shape?.dimensions ?? {}).map(([k, v]) => (k.startsWith('radius') ? v * 2 : v))
     return dims.length ? Math.max(...dims) : 0
   } catch {

package/client/modeller/links.ts

@@ -2,6 +2,7 @@ import { FIGURE_FACES, figureShapeFaces, figurePartsExtentOf, compileFigureAsset
 import type { FigureFollow, FigureSizeRange } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureBindingPlace, FigureFace, FigureJoint } from '@hatiolab/figure-model'
 import { startingShapeKindOf } from './starting-shape.js'
+import { evaluatedGeometryOf } from './evaluated.js'
 import { jointAxisToken, jointAxisVectorOf, type JointAxisVector } from './joint-axis.js'
 
 /*
@@ -394,7 +395,7 @@ export function placeKeptOf(
   const kept = { align: {} as Partial<Record<Axis, Alignment>>, alignMm: {} as Partial<Record<Axis, number>>, alignInput: {} as Partial<Record<Axis, string>> }
   let geometry
   try {
-    geometry = compileFigureAsset(asset).evaluate().geometry as unknown as Array<{ id: string; pose?: { r: number[][]; t: number[] } }>
+    geometry = evaluatedGeometryOf(asset) as unknown as Array<{ id: string; pose?: { r: number[][]; t: number[] } }>
   } catch {
     return kept
   }

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

@@ -12,7 +12,8 @@ import type { GizmoReach } from './gizmo.js';
  * where the gizmo could (`GizmoReach`).
  */
 export type AlignTool = 'centre-x' | 'centre-z' | 'snap';
-export declare function boxOf(asset: FigureAsset, part: string): FigureWorldBox | undefined;
+/** `values`: the inputs the figure is drawn with, when the box is read as drawn; left out, the asset as it is saved. */
+export declare function boxOf(asset: FigureAsset, part: string, values?: Record<string, number>): FigureWorldBox | undefined;
 /** The snapping grid: about five steps across the figure, on 1 · 2 · 5 multiples. */
 export declare function gridStepOf(asset: FigureAsset): number;
 export declare function alignChanges(asset: FigureAsset, part: string, reach: GizmoReach, tool: AlignTool): FigureInputChange[];

package/dist-client/modeller/align.js

@@ -1,12 +1,14 @@
-import { compileFigureAsset, figureOccupiedBoxesOf, figureWritersOf } from '@hatiolab/figure-model';
+import { figureOccupiedBoxesOf, figureWritersOf } from '@hatiolab/figure-model';
+import { evaluatedGeometryOf } from './evaluated.js';
 const AXES = ['x', 'y', 'z'];
-export function boxOf(asset, part) {
-    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, part, values) {
+    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) {
-    const geometry = compileFigureAsset(asset).evaluate().geometry;
+    const geometry = evaluatedGeometryOf(asset);
     const boxes = figureOccupiedBoxesOf(geometry, figureWritersOf(asset));
     if (!boxes.length)
         return 1;