@fmsim/machine 2.0.0-beta.3 → 2.0.0-beta.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fmsim/machine",
   "description": "Layout View를 구성하는 설비(machine)들과 유닛을 구현한 모듈입니다.",
   "author": "heartyoh",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -54,5 +54,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "29cf1d4f43eb48dc030aaeb188f2dce65ecff95f"
+  "gitHead": "522cb3abab43f7a3c8850cab80d1b9187d6447d6"
 }

package/src/factories/machine-3d.ts

@@ -11,6 +11,8 @@
 import * as THREE from 'three'
 import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
+import { LEGEND_CAPACITY } from '../features/mcs-status-default'
+import { getVaueOnRanges } from '../utils/get-value-on-ranges'
 
 // ── 설정 타입 ────────────────────────────────────────────
 
@@ -62,7 +64,7 @@ class MCSRealObject3D extends RealObjectGroup {
   }
 
   // width, height 절대값 (음수 값은 양수로 취급)
-  private get absSize(): { w: number; h: number } {
+  protected get absSize(): { w: number; h: number } {
     const { width = 10, height = 10 } = this.component.state
     return { w: Math.abs(width), h: Math.abs(height) }
   }
@@ -269,7 +271,7 @@ function register(type: string, overrides: Partial<MCS3DConfig> = {}) {
 
 register('Equipment', {
   defaultDepth: 3 * TRANSPORT_SURFACE_HEIGHT,
-  opacity: 0.5,
+  opacity: 0.75,
   metalness: 0.4,
   roughness: 0.6,
   defaultColor: 0x8899aa,
@@ -277,7 +279,7 @@ register('Equipment', {
 
 register('Buffer', {
   defaultDepth: TRANSPORT_SURFACE_HEIGHT,
-  opacity: 0.5,
+  opacity: 1.0,
   metalness: 0.3,
   roughness: 0.7,
   defaultColor: 0x99aa88,
@@ -298,13 +300,184 @@ register('OHTLine', {
   defaultColor: 0x888899,
 })
 
-register('STOCKER', {
+// STOCKER: 벽면에 용량 게이지 바를 포함하는 커스텀 3D 오브젝트
+const STOCKER_CONFIG: MCS3DConfig = {
+  ...DEFAULTS,
   defaultDepth: 5 * TRANSPORT_SURFACE_HEIGHT,
-  opacity: 0.35,
+  opacity: 0.75,
   metalness: 0.3,
   roughness: 0.6,
   defaultColor: 0x8899bb,
-})
+}
+
+class StockerRealObject3D extends MCSRealObject3D {
+  private gaugeMesh?: THREE.Mesh
+
+  constructor(component: Component) {
+    super(component, STOCKER_CONFIG)
+  }
+
+  build() {
+    super.build()
+    this.buildGauge()
+  }
+
+  private buildGauge() {
+    const comp = this.component as any
+    const data = comp.data || {}
+    const gaugeMode = comp.root?.style?.stockerGaugeMode || 'capacity'
+
+    const gauge = this.resolveGauge(data, gaugeMode)
+
+    // 테두리는 스토커의 상태 색상 (machine status)
+    const statusColor = comp.statusColor
+    if (statusColor && statusColor.toUpperCase() !== '#F0F0F0') {
+      gauge.borderColor = statusColor
+    }
+
+    const { w, h } = this.absSize
+    const depth = this.effectiveDepth
+    const isWidthLonger = w >= h
+
+    // 게이지 캔버스 (고해상도)
+    const barW = 130
+    const barH = 26
+    const scale = 4
+    const canvasW = barW * scale
+    const canvasH = barH * scale
+    const canvas = document.createElement('canvas')
+    canvas.width = canvasW
+    canvas.height = canvasH
+    const ctx = canvas.getContext('2d')!
+
+    const pad = 12
+
+    // 배경 + 테두리
+    ctx.fillStyle = '#dddddd'
+    ctx.fillRect(0, 0, canvasW, canvasH)
+    ctx.strokeStyle = gauge.borderColor
+    ctx.lineWidth = 12
+    ctx.strokeRect(6, 6, canvasW - 12, canvasH - 12)
+
+    // 세그먼트 채움 (왼→오)
+    const innerW = canvasW - pad * 2
+    const innerH = canvasH - pad * 2
+    let x = pad
+    for (const seg of gauge.segments) {
+      const segW = Math.max(innerW * seg.ratio, seg.ratio > 0 ? 1 : 0)
+      if (segW <= 0) continue
+      ctx.fillStyle = seg.color
+      ctx.fillRect(x, pad, segW, innerH)
+      x += segW
+    }
+
+    // 텍스트
+    ctx.font = `bold ${10 * scale}px sans-serif`
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillStyle = '#333333'
+    ctx.fillText(gauge.label, canvasW / 2, canvasH / 2)
+
+    // 텍스처 → Plane
+    const texture = new THREE.CanvasTexture(canvas)
+    texture.colorSpace = THREE.SRGBColorSpace
+
+    const geo = new THREE.PlaneGeometry(barW, barH)
+    geo.rotateX(-Math.PI / 2) // 수평 (지붕 위)
+    if (!isWidthLonger) geo.rotateY(Math.PI / 2)
+
+    const mat = new THREE.MeshBasicMaterial({
+      map: texture,
+      transparent: true,
+      side: THREE.DoubleSide,
+    })
+    mat.polygonOffset = true
+    mat.polygonOffsetFactor = -2
+    mat.polygonOffsetUnit = -2
+
+    this.gaugeMesh = new THREE.Mesh(geo, mat)
+    this.gaugeMesh.position.set(0, depth + 0.5, 0)
+    this.object3d.add(this.gaugeMesh)
+  }
+
+  private resolveGauge(data: any, mode: string) {
+    switch (mode) {
+      case 'carrier': {
+        const full = Number(data.FULL_CNT) || 0
+        const empty = Number(data.EMPTY_CNT) || 0
+        const emptyEmpty = Number(data.EMPTYEMPTY_CNT) || 0
+        const total = full + empty + emptyEmpty
+        const segments = total > 0
+          ? [
+              { ratio: full / total, color: '#4AA7FE' },
+              { ratio: empty / total, color: '#8BDA5B' },
+              { ratio: emptyEmpty / total, color: '#019D59' },
+            ]
+          : [{ ratio: 1, color: '#dddddd' }]
+        return {
+          segments,
+          borderColor: '#4AA7FE',
+          label: total > 0 ? `F${full} E${empty} EE${emptyEmpty}` : '',
+        }
+      }
+      case 'abnormal': {
+        const normal = Number(data.CARRIER_NORMAL) || 0
+        const abnormal = Number(data.CARRIER_ABNORMAL) || 0
+        const total = normal + abnormal
+        const segments = total > 0
+          ? [
+              { ratio: normal / total, color: '#8BDA5B' },
+              { ratio: abnormal / total, color: '#F4B4B4' },
+            ]
+          : [{ ratio: 1, color: '#dddddd' }]
+        return {
+          segments,
+          borderColor: abnormal > 0 ? '#F4B4B4' : '#8BDA5B',
+          label: total > 0 ? `N${normal} A${abnormal}` : '',
+        }
+      }
+      default: { // capacity
+        const cur = Number(data.CURRENTCAPACITY) || 0
+        const max = Number(data.MAXCAPACITY) || 100
+        const fullup = data.FULLUP === 'T'
+        const usage = Math.round((cur / max) * 100)
+        const legend = (this.component as any).root?.style?.LEGEND_CAPACITY || LEGEND_CAPACITY
+        const color = fullup ? 'red' : (getVaueOnRanges(usage, legend) || '#44aa44')
+        return {
+          segments: [{ ratio: usage / 100, color }],
+          borderColor: color,
+          label: `${usage}%`,
+        }
+      }
+    }
+  }
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if ('data' in after) {
+      this.clearGauge()
+      this.buildGauge()
+    }
+    super.onchange(after, before)
+  }
+
+  clear() {
+    this.clearGauge()
+    return super.clear()
+  }
+
+  private clearGauge() {
+    if (this.gaugeMesh) {
+      this.object3d.remove(this.gaugeMesh)
+      this.gaugeMesh.geometry?.dispose()
+      const mat = this.gaugeMesh.material as THREE.MeshBasicMaterial
+      mat?.map?.dispose()
+      mat?.dispose()
+      this.gaugeMesh = undefined
+    }
+  }
+}
+
+registerRealObjectFactory('STOCKER', (component: Component) => new StockerRealObject3D(component))
 
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 //  Unit (이동체 · 홀더) — 낮은 depth, 불투명
@@ -339,23 +512,12 @@ register('Carrier', {
 //  Gauge (용량 게이지) — 얇은 바
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-register('ZoneCapacityBar', {
-  depthRatio: 0.15,
-  metalness: 0.2,
-  roughness: 0.8,
-  defaultColor: 0x44aa44,
-})
-
-register('StockerCapacityBar', {
-  depthRatio: 0.15,
-  metalness: 0.2,
-  roughness: 0.8,
-  defaultColor: 0x44aa44,
-})
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  Gauge (용량 게이지) — 2D 렌더링을 Plane 텍스처로 3D 표시
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-register('MCSGaugeCapacityBar', {
-  depthRatio: 0.15,
-  metalness: 0.2,
-  roughness: 0.8,
-  defaultColor: 0x44aa44,
-})
+// Gauge 컴포넌트 (StockerCapacityBar, ZoneCapacityBar, MCSGaugeCapacityBar)는
+// 3D에서 표시하지 않음. 대신 부모(STOCKER 등)의 3D 모델에서 직접 게이지를 렌더링.
+registerRealObjectFactory('StockerCapacityBar', () => null as any)
+registerRealObjectFactory('MCSGaugeCapacityBar', () => null as any)
+registerRealObjectFactory('ZoneCapacityBar', () => null as any)