@things-factory/figure-ui 10.1.34 → 10.1.36

package/client/graphql/index.ts

@@ -310,6 +310,19 @@ export async function inspectFigure(id: string): Promise<FigureInspection> {
               resolved
               safe
             }
+            fixPlan {
+              resolved
+              safe
+              fixes {
+                findingWay
+                part
+                axis
+                from
+                to
+                resolved
+                safe
+              }
+            }
             blocking
           }
         }

package/client/graphql/v3-store.ts

@@ -0,0 +1,30 @@
+import gql from 'graphql-tag'
+import { client } from '@operato/graphql'
+import { fetchFigure } from './index.js'
+import type { V3ProductStore, V3ProductRecord } from '../modeller/v3-product-session.js'
+
+/** V3 source is sent intact. No conversion into the old parts/base authoring representation. */
+export const v3ProductStore: V3ProductStore = {
+  async load(id) {
+    const record = await fetchFigure(id)
+    if (!record?.source) throw Error('Figure 정본이 없습니다.')
+    return { id: record.id, source: record.source }
+  },
+  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) {
+            id
+            source
+          }
+        }
+      `,
+      variables: request
+    })
+    if (response.errors?.length) throw Error(response.errors.map(e => e.message).join('\n'))
+    const result = response.data?.saveFigureV3 as V3ProductRecord | undefined
+    if (!result?.id || !result.source) throw Error('서버가 저장 결과를 돌려주지 않았습니다.')
+    return result
+  }
+}

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

@@ -7,7 +7,7 @@ import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
 import { fetchFigureVersions, inspectFigure, releaseFigure, revertFigureVersion } from '../graphql/index.js'
-import type { FigureGateFinding, FigureGateFix, FigureInspection, FigureVersion } from '../types.js'
+import type { FigureGateFinding, FigureGateFix, FigureGateFixPlan, FigureInspection, FigureVersion } from '../types.js'
 
 /**
  * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
@@ -234,6 +234,16 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       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;
@@ -461,7 +471,12 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
     return html`
       <li finding ?blocking=${blocking}>
         <span msg>${finding.message}</span>
-        ${finding.at ? html`<code where>${finding.at}</code>` : nothing}
+        ${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'
@@ -495,6 +510,12 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
             ${i18next.t('figure.button.preview-fix', { part: fix.part, axis: fix.axis.toUpperCase(), from: fix.from ?? 'auto', to: fix.to })}
           </button>
         `)}
+        ${finding.fixPlan?.safe ? html`
+          <span how-line><md-icon>auto_fix_high</md-icon>${i18next.t('figure.text.recommended-fix-explained', { n: finding.fixPlan.fixes.length })}</span>
+          <button apply-fix @click=${() => this.applyFixPlan(finding.fixPlan!)}>
+            ${i18next.t('figure.button.apply-recommended-fix')}
+          </button>
+        ` : nothing}
       </li>
     `
   }
@@ -513,6 +534,12 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
     this.dispatchEvent(new CustomEvent('apply-sizing-fix', { detail: fix, bubbles: true, composed: true }))
   }
 
+  /** Apply the server-remeasured coordinated repair to the draft only; save remains explicit. */
+  private applyFixPlan(plan: FigureGateFixPlan) {
+    if (!plan.safe || plan.fixes.length === 0) return
+    this.dispatchEvent(new CustomEvent('apply-sizing-fix-plan', { detail: plan, bubbles: true, composed: true }))
+  }
+
   /**
    * 넘친 것을 담는 길 하나를 여기서도 내민다 — **같은 동작이 속성 패널에도 있다**(「부품에 맞추기」).
    *

package/client/modeller/v3-canvas.ts

@@ -0,0 +1,145 @@
+import { LitElement, html, css, type PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { replaceV3Meshes, disposeV3Meshes, type V3RenderPart } from './v3-renderer.js'
+
+/** Renders evaluated V3 geometry directly. There is no parts/base or things-scene conversion. */
+@customElement('figure-v3-canvas')
+export class FigureV3Canvas extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      min-width: 0;
+      min-height: 0;
+      position: relative;
+      background: #eef2f4;
+    }
+    canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    p {
+      position: absolute;
+      inset: 45% 1rem auto;
+      text-align: center;
+      pointer-events: none;
+      color: #526773;
+    }
+  `
+  @property({ attribute: false }) parts: V3RenderPart[] = []
+  @property({ attribute: false }) palette: Record<string, string> = {}
+  @property() context = ''
+  private renderer?: THREE.WebGLRenderer
+  private readonly scene = new THREE.Scene()
+  private readonly group = new THREE.Group()
+  private readonly camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000000)
+  private controls?: OrbitControls
+  private observer?: ResizeObserver
+  private initialized = false
+  private contextAtRender = ''
+  render() {
+    return html`<canvas aria-label="Figure 3D 모델" @pointerup=${this.pick}></canvas
+      >${this.parts.length ? null : html`<p>도형을 추가해 모델링을 시작하세요.</p>`}`
+  }
+  protected firstUpdated() {
+    this.initialize()
+  }
+  connectedCallback() {
+    super.connectedCallback()
+    if (this.hasUpdated) void this.updateComplete.then(() => this.initialize())
+  }
+  private initialize() {
+    if (this.initialized || !this.isConnected) return
+    const canvas = this.renderRoot.querySelector('canvas')!
+    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true })
+    this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
+    this.scene.background = new THREE.Color('#eef2f4')
+    this.scene.add(this.group, new THREE.HemisphereLight(0xffffff, 0x62717d, 2.5))
+    const light = new THREE.DirectionalLight(0xffffff, 3)
+    light.position.set(1, 2, 3)
+    this.scene.add(light)
+    this.controls = new OrbitControls(this.camera, canvas)
+    this.controls.addEventListener('change', this.draw)
+    this.observer = new ResizeObserver(() => {
+      const r = this.getBoundingClientRect()
+      if (r.width && r.height) {
+        this.renderer!.setSize(r.width, r.height, false)
+        this.camera.aspect = r.width / r.height
+        this.camera.updateProjectionMatrix()
+        this.draw()
+      }
+    })
+    this.observer.observe(this)
+    this.initialized = true
+    this.updateGeometry(true)
+  }
+  protected updated(changed: PropertyValues) {
+    if (this.initialized && (changed.has('parts') || changed.has('palette') || changed.has('context')))
+      this.updateGeometry(this.contextAtRender !== this.context)
+  }
+  private updateGeometry(fit: boolean) {
+    try {
+      const wasEmpty = this.group.children.length === 0
+      replaceV3Meshes(this.group, this.parts, this.palette)
+      this.contextAtRender = this.context
+      if (fit || wasEmpty) this.fit()
+      this.draw()
+    } catch (error) {
+      // Do not leave another model's geometry visible after a failed context switch.
+      if (this.contextAtRender !== this.context) {
+        disposeV3Meshes(this.group)
+        this.draw()
+      }
+      this.dispatchEvent(new CustomEvent('render-error', { detail: error, bubbles: true, composed: true }))
+    }
+  }
+  fit() {
+    const bounds = new THREE.Box3().setFromObject(this.group),
+      center = new THREE.Vector3(),
+      size = new THREE.Vector3()
+    if (!bounds.isEmpty()) {
+      bounds.getCenter(center)
+      bounds.getSize(size)
+    }
+    const radius = Math.max(size.length() / 2, 100),
+      distance = (radius / Math.sin(THREE.MathUtils.degToRad(this.camera.fov / 2))) * 1.3
+    this.camera.position.copy(center).add(new THREE.Vector3(1, 0.8, 1).normalize().multiplyScalar(distance))
+    this.camera.near = Math.max(0.01, distance / 10000)
+    this.camera.far = Math.max(10000, distance * 100)
+    this.camera.updateProjectionMatrix()
+    this.controls?.target.copy(center)
+    this.controls?.update()
+    this.draw()
+  }
+  private draw = () => {
+    if (this.renderer) this.renderer.render(this.scene, this.camera)
+  }
+  private pick = (event: PointerEvent) => {
+    const r = (event.currentTarget as HTMLCanvasElement).getBoundingClientRect(),
+      ray = new THREE.Raycaster()
+    ray.setFromCamera(
+      new THREE.Vector2(((event.clientX - r.left) / r.width) * 2 - 1, (-(event.clientY - r.top) / r.height) * 2 + 1),
+      this.camera
+    )
+    const hit = ray.intersectObjects(this.group.children)[0]
+    this.dispatchEvent(
+      new CustomEvent('part-selected', { detail: hit?.object.name ?? '', bubbles: true, composed: true })
+    )
+  }
+  thumbnail() {
+    this.draw()
+    return this.renderer?.domElement.toDataURL('image/png')
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect()
+    this.controls?.dispose()
+    disposeV3Meshes(this.group)
+    this.renderer?.dispose()
+    this.renderer = undefined
+    this.scene.clear()
+    this.initialized = false
+    super.disconnectedCallback()
+  }
+}

package/client/modeller/v3-editor.ts

@@ -0,0 +1,317 @@
+import { LitElement, html, css, type PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import type { V3InputChange, V3PrimitiveCreation } from '@hatiolab/figure-model'
+import type { V3ProductSession } from './v3-product-session.js'
+import './v3-canvas.js'
+import type { FigureV3Canvas } from './v3-canvas.js'
+
+const names: Record<string, string> = {
+  position: '위치',
+  rotation: '회전',
+  size: '크기',
+  dimension: '치수',
+  width: '너비',
+  height: '높이',
+  depth: '깊이',
+  radius: '반지름',
+  length: '길이',
+  round: '모서리 반경',
+  left: '왼쪽',
+  right: '오른쪽',
+  bottom: '아랫면',
+  top: '윗면',
+  openingLeft: '개구부 왼쪽',
+  openingRight: '개구부 오른쪽',
+  openingTop: '개구부 윗면'
+}
+function fieldLabel(id: string) {
+  return id
+    .split('.')
+    .map(p => names[p] ?? p.toUpperCase())
+    .join(' · ')
+}
+
+/** Product editor surface. The injected session is shared by page persistence and AI commands. */
+@customElement('figure-v3-editor')
+export class FigureV3Editor extends LitElement {
+  static 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;
+      }
+    }
+  `
+  @property({ attribute: false }) session?: V3ProductSession
+  @property({ type: Number }) revision = 0
+  @state() private selected = ''
+  @state() private error = ''
+  private lastContext: string | null = null
+  protected willUpdate(_changed: PropertyValues) {
+    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 = ''
+  }
+  private run(action: () => unknown) {
+    try {
+      action()
+      this.error = ''
+      this.changed()
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : String(error)
+    }
+  }
+  private changed() {
+    this.requestUpdate()
+    this.dispatchEvent(new CustomEvent('v3-changed', { bubbles: true, composed: true }))
+  }
+  private 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()
+    }
+  }
+  private add(kind: V3PrimitiveCreation['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: V3PrimitiveCreation =
+        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
+    })
+  }
+  private changeField(field: { id: string; unit: V3InputChange['unit']; role?: string }, event: Event) {
+    const input = event.target as HTMLInputElement,
+      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<FigureV3Canvas>('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'] as const).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: CustomEvent<string>) => {
+            this.selected = e.detail
+          }}
+          @render-error=${(e: CustomEvent<Error>) => {
+            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: Event) => this.changeField(field, e)} /></label>`)}
+          ${
+            part
+              ? html`<h3>재질</h3>
+                  <label
+                    ><span>색 역할</span
+                    ><select
+                      .value=${part.material.token}
+                      ?disabled=${unavailable}
+                      @change=${(e: Event) => this.run(() => this.session!.edit({ kind: 'set-material', target: this.selected, material: { ...part.material, token: (e.target as HTMLSelectElement).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>`
+  }
+}