@things-factory/figure-ui 10.1.43 → 10.1.45

package/client/modeller/figure-parts.ts

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