@things-factory/figure-ui 10.1.26 → 10.1.28

package/client/graphql/index.ts

@@ -323,6 +323,29 @@ export async function inspectFigure(id: string): Promise<FigureInspection> {
 }
 
 /** 발행된 판들 — 최근 것부터 열 개. */
+/**
+ * 직전 발행판의 정본. 한 번도 발행 안 했으면 `undefined`.
+ *
+ * 저작 중에 「이 고침이 이미 놓인 것을 깨나」를 그 자리에서 보여 주려면 견줄 것이 필요하다. 저장
+ * 전 초안은 서버가 모르므로 판정도 화면에서 한다 — 형식의 `contractChanges` 를 같이 쓴다.
+ */
+export async function fetchReleasedSource(id: string): Promise<string | undefined> {
+  const response = await client.query({
+    query: gql`
+      query FigureReleased($id: String!) {
+        figureReleased(id: $id) {
+          version
+          source
+        }
+      }
+    `,
+    variables: { id },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<{ source?: string }>(response, 'figureReleased')?.source ?? undefined
+}
+
 export async function fetchFigureVersions(id: string): Promise<FigureVersion[]> {
   const response = await client.query({
     query: gql`

package/client/modeller/base-box.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import type { FigureDraft, PartModel } from './figure-source.js'
+
+/**
+ * 기준 상자를 고친다 — **부품은 제자리에 둔 채.**
+ *
+ * ## 왜 화면에 있어야 하나
+ *
+ * 기준 상자는 도면에 놓일 때의 배율을 정하는 수다(ADR-0044 ①). 부품이 그 상자를 넘으면 발행이
+ * 막히고, 고치는 길은 「상자 숫자 하나를 키우는 것」인데 **화면에 그 칸이 없었다.** 저작자는
+ * 넘쳤다는 말만 듣고 고칠 자리를 못 찾았다.
+ *
+ * ## 상자를 키우면 부품이 움직인다 — 그것을 되돌린다
+ *
+ * 저작면의 부품 자리는 판의 왼쪽 위에서 잰 값이고, 저장 형식의 자리는 **상자의 한가운데**에서 잰
+ * 값이다(`toFigureSource` 가 절반을 뺀다). 그래서 상자만 키우면 한가운데가 옮겨 가고 부품이 전부
+ * 반대로 밀린다. 여기서 늘어난 절반만큼 부품을 함께 옮겨, 저장되는 자리가 한 값도 안 바뀌게 한다.
+ *
+ * ## 「부품에 맞추기」는 한가운데를 지킨다
+ *
+ * 부품을 감싸는 가장 작은 상자를 만들 때, 부품 쪽을 **옮기지 않는다.** 한가운데에서 가장 먼
+ * 부품까지의 거리를 양쪽으로 잡는다. 부품이 한쪽으로 치우쳐 있으면 반대쪽에 여유가 남는데,
+ * 그것이 사실이다 — 치우친 것을 가운데로 끌어오면 저작자가 놓은 자리가 소리 없이 달라지고,
+ * 발행된 도형에서는 문(port)의 자리가 함께 움직인다.
+ *
+ * 높이는 밑면이 바닥이라 한쪽만 늘린다. 바닥 아래로 내려간 부품이 있으면 그 부품은 상자 밖에
+ * 남는다 — 그것을 담으려면 부품을 올려야 하고, 그것은 저작자가 정할 일이다. 발행 관문이 이미
+ * `part-outside-base` 로 말한다.
+ */
+
+export interface BaseSize {
+  /** 저작면의 가로 — 형식의 `base.x`. */
+  width: number
+  /** 저작면의 세로 — 형식의 `base.z`. */
+  height: number
+  /** 높이 — 형식의 `base.y`. */
+  depth: number
+}
+
+/** 상자는 밀리미터 하나보다 작아질 수 없다. 0 이 되면 배율이 0 으로 나뉜다. */
+const LEAST = 1
+
+const round = (value: number) => Math.round(value)
+
+export const baseOf = (draft: FigureDraft): BaseSize => ({
+  width: draft.width,
+  height: draft.height,
+  depth: draft.depth
+})
+
+/** 부품 전부를 담는 가장 작은 상자. 부품이 없으면 잴 것이 없다. */
+export function baseFittingParts(draft: FigureDraft, parts: readonly PartModel[]): BaseSize | undefined {
+  if (parts.length === 0) return undefined
+
+  const middle = { x: draft.width / 2, y: draft.height / 2 }
+  let half = { x: 0, y: 0 }
+  let tallest = 0
+
+  for (const part of parts) {
+    half = {
+      x: Math.max(half.x, Math.abs(part.left - middle.x), Math.abs(part.left + part.width - middle.x)),
+      y: Math.max(half.y, Math.abs(part.top - middle.y), Math.abs(part.top + part.height - middle.y))
+    }
+    tallest = Math.max(tallest, part.zPos + part.depth)
+  }
+
+  return {
+    width: Math.max(LEAST, round(half.x * 2)),
+    height: Math.max(LEAST, round(half.y * 2)),
+    depth: Math.max(LEAST, round(tallest))
+  }
+}
+
+/**
+ * 상자를 이 크기로. 부품은 저장되는 자리가 그대로이도록 함께 옮긴다.
+ *
+ * 달라질 것이 없으면 **받은 것을 그대로 돌려준다** — 고친 것이 없는데 「저장 안 됨」이 붙지 않게.
+ */
+export function resizeBase(
+  draft: FigureDraft,
+  parts: readonly PartModel[],
+  next: BaseSize
+): { draft: FigureDraft; parts: readonly PartModel[] } {
+  const size = {
+    width: Math.max(LEAST, round(next.width)),
+    height: Math.max(LEAST, round(next.height)),
+    depth: Math.max(LEAST, round(next.depth))
+  }
+
+  if (size.width === draft.width && size.height === draft.height && size.depth === draft.depth) {
+    return { draft, parts }
+  }
+
+  const shift = { x: (size.width - draft.width) / 2, y: (size.height - draft.height) / 2 }
+  const moved =
+    shift.x === 0 && shift.y === 0
+      ? parts
+      : parts.map(part => ({ ...part, left: part.left + shift.x, top: part.top + shift.y }))
+
+  return { draft: { ...draft, ...size }, parts: moved }
+}

package/client/modeller/figure-animations.ts

@@ -6,7 +6,7 @@ import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
 import { AXES, CHANNEL_PATHS, INTERPOLATIONS, LIMITS } from '@hatiolab/figure-model'
-import type { ChannelPath, Vec3 } from '@hatiolab/figure-model'
+import type { ChannelPath, JointChannel, PartChannel, Vec3 } from '@hatiolab/figure-model'
 
 import type { FigureDraft, PartModel } from './figure-source.js'
 
@@ -44,7 +44,13 @@ import type { FigureDraft, PartModel } from './figure-source.js'
 type Clip = NonNullable<FigureDraft['animations']>[number]
 type Parameter = NonNullable<FigureDraft['parameters']>[number]
 type Channel = Clip['channels'][number]
-type Keyframe = Channel['keys'][number]
+type Keyframe = PartChannel['keys'][number]
+type JointKey = JointChannel['keys'][number]
+
+/** A channel that drives a joint names the joint and carries one number per key (ADR-0066). */
+function isJointChannel(channel: Channel): channel is JointChannel {
+  return channel.path === undefined
+}
 
 /** 어느 목록의 몇째인가. 채널·키 편집기가 둘을 함께 쓴다. */
 type MotionKind = 'clip' | 'parameter'
@@ -124,6 +130,18 @@ function freeName(taken: readonly { name: string }[], stem: string): string {
   for (let n = 2; ; n++) if (!used.has(`${stem}-${n}`)) return `${stem}-${n}`
 }
 
+/**
+ * 파라미터 범위에 적히는 단위 — **권하는 것이지 가두는 것이 아니다.**
+ *
+ * 관절이 만드는 파라미터가 `deg` 와 `mm` 을 쓰고(회전과 직선), 그리퍼·문 같은 값은 `%` 를 쓴다.
+ * 속도는 `mm/s` 와 `rpm`, 시간은 `s` 다. 이 여섯이 지금 쓰이는 전부이고, 목록에 없는 말을 적는
+ * 길은 그대로 열려 있다.
+ */
+const PARAMETER_UNITS = ['deg', 'mm', '%', 'mm/s', 'rpm', 's'] as const
+
+/** 목록 대신 손으로 적겠다는 표. `select` 의 값으로 쓴다. */
+const UNIT_TYPE_IT = '__type-it'
+
 @customElement('figure-animations')
 export class FigureAnimations extends localize(i18next)(LitElement) {
   static styles = [
@@ -219,6 +237,21 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
         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 ─────────────────────────────────────────────────── */
 
@@ -335,6 +368,9 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
   @state() private open = ''
   @state() private recipeTarget = ''
 
+  /** 단위를 손으로 적는 중인 파라미터. 목록에 없는 말을 적으려고 연 칸이다. */
+  @state() private typingUnit = new Set<number>()
+
   private get clips(): Clip[] {
     return this.draft?.animations ?? []
   }
@@ -357,6 +393,11 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     return this.parts.map(part => part.name).filter(name => !!name)
   }
 
+  /** Joints a channel can drive instead of a part (ADR-0066). */
+  private get joints(): NonNullable<FigureDraft['joints']> {
+    return this.draft?.joints ?? []
+  }
+
   /**
    * 몇 부품이 움직이나 — 채널이 가리키는 **서로 다른 부품**의 수.
    *
@@ -531,14 +572,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
             aria-label="max"
             @change=${(e: Event) => this.setRange(at, { max: Number((e.target as HTMLInputElement).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: Event) => this.setRange(at, { unit: (e.target as HTMLInputElement).value.trim() })}
-          />
+          ${this.renderUnit(at, range.unit ?? '')}
         </div>
         ${backwards ? html`<p warn>${i18next.t('figure.text.range-needs-room')}</p>` : nothing}
 
@@ -594,24 +628,48 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
    * 검증은 저장할 때 말하고 여기서는 **그 자리에서** 보여 준다.
    */
   private renderChannel(kind: MotionKind, channel: Channel, at: number, j: number): TemplateResult {
-    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: Event) => this.retarget(kind, at, j, (e.target as HTMLSelectElement).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: Event) => this.setChannel(kind, at, j, { target: (e.target as HTMLSelectElement).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}
 
@@ -649,7 +707,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
    * 그래서 경로가 rotation 일 때만 낸다. 언제나 내면 저작자가 옮김·배율에도 적고, 검증이
    * 저장할 때 「쓰이지 않는다」고 알린다. 안 보이면 적을 일이 없다.
    */
-  private renderPivot(kind: MotionKind, channel: Channel, at: number, j: number): TemplateResult {
+  private renderPivot(kind: MotionKind, channel: PartChannel, at: number, j: number): TemplateResult {
     const pivot = channel.pivot
     const on = pivot !== undefined
 
@@ -691,7 +749,76 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
    * 시각이 오름차순이어야 하는 것도 형식의 규칙이다. 여기서는 어긋난 줄을 붉게 내고 값을
    * 고치지는 않는다 — 저작자가 3 을 1 로 고치던 중일 수 있다.
    */
-  private renderKeys(kind: MotionKind, channel: Channel, at: number, j: number): TemplateResult {
+  /**
+   * 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(
+    kind: MotionKind,
+    channel: JointChannel,
+    at: number,
+    j: number,
+    limits?: { min: number; max: number }
+  ): TemplateResult {
+    const keys = channel.keys ?? []
+    const onValues = kind === 'parameter'
+    const beyond = (key: JointKey) => !!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: Event) =>
+                    this.setJointKey(kind, at, j, k, { at: Math.max(0, Number((e.target as HTMLInputElement).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: Event) => this.setJointKey(kind, at, j, k, { value: Number((e.target as HTMLInputElement).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>
+    `
+  }
+
+  private renderKeys(kind: MotionKind, channel: PartChannel, at: number, j: number): TemplateResult {
     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
@@ -905,6 +1032,56 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     this.patchParameter(at, { name: name.trim() })
   }
 
+  /**
+   * 단위 칸 — **목록이 보이는 채로, 적는 길도 열어 둔다.**
+   *
+   * 처음에는 `datalist` 를 붙였다. 그것은 브라우저가 쥐고 있는 기능이라 **눌러 보기 전에는 목록이
+   * 있는지조차 안 보인다** — 화살표도 없고, 어디에 어떻게 뜨는지도 브라우저가 정한다. 고를 수
+   * 있다는 것을 알리는 것이 이 칸의 목적이므로 `select` 로 바꿨다.
+   *
+   * 형식은 단위를 규칙으로 쓰지 않으므로(표시용 말이다) 목록에 가두지 않는다. 마지막 줄이
+   * 「직접 적기」이고, 목록에 없는 말이 이미 적혀 있으면 처음부터 적는 칸으로 연다.
+   */
+  private renderUnit(at: number, unit: string) {
+    const listed = (PARAMETER_UNITS as readonly string[]).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: Event) => this.setRange(at, { unit: (e.target as HTMLInputElement).value.trim() })}
+      />`
+    }
+
+    return html`<select
+      unit
+      aria-label="unit"
+      title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
+      @change=${(e: Event) => this.chooseUnit(at, (e.target as HTMLSelectElement).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>`
+  }
+
+  /** 고른 것을 넣는다. 「직접 적기」는 값이 아니라 **칸을 바꾸는 것**이다. */
+  private chooseUnit(at: number, value: string): void {
+    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 })
+  }
+
   private setRange(at: number, patch: Partial<Parameter['range']>): void {
     const parameter = this.parameters[at]
     if (!parameter) return
@@ -948,11 +1125,36 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     ])
   }
 
-  private setChannel(kind: MotionKind, at: number, j: number, patch: Partial<Channel>): void {
+  /**
+   * 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(kind: MotionKind, at: number, j: number, target: string): void {
     const channel = this.channelsOf(kind, at)[j]
     if (!channel) return
+    const toJoint = this.joints.some(one => one.name === target)
 
-    const next: Channel = { ...channel, ...patch }
+    if (toJoint && !isJointChannel(channel)) {
+      const next: JointChannel = { 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: PartChannel = { 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 } as Channel)
+  }
+
+  private setChannel(kind: MotionKind, at: number, j: number, patch: Partial<PartChannel>): void {
+    const channel = this.channelsOf(kind, at)[j]
+    if (!channel || isJointChannel(channel)) return
+
+    const next: PartChannel = { ...channel, ...patch }
     /* `undefined` 를 얹는 것은 지우는 뜻이다. 남겨 두면 저장 형식에 빈 칸이 실린다. */
     if ('pivot' in patch && patch.pivot === undefined) delete next.pivot
     this.patchChannel(kind, at, j, next)
@@ -967,10 +1169,10 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
    */
   private setPath(kind: MotionKind, at: number, j: number, path: ChannelPath): void {
     const channel = this.channelsOf(kind, at)[j]
-    if (!channel) return
+    if (!channel || isJointChannel(channel)) return
 
     const crossing = (channel.path === 'scale') !== (path === 'scale')
-    const next: Channel = {
+    const next: PartChannel = {
       ...channel,
       path,
       keys: crossing ? channel.keys.map(key => ({ at: key.at, value: startValue(path) })) : channel.keys
@@ -994,6 +1196,19 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     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: JointKey = { 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]
 
     /*
@@ -1010,9 +1225,15 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     this.patchChannel(kind, at, j, { ...channel, keys: [...channel.keys, key] })
   }
 
+  private setJointKey(kind: MotionKind, at: number, j: number, k: number, patch: Partial<JointKey>): void {
+    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)) })
+  }
+
   private setKey(kind: MotionKind, at: number, j: number, k: number, patch: Partial<Keyframe>): void {
     const channel = this.channelsOf(kind, at)[j]
-    if (!channel) return
+    if (!channel || isJointChannel(channel)) return
     this.patchChannel(kind, at, j, {
       ...channel,
       keys: channel.keys.map((key, i) => (i === k ? { ...key, ...patch } : key))
@@ -1023,6 +1244,6 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
   private removeKey(kind: MotionKind, at: number, j: number, k: number): void {
     const channel = this.channelsOf(kind, at)[j]
     if (!channel || channel.keys.length <= 2) return
-    this.patchChannel(kind, at, j, { ...channel, keys: channel.keys.filter((_, i) => i !== k) })
+    this.patchChannel(kind, at, j, { ...channel, keys: (channel.keys as { at: number }[]).filter((_, i) => i !== k) } as Channel)
   }
 }

package/client/modeller/figure-canvas.ts

@@ -192,6 +192,14 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
   /** 지금 고른 부품 이름. 목록에서 고른 것을 캔버스에 알린다. */
   @property({ type: String }) picked?: string
 
+  /**
+   * 관절이 도는 자리를 그리는 부채꼴(`joint-gizmo.ts`). 저작면에만 있고 저장되지 않는다.
+   *
+   * 부품과 같은 길로 세운다 — 씬에 겹쳐 그리는 통로를 따로 뚫지 않는다. `locked` 라 클릭도
+   * 마퀴도 집지 않는다.
+   */
+  @property({ type: Object }) gizmo?: PartModel
+
   /**
    * 보기 전용 — 씬에서 일어난 일을 밖에 알리지 않는다.
    *
@@ -278,6 +286,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
 
     if (changed.has('revision')) this.standing = undefined
     if (changed.has('draft') || changed.has('parts') || changed.has('figureId') || changed.has('revision')) this.standUp()
+    else if (changed.has('gizmo')) this.syncParts()
     if (changed.has('view')) this.applyView()
     if (changed.has('picked')) this.showPicked()
   }
@@ -358,7 +367,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
             없어야 한다: 좌표 모눈과 겹쳐 싸우고 원점 아래쪽을 가린다.
           */
           fillStyle: PAPER,
-          components: this.parts.map(part => ({ ...part }))
+          components: this.standing3d().map(part => ({ ...part }))
         },
         // **편집 모드**로 만든다. 도면의 3D 모델러가 그 모드에서 카메라 시점 버튼 ·
         // 기즈모 모드 · 도움말 · 단축키를 띄운다.
@@ -449,11 +458,17 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
    * 다시 세우면 고른 것과 카메라가 날아가서, 숫자 하나 고칠 때마다 화면이 처음으로
    * 돌아간다.
    */
+  /** 판에 세울 것 전부 — 저작한 부품과, 있으면 관절 부채꼴. */
+  private standing3d(): PartModel[] {
+    return this.gizmo ? [...this.parts, this.gizmo] : this.parts
+  }
+
   private syncParts() {
     const root = this.scene?.root
     if (!root) return
 
-    const wanted = new Map(this.parts.map(part => [part.name, part]))
+    const all = this.standing3d()
+    const wanted = new Map(all.map(part => [part.name, part]))
     const standing = this.partsOnCanvas()
 
     // 없어진 것을 제거한다
@@ -464,7 +479,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
       }
     }
 
-    for (const part of this.parts) {
+    for (const part of all) {
       const found = standing.get(part.name)
       if (found) {
         /*