@fmsim/machine 0.0.49

package/src/groups/mcs-shape.ts

@@ -0,0 +1,26 @@
+const icon = `
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+  <style type="text/css">
+    .st0{fill:{{strokeColor}}}
+  </style>
+  <path class="st0" d="M6.8,4.67L6.25,5.2L4.85,6.59L4.33,7.15l0.4,0.65l2.07,3.47l0.28,0.5h2.91l3.96,3.93
+	c-3.54,3.56-8.05,8.08-8.2,8.24C4.2,25.48,4.2,28.02,5.78,29.5c1.55,1.53,4.07,1.57,5.54,0c0.01-0.01,0.02-0.02,0.03-0.03l6.1-6.13
+	l6.13,6.16l0.09,0.06c1.56,1.47,4.03,1.49,5.48-0.06v-0.03h0.03c1.52-1.55,1.53-4.08-0.03-5.54l-0.03-0.03l-5.17-5.14
+	c3.48-0.33,6.2-3.26,6.25-6.81h0.03c0-0.02,0-0.04,0-0.06c0-0.01,0-0.02,0-0.03c0.1-1.15-0.15-2.24-0.74-3.19l-0.68-1.05l-4.61,4.61
+	l-1.39-1.46l4.71-4.71l-1.36-0.56c-0.8-0.34-1.72-0.59-2.76-0.59c-3.81,0-6.93,3.13-6.93,6.93c0,0.41,0.09,0.77,0.15,1.15
+	c-0.43,0.43-0.76,0.79-1.27,1.3l-3.93-3.93V7.43l-0.5-0.28L7.45,5.07L6.8,4.67z M23.4,6.9c0.14,0,0.24,0.08,0.37,0.09l-3.75,3.75
+	l0.68,0.71l2.79,2.88l0.68,0.71l3.93-3.93c0.02,0.23,0.18,0.39,0.15,0.65v0.09c0,2.73-2.23,4.95-4.95,4.95
+	c-0.36,0-0.8-0.09-1.3-0.19l-0.53-0.09l-0.37,0.37L9.93,28.11H9.9v0.03c-0.7,0.77-1.93,0.79-2.76-0.03v-0.03H7.11
+	c-0.77-0.7-0.79-1.93,0.03-2.76c0.38-0.38,7.65-7.71,11.21-11.27l0.4-0.4l-0.15-0.56c-0.08-0.32-0.15-0.87-0.15-1.24
+	C18.44,9.13,20.67,6.9,23.4,6.9z M7.11,7.15l2.32,1.42v0.99L9.22,9.78H8.23L6.8,7.46L7.11,7.15z M21.6,19.19l6.16,6.13v0.03h0.03
+	c0.77,0.7,0.79,1.93-0.03,2.76h-0.03v0.03c-0.7,0.77-1.93,0.79-2.76-0.03l-6.13-6.16L21.6,19.19z"/>
+</svg>
+`
+
+export const mcsShape = {
+  name: 'mcsShape',
+  description: 'a group of various mcs-shapes',
+  icon,
+  templates: []
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+export { default as MachineGroups } from './groups'
+
+export { default as DataSubscription } from './data-subscription'
+
+export { default as MCSMachine } from './mcs-machine'
+export { default as MCSUnit } from './mcs-unit'
+export { default as MCSCarrierHolder } from './mcs-carrier-holder'
+export { default as MCSVehicle } from './mcs-vehicle'
+export { default as MCSTransport } from './mcs-transport'
+// export { default as MCSGauge } from './mcs-gauge-capacity-circle'
+export { default as StockerCapacityBar } from './stocker-capacity-bar'
+export { default as ZoneCapacityBar } from './zone-capacity-bar'
+
+export { default as AGVLine } from './agv-line'
+export { default as Buffer } from './buffer'
+export { default as Conveyor } from './conveyor'
+export { default as ConveyorJoin } from './conveyor-join'
+export { default as Equipment } from './equipment'
+export { default as OHTLine } from './oht-line'
+export { default as Stocker } from './stocker'
+
+export { default as AGV } from './agv'
+export { default as OHT } from './oht'
+// export { default as RTV } from './rtv'
+export { default as Shuttle } from './shuttle'
+
+export { default as Port } from './port'
+export { default as Crane } from './crane'
+export { default as Shelf } from './shelf'

package/src/mcs-carrier-holder.ts

@@ -0,0 +1,141 @@
+import { BOUNDS, Component } from '@hatiolab/things-scene'
+import { LEGEND_CARRIER, Legend } from './features/mcs-status-default'
+import { MCSStatusMixin } from './features/mcs-status-mixin'
+import MCSUnit from './mcs-unit'
+import { themesColorMap } from './features/client-api'
+
+export class Carrier extends MCSStatusMixin(Object) {
+  host: Component
+
+  id?: string
+  type: ('ALL' | 'BOBIN' | 'MAGAZINE' | 'PALLET' | 'REEL_TRAY' | 'PLATE')[] = []
+  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.15
+    shrunkRect.width *= 0.7
+
+    shrunkRect.top += originalRect.height * 0.15
+    shrunkRect.height *= 0.7
+
+    return shrunkRect
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    if (!this.id || !this.type) {
+      return
+    }
+
+    const { left, top, width, height } = this.calculateShrunkRectangle(this.host.bounds)
+
+    const radius = Math.round(Math.min(width, height) * 0.2)
+
+    // 시작점 설정
+    ctx.beginPath()
+    ctx.moveTo(left + radius, top)
+
+    // 상단 가로선 그리기
+    ctx.lineTo(left + width - radius, top)
+    ctx.arcTo(left + width, top, left + width, top + radius, radius)
+
+    // 우측 세로선 그리기
+    ctx.lineTo(left + width, top + height - radius)
+    ctx.arcTo(left + width, top + height, left + width - radius, top + height, radius)
+
+    // 하단 가로선 그리기
+    ctx.lineTo(left + radius, top + height)
+    ctx.arcTo(left, top + height, left, top + height - radius, radius)
+
+    // 좌측 세로선 그리기
+    ctx.lineTo(left, top + radius)
+    ctx.arcTo(left, top, left + radius, top, radius)
+
+    // 경로 닫기 및 그리기
+    ctx.closePath()
+    ctx.stroke()
+
+    ctx.lineWidth = radius > 10 ? 2 : 1
+    ctx.fillStyle = this.statusColor || 'transparent'
+    ctx.strokeStyle = this.auxColor || 'transparent'
+
+    ctx.fill()
+    ctx.stroke()
+
+    ctx.beginPath()
+
+    // 숫자 그리기
+    const count = 2 // this.type?.length
+
+    if (count > 1) {
+      const { x: cx, y: cy } = this.host.center
+
+      ctx.fillStyle = 'red'
+      ctx.font = `bold ${Math.round(radius * 4)}px Arial`
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+
+      ctx.fillText(String(count), cx, cy)
+    }
+  }
+}
+
+export default class MCSCarrierHolder extends MCSUnit {
+  static get properties(): any {
+    return [
+      ...MCSUnit.properties,
+      {
+        type: 'select',
+        label: 'carrier-legend-name',
+        name: 'carrierLegendName',
+        property: {
+          options: themesColorMap
+        }
+      }
+    ]
+  }
+
+  carrier: Carrier = new Carrier(this)
+
+  ready() {
+    this.carrier.data = this.data
+  }
+
+  postrender(ctx: CanvasRenderingContext2D) {
+    this.carrier.render(ctx)
+  }
+
+  onchangeData(after: any, before: any) {
+    this.carrier.data = this.data
+
+    super.onchangeData(after, before)
+  }
+}

package/src/mcs-gauge-capacity-circle.ts

@@ -0,0 +1,113 @@
+import { Component, ComponentNature, Ellipse, Properties } from '@hatiolab/things-scene'
+import { getVaueOnRanges } from './utils/get-value-on-ranges'
+import { MCSStatusMixin } from './features/mcs-status-mixin'
+import { LEGEND_CAPACITY, Legend } from './features/mcs-status-default'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      name: 'currentUsage',
+      label: 'current-usage'
+    },
+    {
+      type: 'number',
+      name: 'highWatermark',
+      label: 'high-watermark'
+    },
+    {
+      type: 'number',
+      name: 'maxCapacity',
+      label: 'max-capacity'
+    },
+    {
+      type: 'hidden',
+      name: 'usage',
+      label: 'usage'
+    }
+  ],
+  'value-property': 'usage'
+}
+
+export default class MCSGaugeCapacityCircle extends MCSStatusMixin(Ellipse) {
+  static get nature() {
+    return NATURE
+  }
+
+  getTheme() {
+    const { legendName } = this.state
+
+    if (legendName) {
+      return (this.root as any)?.style?.[legendName]
+    }
+  }
+
+  get legend(): Legend {
+    return this.getTheme() || this.getLegendFallback()
+  }
+
+  getLegendFallback() {
+    return LEGEND_CAPACITY
+  }
+
+  get statusColor() {
+    return getVaueOnRanges(this.usage, this.legend)
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { cx, cy, rx, ry } = this.state
+    const radius = Math.min(rx, ry)
+
+    context.beginPath()
+
+    context.arc(cx, cy, radius, 0, Math.PI * 2)
+    context.fillStyle = 'gray'
+    context.fill()
+    this.drawStroke(context)
+
+    const startAngle = Math.PI * -0.5
+    const endAngle = startAngle + Math.PI * 2 * (this.value / 100)
+
+    context.beginPath()
+
+    context.moveTo(cx, cy)
+    context.arc(cx, cy, radius, startAngle, endAngle)
+    context.lineTo(cx, cy)
+    context.fillStyle = this.statusColor!
+
+    context.fill()
+  }
+
+  get usage() {
+    const { currentUsage = 0, maxCapacity = 100 } = this.state
+    return Math.round((currentUsage / maxCapacity) * 100)
+  }
+
+  set usage(usage: number) {
+    // intentionally have done nothing
+  }
+
+  onchangeData(after: Properties, before: Properties): void {
+    const {
+      CURRENTCAPACITY = 0,
+      MAXCAPACITY = 100,
+      HIGHWATERMARK = 100
+    } = typeof this.data == 'object' ? this.data : {}
+
+    const currentUsage = Number(CURRENTCAPACITY) || 0
+    const maxCapacity = Number(MAXCAPACITY) || 100
+    const highWatermark = Number(HIGHWATERMARK) || 100
+
+    this.setState({
+      currentUsage,
+      maxCapacity,
+      highWatermark,
+      usage: Math.round((currentUsage / maxCapacity) * 100)
+    })
+  }
+}
+
+Component.register('MCSGaugeCapacityCircle', MCSGaugeCapacityCircle)

package/src/mcs-machine.ts

@@ -0,0 +1,101 @@
+import { Component, ContainerAbstract } from '@hatiolab/things-scene'
+import { MCSStatusMixin, MCSStatusMixinProperties } from './features/mcs-status-mixin'
+
+import { safeRound } from './utils/safe-round'
+import { LEGEND_MACHINE, Legend } from './features/mcs-status-default'
+import { getLocaleLanguage } from './utils/get-locale'
+
+/**
+ * MCS Machine의 공통 속성을 정의한 최상위 오브젝트
+ * - Container
+ * -
+ */
+export default class MCSMachine extends MCSStatusMixin(ContainerAbstract) {
+  static get properties(): any {
+    return [
+      ...MCSStatusMixinProperties,
+      {
+        type: 'number',
+        name: 'round',
+        label: 'round'
+      }
+    ]
+  }
+
+  containable(component: Component) {
+    return ['rect', 'ellipse'].includes(component.state.type)
+  }
+
+  get reactionDecorators() {
+    return ['bouncing-arrow']
+  }
+
+  getTheme() {
+    const { legendName } = this.state
+
+    if (legendName) {
+      return (this.root as any)?.style?.[legendName]
+    }
+  }
+
+  get hasTextProperty() {
+    return true
+  }
+
+  get status() {
+    return this.data?.STATUS
+  }
+
+  get auxStatus() {
+    return this.data?.STATUS
+  }
+
+  get legend(): Legend {
+    return this.getTheme() || this.getLegendFallback()
+  }
+
+  get auxLegend() {
+    return LEGEND_MACHINE
+  }
+
+  get auxColor() {
+    return this.state.strokeStyle
+  }
+
+  getLegendFallback() {
+    return LEGEND_MACHINE
+  }
+
+  render(ctx) {
+    var { round = 0, lineWidth } = this.state
+    var { left, top, width, height } = this.bounds
+
+    ctx.beginPath()
+
+    ctx.strokeStyle = this.auxColor
+    ctx.fillStyle = this.statusColor!
+    ctx.lineWidth = lineWidth || 1
+    ctx.lineCap = 'round'
+    ctx.setLineDash([])
+
+    round = safeRound(round, width, height)
+
+    ctx.roundRect(left, top, width, height, round)
+
+    ctx.fill()
+    ctx.stroke()
+  }
+
+  get text() {
+    if (this.data?.LOCALENAME) {
+      // TODO 왜 LOCALENAME 데이타는 문자열인가 ? 오브젝트로 보내달라.
+      return JSON.parse(this.data.LOCALENAME)[getLocaleLanguage()]
+    }
+
+    return super.text
+  }
+
+  set text(text) {
+    super.text = text
+  }
+}

package/src/mcs-popup.ts

@@ -0,0 +1,99 @@
+import { Component, ComponentNature, RectPath, Shape, error } from '@hatiolab/things-scene'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: []
+}
+
+function safeRound(round, width, height) {
+  var max = width > height ? (height / width) * 100 : 100
+
+  if (round >= max) round = max
+  else if (round <= 0) round = 0
+
+  return round
+}
+
+export default class MCSPopup extends RectPath(Shape) {
+  static get nature() {
+    return NATURE
+  }
+
+  dispose() {
+    super.dispose()
+  }
+
+  render(ctx) {
+    var { round = 0 } = this.model
+
+    var { left, top, width, height } = this.bounds
+    var { radius, extend } = this.model
+
+    drawPopup(ctx, left, top, width, height)
+
+    ctx.beginPath()
+
+    ctx.translate(left, top)
+
+    round = safeRound(round, width, height)
+
+    radius = radius ?? (round / 100) * (width / 2)
+
+    ctx.moveTo(radius, 0)
+
+    ctx.arcTo(width, 0, width, height, radius)
+    ctx.arcTo(width, height, 0, height, radius)
+    ctx.arcTo(0, height, 0, 0, radius)
+    ctx.arcTo(0, 0, width, 0, radius)
+
+    ctx.translate(-left, -top)
+  }
+}
+
+Component.register('MCSPOPUP', MCSPopup)
+
+export function drawPopup(ctx, left, top, width, height) {
+  drawPopupBottom(ctx, left, top, width, height)
+}
+
+function drawPopupBottom(ctx, left, top, width, height) {
+  /* popup1 전체 frame */
+  // const left = 10
+  // const top = 10
+  // const width = 180
+  // let height = 135
+  height -= height / 12.25 // 꼬리 영역까지 포함시키려 height를 일부러 크게 잡았으니, 실제로 그릴때는 popup의 몸통 height로 맞춰준다
+  let radius = 10
+
+  //시작
+  ctx.beginPath()
+  ctx.moveTo(left + radius, top)
+  ctx.strokeStyle = '#afafaf'
+  //우측 상단 모서리
+  ctx.lineTo(left + width - radius, top)
+  ctx.quadraticCurveTo(left + width, top, left + width, top + radius)
+  //우측 하단 모서리
+  ctx.lineTo(left + width, top + height - radius)
+  ctx.quadraticCurveTo(left + width, top + height, left + width - radius, top + height)
+  //화살표 꼬리 그리기
+  const arrowWidth = width / 8.95
+  const arrowHeight = height / 12.25
+  const arrowPx = left + width / 2 + arrowWidth / 2 // start point x
+  const arrowPy = top + height // start point y
+  ctx.lineTo(arrowPx, arrowPy)
+  ctx.lineTo(arrowPx - arrowWidth / 2, arrowPy + arrowHeight)
+  ctx.lineTo(arrowPx - arrowWidth, arrowPy)
+  //좌측 하단 모서리
+  ctx.lineTo(left + radius, top + height)
+  ctx.quadraticCurveTo(left, top + height, left, top + height - radius)
+  //좌측 상단 모서리
+  ctx.lineTo(left, top + radius)
+  ctx.quadraticCurveTo(left, top, left + radius, top)
+  ctx.stroke()
+  ctx.closePath()
+  //도형 색칠하기
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'
+  ctx.fill()
+}

package/src/mcs-transport.ts

@@ -0,0 +1,20 @@
+import { Properties } from '@hatiolab/things-scene'
+import { LEGEND_TRANSPORT, Legend } from './features/mcs-status-default'
+import MCSMachine from './mcs-machine'
+
+/**
+ * MCS용 Unit > Transport들의 공통 속성을 정의한 오브젝트
+ */
+export default class MCSTransport extends MCSMachine {
+  static get properties(): any {
+    return MCSMachine.properties
+  }
+
+  get status() {
+    return this.data?.STATUS
+  }
+
+  getLegendFallback() {
+    return LEGEND_TRANSPORT
+  }
+}

package/src/mcs-unit.ts

@@ -0,0 +1,91 @@
+import { Component, Properties } from '@hatiolab/things-scene'
+import { MCSStatusMixin, MCSStatusMixinProperties } from './features/mcs-status-mixin'
+import { LEGEND_UNIT, Legend } from './features/mcs-status-default'
+
+/**
+ * MCS용 Unit들의 공통 속성을 정의한 오브젝트
+ */
+export default class MCSUnit extends MCSStatusMixin(Component) {
+  static get properties(): any {
+    return MCSStatusMixinProperties
+  }
+
+  get reactionDecorators() {
+    return ['bouncing-arrow']
+  }
+
+  getTheme() {
+    const { legendName } = this.state
+
+    if (legendName) {
+      return (this.root as any)?.style?.[legendName]
+    }
+  }
+
+  get status() {
+    return this.data?.STATUS
+  }
+
+  get auxStatus() {
+    return this.data?.STATUS
+  }
+
+  get legend(): Legend {
+    return this.getTheme() || this.getLegendFallback()
+  }
+
+  get auxLegend() {
+    return this.legend
+  }
+
+  getLegendFallback() {
+    return LEGEND_UNIT
+  }
+
+  contains(x, y) {
+    var { left, top, width, height, lineWidth = 0 } = this.state
+    var extend = lineWidth / 2
+
+    return (
+      x < Math.max(left + width, left) + extend &&
+      x > Math.min(left + width, left) - extend &&
+      y < Math.max(top + height, top) + extend &&
+      y > Math.min(top + height, top) - extend
+    )
+  }
+
+  set path(path) {
+    var left_top = path[0]
+    var right_bottom = path[2]
+
+    this.set({
+      left: left_top.x,
+      top: left_top.y,
+      width: right_bottom.x - left_top.x,
+      height: right_bottom.y - left_top.y
+    })
+  }
+
+  get path() {
+    var { left = 0, top = 0, width = 0, height = 0 } = this.state
+
+    return [
+      {
+        x: left,
+        y: top
+      },
+      {
+        x: left + width,
+        y: top
+      },
+      {
+        x: left + width,
+        y: top + height
+      },
+      {
+        x: left,
+        y: top + height
+      }
+    ]
+  }
+}

package/src/mcs-vehicle.ts

@@ -0,0 +1,79 @@
+import { LEGEND_VEHICLE, Legend } from './features/mcs-status-default'
+import MCSCarrierHolder from './mcs-carrier-holder'
+
+const DIRECTION_GAP = 3
+
+/**
+ * MCS용 Unit > Transport들의 공통 속성을 정의한 오브젝트
+ */
+export default class MCSVehicle extends MCSCarrierHolder {
+  static get properties(): any {
+    return [
+      ...MCSCarrierHolder.properties,
+      {
+        type: 'select',
+        label: 'direction',
+        name: 'direction',
+        property: {
+          options: ['', 'up', 'down', 'left', 'right']
+        }
+      }
+    ]
+  }
+
+  getLegendFallback(): Legend {
+    return LEGEND_VEHICLE
+  }
+
+  renderDirection(ctx: CanvasRenderingContext2D) {
+    const { direction } = this.state
+
+    if (direction) {
+      const { left, top, width, height } = this.state
+
+      ctx.beginPath()
+      ctx.translate(left, top)
+
+      ctx.strokeStyle = 'black'
+      ctx.fillStyle = 'black'
+      ctx.lineJoin = 'round'
+      ctx.lineWidth = 1
+      ctx.setLineDash([])
+
+      switch (direction) {
+        case 'up':
+          ctx.moveTo((width * 1) / 3, -DIRECTION_GAP)
+          ctx.lineTo(width / 2, -height / 10 - DIRECTION_GAP)
+          ctx.lineTo((width * 2) / 3, -DIRECTION_GAP)
+          break
+        case 'down':
+          ctx.moveTo((width * 1) / 3, height + DIRECTION_GAP)
+          ctx.lineTo(width / 2, height + height / 10 + DIRECTION_GAP)
+          ctx.lineTo((width * 2) / 3, height + DIRECTION_GAP)
+          break
+        case 'left':
+          ctx.moveTo(-DIRECTION_GAP, (height * 1) / 3)
+          ctx.lineTo(-width / 10 - 2, height / 2)
+          ctx.lineTo(-DIRECTION_GAP, (height * 2) / 3)
+          break
+        case 'right':
+        default:
+          ctx.moveTo(DIRECTION_GAP + width, (height * 1) / 3)
+          ctx.lineTo(DIRECTION_GAP + width + width / 10, height / 2)
+          ctx.lineTo(DIRECTION_GAP + width, (height * 2) / 3)
+          break
+      }
+
+      ctx.translate(-left, -top)
+      ctx.closePath()
+
+      ctx.fill()
+      ctx.stroke()
+    }
+  }
+
+  postrender(ctx: CanvasRenderingContext2D): void {
+    super.postrender(ctx)
+    this.renderDirection(ctx)
+  }
+}