@things-factory/figure-ui 10.1.37 → 10.1.39

package/client/graphql/index.ts

@@ -335,6 +335,59 @@ export async function inspectFigure(id: string): Promise<FigureInspection> {
   return unwrap<FigureInspection>(response, 'inspectFigure')
 }
 
+/**
+ * 편집 중인 원본의 발행 판정 — 저장하지 않은 것을 잰다.
+ *
+ * 발행 패널의 `inspectFigure` 는 저장된 원본을 재므로 고친 결과를 저장한 뒤에야 보여 준다. 편집하면서 막히는
+ * 것을 보려면 편집 중인 원본을 보내야 한다. 판정은 서버의 같은 문(`inspectAnySource`)이 하고 문장도 같다 —
+ * 화면이 제 판정을 따로 가지면 두 자리가 다른 말을 한다. `id` 가 있으면 서버가 그 행의 타입과 직전 발행판을 읽는다.
+ */
+export async function inspectFigureDraft(source: string, id?: string): Promise<FigureInspection> {
+  const response = await client.query({
+    query: gql`
+      query InspectFigureDraft($source: String!, $id: String) {
+        inspectFigureDraft(source: $source, id: $id) {
+          blocked
+          findings {
+            code
+            message
+            why
+            how
+            at
+            fixes {
+              findingWay
+              part
+              axis
+              from
+              to
+              resolved
+              safe
+            }
+            fixPlan {
+              resolved
+              safe
+              fixes {
+                findingWay
+                part
+                axis
+                from
+                to
+                resolved
+                safe
+              }
+            }
+            blocking
+          }
+        }
+      }
+    `,
+    variables: { source, id },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<FigureInspection>(response, 'inspectFigureDraft')
+}
+
 /** 발행된 판들 — 최근 것부터 열 개. */
 /**
  * 직전 발행판의 정본. 한 번도 발행 안 했으면 `undefined`.

package/client/graphql/v3-store.ts

@@ -13,8 +13,14 @@ export const v3ProductStore: V3ProductStore = {
   async save(request) {
     const response = await client.mutate({
       mutation: gql`
-        mutation SaveFigureV3($source: String!, $id: String, $expectedSource: String, $creationId: String) {
-          saveFigureV3(source: $source, id: $id, expectedSource: $expectedSource, creationId: $creationId) {
+        mutation SaveFigureV3($source: String!, $id: String, $expectedSource: String, $creationId: String, $thumbnail: String) {
+          saveFigureV3(
+            source: $source
+            id: $id
+            expectedSource: $expectedSource
+            creationId: $creationId
+            thumbnail: $thumbnail
+          ) {
             id
             source
           }

package/client/modeller/figure-history-panel.ts

@@ -1,5 +1,6 @@
 import '@material/web/icon/icon.js'
 
+import { gateFindingStyles, renderGateFinding } from './gate-findings.js'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
@@ -31,6 +32,7 @@ import type { FigureGateFinding, FigureGateFix, FigureGateFixPlan, FigureInspect
 @customElement('figure-history-panel')
 export class FigureHistoryPanel extends localize(i18next)(LitElement) {
   static styles = [
+    gateFindingStyles,
     ScrollbarStyles,
     css`
     :host {
@@ -191,77 +193,6 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       게이트 사유. 막는 것은 색으로도 말하고, 알리는 것은 조용히 둔다 — 둘을 같은 톤으로 두면
       「이 중 어느 것이 발행을 막았나」를 사람이 다시 세어야 한다.
     */
-    ul[gate] {
-      margin: var(--spacing-small, 6px) 0 0;
-      padding: 0;
-      list-style: none;
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
-    }
-
-    li[head] {
-      font: var(--label-font, inherit);
-      font-size: 0.72rem;
-      color: var(--md-sys-color-error);
-    }
-
-    li[head][quiet] {
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-    }
-
-    li[finding] {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 3px;
-      padding: 3px 6px;
-      font-size: 0.72rem;
-      line-height: 1.5;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      background-color: var(--md-sys-color-surface-container);
-      border-radius: 4px;
-    }
-
-    li[finding][blocking] {
-      color: var(--md-sys-color-on-error-container, var(--md-sys-color-on-surface));
-      background-color: var(--md-sys-color-error-container);
-    }
-
-    li[finding] code[where] {
-      font-family: var(--mono-font, monospace);
-      font-size: 0.68rem;
-      opacity: 0.85;
-    }
-
-    li[finding] details[affected] {
-      width: 100%;
-      color: inherit;
-    }
-
-    li[finding] details[affected] summary {
-      cursor: pointer;
-      font-weight: 600;
-    }
-
-    /* 왜 나쁜지는 곁글로 — 읽어야 하지만 잰 것보다 먼저 눈에 들 필요는 없다 */
-    li[finding] span[why-line] {
-      opacity: 0.8;
-    }
-
-    /* 무엇을 바꾸면 되나 — 이 줄이 실제로 사람이 할 일이다. 연장 표를 달아 눈에 걸리게 한다 */
-    li[finding] span[how-line] {
-      display: flex;
-      align-items: flex-start;
-      gap: 4px;
-      padding-top: 2px;
-      font-weight: 600;
-    }
-    li[finding] span[how-line] md-icon {
-      --md-icon-size: 13px;
-      flex: none;
-      margin-top: 1px;
-    }
 
     /* 설명으로 끝내지 않는다. 이 단추는 원본을 바꾸지 않고 모델러에 후보만 연다. */
     li[finding] button[preview-fix] {
@@ -326,6 +257,18 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
   @property({ type: Number }) figureVersion = 0
   /** 저장하지 않은 것이 있나 — 있으면 발행을 막는다. */
   @property({ type: Boolean }) dirty = false
+  /**
+   * 열린 도형의 형식. 발행 · 판본 · 복원은 figure id 로만 서버를 묻고 서버의 한 문이 두 형식을 다 읽으므로 두 화면이
+   * 이 패널을 함께 쓴다. 갈리는 것은 조치 단추 하나다 — 부품을 옮기는 두 조치는 형식마다 다른 편집이라, 받는
+   * 화면이 없는 단추를 그리면 눌러도 아무 일이 없다.
+   */
+  @property({ type: String }) format: 'v2' | 'v3' = 'v2'
+  /**
+   * 행의 타입. 판정 하나(`type-is-placeholder`)가 이것을 본다 — V3 자산은 타입을 원본에 적지 않아서, 타입을 바꾸면
+   * 원본도 dirty 도 그대로다. 그래서 이 값이 바뀌면 판정을 다시 묻는다. 안 그러면 타입을 정한 뒤에도 「임시 타입」
+   * 판정이 남아 발행 단추가 잠긴 채다.
+   */
+  @property({ type: String }) figureType?: string
   /** 직전 발행판의 기준 상자. 외형 변화 안내에서 X·Z 복원 선택지에만 쓴다. */
   @property({ attribute: false }) releasedBase?: { x: number; y: number; z: number }
 
@@ -348,7 +291,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       저장이 끝난 순간(dirty 가 풀림) 정본이 바뀌었으니 판정을 다시 묻는다. 저작 중(dirty)에는
       묻지 않는다 — 서버에 있는 것은 저장 전 정본이라, 그 답은 화면에 있는 것과 다른 것을 말한다.
     */
-    if (changes.has('figureId') || changes.has('dirty')) {
+    if (changes.has('figureId') || changes.has('dirty') || changes.has('figureType')) {
       void this.inspect()
     }
   }
@@ -468,23 +411,13 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
    * 준다 — 화면이 문장을 지으면 서버가 거절할 때와 다른 말을 하게 된다.
    */
   private renderFinding(finding: FigureGateFinding, blocking: boolean) {
-    return html`
-      <li finding ?blocking=${blocking}>
-        <span msg>${finding.message}</span>
-        ${finding.at ? html`
-          <details affected>
-            <summary>${i18next.t('figure.text.show-affected-parts')}</summary>
-            <code where>${finding.at}</code>
-          </details>
-        ` : nothing}
-        ${finding.why ? html`<span why-line>${finding.why}</span>` : nothing}
-        ${finding.how ? html`<span how-line><md-icon>build</md-icon>${finding.how}</span>` : nothing}
-        ${finding.code === 'part-outside-base'
+    return renderGateFinding(finding, blocking, html`
+        ${this.offersFit(finding.code)
           ? html`<button fit-base @click=${() => this.fitBase()}>
               ${i18next.t('figure.button.fit-base-to-parts')}
             </button>`
           : nothing}
-        ${finding.code === 'parts-off-placement-face'
+        ${finding.code === 'parts-off-placement-face' && this.format === 'v2'
           ? html`<button fit-base @click=${() => this.settleOnFloor()}>
               ${i18next.t('figure.button.settle-on-floor')}
             </button>`
@@ -516,8 +449,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
             ${i18next.t('figure.button.apply-recommended-fix')}
           </button>
         ` : nothing}
-      </li>
-    `
+    `)
   }
 
   /**
@@ -548,6 +480,20 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
    * 그래서 화면이 자기 자리에서 같은 동작을 낸다. 누르면 상자만 커지고 부품은 제자리이며, 저장은
    * 여전히 저작자가 따로 한다.
    */
+  /**
+   * 「부품에 맞추기」를 내미는 판정. V2 는 기준 상자를 부품에 맞추고, V3 는 공간을 부품에서 다시 선언한다
+   * (`declare-occupancy`) — 둘 다 부품은 그대로 두고 선언만 바꾼다. V3 에서 공간을 아직 선언하지 않은 도형도
+   * 같은 단추로 선언한다: 새로 만든 V3 도형은 전부 그 판정으로 막히고, 화면에 다른 길이 없다.
+   *
+   * V3 의 장착면이 떠 있는 것은 여기 없다. 부품 하나를 평면에 붙이면 그 부품에 붙지 않은 것은 따라오지 않아
+   * V2 의 「바닥에 앉히기」와 뜻이 다르다. 판정의 「어떻게」가 할 일을 말한다.
+   */
+  private offersFit(code: string): boolean {
+    return this.format === 'v3'
+      ? code === 'part-outside-occupancy' || code === 'occupancy-undeclared'
+      : code === 'part-outside-base'
+  }
+
   private fitBase() {
     this.dispatchEvent(new CustomEvent('fit-base-to-parts', { bubbles: true, composed: true }))
   }

package/client/modeller/figure-v3-parts.ts

@@ -0,0 +1,365 @@
+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 type { V3PrimitiveCreation } from '@hatiolab/figure-model'
+
+/**
+ * 도형 팔레트와 부품 목록 — V3 자산의 것.
+ *
+ * `figure-parts`(V2) 와 **같은 자리, 같은 조작, 같은 낱말**이다. 저작자가 V2 에서 익힌 손이 그대로
+ * 가야 한다: 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.
+ *
+ * 다른 것은 읽는 대상뿐이다. V2 는 부품의 `primitive` 를 읽었고 여기서는 V3 평가가 준 `provider` 를
+ * 읽는다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라
+ * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.
+ *
+ * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다 — V2 와 같은 규칙, 같은 사건 이름.
+ */
+
+/** 한 줄 — V3 평가에서 이 패널이 읽는 것만. */
+export interface V3PartRow {
+  id: string
+  provider: string
+  /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */
+  hidden?: boolean
+  /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */
+  invisible?: boolean
+}
+
+/** 제공자마다의 아이콘. Material Symbols 이름이다. */
+const PROVIDER_ICON: Record<string, string> = {
+  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'
+}
+
+/** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */
+const RECIPES: Array<{ kind: V3PrimitiveCreation['kind']; icon: string; label: string }> = [
+  { 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-rect' },
+  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
+]
+
+@customElement('figure-v3-parts')
+export class FigureV3Parts extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        border-right: 1px solid var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font, inherit);
+        font-size: 0.76rem;
+      }
+      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));
+      }
+      span[room] {
+        font-size: 0.7rem;
+        font-weight: 400;
+        letter-spacing: 0;
+        text-transform: none;
+      }
+      div[palette] {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px;
+      }
+      button[shape] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2px;
+        padding: 7px 2px 5px 2px;
+        font: var(--label-font, inherit);
+        font-size: 0.66rem;
+        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[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: 20px;
+      }
+      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;
+      }
+      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));
+      }
+    `
+  ]
+
+  @property({ type: Array }) parts: V3PartRow[] = []
+  /** 고른 부품의 id. 자리(index)가 아니다 — V3 부품은 id 로 안정하게 가리킨다. */
+  @property({ type: String }) selected = ''
+  /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */
+  @property({ type: Boolean }) locked = false
+
+  render() {
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.shapes')}</h3>
+        <div palette>
+          ${RECIPES.map(
+            recipe => html`
+              <button
+                shape
+                ?disabled=${this.locked}
+                title=${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>
+      </section>
+
+      <section list>
+        <h3>
+          <span>${i18next.t('figure.label.parts')}</span>
+          <span room>${this.parts.length}</span>
+          ${this.renderShowAll()}
+        </h3>
+        ${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>
+    `
+  }
+
+  /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */
+  private 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: Event) => {
+          e.stopPropagation()
+          this.ask('set-all-parts-hidden', { hidden: !anyHidden })
+        }}
+      >
+        <md-icon>${anyHidden ? 'visibility' : 'visibility_off'}</md-icon>
+      </button>
+    `
+  }
+
+  private renderRow(part: V3PartRow, index: number) {
+    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: Event) => {
+            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}
+          >${part.id}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
+        >
+        ${selected ? this.renderOps(part.id, index) : nothing}
+      </li>
+    `
+  }
+
+  /** 고른 줄의 조작. 못 하는 것은 빼지 않고 흐리게 둔다 — 자리가 밀리면 연달아 지우다 엉뚱한 것을 누른다. */
+  private renderOps(id: string, index: number) {
+    const count = this.parts.length
+    const op = (name: string, icon: string, detail: object, enabled = true) => html`
+      <button
+        op=${name}
+        ?disabled=${!enabled || this.locked}
+        title=${i18next.t('figure.button.' + name)}
+        @click=${(e: Event) => {
+          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>
+    `
+  }
+
+  /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */
+  private ask(what: string, detail: object) {
+    this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }))
+  }
+}