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

package/src/stockpile-3d.ts

@@ -0,0 +1,412 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Stockpile3D — 평치 영역의 3D 시각화.
+ *
+ *   - floor pad (얇은 box, 영역 footprint).
+ *   - records.length 만큼 가상 carrier mesh 를 *_stackPattern_* 으로 자동 배치.
+ *   - mesh geometry / material 은 *_carrierPreset_* 별.
+ *
+ * 핵심 — 실제 carrier 컴포넌트를 자식으로 두지 않고 *_가상 mesh_* 만 그려서 다수
+ * 적치를 가볍게 표현. records 변경 시 update() 가 호출되어 mesh 가 재배치된다.
+ */
+
+import * as THREE from 'three'
+import { RealObjectGroup } from '@hatiolab/things-scene'
+
+import type Stockpile from './stockpile.js'
+import type { StackPattern, CarrierPreset } from './stockpile.js'
+
+const PAD_DEPTH = 2
+
+/** carrierPreset 별 default 색 (state.carrierWidth/Height/Depth 미지정 시 크기와 함께). */
+const PRESET_COLOR: Record<CarrierPreset, number> = {
+  box: 0xb87333,      // kraft brown
+  pallet: 0x8b6f47,   // 짙은 나무
+  drum: 0x556679,     // 금속/blue-grey
+  sack: 0xd4c89a,     // beige 천
+  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 Stockpile3D extends RealObjectGroup {
+  private _carriersGroup?: THREE.Group
+  private _padMesh?: THREE.Mesh
+  /** pad 의 외곽선 — strokeStyle 표현 (2D dashed outline 의 3D 대응). */
+  private _padOutline?: THREE.LineSegments
+  /** record.id → 해당 carrier mesh 매핑 — popup anchor / tether 의 대상으로 사용. */
+  private _meshByRecordId: Map<string, THREE.Mesh> = new Map()
+  /** Legend 매핑된 색을 material 로 캐시 — 같은 색 record 들은 material 공유 (drawcall ↓). */
+  private _materialByColor: Map<number, THREE.MeshStandardMaterial> = new Map()
+
+  private _getMaterialForColor(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
+  }
+
+  private _disposeMaterialCache(): void {
+    for (const m of this._materialByColor.values()) m.dispose()
+    this._materialByColor.clear()
+  }
+
+  build() {
+    super.build()
+    const state = this.component.state as any
+    const w = state.width ?? 100
+    const h = state.height ?? 100
+
+    // ── floor pad — 영역 표시 (얇은 box) ──────────────────────────────
+    const padGeom = new THREE.BoxGeometry(w, PAD_DEPTH, h)
+    const padColor = this._padColor()
+    const padMat = new THREE.MeshStandardMaterial({
+      color: padColor, roughness: 0.85, transparent: true, opacity: 0.55,
+      emissive: padColor, emissiveIntensity: 0.05
+    })
+    this._padMesh = new THREE.Mesh(padGeom, padMat)
+    this._padMesh.position.y = PAD_DEPTH / 2
+    this._padMesh.receiveShadow = true
+    this.object3d.add(this._padMesh)
+
+    // pad 외곽선 — strokeStyle 3D 표현. 2D 의 dashed outline 과 같은 의도.
+    const outlineColor = this._strokeColor()
+    const outlineMat = new THREE.LineBasicMaterial({ color: outlineColor })
+    this._padOutline = new THREE.LineSegments(new THREE.EdgesGeometry(padGeom), outlineMat)
+    this._padOutline.position.y = PAD_DEPTH / 2
+    this.object3d.add(this._padOutline)
+
+    // ── carriers group — records 기반 자동 적치 ─────────────────────
+    this._carriersGroup = new THREE.Group()
+    this._carriersGroup.position.y = PAD_DEPTH
+    this.object3d.add(this._carriersGroup)
+    this._rebuildCarriers()
+  }
+
+  update() {
+    super.update()
+    this._rebuildCarriers()
+  }
+
+  /**
+   * carrier attach point.
+   *   - slotId 가 record.id 와 매칭되면 그 record 의 mesh 반환 → popup tether 가 정확히
+   *     해당 stock 에 연결.
+   *   - 아니면 pad 반환 (단일 'pile' slot, mover place 의 default anchor).
+   */
+  getAttachFrame(slotId?: string): THREE.Object3D | undefined {
+    if (slotId) {
+      const mesh = this._meshByRecordId.get(slotId)
+      if (mesh) return mesh
+    }
+    return this._padMesh
+  }
+
+  /** state.fillStyle → THREE.Color. 잘못된 값/없으면 default. capacity 점유율에 따른
+   *  색 변경은 강요하지 않음 — 필요하면 사용자가 mapping(eval)으로 fillStyle 을 조정. */
+  private _padColor(): THREE.Color {
+    const raw = (this.component.state as any)?.fillStyle
+    if (typeof raw === 'string' && raw.length > 0) {
+      try { return new THREE.Color(raw) } catch { /* fallthrough */ }
+    }
+    return new THREE.Color(0xc89c5c)
+  }
+
+  /** state.strokeStyle → THREE.Color (pad 외곽선 색). 미설정 시 fillStyle 따라가되
+   *  대비 위해 약간 어둡게 */
+  private _strokeColor(): THREE.Color {
+    const raw = (this.component.state as any)?.strokeStyle
+    if (typeof raw === 'string' && raw.length > 0) {
+      try { return new THREE.Color(raw) } catch { /* fallthrough */ }
+    }
+    return this._padColor().clone().multiplyScalar(0.6)
+  }
+
+  private _applyStrokeColor(): void {
+    if (!this._padOutline) return
+    const m = this._padOutline.material as THREE.LineBasicMaterial
+    m.color.copy(this._strokeColor())
+    m.needsUpdate = true
+  }
+
+  /** state.fillStyle 변경 즉시 반영 — pad material 의 color + emissive 갱신. */
+  private _applyPadColor(): void {
+    if (!this._padMesh) return
+    const m = this._padMesh.material as THREE.MeshStandardMaterial
+    const c = this._padColor()
+    m.color.copy(c)
+    m.emissive.copy(c)
+    m.needsUpdate = true
+  }
+
+  private _rebuildCarriers(): void {
+    const g = this._carriersGroup
+    if (!g) return
+    // 기존 mesh 모두 제거 (geometry/material 은 공유돼 dispose 안 함)
+    while (g.children.length > 0) g.remove(g.children[0])
+
+    const stockpile = this.component as unknown as Stockpile
+    const count = stockpile.records.length
+    if (count === 0) return
+
+    const state = stockpile.state as any
+    const areaW = state.width ?? 100
+    const areaH = state.height ?? 100
+    const pattern = (state.stackPattern as StackPattern) ?? 'row'
+    const preset = (state.carrierPreset as CarrierPreset) ?? 'box'
+
+    // carrier 크기 — 명시값 우선, 없으면 preset default
+    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   // 평면(xz) cell 간격 — 0 이면 딱 붙음. carrier 크기 대비 충분히 분리되도록 default 10.
+
+    const geom = this._carrierGeometry(preset, cw, ch, cd)
+    // record 별로 색이 다를 수 있어(Legend 매핑) material 을 record 별로 생성.
+    // 같은 색은 material 캐시로 공유해 dispose 비용 / drawcall 최적화.
+    const presetDefaultColor = PRESET_COLOR[preset] ?? PRESET_COLOR.box
+    this._disposeMaterialCache()
+    const resolveColor = (record: any): number => {
+      const legendColor = (stockpile as any).resolveLegendColor?.(record)
+      if (typeof legendColor === 'string' && legendColor.length > 0) {
+        try { return new THREE.Color(legendColor).getHex() } catch { /* fallthrough */ }
+      }
+      return presetDefaultColor
+    }
+
+    const positions = this._computeStackPositions(pattern, count, areaW, areaH, cw, ch, cd, gap, state.stackHeightLimit)
+    this._meshByRecordId.clear()
+    const records = stockpile.records
+    for (let i = 0; i < positions.length; i++) {
+      const p = positions[i]
+      const record = records[i]
+      const colorHex = resolveColor(record)
+      const mat = this._getMaterialForColor(colorHex)
+      const mesh = new THREE.Mesh(geom, mat)
+      mesh.position.set(p.x, p.y, p.z)
+      mesh.castShadow = true
+      mesh.receiveShadow = true
+      // raycast hit → record 식별을 위해 userData 에 recordId 저장 + Map 갱신.
+      const rid = records[i]?.id
+      if (rid != null) {
+        mesh.userData.recordId = String(rid)
+        this._meshByRecordId.set(String(rid), mesh)
+      }
+      g.add(mesh)
+    }
+  }
+
+  /** record.id 로 해당 carrier mesh 직접 조회 — popup tether anchor 용. */
+  getMeshByRecordId(recordId: string): THREE.Mesh | undefined {
+    return this._meshByRecordId.get(recordId)
+  }
+
+  /**
+   * stackPattern 별 각 carrier 의 local 좌표(영역 중심 기준). y 는 pad 위에 쌓이는
+   * 높이(cd 단위), x/z 는 영역 평면 위 분포.
+   */
+  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 }> = []
+
+    // column — 한 자리에 수직 적층
+    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
+    }
+
+    // 격자 cell — 행/열 수. cell stride = carrier + gap (인접 carrier 사이 분리).
+    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
+
+    // pyramid — 위로 갈수록 행/열 -1 씩 (사다리꼴)
+    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)
+          // 가운데 정렬 — 줄어든 만큼 offset
+          const offsetCol = (cols - lcols) / 2
+          const offsetRow = (rows - lrows) / 2
+          const x = -areaW / 2 + (c + offsetCol + 0.5) * stridX
+          const z = -areaH / 2 + (r + offsetRow + 0.5) * stridZ
+          out.push({ x, y: layer * cd + cd / 2, z })
+        }
+        remaining -= take
+        layer++
+        if (lcols === 1 && lrows === 1) {
+          // 정상에 도달 — 남은 건 column 처럼 위로
+          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
+    }
+
+    // pile — 자연 더미. row 와 비슷하되 가장자리는 약간 옆으로 흘러내림 효과
+    // (간단 구현 — 단마다 약간 random offset).
+    if (pattern === 'pile') {
+      // pseudo-random (인덱스 기반, deterministic)
+      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 jitterX = (rng(i * 2) - 0.5) * cw * 0.2
+        const jitterZ = (rng(i * 2 + 1) - 0.5) * ch * 0.2
+        const x = -areaW / 2 + (c + 0.5) * stridX + jitterX
+        const z = -areaH / 2 + (r + 0.5) * stridZ + jitterZ
+        out.push({ x, y: layer * cd + cd / 2, z })
+        if (heightLimit && layer >= heightLimit - 1 && idx === cellsPerLayer - 1) break
+      }
+      return out
+    }
+
+    // row (default) / 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
+      // staggered — 홀수 layer 는 1/2 cell offset (벽돌식)
+      if (pattern === 'staggered' && layer % 2 === 1) {
+        x += stridX / 2
+      }
+      out.push({ x, y: layer * cd + cd / 2, z })
+    }
+    return out
+  }
+
+  /** carrierPreset 별 geometry. drum 은 cylinder, 나머지는 box. */
+  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)
+    }
+    // sack/bale — 약간 작게 (자연스러운 형태)
+    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)
+  }
+
+  /**
+   * state.alpha 변경 시 pad + carriers 의 material opacity 즉시 반영.
+   * pad 는 원래 0.55 base opacity 위에 alpha 곱 (영역 표시가 너무 진해지지 않도록).
+   * carriers 는 alpha 그대로 (단순한 곱은 fully opaque 이 1, 반투명이 0).
+   */
+  updateAlpha(): void {
+    const state = this.component.state as any
+    const alpha = typeof state.alpha === 'number' ? state.alpha : 1
+    if (this._padMesh) {
+      const m = this._padMesh.material as THREE.MeshStandardMaterial
+      m.opacity = 0.55 * alpha
+      m.transparent = m.opacity < 1
+      m.needsUpdate = true
+    }
+    if (this._carriersGroup) {
+      for (const child of this._carriersGroup.children) {
+        const mesh = child as THREE.Mesh
+        const m = mesh.material as THREE.MeshStandardMaterial
+        if (!m) continue
+        m.opacity = alpha
+        m.transparent = alpha < 1
+        m.needsUpdate = true
+      }
+    }
+  }
+
+  updateDimension(): void {
+    // width/height 변경 시 pad geometry + outline + carriers 재계산
+    if (this._padMesh) {
+      const state = this.component.state as any
+      const w = state.width ?? 100
+      const h = state.height ?? 100
+      this._padMesh.geometry.dispose()
+      this._padMesh.geometry = new THREE.BoxGeometry(w, PAD_DEPTH, h)
+      if (this._padOutline) {
+        this._padOutline.geometry.dispose()
+        this._padOutline.geometry = new THREE.EdgesGeometry(this._padMesh.geometry)
+      }
+    }
+    this._rebuildCarriers()
+  }
+
+  /**
+   * state 변경 시 즉시 3D 갱신 — property panel 의 수정이 바로 반영되도록.
+   *   - width/height → pad geometry 재생성 + carriers 재계산 (updateDimension)
+   *   - 적치/외형 관련 키 → carriers 만 재계산 (_rebuildCarriers)
+   */
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>): void {
+    if ('width' in after || 'height' in after) {
+      this.updateDimension()
+      return
+    }
+    if ('alpha' in after) {
+      this.updateAlpha()
+      return
+    }
+    if ('fillStyle' in after) {
+      this._applyPadColor()
+      // fillStyle 변경 시 strokeStyle 미설정이면 outline default 도 같이 갱신
+      if ((this.component.state as any).strokeStyle == null) this._applyStrokeColor()
+      return
+    }
+    if ('strokeStyle' in after) {
+      this._applyStrokeColor()
+      return
+    }
+    const rebuildKeys = [
+      'data',
+      'stackPattern', 'carrierPreset',
+      'carrierWidth', 'carrierHeight', 'carrierDepth', 'carrierGap',
+      'capacity', 'stackHeightLimit', 'pickPolicy'
+    ]
+    if (rebuildKeys.some(k => k in after)) {
+      this._rebuildCarriers()
+      return
+    }
+    super.onchange?.(after, before)
+  }
+}