@things-factory/figure-ui 10.1.86 → 10.1.87

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, 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, FigureEvaluatedShape, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement } from '@hatiolab/figure-model'
@@ -1784,9 +1784,15 @@ export class FigureEditor extends LitElement {
   /** 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
-    if (!part?.shape?.extrusion || part.shape.extrusion.section.kind !== 'polygon') return nothing
+    /* 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)}

package/client/modeller/figure-section-editor.ts

@@ -3,10 +3,11 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { figureSectionSidesOf } from '@hatiolab/figure-model'
-import type { FigureAuthoringAction, FigureEvaluatedShape, FigureSectionPoint } from '@hatiolab/figure-model'
+import { figureCavitySectionOf, figureSectionSidesOf } from '@hatiolab/figure-model'
+import type { FigureAuthoringAction, FigureEvaluatedShape, FigureSection, FigureSectionMeasure, FigureSectionPoint } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
-import { extentOf, insertAfter, issueWords, issuesOf, markedBy, movePoint, pointLabel, removePoint, type Points } from './section-drawing.js'
+import { insertAfter, markedBy, movePoint, pointLabel, removePoint, sectionOf, workingIssuesOf, workingOf, type SectionWorking } from './section-drawing.js'
+import { END_FACE } from './section-controls.js'
 
 type Axis = 'x' | 'y' | 'z'
 
@@ -17,17 +18,20 @@ const SCREEN: Record<Axis, [Axis, Axis]> = { y: ['x', 'z'], x: ['z', 'y'], z: ['
 export const NARROW_BELOW = 900
 
 /**
- * 단면 편집 — a drawn section edited point by point (ADR-0100 §3.2, stage 2).
+ * 단면 편집 — a pushed part's section and length in one editor (ADR-0100 §3.2, stage 2).
  *
  * The outline is drawn flat, looking along the push, in millimetres from the part's origin; the figure behind stays in
- * view and shows the solid the working points make (`command-live`, the same preview the section panel uses), so the 2D
- * and the 3D stand side by side. A point is dragged or typed; a side pressed gains a point in its middle; a point is
- * deleted by its button or the Delete key, never below three. What the kernel would refuse is marked on the outline and
- * said in the list; apply is held back, and the solid shows the last valid shape, which the caption names.
+ * view and shows the solid the working state makes (`command-live`, the same preview the section panel uses), so the 2D
+ * and the 3D stand side by side. A drawn section's point is dragged or typed, a side pressed gains a point in its
+ * middle, a point is deleted, never below three. A rectangle's width and depth and an ellipse's diameters are dragged by
+ * their handles or typed; a circle's two are one. The push's length is typed, and the face it keeps is the one the
+ * part's placement or fastening keeps (§4.1: read here, changed elsewhere). A measure that follows another value is
+ * shown and not offered.
  *
- * Apply sends one `command` (one step of the history); cancel or Esc sends nothing and lets the preview go. The undo
- * here is the editor's own, for the working points only. If the figure changes while the editor is open, the working
- * points are no longer of the figure as it is, and apply is refused until the editor is opened again.
+ * What the kernel would refuse is marked on the outline and said in the list; apply is held back, and the solid shows
+ * the last valid state, which the caption names. Apply sends one `set-section` command (one step of the history); cancel
+ * or Esc sends nothing and lets the preview go. The undo here is the editor's own. If the figure changes while the editor
+ * is open, apply is refused until it is opened again.
  */
 @customElement('figure-section-editor')
 export class FigureSectionEditor extends localize(i18next)(LitElement) {
@@ -132,6 +136,20 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
       padding: 8px 14px;
       border-top: 1px solid var(--md-sys-color-outline-variant);
     }
+    div[sizes] {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+    label[mm] {
+      display: grid;
+      gap: 2px;
+    }
+    label[mm] input {
+      min-width: 0;
+      font: inherit;
+    }
     ol[points] {
       list-style: none;
       margin: 0;
@@ -204,6 +222,10 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
 
   /** The part and its evaluated shape as they stand when the editor opens. */
   @property({ attribute: false }) body?: { id: string; shape: FigureEvaluatedShape }
+  /** Which of its measures can be set (figure-model's `figureSectionMeasuresOf`). */
+  @property({ attribute: false }) measures?: { measures: Record<Axis, FigureSectionMeasure>; round: boolean }
+  /** Along the push, the face a length change keeps: 1 its start, -1 its end, 0 its centre; undefined when it cannot be said. */
+  @property({ attribute: false }) kept?: -1 | 0 | 1
   /** The figure's revision now; the editor remembers the one it opened at. */
   @property({ type: Number }) revision = 0
   /** Narrow: the outline or the solid behind. */
@@ -215,28 +237,32 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     if (!this.narrow) this.show = 'outline'
   })
 
-  @state() private working: FigureSectionPoint[] = []
+  @state() private working: SectionWorking = { points: [], across: {}, length: 0 }
   @state() private selected: string | null = null
   @state() private note = ''
-  private history: FigureSectionPoint[][] = []
-  private lastValid: FigureSectionPoint[] = []
+  private opened!: SectionWorking
+  private history: SectionWorking[] = []
+  private lastValid!: SectionWorking
   private openedAt = 0
   private dragging: string | null = null
-  /** The points as they were when a drag began: kept once the point moves, so a press alone is not a step back. */
-  private dragFrom: FigureSectionPoint[] | null = null
+  /** The state as it was when a drag began: kept once something moves, so a press alone is not a step back. */
+  private dragFrom: SectionWorking | null = null
   private extent = 200
 
   private get axis(): Axis {
     return (this.body?.shape.extrusion?.axis ?? 'y') as Axis
   }
+  private get kind() {
+    return this.body?.shape.extrusion?.section.kind
+  }
 
   connectedCallback() {
     super.connectedCallback()
-    const s = this.body?.shape.extrusion?.section
-    this.working = s?.kind === 'polygon' ? s.points.map(p => ({ ...p })) : []
+    this.working = workingOf(this.body!.shape)
+    this.opened = this.working
     this.lastValid = this.working
     this.openedAt = this.revision
-    this.extent = extentOf(this.working, this.axis)
+    this.extent = this.extentOf(this.working)
     window.addEventListener('keydown', this.keys, true)
     if (this.parentElement) this.room.observe(this.parentElement)
   }
@@ -247,6 +273,13 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     super.disconnectedCallback()
   }
 
+  /** How far the drawing reaches from the origin: the outline's farthest point with room around, in 50 mm steps. */
+  private extentOf(w: SectionWorking): number {
+    const [h, v] = SCREEN[this.axis]
+    const far = Math.max(1, ...w.points.flatMap(p => [Math.abs(p[h] ?? 0), Math.abs(p[v] ?? 0)]), ...Object.values(w.across).map(a => (a ?? 0) / 2))
+    return Math.ceil((far * 1.4 + 40) / 50) * 50
+  }
+
   /*
    * Heard first (capture on the window), and a key the editor takes goes no further: the scene behind listens too, and
    * would take Esc as "select nothing" and Delete as "delete the part".
@@ -271,11 +304,15 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     return this.revision !== this.openedAt
   }
 
-  private change(next: FigureSectionPoint[]) {
+  private valid(w: SectionWorking) {
+    return workingIssuesOf(this.body!.shape, w).words.length === 0
+  }
+
+  private change(next: SectionWorking) {
     this.history.push(this.working)
     this.working = next
     this.note = ''
-    if (!issuesOf(next, this.axis).length) this.lastValid = next
+    if (this.valid(next)) this.lastValid = next
     this.preview()
   }
 
@@ -283,33 +320,50 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     const before = this.history.pop()
     if (!before) return
     this.working = before
-    if (!issuesOf(before, this.axis).length) this.lastValid = before
+    if (this.valid(before)) this.lastValid = before
     this.preview()
   }
 
-  /** The solid behind shows the working points, or the last valid ones while the working ones are refused. */
+  /** The solid behind shows the working state, or the last valid one while the working one is refused. */
   private preview() {
     this.dispatchEvent(
       new CustomEvent('command-live', { detail: { action: this.action(this.lastValid) }, bubbles: true, composed: true })
     )
   }
 
-  private action(points: Points): FigureAuthoringAction {
-    return { kind: 'set-section-points', part: this.body!.id, points: points.map(p => ({ ...p })) }
+  /** One command for everything changed since the editor opened; a measure not changed is not sent (it may follow another). */
+  private action(w: SectionWorking): FigureAuthoringAction {
+    const o = this.opened
+    const changed = (a: number | undefined, b: number | undefined) => Math.abs((a ?? 0) - (b ?? 0)) > 1e-9
+    const across = Object.fromEntries(Object.entries(w.across).filter(([k, v]) => changed(v, o.across[k as Axis])))
+    return {
+      kind: 'set-section',
+      part: this.body!.id,
+      ...(this.kind === 'polygon' ? { points: w.points.map(p => ({ ...p })) } : {}),
+      ...(Object.keys(across).length ? { across } : {}),
+      ...(changed(w.length, o.length) ? { length: w.length } : {})
+    }
   }
 
   private removePoint(id: string) {
-    const next = removePoint(this.working, id)
+    const next = removePoint(this.working.points, id)
     if ('refused' in next) {
       this.note = i18next.t('figure.text.section-issue-too-few')
       return
     }
     this.selected = null
-    this.change(next)
+    this.change({ ...this.working, points: next })
+  }
+
+  /** A width across set: a circle's two are one. */
+  private across(axis: Axis, value: number): SectionWorking {
+    const [u, v] = SCREEN[this.axis]
+    const both = this.measures?.round ? { [u]: value, [v]: value } : { [axis]: value }
+    return { ...this.working, across: { ...this.working.across, ...both } }
   }
 
   private apply() {
-    if (this.stale || issuesOf(this.working, this.axis).length) return
+    if (this.stale || !this.valid(this.working)) return
     this.dispatchEvent(new CustomEvent('command', { detail: { action: this.action(this.working) }, bubbles: true, composed: true }))
     this.close()
   }
@@ -332,14 +386,22 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     return { h: Math.round(p.x), v: Math.round(p.y) }
   }
 
+  /** Words for the face a length change keeps, by the part's relations; nothing when they cannot say. */
+  private keptWords(): string {
+    if (this.kept === undefined) return ''
+    if (this.kept === 0) return i18next.t('figure.text.section-editor-keeps-centre')
+    return i18next.t('figure.text.section-editor-keeps', {
+      face: i18next.t('figure.label.face-' + END_FACE(this.axis, this.kept === 1 ? 'start' : 'end'))
+    })
+  }
+
   render() {
     if (!this.body) return nothing
-    const issues = issuesOf(this.working, this.axis)
-    const length = this.body.shape.extrusion ? this.body.shape.extrusion.end - this.body.shape.extrusion.start : 0
+    const { issues, words } = workingIssuesOf(this.body.shape, this.working)
     return html`
       <header>
         <h2>${i18next.t('figure.label.section-editor')}</h2>
-        <span>${this.body.id} · ${i18next.t('figure.text.section-editor-length', { length: String(Math.round(length * 1000) / 1000) })}</span>
+        <span>${this.body.id}</span>
       </header>
       <nav tabs>
         ${(['outline', 'solid'] as const).map(
@@ -347,31 +409,52 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
         )}
       </nav>
       <div body>
-        <div outline>${this.drawing(issues)}</div>
-        <aside>${this.list(issues)}</aside>
+        <div outline>${this.drawing(issues, words.length > 0)}</div>
+        <aside>${this.list(issues, words)}</aside>
       </div>
       <footer>
         <button ?disabled=${!this.history.length} @click=${() => this.back()}>${i18next.t('figure.button.section-editor-back')}</button>
         <span grow ?stale=${this.stale}>
-          ${this.stale ? i18next.t('figure.text.section-editor-stale') : i18next.t('figure.text.section-editor-hint')}
+          ${this.stale
+            ? i18next.t('figure.text.section-editor-stale')
+            : i18next.t(this.kind === 'polygon' ? 'figure.text.section-editor-hint' : 'figure.text.section-editor-hint-sized')}
         </span>
         <button @click=${() => this.cancel()}>${i18next.t('figure.button.section-editor-cancel')}</button>
-        <button primary ?disabled=${this.stale || issues.length > 0} @click=${() => this.apply()}>${i18next.t('figure.button.section-editor-apply')}</button>
+        <button primary ?disabled=${this.stale || words.length > 0} @click=${() => this.apply()}>${i18next.t('figure.button.section-editor-apply')}</button>
       </footer>
     `
   }
 
-  private drawing(issues: ReturnType<typeof issuesOf>) {
+  /** A section drawn as the screen lays it: across to the right, then down. */
+  private outline(section: FigureSection, attrs: { fill: string; stroke: string; width: number; dash?: string }, centre: Partial<Record<Axis, number>> = {}) {
+    const [h, v] = SCREEN[this.axis]
+    const ch = centre[h] ?? 0,
+      cv = centre[v] ?? 0
+    if (section.kind === 'polygon')
+      return svg`<polygon points=${section.points.map(p => `${p[h]},${p[v]}`).join(' ')} fill=${attrs.fill} stroke=${attrs.stroke} stroke-width=${attrs.width} stroke-dasharray=${attrs.dash ?? ''} />`
+    if (section.kind === 'ellipse')
+      return svg`<ellipse cx=${ch} cy=${cv} rx=${section.radius[h]} ry=${section.radius[v]} fill=${attrs.fill} stroke=${attrs.stroke} stroke-width=${attrs.width} stroke-dasharray=${attrs.dash ?? ''} />`
+    const w = section.size[h]!,
+      d = section.size[v]!
+    return svg`<rect x=${ch - w / 2} y=${cv - d / 2} width=${w} height=${d} rx=${section.corner?.[h] ?? 0} ry=${section.corner?.[v] ?? 0}
+      fill=${attrs.fill} stroke=${attrs.stroke} stroke-width=${attrs.width} stroke-dasharray=${attrs.dash ?? ''} />`
+  }
+
+  private drawing(issues: ReturnType<typeof workingIssuesOf>['issues'], invalid: boolean) {
     const [h, v] = SCREEN[this.axis]
     const e = this.extent
     const marked = markedBy(issues)
-    const pts = this.working
-    const sides = pts.length >= 2 ? figureSectionSidesOf({ kind: 'polygon', points: pts }, this.axis) : []
+    const w = this.working
+    const section = sectionOf(this.body!.shape, w)
+    const pts = w.points
+    const sides = this.kind === 'polygon' && pts.length >= 2 ? figureSectionSidesOf({ kind: 'polygon', points: pts }, this.axis) : []
     const at = (id: string) => pts.find(p => p.id === id)!
     const grid = Math.max(10, Math.pow(10, Math.floor(Math.log10(e))) / 2)
     const lines: number[] = []
     for (let g = -Math.floor(e / grid) * grid; g <= e; g += grid) lines.push(g)
-    const invalid = issues.length > 0
+    const cavity = this.body!.shape.cavity
+    const inside = cavity && !invalid ? figureCavitySectionOf(section, this.axis, cavity.wall) : undefined
+    const sized = (axis: Axis) => this.measures?.measures[axis] === 'editable'
     return html`<div caption ?last-valid=${invalid}>
         ${invalid ? i18next.t('figure.text.section-editor-last-valid') : i18next.t('figure.text.section-editor-units', { h: h.toUpperCase(), v: v.toUpperCase() })}
       </div>
@@ -383,8 +466,11 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
           if (!this.dragging) return
           if (this.dragFrom) this.history.push(this.dragFrom), (this.dragFrom = null)
           const p = this.svgPoint(ev)
-          this.working = movePoint(this.working, this.dragging, { [h]: p.h, [v]: p.v })
-          if (!issuesOf(this.working, this.axis).length) this.lastValid = this.working
+          const handle = /^handle:(.)$/.exec(this.dragging)
+          this.working = handle
+            ? this.across(handle[1] as Axis, Math.max(1, 2 * Math.abs(handle[1] === h ? p.h : p.v)))
+            : { ...this.working, points: movePoint(this.working.points, this.dragging, { [h]: p.h, [v]: p.v }) }
+          if (this.valid(this.working)) this.lastValid = this.working
           this.preview()
         }}
         @pointerup=${() => ((this.dragging = null), (this.dragFrom = null))}
@@ -396,10 +482,15 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
         <line x1="0" y1=${-e} x2="0" y2=${e} stroke="var(--md-sys-color-outline)" stroke-width=${e / 250} />
         <text x=${e * 0.92} y=${-e * 0.02} font-size=${e / 18} fill="var(--md-sys-color-on-surface-variant)">${h.toUpperCase()}</text>
         <text x=${e * 0.02} y=${e * 0.95} font-size=${e / 18} fill="var(--md-sys-color-on-surface-variant)">${v.toUpperCase()}</text>
-        ${invalid && this.lastValid.length
-          ? svg`<polygon points=${this.lastValid.map(p => `${p[h]},${p[v]}`).join(' ')} fill="none" stroke="var(--md-sys-color-outline)" stroke-dasharray=${`${e / 50} ${e / 70}`} stroke-width=${e / 250} />`
+        ${invalid ? this.outline(sectionOf(this.body!.shape, this.lastValid), { fill: 'none', stroke: 'var(--md-sys-color-outline)', width: e / 250, dash: `${e / 50} ${e / 70}` }) : nothing}
+        ${this.outline(section, {
+          fill: invalid ? 'none' : 'color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent)',
+          stroke: this.kind === 'polygon' ? 'none' : invalid ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-primary)',
+          width: e / 130
+        })}
+        ${inside && 'section' in inside
+          ? this.outline(inside.section, { fill: 'var(--md-sys-color-surface)', stroke: 'var(--md-sys-color-primary)', width: e / 250, dash: `${e / 60} ${e / 90}` }, inside.centre)
           : nothing}
-        <polygon points=${pts.map(p => `${p[h]},${p[v]}`).join(' ')} fill=${invalid ? 'none' : 'color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent)'} stroke="none" />
         ${sides.map(s => {
           const a = at(s.from!),
             b = at(s.to!)
@@ -410,8 +501,8 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
             <line side=${s.id} x1=${a[h]} y1=${a[v]} x2=${b[h]} y2=${b[v]} stroke="transparent" stroke-width=${e / 25} style="cursor: copy"
               @pointerdown=${(ev: PointerEvent) => {
                 ev.stopPropagation()
-                const made = insertAfter(this.working, s.from!, this.axis)
-                this.change(made.points)
+                const made = insertAfter(this.working.points, s.from!, this.axis)
+                this.change({ ...this.working, points: made.points })
                 this.selected = made.id
               }}><title>${i18next.t('figure.text.section-editor-add-here', { a: pointLabel(s.from!), b: pointLabel(s.to!) })}</title></line>`
         })}
@@ -431,53 +522,121 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
             <text x=${p[h]! + e / 22} y=${p[v]! - e / 22} font-size=${e / 16} font-weight="600"
               fill=${bad ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-on-surface)'}>${pointLabel(p.id)}</text>
           </g>`
-        })}`}
+        })}
+        ${this.kind === 'polygon'
+          ? nothing
+          : ([h, v] as const).filter(sized).map(axis => {
+              const half = (w.across[axis] ?? 0) / 2
+              const cx = axis === h ? half : 0,
+                cy = axis === h ? 0 : half
+              return svg`<g handle=${axis} style=${`cursor: ${axis === h ? 'ew-resize' : 'ns-resize'}`}
+                  @pointerdown=${(ev: PointerEvent) => {
+                    ev.stopPropagation()
+                    ;(ev.target as Element).setPointerCapture?.(ev.pointerId)
+                    this.dragFrom = this.working
+                    this.dragging = `handle:${axis}`
+                  }}>
+                <rect x=${cx - e / 40} y=${cy - e / 40} width=${e / 20} height=${e / 20} rx=${e / 120}
+                  fill="var(--md-sys-color-surface)" stroke="var(--md-sys-color-primary)" stroke-width=${e / 200} />
+                <text x=${cx + e / 28} y=${cy - e / 28} font-size=${e / 18} fill="var(--md-sys-color-on-surface)">${Math.round((w.across[axis] ?? 0) * 10) / 10}</text>
+                <title>${i18next.t('figure.label.section-editor-across', { axis: axis.toUpperCase() })}</title>
+              </g>`
+            })}`}
       </svg>`
   }
 
-  private list(issues: ReturnType<typeof issuesOf>) {
+  /** A millimetre field: committed to the working state on change, a bad number put back. */
+  private field(label: string, now: number, set: (value: number) => void, disabled = false, note = '') {
+    return html`<label mm>
+      <span>${label}</span>
+      <input
+        type="number"
+        step="any"
+        min="0"
+        inputmode="decimal"
+        aria-label=${label}
+        .value=${live(String(Math.round(now * 1000) / 1000))}
+        ?disabled=${disabled}
+        @change=${(ev: Event) => {
+          const input = ev.target as HTMLInputElement
+          const value = Number(input.value)
+          if (input.value === '' || !Number.isFinite(value)) {
+            input.value = String(now)
+            return
+          }
+          set(value)
+        }}
+      />
+      ${note ? html`<small>${note}</small>` : nothing}
+    </label>`
+  }
+
+  private list(issues: ReturnType<typeof workingIssuesOf>['issues'], words: ReturnType<typeof workingIssuesOf>['words']) {
     const [h, v] = SCREEN[this.axis]
     const marked = markedBy(issues)
-    return html`<ol points aria-label=${i18next.t('figure.label.section-editor-points')}>
-        ${this.working.map(
-          p => html`<li ?selected=${this.selected === p.id} ?marked=${marked.points.has(p.id)} @focusin=${() => (this.selected = p.id)}>
-            <b>${pointLabel(p.id)}</b>
-            ${([h, v] as const).map(
-              axis => html`<input
-                type="number"
-                step="any"
-                inputmode="decimal"
-                aria-label=${i18next.t('figure.label.section-editor-coordinate', { point: pointLabel(p.id), axis: axis.toUpperCase() })}
-                .value=${live(String(p[axis] ?? ''))}
-                @change=${(ev: Event) => {
-                  const input = ev.target as HTMLInputElement
-                  const value = Number(input.value)
-                  if (input.value === '' || !Number.isFinite(value)) {
-                    input.value = String(p[axis] ?? '')
-                    return
-                  }
-                  this.change(movePoint(this.working, p.id, { [axis]: value }))
-                }}
-              />`
-            )}
-            <button
-              ?disabled=${this.working.length <= 3}
-              title=${this.working.length <= 3 ? i18next.t('figure.text.section-issue-too-few') : ''}
-              aria-label=${i18next.t('figure.button.section-editor-remove', { point: pointLabel(p.id) })}
-              @click=${() => this.removePoint(p.id)}
-            >
-              ${i18next.t('figure.button.section-editor-remove', { point: pointLabel(p.id) })}
-            </button>
-          </li>`
+    const m = this.measures?.measures
+    const linked = i18next.t('figure.text.section-editor-linked')
+    return html`<div sizes>
+        ${this.field(
+          i18next.t('figure.label.section-editor-length'),
+          this.working.length,
+          value => this.change({ ...this.working, length: value }),
+          m?.[this.axis] !== 'editable',
+          m?.[this.axis] === 'linked' ? linked : this.keptWords()
         )}
-      </ol>
+        ${this.kind === 'polygon'
+          ? nothing
+          : this.measures?.round
+            ? this.field(i18next.t('figure.label.section-editor-diameter'), this.working.across[h] ?? 0, value => this.change(this.across(h, value)), m?.[h] !== 'editable', m?.[h] === 'linked' ? linked : '')
+            : ([h, v] as const).map(axis =>
+                this.field(
+                  i18next.t('figure.label.section-editor-across', { axis: axis.toUpperCase() }),
+                  this.working.across[axis] ?? 0,
+                  value => this.change(this.across(axis, value)),
+                  m?.[axis] !== 'editable',
+                  m?.[axis] === 'linked' ? linked : ''
+                )
+              )}
+      </div>
+      ${this.kind === 'polygon'
+        ? html`<ol points aria-label=${i18next.t('figure.label.section-editor-points')}>
+            ${this.working.points.map(
+              p => html`<li ?selected=${this.selected === p.id} ?marked=${marked.points.has(p.id)} @focusin=${() => (this.selected = p.id)}>
+                <b>${pointLabel(p.id)}</b>
+                ${([h, v] as const).map(
+                  axis => html`<input
+                    type="number"
+                    step="any"
+                    inputmode="decimal"
+                    aria-label=${i18next.t('figure.label.section-editor-coordinate', { point: pointLabel(p.id), axis: axis.toUpperCase() })}
+                    .value=${live(String(p[axis] ?? ''))}
+                    @change=${(ev: Event) => {
+                      const input = ev.target as HTMLInputElement
+                      const value = Number(input.value)
+                      if (input.value === '' || !Number.isFinite(value)) {
+                        input.value = String(p[axis] ?? '')
+                        return
+                      }
+                      this.change({ ...this.working, points: movePoint(this.working.points, p.id, { [axis]: value }) })
+                    }}
+                  />`
+                )}
+                <button
+                  ?disabled=${this.working.points.length <= 3}
+                  title=${this.working.points.length <= 3 ? i18next.t('figure.text.section-issue-too-few') : ''}
+                  aria-label=${i18next.t('figure.button.section-editor-remove', { point: pointLabel(p.id) })}
+                  @click=${() => this.removePoint(p.id)}
+                >
+                  ${i18next.t('figure.button.section-editor-remove', { point: pointLabel(p.id) })}
+                </button>
+              </li>`
+            )}
+          </ol>`
+        : nothing}
       ${this.note ? html`<small role="status">${this.note}</small>` : nothing}
-      ${issues.length
+      ${words.length
         ? html`<ul issues role="alert">
-            ${issues.map(i => {
-              const w = issueWords(i, this.working, this.axis)
-              return html`<li>${i18next.t(w.key, w.params)}</li>`
-            })}
+            ${words.map(w => html`<li>${i18next.t(w.key, w.params)}</li>`)}
           </ul>`
         : nothing}`
   }

package/client/modeller/figure-section-panel.ts

@@ -99,19 +99,19 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
     const kind = e.section.kind
     return html`<section>
       <h3>${i18next.t('figure.label.group-section')}</h3>
+      ${body.shape.dimensions.jamb === undefined
+        ? html`<div field>
+            <button act ?disabled=${this.locked} @click=${() => this.dispatchEvent(new CustomEvent('section-editor-open', { bubbles: true, composed: true }))}>
+              ${i18next.t('figure.button.section-editor-open')}
+            </button>
+          </div>`
+        : nothing}
       ${kind === 'rectangle' ? this.renderCorner(body) : nothing}
       ${kind === 'rectangle' || kind === 'ellipse'
         ? this.renderCavity(body, e.axis)
-        : html`${kind === 'polygon' && !body.shape.cavity && body.shape.dimensions.jamb === undefined
-              ? html`<div field>
-                  <button act ?disabled=${this.locked} @click=${() => this.dispatchEvent(new CustomEvent('section-editor-open', { bubbles: true, composed: true }))}>
-                    ${i18next.t('figure.button.section-editor-open')}
-                  </button>
-                </div>`
-              : nothing}
-            <div field>
-              <small>${i18next.t('figure.text.section-cavity-unavailable')}</small>
-            </div>`}
+        : html`<div field>
+            <small>${i18next.t('figure.text.section-cavity-unavailable')}</small>
+          </div>`}
     </section>`
   }
 

package/client/modeller/section-drawing.ts

@@ -1,5 +1,5 @@
-import { FIGURE_SECTION_PLANE, FIGURE_SECTION_POINT_LIMIT, checkFigureSection, figureSectionSidesOf } from '@hatiolab/figure-model'
-import type { FigureSectionIssue, FigureSectionPoint } from '@hatiolab/figure-model'
+import { FIGURE_SECTION_PLANE, FIGURE_SECTION_POINT_LIMIT, checkFigureSection, figureExtrusionFeaturesOf, figureSectionSidesOf } from '@hatiolab/figure-model'
+import type { FigureEvaluatedShape, FigureSection, FigureSectionIssue, FigureSectionPoint } from '@hatiolab/figure-model'
 
 /*
  * What the section editor does to a drawn section's points, and how it says what is wrong with them (ADR-0100 §3.2).
@@ -68,6 +68,8 @@ export function issueWords(issue: FigureSectionIssue, points: Points, axis: Axis
       return { key: 'figure.text.section-issue-too-few', params: {} }
     case 'TOO_MANY_POINTS':
       return { key: 'figure.text.section-issue-too-many', params: { limit: String(issue.limit) } }
+    case 'CORNER_TOO_LARGE':
+      return { key: 'figure.text.section-issue-corner', params: { max: String(Math.round(issue.max * 1000) / 1000) } }
     default:
       return { key: 'figure.text.section-issue-number', params: {} }
   }
@@ -95,3 +97,54 @@ export function extentOf(points: Points, axis: Axis): number {
 }
 
 export const POINT_LIMIT = FIGURE_SECTION_POINT_LIMIT
+
+/** What the section editor holds while it is open: the points of a drawn section, the widths across, the length. */
+export interface SectionWorking {
+  points: FigureSectionPoint[]
+  /** Along each plane axis: a rectangle's size, an ellipse's diameter. Empty for a drawn section. */
+  across: Partial<Record<Axis, number>>
+  length: number
+}
+
+/** The working state of a pushed part as it stands. */
+export function workingOf(shape: FigureEvaluatedShape): SectionWorking {
+  const e = shape.extrusion!
+  const s = e.section
+  const [u, v] = FIGURE_SECTION_PLANE[e.axis]
+  const across =
+    s.kind === 'rectangle'
+      ? { [u]: s.size[u]!, [v]: s.size[v]! }
+      : s.kind === 'ellipse'
+        ? { [u]: 2 * s.radius[u]!, [v]: 2 * s.radius[v]! }
+        : {}
+  return { points: s.kind === 'polygon' ? s.points.map(p => ({ ...p })) : [], across, length: e.end - e.start }
+}
+
+/** The section the working state makes, of the part's own kind: its corners kept, its points or widths the working ones. */
+export function sectionOf(shape: FigureEvaluatedShape, w: SectionWorking): FigureSection {
+  const s = shape.extrusion!.section
+  const [u, v] = FIGURE_SECTION_PLANE[shape.extrusion!.axis]
+  if (s.kind === 'polygon') return { kind: 'polygon', points: w.points }
+  if (s.kind === 'ellipse') return { kind: 'ellipse', radius: { [u]: w.across[u]! / 2, [v]: w.across[v]! / 2 } }
+  return { kind: 'rectangle', size: { [u]: w.across[u]!, [v]: w.across[v]! }, ...(s.corner ? { corner: s.corner } : {}) }
+}
+
+/** What would be refused, as words, with the section's own issues for marking points and sides. By the kernel's checks. */
+export function workingIssuesOf(
+  shape: FigureEvaluatedShape,
+  w: SectionWorking
+): { issues: FigureSectionIssue[]; words: Array<{ key: string; params: Record<string, string> }> } {
+  const e = shape.extrusion!
+  const section = sectionOf(shape, w)
+  const issues = checkFigureSection(section, e.axis)
+  const words = issues.map(i => issueWords(i, w.points, e.axis))
+  if (!(Number.isFinite(w.length) && w.length > 0)) words.push({ key: 'figure.text.section-issue-length', params: {} })
+  if (!issues.length && words.length === 0 && shape.cavity) {
+    const made = figureExtrusionFeaturesOf({ axis: e.axis, section, start: e.start, end: e.start + w.length }, [shape.cavity])
+    if ('refused' in made) {
+      const r = made.refused
+      words.push({ key: r.code === 'CAVITY_NO_LENGTH' ? 'figure.text.section-issue-cavity-length' : 'figure.text.section-issue-cavity-walls', params: {} })
+    }
+  }
+  return { issues, words }
+}