@fmsim/machine 0.0.49

package/src/oht-line.ts

@@ -0,0 +1,43 @@
+import { Component, ComponentNature } from '@hatiolab/things-scene'
+import MCSTransport from './mcs-transport'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [...MCSTransport.properties]
+}
+
+export default class OHTLine extends MCSTransport {
+  static get nature() {
+    return NATURE
+  }
+
+  get auxColor() {
+    return '#333'
+  }
+
+  containable(component: Component) {
+    return ['OHT'].includes(component.state.type)
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+
+    context.beginPath()
+
+    context.translate(left, top)
+
+    context.fillStyle = this.statusColor!
+    context.strokeStyle = this.auxColor!
+
+    context.fillRect(0, 0, width, height)
+
+    context.fill()
+    context.stroke()
+
+    context.translate(-left, -top)
+  }
+}
+
+Component.register('OHTLine', OHTLine)

package/src/oht.ts

@@ -0,0 +1,55 @@
+import { Component, ComponentNature, Properties } from '@hatiolab/things-scene'
+import MCSVehicle from './mcs-vehicle'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [...MCSVehicle.properties]
+}
+
+const GAP = 2
+
+export default class OHT extends MCSVehicle {
+  static get nature() {
+    return NATURE
+  }
+
+  get auxColor() {
+    return 'black'
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    ctx.translate(left, top)
+    ctx.beginPath()
+
+    ctx.strokeStyle = this.auxColor
+    ctx.fillStyle = this.statusColor!
+    ctx.lineWidth = 1
+    ctx.lineCap = 'round'
+    ctx.setLineDash([])
+
+    const radius = Math.round(Math.min(width, height) * 0.1)
+    ctx.roundRect(0, 0, width, height, radius)
+    ctx.roundRect(GAP, GAP, width - GAP * 2, height - GAP * 2, radius - 1)
+
+    ctx.fill()
+    ctx.stroke()
+
+    ctx.beginPath()
+
+    ctx.lineCap = 'butt'
+    ctx.strokeStyle = 'black'
+    ctx.lineWidth = 3
+    ctx.moveTo(width / 2, GAP * 2)
+    ctx.lineTo(width / 2, height - GAP * 2)
+
+    ctx.stroke()
+
+    ctx.translate(-left, -top)
+  }
+}
+
+Component.register('OHT', OHT)

package/src/port.ts

@@ -0,0 +1,41 @@
+import { Component, ComponentNature } from '@hatiolab/things-scene'
+import { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'
+import MCSCarrierHolder from './mcs-carrier-holder'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [...MCSZoneMixinProperties, ...MCSCarrierHolder.properties]
+}
+
+export default class Port extends MCSZoneMixin(MCSCarrierHolder) {
+  static get nature() {
+    return NATURE
+  }
+
+  get auxColor() {
+    return 'black'
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    ctx.strokeStyle = this.auxColor
+    ctx.fillStyle = this.statusColor!
+    ctx.lineWidth = 1
+    ctx.lineCap = 'round'
+    ctx.setLineDash([])
+
+    ctx.beginPath()
+
+    const radius = Math.round(Math.min(width, height) * 0.1)
+
+    ctx.roundRect(left, top, width, height, radius)
+
+    ctx.fill()
+    ctx.stroke()
+  }
+}
+
+Component.register('Port', Port)

package/src/shelf.ts

@@ -0,0 +1,53 @@
+import { Component, ComponentNature } from '@hatiolab/things-scene'
+import MCSCarrierHolder from './mcs-carrier-holder'
+import { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [...MCSZoneMixinProperties, ...MCSCarrierHolder.properties]
+}
+
+export default class Shelf extends MCSZoneMixin(MCSCarrierHolder) {
+  static get nature() {
+    return NATURE
+  }
+
+  get auxColor() {
+    return 'black'
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    ctx.save()
+
+    ctx.translate(left, top)
+    ctx.beginPath()
+
+    ctx.strokeStyle = this.auxColor
+    ctx.fillStyle = this.statusColor!
+    ctx.lineWidth = 1
+    ctx.lineCap = 'round'
+    ctx.setLineDash([])
+
+    const radius = Math.round(Math.min(width, height) * 0.1)
+    ctx.roundRect(0, 0, width, height, radius)
+
+    ctx.clip()
+
+    ctx.moveTo(0, 0)
+    ctx.lineTo(width, height)
+    ctx.moveTo(0, height)
+    ctx.lineTo(width, 0)
+
+    ctx.fill()
+    ctx.stroke()
+
+    ctx.translate(-left, -top)
+    ctx.restore()
+  }
+}
+
+Component.register('Shelf', Shelf)

package/src/shuttle.ts

@@ -0,0 +1,65 @@
+import { Component, ComponentNature } from '@hatiolab/things-scene'
+import MCSVehicle from './mcs-vehicle'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [...MCSVehicle.properties]
+}
+
+const RAILWIDTH = 2
+export default class Shuttle extends MCSVehicle {
+  static get nature() {
+    return NATURE
+  }
+
+  get auxColor() {
+    return 'black'
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    ctx.translate(left, top)
+
+    // draw rail metapore
+    ctx.beginPath()
+
+    ctx.strokeStyle = 'black'
+    ctx.lineWidth = RAILWIDTH * 2
+
+    ctx.moveTo(0, 0)
+    ctx.lineTo(0, height)
+    ctx.moveTo(width, 0)
+    ctx.lineTo(width, height)
+    ctx.stroke()
+
+    // draw body
+    ctx.beginPath()
+
+    ctx.strokeStyle = this.auxColor!
+    ctx.fillStyle = this.statusColor!
+    ctx.lineWidth = 1
+    ctx.lineCap = 'round'
+    ctx.setLineDash([])
+
+    const radius = Math.round(Math.min(width, height) * 0.1)
+
+    ctx.roundRect(RAILWIDTH / 2, RAILWIDTH / 2, width - RAILWIDTH, height - RAILWIDTH, radius)
+    ctx.fill()
+
+    ctx.beginPath()
+    ctx.roundRect(0, RAILWIDTH, width, RAILWIDTH, radius)
+    ctx.roundRect(0, height - RAILWIDTH * 2, width, RAILWIDTH, radius)
+
+    ctx.fill()
+    ctx.stroke()
+
+    ctx.translate(-left, -top)
+
+    this.renderDirection(ctx)
+  }
+}
+
+Component.register('Shuttle', Shuttle)

package/src/stocker-capacity-bar.ts

@@ -0,0 +1,220 @@
+import { Component, ComponentNature, POSITION, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+import { MCSStatusMixin } from './features/mcs-status-mixin'
+import { LEGEND_CAPACITY, Legend } from './features/mcs-status-default'
+import { safeRound } from './utils/safe-round'
+import { getVaueOnRanges } from './utils/get-value-on-ranges'
+
+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: 'number',
+      label: 'round',
+      name: 'round',
+      property: {
+        min: 0
+      }
+    },
+    {
+      type: 'hidden',
+      name: 'usage',
+      label: 'usage'
+    }
+  ],
+  'value-property': 'usage'
+}
+
+var controlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: Component) {
+    var { left, top, width, height } = component.model
+
+    var transcoorded = component.transcoordP2S(point.x, point.y)
+    var round = ((transcoorded.x - left) / (width / 2)) * 100
+
+    round = safeRound(round, width, height)
+
+    component.set({
+      round
+    })
+  }
+}
+
+export default class StockerCapacityBar extends MCSStatusMixin(RectPath(Shape)) {
+  static get nature() {
+    return NATURE
+  }
+
+  get controls() {
+    var { left, top, width, round, height } = this.state
+    round = round == undefined ? 0 : safeRound(round, width, height)
+
+    return [
+      {
+        x: left + (width / 2) * (round / 100),
+        y: top,
+        handler: controlHandler
+      }
+    ]
+  }
+
+  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)
+  }
+
+  get text() {
+    return this.usage + '%'
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+
+    if (width >= height) {
+      this.renderLandscape(context)
+    } else {
+      this.renderPortrait(context)
+    }
+  }
+
+  renderLandscape(context: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+    const { lineWidth, strokeStyle, round, fillStyle = '#aaa' } = this.state
+
+    context.strokeStyle = strokeStyle
+    context.lineWidth = lineWidth
+
+    context.save()
+    context.translate(left, top)
+
+    // gauge background
+    context.beginPath()
+
+    context.fillStyle = fillStyle
+    context.roundRect(0, 0, width, height, round)
+
+    context.fill()
+    context.stroke()
+
+    context.clip()
+
+    // gauge foreground
+    context.beginPath()
+
+    context.fillStyle = this.statusColor!
+
+    context.rect(0, 0, (width / 100) * this.usage, height)
+    context.fill()
+
+    context.beginPath()
+    context.strokeStyle = strokeStyle
+    context.roundRect(0, 0, width, height, round)
+    context.stroke()
+
+    context.beginPath()
+
+    context.translate(-left, -top)
+    context.restore()
+  }
+
+  renderPortrait(context: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+    const { lineWidth, strokeStyle, round, fillStyle } = this.state
+
+    context.strokeStyle = strokeStyle
+    context.lineWidth = lineWidth
+
+    context.save()
+    context.translate(left, top)
+
+    // gauge background
+    context.beginPath()
+
+    context.fillStyle = fillStyle
+    context.roundRect(0, 0, width, height, round)
+
+    context.fill()
+    context.stroke()
+
+    context.clip()
+
+    // gauge foreground
+    context.beginPath()
+
+    context.fillStyle = this.statusColor!
+
+    context.rect(0, height - (height / 100) * this.usage, width, (height / 100) * this.usage)
+    context.fill()
+
+    context.beginPath()
+    context.roundRect(0, 0, width, height, round)
+    context.stroke()
+
+    context.beginPath()
+
+    context.translate(-left, -top)
+    context.restore()
+  }
+
+  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('StockerCapacityBar', StockerCapacityBar)
+Component.register('MCSGaugeCapacityBar', StockerCapacityBar)

package/src/stocker.ts

@@ -0,0 +1,45 @@
+import { Component, ComponentNature } from '@hatiolab/things-scene'
+import MCSTransport from './mcs-transport'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [...MCSTransport.properties]
+}
+
+// const capacity = { ko: 'Capacity', en: 'Capacity', zh_CN: '容量' }
+
+// export function getLocaleLanguage() {
+//   let localeValue
+//   let nameOfCookie = 'miipLang' + '='
+//   let x = 0
+//   while (x <= document.cookie.length) {
+//     let y = x + nameOfCookie.length
+//     if (document.cookie.substring(x, y) == nameOfCookie) {
+//       let endOfCookie
+//       if ((endOfCookie = document.cookie.indexOf(';', y)) == -1) endOfCookie = document.cookie.length
+//       localeValue = unescape(document.cookie.substring(y, endOfCookie))
+//     }
+//     x = document.cookie.indexOf(' ', x) + 1
+//     if (x == 0) break
+//   }
+//   return localeValue
+// }
+
+export default class Stocker extends MCSTransport {
+  static get nature() {
+    return NATURE
+  }
+
+  containable(component: Component) {
+    return (
+      super.containable(component) ||
+      ['Crane', 'Shelf', 'Port', 'MCSGaugeCapacityBar', 'StockerCapacityBar', 'ZoneCapacityBar'].includes(
+        component.state.type
+      )
+    )
+  }
+}
+
+Component.register('STOCKER', Stocker)

package/src/templates/agv-line.ts

@@ -0,0 +1,15 @@
+const agvLine = new URL('../../icons/agv-line.png', import.meta.url).href
+
+export default {
+  type: 'AGV Line',
+  description: 'AGV Line',
+  icon: agvLine,
+  group: 'ACS',
+  model: {
+    type: 'AGVLine',
+    left: 200,
+    top: 100,
+    width: 100,
+    height: 20
+  }
+}

package/src/templates/agv.ts

@@ -0,0 +1,15 @@
+const agv = new URL('../../icons/agv.png', import.meta.url).href
+
+export default {
+  type: 'AGV',
+  description: 'Auto Guided Vehicle',
+  icon: agv,
+  group: 'ACS',
+  model: {
+    type: 'AGV',
+    left: 100,
+    top: 100,
+    width: 20,
+    height: 20
+  }
+}

package/src/templates/buffer.ts

@@ -0,0 +1,15 @@
+const buffer = new URL('../../icons/buffer.png', import.meta.url).href
+
+export default {
+  type: 'Buffer',
+  description: 'Buffer',
+  icon: buffer,
+  group: 'BCS',
+  model: {
+    type: 'Buffer',
+    left: 100,
+    top: 100,
+    width: 30,
+    height: 30
+  }
+}

package/src/templates/conveyor.ts

@@ -0,0 +1,18 @@
+const conveyor = new URL('../../icons/conveyor.png', import.meta.url).href
+
+export default {
+  type: 'Conveyor',
+  description: 'Conveyor',
+  icon: conveyor,
+  group: 'CCS',
+  model: {
+    type: 'Conveyor',
+    left: 100,
+    top: 100,
+    width: 100,
+    height: 20,
+    lineWidth: 1,
+    strokeStyle: 'black',
+    rollWidth: 12
+  }
+}

package/src/templates/crane.ts

@@ -0,0 +1,15 @@
+const crane = new URL('../../icons/crane.png', import.meta.url).href
+
+export default {
+  type: 'Crane',
+  description: 'Crane',
+  icon: crane,
+  group: 'SCS',
+  model: {
+    type: 'Crane',
+    left: 100,
+    top: 100,
+    width: 20,
+    height: 20
+  }
+}

package/src/templates/data-subscription.js

@@ -0,0 +1,16 @@
+const icon = new URL('../../icons/icon-data-subscription.png', import.meta.url).href
+
+export default {
+  type: 'data-subscription',
+  description: 'data-subscription',
+  group: 'etc',
+  icon,
+  model: {
+    type: 'data-subscription',
+    left: 10,
+    top: 10,
+    width: 100,
+    height: 100,
+    hidden: true
+  }
+}

package/src/templates/equipment.ts

@@ -0,0 +1,15 @@
+const equipment = new URL('../../icons/equipment.png', import.meta.url).href
+
+export default {
+  type: 'Equipment',
+  description: 'Equipment',
+  icon: equipment,
+  group: 'ECS',
+  model: {
+    type: 'Equipment',
+    left: 100,
+    top: 100,
+    width: 40,
+    height: 30
+  }
+}

package/src/templates/index.ts

@@ -0,0 +1,43 @@
+// import StockerCapacityCircle from './stocker-capacity-circle'
+import StockerCapacityBar from './stocker-capacity-bar'
+import ZoneCapacityBar from './zone-capacity-bar'
+
+import AGV from './agv'
+import Buffer from './buffer'
+import Equipment from './equipment'
+import OHT from './oht'
+import Stocker from './stocker'
+
+import Shuttle from './shuttle'
+import Port from './port'
+import Crane from './crane'
+import Shelf from './shelf'
+
+import agvLine from './agv-line'
+import ohtLine from './oht-line'
+import conveyor from './conveyor'
+
+import DataSubscription from './data-subscription'
+
+export default [
+  DataSubscription,
+
+  // StockerCapacityCircle,
+  StockerCapacityBar,
+  ZoneCapacityBar,
+
+  Buffer,
+  Stocker,
+  Equipment,
+
+  agvLine,
+  ohtLine,
+  conveyor,
+
+  AGV,
+  OHT,
+  Shuttle,
+  Crane,
+  Shelf,
+  Port
+]

package/src/templates/oht-line.ts

@@ -0,0 +1,15 @@
+const ohtLine = new URL('../../icons/oht-line.png', import.meta.url).href
+
+export default {
+  type: 'OHT Line',
+  description: 'OHT Line',
+  icon: ohtLine,
+  group: 'OCS',
+  model: {
+    type: 'OHTLine',
+    left: 200,
+    top: 100,
+    width: 100,
+    height: 20
+  }
+}