@things-factory/figure-ui 10.1.34 → 10.1.36

package/dist-client/modeller/v3-editor.js

@@ -0,0 +1,332 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './v3-canvas.js';
+const names = {
+    position: '위치',
+    rotation: '회전',
+    size: '크기',
+    dimension: '치수',
+    width: '너비',
+    height: '높이',
+    depth: '깊이',
+    radius: '반지름',
+    length: '길이',
+    round: '모서리 반경',
+    left: '왼쪽',
+    right: '오른쪽',
+    bottom: '아랫면',
+    top: '윗면',
+    openingLeft: '개구부 왼쪽',
+    openingRight: '개구부 오른쪽',
+    openingTop: '개구부 윗면'
+};
+function fieldLabel(id) {
+    return id
+        .split('.')
+        .map(p => names[p] ?? p.toUpperCase())
+        .join(' · ');
+}
+/** Product editor surface. The injected session is shared by page persistence and AI commands. */
+let FigureV3Editor = class FigureV3Editor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.revision = 0;
+        this.selected = '';
+        this.error = '';
+        this.lastContext = null;
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      height: 100%;
+      font: 13px sans-serif;
+      color: var(--md-sys-color-on-surface, #22343f);
+    }
+    header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px;
+      border-bottom: 1px solid #d4dde2;
+      flex-wrap: wrap;
+    }
+    main {
+      flex: 1;
+      min-height: 0;
+      display: grid;
+      grid-template-columns: 180px minmax(180px, 1fr) 300px;
+    }
+    aside {
+      padding: 12px;
+      overflow: auto;
+      background: var(--md-sys-color-surface, #fff);
+    }
+    aside:first-child {
+      border-right: 1px solid #d4dde2;
+    }
+    aside:last-child {
+      border-left: 1px solid #d4dde2;
+    }
+    h3 {
+      font-size: var(--ui-t-body, 13px);
+      margin: 22px 0 10px;
+    }
+    h3:first-child {
+      margin-top: 0;
+    }
+    button,
+    input,
+    select {
+      font: inherit;
+      box-sizing: border-box;
+      height: 34px;
+      border: 1px solid #cbd5dc;
+      border-radius: 6px;
+      background: var(--md-sys-color-surface, #fff);
+      color: inherit;
+      padding: 0 8px;
+      min-width: 0;
+    }
+    button {
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button[aria-pressed='true'] {
+      background: #d6edf0;
+      border-color: #337783;
+    }
+    .parts {
+      display: grid;
+      gap: 6px;
+    }
+    .recipes {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 6px;
+    }
+    label {
+      display: grid;
+      grid-template-columns: 112px minmax(0, 1fr);
+      align-items: center;
+      gap: 8px;
+      margin: 8px 0;
+    }
+    label span {
+      overflow-wrap: anywhere;
+    }
+    .error {
+      padding: 10px;
+      background: #fff0eb;
+      color: #922716;
+      white-space: pre-wrap;
+    }
+    .status {
+      margin-left: auto;
+    }
+    .hint {
+      color: #637783;
+      line-height: 1.5;
+    }
+    @media (max-width: 800px) {
+      main {
+        grid-template-columns: 140px minmax(160px, 1fr);
+      }
+      aside:last-child {
+        grid-column: 1/-1;
+        max-height: 260px;
+        border-top: 1px solid #d4dde2;
+      }
+    }
+  `; }
+    willUpdate(_changed) {
+        const view = this.session?.read();
+        if (view?.context !== this.lastContext) {
+            this.lastContext = view?.context ?? null;
+            this.selected = '';
+            this.error = '';
+        }
+        if (view && !view.geometry.some(g => g.id === this.selected))
+            this.selected = '';
+    }
+    run(action) {
+        try {
+            action();
+            this.error = '';
+            this.changed();
+        }
+        catch (error) {
+            this.error = error instanceof Error ? error.message : String(error);
+        }
+    }
+    changed() {
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent('v3-changed', { bubbles: true, composed: true }));
+    }
+    async save() {
+        if (!this.session)
+            return;
+        try {
+            const promise = this.session.save();
+            this.changed();
+            await promise;
+            this.error = '';
+        }
+        catch (error) {
+            this.error = error instanceof Error ? error.message : String(error);
+        }
+        finally {
+            this.changed();
+        }
+    }
+    add(kind) {
+        if (!this.session)
+            return;
+        this.run(() => {
+            const ids = new Set(this.session.read().geometry.map(g => g.id));
+            let n = 1;
+            while (ids.has(`${kind}-${n}`))
+                n++;
+            const common = { id: `${kind}-${n}`, position: { x: 0, y: 50, z: 0 } };
+            const part = kind === 'box'
+                ? { ...common, kind, dimensions: { width: 100, height: 100, depth: 100 } }
+                : kind === 'cylinder'
+                    ? { ...common, kind, dimensions: { radius: 50, length: 100 } }
+                    : kind === 'rounded-box'
+                        ? { ...common, kind, dimensions: { width: 100, height: 100, depth: 100, round: 10 } }
+                        : {
+                            ...common,
+                            position: { x: 0, y: 0, z: 0 },
+                            kind: 'portal',
+                            dimensions: {
+                                left: -100,
+                                right: 100,
+                                bottom: 0,
+                                top: 200,
+                                openingLeft: -70,
+                                openingRight: 70,
+                                openingTop: 170,
+                                depth: 30
+                            }
+                        };
+            this.session.add(part);
+            this.selected = part.id;
+        });
+    }
+    changeField(field, event) {
+        const input = event.target, value = input.valueAsNumber;
+        this.run(() => this.session.apply([
+            { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value }
+        ]));
+        // Rejected edits must also restore the displayed numeric value.
+        input.value = String(this.session.read().fields.find(i => i.id === field.id).value);
+    }
+    render() {
+        const view = this.session?.read();
+        if (!view)
+            return html `<p>모델을 여는 중입니다.</p>`;
+        const unavailable = view.loading || !!view.error || view.saving || !view.context;
+        const part = view.geometry.find(g => g.id === this.selected);
+        // Shared/root parameters remain available even when a part is selected.
+        const own = view.fields.filter(i => this.selected && i.id.startsWith(this.selected + '.'));
+        const common = view.fields.filter(i => !view.geometry.some(g => i.id.startsWith(g.id + '.')));
+        const fields = this.selected ? [...own, ...common] : view.fields;
+        return html ` <header>
+        <strong>V3 모델링</strong>
+        <button ?disabled=${unavailable || !view.canUndo} @click=${() => this.run(() => this.session.undo())}>
+          실행 취소
+        </button>
+        <button ?disabled=${unavailable || !view.canRedo} @click=${() => this.run(() => this.session.redo())}>
+          다시 실행
+        </button>
+        <button @click=${() => this.renderRoot.querySelector('figure-v3-canvas')?.fit()}>
+          전체 보기
+        </button>
+        <span class="status" role="status"
+          >${view.loading ? '불러오는 중' : view.saving ? '저장 중' : view.dirty || !view.id ? '저장 안 됨' : '저장됨'}</span
+        >
+        <button ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}>저장</button>
+      </header>
+      ${this.error || view.error ? html `<div role="alert" class="error">${this.error || view.error}</div>` : null}
+      <main>
+        <aside>
+          <h3>도형 추가</h3>
+          <div class="recipes">
+            ${['box', 'cylinder', 'rounded-box', 'portal'].map((kind, i) => html `<button ?disabled=${unavailable} @click=${() => this.add(kind)}>${['상자', '원기둥', '둥근 상자', '문틀'][i]}</button>`)}
+          </div>
+          <h3>부품 ${view.geometry.length}</h3>
+          <div class="parts">
+            ${view.geometry.map(g => html `<button
+                  aria-pressed=${g.id === this.selected}
+                  @click=${() => {
+            this.selected = g.id;
+        }}
+                >
+                  ${g.id}
+                </button>`)}
+          </div>
+        </aside>
+        <figure-v3-canvas
+          .parts=${view.geometry}
+          .palette=${view.palette ?? {}}
+          .context=${view.context ?? ''}
+          @part-selected=${(e) => {
+            this.selected = e.detail;
+        }}
+          @render-error=${(e) => {
+            this.error = e.detail.message;
+        }}
+        ></figure-v3-canvas>
+        <aside>
+          <h3>${this.selected || '모델 입력'}</h3>
+          ${fields.map(field => html `<label><span>${fieldLabel(field.id)} (${field.unit})${field.role === 'state' ? ' · 동작' : ''}</span><input aria-label=${field.id} type="number" step="any" .value=${String(field.value)} ?disabled=${unavailable} @change=${(e) => this.changeField(field, e)} /></label>`)}
+          ${part
+            ? html `<h3>재질</h3>
+                  <label
+                    ><span>색 역할</span
+                    ><select
+                      .value=${part.material.token}
+                      ?disabled=${unavailable}
+                      @change=${(e) => this.run(() => this.session.edit({ kind: 'set-material', target: this.selected, material: { ...part.material, token: e.target.value } }))}
+                    >
+                      ${Object.keys(view.palette ?? {}).map(token => html `<option value=${token}>${token === 'palette.primary' ? '기본 몸체' : token}</option>`)}
+                    </select></label
+                  >
+                  <p class="hint">
+                    도형과 위치를 결정하는 입력을 편집합니다. 다른 부품과 공유하는 입력은 함께 영향을 줄 수 있습니다.
+                  </p>`
+            : null}
+          ${view.bindings.length
+            ? html `<h3>배치 연결점</h3>
+                  ${view.bindings.map(b => html `<p>${b.label} · ${b.role}</p>`)}`
+            : null}
+        </aside>
+      </main>`;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureV3Editor.prototype, "session", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FigureV3Editor.prototype, "revision", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Editor.prototype, "selected", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Editor.prototype, "error", void 0);
+FigureV3Editor = __decorate([
+    customElement('figure-v3-editor')
+], FigureV3Editor);
+export { FigureV3Editor };
+//# sourceMappingURL=v3-editor.js.map

package/dist-client/modeller/v3-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"v3-editor.js","sourceRoot":"","sources":["../../client/modeller/v3-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, type PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport type { V3InputChange, V3PrimitiveCreation } from '@hatiolab/figure-model'\nimport type { V3ProductSession } from './v3-product-session.js'\nimport './v3-canvas.js'\nimport type { FigureV3Canvas } from './v3-canvas.js'\n\nconst names: Record<string, string> = {\n  position: '위치',\n  rotation: '회전',\n  size: '크기',\n  dimension: '치수',\n  width: '너비',\n  height: '높이',\n  depth: '깊이',\n  radius: '반지름',\n  length: '길이',\n  round: '모서리 반경',\n  left: '왼쪽',\n  right: '오른쪽',\n  bottom: '아랫면',\n  top: '윗면',\n  openingLeft: '개구부 왼쪽',\n  openingRight: '개구부 오른쪽',\n  openingTop: '개구부 윗면'\n}\nfunction fieldLabel(id: string) {\n  return id\n    .split('.')\n    .map(p => names[p] ?? p.toUpperCase())\n    .join(' · ')\n}\n\n/** Product editor surface. The injected session is shared by page persistence and AI commands. */\n@customElement('figure-v3-editor')\nexport class FigureV3Editor extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      height: 100%;\n      font: 13px sans-serif;\n      color: var(--md-sys-color-on-surface, #22343f);\n    }\n    header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      border-bottom: 1px solid #d4dde2;\n      flex-wrap: wrap;\n    }\n    main {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-columns: 180px minmax(180px, 1fr) 300px;\n    }\n    aside {\n      padding: 12px;\n      overflow: auto;\n      background: var(--md-sys-color-surface, #fff);\n    }\n    aside:first-child {\n      border-right: 1px solid #d4dde2;\n    }\n    aside:last-child {\n      border-left: 1px solid #d4dde2;\n    }\n    h3 {\n      font-size: var(--ui-t-body, 13px);\n      margin: 22px 0 10px;\n    }\n    h3:first-child {\n      margin-top: 0;\n    }\n    button,\n    input,\n    select {\n      font: inherit;\n      box-sizing: border-box;\n      height: 34px;\n      border: 1px solid #cbd5dc;\n      border-radius: 6px;\n      background: var(--md-sys-color-surface, #fff);\n      color: inherit;\n      padding: 0 8px;\n      min-width: 0;\n    }\n    button {\n      cursor: pointer;\n    }\n    button:disabled {\n      opacity: 0.45;\n      cursor: default;\n    }\n    button[aria-pressed='true'] {\n      background: #d6edf0;\n      border-color: #337783;\n    }\n    .parts {\n      display: grid;\n      gap: 6px;\n    }\n    .recipes {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 6px;\n    }\n    label {\n      display: grid;\n      grid-template-columns: 112px minmax(0, 1fr);\n      align-items: center;\n      gap: 8px;\n      margin: 8px 0;\n    }\n    label span {\n      overflow-wrap: anywhere;\n    }\n    .error {\n      padding: 10px;\n      background: #fff0eb;\n      color: #922716;\n      white-space: pre-wrap;\n    }\n    .status {\n      margin-left: auto;\n    }\n    .hint {\n      color: #637783;\n      line-height: 1.5;\n    }\n    @media (max-width: 800px) {\n      main {\n        grid-template-columns: 140px minmax(160px, 1fr);\n      }\n      aside:last-child {\n        grid-column: 1/-1;\n        max-height: 260px;\n        border-top: 1px solid #d4dde2;\n      }\n    }\n  `\n  @property({ attribute: false }) session?: V3ProductSession\n  @property({ type: Number }) revision = 0\n  @state() private selected = ''\n  @state() private error = ''\n  private lastContext: string | null = null\n  protected willUpdate(_changed: PropertyValues) {\n    const view = this.session?.read()\n    if (view?.context !== this.lastContext) {\n      this.lastContext = view?.context ?? null\n      this.selected = ''\n      this.error = ''\n    }\n    if (view && !view.geometry.some(g => g.id === this.selected)) this.selected = ''\n  }\n  private run(action: () => unknown) {\n    try {\n      action()\n      this.error = ''\n      this.changed()\n    } catch (error) {\n      this.error = error instanceof Error ? error.message : String(error)\n    }\n  }\n  private changed() {\n    this.requestUpdate()\n    this.dispatchEvent(new CustomEvent('v3-changed', { bubbles: true, composed: true }))\n  }\n  private async save() {\n    if (!this.session) return\n    try {\n      const promise = this.session.save()\n      this.changed()\n      await promise\n      this.error = ''\n    } catch (error) {\n      this.error = error instanceof Error ? error.message : String(error)\n    } finally {\n      this.changed()\n    }\n  }\n  private add(kind: V3PrimitiveCreation['kind']) {\n    if (!this.session) return\n    this.run(() => {\n      const ids = new Set(this.session!.read().geometry.map(g => g.id))\n      let n = 1\n      while (ids.has(`${kind}-${n}`)) n++\n      const common = { id: `${kind}-${n}`, position: { x: 0, y: 50, z: 0 } }\n      const part: V3PrimitiveCreation =\n        kind === 'box'\n          ? { ...common, kind, dimensions: { width: 100, height: 100, depth: 100 } }\n          : kind === 'cylinder'\n            ? { ...common, kind, dimensions: { radius: 50, length: 100 } }\n            : kind === 'rounded-box'\n              ? { ...common, kind, dimensions: { width: 100, height: 100, depth: 100, round: 10 } }\n              : {\n                  ...common,\n                  position: { x: 0, y: 0, z: 0 },\n                  kind: 'portal',\n                  dimensions: {\n                    left: -100,\n                    right: 100,\n                    bottom: 0,\n                    top: 200,\n                    openingLeft: -70,\n                    openingRight: 70,\n                    openingTop: 170,\n                    depth: 30\n                  }\n                }\n      this.session!.add(part)\n      this.selected = part.id\n    })\n  }\n  private changeField(field: { id: string; unit: V3InputChange['unit']; role?: string }, event: Event) {\n    const input = event.target as HTMLInputElement,\n      value = input.valueAsNumber\n    this.run(() =>\n      this.session!.apply([\n        { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value }\n      ])\n    )\n    // Rejected edits must also restore the displayed numeric value.\n    input.value = String(this.session!.read().fields.find(i => i.id === field.id)!.value)\n  }\n  render() {\n    const view = this.session?.read()\n    if (!view) return html`<p>모델을 여는 중입니다.</p>`\n    const unavailable = view.loading || !!view.error || view.saving || !view.context\n    const part = view.geometry.find(g => g.id === this.selected)\n    // Shared/root parameters remain available even when a part is selected.\n    const own = view.fields.filter(i => this.selected && i.id.startsWith(this.selected + '.'))\n    const common = view.fields.filter(i => !view.geometry.some(g => i.id.startsWith(g.id + '.')))\n    const fields = this.selected ? [...own, ...common] : view.fields\n    return html` <header>\n        <strong>V3 모델링</strong>\n        <button ?disabled=${unavailable || !view.canUndo} @click=${() => this.run(() => this.session!.undo())}>\n          실행 취소\n        </button>\n        <button ?disabled=${unavailable || !view.canRedo} @click=${() => this.run(() => this.session!.redo())}>\n          다시 실행\n        </button>\n        <button @click=${() => this.renderRoot.querySelector<FigureV3Canvas>('figure-v3-canvas')?.fit()}>\n          전체 보기\n        </button>\n        <span class=\"status\" role=\"status\"\n          >${view.loading ? '불러오는 중' : view.saving ? '저장 중' : view.dirty || !view.id ? '저장 안 됨' : '저장됨'}</span\n        >\n        <button ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}>저장</button>\n      </header>\n      ${this.error || view.error ? html`<div role=\"alert\" class=\"error\">${this.error || view.error}</div>` : null}\n      <main>\n        <aside>\n          <h3>도형 추가</h3>\n          <div class=\"recipes\">\n            ${(['box', 'cylinder', 'rounded-box', 'portal'] as const).map((kind, i) => html`<button ?disabled=${unavailable} @click=${() => this.add(kind)}>${['상자', '원기둥', '둥근 상자', '문틀'][i]}</button>`)}\n          </div>\n          <h3>부품 ${view.geometry.length}</h3>\n          <div class=\"parts\">\n            ${view.geometry.map(\n              g =>\n                html`<button\n                  aria-pressed=${g.id === this.selected}\n                  @click=${() => {\n                    this.selected = g.id\n                  }}\n                >\n                  ${g.id}\n                </button>`\n            )}\n          </div>\n        </aside>\n        <figure-v3-canvas\n          .parts=${view.geometry}\n          .palette=${view.palette ?? {}}\n          .context=${view.context ?? ''}\n          @part-selected=${(e: CustomEvent<string>) => {\n            this.selected = e.detail\n          }}\n          @render-error=${(e: CustomEvent<Error>) => {\n            this.error = e.detail.message\n          }}\n        ></figure-v3-canvas>\n        <aside>\n          <h3>${this.selected || '모델 입력'}</h3>\n          ${fields.map(field => html`<label><span>${fieldLabel(field.id)} (${field.unit})${field.role === 'state' ? ' · 동작' : ''}</span><input aria-label=${field.id} type=\"number\" step=\"any\" .value=${String(field.value)} ?disabled=${unavailable} @change=${(e: Event) => this.changeField(field, e)} /></label>`)}\n          ${\n            part\n              ? html`<h3>재질</h3>\n                  <label\n                    ><span>색 역할</span\n                    ><select\n                      .value=${part.material.token}\n                      ?disabled=${unavailable}\n                      @change=${(e: Event) => this.run(() => this.session!.edit({ kind: 'set-material', target: this.selected, material: { ...part.material, token: (e.target as HTMLSelectElement).value } }))}\n                    >\n                      ${Object.keys(view.palette ?? {}).map(token => html`<option value=${token}>${token === 'palette.primary' ? '기본 몸체' : token}</option>`)}\n                    </select></label\n                  >\n                  <p class=\"hint\">\n                    도형과 위치를 결정하는 입력을 편집합니다. 다른 부품과 공유하는 입력은 함께 영향을 줄 수 있습니다.\n                  </p>`\n              : null\n          }\n          ${\n            view.bindings.length\n              ? html`<h3>배치 연결점</h3>\n                  ${view.bindings.map(b => html`<p>${b.label} · ${b.role}</p>`)}`\n              : null\n          }\n        </aside>\n      </main>`\n  }\n}\n"]}