@things-factory/figure-ui 10.1.85 → 10.1.87

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

@@ -0,0 +1,635 @@
+import { __decorate, __metadata } from "tslib";
+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 { SidePanelStyles } from './side-panel-styles.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 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.
+ */
+let FigureSectionEditor = class FigureSectionEditor extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** The figure's revision now; the editor remembers the one it opened at. */
+        this.revision = 0;
+        /** Narrow: the outline or the solid behind. */
+        this.show = 'outline';
+        /** Set when the space the editor stands in leaves too little beside it to see the solid. */
+        this.narrow = false;
+        this.room = new ResizeObserver(([entry]) => {
+            this.narrow = (entry?.contentRect.width ?? 0) < NARROW_BELOW;
+            if (!this.narrow)
+                this.show = 'outline';
+        });
+        this.working = { points: [], across: {}, length: 0 };
+        this.selected = null;
+        this.note = '';
+        this.history = [];
+        this.openedAt = 0;
+        this.dragging = null;
+        /** 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;
+        /*
+         * 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".
+         */
+        this.keys = (e) => {
+            const inField = e.composedPath()[0]?.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();
+            }
+        };
+    }
+    static { this.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;
+    }
+  `]; }
+    get axis() {
+        return (this.body?.shape.extrusion?.axis ?? 'y');
+    }
+    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. */
+    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 (this.valid(next))
+            this.lastValid = next;
+        this.preview();
+    }
+    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. */
+    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). */
+    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.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. */
+    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 || !this.valid(this.working))
+            return;
+        this.dispatchEvent(new CustomEvent('command', { detail: { action: this.action(this.working) }, bubbles: true, composed: true }));
+        this.close();
+    }
+    cancel() {
+        this.dispatchEvent(new CustomEvent('command-live', { detail: { action: null }, bubbles: true, composed: true }));
+        this.close();
+    }
+    close() {
+        this.dispatchEvent(new CustomEvent('section-editor-close', { bubbles: true, composed: true }));
+    }
+    svgPoint(e) {
+        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. */
+    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, 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'].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. */
+    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 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 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>
+      <svg
+        viewBox=${`${-e} ${-e} ${2 * e} ${2 * e}`}
+        role="img"
+        aria-label=${i18next.t('figure.label.section-editor')}
+        @pointermove=${(ev) => {
+            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], 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) => {
+                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) => {
+                ev.stopPropagation();
+                ev.target.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].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>`;
+    }
+    /** 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(now);
+                return;
+            }
+            set(value);
+        }}
+      />
+      ${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}
+      ${words.length
+            ? html `<ul issues role="alert">
+            ${words.map(w => html `<li>${i18next.t(w.key, w.params)}</li>`)}
+          </ul>`
+            : nothing}`;
+    }
+};
+__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)
+], FigureSectionEditor.prototype, "revision", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], FigureSectionEditor.prototype, "show", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], FigureSectionEditor.prototype, "narrow", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureSectionEditor.prototype, "working", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureSectionEditor.prototype, "selected", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureSectionEditor.prototype, "note", void 0);
+FigureSectionEditor = __decorate([
+    customElement('figure-section-editor')
+], FigureSectionEditor);
+export { FigureSectionEditor };
+//# sourceMappingURL=figure-section-editor.js.map