@fmsim/machine 2.0.0-beta.20 → 2.0.0-beta.23

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fmsim/machine",
   "description": "Layout View를 구성하는 설비(machine)들과 유닛을 구현한 모듈입니다.",
   "author": "heartyoh",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.23",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -26,7 +26,7 @@
     "migration": "things-factory-migration"
   },
   "dependencies": {
-    "@fmsim/api": "^2.0.0-beta.16",
+    "@fmsim/api": "^2.0.0-beta.21",
     "@hatiolab/things-scene": "^10.0.0-beta.1"
   },
   "devDependencies": {
@@ -55,5 +55,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "a1eba5205556e34ec21bbecbd7816fe0eaa85dce"
+  "gitHead": "65798679f16af5b8ca50f2bc9d198d1ea84ed79e"
 }

package/src/conveyor.ts

@@ -14,6 +14,14 @@ const NATURE: ComponentNature = {
         options: ['', 'conveyor', 'belt', 'rail']
       }
     },
+    {
+      type: 'select',
+      label: 'conveyor-orientation',
+      name: 'orientation',
+      property: {
+        options: ['', 'horizontal', 'vertical']
+      }
+    },
     ...MCSTransport.properties
   ]
 }

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

@@ -41,14 +41,14 @@ export class AGV3D extends RealObjectGroup {
     //    '#F0F0F0'은 상태 미설정 시 기본 fallback — 무시하고 defaultColor 사용
     try {
       const sc = comp.statusColor
-      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0') return new THREE.Color(sc).getHex()
+      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') {
+    if (fillStyle && typeof fillStyle === 'string' && fillStyle !== 'transparent') {
       try {
         return new THREE.Color(fillStyle).getHex()
       } catch {

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

@@ -40,14 +40,14 @@ export class Conveyor3D extends RealObjectGroup {
     //    '#F0F0F0'은 상태 미설정 시 기본 fallback — 무시하고 defaultColor 사용
     try {
       const sc = comp.statusColor
-      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0') return new THREE.Color(sc).getHex()
+      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') {
+    if (fillStyle && typeof fillStyle === 'string' && fillStyle !== 'transparent') {
       try {
         return new THREE.Color(fillStyle).getHex()
       } catch {
@@ -61,9 +61,19 @@ export class Conveyor3D extends RealObjectGroup {
   build() {
     super.build()
 
-    const { width, height, conveyorType } = this.component.state
+    const { width: rawWidth, height: rawHeight, conveyorType, orientation } = this.component.state
     const depth = this.effectiveDepth
-    if (!width || !height) return
+    if (!rawWidth || !rawHeight) return
+
+    // orientation: 'horizontal' = 롤러가 Z축(세로), 'vertical' = 롤러가 X축(가로)
+    // default = 긴 방향에 수직 (긴 축을 따라 이송)
+    const isVertical = orientation === 'vertical' ? true
+      : orientation === 'horizontal' ? false
+      : rawWidth < rawHeight  // default: 세로가 길면 롤러는 가로(X축)
+    // isVertical=true → 롤러 축이 X(가로), 이송 방향이 Z(세로)
+    // isVertical=false → 롤러 축이 Z(세로), 이송 방향이 X(가로)
+    const width = rawWidth
+    const height = rawHeight
 
     // 2D와 동일 로직으로 rollWidth 산출
     const rollWidth = Math.max(10, Math.min(width, height) / 2)
@@ -138,7 +148,7 @@ export class Conveyor3D extends RealObjectGroup {
     } else if (conveyorType === 'belt') {
       this.buildBelt(width, height, depth, frameH, railW)
     } else {
-      this.buildRollers(width, height, depth, frameH, railW, rollWidth)
+      this.buildRollers(width, height, depth, frameH, railW, rollWidth, isVertical)
     }
   }
 
@@ -148,28 +158,45 @@ export class Conveyor3D extends RealObjectGroup {
     depth: number,
     frameH: number,
     railW: number,
-    rollWidth: number
+    rollWidth: number,
+    isVertical: boolean = false
   ) {
     const rollerRadius = Math.max(rollWidth / 8, 1)
-    const rollerLength = height - railW * 2 - 0.5
     const diameter = rollerRadius * 2
-    // 롤러 간 최소 간격 (z-fighting 방지용 미세 갭만)
     const step = diameter * 1.05
-    // 롤러 상단 = 이송 표면 (y=depth)
     const rollerY = depth - rollerRadius
     const color = this.resolveColor()
 
     const rollerGeometries: THREE.BufferGeometry[] = []
-    const count = Math.max(1, Math.floor(width / step))
-    const totalSpan = (count - 1) * step
-    const startX = -totalSpan / 2
-
-    for (let i = 0; i < count; i++) {
-      const x = startX + i * step
-      const roller = new THREE.CylinderGeometry(rollerRadius, rollerRadius, rollerLength, 16)
-      roller.rotateX(Math.PI / 2)
-      roller.translate(x, rollerY, 0)
-      rollerGeometries.push(roller)
+
+    if (isVertical) {
+      // 롤러 축 = X축(가로), 이송 방향 = Z축(세로)
+      const rollerLength = width - railW * 2 - 0.5
+      const count = Math.max(1, Math.floor(height / step))
+      const totalSpan = (count - 1) * step
+      const startZ = -totalSpan / 2
+
+      for (let i = 0; i < count; i++) {
+        const z = startZ + i * step
+        const roller = new THREE.CylinderGeometry(rollerRadius, rollerRadius, rollerLength, 16)
+        roller.rotateZ(Math.PI / 2)
+        roller.translate(0, rollerY, z)
+        rollerGeometries.push(roller)
+      }
+    } else {
+      // 롤러 축 = Z축(세로), 이송 방향 = X축(가로) — 기존 동작
+      const rollerLength = height - railW * 2 - 0.5
+      const count = Math.max(1, Math.floor(width / step))
+      const totalSpan = (count - 1) * step
+      const startX = -totalSpan / 2
+
+      for (let i = 0; i < count; i++) {
+        const x = startX + i * step
+        const roller = new THREE.CylinderGeometry(rollerRadius, rollerRadius, rollerLength, 16)
+        roller.rotateX(Math.PI / 2)
+        roller.translate(x, rollerY, 0)
+        rollerGeometries.push(roller)
+      }
     }
 
     if (rollerGeometries.length > 0) {
@@ -295,6 +322,7 @@ export class Conveyor3D extends RealObjectGroup {
   onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
     if (
       'conveyorType' in after ||
+      'orientation' in after ||
       'width' in after ||
       'height' in after ||
       'depth' in after ||

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

@@ -111,14 +111,14 @@ class MCSRealObject3D extends RealObjectGroup {
     //    '#F0F0F0'은 상태 미설정 시 기본 fallback — 무시하고 defaultColor 사용
     try {
       const sc = comp.statusColor
-      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0') return new THREE.Color(sc).getHex()
+      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') {
+    if (fillStyle && typeof fillStyle === 'string' && fillStyle !== 'transparent') {
       try {
         return new THREE.Color(fillStyle).getHex()
       } catch {
@@ -685,3 +685,113 @@ registerRealObjectFactory('Carrier', (component: Component) => new CarrierRealOb
 registerRealObjectFactory('StockerCapacityBar', () => null as any)
 registerRealObjectFactory('MCSGaugeCapacityBar', () => null as any)
 registerRealObjectFactory('ZoneCapacityBar', () => null as any)
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  PortFlow — 2D render를 Plane 텍스처로 3D 표시
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+class PortFlowRealObject3D extends RealObjectGroup {
+  private _mesh?: THREE.Mesh
+  private _texture?: THREE.CanvasTexture
+
+  get effectiveDepth(): number { return 0 }
+  protected get syncZPosOffset(): number {
+    // 부모 Port/Conveyor의 zPos와 동일하게
+    const parent = (this.component as any).parentObject
+    if (parent?.state?.zPos != null) return parent.state.zPos
+    return TRANSPORT_SURFACE_HEIGHT
+  }
+
+  build() {
+    super.build()
+
+    const { width = 10, height = 10 } = this.component.state
+    const w = Math.abs(width)
+    const h = Math.abs(height)
+    if (!w || !h) return
+
+    // 2D render를 캔버스에 캡처
+    // 화살표 날개 + 텍스트 영역이 bounds 밖으로 나가므로 전체 영역 계산
+    const { left, top } = this.component.bounds
+    const { fontSize = 24, labelPosition = 'top' } = this.component.state
+    const arrowPad = Math.min(w, h) * 0.4
+
+    // 텍스트 영역 확장
+    let padLeft = arrowPad, padRight = arrowPad, padTop = arrowPad, padBottom = arrowPad
+    if ((this.component as any).hasTextProperty) {
+      switch (labelPosition) {
+        case 'top': padTop = Math.max(padTop, fontSize + 4); break
+        case 'bottom': padBottom = Math.max(padBottom, fontSize + 4); break
+        case 'left': padLeft = Math.max(padLeft, fontSize * 4 + 4); break
+        case 'right': padRight = Math.max(padRight, fontSize * 4 + 4); break
+      }
+    }
+
+    const totalW = w + padLeft + padRight
+    const totalH = h + padTop + padBottom
+    const scale = 2
+    const canvas = document.createElement('canvas')
+    canvas.width = totalW * scale
+    canvas.height = totalH * scale
+    const ctx = canvas.getContext('2d')!
+
+    ctx.save()
+    ctx.scale(scale, scale)
+    ctx.translate(-left + padLeft, -top + padTop)
+    try {
+      // 화살표 렌더
+      this.component.render(ctx)
+      ctx.fillStyle = this.component.state.strokeStyle || '#666666'
+      ctx.fill()
+      // 텍스트 렌더
+      if ((this.component as any).hasTextProperty && (this.component as any).drawText) {
+        ;(this.component as any).drawText(ctx)
+      }
+    } catch { /* render 실패 시 빈 텍스처 */ }
+    ctx.restore()
+
+    this._texture = new THREE.CanvasTexture(canvas)
+    this._texture.colorSpace = THREE.SRGBColorSpace
+
+    const geo = new THREE.PlaneGeometry(totalW, totalH)
+    geo.rotateX(-Math.PI / 2)
+
+    const mat = new THREE.MeshBasicMaterial({
+      map: this._texture,
+      transparent: true,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+    })
+
+    this._mesh = new THREE.Mesh(geo, mat)
+    this._mesh.position.y = 1
+    this.object3d.add(this._mesh)
+  }
+
+  update() {
+    if (this._mesh) {
+      this.object3d.remove(this._mesh)
+      this._mesh.geometry.dispose()
+      ;(this._mesh.material as THREE.Material).dispose()
+      this._texture?.dispose()
+      this._mesh = undefined
+      this._texture = undefined
+    }
+    this.build()
+    this.updateTransform()
+  }
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if ('width' in after || 'height' in after || 'orientation' in after ||
+        'direction' in after || 'strokeStyle' in after || 'INOUTTYPE' in after) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+
+  updateDimension() {}
+  updateAlpha() {}
+}
+
+registerRealObjectFactory('PortFlow', (component: Component) => new PortFlowRealObject3D(component))

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": "이송방향"
 }

package/translations/ms.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": "Transfer Direction"
 }

package/translations/zh.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": "输送方向"
 }