@things-factory/figure-ui 10.1.35 → 10.1.37

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/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>`
+  }
+}

package/client/modeller/v3-product-session.ts

@@ -0,0 +1,141 @@
+import {
+  createV3Asset,
+  createV3EditorWorkspace,
+  serializeV3Asset,
+  parseV3Asset,
+  type V3InputChange,
+  type V3PrimitiveCreation,
+  type V3PartEdit
+} from '@hatiolab/figure-model'
+
+export interface V3ProductRecord {
+  id: string
+  source: string
+}
+
+/** Persistence is injected; neither the model engine nor the renderer owns the product ID. */
+export interface V3ProductStore {
+  load(id: string): Promise<V3ProductRecord>
+  save(request: { id?: string; source: string; expectedSource?: string; creationId?: string }): Promise<V3ProductRecord>
+}
+
+/** Product lifecycle boundary. A late response can never change another editor's asset or ID. */
+export function createV3ProductSession(store: V3ProductStore) {
+  const workspace = createV3EditorWorkspace()
+  let epoch = 0,
+    id: string | undefined,
+    baseline: string | undefined
+  let loading = false,
+    saving = false,
+    error: string | undefined
+  let creationId: string | undefined
+  function read() {
+    return { ...workspace.read(), id, loading, saving, error }
+  }
+  function writable() {
+    const view = workspace.read()
+    if (loading || error || !view.context || view.revision === null) throw Error('먼저 모델을 정상적으로 열어 주세요.')
+    // Serializing writes also makes create retries safe: no second create while the first is pending.
+    if (saving) throw Error('저장이 끝난 뒤 편집해 주세요.')
+    return { context: view.context, expectedRevision: view.revision, origin: 'ui' as const }
+  }
+  function clear() {
+    workspace.close({ discardDesignChanges: true })
+    id = undefined
+    baseline = undefined
+    error = undefined
+    saving = false
+    creationId = undefined
+  }
+  function canLeave(discard: boolean) {
+    if (saving) throw Error('저장이 끝난 뒤 모델을 전환해 주세요.')
+    if (workspace.read().dirty && !discard) throw Error('저장하지 않은 변경이 있습니다.')
+  }
+  return {
+    read,
+    startNew({ discard = false } = {}) {
+      canLeave(discard)
+      ++epoch
+      clear()
+      loading = false
+      workspace.open(serializeV3Asset(createV3Asset('새 Figure')))
+      creationId = crypto.randomUUID()
+      return read()
+    },
+    async open(nextId: string, { discard = false } = {}) {
+      canLeave(discard)
+      const requestEpoch = ++epoch
+      clear()
+      loading = true
+      try {
+        const record = await store.load(nextId)
+        if (requestEpoch !== epoch) return read()
+        if (record.id !== nextId) throw Error('요청한 Figure와 응답의 대상이 다릅니다.')
+        workspace.open(record.source)
+        id = nextId
+        baseline = record.source
+      } catch (cause) {
+        if (requestEpoch === epoch) error = cause instanceof Error ? cause.message : String(cause)
+      } finally {
+        if (requestEpoch === epoch) loading = false
+      }
+      return read()
+    },
+    close({ discard = false } = {}) {
+      canLeave(discard)
+      ++epoch
+      clear()
+      loading = false
+      return read()
+    },
+    apply(changes: V3InputChange[], origin: 'ui' | 'ai' = 'ui', expectedRevision?: number, context?: string) {
+      const control = writable()
+      // AI must supply the context AND revision captured when it started. Never substitute current values.
+      if (origin === 'ai' && (context === undefined || expectedRevision === undefined))
+        throw Error('AI 편집에는 요청 당시의 모델 문맥과 리비전이 필요합니다.')
+      return workspace.apply({
+        ...control,
+        origin,
+        context: context ?? control.context,
+        expectedRevision: expectedRevision ?? control.expectedRevision,
+        changes
+      })
+    },
+    add(part: V3PrimitiveCreation) {
+      return workspace.addPrimitive({ ...writable(), part })
+    },
+    edit(edit: V3PartEdit) {
+      return workspace.editPart({ ...writable(), edit })
+    },
+    undo() {
+      return workspace.undo(writable())
+    },
+    redo() {
+      return workspace.redo(writable())
+    },
+    source() {
+      const { context } = writable()
+      return workspace.export({ context }).text
+    },
+    async save() {
+      const control = writable(),
+        requestEpoch = epoch
+      const exported = workspace.export(control)
+      saving = true
+      try {
+        const record = await store.save({ id, source: exported.text, expectedSource: baseline, creationId })
+        if (requestEpoch !== epoch) return read()
+        if (!record.id || (id !== undefined && record.id !== id)) throw Error('저장 응답의 Figure 대상이 다릅니다.')
+        if (serializeV3Asset(parseV3Asset(record.source)) !== exported.text)
+          throw Error('저장 응답이 보낸 모델과 다릅니다. 저장 상태를 다시 확인해 주세요.')
+        workspace.acknowledgeSaved(exported)
+        id = record.id
+        baseline = record.source
+      } finally {
+        if (requestEpoch === epoch) saving = false
+      }
+      return read()
+    }
+  }
+}
+export type V3ProductSession = ReturnType<typeof createV3ProductSession>