@things-factory/figure-ui 10.1.85 → 10.1.87

package/client/modeller/section-drawing.ts

@@ -0,0 +1,150 @@
+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).
+ * The points are the kernel's own (`{ id, x, z }` for a push along Y), their validity is the kernel's own check, and a
+ * point's number on screen is its own name's number (Q9): p3 is 「3」 before and after any edit, and deleting it leaves
+ * 1, 2 and 4.
+ */
+
+type Axis = 'x' | 'y' | 'z'
+export type Points = readonly FigureSectionPoint[]
+
+/** The number a point is shown by: its name's number. */
+export const pointLabel = (id: string) => /^p(\d+)$/.exec(id)?.[1] ?? id
+
+/** The next point's name: one past the highest number the loop has, so a new point never takes a gap's number. */
+export function nextPointId(points: Points): string {
+  return `p${Math.max(0, ...points.map(p => Number(/^p(\d+)$/.exec(p.id)?.[1] ?? 0))) + 1}`
+}
+
+/** A point in the middle of the side from `from` to the point after it, whole millimetres; the new point's id with it. */
+export function insertAfter(points: Points, from: string, axis: Axis): { points: FigureSectionPoint[]; id: string } {
+  const [u, v] = FIGURE_SECTION_PLANE[axis]
+  const i = points.findIndex(p => p.id === from)
+  const a = points[i]!,
+    b = points[(i + 1) % points.length]!
+  const id = nextPointId(points)
+  const mid = { id, [u]: Math.round((a[u]! + b[u]!) / 2), [v]: Math.round((a[v]! + b[v]!) / 2) } as FigureSectionPoint
+  return { points: [...points.slice(0, i + 1), mid, ...points.slice(i + 1)], id }
+}
+
+/** The points less one, or why not: a section is three points or more. */
+export function removePoint(points: Points, id: string): FigureSectionPoint[] | { refused: 'too-few' } {
+  if (points.length <= 3) return { refused: 'too-few' }
+  return points.filter(p => p.id !== id)
+}
+
+export function movePoint(points: Points, id: string, at: Partial<Record<Axis, number>>): FigureSectionPoint[] {
+  return points.map(p => (p.id === id ? { ...p, ...at } : p))
+}
+
+/** What is wrong with the points, by the kernel's own check. */
+export const issuesOf = (points: Points, axis: Axis) => checkFigureSection({ kind: 'polygon', points: [...points] }, axis)
+
+/** A side said in the loop's order, 3–4 not 4–3: its id is the pair in name order, which a person never sees. */
+function sideLabel(points: Points, axis: Axis, side: string): string {
+  const s = figureSectionSidesOf({ kind: 'polygon', points: [...points] }, axis).find(x => x.id === side)
+  const [a, b] = s?.from ? [s.from, s.to!] : side.split('~')
+  return `${pointLabel(a!)}–${pointLabel(b!)}`
+}
+
+/** An issue as the words that say it: an i18n key and its values. */
+export function issueWords(issue: FigureSectionIssue, points: Points, axis: Axis): { key: string; params: Record<string, string> } {
+  const line = (s: string) => sideLabel(points, axis, s)
+  switch (issue.code) {
+    case 'SIDES_CROSS':
+      return { key: 'figure.text.section-issue-cross', params: { a: line(issue.sides[0]), b: line(issue.sides[1]) } }
+    case 'SIDES_TOUCH':
+      return { key: 'figure.text.section-issue-touch', params: { a: line(issue.sides[0]), b: line(issue.sides[1]) } }
+    case 'SIDES_FOLD':
+      return { key: 'figure.text.section-issue-fold', params: { a: line(issue.sides[0]), b: line(issue.sides[1]) } }
+    case 'ZERO_LENGTH_SIDE':
+      return { key: 'figure.text.section-issue-zero-length', params: { a: line(issue.side) } }
+    case 'ZERO_AREA':
+      return { key: 'figure.text.section-issue-zero-area', params: {} }
+    case 'TOO_FEW_POINTS':
+      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: {} }
+  }
+}
+
+/** Every side and point an issue names, to mark on the drawing -- by more than colour: the list says them too. */
+export function markedBy(issues: readonly FigureSectionIssue[]): { sides: Set<string>; points: Set<string> } {
+  const sides = new Set<string>(),
+    points = new Set<string>()
+  for (const i of issues) {
+    if ('sides' in i) for (const s of i.sides) sides.add(s)
+    if ('side' in i) sides.add(i.side)
+    if ('point' in i) points.add(i.point)
+    if ('at' in i) points.add(String(i.at).split('.')[0]!)
+  }
+  for (const s of sides) for (const p of s.split('~')) points.add(p)
+  return { sides, points }
+}
+
+/** How far the drawing reaches from the origin: the points' farthest coordinate with room around, in 50 mm steps. */
+export function extentOf(points: Points, axis: Axis): number {
+  const [u, v] = FIGURE_SECTION_PLANE[axis]
+  const far = Math.max(1, ...points.flatMap(p => [Math.abs(p[u] ?? 0), Math.abs(p[v] ?? 0)]))
+  return Math.ceil((far * 1.4 + 40) / 50) * 50
+}
+
+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 }
+}

package/dist-client/modeller/clips.d.ts

@@ -34,6 +34,6 @@ export declare const trackEdit: (clip: Clip, track: ClipTrack, patch?: Partial<P
     state: string;
     clip: string;
     keys: ClipKey[];
-    loop: "wrap" | "hold";
+    loop: "hold" | "wrap";
     interpolation: "linear" | "step";
 };

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

@@ -7,6 +7,7 @@ import './canvas.js';
 import './figure-parts.js';
 import './figure-material-panel.js';
 import './figure-section-panel.js';
+import './figure-section-editor.js';
 import './figure-links.js';
 import './figure-controls.js';
 import './figure-clips.js';
@@ -73,6 +74,8 @@ export declare class FigureEditor extends LitElement {
     private hiddenParts;
     /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
     private live;
+    /** The part whose drawn section is open in the section editor (ADR-0100 §3.2), or null. */
+    private sectionEditing;
     /**
      * A command seen before it is done (ADR-0097 §5.5): worked out on a copy for the figure, version, part and command it
      * names, and shown only while all four are still the ones on screen. Nothing of it is saved or undone.
@@ -134,6 +137,7 @@ export declare class FigureEditor extends LitElement {
     private currentInputs;
     /** A value in hand: an input's value (design or pose) or a part edit. Nothing is recorded. */
     private hold;
+    private closeSectionEditor;
     /** A command in hand, drawn and not run; `null` lets go of it and the figure as it stands is drawn again. */
     private holdAction;
     private changed;
@@ -289,6 +293,8 @@ export declare class FigureEditor extends LitElement {
      * recipe, or an AI draft when the page offers one. Nothing is added until one is chosen; the type, the space, the
      * mounting face and the tags are not asked for first.
      */
+    /** The section editor over the canvas, the figure behind it drawing what the working points make. */
+    private renderSectionEditor;
     private renderStart;
     /**
      * Where the panel is, held at its top: the model by its name -- the way back to its settings -- and the part chosen,

package/dist-client/modeller/editor.js

@@ -7,7 +7,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, figurePartFaceOf, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
+import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figurePartFaceOf, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
 import './figure-recipe-catalog.js';
 import { captureFigureThumbnail } from './thumbnail.js';
 import { drawableFigureParts } from './renderer.js';
@@ -15,6 +15,7 @@ import './canvas.js';
 import './figure-parts.js';
 import './figure-material-panel.js';
 import './figure-section-panel.js';
+import './figure-section-editor.js';
 import { faceHighlightOf, ghostPartsOf, previewWordsOf, rowWordsOf } from './command-preview.js';
 import { motionEndsOf } from './motion-ends.js';
 import './figure-links.js';
@@ -70,12 +71,20 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.hiddenParts = new Set();
         /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
         this.live = NOTHING_LIVE;
+        /** The part whose drawn section is open in the section editor (ADR-0100 §3.2), or null. */
+        this.sectionEditing = null;
         this.lastContext = null;
         /** The modeller's keys (`keys.ts`): undo, redo, duplicate, remove, back to the whole figure, the gizmo's modes. */
         this.onKey = (e) => {
             const view = this.session?.read();
             if (!view || view.loading || view.saving || !view.context || !this.isConnected)
                 return;
+            /*
+             * The section editor open takes the keys for its own: Esc cancels it, Delete deletes a point, Ctrl+Z undoes a point.
+             * Heard here first, they deselected the part, deleted the part and undid the figure's last step (2026-09-30).
+             */
+            if (this.sectionEditing)
+                return;
             const canvas = this.renderRoot.querySelector('figure-canvas');
             const path = e.composedPath();
             const action = keyActionOf({ key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey, target: path[0], inScene: !!canvas && path.includes(canvas) }, this.selected);
@@ -622,6 +631,12 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.selected = '';
         if (_changed.has('selected'))
             this.gizmoMode = undefined;
+        /*
+         * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
+         * own Esc, the part removed, another figure opened -- it closes and lets go of the preview it held.
+         */
+        if (this.sectionEditing && this.sectionEditing !== this.selected)
+            this.closeSectionEditor();
     }
     /** The scene toggles: the mode already shown takes the gizmo away. */
     useGizmo(mode) {
@@ -693,6 +708,10 @@ let FigureEditor = class FigureEditor extends LitElement {
     hold(values, edit) {
         this.live = { values: { ...this.live.values, ...values }, ...(edit ? { edit } : this.live.edit ? { edit: this.live.edit } : {}) };
     }
+    closeSectionEditor() {
+        this.sectionEditing = null;
+        this.holdAction(null);
+    }
     /** A command in hand, drawn and not run; `null` lets go of it and the figure as it stands is drawn again. */
     holdAction(action) {
         const { action: _, ...rest } = this.live;
@@ -1801,6 +1820,25 @@ let FigureEditor = class FigureEditor extends LitElement {
      * recipe, or an AI draft when the page offers one. Nothing is added until one is chosen; the type, the space, the
      * mounting face and the tags are not asked for first.
      */
+    /** The section editor over the canvas, the figure behind it drawing what the working points make. */
+    renderSectionEditor(geometry) {
+        const part = geometry.find(g => ownerOf(g.id) === this.selected);
+        /* 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();
+        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) => this.linkCommand(e.detail.action)}
+      @command-live=${(e) => this.holdAction(e.detail.action)}
+      @section-editor-close=${() => this.closeSectionEditor()}
+    ></figure-section-editor>`;
+    }
     renderStart() {
         const shapes = ['box', 'cylinder', 'plate'];
         /* Where it is authored from, chosen before any part (ADR-0097): the figure's own setting, no room made up for it. */
@@ -2007,6 +2045,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             ></figure-preview>`
             : html `<div middle>
           ${view.geometry.length === 0 && !unavailable ? this.renderStart() : nothing}
+          ${this.sectionEditing && this.sectionEditing === this.selected && !unavailable ? this.renderSectionEditor(view.geometry) : nothing}
           <figure-canvas
           ?startShown=${view.geometry.length === 0 && !unavailable}
           .view=${this.view}
@@ -2061,6 +2100,7 @@ let FigureEditor = class FigureEditor extends LitElement {
                     ?locked=${unavailable}
                     @command=${(e) => this.linkCommand(e.detail.action)}
                     @command-live=${(e) => this.holdAction(e.detail.action)}
+                    @section-editor-open=${() => (this.sectionEditing = this.selected)}
                   ></figure-section-panel>
                   <figure-material-panel
                     .body=${{ ...part, id: this.selected }}
@@ -2221,7 +2261,11 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.linkCommand(refit.step);
     }
     renderSingle(name, field, unavailable) {
-        const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }));
+        /* A drawn section's point is called by its number and axis, as the section editor calls it (ADR-0100 §2.1, Q9). */
+        const point = /^point\.p(\d+)\.([xyz])$/.exec(name);
+        const words = point
+            ? [i18next.t('figure.label.section-editor-coordinate', { point: point[1], axis: point[2].toUpperCase() })]
+            : name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }));
         return html `<span ?scrub=${!unavailable} @pointerdown=${(e) => this.scrub(field, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
       ><input
         aria-label=${field.id}
@@ -2330,6 +2374,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureEditor.prototype, "live", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "sectionEditing", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)