@things-factory/figure-ui 10.1.5 → 10.1.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-animations.js","sourceRoot":"","sources":["../../client/modeller/figure-animations.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, type TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { AXES, CHANNEL_PATHS, CLIP_DRIVES, INTERPOLATIONS, LIMITS } from '@hatiolab/figure-model'\nimport type { ChannelPath, Vec3 } from '@hatiolab/figure-model'\n\nimport type { BoardModel, PartModel } from './figure-source.js'\n\n/**\n * 이 도형이 **어떻게 움직이는가.**\n *\n * ## 왜 탭 하나가 필요한가\n *\n * 움직임은 형식에 있고 런타임까지 서 있었다 — 검증이 촘촘히 보고, 청사진이 움직이는 부품을\n * 단독 묶음으로 빼고(합치면 따로 못 움직인다), 씬이 frameClock 을 구독해 실제로 돌린다.\n * 미리보기에도 clip 마다 슬라이더가 있었다.\n *\n * **만들 자리만 없었다.** 그래서 움직이는 도형을 얻는 길이 「AI 가 후보로 내놓는 것」 하나였고,\n * 채널 하나를 고치려면 손댈 화면이 없었다.\n *\n * ## 부품이 아니라 도형의 것이다\n *\n * clip 하나가 부품 여럿을 함께 움직인다 — 문 열림은 왼짝과 오른짝이 반대로 미끄러지는 것\n * 하나다. 그래서 부품을 고르고 「이 부품의 움직임」을 적는 형태가 될 수 없고, 속성 탭이 아니라\n * 자기 탭에 산다.\n *\n * ## 트윈은 타임라인을 재생하지 않는다\n *\n * 「문 열기 clip 을 재생하라」가 아니라 **「지금 40% 열려 있다」**다. 그래서 clip 마다 그 값을\n * 어떻게 받을지(`drive`)를 저작 시점에 정한다 — 도는 롤러는 배속을 받고, 열린 문은 0~1 위치를\n * 받는다. 이 선택이 화면에서 가장 설명이 필요한 자리다.\n */\n\ntype Clip = NonNullable<BoardModel['animations']>[number]\ntype Channel = Clip['channels'][number]\ntype Keyframe = Channel['keys'][number]\n\n/** 새 clip 의 키 둘. **하나로 만들지 않는다** — 키 하나는 움직임이 아니라 자세다. */\nconst NEW_KEYS: Keyframe[] = [\n  { at: 0, value: { x: 0, y: 0, z: 0 } },\n  { at: 1, value: { x: 0, y: 0, z: 0 } }\n]\n\n/** `scale` 만 1 에서 시작한다 — 0 은 부품을 지운다. */\nfunction startValue(path: ChannelPath): Vec3 {\n  return path === 'scale' ? { x: 1, y: 1, z: 1 } : { x: 0, y: 0, z: 0 }\n}\n\nfunction keysFor(path: ChannelPath): Keyframe[] {\n  return NEW_KEYS.map(key => ({ at: key.at, value: startValue(path) }))\n}\n\n/** 이미 쓴 이름을 비켜 간다. `type` 처럼 저장되는 식별자는 아니지만 인스턴스가 이 이름으로 구동한다. */\nfunction freeName(taken: readonly Clip[]): string {\n  const used = new Set(taken.map(clip => clip.name))\n  for (let n = 1; ; n++) {\n    const name = `clip-${n}`\n    if (!used.has(name)) return name\n  }\n}\n\n@customElement('figure-animations')\nexport class FigureAnimations extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow-y: auto;\n        background-color: var(--md-sys-color-surface-container-lowest);\n        color: var(--md-sys-color-on-surface);\n        font: var(--label-font, inherit);\n        font-size: 0.76rem;\n      }\n\n      section {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-large, 12px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      }\n\n      /* 다른 탭들과 같은 눈금이다 */\n      h3 {\n        margin: 0 0 2px 0;\n        font-size: var(--ui-t-micro, 11px);\n        font-weight: 700;\n        letter-spacing: 0.04em;\n        text-transform: uppercase;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n\n      p[quiet] {\n        margin: 0;\n        font-size: 0.72rem;\n        line-height: 1.5;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      /* ── clip ─────────────────────────────────────────────────────── */\n\n      div[clip] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-medium, 8px);\n        padding: 8px;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 4px;\n      }\n      div[clip][on] {\n        border-color: var(--md-sys-color-primary);\n        background-color: var(--md-sys-color-surface-container-low);\n      }\n\n      div[head] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n      div[head] input[name] {\n        flex: 1;\n        min-width: 0;\n      }\n\n      /* ── channel ──────────────────────────────────────────────────── */\n\n      div[channel] {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        padding: 6px 8px;\n        border-left: 2px solid var(--md-sys-color-outline-variant);\n        background-color: var(--md-sys-color-surface-container-lowest);\n      }\n      div[channel][orphan] {\n        border-left-color: var(--md-sys-color-error);\n      }\n\n      div[row] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n      div[row] > label {\n        flex: none;\n        min-width: 3.2em;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      /* ── keyframe ─────────────────────────────────────────────────── */\n\n      table[keys] {\n        width: 100%;\n        border-collapse: collapse;\n      }\n      table[keys] th {\n        padding: 0 2px 2px;\n        font-size: 0.68rem;\n        font-weight: 600;\n        text-align: left;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      table[keys] td {\n        padding: 1px 2px;\n      }\n      table[keys] input {\n        width: 100%;\n        min-width: 0;\n      }\n      table[keys] td[drop] {\n        width: 1.6em;\n      }\n\n      input,\n      select {\n        box-sizing: border-box;\n        padding: 3px 5px;\n        font: inherit;\n        font-size: 0.74rem;\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface-container-lowest);\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 3px;\n      }\n      input:focus,\n      select:focus {\n        outline: none;\n        border-color: var(--md-sys-color-primary);\n      }\n      input[bad] {\n        border-color: var(--md-sys-color-error);\n      }\n\n      button {\n        display: inline-flex;\n        align-items: center;\n        gap: 3px;\n        padding: 3px 8px;\n        font: inherit;\n        font-size: 0.72rem;\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface-container);\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 3px;\n        cursor: pointer;\n      }\n      button:hover:not(:disabled) {\n        background-color: var(--md-sys-color-surface-container-high);\n      }\n      button:disabled {\n        opacity: 0.4;\n        cursor: default;\n      }\n      button[plain] {\n        padding: 1px 4px;\n        background: none;\n        border: none;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      button[plain]:hover:not(:disabled) {\n        color: var(--md-sys-color-error);\n        background: none;\n      }\n      button md-icon {\n        font-size: 14px;\n        width: 14px;\n        height: 14px;\n      }\n\n      /* ── 예산 ─────────────────────────────────────────────────────── */\n\n      div[budget] {\n        display: flex;\n        align-items: baseline;\n        gap: 6px;\n      }\n      div[budget] strong {\n        font-size: 0.86rem;\n        font-weight: 700;\n      }\n      div[budget][over] strong {\n        color: var(--md-sys-color-error);\n      }\n\n      p[warn] {\n        margin: 0;\n        font-size: 0.7rem;\n        line-height: 1.5;\n        color: var(--md-sys-color-error);\n      }\n    `\n  ]\n\n  @property({ type: Object }) board?: BoardModel\n  @property({ type: Array }) parts: PartModel[] = []\n\n  /** 펼쳐 둔 clip. 이름이 아니라 자리로 잡는다 — 이름은 편집 중에 바뀐다. */\n  @state() private open = 0\n\n  private get clips(): Clip[] {\n    return this.board?.animations ?? []\n  }\n\n  /** 부품 이름 — 채널이 이것을 가리킨다. */\n  private get partNames(): string[] {\n    return this.parts.map(part => part.name).filter(name => !!name)\n  }\n\n  /**\n   * 몇 부품이 움직이나 — 채널이 가리키는 **서로 다른 부품**의 수.\n   *\n   * clip 수가 아니다. 한 부품을 세 clip 이 움직여도 그 부품 하나가 단독 묶음이 될 뿐이다.\n   * 청사진이 묶음을 가르는 기준과 같은 셈이어야 화면의 수와 판정의 수가 맞는다.\n   */\n  private get movingParts(): number {\n    const moving = new Set<string>()\n    for (const clip of this.clips) for (const channel of clip.channels) moving.add(channel.target)\n    return moving.size\n  }\n\n  render(): TemplateResult {\n    if (!this.board) return html``\n\n    return html`\n      <section>\n        <h3>${i18next.t('figure.label.animation')}</h3>\n        <p quiet>${i18next.t('figure.text.animation-is-driven-by-a-fact')}</p>\n      </section>\n\n      ${this.clips.length === 0 ? this.renderEmpty() : this.renderClips()}\n\n      <section>\n        <button @click=${() => this.addClip()} ?disabled=${this.partNames.length === 0}>\n          <md-icon>add</md-icon>${i18next.t('figure.button.add-clip')}\n        </button>\n        ${this.partNames.length === 0\n          ? html`<p quiet>${i18next.t('figure.text.animation-needs-a-named-part')}</p>`\n          : nothing}\n      </section>\n\n      ${this.clips.length === 0 ? nothing : this.renderBudget()}\n    `\n  }\n\n  /**\n   * 빈 화면 — **이 탭이 무엇인지 가르치는 자리다.**\n   *\n   * 「clip 을 추가하세요」라고만 쓰면 처음 여는 사람은 clip 이 무엇인지 모른 채 단추를 누른다.\n   * 그래서 무엇을 만들 수 있는지 예를 들고, 그것이 어떻게 움직이는지(사실이 들어온다)를 적는다.\n   */\n  private renderEmpty(): TemplateResult {\n    return html`\n      <section>\n        <p quiet>${i18next.t('figure.text.animation-empty-what-it-is')}</p>\n        <p quiet>${i18next.t('figure.text.animation-empty-examples')}</p>\n      </section>\n    `\n  }\n\n  private renderClips(): TemplateResult {\n    return html`\n      <section>\n        ${this.clips.map((clip, at) => this.renderClip(clip, at))}\n      </section>\n    `\n  }\n\n  private renderClip(clip: Clip, at: number): TemplateResult {\n    const on = this.open === at\n    const duplicate = this.clips.some((other, i) => i !== at && other.name === clip.name)\n    const nameless = !clip.name?.trim()\n\n    return html`\n      <div clip ?on=${on}>\n        <div head>\n          <button plain @click=${() => (this.open = on ? -1 : at)} title=${i18next.t('figure.label.channels')}>\n            <md-icon>${on ? 'expand_more' : 'chevron_right'}</md-icon>\n          </button>\n          <input\n            name\n            .value=${live(clip.name ?? '')}\n            ?bad=${duplicate || nameless}\n            placeholder=${i18next.t('figure.label.clip-name')}\n            title=${duplicate ? i18next.t('figure.text.clip-name-taken') : i18next.t('figure.text.clip-name-is-how-it-is-driven')}\n            @change=${(e: Event) => this.renameClip(at, (e.target as HTMLInputElement).value)}\n          />\n          <select\n            .value=${live(clip.drive ?? 'loop')}\n            title=${i18next.t('figure.text.drive-explained')}\n            @change=${(e: Event) => this.setDrive(at, (e.target as HTMLSelectElement).value as Clip['drive'])}\n          >\n            ${CLIP_DRIVES.map(\n              drive => html`<option value=${drive}>${i18next.t('figure.label.drive-' + drive)}</option>`\n            )}\n          </select>\n          <button plain @click=${() => this.removeClip(at)} title=${i18next.t('figure.button.remove')}>\n            <md-icon>close</md-icon>\n          </button>\n        </div>\n\n        ${duplicate ? html`<p warn>${i18next.t('figure.text.clip-name-taken')}</p>` : nothing}\n        ${nameless ? html`<p warn>${i18next.t('figure.text.clip-needs-a-name')}</p>` : nothing}\n        ${on ? this.renderChannels(clip, at) : nothing}\n      </div>\n    `\n  }\n\n  private renderChannels(clip: Clip, at: number): TemplateResult {\n    return html`\n      <p quiet>${i18next.t('figure.text.drive-' + (clip.drive ?? 'loop') + '-note')}</p>\n\n      ${clip.channels.length === 0 ? html`<p warn>${i18next.t('figure.text.clip-needs-a-channel')}</p>` : nothing}\n      ${clip.channels.map((channel, j) => this.renderChannel(channel, at, j))}\n\n      <button @click=${() => this.addChannel(at)}>\n        <md-icon>add</md-icon>${i18next.t('figure.button.add-channel')}\n      </button>\n    `\n  }\n\n  /**\n   * 채널 하나 — 어느 부품의 어느 속성을 움직이나.\n   *\n   * 없는 부품을 가리키는 채널은 붉게 낸다. 부품 이름을 바꾸면 그 순간 이렇게 되는데,\n   * 검증은 저장할 때 말하고 여기서는 **그 자리에서** 보여 준다.\n   */\n  private renderChannel(channel: Channel, at: number, j: number): TemplateResult {\n    const orphan = !this.partNames.includes(channel.target)\n    const turning = channel.path === 'rotation'\n\n    return html`\n      <div channel ?orphan=${orphan}>\n        <div row>\n          <label>${i18next.t('figure.label.channel-target')}</label>\n          <select\n            .value=${live(channel.target ?? '')}\n            @change=${(e: Event) => this.setChannel(at, j, { target: (e.target as HTMLSelectElement).value })}\n          >\n            ${orphan ? html`<option value=${channel.target}>${channel.target}</option>` : nothing}\n            ${this.partNames.map(name => html`<option value=${name}>${name}</option>`)}\n          </select>\n          <button plain @click=${() => this.removeChannel(at, j)} title=${i18next.t('figure.button.remove')}>\n            <md-icon>close</md-icon>\n          </button>\n        </div>\n\n        ${orphan ? html`<p warn>${i18next.t('figure.text.channel-target-is-gone')}</p>` : nothing}\n\n        <div row>\n          <label>${i18next.t('figure.label.channel-path')}</label>\n          <select\n            .value=${live(channel.path)}\n            @change=${(e: Event) => this.setPath(at, j, (e.target as HTMLSelectElement).value as ChannelPath)}\n          >\n            ${CHANNEL_PATHS.map(path => html`<option value=${path}>${i18next.t('figure.label.path-' + path)}</option>`)}\n          </select>\n          <select\n            .value=${live(channel.interpolation ?? 'linear')}\n            title=${i18next.t('figure.text.interpolation-explained')}\n            @change=${(e: Event) =>\n              this.setChannel(at, j, { interpolation: (e.target as HTMLSelectElement).value as Channel['interpolation'] })}\n          >\n            ${INTERPOLATIONS.map(\n              one => html`<option value=${one}>${i18next.t('figure.label.interpolation-' + one)}</option>`\n            )}\n          </select>\n        </div>\n\n        <p quiet>${i18next.t('figure.text.path-' + channel.path + '-unit')}</p>\n\n        ${turning ? this.renderPivot(channel, at, j) : nothing}\n        ${this.renderKeys(channel, at, j)}\n      </div>\n    `\n  }\n\n  /**\n   * 회전 중심 — **`rotation` 에서만 뜻이 있다.**\n   *\n   * 그래서 경로가 rotation 일 때만 낸다. 언제나 내면 저작자가 옮김·배율에도 적고, 검증이\n   * 저장할 때 「쓰이지 않는다」고 알린다. 안 보이면 적을 일이 없다.\n   */\n  private renderPivot(channel: Channel, at: number, j: number): TemplateResult {\n    const pivot = channel.pivot\n    const on = pivot !== undefined\n\n    return html`\n      <div row>\n        <label>${i18next.t('figure.label.channel-pivot')}</label>\n        <button\n          @click=${() => this.setChannel(at, j, { pivot: on ? undefined : { x: 0, y: 0, z: 0 } })}\n          title=${i18next.t('figure.text.pivot-defaults-to-the-part-centre')}\n        >\n          ${i18next.t(on ? 'figure.button.pivot-clear' : 'figure.button.pivot-set')}\n        </button>\n        ${on\n          ? AXES.map(\n              axis => html`\n                <input\n                  type=\"number\"\n                  step=\"1\"\n                  .value=${live(String(pivot![axis]))}\n                  aria-label=${axis}\n                  @change=${(e: Event) =>\n                    this.setChannel(at, j, {\n                      pivot: { ...pivot!, [axis]: Number((e.target as HTMLInputElement).value) || 0 }\n                    })}\n                />\n              `\n            )\n          : nothing}\n      </div>\n    `\n  }\n\n  /**\n   * 키프레임 표.\n   *\n   * **둘 미만으로 못 내려간다.** 하나뿐이면 움직이는 것이 아니라 자세 하나이고, 형식이\n   * 오류로 막는다. 저장하고 나서 알려 주는 것보다 지우는 단추를 죽이는 것이 낫다.\n   *\n   * 시각이 오름차순이어야 하는 것도 형식의 규칙이다. 여기서는 어긋난 줄을 붉게 내고 값을\n   * 고치지는 않는다 — 저작자가 3 을 1 로 고치던 중일 수 있다.\n   */\n  private renderKeys(channel: Channel, at: number, j: number): TemplateResult {\n    const keys = channel.keys ?? []\n\n    return html`\n      <table keys>\n        <tr>\n          <th>${i18next.t('figure.label.key-at')}</th>\n          ${AXES.map(axis => html`<th>${axis}</th>`)}\n          <th></th>\n        </tr>\n        ${keys.map((key, k) => {\n          const backwards = k > 0 && key.at <= (keys[k - 1]!.at ?? 0)\n          return html`\n            <tr>\n              <td>\n                <input\n                  type=\"number\"\n                  step=\"0.1\"\n                  min=\"0\"\n                  ?bad=${backwards || key.at < 0}\n                  .value=${live(String(key.at))}\n                  title=${backwards ? i18next.t('figure.text.keys-must-rise') : ''}\n                  @change=${(e: Event) =>\n                    this.setKey(at, j, k, { at: Math.max(0, Number((e.target as HTMLInputElement).value) || 0) })}\n                />\n              </td>\n              ${AXES.map(\n                axis => html`\n                  <td>\n                    <input\n                      type=\"number\"\n                      step=${channel.path === 'scale' ? '0.1' : '1'}\n                      .value=${live(String(key.value[axis]))}\n                      aria-label=${axis}\n                      @change=${(e: Event) =>\n                        this.setKey(at, j, k, {\n                          value: { ...key.value, [axis]: Number((e.target as HTMLInputElement).value) || 0 }\n                        })}\n                    />\n                  </td>\n                `\n              )}\n              <td drop>\n                <button\n                  plain\n                  ?disabled=${keys.length <= 2}\n                  title=${keys.length <= 2 ? i18next.t('figure.text.two-keys-at-least') : i18next.t('figure.button.remove')}\n                  @click=${() => this.removeKey(at, j, k)}\n                >\n                  <md-icon>close</md-icon>\n                </button>\n              </td>\n            </tr>\n          `\n        })}\n      </table>\n\n      ${keys.some((key, k) => k > 0 && key.at <= (keys[k - 1]!.at ?? 0))\n        ? html`<p warn>${i18next.t('figure.text.keys-must-rise')}</p>`\n        : nothing}\n\n      <button @click=${() => this.addKey(at, j)}>\n        <md-icon>add</md-icon>${i18next.t('figure.button.add-key')}\n      </button>\n    `\n  }\n\n  /**\n   * 움직이는 부품 예산.\n   *\n   * **넘어도 막지 않는다.** 움직이는 부품은 저마다 단독 묶음이라 draw call 이 늘고 프레임마다\n   * 갱신이 는다 — 그 대가가 수로 보이면 저작자가 아낀다. 랜드마크 설비 하나는 정교해도 되고,\n   * 그 값이 도면 예산에 드러나면 된다.\n   */\n  private renderBudget(): TemplateResult {\n    const used = this.movingParts\n    const over = used > LIMITS.animatedParts\n\n    return html`\n      <section>\n        <h3>${i18next.t('figure.label.budget-animations')}</h3>\n        <div budget ?over=${over}>\n          <strong>${used}</strong>\n          <span quiet>/ ${LIMITS.animatedParts}</span>\n        </div>\n        <p quiet>${i18next.t('figure.text.animated-parts-cost')}</p>\n        ${over ? html`<p warn>${i18next.t('figure.text.animated-parts-over')}</p>` : nothing}\n      </section>\n    `\n  }\n\n  // ─── 고치기 ───────────────────────────────────────────────────────────────\n\n  /**\n   * 보드에 실어 올려보낸다.\n   *\n   * `animations` 는 도형 전체의 것이므로 부품 편집(`update-part`)이 아니라 `update-board` 로\n   * 간다. 빈 배열은 칸을 지운다 — clip 을 다 지운 도형은 `animations: []` 가 아니라 없는 것이다.\n   */\n  private tell(animations: Clip[]): void {\n    if (!this.board) return\n\n    const board: BoardModel = { ...this.board }\n    if (animations.length === 0) delete board.animations\n    else board.animations = animations\n\n    this.dispatchEvent(new CustomEvent('update-board', { detail: { board }, bubbles: true, composed: true }))\n  }\n\n  private patchClip(at: number, patch: Partial<Clip>): void {\n    this.tell(this.clips.map((clip, i) => (i === at ? { ...clip, ...patch } : clip)))\n  }\n\n  private patchChannel(at: number, j: number, next: Channel): void {\n    const clip = this.clips[at]\n    if (!clip) return\n    this.patchClip(at, { channels: clip.channels.map((channel, i) => (i === j ? next : channel)) })\n  }\n\n  private addClip(): void {\n    const target = this.partNames[0]\n    if (!target) return\n\n    const clip: Clip = {\n      name: freeName(this.clips),\n      drive: 'loop',\n      channels: [{ target, path: 'translation', keys: keysFor('translation') }]\n    }\n\n    this.open = this.clips.length\n    this.tell([...this.clips, clip])\n  }\n\n  private renameClip(at: number, name: string): void {\n    this.patchClip(at, { name: name.trim() })\n  }\n\n  private setDrive(at: number, drive: Clip['drive']): void {\n    this.patchClip(at, { drive })\n  }\n\n  private removeClip(at: number): void {\n    if (this.open >= at) this.open = Math.max(0, this.open - 1)\n    this.tell(this.clips.filter((_, i) => i !== at))\n  }\n\n  private addChannel(at: number): void {\n    const clip = this.clips[at]\n    const target = this.partNames[0]\n    if (!clip || !target) return\n\n    this.patchClip(at, {\n      channels: [...clip.channels, { target, path: 'translation', keys: keysFor('translation') }]\n    })\n  }\n\n  private setChannel(at: number, j: number, patch: Partial<Channel>): void {\n    const channel = this.clips[at]?.channels[j]\n    if (!channel) return\n\n    const next: Channel = { ...channel, ...patch }\n    /* `undefined` 를 얹는 것은 지우는 뜻이다. 남겨 두면 저장 형식에 빈 칸이 실린다. */\n    if ('pivot' in patch && patch.pivot === undefined) delete next.pivot\n    this.patchChannel(at, j, next)\n  }\n\n  /**\n   * 경로를 바꾼다 — **값까지 함께 옮긴다.**\n   *\n   * 옮김·회전의 0 은 「제자리」인데 배율의 0 은 **부품을 지운다.** 경로만 바꾸고 값을 그대로\n   * 두면 저작자는 부품이 사라진 것을 보고 도구가 고장 난 줄 안다. 그래서 옮김·회전 ↔ 배율을\n   * 건널 때 시작값을 그 경로의 제자리로 되돌린다. 시각은 지킨다 — 저작자가 짠 박자다.\n   */\n  private setPath(at: number, j: number, path: ChannelPath): void {\n    const channel = this.clips[at]?.channels[j]\n    if (!channel) return\n\n    const crossing = (channel.path === 'scale') !== (path === 'scale')\n    const next: Channel = {\n      ...channel,\n      path,\n      keys: crossing ? channel.keys.map(key => ({ at: key.at, value: startValue(path) })) : channel.keys\n    }\n    /* 회전이 아니면 회전 중심은 쓰이지 않는다. 남겨 두면 검증이 「쓰이지 않는다」고 알린다. */\n    if (path !== 'rotation') delete next.pivot\n\n    this.patchChannel(at, j, next)\n  }\n\n  private removeChannel(at: number, j: number): void {\n    const clip = this.clips[at]\n    if (!clip) return\n    this.patchClip(at, { channels: clip.channels.filter((_, i) => i !== j) })\n  }\n\n  /** 마지막 키에서 1 초 뒤. 값은 그 키를 그대로 받는다 — 붙여 놓고 고치는 것이 짜기 쉽다. */\n  private addKey(at: number, j: number): void {\n    const channel = this.clips[at]?.channels[j]\n    if (!channel) return\n\n    const last = channel.keys[channel.keys.length - 1]\n    const key: Keyframe = { at: (last?.at ?? 0) + 1, value: { ...(last?.value ?? startValue(channel.path)) } }\n    this.patchChannel(at, j, { ...channel, keys: [...channel.keys, key] })\n  }\n\n  private setKey(at: number, j: number, k: number, patch: Partial<Keyframe>): void {\n    const channel = this.clips[at]?.channels[j]\n    if (!channel) return\n    this.patchChannel(at, j, {\n      ...channel,\n      keys: channel.keys.map((key, i) => (i === k ? { ...key, ...patch } : key))\n    })\n  }\n\n  /** 둘 미만으로 내려가지 않는다 — 단추가 이미 죽어 있지만 밖에서 불릴 수 있다. */\n  private removeKey(at: number, j: number, k: number): void {\n    const channel = this.clips[at]?.channels[j]\n    if (!channel || channel.keys.length <= 2) return\n    this.patchChannel(at, j, { ...channel, keys: channel.keys.filter((_, i) => i !== k) })\n  }\n}\n"]}

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

@@ -176,21 +176,21 @@ let FigureAsk = class FigureAsk extends localize(i18next)(LitElement) {
         return html `
       <form @submit=${(e) => this.submit(e)}>
         <md-icon lead>auto_awesome</md-icon>
-        <span mode>${i18next.t(revising ? 'text.ask-to-revise' : 'text.ask-to-create')}</span>
+        <span mode>${i18next.t(revising ? 'figure.text.ask-to-revise' : 'figure.text.ask-to-create')}</span>
         <input
           ask
           ?disabled=${this.asking}
-          placeholder=${i18next.t(revising ? 'text.ask-revise-example' : 'text.ask-create-example')}
+          placeholder=${i18next.t(revising ? 'figure.text.ask-revise-example' : 'figure.text.ask-create-example')}
         />
-        <label picture ?has=${!!this.picture} title=${i18next.t('text.picture-is-for-proportions')}>
+        <label picture ?has=${!!this.picture} title=${i18next.t('figure.text.picture-is-for-proportions')}>
           <md-icon>image</md-icon>
           ${this.picture
             ? html `<span filename>${this.picture.name}</span>`
-            : i18next.t('button.attach-a-picture')}
+            : i18next.t('figure.button.attach-a-picture')}
           <input type="file" accept="image/*" @change=${(e) => this.pick(e)} />
         </label>
         <button go ?disabled=${this.asking}>
-          ${this.asking ? i18next.t('text.asking') : i18next.t('button.ask')}
+          ${this.asking ? i18next.t('figure.text.asking') : i18next.t('figure.button.ask')}
         </button>
       </form>
 

package/dist-client/modeller/figure-ask.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-ask.js","sourceRoot":"","sources":["../../client/modeller/figure-ask.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport type { FigureSource } from '@hatiolab/figure-model'\nimport { activePalette } from '@hatiolab/things-scene'\n\nimport { proposeFigure } from '../graphql/index.js'\nimport type { FigureProposal } from '../types.js'\n\n/**\n * 말로 시키는 줄.\n *\n * ## 무엇을 시키는지가 화면에 보여야 한다\n *\n * 정본이 있으면 **고치는 것**이고, 없으면 **만드는 것**이다. 같은 칸으로 두 가지를\n * 하면 저작자가 「이게 지금 것을 덮어쓰나」를 매번 걱정한다. 그래서 무엇을 할지\n * 칸 옆에 적어 둔다.\n *\n * ## 후보를 여기서 받지 않는다\n *\n * 이 컴포넌트는 시키고 결과를 **알릴 뿐**이다. 받을지 버릴지는 저작면이 정한다 —\n * 정본은 한 벌이고 그 한 벌을 가진 자리가 정해야 한다.\n *\n * ## 팔레트를 함께 보낸다\n *\n * 서버는 팔레트를 모른다. 그리는 쪽이 어떤 토큰을 풀 수 있는지 아는 유일한 자리다.\n */\n@customElement('figure-ask')\nexport class FigureAsk extends localize(i18next)(LitElement) {\n  static styles = css`\n    /*\n      이 부품은 **자기 줄을 갖지 않는다.**\n\n      전에는 테두리와 여백으로 스스로 한 줄이 되었다. 저작면의 머리줄 바로 아래에 놓이니\n      화면 위쪽이 두 줄이 되었고, 위 줄은 이름을 페이지 제목과 겹쳐 적고 있었다. 캔버스가\n      주인공인 화면에서 그 두 줄은 비싸다.\n\n      이제 머리줄 안에 들어가 그 줄의 남는 폭을 쓴다. 테두리·여백은 담는 줄이 갖는다.\n    */\n    :host {\n      display: flex;\n      flex: 1;\n      min-width: 0;\n      font: var(--label-font, inherit);\n      /*\n        이 줄의 글자 크기를 여기서 정한다.\n\n        안 적어 두면 브라우저 기본 크기(16px)를 물려받는다. 아래 패널들은 전부 12px\n        언저리라 위 두 줄만 커 보이고, 단추가 화면 전체와 따로 논다.\n\n        form 요소(input · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.\n      */\n      font-size: 0.76rem;\n    }\n\n    form {\n      display: flex;\n      flex: 1;\n      min-width: 0;\n      align-items: center;\n      gap: var(--spacing-medium, 8px);\n    }\n\n    md-icon[lead] {\n      --md-icon-size: 18px;\n      flex: none;\n      color: var(--md-sys-color-primary);\n    }\n\n    input[ask] {\n      flex: 1;\n      min-width: 0;\n      padding: 6px 10px;\n      font: var(--input-field-font, inherit);\n      font-size: 0.78rem;\n      color: var(--md-sys-color-on-surface);\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n    }\n    input[ask]:focus {\n      outline: 2px solid var(--md-sys-color-primary);\n      outline-offset: -1px;\n    }\n    input[ask][disabled] {\n      opacity: 0.5;\n    }\n\n    /* 무엇을 시키는 것인지 — 만드나 고치나 */\n    span[mode] {\n      flex: none;\n      font-size: 0.72rem;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n    }\n\n    /* 그림 붙이기. 붙인 것이 있으면 이름을 보여 준다 */\n    label[picture] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      flex: none;\n      padding: 5px 9px;\n      font-size: 0.74rem;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    label[picture]:hover {\n      background-color: var(--md-sys-color-surface-container);\n    }\n    label[picture][has] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n    label[picture] md-icon {\n      --md-icon-size: 16px;\n    }\n    label[picture] input {\n      display: none;\n    }\n    span[filename] {\n      max-width: 8em;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /*\n      채운 파랑 단추를 저장과 나눠 갖지 않는다.\n\n      머리줄의 저장이 이 화면의 주 동작이다. 바로 아래 줄에 같은 파랑 단추가 하나 더\n      있으면 어느 쪽이 주인지 눈이 못 고른다. 이쪽은 톤 단추로 한 단계 내린다.\n    */\n    button[go] {\n      flex: none;\n      padding: 6px 14px;\n      font: var(--label-font, inherit);\n      font-size: 0.76rem;\n      font-weight: 600;\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    button[go]:hover:not([disabled]) {\n      background-color: color-mix(in srgb, var(--md-sys-color-primary) 24%, var(--md-sys-color-primary-container));\n    }\n    button[go][disabled] {\n      opacity: 0.4;\n      cursor: default;\n    }\n\n    /* 못 만들었을 때. 사유를 삼키지 않는다 — 말을 고쳐 다시 시킬 단서다 */\n    div[failed] {\n      display: flex;\n      gap: 6px;\n      padding: 0 var(--spacing-large, 12px) var(--spacing-medium, 8px) var(--spacing-large, 12px);\n      font-size: 0.74rem;\n      line-height: 1.5;\n      color: var(--md-sys-color-error);\n    }\n    div[failed] md-icon {\n      --md-icon-size: 16px;\n      flex: none;\n    }\n  `\n\n  /** 지금 정본. 있으면 고치는 것이고 없으면 만드는 것이다. */\n  @property({ type: Object }) source?: FigureSource\n  /** 새로 만들 때 쓸 타입 이름. */\n  @property({ type: String }) type = ''\n\n  @state() private asking = false\n  @state() private failure = ''\n  @state() private picture?: File\n\n  render() {\n    const revising = !!this.source\n\n    return html`\n      <form @submit=${(e: Event) => this.submit(e)}>\n        <md-icon lead>auto_awesome</md-icon>\n        <span mode>${i18next.t(revising ? 'text.ask-to-revise' : 'text.ask-to-create')}</span>\n        <input\n          ask\n          ?disabled=${this.asking}\n          placeholder=${i18next.t(revising ? 'text.ask-revise-example' : 'text.ask-create-example')}\n        />\n        <label picture ?has=${!!this.picture} title=${i18next.t('text.picture-is-for-proportions')}>\n          <md-icon>image</md-icon>\n          ${this.picture\n            ? html`<span filename>${this.picture.name}</span>`\n            : i18next.t('button.attach-a-picture')}\n          <input type=\"file\" accept=\"image/*\" @change=${(e: Event) => this.pick(e)} />\n        </label>\n        <button go ?disabled=${this.asking}>\n          ${this.asking ? i18next.t('text.asking') : i18next.t('button.ask')}\n        </button>\n      </form>\n\n      ${this.failure\n        ? html`\n            <div failed>\n              <md-icon>error</md-icon>\n              <span>${this.failure}</span>\n            </div>\n          `\n        : nothing}\n    `\n  }\n\n  private pick(e: Event) {\n    const input = e.target as HTMLInputElement\n    this.picture = input.files?.[0]\n  }\n\n  private async submit(e: Event) {\n    e.preventDefault()\n\n    const input = this.renderRoot.querySelector('input[ask]') as HTMLInputElement\n    const prompt = input?.value?.trim()\n    if (!prompt || this.asking) {\n      return\n    }\n\n    this.asking = true\n    this.failure = ''\n\n    try {\n      const proposal = await proposeFigure({\n        prompt,\n        base: this.source ? JSON.stringify(this.source) : undefined,\n        type: this.source ? undefined : this.type,\n        // 그리는 쪽이 풀 수 있는 토큰만 보낸다. 서버는 이 목록 밖의 색을 거절한다.\n        palette: Object.keys(activePalette() as Record<string, string>),\n        image: this.picture\n      })\n\n      this.dispatchEvent(\n        new CustomEvent('proposed', { detail: { proposal }, bubbles: true, composed: true })\n      )\n      input.value = ''\n      this.picture = undefined\n    } catch (err) {\n      // 사유를 그대로 보여 준다. 「실패했습니다」로 뭉개면 말을 어떻게 고칠지 모른다.\n      this.failure = (err as Error).message\n    } finally {\n      this.asking = false\n    }\n  }\n}\n"]}
+{"version":3,"file":"figure-ask.js","sourceRoot":"","sources":["../../client/modeller/figure-ask.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAGnD;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAArD;;QAgJL,uBAAuB;QACK,SAAI,GAAG,EAAE,CAAA;QAEpB,WAAM,GAAG,KAAK,CAAA;QACd,YAAO,GAAG,EAAE,CAAA;IA6E/B,CAAC;aAhOQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2IlB,AA3IY,CA2IZ;IAWD,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAA;QAE9B,OAAO,IAAI,CAAA;sBACO,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;;qBAE7B,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,2BAA2B,CAAC;;;sBAG9E,IAAI,CAAC,MAAM;wBACT,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,gCAAgC,CAAC;;8BAEnF,CAAC,CAAC,IAAI,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,CAAC,wCAAwC,CAAC;;YAE7F,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,kBAAkB,IAAI,CAAC,OAAO,CAAC,IAAI,SAAS;YAClD,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC;wDACD,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;;+BAEnD,IAAI,CAAC,MAAM;YAC9B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;QAIlF,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;sBAGQ,IAAI,CAAC,OAAO;;WAEvB;YACH,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;IAEO,IAAI,CAAC,CAAQ;QACnB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;IACjC,CAAC;IAEO,KAAK,CAAC,MAAM,CAAC,CAAQ;QAC3B,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAqB,CAAA;QAC7E,MAAM,MAAM,GAAG,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;QACnC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAC3B,OAAM;QACR,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QAClB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QAEjB,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,aAAa,CAAC;gBACnC,MAAM;gBACN,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS;gBAC3D,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;gBACzC,8CAA8C;gBAC9C,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,aAAa,EAA4B,CAAC;gBAC/D,KAAK,EAAE,IAAI,CAAC,OAAO;aACpB,CAAC,CAAA;YAEF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACrF,CAAA;YACD,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;YAChB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;QAC1B,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,+CAA+C;YAC/C,IAAI,CAAC,OAAO,GAAI,GAAa,CAAC,OAAO,CAAA;QACvC,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACrB,CAAC;IACH,CAAC;;AAjF2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAsB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uCAAU;AAEpB;IAAhB,KAAK,EAAE;;yCAAuB;AACd;IAAhB,KAAK,EAAE;;0CAAqB;AACZ;IAAhB,KAAK,EAAE;8BAAmB,IAAI;0CAAA;AArJpB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAiOrB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport type { FigureSource } from '@hatiolab/figure-model'\nimport { activePalette } from '@hatiolab/things-scene'\n\nimport { proposeFigure } from '../graphql/index.js'\nimport type { FigureProposal } from '../types.js'\n\n/**\n * 말로 시키는 줄.\n *\n * ## 무엇을 시키는지가 화면에 보여야 한다\n *\n * 정본이 있으면 **고치는 것**이고, 없으면 **만드는 것**이다. 같은 칸으로 두 가지를\n * 하면 저작자가 「이게 지금 것을 덮어쓰나」를 매번 걱정한다. 그래서 무엇을 할지\n * 칸 옆에 적어 둔다.\n *\n * ## 후보를 여기서 받지 않는다\n *\n * 이 컴포넌트는 시키고 결과를 **알릴 뿐**이다. 받을지 버릴지는 저작면이 정한다 —\n * 정본은 한 벌이고 그 한 벌을 가진 자리가 정해야 한다.\n *\n * ## 팔레트를 함께 보낸다\n *\n * 서버는 팔레트를 모른다. 그리는 쪽이 어떤 토큰을 풀 수 있는지 아는 유일한 자리다.\n */\n@customElement('figure-ask')\nexport class FigureAsk extends localize(i18next)(LitElement) {\n  static styles = css`\n    /*\n      이 부품은 **자기 줄을 갖지 않는다.**\n\n      전에는 테두리와 여백으로 스스로 한 줄이 되었다. 저작면의 머리줄 바로 아래에 놓이니\n      화면 위쪽이 두 줄이 되었고, 위 줄은 이름을 페이지 제목과 겹쳐 적고 있었다. 캔버스가\n      주인공인 화면에서 그 두 줄은 비싸다.\n\n      이제 머리줄 안에 들어가 그 줄의 남는 폭을 쓴다. 테두리·여백은 담는 줄이 갖는다.\n    */\n    :host {\n      display: flex;\n      flex: 1;\n      min-width: 0;\n      font: var(--label-font, inherit);\n      /*\n        이 줄의 글자 크기를 여기서 정한다.\n\n        안 적어 두면 브라우저 기본 크기(16px)를 물려받는다. 아래 패널들은 전부 12px\n        언저리라 위 두 줄만 커 보이고, 단추가 화면 전체와 따로 논다.\n\n        form 요소(input · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.\n      */\n      font-size: 0.76rem;\n    }\n\n    form {\n      display: flex;\n      flex: 1;\n      min-width: 0;\n      align-items: center;\n      gap: var(--spacing-medium, 8px);\n    }\n\n    md-icon[lead] {\n      --md-icon-size: 18px;\n      flex: none;\n      color: var(--md-sys-color-primary);\n    }\n\n    input[ask] {\n      flex: 1;\n      min-width: 0;\n      padding: 6px 10px;\n      font: var(--input-field-font, inherit);\n      font-size: 0.78rem;\n      color: var(--md-sys-color-on-surface);\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n    }\n    input[ask]:focus {\n      outline: 2px solid var(--md-sys-color-primary);\n      outline-offset: -1px;\n    }\n    input[ask][disabled] {\n      opacity: 0.5;\n    }\n\n    /* 무엇을 시키는 것인지 — 만드나 고치나 */\n    span[mode] {\n      flex: none;\n      font-size: 0.72rem;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n    }\n\n    /* 그림 붙이기. 붙인 것이 있으면 이름을 보여 준다 */\n    label[picture] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      flex: none;\n      padding: 5px 9px;\n      font-size: 0.74rem;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    label[picture]:hover {\n      background-color: var(--md-sys-color-surface-container);\n    }\n    label[picture][has] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n    label[picture] md-icon {\n      --md-icon-size: 16px;\n    }\n    label[picture] input {\n      display: none;\n    }\n    span[filename] {\n      max-width: 8em;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /*\n      채운 파랑 단추를 저장과 나눠 갖지 않는다.\n\n      머리줄의 저장이 이 화면의 주 동작이다. 바로 아래 줄에 같은 파랑 단추가 하나 더\n      있으면 어느 쪽이 주인지 눈이 못 고른다. 이쪽은 톤 단추로 한 단계 내린다.\n    */\n    button[go] {\n      flex: none;\n      padding: 6px 14px;\n      font: var(--label-font, inherit);\n      font-size: 0.76rem;\n      font-weight: 600;\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    button[go]:hover:not([disabled]) {\n      background-color: color-mix(in srgb, var(--md-sys-color-primary) 24%, var(--md-sys-color-primary-container));\n    }\n    button[go][disabled] {\n      opacity: 0.4;\n      cursor: default;\n    }\n\n    /* 못 만들었을 때. 사유를 삼키지 않는다 — 말을 고쳐 다시 시킬 단서다 */\n    div[failed] {\n      display: flex;\n      gap: 6px;\n      padding: 0 var(--spacing-large, 12px) var(--spacing-medium, 8px) var(--spacing-large, 12px);\n      font-size: 0.74rem;\n      line-height: 1.5;\n      color: var(--md-sys-color-error);\n    }\n    div[failed] md-icon {\n      --md-icon-size: 16px;\n      flex: none;\n    }\n  `\n\n  /** 지금 정본. 있으면 고치는 것이고 없으면 만드는 것이다. */\n  @property({ type: Object }) source?: FigureSource\n  /** 새로 만들 때 쓸 타입 이름. */\n  @property({ type: String }) type = ''\n\n  @state() private asking = false\n  @state() private failure = ''\n  @state() private picture?: File\n\n  render() {\n    const revising = !!this.source\n\n    return html`\n      <form @submit=${(e: Event) => this.submit(e)}>\n        <md-icon lead>auto_awesome</md-icon>\n        <span mode>${i18next.t(revising ? 'figure.text.ask-to-revise' : 'figure.text.ask-to-create')}</span>\n        <input\n          ask\n          ?disabled=${this.asking}\n          placeholder=${i18next.t(revising ? 'figure.text.ask-revise-example' : 'figure.text.ask-create-example')}\n        />\n        <label picture ?has=${!!this.picture} title=${i18next.t('figure.text.picture-is-for-proportions')}>\n          <md-icon>image</md-icon>\n          ${this.picture\n            ? html`<span filename>${this.picture.name}</span>`\n            : i18next.t('figure.button.attach-a-picture')}\n          <input type=\"file\" accept=\"image/*\" @change=${(e: Event) => this.pick(e)} />\n        </label>\n        <button go ?disabled=${this.asking}>\n          ${this.asking ? i18next.t('figure.text.asking') : i18next.t('figure.button.ask')}\n        </button>\n      </form>\n\n      ${this.failure\n        ? html`\n            <div failed>\n              <md-icon>error</md-icon>\n              <span>${this.failure}</span>\n            </div>\n          `\n        : nothing}\n    `\n  }\n\n  private pick(e: Event) {\n    const input = e.target as HTMLInputElement\n    this.picture = input.files?.[0]\n  }\n\n  private async submit(e: Event) {\n    e.preventDefault()\n\n    const input = this.renderRoot.querySelector('input[ask]') as HTMLInputElement\n    const prompt = input?.value?.trim()\n    if (!prompt || this.asking) {\n      return\n    }\n\n    this.asking = true\n    this.failure = ''\n\n    try {\n      const proposal = await proposeFigure({\n        prompt,\n        base: this.source ? JSON.stringify(this.source) : undefined,\n        type: this.source ? undefined : this.type,\n        // 그리는 쪽이 풀 수 있는 토큰만 보낸다. 서버는 이 목록 밖의 색을 거절한다.\n        palette: Object.keys(activePalette() as Record<string, string>),\n        image: this.picture\n      })\n\n      this.dispatchEvent(\n        new CustomEvent('proposed', { detail: { proposal }, bubbles: true, composed: true })\n      )\n      input.value = ''\n      this.picture = undefined\n    } catch (err) {\n      // 사유를 그대로 보여 준다. 「실패했습니다」로 뭉개면 말을 어떻게 고칠지 모른다.\n      this.failure = (err as Error).message\n    } finally {\n      this.asking = false\n    }\n  }\n}\n"]}

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

@@ -216,7 +216,7 @@ let FigureCanvas = class FigureCanvas extends localize(i18next)(LitElement) {
     standUp() {
         const board = this.board;
         if (!board) {
-            this.cannot = i18next.t('text.canvas-appears-once-a-part-exists');
+            this.cannot = i18next.t('figure.text.canvas-appears-once-a-part-exists');
             return;
         }
         const signature = `${board.width}x${board.height}x${board.depth}`;

package/dist-client/modeller/figure-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-canvas.js","sourceRoot":"","sources":["../../client/modeller/figure-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { create, Model } from '@hatiolab/things-scene'\n\nimport { gridStep } from './part-edits.js'\nimport { DEFAULT_VIEW, WORKBENCH } from './figure-view.js'\nimport type { ViewSettings } from './figure-view.js'\nimport type { BoardModel, PartModel } from './figure-source.js'\n\n/**\n * 판의 종이 색 — 거의 흰색.\n *\n * 2D 편집 도구(손잡이 · 안내선 · 선택 테)가 어두운 색으로 그려진다. 종이가 어두우면\n * 그것들이 안 보여 편집을 할 수 없다. 순백이 아닌 것은 판의 가장자리가 작업면과\n * 구별되게 하려는 것이다.\n */\nconst PAPER = '#f4f4f4'\n\n/**\n * 달라진 값만 골라 낸다. 같은 것뿐이면 `null`.\n *\n * 값 비교는 JSON 으로 한다 — 경로(`path`)처럼 배열인 값이 있어서 얕은 비교로는 늘\n * 다르다고 나온다.\n */\nfunction changedKeys(\n  now: Record<string, unknown>,\n  wanted: Record<string, unknown>\n): Record<string, unknown> | null {\n  const diff: Record<string, unknown> = {}\n  let any = false\n\n  for (const [key, value] of Object.entries(wanted)) {\n    const before = now[key]\n    const same =\n      before === value || (before !== undefined && JSON.stringify(before) === JSON.stringify(value))\n    if (!same) {\n      diff[key] = value\n      any = true\n    }\n  }\n\n  return any ? diff : null\n}\n\n/** 씬이 돌려주는 것 중 우리가 쓰는 부분. */\ninterface SceneHandle {\n  dispose?: () => void\n  resize?: () => void\n  /** 모델 전체가 보이게 화면에 맞춘다. 'ratio' 는 비율을 지키며 맞춘다. */\n  fit?: (type?: string) => void\n  /**\n   * **판**이다 — 루트가 아니다.\n   *\n   * `create()` 가 돌려주는 `root` 는 `model-layer` 이고, 그 위에 진짜 루트가 하나 더\n   * 있다. 부품은 판에 붙고, 선택 알림은 루트가 낸다. 둘을 섞으면 알림이 안 온다 —\n   * 실제로 그랬다.\n   */\n  root?: SceneBoard\n}\n\ninterface SceneBoard {\n  invalidate?: () => void\n  /** 보기 설정을 넣는 자리. 씬이 스스로 반응한다. */\n  set?: (patch: Record<string, unknown>) => void\n  /** 3D 카메라를 모델 전체가 보이게 맞춘다. 10.1.4 부터 있다. */\n  fitCameraToModel?: (margin?: number) => void\n  components?: SceneComponent[]\n  selected?: SceneComponent[]\n  app?: unknown\n  addComponent?: (component: unknown) => void\n  on?: (event: string, handler: (...args: unknown[]) => void) => void\n  /** 판 위의 루트. 선택 알림이 여기서 난다. */\n  root?: {\n    selected?: SceneComponent[]\n    on?: (event: string, handler: (...args: unknown[]) => void) => void\n  }\n}\n\ninterface SceneComponent {\n  state: Record<string, unknown>\n  set: (props: Record<string, unknown> | string, value?: unknown) => void\n  on?: (event: string, handler: (...args: unknown[]) => void) => void\n  remove?: () => void\n}\n\n/**\n * 편집 캔버스 — 부품들을 보드 위에 세우고, 여기서 고치게 한다.\n *\n * ## 미리보기가 아니다\n *\n * 한동안 이름이 figure-preview 였다. 원본을 컴파일해 컴포넌트 하나로 세우던 시절에는\n * 정말 보기만 하는 화면이었다. 부품을 컴포넌트로 바꾸면서 편집이 여기서 일어나게 되었다.\n * 부품을 고르고, 2D 로 바꿔 편집하고, 기즈모로 끄는 일이 전부 이 안에서 일어난다.\n * 이름만 남아 있었다.\n *\n * ## 부품이 컴포넌트다\n *\n * 한동안 원본 데이터를 컴파일해 **컴포넌트 하나**로 놓고, 그 안에서 부품을 찾아 다뤘다.\n * 배포용 형태를 편집 화면에 그대로 쓴 것이다. 그래서 어느 부품이 선택됐나 · 무엇을 감쌀까 ·\n * 무엇을 끌까를 전부 따로 뚫어야 했다.\n *\n * 이제 부품 하나가 컴포넌트 하나다. 선택 · 기즈모 · 윤곽선 · 다중 선택 · 되돌리기가\n * 씬의 기본 동작으로 그냥 된다.\n *\n * ## 보드가 곧 기준 상자다\n *\n * 보드의 `width` · `height` · `depth` 가 `FigureSource.base` 다. 부품 좌표를 변환할 때\n * 보드 중심만 빼면 된다 — `figure-source.ts` 가 그 일을 한다.\n *\n * ## 다시 세우지 않는다\n *\n * 부품이 바뀌면 씬을 통째로 다시 세우지 않고 **바뀐 컴포넌트만 고친다.** 다시 세우면\n * 고른 것과 카메라가 날아가서, 숫자 하나 고칠 때마다 화면이 처음으로 돌아간다.\n * 판 크기가 바뀔 때만 다시 세운다 — 판은 씬을 만들 때 정해진다.\n */\n@customElement('figure-canvas')\nexport class FigureCanvas extends localize(i18next)(LitElement) {\n  static styles = css`\n    /*\n      판 바깥을 우리가 칠한다.\n\n      무대에는 셋이 있다 — 판의 면(2D 는 종이, 3D 는 바닥판), 판 바깥, 좌표 바탕.\n      어느 것도 원본 데이터에 저장되지 않는다. 보려고 만든 것이므로 편집하기 좋게 잡는다.\n\n      2D 에는 바깥을 칠하는 사람이 없다. 씬의 2D 는 캔버스를 투명으로 지우고\n      끝이라(layer.ts 의 clearRect), 뒤에 있는 것이 그대로 비친다. 테마 토큰을\n      깔아 두었더니 어두운 데서 까맣게 나왔다.\n\n      3D 하늘과 같은 값을 쓴다. 갈리면 2D 로 갔을 때 바탕색이 바뀐다.\n    */\n    :host {\n      position: relative;\n      display: flex;\n      overflow: hidden;\n      background-color: ${unsafeCSS(WORKBENCH)};\n    }\n\n    /*\n      씬이 이 칸을 자기 것으로 삼으면서 인라인 스타일로 position: relative 를 박는다.\n\n      그러면 우리가 CSS 로 준 position: absolute 가 밀리고, 같이 준 inset: 0 도 함께 뜻을\n      잃는다. relative 인 블록은 상위 배치에서 크기를 받는데, 자식(캔버스)이 전부 절대 배치라\n      내용 폭이 0 이다. 그래서 폭 0 짜리 칸이 되고 캔버스도 폭 0 이 된다.\n\n      화면은 그냥 회색으로 남는다. 게다가 마우스 좌표를 NDC 로 바꿀 때 폭으로 나누므로\n      값이 무한대가 되어 기즈모를 집을 수 없다 — \"기즈모가 안 잡힌다\"의 실제 원인이\n      이것이었다.\n\n      그래서 width 와 height 를 직접 준다. 인라인으로 position 이 무엇으로 바뀌든 칸은\n      부모를 채운다.\n    */\n    div[stage] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    /* 세울 수 없는 상태를 빈 화면으로 두지 않는다 — 왜 안 보이는지 말한다 */\n    div[cannot] {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--spacing-large, 12px);\n      text-align: center;\n      font: var(--label-font, inherit);\n      line-height: 1.6;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      background-color: ${unsafeCSS(WORKBENCH)};\n    }\n  `\n\n  /**\n   * 편집 중인 내용. **씬 모델 그대로 받는다.**\n   *\n   * 한동안 `FigureSource` 로 받아 여기서 변환했다. 그런데 모델러 페이지가 갖고 있는 것이\n   * 이미 씬 모델이므로, 그러면 값을 하나 고칠 때마다 왕복 변환이 한 번씩 일어난다.\n   * 무손실이긴 하지만 하는 일이 없다 — 보드가 곧 보드이고 부품이 곧 컴포넌트다.\n   */\n  @property({ type: Object }) board?: BoardModel\n  /** 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다(`figure-view.ts`). */\n  @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW\n  @property({ type: Array }) parts: PartModel[] = []\n  /** 지금 고른 부품 이름. 목록에서 고른 것을 캔버스에 알린다. */\n  @property({ type: String }) picked?: string\n\n  /**\n   * 보기 전용 — 씬에서 일어난 일을 밖에 알리지 않는다.\n   *\n   * AI 후보를 나란히 세울 때 쓴다. 후보는 아직 편집 대상이 아닌데, 씬은 컴포넌트를\n   * 만들면서 상태를 정리하고 그때 변경 이벤트를 낸다. 그 이벤트가 그대로 올라가면\n   * **후보의 값이 편집 중인 데이터를 덮어쓴다** — 실제로 그랬다. 받지 않기로 한 부품\n   * 위치가 오류보고없이 반영되어 있었고, 후보를 버려도 되돌아오지 않았다.\n   */\n  @property({ type: Boolean }) viewOnly = false\n\n  @query('div[stage]') private stage!: HTMLDivElement\n\n  /** 세울 수 없는 사유. 없으면 세운 것이다. */\n  @state() private cannot = ''\n\n  private scene?: SceneHandle\n\n  /**\n   * 지금 세워진 것을 그림으로 낸다 — 카드에 쓸 썸네일.\n   *\n   * 부르는 쪽은 이 부품을 **숨은 자리에 480×360 으로 하나 더 세워** 부른다\n   * (`figure-thumbnail.ts`). 보이는 저작면을 찍지 않는 이유는, 저작자가 돌려 둔 각도와 확대,\n   * 그리고 창 크기에 따라 달라지는 칸 비율이 그대로 카드에 박히기 때문이다 — 나사를 확대해 보던\n   * 중에 저장하면 그 자산의 얼굴이 나사가 된다. 목록은 견주는 자리라 프레임이 일정해야 한다.\n   *\n   * 못 찍으면 `undefined` 다. 빈 그림을 만들어 「그림이 있다」고 말하지 않는다.\n   */\n  async snapshot(width = 480, height = 360): Promise<string | undefined> {\n    /*\n      **3D 를 낼 수 있을 때만 찍는다.**\n\n      씬의 `toDataURL` 은 **2D 씬을 렌더한다.** 그것으로 찍어 보니 흰 종이 한 장이 나왔다\n      (480×291 · 834바이트 · 순백 — 2D 판의 면인 `fillStyle: PAPER` 이 화면 전체였다). 3D 픽셀은\n      `model-layer.renderer3d`(THREE.WebGLRenderer) 쪽에 있고, 그 렌더러는\n      `preserveDrawingBuffer: false` 라 **그린 직후 같은 task 에서** 읽어야 한다. 그 절차를 아는\n      것은 씬이므로, things-scene 이 그 일을 공개 API 로 내주면 여기서 부른다.\n\n      아직 없으면 `undefined` 다. 흰 종이를 썸네일이라고 저장하면 카드가 「그림이 있다」고 말하면서\n      아무것도 보여 주지 않고, 저장할 때마다 판 번호만 올라간다 — 없는 것보다 나쁘다.\n    */\n    const layer = this.scene?.root as\n      | (SceneBoard & {\n          snapshot3d?: (\n            width?: number,\n            height?: number,\n            type?: string,\n            quality?: number\n          ) => Promise<string | undefined>\n        })\n      | undefined\n\n    if (!layer?.snapshot3d) {\n      return undefined\n    }\n\n    try {\n      /*\n        알파가 필요 없고 카드에 들어갈 그림이라 webp 로 찍는다. png 는 같은 그림이 서너 배 무겁고,\n        그 무게가 도형마다 DB 와 목록 응답에 실린다. webp 를 못 만드는 브라우저는 캔버스가 알아서\n        png 를 돌려준다 — 우리가 판정하지 않는다.\n      */\n      const url = await layer.snapshot3d(width, height, 'image/webp', 0.85)\n      return typeof url === 'string' && url.startsWith('data:') ? url : undefined\n    } catch (e) {\n      /* 원인을 지어내지 않는다. 못 찍은 것이 저장을 막지는 않는다. */\n      console.warn(`[thumbnail] 찍지 못했습니다 — ${(e as Error).message}`)\n      return undefined\n    }\n  }\n  /** 지금 씬이 서 있는 판. 이것이 달라지면 다시 세운다. */\n  private standing?: string\n  /** 칸 크기를 따라가게 지켜본다. 안 지켜보면 0x0 으로 고정된다. */\n  private watcher?: ResizeObserver\n\n  render() {\n    return html`\n      <div stage></div>\n      ${this.cannot ? html`<div cannot>${this.cannot}</div>` : ''}\n    `\n  }\n\n  willUpdate(changed: Map<string, unknown>) {\n    if (!this.hasUpdated) return\n\n    if (changed.has('board') || changed.has('parts')) this.standUp()\n    if (changed.has('view')) this.applyView()\n    if (changed.has('picked')) this.showPicked()\n  }\n\n  firstUpdated() {\n    this.standUp()\n\n    // 씬은 세울 때의 칸 크기를 읽는다. 저작면이 아직 배치되기 전이면 0x0 으로 굳어\n    // **캔버스는 붙었는데 아무것도 안 보이는** 상태가 된다 — 실제로 그렇게 났다.\n    this.watcher = new ResizeObserver(() => this.scene?.resize?.())\n    this.watcher.observe(this)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.watcher?.disconnect()\n    this.watcher = undefined\n    this.teardown()\n  }\n\n  /**\n   * 받은 것을 씬에 반영한다.\n   *\n   * **판이 그대로면 다시 세우지 않는다.** 다시 세우면 고른 것과 카메라가 날아가서,\n   * 숫자 하나 고칠 때마다 화면이 처음으로 돌아간다.\n   */\n  private standUp() {\n    const board = this.board\n    if (!board) {\n      this.cannot = i18next.t('text.canvas-appears-once-a-part-exists')\n      return\n    }\n\n    const signature = `${board.width}x${board.height}x${board.depth}`\n    if (this.scene && this.standing === signature) {\n      this.syncParts()\n      return\n    }\n\n    this.teardown()\n\n    try {\n      this.scene = create({\n        target: this.stage,\n        model: {\n          type: 'model-layer',\n          width: board.width,\n          height: board.height,\n          depth: board.depth,\n          threed: true,\n          environment: 'studio',\n          /*\n            표본을 화면보다 더 쓴다. MSAA 만으로는 실루엣의 계단이 남는다 — 픽셀\n            비율만 올려 보니 눈에 띄게 매끄러워졌다. 저작면은 작은 칸에 자산 하나라\n            그릴 것이 적으니 표본을 더 써도 된다.\n          */\n          pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),\n          /*\n            좌표 바탕을 씬에게 맡긴다. 우리가 만들어 얹었더니 2D 로 갔다 오면\n            사라졌다 — 그때 씬이 통째로 다시 서면서 새 THREE.Scene 을 만들기 때문이다.\n            보드는 이 값을 안 주므로 안 보인다.\n          */\n          ...this.sceneView(),\n          gridStep: gridStep(board),\n          sky: 'color',\n          /*\n            판의 면 — 2D 는 밝은 종이, 3D 는 없음.\n\n            종이는 밝아야 한다: 2D 편집 손잡이와 안내선이 어두운 색이다. 바닥판은\n            없어야 한다: 좌표 모눈과 겹쳐 싸우고 원점 아래쪽을 가린다.\n          */\n          fillStyle: PAPER,\n          components: this.parts.map(part => ({ ...part }))\n        },\n        // **편집 모드**로 만든다. 보드의 3D 모델러가 그 모드에서 카메라 시점 버튼 ·\n        // 기즈모 모드 · 도움말 · 단축키를 띄운다.\n        mode: 1\n      }) as SceneHandle\n\n      this.standing = signature\n      this.watchScene()\n      this.scene.resize?.()\n      /*\n        열자마자 모델 전체가 보이게 맞춘다.\n\n        카메라는 2D 뷰포트에서 만들어진다. 그런데 그 뷰포트의 처음 배율은 컨테이너\n        크기에서 오지 모델 크기에서 오지 않는다. 그래서 가로로 긴 모델(컨베이어가\n        그렇다)을 열면 화면 밖으로 나가 벨트 한 조각만 보였다.\n\n        **다시 세울 때만 맞춘다.** 창 크기가 바뀔 때마다 맞추면 사용자가 돌려 둔 시점과\n        확대가 매번 되돌아간다.\n      */\n      this.scene.fit?.('ratio')\n      /*\n        3D 카메라는 2D 쪽 fit 으로 안 움직인다. 처음 3D 로 설 때 모델 크기를 보지 않기\n        때문이다. 씬이 내주는 자리로 따로 맞춘다.\n\n        `?.` 로 부르는 것은 배포된 판에 아직 없을 수 있어서다. 없으면 2D 만 맞고 3D 는\n        기본 시점으로 선다 — 여기서 카메라 계산을 흉내 내지 않는다.\n      */\n      this.scene.root?.fitCameraToModel?.()\n      this.cannot = ''\n    } catch (e) {\n      // 원인을 지어내지 않는다 — 던진 말을 그대로 보여 준다.\n      this.cannot = (e as Error).message\n    }\n  }\n\n  /**\n   * 지금 판 위에 있는 부품 컴포넌트를 이름으로 찾는다.\n   *\n   * **참조를 들고 있지 않는다.** 전에는 세울 때 한 번 색인해 두고 계속 그 Map 을 썼다.\n   * 그런데 씬은 우리 모르게 판을 다시 세울 때가 있다 — 2D 와 3D 를 오갈 때가 그렇다.\n   * 그러면 Map 안의 것들은 부모가 없는 죽은 객체가 되고, 그 뒤로는\n   *\n   *   - 목록에서 골라도 선택이 안 된다. 루트의 `selected` 게터가 부모 없는 것을\n   *     걸러 내므로 빈 배열이 되고, 테두리도 기즈모도 붙지 않는다\n   *   - 속성을 고쳐도 3D 가 안 따라온다. 죽은 객체에 값을 넣기 때문이다\n   *\n   * 둘 다 오류보고없이 일어난다. 실제로 화면에서 「기즈모가 안 잡힌다」로 나타났다.\n   *\n   * 부품은 많아야 20개다. 매번 순회하는 값이 참조를 갖고 있다가 틀리는 값보다 훨씬 싸다.\n   */\n  private partsOnBoard(): Map<string, SceneComponent> {\n    const found = new Map<string, SceneComponent>()\n    for (const component of this.scene?.root?.components ?? []) {\n      const name = component.state?.name\n      if (typeof name === 'string') found.set(name, component)\n    }\n    return found\n  }\n\n  /**\n   * 보기 설정을 씬이 아는 이름으로 낸다.\n   *\n   * 옮겨 적는 표를 두지 않는다 — `ViewSettings` 의 이름이 곧 `model-layer` 의 상태\n   * 이름이다. 표를 두면 씬이 새 설정을 받아도 이쪽이 모른다.\n   */\n  private sceneView(): Record<string, unknown> {\n    const { grid, gridLabels, floor, environment, skyColor, ...light } = this.view ?? DEFAULT_VIEW\n\n    return { grid, gridLabels, floor, environment, skyColor, ...light }\n  }\n\n  /**\n   * 설정이 바뀌면 **씬에 그대로 넣는다.** 다시 세우지 않는다.\n   *\n   * 씬이 이 값들에 스스로 반응한다(`three-capability` 의 `onchange`) — 조명 · 반사 ·\n   * 바닥 · 좌표 바탕이 그 자리에서 바뀐다. 다시 세우면 고른 것과 카메라가 날아가서,\n   * 밝기 하나 끄는 동안 화면이 계속 처음으로 돌아간다.\n   */\n  private applyView(): void {\n    const board = this.scene?.root\n    if (!board) return\n\n    board.set?.(this.sceneView())\n    board.invalidate?.()\n  }\n\n  /**\n   * 부품 목록을 씬에 맞춘다. **다시 세우지 않고 바뀐 것만 고친다.**\n   *\n   * 다시 세우면 고른 것과 카메라가 날아가서, 숫자 하나 고칠 때마다 화면이 처음으로\n   * 돌아간다.\n   */\n  private syncParts() {\n    const root = this.scene?.root\n    if (!root) return\n\n    const wanted = new Map(this.parts.map(part => [part.name, part]))\n    const standing = this.partsOnBoard()\n\n    // 없어진 것을 제거한다\n    for (const [name, component] of standing) {\n      if (!wanted.has(name)) component.remove?.()\n    }\n\n    for (const part of this.parts) {\n      const found = standing.get(part.name)\n      if (found) {\n        /*\n          **달라진 값만 넣는다.**\n\n          같은 값을 다시 넣어도 씬은 변경 이벤트를 낸다. 그 이벤트가 다시 편집 데이터를\n          만들고, 그것이 다시 여기로 돌아오면 끝없이 반복된다. 기즈모를 끄는 중이라면 그\n          되먹임이 끌기와 싸운다.\n        */\n        const diff = changedKeys(found.state, part as unknown as Record<string, unknown>)\n        if (diff) found.set(diff)\n        continue\n      }\n      // 새 부품. 씬의 공장으로 만들어 판에 붙인다.\n      const made = Model.compile({ ...part }, root.app as never) as SceneComponent | null\n      if (made) root.addComponent?.(made)\n    }\n\n    root.invalidate?.()\n  }\n\n  /**\n   * 씬에서 일어난 일을 밖에 알린다.\n   *\n   * **자리가 아니라 이름으로 알린다.** 목록의 몇 번째인지로 알리면, 알림이 오는 사이에\n   * 목록이 바뀌면 엉뚱한 부품을 가리킨다.\n   */\n  private watchScene() {\n    const board = this.scene?.root\n    const root = board?.root\n    if (!board || !root?.on || this.viewOnly) return\n\n    root.on('selected', (after: unknown) => {\n      const chosen = (after as SceneComponent[] | undefined)?.[0]\n      const name = chosen?.state?.name\n      if (typeof name === 'string') this.tell('pick-part', { name })\n    })\n\n    /*\n      기즈모로 끌거나 2D 에서 옮기면 컴포넌트 상태가 바뀐다. 그것을 그대로 올려 보낸다 —\n      씬이 쓰는 용어 그대로다. 저장 형식으로 옮기는 일은 변환 함수가 한다.\n\n      **바뀜은 판으로 올라오고, 바뀐 컴포넌트는 끝 인자의 `origin` 에 있다.** 자식이\n      `trigger('change', after, before)` 를 하면 씬이 `{ origin, name, deliverer }` 를\n      뒤에 붙여 부모에게 넘긴다. 첫 인자를 컴포넌트로 읽으면 아무 일도 안 일어난다 —\n      실제로 그랬다.\n    */\n    board.on?.('change', (...args: unknown[]) => {\n      const hint = args[args.length - 1] as { origin?: SceneComponent } | undefined\n      const changed = hint?.origin\n      const name = changed?.state?.name\n      if (typeof name !== 'string') return\n\n      const was = this.parts.find(part => part.name === name)\n      if (!was) return\n\n      // 씬 모델 그대로 올려 보낸다. 모델러 페이지가 갖고 있는 것도 씬 모델이라 변환할 것이 없다.\n      this.tell('part-changed', { name, part: { ...was, ...changed!.state } as PartModel })\n    })\n  }\n\n  /** 목록에서 고른 것을 캔버스의 선택에 맞춘다. */\n  private showPicked() {\n    const board = this.scene?.root\n    const root = board?.root\n    if (!board || !root) return\n\n    const component = this.picked ? this.partsOnBoard().get(this.picked) : undefined\n    root.selected = component ? [component] : []\n    board.invalidate?.()\n  }\n\n  private tell(what: string, detail: object) {\n    this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }))\n  }\n\n  private teardown() {\n    this.scene?.dispose?.()\n    this.scene = undefined\n    this.standing = undefined\n  }\n}\n"]}
+{"version":3,"file":"figure-canvas.js","sourceRoot":"","sources":["../../client/modeller/figure-canvas.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAI1D;;;;;;GAMG;AACH,MAAM,KAAK,GAAG,SAAS,CAAA;AAEvB;;;;;GAKG;AACH,SAAS,WAAW,CAClB,GAA4B,EAC5B,MAA+B;IAE/B,MAAM,IAAI,GAA4B,EAAE,CAAA;IACxC,IAAI,GAAG,GAAG,KAAK,CAAA;IAEf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAClD,MAAM,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA;QACvB,MAAM,IAAI,GACR,MAAM,KAAK,KAAK,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;QAChG,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACjB,GAAG,GAAG,IAAI,CAAA;QACZ,CAAC;IACH,CAAC;IAED,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;AAC1B,CAAC;AA2CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAxD;;QAkEL,wDAAwD;QAC5B,SAAI,GAAiB,YAAY,CAAA;QAClC,UAAK,GAAgB,EAAE,CAAA;QAIlD;;;;;;;WAOG;QAC0B,aAAQ,GAAG,KAAK,CAAA;QAI7C,8BAA8B;QACb,WAAM,GAAG,EAAE,CAAA;IA2U9B,CAAC;aA/ZQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;0BAiBK,SAAS,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAoCpB,SAAS,CAAC,SAAS,CAAC;;GAE3C,AAvDY,CAuDZ;IAiCD;;;;;;;;;OASG;IACH,KAAK,CAAC,QAAQ,CAAC,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG;QACtC;;;;;;;;;;;UAWE;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IASb,CAAA;QAEb,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC;YACvB,OAAO,SAAS,CAAA;QAClB,CAAC;QAED,IAAI,CAAC;YACH;;;;cAIE;YACF,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,CAAA;YACrE,OAAO,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAA;QAC7E,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,wCAAwC;YACxC,OAAO,CAAC,IAAI,CAAC,0BAA2B,CAAW,CAAC,OAAO,EAAE,CAAC,CAAA;YAC9D,OAAO,SAAS,CAAA;QAClB,CAAC;IACH,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;KAC5D,CAAA;IACH,CAAC;IAED,UAAU,CAAC,OAA6B;QACtC,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAM;QAE5B,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE,IAAI,CAAC,OAAO,EAAE,CAAA;QAChE,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,SAAS,EAAE,CAAA;QACzC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;YAAE,IAAI,CAAC,UAAU,EAAE,CAAA;IAC9C,CAAC;IAED,YAAY;QACV,IAAI,CAAC,OAAO,EAAE,CAAA;QAEd,iDAAiD;QACjD,gDAAgD;QAChD,IAAI,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;QAC/D,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,CAAA;QAC1B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;QACxB,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED;;;;;OAKG;IACK,OAAO;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACxB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,+CAA+C,CAAC,CAAA;YACxE,OAAM;QACR,CAAC;QAED,MAAM,SAAS,GAAG,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,EAAE,CAAA;QACjE,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC9C,IAAI,CAAC,SAAS,EAAE,CAAA;YAChB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,QAAQ,EAAE,CAAA;QAEf,IAAI,CAAC;YACH,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;gBAClB,MAAM,EAAE,IAAI,CAAC,KAAK;gBAClB,KAAK,EAAE;oBACL,IAAI,EAAE,aAAa;oBACnB,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,MAAM,EAAE,KAAK,CAAC,MAAM;oBACpB,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,MAAM,EAAE,IAAI;oBACZ,WAAW,EAAE,QAAQ;oBACrB;;;;sBAIE;oBACF,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,gBAAgB,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;oBAC3D;;;;sBAIE;oBACF,GAAG,IAAI,CAAC,SAAS,EAAE;oBACnB,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC;oBACzB,GAAG,EAAE,OAAO;oBACZ;;;;;sBAKE;oBACF,SAAS,EAAE,KAAK;oBAChB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;iBAClD;gBACD,iDAAiD;gBACjD,2BAA2B;gBAC3B,IAAI,EAAE,CAAC;aACR,CAAgB,CAAA;YAEjB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;YACzB,IAAI,CAAC,UAAU,EAAE,CAAA;YACjB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,CAAA;YACrB;;;;;;;;;cASE;YACF,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAA;YACzB;;;;;;cAME;YACF,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,CAAA;YACrC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAClB,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,kCAAkC;YAClC,IAAI,CAAC,MAAM,GAAI,CAAW,CAAC,OAAO,CAAA;QACpC,CAAC;IACH,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACK,YAAY;QAClB,MAAM,KAAK,GAAG,IAAI,GAAG,EAA0B,CAAA;QAC/C,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,UAAU,IAAI,EAAE,EAAE,CAAC;YAC3D,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,IAAI,CAAA;YAClC,IAAI,OAAO,IAAI,KAAK,QAAQ;gBAAE,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;QAC1D,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;;OAKG;IACK,SAAS;QACf,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,YAAY,CAAA;QAE9F,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,CAAA;IACrE,CAAC;IAED;;;;;;OAMG;IACK,SAAS;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAA;QAC9B,IAAI,CAAC,KAAK;YAAE,OAAM;QAElB,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAA;QAC7B,KAAK,CAAC,UAAU,EAAE,EAAE,CAAA;IACtB,CAAC;IAED;;;;;OAKG;IACK,SAAS;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAA;QAC7B,IAAI,CAAC,IAAI;YAAE,OAAM;QAEjB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAA;QACjE,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA;QAEpC,cAAc;QACd,KAAK,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,QAAQ,EAAE,CAAC;YACzC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;gBAAE,SAAS,CAAC,MAAM,EAAE,EAAE,CAAA;QAC7C,CAAC;QAED,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACrC,IAAI,KAAK,EAAE,CAAC;gBACV;;;;;;kBAME;gBACF,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,IAA0C,CAAC,CAAA;gBACjF,IAAI,IAAI;oBAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;gBACzB,SAAQ;YACV,CAAC;YACD,4BAA4B;YAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,GAAY,CAA0B,CAAA;YACnF,IAAI,IAAI;gBAAE,IAAI,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;QACrC,CAAC;QAED,IAAI,CAAC,UAAU,EAAE,EAAE,CAAA;IACrB,CAAC;IAED;;;;;OAKG;IACK,UAAU;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAA;QAC9B,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,CAAA;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAM;QAEhD,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,KAAc,EAAE,EAAE;YACrC,MAAM,MAAM,GAAI,KAAsC,EAAE,CAAC,CAAC,CAAC,CAAA;YAC3D,MAAM,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,IAAI,CAAA;YAChC,IAAI,OAAO,IAAI,KAAK,QAAQ;gBAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,CAAA;QAChE,CAAC,CAAC,CAAA;QAEF;;;;;;;;UAQE;QACF,KAAK,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAe,EAAE,EAAE;YAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAA4C,CAAA;YAC7E,MAAM,OAAO,GAAG,IAAI,EAAE,MAAM,CAAA;YAC5B,MAAM,IAAI,GAAG,OAAO,EAAE,KAAK,EAAE,IAAI,CAAA;YACjC,IAAI,OAAO,IAAI,KAAK,QAAQ;gBAAE,OAAM;YAEpC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAA;YACvD,IAAI,CAAC,GAAG;gBAAE,OAAM;YAEhB,uDAAuD;YACvD,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAG,GAAG,EAAE,GAAG,OAAQ,CAAC,KAAK,EAAe,EAAE,CAAC,CAAA;QACvF,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,+BAA+B;IACvB,UAAU;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAA;QAC9B,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,CAAA;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI;YAAE,OAAM;QAE3B,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QAChF,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QAC5C,KAAK,CAAC,UAAU,EAAE,EAAE,CAAA;IACtB,CAAC;IAEO,IAAI,CAAC,IAAY,EAAE,MAAc;QACvC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACtF,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,CAAA;QACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QACtB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;IAC3B,CAAC;;AA9V2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAkC;AAClC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;2CAAwB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4CAAgB;AAUd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;8CAAiB;AAEhB;IAA5B,KAAK,CAAC,YAAY,CAAC;8BAAiB,cAAc;IAEnD,8BAA8B;;2CAFqB;AAGlC;IAAhB,KAAK,EAAE;;4CAAoB;AArFjB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAgaxB","sourcesContent":["import { css, html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { create, Model } from '@hatiolab/things-scene'\n\nimport { gridStep } from './part-edits.js'\nimport { DEFAULT_VIEW, WORKBENCH } from './figure-view.js'\nimport type { ViewSettings } from './figure-view.js'\nimport type { BoardModel, PartModel } from './figure-source.js'\n\n/**\n * 판의 종이 색 — 거의 흰색.\n *\n * 2D 편집 도구(손잡이 · 안내선 · 선택 테)가 어두운 색으로 그려진다. 종이가 어두우면\n * 그것들이 안 보여 편집을 할 수 없다. 순백이 아닌 것은 판의 가장자리가 작업면과\n * 구별되게 하려는 것이다.\n */\nconst PAPER = '#f4f4f4'\n\n/**\n * 달라진 값만 골라 낸다. 같은 것뿐이면 `null`.\n *\n * 값 비교는 JSON 으로 한다 — 경로(`path`)처럼 배열인 값이 있어서 얕은 비교로는 늘\n * 다르다고 나온다.\n */\nfunction changedKeys(\n  now: Record<string, unknown>,\n  wanted: Record<string, unknown>\n): Record<string, unknown> | null {\n  const diff: Record<string, unknown> = {}\n  let any = false\n\n  for (const [key, value] of Object.entries(wanted)) {\n    const before = now[key]\n    const same =\n      before === value || (before !== undefined && JSON.stringify(before) === JSON.stringify(value))\n    if (!same) {\n      diff[key] = value\n      any = true\n    }\n  }\n\n  return any ? diff : null\n}\n\n/** 씬이 돌려주는 것 중 우리가 쓰는 부분. */\ninterface SceneHandle {\n  dispose?: () => void\n  resize?: () => void\n  /** 모델 전체가 보이게 화면에 맞춘다. 'ratio' 는 비율을 지키며 맞춘다. */\n  fit?: (type?: string) => void\n  /**\n   * **판**이다 — 루트가 아니다.\n   *\n   * `create()` 가 돌려주는 `root` 는 `model-layer` 이고, 그 위에 진짜 루트가 하나 더\n   * 있다. 부품은 판에 붙고, 선택 알림은 루트가 낸다. 둘을 섞으면 알림이 안 온다 —\n   * 실제로 그랬다.\n   */\n  root?: SceneBoard\n}\n\ninterface SceneBoard {\n  invalidate?: () => void\n  /** 보기 설정을 넣는 자리. 씬이 스스로 반응한다. */\n  set?: (patch: Record<string, unknown>) => void\n  /** 3D 카메라를 모델 전체가 보이게 맞춘다. 10.1.4 부터 있다. */\n  fitCameraToModel?: (margin?: number) => void\n  components?: SceneComponent[]\n  selected?: SceneComponent[]\n  app?: unknown\n  addComponent?: (component: unknown) => void\n  on?: (event: string, handler: (...args: unknown[]) => void) => void\n  /** 판 위의 루트. 선택 알림이 여기서 난다. */\n  root?: {\n    selected?: SceneComponent[]\n    on?: (event: string, handler: (...args: unknown[]) => void) => void\n  }\n}\n\ninterface SceneComponent {\n  state: Record<string, unknown>\n  set: (props: Record<string, unknown> | string, value?: unknown) => void\n  on?: (event: string, handler: (...args: unknown[]) => void) => void\n  remove?: () => void\n}\n\n/**\n * 편집 캔버스 — 부품들을 보드 위에 세우고, 여기서 고치게 한다.\n *\n * ## 미리보기가 아니다\n *\n * 한동안 이름이 figure-preview 였다. 원본을 컴파일해 컴포넌트 하나로 세우던 시절에는\n * 정말 보기만 하는 화면이었다. 부품을 컴포넌트로 바꾸면서 편집이 여기서 일어나게 되었다.\n * 부품을 고르고, 2D 로 바꿔 편집하고, 기즈모로 끄는 일이 전부 이 안에서 일어난다.\n * 이름만 남아 있었다.\n *\n * ## 부품이 컴포넌트다\n *\n * 한동안 원본 데이터를 컴파일해 **컴포넌트 하나**로 놓고, 그 안에서 부품을 찾아 다뤘다.\n * 배포용 형태를 편집 화면에 그대로 쓴 것이다. 그래서 어느 부품이 선택됐나 · 무엇을 감쌀까 ·\n * 무엇을 끌까를 전부 따로 뚫어야 했다.\n *\n * 이제 부품 하나가 컴포넌트 하나다. 선택 · 기즈모 · 윤곽선 · 다중 선택 · 되돌리기가\n * 씬의 기본 동작으로 그냥 된다.\n *\n * ## 보드가 곧 기준 상자다\n *\n * 보드의 `width` · `height` · `depth` 가 `FigureSource.base` 다. 부품 좌표를 변환할 때\n * 보드 중심만 빼면 된다 — `figure-source.ts` 가 그 일을 한다.\n *\n * ## 다시 세우지 않는다\n *\n * 부품이 바뀌면 씬을 통째로 다시 세우지 않고 **바뀐 컴포넌트만 고친다.** 다시 세우면\n * 고른 것과 카메라가 날아가서, 숫자 하나 고칠 때마다 화면이 처음으로 돌아간다.\n * 판 크기가 바뀔 때만 다시 세운다 — 판은 씬을 만들 때 정해진다.\n */\n@customElement('figure-canvas')\nexport class FigureCanvas extends localize(i18next)(LitElement) {\n  static styles = css`\n    /*\n      판 바깥을 우리가 칠한다.\n\n      무대에는 셋이 있다 — 판의 면(2D 는 종이, 3D 는 바닥판), 판 바깥, 좌표 바탕.\n      어느 것도 원본 데이터에 저장되지 않는다. 보려고 만든 것이므로 편집하기 좋게 잡는다.\n\n      2D 에는 바깥을 칠하는 사람이 없다. 씬의 2D 는 캔버스를 투명으로 지우고\n      끝이라(layer.ts 의 clearRect), 뒤에 있는 것이 그대로 비친다. 테마 토큰을\n      깔아 두었더니 어두운 데서 까맣게 나왔다.\n\n      3D 하늘과 같은 값을 쓴다. 갈리면 2D 로 갔을 때 바탕색이 바뀐다.\n    */\n    :host {\n      position: relative;\n      display: flex;\n      overflow: hidden;\n      background-color: ${unsafeCSS(WORKBENCH)};\n    }\n\n    /*\n      씬이 이 칸을 자기 것으로 삼으면서 인라인 스타일로 position: relative 를 박는다.\n\n      그러면 우리가 CSS 로 준 position: absolute 가 밀리고, 같이 준 inset: 0 도 함께 뜻을\n      잃는다. relative 인 블록은 상위 배치에서 크기를 받는데, 자식(캔버스)이 전부 절대 배치라\n      내용 폭이 0 이다. 그래서 폭 0 짜리 칸이 되고 캔버스도 폭 0 이 된다.\n\n      화면은 그냥 회색으로 남는다. 게다가 마우스 좌표를 NDC 로 바꿀 때 폭으로 나누므로\n      값이 무한대가 되어 기즈모를 집을 수 없다 — \"기즈모가 안 잡힌다\"의 실제 원인이\n      이것이었다.\n\n      그래서 width 와 height 를 직접 준다. 인라인으로 position 이 무엇으로 바뀌든 칸은\n      부모를 채운다.\n    */\n    div[stage] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    /* 세울 수 없는 상태를 빈 화면으로 두지 않는다 — 왜 안 보이는지 말한다 */\n    div[cannot] {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--spacing-large, 12px);\n      text-align: center;\n      font: var(--label-font, inherit);\n      line-height: 1.6;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      background-color: ${unsafeCSS(WORKBENCH)};\n    }\n  `\n\n  /**\n   * 편집 중인 내용. **씬 모델 그대로 받는다.**\n   *\n   * 한동안 `FigureSource` 로 받아 여기서 변환했다. 그런데 모델러 페이지가 갖고 있는 것이\n   * 이미 씬 모델이므로, 그러면 값을 하나 고칠 때마다 왕복 변환이 한 번씩 일어난다.\n   * 무손실이긴 하지만 하는 일이 없다 — 보드가 곧 보드이고 부품이 곧 컴포넌트다.\n   */\n  @property({ type: Object }) board?: BoardModel\n  /** 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다(`figure-view.ts`). */\n  @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW\n  @property({ type: Array }) parts: PartModel[] = []\n  /** 지금 고른 부품 이름. 목록에서 고른 것을 캔버스에 알린다. */\n  @property({ type: String }) picked?: string\n\n  /**\n   * 보기 전용 — 씬에서 일어난 일을 밖에 알리지 않는다.\n   *\n   * AI 후보를 나란히 세울 때 쓴다. 후보는 아직 편집 대상이 아닌데, 씬은 컴포넌트를\n   * 만들면서 상태를 정리하고 그때 변경 이벤트를 낸다. 그 이벤트가 그대로 올라가면\n   * **후보의 값이 편집 중인 데이터를 덮어쓴다** — 실제로 그랬다. 받지 않기로 한 부품\n   * 위치가 오류보고없이 반영되어 있었고, 후보를 버려도 되돌아오지 않았다.\n   */\n  @property({ type: Boolean }) viewOnly = false\n\n  @query('div[stage]') private stage!: HTMLDivElement\n\n  /** 세울 수 없는 사유. 없으면 세운 것이다. */\n  @state() private cannot = ''\n\n  private scene?: SceneHandle\n\n  /**\n   * 지금 세워진 것을 그림으로 낸다 — 카드에 쓸 썸네일.\n   *\n   * 부르는 쪽은 이 부품을 **숨은 자리에 480×360 으로 하나 더 세워** 부른다\n   * (`figure-thumbnail.ts`). 보이는 저작면을 찍지 않는 이유는, 저작자가 돌려 둔 각도와 확대,\n   * 그리고 창 크기에 따라 달라지는 칸 비율이 그대로 카드에 박히기 때문이다 — 나사를 확대해 보던\n   * 중에 저장하면 그 자산의 얼굴이 나사가 된다. 목록은 견주는 자리라 프레임이 일정해야 한다.\n   *\n   * 못 찍으면 `undefined` 다. 빈 그림을 만들어 「그림이 있다」고 말하지 않는다.\n   */\n  async snapshot(width = 480, height = 360): Promise<string | undefined> {\n    /*\n      **3D 를 낼 수 있을 때만 찍는다.**\n\n      씬의 `toDataURL` 은 **2D 씬을 렌더한다.** 그것으로 찍어 보니 흰 종이 한 장이 나왔다\n      (480×291 · 834바이트 · 순백 — 2D 판의 면인 `fillStyle: PAPER` 이 화면 전체였다). 3D 픽셀은\n      `model-layer.renderer3d`(THREE.WebGLRenderer) 쪽에 있고, 그 렌더러는\n      `preserveDrawingBuffer: false` 라 **그린 직후 같은 task 에서** 읽어야 한다. 그 절차를 아는\n      것은 씬이므로, things-scene 이 그 일을 공개 API 로 내주면 여기서 부른다.\n\n      아직 없으면 `undefined` 다. 흰 종이를 썸네일이라고 저장하면 카드가 「그림이 있다」고 말하면서\n      아무것도 보여 주지 않고, 저장할 때마다 판 번호만 올라간다 — 없는 것보다 나쁘다.\n    */\n    const layer = this.scene?.root as\n      | (SceneBoard & {\n          snapshot3d?: (\n            width?: number,\n            height?: number,\n            type?: string,\n            quality?: number\n          ) => Promise<string | undefined>\n        })\n      | undefined\n\n    if (!layer?.snapshot3d) {\n      return undefined\n    }\n\n    try {\n      /*\n        알파가 필요 없고 카드에 들어갈 그림이라 webp 로 찍는다. png 는 같은 그림이 서너 배 무겁고,\n        그 무게가 도형마다 DB 와 목록 응답에 실린다. webp 를 못 만드는 브라우저는 캔버스가 알아서\n        png 를 돌려준다 — 우리가 판정하지 않는다.\n      */\n      const url = await layer.snapshot3d(width, height, 'image/webp', 0.85)\n      return typeof url === 'string' && url.startsWith('data:') ? url : undefined\n    } catch (e) {\n      /* 원인을 지어내지 않는다. 못 찍은 것이 저장을 막지는 않는다. */\n      console.warn(`[thumbnail] 찍지 못했습니다 — ${(e as Error).message}`)\n      return undefined\n    }\n  }\n  /** 지금 씬이 서 있는 판. 이것이 달라지면 다시 세운다. */\n  private standing?: string\n  /** 칸 크기를 따라가게 지켜본다. 안 지켜보면 0x0 으로 고정된다. */\n  private watcher?: ResizeObserver\n\n  render() {\n    return html`\n      <div stage></div>\n      ${this.cannot ? html`<div cannot>${this.cannot}</div>` : ''}\n    `\n  }\n\n  willUpdate(changed: Map<string, unknown>) {\n    if (!this.hasUpdated) return\n\n    if (changed.has('board') || changed.has('parts')) this.standUp()\n    if (changed.has('view')) this.applyView()\n    if (changed.has('picked')) this.showPicked()\n  }\n\n  firstUpdated() {\n    this.standUp()\n\n    // 씬은 세울 때의 칸 크기를 읽는다. 저작면이 아직 배치되기 전이면 0x0 으로 굳어\n    // **캔버스는 붙었는데 아무것도 안 보이는** 상태가 된다 — 실제로 그렇게 났다.\n    this.watcher = new ResizeObserver(() => this.scene?.resize?.())\n    this.watcher.observe(this)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.watcher?.disconnect()\n    this.watcher = undefined\n    this.teardown()\n  }\n\n  /**\n   * 받은 것을 씬에 반영한다.\n   *\n   * **판이 그대로면 다시 세우지 않는다.** 다시 세우면 고른 것과 카메라가 날아가서,\n   * 숫자 하나 고칠 때마다 화면이 처음으로 돌아간다.\n   */\n  private standUp() {\n    const board = this.board\n    if (!board) {\n      this.cannot = i18next.t('figure.text.canvas-appears-once-a-part-exists')\n      return\n    }\n\n    const signature = `${board.width}x${board.height}x${board.depth}`\n    if (this.scene && this.standing === signature) {\n      this.syncParts()\n      return\n    }\n\n    this.teardown()\n\n    try {\n      this.scene = create({\n        target: this.stage,\n        model: {\n          type: 'model-layer',\n          width: board.width,\n          height: board.height,\n          depth: board.depth,\n          threed: true,\n          environment: 'studio',\n          /*\n            표본을 화면보다 더 쓴다. MSAA 만으로는 실루엣의 계단이 남는다 — 픽셀\n            비율만 올려 보니 눈에 띄게 매끄러워졌다. 저작면은 작은 칸에 자산 하나라\n            그릴 것이 적으니 표본을 더 써도 된다.\n          */\n          pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),\n          /*\n            좌표 바탕을 씬에게 맡긴다. 우리가 만들어 얹었더니 2D 로 갔다 오면\n            사라졌다 — 그때 씬이 통째로 다시 서면서 새 THREE.Scene 을 만들기 때문이다.\n            보드는 이 값을 안 주므로 안 보인다.\n          */\n          ...this.sceneView(),\n          gridStep: gridStep(board),\n          sky: 'color',\n          /*\n            판의 면 — 2D 는 밝은 종이, 3D 는 없음.\n\n            종이는 밝아야 한다: 2D 편집 손잡이와 안내선이 어두운 색이다. 바닥판은\n            없어야 한다: 좌표 모눈과 겹쳐 싸우고 원점 아래쪽을 가린다.\n          */\n          fillStyle: PAPER,\n          components: this.parts.map(part => ({ ...part }))\n        },\n        // **편집 모드**로 만든다. 보드의 3D 모델러가 그 모드에서 카메라 시점 버튼 ·\n        // 기즈모 모드 · 도움말 · 단축키를 띄운다.\n        mode: 1\n      }) as SceneHandle\n\n      this.standing = signature\n      this.watchScene()\n      this.scene.resize?.()\n      /*\n        열자마자 모델 전체가 보이게 맞춘다.\n\n        카메라는 2D 뷰포트에서 만들어진다. 그런데 그 뷰포트의 처음 배율은 컨테이너\n        크기에서 오지 모델 크기에서 오지 않는다. 그래서 가로로 긴 모델(컨베이어가\n        그렇다)을 열면 화면 밖으로 나가 벨트 한 조각만 보였다.\n\n        **다시 세울 때만 맞춘다.** 창 크기가 바뀔 때마다 맞추면 사용자가 돌려 둔 시점과\n        확대가 매번 되돌아간다.\n      */\n      this.scene.fit?.('ratio')\n      /*\n        3D 카메라는 2D 쪽 fit 으로 안 움직인다. 처음 3D 로 설 때 모델 크기를 보지 않기\n        때문이다. 씬이 내주는 자리로 따로 맞춘다.\n\n        `?.` 로 부르는 것은 배포된 판에 아직 없을 수 있어서다. 없으면 2D 만 맞고 3D 는\n        기본 시점으로 선다 — 여기서 카메라 계산을 흉내 내지 않는다.\n      */\n      this.scene.root?.fitCameraToModel?.()\n      this.cannot = ''\n    } catch (e) {\n      // 원인을 지어내지 않는다 — 던진 말을 그대로 보여 준다.\n      this.cannot = (e as Error).message\n    }\n  }\n\n  /**\n   * 지금 판 위에 있는 부품 컴포넌트를 이름으로 찾는다.\n   *\n   * **참조를 들고 있지 않는다.** 전에는 세울 때 한 번 색인해 두고 계속 그 Map 을 썼다.\n   * 그런데 씬은 우리 모르게 판을 다시 세울 때가 있다 — 2D 와 3D 를 오갈 때가 그렇다.\n   * 그러면 Map 안의 것들은 부모가 없는 죽은 객체가 되고, 그 뒤로는\n   *\n   *   - 목록에서 골라도 선택이 안 된다. 루트의 `selected` 게터가 부모 없는 것을\n   *     걸러 내므로 빈 배열이 되고, 테두리도 기즈모도 붙지 않는다\n   *   - 속성을 고쳐도 3D 가 안 따라온다. 죽은 객체에 값을 넣기 때문이다\n   *\n   * 둘 다 오류보고없이 일어난다. 실제로 화면에서 「기즈모가 안 잡힌다」로 나타났다.\n   *\n   * 부품은 많아야 20개다. 매번 순회하는 값이 참조를 갖고 있다가 틀리는 값보다 훨씬 싸다.\n   */\n  private partsOnBoard(): Map<string, SceneComponent> {\n    const found = new Map<string, SceneComponent>()\n    for (const component of this.scene?.root?.components ?? []) {\n      const name = component.state?.name\n      if (typeof name === 'string') found.set(name, component)\n    }\n    return found\n  }\n\n  /**\n   * 보기 설정을 씬이 아는 이름으로 낸다.\n   *\n   * 옮겨 적는 표를 두지 않는다 — `ViewSettings` 의 이름이 곧 `model-layer` 의 상태\n   * 이름이다. 표를 두면 씬이 새 설정을 받아도 이쪽이 모른다.\n   */\n  private sceneView(): Record<string, unknown> {\n    const { grid, gridLabels, floor, environment, skyColor, ...light } = this.view ?? DEFAULT_VIEW\n\n    return { grid, gridLabels, floor, environment, skyColor, ...light }\n  }\n\n  /**\n   * 설정이 바뀌면 **씬에 그대로 넣는다.** 다시 세우지 않는다.\n   *\n   * 씬이 이 값들에 스스로 반응한다(`three-capability` 의 `onchange`) — 조명 · 반사 ·\n   * 바닥 · 좌표 바탕이 그 자리에서 바뀐다. 다시 세우면 고른 것과 카메라가 날아가서,\n   * 밝기 하나 끄는 동안 화면이 계속 처음으로 돌아간다.\n   */\n  private applyView(): void {\n    const board = this.scene?.root\n    if (!board) return\n\n    board.set?.(this.sceneView())\n    board.invalidate?.()\n  }\n\n  /**\n   * 부품 목록을 씬에 맞춘다. **다시 세우지 않고 바뀐 것만 고친다.**\n   *\n   * 다시 세우면 고른 것과 카메라가 날아가서, 숫자 하나 고칠 때마다 화면이 처음으로\n   * 돌아간다.\n   */\n  private syncParts() {\n    const root = this.scene?.root\n    if (!root) return\n\n    const wanted = new Map(this.parts.map(part => [part.name, part]))\n    const standing = this.partsOnBoard()\n\n    // 없어진 것을 제거한다\n    for (const [name, component] of standing) {\n      if (!wanted.has(name)) component.remove?.()\n    }\n\n    for (const part of this.parts) {\n      const found = standing.get(part.name)\n      if (found) {\n        /*\n          **달라진 값만 넣는다.**\n\n          같은 값을 다시 넣어도 씬은 변경 이벤트를 낸다. 그 이벤트가 다시 편집 데이터를\n          만들고, 그것이 다시 여기로 돌아오면 끝없이 반복된다. 기즈모를 끄는 중이라면 그\n          되먹임이 끌기와 싸운다.\n        */\n        const diff = changedKeys(found.state, part as unknown as Record<string, unknown>)\n        if (diff) found.set(diff)\n        continue\n      }\n      // 새 부품. 씬의 공장으로 만들어 판에 붙인다.\n      const made = Model.compile({ ...part }, root.app as never) as SceneComponent | null\n      if (made) root.addComponent?.(made)\n    }\n\n    root.invalidate?.()\n  }\n\n  /**\n   * 씬에서 일어난 일을 밖에 알린다.\n   *\n   * **자리가 아니라 이름으로 알린다.** 목록의 몇 번째인지로 알리면, 알림이 오는 사이에\n   * 목록이 바뀌면 엉뚱한 부품을 가리킨다.\n   */\n  private watchScene() {\n    const board = this.scene?.root\n    const root = board?.root\n    if (!board || !root?.on || this.viewOnly) return\n\n    root.on('selected', (after: unknown) => {\n      const chosen = (after as SceneComponent[] | undefined)?.[0]\n      const name = chosen?.state?.name\n      if (typeof name === 'string') this.tell('pick-part', { name })\n    })\n\n    /*\n      기즈모로 끌거나 2D 에서 옮기면 컴포넌트 상태가 바뀐다. 그것을 그대로 올려 보낸다 —\n      씬이 쓰는 용어 그대로다. 저장 형식으로 옮기는 일은 변환 함수가 한다.\n\n      **바뀜은 판으로 올라오고, 바뀐 컴포넌트는 끝 인자의 `origin` 에 있다.** 자식이\n      `trigger('change', after, before)` 를 하면 씬이 `{ origin, name, deliverer }` 를\n      뒤에 붙여 부모에게 넘긴다. 첫 인자를 컴포넌트로 읽으면 아무 일도 안 일어난다 —\n      실제로 그랬다.\n    */\n    board.on?.('change', (...args: unknown[]) => {\n      const hint = args[args.length - 1] as { origin?: SceneComponent } | undefined\n      const changed = hint?.origin\n      const name = changed?.state?.name\n      if (typeof name !== 'string') return\n\n      const was = this.parts.find(part => part.name === name)\n      if (!was) return\n\n      // 씬 모델 그대로 올려 보낸다. 모델러 페이지가 갖고 있는 것도 씬 모델이라 변환할 것이 없다.\n      this.tell('part-changed', { name, part: { ...was, ...changed!.state } as PartModel })\n    })\n  }\n\n  /** 목록에서 고른 것을 캔버스의 선택에 맞춘다. */\n  private showPicked() {\n    const board = this.scene?.root\n    const root = board?.root\n    if (!board || !root) return\n\n    const component = this.picked ? this.partsOnBoard().get(this.picked) : undefined\n    root.selected = component ? [component] : []\n    board.invalidate?.()\n  }\n\n  private tell(what: string, detail: object) {\n    this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }))\n  }\n\n  private teardown() {\n    this.scene?.dispose?.()\n    this.scene = undefined\n    this.standing = undefined\n  }\n}\n"]}

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

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+import type { BoardModel, PartModel } from './figure-source.js';
+declare const FigureCapabilities_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class FigureCapabilities extends FigureCapabilities_base {
+    static styles: import("lit").CSSResult[];
+    board?: BoardModel;
+    parts: PartModel[];
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 자리와 문 — **여기서는 읽기만 한다.**
+     *
+     * 지정은 속성 탭에서 한다. 부품을 고치는 곳이 한 군데여야 하기 때문이다 — 목록을 여기 또
+     * 두면 같은 부품을 두 화면에서 고치게 되고, 저작자는 어느 쪽이 이기는지 매번 생각해야 한다.
+     *
+     * 그래도 요약은 남긴다. 「어느 부품이 자리인가」는 부품을 하나씩 눌러 보며 알아낼 일이
+     * 아니다 — 자리는 그려지지 않으므로 화면을 봐서는 영영 못 찾는다.
+     */
+    private renderAnchors;
+    /** 지정된 부품 한 줄. 누르면 그 부품이 골라진다 — 고치는 자리는 속성 탭이다. */
+    private renderMarked;
+    /** 이 부품을 고르게 한다. 부품 목록에서 누른 것과 같은 알림이다. */
+    private pick;
+    /**
+     * 사다리 한 칸.
+     *
+     * `checked` 를 `live()` 로 묶는다. 그냥 두면 Lit 이 **마지막으로 그린 값**과 견주므로,
+     * 브라우저가 DOM 을 바꿨는데 모델은 안 바뀐 경우 되돌리지 않는다. 실제로 그랬다 — 고르는
+     * 도중 도형이 다시 실렸더니 점은 「흐른다」에 있고 강조 상자는 「그리기만 한다」에 있었다.
+     * 화면이 모델과 다른 말을 하는 상태다. `live()` 는 **지금 DOM 의 값**과 견준다.
+     */
+    private rung;
+    /**
+     * 사다리를 내리면 자리도 함께 거둔다.
+     *
+     * 능력을 「그리기만 한다」로 되돌려 놓고 부품에 자리 표시가 남아 있으면, 형식은 자리를
+     * 그대로 실어 보내는데 씬은 그것을 쓸 클래스가 없다. **선언은 있고 길이 없는** 상태가
+     * 되고, 그 도형은 멀쩡해 보이면서 아무것도 못 받는다.
+     */
+    private setRung;
+    private tellBoard;
+}
+export {};