@things-factory/figure-ui 10.1.85 → 10.1.87

package/client/modeller/editor.ts

@@ -6,10 +6,10 @@ 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, 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 } from '@hatiolab/figure-model'
 import type { RecipeTemplate } from './recipes.js'
 import './figure-recipe-catalog.js'
-import type { FigureAsset, FigureAuthoringAction, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigureEvaluatedShape, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement } from '@hatiolab/figure-model'
 import type { FigureProductSession } from './product-session.js'
 import { captureFigureThumbnail } from './thumbnail.js'
 import { drawableFigureParts } from './renderer.js'
@@ -17,6 +17,7 @@ import './canvas.js'
 import './figure-parts.js'
 import './figure-material-panel.js'
 import './figure-section-panel.js'
+import './figure-section-editor.js'
 import { faceHighlightOf, ghostPartsOf, previewWordsOf, rowWordsOf, type HeldPreview } from './command-preview.js'
 import { motionEndsOf, type MotionEnds } from './motion-ends.js'
 import './figure-links.js'
@@ -453,6 +454,8 @@ export class FigureEditor extends LitElement {
   @state() private hiddenParts = new Set<string>()
   /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
   @state() private live: LiveValues = NOTHING_LIVE
+  /** The part whose drawn section is open in the section editor (ADR-0100 §3.2), or null. */
+  @state() private sectionEditing: string | null = null
   /**
    * A command seen before it is done (ADR-0097 §5.5): worked out on a copy for the figure, version, part and command it
    * names, and shown only while all four are still the ones on screen. Nothing of it is saved or undone.
@@ -491,6 +494,11 @@ export class FigureEditor extends LitElement {
   private onKey = (e: KeyboardEvent) => {
     const view = this.session?.read()
     if (!view || view.loading || view.saving || !view.context || !this.isConnected) return
+    /*
+     * The section editor open takes the keys for its own: Esc cancels it, Delete deletes a point, Ctrl+Z undoes a point.
+     * Heard here first, they deselected the part, deleted the part and undid the figure's last step (2026-09-30).
+     */
+    if (this.sectionEditing) return
     const canvas = this.renderRoot.querySelector<FigureCanvas>('figure-canvas')
     const path = e.composedPath()
     const action = keyActionOf(
@@ -637,6 +645,11 @@ export class FigureEditor extends LitElement {
     }
     if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected)) this.selected = ''
     if (_changed.has('selected')) this.gizmoMode = undefined
+    /*
+     * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
+     * own Esc, the part removed, another figure opened -- it closes and lets go of the preview it held.
+     */
+    if (this.sectionEditing && this.sectionEditing !== this.selected) this.closeSectionEditor()
   }
   /** The scene toggles: the mode already shown takes the gizmo away. */
   private useGizmo(mode: 'translate' | 'rotate' | 'scale') {
@@ -703,6 +716,10 @@ export class FigureEditor extends LitElement {
   private hold(values: Record<string, number>, edit?: FigurePartEdit) {
     this.live = { values: { ...this.live.values, ...values }, ...(edit ? { edit } : this.live.edit ? { edit: this.live.edit } : {}) }
   }
+  private closeSectionEditor() {
+    this.sectionEditing = null
+    this.holdAction(null)
+  }
   /** A command in hand, drawn and not run; `null` lets go of it and the figure as it stands is drawn again. */
   private holdAction(action: FigureAuthoringAction | null) {
     const { action: _, ...rest } = this.live
@@ -1764,6 +1781,24 @@ export class FigureEditor extends LitElement {
    * recipe, or an AI draft when the page offers one. Nothing is added until one is chosen; the type, the space, the
    * mounting face and the tags are not asked for first.
    */
+  /** The section editor over the canvas, the figure behind it drawing what the working points make. */
+  private renderSectionEditor(geometry: readonly { id: string }[]) {
+    const part = geometry.find(g => ownerOf(g.id) === this.selected) as { id: string; shape: FigureEvaluatedShape } | undefined
+    /* A door frame's section is its own width, height, jamb and head: its fields edit it, not an outline. */
+    if (!part?.shape?.extrusion || part.shape.dimensions.jamb !== undefined) return nothing
+    const asset = this.asset() as FigureAsset
+    const measures = figureSectionMeasuresOf(asset, this.selected)
+    const kept = figureScaleAnchorOf(asset, this.selected)?.[part.shape.extrusion.axis]
+    return html`<figure-section-editor
+      .body=${{ ...part, id: this.selected }}
+      .measures=${measures}
+      .kept=${kept}
+      .revision=${this.session?.read().revision ?? 0}
+      @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+      @command-live=${(e: CustomEvent) => this.holdAction(e.detail.action)}
+      @section-editor-close=${() => this.closeSectionEditor()}
+    ></figure-section-editor>`
+  }
   private renderStart() {
     const shapes: FigurePaletteKind[] = ['box', 'cylinder', 'plate']
     /* Where it is authored from, chosen before any part (ADR-0097): the figure's own setting, no room made up for it. */
@@ -1973,6 +2008,7 @@ export class FigureEditor extends LitElement {
             ></figure-preview>`
           : html`<div middle>
           ${view.geometry.length === 0 && !unavailable ? this.renderStart() : nothing}
+          ${this.sectionEditing && this.sectionEditing === this.selected && !unavailable ? this.renderSectionEditor(view.geometry) : nothing}
           <figure-canvas
           ?startShown=${view.geometry.length === 0 && !unavailable}
           .view=${this.view}
@@ -2027,6 +2063,7 @@ export class FigureEditor extends LitElement {
                     ?locked=${unavailable}
                     @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
                     @command-live=${(e: CustomEvent) => this.holdAction(e.detail.action)}
+                    @section-editor-open=${() => (this.sectionEditing = this.selected)}
                   ></figure-section-panel>
                   <figure-material-panel
                     .body=${{ ...part, id: this.selected }}
@@ -2195,7 +2232,11 @@ export class FigureEditor extends LitElement {
     if (agreed) this.linkCommand(refit.step)
   }
   private renderSingle(name: string, field: FieldLike, unavailable: boolean) {
-    const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))
+    /* A drawn section's point is called by its number and axis, as the section editor calls it (ADR-0100 §2.1, Q9). */
+    const point = /^point\.p(\d+)\.([xyz])$/.exec(name)
+    const words = point
+      ? [i18next.t('figure.label.section-editor-coordinate', { point: point[1]!, axis: point[2]!.toUpperCase() })]
+      : name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))
     return html`<span ?scrub=${!unavailable} @pointerdown=${(e: PointerEvent) => this.scrub(field as never, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
       ><input
         aria-label=${field.id}