@fmsim/machine 1.0.17 → 1.0.19

package/src/carrier.ts

@@ -0,0 +1,213 @@
+import JSON5 from 'json5'
+
+import { BOUNDS, Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
+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'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: false,
+  rotatable: false
+}
+
+export default class Carrier extends MCSStatusMixin(Shape) {
+  static get nature() {
+    return NATURE
+  }
+
+  id?: string
+  emptyType?: 'FULL' | 'EMPTY' | 'EMPTYEMPTY'
+  carrierStatus?: string
+
+  get path() {
+    const { left, top, width, height } = this.calculateShrunkRectangle(this.parent.bounds)
+
+    return [
+      { x: left, y: top },
+      { x: left + width / 2, y: top },
+      { x: left + width, y: top + height / 2 },
+      { x: left + width, y: top + height },
+      { x: left, y: top + height }
+    ]
+  }
+
+  set path(path) {}
+
+  onchangeData(after, before) {
+    const { CARRIERNAME, CARRIERTYPE = '', EMPTYTYPE, CARRIERSTATUS } = this.data || {}
+
+    this.setState('id', CARRIERNAME)
+
+    this.emptyType = EMPTYTYPE
+    this.carrierStatus = CARRIERSTATUS
+
+    // TODO carrierstatus에 따라서 매핑되는 애니메이션 테마 수행
+    if (after.data.CARRIERSTATUS !== before.data?.CARRIERSTATUS) {
+      const { CARRIERSTATUS: lastCarrierStatus } = before.data || {}
+      const lastAnimationConfig = lastCarrierStatus && this.getAnimationConfig(lastCarrierStatus)
+
+      if (lastAnimationConfig) {
+        let { animation, decorator, border, arrow } = lastAnimationConfig
+        if (animation) {
+          ;(this as any).started = false
+          ;(this as any)._animation = null
+          this.setState('animation', {
+            oncreate: null
+          })
+        }
+
+        if (decorator) {
+          this.trigger('iconoff')
+        }
+
+        if (border) {
+          this.trigger('borderoff')
+        }
+
+        if (arrow) {
+          this.trigger('bouncingoff')
+        }
+      }
+
+      const animationConfig = this.getAnimationConfig(this.carrierStatus)
+
+      if (animationConfig) {
+        let { animation, decorator, border, arrow } = animationConfig
+        if (animation) {
+          ;(this as any).started = false
+          ;(this as any)._animation = null
+          this.setState('animation', {
+            oncreate: animation
+          })
+          ;(this as any).started = true
+        }
+
+        if (decorator) {
+          this.trigger('iconoff')
+          this.trigger('icon', decorator)
+        }
+
+        if (border) {
+          this.trigger('borderoff')
+          this.trigger('border', border)
+        }
+
+        if (arrow) {
+          this.trigger('bouncingoff')
+          this.trigger('bouncing', arrow)
+        }
+      }
+    }
+  }
+
+  get status() {
+    return this.emptyType
+  }
+
+  get legend(): Legend {
+    const { carrierLegendName } = this.parent?.state || {}
+
+    if (carrierLegendName) {
+      return (this.root as any)?.style[carrierLegendName]
+    }
+
+    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.parent?.state || {}
+
+    if (carrierAnimationName) {
+      return (this.parent.root as any)?.style[carrierAnimationName] || ANIMATION_DEFAULT
+    }
+
+    return ANIMATION_DEFAULT
+  }
+
+  calculateShrunkRectangle(originalRect: BOUNDS): BOUNDS {
+    const shrunkRect: BOUNDS = { ...originalRect }
+
+    shrunkRect.left = originalRect.width * 0.1
+    shrunkRect.width *= 0.8
+
+    shrunkRect.top = originalRect.height * 0.1
+    shrunkRect.height *= 0.8
+
+    return shrunkRect
+  }
+
+  contains(x, y) {
+    if (!this.emptyType) {
+      return false
+    }
+
+    const rect = this.bounds
+    x -= rect.left
+    y -= rect.top
+
+    if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+      return false
+    }
+
+    // 윗변 중앙 좌표
+    const topCenterX = rect.width / 2
+    const topCenterY = 0
+
+    // 오른쪽 변 중앙 좌표
+    const rightCenterX = rect.width
+    const rightCenterY = rect.height / 2
+
+    // 기울기 m = (y2 - y1) / (x2 - x1)
+    const m = (rightCenterY - topCenterY) / (rightCenterX - topCenterX)
+
+    // y 절편 b = y - mx
+    const b = topCenterY - m * topCenterX
+
+    // 점(px, py)이 선 아래(좌하부)에 있는지 확인
+    return y > m * x + b
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    if (!this.emptyType) {
+      return
+    }
+
+    const { width, height } = this.bounds
+    const path = this.path
+
+    ctx.beginPath()
+    ctx.moveTo(path[0].x, path[0].y)
+
+    path.slice(1).forEach(({ x, y }) => {
+      ctx.lineTo(x, y)
+    })
+
+    ctx.closePath()
+
+    ctx.lineWidth = Math.round(Math.min(width, height) * 0.1) > 5 ? 1 : 0.5
+    ctx.fillStyle = this.statusColor || 'transparent'
+    ctx.strokeStyle = this.auxColor || 'transparent'
+
+    ctx.fill()
+    ctx.stroke()
+  }
+}
+
+Component.register('Carrier', Carrier)

package/src/features/animation-default.ts

@@ -0,0 +1,27 @@
+export type AnimationConfig = {
+  [key: string]: any
+}
+
+export interface AnimationPreset {
+  [state: string]: AnimationConfig | string | null
+}
+
+export const ANIMATION_DEFAULT: AnimationPreset = {
+  WARN: {
+    animation: {
+      type: 'vibration',
+      duration: 1000,
+      theta: 0.3,
+      repeat: true
+    }
+  },
+  CRITICAL: {
+    animation: {
+      type: 'vibration',
+      duration: 500,
+      theta: 0.5,
+      repeat: true
+    }
+  },
+  default: null
+}

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

@@ -55,9 +55,9 @@ export const LEGEND_CRANE: Legend = {
 }
 
 export const LEGEND_CARRIER: Legend = {
-  Full: '#4AA7FE',
-  Empty: '#8BDA5B',
-  EmptyEmpty: '#019D59',
+  FULL: '#4AA7FE',
+  EMPTY: '#8BDA5B',
+  EMPTYEMPTY: '#019D59',
   default: '#F0F0F0'
 }
 

package/src/index.ts

@@ -24,3 +24,4 @@ export { default as Shuttle } from './shuttle'
 export { default as Port } from './port'
 export { default as Crane } from './crane'
 export { default as Shelf } from './shelf'
+export { default as Carrier } from './carrier'

package/src/mcs-carrier-holder.ts

@@ -1,136 +1,7 @@
-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'
-
-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'
-
-  constructor(host: Component) {
-    super()
-    this.host = host
-  }
-
-  set data(data: any) {
-    const { CARRIERID, CARRIERTYPE = '', EMPTYTYPE } = data || {}
-
-    this.id = CARRIERID
-    this.type = CARRIERTYPE.split(';')
-    this.emptyType = EMPTYTYPE
-  }
-
-  get status() {
-    return this.emptyType
-  }
-
-  get legend(): Legend {
-    const { carrierLegendName } = this.host.state
-
-    if (carrierLegendName) {
-      return (this.host.root as any)?.style[carrierLegendName]
-    }
-
-    return LEGEND_CARRIER
-  }
-
-  calculateShrunkRectangle(originalRect: BOUNDS): BOUNDS {
-    const shrunkRect: BOUNDS = { ...originalRect }
-
-    shrunkRect.left += originalRect.width * 0.1
-    shrunkRect.width *= 0.8
-
-    shrunkRect.top += originalRect.height * 0.1
-    shrunkRect.height *= 0.8
-
-    return shrunkRect
-  }
-
-  isPointOnCarrier(x, y, { left, top, width, height }) {
-    const rect = this.calculateShrunkRectangle({ left, top, width, height })
-    x -= rect.left
-    y -= rect.top
-
-    if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
-      return false
-    }
-
-    // 윗변 중앙 좌표
-    const topCenterX = rect.width / 2
-    const topCenterY = 0
-
-    // 오른쪽 변 중앙 좌표
-    const rightCenterX = rect.width
-    const rightCenterY = rect.height / 2
-
-    // 기울기 m = (y2 - y1) / (x2 - x1)
-    const m = (rightCenterY - topCenterY) / (rightCenterX - topCenterX)
-
-    // y 절편 b = y - mx
-    const b = topCenterY - m * topCenterX
-
-    // 점(px, py)이 선 아래(좌하부)에 있는지 확인
-    return y > m * x + b
-  }
-
-  render(ctx: CanvasRenderingContext2D) {
-    if (!this.emptyType) {
-      return
-    }
-
-    const { left, top, width, height } = this.calculateShrunkRectangle(this.host.bounds)
-
-    const radius = Math.round(Math.min(width, height) * 0.1)
-
-    // 시작점 설정
-    ctx.beginPath()
-    ctx.moveTo(left + radius, top)
-
-    // 상단 가로선 그리기
-    ctx.lineTo(left + width / 2, top)
-
-    // 우측 세로선 그리기
-    ctx.lineTo(left + width, top + height / 2)
-    ctx.lineTo(left + width, top + height)
-
-    // 하단 가로선 그리기
-    ctx.lineTo(left, top + height)
-
-    // 좌측 세로선 그리기
-    ctx.lineTo(left, top)
-
-    // 경로 닫기 및 그리기
-    ctx.closePath()
-
-    ctx.lineWidth = radius > 5 ? 1 : 0.5
-    ctx.fillStyle = this.statusColor || 'transparent'
-    ctx.strokeStyle = this.auxColor || 'transparent'
-
-    ctx.fill()
-    ctx.stroke()
-
-    ctx.beginPath()
-
-    const text =
-      this.emptyType == 'Full' ? 'F' : this.emptyType == 'Empty' ? 'E' : this.emptyType == 'EmptyEmpty' ? 'X' : ''
-
-    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.fillText(text, cx - width / 8, cy + height / 8)
-    }
-  }
-}
+import { Model } from '@hatiolab/things-scene'
+import { themesColorMap, themesAnimationMap } from '@fmsim/api'
+import MCSUnit from './mcs-unit.js'
+import Carrier from './carrier.js'
 
 export default class MCSCarrierHolder extends MCSUnit {
   static get properties(): any {
@@ -143,40 +14,41 @@ export default class MCSCarrierHolder extends MCSUnit {
         property: {
           options: themesColorMap
         }
+      },
+      {
+        type: 'select',
+        label: 'carrier-animation-name',
+        name: 'carrierAnimationName',
+        property: {
+          options: themesAnimationMap
+        }
       }
     ]
   }
 
-  carrier: Carrier = new Carrier(this)
+  carrier?: Carrier | null
 
   ready() {
-    this.carrier.data = this.data
-  }
+    super.ready()
 
-  postrender(ctx: CanvasRenderingContext2D) {
-    this.carrier.render(ctx)
+    this.carrier = Model.compile({ type: 'Carrier' }, this.root.app) as any
 
-    super.postrender(ctx)
+    this.carrier!.data = this.data
+
+    this.addComponent(this.carrier!)
   }
 
-  onchangeData(after: any, before: any) {
-    this.carrier.data = this.data
+  dispose(): void {
+    this.carrier = null
 
-    super.onchangeData(after, before)
+    super.dispose()
   }
 
-  isPointOnCarrier(x, y) {
-    const { CARRIERID } = this.data || {}
-    if (!CARRIERID) {
-      return false
+  onchangeData(after: any, before: any) {
+    if (this.carrier) {
+      this.carrier.data = this.data
     }
 
-    const point = this.transcoordC2S(x, y)
-    const { left, top, width, height } = this.bounds
-
-    point.x -= left
-    point.y -= top
-
-    return this.carrier.isPointOnCarrier(point.x, point.y, { left: 0, top: 0, width, height })
+    super.onchangeData(after, before)
   }
 }

package/src/mcs-unit.ts

@@ -1,4 +1,4 @@
-import { Component } from '@hatiolab/things-scene'
+import { Component, ContainerAbstract } from '@hatiolab/things-scene'
 import { getPopupData } from '@fmsim/api'
 
 import { MCSStatusMixin, MCSStatusMixinProperties } from './features/mcs-status-mixin'
@@ -8,7 +8,7 @@ import { ParentObjectMixin, ParentObjectMixinProperties } from './features/paren
 /**
  * MCS용 Unit들의 공통 속성을 정의한 오브젝트
  */
-export default class MCSUnit extends MCSStatusMixin(ParentObjectMixin(Component)) {
+export default class MCSUnit extends MCSStatusMixin(ParentObjectMixin(ContainerAbstract)) {
   static get properties(): any {
     return [...MCSStatusMixinProperties, ...ParentObjectMixinProperties]
   }

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 = 'BOTH' }: { 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",