@things-factory/figure-ui 10.1.4 → 10.1.6

package/client/graphql/index.ts

@@ -1,7 +1,16 @@
 import gql from 'graphql-tag'
 import { client } from '@operato/graphql'
 
-import type { Figure, FigureFinding, FigureListResult, FigurePatch, FigureProposal, NewFigure } from '../types.js'
+import type {
+  Figure,
+  FigureFinding,
+  FigureInspection,
+  FigureListResult,
+  FigurePatch,
+  FigureProposal,
+  FigureVersion,
+  NewFigure
+} from '../types.js'
 
 /**
  * 응답에서 값을 꺼낸다. **서버가 말한 사유를 그대로 올린다.**
@@ -29,8 +38,10 @@ function unwrap<T>(response: { data?: Record<string, unknown>; errors?: readonly
 /**
  * 목록에 필요한 필드만 가져온다 — `source` 는 무겁고 목록에서 쓰지 않는다.
  *
- * `score`·`triangles` 를 함께 받는 이유는 카드에 그것을 보여 주기 때문이다. 저작자가
- * 목록에서 「이 Figure 가 무거운가」를 바로 알아야 한다.
+ * **`thumbnail` 도 여기 없다.** base64 문자열이라 목록 응답에 실으면 카탈로그를 열 때마다 그림
+ * 전부가 다시 오고(표본 14개 227KB), data URL 은 브라우저가 캐시하지 못한다. 그림은 주소로
+ * 부른다(`figure-thumbnail` 라우트). 대신 `thumbnailUpdatedAt` 을 받는다 — 그림이 있나 없나를
+ * 그것으로 알고, 판을 가리는 값으로도 쓴다.
  */
 const FIGURE_LIST_FIELDS = `
   id
@@ -39,26 +50,28 @@ const FIGURE_LIST_FIELDS = `
   description
   category
   state
+  version
   score
   triangles
   groups
-  thumbnail
   thumbnailUpdatedAt
   updatedAt
   updater { id name }
 `
 
+/**
+ * 목록을 가져온다.
+ *
+ * 걸러 보기·정렬·쪽 나누기를 **그대로 넘긴다.** 화면이 `search`·`state` 같은 이름을 따로 만들어
+ * filter 로 옮기던 것을 그만두었다 — 그 이름들은 격자(ox-grist)가 이미 컬럼 설정에서 만들어 주고,
+ * 중간에 한 벌 더 두면 격자가 아는 조건과 서버에 가는 조건이 어긋난다.
+ */
 export async function fetchFigureList(params: {
   page?: number
   limit?: number
-  search?: string
-  category?: string
-  state?: string
+  filters?: unknown[]
+  sortings?: { name: string; desc?: boolean }[]
 }): Promise<FigureListResult> {
-  const filters: { name: string; operator: string; value: unknown }[] = []
-  if (params.category) filters.push({ name: 'category', operator: 'eq', value: params.category })
-  if (params.state) filters.push({ name: 'state', operator: 'eq', value: params.state })
-
   const response = await client.query({
     query: gql`
       query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -69,9 +82,9 @@ export async function fetchFigureList(params: {
       }
     `,
     variables: {
-      filters,
+      filters: params.filters ?? [],
       pagination: { page: params.page ?? 1, limit: params.limit ?? 30 },
-      sortings: [{ name: 'updatedAt', desc: true }]
+      sortings: params.sortings?.length ? params.sortings : [{ name: 'updatedAt', desc: true }]
     },
     fetchPolicy: 'network-only'
   })
@@ -88,7 +101,6 @@ export async function fetchFigure(id: string): Promise<Figure> {
           ${FIGURE_LIST_FIELDS}
           source
           properties
-          version
         }
       }
     `,
@@ -145,7 +157,7 @@ export async function updateFigure(id: string, patch: FigurePatch): Promise<Save
     mutation: gql`
       mutation ($id: String!, $patch: FigurePatch!) {
         updateFigure(id: $id, patch: $patch) {
-          figure { ${FIGURE_LIST_FIELDS} source version }
+          figure { ${FIGURE_LIST_FIELDS} source }
           violations { code message at }
         }
       }
@@ -207,3 +219,98 @@ export async function proposeFigure(request: {
 
   return unwrap<FigureProposal>(response, 'proposeFigure')
 }
+
+/**
+ * 발행한다 — 판 번호가 오르고, 그 순간이 판본으로 남는다.
+ *
+ * 이미 발행된 것을 다시 발행하면 서버가 거절한다. 고쳐서 다시 내려면 저장이 먼저이고, 저장은
+ * 발행을 푼다(초안으로 돌아온다).
+ */
+export async function releaseFigure(id: string, comment?: string): Promise<Figure> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ReleaseFigure($id: String!, $comment: String) {
+        releaseFigure(id: $id, comment: $comment) {
+          id
+          version
+          state
+          updatedAt
+        }
+      }
+    `,
+    variables: { id, comment }
+  })
+
+  return unwrap<Figure>(response, 'releaseFigure')
+}
+
+/** 옛 판을 초안으로 되살린다. 정본·속성·그림이 돌아오고 이름·설명은 그대로다. */
+export async function revertFigureVersion(id: string, version: number): Promise<SaveResult> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation RevertFigureVersion($id: String!, $version: Float!) {
+        revertFigureVersion(id: $id, version: $version) {
+          figure { ${FIGURE_LIST_FIELDS} source }
+          violations { code message at }
+        }
+      }
+    `,
+    variables: { id, version }
+  })
+
+  return unwrap<SaveResult>(response, 'revertFigureVersion')
+}
+
+/**
+ * 발행해도 되나 — **누르기 전에** 묻는다.
+ *
+ * 막는 것은 서버의 `releaseFigure` 이고 이것은 이유를 미리 보여 주기 위한 것이다. 허가증이
+ * 아니므로 이 답이 통과라 해도 발행은 다시 판정을 받는다.
+ */
+export async function inspectFigure(id: string): Promise<FigureInspection> {
+  const response = await client.query({
+    query: gql`
+      query InspectFigure($id: String!) {
+        inspectFigure(id: $id) {
+          blocked
+          findings {
+            code
+            message
+            why
+            how
+            at
+            blocking
+          }
+        }
+      }
+    `,
+    variables: { id },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<FigureInspection>(response, 'inspectFigure')
+}
+
+/** 발행된 판들 — 최근 것부터 열 개. */
+export async function fetchFigureVersions(id: string): Promise<FigureVersion[]> {
+  const response = await client.query({
+    query: gql`
+      query FigureVersions($id: String!) {
+        figureVersions(id: $id) {
+          version
+          comment
+          state
+          updatedAt
+          updater { id name }
+          score
+          triangles
+          groups
+        }
+      }
+    `,
+    variables: { id },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<FigureVersion[]>(response, 'figureVersions') ?? []
+}

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 }))
+  }
+}