@things-factory/figure-ui 10.1.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-parts.js","sourceRoot":"","sources":["../../client/modeller/figure-parts.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 } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { DETAIL_LEVELS, PART_LIMIT, PRIMITIVE_KINDS } from '@hatiolab/figure-model'\nimport type { DetailLevel, PrimitiveKind } from '@hatiolab/figure-model'\n\nimport type { PartModel } from './figure-source.js'\n\n/** 도형마다의 아이콘. Material Symbols 이름이다. */\nconst SHAPE_ICON: Record<PrimitiveKind, string> = {\n  cube: 'deployed_code',\n  wall: 'rectangle',\n  cylinder: 'database',\n  sphere: 'circle',\n  rect: 'crop_square',\n  polygon: 'pentagon'\n}\n\n/**\n * 도형 팔레트와 부품 목록.\n *\n * ## 팔레트를 목록 위에 둔다\n *\n * 처음 온 사람은 「무엇을 놓을 수 있나」를 먼저 알아야 한다. 빈 목록 아래에 팔레트를\n * 두면 아무것도 없는 화면에서 다음 동작이 안 보인다.\n *\n * ## 한도를 미리 보여 준다\n *\n * 부품 수 한도는 디테일 등급이 정한다(`PART_LIMIT`). 넘긴 뒤에 판정 패널이\n * 나무라는 것보다, **넣기 전에 몇 개 남았는지** 보이는 것이 낫다.\n *\n * ## 고치지 않는다\n *\n * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다 — 정본 한 벌을\n * 저작면이 갖고, 거기서만 바뀐다.\n */\n@customElement('figure-parts')\nexport class FigureParts 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: hidden;\n        background-color: var(--md-sys-color-surface-container-lowest);\n        border-right: 1px solid var(--md-sys-color-outline-variant);\n        color: var(--md-sys-color-on-surface);\n        font: var(--label-font, inherit);\n        /*\n          이 패널의 본문 크기를 여기서 한 번 정한다.\n\n          전에는 규칙마다 따로 적었다. 그러면 빠뜨린 규칙이 본문 기본 크기(1rem)를\n          물려받아 그 줄만 제목처럼 커진다. 오류가 아니라서 화면을 띄워 봐야 안다.\n          이 파일에서만 두 번 났다.\n\n          form 요소(input · select · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.\n          그것 말고는 여기 값을 따른다.\n        */\n        font-size: 0.76rem;\n      }\n\n      section {\n        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      }\n      section[list] {\n        flex: 1;\n        min-height: 0;\n        overflow-y: auto;\n      }\n      h3 {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 6px;\n        margin: 0 0 6px 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        부품 수와 한도.\n\n        전에는 이 숫자가 「도형」 절 제목에 붙어 있었다. 부품 수인데 도형 옆에 있으니\n        「도형 8종 중 2종」으로 읽힌다 — 실제로 그렇게 읽혔다. 세는 대상이 있는 절로\n        옮기고, 한도가 어디서 나온 값인지(디테일 등급)를 함께 적는다.\n      */\n      span[room] {\n        font-size: 0.7rem;\n        font-weight: 400;\n        letter-spacing: 0;\n        text-transform: none;\n      }\n      span[room][full] {\n        color: var(--md-sys-color-error);\n      }\n\n      /* ── 팔레트 ─────────────────────────────────────────────────────── */\n      div[palette] {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 4px;\n      }\n      button[shape] {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 2px;\n        padding: 7px 2px 5px 2px;\n        font: var(--label-font, inherit);\n        font-size: 0.66rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      button[shape]:hover:not([disabled]) {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n        border-color: transparent;\n      }\n      button[shape][disabled] {\n        opacity: 0.35;\n        cursor: default;\n      }\n      button[shape] md-icon {\n        --md-icon-size: 20px;\n      }\n\n      /* ── 부품 목록 ──────────────────────────────────────────────────── */\n      ol {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      li {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 4px 6px;\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      li:hover {\n        background-color: var(--md-sys-color-surface-container);\n      }\n      li[selected] {\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n      }\n      li md-icon {\n        --md-icon-size: 16px;\n        flex: none;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n\n      /*\n        숨김 단추.\n\n        고른 줄에서만 보이는 조작(div[ops])과 달리 **늘 자리를 차지한다.** 무엇이 숨겨져\n        있는지는 목록을 훑을 때 한눈에 보여야 한다 — 눌러 봐야 알면 숨겨 둔 것을 잊는다.\n        다만 켜지지 않은 눈은 줄에 마우스를 올렸을 때만 보인다. 여덟 개 줄에 회색 눈이\n        여덟 개 떠 있으면 목록이 시끄럽다.\n      */\n      /* 머리줄의 것은 늘 보인다 — 줄에 마우스를 올려야 나타나는 것이 아니다 */\n      button[eye][all] {\n        margin-left: auto;\n        opacity: 0.75;\n      }\n      button[eye][all]:hover {\n        opacity: 1;\n      }\n      button[eye] {\n        display: flex;\n        flex: none;\n        padding: 1px;\n        color: inherit;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n        opacity: 0;\n      }\n      li:hover button[eye],\n      li[selected] button[eye],\n      button[eye][off] {\n        opacity: 1;\n      }\n      button[eye][off] {\n        color: var(--md-sys-color-tertiary);\n      }\n      button[eye] md-icon {\n        --md-icon-size: 15px;\n        color: inherit;\n      }\n\n      /* 숨긴 줄은 목록에서도 옅게 — 미리보기에서 faint 로 보이는 것과 같은 뜻이어야 한다 */\n      li[off] span[label],\n      li[off] > md-icon {\n        opacity: 0.45;\n      }\n      li[selected] md-icon {\n        color: inherit;\n      }\n      span[label] {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-size: 0.78rem;\n      }\n\n      /* 조작은 고른 줄에서만 보인다 — 늘 보이면 목록이 시끄럽다 */\n      div[ops] {\n        display: none;\n        gap: 1px;\n      }\n      li[selected] div[ops] {\n        display: flex;\n      }\n      div[ops] button {\n        display: flex;\n        padding: 2px;\n        color: inherit;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      div[ops] button:hover:not([disabled]) {\n        background-color: var(--md-sys-color-surface-container-lowest);\n      }\n      div[ops] button[disabled] {\n        opacity: 0.3;\n        cursor: default;\n      }\n      div[ops] md-icon {\n        --md-icon-size: 15px;\n        color: inherit;\n      }\n\n      /*\n        디테일 등급 선택.\n\n        전에는 등급이 \"16 / 20 · L 등급\" 안의 글자 하나로만 있었다. S·M·L 이 무엇인지\n        어디에도 없었고, 한도를 다 쓰면 \"등급을 올리세요\" 라고 해 놓고 올릴 칸이 없었다.\n\n        부품 목록 위에 둔다. 등급이 정하는 것이 바로 아래 목록의 한도이고, 팔레트가\n        잠기는 것도 이 값 때문이다. 결과가 보이는 자리에서 고치게 한다.\n      */\n      div[level] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        margin: 0 0 7px 0;\n      }\n      div[level] label {\n        flex: none;\n        margin: 0;\n        font-size: 0.68rem;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      div[level] select {\n        flex: 1;\n        min-width: 0;\n        padding: 3px 5px;\n        font: var(--input-field-font, inherit);\n        font-size: 0.72rem;\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\n      /* 팔레트가 잠긴 이유를 말한다. 흐린 단추만 두면 왜 안 눌리는지 모른다 */\n      p[full] {\n        margin: 6px 0 0 0;\n        font-size: 0.72rem;\n        line-height: 1.5;\n        color: var(--md-sys-color-error);\n      }\n\n      p[quiet] {\n        margin: 0;\n        font-size: 0.76rem;\n        line-height: 1.6;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n  `\n  ]\n\n  /**\n   * 보드 위의 부품들. **씬 모델 그대로 받는다.**\n   *\n   * 이 패널은 이름과 도형만 읽으므로 어느 쪽 형태로 받아도 화면은 같다. 그래도 씬\n   * 모델로 받는 것은 모델러 페이지가 데이터를 **한 벌만** 갖게 하기 위해서다. 여기만\n   * FigureSource 로 받으면 페이지가 이 패널을 위해 변환본을 따로 들고 있어야 하고,\n   * 그 변환본이 언제 낡는지를 또 관리해야 한다.\n   */\n  @property({ type: Array }) parts: PartModel[] = []\n  /** 디테일 등급. 부품 수 한도가 여기서 결정된다. */\n  @property({ type: String }) level: DetailLevel = 'M'\n  /** 고른 부품의 자리. 고르지 않았으면 -1. */\n  @property({ type: Number }) selected = -1\n\n  render() {\n    const parts = this.parts ?? []\n    const level = this.level\n    const limit = PART_LIMIT[level]\n    const full = parts.length >= limit\n\n    return html`\n      <section>\n        <h3>${i18next.t('label.shapes')}</h3>\n        <div palette>\n          ${PRIMITIVE_KINDS.map(\n            kind => html`\n              <button\n                shape\n                ?disabled=${full}\n                title=${full ? i18next.t('text.part-limit-reached') : i18next.t('text.add-a-shape')}\n                @click=${() => this.ask('add-part', { primitive: kind })}\n              >\n                <md-icon>${SHAPE_ICON[kind]}</md-icon>\n                ${i18next.t('label.primitive-' + kind)}\n              </button>\n            `\n          )}\n        </div>\n        ${full\n          ? html`<p full>${i18next.t('text.part-limit-reached-short', { level, limit })}</p>`\n          : ''}\n      </section>\n\n      <section list>\n        <h3>\n          ${i18next.t('label.parts')}\n          <span room ?full=${full} title=${i18next.t('text.limit-comes-from-level')}>\n            ${i18next.t('text.n-of-limit', { used: parts.length, limit })}\n          </span>\n          ${this.renderShowAll(parts)}\n        </h3>\n\n        <div level>\n          <label for=\"detail-level\">${i18next.t('label.detail-level')}</label>\n          <select\n            id=\"detail-level\"\n            title=${i18next.t('text.detail-level-explained')}\n            @change=${(e: Event) =>\n              this.ask('change-detail-level', { level: (e.target as HTMLSelectElement).value })}\n          >\n            ${DETAIL_LEVELS.map(\n              one => html`\n                <option value=${one} ?selected=${one === level}>\n                  ${one} ${i18next.t('label.detail-' + one)} ·\n                  ${i18next.t('text.n-parts-at-most', { limit: PART_LIMIT[one] })}\n                </option>\n              `\n            )}\n          </select>\n        </div>\n\n        ${parts.length === 0\n          ? html`<p quiet>${i18next.t('text.pick-a-shape-above-to-start')}</p>`\n          : html`\n              <ol>\n                ${parts.map((part, index) => this.renderRow(part, index, parts.length))}\n              </ol>\n            `}\n      </section>\n    `\n  }\n\n  /**\n   * 한꺼번에 감추고 한꺼번에 되돌린다.\n   *\n   * 부품 스물짜리를 들여다볼 때 하나만 남기려면 열아홉을 눌러야 했다. 안쪽에 있는 것을\n   * 보려고 겉을 걷어내는 일은 저작 중에 늘 하는 일이다.\n   *\n   * 무엇을 할지는 **지금 상태가 정한다** — 하나라도 감춰져 있으면 다 되돌리고, 다\n   * 보이고 있으면 다 감춘다. 단추 하나로 오가는 것이 두 개보다 낫다.\n   */\n  private renderShowAll(parts: PartModel[]) {\n    if (parts.length === 0) return nothing\n\n    const anyHidden = parts.some(part => part.hidden)\n\n    return html`\n      <button\n        eye\n        all\n        ?off=${!anyHidden}\n        title=${i18next.t(anyHidden ? 'text.show-all-parts' : 'text.hide-all-parts')}\n        @click=${(e: Event) => {\n          e.stopPropagation()\n          this.ask('set-all-parts-hidden', { hidden: !anyHidden })\n        }}\n      >\n        <md-icon>${anyHidden ? 'visibility' : 'visibility_off'}</md-icon>\n      </button>\n    `\n  }\n\n  private renderRow(part: PartModel, index: number, count: number) {\n    const selected = index === this.selected\n    const off = !!part.hidden\n\n    return html`\n      <li ?selected=${selected} ?off=${off} @click=${() => this.ask('select-part', { index })}>\n        <button\n          eye\n          ?off=${off}\n          title=${i18next.t(off ? 'text.show-this-part' : 'text.hide-this-part')}\n          @click=${(e: Event) => {\n            // 눌렀을 때 줄 고르기가 함께 일어나지 않게 막는다 — 가리려던 것이지 고르려던 것이 아니다\n            e.stopPropagation()\n            this.ask('toggle-part-hidden', { index })\n          }}\n        >\n          <md-icon>${off ? 'visibility_off' : 'visibility'}</md-icon>\n        </button>\n        <md-icon>${SHAPE_ICON[part.primitive]}</md-icon>\n        <span label title=${part.name}>${part.name}</span>\n        ${selected ? this.renderOps(index, count) : nothing}\n      </li>\n    `\n  }\n\n  /**\n   * 고른 줄의 조작.\n   *\n   * 못 하는 것을 **빼지 않고 흐리게 둔다.** 빼면 남은 단추가 그 자리로 밀려서, 첫\n   * 줄과 마지막 줄에서 「지우기」가 다른 자리에 온다 — 연달아 지우다 엉뚱한 것을\n   * 누르게 된다.\n   *\n   * 눌렀을 때 줄 고르기가 다시 일어나지 않게 전파를 멈춘다.\n   */\n  private renderOps(index: number, count: number) {\n    const op = (name: string, icon: string, detail: object, enabled = true) => html`\n      <button\n        op=${name}\n        ?disabled=${!enabled}\n        title=${i18next.t('button.' + name)}\n        @click=${(e: Event) => {\n          e.stopPropagation()\n          if (enabled) this.ask(name, detail)\n        }}\n      >\n        <md-icon>${icon}</md-icon>\n      </button>\n    `\n\n    return html`\n      <div ops>\n        ${op('move-part-up', 'arrow_upward', { index, to: index - 1 }, index > 0)}\n        ${op('move-part-down', 'arrow_downward', { index, to: index + 1 }, index < count - 1)}\n        ${op('duplicate-part', 'content_copy', { index })} ${op('remove-part', 'delete', { index })}\n      </div>\n    `\n  }\n\n  /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */\n  private ask(what: string, detail: object) {\n    this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -0,0 +1,62 @@
+import { LitElement } from 'lit';
+import type { FigureSource } from '@hatiolab/figure-model';
+/** 얼마나 키워 보나. */
+export declare const PREVIEW_FACTOR = 2;
+/**
+ * 어느 축을 키워 놓아 보나 — **일곱 조합 전부.**
+ *
+ * 1 배 · 2 배 · 3 배를 나란히 놓던 자리다. 그러면 세 축이 늘 같이 늘어나므로, 축마다
+ * 따로 걸리는 규칙을 눈으로 볼 수가 없었다. 실제로 못 보고 넘어간 것들이 있다 — 컨베이어의
+ * 롤러가 폭을 안 따라가던 것, 문의 폭이 높이를 안 따라가던 것이 다 한 축만 늘렸을 때
+ * 드러나는 것이었다.
+ *
+ * 여덟이다. 첫째가 저작한 크기이고 나머지 일곱이 조합이다. 한 줄로 늘어놓으면 화면에
+ * 안 담겨서 **네 칸씩 두 줄**로 놓는다.
+ */
+export declare const PREVIEW_WAYS: readonly {
+    name: string;
+    axes: readonly ('x' | 'y' | 'z')[];
+}[];
+declare const FigurePreview_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class FigurePreview extends FigurePreview_base {
+    static styles: import("lit").CSSResult;
+    /** 저작 중인 것. 저장 형식으로 받는다 — 보드가 소비하는 것이 이 형식이다. */
+    source?: FigureSource;
+    private stage;
+    /** 세울 수 없는 사유. 없으면 세운 것이다. */
+    private cannot;
+    private scene?;
+    /** 지금 세워 둔 것의 값. 같으면 다시 세우지 않는다. */
+    private standing?;
+    private watcher?;
+    /** 지금 민 clip 값. clip 이름 → 수. **저장되지 않는다.** */
+    private driving;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Clip 하나에 손잡이 하나.
+     *
+     * 수의 뜻이 `drive` 에 따라 다르므로 그것을 이름 옆에 적는다. `loop` 는 배속이라 0 이
+     * 멈춤이고, `hold` 는 0~1 위치라 0 이 처음이다. 둘을 같은 눈금으로 두면 「1」이 무슨
+     * 뜻인지 매번 헷갈린다.
+     */
+    private renderClips;
+    /**
+     * 세워 둔 인스턴스 전부에 같은 값을 준다.
+     *
+     * 하나만 몰면 세 배율이 서로 다른 자세로 서서, 크기 반응을 보려고 나란히 놓은 뜻이
+     * 사라진다.
+     */
+    private drive;
+    willUpdate(changed: Map<string, unknown>): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    /**
+     * 저작한 것을 컴파일해 세운다.
+     *
+     * **형식을 어겼으면 세우지 않는다.** 반쯤 세운 것을 보여 주면 무엇이 잘못됐는지 알 수
+     * 없다. 판정 패널이 이미 사유를 말하고 있으므로 여기서는 세울 수 없다고만 한다.
+     */
+    private standUp;
+    private teardown;
+}
+export {};

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

@@ -0,0 +1,360 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { compile, validate } from '@hatiolab/figure-model';
+import { create, registerFigure } from '@hatiolab/things-scene';
+/**
+ * 저작 중인 것을 **보드에 놓았을 때**의 모습.
+ *
+ * ## 편집 캔버스로는 볼 수 없다
+ *
+ * 편집 캔버스는 부품을 컴포넌트로 늘어놓는다. 그래서 늘 기준 크기다. 그런데 이 형식의
+ * 값 절반은 **크기가 달라졌을 때 어떻게 반응하는가**에 있다. 기둥만 늘어나는 시그널타워,
+ * 롤러 개수가 느는 컨베이어는 기준 크기에서는 아무것도 보여 주지 못한다.
+ *
+ * 그래서 여기서는 저작한 것을 실제로 컴파일해 `FigureInstance` 로 세운다. 보드가 하는
+ * 일을 그대로 한다 — 청사진을 등록하고, 타입 이름만 적은 컴포넌트를 놓는다.
+ *
+ * ## 여러 크기를 한 번에 놓는다
+ *
+ * 하나만 놓으면 "이 크기에서는 이렇다" 밖에 알 수 없다. 기준 크기와 늘린 것을 나란히
+ * 놓아야 무엇이 따라 늘고 무엇이 그대로인지 보인다.
+ *
+ * ## 편집하지 않는다
+ *
+ * 여기서 집거나 끌 수 없다. 편집은 캔버스에서 한다. 보여 주기만 하는 자리라 씬을
+ * 뷰 모드로 세운다.
+ */
+/** 배경. 편집 캔버스와 같은 값을 쓴다 — 갈리면 두 화면이 다른 도구처럼 보인다. */
+const WORKBENCH = '#7c7c7c';
+/** 얼마나 키워 보나. */
+export const PREVIEW_FACTOR = 2;
+/**
+ * 어느 축을 키워 놓아 보나 — **일곱 조합 전부.**
+ *
+ * 1 배 · 2 배 · 3 배를 나란히 놓던 자리다. 그러면 세 축이 늘 같이 늘어나므로, 축마다
+ * 따로 걸리는 규칙을 눈으로 볼 수가 없었다. 실제로 못 보고 넘어간 것들이 있다 — 컨베이어의
+ * 롤러가 폭을 안 따라가던 것, 문의 폭이 높이를 안 따라가던 것이 다 한 축만 늘렸을 때
+ * 드러나는 것이었다.
+ *
+ * 여덟이다. 첫째가 저작한 크기이고 나머지 일곱이 조합이다. 한 줄로 늘어놓으면 화면에
+ * 안 담겨서 **네 칸씩 두 줄**로 놓는다.
+ */
+export const PREVIEW_WAYS = [
+    { name: '기준', axes: [] },
+    { name: 'x', axes: ['x'] },
+    { name: 'y', axes: ['y'] },
+    { name: 'z', axes: ['z'] },
+    { name: 'x·y', axes: ['x', 'y'] },
+    { name: 'x·z', axes: ['x', 'z'] },
+    { name: 'y·z', axes: ['y', 'z'] },
+    { name: 'x·y·z', axes: ['x', 'y', 'z'] }
+];
+let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** 세울 수 없는 사유. 없으면 세운 것이다. */
+        this.cannot = '';
+        /** 지금 민 clip 값. clip 이름 → 수. **저장되지 않는다.** */
+        this.driving = {};
+    }
+    static { this.styles = css `
+    :host {
+      position: relative;
+      display: flex;
+      overflow: hidden;
+      background-color: ${unsafeCSS(WORKBENCH)};
+      font: var(--label-font, inherit);
+      font-size: 0.76rem;
+    }
+
+    div[stage] {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    /* 어느 것이 몇 배인지 — 나란히 놓아도 표가 없으면 읽을 수 없다 */
+    div[legend] {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      display: flex;
+      gap: 6px;
+      padding: 4px 8px;
+      color: rgba(255, 255, 255, 0.9);
+      background-color: rgba(28, 28, 30, 0.6);
+      border-radius: 6px;
+      font-size: 0.72rem;
+    }
+
+    /*
+      Clip 조작. **저작자가 제 애니메이션을 만져 볼 유일한 자리다.**
+
+      보드에서는 트윈이 clip 을 몬다 — 「닙이 40% 열렸다」는 사실이 어디선가 온다. 저작
+      중에는 그 사실을 주는 것이 없어서, 손대지 않으면 hold 인 clip 은 0 에 머문 채
+      영영 안 움직인다. 포크가 안 올라가는 것을 저작자가 「안 되는구나」로 읽게 된다.
+
+      **미리보기 것이지 자산의 것이 아니다.** 여기서 민 값은 저장되지 않는다.
+    */
+    div[clips] {
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 8px 10px;
+      color: rgba(255, 255, 255, 0.92);
+      background-color: rgba(28, 28, 30, 0.72);
+      border-radius: 8px;
+      font-size: 0.72rem;
+    }
+    div[clips] label {
+      display: grid;
+      grid-template-columns: auto 96px 34px;
+      align-items: center;
+      gap: 8px;
+    }
+    div[clips] span[drive] {
+      opacity: 0.6;
+      font-size: 0.66rem;
+    }
+    div[clips] input {
+      width: 96px;
+      accent-color: var(--md-sys-color-primary);
+    }
+    div[clips] output {
+      font-variant-numeric: tabular-nums;
+      text-align: right;
+      opacity: 0.85;
+    }
+
+    /* 세울 수 없는 상태를 빈 화면으로 두지 않는다 — 왜 안 보이는지 말한다 */
+    div[cannot] {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacing-large, 12px);
+      text-align: center;
+      line-height: 1.6;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background-color: ${unsafeCSS(WORKBENCH)};
+    }
+  `; }
+    render() {
+        const clips = this.source?.animations ?? [];
+        return html `
+      <div stage></div>
+      ${this.cannot
+            ? html `<div cannot>${this.cannot}</div>`
+            : html `<div legend>
+              ${PREVIEW_WAYS.map(way => html `<span>${way.name}</span>`)}
+            </div>
+            ${clips.length > 0 ? this.renderClips(clips) : ''}`}
+    `;
+    }
+    /**
+     * Clip 하나에 손잡이 하나.
+     *
+     * 수의 뜻이 `drive` 에 따라 다르므로 그것을 이름 옆에 적는다. `loop` 는 배속이라 0 이
+     * 멈춤이고, `hold` 는 0~1 위치라 0 이 처음이다. 둘을 같은 눈금으로 두면 「1」이 무슨
+     * 뜻인지 매번 헷갈린다.
+     */
+    renderClips(clips) {
+        return html `
+      <div clips>
+        ${clips.map(clip => {
+            const loop = (clip.drive ?? 'loop') === 'loop';
+            const value = this.driving[clip.name] ?? (loop ? 1 : 0);
+            return html `
+            <label>
+              <span>${clip.name} <span drive>${loop ? '배속' : '위치'}</span></span>
+              <input
+                type="range"
+                min="0"
+                max=${loop ? 3 : 1}
+                step="0.05"
+                .value=${String(value)}
+                @input=${(e) => this.drive(clip.name, Number(e.target.value))}
+              />
+              <output>${value.toFixed(2)}</output>
+            </label>
+          `;
+        })}
+      </div>
+    `;
+    }
+    /**
+     * 세워 둔 인스턴스 전부에 같은 값을 준다.
+     *
+     * 하나만 몰면 세 배율이 서로 다른 자세로 서서, 크기 반응을 보려고 나란히 놓은 뜻이
+     * 사라진다.
+     */
+    drive(name, value) {
+        this.driving = { ...this.driving, [name]: value };
+        for (const component of this.scene?.root?.components ?? []) {
+            component.set?.('clips', { ...this.driving });
+        }
+    }
+    willUpdate(changed) {
+        if (!this.hasUpdated)
+            return;
+        if (changed.has('source'))
+            this.standUp();
+    }
+    firstUpdated() {
+        this.standUp();
+        this.watcher = new ResizeObserver(() => this.scene?.resize?.());
+        this.watcher.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.watcher?.disconnect();
+        this.watcher = undefined;
+        this.teardown();
+    }
+    /**
+     * 저작한 것을 컴파일해 세운다.
+     *
+     * **형식을 어겼으면 세우지 않는다.** 반쯤 세운 것을 보여 주면 무엇이 잘못됐는지 알 수
+     * 없다. 판정 패널이 이미 사유를 말하고 있으므로 여기서는 세울 수 없다고만 한다.
+     */
+    standUp() {
+        const source = this.source;
+        if (!source || source.parts.length === 0) {
+            this.cannot = i18next.t('text.preview-needs-a-part');
+            this.teardown();
+            return;
+        }
+        const signature = JSON.stringify(source);
+        if (this.scene && this.standing === signature)
+            return;
+        const { errors } = validate(source);
+        if (errors.length > 0) {
+            this.cannot = i18next.t('text.preview-blocked-by-errors');
+            this.teardown();
+            return;
+        }
+        this.teardown();
+        // 표본이 바뀌면 민 값도 처음으로 돌린다 — 다른 자산의 clip 이름이 남으면 안 된다.
+        this.driving = {};
+        try {
+            registerFigure(compile(source));
+            /*
+              보드가 하는 일을 그대로 한다. 컴포넌트에는 타입 이름과 자리·크기만 적는다 —
+              청사진도 원본도 보드에 들어가지 않는다.
+      
+              가장 큰 것이 들어갈 만큼 판을 잡고, 세로로 줄을 나눠 나란히 놓는다.
+            */
+            const { base } = source;
+            const biggest = PREVIEW_FACTOR;
+            /** 이 조합에서 축별 배율. 조합에 든 축만 키운다. */
+            const growth = (way) => ({
+                x: way.axes.includes('x') ? PREVIEW_FACTOR : 1,
+                y: way.axes.includes('y') ? PREVIEW_FACTOR : 1,
+                z: way.axes.includes('z') ? PREVIEW_FACTOR : 1
+            });
+            // 여백을 넉넉히 두면 화면에서 형상이 작아진다. 가장 큰 것이 겨우 들어갈 만큼만 잡는다.
+            /** 네 칸씩 두 줄. */
+            const COLUMNS = 4;
+            const cell = { x: base.x * biggest * 1.25, z: base.z * biggest * 1.25 };
+            const rows = Math.ceil(PREVIEW_WAYS.length / COLUMNS);
+            const board = {
+                width: Math.round(cell.x * COLUMNS),
+                height: Math.round(cell.z * rows),
+                /*
+                  판의 높이도 가장 큰 인스턴스를 담아야 한다.
+        
+                  안 주면 카메라가 평면만 보고 자리를 잡아서, 키가 큰 모델은 밑동만 보인다.
+                  시그널타워를 2 배로 놓으면 2200 인데 판이 그것을 모르면 받침만 화면에 든다.
+                */
+                depth: Math.round(base.y * biggest * 1.1)
+            };
+            /*
+              씬의 낱말이 형식과 다르다 — `width` 가 형식의 x, `height` 가 z, `depth` 가 y 다.
+              옮기는 일을 여기 한 줄에 모아 둔다.
+      
+              `depth` 를 늘 적는 이유가 있다. 안 적으면 평면 두 축의 기하평균으로 잡혀서,
+              「y 만 키운다」가 x·z 를 안 건드리는데도 높이가 안 오른다.
+            */
+            const components = PREVIEW_WAYS.map((way, at) => {
+                const grow = growth(way);
+                const column = at % COLUMNS;
+                const row = Math.floor(at / COLUMNS);
+                const width = Math.round(base.x * grow.x);
+                const height = Math.round(base.z * grow.z);
+                return {
+                    type: source.type,
+                    id: `at-${way.name}`,
+                    // 칸 가운데에 놓는다 — 크기가 저마다 달라 왼쪽에 맞추면 줄이 안 읽힌다.
+                    left: Math.round(column * cell.x + (cell.x - width) / 2),
+                    top: Math.round(row * cell.z + (cell.z - height) / 2),
+                    width,
+                    height,
+                    depth: Math.round(base.y * grow.y)
+                };
+            });
+            this.scene = create({
+                target: this.stage,
+                model: {
+                    type: 'model-layer',
+                    width: board.width,
+                    height: board.height,
+                    depth: board.depth,
+                    threed: true,
+                    environment: 'studio',
+                    grid: true,
+                    sky: 'color',
+                    skyColor: WORKBENCH,
+                    floor: false,
+                    pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),
+                    components
+                },
+                // 보기만 하는 자리다. 집거나 끌 수 없어야 한다.
+                mode: 0
+            });
+            this.standing = signature;
+            this.scene.resize?.();
+            this.scene.fit?.('ratio');
+            this.scene.root?.fitCameraToModel?.();
+            this.cannot = '';
+        }
+        catch (e) {
+            // 원인을 지어내지 않는다 — 던진 말을 그대로 보여 준다.
+            this.cannot = e.message;
+        }
+    }
+    teardown() {
+        this.scene?.dispose?.();
+        this.scene = undefined;
+        this.standing = undefined;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], FigurePreview.prototype, "source", void 0);
+__decorate([
+    query('div[stage]'),
+    __metadata("design:type", HTMLDivElement
+    /** 세울 수 없는 사유. 없으면 세운 것이다. */
+    )
+], FigurePreview.prototype, "stage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigurePreview.prototype, "cannot", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigurePreview.prototype, "driving", void 0);
+FigurePreview = __decorate([
+    customElement('figure-preview')
+], FigurePreview);
+export { FigurePreview };
+//# sourceMappingURL=figure-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-preview.js","sourceRoot":"","sources":["../../client/modeller/figure-preview.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 { compile, validate } from '@hatiolab/figure-model'\nimport type { FigureSource } from '@hatiolab/figure-model'\nimport { create, registerFigure } from '@hatiolab/things-scene'\n\n/**\n * 저작 중인 것을 **보드에 놓았을 때**의 모습.\n *\n * ## 편집 캔버스로는 볼 수 없다\n *\n * 편집 캔버스는 부품을 컴포넌트로 늘어놓는다. 그래서 늘 기준 크기다. 그런데 이 형식의\n * 값 절반은 **크기가 달라졌을 때 어떻게 반응하는가**에 있다. 기둥만 늘어나는 시그널타워,\n * 롤러 개수가 느는 컨베이어는 기준 크기에서는 아무것도 보여 주지 못한다.\n *\n * 그래서 여기서는 저작한 것을 실제로 컴파일해 `FigureInstance` 로 세운다. 보드가 하는\n * 일을 그대로 한다 — 청사진을 등록하고, 타입 이름만 적은 컴포넌트를 놓는다.\n *\n * ## 여러 크기를 한 번에 놓는다\n *\n * 하나만 놓으면 \"이 크기에서는 이렇다\" 밖에 알 수 없다. 기준 크기와 늘린 것을 나란히\n * 놓아야 무엇이 따라 늘고 무엇이 그대로인지 보인다.\n *\n * ## 편집하지 않는다\n *\n * 여기서 집거나 끌 수 없다. 편집은 캔버스에서 한다. 보여 주기만 하는 자리라 씬을\n * 뷰 모드로 세운다.\n */\n\n/** 배경. 편집 캔버스와 같은 값을 쓴다 — 갈리면 두 화면이 다른 도구처럼 보인다. */\nconst WORKBENCH = '#7c7c7c'\n\n/** 얼마나 키워 보나. */\nexport const PREVIEW_FACTOR = 2\n\n/**\n * 어느 축을 키워 놓아 보나 — **일곱 조합 전부.**\n *\n * 1 배 · 2 배 · 3 배를 나란히 놓던 자리다. 그러면 세 축이 늘 같이 늘어나므로, 축마다\n * 따로 걸리는 규칙을 눈으로 볼 수가 없었다. 실제로 못 보고 넘어간 것들이 있다 — 컨베이어의\n * 롤러가 폭을 안 따라가던 것, 문의 폭이 높이를 안 따라가던 것이 다 한 축만 늘렸을 때\n * 드러나는 것이었다.\n *\n * 여덟이다. 첫째가 저작한 크기이고 나머지 일곱이 조합이다. 한 줄로 늘어놓으면 화면에\n * 안 담겨서 **네 칸씩 두 줄**로 놓는다.\n */\nexport const PREVIEW_WAYS: readonly { name: string; axes: readonly ('x' | 'y' | 'z')[] }[] = [\n  { name: '기준', axes: [] },\n  { name: 'x', axes: ['x'] },\n  { name: 'y', axes: ['y'] },\n  { name: 'z', axes: ['z'] },\n  { name: 'x·y', axes: ['x', 'y'] },\n  { name: 'x·z', axes: ['x', 'z'] },\n  { name: 'y·z', axes: ['y', 'z'] },\n  { name: 'x·y·z', axes: ['x', 'y', 'z'] }\n]\n\ninterface SceneHandle {\n  dispose?: () => void\n  resize?: () => void\n  fit?: (type?: string) => void\n  root?: {\n    invalidate?: () => void\n    fitCameraToModel?: (margin?: number) => void\n    /** 세워 둔 인스턴스들. clip 을 몰 때 전부에 같은 값을 준다. */\n    components?: { set?: (property: string, value: unknown) => void }[]\n  }\n}\n\n@customElement('figure-preview')\nexport class FigurePreview extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      position: relative;\n      display: flex;\n      overflow: hidden;\n      background-color: ${unsafeCSS(WORKBENCH)};\n      font: var(--label-font, inherit);\n      font-size: 0.76rem;\n    }\n\n    div[stage] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    /* 어느 것이 몇 배인지 — 나란히 놓아도 표가 없으면 읽을 수 없다 */\n    div[legend] {\n      position: absolute;\n      top: 8px;\n      left: 8px;\n      display: flex;\n      gap: 6px;\n      padding: 4px 8px;\n      color: rgba(255, 255, 255, 0.9);\n      background-color: rgba(28, 28, 30, 0.6);\n      border-radius: 6px;\n      font-size: 0.72rem;\n    }\n\n    /*\n      Clip 조작. **저작자가 제 애니메이션을 만져 볼 유일한 자리다.**\n\n      보드에서는 트윈이 clip 을 몬다 — 「닙이 40% 열렸다」는 사실이 어디선가 온다. 저작\n      중에는 그 사실을 주는 것이 없어서, 손대지 않으면 hold 인 clip 은 0 에 머문 채\n      영영 안 움직인다. 포크가 안 올라가는 것을 저작자가 「안 되는구나」로 읽게 된다.\n\n      **미리보기 것이지 자산의 것이 아니다.** 여기서 민 값은 저장되지 않는다.\n    */\n    div[clips] {\n      position: absolute;\n      right: 8px;\n      bottom: 8px;\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 8px 10px;\n      color: rgba(255, 255, 255, 0.92);\n      background-color: rgba(28, 28, 30, 0.72);\n      border-radius: 8px;\n      font-size: 0.72rem;\n    }\n    div[clips] label {\n      display: grid;\n      grid-template-columns: auto 96px 34px;\n      align-items: center;\n      gap: 8px;\n    }\n    div[clips] span[drive] {\n      opacity: 0.6;\n      font-size: 0.66rem;\n    }\n    div[clips] input {\n      width: 96px;\n      accent-color: var(--md-sys-color-primary);\n    }\n    div[clips] output {\n      font-variant-numeric: tabular-nums;\n      text-align: right;\n      opacity: 0.85;\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      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  @property({ type: Object }) source?: FigureSource\n\n  @query('div[stage]') private stage!: HTMLDivElement\n\n  /** 세울 수 없는 사유. 없으면 세운 것이다. */\n  @state() private cannot = ''\n\n  private scene?: SceneHandle\n  /** 지금 세워 둔 것의 값. 같으면 다시 세우지 않는다. */\n  private standing?: string\n  private watcher?: ResizeObserver\n\n  /** 지금 민 clip 값. clip 이름 → 수. **저장되지 않는다.** */\n  @state() private driving: Record<string, number> = {}\n\n  render() {\n    const clips = this.source?.animations ?? []\n\n    return html`\n      <div stage></div>\n      ${this.cannot\n        ? html`<div cannot>${this.cannot}</div>`\n        : html`<div legend>\n              ${PREVIEW_WAYS.map(way => html`<span>${way.name}</span>`)}\n            </div>\n            ${clips.length > 0 ? this.renderClips(clips) : ''}`}\n    `\n  }\n\n  /**\n   * Clip 하나에 손잡이 하나.\n   *\n   * 수의 뜻이 `drive` 에 따라 다르므로 그것을 이름 옆에 적는다. `loop` 는 배속이라 0 이\n   * 멈춤이고, `hold` 는 0~1 위치라 0 이 처음이다. 둘을 같은 눈금으로 두면 「1」이 무슨\n   * 뜻인지 매번 헷갈린다.\n   */\n  private renderClips(clips: NonNullable<FigureSource['animations']>) {\n    return html`\n      <div clips>\n        ${clips.map(clip => {\n          const loop = (clip.drive ?? 'loop') === 'loop'\n          const value = this.driving[clip.name] ?? (loop ? 1 : 0)\n\n          return html`\n            <label>\n              <span>${clip.name} <span drive>${loop ? '배속' : '위치'}</span></span>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=${loop ? 3 : 1}\n                step=\"0.05\"\n                .value=${String(value)}\n                @input=${(e: Event) => this.drive(clip.name, Number((e.target as HTMLInputElement).value))}\n              />\n              <output>${value.toFixed(2)}</output>\n            </label>\n          `\n        })}\n      </div>\n    `\n  }\n\n  /**\n   * 세워 둔 인스턴스 전부에 같은 값을 준다.\n   *\n   * 하나만 몰면 세 배율이 서로 다른 자세로 서서, 크기 반응을 보려고 나란히 놓은 뜻이\n   * 사라진다.\n   */\n  private drive(name: string, value: number): void {\n    this.driving = { ...this.driving, [name]: value }\n\n    for (const component of this.scene?.root?.components ?? []) {\n      component.set?.('clips', { ...this.driving })\n    }\n  }\n\n  willUpdate(changed: Map<string, unknown>) {\n    if (!this.hasUpdated) return\n    if (changed.has('source')) this.standUp()\n  }\n\n  firstUpdated() {\n    this.standUp()\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 source = this.source\n    if (!source || source.parts.length === 0) {\n      this.cannot = i18next.t('text.preview-needs-a-part')\n      this.teardown()\n      return\n    }\n\n    const signature = JSON.stringify(source)\n    if (this.scene && this.standing === signature) return\n\n    const { errors } = validate(source)\n    if (errors.length > 0) {\n      this.cannot = i18next.t('text.preview-blocked-by-errors')\n      this.teardown()\n      return\n    }\n\n    this.teardown()\n    // 표본이 바뀌면 민 값도 처음으로 돌린다 — 다른 자산의 clip 이름이 남으면 안 된다.\n    this.driving = {}\n\n    try {\n      registerFigure(compile(source) as never)\n\n      /*\n        보드가 하는 일을 그대로 한다. 컴포넌트에는 타입 이름과 자리·크기만 적는다 —\n        청사진도 원본도 보드에 들어가지 않는다.\n\n        가장 큰 것이 들어갈 만큼 판을 잡고, 세로로 줄을 나눠 나란히 놓는다.\n      */\n      const { base } = source\n      const biggest = PREVIEW_FACTOR\n      /** 이 조합에서 축별 배율. 조합에 든 축만 키운다. */\n      const growth = (way: (typeof PREVIEW_WAYS)[number]) => ({\n        x: way.axes.includes('x') ? PREVIEW_FACTOR : 1,\n        y: way.axes.includes('y') ? PREVIEW_FACTOR : 1,\n        z: way.axes.includes('z') ? PREVIEW_FACTOR : 1\n      })\n      // 여백을 넉넉히 두면 화면에서 형상이 작아진다. 가장 큰 것이 겨우 들어갈 만큼만 잡는다.\n      /** 네 칸씩 두 줄. */\n      const COLUMNS = 4\n      const cell = { x: base.x * biggest * 1.25, z: base.z * biggest * 1.25 }\n      const rows = Math.ceil(PREVIEW_WAYS.length / COLUMNS)\n      const board = {\n        width: Math.round(cell.x * COLUMNS),\n        height: Math.round(cell.z * rows),\n        /*\n          판의 높이도 가장 큰 인스턴스를 담아야 한다.\n\n          안 주면 카메라가 평면만 보고 자리를 잡아서, 키가 큰 모델은 밑동만 보인다.\n          시그널타워를 2 배로 놓으면 2200 인데 판이 그것을 모르면 받침만 화면에 든다.\n        */\n        depth: Math.round(base.y * biggest * 1.1)\n      }\n\n      /*\n        씬의 낱말이 형식과 다르다 — `width` 가 형식의 x, `height` 가 z, `depth` 가 y 다.\n        옮기는 일을 여기 한 줄에 모아 둔다.\n\n        `depth` 를 늘 적는 이유가 있다. 안 적으면 평면 두 축의 기하평균으로 잡혀서,\n        「y 만 키운다」가 x·z 를 안 건드리는데도 높이가 안 오른다.\n      */\n      const components = PREVIEW_WAYS.map((way, at) => {\n        const grow = growth(way)\n        const column = at % COLUMNS\n        const row = Math.floor(at / COLUMNS)\n        const width = Math.round(base.x * grow.x)\n        const height = Math.round(base.z * grow.z)\n\n        return {\n          type: source.type,\n          id: `at-${way.name}`,\n          // 칸 가운데에 놓는다 — 크기가 저마다 달라 왼쪽에 맞추면 줄이 안 읽힌다.\n          left: Math.round(column * cell.x + (cell.x - width) / 2),\n          top: Math.round(row * cell.z + (cell.z - height) / 2),\n          width,\n          height,\n          depth: Math.round(base.y * grow.y)\n        }\n      })\n\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          grid: true,\n          sky: 'color',\n          skyColor: WORKBENCH,\n          floor: false,\n          pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),\n          components\n        },\n        // 보기만 하는 자리다. 집거나 끌 수 없어야 한다.\n        mode: 0\n      }) as SceneHandle\n\n      this.standing = signature\n      this.scene.resize?.()\n      this.scene.fit?.('ratio')\n      this.scene.root?.fitCameraToModel?.()\n      this.cannot = ''\n    } catch (e) {\n      // 원인을 지어내지 않는다 — 던진 말을 그대로 보여 준다.\n      this.cannot = (e as Error).message\n    }\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-report.d.ts

@@ -0,0 +1,134 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+import type { FigureSource } from '@hatiolab/figure-model';
+declare const FigureReport_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 판단 패널. 모델러 화면에 **늘 떠 있다.**
+ *
+ * 저장을 선택해야 아는 것이 아니다. 부품을 하나 놓을 때마다 무게와 점수가 움직이고,
+ * 그것이 보여야 저작자가 고칠 수 있다. 「무엇 때문에 점수가 낮은가」를 말해 주지
+ * 않으면 점수는 잔소리일 뿐이다.
+ *
+ * ## 셈을 여기서 하지 않는다
+ *
+ * 검증·원가·점수는 전부 `@hatiolab/figure-model` 이 한다. 화면은 **부르고 보여 줄
+ * 뿐**이다. 한도나 등급 경계를 화면이 다시 정하면 서버가 거절할 것을 화면이
+ * 통과시키게 된다.
+ */
+export declare class FigureReport extends FigureReport_base {
+    static styles: import("lit").CSSResult[];
+    /** 저작 중인 원본 데이터. 바뀌면 다시 측정한다. */
+    source?: FigureSource;
+    private cost?;
+    private score?;
+    private curve;
+    /** 1만 개를 놓았을 때. 저작자가 실제로 궁금한 숫자다. */
+    private many?;
+    /** 몇 개까지 놓을 수 있나. 이 패널의 머리다. */
+    private capacity?;
+    /** 추이 그림을 제 크기로 펼쳤나. */
+    private expanded;
+    private errors;
+    private violations;
+    willUpdate(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 머리 — 몇 개까지 편한가.
+     *
+     * 로우폴리의 값은 「얼마나 많이 편하게 놓을 수 있나」에 있다. 등급 B 는 그 물음에
+     * 직접 답하지 않는다 — 형상이 선언된 한도 안인지를 말할 뿐이다. 그래서 개수를
+     * 머리에 올리고 등급은 옆의 badge 로 내린다.
+     *
+     * 근거를 함께 낸다. 이 개수의 분모는 실측이 아니라 설계 문서의 목표치이고(미결
+     * D-20), 그 사실이 화면에 없으면 재 본 값처럼 읽힌다.
+     */
+    private renderVerdict;
+    /**
+     * 등급 눈금.
+     *
+     * A·B·C·D 가 무엇을 뜻하는지 화면 어디에도 없었다. badge 만 보고는 좋은지 나쁜지도,
+     * 무엇을 고쳐야 오르는지도 알 수 없다. 눈금을 늘 곁에 두고 지금 어디에 있는지를
+     * 표시한다.
+     *
+     * 접어 두지 않는다. 한 번 배우고 마는 값이 아니라 볼 때마다 대조하는 값이다.
+     */
+    private renderGradeScale;
+    /**
+     * 성숙도 — 여러 축으로 본다.
+     *
+     * 「몇 개까지 편한가」 하나로는 좋은 형상과 나쁜 형상이 구분되지 않는다. 부품 하나짜리
+     * 상자도 그 축에서는 만점이다.
+     *
+     * **못 재는 축을 0 으로 두지 않는다.** 0 은 「나쁘다」는 뜻이 되는데, 사실은 아직
+     * 측정할 방법이 없는 것이다. 측정하지 못한다고 알리고 이유를 붙인다. 지어낸 점수보다 그것이
+     * 이 리포트를 믿을 만하게 만든다.
+     */
+    private renderAxes;
+    /**
+     * 성숙도 radar. **측정한 축만 그린다.**
+     *
+     * 측정하지 못하는 축도 spoke 를 그려 두고 도형만 건너뛰던 때가 있었다. 그러면 그 방향을 가로지르는
+     * 직선이 생겨서 도형이 그쪽으로 움푹 들어간 것처럼 보인다. 0 으로 찍지 않으려고 한
+     * 일인데 결과는 0 으로 찍은 것과 똑같이 읽혔다. 점선 살과 물음표로는 그 인상이
+     * 지워지지 않았다.
+     *
+     * 그래서 아예 빼고, 못 재는 축은 그림 아래에 글로 적는다. 잴 수 없는 것은 그림에
+     * 자리를 주지 않는 편이 정직하다.
+     */
+    private renderRadar;
+    /**
+     * 그림에 없는 축을 글로 밝힌다.
+     *
+     * 빼기만 하면 축이 여섯인지 다섯인지 알 수 없고, 없는 것을 없다고 말하지 않은 셈이
+     * 된다. 무엇을 아직 못 재는지 한 줄로 적는다. 왜 못 재는지는 아래 목록의 그 항목에
+     * 그대로 있다.
+     */
+    private renderUnmeasured;
+    private renderAxis;
+    /**
+     * 예산 막대.
+     *
+     * 숫자만 늘어놓으면 어느 것이 꽉 찼는지 눈에 안 들어온다. 한도에 가장 가까운 하나를 색으로
+     * 구분한다. 그것이 점수를 정한 항목이다.
+     *
+     * ## `use.label` 을 쓰지 않는 이유
+     *
+     * `FigureBudgetUse` 에 `label` 과 `why` 가 있고 「저작자에게 그대로 보여 준다」고
+     * 적혀 있다. 그런데 그 문구가 **한국어로 구워져** 있다. 이 제품은 5언어를 쓰므로
+     * 그것을 그대로 실으면 다른 언어 사용자에게 한국어가 나온다.
+     *
+     * `budgets` 는 **배열**이다. `Object.entries` 로 돌면 키가 인덱스(0·1·2…)가 되어
+     * `label.budget-0` 같은 없는 키를 찾는다 — 화면을 띄워 보고서야 드러났다.
+     * 배열을 그대로 돌고 `use.key` 를 쓴다.
+     *
+     * 그래서 **안정된 `key`** 로 이 화면의 i18n 을 찾는다. `key` 는 열거형이라 형식의
+     * 일부이고, 문구는 화면의 몫이다. figure-model 이 문구를 언어 중립으로 바꾸면
+     * 그때 `label` 을 쓸 수 있다.
+     */
+    private renderBudgets;
+    private renderMetrics;
+    /**
+     * 재활용 추이 — 「많이 놓으면 어떻게 되나」에 답한다.
+     *
+     * ## 그림을 사이드바에 밀어 넣지 않는다
+     *
+     * `costCurveSvg` 의 자연 크기는 680x380 이고 글자가 11px 다. 300px 칸에서
+     * width:100% 로 줄이면 글자가 4px 이 되어 **아무것도 읽을 수 없다** — 화면을 띄워
+     * 보고서야 드러났다. 읽을 수 없는 그림은 없는 것과 같으므로, 사이드바에는 저작자가
+     * 실제로 궁금한 숫자(1만 개일 때)를 두고 그림은 선택해서 제 크기로 본다.
+     */
+    private renderCurve;
+    /** 그림을 제 크기로 보여 준다. 좁으면 줄이지 않고 넘겨 보게 둔다. */
+    private renderSheet;
+    /**
+     * 발견.
+     *
+     * 오류(막는 것)와 위반(알리는 것)을 **가려서** 보여 준다. 섞으면 저작자가 무엇을
+     * 반드시 고쳐야 하는지 모른다. 아무것도 없으면 「없다」고 말한다 — 빈 자리로 두면
+     * 검사가 돌았는지 알 수 없다.
+     */
+    private renderFindings;
+    /** 원본 데이터를 측정해 결과를 상태에 담는다. 셈은 전부 figure-model 이 한다. */
+    private measure;
+}
+export {};