@fmsim/machine 1.0.87 → 2.0.0-beta.10

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,

package/src/stocker-carrier-bar.ts

@@ -0,0 +1,257 @@
+import {
+  Component,
+  ComponentNature,
+  POSITION,
+  RectPath,
+  Shape,
+  sceneComponent
+} from '@hatiolab/things-scene'
+import { LEGEND_CARRIER } from './features/mcs-status-default'
+import { safeRound } from './utils/safe-round'
+import { ParentObjectMixin, ParentObjectMixinProperties } from './features/parent-object-mixin'
+
+/**
+ * 캐리어 상태별 비율 게이지 (Full / Empty / EmptyEmpty)
+ *
+ * 스토커에 보관된 캐리어들의 상태 비율을 세그먼트 게이지로 표시한다.
+ * Portrait(세로) 모드에서는 아래→위, Landscape(가로) 모드에서는 왼→오 방향으로 채운다.
+ */
+
+interface Segment {
+  label: string
+  count: number
+  ratio: number
+  color: string
+}
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    ...ParentObjectMixinProperties,
+    {
+      type: 'number',
+      name: 'carrierFull',
+      label: 'carrier-full'
+    },
+    {
+      type: 'number',
+      name: 'carrierEmpty',
+      label: 'carrier-empty'
+    },
+    {
+      type: 'number',
+      name: 'carrierEmptyEmpty',
+      label: 'carrier-empty-empty'
+    },
+    {
+      type: 'number',
+      label: 'round',
+      name: 'round',
+      property: {
+        min: 0
+      }
+    }
+  ]
+}
+
+const DEFAULT_COLORS = {
+  full: LEGEND_CARRIER['FULL'] || '#4AA7FE',
+  empty: LEGEND_CARRIER['EMPTY'] || '#8BDA5B',
+  emptyEmpty: LEGEND_CARRIER['EMPTYEMPTY'] || '#019D59'
+}
+
+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('StockerCarrierBar')
+export default class StockerCarrierBar 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 { carrierFull = 0, carrierEmpty = 0, carrierEmptyEmpty = 0 } = this.state
+    const total = carrierFull + carrierEmpty + carrierEmptyEmpty
+
+    if (total === 0) {
+      return [
+        { label: 'Full', count: 0, ratio: 0, color: DEFAULT_COLORS.full },
+        { label: 'Empty', count: 0, ratio: 0, color: DEFAULT_COLORS.empty },
+        { label: 'Empty\nEmpty', count: 0, ratio: 0, color: DEFAULT_COLORS.emptyEmpty }
+      ]
+    }
+
+    return [
+      { label: 'Full', count: carrierFull, ratio: carrierFull / total, color: DEFAULT_COLORS.full },
+      { label: 'Empty', count: carrierEmpty, ratio: carrierEmpty / total, color: DEFAULT_COLORS.empty },
+      { label: 'Empty\nEmpty', count: carrierEmptyEmpty, ratio: carrierEmptyEmpty / total, color: DEFAULT_COLORS.emptyEmpty }
+    ]
+  }
+
+  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 (아래→위)
+    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()
+
+      // label
+      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.split('\n')
+    lines.push(`${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_FULL = 0,
+      CARRIER_EMPTY = 0,
+      CARRIER_EMPTY_EMPTY = 0
+    } = typeof this.data == 'object' ? this.data : {}
+
+    this.setState({
+      carrierFull: Number(CARRIER_FULL) || 0,
+      carrierEmpty: Number(CARRIER_EMPTY) || 0,
+      carrierEmptyEmpty: Number(CARRIER_EMPTY_EMPTY) || 0
+    })
+  }
+}

package/src/stocker.ts

@@ -34,19 +34,19 @@ export default class Stocker extends MCSTransport {
   }
 
   getLegendFallback() {
-    return this.root.stokerLegendTheme || super.getLegendFallback()
+    return (this.root as any).stokerLegendTheme || super.getLegendFallback()
   }
 
   containable(component: Component) {
     return (
       super.containable(component) ||
-      ['Crane', 'Shelf', 'Port', 'MCSGaugeCapacityBar', 'StockerCapacityBar', 'ZoneCapacityBar'].includes(
+      ['Crane', 'CraneRail', 'Shelf', 'Port', 'MCSGaugeCapacityBar', 'StockerCapacityBar', 'StockerCarrierBar', 'StockerAbnormalBar', 'ZoneCapacityBar'].includes(
         component.state.type
       )
     )
   }
 
-  onchangeData(after: Properties, before: Properties): void {
+  onchangeData(after: Record<string, any>, before: Record<string, any>): void {
     /* non-identifiable component 즉, StockerCapacityBar 에게 데이터를 전달함 */
     this.components.filter(component => !component.isIdentifiable()).forEach(component => (component.data = this.data))
   }

package/src/zone-capacity-bar.ts

@@ -99,7 +99,7 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
   }
 
   getLegendFallback() {
-    return this.root.zoneCapacityLegendTheme || LEGEND_CAPACITY
+    return (this.root as any).zoneCapacityLegendTheme || LEGEND_CAPACITY
   }
 
   get statusColor() {
@@ -275,7 +275,7 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
     // 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,