@operato/scene-storage 10.0.0-beta.48 → 10.0.0-beta.53

package/src/stockpile.ts

@@ -0,0 +1,427 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Stockpile — 평치(block/floor) 보관 영역. 사각형 footprint + `state.data` 의 record[].
+ * 실제 carrier component 를 자식으로 두지 않고, 인벤토리(records)의 *_개수와 종류_* 만으로
+ * 가상 carrier mesh 를 자동 적치(stackPattern × carrierPreset)해 시각화한다.
+ *
+ * 데이터 idiom — StorageRack 과 동일 (`state.data: Record[]`). mover 가 pick/place 하면
+ * record push/pop, _realObject 가 records.length 기준 mesh 를 재배치.
+ *
+ * 1단계 — 시각화: 모델에 `data: [{id:'a'},{id:'b'},...]` 가 들어오면 mesh 가 자동 적치.
+ * 2단계(추후) — mover 통합: obtainCarrier 가 transient carrier 컴포넌트 materialize,
+ *                            receiveAt 가 record push + carrier dispose.
+ */
+
+import * as THREE from 'three'
+import { Component, ComponentNature, ContainerAbstract, RealObject, sceneComponent } from '@hatiolab/things-scene'
+import type { State, Material3D } from '@hatiolab/things-scene'
+import {
+  CarrierHolder,
+  Placeable,
+  RecordStorage,
+  SlotTarget,
+  type AttachFrame,
+  type Alignment,
+  type Heights,
+  type PlacementArchetype
+} from '@operato/scene-base'
+
+import { Stockpile3D } from './stockpile-3d.js'
+
+export type StackPattern = 'row' | 'staggered' | 'pyramid' | 'column' | 'pile'
+export type CarrierPreset = 'box' | 'pallet' | 'drum' | 'sack' | 'crate' | 'bale'
+export type PickPolicy = 'lifo' | 'fifo'
+
+/** 적치된 carrier 의 record. 향후 sku / weight / 입고시각 등 확장. */
+export interface StockpileRecord {
+  id: string
+  [key: string]: any
+}
+
+export interface StockpileState extends State {
+  /** 적치 carrier 의 record 목록 — storage-rack 의 state.data 와 동일 idiom. */
+  data?: StockpileRecord[]
+
+  /** 적치 형태 프리셋. default 'row'. */
+  stackPattern?: StackPattern
+  /** 가상 carrier 종류 프리셋. default 'box'. */
+  carrierPreset?: CarrierPreset
+
+  /** 가상 carrier 한 개의 크기 (없으면 preset 별 기본). */
+  carrierWidth?: number
+  carrierHeight?: number
+  carrierDepth?: number
+  /** 적치된 carrier 사이의 평면(xz) 간격 — 0 이면 딱 붙음, default 3. y(단 적층)는 항상 딱 붙음. */
+  carrierGap?: number
+
+  /** 최대 적치 수 (undefined = 무제한). */
+  capacity?: number
+  /** 위로 몇 단까지 (undefined = stack 형태에 맡김). */
+  stackHeightLimit?: number
+  /** 어느 끝에서 빼나. default 'lifo'. */
+  pickPolicy?: PickPolicy
+
+  /** click 시 invoke 할 Popup 컴포넌트 id (StorageRack / RackGrid 와 동일 패턴). */
+  popupRef?: string
+
+  /**
+   * Legend 컴포넌트 id. legend 의 `state.status = {field, ranges, defaultColor}` 를
+   * 참조해 각 record 의 field 값을 색상으로 매핑한다 (StorageRack 와 동일 패턴).
+   * 미명시 시 scene 안 `type='legend'` 첫 컴포넌트 자동 발견.
+   */
+  legendTarget?: string
+
+  material3d?: Material3D
+}
+
+const SLOT_ID = 'pile'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    { type: 'select', label: 'stack-pattern', name: 'stackPattern',
+      property: { options: ['row', 'staggered', 'pyramid', 'column', 'pile'] } },
+    { type: 'select', label: 'carrier-preset', name: 'carrierPreset',
+      property: { options: ['box', 'pallet', 'drum', 'sack', 'crate', 'bale'] } },
+    { type: 'number', label: 'carrier-width', name: 'carrierWidth' },
+    { type: 'number', label: 'carrier-height', name: 'carrierHeight' },
+    { type: 'number', label: 'carrier-depth', name: 'carrierDepth' },
+    { type: 'number', label: 'carrier-gap', name: 'carrierGap' },
+    { type: 'number', label: 'capacity', name: 'capacity' },
+    { type: 'number', label: 'stack-height-limit', name: 'stackHeightLimit' },
+    { type: 'select', label: 'pick-policy', name: 'pickPolicy',
+      property: { options: ['lifo', 'fifo'] } },
+    { type: 'id-input', label: 'popup-ref', name: 'popupRef',
+      property: { component: 'popup' } },
+    { type: 'id-input', label: 'legend-target', name: 'legendTarget',
+      property: { component: 'legend' },
+      placeholder: '미명시 시 scene 의 legend 자동 발견' }
+  ],
+  help: 'scene/component/stockpile'
+}
+
+@sceneComponent('stockpile')
+export default class Stockpile extends RecordStorage<StockpileRecord>()(
+  CarrierHolder(Placeable(ContainerAbstract))
+) {
+  declare state: StockpileState
+  declare _realObject?: Stockpile3D
+
+  static placement: PlacementArchetype = 'floor'
+  static align: Alignment = 'bottom'
+  static defaultDepth = (_h: Heights) => 5   // pad 두께
+
+  get nature(): ComponentNature { return NATURE }
+  get anchors() { return [] }
+
+  // ── records / inventoryCount: RecordStorage mixin 제공.
+
+  // ── SlottedHolder duck-type override — 단일 slot ('pile') ───────────────
+  // mixin default 는 record 마다 slotId. Stockpile 은 *_단일 슬롯_* 시맨틱이라
+  // 자기 구현 유지.
+  slotIds(): ReadonlyArray<string> { return [SLOT_ID] }
+
+  hasCarrierAt(slotId: string): boolean {
+    return slotId === SLOT_ID && this.inventoryCount > 0
+  }
+
+  canReceiveAt(slotId: string, _carrier?: Component): boolean {
+    if (slotId !== SLOT_ID) return false
+    const cap = this.state.capacity
+    if (typeof cap === 'number' && this.inventoryCount >= cap) return false
+    return true
+  }
+
+  occupiedSlotIds(): ReadonlyArray<string> {
+    return this.inventoryCount > 0 ? [SLOT_ID] : []
+  }
+  emptySlotIds(): ReadonlyArray<string> {
+    return this.canReceiveAt(SLOT_ID) ? [SLOT_ID] : []
+  }
+
+  /**
+   * record 한 개를 빼서 carrier 컴포넌트로 transient materialize. mover 가 pickup
+   * 하면 이걸 reparent 해서 들고 다닌다. storage-rack._materializeCarrier 와 동일
+   * 패턴 — Component.register(type) 으로 클래스 lookup, addComponent({silent: true})
+   * 로 cascade 차단.
+   */
+  obtainCarrier(slotId: string): Component | null {
+    if (slotId !== SLOT_ID) return null
+    if (this.records.length === 0) return null
+    const records = [...this.records]
+    const policy = (this.state.pickPolicy ?? 'lifo') as PickPolicy
+    const record = policy === 'fifo' ? records.shift()! : records.pop()!
+    this._setDataSilently(records)
+    return this._materializeCarrier(record)
+  }
+
+  private _materializeCarrier(record: StockpileRecord): Component | null {
+    // carrierPreset → 등록된 컴포넌트 type. 미등록(drum/sack/bale 등) 은 시각 mesh
+    // 전용이라 carrier 컴포넌트로는 fallback ('parcel'/'box').
+    const preset = (this.state.carrierPreset ?? 'box') as CarrierPreset
+    const PRESET_TO_TYPE: Record<CarrierPreset, string> = {
+      box: 'box',
+      pallet: 'pallet',
+      crate: 'box',
+      drum: 'parcel',
+      sack: 'parcel',
+      bale: 'parcel'
+    }
+    const carrierType = (record as any).type ?? PRESET_TO_TYPE[preset] ?? 'parcel'
+    const CarrierClass = (Component as any).register(carrierType) as
+      | (new (...args: any[]) => Component) | undefined
+    if (!CarrierClass) {
+      console.warn(`[stockpile] carrier type "${carrierType}" 미등록 — obtainCarrier 실패`)
+      return null
+    }
+
+    // 크기 — state.carrier* 또는 preset default
+    const stockpileW = (this.state as any).width ?? 100
+    const stockpileH = (this.state as any).height ?? 100
+    const cw = this.state.carrierWidth ?? 30
+    const ch = this.state.carrierHeight ?? 30
+    const cd = this.state.carrierDepth ?? 22
+
+    // id/refid/transform 류 제외 — scene 안 기존 component 충돌 회피 (storage-rack 패턴)
+    const { id: _id, refid: _refid, transform: _tf, ...recordCopy } = record as any
+    // stockpile-inner 좌표 — center 에 놓기 (Mover 가 곧 pick 해 들고 감)
+    const carrierState: any = {
+      ...recordCopy,
+      type: carrierType,
+      width: cw,
+      height: ch,
+      depth: cd,
+      refid: _nextStockpileCarrierRefid(),
+      left: stockpileW / 2 - cw / 2,
+      top: stockpileH / 2 - ch / 2
+    }
+
+    const carrier = new CarrierClass(carrierState, (this as any)._app)
+    // silent: refreshMappings cascade 차단 (transient 라 매핑 재계산 불필요)
+    ;(this as any).addComponent(carrier, { silent: true })
+    void (carrier as any).realObject
+    ;(carrier as any).applyHolderAttachPoint?.()
+    return carrier
+  }
+
+  /**
+   * carrier 를 받아 record 로 push, carrier 객체는 dispose (시각은 _realObject 가
+   * records 길이 기준 자동 갱신). capacity 초과 시도는 canReceiveAt 가 이미 차단.
+   */
+  async receiveAt(_slotId: string, carrier: Component, _options?: any): Promise<void> {
+    const cstate: any = (carrier as any)?.state ?? {}
+    const cid = cstate.id ?? `stk-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
+    const record: StockpileRecord = {
+      id: String(cid),
+      ...(cstate.type ? { type: cstate.type } : {}),
+      ...(typeof cstate.width === 'number' ? { width: cstate.width } : {}),
+      ...(typeof cstate.height === 'number' ? { height: cstate.height } : {}),
+      ...(typeof cstate.depth === 'number' ? { depth: cstate.depth } : {})
+    }
+    const records = [...this.records, record]
+    this._setDataSilently(records)
+    ;(carrier as any)?.dispose?.()
+  }
+
+  /** dispatch → handoff 의 accept 분기 — receiveAt 으로 위임. */
+  async accept(carrier: Component, options?: any): Promise<void> {
+    return this.receiveAt(SLOT_ID, carrier, options)
+  }
+  async receive(carrier: Component, options?: any): Promise<void> {
+    return this.receiveAt(SLOT_ID, carrier, options)
+  }
+
+  /**
+   * mover 가 obtainCarrier 로 빼낸 transient carrier 를 pad 위에 안착 (잠깐 보이는
+   * 위치). mover 가 pick 하면 즉시 deck 으로 reparent 되므로 잔류는 짧다.
+   * Spot 과 동일 idiom — pad-top + carrier 의 halfDepth 만큼 들어올림.
+   */
+  attachPointFor(carrier: Component): AttachFrame | null {
+    const ro = this._realObject
+    const frame = ro?.getAttachFrame?.()
+    if (!frame) return null
+    const carrierDepth = resolveDepth(carrier)
+    return {
+      attach: frame,
+      localPosition: { x: 0, y: carrierDepth / 2, z: 0 }
+    }
+  }
+
+  slotTargetAt(slotId: string): SlotTarget {
+    return new SlotTarget(this as any, slotId)
+  }
+  getSlotAttachObject3d(slotId: string): any {
+    // slotId 가 'pile' 이면 pad. record.id 면 그 carrier mesh — popup tether 가 그
+    // stock 에 정확히 연결되도록.
+    return (this as any)._realObject?.getAttachFrame?.(slotId)
+  }
+
+  // _setDataSilently 는 RecordStorage mixin 제공 — 다만 mixin 은 _rebuildVisual
+  // 호출. Stockpile 의 3D 갱신은 update() 라서 hook override.
+  _rebuildVisual(): void {
+    this._realObject?.update?.()
+  }
+
+  /**
+   * 2D — outlined pad + 인벤토리 카운트 텍스트. 평치 의도가 한 눈에 — 사각 영역 위에
+   * 적재된 carrier 수가 가운데 큰 글씨로.
+   */
+  render(ctx: CanvasRenderingContext2D) {
+    const { left = 0, top = 0, width = 100, height = 100 } = this.state
+    const fillStyle = (this.state.fillStyle as string) || '#c89c5c'
+    const strokeStyle = (this.state.strokeStyle as string) || fillStyle
+
+    // pad (반투명)
+    ctx.save()
+    ctx.fillStyle = fillStyle
+    ctx.globalAlpha = 0.18
+    ctx.fillRect(left, top, width, height)
+    ctx.restore()
+
+    // outline (dashed)
+    ctx.save()
+    ctx.strokeStyle = strokeStyle
+    ctx.lineWidth = 1.5
+    ctx.setLineDash([6, 3])
+    ctx.strokeRect(left + 0.75, top + 0.75, width - 1.5, height - 1.5)
+    ctx.setLineDash([])
+    ctx.restore()
+
+    // 인벤토리 수 + capacity (있으면)
+    ctx.save()
+    const fontSize = Math.min(width, height) * 0.22
+    ctx.fillStyle = '#333'
+    ctx.font = `bold ${fontSize}px sans-serif`
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    const label = typeof this.state.capacity === 'number'
+      ? `${this.inventoryCount}/${this.state.capacity}`
+      : `${this.inventoryCount}`
+    ctx.fillText(label, left + width / 2, top + height / 2)
+    ctx.restore()
+  }
+
+  // ── Popup 연동 — storage-rack 동일 패턴 ───────────────────────────────
+  /**
+   * things-scene EventManager3D 가 raycast → object3d.userData.context.component 의
+   * `trigger("click", mouseEvent)` 을 호출 → eventMap 으로 receive. pad / carrier mesh
+   * 어느 쪽을 클릭하든 stockpile 전체 popup invoke (단일 slot 이라 cell 구분 없음).
+   */
+  get eventMap() {
+    return {
+      '(self)': {
+        '(self)': {
+          click: this._onStockpileClick
+        }
+      }
+    }
+  }
+
+  private _onStockpileClick = (mouseEvent: MouseEvent) => {
+    // view mode 에서만 동작 (modeling 중 click 은 framework 선택 로직 우선).
+    if (!(this as any).app?.isViewMode) return
+    const hit = this._raycastStockpileHit(mouseEvent)
+    if (!hit) return
+    // hit.object 가 carrier mesh 면 userData.recordId 보유 → 그 stock 의 popup.
+    // pad / 기타면 stockpile 전체 popup.
+    const recordId = hit.object?.userData?.recordId as string | undefined
+    this._dispatchStockpilePopup(typeof recordId === 'string' ? recordId : undefined)
+  }
+
+  /**
+   * state.popupRef 가 가리키는 Popup 컴포넌트를 invoke.
+   *   - recordId 명시 → 그 record 의 anchor = mesh. payload = 해당 record.
+   *   - 미명시 (pad 클릭) → 'pile' anchor (pad). payload = 전체 inventory.
+   *
+   * RecordStorage mixin 의 `_invokePopup(slotId, payload)` 를 활용. 단일 slot
+   * 시맨틱이 record/pile 두 모드라 mixin 위 wrapper 로 dispatch.
+   */
+  private _dispatchStockpilePopup(recordId?: string): void {
+    if (!this.state.popupRef) return
+    if (recordId) {
+      const record = (this.records as ReadonlyArray<StockpileRecord>)
+        .find(r => r.id === recordId) ?? { id: recordId }
+      this._invokePopup(recordId, record)
+    } else {
+      this._invokePopup(SLOT_ID, {
+        componentId: (this.state as any).id,
+        records: this.records,
+        inventoryCount: this.inventoryCount,
+        capacity: this.state.capacity,
+        carrierPreset: this.state.carrierPreset,
+        stackPattern: this.state.stackPattern
+      })
+    }
+  }
+
+  /**
+   * 클릭 시 framework 의 mouse NDC 를 재사용해 raycast → *우리 stockpile* 의 어떤 mesh 가
+   * closest hit 인지 반환 (다른 object 가 더 가까우면 undefined). storage-rack._raycastRackHit
+   * 와 동일 패턴 — capability.getObjectsByRaycast 우선, 없으면 scene/camera/canvas 재구성.
+   */
+  private _raycastStockpileHit(mouseEvent: MouseEvent): THREE.Intersection | undefined {
+    const ro: any = (this as any)._realObject
+    if (!ro?.object3d) return undefined
+
+    const tc: any = ro.threeContainer
+    if (!tc) return undefined
+
+    const cap: any = tc._threeCapability ?? tc._capability
+    let intersects: THREE.Intersection[] | undefined
+    if (cap?.getObjectsByRaycast) {
+      intersects = cap.getObjectsByRaycast() as THREE.Intersection[] | undefined
+    }
+    if (!intersects || intersects.length === 0) {
+      const scene = tc.scene3d as THREE.Scene | undefined
+      const renderer = tc.renderer3d as THREE.WebGLRenderer | undefined
+      const camera =
+        (tc.activeCamera3d as THREE.Camera | undefined) ??
+        (cap?.activeCamera as THREE.Camera | undefined) ??
+        (cap?.camera as THREE.Camera | undefined)
+      const canvas = renderer?.domElement
+      if (!scene || !canvas || !camera) return undefined
+      const rect = canvas.getBoundingClientRect()
+      if (rect.width === 0 || rect.height === 0) return undefined
+      const ndc = new THREE.Vector2(
+        ((mouseEvent.clientX - rect.left) / rect.width) * 2 - 1,
+        -((mouseEvent.clientY - rect.top) / rect.height) * 2 + 1
+      )
+      const raycaster = new THREE.Raycaster()
+      raycaster.setFromCamera(ndc, camera)
+      intersects = raycaster.intersectObjects(scene.children, true)
+    }
+    if (!intersects || intersects.length === 0) return undefined
+
+    // 가장 가까운 hit 이 *이 stockpile* 의 descendant 여야 한다 (다른 mesh 가 사이에 있으면 skip).
+    const closest = intersects[0]
+    let obj: THREE.Object3D | null = closest.object
+    while (obj) {
+      if (obj.userData?.context === ro) return closest
+      obj = obj.parent
+    }
+    return undefined
+  }
+
+  // legendTarget / _onLegendChanged / resolveLegendColor — RecordStorage mixin 제공.
+
+  buildRealObject(): RealObject | undefined {
+    return new Stockpile3D(this)
+  }
+}
+
+// transient carrier refid — scene 내 기존 컴포넌트와 충돌 회피용 큰 시작값
+// (storage-rack 의 _nextCarrierRefid 와 같은 idiom, 별도 범위로 분리).
+let _stockpileCarrierSeq = 0
+function _nextStockpileCarrierRefid(): number {
+  return 800000 + (_stockpileCarrierSeq++)
+}
+
+function resolveDepth(c: Component): number {
+  const eff = (c as any)._realObject?.effectiveDepth
+  if (typeof eff === 'number' && Number.isFinite(eff)) return eff
+  const d = (c as any)?.state?.depth
+  return typeof d === 'number' && Number.isFinite(d) ? d : 0
+}