@fmsim/machine 1.0.18 → 1.0.20

package/src/mcs-carrier-holder.ts

@@ -1,226 +1,7 @@
-import JSON5 from 'json5'
-
-import { BOUNDS, Component } from '@hatiolab/things-scene'
+import { Model } from '@hatiolab/things-scene'
 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
-  emptyType?: 'FULL' | 'EMPTY' | 'EMPTYEMPTY'
-  carrierStatus?: string
-
-  lastCarrierStatus?: string
-
-  constructor(host: Component) {
-    super()
-    this.host = host
-  }
-
-  set data(data: any) {
-    const { CARRIERNAME, CARRIERTYPE = '', EMPTYTYPE, CARRIERSTATUS } = data || {}
-
-    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() {
-    return this.emptyType
-  }
-
-  get legend(): Legend {
-    const { carrierLegendName } = this.host.state
-
-    if (carrierLegendName) {
-      return (this.host.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.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 }
-
-    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 Carrier from './carrier.js'
 
 export default class MCSCarrierHolder extends MCSUnit {
   static get properties(): any {
@@ -245,36 +26,29 @@ export default class MCSCarrierHolder extends MCSUnit {
     ]
   }
 
-  carrier: Carrier = new Carrier(this)
+  carrier?: Carrier | null
 
   ready() {
-    this.carrier.data = this.data
-  }
+    super.ready()
+
+    this.carrier = Model.compile({ type: 'Carrier' }, this.root.app) as any
 
-  postrender(ctx: CanvasRenderingContext2D) {
-    this.carrier.render(ctx)
+    this.carrier!.data = this.data
 
-    super.postrender(ctx)
+    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

@@ -40,39 +40,56 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
   }
 
   get textBounds() {
-    const { left, top, width, height } = this.bounds
-    const { labelPosition = 'top' } = this.state
+    var { paddingTop, paddingLeft, paddingRight, paddingBottom, fontSize = 24 } = this.state
+
+    paddingBottom ||= 0
+    paddingTop ||= 0
+    paddingLeft ||= 0
+    paddingRight ||= 0
+
+    var { left, top, width, height } = this.bounds
+    var { labelPosition = 'top' } = this.state
+
+    left += paddingLeft
+    top += paddingTop
+    width = Math.max(width - paddingLeft - paddingRight, 0)
+    height = Math.max(height - paddingTop - paddingBottom, 0)
 
     switch (labelPosition) {
       case 'top':
         return {
-          ...this.bounds,
-          top: top - 24,
-          height: 24
+          left,
+          top: top - fontSize,
+          width,
+          height: fontSize
         }
       case 'bottom':
         return {
-          ...this.bounds,
+          left,
           top: top + height,
-          height: 24
+          width,
+          height: fontSize
         }
       case 'left':
         return {
-          ...this.bounds,
-          left: left - 60,
-          width: 60
+          left: left - fontSize * 4,
+          top,
+          width: fontSize * 4,
+          height
         }
       case 'right':
         return {
-          ...this.bounds,
           left: left + width,
-          width: 60
+          top,
+          width: fontSize * 4,
+          height
         }
       default:
         return {
-          ...this.bounds,
-          top: top - 24,
-          height: 24
+          left,
+          top: top - fontSize,
+          width,
+          height: fontSize
         }
     }
   }
@@ -85,11 +102,10 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
 
   render(ctx) {
     const { left, top, width, height } = this.bounds
-    var { orientation = 'left to right', direction = 'IN' }: { orientation?: string; direction?: string } = this.state
-    const { INOUTTYPE } = this.data
+    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 */
     }