@things-factory/figure-ui 10.1.85 → 10.1.87

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

@@ -0,0 +1,643 @@
+import { css, html, LitElement, nothing, svg } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { live } from 'lit/directives/live.js'
+
+import { i18next, localize } from '@operato/i18n'
+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 { 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'
+
+/** How the section is laid on the screen, by the axis it is pushed along: across to the right, then down. */
+const SCREEN: Record<Axis, [Axis, Axis]> = { y: ['x', 'z'], x: ['z', 'y'], z: ['x', 'y'] }
+
+/** The editor's width and room for the solid beside it: below this the two take turns. */
+export const NARROW_BELOW = 900
+
+/**
+ * 단면 편집 — 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 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.
+ *
+ * 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) {
+  static styles = [SidePanelStyles, css`
+    :host {
+      position: absolute;
+      left: 12px;
+      top: 12px;
+      bottom: 12px;
+      z-index: 5;
+      display: grid;
+      grid-template-rows: auto auto minmax(0, 1fr) auto;
+      width: min(560px, calc(100% - 24px));
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 12px;
+      box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
+      overflow: hidden;
+    }
+    /* Each in its own row: the tabs are hidden on a wide screen, and without the rows named the body fell into theirs. */
+    header {
+      grid-row: 1;
+    }
+    nav[tabs] {
+      grid-row: 2;
+    }
+    div[body] {
+      grid-row: 3;
+    }
+    footer {
+      grid-row: 4;
+    }
+    header {
+      display: flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 10px 14px 4px;
+    }
+    header h2 {
+      margin: 0;
+      font-size: var(--ui-t-body);
+    }
+    header span {
+      font-size: 0.72rem;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    nav[tabs] {
+      display: none;
+      gap: 4px;
+      padding: 0 14px 6px;
+    }
+    nav[tabs] button,
+    footer button,
+    li button {
+      font: inherit;
+      font-size: 0.78rem;
+      min-height: 30px;
+      padding: 0 12px;
+      border-radius: 15px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      background: var(--md-sys-color-surface-container-lowest);
+      color: var(--md-sys-color-on-surface);
+      cursor: pointer;
+    }
+    nav[tabs] button[on] {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+    }
+    div[body] {
+      display: grid;
+      grid-template-rows: minmax(160px, 1fr) auto;
+      min-height: 0;
+      border-top: 1px solid var(--md-sys-color-outline-variant);
+    }
+    div[outline] {
+      position: relative;
+      min-height: 0;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+      touch-action: none;
+      user-select: none;
+    }
+    div[caption] {
+      position: absolute;
+      left: 8px;
+      top: 6px;
+      font-size: 0.68rem;
+      color: var(--md-sys-color-on-surface-variant);
+      pointer-events: none;
+    }
+    div[caption][last-valid] {
+      color: var(--md-sys-color-error);
+      font-weight: 600;
+    }
+    aside {
+      max-height: 34vh;
+      overflow: auto;
+      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;
+      padding: 0;
+      display: grid;
+      gap: 4px;
+    }
+    ol[points] li {
+      display: grid;
+      grid-template-columns: 2.2em minmax(0, 1fr) minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: center;
+      padding: 2px 4px;
+      border-radius: 6px;
+    }
+    ol[points] li[selected] {
+      background: var(--md-sys-color-secondary-container);
+    }
+    ol[points] li[marked] b {
+      color: var(--md-sys-color-error);
+    }
+    ol[points] input {
+      min-width: 0;
+      font: inherit;
+    }
+    ul[issues] {
+      margin: 8px 0 0;
+      padding: 0 0 0 16px;
+      color: var(--md-sys-color-error);
+      font-size: 0.76rem;
+    }
+    small {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    footer {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 14px;
+      border-top: 1px solid var(--md-sys-color-outline-variant);
+    }
+    footer span[grow] {
+      flex: 1;
+      font-size: 0.72rem;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    footer span[grow][stale] {
+      color: var(--md-sys-color-error);
+    }
+    footer button[primary] {
+      background: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+      border-color: transparent;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    /* Too little room beside the editor for the solid: the outline and the solid take turns (§7). */
+    :host([narrow]) nav[tabs] {
+      display: flex;
+    }
+    :host([narrow][show='solid']) div[body] {
+      display: none;
+    }
+    :host([narrow][show='solid']) {
+      bottom: auto;
+    }
+  `]
+
+  /** 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. */
+  @property({ reflect: true }) show: 'outline' | 'solid' = 'outline'
+  /** Set when the space the editor stands in leaves too little beside it to see the solid. */
+  @property({ type: Boolean, reflect: true }) narrow = false
+  private room = new ResizeObserver(([entry]) => {
+    this.narrow = (entry?.contentRect.width ?? 0) < NARROW_BELOW
+    if (!this.narrow) this.show = 'outline'
+  })
+
+  @state() private working: SectionWorking = { points: [], across: {}, length: 0 }
+  @state() private selected: string | null = null
+  @state() private note = ''
+  private opened!: SectionWorking
+  private history: SectionWorking[] = []
+  private lastValid!: SectionWorking
+  private openedAt = 0
+  private dragging: string | 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()
+    this.working = workingOf(this.body!.shape)
+    this.opened = this.working
+    this.lastValid = this.working
+    this.openedAt = this.revision
+    this.extent = this.extentOf(this.working)
+    window.addEventListener('keydown', this.keys, true)
+    if (this.parentElement) this.room.observe(this.parentElement)
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.keys, true)
+    this.room.disconnect()
+    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".
+   */
+  private keys = (e: KeyboardEvent) => {
+    const inField = (e.composedPath()[0] as HTMLElement)?.tagName === 'INPUT'
+    const take = () => (e.preventDefault(), e.stopImmediatePropagation())
+    if (e.key === 'Escape') {
+      take()
+      this.cancel()
+    } else if ((e.key === 'Delete' || e.key === 'Backspace') && !inField && this.selected) {
+      /* In a field the key deletes a character; outside, the chosen point. */
+      take()
+      this.removePoint(this.selected)
+    } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'z' && !inField) {
+      take()
+      this.back()
+    }
+  }
+
+  private get stale() {
+    return this.revision !== this.openedAt
+  }
+
+  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 (this.valid(next)) this.lastValid = next
+    this.preview()
+  }
+
+  private back() {
+    const before = this.history.pop()
+    if (!before) return
+    this.working = before
+    if (this.valid(before)) this.lastValid = before
+    this.preview()
+  }
+
+  /** 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 })
+    )
+  }
+
+  /** 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.points, id)
+    if ('refused' in next) {
+      this.note = i18next.t('figure.text.section-issue-too-few')
+      return
+    }
+    this.selected = null
+    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 || !this.valid(this.working)) return
+    this.dispatchEvent(new CustomEvent('command', { detail: { action: this.action(this.working) }, bubbles: true, composed: true }))
+    this.close()
+  }
+
+  private cancel() {
+    this.dispatchEvent(new CustomEvent('command-live', { detail: { action: null }, bubbles: true, composed: true }))
+    this.close()
+  }
+
+  private close() {
+    this.dispatchEvent(new CustomEvent('section-editor-close', { bubbles: true, composed: true }))
+  }
+
+  private svgPoint(e: PointerEvent): { h: number; v: number } {
+    const el = this.renderRoot.querySelector('svg')!
+    const pt = el.createSVGPoint()
+    pt.x = e.clientX
+    pt.y = e.clientY
+    const p = pt.matrixTransform(el.getScreenCTM()!.inverse())
+    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, words } = workingIssuesOf(this.body.shape, this.working)
+    return html`
+      <header>
+        <h2>${i18next.t('figure.label.section-editor')}</h2>
+        <span>${this.body.id}</span>
+      </header>
+      <nav tabs>
+        ${(['outline', 'solid'] as const).map(
+          one => html`<button ?on=${this.show === one} @click=${() => (this.show = one)}>${i18next.t(`figure.label.section-editor-${one}`)}</button>`
+        )}
+      </nav>
+      <div body>
+        <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(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 || words.length > 0} @click=${() => this.apply()}>${i18next.t('figure.button.section-editor-apply')}</button>
+      </footer>
+    `
+  }
+
+  /** 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 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 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>
+      <svg
+        viewBox=${`${-e} ${-e} ${2 * e} ${2 * e}`}
+        role="img"
+        aria-label=${i18next.t('figure.label.section-editor')}
+        @pointermove=${(ev: PointerEvent) => {
+          if (!this.dragging) return
+          if (this.dragFrom) this.history.push(this.dragFrom), (this.dragFrom = null)
+          const p = this.svgPoint(ev)
+          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))}
+        @pointerleave=${() => ((this.dragging = null), (this.dragFrom = null))}
+      >
+        ${svg`${lines.map(g => svg`<line x1=${g} y1=${-e} x2=${g} y2=${e} stroke="var(--md-sys-color-outline-variant)" stroke-width=${e / 400} opacity="0.5" />
+          <line x1=${-e} y1=${g} x2=${e} y2=${g} stroke="var(--md-sys-color-outline-variant)" stroke-width=${e / 400} opacity="0.5" />`)}
+        <line x1=${-e} y1="0" x2=${e} y2="0" stroke="var(--md-sys-color-outline)" stroke-width=${e / 250} />
+        <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.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}
+        ${sides.map(s => {
+          const a = at(s.from!),
+            b = at(s.to!)
+          const bad = marked.sides.has(s.id)
+          return svg`<line x1=${a[h]} y1=${a[v]} x2=${b[h]} y2=${b[v]}
+            stroke=${bad ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-primary)'} stroke-width=${e / (bad ? 90 : 130)}
+            stroke-dasharray=${bad ? `${e / 40} ${e / 80}` : ''} />
+            <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.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>`
+        })}
+        ${pts.map(p => {
+          const bad = marked.points.has(p.id),
+            on = this.selected === p.id
+          return svg`<g point=${p.id} style="cursor: grab"
+              @pointerdown=${(ev: PointerEvent) => {
+                ev.stopPropagation()
+                ;(ev.target as Element).setPointerCapture?.(ev.pointerId)
+                this.dragFrom = this.working
+                this.selected = p.id
+                this.dragging = p.id
+              }}>
+            <circle cx=${p[h]} cy=${p[v]} r=${e / (on ? 28 : 36)} fill=${bad ? 'var(--md-sys-color-error)' : on ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-surface)'}
+              stroke=${bad ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-primary)'} stroke-width=${e / 250} />
+            <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>`
+  }
+
+  /** 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)
+    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()
+        )}
+        ${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}
+      ${words.length
+        ? html`<ul issues role="alert">
+            ${words.map(w => html`<li>${i18next.t(w.key, w.params)}</li>`)}
+          </ul>`
+        : nothing}`
+  }
+}

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

@@ -99,6 +99,13 @@ 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)

package/client/modeller/live.ts

@@ -57,6 +57,11 @@ export function livePartsOf(asset: FigureAsset, live: LiveValues): FigureRenderP
     if (live.action) next = applyFigureAuthoring(next, live.action)
     /* Read against the figure the edit makes: a command can take an input away (one wall becomes one per side). */
     const { design, state } = liveOverridesOf(next, live.values)
+    /*
+     * An input the edit or the command in hand wrote takes its value: the values as they stand hold its old one (a
+     * point's coordinate before it was moved, a corner's radius before it was typed again) and would put it back.
+     */
+    for (const id of Object.keys(design)) if (next.designInputs[id] !== asset.designInputs[id]) delete design[id]
     if (Object.keys(design).length) next = { ...next, designInputs: { ...next.designInputs, ...design } }
     return drawableFigureParts(compileFigureAsset(next).evaluate(state).geometry)
   } catch {