@things-factory/figure-ui 10.1.3

package/client/modeller/figure-parts.ts

@@ -0,0 +1,479 @@
+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('label.shapes')}</h3>
+        <div palette>
+          ${PRIMITIVE_KINDS.map(
+            kind => html`
+              <button
+                shape
+                ?disabled=${full}
+                title=${full ? i18next.t('text.part-limit-reached') : i18next.t('text.add-a-shape')}
+                @click=${() => this.ask('add-part', { primitive: kind })}
+              >
+                <md-icon>${SHAPE_ICON[kind]}</md-icon>
+                ${i18next.t('label.primitive-' + kind)}
+              </button>
+            `
+          )}
+        </div>
+        ${full
+          ? html`<p full>${i18next.t('text.part-limit-reached-short', { level, limit })}</p>`
+          : ''}
+      </section>
+
+      <section list>
+        <h3>
+          ${i18next.t('label.parts')}
+          <span room ?full=${full} title=${i18next.t('text.limit-comes-from-level')}>
+            ${i18next.t('text.n-of-limit', { used: parts.length, limit })}
+          </span>
+          ${this.renderShowAll(parts)}
+        </h3>
+
+        <div level>
+          <label for="detail-level">${i18next.t('label.detail-level')}</label>
+          <select
+            id="detail-level"
+            title=${i18next.t('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('label.detail-' + one)} ·
+                  ${i18next.t('text.n-parts-at-most', { limit: PART_LIMIT[one] })}
+                </option>
+              `
+            )}
+          </select>
+        </div>
+
+        ${parts.length === 0
+          ? html`<p quiet>${i18next.t('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 ? 'text.show-all-parts' : '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 ? 'text.show-this-part' : '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('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 }))
+  }
+}