@fmsim/machine 0.0.49

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@fmsim/machine",
+  "description": "Layout View를 구성하는 설비(machine)들과 유닛을 구현한 모듈입니다.",
+  "author": "heartyoh",
+  "version": "0.0.49",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@fmsim:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heartyoh/fmsim.git",
+    "directory": "packages/machine"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^3.2.0",
+    "subscriptions-transport-ws": "^0.11.0"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@things-factory/builder": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.2.1",
+    "concurrently": "^8.0.1",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^5.0.4"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "59b7cd248a3b0e637d4e124a28829441c4b258b2"
+}

package/src/agv-line.ts

@@ -0,0 +1,59 @@
+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 AGVLine extends MCSTransport {
+  static get nature() {
+    return NATURE
+  }
+
+  containable(component: Component) {
+    return ['AGV'].includes(component.state.type)
+  }
+
+  get auxColor() {
+    return '#333'
+  }
+
+  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.setLineDash([3])
+
+    context.fillRect(0, 0, width, height)
+
+    if (width > height) {
+      context.moveTo(0, 0)
+      context.lineTo(width, 0)
+      // context.moveTo(0, height / 2)
+      // context.lineTo(width, height / 2)
+      context.moveTo(0, height)
+      context.lineTo(width, height)
+    } else {
+      context.moveTo(0, 0)
+      context.lineTo(0, height)
+      // context.moveTo(width / 2, 0)
+      // context.lineTo(width / 2, height)
+      context.moveTo(width, 0)
+      context.lineTo(width, height)
+    }
+
+    context.stroke()
+
+    context.translate(-left, -top)
+  }
+}
+
+Component.register('AGVLine', AGVLine)

package/src/agv.ts

@@ -0,0 +1,56 @@
+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 AGV 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(1, 0, width - 2, height, radius)
+    ctx.roundRect(GAP + 1, GAP, width - (GAP + 1) * 2, height - GAP * 2, radius - 1)
+
+    ctx.fill()
+    ctx.stroke()
+
+    ctx.beginPath()
+
+    // draw wheel metapore
+    ctx.strokeStyle = 'black'
+
+    ctx.moveTo(0, (height * 1) / 3)
+    ctx.lineTo(0, (height * 2) / 3)
+    ctx.moveTo(width, (height * 1) / 3)
+    ctx.lineTo(width, (height * 2) / 3)
+
+    ctx.stroke()
+
+    ctx.translate(-left, -top)
+  }
+}
+
+Component.register('AGV', AGV)

package/src/buffer.ts

@@ -0,0 +1,50 @@
+import { Component, ComponentNature } from '@hatiolab/things-scene'
+import MCSMachine from './mcs-machine'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [...MCSMachine.properties]
+}
+
+export default class Buffer extends MCSMachine {
+  static get nature() {
+    return NATURE
+  }
+
+  containable(component: Component) {
+    return super.containable(component) || ['Port'].includes(component.state.type)
+  }
+
+  render(ctx) {
+    var { lineWidth } = this.state
+    var { left, top, width, height } = this.bounds
+
+    const offset = Math.round(Math.min(width, height) * 0.2)
+
+    ctx.beginPath()
+    ctx.translate(left, top)
+
+    ctx.strokeStyle = this.auxColor
+    ctx.fillStyle = this.statusColor!
+    ctx.lineWidth = lineWidth || 1
+    ctx.lineCap = 'round'
+    ctx.setLineDash([])
+
+    ctx.moveTo(offset, 0)
+    ctx.lineTo(width - offset, 0)
+    ctx.lineTo(width, height / 2)
+    ctx.lineTo(width - offset, height)
+    ctx.lineTo(offset, height)
+    ctx.lineTo(0, height / 2)
+    ctx.lineTo(offset, 0)
+
+    ctx.translate(-left, -top)
+
+    ctx.fill()
+    ctx.stroke()
+  }
+}
+
+Component.register('Buffer', Buffer)

package/src/conveyor-join.ts

@@ -0,0 +1,208 @@
+import { Component, ComponentNature, Control, POSITION } from '@hatiolab/things-scene'
+import MCSTransport from './mcs-transport'
+import { ConveyorMixin } from './features/conveyor-mixin'
+import { normalizeAngle } from './utils/normalize-angle'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    ...MCSTransport.properties,
+    {
+      type: 'angle',
+      label: 'start-angle',
+      name: 'startAngle'
+    },
+    {
+      type: 'angle',
+      label: 'end-angle',
+      name: 'endAngle'
+    },
+    {
+      type: 'number',
+      label: 'ratio',
+      name: 'ratio'
+    },
+    {
+      type: 'number',
+      label: 'roll-width',
+      name: 'rollWidth'
+    }
+  ]
+}
+
+var controlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: Component) {
+    var { cx, cy, rx, ry, startAngle, endAngle } = component.model
+
+    var { x, y } = component.transcoordP2S(point.x, point.y)
+
+    const angle = (startAngle + endAngle) / 2
+
+    /* 원점으로부터 최대 거리 */
+    const dx = Math.abs(rx * Math.sin(angle))
+    const dy = Math.abs(ry * Math.cos(angle))
+    const distance = Math.sqrt(dx * dx + dy * dy)
+
+    /* 원점으로부터 현재 컨트롤 위치까지의 거리 */
+    const px = Math.abs(cx - x)
+    const py = Math.abs(cy - y)
+    const pdistance = Math.sqrt(px * px + py * py)
+
+    var ratio = (pdistance / distance) * 100
+
+    ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio)
+
+    component.set({ ratio })
+  }
+}
+
+var antiClockWiseControlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: Component) {
+    var { cx, cy } = component.model
+
+    var transcoorded = component.transcoordP2S(point.x, point.y)
+
+    var theta = Math.atan2(-(transcoorded.y - cy), transcoorded.x - cx)
+
+    if (theta > 0 && theta <= Math.PI / 2) theta = Math.PI / 2
+    if (theta < 0 && theta >= -Math.PI / 2) theta = -Math.PI / 2
+
+    const startAngle = (-theta + Math.PI / 2 - Math.PI * 2) % (Math.PI * 2)
+
+    component.set({ startAngle })
+  }
+}
+
+var clockwiseControlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: Component) {
+    var { cx, cy } = component.model
+
+    var transcoorded = component.transcoordP2S(point.x, point.y)
+
+    var theta = Math.atan2(-(transcoorded.y - cy), transcoorded.x - cx)
+
+    if (theta > 0) if (theta >= Math.PI / 2) theta = Math.PI / 2
+    if (theta < 0) if (theta <= -Math.PI / 2) theta = -Math.PI / 2
+
+    var endAngle = -theta + Math.PI / 2
+
+    component.set({ endAngle })
+  }
+}
+
+export default class ConveyorJoin extends ConveyorMixin(MCSTransport) {
+  get nature() {
+    return NATURE
+  }
+
+  containable(component: Component) {
+    return ['Shuttle', 'Port'].includes(component.state.type)
+  }
+
+  contains(x: number, y: number) {
+    var { cx, cy, rx, ry, ratio, startAngle, endAngle } = this.state
+    rx = Math.abs(rx)
+    ry = Math.abs(ry)
+
+    const normx = (x - cx) / (rx * 2 - 0.5)
+    const normy = (y - cy) / (ry * 2 - 0.5)
+    const ratiox = (x - cx) / ((rx / 100) * ratio * 2 - 0.5)
+    const ratioy = (y - cy) / ((ry / 100) * ratio * 2 - 0.5)
+
+    if (normx * normx + normy * normy < 0.25 && ratiox * ratiox + ratioy * ratioy > 0.25) {
+      const angle = normalizeAngle(Math.atan2(-normy, normx) - Math.PI / 2)
+
+      if (angle >= startAngle && angle <= endAngle) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { ratio = 50, cx, cy, rx, ry, startAngle = 0, endAngle = Math.PI / 2 } = this.state
+
+    context.beginPath()
+
+    startAngle -= Math.PI / 2
+    endAngle -= Math.PI / 2
+
+    /* outer ellipse and inner ellipse */
+    context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle, endAngle)
+    context.ellipse(cx, cy, Math.abs((rx / 100) * ratio), Math.abs((ry / 100) * ratio), 0, endAngle, startAngle, true)
+
+    context.lineTo(rx * Math.cos(startAngle) + cx, ry * Math.sin(startAngle) + cy)
+
+    this.drawFill(context)
+    this.drawStroke(context)
+  }
+
+  get path() {
+    var { cx, cy, rx, ry } = this.state
+
+    return [
+      {
+        x: cx - rx,
+        y: cy - ry
+      },
+      {
+        x: cx + rx,
+        y: cy - ry
+      },
+      {
+        x: cx + rx,
+        y: cy + ry
+      },
+      {
+        x: cx - rx,
+        y: cy + ry
+      }
+    ]
+  }
+
+  set path(path) {
+    var left_top = path[0]
+    var right_bottom = path[2]
+
+    this.set({
+      cx: left_top.x + (right_bottom.x - left_top.x) / 2,
+      cy: left_top.y + (right_bottom.y - left_top.y) / 2,
+      rx: (right_bottom.x - left_top.x) / 2,
+      ry: (right_bottom.y - left_top.y) / 2
+    })
+  }
+
+  get controls(): Control[] {
+    var { cx, cy, rx, ry, ratio, startAngle, endAngle } = this.state
+
+    var controls = [] as Control[]
+
+    controls.push({
+      x: cx + ((rx + (rx * ratio) / 100) / 2) * Math.sin(startAngle),
+      y: cy - ((ry + (ry * ratio) / 100) / 2) * Math.cos(startAngle),
+      handler: antiClockWiseControlHandler
+    })
+
+    controls.push({
+      x: cx + ((rx + (rx * ratio) / 100) / 2) * Math.sin(endAngle),
+      y: cy - ((ry + (ry * ratio) / 100) / 2) * Math.cos(endAngle),
+      handler: clockwiseControlHandler
+    })
+
+    const angle = (startAngle + endAngle) / 2
+    controls.push({
+      x: cx + ((rx * ratio) / 100) * Math.sin(angle),
+      y: cy - ((ry * ratio) / 100) * Math.cos(angle),
+      handler: controlHandler
+    })
+
+    return controls
+  }
+}
+
+Component.memoize(ConveyorJoin.prototype, 'controls', false)
+
+Component.register('ConveyorJoin', ConveyorJoin as any)

package/src/conveyor.ts

@@ -0,0 +1,101 @@
+import { Component, ComponentNature } from '@hatiolab/things-scene'
+import MCSTransport from './mcs-transport'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'conveyor-type',
+      name: 'conveyorType',
+      property: {
+        options: ['', 'conveyor', 'rail']
+      }
+    },
+    ...MCSTransport.properties
+  ],
+  help: 'scene/component/conveyor'
+}
+
+export default class Conveyor extends MCSTransport {
+  static get nature() {
+    return NATURE
+  }
+
+  get auxColor() {
+    return '#777'
+  }
+
+  containable(component: Component) {
+    return ['Shuttle', 'Port'].includes(component.state.type)
+  }
+
+  renderConveyor(ctx: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+
+    const rollWidth = Math.max(10, Math.min(width, height) / 2)
+
+    ctx.beginPath()
+    ctx.fillStyle = this.statusColor!
+    ctx.strokeStyle = this.auxColor!
+    ctx.lineWidth = 1
+
+    ctx.translate(left, top)
+    ctx.rect(0, 0, width, height)
+    ctx.fill()
+    ctx.stroke()
+
+    ctx.beginPath()
+    ctx.strokeStyle = '#aaa'
+
+    if (width > height) {
+      for (let d = 0; d < width; d += rollWidth) {
+        ctx.moveTo(d, 0)
+        ctx.lineTo(d, height)
+      }
+    } else {
+      for (let d = 0; d < height; d += rollWidth) {
+        ctx.moveTo(0, d)
+        ctx.lineTo(width, d)
+      }
+    }
+
+    ctx.stroke()
+
+    ctx.translate(-left, -top)
+  }
+
+  renderRtvRail(ctx: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+
+    ctx.beginPath()
+
+    ctx.translate(left, top)
+
+    ctx.fillStyle = this.statusColor!
+
+    if (width > height) {
+      ctx.fillRect(0, 0, width, (height * 1) / 5)
+      ctx.fillRect(0, (height * 4) / 5, width, (height * 1) / 5)
+    } else {
+      ctx.fillRect(0, 0, (width * 1) / 5, height)
+      ctx.fillRect((width * 4) / 5, 0, (width * 1) / 5, height)
+    }
+
+    ctx.translate(-left, -top)
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    const { conveyorType } = this.state
+
+    if (conveyorType == 'rail') {
+      this.renderRtvRail(ctx)
+    } else {
+      this.renderConveyor(ctx)
+    }
+  }
+}
+
+Component.register('Conveyor', Conveyor)

package/src/crane.ts

@@ -0,0 +1,72 @@
+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 Crane extends MCSVehicle {
+  static get nature() {
+    return NATURE
+  }
+
+  get auxColor() {
+    return 'black'
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+    const { x: cx, y: cy } = this.center
+    const rx = width / 2
+    const ry = height / 2
+
+    const round = Math.min(rx, ry) * 0.5
+
+    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(1, 0, width - 2, height, radius)
+    ctx.roundRect(GAP + 1, GAP, width - (GAP + 1) * 2, height - GAP * 2, radius - 1)
+    ctx.fill()
+    ctx.stroke()
+
+    ctx.beginPath()
+    ctx.arc(cx - left, cy - top, round, 0, Math.PI * 2)
+    ctx.stroke()
+
+    ctx.beginPath()
+    ctx.roundRect(width / 2 - (round * 2) / 4 - round / 8, height / 2 - (round * 6) / 5, round / 4, (round * 6) / 5, 1)
+    ctx.roundRect(width / 2 + (round * 2) / 4 - round / 8, height / 2 - (round * 6) / 5, round / 4, (round * 6) / 5, 1)
+
+    ctx.fill()
+    ctx.stroke()
+
+    ctx.beginPath()
+
+    // draw crane bar metapore
+    ctx.strokeStyle = 'black'
+    ctx.lineWidth = 3
+    ctx.lineCap = 'butt'
+
+    ctx.moveTo(GAP * 3, height / 2)
+    ctx.lineTo(width - GAP * 3, height / 2)
+
+    ctx.stroke()
+
+    ctx.translate(-left, -top)
+  }
+}
+
+Component.register('Crane', Crane)