@things-factory/figure-ui 10.1.245 → 10.1.247

package/dist-client/modeller/figure-pipe-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure-pipe-panel.js","sourceRoot":"","sources":["../../client/modeller/figure-pipe-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { FIGURE_SWEEP_PIECE_LIMIT, type FigureEvaluatedShape, type FigurePipeRequest } from '@hatiolab/figure-model'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\nimport { bendWordOf, piecesOf, QUARTERS, type PanelPiece } from './pipe-path.js'\n\ntype Body = { id: string; shape: FigureEvaluatedShape }\n/**\n * 관 — a pipe's or a duct's section, wall and path (ADR-0100 §16.2), each change one `set-pipe` command, one step of the\n * history. The path is its pieces in order: a straight run, so long; a bend, of a radius, so many degrees, toward one of\n * four directions across the pipe -- each said as the figure's axis it turns to there. What the kernel refuses (a bend\n * tighter than the section, a wall too thick, a path through itself) is said by the editor, with the number it takes.\n */\n@customElement('figure-pipe-panel')\nexport class FigurePipePanel extends localize(i18next)(LitElement) {\n  static styles = [\n    SidePanelStyles,\n    css`\n      :host {\n        display: block;\n      }\n      div[pipe] {\n        display: grid;\n        gap: 8px;\n      }\n      ol[pieces] {\n        display: grid;\n        gap: 6px;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n      ol[pieces] li {\n        display: grid;\n        grid-template-columns: 20px minmax(0, 1fr) 30px;\n        gap: 4px 6px;\n        align-items: center;\n        padding: 6px 0;\n        border-top: 1px dashed var(--md-sys-color-outline-variant);\n      }\n      ol[pieces] li > b {\n        font-variant-numeric: tabular-nums;\n        opacity: 0.7;\n      }\n      ol[pieces] li div[form] {\n        grid-column: 2;\n      }\n      ol[pieces] li button[act] {\n        width: 30px;\n        min-height: var(--figure-control-height);\n        margin: 0;\n        padding: 0;\n      }\n      div[pair] {\n        display: flex;\n        gap: 6px;\n      }\n      div[pair] > button {\n        flex: 1;\n      }\n      md-icon {\n        font-size: 16px;\n        width: 16px;\n        height: 16px;\n      }\n    `\n  ]\n\n  @property({ attribute: false }) body?: Body\n  @property({ type: Boolean }) locked = false\n\n  private send(request: FigurePipeRequest) {\n    this.dispatchEvent(new CustomEvent('command', { detail: { action: { kind: 'set-pipe', part: this.body!.id, ...request } }, bubbles: true, composed: true }))\n  }\n\n  /** A number field: sent on change, put back when it is not a number. */\n  private number(label: string, now: number, set: (value: number) => void, options: { min?: number; step?: string; note?: string } = {}) {\n    return html`<span>${label}</span>\n      <div>\n        <input\n          type=\"number\"\n          step=${options.step ?? 'any'}\n          min=${options.min ?? 0}\n          aria-label=${label}\n          ?disabled=${this.locked}\n          .value=${live(String(Math.round(now * 1000) / 1000))}\n          @change=${(e: Event) => {\n            const input = e.target as HTMLInputElement\n            const value = input.valueAsNumber\n            if (!Number.isFinite(value)) {\n              input.value = String(now)\n              return\n            }\n            set(value)\n          }}\n        />\n        ${options.note ? html`<small>${options.note}</small>` : nothing}\n      </div>`\n  }\n\n  /**\n   * Its end's size: the same as its start's until changed, when it narrows or widens to it evenly along its length\n   * (ADR-0100 §16.2.9) -- a bar thick below and thin above. 「한 굵기로」 makes it one size all along again.\n   */\n  private renderEnd(sweep: NonNullable<FigureEvaluatedShape['sweep']>, round: boolean) {\n    const s = sweep.section,\n      to = sweep.to\n    const same = html`<span></span>\n      <div>\n        <button act end-same ?disabled=${this.locked} @click=${() => this.send(round ? { endRadius: null } : { endWidth: null, endDepth: null })}>\n          ${i18next.t('figure.button.pipe-end-same')}\n        </button>\n      </div>`\n    if (round) {\n      const now = to?.kind === 'ellipse' ? 2 * to.radius.x! : s.kind === 'ellipse' ? 2 * s.radius.x! : 0\n      return html`${this.number(i18next.t('figure.label.pipe-end-diameter'), now, value => this.send({ endRadius: value / 2 }), { note: to ? '' : i18next.t('figure.text.pipe-end-same') })}\n        ${to ? same : nothing}`\n    }\n    if (s.kind !== 'rectangle') return nothing\n    const end = to?.kind === 'rectangle' ? to.size : s.size\n    return html`${this.number(i18next.t('figure.label.pipe-end-width'), end.x!, value => this.send({ endWidth: value }), { note: to ? '' : i18next.t('figure.text.pipe-end-same') })}\n      ${this.number(i18next.t('figure.label.pipe-end-depth'), end.z!, value => this.send({ endDepth: value }))}\n      ${to ? same : nothing}`\n  }\n\n  render() {\n    const sweep = this.body?.shape.sweep\n    if (!sweep) return nothing\n    const s = sweep.section\n    const round = s.kind === 'ellipse'\n    const pieces = piecesOf(sweep)\n    const withPiece = (i: number, piece: PanelPiece) => this.send({ path: pieces.map((p, j) => (j === i ? piece : p)) })\n    const radius = round ? s.radius.x ?? s.radius.z ?? 0 : 0\n    /* The group's heading is the part's properties' own, as a box's size group's is: here only what is in it. */\n    return html`<div pipe>\n      <div form>\n        <span>${i18next.t('figure.label.pipe-section')}</span>\n        <select\n          aria-label=${i18next.t('figure.label.pipe-section')}\n          ?disabled=${this.locked}\n          @change=${(e: Event) => {\n            const to = (e.target as HTMLSelectElement).value\n            if (to === 'round' && !round) this.send({ radius: Math.min(s.kind === 'rectangle' ? s.size.x! : 0, s.kind === 'rectangle' ? s.size.z! : 0) / 2 })\n            if (to === 'square' && round) this.send({ width: 2 * radius, depth: 2 * radius, round: 0 })\n          }}\n        >\n          <option value=\"round\" ?selected=${round}>${i18next.t('figure.label.pipe-section-round')}</option>\n          <option value=\"square\" ?selected=${!round}>${i18next.t('figure.label.pipe-section-square')}</option>\n        </select>\n        ${round\n          ? this.number(i18next.t('figure.label.pipe-diameter'), 2 * radius, value => this.send({ radius: value / 2 }))\n          : s.kind === 'rectangle'\n            ? html`${this.number(i18next.t('figure.label.pipe-width'), s.size.x!, value => this.send({ width: value }))}\n              ${this.number(i18next.t('figure.label.pipe-depth'), s.size.z!, value => this.send({ depth: value }))}\n              ${this.number(i18next.t('figure.label.pipe-round'), s.corner?.x ?? 0, value => this.send({ round: value }))}`\n            : nothing}\n        ${this.renderEnd(sweep, round)}\n        ${this.number(i18next.t('figure.label.pipe-wall'), sweep.wall ?? 0, value => this.send({ wall: value }), { note: i18next.t('figure.text.pipe-wall-zero') })}\n      </div>\n      <ol pieces aria-label=${i18next.t('figure.label.pipe-path')}>\n        ${pieces.map(\n          (p, i) => html`<li>\n            <b>${i + 1}</b>\n            <div form>\n              ${'line' in p\n                ? this.number(i18next.t('figure.label.pipe-line-length'), p.line, value => withPiece(i, { line: value }))\n                : html`${this.number(i18next.t('figure.label.pipe-bend-radius'), p.bend.radius, value => withPiece(i, { bend: { ...p.bend, radius: value } }))}\n                  ${this.number(i18next.t('figure.label.pipe-bend-angle'), p.bend.angle, value => withPiece(i, { bend: { ...p.bend, angle: Math.round(value) } }), { min: 1, step: '1' })}\n                  <span>${i18next.t('figure.label.pipe-bend-toward')}</span>\n                  <select\n                    aria-label=${i18next.t('figure.label.pipe-bend-toward')}\n                    ?disabled=${this.locked}\n                    @change=${(e: Event) => withPiece(i, { bend: { ...p.bend, toward: Number((e.target as HTMLSelectElement).value) } })}\n                  >\n                    ${[...new Set([...QUARTERS, p.bend.toward])].map(\n                      t => html`<option value=${t} ?selected=${t === p.bend.toward}>${bendWordOf(sweep, i, t) || `${t}°`}</option>`\n                    )}\n                  </select>`}\n            </div>\n            <button\n              act\n              ?disabled=${this.locked || pieces.length <= 1}\n              title=${i18next.t('figure.button.pipe-remove-piece')}\n              aria-label=${i18next.t('figure.button.pipe-remove-piece')}\n              @click=${() => this.send({ path: pieces.filter((_, j) => j !== i) })}\n            >\n              <md-icon>close</md-icon>\n            </button>\n          </li>`\n        )}\n      </ol>\n      <div pair>\n        <button act add-line ?disabled=${this.locked || pieces.length >= FIGURE_SWEEP_PIECE_LIMIT} @click=${() => this.send({ path: [...pieces, { line: 100 }] })}>\n          <md-icon>add</md-icon>${i18next.t('figure.button.pipe-add-line')}\n        </button>\n        <button\n          act\n          add-bend\n          ?disabled=${this.locked || pieces.length >= FIGURE_SWEEP_PIECE_LIMIT}\n          @click=${() => {\n            /* A bend wider than the section, toward its first quarter: 90° of twice the section's reach. */\n            const reach = round ? radius : Math.hypot(s.kind === 'rectangle' ? s.size.x! : 0, s.kind === 'rectangle' ? s.size.z! : 0) / 2\n            this.send({ path: [...pieces, { bend: { radius: Math.ceil(2 * reach), angle: 90, toward: 0 } }] })\n          }}\n        >\n          <md-icon>add</md-icon>${i18next.t('figure.button.pipe-add-bend')}\n        </button>\n      </div>\n    </div>`\n  }\n}\n"]}

package/dist-client/modeller/figure-preview.d.ts

@@ -37,6 +37,10 @@ export declare class FigurePreview extends FigurePreview_base {
     private setupPart;
     /** One figure stretched by sliders, or the eight ways of growing side by side. */
     private way;
+    /** Where the camera looks from; a new scene starts in perspective. */
+    private looking;
+    /** The posing controls folded to their one button. */
+    private controlsFolded;
     /** The size the one figure is tried at; the authored size when the figure stands up. */
     private trying?;
     private board;
@@ -52,6 +56,7 @@ export declare class FigurePreview extends FigurePreview_base {
     private registered?;
     private watcher?;
     render(): import("lit-html").TemplateResult<1>;
+    private lookFrom;
     /** The one figure's size: a slider per axis the figure lets change, and what it is at the size tried. */
     private renderSizes;
     private followTags;
@@ -67,6 +72,9 @@ export declare class FigurePreview extends FigurePreview_base {
     private move;
     private renderDial;
     private drive;
+    private release;
+    /** Every value tried here let go: the figure stands in its default pose, and its clips move it again. Nothing is saved. */
+    private clearTried;
     private give;
     private poseAsDefault;
     private tellInstances;

package/dist-client/modeller/figure-preview.js

@@ -7,11 +7,14 @@ import * as THREE from 'three';
 import { compileFigureAsset } from '@hatiolab/figure-model';
 import { create, figureLegendSourcesChanged, registerFigure, unregisterFigure } from '@hatiolab/things-scene';
 import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH } from '@things-factory/figure-viewer/dist-client/figure-view.js';
+import { parametersForClip } from '@things-factory/figure-viewer/dist-client/detail-motion.js';
+import { controlsOf } from '@things-factory/figure-viewer/dist-client/controls.js';
 import { dialShape } from './angle-dial.js';
-import { domainOf, motionWrittenByData, typedValueOf, valueRowsOf } from './data-interface.js';
+import { dataValueAt, domainOf, motionWrittenByData, typedValueOf, valueRowsOf } from './data-interface.js';
 import { derivedOf } from './revision.js';
 import { authoredSizeOf, bodyAtSize, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewOneInstance, previewTypeOf, setupPartOf, sizeSpanOf, sizeWithinRange } from '@things-factory/figure-viewer/dist-client/preview-model.js';
 import { previewSizeWordsOf } from './preview-size.js';
+const PREVIEW_VIEWS = ['perspective', 'front', 'right', 'top'];
 let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
@@ -42,6 +45,10 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
         this.setupPart = '';
         /** One figure stretched by sliders, or the eight ways of growing side by side. */
         this.way = 'one';
+        /** Where the camera looks from; a new scene starts in perspective. */
+        this.looking = 'perspective';
+        /** The posing controls folded to their one button. */
+        this.controlsFolded = false;
         this.board = { width: 0, height: 0 };
         /* The eight variants named over each one, where the camera shows it (sweep 2026-10-27 M4). */
         this.tags = [];
@@ -146,6 +153,23 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
       cursor: pointer;
       opacity: 0.7;
     }
+    div[legend] button[view] {
+      padding: 0 6px;
+      font: inherit;
+      color: inherit;
+      background: none;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      opacity: 0.7;
+    }
+    div[legend] span[views] {
+      display: flex;
+      gap: 2px;
+      padding-left: 6px;
+      border-left: 1px solid rgba(255, 255, 255, 0.22);
+    }
+    div[legend] button[view][aria-pressed='true'],
     div[legend] button[way][aria-pressed='true'] {
       opacity: 1;
       background-color: rgba(255, 255, 255, 0.18);
@@ -196,7 +220,7 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
     div[clips] {
       margin-left: auto;
       display: grid;
-      grid-template-columns: auto 20px 96px 34px;
+      grid-template-columns: auto 20px 96px 44px;
       gap: 6px 8px;
       align-items: center;
       padding: 8px 10px;
@@ -239,6 +263,20 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
       fill: none;
       stroke: rgba(255, 255, 255, 0.35);
     }
+    /* Folded, the controls are one button: what they covered -- a leg, say -- can be seen (robot dog 2026-11-03). */
+    div[clips] button[fold-controls] {
+      justify-self: end;
+      padding: 0 4px;
+      font: inherit;
+      color: inherit;
+      background: none;
+      border: none;
+      cursor: pointer;
+      opacity: 0.75;
+    }
+    div[clips] button[fold-controls]:hover {
+      opacity: 1;
+    }
     div[clips] button[pose] {
       align-self: stretch;
       padding: 4px 8px;
@@ -275,6 +313,17 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
       grid-column: 3 / -1;
       width: auto;
     }
+    /* A control's value, typed where the slider cannot land on it (a step of the range's hundredth, robot dog 2026-11-03). */
+    div[clips] input[typed] {
+      width: 100%;
+      padding: 0 3px;
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
+    div[clips] label[sampled] output {
+      grid-column: 3 / -1;
+      text-align: left;
+    }
     div[clips] output {
       font-variant-numeric: tabular-nums;
       text-align: right;
@@ -328,6 +377,9 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
             ? html `<div cannot>${this.cannot}</div>`
             : html `<div legend>
               ${['one', 'eight'].map(way => html `<button way=${way} aria-pressed=${String(this.way === way)} @click=${() => this.chooseWay(way)}>${i18next.t(`figure.label.preview-way-${way}`)}</button>`)}
+              <span views>
+                ${PREVIEW_VIEWS.map(view => html `<button view=${view} aria-pressed=${String(this.looking === view)} @click=${() => this.lookFrom(view)}>${i18next.t(`figure.label.preview-view-${view}`)}</button>`)}
+              </span>
               ${this.way === 'one' ? nothing : PREVIEW_WAYS.map(way => {
                 const clamps = clampsByWay[way.name] ?? [];
                 return html `<span>
@@ -348,6 +400,10 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
             </div>` : nothing}
             ${controls.length + clips.length + (asset?.motionGroups?.length ?? 0) + (asset ? valueRowsOf(asset).length : 0) ? this.renderDrivers(asset, controls, clips) : nothing}</div>`}`;
     }
+    lookFrom(view) {
+        this.scene?.root?.setCameraView?.(view);
+        this.looking = view;
+    }
     /** The one figure's size: a slider per axis the figure lets change, and what it is at the size tried. */
     renderSizes(asset, size) {
         const say = (key, params) => i18next.t(key, params);
@@ -440,16 +496,29 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
         this.scene?.root?.fitCameraToModel?.();
     }
     renderDrivers(asset, controls, clips) {
+        const steps = new Map(controlsOf(asset).map(c => [c.id, c.step]));
         const changed = controls.filter(c => this.giving[c.id] !== undefined && this.giving[c.id] !== asset.stateDefaults[c.id]);
+        const fold = html `<button fold-controls aria-expanded=${String(!this.controlsFolded)} @click=${() => (this.controlsFolded = !this.controlsFolded)}>
+      ${i18next.t(this.controlsFolded ? 'figure.button.controls-unfold' : 'figure.button.controls-fold')}
+    </button>`;
+        if (this.controlsFolded)
+            return html `<div clips folded>${fold}</div>`;
         return html `<div clips>
+      ${fold}
       ${changed.length
             ? html `<button pose title=${i18next.t('figure.text.pose-as-default-explained')} @click=${() => this.poseAsDefault()}>
             ${i18next.t('figure.button.pose-as-default')}
           </button>`
             : nothing}
+      ${Object.keys(this.giving).length
+            ? html `<button clear-tried title=${i18next.t('figure.text.clear-tried-explained')} @click=${() => this.clearTried()}>
+            ${i18next.t('figure.button.clear-tried')}
+          </button>`
+            : nothing}
       ${controls.map(control => {
             const value = this.giving[control.id] ?? asset.stateDefaults[control.id] ?? control.min;
-            const step = Math.max((control.max - control.min) / 100, 0.01);
+            /* The step the editor's controls take (\`controlsOf\`): a degree for an angle, a hundredth of the range otherwise. */
+            const step = steps.get(control.id) ?? (control.max - control.min) / 100;
             const label = asset.stateInputs?.[control.id]?.label ?? control.id;
             return html `<label>
           <span>${label} <span drive>${unitWord(control.unit)}</span></span>
@@ -462,7 +531,20 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
             .value=${String(value)}
             @input=${(e) => this.give(control.id, Number(e.target.value))}
           />
-          <output>${Math.round(value)}</output>
+          <input
+            typed
+            type="number"
+            step="any"
+            min=${control.min}
+            max=${control.max}
+            aria-label=${label}
+            .value=${String(Math.round(value * 100) / 100)}
+            @change=${(e) => {
+                const typed = e.target.valueAsNumber;
+                if (Number.isFinite(typed))
+                    this.give(control.id, Math.min(Math.max(typed, control.min), control.max));
+            }}
+          />
         </label>`;
         })}
       ${clips.map(clip => {
@@ -506,6 +588,16 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
     renderDataValue(row) {
         const node = row.node;
         const label = row.label ?? row.path;
+        /*
+          The data tab's sample, when it gives the row, is what the figure shows: a value given here is not read. Said, and
+          the field not offered, rather than one that changes nothing (robot dog 2026-11-03).
+        */
+        const sampled = this.sample === null || this.sample === undefined ? undefined : dataValueAt(this.sample, row.path);
+        if (sampled !== undefined)
+            return html `<label sampled title=${i18next.t('figure.text.data-value-from-sample')}>
+        <span>${label} <span drive>${i18next.t('figure.label.data-value-from-sample')}</span></span>
+        <output>${typeof sampled === 'object' ? JSON.stringify(sampled) : String(sampled)}</output>
+      </label>`;
         const fallback = 'default' in node ? node.default : undefined;
         const value = this.valuing[row.path] ?? fallback;
         if (node.kind === 'number') {
@@ -545,6 +637,7 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
     }
     move(group, playing) {
         this.moving = { ...this.moving, [group]: playing };
+        this.release(playing.clip);
         this.tellInstances('motion', Object.fromEntries(Object.entries(this.moving).map(([id, m]) => [id, { ...m, paused: false }])));
     }
     renderDial(control, value) {
@@ -560,8 +653,30 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
     }
     drive(clip, value) {
         this.driving = { ...this.driving, [clip]: value };
+        if (value)
+            this.release(clip);
         this.tellInstances('clips', this.driving);
     }
+    /*
+      A value given here wins over the clips for its control (things-scene's \`parameters\`), so a value left from trying held
+      the control still while a clip played (robot dog, 2026-11-03). A clip played lets go of the controls it drives, as
+      the detail view does (\`parametersForClip\`).
+    */
+    release(clip) {
+        const asset = this.asset;
+        if (!asset)
+            return;
+        const next = parametersForClip(asset, this.giving, clip);
+        if (Object.keys(next).length === Object.keys(this.giving).length)
+            return;
+        this.giving = next;
+        this.tellInstances('parameters', this.giving);
+    }
+    /** Every value tried here let go: the figure stands in its default pose, and its clips move it again. Nothing is saved. */
+    clearTried() {
+        this.giving = {};
+        this.tellInstances('parameters', this.giving);
+    }
     give(id, value) {
         this.giving = { ...this.giving, [id]: value };
         this.tellInstances('parameters', this.giving);
@@ -714,6 +829,7 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
                 mode: 0
             });
             this.standing = signature;
+            this.looking = 'perspective';
             this.scene.resize?.();
             this.scene.fit?.('ratio');
             this.scene.root?.fitCameraToModel?.();
@@ -796,6 +912,14 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], FigurePreview.prototype, "way", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigurePreview.prototype, "looking", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigurePreview.prototype, "controlsFolded", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)