@things-factory/figure-ui 10.1.5 → 10.1.7

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

@@ -54,6 +54,16 @@ export declare class FigureModellerPage extends FigureModellerPageBase {
     private dirty;
     private saving;
     private violations;
+    /**
+     * 저장이 왜 안 됐나.
+     *
+     * **`save()` 에 `catch` 가 없었다.** `try … finally` 뿐이라 서버가 거절하면(형식 위반 · 타입 이름
+     * 중복 · 권한 없음 · 네트워크) 단추만 멈추고 화면은 **아무 말도 하지 않았다.** 저작자는 눌렀는데
+     * 아무 일도 안 난 것으로 보고, 저장됐는지 아닌지도 알 수 없었다.
+     *
+     * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
+     */
+    private saveFailure;
     /** 저작 보조가 낸 후보. 받기 전에는 원본 데이터가 아니다. */
     private proposal?;
     /** 그 후보의 셈. 무엇을 받는 것인지 숫자로도 보여 준다. */
@@ -144,6 +154,15 @@ export declare class FigureModellerPage extends FigureModellerPageBase {
      *
      * 형식을 어긴 원본 데이터로는 저장을 누를 수 없게 한다. 눌렀다가 서버가 받아주지 않는 것보다,
      * 누를 수 없는 이유가 판단 패널에 떠 있는 것이 낫다.
+     *
+     * ## 바뀐 것이 없으면 누를 수 없다
+     *
+     * **`dirty` 를 안 보고 있었다.** 저장한 직후에도 단추가 살아 있어 같은 정본을 몇 번이고 다시 쓸
+     * 수 있었고, 저장마다 썸네일을 새로 찍어 20KB 를 다시 넣고 `thumbnailUpdatedAt` 을 올렸다 —
+     * 그림 주소의 판이 바뀌므로 브라우저 캐시도 함께 버려진다. 바뀐 것이 없는데 일어날 일이 아니다.
+     *
+     * 새로 만드는 중인 것은 `startNew` 가 `dirty` 로 시작하므로 첫 저장이 막히지 않는다.
+     * 저장이 거절되면 `dirty` 를 그대로 두므로 다시 누를 수 있다.
      */
     private get canSave();
     pageUpdated(changes: Record<string, unknown>, lifecycle: {
@@ -152,6 +171,13 @@ export declare class FigureModellerPage extends FigureModellerPageBase {
     private load;
     private startNew;
     private rename;
+    /**
+     * 분류와 태그를 고친다.
+     *
+     * 정본(`source`)이 아니라 **카탈로그의 값**이다 — 도형이 무엇으로 생겼는지가 아니라 어디에
+     * 걸리는지다. 그래서 점수도 발행도 흔들리지 않는다.
+     */
+    private catalog;
     /**
      * 부품 목록을 갈아 끼운다.
      *
@@ -164,6 +190,13 @@ export declare class FigureModellerPage extends FigureModellerPageBase {
     private duplicatePart;
     private movePart;
     private updatePart;
+    /**
+     * 판 자체의 값을 갈아 끼운다 — 능력처럼 부품보다 위에 있는 것들.
+     *
+     * 부품 목록은 건드리지 않는다. `put` 은 부품을 함께 받으므로 여기서 쓰면 능력 하나를
+     * 고칠 때마다 부품 목록이 새 배열이 되고, 그리는 쪽이 전부 다시 그린다.
+     */
+    private updateBoard;
     /**
      * 디테일 등급을 바꾼다.
      *

package/dist-client/pages/figure-modeller-page.js

@@ -47,29 +47,23 @@ function rememberPanes(panes) {
     }
 }
 /**
- * 새로 만든 Figure 의 시작 상태. **씬 모델로 만든다.**
+ * 새로 만든 Figure 의 시작 상태 — **빈 상자 하나뿐이다.**
  *
- * 빈 상태로 시작하면 검증이 곧바로 오류를 낸다 — 사용자가 아무것도 하지 않았는데 빨간
- * 화면을 보게 된다. 그래서 부품 하나를 놓아 준다. **처음 열었을 때 바로 무언가 보이는
- * 것**이 이 도구를 익히는 첫 단계다.
+ * 전에는 부품(300 상자)을 하나 놓아 주었다. 형식이 부품 0개를 오류로 보기 때문이다
+ * (`missing-parts` — parts 가 없다). 그래서 아무것도 안 했는데 붉은 판정이 뜨는 것을 피하려고
+ * 상자를 깔았다.
+ *
+ * **그런데 「무조건 상자」는 대개 첫 동작이 그것을 지우는 일이 된다** — 컨베이어를 만들 사람도,
+ * 시그널타워를 만들 사람도 상자부터 치운다. 그래서 비운다. 형식은 그대로 두고(부품 없는 것은
+ * 발행할 수 없는 것이 맞다) **화면이 「아직 저작 안 함」과 「형식을 어김」을 가른다.**
+ *
+ * 빈 화면이 가르치는 자리다: 부품 목록이 「위에서 도형을 골라 시작하세요」를 이미 말하고 팔레트가
+ * 바로 그 위에 있다(`figure-parts`).
  */
 function startingModel(type) {
     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: []
     };
 }
 /**
@@ -122,6 +116,16 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.dirty = false;
         this.saving = false;
         this.violations = [];
+        /**
+         * 저장이 왜 안 됐나.
+         *
+         * **`save()` 에 `catch` 가 없었다.** `try … finally` 뿐이라 서버가 거절하면(형식 위반 · 타입 이름
+         * 중복 · 권한 없음 · 네트워크) 단추만 멈추고 화면은 **아무 말도 하지 않았다.** 저작자는 눌렀는데
+         * 아무 일도 안 난 것으로 보고, 저장됐는지 아닌지도 알 수 없었다.
+         *
+         * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
+         */
+        this.saveFailure = '';
         /** 받기로 고른 변경들. 처음에는 전부 골라 둔다. */
         this.picked = new Set();
     }
@@ -258,6 +262,23 @@ let FigureModellerPage = 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;
+    }
+
     /*
       칸을 벡터 저작도구의 관례대로 놓는다 — 왼쪽에 무엇이 있나(레이어), 오른쪽에
       고른 것의 속성. 쓰는 사람이 이미 아는 자리라 배울 것이 하나 줄어든다.
@@ -494,7 +515,7 @@ let FigureModellerPage = 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'),
             /*
               **제목 줄은 끈다.** 이름은 그대로 둔다.
       
@@ -517,7 +538,7 @@ let FigureModellerPage = 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>` : ''}
         <!--
           말로 시키는 줄이 머리줄의 남는 폭을 쓴다. 따로 두면 화면 위가 두 줄이 되고, 그 위 줄은
           이름을 페이지 제목과 겹쳐 적는다.
@@ -527,8 +548,9 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
           .type=${source?.type ?? ''}
           @proposed=${(e) => 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>
 
@@ -537,6 +559,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         ?collapse-left=${this.collapsed.left}
         ?collapse-right=${this.collapsed.right}
         @figure-rename=${(e) => this.rename(e.detail.name)}
+        @figure-catalog=${(e) => this.catalog(e.detail)}
         @figure-released=${(e) => this.released(e.detail.figure)}
         @figure-reverted=${() => this.figure?.id && this.load(this.figure.id)}
         @add-part=${(e) => this.addPart(e.detail.primitive)}
@@ -550,6 +573,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         @toggle-part-hidden=${(e) => this.toggleHidden(e.detail.index)}
         @set-all-parts-hidden=${(e) => this.setAllHidden(e.detail.hidden)}
         @change-detail-level=${(e) => this.changeDetailLevel(e.detail.level)}
+        @update-board=${(e) => this.updateBoard(e.detail.board)}
         @part-tool=${(e) => this.runTool(e.detail.index, e.detail.tool, e.detail.axis)}
         @pick-part=${(e) => this.pickPart(e.detail.name)}
       >
@@ -566,7 +590,7 @@ let FigureModellerPage = 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}
@@ -576,11 +600,11 @@ let FigureModellerPage = 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>
@@ -599,6 +623,8 @@ let FigureModellerPage = 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}
@@ -635,10 +661,10 @@ let FigureModellerPage = 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>
     `;
         return html `<div modes>
@@ -661,7 +687,7 @@ let FigureModellerPage = 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>
@@ -706,11 +732,11 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         const { errors, violations } = validate(picked);
         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>
 
@@ -722,7 +748,7 @@ let FigureModellerPage = 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>`
                 : ''}
@@ -744,7 +770,7 @@ let FigureModellerPage = 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>
@@ -804,9 +830,18 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      *
      * 형식을 어긴 원본 데이터로는 저장을 누를 수 없게 한다. 눌렀다가 서버가 받아주지 않는 것보다,
      * 누를 수 없는 이유가 판단 패널에 떠 있는 것이 낫다.
+     *
+     * ## 바뀐 것이 없으면 누를 수 없다
+     *
+     * **`dirty` 를 안 보고 있었다.** 저장한 직후에도 단추가 살아 있어 같은 정본을 몇 번이고 다시 쓸
+     * 수 있었고, 저장마다 썸네일을 새로 찍어 20KB 를 다시 넣고 `thumbnailUpdatedAt` 을 올렸다 —
+     * 그림 주소의 판이 바뀌므로 브라우저 캐시도 함께 버려진다. 바뀐 것이 없는데 일어날 일이 아니다.
+     *
+     * 새로 만드는 중인 것은 `startNew` 가 `dirty` 로 시작하므로 첫 저장이 막히지 않는다.
+     * 저장이 거절되면 `dirty` 를 그대로 두므로 다시 누를 수 있다.
      */
     get canSave() {
-        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;
@@ -816,18 +851,51 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             return;
         }
         const id = lifecycle?.resourceId;
-        if (id && id !== this.figure?.id) {
-            await this.load(id);
+        if (id) {
+            if (id !== this.figure?.id) {
+                await this.load(id);
+            }
+            return;
+        }
+        /*
+          ── id 없이 들어온 것은 「새로 만든다」는 뜻이다 ─────────────────────────────
+          전에는 `!this.figure` 일 때만 새로 시작했다. 셸은 페이지를 살려 두므로(MDI 탭) 카탈로그에서
+          하나 열어 본 뒤에는 이 페이지가 그 도형을 계속 들고 있고, 그래서 「새 figure」가 **아무 일도
+          하지 않았다.**
+    
+          그것보다 나쁜 것이 있었다 — 화면에는 옛 도형이 그대로 있으니 사람은 새 것인 줄 알고 고치고
+          저장한다. 그러면 **열려 있던 도형에 덮어쓴다.** 「안 열린다」로 보이던 것이 실은 그 문이었다.
+    
+          들고 있는 것이 **저장된 도형이면**(id 가 있으면) 새로 시작한다. 아직 저장 안 한 새 도형을
+          들고 있으면 그대로 둔다 — 페이지를 다시 들렀다고 저작 중인 것을 버리지 않는다.
+        */
+        if (!this.figure) {
+            this.startNew();
+            return;
         }
-        else if (!id && !this.figure) {
+        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();
         }
     }
     async load(id) {
         const figure = await fetchFigure(id);
         this.figure = figure;
-        /* 그림이 없으면 이 자리에서 채운다(아래 `fillThumbnail`). 기다리지 않는다 — 화면이 먼저다. */
-        if (!figure.thumbnail && figure.id) {
+        /*
+          그림이 없으면 이 자리에서 채운다(아래 `fillThumbnail`). 기다리지 않는다 — 화면이 먼저다.
+    
+          **`thumbnail` 이 아니라 `thumbnailUpdatedAt` 으로 판정한다.** 그림 자체는 목록·낱개 질의가
+          가져오지 않는다(base64 라서 무겁고 캐시가 안 된다 — 주소로 부른다). 없는 칸으로 판정하면
+          늘 「그림이 없다」가 되어 저작면을 열 때마다 다시 찍어 저장하게 된다.
+        */
+        if (!figure.thumbnailUpdatedAt && figure.id) {
             void this.fillThumbnail(figure.id);
         }
         // 서버가 준 것을 그대로 쓴다. 읽지 못하면 오류보고없이 빈 상태로 바꾸지 않는다.
@@ -857,7 +925,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.figure = { id: '', type: draftType, name: '' };
         this.board = board;
         this.parts = parts;
-        this.selected = 0;
+        /* 고른 것이 없다 — 부품이 없으니 속성 패널도 고를 것을 기다린다. */
+        this.selected = -1;
         this.dirty = true;
         this.violations = [];
     }
@@ -867,6 +936,18 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.figure = { ...this.figure, name };
         this.dirty = true;
     }
+    /**
+     * 분류와 태그를 고친다.
+     *
+     * 정본(`source`)이 아니라 **카탈로그의 값**이다 — 도형이 무엇으로 생겼는지가 아니라 어디에
+     * 걸리는지다. 그래서 점수도 발행도 흔들리지 않는다.
+     */
+    catalog(patch) {
+        if (!this.figure)
+            return;
+        this.figure = { ...this.figure, ...patch };
+        this.dirty = true;
+    }
     /**
      * 부품 목록을 갈아 끼운다.
      *
@@ -896,6 +977,16 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     updatePart(index, part) {
         this.put(edits.updatePart(this.parts, index, part));
     }
+    /**
+     * 판 자체의 값을 갈아 끼운다 — 능력처럼 부품보다 위에 있는 것들.
+     *
+     * 부품 목록은 건드리지 않는다. `put` 은 부품을 함께 받으므로 여기서 쓰면 능력 하나를
+     * 고칠 때마다 부품 목록이 새 배열이 되고, 그리는 쪽이 전부 다시 그린다.
+     */
+    updateBoard(board) {
+        this.board = board;
+        this.dirty = true;
+    }
     /**
      * 디테일 등급을 바꾼다.
      *
@@ -1019,8 +1110,9 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             return;
         }
         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) {
             /* 볼 권한만 있는 사람일 수 있다. 화면은 그대로 두고 조용히 넘어간다. */
@@ -1032,6 +1124,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             return;
         }
         this.saving = true;
+        this.saveFailure = '';
         try {
             const sourceJson = JSON.stringify(this.folded);
             /*
@@ -1046,6 +1139,12 @@ let FigureModellerPage = 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
                 });
@@ -1057,11 +1156,13 @@ let FigureModellerPage = 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
                 });
@@ -1071,6 +1172,15 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             }
             this.dirty = false;
         }
+        catch (e) {
+            /*
+              **서버가 말한 사유를 그대로 올린다.** 여기서 문장을 다시 지으면 무엇이 걸렸는지 알 수 없다 —
+              타입 이름이 이미 쓰였다는 것과 권한이 없다는 것은 저작자가 할 일이 다르다.
+      
+              `dirty` 는 건드리지 않는다. 저장이 안 됐으므로 미저장인 것이 사실이다.
+            */
+            this.saveFailure = e.message;
+        }
         finally {
             this.saving = false;
         }
@@ -1116,6 +1226,10 @@ __decorate([
     state(),
     __metadata("design:type", Array)
 ], FigureModellerPage.prototype, "violations", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "saveFailure", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)