@fmsim/machine 2.0.0-beta.6 → 2.0.0-beta.61

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

@@ -30,9 +30,9 @@ export class OHT3D extends RealObjectGroup {
     return depth || TRANSPORT_SURFACE_HEIGHT
   }
 
-  /** 천장 레일 높이에 배치 */
+  /** 천장 레일 높이에 배치 (center origin 기준: 레일 높이 + 볼륨 중심 반깊이) */
   protected get syncZPosOffset(): number {
-    return OHT_RAIL_HEIGHT
+    return OHT_RAIL_HEIGHT + this.effectiveDepth / 2
   }
 
   private resolveColor(): number {
@@ -83,7 +83,7 @@ export class OHT3D extends RealObjectGroup {
       metalness: 0.4,
     })
 
-    // ── 1. 하단 그리퍼 바 (캐리어를 집는 가로 바) ──
+    // ── 1. 하단 그리퍼 바 (캐리어를 집는 가로 바 — 이동 방향과 직교) ──
     const gripperBarW = w * 0.7
     const gripperBarD = h * 0.15
     const gripperGeo = new THREE.BoxGeometry(gripperBarW, gripperBarH, gripperBarD)
@@ -91,21 +91,21 @@ export class OHT3D extends RealObjectGroup {
     gripperMesh.position.y = gripperBarH / 2
     gripperMesh.castShadow = true
 
-    // ── 2. 호이스트 암 (좌우 수직 기둥 + 하단 가로연결) ──
+    // ── 2. 호이스트 암 (전후 수직 기둥 + 하단 연결 바) ──
     const armBaseY = gripperBarH
     const armGeometries: THREE.BufferGeometry[] = []
 
-    // 좌우 수직 기둥
-    for (const xSign of [-1, 1]) {
+    // 전후 수직 기둥 (레일 방향 = Z축)
+    for (const zSign of [-1, 1]) {
       const pillar = new THREE.BoxGeometry(armThickness, armH, armThickness)
-      pillar.translate(xSign * (w * 0.3), armBaseY + armH / 2, 0)
+      pillar.translate(0, armBaseY + armH / 2, zSign * (h * 0.3))
       armGeometries.push(pillar)
     }
 
-    // 하단 가로 연결 바 (그리퍼와 암을 잇는 수평 바)
-    const crossBarW = w * 0.6 + armThickness
+    // 하단 연결 바 (레일 방향으로 연결)
+    const crossBarD = h * 0.6 + armThickness
     const crossBarH = armThickness * 0.6
-    const crossBar = new THREE.BoxGeometry(crossBarW, crossBarH, armThickness)
+    const crossBar = new THREE.BoxGeometry(armThickness, crossBarH, crossBarD)
     crossBar.translate(0, armBaseY + crossBarH / 2, 0)
     armGeometries.push(crossBar)
 
@@ -126,10 +126,10 @@ export class OHT3D extends RealObjectGroup {
     bodyMesh.castShadow = true
     bodyMesh.receiveShadow = true
 
-    // ── 4. 상단 트롤리 플레이트 (납작하고 넓은 레일 클램프) ──
+    // ── 4. 상단 트롤리 플레이트 (레일 방향으로 길게 — Z축) ──
     const trolleyBaseY = bodyBaseY + bodyH + gap
-    const trolleyW = w * 1.15
-    const trolleyD = h * 0.6
+    const trolleyW = w * 0.6
+    const trolleyD = h * 1.15
     const trolleyGeo = new THREE.BoxGeometry(trolleyW, trolleyH, trolleyD)
     const trolleyMat = new THREE.MeshStandardMaterial({
       color: TROLLEY_COLOR,
@@ -140,29 +140,29 @@ export class OHT3D extends RealObjectGroup {
     trolleyMesh.position.y = trolleyBaseY + trolleyH / 2
     trolleyMesh.castShadow = true
 
-    // ── 5. 좌우 바퀴 (트롤리 위, 레일을 타는 원통형 바퀴) ──
+    // ── 5. 전후 바퀴 (트롤리 위, 레일 방향 = Z축) ──
     const wheelBaseY = trolleyBaseY + trolleyH
     const wheelRadius = wheelH / 2
-    const wheelDepth = h * 0.2
+    const wheelDepth = w * 0.2
     const wheelMeshes: THREE.Mesh[] = []
-    for (const xSign of [-1, 1]) {
+    for (const zSign of [-1, 1]) {
       const wheelGeo = new THREE.CylinderGeometry(wheelRadius, wheelRadius, wheelDepth, 12)
-      wheelGeo.rotateX(Math.PI / 2)
+      wheelGeo.rotateZ(Math.PI / 2)
       const wheelMesh = new THREE.Mesh(wheelGeo, trolleyMat)
-      wheelMesh.position.set(xSign * (trolleyW * 0.35), wheelBaseY + wheelRadius, 0)
+      wheelMesh.position.set(0, wheelBaseY + wheelRadius, zSign * (trolleyD * 0.35))
       wheelMesh.castShadow = true
       wheelMeshes.push(wheelMesh)
     }
 
     this._ownMeshes = [gripperMesh, armMesh, bodyMesh, trolleyMesh, ...wheelMeshes]
-    for (const m of this._ownMeshes) this.object3d.add(m)
+    for (const m of this._ownMeshes) this.components3D.add(m)
   }
 
   updateDimension() {}
 
   update() {
     for (const m of this._ownMeshes) {
-      this.object3d.remove(m)
+      this.components3D.remove(m)
       disposeObject3D(m)
     }
     this._ownMeshes = []

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

@@ -27,10 +27,6 @@ export class Shuttle3D extends RealObjectGroup {
     return depth || TRANSPORT_SURFACE_HEIGHT
   }
 
-  protected get syncZPosOffset(): number {
-    return 0
-  }
-
   private resolveColor(): number {
     const comp = this.component as any
 
@@ -142,14 +138,14 @@ export class Shuttle3D extends RealObjectGroup {
     forkMesh.castShadow = true
 
     this._ownMeshes = [baseMesh, mastMesh, forkMesh]
-    for (const m of this._ownMeshes) this.object3d.add(m)
+    for (const m of this._ownMeshes) this.components3D.add(m)
   }
 
   updateDimension() {}
 
   update() {
     for (const m of this._ownMeshes) {
-      this.object3d.remove(m)
+      this.components3D.remove(m)
       disposeObject3D(m)
     }
     this._ownMeshes = []

package/src/features/mcs-status-mixin.ts

@@ -53,5 +53,26 @@ export function MCSStatusMixin<TBase extends Constructor>(Base: TBase) {
 
       return (status && legend && (legend[status] || legend[status!] || legend.default)) || legend?.default
     }
+
+    /**
+     * 데이터 변경 시 status 기반 색상을 state.fillStyle 로 반영.
+     * things-scene 표준 경로(updateFillStyle)가 2D/3D 모두 자동 갱신하도록 유도.
+     *
+     * 주의: state.fillStyle 이 runtime 색상으로 덮어써짐. 모델 저장 시 status 색상이
+     * 남을 수 있는 트레이드오프가 있음 (data-driven 컴포넌트의 fillStyle 은 의미상
+     * 초기값일 뿐 항상 status 가 덮어쓰는 것이 자연스러움).
+     */
+    onchangeData(after: any, before: any) {
+      // Base (mixin 인자) 의 onchangeData 를 렉시컬하게 호출.
+      // Object.getPrototypeOf(this) 는 leaf 를 가리켜 무한재귀되므로 Base.prototype 직접 사용.
+      const baseOnchange = (Base.prototype as any).onchangeData
+      if (typeof baseOnchange === 'function') {
+        baseOnchange.call(this, after, before)
+      }
+      const color = this.statusColor
+      if (color && color !== (this as any).state?.fillStyle) {
+        ;(this as any).setState('fillStyle', color)
+      }
+    }
   }
 }

package/src/index.ts

@@ -1,55 +1,72 @@
 // ── side-effect: scene override ──
-import './scene/root-container-override.js'
+import './scene/root-container-override'
 
 // ── 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'
+import './factories/machine-3d'
+import './factories/conveyor-3d'
+import './factories/agv-3d'
+import './factories/oht-3d'
+import './factories/shuttle-3d'
+import './factories/crane-3d'
+import './factories/crane-rail-3d'
 
 // ── 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'
+// bars & overlays
+import './zone-capacity-bar'
+import './stocker-capacity-bar'
+import './stocker-carrier-bar'
+import './stocker-abnormal-bar'
+import './port-flow'
 
+// facilities
+import './agv-line'
+import './buffer'
+import './conveyor'
+import './conveyor-join'
+import './equipment'
+import './oht-line'
+import './stocker'
+import './crane-rail'
+import './scanner'
+
+// vehicles
+import './agv'
+import './oht'
+import './shuttle'
+
+// units
+import './port'
+import './crane'
+import './shelf'
+import './carrier'
+
+// topology
+import './node'
+import './node-path'
+
+// containers
+import './floating-container'
+import './static-container'
+import './clickable-popup'
+
+// ── groups ──
 export { default as MachineGroups } from './groups'
 
+// ── base classes ──
 export { default as MCSMachine } from './mcs-machine'
 export { default as MCSUnit } from './mcs-unit'
 export { default as MCSCarrierHolder } from './mcs-carrier-holder'
 export { default as MCSVehicle } from './mcs-vehicle'
 export { default as MCSTransport } from './mcs-transport'
+
+// ── bars & overlays ──
 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'
 
+// ── facilities ──
 export { default as AGVLine } from './agv-line'
 export { default as Buffer } from './buffer'
 export { default as Conveyor } from './conveyor'
@@ -58,19 +75,24 @@ 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 Scanner } from './scanner'
 
+// ── vehicles ──
 export { default as AGV } from './agv'
 export { default as OHT } from './oht'
 export { default as Shuttle } from './shuttle'
 
+// ── units ──
 export { default as Port } from './port'
 export { default as Crane } from './crane'
 export { default as Shelf } from './shelf'
 export { default as Carrier } from './carrier'
 
+// ── topology ──
 export { default as Node } from './node'
 export { default as NodePath } from './node-path'
 
+// ── containers ──
 export { default as FloatingContainer } from './floating-container'
-export { default as StaticContainer } from './static-container.js'
+export { default as StaticContainer } from './static-container'
 export { default as ClickablePopup } from './clickable-popup'

package/src/mcs-carrier-holder.ts

@@ -1,7 +1,5 @@
-import { Model, Properties } from '@hatiolab/things-scene'
 import { themesColorMap, themesAnimationMap } from '@fmsim/api'
 import MCSUnit from './mcs-unit.js'
-import Carrier from './carrier.js'
 
 export default class MCSCarrierHolder extends MCSUnit {
   static get properties(): any {
@@ -31,50 +29,56 @@ export default class MCSCarrierHolder extends MCSUnit {
     ]
   }
 
-  carrier?: Carrier | null
-
-  async ready() {
-    super.ready()
+  get showOverflow() {
+    return true
+  }
 
-    for (let component of this.components) {
-      this.removeComponent(component)
+  get hierarchy() {
+    return {
+      ...super.hierarchy,
+      components: []
     }
-
-    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
-    ) as any
-
-    this.addComponent(this.carrier!)
-
-    this.carrier!.data = this.data
   }
 
   dispose(): void {
-    this.carrier = null
-
+    ;(this.root as any)?.carrierManager?.update(this, {}, this.data)
     super.dispose()
   }
 
-  get hierarchy() {
-    return {
-      ...super.hierarchy,
-      components: []
+  async ready() {
+    super.ready()
+
+    const { CARRIERNAME, CARRIERTYPE = '', EMPTYTYPE, CARRIERSTATUS } = this.data || {}
+    
+    if(CARRIERNAME) {
+      ;(this.root as any).carrierManager.update(this, {
+        CARRIERNAME,
+        CARRIERTYPE,
+        EMPTYTYPE,
+        CARRIERSTATUS
+      }, undefined)
     }
   }
 
   onchangeData(after: Record<string, any>, before: Record<string, any>): void {
-    if (this.carrier) {
-      this.carrier.data = this.data
+    // CARRIERNAME, CARRIERTYPE = '', EMPTYTYPE, CARRIERSTATUS 이 변경되었을 때만 캐리어 관리자에게 알린다.
+    const { CARRIERNAME, CARRIERTYPE = '', EMPTYTYPE, CARRIERSTATUS } = after.data || {}
+    const { CARRIERNAME: beforeCARRIERNAME, CARRIERTYPE: beforeCARRIERTYPE = '', EMPTYTYPE: beforeEMPTYTYPE, CARRIERSTATUS: beforeCARRIERSTATUS } = before.data || {}
+    if(CARRIERNAME !== beforeCARRIERNAME ||
+      CARRIERTYPE !== beforeCARRIERTYPE ||
+      EMPTYTYPE !== beforeEMPTYTYPE ||
+      CARRIERSTATUS !== beforeCARRIERSTATUS) {
+      ;(this.root as any).carrierManager.update(this, {
+        CARRIERNAME,
+        CARRIERTYPE,
+        EMPTYTYPE,
+        CARRIERSTATUS
+      }, {
+        CARRIERNAME: beforeCARRIERNAME,
+        CARRIERTYPE: beforeCARRIERTYPE,
+        EMPTYTYPE: beforeEMPTYTYPE,
+        CARRIERSTATUS: beforeCARRIERSTATUS
+      })
     }
 
     super.onchangeData(after, before)

package/src/mcs-vehicle.ts

@@ -1,4 +1,3 @@
-import { Properties } from '@hatiolab/things-scene'
 import { LEGEND_VEHICLE, Legend } from './features/mcs-status-default'
 import MCSCarrierHolder from './mcs-carrier-holder'
 import Node from './node'
@@ -124,22 +123,26 @@ export default class MCSVehicle extends MCSCarrierHolder {
 
     if ((this.root as any).vehicleAnimation) {
       this.trigger('waypoint', {
-        from: beforeNode,
+        from: beforeNode || afterNode,
         to: afterNode,
         duration: 5000
       })
-    } else {
-      const fromCenter = beforeNode!.center
+    } else if (beforeNode) {
+      const fromCenter = beforeNode.center
       const toCenter = afterNode.center
 
-      const { x: startX, y: startY } = beforeNode!.transcoordS2T(fromCenter.x, fromCenter.y)
+      const { x: startX, y: startY } = beforeNode.transcoordS2T(fromCenter.x, fromCenter.y)
       const { x: endX, y: endY } = afterNode.transcoordS2T(toCenter.x, toCenter.y)
 
       const theta = Math.atan2(endY - startY, endX - startX) + Math.PI / 2
 
-      // 위치 설정
       this.location = { x: endX, y: endY }
       this.setState('rotation', theta)
+    } else {
+      // beforeNode 없음: afterNode 위치로 즉시 이동
+      const toCenter = afterNode.center
+      const { x, y } = afterNode.transcoordS2T(toCenter.x, toCenter.y)
+      this.location = { x, y }
     }
   }
 }

package/src/node.ts

@@ -28,7 +28,7 @@ export default class Node extends Shape {
   static RADIUS = 8
 
   is3dish() {
-    return false
+    return true
   }
 
   isDescendible() {

package/src/oht.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature, Properties, sceneComponent } from '@hatiolab/things-scene'
+import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
 import MCSVehicle from './mcs-vehicle'
 
 const NATURE: ComponentNature = {

package/src/scanner.ts

@@ -0,0 +1,29 @@
+import { Component, ComponentNature, Triangle, sceneComponent } from '@hatiolab/things-scene'
+import { MCSStatusMixin } from './features/mcs-status-mixin'
+
+const NATURE: ComponentNature = {
+  mutable: true,
+  resizable: false,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'round',
+      name: 'round',
+      property: { min: 0, max: 100, step: 1 }
+    }
+  ]
+}
+
+@sceneComponent('Scanner')
+export default class Scanner extends MCSStatusMixin(Triangle) {
+  static get nature() {
+    return NATURE
+  }
+
+  is3dish() {
+    return true
+  }
+}
+
+Component.memoize(Scanner.prototype, 'path', false)

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' {
@@ -26,6 +27,8 @@ declare module '@hatiolab/things-scene' {
     vehicleAnimation?: boolean
     // 캐시 관련 속성 추가
     _animationConfigCache?: Map<string, any>
+    _carrierManager?: CarrierManager
+    carrierManager: CarrierManager
   }
 }
 
@@ -326,3 +329,12 @@ Object.defineProperty(RootContainer.prototype, 'vehicleAnimation', {
     return !!vehicleAnimation
   }
 })
+
+Object.defineProperty(RootContainer.prototype, 'carrierManager', {
+  get: function () {
+    if (!this._carrierManager) {
+      this._carrierManager = new CarrierManager(this)
+    }
+    return this._carrierManager
+  }
+})

package/src/stocker-abnormal-bar.ts

@@ -232,7 +232,7 @@ export default class StockerAbnormalBar extends ParentObjectMixin(RectPath(Shape
     const {
       CARRIER_NORMAL = 0,
       CARRIER_ABNORMAL = 0
-    } = typeof this.data == 'object' ? this.data : {}
+    } = this.data && typeof this.data == 'object' ? this.data : {}
 
     this.setState({
       carrierNormal: Number(CARRIER_NORMAL) || 0,

package/src/stocker-capacity-bar.ts

@@ -11,7 +11,7 @@ import { themesColorRange } from '@fmsim/api'
 import { MCSStatusMixin } from './features/mcs-status-mixin'
 import { LEGEND_CAPACITY, Legend } from './features/mcs-status-default'
 import { safeRound } from './utils/safe-round'
-import { getVaueOnRanges } from './utils/get-value-on-ranges'
+import { getValueOnRanges } from './utils/get-value-on-ranges'
 import { ParentObjectMixin, ParentObjectMixinProperties } from './features/parent-object-mixin'
 
 const NATURE: ComponentNature = {
@@ -127,7 +127,7 @@ export default class StockerCapacityBar extends ParentObjectMixin(MCSStatusMixin
 
   get statusColor() {
     const { fullup } = this.state
-    return fullup ? 'red' : getVaueOnRanges(this.usage, this.legend)
+    return fullup ? 'red' : getValueOnRanges(this.usage, this.legend)
   }
 
   get text() {
@@ -304,7 +304,7 @@ export default class StockerCapacityBar extends ParentObjectMixin(MCSStatusMixin
       HIGHWATERMARK = 100,
       LOWWATERMARK = 0,
       FULLUP = 'F'
-    } = typeof this.data == 'object' ? this.data : {}
+    } = this.data && typeof this.data == 'object' ? this.data : {}
 
     const currentUsage = Number(CURRENTCAPACITY) || 0
     const maxCapacity = Number(MAXCAPACITY) || 100

package/src/stocker-carrier-bar.ts

@@ -246,7 +246,7 @@ export default class StockerCarrierBar extends ParentObjectMixin(RectPath(Shape)
       CARRIER_FULL = 0,
       CARRIER_EMPTY = 0,
       CARRIER_EMPTY_EMPTY = 0
-    } = typeof this.data == 'object' ? this.data : {}
+    } = this.data && typeof this.data == 'object' ? this.data : {}
 
     this.setState({
       carrierFull: Number(CARRIER_FULL) || 0,

package/src/templates/index.ts

@@ -17,6 +17,7 @@ import agvLine from './agv-line'
 import ohtLine from './oht-line'
 import conveyor from './conveyor'
 
+import Scanner from './scanner'
 import Node from './node'
 import DataSubscription from './data-subscription'
 import FloatingContainer from './floating-container'
@@ -41,6 +42,7 @@ export default [
   Shelf,
   Port,
 
+  Scanner,
   Node,
   FloatingContainer,
   DataSubscription

package/src/templates/scanner.ts

@@ -0,0 +1,20 @@
+const icon = new URL('../../icons/equipment.png', import.meta.url).href
+
+export default {
+  type: 'Scanner',
+  description: 'Fixed mount barcode/QR scanner',
+  group: ['etc'],
+  icon,
+  model: {
+    type: 'Scanner',
+    x1: 100,
+    y1: 100,
+    x2: 130,
+    y2: 110,
+    x3: 100,
+    y3: 120,
+    strokeStyle: '#333',
+    fillStyle: 'red',
+    lineWidth: 1
+  }
+}

package/src/utils/get-value-on-ranges.ts

@@ -1,4 +1,4 @@
-export function getVaueOnRanges(value, param): any {
+export function getValueOnRanges(value, param): any {
   for (let range in param) {
     let [from, to]: (number | string)[] = range.split('~')
     let from_defined = !!from
@@ -8,14 +8,12 @@ export function getVaueOnRanges(value, param): any {
     to = parseFloat(to)
     value = Number(value) || 0
 
-    // from이나 to 둘 중 하나만 있는 경우 먼저 계산
     if (from_defined && !to_defined && value >= from) {
       return param[range]
-    } else if (!from_defined && to_defined && value < from) {
+    } else if (!from_defined && to_defined && value < to) {
       return param[range]
     }
 
-    // 소수점이 있으므로  from <= value < to 가 되야함
     if (value >= from && value < to) {
       return param[range]
     }

package/src/zone-capacity-bar.ts

@@ -2,7 +2,7 @@ import { Component, ComponentNature, POSITION, Properties, sceneComponent } from
 import { themesColorRange } from '@fmsim/api'
 import { LEGEND_CAPACITY } from './features/mcs-status-default'
 import { safeRound } from './utils/safe-round'
-import { getVaueOnRanges } from './utils/get-value-on-ranges'
+import { getValueOnRanges } from './utils/get-value-on-ranges'
 import { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'
 import { ParentObjectMixinProperties } from './features/parent-object-mixin'
 import MCSUnit from './mcs-unit'
@@ -104,7 +104,7 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
 
   get statusColor() {
     const { fullup } = this.state
-    return fullup ? 'red' : getVaueOnRanges(this.usage, this.legend)
+    return fullup ? 'red' : getValueOnRanges(this.usage, this.legend)
   }
 
   get text() {
@@ -282,7 +282,7 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
       HIGHWATERMARK = 100,
       LOWWATERMARK = 0,
       FULLUP = 'F'
-    } = typeof this.data == 'object' ? this.data : {}
+    } = this.data && typeof this.data == 'object' ? this.data : {}
 
     const currentUsage = Number(CURRENTCAPACITY) || 0
     const maxCapacity = Number(MAXCAPACITY) || 100

package/translations/en.json

@@ -46,5 +46,6 @@
   "label.node-machine": "node machine",
   "label.nodes": "nodes",
   "label.vehicle-animation": "vehicle animation",
-  "label.battery-rate-legend-name": "battery rate"
+  "label.battery-rate-legend-name": "battery rate",
+  "label.conveyor-orientation": "Transfer Direction"
 }

package/translations/ja.json

@@ -48,5 +48,6 @@
   "label.node-machine": "node machine",
   "label.nodes": "nodes",
   "label.vehicle-animation": "vehicle animation",
-  "label.battery-rate-legend-name": "battery rate"
+  "label.battery-rate-legend-name": "battery rate",
+  "label.conveyor-orientation": "搬送方向"
 }

package/translations/ko.json

@@ -49,5 +49,6 @@
   "label.node-machine": "node machine",
   "label.nodes": "nodes",
   "label.vehicle-animation": "vehicle animation",
-  "label.battery-rate-legend-name": "배터리 잔량"
+  "label.battery-rate-legend-name": "배터리 잔량",
+  "label.conveyor-orientation": "이송방향"
 }