@fmsim/machine 1.0.57 → 1.0.59

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fmsim/machine",
   "description": "Layout View를 구성하는 설비(machine)들과 유닛을 구현한 모듈입니다.",
   "author": "heartyoh",
-  "version": "1.0.57",
+  "version": "1.0.59",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -54,5 +54,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "3a0d8544748a35b293cdfe299d1d790884d85f5b"
+  "gitHead": "10f16c81ddcca25469e0f87b6edc8b45f07f1f46"
 }

package/src/agv.ts

@@ -1,11 +1,24 @@
 import { Component, ComponentNature, Properties } from '@hatiolab/things-scene'
+import { themesColorRange } from '@fmsim/api'
 import MCSVehicle from './mcs-vehicle'
+import { getVaueOnRanges } from './utils/get-value-on-ranges'
+import { BATTERY_RATE_LEGEND } from './features/mcs-status-default'
 
 const NATURE: ComponentNature = {
   mutable: false,
   resizable: true,
   rotatable: true,
-  properties: [...MCSVehicle.properties]
+  properties: [
+    ...MCSVehicle.properties,
+    {
+      type: 'select',
+      label: 'battery-rate-legend-name',
+      name: 'batteryRateLegendName',
+      property: {
+        options: themesColorRange
+      }
+    }
+  ]
 }
 
 const GAP = 2
@@ -22,22 +35,40 @@ export default class AGV extends MCSVehicle {
     return this.root.agvLegendTheme || super.getLegendFallback()
   }
 
+  getBatteryLegendFallback() {
+    return this.root.batteryRateLegendTheme || BATTERY_RATE_LEGEND
+  }
+
+  getBatteryLegendTheme() {
+    const { batteryRateLegendName } = this.state
+
+    if (batteryRateLegendName) {
+      return this.root?.style?.[batteryRateLegendName]
+    }
+  }
+
+  getBatteryColor(rate: number) {
+    return getVaueOnRanges(rate, this.getBatteryLegendTheme() || this.getBatteryLegendFallback())
+  }
+
   render(ctx: CanvasRenderingContext2D) {
     var { left, top, width, height } = this.bounds
 
     ctx.translate(left, top)
     ctx.beginPath()
 
+    // 작은 크기에서도 보이도록 최소 선 두께 설정
+    const minLineWidth = 0.5
+    const scaleFactor = Math.min(width, height) / 100
+    const lineWidth = Math.max(minLineWidth, scaleFactor)
+
     ctx.strokeStyle = this.auxColor
     ctx.fillStyle = this.statusColor!
-    ctx.lineWidth = 1
+    ctx.lineWidth = lineWidth
     ctx.lineCap = 'round'
     ctx.setLineDash([])
 
-    // Performance aware
-    // const radius = Math.round(Math.min(width, height) * 0.1)
-    // ctx.roundRect(1, 0, width - 2, height, radius)
-    // ctx.roundRect(GAP + 1, GAP, width - (GAP + 1) * 2, height - GAP * 2, radius - 1)
+    // 기본 사각형 그리기
     ctx.rect(1, 0, width - 2, height)
     ctx.rect(GAP + 1, GAP, width - (GAP + 1) * 2, height - GAP * 2)
 
@@ -46,7 +77,7 @@ export default class AGV extends MCSVehicle {
 
     ctx.beginPath()
 
-    // draw wheel metapore
+    // 바퀴 그리기
     ctx.strokeStyle = 'black'
 
     ctx.moveTo(0, (height * 1) / 3)
@@ -59,23 +90,109 @@ export default class AGV extends MCSVehicle {
     ctx.translate(-left, -top)
   }
 
+  // 사선 패턴을 그리는 함수
+  drawHatchPattern(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number) {
+    // 크기에 따라 패턴 간격과 선 두께 조정 (2배 덜 조밀하게)
+    const minSpacing = 4 // 최소 간격 2배 증가 (원래 2의 2배)
+    const maxSpacing = 16 // 최대 간격 2배 증가 (원래 8의 2배)
+    const preferredSpacing = Math.max(minSpacing, Math.min(width, height) / 5) // 간격 계산 시 나누는 값 1/2로 감소
+    const spacing = Math.min(preferredSpacing, maxSpacing)
+
+    // 선 두께 계산 (작은 크기에서도 보이도록)
+    const minLineWidth = 0.35
+    const scaleFactor = Math.min(width, height) / 130
+    const lineWidth = Math.max(minLineWidth, scaleFactor)
+
+    ctx.beginPath()
+    ctx.strokeStyle = 'black'
+    ctx.lineWidth = lineWidth
+
+    // 배터리 박스 내부로 클리핑 설정
+    ctx.save()
+    ctx.rect(x, y, width, height)
+    ctx.clip()
+
+    // 사선 패턴 그리기
+    for (let i = -height; i < width + height; i += spacing) {
+      ctx.moveTo(x + i, y)
+      ctx.lineTo(x + i - height, y + height)
+    }
+
+    ctx.stroke()
+    // 클리핑 해제
+    ctx.restore()
+  }
+
   postrender(ctx: CanvasRenderingContext2D): void {
     super.postrender(ctx)
 
     const BATTERYRATE = this.data?.BATTERYRATE
 
-    if (typeof BATTERYRATE == 'number') {
+    if (typeof BATTERYRATE === 'number') {
       const { left, top, width, height } = this.bounds
       ctx.translate(left, top)
 
-      const batteryHeight = height / 5
-      const batteryMargin = 1
-      const batteryWidth = width - 2 * batteryMargin
+      // 배터리 크기 및 위치 설정 (최소 크기 보장)
+      const minBatteryHeight = 2
+      const minBatteryWidth = 4
+      const preferredHeight = height / 5
+      const preferredWidth = (width * 3) / 4
+
+      const batteryHeight = Math.max(minBatteryHeight, preferredHeight)
+      const batteryWidth = Math.max(minBatteryWidth, preferredWidth)
+      const batteryX = (width - batteryWidth) / 2
+      const batteryY = (height - batteryHeight) * 1.1
+
+      // 배터리 테두리 그리기 (크기에 비례한 선 두께)
+      const minLineWidth = 0.5
+      const scaleFactor = Math.min(width, height) / 100
+      const lineWidth = Math.max(minLineWidth, scaleFactor)
+
+      // 배터리 배경을 흰색으로 채우기
+      ctx.fillStyle = 'white'
+      ctx.fillRect(batteryX, batteryY, batteryWidth, batteryHeight)
+
+      // 배터리 전체 영역에 사선 패턴 그리기
+      this.drawHatchPattern(ctx, batteryX, batteryY, batteryWidth, batteryHeight)
+
+      // 배터리 잔량 표시
+      const fillWidth = (batteryWidth * BATTERYRATE) / 100
 
+      // 배터리 잔량에 따른 색상 설정 - 테마 적용
+      ctx.fillStyle = this.getBatteryColor(BATTERYRATE)
+
+      // 배터리 잔량 영역 채우기
+      ctx.fillRect(batteryX, batteryY, fillWidth, batteryHeight)
+
+      // 배터리 테두리 다시 그리기
+      ctx.beginPath()
+      ctx.strokeStyle = 'black'
+      ctx.lineWidth = lineWidth
+      ctx.strokeRect(batteryX, batteryY, batteryWidth, batteryHeight)
+
+      // 배터리 잔량 텍스트 표시
+      // const textWidth = batteryWidth * 0.7
+      // const textHeight = batteryHeight * 0.7
+      // const textBgX = batteryX + (batteryWidth - textWidth) / 2
+      // const textBgY = batteryY + (batteryHeight - textHeight) / 2
+
+      // ctx.fillStyle = 'white'
+      // ctx.fillRect(textBgX, textBgY, textWidth, textHeight)
+
+      // 텍스트 그리기
+      ctx.font = `4px Roboto, Arial, sans-serif`
       ctx.fillStyle = 'black'
-      ctx.fillRect(batteryMargin, height - batteryHeight, batteryWidth, batteryHeight)
-      ctx.fillStyle = BATTERYRATE < 20 ? 'red' : BATTERYRATE < 40 ? 'yellow' : 'green'
-      ctx.fillRect(batteryMargin, height - batteryHeight, (batteryWidth * BATTERYRATE) / 100, batteryHeight)
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+
+      // 배터리 잔량 텍스트 (정수 + % 포함)
+      const text = `${Math.round(BATTERYRATE)}%`
+
+      // 텍스트 위치 (배터리 중앙)
+      const textX = batteryX + batteryWidth / 2
+      const textY = height // batteryY + batteryHeight // / 2
+
+      ctx.fillText(text, textX, textY)
 
       ctx.translate(-left, -top)
     }

package/src/carrier.ts

@@ -150,9 +150,9 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
   }
 
   contains(x, y) {
-    const EMPTYTYPE = this.getState('EMPTYTYPE')
+    const { id: CARRIERNAME } = this.state || {}
 
-    if (!EMPTYTYPE) {
+    if (!CARRIERNAME) {
       return false
     }
 
@@ -183,9 +183,9 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
   }
 
   render(ctx: CanvasRenderingContext2D) {
-    const { EMPTYTYPE, showText } = this.state
+    const { EMPTYTYPE, id: CARRIERNAME, showText } = this.state
 
-    if (!EMPTYTYPE) {
+    if (!CARRIERNAME) {
       return
     }
 

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

@@ -67,3 +67,11 @@ export const LEGEND_CAPACITY: Legend = {
   '80~100': '#FD9B00',
   default: '#F0F0F0'
 }
+
+export const BATTERY_RATE_LEGEND: Legend = {
+  '0~20': '#EB3245', // 0-20%: 빨간색 (위험)
+  '20~40': '#FD9B00', // 20-40%: 주황색 (경고)
+  '40~60': '#F4F226', // 40-60%: 노란색 (주의)
+  '60~100': '#8BDA5B', // 60-100%: 녹색 (정상)
+  default: '#F0F0F0'
+}

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

@@ -10,6 +10,7 @@ declare module '@hatiolab/things-scene' {
     carrierAnimationTheme?: any
     stockerCapacityLegendTheme?: any
     zoneCapacityLegendTheme?: any
+    batteryRateLegendTheme?: any
     bufferLegendTheme?: any
     agvlineLegendTheme?: any
     ohtlineLegendTheme?: any
@@ -183,6 +184,14 @@ Object.defineProperty(ModelLayer.prototype, 'nature', {
           property: {
             options: themesColorRange
           }
+        },
+        {
+          type: 'select',
+          label: 'battery-rate-legend-name',
+          name: 'batteryRateLegendName',
+          property: {
+            options: themesColorRange
+          }
         }
       ],
       'value-property': 'text'
@@ -302,6 +311,13 @@ Object.defineProperty(RootContainer.prototype, 'zoneCapacityLegendTheme', {
   }
 })
 
+Object.defineProperty(RootContainer.prototype, 'batteryRateLegendTheme', {
+  get: function () {
+    const { batteryRateLegendName } = this.rootModel.state
+    return batteryRateLegendName && this.state.style[batteryRateLegendName]
+  }
+})
+
 Object.defineProperty(RootContainer.prototype, 'vehicleAnimation', {
   get: function () {
     const { vehicleAnimation } = this.rootModel.state

package/src/templates/index.ts

@@ -18,7 +18,6 @@ import ohtLine from './oht-line'
 import conveyor from './conveyor'
 
 import Node from './node'
-import NodePath from './node-path'
 import DataSubscription from './data-subscription'
 
 export default [
@@ -42,6 +41,5 @@ export default [
   Port,
 
   Node,
-  NodePath,
   DataSubscription
 ]

package/translations/en.json

@@ -45,5 +45,6 @@
   "label.equipment-legend-name": "equipment",
   "label.node-machine": "node machine",
   "label.nodes": "nodes",
-  "label.vehicle-animation": "vehicle animation"
+  "label.vehicle-animation": "vehicle animation",
+  "label.battery-rate-legend-name": "battery rate"
 }

package/translations/ja.json

@@ -47,5 +47,6 @@
   "label.equipment-legend-name": "equipment",
   "label.node-machine": "node machine",
   "label.nodes": "nodes",
-  "label.vehicle-animation": "vehicle animation"
+  "label.vehicle-animation": "vehicle animation",
+  "label.battery-rate-legend-name": "battery rate"
 }

package/translations/ko.json

@@ -48,5 +48,6 @@
   "label.equipment-legend-name": "장비",
   "label.node-machine": "node machine",
   "label.nodes": "nodes",
-  "label.vehicle-animation": "vehicle animation"
+  "label.vehicle-animation": "vehicle animation",
+  "label.battery-rate-legend-name": "배터리 잔량"
 }

package/translations/ms.json

@@ -47,5 +47,6 @@
   "label.equipment-legend-name": "equipment",
   "label.node-machine": "node machine",
   "label.nodes": "nodes",
-  "label.vehicle-animation": "vehicle animation"
+  "label.vehicle-animation": "vehicle animation",
+  "label.battery-rate-legend-name": "battery rate"
 }

package/translations/zh.json

@@ -47,5 +47,6 @@
   "label.equipment-legend-name": "equipment",
   "label.node-machine": "node machine",
   "label.nodes": "nodes",
-  "label.vehicle-animation": "vehicle animation"
+  "label.vehicle-animation": "vehicle animation",
+  "label.battery-rate-legend-name": "battery rate"
 }