@things-factory/figure-ui 10.1.5 → 10.1.7

package/client/pages/figure-modeller-page.ts

@@ -68,29 +68,23 @@ function rememberPanes(panes: Panes): void {
 }
 
 /**
- * 새로 만든 Figure 의 시작 상태. **씬 모델로 만든다.**
+ * 새로 만든 Figure 의 시작 상태 — **빈 상자 하나뿐이다.**
  *
- * 빈 상태로 시작하면 검증이 곧바로 오류를 낸다 — 사용자가 아무것도 하지 않았는데 빨간
- * 화면을 보게 된다. 그래서 부품 하나를 놓아 준다. **처음 열었을 때 바로 무언가 보이는
- * 것**이 이 도구를 익히는 첫 단계다.
+ * 전에는 부품(300 상자)을 하나 놓아 주었다. 형식이 부품 0개를 오류로 보기 때문이다
+ * (`missing-parts` — parts 가 없다). 그래서 아무것도 안 했는데 붉은 판정이 뜨는 것을 피하려고
+ * 상자를 깔았다.
+ *
+ * **그런데 「무조건 상자」는 대개 첫 동작이 그것을 지우는 일이 된다** — 컨베이어를 만들 사람도,
+ * 시그널타워를 만들 사람도 상자부터 치운다. 그래서 비운다. 형식은 그대로 두고(부품 없는 것은
+ * 발행할 수 없는 것이 맞다) **화면이 「아직 저작 안 함」과 「형식을 어김」을 가른다.**
+ *
+ * 빈 화면이 가르치는 자리다: 부품 목록이 「위에서 도형을 골라 시작하세요」를 이미 말하고 팔레트가
+ * 바로 그 위에 있다(`figure-parts`).
  */
 function startingModel(type: string): { board: BoardModel; parts: PartModel[] } {
   return {
     board: { width: 300, height: 300, depth: 300, figureType: type, detailLevel: 'M' },
-    parts: [
-      {
-        type: 'figure-part',
-        name: 'body',
-        primitive: 'cube',
-        left: 0,
-        top: 0,
-        width: 300,
-        height: 300,
-        zPos: 0,
-        depth: 300,
-        token: 'palette.primary'
-      }
-    ]
+    parts: []
   }
 }
 
@@ -251,6 +245,23 @@ export class FigureModellerPage extends FigureModellerPageBase {
       cursor: default;
     }
 
+    /*
+      저장이 거절된 사유. 단추 **바로 왼쪽**에 둔다 — 누른 자리에서 답을 봐야 한다. 길면 줄이지만
+      전문은 title 로 남긴다(서버 문장이 길 수 있다).
+    */
+    span[save-failed] {
+      max-width: 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 4px 8px;
+      font: var(--label-font, inherit);
+      font-size: 0.72rem;
+      color: var(--md-sys-color-on-error-container, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-error-container);
+      border-radius: 6px;
+    }
+
     /*
       칸을 벡터 저작도구의 관례대로 놓는다 — 왼쪽에 무엇이 있나(레이어), 오른쪽에
       고른 것의 속성. 쓰는 사람이 이미 아는 자리라 배울 것이 하나 줄어든다.
@@ -510,6 +521,16 @@ export class FigureModellerPage extends FigureModellerPageBase {
   @state() private dirty = false
   @state() private saving = false
   @state() private violations: FigureFinding[] = []
+  /**
+   * 저장이 왜 안 됐나.
+   *
+   * **`save()` 에 `catch` 가 없었다.** `try … finally` 뿐이라 서버가 거절하면(형식 위반 · 타입 이름
+   * 중복 · 권한 없음 · 네트워크) 단추만 멈추고 화면은 **아무 말도 하지 않았다.** 저작자는 눌렀는데
+   * 아무 일도 안 난 것으로 보고, 저장됐는지 아닌지도 알 수 없었다.
+   *
+   * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
+   */
+  @state() private saveFailure = ''
   /** 저작 보조가 낸 후보. 받기 전에는 원본 데이터가 아니다. */
   @state() private proposal?: FigureSource
   /** 그 후보의 셈. 무엇을 받는 것인지 숫자로도 보여 준다. */
@@ -533,7 +554,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
   get context() {
     return {
-      title: this.figure?.name ?? i18next.t('title.new-figure'),
+      title: this.figure?.name ?? i18next.t('figure.title.new-figure'),
       /*
         **제목 줄은 끈다.** 이름은 그대로 둔다.
 
@@ -558,7 +579,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
           하네스 시절의 자리였다 — 앱에서는 셸이 페이지 제목으로 같은 이름을 그리므로 글자가 두 번
           나오고, 캔버스가 주인공인 화면에서 그만큼 높이를 잃었다.
         -->
-        ${this.dirty ? html`<span dirty>${i18next.t('text.unsaved-changes')}</span>` : ''}
+        ${this.dirty ? html`<span dirty>${i18next.t('figure.text.unsaved-changes')}</span>` : ''}
         <!--
           말로 시키는 줄이 머리줄의 남는 폭을 쓴다. 따로 두면 화면 위가 두 줄이 되고, 그 위 줄은
           이름을 페이지 제목과 겹쳐 적는다.
@@ -568,8 +589,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
           .type=${source?.type ?? ''}
           @proposed=${(e: CustomEvent) => this.receive(e.detail.proposal)}
         ></figure-ask>
+        ${this.saveFailure ? html`<span save-failed title=${this.saveFailure}>${this.saveFailure}</span>` : ''}
         <button save ?disabled=${!this.canSave} @click=${() => this.save()}>
-          ${this.saving ? i18next.t('text.saving') : i18next.t('button.save')}
+          ${this.saving ? i18next.t('figure.text.saving-figure') : i18next.t('figure.button.save')}
         </button>
       </div>
 
@@ -578,6 +600,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
         ?collapse-left=${this.collapsed.left}
         ?collapse-right=${this.collapsed.right}
         @figure-rename=${(e: CustomEvent) => this.rename(e.detail.name)}
+        @figure-catalog=${(e: CustomEvent) => this.catalog(e.detail)}
         @figure-released=${(e: CustomEvent) => this.released(e.detail.figure)}
         @figure-reverted=${() => this.figure?.id && this.load(this.figure.id)}
         @add-part=${(e: CustomEvent) => this.addPart(e.detail.primitive)}
@@ -591,6 +614,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
         @toggle-part-hidden=${(e: CustomEvent) => this.toggleHidden(e.detail.index)}
         @set-all-parts-hidden=${(e: CustomEvent) => this.setAllHidden(e.detail.hidden)}
         @change-detail-level=${(e: CustomEvent) => this.changeDetailLevel(e.detail.level)}
+        @update-board=${(e: CustomEvent) => this.updateBoard(e.detail.board)}
         @part-tool=${(e: CustomEvent) => this.runTool(e.detail.index, e.detail.tool, e.detail.axis)}
         @pick-part=${(e: CustomEvent) => this.pickPart(e.detail.name)}
       >
@@ -607,7 +631,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
             ? html`
                 <div lanes>
                   <div lane>
-                    <h4>${i18next.t('label.now')}</h4>
+                    <h4>${i18next.t('figure.label.now')}</h4>
                     <figure-canvas
                       .board=${this.board}
                       .parts=${this.parts}
@@ -617,11 +641,11 @@ export class FigureModellerPage extends FigureModellerPageBase {
                   </div>
                   <div lane candidate>
                     <h4>
-                      ${i18next.t('label.proposed')}
+                      ${i18next.t('figure.label.proposed')}
                       ${this.proposalOf
                         ? html`<small>
                             ${this.proposalOf.grade} ·
-                            ${i18next.t('text.n-triangles', { count: this.proposalOf.triangles })}
+                            ${i18next.t('figure.text.n-triangles', { count: this.proposalOf.triangles })}
                           </small>`
                         : ''}
                     </h4>
@@ -640,6 +664,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
         <figure-side
           .figureName=${this.figure?.name ?? ''}
+          .figureCategory=${this.figure?.category}
+          .figureTags=${this.figure?.tags}
           .figureId=${this.figure?.id ?? ''}
           .figureState=${this.figure?.state}
           .figureVersion=${this.figure?.version ?? 0}
@@ -677,10 +703,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
       <button
         mode
         ?on=${this.mode === mode}
-        title=${i18next.t('text.mode-' + mode + '-explained')}
+        title=${i18next.t('figure.text.mode-' + mode + '-explained')}
         @click=${() => (this.mode = mode)}
       >
-        ${i18next.t('label.mode-' + mode)}
+        ${i18next.t('figure.label.mode-' + mode)}
       </button>
     `
 
@@ -706,7 +732,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
     return html`
       <button
         collapse
-        title=${i18next.t(`text.${gone ? 'expand' : 'collapse'}-${pane}-pane`)}
+        title=${i18next.t(`figure.text.${gone ? 'expand' : 'collapse'}-${pane}-pane`)}
         @click=${() => this.toggleCollapse(side)}
       >
         <md-icon>${gone ? back : shut}</md-icon>
@@ -755,11 +781,11 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
     return html`
       <div decide>
-        <span>${i18next.t('text.assistant-proposed-a-figure')}</span>
+        <span>${i18next.t('figure.text.assistant-proposed-a-figure')}</span>
         <div spacer></div>
-        <button drop @click=${() => this.discard()}>${i18next.t('button.discard')}</button>
+        <button drop @click=${() => this.discard()}>${i18next.t('figure.button.discard')}</button>
         <button take ?disabled=${errors.length > 0 || this.picked.size === 0} @click=${() => this.take()}>
-          ${i18next.t('button.take-n-changes', { n: this.picked.size })}
+          ${i18next.t('figure.button.take-n-changes', { n: this.picked.size })}
         </button>
       </div>
 
@@ -771,7 +797,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
           `
         : ''}
       ${errors.length > 0
-        ? html`<p blocked>${i18next.t('text.picked-changes-do-not-validate')} — ${errors[0].message}</p>`
+        ? html`<p blocked>${i18next.t('figure.text.picked-changes-do-not-validate')} — ${errors[0].message}</p>`
         : violations.length > 0
           ? html`<p blocked warn>${violations[0].message}</p>`
           : ''}
@@ -796,7 +822,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
       <button
         change
         ?on=${on}
-        title=${i18next.t('text.change-' + change.kind)}
+        title=${i18next.t('figure.text.change-' + change.kind)}
         @click=${() => this.toggle(change.key)}
       >
         <md-icon>${icon}</md-icon>
@@ -866,9 +892,18 @@ export class FigureModellerPage extends FigureModellerPageBase {
    *
    * 형식을 어긴 원본 데이터로는 저장을 누를 수 없게 한다. 눌렀다가 서버가 받아주지 않는 것보다,
    * 누를 수 없는 이유가 판단 패널에 떠 있는 것이 낫다.
+   *
+   * ## 바뀐 것이 없으면 누를 수 없다
+   *
+   * **`dirty` 를 안 보고 있었다.** 저장한 직후에도 단추가 살아 있어 같은 정본을 몇 번이고 다시 쓸
+   * 수 있었고, 저장마다 썸네일을 새로 찍어 20KB 를 다시 넣고 `thumbnailUpdatedAt` 을 올렸다 —
+   * 그림 주소의 판이 바뀌므로 브라우저 캐시도 함께 버려진다. 바뀐 것이 없는데 일어날 일이 아니다.
+   *
+   * 새로 만드는 중인 것은 `startNew` 가 `dirty` 로 시작하므로 첫 저장이 막히지 않는다.
+   * 저장이 거절되면 `dirty` 를 그대로 두므로 다시 누를 수 있다.
    */
   private get canSave(): boolean {
-    if (this.saving || !this.folded || !this.figure?.name) {
+    if (this.saving || !this.dirty || !this.folded || !this.figure?.name) {
       return false
     }
     return validate(this.folded).errors.length === 0
@@ -880,9 +915,41 @@ export class FigureModellerPage extends FigureModellerPageBase {
     }
 
     const id = lifecycle?.resourceId
-    if (id && id !== this.figure?.id) {
-      await this.load(id)
-    } else if (!id && !this.figure) {
+
+    if (id) {
+      if (id !== this.figure?.id) {
+        await this.load(id)
+      }
+      return
+    }
+
+    /*
+      ── id 없이 들어온 것은 「새로 만든다」는 뜻이다 ─────────────────────────────
+      전에는 `!this.figure` 일 때만 새로 시작했다. 셸은 페이지를 살려 두므로(MDI 탭) 카탈로그에서
+      하나 열어 본 뒤에는 이 페이지가 그 도형을 계속 들고 있고, 그래서 「새 figure」가 **아무 일도
+      하지 않았다.**
+
+      그것보다 나쁜 것이 있었다 — 화면에는 옛 도형이 그대로 있으니 사람은 새 것인 줄 알고 고치고
+      저장한다. 그러면 **열려 있던 도형에 덮어쓴다.** 「안 열린다」로 보이던 것이 실은 그 문이었다.
+
+      들고 있는 것이 **저장된 도형이면**(id 가 있으면) 새로 시작한다. 아직 저장 안 한 새 도형을
+      들고 있으면 그대로 둔다 — 페이지를 다시 들렀다고 저작 중인 것을 버리지 않는다.
+    */
+    if (!this.figure) {
+      this.startNew()
+      return
+    }
+
+    if (this.figure.id) {
+      /*
+        고치던 것이 있으면 묻는다. 저작한 것을 말없이 버리지 않는다 — 되돌릴 수 없다.
+        그만두면 보고 있던 도형의 주소로 되돌려 화면과 주소가 어긋나지 않게 한다.
+      */
+      if (this.dirty && !confirm(i18next.t('figure.text.discard-changes-and-start-new'))) {
+        navigate(`figure-modeller/${this.figure.id}`, true)
+        return
+      }
+
       this.startNew()
     }
   }
@@ -892,8 +959,14 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
     this.figure = figure
 
-    /* 그림이 없으면 이 자리에서 채운다(아래 `fillThumbnail`). 기다리지 않는다 — 화면이 먼저다. */
-    if (!figure.thumbnail && figure.id) {
+    /*
+      그림이 없으면 이 자리에서 채운다(아래 `fillThumbnail`). 기다리지 않는다 — 화면이 먼저다.
+
+      **`thumbnail` 이 아니라 `thumbnailUpdatedAt` 으로 판정한다.** 그림 자체는 목록·낱개 질의가
+      가져오지 않는다(base64 라서 무겁고 캐시가 안 된다 — 주소로 부른다). 없는 칸으로 판정하면
+      늘 「그림이 없다」가 되어 저작면을 열 때마다 다시 찍어 저장하게 된다.
+    */
+    if (!figure.thumbnailUpdatedAt && figure.id) {
       void this.fillThumbnail(figure.id)
     }
 
@@ -927,7 +1000,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.figure = { id: '', type: draftType, name: '' } as Figure
     this.board = board
     this.parts = parts
-    this.selected = 0
+    /* 고른 것이 없다 — 부품이 없으니 속성 패널도 고를 것을 기다린다. */
+    this.selected = -1
     this.dirty = true
     this.violations = []
   }
@@ -939,6 +1013,19 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.dirty = true
   }
 
+  /**
+   * 분류와 태그를 고친다.
+   *
+   * 정본(`source`)이 아니라 **카탈로그의 값**이다 — 도형이 무엇으로 생겼는지가 아니라 어디에
+   * 걸리는지다. 그래서 점수도 발행도 흔들리지 않는다.
+   */
+  private catalog(patch: { category?: string; tags?: string[] }) {
+    if (!this.figure) return
+
+    this.figure = { ...this.figure, ...patch }
+    this.dirty = true
+  }
+
   /**
    * 부품 목록을 갈아 끼운다.
    *
@@ -973,6 +1060,17 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.put(edits.updatePart(this.parts, index, part))
   }
 
+  /**
+   * 판 자체의 값을 갈아 끼운다 — 능력처럼 부품보다 위에 있는 것들.
+   *
+   * 부품 목록은 건드리지 않는다. `put` 은 부품을 함께 받으므로 여기서 쓰면 능력 하나를
+   * 고칠 때마다 부품 목록이 새 배열이 되고, 그리는 쪽이 전부 다시 그린다.
+   */
+  private updateBoard(board: BoardModel) {
+    this.board = board
+    this.dirty = true
+  }
+
   /**
    * 디테일 등급을 바꾼다.
    *
@@ -1101,8 +1199,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
     }
 
     try {
-      await updateFigure(id, { thumbnail })
-      this.figure = { ...this.figure, thumbnail }
+      const { figure } = await updateFigure(id, { thumbnail })
+      /* 서버가 찍은 시각을 그대로 받는다 — 이 값이 그림을 부르는 주소의 판 번호가 된다. */
+      this.figure = { ...this.figure, thumbnailUpdatedAt: figure?.thumbnailUpdatedAt }
     } catch (e) {
       /* 볼 권한만 있는 사람일 수 있다. 화면은 그대로 두고 조용히 넘어간다. */
       console.warn(`[thumbnail] ${id} 를 채우지 못했습니다 — ${(e as Error).message}`)
@@ -1115,6 +1214,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
     }
 
     this.saving = true
+    this.saveFailure = ''
     try {
       const sourceJson = JSON.stringify(this.folded)
       /*
@@ -1130,6 +1230,12 @@ export class FigureModellerPage extends FigureModellerPageBase {
       if (this.figure.id) {
         const result = await updateFigure(this.figure.id, {
           name: this.figure.name,
+          /*
+            카탈로그의 값도 함께 보낸다. 화면에서 고쳐 놓고 저장에 안 실으면 저장 뒤에 조용히
+            사라진다 — 저작자는 저장했다고 보고 다시 열면 없다.
+          */
+          category: this.figure.category,
+          tags: this.figure.tags,
           source: sourceJson,
           thumbnail
         })
@@ -1140,12 +1246,14 @@ export class FigureModellerPage extends FigureModellerPageBase {
         // 만든 뒤에는 고칠 수 없으므로 여기서 걸러야 한다.
         const taken = await fetchFigureTypeNames()
         if (taken.includes(this.folded.type)) {
-          throw new Error(i18next.t('text.type-name-already-taken', { type: this.folded.type }))
+          throw new Error(i18next.t('figure.text.type-name-already-taken', { type: this.folded.type }))
         }
 
         const result = await createFigure({
           type: this.folded.type,
           name: this.figure.name,
+          category: this.figure.category,
+          tags: this.figure.tags,
           source: sourceJson,
           thumbnail
         })
@@ -1155,6 +1263,14 @@ export class FigureModellerPage extends FigureModellerPageBase {
       }
 
       this.dirty = false
+    } catch (e) {
+      /*
+        **서버가 말한 사유를 그대로 올린다.** 여기서 문장을 다시 지으면 무엇이 걸렸는지 알 수 없다 —
+        타입 이름이 이미 쓰였다는 것과 권한이 없다는 것은 저작자가 할 일이 다르다.
+
+        `dirty` 는 건드리지 않는다. 저장이 안 됐으므로 미저장인 것이 사실이다.
+      */
+      this.saveFailure = (e as Error).message
     } finally {
       this.saving = false
     }

package/client/types.ts

@@ -14,7 +14,10 @@ export interface Figure {
   type: string
   name: string
   description?: string
+  /** 분류 하나 — 팔레트에서 묶어 보이는 기준. */
   category?: string
+  /** 태그 여럿 — 분류로는 못 하는 찾기. */
+  tags?: string[]
   state?: 'draft' | 'released'
   /** 재활용 점수 0~100. 서버가 정본에서 계산한다 — 화면이 보내는 값이 아니다. */
   score?: number
@@ -63,6 +66,7 @@ export interface NewFigure {
   name: string
   description?: string
   category?: string
+  tags?: string[]
   source: string
   properties?: string
   state?: 'draft' | 'released'
@@ -79,6 +83,8 @@ export interface FigurePatch {
   name?: string
   description?: string
   category?: string
+  /** 빈 배열은 「전부 지운다」, 안 주는 것은 「건드리지 않는다」. */
+  tags?: string[]
   source?: string
   properties?: string
   state?: 'draft' | 'released'
@@ -111,3 +117,28 @@ export interface FigureProposal {
   /** 몇 번 만에 됐나. 진단용이다. */
   attempts: number
 }
+
+/**
+ * 발행 판정 한 줄.
+ *
+ * `FigureFinding` 과 달리 **`blocking` 이 있다.** 저장 쪽 발견은 정의상 막지 않는 것들이고,
+ * 발행 판정은 막는 것과 알리는 것을 함께 내므로 어느 쪽인지를 값이 스스로 말한다 — 코드를 보고
+ * 화면이 다시 분류하면 규칙이 두 벌이 된다.
+ */
+export interface FigureGateFinding {
+  code: string
+  message: string
+  /** 왜 그것이 문제인가 — 사람이 무엇을 보게 되나. */
+  why?: string
+  /** 무엇을 바꾸면 되나 — 부품 이름과 값으로. */
+  how?: string
+  /** 갈라진 부품 이름들, 또는 정본 안의 경로. */
+  at?: string
+  blocking: boolean
+}
+
+/** 발행해도 되나. `blocked` 면 서버가 거절한다. */
+export interface FigureInspection {
+  blocked: boolean
+  findings: FigureGateFinding[]
+}