@fmsim/machine 1.0.17 → 1.0.18

package/src/mcs-carrier-holder.ts

@@ -1,16 +1,20 @@
+import JSON5 from 'json5'
+
 import { BOUNDS, Component } from '@hatiolab/things-scene'
-import { themesColorMap } from '@fmsim/api'
-import { LEGEND_CARRIER, Legend } from './features/mcs-status-default'
-import { MCSStatusMixin } from './features/mcs-status-mixin'
-import MCSUnit from './mcs-unit'
+import { themesColorMap, themesAnimationMap } from '@fmsim/api'
+import { ANIMATION_DEFAULT, AnimationPreset, AnimationConfig } from './features/animation-default.js'
+import { LEGEND_CARRIER, Legend } from './features/mcs-status-default.js'
+import { MCSStatusMixin } from './features/mcs-status-mixin.js'
+import MCSUnit from './mcs-unit.js'
 
 export class Carrier extends MCSStatusMixin(Object) {
   host: Component
 
   id?: string
-  type: ('ALL' | 'BOBIN' | 'MAGAZINE' | 'PALLET' | 'REEL_TRAY' | 'PLATE')[] = []
-  // emptyType?: '5000' | '5001' | '5002' // 'Full' | 'Empty' | 'EmptyEmpty'
-  emptyType?: 'Full' | 'Empty' | 'EmptyEmpty'
+  emptyType?: 'FULL' | 'EMPTY' | 'EMPTYEMPTY'
+  carrierStatus?: string
+
+  lastCarrierStatus?: string
 
   constructor(host: Component) {
     super()
@@ -18,11 +22,71 @@ export class Carrier extends MCSStatusMixin(Object) {
   }
 
   set data(data: any) {
-    const { CARRIERID, CARRIERTYPE = '', EMPTYTYPE } = data || {}
+    const { CARRIERNAME, CARRIERTYPE = '', EMPTYTYPE, CARRIERSTATUS } = data || {}
 
-    this.id = CARRIERID
-    this.type = CARRIERTYPE.split(';')
+    this.id = CARRIERNAME
     this.emptyType = EMPTYTYPE
+    this.carrierStatus = CARRIERSTATUS
+
+    // TODO carrierstatus에 따라서 매핑되는 애니메이션 테마 수행
+    if (this.lastCarrierStatus !== this.carrierStatus) {
+      const lastAnimationConfig = this.getAnimationConfig(this.lastCarrierStatus)
+      const target = this.host as any
+
+      if (lastAnimationConfig) {
+        let { animation, decorator, border, arrow } = lastAnimationConfig
+        if (animation) {
+          target.started = false
+          target._animation = null
+          target.setState('animation', {
+            oncreate: null
+          })
+        }
+
+        if (decorator) {
+          target.trigger('iconoff')
+        }
+
+        if (border) {
+          target.trigger('borderoff')
+        }
+
+        if (arrow) {
+          target.trigger('bouncingoff')
+        }
+      }
+
+      const animationConfig = this.getAnimationConfig(this.carrierStatus)
+
+      if (animationConfig) {
+        let { animation, decorator, border, arrow } = animationConfig
+        if (animation) {
+          target.started = false
+          target._animation = null
+          target.setState('animation', {
+            oncreate: animation
+          })
+          target.started = true
+        }
+
+        if (decorator) {
+          target.trigger('iconoff')
+          target.trigger('icon', decorator)
+        }
+
+        if (border) {
+          target.trigger('borderoff')
+          target.trigger('border', border)
+        }
+
+        if (arrow) {
+          target.trigger('bouncingoff')
+          target.trigger('bouncing', arrow)
+        }
+      }
+    }
+
+    this.lastCarrierStatus = this.carrierStatus
   }
 
   get status() {
@@ -39,6 +103,32 @@ export class Carrier extends MCSStatusMixin(Object) {
     return LEGEND_CARRIER
   }
 
+  getAnimationConfig(carrierStatus): AnimationConfig | null {
+    const config = this.animationPreset[carrierStatus || 'default']
+
+    if (config && typeof config == 'string') {
+      try {
+        return JSON5.parse(config)
+      } catch (e) {
+        console.error(e)
+      }
+    } else {
+      return (config as AnimationConfig) || null
+    }
+
+    return null
+  }
+
+  get animationPreset(): AnimationPreset {
+    const { carrierAnimationName } = this.host.state
+
+    if (carrierAnimationName) {
+      return (this.host.root as any)?.style[carrierAnimationName] || ANIMATION_DEFAULT
+    }
+
+    return ANIMATION_DEFAULT
+  }
+
   calculateShrunkRectangle(originalRect: BOUNDS): BOUNDS {
     const shrunkRect: BOUNDS = { ...originalRect }
 
@@ -116,19 +206,19 @@ export class Carrier extends MCSStatusMixin(Object) {
 
     ctx.beginPath()
 
-    const text =
-      this.emptyType == 'Full' ? 'F' : this.emptyType == 'Empty' ? 'E' : this.emptyType == 'EmptyEmpty' ? 'X' : ''
+    // const text =
+    //   this.emptyType == 'FULL' ? 'F' : this.emptyType == 'EMPTY' ? 'E' : this.emptyType == 'EMPTYEMPTY' ? 'X' : ''
 
-    if (text) {
-      const { x: cx, y: cy } = this.host.center
+    // if (text) {
+    //   const { x: cx, y: cy } = this.host.center
 
-      ctx.fillStyle = 'black'
-      ctx.font = `normal ${Math.round(radius * 8)}px Arial`
-      ctx.textAlign = 'center'
-      ctx.textBaseline = 'middle'
+    //   ctx.fillStyle = 'black'
+    //   ctx.font = `normal ${Math.round(radius * 8)}px Arial`
+    //   ctx.textAlign = 'center'
+    //   ctx.textBaseline = 'middle'
 
-      ctx.fillText(text, cx - width / 8, cy + height / 8)
-    }
+    //   ctx.fillText(text, cx - width / 8, cy + height / 8)
+    // }
   }
 }
 
@@ -143,6 +233,14 @@ export default class MCSCarrierHolder extends MCSUnit {
         property: {
           options: themesColorMap
         }
+      },
+      {
+        type: 'select',
+        label: 'carrier-animation-name',
+        name: 'carrierAnimationName',
+        property: {
+          options: themesAnimationMap
+        }
       }
     ]
   }

package/src/port-flow.ts

@@ -12,7 +12,7 @@ const NATURE: ComponentNature = {
       name: 'orientation',
       label: 'orientation',
       property: {
-        options: ['left-right', 'right-left', 'top-bottom', 'bottom-top']
+        options: ['left to right', 'right to left', 'top to bottom', 'bottom to top']
       }
     },
     {
@@ -28,7 +28,7 @@ const NATURE: ComponentNature = {
       name: 'direction',
       label: 'direction',
       property: {
-        options: ['in', 'out', 'inout']
+        options: ['IN', 'OUT', 'BOTH']
       }
     }
   ]
@@ -78,19 +78,25 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
   }
 
   get text() {
-    const { direction = 'in' } = this.state
+    const { direction = 'IN' } = this.state
 
     return direction.toUpperCase()
   }
 
   render(ctx) {
     const { left, top, width, height } = this.bounds
-    const { orientation = 'left-right', direction = 'in' }: { orientation?: string; direction?: string } = this.state
+    var { orientation = 'left to right', direction = 'IN' }: { orientation?: string; direction?: string } = this.state
+    const { INOUTTYPE } = this.data
+
+    if (INOUTTYPE) {
+      // TODO bothtype value 조정하기.
+      direction = INOUTTYPE /* IN | OUT | BOTH */
+    }
 
     ctx.beginPath()
 
     const arrowSize = Math.min(width, height) * 0.3
-    const bodyWidth = orientation === 'left-right' || orientation === 'right-left' ? height * 0.2 : width * 0.2
+    const bodyWidth = orientation === 'left to right' || orientation === 'right to left' ? height * 0.2 : width * 0.2
     const centerX = left + width / 2
     const centerY = top + height / 2
 
@@ -98,26 +104,26 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
     let reverse = 1
 
     switch (orientation) {
-      case 'left-right':
+      case 'left to right':
         startX = left
         endX = left + width
         startY = centerY
         endY = centerY
         break
-      case 'right-left':
+      case 'right to left':
         startX = left + width
         endX = left
         startY = centerY
         endY = centerY
         reverse = -1
         break
-      case 'top-bottom':
+      case 'top to bottom':
         startX = centerX
         endX = centerX
         startY = top
         endY = top + height
         break
-      case 'bottom-top':
+      case 'bottom to top':
         startX = centerX
         endX = centerX
         startY = top + height
@@ -129,7 +135,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
     ctx.lineTo(startX, startY)
 
     if (orientation.includes('left')) {
-      if (direction === 'out' || direction === 'inout') {
+      if (direction === 'OUT' || direction === 'BOTH') {
         ctx.lineTo(startX + arrowSize * reverse, startY - bodyWidth * reverse * 2)
       } else {
         ctx.lineTo(startX, startY - bodyWidth * reverse)
@@ -138,7 +144,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
       ctx.lineTo(startX + arrowSize * reverse, startY - bodyWidth * reverse)
       ctx.lineTo(endX - arrowSize * reverse, endY - bodyWidth * reverse)
 
-      if (direction === 'in' || direction === 'inout') {
+      if (direction === 'IN' || direction === 'BOTH') {
         ctx.lineTo(endX - arrowSize * reverse, endY - bodyWidth * 2 * reverse)
       } else {
         ctx.lineTo(endX, endY - bodyWidth * reverse)
@@ -146,7 +152,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
 
       ctx.lineTo(endX, endY)
 
-      if (direction === 'in' || direction === 'inout') {
+      if (direction === 'IN' || direction === 'BOTH') {
         ctx.lineTo(endX - arrowSize * reverse, endY + bodyWidth * 2 * reverse)
       } else {
         ctx.lineTo(endX, endY + bodyWidth * reverse)
@@ -155,13 +161,13 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
       ctx.lineTo(endX - arrowSize * reverse, endY + bodyWidth * reverse)
       ctx.lineTo(startX + arrowSize * reverse, startY + bodyWidth * reverse)
 
-      if (direction === 'out' || direction === 'inout') {
+      if (direction === 'OUT' || direction === 'BOTH') {
         ctx.lineTo(startX + arrowSize * reverse, startY + bodyWidth * 2 * reverse)
       } else {
         ctx.lineTo(startX, startY + bodyWidth * reverse)
       }
     } else {
-      if (direction === 'out' || direction === 'inout') {
+      if (direction === 'OUT' || direction === 'BOTH') {
         ctx.lineTo(startX - bodyWidth * reverse * 2, startY + arrowSize * reverse)
       } else {
         ctx.lineTo(startX - bodyWidth * reverse, startY)
@@ -170,7 +176,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
       ctx.lineTo(startX - bodyWidth * reverse, startY + arrowSize * reverse)
       ctx.lineTo(endX - bodyWidth * reverse, endY - arrowSize * reverse)
 
-      if (direction === 'in' || direction === 'inout') {
+      if (direction === 'IN' || direction === 'BOTH') {
         ctx.lineTo(endX - bodyWidth * 2 * reverse, endY - arrowSize * reverse)
       } else {
         ctx.lineTo(endX - bodyWidth * reverse, endY)
@@ -178,7 +184,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
 
       ctx.lineTo(endX, endY)
 
-      if (direction === 'in' || direction === 'inout') {
+      if (direction === 'IN' || direction === 'BOTH') {
         ctx.lineTo(endX + bodyWidth * 2 * reverse, endY - arrowSize * reverse)
       } else {
         ctx.lineTo(endX + bodyWidth * reverse, endY)
@@ -187,7 +193,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
       ctx.lineTo(endX + bodyWidth * reverse, endY - arrowSize * reverse)
       ctx.lineTo(startX + bodyWidth * reverse, startY + arrowSize * reverse)
 
-      if (direction === 'out' || direction === 'inout') {
+      if (direction === 'OUT' || direction === 'BOTH') {
         ctx.lineTo(startX + bodyWidth * 2 * reverse, startY + arrowSize * reverse)
       } else {
         ctx.lineTo(startX + bodyWidth * reverse, startY)

package/translations/en.json

@@ -4,6 +4,7 @@
   "label.high-watermark": "high watermark",
   "label.legend-name": "legend",
   "label.max-capacity": "max capacity",
+  "label.carrier-animation-name": "carrier animation",
   "label.carrier-legend-name": "carrier legend",
   "label.sc-state": "sc state",
   "label.full-rate": "full rate",

package/translations/ja.json

@@ -5,6 +5,7 @@
   "label.low-watermark": "low watermark",
   "label.legend-name": "legend",
   "label.max-capacity": "max capacity",
+  "label.carrier-animation-name": "carrier animation",
   "label.carrier-legend-name": "carrier legend",
   "label.sc-state": "sc state",
   "label.full-rate": "full rate",

package/translations/ko.json

@@ -5,7 +5,8 @@
   "label.low-watermark": "저수위워터마크",
   "label.legend-name": "레전드",
   "label.max-capacity": "최대 용량",
-  "label.carrier-legend-name": "캐리어레전드",
+  "label.carrier-animation-name": "캐리어 애니메이션",
+  "label.carrier-legend-name": "캐리어 레전드",
   "label.sc-state": "sc state",
   "label.full-rate": "full rate",
   "label.reserved-carrier": "reserved carrier",

package/translations/ms.json

@@ -5,6 +5,7 @@
   "label.low-watermark": "low watermark",
   "label.legend-name": "legend",
   "label.max-capacity": "max capacity",
+  "label.carrier-animation-name": "carrier animation",
   "label.carrier-legend-name": "carrier legend",
   "label.sc-state": "sc state",
   "label.full-rate": "full rate",

package/translations/zh.json

@@ -5,6 +5,7 @@
   "label.low-watermark": "low watermark",
   "label.legend-name": "legend",
   "label.max-capacity": "max capacity",
+  "label.carrier-animation-name": "carrier animation",
   "label.carrier-legend-name": "carrier legend",
   "label.sc-state": "sc state",
   "label.full-rate": "full rate",