@things-factory/figure-ui 10.1.16 → 10.1.17

package/dist-client/modeller/figure-ask.js

@@ -1,282 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import '@material/web/icon/icon.js';
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { i18next, localize } from '@operato/i18n';
-import { activePalette } from '@hatiolab/things-scene';
-import { proposeFigure } from '../graphql/index.js';
-/**
- * 말로 시키는 줄.
- *
- * ## 무엇을 시키는지가 화면에 보여야 한다
- *
- * 정본이 있으면 **고치는 것**이고, 없으면 **만드는 것**이다. 같은 칸으로 두 가지를
- * 하면 저작자가 「이게 지금 것을 덮어쓰나」를 매번 걱정한다. 그래서 무엇을 할지
- * 칸 옆에 적어 둔다.
- *
- * ## 후보를 여기서 받지 않는다
- *
- * 이 컴포넌트는 시키고 결과를 **알릴 뿐**이다. 받을지 버릴지는 저작면이 정한다 —
- * 정본은 한 벌이고 그 한 벌을 가진 자리가 정해야 한다.
- *
- * ## 팔레트를 함께 보낸다
- *
- * 서버는 팔레트를 모른다. 그리는 쪽이 어떤 토큰을 풀 수 있는지 아는 유일한 자리다.
- */
-let FigureAsk = class FigureAsk extends localize(i18next)(LitElement) {
-    constructor() {
-        super(...arguments);
-        /** 새로 만들 때 쓸 타입 이름. */
-        this.type = '';
-        /** 이 모델러 세션에서 사람이 명시적으로 남긴 이전 후보 반응. */
-        this.feedback = [];
-        this.imageOnly = false;
-        this.asking = false;
-        this.failure = '';
-    }
-    static { this.styles = css `
-    /*
-      이 부품은 **자기 줄을 갖지 않는다.**
-
-      전에는 테두리와 여백으로 스스로 한 줄이 되었다. 저작면의 머리줄 바로 아래에 놓이니
-      화면 위쪽이 두 줄이 되었고, 위 줄은 이름을 페이지 제목과 겹쳐 적고 있었다. 캔버스가
-      주인공인 화면에서 그 두 줄은 비싸다.
-
-      이제 머리줄 안에 들어가 그 줄의 남는 폭을 쓴다. 테두리·여백은 담는 줄이 갖는다.
-    */
-    :host {
-      display: flex;
-      flex: 1;
-      min-width: 0;
-      font: var(--label-font, inherit);
-      /*
-        이 줄의 글자 크기를 여기서 정한다.
-
-        안 적어 두면 브라우저 기본 크기(16px)를 물려받는다. 아래 패널들은 전부 12px
-        언저리라 위 두 줄만 커 보이고, 단추가 화면 전체와 따로 논다.
-
-        form 요소(input · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.
-      */
-      font-size: 0.76rem;
-    }
-
-    form {
-      display: flex;
-      flex-wrap: wrap;
-      flex: 1;
-      min-width: 0;
-      align-items: center;
-      gap: var(--spacing-medium, 8px);
-    }
-
-    md-icon[lead] {
-      --md-icon-size: 18px;
-      flex: none;
-      color: var(--md-sys-color-primary);
-    }
-
-    input[ask] {
-      flex: 1;
-      min-width: 0;
-      padding: 6px 10px;
-      font: var(--input-field-font, inherit);
-      font-size: 0.78rem;
-      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;
-    }
-    input[ask]:focus {
-      outline: 2px solid var(--md-sys-color-primary);
-      outline-offset: -1px;
-    }
-    input[ask][disabled] {
-      opacity: 0.5;
-    }
-
-    /* 무엇을 시키는 것인지 — 만드나 고치나 */
-    span[mode] {
-      flex: none;
-      font-size: 0.72rem;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-    }
-
-    /* 그림 붙이기. 붙인 것이 있으면 이름을 보여 준다 */
-    label[picture] {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      flex: none;
-      padding: 5px 9px;
-      font-size: 0.74rem;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    label[picture]:hover {
-      background-color: var(--md-sys-color-surface-container);
-    }
-    label[picture][has] {
-      color: var(--md-sys-color-on-primary-container);
-      background-color: var(--md-sys-color-primary-container);
-      border-color: transparent;
-    }
-    label[picture] md-icon {
-      --md-icon-size: 16px;
-    }
-    label[picture] input {
-      display: none;
-    }
-    span[filename] {
-      max-width: 8em;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    /*
-      채운 파랑 단추를 저장과 나눠 갖지 않는다.
-
-      머리줄의 저장이 이 화면의 주 동작이다. 바로 아래 줄에 같은 파랑 단추가 하나 더
-      있으면 어느 쪽이 주인지 눈이 못 고른다. 이쪽은 톤 단추로 한 단계 내린다.
-    */
-    button[go] {
-      flex: none;
-      padding: 6px 14px;
-      font: var(--label-font, inherit);
-      font-size: 0.76rem;
-      font-weight: 600;
-      color: var(--md-sys-color-on-primary-container);
-      background-color: var(--md-sys-color-primary-container);
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    button[go]:hover:not([disabled]) {
-      background-color: color-mix(in srgb, var(--md-sys-color-primary) 24%, var(--md-sys-color-primary-container));
-    }
-    button[go][disabled] {
-      opacity: 0.4;
-      cursor: default;
-    }
-
-    /* 못 만들었을 때. 사유를 삼키지 않는다 — 말을 고쳐 다시 시킬 단서다 */
-    div[failed] {
-      display: flex;
-      gap: 6px;
-      padding: 0 var(--spacing-large, 12px) var(--spacing-medium, 8px) var(--spacing-large, 12px);
-      font-size: 0.74rem;
-      line-height: 1.5;
-      color: var(--md-sys-color-error);
-    }
-    div[failed] md-icon {
-      --md-icon-size: 16px;
-      flex: none;
-    }
-  `; }
-    render() {
-        const revising = !!this.source;
-        return html `
-      <form title="이미지의 형태와 비율을 참고한 후보를 만듭니다. 저장은 하지 않습니다." @submit=${(e) => this.submit(e)}>
-        <md-icon lead>auto_awesome</md-icon>
-        <span mode>${i18next.t(revising ? 'figure.text.ask-to-revise' : 'figure.text.ask-to-create')}</span>
-        <input
-          ask
-          ?disabled=${this.asking}
-          placeholder=${i18next.t(revising ? 'figure.text.ask-revise-example' : 'figure.text.ask-create-example')}
-        />
-        <label picture ?has=${!!this.picture} title=${i18next.t('figure.text.picture-is-for-proportions')}>
-          <md-icon>image</md-icon>
-          ${this.picture
-            ? html `<span filename>${this.picture.name}</span>`
-            : i18next.t('figure.button.attach-a-picture')}
-          <input type="file" accept="image/*" @change=${(e) => this.pick(e)} />
-        </label>
-        <button go ?disabled=${this.asking || (this.imageOnly && !this.picture)}>
-          ${this.asking ? i18next.t('figure.text.asking') : i18next.t('figure.button.ask')}
-        </button>
-      </form>
-
-      ${this.failure
-            ? html `
-            <div failed>
-              <md-icon>error</md-icon>
-              <span>${this.failure}</span>
-            </div>
-          `
-            : nothing}
-    `;
-    }
-    pick(e) {
-        const input = e.target;
-        this.picture = input.files?.[0];
-    }
-    async submit(e) {
-        e.preventDefault();
-        const input = this.renderRoot.querySelector('input[ask]');
-        const prompt = input?.value?.trim();
-        if (!prompt || this.asking || (this.imageOnly && !this.picture)) {
-            return;
-        }
-        this.asking = true;
-        this.failure = '';
-        const baseSource = this.source ? JSON.stringify(this.source) : undefined;
-        try {
-            const proposal = await proposeFigure({
-                prompt,
-                base: baseSource,
-                type: this.source ? undefined : this.type,
-                // 그리는 쪽이 풀 수 있는 토큰만 보낸다. 서버는 이 목록 밖의 색을 거절한다.
-                palette: Object.keys(activePalette()),
-                // 구조적으로는 맞지만 품질 근거가 남으면 한 번 더 개선 후보를 시킨다.
-                refine: true,
-                feedback: this.feedback,
-                image: this.picture
-            });
-            this.dispatchEvent(new CustomEvent('proposed', { detail: { proposal, baseSource }, bubbles: true, composed: true }));
-            input.value = '';
-            this.picture = undefined;
-        }
-        catch (err) {
-            // 사유를 그대로 보여 준다. 「실패했습니다」로 뭉개면 말을 어떻게 고칠지 모른다.
-            this.failure = err.message;
-        }
-        finally {
-            this.asking = false;
-        }
-    }
-};
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], FigureAsk.prototype, "source", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], FigureAsk.prototype, "type", void 0);
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], FigureAsk.prototype, "feedback", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], FigureAsk.prototype, "imageOnly", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureAsk.prototype, "asking", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureAsk.prototype, "failure", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", File)
-], FigureAsk.prototype, "picture", void 0);
-FigureAsk = __decorate([
-    customElement('figure-ask')
-], FigureAsk);
-export { FigureAsk };
-//# sourceMappingURL=figure-ask.js.map

package/dist-client/modeller/figure-ask.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"figure-ask.js","sourceRoot":"","sources":["../../client/modeller/figure-ask.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport type { FigureSource } from '@hatiolab/figure-model'\nimport { activePalette } from '@hatiolab/things-scene'\n\nimport { proposeFigure } from '../graphql/index.js'\nimport type { FigureProposal, ProposalFeedback } from '../types.js'\n\n/**\n * 말로 시키는 줄.\n *\n * ## 무엇을 시키는지가 화면에 보여야 한다\n *\n * 정본이 있으면 **고치는 것**이고, 없으면 **만드는 것**이다. 같은 칸으로 두 가지를\n * 하면 저작자가 「이게 지금 것을 덮어쓰나」를 매번 걱정한다. 그래서 무엇을 할지\n * 칸 옆에 적어 둔다.\n *\n * ## 후보를 여기서 받지 않는다\n *\n * 이 컴포넌트는 시키고 결과를 **알릴 뿐**이다. 받을지 버릴지는 저작면이 정한다 —\n * 정본은 한 벌이고 그 한 벌을 가진 자리가 정해야 한다.\n *\n * ## 팔레트를 함께 보낸다\n *\n * 서버는 팔레트를 모른다. 그리는 쪽이 어떤 토큰을 풀 수 있는지 아는 유일한 자리다.\n */\n@customElement('figure-ask')\nexport class FigureAsk extends localize(i18next)(LitElement) {\n  static styles = css`\n    /*\n      이 부품은 **자기 줄을 갖지 않는다.**\n\n      전에는 테두리와 여백으로 스스로 한 줄이 되었다. 저작면의 머리줄 바로 아래에 놓이니\n      화면 위쪽이 두 줄이 되었고, 위 줄은 이름을 페이지 제목과 겹쳐 적고 있었다. 캔버스가\n      주인공인 화면에서 그 두 줄은 비싸다.\n\n      이제 머리줄 안에 들어가 그 줄의 남는 폭을 쓴다. 테두리·여백은 담는 줄이 갖는다.\n    */\n    :host {\n      display: flex;\n      flex: 1;\n      min-width: 0;\n      font: var(--label-font, inherit);\n      /*\n        이 줄의 글자 크기를 여기서 정한다.\n\n        안 적어 두면 브라우저 기본 크기(16px)를 물려받는다. 아래 패널들은 전부 12px\n        언저리라 위 두 줄만 커 보이고, 단추가 화면 전체와 따로 논다.\n\n        form 요소(input · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.\n      */\n      font-size: 0.76rem;\n    }\n\n    form {\n      display: flex;\n      flex-wrap: wrap;\n      flex: 1;\n      min-width: 0;\n      align-items: center;\n      gap: var(--spacing-medium, 8px);\n    }\n\n    md-icon[lead] {\n      --md-icon-size: 18px;\n      flex: none;\n      color: var(--md-sys-color-primary);\n    }\n\n    input[ask] {\n      flex: 1;\n      min-width: 0;\n      padding: 6px 10px;\n      font: var(--input-field-font, inherit);\n      font-size: 0.78rem;\n      color: var(--md-sys-color-on-surface);\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n    }\n    input[ask]:focus {\n      outline: 2px solid var(--md-sys-color-primary);\n      outline-offset: -1px;\n    }\n    input[ask][disabled] {\n      opacity: 0.5;\n    }\n\n    /* 무엇을 시키는 것인지 — 만드나 고치나 */\n    span[mode] {\n      flex: none;\n      font-size: 0.72rem;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n    }\n\n    /* 그림 붙이기. 붙인 것이 있으면 이름을 보여 준다 */\n    label[picture] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      flex: none;\n      padding: 5px 9px;\n      font-size: 0.74rem;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    label[picture]:hover {\n      background-color: var(--md-sys-color-surface-container);\n    }\n    label[picture][has] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n    label[picture] md-icon {\n      --md-icon-size: 16px;\n    }\n    label[picture] input {\n      display: none;\n    }\n    span[filename] {\n      max-width: 8em;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /*\n      채운 파랑 단추를 저장과 나눠 갖지 않는다.\n\n      머리줄의 저장이 이 화면의 주 동작이다. 바로 아래 줄에 같은 파랑 단추가 하나 더\n      있으면 어느 쪽이 주인지 눈이 못 고른다. 이쪽은 톤 단추로 한 단계 내린다.\n    */\n    button[go] {\n      flex: none;\n      padding: 6px 14px;\n      font: var(--label-font, inherit);\n      font-size: 0.76rem;\n      font-weight: 600;\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    button[go]:hover:not([disabled]) {\n      background-color: color-mix(in srgb, var(--md-sys-color-primary) 24%, var(--md-sys-color-primary-container));\n    }\n    button[go][disabled] {\n      opacity: 0.4;\n      cursor: default;\n    }\n\n    /* 못 만들었을 때. 사유를 삼키지 않는다 — 말을 고쳐 다시 시킬 단서다 */\n    div[failed] {\n      display: flex;\n      gap: 6px;\n      padding: 0 var(--spacing-large, 12px) var(--spacing-medium, 8px) var(--spacing-large, 12px);\n      font-size: 0.74rem;\n      line-height: 1.5;\n      color: var(--md-sys-color-error);\n    }\n    div[failed] md-icon {\n      --md-icon-size: 16px;\n      flex: none;\n    }\n  `\n\n  /** 지금 정본. 있으면 고치는 것이고 없으면 만드는 것이다. */\n  @property({ type: Object }) source?: FigureSource\n  /** 새로 만들 때 쓸 타입 이름. */\n  @property({ type: String }) type = ''\n  /** 이 모델러 세션에서 사람이 명시적으로 남긴 이전 후보 반응. */\n  @property({ type: Array }) feedback: ProposalFeedback[] = []\n  @property({ type: Boolean }) imageOnly = false\n\n  @state() private asking = false\n  @state() private failure = ''\n  @state() private picture?: File\n\n  render() {\n    const revising = !!this.source\n\n    return html`\n      <form title=\"이미지의 형태와 비율을 참고한 후보를 만듭니다. 저장은 하지 않습니다.\" @submit=${(e: Event) => this.submit(e)}>\n        <md-icon lead>auto_awesome</md-icon>\n        <span mode>${i18next.t(revising ? 'figure.text.ask-to-revise' : 'figure.text.ask-to-create')}</span>\n        <input\n          ask\n          ?disabled=${this.asking}\n          placeholder=${i18next.t(revising ? 'figure.text.ask-revise-example' : 'figure.text.ask-create-example')}\n        />\n        <label picture ?has=${!!this.picture} title=${i18next.t('figure.text.picture-is-for-proportions')}>\n          <md-icon>image</md-icon>\n          ${this.picture\n            ? html`<span filename>${this.picture.name}</span>`\n            : i18next.t('figure.button.attach-a-picture')}\n          <input type=\"file\" accept=\"image/*\" @change=${(e: Event) => this.pick(e)} />\n        </label>\n        <button go ?disabled=${this.asking || (this.imageOnly && !this.picture)}>\n          ${this.asking ? i18next.t('figure.text.asking') : i18next.t('figure.button.ask')}\n        </button>\n      </form>\n\n      ${this.failure\n        ? html`\n            <div failed>\n              <md-icon>error</md-icon>\n              <span>${this.failure}</span>\n            </div>\n          `\n        : nothing}\n    `\n  }\n\n  private pick(e: Event) {\n    const input = e.target as HTMLInputElement\n    this.picture = input.files?.[0]\n  }\n\n  private async submit(e: Event) {\n    e.preventDefault()\n\n    const input = this.renderRoot.querySelector('input[ask]') as HTMLInputElement\n    const prompt = input?.value?.trim()\n    if (!prompt || this.asking || (this.imageOnly && !this.picture)) {\n      return\n    }\n\n    this.asking = true\n    this.failure = ''\n    const baseSource = this.source ? JSON.stringify(this.source) : undefined\n\n    try {\n      const proposal = await proposeFigure({\n        prompt,\n        base: baseSource,\n        type: this.source ? undefined : this.type,\n        // 그리는 쪽이 풀 수 있는 토큰만 보낸다. 서버는 이 목록 밖의 색을 거절한다.\n        palette: Object.keys(activePalette() as Record<string, string>),\n        // 구조적으로는 맞지만 품질 근거가 남으면 한 번 더 개선 후보를 시킨다.\n        refine: true,\n        feedback: this.feedback,\n        image: this.picture\n      })\n\n      this.dispatchEvent(\n        new CustomEvent('proposed', { detail: { proposal, baseSource }, bubbles: true, composed: true })\n      )\n      input.value = ''\n      this.picture = undefined\n    } catch (err) {\n      // 사유를 그대로 보여 준다. 「실패했습니다」로 뭉개면 말을 어떻게 고칠지 모른다.\n      this.failure = (err as Error).message\n    } finally {\n      this.asking = false\n    }\n  }\n}\n"]}