@things-factory/figure-ui 10.1.75 → 10.1.76

package/dist-client/modeller/figure-parts.d.ts

@@ -0,0 +1,69 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+import type { FigurePrimitiveCreation } from '@hatiolab/figure-model';
+import type { FigureBudgetLine } from './maturity.js';
+/**
+ * 도형 팔레트와 부품 목록 — 자산의 것.
+ *
+ * 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.
+ *
+ * 부품의 도형은 평가가 준 `provider` 로 읽는다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라
+ * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.
+ *
+ * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다.
+ */
+/** 한 줄 — 평가에서 이 패널이 읽는 것만. */
+export interface FigurePartRow {
+    id: string;
+    provider: string;
+    /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */
+    hidden?: boolean;
+    /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */
+    invisible?: boolean;
+    /** 되풀이한 부품이면 지금 몇 개로 그려지나. 되풀이는 한 부품이다 — 한 줄로 보인다. */
+    copies?: number;
+}
+/** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */
+export type FigurePaletteKind = FigurePrimitiveCreation['kind'] | 'plate' | 'wall';
+declare const FigureParts_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class FigureParts extends FigureParts_base {
+    static styles: import("lit").CSSResult[];
+    parts: FigurePartRow[];
+    /** 고른 부품의 id. 자리(index)가 아니다 — 부품은 id 로 안정하게 가리킨다. */
+    selected: string;
+    /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */
+    locked: boolean;
+    /**
+     * 이 도형이 치르는 값 — 삼각형 · 묶음 · 한 화면에 몇 대 · 등급. 부품을 더하는 바로 그 자리에서 보여야 로우폴리의
+     * 기준이 저작을 이끈다. 등급이 D 면 무엇이 넘쳤는지를 적는다. 누르면 성숙도 탭이 열린다.
+     */
+    budget?: FigureBudgetLine;
+    /**
+     * 디테일 등급(S/M/L)의 부품 한도(사용자 2026-09-24). 부품을 넣기 **전에** 몇 개 남았는지 보이고, 다 차면 팔레트가
+     * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.
+     */
+    partBudget?: {
+        level: 'S' | 'M' | 'L' | null;
+        used: number;
+        limit: number | null;
+    };
+    /** How many recipe templates the catalog holds; none, and the section is not drawn. */
+    recipeCount: number;
+    render(): import("lit-html").TemplateResult<1>;
+    /** 디테일 등급 — 고르면 한도가 바뀐다. 목록 머리 아래. */
+    private renderLevel;
+    private renderBudget;
+    /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */
+    private renderShowAll;
+    private renderRow;
+    /** 고른 줄의 조작. 못 하는 것은 빼지 않고 흐리게 둔다 — 자리가 밀리면 연달아 지우다 엉뚱한 것을 누른다. */
+    private renderOps;
+    /**
+     * Recipes (ADR-0095): the catalog of templates -- a door, a roller row -- opened over the modeller, put onto the chosen
+     * part in one step.
+     */
+    private renderRecipes;
+    /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */
+    private ask;
+}
+export {};

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

@@ -0,0 +1,559 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { PART_LIMIT } from '@hatiolab/figure-model';
+import { partLabelOf } from './fields.js';
+/** 제공자마다의 아이콘. Material Symbols 이름이다. */
+const PROVIDER_ICON = {
+    box: 'deployed_code',
+    cylinder: 'database',
+    ellipticCylinder: 'database',
+    frustum: 'change_history',
+    sphere: 'circle',
+    roundedBox: 'crop_square',
+    roundedBoxXZ: 'crop_square',
+    hollowBox: 'check_box_outline_blank',
+    hollowBoxXZ: 'check_box_outline_blank',
+    polygon: 'pentagon',
+    portal: 'door_front'
+};
+const RECIPES = [
+    { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
+    { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
+    { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rounded-box' },
+    { kind: 'sphere', icon: 'circle', label: 'figure.label.primitive-sphere' },
+    { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
+    { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
+    { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
+    { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
+    { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' },
+    { kind: 'hollow-box', icon: 'inventory_2', label: 'figure.label.primitive-hollow-box' }
+];
+let FigureParts = class FigureParts extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.parts = [];
+        /** 고른 부품의 id. 자리(index)가 아니다 — 부품은 id 로 안정하게 가리킨다. */
+        this.selected = '';
+        /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */
+        this.locked = false;
+        /** How many recipe templates the catalog holds; none, and the section is not drawn. */
+        this.recipeCount = 0;
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        /* The divider beside it is the editor's frame's (ox-three-pane). */
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font, inherit);
+        font-size: 0.76rem;
+        /* Folds by its own width: the editor gives this column 140 px when it has two columns (UX, 2026-09-24). */
+        container-type: inline-size;
+      }
+      section {
+        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      section[list] {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+      }
+      h3 {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 6px;
+        margin: 0 0 6px 0;
+        font-size: var(--ui-t-micro, 11px);
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      /* The cost line: the grade's letter in its colour, then what the figure costs. */
+      button[budget] {
+        display: flex;
+        align-items: flex-start;
+        gap: 6px;
+        width: 100%;
+        margin: 0 0 6px;
+        padding: 4px 6px;
+        font: inherit;
+        font-size: 0.68rem;
+        line-height: 1.5;
+        text-align: left;
+        color: var(--md-sys-color-on-surface-variant);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      button[budget]:hover {
+        background: var(--md-sys-color-surface-container);
+      }
+      button[budget] b {
+        flex: none;
+        min-width: 16px;
+        text-align: center;
+        border-radius: 4px;
+        color: var(--md-sys-color-on-primary-container);
+        background: var(--md-sys-color-primary-container);
+      }
+      button[budget][grade='C'] b {
+        color: var(--md-sys-color-on-tertiary-container);
+        background: var(--md-sys-color-tertiary-container);
+      }
+      button[budget][grade='D'] {
+        border-color: var(--md-sys-color-error);
+      }
+      button[budget][grade='D'] b {
+        color: var(--md-sys-color-on-error);
+        background: var(--md-sys-color-error);
+      }
+      button[budget] em {
+        display: block;
+        font-style: normal;
+        color: var(--md-sys-color-error);
+      }
+      span[room][full] {
+        color: var(--md-sys-color-error);
+        font-weight: 600;
+      }
+      p[full] {
+        margin: 4px 0 0;
+        font-size: 0.68rem;
+        color: var(--md-sys-color-error);
+      }
+      div[level] {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        align-items: center;
+        gap: 6px;
+        margin: 0 0 6px;
+        font-size: 0.68rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[level] select {
+        min-width: 0;
+        padding: 2px 4px;
+        font: inherit;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface-container-lowest);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+      }
+      small[copies] {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      span[room] {
+        font-size: 0.7rem;
+        font-weight: 400;
+        letter-spacing: 0;
+        text-transform: none;
+      }
+      /* Three to a row, small (user, 2026-09-24): the palette is reached for, not read -- the list below is what grows. */
+      div[palette] {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 3px;
+      }
+      button[shape] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1px;
+        min-width: 0;
+        padding: 5px 1px 4px;
+        font: var(--label-font, inherit);
+        font-size: 0.6rem;
+        line-height: 1.2;
+        text-align: center;
+        overflow-wrap: anywhere;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      button[recipe-catalog] {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 10px;
+        font: inherit;
+        font-size: 0.75rem;
+        color: var(--md-sys-color-on-surface);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 999em;
+        cursor: pointer;
+      }
+      button[shape]:hover:not([disabled]) {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border-color: transparent;
+      }
+      button[shape][disabled] {
+        opacity: 0.35;
+        cursor: default;
+      }
+      button[shape] md-icon {
+        --md-icon-size: 18px;
+      }
+      ol {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      li {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 6px;
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      li:hover {
+        background-color: var(--md-sys-color-surface-container);
+      }
+      li[selected] {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+      }
+      li md-icon {
+        --md-icon-size: 16px;
+        flex: none;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      button[eye][all] {
+        margin-left: auto;
+        opacity: 0.75;
+      }
+      button[eye][all]:hover {
+        opacity: 1;
+      }
+      button[eye] {
+        display: flex;
+        flex: none;
+        padding: 1px;
+        color: inherit;
+        background: none;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        opacity: 0;
+      }
+      li:hover button[eye],
+      li[selected] button[eye],
+      button[eye][off] {
+        opacity: 1;
+      }
+      button[eye][off] {
+        color: var(--md-sys-color-tertiary);
+      }
+      button[eye] md-icon {
+        --md-icon-size: 15px;
+        color: inherit;
+      }
+      li[off] span[label],
+      li[off] > md-icon,
+      li[invisible] span[label],
+      li[invisible] > md-icon {
+        opacity: 0.45;
+      }
+      li[selected] md-icon {
+        color: inherit;
+      }
+      span[label] {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 0.78rem;
+      }
+      span[label] small {
+        margin-left: 4px;
+        font-size: 0.66rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      div[ops] {
+        display: none;
+        gap: 1px;
+      }
+      li[selected] div[ops] {
+        display: flex;
+      }
+      div[ops] button {
+        display: flex;
+        padding: 2px;
+        color: inherit;
+        background: none;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      div[ops] button:hover:not([disabled]) {
+        background-color: var(--md-sys-color-surface-container-lowest);
+      }
+      div[ops] button[disabled] {
+        opacity: 0.3;
+        cursor: default;
+      }
+      div[ops] md-icon {
+        --md-icon-size: 15px;
+        color: inherit;
+      }
+      /*
+        Under 200 px the selected row's four buttons pushed its name out and the last one past the edge (seen at 140,
+        2026-09-24). They go to a line of their own under the name.
+      */
+      @container (max-width: 199px) {
+        li[selected] {
+          flex-wrap: wrap;
+        }
+        li[selected] div[ops] {
+          flex-basis: 100%;
+          justify-content: flex-end;
+        }
+      }
+      p[quiet] {
+        margin: 0;
+        font-size: 0.76rem;
+        line-height: 1.6;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+    `
+    ]; }
+    render() {
+        const b = this.partBudget;
+        const full = !!b && b.limit !== null && b.used >= b.limit;
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.shapes')}</h3>
+        <div palette>
+          ${RECIPES.map(recipe => html `
+              <button
+                shape
+                ?disabled=${this.locked || full}
+                title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t(recipe.label)}
+                @click=${() => this.ask('add-part', { kind: recipe.kind })}
+              >
+                <md-icon>${recipe.icon}</md-icon>
+                <span>${i18next.t(recipe.label)}</span>
+              </button>
+            `)}
+        </div>
+        ${full ? html `<p full>${i18next.t('figure.text.part-limit-reached-short', { level: b.level, limit: b.limit })}</p>` : nothing}
+      </section>
+      ${this.renderRecipes(full)}
+
+      <section list>
+        <h3>
+          <span>${i18next.t('figure.label.parts')}</span>
+          <span room ?full=${full} title=${i18next.t('figure.text.limit-comes-from-level')}
+            >${b && b.limit !== null ? i18next.t('figure.text.n-of-limit', { used: b.used, limit: b.limit }) : (b?.used ?? this.parts.length)}</span
+          >
+          ${this.renderShowAll()}
+        </h3>
+        ${this.renderLevel()}
+        ${this.renderBudget()}
+        ${this.parts.length === 0
+            ? html `<p quiet>${i18next.t('figure.text.no-parts-yet')}</p>`
+            : html `<ol>
+              ${this.parts.map((part, index) => this.renderRow(part, index))}
+            </ol>`}
+      </section>
+    `;
+    }
+    /** 디테일 등급 — 고르면 한도가 바뀐다. 목록 머리 아래. */
+    renderLevel() {
+        const b = this.partBudget;
+        if (!b)
+            return nothing;
+        return html `<div level>
+      <label for="detail-level">${i18next.t('figure.label.detail-level')}</label>
+      <select
+        id="detail-level"
+        title=${i18next.t('figure.text.detail-level-explained')}
+        .value=${b.level ?? ''}
+        ?disabled=${this.locked}
+        @change=${(e) => {
+            const value = e.target.value;
+            this.dispatchEvent(new CustomEvent('set-detail-level', { detail: { level: value || null }, bubbles: true, composed: true }));
+        }}
+      >
+        <option value="" ?selected=${!b.level}>${i18next.t('figure.label.detail-none')}</option>
+        ${['S', 'M', 'L'].map(one => html `<option value=${one} ?selected=${one === b.level}>
+            ${one} ${i18next.t('figure.label.detail-' + one)} · ${i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}
+          </option>`)}
+      </select>
+    </div>`;
+    }
+    renderBudget() {
+        const b = this.budget;
+        if (!b || !this.parts.length)
+            return nothing;
+        const over = b.grade === 'D';
+        return html `<button
+      budget
+      grade=${b.grade}
+      title=${i18next.t('figure.text.parts-budget-open')}
+      @click=${() => this.dispatchEvent(new CustomEvent('show-maturity', { bubbles: true, composed: true }))}
+    >
+      <b>${b.grade}</b>
+      <span>
+        <strong performance-cost>${i18next.t('figure.label.performance-cost')}</strong>
+        ${i18next.t('figure.text.parts-budget', {
+            triangles: b.triangles.toLocaleString(),
+            groups: b.groups.toLocaleString(),
+            instances: b.instances.toLocaleString()
+        })}
+        ${over
+            ? html `<em
+              >${i18next.t('figure.text.parts-budget-over', {
+                budget: i18next.t('figure.label.budget-' + b.tightest.key),
+                used: b.tightest.used.toLocaleString(),
+                limit: b.tightest.limit.toLocaleString()
+            })}</em
+            >`
+            : nothing}
+      </span>
+    </button>`;
+    }
+    /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */
+    renderShowAll() {
+        if (this.parts.length === 0)
+            return nothing;
+        const anyHidden = this.parts.some(part => part.hidden);
+        return html `
+      <button
+        eye
+        all
+        ?off=${!anyHidden}
+        title=${i18next.t(anyHidden ? 'figure.text.show-all-parts' : 'figure.text.hide-all-parts')}
+        @click=${(e) => {
+            e.stopPropagation();
+            this.ask('set-all-parts-hidden', { hidden: !anyHidden });
+        }}
+      >
+        <md-icon>${anyHidden ? 'visibility' : 'visibility_off'}</md-icon>
+      </button>
+    `;
+    }
+    renderRow(part, index) {
+        const selected = part.id === this.selected;
+        const off = !!part.hidden;
+        return html `
+      <li
+        ?selected=${selected}
+        ?off=${off}
+        ?invisible=${!!part.invisible}
+        @click=${() => this.ask('select-part', { id: part.id })}
+      >
+        <button
+          eye
+          ?off=${off}
+          title=${i18next.t(off ? 'figure.text.show-this-part' : 'figure.text.hide-this-part')}
+          @click=${(e) => {
+            e.stopPropagation();
+            this.ask('toggle-part-hidden', { id: part.id });
+        }}
+        >
+          <md-icon>${off ? 'visibility_off' : 'visibility'}</md-icon>
+        </button>
+        <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>
+        <span label title=${part.id}
+          >${partLabelOf(part.id)}${part.copies ? html ` <small copies>× ${part.copies}</small>` : nothing}${part.invisible ? html `<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
+        >
+        ${selected ? this.renderOps(part.id, index) : nothing}
+      </li>
+    `;
+    }
+    /** 고른 줄의 조작. 못 하는 것은 빼지 않고 흐리게 둔다 — 자리가 밀리면 연달아 지우다 엉뚱한 것을 누른다. */
+    renderOps(id, index) {
+        const count = this.parts.length;
+        const op = (name, icon, detail, enabled = true) => html `
+      <button
+        op=${name}
+        ?disabled=${!enabled || this.locked}
+        title=${i18next.t('figure.button.' + name)}
+        @click=${(e) => {
+            e.stopPropagation();
+            if (enabled && !this.locked)
+                this.ask(name, detail);
+        }}
+      >
+        <md-icon>${icon}</md-icon>
+      </button>
+    `;
+        return html `
+      <div ops>
+        ${op('move-part-up', 'arrow_upward', { id, to: index - 1 }, index > 0)}
+        ${op('move-part-down', 'arrow_downward', { id, to: index + 1 }, index < count - 1)}
+        ${op('duplicate-part', 'content_copy', { id })} ${op('remove-part', 'delete', { id })}
+      </div>
+    `;
+    }
+    /**
+     * Recipes (ADR-0095): the catalog of templates -- a door, a roller row -- opened over the modeller, put onto the chosen
+     * part in one step.
+     */
+    renderRecipes(full) {
+        if (!this.recipeCount)
+            return nothing;
+        return html `<section recipes>
+      <h3>${i18next.t('figure.label.recipes')}</h3>
+      <button recipe-catalog ?disabled=${this.locked || full} @click=${() => this.ask('open-recipe-catalog', {})}>
+        <md-icon>widgets</md-icon>${i18next.t('figure.button.open-recipe-catalog', { count: this.recipeCount })}
+      </button>
+    </section>`;
+    }
+    /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */
+    ask(what, detail) {
+        this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FigureParts.prototype, "parts", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], FigureParts.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureParts.prototype, "locked", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureParts.prototype, "budget", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureParts.prototype, "partBudget", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FigureParts.prototype, "recipeCount", void 0);
+FigureParts = __decorate([
+    customElement('figure-parts')
+], FigureParts);
+export { FigureParts };
+//# sourceMappingURL=figure-parts.js.map