@things-factory/figure-ui 10.1.14 → 10.1.16

package/client/modeller/figure-ai-target.ts

@@ -9,3 +9,15 @@ export function takeFigureAITarget() {
   pending = undefined
   return target
 }
+
+let pendingStage: { figureId?: string; source?: any; proposal?: any } | undefined
+export function stageFigureProposal(data: { figureId?: string; source?: any; proposal?: any }) {
+  pendingStage = structuredClone(data)
+  window.dispatchEvent(new CustomEvent('figure-ai-stage', { detail: data }))
+}
+
+export function consumePendingFigureProposal() {
+  const target = pendingStage
+  pendingStage = undefined
+  return target
+}

package/client/modeller/figure-canvas.ts

@@ -8,6 +8,19 @@ import { gridStep } from './part-edits.js'
 import { DEFAULT_VIEW, WORKBENCH } from './figure-view.js'
 import type { ViewSettings } from './figure-view.js'
 import type { BoardModel, PartModel } from './figure-source.js'
+import type { FigurePlacement } from '@hatiolab/figure-model'
+
+function toScenePlacement(placement?: FigurePlacement): 'floor' | 'inverted' | 'space' {
+  switch (placement) {
+    case 'ceiling':
+      return 'inverted'
+    case 'center':
+      return 'space'
+    case 'floor':
+    default:
+      return 'floor'
+  }
+}
 
 /**
  * 판의 종이 색 — 거의 흰색.
@@ -188,6 +201,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
   /** 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다(`figure-view.ts`). */
   @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW
   @property({ type: Array }) parts: PartModel[] = []
+  @property({ type: Number }) revision = 0
   /** 지금 고른 부품 이름. 목록에서 고른 것을 캔버스에 알린다. */
   @property({ type: String }) picked?: string
 
@@ -275,7 +289,8 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
   willUpdate(changed: Map<string, unknown>) {
     if (!this.hasUpdated) return
 
-    if (changed.has('board') || changed.has('parts') || changed.has('figureId')) this.standUp()
+    if (changed.has('revision')) this.standing = undefined
+    if (changed.has('board') || changed.has('parts') || changed.has('figureId') || changed.has('revision')) this.standUp()
     if (changed.has('view')) this.applyView()
     if (changed.has('picked')) this.showPicked()
   }
@@ -317,7 +332,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
       return
     }
 
-    const signature = `${this.figureId ?? ''}:${board.width}x${board.height}x${board.depth}`
+    const signature = `${this.figureId ?? ''}:${board.width}x${board.height}x${board.depth}:${board.placement ?? 'floor'}`
     if (this.scene && this.standing === signature) {
       this.syncParts()
       return
@@ -333,6 +348,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
           width: board.width,
           height: board.height,
           depth: board.depth,
+          placement: toScenePlacement(board.placement),
           threed: true,
           environment: 'studio',
           /*

package/client/modeller/figure-inspector.ts

@@ -13,10 +13,11 @@ import {
   SEGMENTED_PRIMITIVES,
   SEGMENT_PRESETS,
   SIZING_RULES,
+  FIGURE_PLACEMENTS,
   trianglesOf
 } from '@hatiolab/figure-model'
 import { ANCHOR_RULES, PART_ROLES, REPEAT_LIMIT, anchorOfPart, repeatPlanOfPart } from '@hatiolab/figure-model'
-import type { AnchorRule, Axis, FigurePart, MaterialPreset, PartRole, PrimitiveKind } from '@hatiolab/figure-model'
+import type { AnchorRule, Axis, FigurePart, FigurePlacement, MaterialPreset, PartRole, PrimitiveKind } from '@hatiolab/figure-model'
 import { activePalette } from '@hatiolab/things-scene'
 
 import { partToFigure, partFromFigure } from './figure-source.js'
@@ -774,7 +775,8 @@ export class FigureInspector extends localize(i18next)(LitElement) {
   `
   ]
 
-  /** 보드. 위치를 보드 중심 기준으로 바꾸려면 이것이 있어야 한다. */
+  /** 도형의 DB 식별자. 비어 있으면 미저장 신규 모델이다. */
+  @property({ type: String }) figureId = ''
   /** 도형의 표시 이름. 정본은 저작면이 들고, 여기서는 보여 주고 바꾼다(`figure-rename` 으로 알린다). */
   @property({ type: String }) figureName = ''
   /** 분류 하나 — 팔레트에서 묶는 기준. */
@@ -962,17 +964,49 @@ export class FigureInspector extends localize(i18next)(LitElement) {
           />
         </div>
         <div inline-field>
-          <label>${i18next.t('figure.label.figure-type')}${this.helpButton('figure.text.type-name-cannot-change')}</label>
-          <code fixed title=${i18next.t('figure.text.type-name-cannot-change')}>
-            <md-icon>lock</md-icon>${this.board?.figureType ?? ''}
-          </code>
-          ${this.helpHint('figure.text.type-name-cannot-change')}
+          <label>${i18next.t('figure.label.figure-type')}${this.figureId ? this.helpButton('figure.text.type-name-cannot-change') : nothing}</label>
+          ${!this.figureId
+            ? html`<input
+                .value=${this.board?.figureType ?? ''}
+                placeholder=${i18next.t('figure.text.figure-type-placeholder', { defaultValue: '도형 식별 타입 (예: OHT)' })}
+                @change=${(e: Event) =>
+                  this.dispatchEvent(
+                    new CustomEvent('figure-type-change', {
+                      detail: { type: (e.target as HTMLInputElement).value.trim().toUpperCase() },
+                      bubbles: true,
+                      composed: true
+                    })
+                  )}
+              />`
+            : html`<code fixed title=${i18next.t('figure.text.type-name-cannot-change')}>
+                <md-icon>lock</md-icon>${this.board?.figureType ?? ''}
+              </code>
+              ${this.helpHint('figure.text.type-name-cannot-change')}`}
         </div>
         <!--
           왜 못 고치는지 **적어 둔다.** 전에는 tooltip 에만 있었고, 그러면 눌러 보고 안 되는 것을
           알게 된다 — 화면이 안 되는 이유를 말하지 않으면 사용자가 자기 실수라고 생각한다.
         -->
 
+        <div inline-field>
+          <label>${i18next.t('figure.label.figure-placement')}${this.helpButton('figure.text.placement-explained')}</label>
+          <select
+            .value=${this.board?.placement ?? 'floor'}
+            @change=${(e: Event) => this.setPlacement((e.target as HTMLSelectElement).value as FigurePlacement)}
+          >
+            <option value="floor" ?selected=${(this.board?.placement ?? 'floor') === 'floor'}>
+              ${i18next.t('figure.label.placement-floor')}
+            </option>
+            <option value="ceiling" ?selected=${this.board?.placement === 'ceiling'}>
+              ${i18next.t('figure.label.placement-ceiling')}
+            </option>
+            <option value="center" ?selected=${this.board?.placement === 'center'}>
+              ${i18next.t('figure.label.placement-center')}
+            </option>
+          </select>
+          ${this.helpHint('figure.text.placement-explained')}
+        </div>
+
         <div inline-field>
           <label>${i18next.t('figure.label.category')}${this.helpButton('figure.text.category-explained')}</label>
           <input
@@ -1041,6 +1075,13 @@ export class FigureInspector extends localize(i18next)(LitElement) {
     this.dispatchEvent(new CustomEvent('figure-catalog', { detail: patch, bubbles: true, composed: true }))
   }
 
+  /** 3D 배치 기준면을 바꾼다 ('floor' | 'ceiling' | 'center'). */
+  private setPlacement(placement: FigurePlacement) {
+    if (!this.board) return
+    const board = { ...this.board, placement }
+    this.dispatchEvent(new CustomEvent('update-board', { detail: { board }, bubbles: true, composed: true }))
+  }
+
   private renderIdentity(part: FigurePart) {
     return html`
       <section>

package/client/modeller/figure-side.ts

@@ -192,6 +192,7 @@ export class FigureSide extends localize(i18next)(LitElement) {
 
       <figure-inspector
         ?off=${this.tab !== 'properties'}
+        .figureId=${this.figureId}
         .figureName=${this.figureName}
         .figureCategory=${this.figureCategory}
         .figureTags=${this.figureTags}

package/client/modeller/figure-source.test.ts

@@ -145,8 +145,10 @@ describe('펴기 — 형식을 씬 모델로', () => {
  */
 /** 형식이 가진 것을 되도록 다 담은 정본. 안 쓰이는 필드도 넣는다. */
 const FULL: FigureSource = {
+  version: 1,
   type: 'AGV',
   base: { x: 3000, y: 800, z: 2000 },
+  placement: 'floor',
   detailLevel: 'L',
   styleKit: 'factory',
   parts: [

package/client/modeller/figure-source.ts

@@ -1,4 +1,4 @@
-import type { DetailLevel, FigurePart, FigureSource, Vec3 } from '@hatiolab/figure-model'
+import { FIGURE_SOURCE_VERSION, type DetailLevel, type FigurePart, type FigurePlacement, type FigureSource, type Vec3 } from '@hatiolab/figure-model'
 
 /**
  * Scene model <-> `FigureSource`.
@@ -72,14 +72,27 @@ import type { DetailLevel, FigurePart, FigureSource, Vec3 } from '@hatiolab/figu
  * under `shape` costs a line here, and forgetting that line was the fourth
  * of the four.
  */
-/** 보드의 상태. 기준 상자이자 원본 데이터의 뼈대다. */
+/** 판 컴포넌트의 상태. 씬의 용어 그대로다. */
 export interface BoardModel {
-  /** 기준 상자. 씬의 용어 그대로다. */
+  /** 형식 버전. */
+  version?: number
+  /*
+    The three sizes keep the scene component's names, and the scene assigns its axes differently
+    from the format: here `depth` is the vertical one. Naming the axis alone ("the y axis") does
+    not say which of the two conventions is meant, and this interface sits on the boundary between
+    them — so each field names the `FigureSource` field it becomes. `toFigureSource` and
+    `fromFigureSource` below are the only places that may disagree with these three lines.
+  */
+  /** 가로 너비 (mm) → `base.x`. */
   width: number
+  /** 앞뒤 깊이 (mm) → `base.z`. 저작자가 위에서 내려다볼 때의 세로다. */
   height: number
+  /** 높이 (mm) → `base.y`. 서 있는 방향이다. */
   depth: number
   /** 컴포넌트 타입 이름. **저장되는 식별자다.** */
   figureType?: string
+  /** 3D 배치 기준면 ('floor' | 'ceiling' | 'center'). */
+  placement?: FigurePlacement
   detailLevel?: DetailLevel
   styleKit?: string
   /**
@@ -137,7 +150,12 @@ export interface PartModel {
    */
   hidden?: boolean
 
+  /** 색 토큰 이름 (`palette.primary` 등). */
   token?: string
+  /*
+    `FigurePart['material']` is required in the format, so these index into it directly. The
+    `NonNullable` on `shape` above is not the same case — `shape` is optional there.
+  */
   preset?: FigurePart['material']['preset']
   flatShading?: boolean
   transparent?: boolean
@@ -228,8 +246,10 @@ export function toFigureSource(board: BoardModel, parts: PartModel[]): FigureSou
   const half = halfOf(board)
 
   return withoutEmpty({
+    version: board.version ?? FIGURE_SOURCE_VERSION,
     type: board.figureType ?? '',
     base: { x: board.width, y: board.depth, z: board.height },
+    placement: board.placement,
     detailLevel: board.detailLevel,
     styleKit: board.styleKit,
     parts: parts.map(part => partTo(part, half)),
@@ -292,10 +312,12 @@ export function fromFigureSource(source: FigureSource): { board: BoardModel; par
   const half: Vec3 = { x: source.base.x / 2, y: source.base.y / 2, z: source.base.z / 2 }
 
   const board = withoutEmpty({
+    version: source.version,
     width: source.base.x,
     height: source.base.z,
     depth: source.base.y,
     figureType: source.type,
+    placement: source.placement,
     detailLevel: source.detailLevel,
     styleKit: source.styleKit,
     animations: source.animations,