@things-factory/figure-ui 10.1.13 → 10.1.14

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

@@ -12,8 +12,6 @@ import { css, html } 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 } 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';
@@ -132,6 +130,9 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.saveFailure = '';
         /** 인라인 요청창과 AI 도크가 함께 쓰는 현재 Figure의 제한된 세션 피드백. */
         this.proposalFeedback = [];
+        this.undoStack = [];
+        this.redoStack = [];
+        this.lastHistoryTime = 0;
         this.announceAiContext = () => {
             if (!this.active)
                 return;
@@ -150,6 +151,24 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             this.receive(detail.proposal);
             detail.accepted = true;
         };
+        this.handleKeyDown = (e) => {
+            if (!this.active || this.mode !== 'edit' || this.proposalSession)
+                return;
+            const target = e.composedPath()[0];
+            const tag = target?.tagName?.toLowerCase();
+            if (tag === 'input' || tag === 'textarea' || target?.isContentEditable)
+                return;
+            if ((e.metaKey || e.ctrlKey) && !e.altKey) {
+                if (e.key === 'z' && !e.shiftKey) {
+                    e.preventDefault();
+                    this.undo();
+                }
+                else if ((e.key === 'z' && e.shiftKey) || e.key === 'y') {
+                    e.preventDefault();
+                    this.redo();
+                }
+            }
+        };
         this.loadGeneration = 0;
     }
     static { this.styles = css `
@@ -223,90 +242,9 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
       display: none;
     }
 
-    /*
-      머리줄 — 이름 · 타입 · 미저장 표시 · 말로 시키는 줄 · 저장을 **한 줄에** 담는다.
-
-      이름은 페이지 제목에도 나온다(셸이 context.title 로 그린다). 그래도 여기 입력칸을 두는
-      이유는 **고치는 자리**가 필요해서다 — 제목은 읽는 것이고 이 칸은 바꾸는 것이다. 두 줄로
-      벌리는 대신 한 줄에 모아 캔버스에 높이를 넘긴다.
-    */
-    div[header] {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-medium, 8px);
-      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
-    }
-    button[ai-support] {
-      height: 28px;
-      padding: 0 12px;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-      background: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-      font: inherit;
-      cursor: pointer;
-    }
-    input[name] {
-      flex: none;
-      width: 180px;
-      padding: 5px 9px;
-      font: var(--input-field-font, inherit);
-      font-size: 0.82rem;
-      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;
-    }
-    /* 타입 이름은 만든 뒤 고칠 수 없다 — 그 사실이 화면에서 보여야 한다 */
-    code[type] {
-      padding: 4px 8px;
-      font-family: var(--mono-font, monospace);
-      font-size: 0.76rem;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      background-color: var(--md-sys-color-surface-container);
-      border-radius: 6px;
-    }
-    span[dirty] {
-      font: var(--label-font, inherit);
-      font-size: 0.74rem;
-      color: var(--md-sys-color-tertiary);
-    }
     div[spacer] {
       flex: 1;
     }
-    button[save] {
-      padding: 6px 16px;
-      font: var(--label-font, inherit);
-      font-size: 0.76rem;
-      font-weight: 600;
-      color: var(--md-sys-color-on-primary, #fff);
-      background-color: var(--md-sys-color-primary);
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    button[save][disabled] {
-      opacity: 0.4;
-      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;
-    }
 
     /*
       칸을 벡터 저작도구의 관례대로 놓는다 — 왼쪽에 무엇이 있나(레이어), 오른쪽에
@@ -329,16 +267,17 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     }
 
     /*
-      편집 · 미리보기 전환.
+      편집 · 미리보기 전환 및 조작 띠.
 
       가운데 칸 위에 얇게 둔다. 무엇을 보고 있는지가 늘 보여야 하고, 두 화면이 같은
       자리를 쓰므로 어느 쪽인지 모르면 편집이 안 먹는 것처럼 읽힌다.
     */
     div[modes] {
       display: flex;
+      align-items: center;
       flex: none;
       gap: 2px;
-      padding: 5px var(--spacing-medium, 8px);
+      padding: 4px var(--spacing-medium, 8px);
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
     }
     div[modes] button[mode] {
@@ -359,13 +298,36 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
       color: var(--md-sys-color-on-primary-container);
       background-color: var(--md-sys-color-primary-container);
     }
-
-    /*
-      양쪽 칸을 접는 손잡이. 띠의 양 끝, 접히는 칸 바로 옆이다.
-
-      접었을 때 남는 것이 이것 하나뿐이므로 **접는 자리와 펴는 자리가 같아야 한다.**
-      다른 데 두면 접고 나서 되돌릴 곳을 찾아야 한다.
-    */
+    div[modes] div[separator] {
+      width: 1px;
+      height: 16px;
+      margin: 0 4px;
+      background-color: var(--md-sys-color-outline-variant);
+    }
+    div[modes] button[history] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background: none;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    div[modes] button[history]:hover:not([disabled]) {
+      background-color: var(--md-sys-color-surface-container);
+      color: var(--md-sys-color-on-surface);
+    }
+    div[modes] button[history][disabled] {
+      opacity: 0.3;
+      cursor: default;
+    }
+    div[modes] button[history] md-icon {
+      --md-icon-size: 18px;
+    }
     div[modes] button[collapse] {
       display: flex;
       align-items: center;
@@ -383,6 +345,46 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     div[modes] button[collapse] md-icon {
       --md-icon-size: 18px;
     }
+    div[modes] span[dirty] {
+      align-self: center;
+      margin-right: 6px;
+      font: var(--label-font, inherit);
+      font-size: 0.72rem;
+      color: var(--md-sys-color-tertiary);
+    }
+    div[modes] span[save-failed] {
+      align-self: center;
+      max-width: 240px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 6px;
+      padding: 3px 7px;
+      font: var(--label-font, inherit);
+      font-size: 0.7rem;
+      color: var(--md-sys-color-on-error-container, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-error-container);
+      border-radius: 4px;
+    }
+    div[modes] button[save] {
+      padding: 4px 14px;
+      margin-right: 4px;
+      font: var(--label-font, inherit);
+      font-size: 0.74rem;
+      font-weight: 600;
+      color: var(--md-sys-color-on-primary, #fff);
+      background-color: var(--md-sys-color-primary);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    div[modes] button[save]:hover:not([disabled]) {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+    div[modes] button[save][disabled] {
+      opacity: 0.35;
+      cursor: default;
+    }
 
     /*
       후보가 오면 가운데를 둘로 나눈다.
@@ -600,8 +602,10 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         super.connectedCallback();
         window.addEventListener('figure-ai-context-request', this.announceAiContext);
         window.addEventListener('figure-ai-review', this.acceptDockProposal);
+        window.addEventListener('keydown', this.handleKeyDown);
     }
     disconnectedCallback() {
+        window.removeEventListener('keydown', this.handleKeyDown);
         window.removeEventListener('figure-ai-context-request', this.announceAiContext);
         window.removeEventListener('figure-ai-review', this.acceptDockProposal);
         window.dispatchEvent(new CustomEvent('figure-ai-context', { detail: undefined }));
@@ -626,27 +630,6 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     render() {
         const source = this.folded;
         return html `
-      <div header>
-        <!--
-          이름과 타입은 **속성 패널**에 있다(figure-inspector 의 도형 절). 여기 있던 이름 칸은
-          하네스 시절의 자리였다 — 앱에서는 셸이 페이지 제목으로 같은 이름을 그리므로 글자가 두 번
-          나오고, 캔버스가 주인공인 화면에서 그만큼 높이를 잃었다.
-        -->
-        ${this.dirty ? html `<span dirty>${i18next.t('figure.text.unsaved-changes')}</span>` : ''}
-        <!--
-          말로 시키는 줄이 머리줄의 남는 폭을 쓴다. 따로 두면 화면 위가 두 줄이 되고, 그 위 줄은
-          이름을 페이지 제목과 겹쳐 적는다.
-        -->
-        <button ai-support @click=${() => {
-            requestFigureAI({ figureId: this.figure?.id, source: this.folded });
-            openOverlay('figure-ai-dock', { backdrop: false });
-        }}>AI 지원</button>
-        ${this.saveFailure ? html `<span save-failed title=${this.saveFailure}>${this.saveFailure}</span>` : ''}
-        <button save ?disabled=${!this.canSave} @click=${() => this.save()}>
-          ${this.saving ? i18next.t('figure.text.saving-figure') : i18next.t('figure.button.save')}
-        </button>
-      </div>
-
       <div
         edits
         ?collapse-left=${this.collapsed.left}
@@ -687,6 +670,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
                   <div lane>
                     <h4>${i18next.t('figure.label.now')}</h4>
                     <figure-canvas
+                      .figureId=${this.figure?.id || this.figure?.type}
                       .board=${this.board}
                       .parts=${this.parts}
                       .picked=${this.pickedName}
@@ -711,9 +695,11 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             : this.mode === 'preview'
                 ? html `<figure-preview .source=${source}></figure-preview>`
                 : html `<figure-canvas
+                  .figureId=${this.figure?.id || this.figure?.type}
                   .board=${this.board}
                   .parts=${this.parts}
                   .picked=${this.pickedName}
+                  .view=${this.view}
                 ></figure-canvas>`}
         </div>
 
@@ -765,7 +751,33 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     `;
         return html `<div modes>
       ${this.renderCollapse('left')}${this.proposalSession ? '' : html `${one('edit')}${one('preview')}`}
+      ${this.mode === 'edit' && !this.proposalSession
+            ? html `
+            <div separator></div>
+            <button
+              history
+              ?disabled=${this.undoStack.length === 0}
+              title="${i18next.t('figure.button.undo')} (Ctrl+Z)"
+              @click=${() => this.undo()}
+            >
+              <md-icon>undo</md-icon>
+            </button>
+            <button
+              history
+              ?disabled=${this.redoStack.length === 0}
+              title="${i18next.t('figure.button.redo')} (Ctrl+Y)"
+              @click=${() => this.redo()}
+            >
+              <md-icon>redo</md-icon>
+            </button>
+          `
+            : ''}
       <div spacer></div>
+      ${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()}>
+        ${this.saving ? i18next.t('figure.text.saving-figure') : i18next.t('figure.button.save')}
+      </button>
       ${this.renderCollapse('right')}
     </div>`;
     }
@@ -956,6 +968,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             return;
         if (this.proposalBaseSource !== undefined && this.proposalBaseSource !== JSON.stringify(this.folded))
             return;
+        this.recordHistory();
         const taken = proposals.applyProposal(this.folded, this.proposalSession.source, this.proposalSession.picked);
         const { board, parts } = fromFigureSource(taken);
         this.board = board;
@@ -1020,7 +1033,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         }
         const id = lifecycle?.resourceId;
         if (id) {
-            if (id !== this.figure?.id) {
+            if (changes.active || id !== this.figure?.id) {
                 await this.load(id);
             }
             return;
@@ -1037,6 +1050,14 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
           들고 있는 것이 **저장된 도형이면**(id 가 있으면) 새로 시작한다. 아직 저장 안 한 새 도형을
           들고 있으면 그대로 둔다 — 페이지를 다시 들렀다고 저작 중인 것을 버리지 않는다.
         */
+        if (!this.figure) {
+            this.startNew();
+            return;
+        }
+        if (this.figure.id) {
+            this.startNew();
+            return;
+        }
         if (shouldStartNewFigure(changes, !!this.figure, this.figure?.id)) {
             this.startNew();
             return;
@@ -1079,6 +1100,9 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.selected = -1;
         this.dirty = false;
         this.violations = [];
+        this.undoStack = [];
+        this.redoStack = [];
+        this.lastCoalesceKey = undefined;
     }
     startNew() {
         ++this.loadGeneration;
@@ -1096,6 +1120,9 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.selected = -1;
         this.dirty = true;
         this.violations = [];
+        this.undoStack = [];
+        this.redoStack = [];
+        this.lastCoalesceKey = undefined;
     }
     rename(name) {
         if (!this.figure)
@@ -1115,13 +1142,56 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.figure = { ...this.figure, ...patch };
         this.dirty = true;
     }
+    snapshotState() {
+        return {
+            board: this.board ? structuredClone(this.board) : undefined,
+            parts: structuredClone(this.parts),
+            selected: this.selected
+        };
+    }
+    recordHistory(coalesceKey) {
+        const now = Date.now();
+        if (coalesceKey && this.lastCoalesceKey === coalesceKey && now - this.lastHistoryTime < 600) {
+            this.lastHistoryTime = now;
+            return;
+        }
+        this.lastCoalesceKey = coalesceKey;
+        this.lastHistoryTime = now;
+        this.undoStack = [...this.undoStack.slice(-49), this.snapshotState()];
+        this.redoStack = [];
+    }
+    undo() {
+        if (this.undoStack.length === 0)
+            return;
+        const prev = this.undoStack[this.undoStack.length - 1];
+        this.undoStack = this.undoStack.slice(0, -1);
+        this.redoStack = [this.snapshotState(), ...this.redoStack.slice(0, 49)];
+        this.board = prev.board ? structuredClone(prev.board) : undefined;
+        this.parts = structuredClone(prev.parts);
+        this.selected = this.parts.length ? Math.max(-1, Math.min(prev.selected, this.parts.length - 1)) : -1;
+        this.dirty = true;
+        this.lastCoalesceKey = undefined;
+    }
+    redo() {
+        if (this.redoStack.length === 0)
+            return;
+        const next = this.redoStack[0];
+        this.redoStack = this.redoStack.slice(1);
+        this.undoStack = [...this.undoStack.slice(-49), this.snapshotState()];
+        this.board = next.board ? structuredClone(next.board) : undefined;
+        this.parts = structuredClone(next.parts);
+        this.selected = this.parts.length ? Math.max(-1, Math.min(next.selected, this.parts.length - 1)) : -1;
+        this.dirty = true;
+        this.lastCoalesceKey = undefined;
+    }
     /**
      * 부품 목록을 갈아 끼운다.
      *
      * 편집 규칙은 `part-edits` 가 갖는다 — 화면과 테스트가 같은 것을 쓰게 하려고 떼어
      * 놓았다. 여기서는 결과를 담고 선택 인덱스를 정리한다.
      */
-    put(parts, selected = this.selected) {
+    put(parts, selected = this.selected, coalesceKey) {
+        this.recordHistory(coalesceKey);
         this.parts = parts;
         this.selected = Math.min(selected, parts.length - 1);
         this.dirty = true;
@@ -1142,7 +1212,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.put(edits.movePart(this.parts, index, to), to);
     }
     updatePart(index, part) {
-        this.put(edits.updatePart(this.parts, index, part));
+        this.put(edits.updatePart(this.parts, index, part), this.selected, `part:${part.name || index}`);
     }
     /**
      * 판 자체의 값을 갈아 끼운다 — 능력처럼 부품보다 위에 있는 것들.
@@ -1151,6 +1221,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      * 고칠 때마다 부품 목록이 새 배열이 되고, 그리는 쪽이 전부 다시 그린다.
      */
     updateBoard(board) {
+        this.recordHistory('board');
         this.board = board;
         this.dirty = true;
     }
@@ -1167,6 +1238,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     changeDetailLevel(level) {
         if (!this.board)
             return;
+        this.recordHistory('detailLevel');
         this.board = { ...this.board, detailLevel: level };
         this.dirty = true;
     }
@@ -1203,7 +1275,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     partChanged(name, part) {
         const at = this.parts.findIndex(item => item.name === name);
         if (at >= 0)
-            this.put(edits.updatePart(this.parts, at, part));
+            this.put(edits.updatePart(this.parts, at, part), this.selected, `drag:${name}`);
     }
     /**
      * 정밀 배치 도구.
@@ -1405,6 +1477,14 @@ __decorate([
     state(),
     __metadata("design:type", Array)
 ], FigureModellerPage.prototype, "proposalFeedback", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureModellerPage.prototype, "undoStack", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureModellerPage.prototype, "redoStack", void 0);
 FigureModellerPage = __decorate([
     customElement('figure-modeller-page')
 ], FigureModellerPage);