@things-factory/figure-ui 10.1.25 → 10.1.27

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

@@ -19,6 +19,8 @@ export declare class FigureAnimations extends FigureAnimations_base {
     private channelsOf;
     /** 부품 이름 — 채널이 이것을 가리킨다. */
     private get partNames();
+    /** Joints a channel can drive instead of a part (ADR-0066). */
+    private get joints();
     /**
      * 몇 부품이 움직이나 — 채널이 가리키는 **서로 다른 부품**의 수.
      *
@@ -69,6 +71,11 @@ export declare class FigureAnimations extends FigureAnimations_base {
      * 시각이 오름차순이어야 하는 것도 형식의 규칙이다. 여기서는 어긋난 줄을 붉게 내고 값을
      * 고치지는 않는다 — 저작자가 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.
+     */
+    private renderJointKeys;
     private renderKeys;
     /**
      * 움직이는 부품 예산.
@@ -102,10 +109,21 @@ export declare class FigureAnimations extends FigureAnimations_base {
     private renameClip;
     private renameParameter;
     private setRange;
+    /**
+     * Transition time. Clearing the input removes the field, which means instant. 0 is instant too, but
+     * a stored 0 and a missing field are different sources, so an empty input is never saved as 0.
+     */
+    private setDuration;
     private setDefault;
     private removeClip;
     private removeParameter;
     private addChannel;
+    /**
+     * 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.
+     */
+    private retarget;
     private setChannel;
     /**
      * 경로를 바꾼다 — **값까지 함께 옮긴다.**
@@ -118,6 +136,7 @@ export declare class FigureAnimations extends FigureAnimations_base {
     private removeChannel;
     /** 마지막 키에서 1 초 뒤. 값은 그 키를 그대로 받는다 — 붙여 놓고 고치는 것이 짜기 쉽다. */
     private addKey;
+    private setJointKey;
     private setKey;
     /** 둘 미만으로 내려가지 않는다 — 단추가 이미 죽어 있지만 밖에서 불릴 수 있다. */
     private removeKey;

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 만 올라가는 것을 보게 된다.
@@ -291,6 +295,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 ?? [];
+    }
     /**
      * 몇 부품이 움직이나 — 채널이 가리키는 **서로 다른 부품**의 수.
      *
@@ -315,7 +323,6 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
         return html `
       <section>
         <h3>${i18next.t('figure.label.animation')}</h3>
-        <p quiet>${i18next.t('figure.text.animation-is-driven-by-a-fact')}</p>
       </section>
 
       ${this.renderRecipes()}
@@ -418,6 +425,7 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
         const nameless = !parameter.name?.trim();
         const range = parameter.range ?? NEW_RANGE;
         const backwards = !(range.max > range.min);
+        const slowness = parameter.clip?.duration ?? 0;
         return html `
       <div clip ?on=${on}>
         <div head>
@@ -481,6 +489,21 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
           />
         </div>
 
+        <div row>
+          <label>${i18next.t('figure.label.parameter-duration')}</label>
+          <input
+            type="number"
+            step="0.1"
+            min="0"
+            ?bad=${slowness < 0}
+            .value=${live(parameter.clip?.duration === undefined ? '' : String(parameter.clip.duration))}
+            placeholder="0"
+            aria-label="duration"
+            @change=${(e) => this.setDuration(at, e.target.value)}
+          />
+        </div>
+        <p quiet>${i18next.t('figure.text.parameter-duration-empty-is-instant')}</p>
+
         ${on ? this.renderChannels('parameter', at) : nothing}
       </div>
     `;
@@ -505,23 +528,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}
 
@@ -592,12 +637,79 @@ 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 ?? [];
+        /*
+          Keys on a parameter curve sit on the 0..1 value span (ADR-0051). A key above 1 is unreachable and
+          the format refuses it. The screen marks it and leaves the number alone: rewriting what the author
+          typed would hide what they wrote.
+        */
+        const onValues = kind === 'parameter';
+        const outside = (key) => onValues && key.at > 1;
         return html `
       <table keys>
         <tr>
-          <th>${i18next.t('figure.label.key-at')}</th>
+          <th>${i18next.t(onValues ? 'figure.label.key-at-value' : 'figure.label.key-at')}</th>
           ${AXES.map(axis => html `<th>${axis}</th>`)}
           <th></th>
         </tr>
@@ -608,11 +720,16 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
               <td>
                 <input
                   type="number"
-                  step="0.1"
+                  step=${onValues ? '0.05' : '0.1'}
                   min="0"
-                  ?bad=${backwards || key.at < 0}
+                  max=${onValues ? '1' : nothing}
+                  ?bad=${backwards || key.at < 0 || outside(key)}
                   .value=${live(String(key.at))}
-                  title=${backwards ? i18next.t('figure.text.keys-must-rise') : ''}
+                  title=${backwards
+                ? i18next.t('figure.text.keys-must-rise')
+                : outside(key)
+                    ? i18next.t('figure.text.parameter-key-within-span')
+                    : ''}
                   @change=${(e) => this.setKey(kind, at, j, k, { at: Math.max(0, Number(e.target.value) || 0) })}
                 />
               </td>
@@ -647,6 +764,7 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
       ${keys.some((key, k) => k > 0 && key.at <= (keys[k - 1].at ?? 0))
             ? html `<p warn>${i18next.t('figure.text.keys-must-rise')}</p>`
             : nothing}
+      ${keys.some(outside) ? html `<p warn>${i18next.t('figure.text.parameter-key-within-span')}</p>` : nothing}
 
       <button @click=${() => this.addKey(kind, at, j)}>
         <md-icon>add</md-icon>${i18next.t('figure.button.add-key')}
@@ -775,6 +893,19 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
             return;
         this.patchParameter(at, { range: { ...(parameter.range ?? NEW_RANGE), ...patch } });
     }
+    /**
+     * Transition time. Clearing the input removes the field, which means instant. 0 is instant too, but
+     * a stored 0 and a missing field are different sources, so an empty input is never saved as 0.
+     */
+    setDuration(at, raw) {
+        const parameter = this.parameters[at];
+        if (!parameter)
+            return;
+        const { duration: _dropped, ...rest } = parameter.clip;
+        const text = raw.trim();
+        const clip = text === '' || !Number.isFinite(Number(text)) ? rest : { ...rest, duration: Number(text) };
+        this.patchParameter(at, { clip });
+    }
     setDefault(at, value) {
         this.patchParameter(at, { default: value });
     }
@@ -795,10 +926,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)
@@ -814,7 +971,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 = {
@@ -835,13 +992,40 @@ 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.
+        */
+        if (kind === 'parameter' && channel.keys.length >= 2) {
+            const before = channel.keys[channel.keys.length - 2];
+            const middle = { at: (before.at + last.at) / 2, value: { ...before.value } };
+            this.patchChannel(kind, at, j, { ...channel, keys: [...channel.keys.slice(0, -1), middle, last] });
+            return;
+        }
         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,