@things-factory/figure-ui 10.1.25 → 10.1.27

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

@@ -6,10 +6,23 @@ 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';
+/** 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;
+}
 /**
  * 고른 부품의 속성.
  *
@@ -796,7 +809,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 +868,107 @@ 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 triple>
+                        ${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 };
+        });
+    }
+    setJointType(part, value) {
+        if (!this.draft)
+            return;
+        this.tellDraft(setJointType(this.draft, part, value === '' ? undefined : value));
+    }
+    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 }));
+    }
     /**
      * 역할 하나를 켜고 끈다.
      *
@@ -1600,8 +1714,14 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         return this.opened.has(key) ? html `<p hint>${i18next.t(key)}</p>` : nothing;
     }
     renderAnchors(part) {
+        /*
+          The scene draft stores the box height as depth, so format y is draft.depth and z is draft.height.
+          This used to pass them swapped, and every automatic anchor still came out the same: the
+          nearest-face rule reads the sign of a centred position, which does not depend on the box size.
+          It is fixed so the next rule that does read the box does not inherit the mistake.
+        */
         const base = this.draft
-            ? { x: this.draft.width, y: this.draft.height, z: this.draft.depth }
+            ? { x: this.draft.width, y: this.draft.depth, z: this.draft.height }
             : { x: 0, y: 0, z: 0 };
         const nameOf = (rule, axis) => `${i18next.t(rule === 'min' || rule === 'max' ? `figure.label.anchor-${rule}-${axis}` : `figure.label.anchor-${rule}`)} (${rule})`;
         const setAnchor = (axis, rule) => {
@@ -1645,7 +1765,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
             */
             return html `
             <div anchor-row>
-              <label>${axis.toUpperCase()}축</label>
+              <label>${i18next.t('figure.label.axis-name', { axis: axis.toUpperCase() })}</label>
               <div anchor-options>
                 ${['auto', 'scale', 'min', 'center', 'max', 'span'].map(rule => {
                 const selected = rule === 'auto' ? !said : rule === said;