@things-factory/figure-ui 10.1.3

package/client/bootstrap.ts

@@ -0,0 +1,16 @@
+/**
+ * 클라이언트 부트스트랩.
+ *
+ * 지금은 등록할 것이 없다. 그래도 이 파일을 두는 이유는 `things-factory.config.js` 가
+ * `bootstrap` 을 가리키기 때문이고, 데이터 그리드용 편집기·렌더러나 속성 편집기를
+ * 붙이게 되면 여기가 그 자리다(`board-ui/client/bootstrap.ts` 가 그 예다).
+ *
+ * ## 메뉴는 여기서 걸지 않는다
+ *
+ * things-factory 의 메뉴는 **`menu-base` 의 DB 레코드**다. 코드가 메뉴를 더하는 길은
+ * 없다 — 화면은 `things-factory.config.js` 의 `routes` 로 등록되고, 그 화면을 메뉴에
+ * 올리는 것은 운영자가 메뉴를 만들어 `figure-list` 를 가리키게 하는 일이다.
+ */
+export default function bootstrap() {
+  // 등록할 것이 생기면 여기에 둔다.
+}

package/client/graphql/index.ts

@@ -0,0 +1,209 @@
+import gql from 'graphql-tag'
+import { client } from '@operato/graphql'
+
+import type { Figure, FigureFinding, FigureListResult, FigurePatch, FigureProposal, NewFigure } from '../types.js'
+
+/**
+ * 응답에서 값을 꺼낸다. **서버가 말한 사유를 그대로 올린다.**
+ *
+ * 전에는 `response.data.figures` 처럼 바로 꺼냈다. 서버가 오류를 돌려주면 `data` 가
+ * 없으므로 `Cannot read properties of undefined (reading 'figures')` 가 났고, 화면에는
+ * 그 문장이 그대로 떴다. 사용자는 자기가 무엇을 잘못했는지 알 수 없다 — 실제로 AI
+ * 요청에서 그렇게 났다.
+ *
+ * 값이 `null` 인 것은 오류가 아니다. 지운 것을 물었을 때처럼 없는 것이 답인 경우가 있다.
+ * 여기서 막는 것은 **`data` 자체가 없는 것**이다.
+ */
+function unwrap<T>(response: { data?: Record<string, unknown>; errors?: readonly { message: string }[] }, field: string): T {
+  const said = response.errors?.[0]?.message
+  if (said) throw new Error(said)
+
+  if (!response.data) {
+    throw new Error(`서버가 ${field} 를 돌려주지 않았습니다.`)
+  }
+
+  return response.data[field] as T
+}
+
+
+/**
+ * 목록에 필요한 필드만 가져온다 — `source` 는 무겁고 목록에서 쓰지 않는다.
+ *
+ * `score`·`triangles` 를 함께 받는 이유는 카드에 그것을 보여 주기 때문이다. 저작자가
+ * 목록에서 「이 Figure 가 무거운가」를 바로 알아야 한다.
+ */
+const FIGURE_LIST_FIELDS = `
+  id
+  type
+  name
+  description
+  category
+  state
+  score
+  triangles
+  groups
+  thumbnail
+  thumbnailUpdatedAt
+  updatedAt
+  updater { id name }
+`
+
+export async function fetchFigureList(params: {
+  page?: number
+  limit?: number
+  search?: string
+  category?: string
+  state?: string
+}): 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!]) {
+        figures(filters: $filters, pagination: $pagination, sortings: $sortings) {
+          items { ${FIGURE_LIST_FIELDS} }
+          total
+        }
+      }
+    `,
+    variables: {
+      filters,
+      pagination: { page: params.page ?? 1, limit: params.limit ?? 30 },
+      sortings: [{ name: 'updatedAt', desc: true }]
+    },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<FigureListResult>(response, 'figures')
+}
+
+/** 저작면에 필요한 전부 — `source` 를 포함한다. */
+export async function fetchFigure(id: string): Promise<Figure> {
+  const response = await client.query({
+    query: gql`
+      query ($id: String!) {
+        figure(id: $id) {
+          ${FIGURE_LIST_FIELDS}
+          source
+          properties
+          version
+        }
+      }
+    `,
+    variables: { id },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<Figure>(response, 'figure')
+}
+
+/**
+ * 이미 쓰이고 있는 타입 이름.
+ *
+ * `type` 은 만든 뒤에 고칠 수 없으므로 **만들기 전에** 알려 줘야 한다. 저장을 눌러
+ * 거절당하고 나서 아는 것은 늦다.
+ */
+export async function fetchFigureTypeNames(): Promise<string[]> {
+  const response = await client.query({
+    query: gql`
+      query {
+        figureTypeNames
+      }
+    `,
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<string[] | null>(response, 'figureTypeNames') ?? []
+}
+
+export interface SaveResult {
+  figure: Figure
+  /** 막지 않는 발견. 저장은 됐지만 화면이 보여 줘야 한다. */
+  violations: FigureFinding[]
+}
+
+export async function createFigure(figure: NewFigure): Promise<SaveResult> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($figure: NewFigure!) {
+        createFigure(figure: $figure) {
+          figure { ${FIGURE_LIST_FIELDS} source }
+          violations { code message at }
+        }
+      }
+    `,
+    variables: { figure }
+  })
+
+  return unwrap<SaveResult>(response, 'createFigure')
+}
+
+export async function updateFigure(id: string, patch: FigurePatch): Promise<SaveResult> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!, $patch: FigurePatch!) {
+        updateFigure(id: $id, patch: $patch) {
+          figure { ${FIGURE_LIST_FIELDS} source version }
+          violations { code message at }
+        }
+      }
+    `,
+    variables: { id, patch }
+  })
+
+  return unwrap<SaveResult>(response, 'updateFigure')
+}
+
+export async function deleteFigure(id: string): Promise<boolean> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deleteFigure(id: $id)
+      }
+    `,
+    variables: { id }
+  })
+
+  return unwrap<boolean>(response, 'deleteFigure')
+}
+
+/**
+ * 저작 보조에게 후보를 시킨다.
+ *
+ * 팔레트를 **클라이언트가 보낸다.** 서버는 팔레트를 모른다 — things-scene 이 갖고
+ * 있는데 그 패키지의 node 조건은 팔레트가 없는 번들로 간다. 그리는 쪽이 어떤 토큰을
+ * 풀 수 있는지 아는 유일한 자리이므로 그쪽이 보낸다.
+ *
+ * 돌아오는 것은 **후보**다. 저장되지 않았다 — 저작자가 받아야 정본이 된다.
+ */
+export async function proposeFigure(request: {
+  prompt: string
+  base?: string
+  type?: string
+  palette: string[]
+  image?: File
+}): Promise<FigureProposal> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ProposeFigure($request: ProposeRequest!) {
+        proposeFigure(request: $request) {
+          source
+          score
+          grade
+          triangles
+          groups
+          attempts
+          violations {
+            code
+            message
+          }
+        }
+      }
+    `,
+    variables: { request }
+  })
+
+  return unwrap<FigureProposal>(response, 'proposeFigure')
+}

package/client/index.ts

@@ -0,0 +1,2 @@
+export * from './types.js'
+export * from './graphql/index.js'

package/client/modeller/figure-ask.ts

@@ -0,0 +1,247 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import type { FigureSource } from '@hatiolab/figure-model'
+import { activePalette } from '@hatiolab/things-scene'
+
+import { proposeFigure } from '../graphql/index.js'
+import type { FigureProposal } from '../types.js'
+
+/**
+ * 말로 시키는 줄.
+ *
+ * ## 무엇을 시키는지가 화면에 보여야 한다
+ *
+ * 정본이 있으면 **고치는 것**이고, 없으면 **만드는 것**이다. 같은 칸으로 두 가지를
+ * 하면 저작자가 「이게 지금 것을 덮어쓰나」를 매번 걱정한다. 그래서 무엇을 할지
+ * 칸 옆에 적어 둔다.
+ *
+ * ## 후보를 여기서 받지 않는다
+ *
+ * 이 컴포넌트는 시키고 결과를 **알릴 뿐**이다. 받을지 버릴지는 저작면이 정한다 —
+ * 정본은 한 벌이고 그 한 벌을 가진 자리가 정해야 한다.
+ *
+ * ## 팔레트를 함께 보낸다
+ *
+ * 서버는 팔레트를 모른다. 그리는 쪽이 어떤 토큰을 풀 수 있는지 아는 유일한 자리다.
+ */
+@customElement('figure-ask')
+export class FigureAsk extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: block;
+      background-color: var(--md-sys-color-surface-container-lowest);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      font: var(--label-font, inherit);
+      /*
+        이 줄의 글자 크기를 여기서 정한다.
+
+        안 적어 두면 브라우저 기본 크기(16px)를 물려받는다. 아래 패널들은 전부 12px
+        언저리라 위 두 줄만 커 보이고, 단추가 화면 전체와 따로 논다.
+
+        form 요소(input · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.
+      */
+      font-size: 0.76rem;
+    }
+
+    form {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-medium, 8px);
+      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+    }
+
+    md-icon[lead] {
+      --md-icon-size: 18px;
+      flex: none;
+      color: var(--md-sys-color-primary);
+    }
+
+    input[ask] {
+      flex: 1;
+      min-width: 0;
+      padding: 6px 10px;
+      font: var(--input-field-font, inherit);
+      font-size: 0.78rem;
+      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;
+    }
+    input[ask]:focus {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: -1px;
+    }
+    input[ask][disabled] {
+      opacity: 0.5;
+    }
+
+    /* 무엇을 시키는 것인지 — 만드나 고치나 */
+    span[mode] {
+      flex: none;
+      font-size: 0.72rem;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    /* 그림 붙이기. 붙인 것이 있으면 이름을 보여 준다 */
+    label[picture] {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex: none;
+      padding: 5px 9px;
+      font-size: 0.74rem;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    label[picture]:hover {
+      background-color: var(--md-sys-color-surface-container);
+    }
+    label[picture][has] {
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border-color: transparent;
+    }
+    label[picture] md-icon {
+      --md-icon-size: 16px;
+    }
+    label[picture] input {
+      display: none;
+    }
+    span[filename] {
+      max-width: 8em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /*
+      채운 파랑 단추를 저장과 나눠 갖지 않는다.
+
+      머리줄의 저장이 이 화면의 주 동작이다. 바로 아래 줄에 같은 파랑 단추가 하나 더
+      있으면 어느 쪽이 주인지 눈이 못 고른다. 이쪽은 톤 단추로 한 단계 내린다.
+    */
+    button[go] {
+      flex: none;
+      padding: 6px 14px;
+      font: var(--label-font, inherit);
+      font-size: 0.76rem;
+      font-weight: 600;
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    button[go]:hover:not([disabled]) {
+      background-color: color-mix(in srgb, var(--md-sys-color-primary) 24%, var(--md-sys-color-primary-container));
+    }
+    button[go][disabled] {
+      opacity: 0.4;
+      cursor: default;
+    }
+
+    /* 못 만들었을 때. 사유를 삼키지 않는다 — 말을 고쳐 다시 시킬 단서다 */
+    div[failed] {
+      display: flex;
+      gap: 6px;
+      padding: 0 var(--spacing-large, 12px) var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      font-size: 0.74rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-error);
+    }
+    div[failed] md-icon {
+      --md-icon-size: 16px;
+      flex: none;
+    }
+  `
+
+  /** 지금 정본. 있으면 고치는 것이고 없으면 만드는 것이다. */
+  @property({ type: Object }) source?: FigureSource
+  /** 새로 만들 때 쓸 타입 이름. */
+  @property({ type: String }) type = ''
+
+  @state() private asking = false
+  @state() private failure = ''
+  @state() private picture?: File
+
+  render() {
+    const revising = !!this.source
+
+    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>
+        <input
+          ask
+          ?disabled=${this.asking}
+          placeholder=${i18next.t(revising ? 'text.ask-revise-example' : 'text.ask-create-example')}
+        />
+        <label picture ?has=${!!this.picture} title=${i18next.t('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')}
+          <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')}
+        </button>
+      </form>
+
+      ${this.failure
+        ? html`
+            <div failed>
+              <md-icon>error</md-icon>
+              <span>${this.failure}</span>
+            </div>
+          `
+        : nothing}
+    `
+  }
+
+  private pick(e: Event) {
+    const input = e.target as HTMLInputElement
+    this.picture = input.files?.[0]
+  }
+
+  private async submit(e: Event) {
+    e.preventDefault()
+
+    const input = this.renderRoot.querySelector('input[ask]') as HTMLInputElement
+    const prompt = input?.value?.trim()
+    if (!prompt || this.asking) {
+      return
+    }
+
+    this.asking = true
+    this.failure = ''
+
+    try {
+      const proposal = await proposeFigure({
+        prompt,
+        base: this.source ? JSON.stringify(this.source) : undefined,
+        type: this.source ? undefined : this.type,
+        // 그리는 쪽이 풀 수 있는 토큰만 보낸다. 서버는 이 목록 밖의 색을 거절한다.
+        palette: Object.keys(activePalette() as Record<string, string>),
+        image: this.picture
+      })
+
+      this.dispatchEvent(
+        new CustomEvent('proposed', { detail: { proposal }, bubbles: true, composed: true })
+      )
+      input.value = ''
+      this.picture = undefined
+    } catch (err) {
+      // 사유를 그대로 보여 준다. 「실패했습니다」로 뭉개면 말을 어떻게 고칠지 모른다.
+      this.failure = (err as Error).message
+    } finally {
+      this.asking = false
+    }
+  }
+}