@fmsim/machine 1.0.88 → 2.0.0-beta.100

package/src/crane.ts

@@ -1,6 +1,12 @@
-import { Component, ComponentNature, Properties, sceneComponent } from '@hatiolab/things-scene'
+import { Component, ComponentNature, sceneComponent, frameClock } from '@hatiolab/things-scene'
 import MCSVehicle from './mcs-vehicle'
 import { LEGEND_CRANE } from './features/mcs-status-default'
+import {
+  axisRatio,
+  mapCraneLocalPosition,
+  normalizeCranePosition,
+  type CranePositionData
+} from './utils/crane-position'
 
 const NATURE: ComponentNature = {
   mutable: false,
@@ -11,6 +17,29 @@ const NATURE: ComponentNature = {
 
 const GAP = 2
 
+/** 좌표 보간 기본 duration (ms). data.DURATION_MS 가 없으면 이 값 사용. */
+const DEFAULT_DURATION_MS = 1000
+
+function lerp(a: number, b: number, t: number): number {
+  return a + (b - a) * t
+}
+
+function easeInOut(t: number): number {
+  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2
+}
+
+interface CranePositionAnimator {
+  fromLeft: number
+  fromTop: number
+  fromForkZ: number
+  toLeft: number
+  toTop: number
+  toForkZ: number
+  startTime: number
+  duration: number
+  unsubscribe: () => void
+}
+
 @sceneComponent('Crane')
 export default class Crane extends MCSVehicle {
   static get nature() {
@@ -21,8 +50,159 @@ export default class Crane extends MCSVehicle {
     return 'black'
   }
 
+  /** Crane 의 parentObject 는 STOCKER. */
+  get parentObjectTypes(): string[] {
+    return ['STOCKER']
+  }
+
   getLegendFallback() {
-    return this.root.craneLegendTheme || super.getLegendFallback()
+    return (this.root as any).craneLegendTheme || super.getLegendFallback()
+  }
+
+  private _posAnimator?: CranePositionAnimator
+
+  /**
+   * data.cranePosition = { current: {x,y,z}, limit: {x|y|z:{min,max}} } 분기.
+   * current 를 limit 범위 안의 0~1 비율로 환산한 뒤, 부모 (보통 Stocker) 기준으로
+   * 실 좌표 (state.left/top) 와 forkZ 로 변환해 lerp 시작. x→host 긴쪽, y→짧은쪽,
+   * z→포크 높이. 보간 중 새 값이 들어오면 *현재 보간 위치* 를 from 으로 잡고 새
+   * target 으로 새 lerp 시작.
+   * NODEID 경로는 super (MCSVehicle.onchangeData) 가 처리 — cranePosition 만 있는
+   * 데이터에선 NODEID 가 없어 자연스럽게 noop.
+   */
+  onchangeData(after: Record<string, any>, before: Record<string, any>): void {
+    const afterData = after?.data
+    // 데이터 키는 모두 대문자 전제. CRANEPOSITION 의 중첩 키(CURRENT/LIMIT/X/Y/Z/MIN/MAX)는
+    // normalizeCranePosition 이 내부 표준형(소문자)으로 변환. DURATION_MS 는 사용하지 않음.
+    const afterCP = normalizeCranePosition(afterData?.CRANEPOSITION)
+    if (afterCP) {
+      const beforeCP = normalizeCranePosition(before?.data?.CRANEPOSITION)
+      if (this._cranePositionChanged(afterCP, beforeCP)) {
+        this._startPositionAnimation(afterCP)
+      }
+    }
+    super.onchangeData(after, before)
+  }
+
+  /** current 또는 limit 중 하나라도 바뀌면 재계산 필요 (limit 변화도 실 위치를 바꿈). */
+  private _cranePositionChanged(a: CranePositionData, b?: CranePositionData): boolean {
+    if (!b) return true
+    return (
+      JSON.stringify(a?.current ?? null) !== JSON.stringify(b?.current ?? null) ||
+      JSON.stringify(a?.limit ?? null) !== JSON.stringify(b?.limit ?? null)
+    )
+  }
+
+  dispose() {
+    if (this._posAnimator) {
+      this._posAnimator.unsubscribe()
+      this._posAnimator = undefined
+    }
+    super.dispose()
+  }
+
+  private _startPositionAnimation(cranePosition: CranePositionData, durationMs?: number): void {
+    const target = this._ratioToReal(cranePosition)
+    if (!target) return // 부모(host) 없거나 크기 0 이면 변환 skip
+
+    const now = frameClock.simTime
+    const duration = Math.max(1, Number(durationMs) || DEFAULT_DURATION_MS)
+
+    // 현재 위치 — 보간 중이면 그 시점 보간값을 from 으로
+    let fromLeft = Number(this.state.left) || 0
+    let fromTop = Number(this.state.top) || 0
+    let fromForkZ = Number((this.state as any).forkZ) || 0
+
+    if (this._posAnimator) {
+      const a = this._posAnimator
+      const t = Math.min(1, Math.max(0, (now - a.startTime) / a.duration))
+      const e = easeInOut(t)
+      fromLeft = lerp(a.fromLeft, a.toLeft, e)
+      fromTop = lerp(a.fromTop, a.toTop, e)
+      fromForkZ = lerp(a.fromForkZ, a.toForkZ, e)
+      a.unsubscribe()
+      this._posAnimator = undefined
+    }
+
+    const unsubscribe = frameClock.subscribe(
+      (_dt: number, simTime: number) => this._tickPositionAnimation(simTime),
+      { description: 'crane-position', component: this }
+    )
+
+    this._posAnimator = {
+      fromLeft,
+      fromTop,
+      fromForkZ,
+      toLeft: target.left,
+      toTop: target.top,
+      toForkZ: target.forkZ,
+      startTime: now,
+      duration,
+      unsubscribe
+    }
+    // 즉시 첫 frame 반영 (t=0) — set 한 번 호출. paused 환경에서도 from→target
+    // 진입 시점이 명확.
+    this._tickPositionAnimation(now)
+  }
+
+  private _tickPositionAnimation(simTime: number): void {
+    const a = this._posAnimator
+    if (!a) return
+    const t = Math.min(1, Math.max(0, (simTime - a.startTime) / a.duration))
+    const e = easeInOut(t)
+    this.set({
+      left: lerp(a.fromLeft, a.toLeft, e),
+      top: lerp(a.fromTop, a.toTop, e),
+      forkZ: lerp(a.fromForkZ, a.toForkZ, e)
+    })
+    if (t >= 1) {
+      a.unsubscribe()
+      this._posAnimator = undefined
+    }
+  }
+
+  /**
+   * cranePosition (current + limit) → state.left/top + forkZ.
+   *
+   * 부모 오브젝트 (보통은 Stocker 이지만 다른 컨테이너일 수도) 의 width/height
+   * 만 사용해 좌표 매핑 — 타입 무관 일반화. 가상 rail 은 host 의 긴쪽:
+   *   - current.x → host 의 긴쪽 (자동 판별: max(width, height))
+   *   - current.y → 짧은쪽
+   *   - current.z → forkZ (state 에 0~100 으로 저장, 3D 측에서 mast 비율로 매핑)
+   *
+   * 각 축 비율 = (current - limit.min) / (limit.max - limit.min) ∈ [0,1].
+   *
+   * **스토커 안쪽 오프셋**: 크레인의 폭/두께를 감안해, 크레인 *전체* 가 host 안에
+   * 머무르도록 top-left 좌표를 [0, hostLen - craneLen] 범위로 매핑한다 (= 양끝에서
+   * craneLen/2 만큼 inset 된 중심선 위를 움직임). 크레인이 host 보다 크면 span 0
+   * 으로 떨어져 host 모서리에 정렬.
+   *
+   * 참조는 ParentObjectMixin 이 제공하는 `parentObject` 사용 —
+   * state.parentObjectId 명시 시 그것, 미명시 시 this.parent 자동 fallback.
+   */
+  private _ratioToReal(
+    cp: CranePositionData
+  ): { left: number; top: number; forkZ: number } | undefined {
+    const host: any = (this as any).parentObject
+    if (!host) return undefined
+
+    const hw = Number(host.state?.width) || 0
+    const hh = Number(host.state?.height) || 0
+    const cw = Number(this.state.width) || 0
+    const ch = Number(this.state.height) || 0
+    if (!hw || !hh) return undefined
+
+    const rx = axisRatio(cp.current?.x, cp.limit?.x)
+    const ry = axisRatio(cp.current?.y, cp.limit?.y)
+    const rz = axisRatio(cp.current?.z, cp.limit?.z)
+
+    const { left, top } = mapCraneLocalPosition(hw, hh, cw, ch, rx, ry)
+
+    return {
+      left,
+      top,
+      forkZ: rz * 100 // forkZ 0~100, 3D 측 (crane-3d) 에서 mast 비율로 매핑
+    }
   }
 
   render(ctx: CanvasRenderingContext2D) {

package/src/equipment.ts

@@ -15,7 +15,7 @@ export default class Equipment extends MCSMachine {
   }
 
   getLegendFallback() {
-    return this.root.equipmentLegendTheme || super.getLegendFallback()
+    return (this.root as any).equipmentLegendTheme || super.getLegendFallback()
   }
 
   containable(component: Component) {

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

@@ -0,0 +1,160 @@
+/**
+ * AGV 3D Factory
+ *
+ * 범퍼 + 본체 + 플랫폼 3단 구조:
+ *   - 하단 범퍼 (10%, 본체보다 약간 넓음, #222222)
+ *   - 본체 (58%, RoundedBoxGeometry, statusColor 적용)
+ *   - 간격 (4%)
+ *   - 상단 플랫폼 (28%, 본체보다 안쪽, #333333)
+ *
+ * Based on operato-scene Vehicle3D, adapted for fmsim:
+ *   - extends RealObjectGroup (Conveyor3D와 동일 패턴)
+ *   - statusColor from MCSStatusMixin
+ *   - 볼륨 중심 원점 (things-scene 기본 컨벤션) - mesh 로컬 [-d/2, +d/2]
+ */
+
+import * as THREE from 'three'
+import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js'
+import { RealObjectGroup, registerRealObjectFactory, disposeObject3D } from '@hatiolab/things-scene'
+import type { Component } from '@hatiolab/things-scene'
+import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
+
+const BUMPER_COLOR = 0x222222
+const PLATFORM_COLOR = 0x333333
+const DEFAULT_BODY_COLOR = 0x6688cc
+
+export class AGV3D extends RealObjectGroup {
+  private _ownMeshes: THREE.Mesh[] = []
+  get effectiveDepth(): number {
+    const { depth } = this.component.state
+    return depth || TRANSPORT_SURFACE_HEIGHT
+  }
+
+  private resolveColor(): number {
+    const comp = this.component as any
+
+    // 1) MCSStatusMixin.statusColor (legend 기반 상태 색상)
+    //    '#F0F0F0'은 상태 미설정 시 기본 fallback — 무시하고 defaultColor 사용
+    try {
+      const sc = comp.statusColor
+      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0' && sc !== 'transparent') return new THREE.Color(sc).getHex()
+    } catch {
+      /* statusColor 미구현 시 무시 */
+    }
+
+    // 2) state.fillStyle fallback
+    const { fillStyle } = this.component.state
+    if (fillStyle && typeof fillStyle === 'string' && fillStyle !== 'transparent') {
+      try {
+        return new THREE.Color(fillStyle).getHex()
+      } catch {
+        /* 파싱 실패 시 무시 */
+      }
+    }
+
+    return DEFAULT_BODY_COLOR
+  }
+
+  build() {
+    super.build()
+
+    const { width = 10, height = 10 } = this.component.state
+    const w = Math.abs(width)
+    const h = Math.abs(height)
+    const d = this.effectiveDepth
+    if (!w || !h) return
+
+    // 비율: 하단 범퍼 10%, 본체 58%, 간격 4%, 플랫폼 28%
+    const bumperH = d * 0.1
+    const bodyH = d * 0.58
+    const gapH = d * 0.04
+    const platH = d * 0.28
+
+    const cornerR = Math.min(w, h, bodyH) * 0.12
+
+    // ── 하단 범퍼 밴드 (본체보다 약간 넓게 돌출) ──
+    const bumperPad = Math.min(w, h) * 0.03
+    const bumperCornerR = Math.min(w + bumperPad * 2, h + bumperPad * 2, bumperH) * 0.2
+    const bumperGeo = new RoundedBoxGeometry(w + bumperPad * 2, bumperH, h + bumperPad * 2, 4, bumperCornerR)
+    const bumperMat = new THREE.MeshStandardMaterial({
+      color: BUMPER_COLOR,
+      roughness: 0.8,
+      metalness: 0.1,
+    })
+    const bumper = new THREE.Mesh(bumperGeo, bumperMat)
+    bumper.position.y = bumperH / 2
+    bumper.castShadow = true
+    bumper.receiveShadow = true
+
+    // ── 본체 (둥근 모서리, statusColor 적용) ──
+    const bodyColor = this.resolveColor()
+    const bodyGeo = new RoundedBoxGeometry(w, bodyH, h, 4, cornerR)
+    const bodyMat = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      roughness: 0.3,
+      metalness: 0.5,
+    })
+    const body = new THREE.Mesh(bodyGeo, bodyMat)
+    body.position.y = bumperH + bodyH / 2
+    body.castShadow = true
+    body.receiveShadow = true
+
+    // ── 상단 플랫폼 (본체보다 안쪽, 어두운색) ──
+    const platInset = Math.min(w, h) * 0.04
+    const platCornerR = Math.min(w - platInset * 2, h - platInset * 2, platH) * 0.15
+    const platGeo = new RoundedBoxGeometry(w - platInset * 2, platH, h - platInset * 2, 4, platCornerR)
+    const platMat = new THREE.MeshStandardMaterial({
+      color: PLATFORM_COLOR,
+      roughness: 0.5,
+      metalness: 0.15,
+    })
+    const plat = new THREE.Mesh(platGeo, platMat)
+    plat.position.y = bumperH + bodyH + gapH + platH / 2
+    plat.castShadow = true
+    plat.receiveShadow = true
+
+    this._ownMeshes = [bumper, body, plat]
+    // ownGroup이 center-origin ↔ bottom-up 좌표계 변환을 자동 처리
+    for (const m of this._ownMeshes) this.components3D.add(m)
+  }
+
+  updateDimension() {}
+
+  update() {
+    // 자신의 mesh만 제거 (Carrier 등 자식 컴포넌트 3D 보존)
+    for (const m of this._ownMeshes) {
+      this.components3D.remove(m)
+      disposeObject3D(m)
+    }
+    this._ownMeshes = []
+
+    this.build()
+    this.updateTransform()
+    this.updateAlpha()
+    this.updateHidden()
+  }
+
+  updateAlpha() {
+    const { alpha = 1 } = this.component.state
+    for (const m of this._ownMeshes) {
+      const materials = Array.isArray(m.material) ? m.material : [m.material]
+      for (const mat of materials) {
+        ;(mat as THREE.MeshStandardMaterial).opacity = alpha
+        ;(mat as THREE.MeshStandardMaterial).transparent = alpha < 1
+      }
+    }
+  }
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if ('width' in after || 'height' in after || 'depth' in after ||
+        'fillStyle' in after || 'strokeStyle' in after || 'id' in after ||
+        'EMPTYTYPE' in after || 'CARRIERSTATUS' in after) {
+      this.update()
+      return
+    }
+
+    super.onchange(after, before)
+  }
+}
+
+registerRealObjectFactory('AGV', (component: Component) => new AGV3D(component))