@things-factory/figure-ui 10.1.86 → 10.1.88

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

@@ -1,20 +1,24 @@
 import { LitElement, nothing } from 'lit';
-import type { FigureEvaluatedShape } from '@hatiolab/figure-model';
+import type { FigureEvaluatedShape, FigureSectionMeasure } from '@hatiolab/figure-model';
+type Axis = 'x' | 'y' | 'z';
 /** The editor's width and room for the solid beside it: below this the two take turns. */
 export declare const NARROW_BELOW = 900;
 declare const FigureSectionEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 /**
- * 단면 편집 — 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.
  */
 export declare class FigureSectionEditor extends FigureSectionEditor_base {
     static styles: import("lit").CSSResult[];
@@ -23,6 +27,13 @@ export declare class FigureSectionEditor extends FigureSectionEditor_base {
         id: string;
         shape: FigureEvaluatedShape;
     };
+    /** Which of its measures can be set (figure-model's `figureSectionMeasuresOf`). */
+    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. */
+    kept?: -1 | 0 | 1;
     /** The figure's revision now; the editor remembers the one it opened at. */
     revision: number;
     /** Narrow: the outline or the solid behind. */
@@ -33,30 +44,44 @@ export declare class FigureSectionEditor extends FigureSectionEditor_base {
     private working;
     private selected;
     private note;
+    private opened;
     private history;
     private lastValid;
     private openedAt;
     private dragging;
-    /** The points as they were when a drag began: kept once the point moves, so a press alone is not a step back. */
+    /** The state as it was when a drag began: kept once something moves, so a press alone is not a step back. */
     private dragFrom;
     private extent;
     private get axis();
+    private get kind();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** How far the drawing reaches from the origin: the outline's farthest point with room around, in 50 mm steps. */
+    private extentOf;
     private keys;
     private get stale();
+    private valid;
     private change;
     private back;
-    /** 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;
+    /** One command for everything changed since the editor opened; a measure not changed is not sent (it may follow another). */
     private action;
     private removePoint;
+    /** A width across set: a circle's two are one. */
+    private across;
     private apply;
     private cancel;
     private close;
     private svgPoint;
+    /** Words for the face a length change keeps, by the part's relations; nothing when they cannot say. */
+    private keptWords;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /** A section drawn as the screen lays it: across to the right, then down. */
+    private outline;
     private drawing;
+    /** A millimetre field: committed to the working state on change, a bad number put back. */
+    private field;
     private list;
 }
 export {};

package/dist-client/modeller/figure-section-editor.js

@@ -3,25 +3,29 @@ 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 { figureSectionSidesOf } from '@hatiolab/figure-model';
+import { figureCavitySectionOf, figureSectionSidesOf } from '@hatiolab/figure-model';
 import { SidePanelStyles } from './side-panel-styles.js';
-import { extentOf, insertAfter, issueWords, issuesOf, markedBy, movePoint, pointLabel, removePoint } from './section-drawing.js';
+import { insertAfter, markedBy, movePoint, pointLabel, removePoint, sectionOf, workingIssuesOf, workingOf } from './section-drawing.js';
+import { END_FACE } from './section-controls.js';
 /** How the section is laid on the screen, by the axis it is pushed along: across to the right, then down. */
 const SCREEN = { 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 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.
  */
 let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(LitElement) {
     constructor() {
@@ -37,14 +41,13 @@ let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(Li
             if (!this.narrow)
                 this.show = 'outline';
         });
-        this.working = [];
+        this.working = { points: [], across: {}, length: 0 };
         this.selected = null;
         this.note = '';
         this.history = [];
-        this.lastValid = [];
         this.openedAt = 0;
         this.dragging = null;
-        /** The points as they were when a drag began: kept once the point moves, so a press alone is not a step back. */
+        /** The state as it was when a drag began: kept once something moves, so a press alone is not a step back. */
         this.dragFrom = null;
         this.extent = 200;
         /*
@@ -170,6 +173,20 @@ let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(Li
       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;
@@ -242,13 +259,16 @@ let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(Li
     get axis() {
         return (this.body?.shape.extrusion?.axis ?? 'y');
     }
+    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);
@@ -258,14 +278,23 @@ let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(Li
         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. */
+    extentOf(w) {
+        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;
+    }
     get stale() {
         return this.revision !== this.openedAt;
     }
+    valid(w) {
+        return workingIssuesOf(this.body.shape, w).words.length === 0;
+    }
     change(next) {
         this.history.push(this.working);
         this.working = next;
         this.note = '';
-        if (!issuesOf(next, this.axis).length)
+        if (this.valid(next))
             this.lastValid = next;
         this.preview();
     }
@@ -274,28 +303,44 @@ let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(Li
         if (!before)
             return;
         this.working = before;
-        if (!issuesOf(before, this.axis).length)
+        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. */
     preview() {
         this.dispatchEvent(new CustomEvent('command-live', { detail: { action: this.action(this.lastValid) }, bubbles: true, composed: true }));
     }
-    action(points) {
-        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). */
+    action(w) {
+        const o = this.opened;
+        const changed = (a, b) => Math.abs((a ?? 0) - (b ?? 0)) > 1e-9;
+        const across = Object.fromEntries(Object.entries(w.across).filter(([k, v]) => changed(v, o.across[k])));
+        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 } : {})
+        };
     }
     removePoint(id) {
-        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. */
+    across(axis, value) {
+        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 } };
     }
     apply() {
-        if (this.stale || issuesOf(this.working, this.axis).length)
+        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();
@@ -315,45 +360,72 @@ let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(Li
         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. */
+    keptWords() {
+        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'].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)}</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>
     `;
     }
-    drawing(issues) {
+    /** A section drawn as the screen lays it: across to the right, then down. */
+    outline(section, attrs, centre = {}) {
+        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 ?? ''} />`;
+    }
+    drawing(issues, invalid) {
         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) => pts.find(p => p.id === id);
         const grid = Math.max(10, Math.pow(10, Math.floor(Math.log10(e))) / 2);
         const lines = [];
         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) => 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>
@@ -367,8 +439,11 @@ let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(Li
             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)
+            const handle = /^handle:(.)$/.exec(this.dragging);
+            this.working = handle
+                ? this.across(handle[1], 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();
         }}
@@ -381,10 +456,15 @@ let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(Li
         <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);
             const bad = marked.sides.has(s.id);
@@ -394,8 +474,8 @@ let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(Li
             <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) => {
                 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>`;
         })}
@@ -414,48 +494,100 @@ let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(Li
             <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].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) => {
+                    ev.stopPropagation();
+                    ev.target.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>`;
     }
-    list(issues) {
-        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].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) => {
+    /** A millimetre field: committed to the working state on change, a bad number put back. */
+    field(label, now, set, 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) => {
             const input = ev.target;
             const value = Number(input.value);
             if (input.value === '' || !Number.isFinite(value)) {
-                input.value = String(p[axis] ?? '');
+                input.value = String(now);
                 return;
             }
-            this.change(movePoint(this.working, p.id, { [axis]: value }));
+            set(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>`)}
-      </ol>
+      />
+      ${note ? html `<small>${note}</small>` : nothing}
+    </label>`;
+    }
+    list(issues, 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].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].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) => {
+                const input = ev.target;
+                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}`;
     }
@@ -464,6 +596,14 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], FigureSectionEditor.prototype, "body", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureSectionEditor.prototype, "measures", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Number)
+], FigureSectionEditor.prototype, "kept", void 0);
 __decorate([
     property({ type: Number }),
     __metadata("design:type", Object)
@@ -478,7 +618,7 @@ __decorate([
 ], FigureSectionEditor.prototype, "narrow", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Array)
+    __metadata("design:type", Object)
 ], FigureSectionEditor.prototype, "working", void 0);
 __decorate([
     state(),