@things-factory/figure-ui 10.1.5 → 10.1.7

package/client/modeller/figure-ask.ts

@@ -186,21 +186,21 @@ export class FigureAsk extends localize(i18next)(LitElement) {
     return html`
       <form @submit=${(e: Event) => 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: Event) => 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/client/modeller/figure-canvas.ts

@@ -302,7 +302,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
   private 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
     }
 

package/client/modeller/figure-capabilities.ts

@@ -0,0 +1,372 @@
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { live } from 'lit/directives/live.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+import type { BoardModel, PartModel } from './figure-source.js'
+
+/**
+ * 이 도형이 **무엇을 하는가.**
+ *
+ * ## 왜 탭 하나가 필요한가
+ *
+ * 지금까지 저작한 것은 **생김새**뿐이었다. 컨베이어를 아무리 잘 그려도 보드에 놓으면
+ * 상자 하나를 못 받는다 — 물건을 받고 담고 흘려보내는 것은 씬의 capability 가 하는 일이고,
+ * 손으로 쓴 컴포넌트는 클래스 선언 한 줄로 그것을 졌다. 저작한 도형에는 그 줄을 쓸 자리가
+ * 없어서, 여기서 고른 것이 그 줄이 된다.
+ *
+ * ## 사다리로 묻는다
+ *
+ * 능력의 이름(`Capacity` · `Holdable` · `Transferable` · `FlowNode`)을 그대로 늘어놓고
+ * 고르라고 하면, 저작자는 넷의 관계를 먼저 배워야 한다. 실제로 물어야 하는 것은 하나다 —
+ * **이 도형이 물건을 다루나, 다룬다면 지나가나.** 그래서 세 칸의 사다리로 묻고, 이름은
+ * 고른 뒤에 보여 준다.
+ *
+ * 윗 칸이 아랫 칸을 포함한다(`FlowNode` 가 나머지 셋을 스스로 흡수한다). 그래서 사다리이지
+ * 체크상자가 아니다.
+ */
+
+/** 사다리 한 칸 — 화면이 묻는 말과, 그것이 되는 능력 이름. */
+type Rung = 'none' | 'hold' | 'flow'
+
+const RUNGS: Readonly<Record<Rung, readonly string[]>> = Object.freeze({
+  none: [],
+  hold: ['Capacity', 'Holdable'],
+  flow: ['FlowNode']
+})
+
+/** 선언된 이름 집합이 사다리 어느 칸인가. 어느 칸도 아니면 `null` — 지어내지 않는다. */
+function rungOf(names: readonly string[] | undefined): Rung | null {
+  const has = new Set(names ?? [])
+  if (has.size === 0) return 'none'
+
+  for (const [rung, wanted] of Object.entries(RUNGS) as [Rung, readonly string[]][]) {
+    if (wanted.length === has.size && wanted.every(name => has.has(name))) return rung
+  }
+  return null
+}
+
+@customElement('figure-capabilities')
+export class FigureCapabilities extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow-y: auto;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font, inherit);
+        font-size: 0.76rem;
+      }
+
+      section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-large, 12px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      /* 다른 탭들과 같은 눈금이다 — 탭마다 다른 제목 규격을 쓰면 따로 논다 */
+      h3 {
+        margin: 0 0 2px 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));
+      }
+
+      p[quiet] {
+        margin: 0;
+        font-size: 0.72rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      /* 사다리 — 고르는 것이 하나라 라디오다 */
+      label[rung] {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--spacing-medium, 8px);
+        padding: 6px 8px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      label[rung][on] {
+        border-color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-surface-container);
+      }
+      label[rung]:hover:not([on]) {
+        background-color: var(--md-sys-color-surface-container-low);
+      }
+      label[rung] span {
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+      }
+      label[rung] strong {
+        font-weight: 600;
+      }
+      label[rung] em {
+        font-style: normal;
+        font-size: 0.7rem;
+        line-height: 1.4;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      input[type='radio'] {
+        flex: none;
+        margin: 2px 0 0 0;
+        accent-color: var(--md-sys-color-primary);
+        cursor: pointer;
+      }
+
+      /* 실제로 씬에 붙는 이름. 고른 뒤에 보여 준다 */
+      code[names] {
+        font: var(--mono-font, ui-monospace, monospace);
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      /* 지정된 부품 한 줄 — 읽는 것이지 고치는 것이 아니다. 눌러 그 부품으로 간다 */
+      button[marked] {
+        display: flex;
+        align-items: baseline;
+        gap: var(--spacing-medium, 8px);
+        width: 100%;
+        padding: 5px 8px;
+        text-align: left;
+        font: inherit;
+        color: inherit;
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      button[marked]:hover {
+        background-color: var(--md-sys-color-surface-container);
+      }
+      button[marked] b {
+        flex: none;
+        font-weight: 600;
+      }
+      button[marked] span {
+        flex: none;
+        font-size: 0.72rem;
+        color: var(--md-sys-color-primary);
+      }
+      button[marked] em {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: right;
+        font-style: normal;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      /* 부품마다 한 줄. 자리를 고른 것만 아래로 펼친다 */
+      div[part] {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: 6px 0;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+      div[part]:first-of-type {
+        border-top: none;
+      }
+      div[head] {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+      }
+      div[head] b {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 600;
+      }
+
+      select,
+      input[type='text'],
+      input[type='number'] {
+        padding: 4px 6px;
+        font: var(--input-field-font, inherit);
+        font-size: 0.74rem;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 4px;
+      }
+      /* 이름이 길어질 수 있는 쪽(문)까지 안 잘리는 폭이다 */
+      div[head] select {
+        flex: none;
+        width: 8.5em;
+      }
+
+      div[detail] {
+        display: grid;
+        grid-template-columns: 4.5em 1fr;
+        align-items: center;
+        gap: 4px var(--spacing-medium, 8px);
+        padding-left: var(--spacing-medium, 8px);
+      }
+      div[detail] > span {
+        font-size: 0.72rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[detail] input {
+        width: 100%;
+        box-sizing: border-box;
+      }
+      div[detail] em {
+        grid-column: 2;
+        font-style: normal;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    `
+  ]
+
+  @property({ type: Object }) board?: BoardModel
+  @property({ type: Array }) parts: PartModel[] = []
+
+  render() {
+    const rung = rungOf(this.board?.capabilities)
+    const names = this.board?.capabilities ?? []
+
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.what-this-does')}</h3>
+
+        ${this.rung('none', rung)} ${this.rung('hold', rung)} ${this.rung('flow', rung)}
+        ${rung === null
+          ? html`<p quiet>${i18next.t('figure.text.capability-hand-written')}</p>`
+          : ''}
+        ${names.length > 0 ? html`<code names>${names.join(' · ')}</code>` : ''}
+      </section>
+
+      ${this.renderAnchors(rung)}
+    `
+  }
+
+  /**
+   * 자리와 문 — **여기서는 읽기만 한다.**
+   *
+   * 지정은 속성 탭에서 한다. 부품을 고치는 곳이 한 군데여야 하기 때문이다 — 목록을 여기 또
+   * 두면 같은 부품을 두 화면에서 고치게 되고, 저작자는 어느 쪽이 이기는지 매번 생각해야 한다.
+   *
+   * 그래도 요약은 남긴다. 「어느 부품이 자리인가」는 부품을 하나씩 눌러 보며 알아낼 일이
+   * 아니다 — 자리는 그려지지 않으므로 화면을 봐서는 영영 못 찾는다.
+   */
+  private renderAnchors(rung: Rung | null) {
+    if (rung === 'none') {
+      return html`
+        <section>
+          <h3>${i18next.t('figure.label.slots-and-ports')}</h3>
+          <p quiet>${i18next.t('figure.text.slots-need-capability')}</p>
+        </section>
+      `
+    }
+
+    const marked = this.parts.filter(part => part.capability)
+
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.slots-and-ports')}</h3>
+        <p quiet>${i18next.t('figure.text.anchors-are-not-drawn')}</p>
+
+        ${marked.length === 0
+          ? html`<p quiet>${i18next.t('figure.text.designate-in-properties')}</p>`
+          : marked.map(part => this.renderMarked(part))}
+      </section>
+    `
+  }
+
+  /** 지정된 부품 한 줄. 누르면 그 부품이 골라진다 — 고치는 자리는 속성 탭이다. */
+  private renderMarked(part: PartModel) {
+    const spec = part.capability!
+
+    return html`
+      <button marked @click=${() => this.pick(part)}>
+        <b>${part.name}</b>
+        <span>${spec.roles.map(role => i18next.t('figure.label.role-' + role)).join(' · ')}</span>
+        ${spec.accepts?.length ? html`<em>${spec.accepts.join(' · ')}</em>` : ''}
+      </button>
+    `
+  }
+
+  /** 이 부품을 고르게 한다. 부품 목록에서 누른 것과 같은 알림이다. */
+  private pick(part: PartModel) {
+    const index = this.parts.indexOf(part)
+    if (index < 0) return
+
+    this.dispatchEvent(new CustomEvent('select-part', { detail: { index }, bubbles: true, composed: true }))
+  }
+
+  /**
+   * 사다리 한 칸.
+   *
+   * `checked` 를 `live()` 로 묶는다. 그냥 두면 Lit 이 **마지막으로 그린 값**과 견주므로,
+   * 브라우저가 DOM 을 바꿨는데 모델은 안 바뀐 경우 되돌리지 않는다. 실제로 그랬다 — 고르는
+   * 도중 도형이 다시 실렸더니 점은 「흐른다」에 있고 강조 상자는 「그리기만 한다」에 있었다.
+   * 화면이 모델과 다른 말을 하는 상태다. `live()` 는 **지금 DOM 의 값**과 견준다.
+   */
+  private rung(which: Rung, chosen: Rung | null) {
+    return html`
+      <label rung ?on=${chosen === which}>
+        <input
+          type="radio"
+          name="rung"
+          .checked=${live(chosen === which)}
+          @change=${() => this.setRung(which)}
+        />
+        <span>
+          <strong>${i18next.t(`figure.label.rung-${which}`)}</strong>
+          <em>${i18next.t(`figure.text.rung-${which}-note`)}</em>
+        </span>
+      </label>
+    `
+  }
+
+  /**
+   * 사다리를 내리면 자리도 함께 거둔다.
+   *
+   * 능력을 「그리기만 한다」로 되돌려 놓고 부품에 자리 표시가 남아 있으면, 형식은 자리를
+   * 그대로 실어 보내는데 씬은 그것을 쓸 클래스가 없다. **선언은 있고 길이 없는** 상태가
+   * 되고, 그 도형은 멀쩡해 보이면서 아무것도 못 받는다.
+   */
+  private setRung(which: Rung) {
+    const board = this.board
+    if (!board) return
+
+    this.tellBoard({ ...board, capabilities: RUNGS[which].length > 0 ? [...RUNGS[which]] : undefined })
+
+    if (which === 'none') {
+      this.parts.forEach((part, index) => {
+        if (!part.capability) return
+        const { capability, ...rest } = part
+        this.dispatchEvent(
+          new CustomEvent('update-part', { detail: { index, part: rest }, bubbles: true, composed: true })
+        )
+      })
+    }
+  }
+
+  private tellBoard(board: BoardModel) {
+    this.board = board
+    this.dispatchEvent(new CustomEvent('update-board', { detail: { board }, bubbles: true, composed: true }))
+  }
+}