@fmsim/machine 1.0.88 → 2.0.0-beta.100

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
+  }
+
+  /** 천장 레일 높이에 배치 (center origin 기준: 레일 높이 + 볼륨 중심 반깊이) */
+  protected get syncZPosOffset(): number {
+    return OHT_RAIL_HEIGHT + this.effectiveDepth / 2
+  }
+
+  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[] = []
+
+    // 전후 수직 기둥 (레일 방향 = Z축)
+    for (const zSign of [-1, 1]) {
+      const pillar = new THREE.BoxGeometry(armThickness, armH, armThickness)
+      pillar.translate(0, armBaseY + armH / 2, zSign * (h * 0.3))
+      armGeometries.push(pillar)
+    }
+
+    // 하단 연결 바 (레일 방향으로 연결)
+    const crossBarD = h * 0.6 + armThickness
+    const crossBarH = armThickness * 0.6
+    const crossBar = new THREE.BoxGeometry(armThickness, crossBarH, crossBarD)
+    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. 상단 트롤리 플레이트 (레일 방향으로 길게 — Z축) ──
+    const trolleyBaseY = bodyBaseY + bodyH + gap
+    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,
+      roughness: 0.6,
+      metalness: 0.3,
+    })
+    const trolleyMesh = new THREE.Mesh(trolleyGeo, trolleyMat)
+    trolleyMesh.position.y = trolleyBaseY + trolleyH / 2
+    trolleyMesh.castShadow = true
+
+    // ── 5. 전후 바퀴 (트롤리 위, 레일 방향 = Z축) ──
+    const wheelBaseY = trolleyBaseY + trolleyH
+    const wheelRadius = wheelH / 2
+    const wheelDepth = w * 0.2
+    const wheelMeshes: THREE.Mesh[] = []
+    for (const zSign of [-1, 1]) {
+      const wheelGeo = new THREE.CylinderGeometry(wheelRadius, wheelRadius, wheelDepth, 12)
+      wheelGeo.rotateZ(Math.PI / 2)
+      const wheelMesh = new THREE.Mesh(wheelGeo, trolleyMat)
+      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.components3D.add(m)
+  }
+
+  updateDimension() {}
+
+  update() {
+    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) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+}
+
+registerRealObjectFactory('OHT', (component: Component) => new OHT3D(component))

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

@@ -0,0 +1,179 @@
+/**
+ * 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
+  }
+
+  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.components3D.add(m)
+  }
+
+  updateDimension() {}
+
+  update() {
+    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) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+}
+
+registerRealObjectFactory('Shuttle', (component: Component) => new Shuttle3D(component))

package/src/factories/z-priority-defaults.ts

@@ -0,0 +1,38 @@
+/*
+ * 기본 factory (RealObjectDomTexture) 를 쓰는 컴포넌트들에 대한 zPriority override.
+ *
+ * `factories/machine-3d.ts`, `conveyor-3d.ts`, `crane-rail-3d.ts` 등에 등록된
+ * 커스텀 RealObject 들은 자기 클래스에서 `get zPriority()` override. 그 외 컴포넌트는
+ * 기본 RealObjectDomTexture 를 쓰는데, 이 파일이 그것들도 priority 갖도록 등록.
+ *
+ * 패턴: registerRealObjectFactory(type, (component) => withZ(new RealObjectDomTexture(...), N))
+ */
+import { registerRealObjectFactory, RealObjectDomTexture } from '@hatiolab/things-scene'
+import type { Component } from '@hatiolab/things-scene'
+import { Z_FMSIM } from './z-priority'
+
+/** 주어진 RealObject 의 zPriority getter 를 override (instance level). */
+function withZ<T extends RealObjectDomTexture>(ro: T, zPriority: number): T {
+  Object.defineProperty(ro, 'zPriority', {
+    get: () => zPriority,
+    configurable: true
+  })
+  return ro
+}
+
+/** RealObjectDomTexture 기반 컴포넌트에 priority 일괄 등록 helper. */
+function registerWithPriority(type: string, zPriority: number) {
+  registerRealObjectFactory(type, (component: Component) =>
+    withZ(new RealObjectDomTexture(component), zPriority)
+  )
+}
+
+// ── 미등록 컴포넌트들 ──────────────────────────────────────
+registerWithPriority('ConveyorJoin', Z_FMSIM.CONVEYOR_JOIN)
+registerWithPriority('NodePath', Z_FMSIM.NODE_PATH)
+registerWithPriority('container', Z_FMSIM.STATIC_CONTAINER)
+registerWithPriority('FloatingContainer', Z_FMSIM.FLOATING_CONTAINER)
+registerWithPriority('popup', Z_FMSIM.POPUP)
+registerWithPriority('confidential-overlay', Z_FMSIM.CONFIDENTIAL_OVERLAY)
+registerWithPriority('StockerAbnormalBar', Z_FMSIM.STOCKER_ABNORMAL_BAR)
+registerWithPriority('StockerCarrierBar', Z_FMSIM.STOCKER_CARRIER_BAR)

package/src/factories/z-priority.ts

@@ -0,0 +1,60 @@
+/*
+ * fmsim 컴포넌트별 z-priority 상수.
+ *
+ * 같은 평면에 겹친 *다른 type 의* mesh 들이 GPU depth test 에서 결정적으로 정렬되도록
+ * 각 컴포넌트 type 마다 unique polygonOffset 값을 부여. 각 RealObject 가 자기 클래스에서
+ * `get zPriority(): number` override 로 이 상수 중 하나를 반환.
+ *
+ * 위치 (geometry vertex, object3d.position) 는 변경하지 않음 — depth buffer 의 fragment
+ * depth 값에만 미세 bias.
+ *
+ * 컨벤션 (높은 값 = 뒤로, 낮은 값 = 앞으로):
+ *
+ *   [14~17] 바닥 paths/lines (가장 뒤)
+ *   [11~13] 큰 영역 시각화 (container, 흐름 영역)
+ *   [10]    zone capacity bar (영역 표시)
+ *   [1~9]   바닥 설비 (facility)
+ *   [0]     이동 entity (AGV/OHT/Crane/Shuttle/Carrier) — default OBJECTS
+ *   [-1~-4] 설비 위 indicator bar (decal)
+ *   [-9~-10] overlay / popup (가장 앞)
+ */
+
+export const Z_FMSIM = {
+  // ── Floor paths (가장 뒤 — 바닥에 그려지는 선) ──────────────
+  AGV_LINE: 17,
+  OHT_LINE: 16,
+  CRANE_RAIL: 15,
+  NODE_PATH: 14,
+  PORT_FLOW: 13,
+
+  // ── Container 영역 ────────────────────────────────────────
+  STATIC_CONTAINER: 12,
+  FLOATING_CONTAINER: 11,
+
+  // ── Zone 표시 ─────────────────────────────────────────────
+  ZONE_CAPACITY_BAR: 10,
+
+  // ── 바닥 설비 (facility) ──────────────────────────────────
+  NODE: 9,
+  SCANNER: 8,
+  PORT: 7,
+  SHELF: 6,
+  STOCKER: 5,
+  CONVEYOR: 4,
+  CONVEYOR_JOIN: 3,
+  BUFFER: 2,
+  EQUIPMENT: 1,
+
+  // ── 이동 entity — priority 0 (default OBJECTS), polygonOffset 미적용 ──
+  // AGV, OHT, Crane, Shuttle, Carrier — override 안 함
+
+  // ── 설비 위 status indicator bar (decal) ─────────────────
+  MCS_GAUGE_CAPACITY_BAR: -1,
+  STOCKER_CAPACITY_BAR: -2,
+  STOCKER_CARRIER_BAR: -3,
+  STOCKER_ABNORMAL_BAR: -4,
+
+  // ── Overlay / popup (가장 앞) ──────────────────────────────
+  POPUP: -9,
+  CONFIDENTIAL_OVERLAY: -10
+} as const

package/src/features/conveyor-mixin.ts

@@ -50,7 +50,7 @@ function pattern(component: any) {
   return component._pattern
 }
 
-export function ConveyorMixin<TBase extends Constructor<Component>>(Base: TBase) {
+export function ConveyorMixin<TBase extends new (...args: any[]) => any>(Base: TBase): any {
   const A = class extends Base {
     _pattern
 

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

@@ -61,10 +61,24 @@ export const LEGEND_CARRIER: Legend = {
   default: '#F0F0F0'
 }
 
+/**
+ * carrier legend(테마) 해석 — carrier 컴포넌트(carrier.ts get legend)와 동일 로직 단일 소스.
+ * parent 에 carrierLegendName 이 지정되면 그 style 을, 아니면 board 전역 carrierLegendTheme,
+ * 둘 다 없으면 LEGEND_CARRIER 기본값. carrier 컴포넌트·스토커 게이지(2D/3D)가 공유한다.
+ */
+export function resolveCarrierLegend(component: any): Legend {
+  const carrierLegendName = component?.parent?.state?.carrierLegendName
+  if (carrierLegendName) {
+    return (component.root as any)?.style?.[carrierLegendName] || LEGEND_CARRIER
+  }
+  return (component.root as any)?.carrierLegendTheme || LEGEND_CARRIER
+}
+
 export const LEGEND_CAPACITY: Legend = {
   '0~20': '#5630D0',
   '20~80': '#8BDA5B',
-  '80~100': '#FD9B00',
+  '80~': '#FD9B00',     // 80% 이상 (= 100% 초과도 포함). 'from~' 형식이라
+                        // getValueOnRanges 가 value >= 80 매칭.
   default: '#F0F0F0'
 }
 

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

@@ -1,12 +1,13 @@
+import { Component } from '@hatiolab/things-scene'
+import { themesColorMap } from '@fmsim/api'
+import { LEGEND_NULL } from './mcs-status-default'
+
 type Constructor<T = {}> = new (...args: any[]) => T
 
 interface Legend {
   [key: string]: string
 }
 
-import { themesColorMap } from '@fmsim/api'
-import { LEGEND_NULL } from './mcs-status-default'
-
 export const MCSStatusMixinProperties = [
   {
     type: 'select',
@@ -18,7 +19,7 @@ export const MCSStatusMixinProperties = [
   }
 ]
 
-export function MCSStatusMixin<TBase extends Constructor>(Base: TBase) {
+export function MCSStatusMixin<TBase extends Constructor<Component>>(Base: TBase): any {
   return class extends Base {
     isLVComponent() {
       return true
@@ -53,5 +54,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/features/mcs-zone-mixin.ts

@@ -10,7 +10,7 @@ export const MCSZoneMixinProperties = [
   }
 ]
 
-export function MCSZoneMixin<TBase extends Constructor<MCSUnit>>(Base: TBase) {
+export function MCSZoneMixin<TBase extends Constructor<MCSUnit>>(Base: TBase): any {
   return class extends Base {
     get zone(): string | undefined {
       return

package/src/features/parent-object-mixin.ts

@@ -4,15 +4,14 @@ import { Component } from '@hatiolab/things-scene'
 import MCSMachine from '../mcs-machine'
 import MCSUnit from '../mcs-unit'
 
-export const ParentObjectMixinProperties = [
-  {
-    type: 'string',
-    label: 'parent-object-id',
-    name: 'parentObjectId'
-  }
-]
+/**
+ * parentObjectId 는 generic property builder 가 아니라 property-sidebar 의 모델 참조
+ * 룩업(ox-input-entity-id, parentObjectTypes 기준 씬 머신/유닛 선택)으로 렌더한다.
+ * 따라서 NATURE 속성 목록에서는 제외 — 빈 배열.
+ */
+export const ParentObjectMixinProperties: any[] = []
 
-export function ParentObjectMixin<TBase extends Constructor<Component>>(Base: TBase) {
+export function ParentObjectMixin<TBase extends Constructor<Component>>(Base: TBase): any {
   return class extends Base {
     get parentObject(): MCSMachine | MCSUnit | undefined {
       const { id, parentObjectId } = this.state
@@ -32,5 +31,15 @@ export function ParentObjectMixin<TBase extends Constructor<Component>>(Base: TB
         return parent
       }
     }
+
+    /**
+     * parentObjectId 가 참조하는 모델 컴포넌트 타입들 — parentObject 후보를 모델(씬)에서
+     * 수집할 때 이 타입들로 거른다 (머신/유닛 무관, 복수 허용).
+     * 빈 배열(기본) 이면 모델의 모든 머신 (폴백). 참조 타입이 정해진 컴포넌트는 override:
+     *   AGV→['AGVLine'], OHT→['OHTLine'], Crane/Shelf→['STOCKER'], PortFlow→['Port'].
+     */
+    get parentObjectTypes(): string[] {
+      return []
+    }
   }
 }

package/src/floating-container.ts

@@ -42,6 +42,11 @@ const NATURE = {
 }
 @sceneComponent('FloatingContainer')
 export default class FloatingContainer extends Container {
+  // things-scene 의 `declare const Container_base` 패턴이 base 인스턴스 타입의 accessor
+  // 정보를 object-type property 로 평탄화하여 TS2611 발생. 동일 위치를 override 하는
+  // 케이스가 operato-scene 엔 없어 fmsim 만 영향. things-scene 측 mixin 타입 패턴이
+  // 개선되면 제거.
+  // @ts-expect-error TS2611
   get position() {
     return this.app?.isViewMode ? 'absolute' : 'static'
   }