@fmsim/machine 1.0.83 → 2.0.0-beta.2

package/src/index.ts

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

package/src/mcs-carrier-holder.ts

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

package/src/mcs-machine.ts

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

package/src/mcs-unit.ts

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

package/src/mcs-vehicle.ts

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

package/src/oht-line.ts

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

package/src/oht.ts

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

package/src/port-flow.ts

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

package/src/port.ts

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

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

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

package/src/shelf.ts

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

package/src/shuttle.ts

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

package/src/stocker-abnormal-bar.ts

@@ -0,0 +1,242 @@
+import {
+  Component,
+  ComponentNature,
+  POSITION,
+  RectPath,
+  Shape,
+  sceneComponent
+} from '@hatiolab/things-scene'
+import { safeRound } from './utils/safe-round'
+import { ParentObjectMixin, ParentObjectMixinProperties } from './features/parent-object-mixin'
+
+/**
+ * 캐리어 ID 정상/비정상 비율 게이지 (Normal / Abnormal)
+ *
+ * 스토커에 보관된 캐리어들의 정상/비정상 비율을 세그먼트 게이지로 표시한다.
+ * Portrait(세로) 모드에서는 아래→위, Landscape(가로) 모드에서는 왼→오 방향으로 채운다.
+ */
+
+interface Segment {
+  label: string
+  count: number
+  ratio: number
+  color: string
+}
+
+const COLOR_NORMAL = '#8BDA5B'
+const COLOR_ABNORMAL = '#F4B4B4'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    ...ParentObjectMixinProperties,
+    {
+      type: 'number',
+      name: 'carrierNormal',
+      label: 'carrier-normal'
+    },
+    {
+      type: 'number',
+      name: 'carrierAbnormal',
+      label: 'carrier-abnormal'
+    },
+    {
+      type: 'number',
+      label: 'round',
+      name: 'round',
+      property: {
+        min: 0
+      }
+    }
+  ]
+}
+
+var controlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: 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 })
+  }
+}
+
+@sceneComponent('StockerAbnormalBar')
+export default class StockerAbnormalBar extends ParentObjectMixin(RectPath(Shape)) {
+  static get nature() {
+    return NATURE
+  }
+
+  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
+      }
+    ]
+  }
+
+  isIdentifiable() {
+    return false
+  }
+
+  get segments(): Segment[] {
+    const { carrierNormal = 0, carrierAbnormal = 0 } = this.state
+    const total = carrierNormal + carrierAbnormal
+
+    if (total === 0) {
+      return [
+        { label: 'Normal', count: 0, ratio: 0, color: COLOR_NORMAL },
+        { label: 'Abnormal', count: 0, ratio: 0, color: COLOR_ABNORMAL }
+      ]
+    }
+
+    return [
+      { label: 'Normal', count: carrierNormal, ratio: carrierNormal / total, color: COLOR_NORMAL },
+      { label: 'Abnormal', count: carrierAbnormal, ratio: carrierAbnormal / total, color: COLOR_ABNORMAL }
+    ]
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    const { width, height } = this.bounds
+
+    if (width >= height) {
+      this.renderLandscape(context)
+    } else {
+      this.renderPortrait(context)
+    }
+  }
+
+  renderPortrait(context: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+    const { lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
+    const segments = this.segments
+
+    context.save()
+    context.translate(left, top)
+
+    // background
+    context.beginPath()
+    context.fillStyle = fillStyle
+    context.roundRect(0, 0, width, height, round)
+    context.fill()
+    context.clip()
+
+    // segments (아래→위: Abnormal이 아래, Normal이 위)
+    let y = height
+    for (const seg of [...segments].reverse()) {
+      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)
+    }
+
+    // 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()
+  }
+
+  renderLandscape(context: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+    const { lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
+    const segments = this.segments
+
+    context.save()
+    context.translate(left, top)
+
+    // background
+    context.beginPath()
+    context.fillStyle = fillStyle
+    context.roundRect(0, 0, width, height, round)
+    context.fill()
+    context.clip()
+
+    // segments (왼→오)
+    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
+    }
+
+    // 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()
+  }
+
+  private _drawSegmentLabel(
+    context: CanvasRenderingContext2D,
+    seg: Segment,
+    x: number,
+    y: number,
+    w: number,
+    h: number
+  ) {
+    const percent = Math.round(seg.ratio * 100)
+    const lines = [seg.label, `${percent}%`]
+
+    const fontSize = Math.max(9, Math.min(14, Math.min(w, h) * 0.22))
+    context.font = `bold ${fontSize}px sans-serif`
+    context.fillStyle = '#333'
+    context.textAlign = 'center'
+    context.textBaseline = 'middle'
+
+    const lineHeight = fontSize * 1.2
+    const totalHeight = lines.length * lineHeight
+    const startY = y + (h - totalHeight) / 2 + lineHeight / 2
+
+    for (let i = 0; i < lines.length; i++) {
+      context.fillText(lines[i], x + w / 2, startY + i * lineHeight)
+    }
+  }
+
+  onchangeData(after: Record<string, any>, before: Record<string, any>): void {
+    const {
+      CARRIER_NORMAL = 0,
+      CARRIER_ABNORMAL = 0
+    } = typeof this.data == 'object' ? this.data : {}
+
+    this.setState({
+      carrierNormal: Number(CARRIER_NORMAL) || 0,
+      carrierAbnormal: Number(CARRIER_ABNORMAL) || 0
+    })
+  }
+}

package/src/stocker-capacity-bar.ts

@@ -113,7 +113,7 @@ export default class StockerCapacityBar extends ParentObjectMixin(MCSStatusMixin
     const { legendName } = this.state
 
     if (legendName) {
-      return this.root?.style?.[legendName]
+      return (this.root as any)?.style?.[legendName]
     }
   }
 
@@ -122,7 +122,7 @@ export default class StockerCapacityBar extends ParentObjectMixin(MCSStatusMixin
   }
 
   getLegendFallback() {
-    return this.root.stockerCapacityLegendTheme || LEGEND_CAPACITY
+    return (this.root as any).stockerCapacityLegendTheme || LEGEND_CAPACITY
   }
 
   get statusColor() {
@@ -297,7 +297,7 @@ export default class StockerCapacityBar extends ParentObjectMixin(MCSStatusMixin
     // intentionally have done nothing
   }
 
-  onchangeData(after: Properties, before: Properties): void {
+  onchangeData(after: Record<string, any>, before: Record<string, any>): void {
     const {
       CURRENTCAPACITY = 0,
       MAXCAPACITY = 100,