@things-factory/figure-ui 10.1.26 → 10.1.28

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

@@ -1,5 +1,6 @@
 import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
+import type { ContractChange } from '@hatiolab/figure-model';
 import type { FigureDraft, PartModel } from './figure-source.js';
 declare const FigureInspector_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 /**
@@ -57,6 +58,14 @@ export declare class FigureInspector extends FigureInspector_base {
     draft?: FigureDraft;
     /** 초안 위의 부품들. 씬 모델 그대로다. */
     parts: PartModel[];
+    /**
+     * 이 고침이 이미 놓인 인스턴스에 무엇을 하나 — 발행된 도형에만 있다(ADR-0063 결정 3).
+     *
+     * 발행 문에서만 말하면 저작자는 열 군데를 고친 뒤에 듣는다. 고치는 칸 옆에서 말한다.
+     */
+    contract: ContractChange[];
+    /** 견주지 못한 까닭. 빈 목록과 뜻이 다르다 — 「깨지 않는다」가 아니라 「모른다」다. */
+    contractFailure?: string;
     selected: number;
     /** `part` 는 HTMLElement 의 속성(DOMTokenList)이다 — 가리면 형이 어긋난다. */
     private get chosen();
@@ -72,6 +81,34 @@ export declare class FigureInspector extends FigureInspector_base {
      * 컨베이어가 길어지면 실을 자리가 늘어나는 것이 그것이고, 여기 적은 값은 안 쓰인다.
      */
     private renderRole;
+    /**
+     * How this part hangs from another and moves relative to it (ADR-0066).
+     *
+     * The parent is written on the part. The joint says how the part moves relative to that parent, and the
+     * parameter it comes with is what drives it; the preview shows that parameter as a slider.
+     */
+    private renderJoint;
+    private setParent;
+    /**
+     * 기준 상자를 고친다 — 부품은 저장되는 자리에 그대로 둔 채(`base-box.ts`).
+     *
+     * 초안과 부품이 함께 바뀌므로 둘을 한 번에 올린다. 따로 올리면 되돌리기가 둘로 갈리고, 그 사이
+     * 한 번만 되돌린 화면은 부품이 반쯤 밀린 모습이 된다.
+     */
+    /**
+     * 기준 상자를 고친 것이 **이미 놓인 인스턴스에 무엇을 하나** — 고친 칸 바로 아래에서 말한다.
+     *
+     * 막는 것과 알리는 것을 가른다. 비율이 달라지면 놓인 것이 찌그러지므로 발행이 막히고, 크기만
+     * 달라지는 것은 실척이 어긋날 뿐이라 알리기만 한다. 까닭은 형식이 적은 것을 그대로 옮긴다 —
+     * 여기서 다시 쓰면 두 벌이 되고 곧 갈린다.
+     */
+    private renderBaseContract;
+    private resizeBase;
+    /** 부품 전부를 감싸는 가장 작은 상자로. 맞출 것이 없으면 아무 일도 안 한다. */
+    private fitBaseToParts;
+    private setJointType;
+    private setJointAxis;
+    private tellDraft;
     /**
      * 역할 하나를 켜고 끈다.
      *

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

@@ -6,10 +6,24 @@ import { live } from 'lit/directives/live.js';
 import { i18next, localize } from '@operato/i18n';
 import { ScrollbarStyles } from '@operato/styles';
 import { EXTRUDE_PRIMITIVES, MATERIAL_PRESETS, PRIMITIVE_KINDS, SEGMENTED_PRIMITIVES, SEGMENT_PRESETS, SIZING_RULES, trianglesOf } from '@hatiolab/figure-model';
-import { ANCHOR_RULES, PART_ROLES, REPEAT_LIMIT, anchorOfPart, repeatPlanOfPart } from '@hatiolab/figure-model';
+import { ANCHOR_RULES, JOINT_TYPES, PART_ROLES, REPEAT_LIMIT, anchorOfPart, repeatPlanOfPart } from '@hatiolab/figure-model';
 import { activePalette } from '@hatiolab/things-scene';
 import { partToFigure, partFromFigure } from './figure-source.js';
 import { canMirror } from './part-edits.js';
+import { jointOf, parentChoices, patchJoint, setJointType } from './joint-edits.js';
+import { baseFittingParts, baseOf, resizeBase } from './base-box.js';
+/** Axis choices for a joint. Written as a direction the author reads, stored as a vector. */
+const JOINT_AXES = [
+    { key: '+x', axis: { x: 1, y: 0, z: 0 } },
+    { key: '-x', axis: { x: -1, y: 0, z: 0 } },
+    { key: '+y', axis: { x: 0, y: 1, z: 0 } },
+    { key: '-y', axis: { x: 0, y: -1, z: 0 } },
+    { key: '+z', axis: { x: 0, y: 0, z: 1 } },
+    { key: '-z', axis: { x: 0, y: 0, z: -1 } }
+];
+function axisKeyOf(axis) {
+    return JOINT_AXES.find(one => one.axis.x === axis.x && one.axis.y === axis.y && one.axis.z === axis.z)?.key;
+}
 /**
  * 고른 부품의 속성.
  *
@@ -61,6 +75,12 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         this.opened = new Set();
         /** 초안 위의 부품들. 씬 모델 그대로다. */
         this.parts = [];
+        /**
+         * 이 고침이 이미 놓인 인스턴스에 무엇을 하나 — 발행된 도형에만 있다(ADR-0063 결정 3).
+         *
+         * 발행 문에서만 말하면 저작자는 열 군데를 고친 뒤에 듣는다. 고치는 칸 옆에서 말한다.
+         */
+        this.contract = [];
         this.selected = -1;
     }
     static { this.styles = [
@@ -288,9 +308,60 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         grid-template-columns: repeat(3, 1fr);
         gap: 4px;
       }
+      /*
+        값이 둘인 줄은 셋으로 나누지 않는다. 가동 범위를 세 칸짜리 줄에 넣었더니 칸이 폭의 1/3 이라
+        「최소」라는 말과 -120 이 한 칸에 못 들어가 숫자가 잘렸다.
+      */
+      div[double] {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px;
+      }
+      /* 칸 아래에 붙는 한 줄짜리 행동. 칸과 같은 폭으로 둬야 한 묶음으로 읽힌다. */
+      button[fit] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        width: 100%;
+        margin-top: 4px;
+        padding: 3px 8px;
+        font: inherit;
+        font-size: 0.72rem;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface-container);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      /* 고친 칸 바로 아래에 붙는 말. 막는 것은 오류 색, 알리는 것은 조용한 색. */
+      p[contract] {
+        display: flex;
+        gap: 4px;
+        margin: 4px 0 0;
+        font-size: 0.68rem;
+        line-height: 1.4;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      p[contract][blocking] {
+        color: var(--md-sys-color-error);
+      }
+      p[contract] md-icon {
+        --md-icon-size: 14px;
+        flex: none;
+      }
+
+      button[fit]:hover {
+        background-color: var(--md-sys-color-surface-container-high);
+      }
+      button[fit] md-icon {
+        --md-icon-size: 15px;
+      }
       div[field] + div[field],
       div[triple] + div[field],
       div[field] + div[triple],
+      div[double] + div[field],
+      div[field] + div[double],
       div[inline-field] + div[inline-field],
       div[inline-field] + div[field],
       div[field] + div[inline-field],
@@ -796,7 +867,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
           묶음은 아예 나오지 않는다 — 해 둬도 아무 일도 안 일어나는 칸을 보여 주지 않는다.
         */
         return html `
-      ${this.renderFigure(true)} ${this.renderIdentity(shown)} ${this.renderRole(shown)}
+      ${this.renderFigure(true)} ${this.renderIdentity(shown)} ${this.renderRole(shown)} ${this.renderJoint(shown)}
       ${this.renderPlacement(shown)} ${this.renderShape(shown)} ${this.renderMaterial(shown)}
       ${this.renderBehaviour(shown)}
     `;
@@ -855,6 +926,157 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       </section>
     `;
     }
+    /**
+     * How this part hangs from another and moves relative to it (ADR-0066).
+     *
+     * The parent is written on the part. The joint says how the part moves relative to that parent, and the
+     * parameter it comes with is what drives it; the preview shows that parameter as a slider.
+     */
+    renderJoint(part) {
+        const joint = jointOf(this.draft, part.name);
+        const choices = parentChoices(this.parts, part.name);
+        const unit = joint?.type === 'prismatic' ? 'mm' : 'deg';
+        const axisKey = joint ? axisKeyOf(joint.axis) : undefined;
+        const driver = joint
+            ? this.draft?.parameters?.find(one => one.clip?.channels?.some(channel => channel.target === joint.name))
+            : undefined;
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.joint')}${this.help('figure.text.joint-explained')}</h3>
+
+        <div inline-field>
+          <label>${i18next.t('figure.label.joint-parent')}</label>
+          <select @change=${(e) => this.setParent(e.target.value)}>
+            <option value="" ?selected=${part.parent === undefined}>${i18next.t('figure.label.joint-parent-none')}</option>
+            ${part.parent !== undefined && !choices.includes(part.parent)
+            ? html `<option value=${part.parent} selected>${part.parent}</option>`
+            : nothing}
+            ${choices.map(name => html `<option value=${name} ?selected=${name === part.parent}>${name}</option>`)}
+          </select>
+        </div>
+
+        <div inline-field>
+          <label>${i18next.t('figure.label.joint-type')}</label>
+          <select @change=${(e) => this.setJointType(part, e.target.value)}>
+            <option value="" ?selected=${!joint}>${i18next.t('figure.label.joint-type-none')}</option>
+            ${JOINT_TYPES.map(type => html `<option value=${type} ?selected=${joint?.type === type}>${i18next.t('figure.label.joint-type-' + type)}</option>`)}
+          </select>
+        </div>
+
+        ${joint
+            ? html `
+              <div inline-field>
+                <label>${i18next.t('figure.label.joint-axis')}</label>
+                <select @change=${(e) => this.setJointAxis(joint.name, e.target.value)}>
+                  ${axisKey === undefined
+                ? html `<option value="" selected>${joint.axis.x}, ${joint.axis.y}, ${joint.axis.z}</option>`
+                : nothing}
+                  ${JOINT_AXES.map(one => html `<option value=${one.key} ?selected=${one.key === axisKey}>${one.key.toUpperCase()}</option>`)}
+                </select>
+              </div>
+
+              <div vector-row>
+                <label>${i18next.t('figure.label.joint-origin')}</label>
+                <div triple>
+                  ${['x', 'y', 'z'].map(axis => this.number(axis.toUpperCase(), joint.origin[axis], value => this.tellDraft(patchJoint(this.draft, joint.name, { origin: { ...joint.origin, [axis]: value } }))))}
+                </div>
+              </div>
+
+              ${joint.limits
+                ? html `
+                    <div vector-row>
+                      <label>${i18next.t('figure.label.joint-limits-' + unit)}</label>
+                      <div double>
+                        ${this.number(i18next.t('figure.label.joint-limit-min'), joint.limits.min, value => this.tellDraft(patchJoint(this.draft, joint.name, { limits: { ...joint.limits, min: value } })))}
+                        ${this.number(i18next.t('figure.label.joint-limit-max'), joint.limits.max, value => this.tellDraft(patchJoint(this.draft, joint.name, { limits: { ...joint.limits, max: value } })))}
+                      </div>
+                    </div>
+                    ${joint.limits.min > 0 || joint.limits.max < 0
+                    ? html `<p warn>${i18next.t('figure.text.joint-limits-must-include-zero')}</p>`
+                    : nothing}
+                  `
+                : nothing}
+
+              <p quiet>
+                ${driver
+                ? i18next.t('figure.text.joint-driven-by', { name: driver.label ?? driver.name })
+                : i18next.t('figure.text.joint-not-driven')}
+              </p>
+            `
+            : nothing}
+      </section>
+    `;
+    }
+    setParent(name) {
+        this.change(part => {
+            const { parent: _dropped, ...rest } = part;
+            return name === '' ? rest : { ...rest, parent: name };
+        });
+    }
+    /**
+     * 기준 상자를 고친다 — 부품은 저장되는 자리에 그대로 둔 채(`base-box.ts`).
+     *
+     * 초안과 부품이 함께 바뀌므로 둘을 한 번에 올린다. 따로 올리면 되돌리기가 둘로 갈리고, 그 사이
+     * 한 번만 되돌린 화면은 부품이 반쯤 밀린 모습이 된다.
+     */
+    /**
+     * 기준 상자를 고친 것이 **이미 놓인 인스턴스에 무엇을 하나** — 고친 칸 바로 아래에서 말한다.
+     *
+     * 막는 것과 알리는 것을 가른다. 비율이 달라지면 놓인 것이 찌그러지므로 발행이 막히고, 크기만
+     * 달라지는 것은 실척이 어긋날 뿐이라 알리기만 한다. 까닭은 형식이 적은 것을 그대로 옮긴다 —
+     * 여기서 다시 쓰면 두 벌이 되고 곧 갈린다.
+     */
+    renderBaseContract() {
+        if (this.contractFailure) {
+            return html `<p contract>
+        <md-icon>help</md-icon>
+        <span>${i18next.t('figure.text.contract-not-compared', { why: this.contractFailure })}</span>
+      </p>`;
+        }
+        const mine = this.contract.filter(one => one.code === 'base-ratio-changed' || one.code === 'base-size-changed');
+        if (mine.length === 0)
+            return nothing;
+        return html `${mine.map(one => html `<p contract ?blocking=${one.blocking}>
+        <md-icon>${one.blocking ? 'block' : 'info'}</md-icon>
+        <span><b>${one.message}</b> ${one.why}</span>
+      </p>`)}`;
+    }
+    resizeBase(patch) {
+        if (!this.draft)
+            return;
+        const next = resizeBase(this.draft, this.parts, { ...baseOf(this.draft), ...patch });
+        if (next.draft === this.draft)
+            return;
+        this.dispatchEvent(new CustomEvent('resize-base', {
+            detail: { draft: next.draft, parts: next.parts },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /** 부품 전부를 감싸는 가장 작은 상자로. 맞출 것이 없으면 아무 일도 안 한다. */
+    fitBaseToParts() {
+        if (!this.draft)
+            return;
+        const fitted = baseFittingParts(this.draft, this.parts);
+        if (fitted)
+            this.resizeBase(fitted);
+    }
+    setJointType(part, value) {
+        if (!this.draft)
+            return;
+        /* 붙은 부품을 함께 준다 — 새 관절이 둘이 맞닿는 자리에 서려면 그쪽 치수를 알아야 한다. */
+        const parent = part.parent ? this.parts.find(one => one.name === part.parent) : undefined;
+        this.tellDraft(setJointType(this.draft, part, value === '' ? undefined : value, parent ? partToFigure(parent, this.draft) : undefined));
+    }
+    setJointAxis(name, key) {
+        const choice = JOINT_AXES.find(one => one.key === key);
+        if (!choice || !this.draft)
+            return;
+        this.tellDraft(patchJoint(this.draft, name, { axis: { ...choice.axis } }));
+    }
+    tellDraft(draft) {
+        this.dispatchEvent(new CustomEvent('update-draft', { detail: { draft }, bubbles: true, composed: true }));
+    }
     /**
      * 역할 하나를 켜고 끈다.
      *
@@ -971,6 +1193,27 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
           ${this.helpHint('figure.text.placement-explained')}
         </div>
 
+        <!--
+          기준 상자 — **고치는 길이 화면에 있어야 한다.** 부품이 이 상자를 넘으면 발행이 막히고,
+          고치는 방법은 상자 숫자를 키우는 것이다(ADR-0044 ④). 그 칸이 없어서 저작자는 넘쳤다는
+          말만 듣고 고칠 자리를 못 찾았다.
+        -->
+        <div field>
+          <label>${i18next.t('figure.label.base-box')}${this.helpButton('figure.text.base-box-explained')}</label>
+          <div triple>
+            ${this.number('X', this.draft?.width ?? 0, value => this.resizeBase({ width: value }), 1)}
+            ${this.number('Y', this.draft?.depth ?? 0, value => this.resizeBase({ depth: value }), 1)}
+            ${this.number('Z', this.draft?.height ?? 0, value => this.resizeBase({ height: value }), 1)}
+          </div>
+          ${this.parts.length > 0
+            ? html `<button fit @click=${() => this.fitBaseToParts()} title=${i18next.t('figure.text.fit-base-explained')}>
+                <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
+              </button>`
+            : nothing}
+          ${this.renderBaseContract()}
+          ${this.helpHint('figure.text.base-box-explained')}
+        </div>
+
         <div inline-field>
           <label>${i18next.t('figure.label.category')}${this.helpButton('figure.text.category-explained')}</label>
           <input
@@ -1816,6 +2059,14 @@ __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
 ], FigureInspector.prototype, "parts", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FigureInspector.prototype, "contract", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureInspector.prototype, "contractFailure", void 0);
 __decorate([
     property({ type: Number }),
     __metadata("design:type", Object)