@fmsim/machine 1.0.83 → 2.0.0-beta.10

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

@@ -0,0 +1,196 @@
+/**
+ * OHT (Overhead Hoist Transport) 3D Factory
+ *
+ * 천장 레일에 매달려 이동하는 반송 차량. 캐리어를 호이스트로 운반.
+ * 구조 (바닥 원점, y=0~depth):
+ *   - 하단 그리퍼 바 (캐리어 집는 가로 바)
+ *   - 호이스트 암 (좌우 수직 기둥)
+ *   - 본체 하우징 (statusColor 적용)
+ *   - 상단 트롤리 (납작+넓은 레일 클램프 + 좌우 바퀴)
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+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 TROLLEY_COLOR = 0x222222
+const FRAME_COLOR = 0x444444
+const DEFAULT_BODY_COLOR = 0x6688cc
+
+/** OHT 레일 높이: 스토커(5x) 위 */
+const OHT_RAIL_HEIGHT = 6 * TRANSPORT_SURFACE_HEIGHT
+
+export class OHT3D extends RealObjectGroup {
+  private _ownMeshes: THREE.Mesh[] = []
+  get effectiveDepth(): number {
+    const { depth } = this.component.state
+    return depth || TRANSPORT_SURFACE_HEIGHT
+  }
+
+  /** 천장 레일 높이에 배치 */
+  protected get syncZPosOffset(): number {
+    return OHT_RAIL_HEIGHT
+  }
+
+  private resolveColor(): number {
+    const comp = this.component as any
+
+    try {
+      const sc = comp.statusColor
+      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0') return new THREE.Color(sc).getHex()
+    } catch {
+      /* statusColor 미구현 시 무시 */
+    }
+
+    const { fillStyle } = this.component.state
+    if (fillStyle && typeof fillStyle === 'string') {
+      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
+
+    // 높이 배분: 그리퍼 8%, 호이스트암 22%, 본체 45%, 간격 5%, 트롤리 12%, 바퀴 8%
+    const gripperBarH = d * 0.08
+    const armH = d * 0.22
+    const bodyH = d * 0.45
+    const gap = d * 0.05
+    const trolleyH = d * 0.12
+    const wheelH = d * 0.08
+
+    const armThickness = Math.min(w, h) * 0.12
+    const bodyCornerR = Math.min(w, h, bodyH) * 0.1
+
+    const frameMat = new THREE.MeshStandardMaterial({
+      color: FRAME_COLOR,
+      roughness: 0.5,
+      metalness: 0.4,
+    })
+
+    // ── 1. 하단 그리퍼 바 (캐리어를 집는 가로 바) ──
+    const gripperBarW = w * 0.7
+    const gripperBarD = h * 0.15
+    const gripperGeo = new THREE.BoxGeometry(gripperBarW, gripperBarH, gripperBarD)
+    const gripperMesh = new THREE.Mesh(gripperGeo, frameMat)
+    gripperMesh.position.y = gripperBarH / 2
+    gripperMesh.castShadow = true
+
+    // ── 2. 호이스트 암 (좌우 수직 기둥 + 하단 가로연결) ──
+    const armBaseY = gripperBarH
+    const armGeometries: THREE.BufferGeometry[] = []
+
+    // 좌우 수직 기둥
+    for (const xSign of [-1, 1]) {
+      const pillar = new THREE.BoxGeometry(armThickness, armH, armThickness)
+      pillar.translate(xSign * (w * 0.3), armBaseY + armH / 2, 0)
+      armGeometries.push(pillar)
+    }
+
+    // 하단 가로 연결 바 (그리퍼와 암을 잇는 수평 바)
+    const crossBarW = w * 0.6 + armThickness
+    const crossBarH = armThickness * 0.6
+    const crossBar = new THREE.BoxGeometry(crossBarW, crossBarH, armThickness)
+    crossBar.translate(0, armBaseY + crossBarH / 2, 0)
+    armGeometries.push(crossBar)
+
+    const armMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(armGeometries), frameMat)
+    armMesh.castShadow = true
+
+    // ── 3. 본체 하우징 (statusColor 적용) ──
+    const bodyBaseY = armBaseY + armH
+    const bodyColor = this.resolveColor()
+    const bodyGeo = new RoundedBoxGeometry(w, bodyH, h, 4, bodyCornerR)
+    const bodyMat = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      roughness: 0.3,
+      metalness: 0.5,
+    })
+    const bodyMesh = new THREE.Mesh(bodyGeo, bodyMat)
+    bodyMesh.position.y = bodyBaseY + bodyH / 2
+    bodyMesh.castShadow = true
+    bodyMesh.receiveShadow = true
+
+    // ── 4. 상단 트롤리 플레이트 (납작하고 넓은 레일 클램프) ──
+    const trolleyBaseY = bodyBaseY + bodyH + gap
+    const trolleyW = w * 1.15
+    const trolleyD = h * 0.6
+    const trolleyGeo = new THREE.BoxGeometry(trolleyW, trolleyH, trolleyD)
+    const trolleyMat = new THREE.MeshStandardMaterial({
+      color: TROLLEY_COLOR,
+      roughness: 0.6,
+      metalness: 0.3,
+    })
+    const trolleyMesh = new THREE.Mesh(trolleyGeo, trolleyMat)
+    trolleyMesh.position.y = trolleyBaseY + trolleyH / 2
+    trolleyMesh.castShadow = true
+
+    // ── 5. 좌우 바퀴 (트롤리 위, 레일을 타는 원통형 바퀴) ──
+    const wheelBaseY = trolleyBaseY + trolleyH
+    const wheelRadius = wheelH / 2
+    const wheelDepth = h * 0.2
+    const wheelMeshes: THREE.Mesh[] = []
+    for (const xSign of [-1, 1]) {
+      const wheelGeo = new THREE.CylinderGeometry(wheelRadius, wheelRadius, wheelDepth, 12)
+      wheelGeo.rotateX(Math.PI / 2)
+      const wheelMesh = new THREE.Mesh(wheelGeo, trolleyMat)
+      wheelMesh.position.set(xSign * (trolleyW * 0.35), wheelBaseY + wheelRadius, 0)
+      wheelMesh.castShadow = true
+      wheelMeshes.push(wheelMesh)
+    }
+
+    this._ownMeshes = [gripperMesh, armMesh, bodyMesh, trolleyMesh, ...wheelMeshes]
+    for (const m of this._ownMeshes) this.object3d.add(m)
+  }
+
+  updateDimension() {}
+
+  update() {
+    for (const m of this._ownMeshes) {
+      this.object3d.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) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+}
+
+registerRealObjectFactory('OHT', (component: Component) => new OHT3D(component))

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

@@ -0,0 +1,183 @@
+/**
+ * Shuttle 3D Factory
+ *
+ * 스토커 내부에서 캐리어를 선반↔포트 간 이송하는 포크 캐리지.
+ * 수평 레일 위를 이동하며, 포크를 밀어넣어 캐리어를 적재/하역.
+ *
+ * 구조 (바닥 원점, y=0~depth):
+ *   - 하단 베이스 플레이트 (납작, 넓음, 레일 위 주행부)
+ *   - 중앙 마스트 (좌우 수직 기둥, statusColor 적용)
+ *   - 상단 포크 (2개의 평행한 가로 암, 캐리어 적재면)
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.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 BASE_COLOR = 0x333333
+const FORK_COLOR = 0x777777
+const DEFAULT_BODY_COLOR = 0x6688cc
+
+export class Shuttle3D extends RealObjectGroup {
+  private _ownMeshes: THREE.Mesh[] = []
+  get effectiveDepth(): number {
+    const { depth } = this.component.state
+    return depth || TRANSPORT_SURFACE_HEIGHT
+  }
+
+  protected get syncZPosOffset(): number {
+    return 0
+  }
+
+  private resolveColor(): number {
+    const comp = this.component as any
+
+    try {
+      const sc = comp.statusColor
+      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0') return new THREE.Color(sc).getHex()
+    } catch {
+      /* statusColor 미구현 시 무시 */
+    }
+
+    const { fillStyle } = this.component.state
+    if (fillStyle && typeof fillStyle === 'string') {
+      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
+
+    // 높이 배분: 베이스 15%, 마스트 55%, 포크 30%
+    const baseH = d * 0.15
+    const mastH = d * 0.55
+    const forkH = d * 0.30
+
+    const mastThickness = Math.min(w, h) * 0.15
+
+    // ── 1. 하단 베이스 플레이트 (납작하고 넓은 주행부) ──
+    const basePad = Math.min(w, h) * 0.05
+    const baseGeo = new THREE.BoxGeometry(w + basePad * 2, baseH, h + basePad * 2)
+    const baseMat = new THREE.MeshStandardMaterial({
+      color: BASE_COLOR,
+      roughness: 0.7,
+      metalness: 0.3,
+    })
+    const baseMesh = new THREE.Mesh(baseGeo, baseMat)
+    baseMesh.position.y = baseH / 2
+    baseMesh.castShadow = true
+    baseMesh.receiveShadow = true
+
+    // ── 2. 좌우 마스트 기둥 (statusColor 적용) ──
+    const mastBaseY = baseH
+    const bodyColor = this.resolveColor()
+    const mastMat = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      roughness: 0.4,
+      metalness: 0.5,
+    })
+
+    const mastGeometries: THREE.BufferGeometry[] = []
+
+    // 좌우 수직 기둥
+    for (const xSign of [-1, 1]) {
+      const pillar = new THREE.BoxGeometry(mastThickness, mastH, mastThickness)
+      pillar.translate(xSign * (w / 2 - mastThickness / 2), mastBaseY + mastH / 2, 0)
+      mastGeometries.push(pillar)
+    }
+
+    // 중간 가로 연결 바 (구조 강성)
+    const crossBarW = w - mastThickness
+    const crossBarH = mastThickness * 0.5
+    const crossBar = new THREE.BoxGeometry(crossBarW, crossBarH, mastThickness)
+    crossBar.translate(0, mastBaseY + mastH * 0.4, 0)
+    mastGeometries.push(crossBar)
+
+    const mastMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(mastGeometries), mastMat)
+    mastMesh.castShadow = true
+
+    // ── 3. 상단 포크 (2개의 평행 암 + 백 플레이트) ──
+    const forkBaseY = mastBaseY + mastH
+    const forkMat = new THREE.MeshStandardMaterial({
+      color: FORK_COLOR,
+      roughness: 0.4,
+      metalness: 0.6,
+    })
+
+    const forkGeometries: THREE.BufferGeometry[] = []
+
+    // 백 플레이트 (마스트 상단을 잇는 가로판)
+    const backPlateH = forkH * 0.4
+    const backPlate = new THREE.BoxGeometry(w, backPlateH, mastThickness * 0.8)
+    backPlate.translate(0, forkBaseY + backPlateH / 2, -h * 0.35)
+    forkGeometries.push(backPlate)
+
+    // 2개의 포크 암 (앞으로 뻗은 평행 막대)
+    const forkArmW = mastThickness * 0.7
+    const forkArmH = forkH * 0.25
+    const forkArmD = h * 0.85
+    const forkSpacing = w * 0.55
+
+    for (const xSign of [-1, 1]) {
+      const arm = new THREE.BoxGeometry(forkArmW, forkArmH, forkArmD)
+      arm.translate(xSign * (forkSpacing / 2), forkBaseY + forkArmH / 2, forkArmD / 2 - h * 0.35)
+      forkGeometries.push(arm)
+    }
+
+    const forkMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(forkGeometries), forkMat)
+    forkMesh.castShadow = true
+
+    this._ownMeshes = [baseMesh, mastMesh, forkMesh]
+    for (const m of this._ownMeshes) this.object3d.add(m)
+  }
+
+  updateDimension() {}
+
+  update() {
+    for (const m of this._ownMeshes) {
+      this.object3d.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) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+}
+
+registerRealObjectFactory('Shuttle', (component: Component) => new Shuttle3D(component))

package/src/index.ts

@@ -1,5 +1,42 @@
+// ── side-effect: scene override ──
 import './scene/root-container-override.js'
 
+// ── side-effect: 3D factories ──
+import './factories/machine-3d.js'
+import './factories/conveyor-3d.js'
+import './factories/agv-3d.js'
+import './factories/oht-3d.js'
+import './factories/shuttle-3d.js'
+import './factories/crane-3d.js'
+import './factories/crane-rail-3d.js'
+
+// ── side-effect: @sceneComponent 등록 (tree-shaking 방지) ──
+import './zone-capacity-bar.js'
+import './stocker-capacity-bar.js'
+import './stocker-carrier-bar.js'
+import './stocker-abnormal-bar.js'
+import './port-flow.js'
+import './agv-line.js'
+import './buffer.js'
+import './conveyor.js'
+import './conveyor-join.js'
+import './equipment.js'
+import './oht-line.js'
+import './stocker.js'
+import './crane-rail.js'
+import './agv.js'
+import './oht.js'
+import './shuttle.js'
+import './port.js'
+import './crane.js'
+import './shelf.js'
+import './carrier.js'
+import './node.js'
+import './node-path.js'
+import './floating-container.js'
+import './static-container.js'
+import './clickable-popup.js'
+
 export { default as MachineGroups } from './groups'
 
 export { default as MCSMachine } from './mcs-machine'
@@ -9,6 +46,8 @@ export { default as MCSVehicle } from './mcs-vehicle'
 export { default as MCSTransport } from './mcs-transport'
 export { default as ZoneCapacityBar } from './zone-capacity-bar'
 export { default as StockerCapacityBar } from './stocker-capacity-bar'
+export { default as StockerCarrierBar } from './stocker-carrier-bar'
+export { default as StockerAbnormalBar } from './stocker-abnormal-bar'
 export { default as PortFlow } from './port-flow'
 
 export { default as AGVLine } from './agv-line'
@@ -18,6 +57,7 @@ export { default as ConveyorJoin } from './conveyor-join'
 export { default as Equipment } from './equipment'
 export { default as OHTLine } from './oht-line'
 export { default as Stocker } from './stocker'
+export { default as CraneRail } from './crane-rail'
 
 export { default as AGV } from './agv'
 export { default as OHT } from './oht'

package/src/mcs-carrier-holder.ts

@@ -33,16 +33,22 @@ export default class MCSCarrierHolder extends MCSUnit {
 
   carrier?: Carrier | null
 
-  ready() {
+  async ready() {
     super.ready()
 
     for (let component of this.components) {
       this.removeComponent(component)
     }
 
+    const { width, height } = this.state
+
     this.carrier = Model.compile(
       {
         type: 'Carrier',
+        left: 0,
+        top: 0,
+        width,
+        height,
         showText: this.getState('showCarrierText') || false
       },
       this.root.app
@@ -66,7 +72,7 @@ export default class MCSCarrierHolder extends MCSUnit {
     }
   }
 
-  onchangeData(after: Properties, before: Properties): void {
+  onchangeData(after: Record<string, any>, before: Record<string, any>): void {
     if (this.carrier) {
       this.carrier.data = this.data
     }

package/src/mcs-machine.ts

@@ -38,7 +38,7 @@ export default class MCSMachine extends MCSStatusMixin(ContainerAbstract) {
     const { legendName } = this.state
 
     if (legendName) {
-      return this.root?.style?.[legendName]
+      return (this.root as any)?.style?.[legendName]
     }
   }
 

package/src/mcs-unit.ts

@@ -25,7 +25,7 @@ export default class MCSUnit extends MCSStatusMixin(ParentObjectMixin(ContainerA
     const { legendName } = this.state
 
     if (legendName) {
-      return this.root?.style?.[legendName]
+      return (this.root as any)?.style?.[legendName]
     }
   }
 

package/src/mcs-vehicle.ts

@@ -10,7 +10,7 @@ function findNode(vehicle: MCSVehicle, nodeId: string, nodeMachine: string) {
     return null
   }
 
-  const nodes = vehicle.root.findAllById(nodeId).filter(node => node.state.type == 'Node') as Node[]
+  const nodes = (vehicle.root.findAllById?.(nodeId) || []).filter(node => node.state.type == 'Node') as Node[]
 
   return nodes.find((node: Node) => {
     return node.nodeMachine === nodeMachine
@@ -94,7 +94,7 @@ export default class MCSVehicle extends MCSCarrierHolder {
     // this.renderDirection(ctx)
   }
 
-  onchangeData(after: Properties, before: Properties): void {
+  onchangeData(after: Record<string, any>, before: Record<string, any>): void {
     super.onchangeData(after, before)
 
     const { NODEID: beforeNodeId, NODEMACHINE: beforeNodeMachine } = before.data || {}
@@ -122,7 +122,7 @@ export default class MCSVehicle extends MCSCarrierHolder {
     // 실제 존재하는 노드 중 가장 최근에 이동한 노드
     this.lastWaypoint = { NodeId, NodeMachine }
 
-    if (this.root.vehicleAnimation) {
+    if ((this.root as any).vehicleAnimation) {
       this.trigger('waypoint', {
         from: beforeNode,
         to: afterNode,

package/src/oht-line.ts

@@ -19,7 +19,7 @@ export default class OHTLine extends MCSTransport {
   }
 
   getLegendFallback() {
-    return this.root.ohtlineLegendTheme || super.getLegendFallback()
+    return (this.root as any).ohtlineLegendTheme || super.getLegendFallback()
   }
 
   containable(component: Component) {

package/src/oht.ts

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

package/src/port-flow.ts

@@ -106,14 +106,15 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
 
   get text() {
     const { direction = 'IN' } = this.state
+    const { INOUTTYPE } = this.parentObject?.data || this.data || {}
 
-    return direction.toUpperCase()
+    return (INOUTTYPE || direction).toUpperCase()
   }
 
   render(ctx) {
     const { left, top, width, height } = this.bounds
     var { orientation = 'left to right', direction = 'BOTH' }: { orientation?: string; direction?: string } = this.state
-    const { INOUTTYPE } = this.data || {}
+    const { INOUTTYPE } = this.parentObject?.data || this.data || {}
 
     if (INOUTTYPE) {
       direction = INOUTTYPE /* IN | OUT | BOTH */
@@ -231,7 +232,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
     this.drawStroke(ctx)
   }
 
-  onchangeData(after: Properties, before: Properties): void {
+  onchangeData(after: Record<string, any>, before: Record<string, any>): void {
     const { INOUTTYPE } = after.data
 
     this.setState('direction', INOUTTYPE)

package/src/port.ts

@@ -20,7 +20,7 @@ export default class Port extends MCSZoneMixin(MCSCarrierHolder) {
   }
 
   getLegendFallback() {
-    return this.root.portLegendTheme || super.getLegendFallback()
+    return (this.root as any).portLegendTheme || super.getLegendFallback()
   }
 
   render(ctx: CanvasRenderingContext2D) {

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

@@ -22,14 +22,14 @@ declare module '@hatiolab/things-scene' {
     craneLegendTheme?: any
     shelfLegendTheme?: any
     equipmentLegendTheme?: any
-    style: { [key: string]: any | Legend }
+    style: any
     vehicleAnimation?: boolean
     // 캐시 관련 속성 추가
     _animationConfigCache?: Map<string, any>
   }
 }
 
-const ModelLayer = Component.register('model-layer') as any
+const ModelLayer = (Component as any).register('model-layer') as any
 
 Object.defineProperty(ModelLayer.prototype, 'nature', {
   get: function () {

package/src/shelf.ts

@@ -20,7 +20,7 @@ export default class Shelf extends MCSZoneMixin(MCSCarrierHolder) {
   }
 
   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) {