@things-factory/figure-ui 10.1.26 → 10.1.28

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

@@ -5,6 +5,10 @@ import { live } from 'lit/directives/live.js';
 import { i18next, localize } from '@operato/i18n';
 import { ScrollbarStyles } from '@operato/styles';
 import { AXES, CHANNEL_PATHS, INTERPOLATIONS, LIMITS } from '@hatiolab/figure-model';
+/** A channel that drives a joint names the joint and carries one number per key (ADR-0066). */
+function isJointChannel(channel) {
+    return channel.path === undefined;
+}
 /*
   레시피의 `end` 가 곧 그 범위의 끝 자세다 — 리프트가 100mm 올라가는 곡선이면 범위도
   0~100mm 다. 둘이 어긋나면 저작자가 1200 을 주고도 100 만 올라가는 것을 보게 된다.
@@ -65,6 +69,16 @@ function freeName(taken, stem) {
         if (!used.has(`${stem}-${n}`))
             return `${stem}-${n}`;
 }
+/**
+ * 파라미터 범위에 적히는 단위 — **권하는 것이지 가두는 것이 아니다.**
+ *
+ * 관절이 만드는 파라미터가 `deg` 와 `mm` 을 쓰고(회전과 직선), 그리퍼·문 같은 값은 `%` 를 쓴다.
+ * 속도는 `mm/s` 와 `rpm`, 시간은 `s` 다. 이 여섯이 지금 쓰이는 전부이고, 목록에 없는 말을 적는
+ * 길은 그대로 열려 있다.
+ */
+const PARAMETER_UNITS = ['deg', 'mm', '%', 'mm/s', 'rpm', 's'];
+/** 목록 대신 손으로 적겠다는 표. `select` 의 값으로 쓴다. */
+const UNIT_TYPE_IT = '__type-it';
 let FigureAnimations = class FigureAnimations extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
@@ -76,6 +90,8 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
          */
         this.open = '';
         this.recipeTarget = '';
+        /** 단위를 손으로 적는 중인 파라미터. 목록에 없는 말을 적으려고 연 칸이다. */
+        this.typingUnit = new Set();
     }
     static { this.styles = [
         ScrollbarStyles,
@@ -170,6 +186,21 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
         min-width: 3.2em;
         color: var(--md-sys-color-on-surface-variant);
       }
+      /*
+        칸이 줄어들 줄 알아야 한다. 숫자 입력칸은 제 기본 너비(20자 남짓)를 갖고 있고 flex 는
+        기본 크기 아래로는 안 줄이므로, 범위처럼 한 줄에 셋이 서는 줄은 패널 밖으로 밀려
+        오른쪽 칸이 잘렸다.
+      */
+      div[row] > input {
+        flex: 1 1 0;
+        min-width: 0;
+      }
+      /* 단위는 「mm」 정도의 짧은 말이라 숫자 칸보다 좁게 둔다. 고르는 칸도 같은 폭이다. */
+      div[row] > input[unit],
+      div[row] > select[unit] {
+        flex: 0 1 5.5em;
+        min-width: 0;
+      }
 
       /* ── keyframe ─────────────────────────────────────────────────── */
 
@@ -291,6 +322,10 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
     get partNames() {
         return this.parts.map(part => part.name).filter(name => !!name);
     }
+    /** Joints a channel can drive instead of a part (ADR-0066). */
+    get joints() {
+        return this.draft?.joints ?? [];
+    }
     /**
      * 몇 부품이 움직이나 — 채널이 가리키는 **서로 다른 부품**의 수.
      *
@@ -460,14 +495,7 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
             aria-label="max"
             @change=${(e) => this.setRange(at, { max: Number(e.target.value) || 0 })}
           />
-          <input
-            unit
-            .value=${live(range.unit ?? '')}
-            placeholder="mm"
-            aria-label="unit"
-            title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
-            @change=${(e) => this.setRange(at, { unit: e.target.value.trim() })}
-          />
+          ${this.renderUnit(at, range.unit ?? '')}
         </div>
         ${backwards ? html `<p warn>${i18next.t('figure.text.range-needs-room')}</p>` : nothing}
 
@@ -520,23 +548,45 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
      * 검증은 저장할 때 말하고 여기서는 **그 자리에서** 보여 준다.
      */
     renderChannel(kind, channel, at, j) {
-        const orphan = !this.partNames.includes(channel.target);
+        const joint = this.joints.find(one => one.name === channel.target);
+        const orphan = !this.partNames.includes(channel.target) && !joint;
+        const target = html `
+      <div row>
+        <label>${i18next.t('figure.label.channel-target')}</label>
+        <select
+          .value=${live(channel.target ?? '')}
+          @change=${(e) => this.retarget(kind, at, j, e.target.value)}
+        >
+          ${orphan ? html `<option value=${channel.target}>${channel.target}</option>` : nothing}
+          <optgroup label=${i18next.t('figure.label.channel-target-parts')}>
+            ${this.partNames.map(name => html `<option value=${name}>${name}</option>`)}
+          </optgroup>
+          ${this.joints.length > 0
+            ? html `<optgroup label=${i18next.t('figure.label.channel-target-joints')}>
+                ${this.joints.map(one => html `<option value=${one.name}>${one.name}</option>`)}
+              </optgroup>`
+            : nothing}
+        </select>
+        <button plain @click=${() => this.removeChannel(kind, at, j)} title=${i18next.t('figure.button.remove')}>
+          <md-icon>close</md-icon>
+        </button>
+      </div>
+    `;
+        /* A joint channel has no path or pivot: the joint says what moves. Each key is the joint coordinate. */
+        if (isJointChannel(channel)) {
+            const unit = joint?.type === 'prismatic' ? 'mm' : 'deg';
+            return html `
+        <div channel ?orphan=${orphan}>
+          ${target} ${orphan ? html `<p warn>${i18next.t('figure.text.channel-target-is-gone')}</p>` : nothing}
+          <p quiet>${i18next.t('figure.text.joint-channel-value-' + unit)}</p>
+          ${this.renderJointKeys(kind, channel, at, j, joint?.limits)}
+        </div>
+      `;
+        }
         const turning = channel.path === 'rotation';
         return html `
       <div channel ?orphan=${orphan}>
-        <div row>
-          <label>${i18next.t('figure.label.channel-target')}</label>
-          <select
-            .value=${live(channel.target ?? '')}
-            @change=${(e) => this.setChannel(kind, at, j, { target: e.target.value })}
-          >
-            ${orphan ? html `<option value=${channel.target}>${channel.target}</option>` : nothing}
-            ${this.partNames.map(name => html `<option value=${name}>${name}</option>`)}
-          </select>
-          <button plain @click=${() => this.removeChannel(kind, at, j)} title=${i18next.t('figure.button.remove')}>
-            <md-icon>close</md-icon>
-          </button>
-        </div>
+        ${target}
 
         ${orphan ? html `<p warn>${i18next.t('figure.text.channel-target-is-gone')}</p>` : nothing}
 
@@ -607,6 +657,66 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
      * 시각이 오름차순이어야 하는 것도 형식의 규칙이다. 여기서는 어긋난 줄을 붉게 내고 값을
      * 고치지는 않는다 — 저작자가 3 을 1 로 고치던 중일 수 있다.
      */
+    /**
+     * Keys of a joint channel: a position and one joint coordinate each. A value outside the joint's limits
+     * is marked and left as typed; the format refuses it on save.
+     */
+    renderJointKeys(kind, channel, at, j, limits) {
+        const keys = channel.keys ?? [];
+        const onValues = kind === 'parameter';
+        const beyond = (key) => !!limits && (key.value < limits.min || key.value > limits.max);
+        return html `
+      <table keys>
+        <tr>
+          <th>${i18next.t(onValues ? 'figure.label.key-at-value' : 'figure.label.key-at')}</th>
+          <th>${i18next.t('figure.label.joint-value')}</th>
+          <th></th>
+        </tr>
+        ${keys.map((key, k) => {
+            const backwards = k > 0 && key.at <= (keys[k - 1].at ?? 0);
+            return html `
+            <tr>
+              <td>
+                <input
+                  type="number"
+                  step=${onValues ? '0.05' : '0.1'}
+                  min="0"
+                  max=${onValues ? '1' : nothing}
+                  ?bad=${backwards || key.at < 0 || (onValues && key.at > 1)}
+                  .value=${live(String(key.at))}
+                  @change=${(e) => this.setJointKey(kind, at, j, k, { at: Math.max(0, Number(e.target.value) || 0) })}
+                />
+              </td>
+              <td>
+                <input
+                  type="number"
+                  step="1"
+                  ?bad=${beyond(key)}
+                  .value=${live(String(key.value))}
+                  title=${beyond(key) ? i18next.t('figure.text.joint-value-beyond-limits') : ''}
+                  @change=${(e) => this.setJointKey(kind, at, j, k, { value: Number(e.target.value) || 0 })}
+                />
+              </td>
+              <td drop>
+                <button
+                  plain
+                  ?disabled=${keys.length <= 2}
+                  title=${keys.length <= 2 ? i18next.t('figure.text.two-keys-at-least') : i18next.t('figure.button.remove')}
+                  @click=${() => this.removeKey(kind, at, j, k)}
+                >
+                  <md-icon>close</md-icon>
+                </button>
+              </td>
+            </tr>
+          `;
+        })}
+      </table>
+      ${keys.some(beyond) ? html `<p warn>${i18next.t('figure.text.joint-value-beyond-limits')}</p>` : nothing}
+      <button @click=${() => this.addKey(kind, at, j)}>
+        <md-icon>add</md-icon>${i18next.t('figure.button.add-key')}
+      </button>
+    `;
+    }
     renderKeys(kind, channel, at, j) {
         const keys = channel.keys ?? [];
         /*
@@ -797,6 +907,51 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
     renameParameter(at, name) {
         this.patchParameter(at, { name: name.trim() });
     }
+    /**
+     * 단위 칸 — **목록이 보이는 채로, 적는 길도 열어 둔다.**
+     *
+     * 처음에는 `datalist` 를 붙였다. 그것은 브라우저가 쥐고 있는 기능이라 **눌러 보기 전에는 목록이
+     * 있는지조차 안 보인다** — 화살표도 없고, 어디에 어떻게 뜨는지도 브라우저가 정한다. 고를 수
+     * 있다는 것을 알리는 것이 이 칸의 목적이므로 `select` 로 바꿨다.
+     *
+     * 형식은 단위를 규칙으로 쓰지 않으므로(표시용 말이다) 목록에 가두지 않는다. 마지막 줄이
+     * 「직접 적기」이고, 목록에 없는 말이 이미 적혀 있으면 처음부터 적는 칸으로 연다.
+     */
+    renderUnit(at, unit) {
+        const listed = PARAMETER_UNITS.includes(unit);
+        const typing = this.typingUnit.has(at) || (unit !== '' && !listed);
+        if (typing) {
+            return html `<input
+        unit
+        .value=${live(unit)}
+        placeholder="mm"
+        aria-label="unit"
+        title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
+        @change=${(e) => this.setRange(at, { unit: e.target.value.trim() })}
+      />`;
+        }
+        return html `<select
+      unit
+      aria-label="unit"
+      title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
+      @change=${(e) => this.chooseUnit(at, e.target.value)}
+    >
+      <option value="" ?selected=${unit === ''}>${i18next.t('figure.label.unit-none')}</option>
+      ${PARAMETER_UNITS.map(one => html `<option value=${one} ?selected=${one === unit}>${one}</option>`)}
+      <option value=${UNIT_TYPE_IT}>${i18next.t('figure.label.unit-type-it')}</option>
+    </select>`;
+    }
+    /** 고른 것을 넣는다. 「직접 적기」는 값이 아니라 **칸을 바꾸는 것**이다. */
+    chooseUnit(at, value) {
+        if (value === UNIT_TYPE_IT) {
+            this.typingUnit = new Set([...this.typingUnit, at]);
+            return;
+        }
+        const next = new Set(this.typingUnit);
+        next.delete(at);
+        this.typingUnit = next;
+        this.setRange(at, { unit: value });
+    }
     setRange(at, patch) {
         const parameter = this.parameters[at];
         if (!parameter)
@@ -836,10 +991,36 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
             { target, path: 'translation', keys: keysFor('translation') }
         ]);
     }
-    setChannel(kind, at, j, patch) {
+    /**
+     * Points a channel at another part or joint. Crossing between the two changes the channel's shape: a
+     * joint channel has no path and one number per key, a part channel a path and a vector. The key positions
+     * are kept, since they are the author's timing; values restart at the rest pose.
+     */
+    retarget(kind, at, j, target) {
         const channel = this.channelsOf(kind, at)[j];
         if (!channel)
             return;
+        const toJoint = this.joints.some(one => one.name === target);
+        if (toJoint && !isJointChannel(channel)) {
+            const next = { target, keys: channel.keys.map(key => ({ at: key.at, value: 0 })) };
+            if (channel.interpolation !== undefined)
+                next.interpolation = channel.interpolation;
+            this.patchChannel(kind, at, j, next);
+            return;
+        }
+        if (!toJoint && isJointChannel(channel)) {
+            const next = { target, path: 'translation', keys: channel.keys.map(key => ({ at: key.at, value: startValue('translation') })) };
+            if (channel.interpolation !== undefined)
+                next.interpolation = channel.interpolation;
+            this.patchChannel(kind, at, j, next);
+            return;
+        }
+        this.patchChannel(kind, at, j, { ...channel, target });
+    }
+    setChannel(kind, at, j, patch) {
+        const channel = this.channelsOf(kind, at)[j];
+        if (!channel || isJointChannel(channel))
+            return;
         const next = { ...channel, ...patch };
         /* `undefined` 를 얹는 것은 지우는 뜻이다. 남겨 두면 저장 형식에 빈 칸이 실린다. */
         if ('pivot' in patch && patch.pivot === undefined)
@@ -855,7 +1036,7 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
      */
     setPath(kind, at, j, path) {
         const channel = this.channelsOf(kind, at)[j];
-        if (!channel)
+        if (!channel || isJointChannel(channel))
             return;
         const crossing = (channel.path === 'scale') !== (path === 'scale');
         const next = {
@@ -876,6 +1057,18 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
         const channel = this.channelsOf(kind, at)[j];
         if (!channel)
             return;
+        if (isJointChannel(channel)) {
+            const keys = channel.keys;
+            const end = keys[keys.length - 1];
+            if (kind === 'parameter' && keys.length >= 2) {
+                const before = keys[keys.length - 2];
+                const middle = { at: (before.at + end.at) / 2, value: before.value };
+                this.patchChannel(kind, at, j, { ...channel, keys: [...keys.slice(0, -1), middle, end] });
+                return;
+            }
+            this.patchChannel(kind, at, j, { ...channel, keys: [...keys, { at: (end?.at ?? 0) + 1, value: end?.value ?? 0 }] });
+            return;
+        }
         const last = channel.keys[channel.keys.length - 1];
         /*
           A parameter curve ends at 1, so appending a key would make it unreachable. Insert it between the last two keys.
@@ -889,9 +1082,15 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
         const key = { at: (last?.at ?? 0) + 1, value: { ...(last?.value ?? startValue(channel.path)) } };
         this.patchChannel(kind, at, j, { ...channel, keys: [...channel.keys, key] });
     }
+    setJointKey(kind, at, j, k, patch) {
+        const channel = this.channelsOf(kind, at)[j];
+        if (!channel || !isJointChannel(channel))
+            return;
+        this.patchChannel(kind, at, j, { ...channel, keys: channel.keys.map((key, i) => (i === k ? { ...key, ...patch } : key)) });
+    }
     setKey(kind, at, j, k, patch) {
         const channel = this.channelsOf(kind, at)[j];
-        if (!channel)
+        if (!channel || isJointChannel(channel))
             return;
         this.patchChannel(kind, at, j, {
             ...channel,
@@ -922,6 +1121,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureAnimations.prototype, "recipeTarget", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureAnimations.prototype, "typingUnit", void 0);
 FigureAnimations = __decorate([
     customElement('figure-animations')
 ], FigureAnimations);