@fmsim/machine 2.0.0-beta.86 → 2.0.0-beta.87

package/package.json

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

package/src/crane.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature, 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'
 
@@ -11,6 +11,33 @@ const NATURE: ComponentNature = {
 
 const GAP = 2
 
+/** 좌표 보간 기본 duration (ms). data.DURATION_MS 가 없으면 이 값 사용. */
+const DEFAULT_DURATION_MS = 1000
+
+function clamp01(v: number): number {
+  return Math.max(0, Math.min(100, Number(v) || 0))
+}
+
+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() {
@@ -25,6 +52,149 @@ export default class Crane extends MCSVehicle {
     return (this.root as any).craneLegendTheme || super.getLegendFallback()
   }
 
+  private _posAnimator?: CranePositionAnimator
+
+  /**
+   * data.POSITION = { X, Y, Z } (각 0~100 정규화) 분기. Stocker 부모 기준으로
+   * 실 좌표 (state.left/top) 와 forkZ 로 변환해 lerp 시작. 보간 중 새 값이
+   * 들어오면 *현재 보간 위치* 를 from 으로 잡고 새 target 으로 새 lerp 시작.
+   * NODEID 경로는 super (MCSVehicle.onchangeData) 가 처리 — POSITION 만 있는
+   * 데이터에선 NODEID 가 없어 자연스럽게 noop.
+   */
+  onchangeData(after: Record<string, any>, before: Record<string, any>): void {
+    const afterData = after?.data
+    const beforeData = before?.data
+    const afterPos = afterData?.POSITION
+    if (afterPos && typeof afterPos === 'object') {
+      const beforePos = beforeData?.POSITION
+      const changed =
+        afterPos.X !== beforePos?.X ||
+        afterPos.Y !== beforePos?.Y ||
+        afterPos.Z !== beforePos?.Z
+      if (changed) {
+        this._startPositionAnimation(afterPos, afterData?.DURATION_MS)
+      }
+    }
+    super.onchangeData(after, before)
+  }
+
+  dispose() {
+    if (this._posAnimator) {
+      this._posAnimator.unsubscribe()
+      this._posAnimator = undefined
+    }
+    super.dispose()
+  }
+
+  private _startPositionAnimation(
+    pos: { X: number; Y: number; Z: number },
+    durationMs?: number
+  ): void {
+    const target = this._normalizedToReal(pos)
+    if (!target) return // 부모가 Stocker 아니면 변환 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
+    }
+  }
+
+  /**
+   * 0~100 정규화 좌표 → state.left/top + forkZ.
+   *
+   * 부모 오브젝트 (보통은 Stocker 이지만 다른 컨테이너일 수도) 의 width/height
+   * 만 사용해 좌표 매핑 — 타입 무관 일반화. 가상 rail 은 host 의 긴쪽 중심부
+   * 가정:
+   *   - 데이터.X → host 의 긴쪽 (자동 판별: max(width, height))
+   *   - 데이터.Y → 짧은쪽 (rail 중심 = 50 근처가 일반적)
+   *   - 데이터.Z → forkZ (state 에 0~100 그대로 저장, 3D 측에서 mast 비율로 매핑)
+   *
+   * 참조는 ParentObjectMixin 이 제공하는 `parentObject` 사용 —
+   * state.parentObjectId 명시 시 그것, 미명시 시 this.parent 자동 fallback.
+   */
+  private _normalizedToReal(
+    pos: { X: number; Y: number; Z: number }
+  ): { 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 longIsWidth = hw >= hh
+    const longLen = longIsWidth ? hw : hh
+    const shortLen = longIsWidth ? hh : hw
+    const craneLongSize = longIsWidth ? cw : ch
+    const craneShortSize = longIsWidth ? ch : cw
+
+    const X = clamp01(pos.X)
+    const Y = clamp01(pos.Y)
+
+    // crane 의 *center* 가 (X/100)*longLen, (Y/100)*shortLen 에 오도록.
+    // state.left/top 은 top-left 기준이므로 size/2 차감.
+    const longPos = (X / 100) * longLen - craneLongSize / 2
+    const shortPos = (Y / 100) * shortLen - craneShortSize / 2
+
+    return {
+      left: longIsWidth ? longPos : shortPos,
+      top: longIsWidth ? shortPos : longPos,
+      forkZ: clamp01(pos.Z)
+    }
+  }
+
   render(ctx: CanvasRenderingContext2D) {
     var { left, top, width, height } = this.bounds
     const { x: cx, y: cy } = this.center

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

@@ -22,11 +22,29 @@ const FORK_COLOR = 0x999999
 const DEFAULT_BODY_COLOR = 0xcc8844
 
 export class Crane3D extends RealObjectGroup {
+  /** 캐리지 포크 group — Crane.state.forkZ (0~100) 가 변하면 position.y 만 lerp.
+   *  build() 시 inner 에 add 되고, *_mastBaseY 와 mastH 를 함께 보관* 해서
+   *  setForkZ 가 비율 계산에 사용. */
+  private forkGroup?: THREE.Group
+  private forkMastBaseY = 0
+  private forkMastH = 0
+
   get effectiveDepth(): number {
     const { depth } = this.component.state
     return depth || 5 * TRANSPORT_SURFACE_HEIGHT - 2
   }
 
+  /**
+   * 0~100 정규화 z (= state.forkZ) 를 mast 높이 비율로 변환해서 포크 group 의
+   * three-up y 위치 갱신. build() 가 안 끝났으면 noop — build 가 forkZ 를 다시
+   * 반영하면서 끝난다.
+   */
+  applyForkZ(z: number): void {
+    if (!this.forkGroup) return
+    const clamped = Math.max(0, Math.min(100, Number(z) || 0))
+    this.forkGroup.position.y = this.forkMastBaseY + (clamped / 100) * this.forkMastH
+  }
+
   private resolveColor(): number {
     const comp = this.component as any
 
@@ -115,8 +133,10 @@ export class Crane3D extends RealObjectGroup {
     mastMesh.castShadow = true
     inner.add(mastMesh)
 
-    // ── 3. 캐리지 포크 (마스트 40% 높이, 양쪽으로 뻗는 포크 암) ──
-    const forkY = mastBaseY + mastH * 0.4
+    // ── 3. 캐리지 포크 (별도 group — state.forkZ 변경 시 group.position.y lerp) ──
+    // 포크 geometry 는 *_mastBaseY 기준 local 0 에 둠* — 즉 group.position.y = 0
+    // 일 때 mast 바닥 자리에. forkZ 0~100 에 따라 group.position.y 만 변경하면
+    // mast 따라 위/아래 이동. mesh 재구축 불필요.
     const forkMat = new THREE.MeshStandardMaterial({
       color: FORK_COLOR,
       roughness: 0.4,
@@ -125,15 +145,13 @@ export class Crane3D extends RealObjectGroup {
 
     const forkGeometries: THREE.BufferGeometry[] = []
 
-    // 캐리지 중심 플레이트 (마스트에 부착, 양쪽 포크의 베이스)
     const plateW = w * 0.9
     const plateH = d * 0.08
     const plateD = pillarThick * 0.8
     const centerPlate = new THREE.BoxGeometry(plateW, plateH, plateD)
-    centerPlate.translate(0, forkY + plateH / 2, 0)
+    centerPlate.translate(0, plateH / 2, 0) // local 0 = mast 바닥
     forkGeometries.push(centerPlate)
 
-    // 양쪽 포크 암 (좌/우 선반 방향으로 뻗음)
     const armW = pillarThick * 0.6
     const armH = plateH * 0.4
     const armD = h * 0.6
@@ -142,14 +160,27 @@ export class Crane3D extends RealObjectGroup {
     for (const zSign of [-1, 1]) {
       for (const xSign of [-1, 1]) {
         const arm = new THREE.BoxGeometry(armW, armH, armD)
-        arm.translate(xSign * (armSpacing / 2), forkY + armH / 2, zSign * (plateD / 2 + armD / 2))
+        arm.translate(xSign * (armSpacing / 2), armH / 2, zSign * (plateD / 2 + armD / 2))
         forkGeometries.push(arm)
       }
     }
 
     const forkMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(forkGeometries), forkMat)
     forkMesh.castShadow = true
-    inner.add(forkMesh)
+
+    const forkGroup = new THREE.Group()
+    forkGroup.add(forkMesh)
+    inner.add(forkGroup)
+    this.forkGroup = forkGroup
+    this.forkMastBaseY = mastBaseY
+    // forkZ=100 시점에 mast 의 *_위쪽 한계*. 포크 자체 두께 (plateH) 만큼은 마스트
+    // 안에 머무르도록 limit 보정 — 그렇지 않으면 forkZ=100 일 때 포크가 상단
+    // 클램프와 충돌. mastH * 0.92 로 약간 보수적 (= 마스트 본체 92% 까지만 이동).
+    this.forkMastH = mastH * 0.92
+
+    // 초기 forkZ 반영 — state.forkZ 가 이미 set 되어 있으면 그 위치에 배치
+    const initialForkZ = Number((this.component.state as any).forkZ)
+    this.applyForkZ(Number.isFinite(initialForkZ) ? initialForkZ : 0)
 
     // ── 4. 상단 클램프 (천장 레일에 물리는 가이드부) ──
     const topClampGeo = new THREE.BoxGeometry(clampW, clampH, clampD)
@@ -162,11 +193,23 @@ export class Crane3D extends RealObjectGroup {
   updateDimension() {}
   updateAlpha() {}
 
+  /** build() 직전 호출. forkGroup 참조를 깨끗이 비워둔다 — 새 build 가 다시 set. */
+  clear() {
+    this.forkGroup = undefined
+    super.clear()
+  }
+
   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) {
       this.update()
       return
     }
+    // forkZ 는 mesh 재구축 없이 group.position.y 만 갱신. 같은 onchange 에서
+    // left/top 도 함께 변경될 수 있으므로 super 도 반드시 호출해 본체 transform
+    // 갱신 path (state.left/top → obj3d.position.x/z) 가 동작하게 함.
+    if ('forkZ' in after) {
+      this.applyForkZ(Number(after.forkZ) || 0)
+    }
     super.onchange(after, before)
   }
 }