@operato/scene-storage 10.0.0-beta.41 → 10.0.0-beta.43

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

@@ -1,126 +1,429 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * RackGrid3D — *공유 corner posts + bay 별 beams + shelf planes*.
+ *
+ * Post (수직 기둥):
+ *   - (cols+1) × (rows+1) 의 grid corner 위치마다 *공유 post* 1 개.
+ *   - 인접 4 bay 중 *최소 1개 non-empty* 면 post 만듦. 모두 empty 면 skip.
+ *   - 옆 bay 와 *공유* → 두 post 겹침 X.
+ *
+ * Beam (수평 부재):
+ *   - non-empty bay 마다 front + back beam (각 shelf level).
+ *
+ * Shelf (반투명 판):
+ *   - non-empty bay 의 각 level 의 frame 안쪽.
+ *
+ * isEmpty source of truth: RackGrid.isBayEmpty(col, row) — cell.state.isEmpty 우선.
  */
-
 import * as THREE from 'three'
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-import { Component, RealObjectGroup } from '@hatiolab/things-scene'
-
-import { Rack } from './rack-column.js'
+import { RealObjectGroup } from '@hatiolab/things-scene'
 import type RackGrid from './rack-grid.js'
-
-const DEFAULT_FRAME_COLOR = 0x8a8a8a
+import {
+  POST_MATERIAL, BEAM_MATERIAL, SHELF_MATERIAL,
+  STOCK_MATERIAL, EMPTY_STOCK_MATERIAL
+} from './rack-materials.js'
 
 export class RackGrid3D extends RealObjectGroup {
-  private _frameMaterial?: THREE.MeshStandardMaterial
+  private _frameGroup?: THREE.Group     // post + beam 묶음 (hideRackFrame 시 hidden)
+  private _beamGroup?: THREE.Group      // beam 만 (hideHorizontalFrame 시 hidden)
 
   build() {
     super.build()
-
-    this.createRacks()
+    this._buildFrames()
+    this._applyFrameVisibility()
   }
 
-  // bottom origin: object3d가 zPos(바닥)에 위치 (내부 mesh는 center-local 좌표로 쌓임)
-  protected get syncZPosOffset(): number {
-    return 0
+  /** hideRackFrame / hideHorizontalFrame 변경 시 visibility 즉시 반영. */
+  applyFrameVisibility(): void {
+    this._applyFrameVisibility()
   }
 
-  override get geometricOffsetY(): number {
-    return 0
+  private _applyFrameVisibility(): void {
+    const rs: any = this.component.state
+    const hideFrame = !!rs?.hideRackFrame
+    const hideBeams = !!rs?.hideHorizontalFrame
+    if (this._frameGroup) this._frameGroup.visible = !hideFrame
+    // beam group 은 frame group 안에 nested — frame 이 hidden 일 때는 beam 도 자연히 hidden.
+    // frame visible + beam toggle 따로
+    if (this._beamGroup) this._beamGroup.visible = !hideBeams
   }
 
-  private createFrameMaterial(): THREE.MeshStandardMaterial {
-    this._frameMaterial?.dispose()
-
-    const { strokeStyle } = this.component.state
-    const color = strokeStyle && typeof strokeStyle === 'string' ? strokeStyle : DEFAULT_FRAME_COLOR
+  private _buildFrames(): void {
+    const comp = this.component as unknown as RackGrid
+    const rs: any = comp.state
+    // frame group — post + beamGroup 담음. hideRackFrame 시 frame group.visible=false.
+    // beam group — 가로 frame 만 (hideHorizontalFrame 시 따로 토글).
+    this._frameGroup = new THREE.Group()
+    this._beamGroup = new THREE.Group()
+    this._frameGroup.add(this._beamGroup)
+    this.object3d.add(this._frameGroup)
+
+    const width = (rs?.width as number) ?? 400        // 3D X
+    const height = (rs?.depth as number) ?? 2000      // 3D Y (floor → ceiling)
+    const depth = (rs?.height as number) ?? 200       // 3D Z (front → back)
+    const cols = comp.columns
+    const rows = comp.rackRows
+    const shelves = comp.shelves
+    const shelfBase = Math.max(0, Math.min((rs?.shelfBaseHeight as number) || 0, height * 0.9))
+    const shelfZone = height - shelfBase
+
+    const bayW = width / cols
+    const bayD = depth / rows
+    const baseY = -height / 2
+    const shelfBaseY = baseY + shelfBase
+
+    // Frame 굵기 — storage-rack 과 동일 비율 (공유 post / 공유 beam 적용 후엔
+    // 겹침 없으므로 같은 비율 사용 가능).
+    const postW = Math.min(bayW, bayD) * 0.06
+    const beamH = postW * 1.2
+
+    const isEmpty = (col: number, row: number): boolean => {
+      if (col < 0 || col >= cols || row < 0 || row >= rows) return true
+      return comp.isBayEmpty(col, row)
+    }
 
-    this._frameMaterial = new THREE.MeshStandardMaterial({
-      color,
-      roughness: 0.35,
-      metalness: 0.85
-    })
+    // ── 1. 공유 corner posts (hideRackFrame 면 skip) ───────
+    //
+    // (cols+1) × (rows+1) 의 모든 corner 위치. 4 인접 bay 중 *하나라도 non-empty*
+    // 이면 post 생성. 인접 bay 가 모두 empty → post skip.
+
+    const postGeos: THREE.BufferGeometry[] = []
+    for (let c = 0; c <= cols; c++) {
+      for (let r = 0; r <= rows; r++) {
+        // 이 corner 에 인접한 4 bay (없는 위치는 isEmpty 처리)
+        const anyActive =
+          !isEmpty(c - 1, r - 1) ||
+          !isEmpty(c,     r - 1) ||
+          !isEmpty(c - 1, r    ) ||
+          !isEmpty(c,     r    )
+        if (!anyActive) continue
+
+        const x = (c - cols / 2) * bayW
+        const z = (r - rows / 2) * bayD
+        const post = new THREE.BoxGeometry(postW, height, postW)
+        post.translate(x, 0, z)
+        postGeos.push(post)
+      }
+    }
 
-    return this._frameMaterial
-  }
+    // ── 2. Horizontal beams (X 축 외곽 wall 만 — storage-rack 일관) ────
+    //
+    // storage-rack 처럼 *front + back 의 X 축 beam* 만. 내부 행 경계 beam +
+    // Z 축 (좌우 side) beam 모두 제거 — *깔끔한 wall-frame 시각*.
+    // 각 level 마다 front (zEdge=0) + back (zEdge=rows) 두 줄. 각 줄은 *연속
+    // non-empty col 구간* 공유 통합.
+
+    const beamGeos: THREE.BufferGeometry[] = []
+
+    // 외곽 wall 의 가로 frame — *연속 non-empty bay 구간*만. isEmpty bay 영역엔
+    // frame 없음. *내부 cross frame 은 항상 제외* — 깔끔함 유지.
+
+    // X 축 beam (front + back, 각 level) — non-empty col segment 별 단일 beam
+    for (const zEdge of [0, rows]) {
+      const zPos = (zEdge - rows / 2) * bayD
+      const adjacentRow = zEdge === 0 ? 0 : rows - 1
+      for (let lv = 0; lv <= shelves; lv++) {
+        const yFrac = lv / shelves
+        const y = shelfBaseY + yFrac * shelfZone - beamH / 2 + (lv === 0 ? beamH : 0)
+        let segStart = -1
+        for (let col = 0; col <= cols; col++) {
+          const active = col < cols && !isEmpty(col, adjacentRow)
+          if (active && segStart === -1) segStart = col
+          if (!active && segStart !== -1) {
+            const startX = (segStart - cols / 2) * bayW
+            const endX = (col - cols / 2) * bayW
+            const beamLen = endX - startX
+            const beamCenterX = (startX + endX) / 2
+            const beam = new THREE.BoxGeometry(beamLen, beamH, beamH)
+            beam.translate(beamCenterX, y, zPos)
+            beamGeos.push(beam)
+            segStart = -1
+          }
+        }
+      }
+    }
 
-  createRacks() {
-    const { rotation = 0, shelfLocations, shelves = 1 } = this.component.state
+    // Z 축 beam (좌우 side) — *모든 level*, isEmpty row 제외 segment.
+    for (const xEdge of [0, cols]) {
+      const xPos = (xEdge - cols / 2) * bayW
+      const adjacentCol = xEdge === 0 ? 0 : cols - 1
+      for (let lv = 0; lv <= shelves; lv++) {
+        const yFrac = lv / shelves
+        const y = shelfBaseY + yFrac * shelfZone - beamH / 2 + (lv === 0 ? beamH : 0)
+        let segStart = -1
+        for (let row = 0; row <= rows; row++) {
+          const active = row < rows && !isEmpty(adjacentCol, row)
+          if (active && segStart === -1) segStart = row
+          if (!active && segStart !== -1) {
+            const startZ = (segStart - rows / 2) * bayD
+            const endZ = (row - rows / 2) * bayD
+            const beamLen = endZ - startZ
+            const beamCenterZ = (startZ + endZ) / 2
+            const beam = new THREE.BoxGeometry(beamH, beamH, beamLen)
+            beam.translate(xPos, y, beamCenterZ)
+            beamGeos.push(beam)
+            segStart = -1
+          }
+        }
+      }
+    }
 
-    this.object3d.rotation.y = -rotation
+    // 천장 (lv=shelves) 내부 cross beam — *isEmpty 영역 제외 segment*.
+    {
+      const lv = shelves
+      const yFrac = lv / shelves
+      const y = shelfBaseY + yFrac * shelfZone - beamH / 2 + (lv === 0 ? beamH : 0)
+
+      // 내부 col 경계 의 Z 축 beam (col 사이, Z 방향) — 인접 2 col 중 *해당 row* 가 non-empty
+      for (let xEdge = 1; xEdge < cols; xEdge++) {
+        const xPos = (xEdge - cols / 2) * bayW
+        let segStart = -1
+        for (let row = 0; row <= rows; row++) {
+          const active = row < rows && (!isEmpty(xEdge - 1, row) || !isEmpty(xEdge, row))
+          if (active && segStart === -1) segStart = row
+          if (!active && segStart !== -1) {
+            const startZ = (segStart - rows / 2) * bayD
+            const endZ = (row - rows / 2) * bayD
+            const beamLen = endZ - startZ
+            const beamCenterZ = (startZ + endZ) / 2
+            const beam = new THREE.BoxGeometry(beamH, beamH, beamLen)
+            beam.translate(xPos, y, beamCenterZ)
+            beamGeos.push(beam)
+            segStart = -1
+          }
+        }
+      }
 
-    const racks = (this.component as unknown as RackGrid).components
-      .map((cell: Component) => {
-        const { shelfLocations: shelfLoc = shelfLocations, isEmpty } = cell.state
+      // 내부 row 경계 의 X 축 beam (row 사이, X 방향) — 인접 2 row 중 *해당 col* 가 non-empty
+      for (let zEdge = 1; zEdge < rows; zEdge++) {
+        const zPos = (zEdge - rows / 2) * bayD
+        let segStart = -1
+        for (let col = 0; col <= cols; col++) {
+          const active = col < cols && (!isEmpty(col, zEdge - 1) || !isEmpty(col, zEdge))
+          if (active && segStart === -1) segStart = col
+          if (!active && segStart !== -1) {
+            const startX = (segStart - cols / 2) * bayW
+            const endX = (col - cols / 2) * bayW
+            const beamLen = endX - startX
+            const beamCenterX = (startX + endX) / 2
+            const beam = new THREE.BoxGeometry(beamLen, beamH, beamH)
+            beam.translate(beamCenterX, y, zPos)
+            beamGeos.push(beam)
+            segStart = -1
+          }
+        }
+      }
+    }
 
-        if (!isEmpty) {
-          cell.setState('shelfLocations', shelfLoc)
+    // ── 3. Shelf planes — *단일 InstancedMesh* (성능). 이전엔 cols × rows × shelves
+    //   개별 Mesh (각 draw call) — 큰 grid 에서 수천 draw call. 이제 1 mesh / 1 draw call.
+
+    const shelfW = Math.max(0, bayW - 2 * postW)
+    const shelfDD = Math.max(0, bayD - 2 * beamH)
+    if (shelfW > 0 && shelfDD > 0) {
+      const positions: Array<{ x: number; y: number; z: number }> = []
+      for (let col = 0; col < cols; col++) {
+        for (let row = 0; row < rows; row++) {
+          if (isEmpty(col, row)) continue
+          const bayCenterX = (col - cols / 2 + 0.5) * bayW
+          const bayCenterZ = (row - rows / 2 + 0.5) * bayD
+          for (let lv = 0; lv < shelves; lv++) {
+            const yFrac = lv / shelves
+            const y = shelfBaseY + yFrac * shelfZone + (lv === 0 ? beamH : 0)
+            positions.push({ x: bayCenterX, y, z: bayCenterZ })
+          }
+        }
+      }
+      if (positions.length > 0) {
+        const shelfGeo = new THREE.PlaneGeometry(shelfW, shelfDD)
+        shelfGeo.rotateX(-Math.PI / 2)
+        const shelfMesh = new THREE.InstancedMesh(shelfGeo, SHELF_MATERIAL, positions.length)
+        shelfMesh.receiveShadow = true
+        shelfMesh.frustumCulled = false
+        const m = new THREE.Matrix4()
+        const pos = new THREE.Vector3()
+        const q = new THREE.Quaternion()
+        const s = new THREE.Vector3(1, 1, 1)
+        for (let i = 0; i < positions.length; i++) {
+          pos.set(positions[i].x, positions[i].y, positions[i].z)
+          m.compose(pos, q, s)
+          shelfMesh.setMatrixAt(i, m)
+        }
+        shelfMesh.instanceMatrix.needsUpdate = true
+        shelfMesh.computeBoundingSphere()
+        this.object3d.add(shelfMesh)
+      }
+    }
 
-          const rack = new Rack(cell)
-          cell._realObject = rack // 중복 생성 방지: addObject 재귀에서 skip
+    // ── Merge — post + beam ─────────────────────────────────
 
-          rack.update()
-          this.object3d.add(rack.object3d)
+    if (postGeos.length > 0) {
+      const merged = BufferGeometryUtils.mergeGeometries(postGeos)
+      const mesh = new THREE.Mesh(merged, POST_MATERIAL)
+      mesh.castShadow = true
+      mesh.receiveShadow = true
+      this._frameGroup!.add(mesh)
+    }
 
-          return rack
-        }
-        return
-      })
-      .filter((rack: any): rack is Rack => !!rack)
+    if (beamGeos.length > 0) {
+      const merged = BufferGeometryUtils.mergeGeometries(beamGeos)
+      const mesh = new THREE.Mesh(merged, BEAM_MATERIAL)
+      mesh.castShadow = true
+      mesh.receiveShadow = true
+      this._beamGroup!.add(mesh)
+    }
 
-    this.mergeAndAddRackCommonObjects(racks)
+    // ── 4. Stock InstancedMesh — state.data 의 record + hideEmptyStock 분기 ────
+    this.rebuildStockMesh()
   }
 
-  mergeAndAddRackCommonObjects(racks: Rack[]) {
-    const framesGeometries: THREE.BufferGeometry[] = []
-    const boardsGeometries: THREE.BufferGeometry[] = []
+  // ── Stock visualization ─────────────────────────────────
 
-    if (racks.length > 0) {
-      racks.forEach(rack => {
-        const geometry = rack.frame
+  private _stockMesh?: THREE.InstancedMesh       // record 있는 stock (불투명, 색)
+  private _emptyStockMesh?: THREE.InstancedMesh  // record 없는 stock (반투명 회색)
 
-        if (!geometry) {
-          return
-        }
-
-        geometry.translate(rack.position.x, rack.position.y, rack.position.z)
-        geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z)
-        framesGeometries.push(geometry)
-      })
+  /** Public — 후속 click 핸들러 사용. */
+  get stockMesh(): THREE.InstancedMesh | undefined {
+    return this._stockMesh
+  }
 
-      if (framesGeometries.length > 0) {
-        const frameMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(framesGeometries), this.createFrameMaterial())
-        this.object3d.add(frameMesh)
-      }
+  /**
+   * Stock 시각화 (Plan A — InstancedMesh batched).
+   *   - hideEmptyStock=true  : state.data 의 record 있는 cell 만 instance
+   *   - hideEmptyStock=false : *모든 (non-isEmpty bay) cell × shelf* 에 instance.
+   *                            record 있으면 default 색, 없으면 *백색 반투명*.
+   */
+  rebuildStockMesh(): void {
+    // 기존 두 mesh 모두 제거
+    if (this._stockMesh) {
+      this.object3d.remove(this._stockMesh)
+      this._stockMesh.dispose?.()
+      this._stockMesh = undefined
+    }
+    if (this._emptyStockMesh) {
+      this.object3d.remove(this._emptyStockMesh)
+      this._emptyStockMesh.dispose?.()
+      this._emptyStockMesh = undefined
+    }
 
-      racks.forEach(rack => {
-        const geometry = rack.board
+    const comp = this.component as unknown as RackGrid
+    const rs: any = comp.state
+    const cols = comp.columns
+    const rows = comp.rackRows
+    const shelves = comp.shelves
+    const width = (rs?.width as number) ?? 400
+    const height = (rs?.depth as number) ?? 2000
+    const depth = (rs?.height as number) ?? 200
+    const shelfBase = Math.max(0, Math.min((rs?.shelfBaseHeight as number) || 0, height * 0.9))
+    const shelfZone = height - shelfBase
+    const bayW = width / cols
+    const bayD = depth / rows
+    const cellY = shelfZone / shelves
+    const baseY = -height / 2
+    const shelfBaseY = baseY + shelfBase
+
+    const stockW = bayW * 0.85
+    const stockD = cellY * 0.7
+    const stockH = bayD * 0.85
+
+    const records = comp.records
+    const recordsByCell = new Map<string, any>()
+    for (const r of records) {
+      if (r?.cellId) recordsByCell.set(r.cellId, r)
+    }
 
-        if (!geometry) {
-          return
+    const hideEmpty = !!rs?.hideEmptyStock
+
+    // 두 그룹 분리: record 있는 stock (불투명, 색) vs empty stock (반투명 회색)
+    const filled: Array<{ col: number; row: number; shelf: number; record: any }> = []
+    const empties: Array<{ col: number; row: number; shelf: number }> = []
+
+    for (let col = 0; col < cols; col++) {
+      for (let row = 0; row < rows; row++) {
+        if (comp.isBayEmpty(col, row)) continue
+        for (let shelf = 0; shelf < shelves; shelf++) {
+          const cellId = `${col}-${row}-${shelf}`
+          const record = recordsByCell.get(cellId)
+          if (record) {
+            filled.push({ col, row, shelf, record })
+          } else if (!hideEmpty) {
+            empties.push({ col, row, shelf })
+          }
         }
+      }
+    }
 
-        geometry.translate(rack.position.x, rack.position.y, rack.position.z)
-        geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z)
-        boardsGeometries.push(geometry)
-      })
-
-      if (boardsGeometries.length > 0) {
-        const material = Rack.boardMaterial
-        material.opacity = 0.5
-        material.transparent = true
+    const matrixFor = (col: number, row: number, shelf: number, target: THREE.Matrix4) => {
+      const cx = (col - cols / 2 + 0.5) * bayW
+      const cellBottomY = shelfBaseY + shelf * cellY
+      const cy = cellBottomY + stockD / 2
+      const cz = (row - rows / 2 + 0.5) * bayD
+      target.compose(new THREE.Vector3(cx, cy, cz), new THREE.Quaternion(), new THREE.Vector3(1, 1, 1))
+    }
 
-        const boardMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(boardsGeometries), material)
+    // ── 1. Filled stock — 불투명, legend/default 색 ──────
+    if (filled.length > 0) {
+      const STOCK_COLOR_DEFAULT = '#c8a878'   // cardboard
+      const geo = new THREE.BoxGeometry(stockW, stockD, stockH)
+      const mesh = new THREE.InstancedMesh(geo, STOCK_MATERIAL, filled.length)
+      mesh.frustumCulled = false
+      mesh.userData.context = this
+      mesh.userData._records = filled.map(i => i.record)
+
+      const m = new THREE.Matrix4()
+      const c = new THREE.Color()
+      for (let i = 0; i < filled.length; i++) {
+        const { col, row, shelf, record } = filled[i]
+        matrixFor(col, row, shelf, m)
+        mesh.setMatrixAt(i, m)
+        const resolved = (comp as any).resolveLegendColor?.(record) ?? STOCK_COLOR_DEFAULT
+        c.set(resolved)
+        mesh.setColorAt(i, c)
+      }
+      mesh.instanceMatrix.needsUpdate = true
+      if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true
+      mesh.computeBoundingSphere()
+      mesh.computeBoundingBox?.()
+      this.object3d.add(mesh)
+      this._stockMesh = mesh
+    }
 
-        this.object3d.add(boardMesh)
+    // ── 2. Empty stock — 반투명 회색 (hideEmptyStock=off 시만) ────
+    if (empties.length > 0) {
+      const geo = new THREE.BoxGeometry(stockW, stockD, stockH)
+      const mesh = new THREE.InstancedMesh(geo, EMPTY_STOCK_MATERIAL, empties.length)
+      mesh.frustumCulled = false
+      mesh.userData.context = this
+
+      const m = new THREE.Matrix4()
+      for (let i = 0; i < empties.length; i++) {
+        const { col, row, shelf } = empties[i]
+        matrixFor(col, row, shelf, m)
+        mesh.setMatrixAt(i, m)
       }
+      mesh.instanceMatrix.needsUpdate = true
+      mesh.computeBoundingSphere()
+      mesh.computeBoundingBox?.()
+      this.object3d.add(mesh)
+      this._emptyStockMesh = mesh
     }
   }
 
   dispose() {
-    this._frameMaterial?.dispose()
-    this._frameMaterial = undefined
-
+    // Material 은 module-level singleton 이라 dispose 안 함 (전체 application
+    // lifecycle 동안 살아있음). InstancedMesh / Group 의 geometry 만 정리.
+    if (this._stockMesh) {
+      this.object3d.remove(this._stockMesh)
+      this._stockMesh.dispose?.()
+      this._stockMesh = undefined
+    }
+    if (this._emptyStockMesh) {
+      this.object3d.remove(this._emptyStockMesh)
+      this._emptyStockMesh.dispose?.()
+      this._emptyStockMesh = undefined
+    }
     super.dispose()
   }