@fmsim/machine 1.0.88 → 2.0.0-beta.100

package/src/scene/root-container-override.ts

@@ -1,6 +1,7 @@
 import { Component, RootContainer } from '@hatiolab/things-scene'
 import { themesColorMap, themesColorRange, themesAnimationMap } from '@fmsim/api'
 import { Legend } from '../features/mcs-status-default'
+import CarrierManager from '../carrier-manager'
 
 // RootContainer 클래스 타입 확장
 declare module '@hatiolab/things-scene' {
@@ -22,14 +23,31 @@ declare module '@hatiolab/things-scene' {
     craneLegendTheme?: any
     shelfLegendTheme?: any
     equipmentLegendTheme?: any
-    style: { [key: string]: any | Legend }
+    style: any
     vehicleAnimation?: boolean
+    // 스토커 게이지 표시 모드 — 런타임 전용 transient (모델 비저장, 항상 'capacity' 시작)
+    stockerGaugeMode: string
+    _stockerGaugeMode?: string
+    _refreshStockerGauges(): void
     // 캐시 관련 속성 추가
     _animationConfigCache?: Map<string, any>
+    _carrierManager?: CarrierManager
+    carrierManager: CarrierManager
   }
 }
 
-const ModelLayer = Component.register('model-layer') as any
+/**
+ * 스토커 적재율 게이지 표시 모드 — 런타임 선택지.
+ * value 는 엔진 canonical(2D StockerCapacityBar / 3D buildGauge 공통), label 은 표시명.
+ * 런타임 UI(뷰어 컨트롤)가 이 목록으로 selector 를 구성한다.
+ */
+export const STOCKER_GAUGE_MODES: { value: string; label: string }[] = [
+  { value: 'capacity', label: 'Capacity' },
+  { value: 'carrier', label: 'Carrier Status' },
+  { value: 'abnormal', label: 'Abnormal Carrier' }
+]
+
+const ModelLayer = (Component as any).register('model-layer') as any
 
 Object.defineProperty(ModelLayer.prototype, 'nature', {
   get: function () {
@@ -194,6 +212,22 @@ Object.defineProperty(ModelLayer.prototype, 'nature', {
           property: {
             options: themesColorRange
           }
+        },
+        {
+          type: 'legend',
+          label: '',
+          name: 'MOOD',
+          property: {
+            label: 'MOOD'
+          }
+        },
+        {
+          type: 'select',
+          label: 'light-preset',
+          name: 'lightPreset',
+          property: {
+            options: ['dark', 'medium', 'bright']
+          }
         }
       ],
       'value-property': 'text'
@@ -201,128 +235,145 @@ Object.defineProperty(ModelLayer.prototype, 'nature', {
   }
 })
 
-Object.defineProperty(RootContainer.prototype, 'equipmentLegendTheme', {
-  get: function () {
-    const { equipmentLegendName } = this.rootModel.state
-    return equipmentLegendName && this.state.style[equipmentLegendName]
-  }
-})
-
-Object.defineProperty(RootContainer.prototype, 'bufferLegendTheme', {
-  get: function () {
-    const { bufferLegendName } = this.rootModel.state
-    return bufferLegendName && this.state.style[bufferLegendName]
-  }
-})
-
-Object.defineProperty(RootContainer.prototype, 'agvlineLegendTheme', {
-  get: function () {
-    const { agvlineLegendName } = this.rootModel.state
-    return agvlineLegendName && this.state.style[agvlineLegendName]
-  }
-})
-
-Object.defineProperty(RootContainer.prototype, 'ohtlineLegendTheme', {
-  get: function () {
-    const { ohtlineLegendName } = this.rootModel.state
-    return ohtlineLegendName && this.state.style[ohtlineLegendName]
-  }
-})
-
-Object.defineProperty(RootContainer.prototype, 'conveyorLegendTheme', {
-  get: function () {
-    const { conveyorLegendName } = this.rootModel.state
-    return conveyorLegendName && this.state.style[conveyorLegendName]
-  }
-})
-
-Object.defineProperty(RootContainer.prototype, 'stokerLegendTheme', {
-  get: function () {
-    const { stokerLegendName } = this.rootModel.state
-    return stokerLegendName && this.state.style[stokerLegendName]
-  }
-})
-
-Object.defineProperty(RootContainer.prototype, 'agvLegendTheme', {
-  get: function () {
-    const { agvLegendName } = this.rootModel.state
-    return agvLegendName && this.state.style[agvLegendName]
-  }
-})
-
-Object.defineProperty(RootContainer.prototype, 'ohtLegendTheme', {
-  get: function () {
-    const { ohtLegendName } = this.rootModel.state
-    return ohtLegendName && this.state.style[ohtLegendName]
-  }
-})
-
-Object.defineProperty(RootContainer.prototype, 'shuttleLegendTheme', {
-  get: function () {
-    const { shuttleLegendName } = this.rootModel.state
-    return shuttleLegendName && this.state.style[shuttleLegendName]
-  }
-})
+/**
+ * 조명 프리셋 — 3 단계 밝기 토글.
+ *
+ * fmsim 은 디테일 조명 옵션 UI 를 노출하지 않으므로 단일 select 로 단순화.
+ * medium = things-scene 의 현재 default 값과 동일 (외관 변화 없음).
+ * 사용자가 select 변경 시 onchange 가 exposure + hemiIntensity + dirLightIntensity
+ * 를 일괄 set → three-capability 의 변경 감지 핸들러가 즉시 갱신.
+ */
+const LIGHT_PRESETS: Record<string, { exposure: number; hemiIntensity: number; dirLightIntensity: number }> = {
+  dark: { exposure: 1.2, hemiIntensity: 4.0, dirLightIntensity: 0.6 },
+  medium: { exposure: 1.2, hemiIntensity: 4.0, dirLightIntensity: 2.0 },
+  bright: { exposure: 1.2, hemiIntensity: 4.0, dirLightIntensity: 5.0 }
+}
 
-Object.defineProperty(RootContainer.prototype, 'craneLegendTheme', {
-  get: function () {
-    const { craneLegendName } = this.rootModel.state
-    return craneLegendName && this.state.style[craneLegendName]
+const _origModelLayerOnchange = ModelLayer.prototype.onchange
+ModelLayer.prototype.onchange = function (after: any) {
+  if (after && Object.prototype.hasOwnProperty.call(after, 'lightPreset')) {
+    const preset = LIGHT_PRESETS[after.lightPreset as string]
+    if (preset) {
+      this.set({
+        exposure: preset.exposure,
+        hemiIntensity: preset.hemiIntensity,
+        dirLightIntensity: preset.dirLightIntensity
+      })
+    }
   }
-})
+  return _origModelLayerOnchange.call(this, after)
+}
 
-Object.defineProperty(RootContainer.prototype, 'shelfLegendTheme', {
-  get: function () {
-    const { shelfLegendName } = this.rootModel.state
-    return shelfLegendName && this.state.style[shelfLegendName]
-  }
-})
+// === LegendTheme / AnimationTheme value resolve ===
+//
+// rootModel.state.style[name] 에 저장된 legend/animation 값은 보드 직렬화
+// 형태에 따라 (a) 정상 object 또는 (b) JSON 문자열 둘 다로 나타난다 (2026-06-09
+// 진단 — consumer 인 carrier.ts:animationPreset 이 같은 이유로 typeof string
+// 분기 + JSON5.parse 처리하는 선례 존재). LegendTheme getter 들이 이 분기를
+// 두지 않아 string 통과 → getValueOnRanges 매칭 실패 → 3D gauge 의 색상이
+// fallback 으로만 결정되던 증상.
+//
+// fix 는 getter 한 곳에서 lazy parse. WeakMap<state, Map<rawString, parsed>>
+// 으로 *raw string 자체를 key* — 보드 편집으로 raw 가 바뀌면 자연 무효화,
+// 같은 raw 의 반복 lookup 은 O(1). root 가 GC 되면 cache 도 같이 GC.
+const _legendParseCache = new WeakMap<object, Map<string, any>>()
 
-Object.defineProperty(RootContainer.prototype, 'portLegendTheme', {
-  get: function () {
-    const { portLegendName } = this.rootModel.state
-    return portLegendName && this.state.style[portLegendName]
+function parseLegendIfString(state: any, raw: any): any {
+  if (typeof raw !== 'string') return raw
+  let cache = _legendParseCache.get(state)
+  if (!cache) {
+    cache = new Map()
+    _legendParseCache.set(state, cache)
   }
-})
+  if (cache.has(raw)) return cache.get(raw)
+  let parsed: any
+  try { parsed = JSON.parse(raw) } catch { parsed = raw } // parse 실패 시 raw 보존
+  cache.set(raw, parsed)
+  return parsed
+}
 
-Object.defineProperty(RootContainer.prototype, 'carrierLegendTheme', {
-  get: function () {
-    const { carrierLegendName } = this.rootModel.state
-    return carrierLegendName && this.state.style[carrierLegendName]
+function legendThemeGetter(stateKey: string) {
+  return function (this: any) {
+    const name = this.rootModel.state[stateKey]
+    const raw = name && this.state.style[name]
+    return parseLegendIfString(this.state, raw)
   }
-})
+}
 
-Object.defineProperty(RootContainer.prototype, 'carrierAnimationTheme', {
-  get: function () {
-    const { carrierAnimationName } = this.rootModel.state
-    return carrierAnimationName && this.state.style[carrierAnimationName]
-  }
-})
+Object.defineProperty(RootContainer.prototype, 'equipmentLegendTheme', { get: legendThemeGetter('equipmentLegendName') })
+Object.defineProperty(RootContainer.prototype, 'bufferLegendTheme', { get: legendThemeGetter('bufferLegendName') })
+Object.defineProperty(RootContainer.prototype, 'agvlineLegendTheme', { get: legendThemeGetter('agvlineLegendName') })
+Object.defineProperty(RootContainer.prototype, 'ohtlineLegendTheme', { get: legendThemeGetter('ohtlineLegendName') })
+Object.defineProperty(RootContainer.prototype, 'conveyorLegendTheme', { get: legendThemeGetter('conveyorLegendName') })
+Object.defineProperty(RootContainer.prototype, 'stokerLegendTheme', { get: legendThemeGetter('stokerLegendName') })
+Object.defineProperty(RootContainer.prototype, 'agvLegendTheme', { get: legendThemeGetter('agvLegendName') })
+Object.defineProperty(RootContainer.prototype, 'ohtLegendTheme', { get: legendThemeGetter('ohtLegendName') })
+Object.defineProperty(RootContainer.prototype, 'shuttleLegendTheme', { get: legendThemeGetter('shuttleLegendName') })
+Object.defineProperty(RootContainer.prototype, 'craneLegendTheme', { get: legendThemeGetter('craneLegendName') })
+Object.defineProperty(RootContainer.prototype, 'shelfLegendTheme', { get: legendThemeGetter('shelfLegendName') })
+Object.defineProperty(RootContainer.prototype, 'portLegendTheme', { get: legendThemeGetter('portLegendName') })
+Object.defineProperty(RootContainer.prototype, 'carrierLegendTheme', { get: legendThemeGetter('carrierLegendName') })
+Object.defineProperty(RootContainer.prototype, 'carrierAnimationTheme', { get: legendThemeGetter('carrierAnimationName') })
+Object.defineProperty(RootContainer.prototype, 'stockerCapacityLegendTheme', { get: legendThemeGetter('stockerCapacityLegendName') })
+Object.defineProperty(RootContainer.prototype, 'zoneCapacityLegendTheme', { get: legendThemeGetter('zoneCapacityLegendName') })
+Object.defineProperty(RootContainer.prototype, 'batteryRateLegendTheme', { get: legendThemeGetter('batteryRateLegendName') })
 
-Object.defineProperty(RootContainer.prototype, 'stockerCapacityLegendTheme', {
+Object.defineProperty(RootContainer.prototype, 'vehicleAnimation', {
   get: function () {
-    const { stockerCapacityLegendName } = this.rootModel.state
-    return stockerCapacityLegendName && this.state.style[stockerCapacityLegendName]
+    const { vehicleAnimation } = this.rootModel.state
+    return !!vehicleAnimation
   }
 })
 
-Object.defineProperty(RootContainer.prototype, 'zoneCapacityLegendTheme', {
+Object.defineProperty(RootContainer.prototype, 'carrierManager', {
   get: function () {
-    const { zoneCapacityLegendName } = this.rootModel.state
-    return zoneCapacityLegendName && this.state.style[zoneCapacityLegendName]
+    if (!this._carrierManager) {
+      this._carrierManager = new CarrierManager(this)
+    }
+    return this._carrierManager
   }
 })
 
-Object.defineProperty(RootContainer.prototype, 'batteryRateLegendTheme', {
+// === 스토커 게이지 표시 모드 (런타임 전용 transient) ===
+//
+// 모델(state)에 저장하지 않는다 — nature 속성이 아니므로 보드 직렬화에 포함되지 않고,
+// 보드를 다시 열면 항상 기본값 'capacity' 로 시작한다. 실행 중 뷰어 컨트롤 등이
+// `scene.rootContainer.stockerGaugeMode = 'carrier'` 로 동적 변경한다.
+// (주의: scene.root 은 model_layer 라 override 가 없다. 반드시 rootContainer 에 설정.
+//  컴포넌트의 this.root 는 RootContainer(isRoot)로 해석되어 이 값을 읽는다.)
+//
+// 2D(StockerCapacityBar.gaugeMode) 와 3D(machine-3d buildGauge) 가 모두 이 값을 읽어
+// 게이지 표현이 항상 일치한다. 값이 바뀌면 setter 가 2D 리드로우 + 3D 게이지 재빌드를
+// 즉시 트리거한다.
+Object.defineProperty(RootContainer.prototype, 'stockerGaugeMode', {
   get: function () {
-    const { batteryRateLegendName } = this.rootModel.state
-    return batteryRateLegendName && this.state.style[batteryRateLegendName]
+    return this._stockerGaugeMode || 'capacity'
+  },
+  set: function (mode: string) {
+    const next = mode || 'capacity'
+    if (this._stockerGaugeMode === next) return
+    this._stockerGaugeMode = next
+    this._refreshStockerGauges()
   }
 })
 
-Object.defineProperty(RootContainer.prototype, 'vehicleAnimation', {
-  get: function () {
-    const { vehicleAnimation } = this.rootModel.state
-    return !!vehicleAnimation
+/** scene 하위 STOCKER(3D 게이지) + StockerCapacityBar(2D 게이지) 를 새 모드로 갱신. */
+RootContainer.prototype._refreshStockerGauges = function () {
+  const walk = (container: any) => {
+    const kids = container?.components
+    if (!Array.isArray(kids)) return
+    for (const c of kids) {
+      const type = c?.state?.type
+      if (type === 'STOCKER') {
+        // 3D 게이지는 스토커 자신의 real-object 가 그린다 → 재빌드 (2D 모드면 _realObject 없음)
+        c._realObject?.update?.()
+      } else if (type === 'StockerCapacityBar' || type === 'MCSGaugeCapacityBar') {
+        // 2D 게이지는 자식 컴포넌트가 그린다 → 리드로우
+        c.invalidate?.()
+      }
+      walk(c)
+    }
   }
-})
+  walk(this)
+  this.invalidate?.()
+}

package/src/shelf.ts

@@ -19,8 +19,13 @@ export default class Shelf extends MCSZoneMixin(MCSCarrierHolder) {
     return 'black'
   }
 
+  /** Shelf 의 parentObject 는 STOCKER. */
+  get parentObjectTypes(): string[] {
+    return ['STOCKER']
+  }
+
   getLegendFallback() {
-    return this.root.shelfLegendTheme || super.getLegendFallback()
+    return (this.root as any).shelfLegendTheme || super.getLegendFallback()
   }
 
   render(ctx: CanvasRenderingContext2D) {

package/src/shuttle.ts

@@ -20,7 +20,7 @@ export default class Shuttle extends MCSVehicle {
   }
 
   getLegendFallback() {
-    return this.root.shuttleLegendTheme || super.getLegendFallback()
+    return (this.root as any).shuttleLegendTheme || super.getLegendFallback()
   }
 
   render(ctx: CanvasRenderingContext2D) {

package/src/static-container.ts

@@ -13,6 +13,11 @@ const NATURE = {
 
 @sceneComponent('container')
 export default class StaticContainer extends Container {
+  // things-scene 의 `declare const Container_base` 패턴이 base 인스턴스 타입의 accessor
+  // 정보를 object-type property 로 평탄화하여 TS2611 발생. operato-scene 은 position
+  // override 케이스가 없어 미발현, fmsim 만 해당. things-scene 측 mixin 타입 패턴이
+  // 개선되면 제거.
+  // @ts-expect-error TS2611
   get position() {
     return 'static'
   }

package/src/stocker-abnormal-bar.ts

@@ -0,0 +1,247 @@
+import {
+  Component,
+  ComponentNature,
+  POSITION,
+  RectPath,
+  Shape,
+  sceneComponent
+} from '@hatiolab/things-scene'
+import { safeRound } from './utils/safe-round'
+import { ParentObjectMixin, ParentObjectMixinProperties } from './features/parent-object-mixin'
+
+/**
+ * 캐리어 ID 정상/비정상 비율 게이지 (Normal / Abnormal)
+ *
+ * 스토커에 보관된 캐리어들의 정상/비정상 비율을 세그먼트 게이지로 표시한다.
+ * Portrait(세로) 모드에서는 아래→위, Landscape(가로) 모드에서는 왼→오 방향으로 채운다.
+ */
+
+interface Segment {
+  label: string
+  count: number
+  ratio: number
+  color: string
+}
+
+const COLOR_NORMAL = '#8BDA5B'
+const COLOR_ABNORMAL = '#F4B4B4'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    ...ParentObjectMixinProperties,
+    {
+      type: 'number',
+      name: 'carrierNormal',
+      label: 'carrier-normal'
+    },
+    {
+      type: 'number',
+      name: 'carrierAbnormal',
+      label: 'carrier-abnormal'
+    },
+    {
+      type: 'number',
+      label: 'round',
+      name: 'round',
+      property: {
+        min: 0
+      }
+    }
+  ]
+}
+
+var controlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: Component) {
+    var { left, top, width, height } = component.model
+
+    var transcoorded = component.transcoordP2S(point.x, point.y)
+    var round = ((transcoorded.x - left) / (width / 2)) * 100
+
+    round = safeRound(round, width, height)
+
+    component.set({ round })
+  }
+}
+
+@sceneComponent('StockerAbnormalBar')
+export default class StockerAbnormalBar extends ParentObjectMixin(RectPath(Shape)) {
+  static get nature() {
+    return NATURE
+  }
+
+  /** StockerAbnormalBar 의 parentObject 는 STOCKER. */
+  get parentObjectTypes(): string[] {
+    return ['STOCKER']
+  }
+
+  get controls() {
+    var { left, top, width, round, height } = this.state
+    round = round == undefined ? 0 : safeRound(round, width, height)
+
+    return [
+      {
+        x: left + (width / 2) * (round / 100),
+        y: top,
+        handler: controlHandler
+      }
+    ]
+  }
+
+  isIdentifiable() {
+    return false
+  }
+
+  get segments(): Segment[] {
+    const { carrierNormal = 0, carrierAbnormal = 0 } = this.state
+    const total = carrierNormal + carrierAbnormal
+
+    if (total === 0) {
+      return [
+        { label: 'Normal', count: 0, ratio: 0, color: COLOR_NORMAL },
+        { label: 'Abnormal', count: 0, ratio: 0, color: COLOR_ABNORMAL }
+      ]
+    }
+
+    return [
+      { label: 'Normal', count: carrierNormal, ratio: carrierNormal / total, color: COLOR_NORMAL },
+      { label: 'Abnormal', count: carrierAbnormal, ratio: carrierAbnormal / total, color: COLOR_ABNORMAL }
+    ]
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    const { width, height } = this.bounds
+
+    if (width >= height) {
+      this.renderLandscape(context)
+    } else {
+      this.renderPortrait(context)
+    }
+  }
+
+  renderPortrait(context: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+    const { lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
+    const segments = this.segments
+
+    context.save()
+    context.translate(left, top)
+
+    // background
+    context.beginPath()
+    context.fillStyle = fillStyle
+    context.roundRect(0, 0, width, height, round)
+    context.fill()
+    context.clip()
+
+    // segments (아래→위: Abnormal이 아래, Normal이 위)
+    let y = height
+    for (const seg of [...segments].reverse()) {
+      const segHeight = height * seg.ratio
+      if (segHeight <= 0) continue
+
+      y -= segHeight
+
+      context.beginPath()
+      context.fillStyle = seg.color
+      context.rect(0, y, width, segHeight)
+      context.fill()
+
+      this._drawSegmentLabel(context, seg, 0, y, width, segHeight)
+    }
+
+    // outline
+    context.beginPath()
+    context.setLineDash([])
+    context.strokeStyle = strokeStyle
+    context.lineWidth = lineWidth
+    context.roundRect(0, 0, width, height, round)
+    context.stroke()
+
+    context.translate(-left, -top)
+    context.restore()
+  }
+
+  renderLandscape(context: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+    const { lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
+    const segments = this.segments
+
+    context.save()
+    context.translate(left, top)
+
+    // background
+    context.beginPath()
+    context.fillStyle = fillStyle
+    context.roundRect(0, 0, width, height, round)
+    context.fill()
+    context.clip()
+
+    // segments (왼→오)
+    let x = 0
+    for (const seg of segments) {
+      const segWidth = width * seg.ratio
+      if (segWidth <= 0) continue
+
+      context.beginPath()
+      context.fillStyle = seg.color
+      context.rect(x, 0, segWidth, height)
+      context.fill()
+
+      this._drawSegmentLabel(context, seg, x, 0, segWidth, height)
+
+      x += segWidth
+    }
+
+    // outline
+    context.beginPath()
+    context.setLineDash([])
+    context.strokeStyle = strokeStyle
+    context.lineWidth = lineWidth
+    context.roundRect(0, 0, width, height, round)
+    context.stroke()
+
+    context.translate(-left, -top)
+    context.restore()
+  }
+
+  private _drawSegmentLabel(
+    context: CanvasRenderingContext2D,
+    seg: Segment,
+    x: number,
+    y: number,
+    w: number,
+    h: number
+  ) {
+    const percent = Math.round(seg.ratio * 100)
+    const lines = [seg.label, `${percent}%`]
+
+    const fontSize = Math.max(9, Math.min(14, Math.min(w, h) * 0.22))
+    context.font = `bold ${fontSize}px sans-serif`
+    context.fillStyle = '#333'
+    context.textAlign = 'center'
+    context.textBaseline = 'middle'
+
+    const lineHeight = fontSize * 1.2
+    const totalHeight = lines.length * lineHeight
+    const startY = y + (h - totalHeight) / 2 + lineHeight / 2
+
+    for (let i = 0; i < lines.length; i++) {
+      context.fillText(lines[i], x + w / 2, startY + i * lineHeight)
+    }
+  }
+
+  onchangeData(after: Record<string, any>, before: Record<string, any>): void {
+    const {
+      CARRIER_NORMAL = 0,
+      CARRIER_ABNORMAL = 0
+    } = this.data && typeof this.data == 'object' ? this.data : {}
+
+    this.setState({
+      carrierNormal: Number(CARRIER_NORMAL) || 0,
+      carrierAbnormal: Number(CARRIER_ABNORMAL) || 0
+    })
+  }
+}