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

package/src/stockpile-grid.ts

@@ -0,0 +1,456 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * StockpileGrid — cols × rows cell 들로 분할된 평치 영역. cell 들은 grid 공통 설정
+ * (carrierPreset/stackPattern/크기/capacity 등)을 *_모두 공유_* 하고, 각 cell 은 자기
+ * 위치(col, row)에서의 records 만 별도 가진다. cell 별 override 는 의미가 없어
+ * 제거됨 — cell 별 다른 설정이 진짜 필요한 경우엔 Stockpile 컴포넌트를 따로 두는
+ * 것이 자연스럽다.
+ *
+ * state.data = grid 의 cell 들 배열 (각 element 는 cell-단위 stockpile-like 데이터).
+ *   data: [
+ *     { col: 0, row: 0, data: [{ id, ... }, ...] },
+ *     { col: 1, row: 0, data: [...] },
+ *     ...
+ *   ]
+ * cell.data 가 그 cell 의 records. 외부 데이터 매핑은 이 배열을 target.
+ */
+
+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,
+  SlotTarget,
+  type AttachFrame,
+  type Alignment,
+  type Heights,
+  type PlacementArchetype
+} from '@operato/scene-base'
+
+import { StockpileGrid3D } from './stockpile-grid-3d.js'
+import type { StackPattern, CarrierPreset, StockpileRecord, PickPolicy } from './stockpile.js'
+
+/** grid 의 한 cell — 위치 + 그 cell 의 records. */
+export interface StockpileGridCell {
+  col: number
+  row: number
+  data?: StockpileRecord[]
+}
+
+export interface StockpileGridState extends State {
+  cols?: number
+  rows?: number
+  /** 한 cell 의 평면 크기 (전체 width/height = cellWidth*cols, cellHeight*rows). */
+  cellWidth?: number
+  cellHeight?: number
+
+  /** grid 의 cell 들 — 각 cell 은 { col, row, data: Record[] }. */
+  data?: StockpileGridCell[]
+
+  // ── 공통 carrier 설정 (모든 cell 공유) ──
+  stackPattern?: StackPattern
+  carrierPreset?: CarrierPreset
+  carrierWidth?: number
+  carrierHeight?: number
+  carrierDepth?: number
+  carrierGap?: number
+  capacity?: number           // cell 별 capacity (모든 cell 공통)
+  stackHeightLimit?: number
+  pickPolicy?: PickPolicy
+
+  popupRef?: string
+  legendTarget?: string
+  material3d?: Material3D
+}
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    { type: 'number', label: 'cols', name: 'cols' },
+    { type: 'number', label: 'rows', name: 'rows' },
+    { type: 'number', label: 'cell-width', name: 'cellWidth' },
+    { type: 'number', label: 'cell-height', name: 'cellHeight' },
+    { 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-grid'
+}
+
+@sceneComponent('stockpile-grid')
+export default class StockpileGrid extends CarrierHolder(Placeable(ContainerAbstract)) {
+  declare state: StockpileGridState
+  declare _realObject?: StockpileGrid3D
+
+  static placement: PlacementArchetype = 'floor'
+  static align: Alignment = 'bottom'
+  static defaultDepth = (_h: Heights) => 5
+
+  get nature(): ComponentNature { return NATURE }
+  get anchors() { return [] }
+
+  // ── grid 좌표 helpers ─────────────────────────────────────
+  get cols(): number { return Math.max(1, Math.floor(this.state.cols ?? 3)) }
+  get rows(): number { return Math.max(1, Math.floor(this.state.rows ?? 3)) }
+  get cellW(): number { return this.state.cellWidth ?? 80 }
+  get cellH(): number { return this.state.cellHeight ?? 80 }
+
+  cellIdOf(col: number, row: number): string { return `${col}-${row}` }
+  parseCellId(slotId: string): { col: number; row: number } | null {
+    const m = slotId.match(/^(\d+)-(\d+)$/)
+    if (!m) return null
+    return { col: Number(m[1]), row: Number(m[2]) }
+  }
+
+  /** state.data 에서 (col,row) cell 찾기. */
+  private _findCell(col: number, row: number): StockpileGridCell | undefined {
+    return (this.state.data ?? []).find(c => c.col === col && c.row === row)
+  }
+
+  /** cell 의 records (없으면 빈 배열). */
+  recordsOf(col: number, row: number): ReadonlyArray<StockpileRecord> {
+    return this._findCell(col, row)?.data ?? []
+  }
+
+  /** capacity 는 모든 cell 공통. */
+  capacityOf(_col: number, _row: number): number | undefined {
+    return this.state.capacity
+  }
+
+  // ── SlottedHolder — cell 별 slot ─────────────────────────────
+  slotIds(): ReadonlyArray<string> {
+    const out: string[] = []
+    for (let r = 0; r < this.rows; r++) {
+      for (let c = 0; c < this.cols; c++) out.push(this.cellIdOf(c, r))
+    }
+    return out
+  }
+  hasCarrierAt(slotId: string): boolean {
+    const p = this.parseCellId(slotId)
+    return !!p && this.recordsOf(p.col, p.row).length > 0
+  }
+  canReceiveAt(slotId: string, _carrier?: Component): boolean {
+    const p = this.parseCellId(slotId)
+    if (!p) return false
+    const cap = this.capacityOf(p.col, p.row)
+    if (typeof cap === 'number' && this.recordsOf(p.col, p.row).length >= cap) return false
+    return true
+  }
+  occupiedSlotIds(): ReadonlyArray<string> {
+    const out: string[] = []
+    for (let r = 0; r < this.rows; r++) for (let c = 0; c < this.cols; c++) {
+      if (this.recordsOf(c, r).length > 0) out.push(this.cellIdOf(c, r))
+    }
+    return out
+  }
+  emptySlotIds(): ReadonlyArray<string> {
+    const out: string[] = []
+    for (let r = 0; r < this.rows; r++) for (let c = 0; c < this.cols; c++) {
+      if (this.canReceiveAt(this.cellIdOf(c, r))) out.push(this.cellIdOf(c, r))
+    }
+    return out
+  }
+
+  obtainCarrier(slotId: string): Component | null {
+    const p = this.parseCellId(slotId)
+    if (!p) return null
+    const recs = this.recordsOf(p.col, p.row)
+    if (recs.length === 0) return null
+    const records = [...recs]
+    const policy = (this.state.pickPolicy ?? 'lifo') as PickPolicy
+    const record = policy === 'fifo' ? records.shift()! : records.pop()!
+    this._setCellRecords(p.col, p.row, records)
+    return this._materializeCarrier(record, p.col, p.row)
+  }
+
+  async receiveAt(slotId: string, carrier: Component, _options?: any): Promise<void> {
+    const p = this.parseCellId(slotId)
+    if (!p) return
+    const cstate: any = (carrier as any)?.state ?? {}
+    const cid = cstate.id ?? `stkg-${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.recordsOf(p.col, p.row), record]
+    this._setCellRecords(p.col, p.row, records)
+    ;(carrier as any)?.dispose?.()
+  }
+
+  async accept(carrier: Component, options?: any): Promise<void> {
+    const empty = this.emptySlotIds()
+    if (empty.length === 0) return
+    return this.receiveAt(empty[0], carrier, options)
+  }
+  async receive(carrier: Component, options?: any): Promise<void> {
+    return this.accept(carrier, options)
+  }
+
+  slotTargetAt(slotId: string): SlotTarget { return new SlotTarget(this as any, slotId) }
+  getSlotAttachObject3d(slotId: string): any {
+    return (this as any)._realObject?.getCellPadMesh?.(slotId)
+  }
+
+  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 } }
+  }
+
+  private _setCellRecords(col: number, row: number, records: StockpileRecord[]): void {
+    const cells = [...((this.state.data as StockpileGridCell[]) ?? [])]
+    const idx = cells.findIndex(c => c.col === col && c.row === row)
+    if (idx === -1) cells.push({ col, row, data: records })
+    else cells[idx] = { ...cells[idx], data: records }
+    ;(this.state as any).data = cells
+    this._realObject?.update?.()
+  }
+
+  private _materializeCarrier(record: StockpileRecord, col: number, row: number): Component | null {
+    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-grid] carrier type "${carrierType}" 미등록`)
+      return null
+    }
+
+    const cw = this.state.carrierWidth ?? 30
+    const ch = this.state.carrierHeight ?? 30
+    const cd = this.state.carrierDepth ?? 22
+
+    const { id: _id, refid: _refid, transform: _tf, ...recordCopy } = record as any
+    const cellCenterX = col * this.cellW + this.cellW / 2
+    const cellCenterZ = row * this.cellH + this.cellH / 2
+
+    const carrierState: any = {
+      ...recordCopy,
+      type: carrierType,
+      width: cw,
+      height: ch,
+      depth: cd,
+      refid: _nextStockpileGridCarrierRefid(),
+      left: cellCenterX - cw / 2,
+      top: cellCenterZ - ch / 2
+    }
+
+    const carrier = new CarrierClass(carrierState, (this as any)._app)
+    ;(this as any).addComponent(carrier, { silent: true })
+    void (carrier as any).realObject
+    ;(carrier as any).applyHolderAttachPoint?.()
+    return carrier
+  }
+
+  // ── Legend ─────────────────────────────────────────────────
+  private _legendTarget?: Component
+  get legendTarget(): Component | undefined {
+    if (this._legendTarget) return this._legendTarget
+    const id = this.state.legendTarget
+    if (id) {
+      const found = ((this as any).root)?.findById?.(id) as Component | undefined
+      if (found) {
+        this._legendTarget = found
+        ;(found as any).on?.('change', this._onLegendChanged, this)
+        return found
+      }
+    }
+    const visit = (node: any): Component | undefined => {
+      if (!node) return undefined
+      if (node.state?.type === 'legend') return node as Component
+      const children = node.components as Component[] | undefined
+      if (children) for (const c of children) { const r = visit(c); if (r) return r }
+      return undefined
+    }
+    const found = visit((this as any).root)
+    if (found) {
+      this._legendTarget = found
+      ;(found as any).on?.('change', this._onLegendChanged, this)
+    }
+    return found
+  }
+  private _onLegendChanged = (): void => { ;(this._realObject as any)?.update?.() }
+
+  resolveLegendColor(record: any): string | undefined {
+    const legend = this.legendTarget
+    if (!legend) return undefined
+    const status: any = (legend as any).getState?.('status') ?? (legend.state as any)?.status
+    if (!status) return undefined
+    const field = status.field as string | undefined
+    const ranges = status.ranges as any[] | undefined
+    if (!field || !Array.isArray(ranges)) return undefined
+    const value = record?.[field]
+    if (value === undefined || value === null) return status.defaultColor
+    for (const range of ranges) {
+      if (!range) continue
+      if (range.value !== undefined) {
+        if (range.value === value) return range.color
+        continue
+      }
+      const num = Number(value)
+      if (!Number.isFinite(num)) continue
+      const min = range.min !== undefined && range.min !== '' ? Number(range.min) : undefined
+      const max = range.max !== undefined && range.max !== '' ? Number(range.max) : undefined
+      const minOk = min === undefined || num >= min
+      const maxOk = max === undefined || num < max
+      if (minOk && maxOk) return range.color
+    }
+    return status.defaultColor as string | undefined
+  }
+
+  // ── Popup + click ─────────────────────────────────────────────
+  get eventMap() {
+    return { '(self)': { '(self)': { click: this._onGridClick } } }
+  }
+  private _onGridClick = (mouseEvent: MouseEvent) => {
+    if (!(this as any).app?.isViewMode) return
+    const hit = this._raycastHit(mouseEvent)
+    if (!hit) return
+    const slotId = (hit.object?.userData?.slotId as string | undefined)
+    this._invokePopup(slotId)
+  }
+  private _invokePopup(slotId?: string): void {
+    const popupRefId = this.state.popupRef
+    if (!popupRefId) return
+    const popupComp: any = (this as any).root?.findById?.(popupRefId)
+    if (!popupComp || typeof popupComp.openPopup !== 'function') return
+    if (slotId) {
+      const p = this.parseCellId(slotId)
+      const anchor = this.slotTargetAt(slotId)
+      popupComp.openPopup({
+        cellId: slotId,
+        col: p?.col, row: p?.row,
+        records: p ? this.recordsOf(p.col, p.row) : [],
+        capacity: p ? this.capacityOf(p.col, p.row) : undefined
+      }, { anchor })
+    } else {
+      const anchor = this.slotTargetAt(this.cellIdOf(0, 0))
+      popupComp.openPopup({
+        componentId: (this.state as any).id,
+        cols: this.cols, rows: this.rows
+      }, { anchor })
+    }
+  }
+
+  private _raycastHit(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
+    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
+  }
+
+  // ── 2D render ─────────────────────────────────────────────
+  render(ctx: CanvasRenderingContext2D) {
+    const { left = 0, top = 0 } = this.state
+    const totalW = this.cellW * this.cols
+    const totalH = this.cellH * this.rows
+    const fillStyle = (this.state.fillStyle as string) || '#c89c5c'
+    const strokeStyle = (this.state.strokeStyle as string) || '#7a5a2e'
+
+    ctx.save()
+    ctx.fillStyle = fillStyle
+    ctx.globalAlpha = 0.15
+    ctx.fillRect(left, top, totalW, totalH)
+    ctx.restore()
+
+    ctx.save()
+    ctx.strokeStyle = strokeStyle
+    ctx.lineWidth = 1.2
+    ctx.strokeRect(left + 0.6, top + 0.6, totalW - 1.2, totalH - 1.2)
+    for (let c = 1; c < this.cols; c++) {
+      const x = left + c * this.cellW
+      ctx.beginPath(); ctx.moveTo(x, top); ctx.lineTo(x, top + totalH); ctx.stroke()
+    }
+    for (let r = 1; r < this.rows; r++) {
+      const y = top + r * this.cellH
+      ctx.beginPath(); ctx.moveTo(left, y); ctx.lineTo(left + totalW, y); ctx.stroke()
+    }
+    ctx.restore()
+
+    ctx.save()
+    const fontSize = Math.min(this.cellW, this.cellH) * 0.22
+    ctx.fillStyle = '#333'
+    ctx.font = `bold ${fontSize}px sans-serif`
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    for (let r = 0; r < this.rows; r++) for (let c = 0; c < this.cols; c++) {
+      const count = this.recordsOf(c, r).length
+      if (count === 0) continue
+      ctx.fillText(`${count}`, left + (c + 0.5) * this.cellW, top + (r + 0.5) * this.cellH)
+    }
+    ctx.restore()
+  }
+
+  buildRealObject(): RealObject | undefined {
+    return new StockpileGrid3D(this)
+  }
+}
+
+let _stockpileGridCarrierSeq = 0
+function _nextStockpileGridCarrierRefid(): number {
+  return 850000 + (_stockpileGridCarrierSeq++)
+}
+
+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
+}