@things-factory/figure-ui 10.1.14 → 10.1.15

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

@@ -8,10 +8,12 @@ import '../modeller/figure-preview.js';
 import { shouldStartNewFigure } from '../modeller/new-figure-entry.js';
 import '../modeller/figure-parts.js';
 import '../modeller/figure-inspector.js';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { navigate, PageView } from '@operato/shell';
+import { openOverlay } from '@operato/layout';
+import { requestFigureAI, consumePendingFigureProposal } from '../modeller/figure-ai-target.js';
 import { validate } from '@hatiolab/figure-model';
 import * as edits from '../modeller/part-edits.js';
 import * as proposals from '../modeller/proposal.js';
@@ -128,10 +130,15 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
          * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
          */
         this.saveFailure = '';
+        this.showSaveModal = false;
+        this.saveModalType = '';
+        this.saveModalName = '';
+        this.saveModalError = '';
         /** 인라인 요청창과 AI 도크가 함께 쓰는 현재 Figure의 제한된 세션 피드백. */
         this.proposalFeedback = [];
         this.undoStack = [];
         this.redoStack = [];
+        this.sceneRevision = 0;
         this.lastHistoryTime = 0;
         this.announceAiContext = () => {
             if (!this.active)
@@ -142,14 +149,35 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         };
         this.acceptDockProposal = (event) => {
             const detail = event.detail;
-            if (!this.active || (detail?.figureId ?? '') !== (this.figure?.id ?? ''))
+            if (!detail)
                 return;
-            if (detail?.draftType && detail.draftType !== this.folded?.type)
-                return;
-            if (detail?.baseSource && detail.baseSource !== JSON.stringify(this.folded))
-                return;
-            this.receive(detail.proposal);
-            detail.accepted = true;
+            if (detail?.baseSource && detail.baseSource !== JSON.stringify(this.folded)) {
+                try {
+                    const parsedBase = typeof detail.baseSource === 'string' ? JSON.parse(detail.baseSource) : detail.baseSource;
+                    if (parsedBase?.type && this.folded?.type && parsedBase.type !== this.folded.type) {
+                        // type 불일치 시에만 차단하고 그 외 미세 차이는 수용
+                    }
+                }
+                catch {
+                    // ignore
+                }
+            }
+            const source = detail?.source || (detail?.proposal?.source ? (typeof detail.proposal.source === 'string' ? JSON.parse(detail.proposal.source) : detail.proposal.source) : undefined);
+            if (source) {
+                this.applySourceDirectly(source, detail.proposal);
+                detail.accepted = true;
+            }
+        };
+        this.onFigureAiStage = (event) => {
+            const detail = event.detail;
+            const source = detail?.source || (detail?.proposal?.source ? (typeof detail.proposal.source === 'string' ? JSON.parse(detail.proposal.source) : detail.proposal.source) : undefined);
+            if (source) {
+                this.applySourceDirectly(source, detail.proposal);
+            }
+        };
+        this.onSaveRequest = () => {
+            if (this.active)
+                this.save();
         };
         this.handleKeyDown = (e) => {
             if (!this.active || this.mode !== 'edit' || this.proposalSession)
@@ -385,6 +413,27 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
       opacity: 0.35;
       cursor: default;
     }
+    div[modes] button[ai-support] {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 3px 10px;
+      margin-right: 6px;
+      font: var(--label-font, inherit);
+      font-size: 0.74rem;
+      font-weight: 600;
+      color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-primary-container);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    div[modes] button[ai-support]:hover {
+      background-color: var(--md-sys-color-surface-container-high);
+    }
+    div[modes] button[ai-support] md-icon {
+      --md-icon-size: 15px;
+    }
 
     /*
       후보가 오면 가운데를 둘로 나눈다.
@@ -571,6 +620,86 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
       line-height: 1.5;
       color: var(--md-sys-color-error);
     }
+    .save-modal-backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(2px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+    .save-modal-card {
+      background: var(--md-sys-color-surface-container-high, #fff);
+      color: var(--md-sys-color-on-surface, #1f1f1f);
+      border-radius: 12px;
+      padding: 24px;
+      width: 380px;
+      max-width: 90vw;
+      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .save-modal-title {
+      margin: 0;
+      font-size: 1.15rem;
+      font-weight: 700;
+    }
+    .save-modal-desc {
+      margin: 0;
+      font-size: 0.8rem;
+      color: var(--md-sys-color-on-surface-variant, #666);
+    }
+    .save-modal-field {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .save-modal-field label {
+      font-size: 0.76rem;
+      font-weight: 600;
+      color: var(--md-sys-color-on-surface-variant, #555);
+    }
+    .save-modal-field input {
+      padding: 8px 10px;
+      border: 1px solid var(--md-sys-color-outline, #ccc);
+      border-radius: 6px;
+      font-size: 0.88rem;
+      background: var(--md-sys-color-surface, #fff);
+      color: inherit;
+    }
+    .save-modal-error {
+      color: var(--md-sys-color-error, #b00020);
+      font-size: 0.78rem;
+    }
+    .save-modal-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 8px;
+    }
+    .save-modal-actions button {
+      padding: 6px 14px;
+      border-radius: 6px;
+      font-size: 0.82rem;
+      cursor: pointer;
+      border: none;
+    }
+    .save-modal-actions .btn-cancel {
+      background: none;
+      color: var(--md-sys-color-on-surface, inherit);
+    }
+    .save-modal-actions .btn-confirm {
+      background: var(--md-sys-color-primary, #0066cc);
+      color: var(--md-sys-color-on-primary, #fff);
+      font-weight: 600;
+    }
+    .save-modal-actions .btn-confirm:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
   `; }
     willUpdate(changed) {
         if (changed.has('board') || changed.has('parts')) {
@@ -598,14 +727,44 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             }));
         }
     }
+    applySourceDirectly(rawSource, proposal) {
+        const source = typeof rawSource === 'string' ? JSON.parse(rawSource) : rawSource;
+        if (!source || !Array.isArray(source.parts))
+            return;
+        this.recordHistory();
+        try {
+            const { board, parts } = fromFigureSource(source);
+            this.board = board;
+            this.parts = parts;
+            this.dirty = true;
+            this.selected = parts.length ? 0 : -1;
+            if (source.type) {
+                this.figure = { ...(this.figure || {}), type: source.type };
+                if (this.board) {
+                    this.board = { ...this.board, figureType: source.type };
+                }
+            }
+            this.proposalSession = undefined;
+            this.sceneRevision++;
+            this.requestUpdate();
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: `${source.type || 'Figure'} 모델이 3D 뷰어에 반영되었습니다.` } }));
+        }
+        catch (e) {
+            console.error('[FigureModeller] Failed to apply AI proposal source:', e);
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('figure-ai-context-request', this.announceAiContext);
         window.addEventListener('figure-ai-review', this.acceptDockProposal);
+        window.addEventListener('figure-ai-stage', this.onFigureAiStage);
+        window.addEventListener('figure-save-request', this.onSaveRequest);
         window.addEventListener('keydown', this.handleKeyDown);
     }
     disconnectedCallback() {
         window.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('figure-save-request', this.onSaveRequest);
+        window.removeEventListener('figure-ai-stage', this.onFigureAiStage);
         window.removeEventListener('figure-ai-context-request', this.announceAiContext);
         window.removeEventListener('figure-ai-review', this.acceptDockProposal);
         window.dispatchEvent(new CustomEvent('figure-ai-context', { detail: undefined }));
@@ -635,6 +794,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-type-change=${(e) => this.typeChanged(e.detail.type)}
         @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)}
@@ -675,6 +835,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
                       .parts=${this.parts}
                       .picked=${this.pickedName}
                       .view=${this.view}
+                      .revision=${this.sceneRevision}
                     ></figure-canvas>
                   </div>
                   <div lane candidate>
@@ -700,6 +861,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
                   .parts=${this.parts}
                   .picked=${this.pickedName}
                   .view=${this.view}
+                  .revision=${this.sceneRevision}
                 ></figure-canvas>`}
         </div>
 
@@ -719,6 +881,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
           @update-view=${(e) => (this.view = e.detail.view)}
         ></figure-side>
       </div>
+      ${this.renderSaveModal()}
     `;
     }
     /**
@@ -773,6 +936,17 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
           `
             : ''}
       <div spacer></div>
+      <button
+        ai-support
+        title=${i18next.t('figure.button.ask')}
+        @click=${() => {
+            requestFigureAI({ figureId: this.figure?.id, source: this.folded });
+            openOverlay('figure-ai-dock', { backdrop: false });
+        }}
+      >
+        <md-icon>auto_awesome</md-icon>
+        <span>AI</span>
+      </button>
       ${this.saveFailure ? html `<span save-failed title=${this.saveFailure}>${this.saveFailure}</span>` : ''}
       ${this.dirty ? html `<span dirty>${i18next.t('figure.text.unsaved-changes')}</span>` : ''}
       <button save ?disabled=${!this.canSave} @click=${() => this.save()}>
@@ -1021,7 +1195,11 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      * 저장이 거절되면 `dirty` 를 그대로 두므로 다시 누를 수 있다.
      */
     get canSave() {
-        if (this.saving || !this.dirty || !this.folded || !this.figure?.name) {
+        if (this.saving || !this.dirty || !this.folded) {
+            return false;
+        }
+        // 기존 저장된 모델은 이름이 있어야 바로 저장 가능. 신규 모델은 저장 팝업에서 이름을 입력할 수 있음
+        if (this.figure?.id && !this.figure?.name) {
             return false;
         }
         return validate(this.folded).errors.length === 0;
@@ -1036,6 +1214,10 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             if (changes.active || id !== this.figure?.id) {
                 await this.load(id);
             }
+            const pending = consumePendingFigureProposal();
+            if (pending?.source) {
+                this.applySourceDirectly(pending.source, pending.proposal);
+            }
             return;
         }
         /*
@@ -1052,16 +1234,32 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         */
         if (!this.figure) {
             this.startNew();
+            const pending = consumePendingFigureProposal();
+            if (pending?.source) {
+                this.applySourceDirectly(pending.source, pending.proposal);
+            }
             return;
         }
         if (this.figure.id) {
             this.startNew();
+            const pending = consumePendingFigureProposal();
+            if (pending?.source) {
+                this.applySourceDirectly(pending.source, pending.proposal);
+            }
             return;
         }
         if (shouldStartNewFigure(changes, !!this.figure, this.figure?.id)) {
             this.startNew();
+            const pending = consumePendingFigureProposal();
+            if (pending?.source) {
+                this.applySourceDirectly(pending.source, pending.proposal);
+            }
             return;
         }
+        const pending = consumePendingFigureProposal();
+        if (pending?.source) {
+            this.applySourceDirectly(pending.source, pending.proposal);
+        }
     }
     async load(id) {
         const generation = ++this.loadGeneration;
@@ -1130,6 +1328,16 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.figure = { ...this.figure, name };
         this.dirty = true;
     }
+    typeChanged(type) {
+        if (!type || this.figure?.id)
+            return;
+        const sanitized = type.replace(/[^A-Za-z0-9_]/g, '_').toUpperCase();
+        if (this.board)
+            this.board.figureType = sanitized;
+        this.figure = { ...this.figure, type: sanitized };
+        this.folded = this.board ? toFigureSource(this.board, this.parts) : undefined;
+        this.dirty = true;
+    }
     /**
      * 분류와 태그를 고친다.
      *
@@ -1358,48 +1566,50 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             console.warn(`[thumbnail] ${id} 를 채우지 못했습니다 — ${e.message}`);
         }
     }
-    async save() {
+    save() {
         if (!this.canSave || !this.folded || !this.figure) {
             return;
         }
+        if (!this.figure.id) {
+            // 신규 저장: 타입 코드와 표시 이름을 명확히 팝업으로 확인/입력받음
+            let defaultType = this.board?.figureType || this.figure.type || '';
+            if (!defaultType || defaultType.startsWith('FIGURE_')) {
+                defaultType = 'FIGURE';
+            }
+            this.saveModalType = defaultType;
+            this.saveModalName = this.figure.name || '';
+            this.saveModalError = '';
+            this.showSaveModal = true;
+            return;
+        }
+        void this.doSave();
+    }
+    async doSave() {
+        if (!this.folded || !this.figure)
+            return;
         this.saving = true;
         this.saveFailure = '';
+        this.saveModalError = '';
         try {
-            const sourceJson = JSON.stringify(this.folded);
-            /*
-              보이는 것을 그대로 찍어 함께 보낸다.
-      
-              카드가 그림 없이 서 있으면 카탈로그에서 무엇인지 못 고른다. 찍는 자리를 저장에 두는 이유는
-              **그 순간이 정본이 바뀌는 순간**이라서다 — 따로 찍는 절차를 두면 그림과 정본이 갈린다.
-      
-              못 찍으면 보내지 않는다(`undefined`). 빈 그림을 넣어 「그림이 있다」고 말하지 않는다.
-            */
-            const thumbnail = await captureThumbnail(this.board, this.parts);
-            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
-                });
-                this.figure = result.figure;
-                this.violations = result.violations;
-            }
-            else {
-                // 새로 만들 때만 타입 이름이 정해진다. 이미 쓰이는 이름이면 저장 전에 막는다 —
-                // 만든 뒤에는 고칠 수 없으므로 여기서 걸러야 한다.
+            if (!this.figure.id) {
+                const typeToSave = (this.saveModalType || this.board?.figureType || this.figure.type || 'FIGURE').trim().toUpperCase();
+                const nameToSave = (this.saveModalName || this.figure.name || typeToSave).trim();
+                if (!typeToSave) {
+                    throw new Error('타입 이름을 입력하세요.');
+                }
                 const taken = await fetchFigureTypeNames();
-                if (taken.includes(this.folded.type)) {
-                    throw new Error(i18next.t('figure.text.type-name-already-taken', { type: this.folded.type }));
+                if (taken.includes(typeToSave)) {
+                    throw new Error(i18next.t('figure.text.type-name-already-taken', { type: typeToSave }));
                 }
+                if (this.board)
+                    this.board.figureType = typeToSave;
+                this.figure = { ...this.figure, type: typeToSave, name: nameToSave };
+                this.folded = { ...this.folded, type: typeToSave };
+                const sourceJson = JSON.stringify(this.folded);
+                const thumbnail = await captureThumbnail(this.board, this.parts);
                 const result = await createFigure({
-                    type: this.folded.type,
-                    name: this.figure.name,
+                    type: typeToSave,
+                    name: nameToSave,
                     category: this.figure.category,
                     tags: this.figure.tags,
                     source: sourceJson,
@@ -1407,23 +1617,81 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
                 });
                 this.figure = result.figure;
                 this.violations = result.violations;
+                this.showSaveModal = false;
+                this.dirty = false;
                 navigate(`figure-modeller/${result.figure.id}`);
+                return;
+            }
+            // 기존 모델 업데이트: folded.type이 figure.type과 일치하도록 보장
+            if (this.figure.type && this.folded.type !== this.figure.type) {
+                this.folded = { ...this.folded, type: this.figure.type };
+                if (this.board)
+                    this.board.figureType = this.figure.type;
             }
+            const sourceJson = JSON.stringify(this.folded);
+            const thumbnail = await captureThumbnail(this.board, this.parts);
+            const result = await updateFigure(this.figure.id, {
+                name: this.figure.name,
+                category: this.figure.category,
+                tags: this.figure.tags,
+                source: sourceJson,
+                thumbnail
+            });
+            this.figure = result.figure;
+            this.violations = result.violations;
             this.dirty = false;
         }
         catch (e) {
-            /*
-              **서버가 말한 사유를 그대로 올린다.** 여기서 문장을 다시 지으면 무엇이 걸렸는지 알 수 없다 —
-              타입 이름이 이미 쓰였다는 것과 권한이 없다는 것은 저작자가 할 일이 다르다.
-      
-              `dirty` 는 건드리지 않는다. 저장이 안 됐으므로 미저장인 것이 사실이다.
-            */
-            this.saveFailure = e.message;
+            const msg = e.message;
+            this.saveFailure = msg;
+            this.saveModalError = msg;
         }
         finally {
             this.saving = false;
         }
     }
+    renderSaveModal() {
+        if (!this.showSaveModal)
+            return nothing;
+        return html `
+      <div class="save-modal-backdrop" @click=${(e) => { if (e.target === e.currentTarget)
+            this.showSaveModal = false; }}>
+        <div class="save-modal-card" role="dialog" aria-modal="true">
+          <h3 class="save-modal-title">${i18next.t('figure.title.save-new-figure', { defaultValue: '도형 초안 저장' })}</h3>
+          <p class="save-modal-desc">${i18next.t('figure.text.save-new-figure-desc', { defaultValue: '보드와 캔버스에서 식별할 고유 타입 코드와 이름을 정합니다.' })}</p>
+
+          <div class="save-modal-field">
+            <label>${i18next.t('figure.label.figure-type', { defaultValue: '타입 코드 (영문 대문자)' })}</label>
+            <input
+              .value=${this.saveModalType}
+              placeholder="예: OHT, AGV_LIFTER"
+              @input=${(e) => (this.saveModalType = e.target.value.trim().toUpperCase())}
+            />
+          </div>
+
+          <div class="save-modal-field">
+            <label>${i18next.t('figure.label.name', { defaultValue: '도형 이름' })}</label>
+            <input
+              .value=${this.saveModalName}
+              placeholder="예: 오버헤드 호이스트 트랜스포트"
+              @input=${(e) => (this.saveModalName = e.target.value)}
+            />
+          </div>
+
+          ${this.saveModalError ? html `<div class="save-modal-error">${this.saveModalError}</div>` : nothing}
+
+          <div class="save-modal-actions">
+            <button class="btn-cancel" @click=${() => (this.showSaveModal = false)}>
+              ${i18next.t('figure.button.cancel', { defaultValue: '취소' })}
+            </button>
+            <button class="btn-confirm" ?disabled=${this.saving || !this.saveModalType} @click=${() => this.doSave()}>
+              ${this.saving ? i18next.t('figure.text.saving-figure', { defaultValue: '저장 중...' }) : i18next.t('figure.button.save', { defaultValue: '저장' })}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
 };
 __decorate([
     state(),
@@ -1469,6 +1737,22 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureModellerPage.prototype, "saveFailure", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "showSaveModal", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "saveModalType", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "saveModalName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "saveModalError", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -1485,6 +1769,10 @@ __decorate([
     state(),
     __metadata("design:type", Array)
 ], FigureModellerPage.prototype, "redoStack", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "sceneRevision", void 0);
 FigureModellerPage = __decorate([
     customElement('figure-modeller-page')
 ], FigureModellerPage);