@fmsim/machine 2.0.0-beta.98 → 2.0.0

package/dist/factories/shuttle-3d.js.map

@@ -1 +1 @@
-{"version":3,"file":"shuttle-3d.js","sourceRoot":"","sources":["../../src/factories/shuttle-3d.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Shuttle 3D Factory\n *\n * 스토커 내부에서 캐리어를 선반↔포트 간 이송하는 포크 캐리지.\n * 수평 레일 위를 이동하며, 포크를 밀어넣어 캐리어를 적재/하역.\n *\n * 구조 (바닥 원점, y=0~depth):\n *   - 하단 베이스 플레이트 (납작, 넓음, 레일 위 주행부)\n *   - 중앙 마스트 (좌우 수직 기둥, statusColor 적용)\n *   - 상단 포크 (2개의 평행한 가로 암, 캐리어 적재면)\n */\n\nimport * as THREE from 'three'\nimport * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'\nimport { RealObjectGroup, registerRealObjectFactory, disposeObject3D } from '@hatiolab/things-scene'\nimport type { Component } from '@hatiolab/things-scene'\nimport { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'\n\nconst BASE_COLOR = 0x333333\nconst FORK_COLOR = 0x777777\nconst DEFAULT_BODY_COLOR = 0x6688cc\n\nexport class Shuttle3D extends RealObjectGroup {\n  private _ownMeshes: THREE.Mesh[] = []\n  get effectiveDepth(): number {\n    const { depth } = this.component.state\n    return depth || TRANSPORT_SURFACE_HEIGHT\n  }\n\n  private resolveColor(): number {\n    const comp = this.component as any\n\n    try {\n      const sc = comp.statusColor\n      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0') return new THREE.Color(sc).getHex()\n    } catch {\n      /* statusColor 미구현 시 무시 */\n    }\n\n    const { fillStyle } = this.component.state\n    if (fillStyle && typeof fillStyle === 'string') {\n      try {\n        return new THREE.Color(fillStyle).getHex()\n      } catch {\n        /* 파싱 실패 시 무시 */\n      }\n    }\n\n    return DEFAULT_BODY_COLOR\n  }\n\n  build() {\n    super.build()\n\n    const { width = 10, height = 10 } = this.component.state\n    const w = Math.abs(width)\n    const h = Math.abs(height)\n    const d = this.effectiveDepth\n    if (!w || !h) return\n\n    // 높이 배분: 베이스 15%, 마스트 55%, 포크 30%\n    const baseH = d * 0.15\n    const mastH = d * 0.55\n    const forkH = d * 0.30\n\n    const mastThickness = Math.min(w, h) * 0.15\n\n    // ── 1. 하단 베이스 플레이트 (납작하고 넓은 주행부) ──\n    const basePad = Math.min(w, h) * 0.05\n    const baseGeo = new THREE.BoxGeometry(w + basePad * 2, baseH, h + basePad * 2)\n    const baseMat = new THREE.MeshStandardMaterial({\n      color: BASE_COLOR,\n      roughness: 0.7,\n      metalness: 0.3,\n    })\n    const baseMesh = new THREE.Mesh(baseGeo, baseMat)\n    baseMesh.position.y = baseH / 2\n    baseMesh.castShadow = true\n    baseMesh.receiveShadow = true\n\n    // ── 2. 좌우 마스트 기둥 (statusColor 적용) ──\n    const mastBaseY = baseH\n    const bodyColor = this.resolveColor()\n    const mastMat = new THREE.MeshStandardMaterial({\n      color: bodyColor,\n      roughness: 0.4,\n      metalness: 0.5,\n    })\n\n    const mastGeometries: THREE.BufferGeometry[] = []\n\n    // 좌우 수직 기둥\n    for (const xSign of [-1, 1]) {\n      const pillar = new THREE.BoxGeometry(mastThickness, mastH, mastThickness)\n      pillar.translate(xSign * (w / 2 - mastThickness / 2), mastBaseY + mastH / 2, 0)\n      mastGeometries.push(pillar)\n    }\n\n    // 중간 가로 연결 바 (구조 강성)\n    const crossBarW = w - mastThickness\n    const crossBarH = mastThickness * 0.5\n    const crossBar = new THREE.BoxGeometry(crossBarW, crossBarH, mastThickness)\n    crossBar.translate(0, mastBaseY + mastH * 0.4, 0)\n    mastGeometries.push(crossBar)\n\n    const mastMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(mastGeometries), mastMat)\n    mastMesh.castShadow = true\n\n    // ── 3. 상단 포크 (2개의 평행 암 + 백 플레이트) ──\n    const forkBaseY = mastBaseY + mastH\n    const forkMat = new THREE.MeshStandardMaterial({\n      color: FORK_COLOR,\n      roughness: 0.4,\n      metalness: 0.6,\n    })\n\n    const forkGeometries: THREE.BufferGeometry[] = []\n\n    // 백 플레이트 (마스트 상단을 잇는 가로판)\n    const backPlateH = forkH * 0.4\n    const backPlate = new THREE.BoxGeometry(w, backPlateH, mastThickness * 0.8)\n    backPlate.translate(0, forkBaseY + backPlateH / 2, -h * 0.35)\n    forkGeometries.push(backPlate)\n\n    // 2개의 포크 암 (앞으로 뻗은 평행 막대)\n    const forkArmW = mastThickness * 0.7\n    const forkArmH = forkH * 0.25\n    const forkArmD = h * 0.85\n    const forkSpacing = w * 0.55\n\n    for (const xSign of [-1, 1]) {\n      const arm = new THREE.BoxGeometry(forkArmW, forkArmH, forkArmD)\n      arm.translate(xSign * (forkSpacing / 2), forkBaseY + forkArmH / 2, forkArmD / 2 - h * 0.35)\n      forkGeometries.push(arm)\n    }\n\n    const forkMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(forkGeometries), forkMat)\n    forkMesh.castShadow = true\n\n    this._ownMeshes = [baseMesh, mastMesh, forkMesh]\n    for (const m of this._ownMeshes) this.components3D.add(m)\n  }\n\n  updateDimension() {}\n\n  update() {\n    for (const m of this._ownMeshes) {\n      this.components3D.remove(m)\n      disposeObject3D(m)\n    }\n    this._ownMeshes = []\n    this.build()\n    this.updateTransform()\n    this.updateAlpha()\n    this.updateHidden()\n  }\n\n  updateAlpha() {\n    const { alpha = 1 } = this.component.state\n    for (const m of this._ownMeshes) {\n      const materials = Array.isArray(m.material) ? m.material : [m.material]\n      for (const mat of materials) {\n        ;(mat as THREE.MeshStandardMaterial).opacity = alpha\n        ;(mat as THREE.MeshStandardMaterial).transparent = alpha < 1\n      }\n    }\n  }\n\n  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {\n    if ('width' in after || 'height' in after || 'depth' in after ||\n        'fillStyle' in after || 'strokeStyle' in after || 'id' in after) {\n      this.update()\n      return\n    }\n    super.onchange(after, before)\n  }\n}\n\nregisterRealObjectFactory('Shuttle', (component: Component) => new Shuttle3D(component))\n"]}
+{"version":3,"file":"shuttle-3d.js","sourceRoot":"","sources":["../../src/factories/shuttle-3d.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,iDAAiD,CAAA;AACtF,OAAO,EAAE,eAAe,EAAE,yBAAyB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAElH,OAAO,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE1D,MAAM,UAAU,GAAG,QAAQ,CAAA;AAC3B,MAAM,UAAU,GAAG,QAAQ,CAAA;AAC3B,MAAM,kBAAkB,GAAG,QAAQ,CAAA;AAEnC,MAAM,OAAO,SAAU,SAAQ,eAAe;IAA9C;;QACU,eAAU,GAAiB,EAAE,CAAA;IA2IvC,CAAC;IA1IC,IAAI,cAAc;QAChB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QACtC,OAAO,KAAK,IAAI,wBAAwB,CAAA;IAC1C,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAgB,CAAA;QAElC,IAAI,CAAC;YACH,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;YAC3B,IAAI,OAAO,EAAE,KAAK,QAAQ,IAAI,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,SAAS;gBAAE,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,CAAA;QACzG,CAAC;QAAC,WAAM,CAAC;YACP,0BAA0B;QAC5B,CAAC;QAED,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAC1C,IAAI,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;YAC/C,IAAI,CAAC;gBACH,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,CAAA;YAC5C,CAAC;YAAC,WAAM,CAAC;gBACP,gBAAgB;YAClB,CAAC;QACH,CAAC;QAED,OAAO,kBAAkB,CAAA;IAC3B,CAAC;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QACxD,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QACzB,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QAC1B,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,CAAA;QAC7B,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;YAAE,OAAM;QAEpB,kCAAkC;QAClC,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAA;QACtB,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAA;QACtB,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAA;QAEtB,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAA;QAE3C,qCAAqC;QACrC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAA;QACrC,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,CAAA;QAC9E,0EAA0E;QAC1E,2CAA2C;QAC3C,MAAM,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,CAAA;QACrG,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QACjD,QAAQ,CAAC,QAAQ,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAA;QAC/B,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAA;QAC1B,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAA;QAE7B,sCAAsC;QACtC,MAAM,SAAS,GAAG,KAAK,CAAA;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA;QACrC,MAAM,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,SAAS,CAAC,CAAA;QAEpG,MAAM,cAAc,GAA2B,EAAE,CAAA;QAEjD,WAAW;QACX,KAAK,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YAC5B,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,KAAK,EAAE,aAAa,CAAC,CAAA;YACzE,MAAM,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;YAC/E,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAC7B,CAAC;QAED,qBAAqB;QACrB,MAAM,SAAS,GAAG,CAAC,GAAG,aAAa,CAAA;QACnC,MAAM,SAAS,GAAG,aAAa,GAAG,GAAG,CAAA;QACrC,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,SAAS,EAAE,aAAa,CAAC,CAAA;QAC3E,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,GAAG,EAAE,CAAC,CAAC,CAAA;QACjD,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAE7B,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,eAAe,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAA;QAC7F,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAA;QAE1B,qCAAqC;QACrC,MAAM,SAAS,GAAG,SAAS,GAAG,KAAK,CAAA;QACnC,MAAM,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,CAAA;QAErG,MAAM,cAAc,GAA2B,EAAE,CAAA;QAEjD,0BAA0B;QAC1B,MAAM,UAAU,GAAG,KAAK,GAAG,GAAG,CAAA;QAC9B,MAAM,SAAS,GAAG,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,CAAA;QAC3E,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;QAC7D,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAE9B,0BAA0B;QAC1B,MAAM,QAAQ,GAAG,aAAa,GAAG,GAAG,CAAA;QACpC,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAA;QAC7B,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAA;QACzB,MAAM,WAAW,GAAG,CAAC,GAAG,IAAI,CAAA;QAE5B,KAAK,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YAC5B,MAAM,GAAG,GAAG,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;YAC/D,GAAG,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAA;YAC3F,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAC1B,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,eAAe,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAA;QAC7F,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAA;QAE1B,IAAI,CAAC,UAAU,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAChD,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;QAEzD,mEAAmE;QACnE,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,eAAe,KAAI,CAAC;IAEpB,MAAM;QACJ,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAChC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;YAC3B,eAAe,CAAC,CAAC,CAAC,CAAA;QACpB,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,EAAE,CAAA;QACpB,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,IAAI,CAAC,eAAe,EAAE,CAAA;QACtB,IAAI,CAAC,WAAW,EAAE,CAAA;QAClB,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,kFAAkF;IAClF,6EAA6E;IAC7E,4DAA4D;IAE5D,QAAQ,CAAC,KAA8B,EAAE,MAA+B;QACtE,IAAI,OAAO,IAAI,KAAK,IAAI,QAAQ,IAAI,KAAK,IAAI,OAAO,IAAI,KAAK;YACzD,WAAW,IAAI,KAAK,IAAI,aAAa,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;YACpE,IAAI,CAAC,MAAM,EAAE,CAAA;YACb,OAAM;QACR,CAAC;QACD,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAC/B,CAAC;CACF;AAED,yBAAyB,CAAC,SAAS,EAAE,CAAC,SAAoB,EAAE,EAAE,CAAC,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC,CAAA","sourcesContent":["/**\n * Shuttle 3D Factory\n *\n * 스토커 내부에서 캐리어를 선반↔포트 간 이송하는 포크 캐리지.\n * 수평 레일 위를 이동하며, 포크를 밀어넣어 캐리어를 적재/하역.\n *\n * 구조 (바닥 원점, y=0~depth):\n *   - 하단 베이스 플레이트 (납작, 넓음, 레일 위 주행부)\n *   - 중앙 마스트 (좌우 수직 기둥, statusColor 적용)\n *   - 상단 포크 (2개의 평행한 가로 암, 캐리어 적재면)\n */\n\nimport * as THREE from 'three'\nimport * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'\nimport { RealObjectGroup, registerRealObjectFactory, disposeObject3D, MaterialBank } from '@hatiolab/things-scene'\nimport type { Component } from '@hatiolab/things-scene'\nimport { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'\n\nconst BASE_COLOR = 0x333333\nconst FORK_COLOR = 0x777777\nconst DEFAULT_BODY_COLOR = 0x6688cc\n\nexport class Shuttle3D extends RealObjectGroup {\n  private _ownMeshes: THREE.Mesh[] = []\n  get effectiveDepth(): number {\n    const { depth } = this.component.state\n    return depth || TRANSPORT_SURFACE_HEIGHT\n  }\n\n  private resolveColor(): number {\n    const comp = this.component as any\n\n    try {\n      const sc = comp.statusColor\n      if (typeof sc === 'string' && sc && sc.toUpperCase() !== '#F0F0F0') return new THREE.Color(sc).getHex()\n    } catch {\n      /* statusColor 미구현 시 무시 */\n    }\n\n    const { fillStyle } = this.component.state\n    if (fillStyle && typeof fillStyle === 'string') {\n      try {\n        return new THREE.Color(fillStyle).getHex()\n      } catch {\n        /* 파싱 실패 시 무시 */\n      }\n    }\n\n    return DEFAULT_BODY_COLOR\n  }\n\n  build() {\n    super.build()\n\n    const { width = 10, height = 10 } = this.component.state\n    const w = Math.abs(width)\n    const h = Math.abs(height)\n    const d = this.effectiveDepth\n    if (!w || !h) return\n\n    // 높이 배분: 베이스 15%, 마스트 55%, 포크 30%\n    const baseH = d * 0.15\n    const mastH = d * 0.55\n    const forkH = d * 0.30\n\n    const mastThickness = Math.min(w, h) * 0.15\n\n    // ── 1. 하단 베이스 플레이트 (납작하고 넓은 주행부) ──\n    const basePad = Math.min(w, h) * 0.05\n    const baseGeo = new THREE.BoxGeometry(w + basePad * 2, baseH, h + basePad * 2)\n    // MaterialBank 공유 — 정적/상태색 dedup + faint 안전(코어가 공유 base 변형 스왑). dispose 는\n    // disposeObject3D 가 __bankOwned 를 건너뛰어 안전.\n    const baseMat = MaterialBank.material('shuttle|base', { roughness: 0.7, metalness: 0.3 }, BASE_COLOR)\n    const baseMesh = new THREE.Mesh(baseGeo, baseMat)\n    baseMesh.position.y = baseH / 2\n    baseMesh.castShadow = true\n    baseMesh.receiveShadow = true\n\n    // ── 2. 좌우 마스트 기둥 (statusColor 적용) ──\n    const mastBaseY = baseH\n    const bodyColor = this.resolveColor()\n    const mastMat = MaterialBank.material('shuttle|mast', { roughness: 0.4, metalness: 0.5 }, bodyColor)\n\n    const mastGeometries: THREE.BufferGeometry[] = []\n\n    // 좌우 수직 기둥\n    for (const xSign of [-1, 1]) {\n      const pillar = new THREE.BoxGeometry(mastThickness, mastH, mastThickness)\n      pillar.translate(xSign * (w / 2 - mastThickness / 2), mastBaseY + mastH / 2, 0)\n      mastGeometries.push(pillar)\n    }\n\n    // 중간 가로 연결 바 (구조 강성)\n    const crossBarW = w - mastThickness\n    const crossBarH = mastThickness * 0.5\n    const crossBar = new THREE.BoxGeometry(crossBarW, crossBarH, mastThickness)\n    crossBar.translate(0, mastBaseY + mastH * 0.4, 0)\n    mastGeometries.push(crossBar)\n\n    const mastMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(mastGeometries), mastMat)\n    mastMesh.castShadow = true\n\n    // ── 3. 상단 포크 (2개의 평행 암 + 백 플레이트) ──\n    const forkBaseY = mastBaseY + mastH\n    const forkMat = MaterialBank.material('shuttle|fork', { roughness: 0.4, metalness: 0.6 }, FORK_COLOR)\n\n    const forkGeometries: THREE.BufferGeometry[] = []\n\n    // 백 플레이트 (마스트 상단을 잇는 가로판)\n    const backPlateH = forkH * 0.4\n    const backPlate = new THREE.BoxGeometry(w, backPlateH, mastThickness * 0.8)\n    backPlate.translate(0, forkBaseY + backPlateH / 2, -h * 0.35)\n    forkGeometries.push(backPlate)\n\n    // 2개의 포크 암 (앞으로 뻗은 평행 막대)\n    const forkArmW = mastThickness * 0.7\n    const forkArmH = forkH * 0.25\n    const forkArmD = h * 0.85\n    const forkSpacing = w * 0.55\n\n    for (const xSign of [-1, 1]) {\n      const arm = new THREE.BoxGeometry(forkArmW, forkArmH, forkArmD)\n      arm.translate(xSign * (forkSpacing / 2), forkBaseY + forkArmH / 2, forkArmD / 2 - h * 0.35)\n      forkGeometries.push(arm)\n    }\n\n    const forkMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(forkGeometries), forkMat)\n    forkMesh.castShadow = true\n\n    this._ownMeshes = [baseMesh, mastMesh, forkMesh]\n    for (const m of this._ownMeshes) this.components3D.add(m)\n\n    // mesh 는 super.build() 이후 생성 → 코어 faint 를 명시 적용(편집 흐림이 mesh 에 닿게).\n    this.updateAlpha()\n  }\n\n  updateDimension() {}\n\n  update() {\n    for (const m of this._ownMeshes) {\n      this.components3D.remove(m)\n      disposeObject3D(m)\n    }\n    this._ownMeshes = []\n    this.build()\n    this.updateTransform()\n    this.updateAlpha()\n    this.updateHidden()\n  }\n\n  // updateAlpha override 제거 — 코어 RealObject.updateAlpha(=applyMaterialOpacity)로 수렴.\n  // 코어가 canonical(=bank base, opacity 1) 위에 state.alpha × faint 를 일괄. view 모드는\n  // 1×state.alpha = 기존 in-place 결과와 동일 → 불변, 편집 모드만 faint 추가.\n\n  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {\n    if ('width' in after || 'height' in after || 'depth' in after ||\n        'fillStyle' in after || 'strokeStyle' in after || 'id' in after) {\n      this.update()\n      return\n    }\n    super.onchange(after, before)\n  }\n}\n\nregisterRealObjectFactory('Shuttle', (component: Component) => new Shuttle3D(component))\n"]}

package/dist/features/capacity-gauge-mixin.js

@@ -0,0 +1,520 @@
+import { themesColorRange } from '@fmsim/api';
+import { LEGEND_CAPACITY, resolveCarrierLegend } from './mcs-status-default';
+import { safeRound } from '../utils/safe-round';
+import { getValueOnRanges } from '../utils/get-value-on-ranges';
+import { carrierSegments, abnormalSegments, carrierColorsFromLegend, pickSegmentAt } from '../utils/stocker-gauge';
+/**
+ * 용량 게이지 (통합 로직).
+ *
+ * 하나의 컴포넌트가 mode 에 따라 3가지 게이지를 표현한다:
+ *  - 'capacity'  : 용량 사용률(usage%) 채움 게이지 + high/low watermark (기본)
+ *  - 'carrier'   : 캐리어 상태비율 세그먼트 (Full / Empty / EmptyEmpty)
+ *  - 'abnormal'  : 캐리어 정상/비정상 비율 세그먼트 (Normal / Abnormal)
+ *
+ * StockerCapacityBar(스토커 지붕 게이지)와 ZoneCapacityBar(존 게이지)가 이 로직을 공유한다.
+ * 두 컴포넌트는 base(스토커=Shape, 존=Container)·정체성(identifiable)·legend 폴백만 다르고,
+ * 게이지를 그리는 규칙은 완전히 동일하다 — 규칙을 이 믹스인 한 곳에 두어 drift 를 막는다.
+ *
+ * mode 소스: root.stockerGaugeMode (기본 'capacity'). RootContainer 의 런타임 전용
+ * transient 속성으로, 3D(machine-3d buildGauge)와도 동일 소스라 2D/3D 게이지가 항상 일치한다.
+ * (root-container-override.ts 정의. 모드가 바뀌면 _refreshStockerGauges 가 두 게이지를 갱신.)
+ *
+ * 데이터 필드(2D 기준, canonical):
+ *  - capacity : CURRENTCAPACITY / MAXCAPACITY / HIGHWATERMARK / LOWWATERMARK / FULLUP
+ *  - carrier  : CARRIER_FULL / CARRIER_EMPTY / CARRIER_EMPTY_EMPTY
+ *  - abnormal : CARRIER_NORMAL / CARRIER_ABNORMAL
+ */
+/** 게이지 NATURE 속성 조각 (스토커/존 공통). 각 컴포넌트 NATURE 에 spread 로 합친다. */
+export const CapacityGaugeMixinProperties = [
+    {
+        type: 'select',
+        label: 'legend-name',
+        name: 'legendName',
+        property: {
+            options: themesColorRange
+        }
+    },
+    {
+        type: 'number',
+        name: 'currentUsage',
+        label: 'current-usage'
+    },
+    {
+        type: 'number',
+        name: 'highWatermark',
+        label: 'high-watermark'
+    },
+    {
+        type: 'number',
+        name: 'lowWatermark',
+        label: 'low-watermark'
+    },
+    {
+        type: 'number',
+        name: 'maxCapacity',
+        label: 'max-capacity'
+    },
+    {
+        type: 'boolean',
+        name: 'fullup',
+        label: 'fullup'
+    },
+    {
+        type: 'number',
+        name: 'carrierFull',
+        label: 'carrier-full'
+    },
+    {
+        type: 'number',
+        name: 'carrierEmpty',
+        label: 'carrier-empty'
+    },
+    {
+        type: 'number',
+        name: 'carrierEmptyEmpty',
+        label: 'carrier-empty-empty'
+    },
+    {
+        type: 'number',
+        name: 'carrierNormal',
+        label: 'carrier-normal'
+    },
+    {
+        type: 'number',
+        name: 'carrierAbnormal',
+        label: 'carrier-abnormal'
+    },
+    {
+        type: 'number',
+        label: 'round',
+        name: 'round',
+        property: {
+            min: 0
+        }
+    },
+    {
+        type: 'hidden',
+        name: 'usage',
+        label: 'usage'
+    }
+];
+const controlHandler = {
+    ondragmove: function (point, index, component) {
+        var { left, top, width, height } = component.model;
+        var transcoorded = component.transcoordP2S(point.x, point.y);
+        var round = ((transcoorded.x - left) / (width / 2)) * 100;
+        round = safeRound(round, width, height);
+        component.set({
+            round
+        });
+    }
+};
+export function CapacityGaugeMixin(Base) {
+    return class extends Base {
+        /** 게이지 모드: RootContainer 런타임 transient 속성. 3D(machine-3d) 와 동일 소스. */
+        get gaugeMode() {
+            var _a;
+            return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.stockerGaugeMode) || 'capacity';
+        }
+        get controls() {
+            var { left, top, width, round, height } = this.state;
+            round = round == undefined ? 0 : safeRound(round, width, height);
+            return [
+                {
+                    x: left + (width / 2) * (round / 100),
+                    y: top,
+                    handler: controlHandler
+                }
+            ];
+        }
+        getTheme() {
+            var _a, _b;
+            const { legendName } = this.state;
+            if (legendName) {
+                return (_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b[legendName];
+            }
+        }
+        get legend() {
+            return this.getTheme() || this.getLegendFallback();
+        }
+        /** legend 미지정 시 폴백 테마. 컴포넌트별로 override (스토커/존 각자 전역 테마). */
+        getLegendFallback() {
+            return LEGEND_CAPACITY;
+        }
+        get statusColor() {
+            const { fullup } = this.state;
+            return fullup ? 'red' : getValueOnRanges(this.usage, this.legend);
+        }
+        get text() {
+            // usage% 값은 capacity 모드에서만 표시. carrier/abnormal 은 세그먼트별 자체 라벨을 그리므로
+            // base 의 value 텍스트를 억제한다.
+            if (this.gaugeMode !== 'capacity') {
+                return '';
+            }
+            return this.usage + '%';
+        }
+        render(context) {
+            const mode = this.gaugeMode;
+            if (mode === 'carrier' || mode === 'abnormal') {
+                // carrier/abnormal 모드는 세그먼트 값이 전부 0(데이터 없음)일 때 빈 막대 대신 '0%' 를 표시한다.
+                this.renderSegmentGauge(context, this.segments(mode), true);
+                return;
+            }
+            // capacity (기본)
+            const { width, height } = this.bounds;
+            if (width >= height) {
+                this.renderLandscape(context);
+            }
+            else {
+                this.renderPortrait(context);
+            }
+        }
+        /**
+         * carrier/abnormal mode 의 세그먼트 목록 (공유 유틸 = 3D 와 동일 계산).
+         * 배열 순서 = portrait 아래→위 / landscape 왼→오.
+         */
+        segments(mode) {
+            if (mode === 'abnormal') {
+                const { carrierNormal = 0, carrierAbnormal = 0 } = this.state;
+                return abnormalSegments(carrierNormal, carrierAbnormal);
+            }
+            const { carrierFull = 0, carrierEmpty = 0, carrierEmptyEmpty = 0 } = this.state;
+            // 색상은 carrier 컴포넌트와 동일한 legend(테마)에서 취득 (carrierColorsFromLegend).
+            const colors = carrierColorsFromLegend(resolveCarrierLegend(this));
+            return carrierSegments(carrierFull, carrierEmpty, carrierEmptyEmpty, colors);
+        }
+        /**
+         * 클릭(또는 hover) 지점이 어떤 세그먼트에 속하는지 판정. carrier/abnormal 모드 전용 —
+         * capacity 모드·데이터 없음·좌표 변환 실패 시 null.
+         *
+         * renderSegmentGauge 와 동일한 배치 규칙으로 매핑한다: landscape(가로) 는 왼→오(누적 x),
+         * portrait(세로) 는 아래→위(바닥부터 누적). ratio 0 세그먼트는 화면에 없으므로 건너뛴다.
+         */
+        segmentAtEvent(event) {
+            var _a;
+            const mode = this.gaugeMode;
+            if (mode !== 'carrier' && mode !== 'abnormal')
+                return null;
+            // 3D 게이지는 부모 STOCKER 의 real-object 가 그린다(이 컴포넌트가 아님) → 2D 세그먼트 판정 대상 아님.
+            if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.is3dMode)
+                return null;
+            const ox = event === null || event === void 0 ? void 0 : event.offsetX;
+            const oy = event === null || event === void 0 ? void 0 : event.offsetY;
+            if (typeof ox !== 'number' || typeof oy !== 'number')
+                return null;
+            // 표면 픽셀(offsetX/offsetY) → 이 컴포넌트 로컬 프레임.
+            // 주의: transcoordP2S 는 '부모→로컬' 한 단계라 캔버스 픽셀로 단독 호출하면 안 된다.
+            // 엔진 capture() 와 동일하게 루트부터 전체 체인을 적용하는 helper 가 toLocal.
+            let local;
+            try {
+                local = this.toLocal(ox, oy);
+            }
+            catch (_b) {
+                return null;
+            }
+            if (!local)
+                return null;
+            const { left, top, width, height } = this.bounds;
+            if (!(width > 0) || !(height > 0))
+                return null;
+            // 컴포넌트 로컬프레임 좌표 → bounds 기준 within-box. 경계 반올림 방어로 clamp.
+            const lx = Math.min(Math.max(local.x - left, 0), width);
+            const ly = Math.min(Math.max(local.y - top, 0), height);
+            const landscape = width >= height;
+            const pos = landscape ? lx : height - ly; // portrait 는 바닥 기준 거리
+            const span = landscape ? width : height;
+            const picked = pickSegmentAt(this.segments(mode), pos, span);
+            if (!picked)
+                return null;
+            // label 은 key 로 도출 가능하고 로케일 의존이라 payload 에서 제외 — key(대문자 토큰)로 식별.
+            return { mode, key: picked.key, count: picked.count };
+        }
+        /** 세그먼트 게이지 렌더 (carrier/abnormal 공통). bounds 방향으로 landscape/portrait 자동. */
+        renderSegmentGauge(context, segments, zeroPercentWhenEmpty = false) {
+            const { left, top, width, height } = this.bounds;
+            const { lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state;
+            const landscape = width >= height;
+            context.save();
+            context.translate(left, top);
+            // background
+            context.beginPath();
+            context.fillStyle = fillStyle;
+            context.roundRect(0, 0, width, height, round);
+            context.fill();
+            context.clip();
+            if (landscape) {
+                // 왼→오
+                let x = 0;
+                for (const seg of segments) {
+                    const segWidth = width * seg.ratio;
+                    if (segWidth <= 0)
+                        continue;
+                    context.beginPath();
+                    context.fillStyle = seg.color;
+                    context.rect(x, 0, segWidth, height);
+                    context.fill();
+                    this._drawSegmentLabel(context, seg, x, 0, segWidth, height);
+                    x += segWidth;
+                }
+            }
+            else {
+                // 아래→위 (배열 첫 세그먼트가 바닥)
+                let y = height;
+                for (const seg of segments) {
+                    const segHeight = height * seg.ratio;
+                    if (segHeight <= 0)
+                        continue;
+                    y -= segHeight;
+                    context.beginPath();
+                    context.fillStyle = seg.color;
+                    context.rect(0, y, width, segHeight);
+                    context.fill();
+                    this._drawSegmentLabel(context, seg, 0, y, width, segHeight);
+                }
+            }
+            // 데이터가 전혀 없어(모든 ratio 0) 세그먼트가 하나도 안 그려진 경우 —
+            // carrier/abnormal 모드는 빈 막대 대신 '0%' 를 막대 중앙에 표시한다.
+            if (zeroPercentWhenEmpty && segments.every(s => s.ratio <= 0)) {
+                this._drawSegmentLabel(context, { key: 'EMPTY', label: '', count: 0, ratio: 0, color: '' }, 0, 0, width, height);
+            }
+            // outline
+            context.beginPath();
+            context.setLineDash([]);
+            context.strokeStyle = strokeStyle;
+            context.lineWidth = lineWidth;
+            context.roundRect(0, 0, width, height, round);
+            context.stroke();
+            context.translate(-left, -top);
+            context.restore();
+        }
+        _drawSegmentLabel(context, seg, x, y, w, h) {
+            // 이름 라벨(Full/Empty/Abnormal…)은 그리지 않는다. 각 세그먼트 영역 중심에 숫자(%)만 표시.
+            // 컴포넌트의 폰트 설정(fontFamily/fontSize/bold/italic)을 그대로 적용 — this.font.
+            const fontSize = this.state.fontSize || 15;
+            context.font = this.font;
+            // 공간에 따라 단계적 축소: 넉넉하면 '값%', 좁으면 '%' 떼고 값만, 더 좁으면 생략.
+            const value = `${Math.round(seg.ratio * 100)}`;
+            const fits = (t) => fontSize <= h && context.measureText(t).width <= w;
+            let text = null;
+            if (fits(`${value}%`)) {
+                text = `${value}%`;
+            }
+            else if (fits(value)) {
+                text = value;
+            }
+            if (text === null) {
+                return;
+            }
+            context.fillStyle = '#333';
+            context.textAlign = 'center';
+            context.textBaseline = 'middle';
+            context.fillText(text, x + w / 2, y + h / 2);
+        }
+        renderLandscape(context) {
+            const { left, top, width, height } = this.bounds;
+            const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state;
+            context.save();
+            context.translate(left, top);
+            // gauge background
+            context.beginPath();
+            context.fillStyle = fillStyle;
+            context.roundRect(0, 0, width, height, round);
+            context.fill();
+            context.clip();
+            // gauge foreground
+            context.beginPath();
+            context.fillStyle = this.statusColor;
+            context.rect(0, 0, (width / 100) * this.usage, height);
+            context.fill();
+            // high-watermark level
+            if (highWatermark && highWatermark > 0 && highWatermark < 100) {
+                context.beginPath();
+                context.strokeStyle = 'black';
+                context.lineWidth = 1;
+                context.setLineDash([3]);
+                const x = (width / 100) * highWatermark;
+                context.moveTo(x, 0);
+                context.lineTo(x, height);
+                context.stroke();
+            }
+            // low-watermark level
+            if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {
+                context.beginPath();
+                context.strokeStyle = 'black';
+                context.lineWidth = 1;
+                context.setLineDash([3]);
+                const x = (width / 100) * lowWatermark;
+                context.moveTo(x, 0);
+                context.lineTo(x, height);
+                context.stroke();
+            }
+            // gauge outline
+            context.beginPath();
+            context.setLineDash([]);
+            context.strokeStyle = strokeStyle;
+            context.lineWidth = lineWidth;
+            context.roundRect(0, 0, width, height, round);
+            context.stroke();
+            context.beginPath();
+            context.translate(-left, -top);
+            context.restore();
+        }
+        renderPortrait(context) {
+            const { left, top, width, height } = this.bounds;
+            const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state;
+            context.save();
+            context.translate(left, top);
+            // gauge background
+            context.beginPath();
+            context.fillStyle = fillStyle;
+            context.roundRect(0, 0, width, height, round);
+            context.fill();
+            context.clip();
+            // gauge foreground
+            context.beginPath();
+            context.fillStyle = this.statusColor;
+            context.rect(0, height - (height / 100) * this.usage, width, (height / 100) * this.usage);
+            context.fill();
+            // high-watermark level
+            if (highWatermark && highWatermark > 0 && highWatermark < 100) {
+                context.beginPath();
+                context.strokeStyle = 'black';
+                context.lineWidth = 1;
+                context.setLineDash([3]);
+                const y = height - (height / 100) * highWatermark;
+                context.moveTo(0, y);
+                context.lineTo(width, y);
+                context.stroke();
+            }
+            // low-watermark level
+            if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {
+                context.beginPath();
+                context.strokeStyle = 'black';
+                context.lineWidth = 1;
+                context.setLineDash([3]);
+                const y = height - (height / 100) * lowWatermark;
+                context.moveTo(0, y);
+                context.lineTo(width, y);
+                context.stroke();
+            }
+            // gauge outline
+            context.beginPath();
+            context.setLineDash([]);
+            context.strokeStyle = strokeStyle;
+            context.lineWidth = lineWidth;
+            context.roundRect(0, 0, width, height, round);
+            context.stroke();
+            context.beginPath();
+            context.translate(-left, -top);
+            context.restore();
+        }
+        get usage() {
+            const { currentUsage = 0, maxCapacity = 100 } = this.state;
+            return Math.round((currentUsage / maxCapacity) * 100);
+        }
+        set usage(usage) {
+            // intentionally have done nothing
+        }
+        onchangeData(after, before) {
+            const data = this.data && typeof this.data == 'object' ? this.data : {};
+            const { CURRENTCAPACITY = 0, MAXCAPACITY = 100, HIGHWATERMARK = 100, LOWWATERMARK = 0, FULLUP = 'F', CARRIER_FULL = 0, CARRIER_EMPTY = 0, CARRIER_EMPTY_EMPTY = 0, CARRIER_NORMAL = 0, CARRIER_ABNORMAL = 0 } = data;
+            const currentUsage = Number(CURRENTCAPACITY) || 0;
+            const maxCapacity = Number(MAXCAPACITY) || 100;
+            const highWatermark = Number(HIGHWATERMARK) || 100;
+            const lowWatermark = Number(LOWWATERMARK) || 0;
+            this.setState({
+                currentUsage,
+                maxCapacity,
+                highWatermark,
+                lowWatermark,
+                fullup: FULLUP == 'T',
+                usage: Math.round((currentUsage / maxCapacity) * 100),
+                carrierFull: Number(CARRIER_FULL) || 0,
+                carrierEmpty: Number(CARRIER_EMPTY) || 0,
+                carrierEmptyEmpty: Number(CARRIER_EMPTY_EMPTY) || 0,
+                carrierNormal: Number(CARRIER_NORMAL) || 0,
+                carrierAbnormal: Number(CARRIER_ABNORMAL) || 0
+            });
+        }
+        // ── hover 툴팁 (carrier/abnormal 모드 세그먼트별 수치) ───────────────────────────
+        // 색상만으로 타입 구분이 어려울 때, 마우스 hover 로 정확한 수치 확인. 뷰어 모드 전용
+        // (model-layer 가 편집 모드에선 hover dispatch 안 함).
+        async ready() {
+            await super.ready();
+            // hover 이벤트 수신 opt-in: model-layer _onmouseenter_all guard(hasLegacyHover) 통과.
+            const ev = this.model.event;
+            if (!ev || !ev.hover) {
+                ;
+                this.model.event = Object.assign(Object.assign({}, (ev || {})), { hover: true });
+            }
+        }
+        onMouseEnter() {
+            // capacity 는 값이 한 개(usage%)라 툴팁 불필요. carrier/abnormal 만.
+            if (this.gaugeMode === 'capacity')
+                return;
+            this._showGaugeTooltip();
+        }
+        onMouseLeave() {
+            this._hideGaugeTooltip();
+        }
+        dispose() {
+            this._hideGaugeTooltip();
+            super.dispose();
+        }
+        _showGaugeTooltip() {
+            if (typeof document === 'undefined')
+                return;
+            const segments = this.segments(this.gaugeMode).filter(s => s.count > 0);
+            if (!segments.length)
+                return;
+            this._hideGaugeTooltip();
+            const el = document.createElement('div');
+            el.style.cssText = [
+                'position:fixed',
+                'left:-9999px',
+                'top:0',
+                'z-index:2147483647',
+                'pointer-events:none',
+                'background:rgba(30,30,30,0.92)',
+                'color:#fff',
+                'padding:6px 9px',
+                'border-radius:6px',
+                'font:12px/1.5 sans-serif',
+                'box-shadow:0 2px 10px rgba(0,0,0,0.35)',
+                'white-space:nowrap'
+            ].join(';');
+            for (const seg of segments) {
+                const row = document.createElement('div');
+                row.style.cssText = 'display:flex;align-items:center;gap:6px';
+                const swatch = document.createElement('span');
+                swatch.style.cssText = `display:inline-block;width:10px;height:10px;border-radius:2px;background:${seg.color}`;
+                const label = document.createElement('span');
+                label.textContent = seg.label.replace(/\n/g, ' ');
+                label.style.cssText = 'flex:1';
+                const value = document.createElement('span');
+                value.textContent = String(seg.count);
+                value.style.cssText = 'font-weight:700;margin-left:12px';
+                row.append(swatch, label, value);
+                el.appendChild(row);
+            }
+            document.body.appendChild(el);
+            this._tooltipEl = el;
+            this._tooltipMove = (e) => {
+                el.style.left = `${e.clientX + 14}px`;
+                el.style.top = `${e.clientY + 14}px`;
+            };
+            document.addEventListener('mousemove', this._tooltipMove, true);
+        }
+        _hideGaugeTooltip() {
+            if (this._tooltipMove) {
+                document.removeEventListener('mousemove', this._tooltipMove, true);
+                this._tooltipMove = undefined;
+            }
+            if (this._tooltipEl) {
+                this._tooltipEl.remove();
+                this._tooltipEl = undefined;
+            }
+        }
+    };
+}
+//# sourceMappingURL=capacity-gauge-mixin.js.map