@things-factory/figure-ui 10.1.38 → 10.1.40

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/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] {
@@ -332,6 +263,12 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
    * 화면이 없는 단추를 그리면 눌러도 아무 일이 없다.
    */
   @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 }
 
@@ -354,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()
     }
   }
@@ -474,17 +411,7 @@ 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}
+    return renderGateFinding(finding, blocking, html`
         ${this.offersFit(finding.code)
           ? html`<button fit-base @click=${() => this.fitBase()}>
               ${i18next.t('figure.button.fit-base-to-parts')}
@@ -522,8 +449,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
             ${i18next.t('figure.button.apply-recommended-fix')}
           </button>
         ` : nothing}
-      </li>
-    `
+    `)
   }
 
   /**

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

@@ -0,0 +1,254 @@
+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 { V3_FACES } from '@hatiolab/figure-model'
+import type { V3AuthoringAction, V3Face } from '@hatiolab/figure-model'
+
+import { occupancyFromParts } from './v3-occupancy.js'
+import { tagsOf, v3FigureFacts, type Placement, type V3FigureFacts } from './v3-figure-facts.js'
+
+const PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center']
+const FACES = Object.keys(V3_FACES) as V3Face[]
+
+/**
+ * 속성 — the V3 modeller's figure properties (parity row ②).
+ *
+ * The V2 inspector opens with what the figure is: its name, the face it is placed by, the room it takes up, where
+ * the catalogue files it. The V3 page had only the type. The same rows, in the same order, drawn the way the V2
+ * inspector draws them.
+ *
+ * Two kinds of change leave this tab, and it does neither itself:
+ *  - `v3-command` carries an authoring command (rename, declare the room, the mounting face). The page runs it
+ *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.
+ *  - `v3-catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them
+ *    to the saved row at once, so they need a saved figure.
+ *
+ * Not here yet, because V3 has no place for them: editing the declared room by hand (V3 declares it from the
+ * parts, as graph expressions), and the detail level (the converter records it as lost). Both wait on a V3 ruling.
+ */
+@customElement('figure-v3-properties')
+export class FigureV3Properties extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 12px;
+      overflow: auto;
+      font-size: 0.76rem;
+      color: var(--md-sys-color-on-surface);
+    }
+    div[field] {
+      display: grid;
+      gap: 4px;
+    }
+    div[field] > label {
+      font-weight: 600;
+    }
+    div[row] {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+    input,
+    select,
+    button {
+      font: inherit;
+      min-width: 0;
+    }
+    input,
+    select {
+      padding: 5px 8px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 4px;
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+    }
+    div[row] > select {
+      flex: 1;
+    }
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border: none;
+      border-radius: 999em;
+      cursor: pointer;
+      color: var(--md-sys-color-on-secondary-container);
+      background: var(--md-sys-color-secondary-container);
+    }
+    button:disabled,
+    input:disabled,
+    select:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    button md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    small {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  `
+
+  /** The source being edited. */
+  @property({ type: String }) source?: string
+  /** The saved row, if any. Category and tags live on it. */
+  @property({ type: String }) figureId?: string
+  @property({ type: String }) figureCategory?: string
+  @property({ type: Array }) figureTags?: string[]
+  /** The part and face picked for the mounting face, before 「이 면으로」 is pressed. */
+  @state() private pickedPart?: string
+  @state() private pickedFace?: V3Face
+
+  private facts(): V3FigureFacts | undefined {
+    try {
+      return this.source ? v3FigureFacts(this.source) : undefined
+    } catch {
+      /* A source the format refuses has no facts to show; the verdict tab says why. */
+      return undefined
+    }
+  }
+
+  render() {
+    const facts = this.facts()
+    if (!facts) return nothing
+    return html`${this.renderName(facts)} ${this.renderPlacement(facts)} ${this.renderSpace(facts)} ${this.renderMounting(facts)}
+    ${this.renderCatalog()}`
+  }
+
+  private renderName(facts: V3FigureFacts) {
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.name')}</label>
+        <input
+          .value=${facts.name}
+          placeholder=${i18next.t('figure.text.figure-display-name')}
+          @change=${(event: Event) => {
+            const input = event.target as HTMLInputElement
+            if (!input.value.trim()) {
+              /* The format refuses a blank name; put the old one back rather than send a command that fails. */
+              input.value = facts.name
+              return
+            }
+            if (input.value.trim() !== facts.name) this.command({ kind: 'rename', name: input.value })
+          }}
+        />
+      </div>
+    `
+  }
+
+  /**
+   * The face the figure is placed by. In V3 it is part of the room declaration, so choosing one declares the room
+   * again from the parts — the only way V3 declares it — with the new face. The hint says so.
+   */
+  private renderPlacement(facts: V3FigureFacts) {
+    const current = facts.placement ?? 'floor'
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.figure-placement')}</label>
+        <select
+          ?disabled=${!facts.parts.length}
+          @change=${(event: Event) => this.declare((event.target as HTMLSelectElement).value as Placement)}
+        >
+          ${PLACEMENTS.map(
+            one => html`<option value=${one} ?selected=${one === current}>${i18next.t('figure.label.placement-' + one)}</option>`
+          )}
+        </select>
+        <small>${i18next.t(facts.parts.length ? 'figure.text.placement-redeclares' : 'figure.text.fit-needs-parts')}</small>
+      </div>
+    `
+  }
+
+  private renderSpace(facts: V3FigureFacts) {
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.declared-space')}</label>
+        <div row>
+          <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>
+          <button fit ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>
+            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
+          </button>
+        </div>
+      </div>
+    `
+  }
+
+  private renderMounting(facts: V3FigureFacts) {
+    const mounting = facts.mounting
+    const part = [this.pickedPart, mounting?.part, facts.parts[0]].find(one => one && facts.parts.includes(one))
+    const face: V3Face = this.pickedFace ?? mounting?.face ?? 'bottom'
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.mounting-face')}</label>
+        <div row>
+          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedPart = (e.target as HTMLSelectElement).value)}>
+            ${facts.parts.map(one => html`<option value=${one} ?selected=${one === part}>${one}</option>`)}
+          </select>
+          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedFace = (e.target as HTMLSelectElement).value as V3Face)}>
+            ${FACES.map(one => html`<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}
+          </select>
+        </div>
+        <div row>
+          <button ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>
+            ${i18next.t('figure.button.set-mounting-face')}
+          </button>
+          <button ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
+            ${i18next.t('figure.button.clear-mounting-face')}
+          </button>
+        </div>
+        <small>
+          ${facts.declared
+            ? mounting
+              ? `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`
+              : i18next.t('figure.label.mounting-face-none')
+            : i18next.t('figure.text.mounting-face-needs-space')}
+        </small>
+      </div>
+    `
+  }
+
+  private renderCatalog() {
+    const saved = !!this.figureId
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.category')}</label>
+        <input
+          .value=${this.figureCategory ?? ''}
+          ?disabled=${!saved}
+          placeholder=${i18next.t('figure.text.category-placeholder')}
+          @change=${(e: Event) => this.catalog({ category: (e.target as HTMLInputElement).value.trim() })}
+        />
+      </div>
+      <div field>
+        <label>${i18next.t('figure.label.tags')}</label>
+        <input
+          .value=${(this.figureTags ?? []).join(', ')}
+          ?disabled=${!saved}
+          placeholder=${i18next.t('figure.text.tags-placeholder')}
+          @change=${(e: Event) => this.catalog({ tags: tagsOf((e.target as HTMLInputElement).value) })}
+        />
+        ${saved ? nothing : html`<small>${i18next.t('figure.text.catalog-needs-a-save')}</small>`}
+      </div>
+    `
+  }
+
+  private declare(placement: Placement) {
+    if (!this.source) return
+    this.command(occupancyFromParts(this.source, placement))
+  }
+
+  private command(action: V3AuthoringAction) {
+    this.dispatchEvent(new CustomEvent('v3-command', { detail: { action }, bubbles: true, composed: true }))
+  }
+
+  private catalog(patch: { category?: string; tags?: string[] }) {
+    this.dispatchEvent(new CustomEvent('v3-catalog', { detail: patch, bubbles: true, composed: true }))
+  }
+}