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

package/src/stockpile-grid-3d.ts

@@ -0,0 +1,327 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * StockpileGrid3D — cell × cell 의 평치 영역 3D 시각화. cell 마다 pad + records 기반
+ * 자동 적치 carrier mesh. Stockpile3D 와 같은 idiom 의 cell 별 적용.
+ *
+ * cell pad mesh 에 userData.slotId 를 심어 click raycast 가 cell 을 식별, popup
+ * tether anchor 로 동작 (storage-rack 패턴).
+ */
+
+import * as THREE from 'three'
+import { RealObjectGroup } from '@hatiolab/things-scene'
+
+import type StockpileGrid from './stockpile-grid.js'
+import type { StackPattern, CarrierPreset } from './stockpile.js'
+
+const PAD_DEPTH = 2
+
+const PRESET_COLOR: Record<CarrierPreset, number> = {
+  box: 0xb87333,
+  pallet: 0x8b6f47,
+  drum: 0x556679,
+  sack: 0xd4c89a,
+  crate: 0x9a7548,
+  bale: 0xa89968
+}
+
+const PRESET_DEFAULT_SIZE: Record<CarrierPreset, { w: number; h: number; d: number }> = {
+  box: { w: 26, h: 26, d: 20 },
+  pallet: { w: 40, h: 30, d: 15 },
+  drum: { w: 24, h: 24, d: 30 },
+  sack: { w: 30, h: 28, d: 18 },
+  crate: { w: 30, h: 30, d: 22 },
+  bale: { w: 32, h: 30, d: 18 }
+}
+
+export class StockpileGrid3D extends RealObjectGroup {
+  /** cellSlotId → pad mesh (popup tether anchor 용). */
+  private _padByCellId: Map<string, THREE.Mesh> = new Map()
+  /** cellSlotId → carriers group. */
+  private _carriersByCellId: Map<string, THREE.Group> = new Map()
+  /** material 캐시 (color → material) — 같은 색 carrier 공유. */
+  private _materialByColor: Map<number, THREE.MeshStandardMaterial> = new Map()
+  /** grid 전체를 감싸는 outer group (보드 보정 등). */
+  private _gridGroup?: THREE.Group
+
+  build() {
+    super.build()
+    this._buildGrid()
+  }
+
+  update() {
+    super.update()
+    this._rebuildAll()
+  }
+
+  /** carrier attach anchor — slotId 가 cellId 면 그 cell pad 반환, 아니면 grid group. */
+  getAttachFrame(slotId?: string): THREE.Object3D | undefined {
+    if (slotId) {
+      const pad = this._padByCellId.get(slotId)
+      if (pad) return pad
+    }
+    return this._gridGroup
+  }
+  /** slotTargetAt(cellId).attachObject3d = cell pad — Stockpile.getSlotAttachObject3d 가 호출. */
+  getCellPadMesh(slotId: string): THREE.Mesh | undefined {
+    return this._padByCellId.get(slotId)
+  }
+
+  private _disposeAll(): void {
+    if (this._gridGroup) {
+      this._disposeGroupChildren(this._gridGroup)
+      this.object3d.remove(this._gridGroup)
+      this._gridGroup = undefined
+    }
+    this._padByCellId.clear()
+    this._carriersByCellId.clear()
+    for (const m of this._materialByColor.values()) m.dispose()
+    this._materialByColor.clear()
+  }
+
+  private _disposeGroupChildren(group: THREE.Object3D): void {
+    while (group.children.length > 0) {
+      const child = group.children[0]
+      this._disposeGroupChildren(child)
+      group.remove(child)
+      if ((child as any).geometry?.dispose) (child as any).geometry.dispose()
+    }
+  }
+
+  private _rebuildAll(): void {
+    this._disposeAll()
+    this._buildGrid()
+  }
+
+  private _buildGrid(): void {
+    const grid = this.component as unknown as StockpileGrid
+    const cols = grid.cols
+    const rows = grid.rows
+    const cellW = grid.cellW
+    const cellH = grid.cellH
+    const state = grid.state as any
+
+    const outline = new THREE.Color((state.strokeStyle as string) || '#7a5a2e')
+    const fillColor = new THREE.Color((state.fillStyle as string) || '#c89c5c')
+
+    this._gridGroup = new THREE.Group()
+    // grid pad 원점은 컴포넌트 중심 (left+totalW/2). state.left/top 기준 origin 0
+    // 인 사각형 좌상단 — grid local 좌표에서 cell 의 인덱스 (col, row) → cell center
+    // = (col+0.5)*cellW - totalW/2, (row+0.5)*cellH - totalH/2 (3D world 의 컴포넌트
+    // 중심 기준 local).
+    const totalW = cellW * cols
+    const totalH = cellH * rows
+    this.object3d.add(this._gridGroup)
+
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const cellId = grid.cellIdOf(c, r)
+        const cellFill = fillColor   // cell 별 색 override 없음 — 모두 grid 공통
+
+        // ── cell pad ─────────────────────────────────────────
+        const padGeom = new THREE.BoxGeometry(cellW * 0.96, PAD_DEPTH, cellH * 0.96)
+        const padMat = new THREE.MeshStandardMaterial({
+          color: cellFill, roughness: 0.85, transparent: true, opacity: 0.55
+        })
+        const pad = new THREE.Mesh(padGeom, padMat)
+        const cx = (c + 0.5) * cellW - totalW / 2
+        const cz = (r + 0.5) * cellH - totalH / 2
+        pad.position.set(cx, PAD_DEPTH / 2, cz)
+        pad.receiveShadow = true
+        pad.userData.slotId = cellId
+        this._gridGroup.add(pad)
+        this._padByCellId.set(cellId, pad)
+
+        // cell outline — 페인트 라인
+        const padEdges = new THREE.EdgesGeometry(padGeom)
+        const padLine = new THREE.LineSegments(padEdges, new THREE.LineBasicMaterial({ color: outline }))
+        padLine.position.copy(pad.position)
+        this._gridGroup.add(padLine)
+
+        // ── cell carriers ────────────────────────────────────
+        const cg = new THREE.Group()
+        cg.position.set(cx, PAD_DEPTH, cz)
+        this._gridGroup.add(cg)
+        this._carriersByCellId.set(cellId, cg)
+        this._populateCellCarriers(c, r, cg)
+      }
+    }
+  }
+
+  /** cell 의 records 를 stackPattern / carrierPreset 으로 배치. */
+  private _populateCellCarriers(col: number, row: number, group: THREE.Group): void {
+    const grid = this.component as unknown as StockpileGrid
+    const records = grid.recordsOf(col, row)
+    if (records.length === 0) return
+
+    const state = grid.state as any
+    const preset = (state.carrierPreset ?? 'box') as CarrierPreset
+    const pattern = (state.stackPattern ?? 'row') as StackPattern
+    const def = PRESET_DEFAULT_SIZE[preset] ?? PRESET_DEFAULT_SIZE.box
+    const cw = state.carrierWidth ?? def.w
+    const ch = state.carrierHeight ?? def.h
+    const cd = state.carrierDepth ?? def.d
+    const gap = state.carrierGap ?? 10
+    const heightLimit = state.stackHeightLimit as number | undefined
+
+    const cellW = grid.cellW
+    const cellH = grid.cellH
+    const geom = this._carrierGeometry(preset, cw, ch, cd)
+
+    const positions = this._computeStackPositions(pattern, records.length, cellW, cellH, cw, ch, cd, gap, heightLimit)
+    const presetDefault = PRESET_COLOR[preset] ?? PRESET_COLOR.box
+    for (let i = 0; i < positions.length; i++) {
+      const p = positions[i]
+      const record = records[i]
+      const legendColor = (grid as any).resolveLegendColor?.(record)
+      let colorHex = presetDefault
+      if (typeof legendColor === 'string' && legendColor.length > 0) {
+        try { colorHex = new THREE.Color(legendColor).getHex() } catch { /* ignore */ }
+      }
+      const mat = this._getMaterial(colorHex)
+      const mesh = new THREE.Mesh(geom, mat)
+      mesh.position.set(p.x, p.y, p.z)
+      mesh.castShadow = true
+      mesh.receiveShadow = true
+      mesh.userData.recordId = record.id
+      mesh.userData.cellId = grid.cellIdOf(col, row)
+      group.add(mesh)
+    }
+  }
+
+  private _computeStackPositions(
+    pattern: StackPattern,
+    count: number,
+    areaW: number, areaH: number,
+    cw: number, ch: number, cd: number,
+    gap: number,
+    heightLimit?: number
+  ): Array<{ x: number; y: number; z: number }> {
+    const out: Array<{ x: number; y: number; z: number }> = []
+    if (pattern === 'column') {
+      const layers = heightLimit ?? count
+      for (let i = 0; i < count; i++) {
+        const layer = Math.min(i, layers - 1)
+        out.push({ x: 0, y: layer * cd + cd / 2, z: 0 })
+      }
+      return out
+    }
+    const stridX = cw + gap
+    const stridZ = ch + gap
+    const cols = Math.max(1, Math.floor((areaW + gap) / stridX))
+    const rows = Math.max(1, Math.floor((areaH + gap) / stridZ))
+    const cellsPerLayer = cols * rows
+    if (pattern === 'pyramid') {
+      let remaining = count
+      let layer = 0
+      while (remaining > 0) {
+        const lcols = Math.max(1, cols - layer)
+        const lrows = Math.max(1, rows - layer)
+        const cellsThisLayer = lcols * lrows
+        const take = Math.min(remaining, cellsThisLayer)
+        for (let i = 0; i < take; i++) {
+          const c = i % lcols
+          const r = Math.floor(i / lcols)
+          const offC = (cols - lcols) / 2
+          const offR = (rows - lrows) / 2
+          const x = -areaW / 2 + (c + offC + 0.5) * stridX
+          const z = -areaH / 2 + (r + offR + 0.5) * stridZ
+          out.push({ x, y: layer * cd + cd / 2, z })
+        }
+        remaining -= take
+        layer++
+        if (lcols === 1 && lrows === 1) {
+          for (let i = 0; i < remaining; i++) {
+            out.push({ x: 0, y: (layer + i) * cd + cd / 2, z: 0 })
+          }
+          break
+        }
+        if (heightLimit && layer >= heightLimit) break
+      }
+      return out
+    }
+    if (pattern === 'pile') {
+      const rng = (i: number) => ((Math.sin(i * 12.9898) * 43758.5453) % 1 + 1) % 1
+      for (let i = 0; i < count; i++) {
+        const layer = Math.floor(i / cellsPerLayer)
+        const idx = i % cellsPerLayer
+        const c = idx % cols
+        const r = Math.floor(idx / cols)
+        const jX = (rng(i * 2) - 0.5) * cw * 0.2
+        const jZ = (rng(i * 2 + 1) - 0.5) * ch * 0.2
+        const x = -areaW / 2 + (c + 0.5) * stridX + jX
+        const z = -areaH / 2 + (r + 0.5) * stridZ + jZ
+        out.push({ x, y: layer * cd + cd / 2, z })
+        if (heightLimit && layer >= heightLimit - 1 && idx === cellsPerLayer - 1) break
+      }
+      return out
+    }
+    // row / staggered
+    for (let i = 0; i < count; i++) {
+      const layer = Math.floor(i / cellsPerLayer)
+      if (heightLimit && layer >= heightLimit) break
+      const idx = i % cellsPerLayer
+      const c = idx % cols
+      const r = Math.floor(idx / cols)
+      let x = -areaW / 2 + (c + 0.5) * stridX
+      const z = -areaH / 2 + (r + 0.5) * stridZ
+      if (pattern === 'staggered' && layer % 2 === 1) x += stridX / 2
+      out.push({ x, y: layer * cd + cd / 2, z })
+    }
+    return out
+  }
+
+  private _carrierGeometry(preset: CarrierPreset, w: number, h: number, d: number): THREE.BufferGeometry {
+    if (preset === 'drum') {
+      const radius = Math.min(w, h) / 2
+      return new THREE.CylinderGeometry(radius, radius, d, 16)
+    }
+    if (preset === 'sack' || preset === 'bale') {
+      return new THREE.BoxGeometry(w * 0.92, d * 0.92, h * 0.92)
+    }
+    return new THREE.BoxGeometry(w, d, h)
+  }
+
+  private _getMaterial(colorHex: number): THREE.MeshStandardMaterial {
+    let m = this._materialByColor.get(colorHex)
+    if (!m) {
+      m = new THREE.MeshStandardMaterial({ color: colorHex, roughness: 0.7 })
+      this._materialByColor.set(colorHex, m)
+    }
+    return m
+  }
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>): void {
+    // 거의 모든 속성 변경이 grid 재구성 — 단순화.
+    const keys = [
+      'cols', 'rows', 'cellWidth', 'cellHeight',
+      'cells', 'data',
+      'stackPattern', 'carrierPreset',
+      'carrierWidth', 'carrierHeight', 'carrierDepth', 'carrierGap',
+      'capacity', 'stackHeightLimit', 'pickPolicy',
+      'fillStyle', 'strokeStyle',
+      'width', 'height'
+    ]
+    if (keys.some(k => k in after)) {
+      this._rebuildAll()
+      return
+    }
+    super.onchange?.(after, before)
+  }
+
+  updateDimension(): void {
+    this._rebuildAll()
+  }
+
+  updateAlpha(): void {
+    const alpha = typeof (this.component.state as any).alpha === 'number'
+      ? (this.component.state as any).alpha : 1
+    // pad 들의 opacity 만 (carriers 는 alpha 그대로)
+    for (const pad of this._padByCellId.values()) {
+      const m = pad.material as THREE.MeshStandardMaterial
+      m.opacity = 0.55 * alpha
+      m.transparent = m.opacity < 1
+      m.needsUpdate = true
+    }
+  }
+}